/*
 * Trilo Stylesheet (css/style.css)
 * Aesthetic direction: "Sorting bins and stencil labels" on kraft paper.
 * Strictly follows DESIGN.md: self-hosted woff2 fonts, kraft/ink/material
 * variables, thin ink borders, subtle paper grain, asymmetric splits, ruled
 * logbook rows, >= 44x44 px touch targets, zero gradients/blobs/glassmorphism.
 */

/* --- 1. Self-Hosted Fonts (/fonts/*.woff2) --- */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-400-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C4;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-400-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-700-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/atkinson-hyperlegible-700-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/barlow-semi-condensed-600-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/barlow-semi-condensed-600-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/barlow-semi-condensed-700-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/barlow-semi-condensed-700-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
font-family: 'Saira Stencil One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/saira-stencil-one-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: 'Saira Stencil One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/saira-stencil-one-400-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+1E00-1EFF;
}

/* --- 2. Palette & Tokens --- */
:root,
[data-theme="light"] {
--kraft: #E4D2AE;
--sheet: #EFE3C8;
--sheet-alt: #E8D9B8;
--ink: #1B1A17;
--ink-soft: #464137;
--line: rgba(27, 26, 23, 0.25);
--plastic: #E2B21F;
--organic: #4F7A2B;
--glass: #2A8581;
--metal: #56626E;
--paper: #B88A55;
--ewaste: #B8392B;
--textile: #C4693D;
--other: #6A6156;
--on-ink: #F5ECD8;
--font-stencil: 'Saira Stencil One', Georgia, serif;
--font-head: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
--font-body: 'Atkinson Hyperlegible', Georgia, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
--kraft: #14130F;
--sheet: #1F1D17;
--sheet-alt: #28251D;
--ink: #F2E8CF;
--ink-soft: #BFB399;
--line: rgba(242, 232, 207, 0.22);
--plastic: #ECC23E;
--organic: #72A846;
--glass: #45B0AA;
--metal: #8494A3;
--paper: #CFA06A;
--ewaste: #DC5B4B;
--textile: #DD8255;
--other: #9A8F80;
--on-ink: #14130F;
}

/* --- 3. Base Reset & Kraft Grain --- */
*,
*::before,
*::after {
 box-sizing: border-box;
}
[hidden] {
 display: none !important;
}

html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
background-color: var(--kraft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
color: var(--ink);
font-family: var(--font-body);
line-height: 1.48;
padding-bottom: 76px;
}

h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 700;
line-height: 1.15;
margin: 0 0 0.45rem;
letter-spacing: 0.01em;
}

p {
margin: 0 0 0.65rem;
}

a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 2px;
}

:focus-visible {
outline: 2.5px solid var(--ink);
outline-offset: 2px;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.75rem 1rem;
background: var(--ink);
color: var(--on-ink);
z-index: 1000;
font-weight: 700;
}
.skip-link:focus {
left: 0.5rem;
top: 0.5rem;
}

/* --- 4. Top Header Bar --- */
.top-header {
border-bottom: 2px solid var(--ink);
background: var(--sheet);
padding: 0.6rem 0.9rem;
}

.top-header-inner {
max-width: 1340px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}

.brand-block {
display: flex;
align-items: baseline;
gap: 0.65rem;
flex-wrap: wrap;
}

.logo-stencil {
font-family: var(--font-stencil);
font-size: 1.75rem;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
color: var(--ink);
}

.household-strip {
font-size: 0.86rem;
color: var(--ink-soft);
border-left: 2px solid var(--ink);
padding-left: 0.55rem;
}

.header-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}

.mode-badge {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0.2rem 0.65rem;
font-family: var(--font-head);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1.5px solid var(--ink);
}
.mode-badge.is-cloud {
background: var(--organic);
color: #FAF5E8;
}
[data-theme="dark"] .mode-badge.is-cloud {
color: #14130F;
}
.mode-badge.is-local {
background: var(--plastic);
color: #1B1A17;
}

