/* HappyFarmer PriceDesk owner screen (/secure). One token set, light and dark follow the OS. Open Sans is served from our own origin. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/brand/OpenSans-variable-latin.woff2) format('woff2')}
:root{
 color-scheme:light dark;
 --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 --bg:#f4f4f4;--surface:#ffffff;--surface-2:#f9f9f9;--sunken:#ececf1;
 --line:rgb(225 225 225);--line-strong:#808089;
 --text:#2a2b2a;--text-2:#4a4b4a;--text-3:#5c5d5f;
 --accent:#903089;--accent-hover:#7a2674;--on-accent:#ffffff;--link:#7a2674;--focus:#20254a;
 --side-bg:#20254a;--side-text:#f4f4f8;--side-muted:#c9cce4;--side-active:#323976;--side-line:#323976;
 --side-badge-bg:#f2c6ee;--side-badge-text:#20254a;
 --warn-bg:#fbf2dc;--warn-line:#e5d3a3;--warn-text:#6b4c10;
 --ok-bg:#e7f2e5;--ok-line:#c9dfc4;--ok-text:#1f6b33;
 --info-bg:#e4edfa;--info-text:#14539f;
 --flag-bg:#f6e9f5;--flag-line:#dcb6d9;--flag-text:#7a2674;
 --up:#b40c1c;--down:#2c7e3f;--danger:#b40c1c;
 --series-1:#903089;--series-2:#0b78ae;
 --shadow:0 1px 2px rgba(32,37,74,.08);--backdrop:rgba(16,19,39,.55);
 font-family:var(--sans);background:var(--bg);color:var(--text);font-synthesis:none;-webkit-font-smoothing:antialiased}
@media(prefers-color-scheme:dark){:root{
 --bg:#101327;--surface:#191d38;--surface-2:#1e2342;--sunken:#272c50;
 --line:#2e3459;--line-strong:#6b7099;
 --text:#f1f2f8;--text-2:#c4c7dc;--text-3:#a9adc8;
 --accent:#d58ad0;--accent-hover:rgb(228 166 224);--on-accent:#1a0d19;--link:rgb(228 166 224);--focus:#5cc4f0;
 --side-bg:#0a0c1a;--side-text:#f1f2f8;--side-muted:#b4b8d4;--side-active:#252a52;--side-line:#252a52;
 --side-badge-bg:#f2c6ee;--side-badge-text:#20254a;
 --warn-bg:#3a2e14;--warn-line:#5c4920;--warn-text:#f1d08c;
 --ok-bg:#16301f;--ok-line:#285240;--ok-text:#9adbaf;
 --info-bg:#1f2a4d;--info-text:#b9d4f7;
 --flag-bg:#3a2140;--flag-line:#6a4270;--flag-text:#f2c6ee;
 --up:#ff9fa5;--down:#86d6a0;--danger:#ff9fa5;
 --series-1:#d58ad0;--series-2:#4fc0f2;
 --shadow:none;--backdrop:rgba(0,0,0,.7)}}

/* Base */
*{box-sizing:border-box}
body{margin:0;font-size:16px;line-height:1.5;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
p{margin:8px 0;color:var(--text-2);line-height:1.6}
h1,h2,h3{color:var(--text);margin:0}
h1{font:700 clamp(26px,2.4vw,34px)/1.15 var(--sans)}
h2{font-size:18px}
h3{font-size:15px}
small{display:block;color:var(--text-3);font-size:13px;line-height:1.45;margin-top:4px}
button{cursor:pointer;min-height:40px;padding:9px 18px;border:2px solid var(--accent);border-radius:7px;background:transparent;color:var(--accent);font-weight:700;font-size:14px;line-height:1.2}
button:hover{background:var(--sunken)}
button:disabled{cursor:not-allowed;opacity:.5}
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
input,select,textarea{border:2px solid var(--line-strong);border-radius:7px;padding:9px 12px;background:var(--surface);font-size:16px}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ui-icon{width:20px;height:20px;display:inline-block;flex-shrink:0;vertical-align:middle}
.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:fixed;top:8px;left:260px;z-index:30;transform:translateY(-200%);background:var(--surface);color:var(--text);padding:12px 14px;border-radius:7px}
.skip-link:focus{transform:none}
/* Off to the side as well as up, so a scrolled full-page capture never shows it either. */
.skip-link:not(:focus){left:-10000px!important}
#app [hidden]{display:none!important}
.error{color:var(--danger);font-size:14px}
.error:empty{display:none}
.eyebrow{font-size:13px;font-weight:600;color:var(--text-3)}
.notice{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);border-radius:5px;padding:12px 14px;font-size:14px}
.notice p{color:inherit;margin:0}
.support-ref{margin-top:10px;font-size:13px;color:var(--text-3)}
.support-ref summary{cursor:pointer}
.support-ref p{font-size:13px;color:var(--text-3);overflow-wrap:anywhere}

