/* ===================== 1) TOKENS / ROOT ===================== */

	:root {
		font-size:          14px;
	
		--sans:             ui-sans-serif,
							 system-ui,
							 -apple-system,
							 "Segoe UI",
							 Roboto,
							 "Helvetica Neue",
							 Arial,
							 "Noto Sans",
							 sans-serif;
		
		--body-bg-col:      #f6faf8;
		--ledger-frame-col:	#f4f0f0;

		--line-col:         #c1c1c1;
		--btn-line-col:     #d1d1d1;
		--inp-line-col:     #f1f1f1;
		
		--head-bg-col:      #e1e1e1;
		--btn-bg-col:		#fff;
		--txt-hint-col:     #e1e1e1;
		
		--ink-col: 			#111111;
		--inkless-col:      #f8f8f8;
		--black-col:        #000000;
		
		--focus-line-col:	#9ca3af;
		--focus-shad-col:	#9ca3af33;
		--error-shad-col:	#df3f3f;

		--active-col:		#3f8fdf;
		--disabled-col:		#8f8f8f;
		
		/* parent/child visible gaps */
		
							/* top right bottom left */
		--margin-guard:		 1px 1px 0px 1px;	/* minimum to be effective */
		
		--page-padding:		 3px;
		--frame-margin:		 3px;
		--frame-padding:     6px;
		--child-nest-margin: 2px;	/* visual gap is doubled: 4px --> 8px gap */
		
		/* sizing */
		--row-h:            30px;	/* master row height */
		--field-h:          26px;	/* input / field height */
		--row-pad:
			calc( ( var( --row-h ) - var( --field-h ) ) / 2 );
	
		/* spacing */
		--cell-pad-i:       2px;	/* base th / td inline padding */
		--field-pad-i:      6px;	/* field horizontal padding */
		--field-pad-v:      0px;	/* field vertical padding */
		--field-border:     1px;	/* field border width */
		
		/* derived: make plain-text start / end align with field text */
		--text-inset-i:
			calc( var( --cell-pad-i ) + var( --field-border ) + var( --field-pad-i ) );
	}
	
	/* ===================== 2) BASE ===================== */
	
	*, *::before, *::after { box-sizing: border-box; }
	html { font-family: var( --sans ); }
	body {
		margin:             0;
		line-height:        1.0;
		overflow-x:         hidden;
		
		background-color:	var( --body-bg-col );
	}
	main.page { 
		padding: 			var( --page-padding ); 
	}
	
	/* ===================== 3) CONTAINERS ===================== */
	
	/* Invisible guard that protects child margins from vertical collapse */
	.margin-guard { 
		padding:			var( --margin-guard );
	}
	.margin-guard-x { 
		
		border-width:		var( --margin-guard );	
		border-style: 		solid;
		border-color:		var( --line-col );
	}
	
	.ledger-frame {
		/* frame chrome */
		border:             1px solid var( --line-col );
		border-radius:      10px;
		background-color:	var( --ledger-frame-col );

		/* parent/child spacing */
		margin:            	var( --frame-margin );
		padding:            var( --frame-padding );

		/* width behavior */
		min-inline-size:    0;		/* possible dead weight */
		overflow:           hidden;	/* hide inner scroller edges */
	}

	/* Toolbar */
	.toolbar-row {
		display:            flex;
	}
	.toolbar-right {
		display:            flex;
		margin-left:        auto;	/* push right cluster to the edge */
	}
	
	.scroller {
		margin:				var( --child-nest-margin );
		padding:            0;
		min-inline-size:    0;		/* might someday sit in flex row */
		overflow:           auto;	/* scrolling happens here */
	}

	/* Outer wrapper: owns the spacing relative to the frame */
	.io-log-wrap {
		margin: 		var( --frame-margin );
		padding: 		0;
		border: 		0;
	}
	.ledger-frame .io-log-wrap {
		margin: 		var( --child-nest-margin );
	}
	
	/* Textarea fills wrapper without spilling past borders */
	.io-log-wrap > .log-textarea {
		display: 		block;
		box-sizing: 	border-box;		/* include padding/border in the width */
		width: 			100%;
		max-width: 		100%;			/* guards against browser resize oddities */
		margin: 		0;				/* wrapper owns the outer spacing */
		resize: 		vertical;		/* avoids horizontal resize handle causing width drift */
	}
		
	/* ===================== 4) TABLE BASE ===================== */
	
	table {
		border:             1px solid var( --line-col );
		border-radius:      6px;               /* rounded table corners */
		overflow:           hidden;            /* clip to rounded corners */
		border-collapse:    separate;
		border-spacing:     0;
		table-layout:       fixed;             /* enforce column widths */
		width:              max-content;       /* grow to content so scroller scrolls */
		min-width:          100%;              /* but not smaller than scroller */
		font-variant-numeric: tabular-nums;

		background-color:	var( --body-bg-col );
	}
	.nowrap th, .nowrap td { white-space: nowrap }
	
	/* Grid lines */
	th + th  { border-left:   1px solid var( --line-col ); }
	thead th { border-bottom: 1px solid var( --line-col ); }
	
	/* Emphasis lines (totals boundaries) */
	thead tr[ data-row="head" ] th[ data-col="totals" ] {
		border-left-color:    var( --black-col );
		border-bottom-color:  var( --black-col );
	}
	thead tr[ data-row="subhead" ] th {
		border-bottom-color:  var( --black-col );
	}
	
	/* Column divider for totals */
	tbody td[ data-col="totals" ] { border-left: 1px solid var( --black-col ); }
	
	/* Row separators */
	tbody tr[ data-row="sum" ] td { border-top: 1px solid var( --black-col ); }
	tbody tr[ data-row="eop" ] td { border-top: 1px solid var( --line-col ); }
	
	/* ===================== 5) COLUMN ALIGNMENT SYSTEM ===================== */
	
	table.ledger-table {
		--align-date:       left;
		--align-desc:       left;
		--align-amount:     right;
		--align-tva:        right;
		--align-totals:     right;
	
		--font-weight:      normal;
		--font-style:       normal;
	}
	:where( th, td )[ data-col="date" ]    { text-align: var( --align-date );   }
	:where( th, td )[ data-col="desc" ]    { text-align: var( --align-desc );   }
	:where( th, td )[ data-col="amount" ]  { text-align: var( --align-amount ); }
	:where( th, td )[ data-col="tva" ]     { text-align: var( --align-tva );    }
	:where( th, td )[ data-col="totals" ]  { text-align: var( --align-totals ); }
	
	/* Head rows: TVA left like Amount */
	thead tr[ data-row="head" ],
	thead tr[ data-row="subhead" ] {
		--align-amount:     left;
		--align-tva:        left;
	}
	/* EOP row: TVA centered */
	tbody tr[ data-row="eop" ] { --align-tva: center }
	
	/* Row-typography hooks */
	thead tr[ data-row="subhead" ]     { --font-weight: bold; }  /* entire subhead bold */
	:where( th, td )[ data-col="tva" ] { --font-style: italic; } /* TVA italic everywhere */
	
	/* Sum row typography (grouped) */
	tbody tr[ data-row="sum" ] { --font-weight: bold }
	:where( th, td ) { 
		font-style: var( --font-style ); 
		font-weight: var( --font-weight );
	}
	
	/* ===================== 6) CELL SIZING & VERTICAL ALIGN ===================== */
	
	th, td {
		padding-block:        0;
		padding-inline-start: var( --cell-pad-i );
		padding-inline-end:   var( --cell-pad-i );
		text-align:           left;
		vertical-align:       middle;
	}
	
	/* equal row height */
	td:has( input ), th:has( input ) { 
		padding-block:      var( --row-pad );
	}
	td:not( :has( input ) ), th:not( :has( input ) ) {
		line-height:        var( --field-h );
		padding-block:      var( --row-pad );
	}
	
	/* horizontal lineup for all non-input text (headers + cells) */
	:where( th, td ):not( :has( input ) ) {
		padding-inline-start: var( --text-inset-i );
		padding-inline-end:   var( --text-inset-i );
	}
	
	/* ===================== 7) INPUTS ===================== */
	
	.cell-input {
		width:              100%;
		padding-inline:     var( --field-pad-i );
		padding-block:      var( --field-pad-v );
		border:             var( --field-border ) solid var( --inp-line-col );
		border-radius:      4px;
		font:               inherit;
		line-height:        1.2;
		background:         var( --btn-bg-col );
		block-size:         var( --field-h );
		
		font-variant-numeric:  tabular-nums;
		font-feature-settings: "tnum" 1;
	}
	
	/* Normalize placeholder to match input font & numeric features */
	.cell-input::placeholder {
		color:              var( --txt-hint-col );
		font:               inherit;
		font-style:         inherit;
		font-weight:        inherit;
		
		font-variant-numeric:  tabular-nums;
		font-feature-settings: "tnum" 1;
	}
	.cell-input.amount { text-align: right }
	.cell-input:focus {
		outline:            none;
		border:             1px solid var( --focus-line-col );
		box-shadow:         0 0 0 2px var( --focus-shad-col );
	}
	
	/* Disabled state: same border color & radius as enabled, light-grey background */
	.cell-input:disabled {
		opacity:            1;
		color:              inherit;
		background-color:   var( --inkless-col );
		border-color:       var( --inp-line-col );
		border-radius:      4px;               /* do NOT inherit — keep local rounding */
		cursor:             default;
		-webkit-text-fill-color: currentColor;
	}
	
	/* Error highlight still wins */
	.cell-input.input-error {
		box-shadow:         0 0 0 1px var( --error-shad-col ) inset;
	}
	
	/* ===================== 8) BUTTONS & TEXTAREA ===================== */
	
	button.btn {
		appearance:             none;
		-webkit-appearance:     none;          /* keep: nukes iOS default styles */
		display:                inline-flex;   /* easy centering */
		align-items:            center;
		justify-content:        center;
		box-sizing:             border-box;    /* sizing stays sane */
		color:                  var( --ink-col );
		background:             var( --btn-bg-col );
		border:                 1px solid var( --btn-line-col );
		border-radius:          6px;
		font:                   inherit;
		line-height:            1;
		text-align:             center;
		cursor:                 pointer;
	}
	button.page-btn { 
		margin:				var( --child-nest-margin );	
		padding: 			6px 8px;
	}
	button.row-btn  { 
		padding: 			3px 6px;
	}
	button.btn.is-enabled  { color: var( --ink-col ); }
	button.btn.is-active   { color: var( --active-col ); }
	button.btn.is-disabled { color: var( --disabled-col ); }
	
	textarea { 
		font:       		inherit; 
		font-size:  		10px;
		display:    		block;
		margin:     		0;
	}
	.log-textarea {
		padding:            5px;
		border:             1px solid var( --line-col );
		border-radius:      4px;
	}
	
	/* ===================== 9) HEADER SPECIALS ===================== */

	thead th { background: var( --head-bg-col ); }
	
	thead tr[ data-row="head" ] > th                { text-align: center; }
	thead tr[ data-row="head" ] > th:first-child    { text-align: left; }
	thead tr[ data-row="head" ] > th:first-child,
	thead tr[ data-row="head" ] > th[ colspan="2" ] { font-weight: bold; }
	thead tr[ data-row="head" ] > th:first-child,
	thead tr[ data-row="head" ] > th:last-child     { font-style: italic; }
	
	/* APR box & Description background tweak */
	thead tr[ data-row="head" ] > th[ data-col="date" ] { background: var( --inkless-col ); }
	thead tr[ data-row="head" ] > th[ data-col="desc" ] { background: var( --inkless-col ); }
	
	/* ===================== 10) ROW SPECIALS ===================== */
	
	/* Carry row: make Desc and Totals italic (properly scoped) */
	tbody tr[ data-row="carry" ] > td[ data-col="desc" ],
	tbody tr[ data-row="carry" ] > td[ data-col="totals" ] {
		--font-style:  italic;
	}

	/* SUM row: italic everywhere; Date & Totals not bold; background tweak */
	tbody tr[ data-row="sum" ] {
		--font-style:       italic;
	}
	tbody tr[ data-row="sum" ] :is( [ data-col="date" ], [ data-col="totals" ] ) {
		--font-weight:      normal;
	}
	tbody tr[ data-row="sum" ] > td:is( [ data-col="date" ], [ data-col="desc" ] ) {
		background:         var( --head-bg-col );
	}
	
	/* Inkless utilities */
	table.ledger-table tbody td.inkless {
		background:         var( --inkless-col );
	}
	.inkless .cell-input {
		background:         var( --inkless-col );
	}
	
	/* CONTRIBUTION row — Totals cell centered + inkless (delete button host) */
	tbody tr[ data-row="contrib" ] td[ data-col="totals" ] {
		text-align:         left;
		background:         var( --inkless-col );
	}
	
	/* EOP row — center everything; italic everything; Totals not italic & hint color */
	tbody tr[ data-row="eop" ] {
		/* Use the column-alignment system to center all cells */
		--align-date:       center;
		--align-desc:       center;
		--align-amount:     center;
		--align-tva:        center;
		--align-totals:     center;
	
		/* Italic by default on the row */
		--font-style:       italic;
	}
	/* Totals cell exception: keep center alignment, drop italic, hint color */
	tbody tr[ data-row="eop" ] td[ data-col="totals" ] {
		--font-style:       none;
		color:              var( --txt-hint-col );
	}

	/* ===================== DEBUG ===================== */
/* 
	thead th[ data-col="totals" ] { outline: 2px dashed orange !important; }
	tbody td[ data-col="totals" ] { outline: 2px dashed red    !important; }
*/

	/* ===================== PRINT (lightweight) ===================== */
	
	@media print {
	
		@page { 
			margin: 0.5in 0.5in; /* Specifically required for Safari */
		}
		
		.scroller { 
			overflow: visible !important; 
		}

		.print-title { margin: 0 0 12px 0; font-size: 20px; font-weight: 600; }
		
		.print-addendum { margin-top: 12px; font-size: 20px; }

	}