@media (max-width: 520px) {
 .top-header { padding: 0.45rem 0.65rem; }
 .logo-stencil { font-size: 1.45rem; }
 .household-strip { font-size: 0.78rem; }
 .btn-compact { min-height: 44px; padding: 0.25rem 0.5rem; font-size: 0.8rem; }
 .screen-head { margin-bottom: 0.75rem; padding-bottom: 0.55rem; }
 .focal-number { font-size: 2.2rem; }
 .bin-svg { width: 76px; height: 100px; }
}
/* --- 5. Buttons & Form Controls (>= 44x44 px targets) --- */
button,
input,
select,
textarea {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--ink);
}

.btn-ink {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
min-width: 44px;
padding: 0.45rem 0.85rem;
border: 1.5px solid var(--ink);
background: var(--ink);
color: var(--on-ink);
font-family: var(--font-head);
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
border-radius: 0;
}
.btn-ink:hover:not(:disabled) {
opacity: 0.9;
}
.btn-ink:disabled {
opacity: 0.45;
cursor: not-allowed;
}

.btn-ghost {
background: var(--sheet);
color: var(--ink);
}
.btn-ghost:hover:not(:disabled) {
background: var(--sheet-alt);
opacity: 1;
}

.btn-compact {
padding: 0.35rem 0.65rem;
font-size: 0.88rem;
}

.btn-danger-solid {
background: var(--ewaste);
color: #FAF5E8;
border-color: var(--ink);
}
[data-theme="dark"] .btn-danger-solid {
color: #14130F;
}

.btn-row-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-height: 44px;
min-width: 44px;
padding: 0.35rem 0.7rem;
border: 1.5px solid var(--ink);
background: var(--sheet);
color: var(--ink);
font-family: var(--font-head);
font-weight: 600;
cursor: pointer;
border-radius: 2px;
}
.btn-row-action:hover {
background: var(--sheet-alt);
}
.btn-danger-ink {
border-color: var(--ewaste);
}
.btn-resolve {
background: var(--organic);
color: #FAF5E8;
}
[data-theme="dark"] .btn-resolve {
color: #14130F;
}

label {
display: block;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
width: 100%;
min-height: 44px;
padding: 0.45rem 0.65rem;
border: 1.5px solid var(--ink);
border-radius: 0;
background: var(--sheet);
color: var(--ink);
}

textarea {
min-height: 78px;
resize: vertical;
}

/* --- 6. App Shell: Mobile Bottom Nav + Desktop Two-Column Layout --- */
.app-shell {
max-width: 1340px;
margin: 0 auto;
padding: 0.9rem;
}

.desktop-rail {
display: none;
}

.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
display: grid;
grid-template-columns: repeat(6, 1fr);
background: var(--sheet);
border-top: 2px solid var(--ink);
}

.nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
min-height: 54px;
padding: 0.25rem 0.2rem;
border: 0;
border-right: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-family: var(--font-head);
font-weight: 600;
font-size: 0.76rem;
cursor: pointer;
}
.nav-item:last-child {
border-right: 0;
}
.nav-item.is-active {
background: var(--ink);
color: var(--on-ink);
}

@media (min-width: 960px) {
body {
 padding-bottom: 1.5rem;
}
.bottom-nav {
 display: none;
}
.app-shell {
 display: grid;
 grid-template-columns: 208px minmax(0, 1fr);
 gap: 1.4rem;
 align-items: start;
 padding: 1.25rem 1.4rem;
}
.desktop-rail {
 display: flex;
 flex-direction: column;
 border: 1.5px solid var(--ink);
 background: var(--sheet);
 position: sticky;
 top: 1rem;
}
.desktop-rail .nav-item {
 flex-direction: row;
 justify-content: flex-start;
 gap: 0.6rem;
 min-height: 46px;
 padding: 0.55rem 0.85rem;
 font-size: 0.96rem;
 border-right: 0;
 border-bottom: 1px solid var(--line);
}
.desktop-rail .nav-item:last-child {
 border-bottom: 0;
}
}

/* --- 7. Screen Headers & Single Oversized Focal Stencil Number --- */
.screen-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
padding-bottom: 0.85rem;
margin-bottom: 1.15rem;
border-bottom: 2px solid var(--ink);
}