/* Shell: the sidebar is a grid column as tall as the page, so its navy runs to the bottom however long the list is (#54). */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
/* Sidebar */
.os-sidebar{position:relative;z-index:4;background:var(--side-bg);color:var(--side-text);border-right:1px solid var(--side-line)}
.side-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:28px 16px 20px}
.brand-row{display:block;padding:0 8px}
.brand{display:block;color:var(--side-text);text-decoration:none}
.brand img{display:block;width:190px;height:auto}
.brand .brand-logo{margin-bottom:8px}
.brand .brand-mark,.brand .brand-phone-name{display:none}
.brand-sub{display:block;margin:2px 0 0 2px;font-size:16px;font-weight:700;color:var(--side-text)}
.os-sidebar nav{margin-top:30px;display:flex;flex-direction:column;gap:4px}
.os-sidebar .nav{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:var(--side-muted);font-size:15px;font-weight:600;text-align:left}
.os-sidebar .nav:hover{background:var(--side-active);color:var(--side-text)}
.os-sidebar .nav.active{background:var(--side-active);color:var(--side-text)}
.os-sidebar .nav b{margin-left:auto;background:var(--side-badge-bg);color:var(--side-badge-text);font-size:13px;padding:1px 9px;border-radius:2em}
.os-sidebar :focus-visible{outline-color:#5cc4f0}
.sidebar-bottom{margin-top:auto}
.safe{padding:0 10px;font-size:13px}
.safe>.ui-icon,.safe strong{display:none}
.safe p{color:var(--side-muted);font-size:13px;margin:0}

/* Main column */
main{min-width:0;min-height:100vh}
.os-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 40px;border-bottom:1px solid var(--line);background:var(--surface)}
.updated{margin:0;font-size:13px;color:var(--text-3)}
.secure-top{display:flex;align-items:center;gap:8px}
.secure-top button{min-height:40px;padding:7px 14px;font-size:14px;background:transparent}
.secure-top #logout{border-color:transparent;color:var(--link)}
.secure-top #logout:hover{text-decoration:underline;background:transparent}
.secure-top button .ui-icon{width:16px;height:16px;margin-right:6px}
.session-badge{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);margin-right:8px}
.session-badge .ui-icon{width:16px;height:16px}
.content{max-width:1400px;padding:36px 40px 24px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.page-heading p{margin:8px 0 0;max-width:780px}

/* Slim banners: documents that need a look, nothing waiting */
.slim-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin:0 0 16px;padding:8px 14px;border:1px solid var(--line);border-radius:5px;font-size:14px;line-height:1.4}
.slim-banner.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.slim-banner.warn .link-button{color:var(--warn-text);font-weight:600}
.slim-banner.ok{margin:0;border-width:0 0 1px;border-radius:0;background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}