.screen-title {
font-size: 1.65rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.screen-subtitle {
color: var(--ink-soft);
margin: 0;
max-width: 58ch;
}

.focal-metric {
text-align: right;
}

.focal-number {
display: block;
font-family: var(--font-stencil);
font-size: 2.75rem;
line-height: 0.95;
font-variant-numeric: tabular-nums;
color: var(--ink);
}

.focal-caption {
display: block;
font-size: 0.8rem;
color: var(--ink-soft);
max-width: 26ch;
}

/* --- 8. Asymmetric Splits & Ledger Sheets (No 3-equal-card rows, no nested cards) --- */
.split-bins-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}

@media (min-width: 860px) {
.split-bins-layout {
 grid-template-columns: 1.42fr 1fr;
 align-items: start;
}
}

.split-asymmetric-two {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 860px) {
.split-asymmetric-two {
 grid-template-columns: 1.25fr 0.95fr;
 align-items: start;
}
}

.ledger-sheet {
background: var(--sheet);
border: 1.5px solid var(--ink);
padding: 1rem 1.05rem;
}

.notice-strip {
border: 1.5px solid var(--ink);
border-left: 7px solid var(--plastic);
background: var(--sheet);
padding: 0.65rem 0.9rem;
margin-bottom: 1rem;
font-size: 0.92rem;
}

/* --- 9. Memorable Element: Row of 8 Stencil SVG Sorting Bins --- */
.bins-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0.75rem 0 1rem;
}

@media (min-width: 520px) {
.bins-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

.bin-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0.35rem 0.6rem;
background: var(--kraft);
border: 1.5px solid var(--ink);
border-radius: 10px 10px 3px 3px;
cursor: pointer;
text-align: center;
}
.bin-card:hover {
background: var(--sheet-alt);
}
.bin-card.is-selected {
outline: 3px solid var(--ink);
outline-offset: -3px;
background: var(--sheet-alt);
}

.bin-svg {
width: 92px;
height: 122px;
display: block;
}

.bin-fill-rect {
transition: y 0.42s ease-out, height 0.42s ease-out;
}

.bin-svg-stencil {
font-family: var(--font-head);
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.06em;
fill: var(--ink);
}

.bin-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
margin-top: 0.25rem;
width: 100%;
}

.bin-name-row {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: var(--font-head);
font-weight: 600;
font-size: 0.84rem;
}

.bin-mini-icon {
width: 15px;
height: 15px;
}

.bin-kg {
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
}

/* Weekly KPI ruled strip (2x2 ledger cells, never 3 identical floating cards) */
.kpi-ruled-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1.5px solid var(--ink);
margin-top: 0.75rem;
}
.kpi-cell {
padding: 0.65rem 0.55rem;
border-bottom: 1px solid var(--line);
}
.kpi-cell:nth-child(odd) {
border-right: 1px solid var(--line);
}
.kpi-label {
display: block;
font-size: 0.8rem;
color: var(--ink-soft);
}
.kpi-val {
font-family: var(--font-head);
font-weight: 700;
font-size: 1.28rem;
font-variant-numeric: tabular-nums;
}

.goal-bar-wrap {
margin-top: 0.7rem;
}
.goal-track {
height: 12px;
border: 1.5px solid var(--ink);
background: var(--kraft);
}
.goal-fill {
height: 100%;
background: var(--organic);
transition: width 0.35s ease-out;
}

/* Quick-log form & Stamp animation */
.form-row-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.field-block {
margin-bottom: 0.7rem;
}
.form-hint {
font-size: 0.82rem;
color: var(--ink-soft);
margin-bottom: 0.75rem;
}

.quick-submit-row {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
}

.ink-stamp {
display: inline-block;
padding: 0.25rem 0.65rem;
border: 2.5px solid var(--organic);
color: var(--organic);
font-family: var(--font-stencil);
font-size: 1.05rem;
letter-spacing: 0.08em;
transform: rotate(-5deg) scale(1);
}
.ink-stamp.is-active {
animation: stamp-thud 0.26s ease-out;
}
@keyframes stamp-thud {
0% { transform: rotate(-10deg) scale(1.35); opacity: 0.2; }
100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}

/* --- 10. Stencil Material Tags & Status Stamps --- */
.stencil-tag {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.16rem 0.55rem 0.16rem 0;
border: 1px solid var(--ink);
background: var(--sheet);
font-family: var(--font-head);
font-weight: 700;
font-size: 0.82rem;
line-height: 1.2;
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
.stencil-swatch {
width: 7px;
align-self: stretch;
min-height: 18px;
border-right: 1px solid var(--ink);
}
.tag-icon {
width: 14px;
height: 14px;
}

.dest-stamp,
.status-stamp,
.action-pill,
.demo-stamp,
.type-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.5rem;
border: 1px solid var(--ink);
font-family: var(--font-head);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.dest-stamp.is-diverted,
.status-resolved {
border-left: 5px solid var(--organic);
}
.dest-stamp.is-baseline,
.status-open {
border-left: 5px solid var(--ewaste);
}
.dest-stamp.is-municipal,
.status-seen {
border-left: 5px solid var(--plastic);
}
.demo-stamp {
background: var(--plastic);
color: #1B1A17;
}

/* --- 11. Filter Bars, Ruled Logbook Tables & Item Rows --- */
.filter-bar {
display: grid;
grid-template-columns: 1fr;
gap: 0.55rem;
padding: 0.75rem;
border: 1.5px solid var(--ink);
background: var(--sheet);
margin-bottom: 1rem;
}
@media (min-width: 680px) {
.filter-bar {
 grid-template-columns: 1.5fr 1fr 1fr auto;
 align-items: end;
}
}

.ledger-table-wrap {
overflow-x: auto;
border: 1.5px solid var(--ink);
background: var(--sheet);
}

.ledger-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.ledger-table th {
text-align: left;
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
font-size: 0.82rem;
letter-spacing: 0.04em;
padding: 0.6rem 0.65rem;
border-bottom: 2px solid var(--ink);
background: var(--sheet-alt);
}
.ledger-table td {
padding: 0.6rem 0.65rem;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.col-num {
white-space: nowrap;
}
.ledger-note {
font-size: 0.83rem;
color: var(--ink-soft);
margin-top: 0.2rem;
}
.empty-row,
.empty-state-msg {
padding: 1.35rem 0.9rem;
color: var(--ink-soft);
font-style: italic;
}

.ruled-list {
border-top: 1.5px solid var(--ink);
background: var(--sheet);
border-left: 1.5px solid var(--ink);
border-right: 1.5px solid var(--ink);
}
.ruled-item {
padding: 0.85rem 0.95rem;
border-bottom: 1.5px solid var(--ink);
}
.ruled-item-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.ruled-item-title-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
}
.ruled-item-title {
font-size: 1.12rem;
margin: 0;
}
.ruled-item-body {
margin: 0.25rem 0;
}
.ruled-item-tip {
margin: 0.2rem 0 0;
font-size: 0.88rem;
color: var(--ink-soft);
}
.tag-strip {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.35rem 0;
}
.ruled-item-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.55rem;
}
.hood-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--ink-soft);
}

/* Rule helper & checkbox chips */
.check-grid {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.5rem 0 0.75rem;
}
.check-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
padding: 0.3rem 0.65rem;
border: 1px solid var(--ink);
background: var(--kraft);
font-weight: 400;
margin: 0;
cursor: pointer;
}
.check-chip input {
width: 18px;
height: 18px;
min-height: 18px;
margin: 0;
}
.helper-output {
margin-top: 0.8rem;
padding: 0.75rem;
border: 1.5px solid var(--ink);
border-left: 6px solid var(--organic);
background: var(--kraft);
}
.helper-result-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}

/* Collapsible Add Forms */
details.drawer-sheet {
border: 1.5px solid var(--ink);
background: var(--sheet);
margin-bottom: 1rem;
}
details.drawer-sheet summary {
min-height: 46px;
padding: 0.65rem 0.95rem;
font-family: var(--font-head);
font-weight: 700;
font-size: 1.05rem;
cursor: pointer;
list-style: square inside;
}
.drawer-body {
padding: 0.85rem 0.95rem 1rem;
border-top: 1px solid var(--line);
}