/* Panels and tables */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:var(--shadow)}
.records-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
/* Documents: a quiet link to add an older purchase history file (#57); it is not a daily task. */
.records-toolbar #import-workbook{align-self:center;font-size:13px;color:var(--text-2);white-space:normal;text-align:left}
.records-toolbar #import-workbook:hover{color:var(--link)}
.secure-filter{display:flex;gap:4px;flex-wrap:wrap}
.secure-filter button{border:0;background:transparent;color:var(--text-2);font-size:14px;padding:8px 12px;min-height:40px;white-space:nowrap}
.secure-filter button span{display:inline-block;margin-left:8px;padding:0 7px;border-radius:2em;background:var(--sunken);color:var(--text-2);font-size:13px}
.secure-filter button.active{background:var(--sunken);color:var(--text)}
.secure-filter button.active span{background:var(--surface);color:var(--text)}
.record-search input{width:240px;min-height:40px;background:var(--surface-2)}
.search-feedback{margin:0;padding:10px 16px;font-size:14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th{padding:12px 18px;font-size:13px;font-weight:700;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td small{max-width:240px}
.text-button{border:0;background:none;padding:0;min-height:0;color:var(--link);font-weight:700;font-size:15px;text-align:left}
.text-button:hover{background:none;text-decoration:underline}
.badge{display:inline-block;padding:2px 10px;border-radius:2em;font-size:13px;font-weight:600}
.badge.amber{background:var(--warn-bg);color:var(--warn-text)}
.badge.new{background:var(--info-bg);color:var(--info-text)}
.delta{font-weight:700}
.delta.up:before{content:'\25B2\00a0'}
.delta.down:before{content:'\25BC\00a0'}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}
.same-price{color:var(--text-3);font-size:14px}
.state-pill{display:inline-flex;padding:2px 10px;border:1px solid var(--line);border-radius:2em;background:var(--sunken);color:var(--text-2);font-size:13px;font-weight:600;white-space:nowrap}
.state-pill.review{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.state-pill.processed{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.state-pill.flagged{background:var(--flag-bg);border-color:var(--flag-line);color:var(--flag-text)}
.records-footnote{display:flex;justify-content:flex-end;gap:6px 12px;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--text-3)}
.secure-empty{padding:48px 24px!important;text-align:center}
.secure-empty h2{font:700 20px var(--sans)}
.secure-empty p{margin-top:6px}

/* Documents page */
.quota-panel{margin-bottom:20px}
details.panel>summary{padding:14px 18px;cursor:pointer;font-size:15px;font-weight:550;color:var(--text)}
details.panel>p,details.panel>.notice{margin:0 18px 10px;font-size:14px}
details.panel>p:last-child{padding-bottom:6px}
.section-title{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.section-title h2{font-size:16px}
.section-title span{font-size:13px;color:var(--text-3)}
.doc-kind{font-weight:600}
.job-error{min-width:220px}
.job-error .issue{display:block;color:var(--warn-text);font-size:14px;margin-bottom:4px}
.job-error button{margin:6px 6px 0 0;min-height:36px;padding:7px 11px;font-size:13px}

/* Footer */
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding:18px 0;border-top:1px solid var(--line)}
.footer-brand{font:400 13px var(--sans);color:var(--text-3)}
.link-button{border:0;background:none;padding:6px 0;min-height:0;color:var(--link);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.link-button:hover{background:none}

/* Dialogs */
dialog{width:calc(100% - 48px);max-width:1000px;max-height:90dvh;padding:26px 30px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.25)}
dialog::backdrop{background:var(--backdrop)}
.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-top button{min-height:36px;font-size:13px}
dialog h2{font:700 24px/1.2 var(--sans);margin:8px 0}
dialog h2 .unit{font:400 15px var(--sans);color:var(--text-3);margin-left:6px}
dialog h3{margin:24px 0 8px}
dialog>p{font-size:15px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.secure-states{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.charts.single{grid-template-columns:minmax(0,640px)}
.charts>section{min-width:0;padding:16px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.charts h3{margin:0;font-size:14px;color:var(--text-2)}
.chart-purchase{--series:var(--series-1)}
.chart-list{--series:var(--series-2)}
.chart-list .chart-line{stroke-dasharray:7 5}
.price-chart{margin:10px 0 0}
.chart-caption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-3)}
.chart-caption strong{font:700 24px var(--sans);color:var(--text)}
.chart-readout{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 12px;min-height:40px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:14px;color:var(--text-2)}
.chart-readout b{font-weight:600}
.price-chart svg{display:block;width:100%;margin-top:10px;overflow:visible}
.chart-grid{stroke:var(--line);stroke-dasharray:3 4;stroke-width:1}
.price-chart .chart-axis{fill:var(--text-3);font-size:13px}
.price-chart .chart-line{stroke:var(--series);stroke-linejoin:round;stroke-linecap:round}
.price-chart stop{stop-color:var(--series)}
.price-chart linearGradient stop:first-child{stop-opacity:.08}
.chart-point{fill:var(--series);stroke:var(--surface-2);stroke-width:3;cursor:pointer;outline:none}
.chart-point.is-selected{r:7;stroke:var(--line-strong)}
.chart-point:hover,.chart-point:focus-visible{r:9;stroke:var(--focus);outline:none}
.chart-instruction{font-size:13px;color:var(--text-3);margin:6px 0}
.chart-data{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.chart-data summary{cursor:pointer;font-size:14px;color:var(--link);min-height:32px}
.chart-data caption{text-align:left;padding:8px 0;font-size:13px;color:var(--text-3)}
.chart-data th,.chart-data td{padding:8px;font-size:13px}
.chart-empty{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.chart-empty>span{font-size:36px;color:var(--line-strong)}
.chart-empty strong{font-size:14px;font-weight:550;color:var(--text-2)}
.chart-empty p{font-size:13px}
.secure-source{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);font-size:14px;overflow-wrap:anywhere}
.secure-source p{margin:0;color:var(--text)}
.secure-source button{margin-top:10px;min-height:36px;font-size:13px}
#correct-source{margin-top:8px}

/* What could come next */
.concept-heading{max-width:640px;margin:18px 0 24px}
.concept-tag{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:2em;background:var(--sunken);font-size:13px;color:var(--text-2)}
.concept-heading h2{font:700 30px/1.15 var(--sans);margin:14px 0}
.module-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.module-card{padding:18px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.module-card>span{font-size:13px;font-weight:600;color:var(--text-3)}
.module-card h3{font:700 20px var(--sans);margin:10px 0 6px}
.module-card p{font-size:14px}
.module-card.available{background:var(--ok-bg);border-color:var(--ok-line)}
.module-card.available>span{color:var(--ok-text)}
.module-card button{margin-top:8px;font-size:14px}
.module-card button .ui-icon{width:16px;height:16px;margin-left:8px}
.concept-unavailable{display:block;margin-top:10px;font-size:13px;font-weight:500;color:var(--text-3)}
.concept-note{font-size:14px;margin-top:20px}

/* Edit form: the line he chose as plain fields, the other lines of the invoice folded away */
#correction-form label{display:flex;flex-direction:column;gap:6px;margin:16px 0;font-weight:600;font-size:14px;color:var(--text)}
#correction-form input,#correction-form select,#correction-form textarea{max-width:100%;font-weight:400;min-height:44px}
#correction-form>label>input[type=date]{max-width:220px}
#correction-form td input{width:140px}
#correction-form textarea{min-height:90px}
#correction-form table{min-width:640px}
#correction-form td{padding:8px}
.edit-line{margin:16px 0;padding:4px 18px 2px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.edit-line legend{padding:0 6px;font-size:14px;font-weight:700;color:var(--text)}
#correction-form .edit-line label{margin:12px 0}
.edit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px}
.edit-grid input{width:100%}
.other-lines{margin:8px 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:5px}
.other-lines summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--link);min-height:28px}
.other-lines p{font-size:13px}
.edit-source{font-size:14px;margin:12px 0 0}
#correction-form .dialog-actions{margin-top:4px}

/* Import dialog */
#workbook-file{max-width:100%;margin:12px 10px 12px 0;padding:8px}
#workbook-preview details{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
#workbook-preview summary{cursor:pointer;font-size:14px}
#workbook-preview label{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:15px}
#workbook-preview input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--accent)}
#workbook-preview th,#workbook-preview td{padding:8px 10px;font-size:13px}

/* Sign-in */
.login-shell{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 48px);max-width:960px;margin:8vh auto;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:var(--surface);box-shadow:var(--shadow)}
.login-art{position:relative;min-height:520px;background:var(--side-bg);color:var(--side-text)}
.login-art-copy{position:absolute;left:36px;right:36px;bottom:44px;font:700 28px/1.2 var(--sans)}
.login-art-copy small{margin-top:14px;font:400 16px/1.5 var(--sans);color:var(--side-muted)}
.login-form-pane{padding:44px 40px 36px}
.login-logo{display:block;width:210px;height:auto;margin:0 0 24px}
.login-shell h1{font-size:clamp(24px,2.2vw,30px)}
.login-shell label{display:block;margin:18px 0 6px;font-size:14px;font-weight:600;color:var(--text-2)}
.login-shell input{width:100%;min-height:46px;font-size:16px}
.login-shell .primary{width:100%;margin-top:22px;min-height:48px;font-size:15px}
.login-shell .notice{margin-top:18px}
.login-shell small{margin-top:14px}
.login-shell #login-error:empty{display:none}
#password-hint{margin-top:6px}
#set-password-error{margin:14px 0 0}
#set-password [aria-invalid]{border-color:var(--danger)}
#title:focus{outline:none}
.sign-in-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:22px;padding:9px 15px;border:2px solid var(--accent);border-radius:7px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none}
.sign-in-link:hover{background:var(--sunken)}
.sign-in-link.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sign-in-link.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* Toast */
#toast{position:fixed;left:50%;bottom:28px;z-index:50;max-width:min(90%,560px);padding:12px 18px;border-radius:5px;background:var(--text);color:var(--bg);font-size:14px;line-height:1.5;box-shadow:0 8px 30px rgba(0,0,0,.2);transform:translateX(-50%) translateY(120px);transition:transform .2s}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast:empty{visibility:hidden}

/* Prices: one bar of buttons above the table (#54), one row per article, paging */
.records-panel{overflow:clip}
.filter-bar{display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.filter-top,.filter-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.search-box{position:relative;flex:0 1 380px;min-width:240px}
.search-box .ui-icon{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--text-3);pointer-events:none}
.search-box input{width:100%;min-height:42px;padding-left:38px}
.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chip-label{margin-right:4px;font-size:13px;font-weight:600;color:var(--text-3)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 13px;border:1px solid var(--line-strong);border-radius:2em;background:var(--surface);color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap}
.chip:hover{background:var(--sunken);color:var(--text)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.on:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.chip-count{display:inline-block;min-width:22px;padding:0 6px;border-radius:2em;background:var(--sunken);color:var(--text-2);font-size:13px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.chip.on .chip-count{background:var(--surface);color:var(--text)}
.custom-dates{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;font-weight:600;color:var(--text-3)}
.custom-dates input{min-height:36px;padding:5px 8px;font-size:14px}
.sort-select{display:none}
/* Row 2 (#57): Filters, the pills of the filters in use and Clear filters on the left; the pager on the right. */
.filter-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.filter-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.filters-toggle .ui-icon{width:16px;height:16px}
.filters-toggle .ui-icon:last-child{margin-left:-2px;transition:transform .15s}
.filters-toggle.open{background:var(--sunken);color:var(--text)}
.filters-toggle.open .ui-icon:last-child{transform:rotate(180deg)}
.filter-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 8px 3px 12px;border:1px solid var(--flag-line);border-radius:2em;background:var(--flag-bg);color:var(--flag-text);font-size:13px;font-weight:600;white-space:nowrap}
.pill:hover{background:var(--flag-bg);border-color:var(--accent)}
.pill-x{font-size:16px;line-height:1;font-weight:400}
.filter-more{padding:10px 0 2px;border-top:1px dashed var(--line)}
.list-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.list-nav .result-count{white-space:nowrap}
.page-of{white-space:nowrap}
.list-nav .sep{margin:0 -2px 0 -4px}
.article-table thead{position:sticky;top:0;z-index:2}
.article-table th{background:var(--surface-2);padding-top:10px;padding-bottom:10px}
.sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;min-height:0;font:inherit;font-weight:700;color:inherit}
.sort:hover{background:none;color:var(--text)}
.sort .sort-mark{font-size:13px;color:var(--text-3);font-weight:400}
.sort.active{color:var(--text)}
.sort.active .sort-mark{font-weight:700;color:var(--link)}
.article-table{table-layout:fixed}
.c-article{width:31%}.c-latest{width:13%}.c-change{width:19%}.c-count{width:8%}.c-status{width:12%}.c-actions{width:17%}
.article-table .badge{white-space:nowrap}
.article-table th,.article-table td{padding-left:12px;padding-right:12px}
.article-table td{padding-top:8px;padding-bottom:8px;line-height:1.35;vertical-align:middle;overflow-wrap:anywhere}
.article-table td small{margin-top:1px;line-height:1.35}
/* One line for the name, the whole name on hover and in the card. */
.article-cell .text-button{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row-actions{text-align:right;white-space:nowrap}
.row-actions .small-button{min-height:34px;vertical-align:middle}
.row-actions .small-button+.small-button{margin-left:6px}
.flag-button{display:inline-flex;align-items:center;gap:5px}
.flag-button .ui-icon,.secure-states .ui-icon{width:16px;height:16px}
.flag-button.on{background:var(--flag-bg);border-color:var(--flag-line);color:var(--flag-text)}
.flag-button.on .ui-icon{fill:currentColor}
.flag-button.on:hover{border-color:var(--accent)}
small.nowrap{white-space:nowrap}
tr[data-article]{cursor:pointer}
tr[data-article]:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.article-table td small{max-width:300px}
/* The Export tab: choices on the left, what the file holds and the button on the right. */
.export-note{padding:8px 16px;font-size:13px;color:var(--text-2);background:var(--info-bg);border-bottom:1px solid var(--line)}
.export-note.notice{margin:12px 16px;padding:12px 14px;font-size:14px;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-line)}
.export-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.export-panel{overflow:clip}
.export-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px)}
.export-choices{display:flex;flex-direction:column;gap:22px;padding:24px}
.export-go{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:24px;border-left:1px solid var(--line);background:var(--surface-2)}
.export-go p{margin:0}
.field-label{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--text)}
.export-field .custom-dates{margin-top:10px}
.export-checks{display:flex;flex-direction:column;gap:12px}
.check{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.check small{font-weight:400}
.check:has(input:disabled){cursor:default;color:var(--text-2)}
.export-what{font-size:14px;color:var(--text-2)}
.export-summary{font-size:22px;font-weight:700;line-height:1.25;color:var(--text);font-variant-numeric:tabular-nums}
.export-go .primary{min-height:46px;padding:10px 22px;font-size:15px}
.export-panel .export-note{border-top:1px solid var(--line);border-bottom:0}
.export-panel .export-note.notice{margin:0 24px 22px}
/* Two or more prices on the newest day: lowest–highest, each price kept whole, wrapping only at the dash. */
.price-range{display:inline-block;overflow-wrap:normal}
.price-range>span{white-space:nowrap}
.card-stats dd .price-range{font-size:18px;line-height:1.25}
.card-stats dd .badge{font:600 13px/1.3 var(--sans)}
/* #62: one plain sentence under the numbers when the price jumped 5x or more (usually another pack size). */
.pack-note{margin:10px 0 0;font-size:14px;color:var(--warn-text)}
.article-table small.open-note{color:var(--warn-text);font-weight:550}
.open-mark{color:var(--warn-text);font-weight:600}
td small.open-mark{margin-top:2px}
.article-table td:first-child .text-button{font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;gap:10px}
.pager button{min-height:36px;padding:6px 12px;font-size:13px}
.table-note{margin:0;padding:10px 18px;font-size:13px;color:var(--text-3)}
.empty-row td{border:0}
.state-pill.history{background:transparent}
#refresh.busy .ui-icon{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.updated .error{font-size:13px}

/* Article card */
dialog h2 .article-name{font:600 18px var(--sans);color:var(--text-2);margin-left:6px}
.card-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 8px}
.card-stats>div{padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.card-stats dt{font-size:13px;font-weight:550;color:var(--text-3)}
.card-stats dd{margin:6px 0 0;font:700 22px/1.15 var(--sans);font-variant-numeric:tabular-nums;color:var(--text)}
.card-stats dd small{font-weight:400}
.decision-lead{margin:18px 0 0}
.open-notes{margin:4px 0 0;font-size:14px;color:var(--warn-text)}
.decision-hint{margin:6px 0 0;font-size:13px;color:var(--text-3)}
.secure-states button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.card-message:empty{display:none}
.card-message{margin:12px 0 0}
.card-message:not(.notice){color:var(--danger);font-size:14px}
.h3-note{font-size:13px;font-weight:400;color:var(--text-3);margin-left:6px}
small.inline{display:inline;margin:0}
.history-chart{margin:8px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.history-chart>svg{display:block;width:100%;overflow:visible}
.chart-legend{display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:13px;color:var(--text-3)}
.chart-legend svg{flex-shrink:0;overflow:visible}
.legend-line{stroke:var(--series-1);stroke-width:2.5}
.text-button [data-name-for]:empty:before{content:attr(data-sku)}
dialog h2 [data-name-for]:empty:before{content:attr(data-sku)}
td:has([data-name-for]:empty) .art-no,h2:has([data-name-for]:empty) .article-name{display:none}
.history-chart .chart-axis{fill:var(--text-3);font-size:13px}
.history-chart .chart-line{fill:none;stroke:var(--series-1);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.history-dot{outline:none;pointer-events:none}
.chart-hit{fill:transparent;cursor:pointer;touch-action:manipulation}
.dot{fill:var(--series-1);stroke:var(--surface-2);stroke-width:2}
.dot{transition:none}
.history-dot.is-selected .dot{stroke:var(--text);stroke-width:3;r:7}
.history-dot:focus-visible .dot{stroke:var(--focus);stroke-width:4}
.dot-readout{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;min-height:44px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.dot-readout b{color:var(--text);font-weight:600}
.history-table th,.history-table td{padding:10px 12px;font-size:14px}
.history-table tr.is-selected td{background:var(--ok-bg)}
.history-table tr.open-line td:first-child{box-shadow:inset 3px 0 0 var(--warn-line)}
.small-button{min-height:32px;padding:4px 10px;font-size:13px}
.line-actions{white-space:nowrap}
.line-actions .small-button+.small-button{margin-left:6px}
.plain-list .small-button{margin-left:6px}
.fix-target{font-size:15px;margin:6px 0 10px}
#correction-form tr.fix-line td{background:var(--warn-bg)}
.plain-list{margin:0;padding-left:18px;color:var(--text-2)}
#correct-source{margin-top:12px}

/* Documents: reasons and dismiss */
.inbound-table th:nth-child(1){width:19%}.inbound-table th:nth-child(2){width:13%}.inbound-table th:nth-child(4){width:30%}
.job-reason{min-width:240px;font-size:14px;color:var(--text-2)}
.job-reason .issue{color:var(--warn-text)}
.job-actions{min-width:200px}
.job-actions button{margin:0 6px 6px 0;min-height:36px;padding:7px 11px;font-size:13px}
.choice-list{border:0;margin:12px 0;padding:0}
.choice-list legend{font-weight:600;font-size:14px;margin-bottom:6px}
.choice-list label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px}
.choice-list input{width:20px;height:20px;accent-color:var(--accent)}
.sheet-form{display:flex;flex-direction:column;gap:6px}
.sheet-form label{margin-top:10px;font-size:14px;font-weight:600}
.sheet-form input,.sheet-form select{width:100%;min-height:44px;font-size:16px}

@media(max-width:900px){.records-panel .articles-wrap{overflow-x:auto}.article-table thead{position:static}}

/* Narrower desktops */
@media(max-width:1100px){
 .shell{grid-template-columns:210px minmax(0,1fr)}
 .side-inner{padding:24px 12px 18px}
 .brand img{width:170px}
 .skip-link{left:226px}
 .os-topbar,.content{padding-left:24px;padding-right:24px}
 .session-badge{display:none}
 .records-toolbar{flex-direction:column;align-items:stretch}
 .records-toolbar #import-workbook{align-self:flex-start;min-height:40px}
 .charts{grid-template-columns:1fr}
 .c-article{width:30%}.c-actions{width:21%}
 .row-actions{white-space:normal}
 .row-actions .small-button{margin:2px 0 2px 4px}
 .row-actions .small-button+.small-button{margin-left:4px}
}

/* Phones */
@media(max-width:760px){
 body{font-size:15px}
 .shell{display:block}
 .os-sidebar{border-right:0;border-bottom:1px solid var(--side-line)}
 .side-inner{position:static;height:auto;display:block;padding:14px 16px 12px}
 button{min-height:44px}
 .brand-row{padding:0 2px}
 .brand{display:flex;align-items:center;gap:10px;min-height:44px}
 .brand .brand-logo,.brand-sub{display:none}
 .brand .brand-mark{display:block;width:32px;height:auto}
 .brand .brand-phone-name{display:block;font-size:16px;font-weight:700;color:var(--side-text)}
 .sidebar-bottom{display:none}
 .os-sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
 .os-sidebar .nav{flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:8px 4px;text-align:center;font-size:14px;background:var(--side-line);line-height:1.2}
 .os-sidebar .nav.active{background:var(--side-active);box-shadow:inset 0 -3px 0 var(--side-badge-bg)}
 .os-sidebar .nav>span{display:block}
 .os-sidebar .nav .ui-icon{width:18px;height:18px}
 .os-sidebar .nav b{position:absolute;margin:0;top:6px;right:8px;font-size:13px;padding:0 6px}
 .os-sidebar .nav{position:relative}
 main{min-height:0}
 .skip-link{left:16px}
 .os-topbar{height:52px;padding:0 16px}
 .secure-top button{min-height:44px}
 .content{padding:22px 16px 16px}
 .page-heading{display:block;margin-bottom:18px}
 h1{font-size:28px}
 .page-heading p{font-size:15px}
 .page-heading button{margin-top:12px;width:100%}
 .records-toolbar{padding:10px}
 /* The filter bar: search on top, then each row of buttons on one line that scrolls sideways. */
 .filter-bar{padding:12px 0 10px;gap:8px}
 .filter-top,.filter-more{display:block}
 .search-box{margin:0 12px 2px;min-width:0}
 .search-box input{min-height:44px;font-size:16px}
 /* Room on every side for the 3 px focus ring (+3 px offset), which a sideways-scrolling row would otherwise clip. */
 .chip-row{flex-wrap:nowrap;overflow-x:auto;padding:7px 12px;scrollbar-width:none}
 .chip-row::-webkit-scrollbar{display:none}
 .filter-more>.custom-dates{margin-top:6px}
 .filter-line{padding:0 12px;gap:10px}
 .filter-tools{flex:1 1 100%;gap:8px}
 .filter-pills{flex:0 1 auto}
 .pill{min-height:40px;padding:6px 10px 6px 14px}
 .chip{min-height:40px;flex-shrink:0}
 .chip-label{flex-shrink:0}
 .custom-dates{padding:0 12px}
 .custom-dates input{min-height:44px;font-size:16px}
 .sort-select{flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-3)}
 .sort-select select{flex:1;min-width:0;min-height:44px;font-size:16px;color:var(--text)}
 #clear-filters{min-height:40px}
 .secure-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .secure-filter button{white-space:normal;padding:8px 4px;font-size:13px;line-height:1.25;min-height:44px}
 .secure-filter button span{margin:4px 0 0;display:table;margin-left:auto;margin-right:auto}
 .secure-table,.secure-table tbody,.secure-table tr,.secure-table td,.inbound-table,.inbound-table tbody,.inbound-table tr,.inbound-table td{display:block;width:auto}
 .secure-table thead,.inbound-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .secure-table tbody tr,.inbound-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
 .secure-table tbody tr:hover,.inbound-table tbody tr:hover{background:none}
 .secure-table td,.inbound-table td{padding:0;border:0;min-width:0}
 .secure-table td:before,.inbound-table td:before{content:attr(data-label);display:block;margin-bottom:2px;font-size:13px;font-weight:600;color:var(--text-3)}
 .secure-table td:first-child{grid-column:1/-1}
 .secure-table td:first-child:before{display:none}
 .article-cell .text-button{white-space:normal}
 td small{max-width:none}
 .secure-table .secure-empty,.inbound-table .secure-empty{grid-column:1/-1;padding:24px 8px!important}
 .secure-empty:before{display:none!important}
 .inbound-table td:first-child,.inbound-table td:last-child{grid-column:1/-1}
 .inbound-table td:last-child{display:flex;flex-wrap:wrap;gap:8px}
 .inbound-table td:last-child:before{flex:0 0 100%;margin:0}
 .secure-table td.row-actions{grid-column:1/-1;display:flex;gap:8px;text-align:left}
 .row-actions:before{display:none!important}
 .row-actions:empty{display:none!important}
 .article-table .badge{white-space:normal}
 .row-actions .small-button{flex:1 1 0;justify-content:center;min-height:44px;font-size:14px;margin:0}
 .row-actions .small-button+.small-button{margin:0}
 .job-error{min-width:0}
 .job-error button{min-height:44px;font-size:14px}
 .inbound-panel .secure-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
 .inbound-table td.job-reason{grid-column:1/-1;min-width:0}
 .job-actions{min-width:0}
 .job-actions button{min-height:44px;font-size:14px}
 .card-stats{grid-template-columns:1fr 1fr;gap:8px}
 .card-stats dd{font-size:20px}
 .history-table,.history-table tbody,.history-table tr,.history-table td{display:block}
 .history-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .history-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px 4px;border-bottom:1px solid var(--line)}
 .history-table td{padding:0;border:0;font-size:14px}
 .history-table td[data-label]:before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--text-3)}
 .history-table .state-pill{white-space:normal;max-width:100%}
 .history-table tr.is-selected td{background:none}
 .history-table tr.is-selected{background:var(--ok-bg)}
 .history-table tr.open-line td:first-child{box-shadow:none}
 .history-table td.line-actions{grid-column:1/-1;display:flex;gap:8px;white-space:normal}
 .edit-line{padding:4px 12px 2px}
 .edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #correction-form table,#correction-form tbody{display:block;min-width:0}
 #correction-form thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 #correction-form tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:10px 4px;border-bottom:1px solid var(--line)}
 #correction-form td{display:block;padding:0;border:0;background:none}
 #correction-form td[data-label]:before{content:attr(data-label);display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--text-3)}
 #correction-form td input{width:100%}
 .line-actions .small-button{flex:1 1 0;min-height:44px;font-size:14px}
 .line-actions .small-button+.small-button{margin-left:0}
 .plain-list .small-button{min-height:44px;font-size:14px}
 .export-note.notice{margin:10px}
 .export-actions button{flex:1 1 100%;min-height:44px}
 .export-grid{grid-template-columns:1fr}
 .export-choices{padding:18px 16px;gap:18px}
 .export-choices .chip-row{padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
 .export-field .custom-dates{padding:0}
 .export-go{padding:18px 16px;border-left:0;border-top:1px solid var(--line)}
 .export-panel .export-note.notice{margin:0 16px 18px}
 /* Phones: the count and the page on one line, Previous and Next side by side below it. */
 .records-footnote{justify-content:flex-start;padding:12px 16px}
 .list-nav{flex:1 1 100%;gap:8px}
 .list-nav .pager{display:contents}
 .list-nav .pager button{flex:1 1 40%;min-height:44px;font-size:14px}
 footer{flex-wrap:wrap}
 dialog{width:calc(100% - 16px);padding:20px 16px;border-radius:5px;max-height:92dvh}
 dialog h2{font-size:24px}
 .secure-states button,.dialog-actions button{flex:1 1 100%;min-height:46px}
 .charts>section{padding:12px}
 .module-cards{grid-template-columns:1fr}
 .concept-heading h2{font-size:28px}
 #workbook-preview{overflow-x:auto}
 #correction-form input,#correction-form select,#correction-form textarea{font-size:16px}
 .login-shell{grid-template-columns:1fr;width:calc(100% - 32px);margin:20px auto}
 .login-art{display:none}
 .login-form-pane{padding:26px 22px}
 #toast{bottom:16px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}