/* --- 12. Success Measures Ledger & Breakdown Bars --- */
.indicator-stack {
border-top: 2px solid var(--ink);
}
.indicator-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 0.9rem 0;
border-bottom: 1.5px solid var(--ink);
}
.indicator-big {
font-family: var(--font-stencil);
font-size: 2rem;
font-variant-numeric: tabular-nums;
}
.ledger-bar-row {
margin-bottom: 0.65rem;
}
.ledger-bar-head {
display: flex;
justify-content: space-between;
font-size: 0.88rem;
margin-bottom: 0.2rem;
font-variant-numeric: tabular-nums;
}
.ledger-bar-track {
height: 10px;
border: 1px solid var(--ink);
background: var(--kraft);
}
.ledger-bar-fill {
height: 100%;
}

/* --- 13. Accessible Pagination Bar (js/pagination.js) --- */
.pager-nav {
margin-top: 0.9rem;
padding: 0.7rem 0.85rem;
border: 1.5px solid var(--ink);
background: var(--sheet);
display: flex;
flex-direction: column;
gap: 0.65rem;
}
@media (min-width: 720px) {
.pager-nav {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
}
}
.pager-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
}
.pager-status {
margin: 0;
font-weight: 700;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.pager-size-wrap {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.pager-size-label {
margin: 0;
font-size: 0.86rem;
}
.pager-size-select {
width: auto;
min-width: 68px;
min-height: 44px;
}
.pager-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
}
.pager-btn {
min-width: 44px;
min-height: 44px;
padding: 0.35rem 0.65rem;
border: 1.5px solid var(--ink);
background: var(--kraft);
color: var(--ink);
font-family: var(--font-head);
font-weight: 700;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.pager-btn.is-current {
background: var(--ink);
color: var(--on-ink);
}
.pager-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pager-ellipsis {
padding: 0 0.35rem;
font-weight: 700;
}

/* --- 14. Toast & Guided Tour Dock --- */
.toast-banner {
position: fixed;
top: 0.75rem;
right: 0.75rem;
max-width: 360px;
padding: 0.7rem 0.95rem;
border: 2px solid var(--ink);
border-left: 8px solid var(--organic);
background: var(--sheet);
color: var(--ink);
font-weight: 700;
z-index: 120;
display: none;
}
.toast-banner.is-visible {
display: block;
}
.toast-banner.is-error {
border-left-color: var(--ewaste);
}

.tour-highlight {
outline: 3px dashed var(--ewaste) !important;
outline-offset: 4px !important;
}

.tour-dock {
position: fixed;
left: 0.75rem;
right: 0.75rem;
bottom: 64px;
max-width: 780px;
margin: 0 auto;
border: 2px solid var(--ink);
background: var(--sheet);
z-index: 110;
}
@media (min-width: 960px) {
.tour-dock {
 bottom: 1rem;
}
}
.tour-progress-track {
height: 6px;
background: var(--kraft);
border-bottom: 1px solid var(--ink);
}
.tour-progress-fill {
height: 100%;
background: var(--plastic);
}
.tour-dock-body {
padding: 0.8rem 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.tour-copy {
flex: 1 1 320px;
}
.tour-step-tag {
display: inline-block;
font-family: var(--font-head);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
padding: 0.1rem 0.45rem;
background: var(--ink);
color: var(--on-ink);
margin-right: 0.45rem;
}
.tour-caption {
margin: 0.3rem 0 0;
font-size: 0.9rem;
}
.tour-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

/* --- 15. Reduced Motion & Print Styles --- */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.001ms !important;
 transition-duration: 0.001ms !important;
}
}

@media print {
body {
 background: #FFFFFF !important;
 color: #000000 !important;
 padding: 0;
}
.top-header,
.desktop-rail,
.bottom-nav,
.tour-dock,
.toast-banner,
.no-print {
 display: none !important;
}
.app-shell {
 display: block;
 padding: 0;
}
.ledger-sheet {
 border: 1px solid #000000;
 background: #FFFFFF;
}
}