/* TheDayRate — components for direction A, "Clean neobank", made plainer:
   small corners, flat panels with hairlines, no entrance motion.
   Colours come only from tokens (tokens.css), so light, dark and every
   accent work without a second stylesheet. */

html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font-sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent-hover)}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a,button,label,select{touch-action:manipulation}
[hidden]{display:none !important}
.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{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--shadow-card)}
.skip:focus{top:12px}
.ph{font-size:18px;line-height:1;flex:none}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--ghost);color:var(--text);font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn .ph{font-size:17px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--accent-hover);padding:0 10px}
.btn-danger{background:var(--danger);color:var(--card)}
.btn-danger-quiet{background:transparent;color:var(--danger);border-color:var(--line-strong)}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--line)}
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-quiet:hover{background:var(--accent-soft)}
  .btn-danger:hover{filter:brightness(.92)}
  .btn-danger-quiet:hover{background:var(--danger-soft);border-color:transparent}
}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.icon-btn:not(:disabled):hover{background:var(--ghost);color:var(--text)}}
.link-btn{padding:0;border:0;background:none;color:var(--accent-hover);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){.btn{min-height:44px}.icon-btn{width:44px;height:44px}}

/* ── Navigation ──────────────────────────────────────────────────────── */
.sidebar{background:var(--card);border-right:1px solid var(--line);padding:22px 14px 18px;display:flex;flex-direction:column;gap:2px}
.logo{display:flex;align-items:center;gap:10px;padding:0 10px 22px;color:var(--text);font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.logo-img{width:30px;height:30px;flex:none}
.nav-link{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:500;text-decoration:none}
.nav-link .ph{font-size:19px}
.nav-link[aria-current="page"]{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}
@media (hover:hover) and (pointer:fine){.nav-link:not([aria-current]):hover{background:var(--bg);color:var(--text)}}
.nav-parent{border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.nav-caret{margin-left:auto;font-size:14px !important}
.nav-parent[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.nav-group.has-current > .nav-parent{color:var(--text);font-weight:600}
.nav-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 21px;padding-left:12px;border-left:1px solid var(--line)}
.nav-sublink{display:block;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:14px;font-weight:500;text-decoration:none}
.nav-sublink[aria-current="page"]{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}
@media (hover:hover) and (pointer:fine){.nav-parent:hover,.nav-sublink:not([aria-current]):hover{background:var(--bg);color:var(--text)}}
.nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.sample-note{margin:0 4px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-muted);font-size:13px;line-height:1.4}
.sample-note a{font-weight:600}
.demo-bar{margin:0;padding:9px 16px;background:var(--accent-soft);color:var(--text);font-size:13.5px;line-height:1.4;text-align:center}
.demo-bar a{font-weight:600;color:var(--accent-hover);white-space:nowrap}
.tabbar{display:none}

/* ── Page header ─────────────────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px}
.page-head-text{min-width:0}
.page-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:28px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.page-title:focus{outline:none}
.page-title .tag{font-size:13px;letter-spacing:0}
.page-sub{margin-top:4px;color:var(--text-muted)}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;color:var(--text-muted);font-size:14px;font-weight:600;text-decoration:none}
.back .ph{font-size:15px}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--text)}}

/* ── Cards and figures ───────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--pad);min-width:0}
.card-title{font-size:14px;font-weight:600;color:var(--text-muted)}
.pad-title{padding:var(--pad) var(--pad) 4px}
.big{font-size:56px;font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:8px 0 4px}
.big small{font-size:.5em;letter-spacing:-.01em}
.amount{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.muted{color:var(--text-muted)}
.late{color:var(--danger);font-weight:600}
a.late{text-decoration:underline;text-underline-offset:3px}
.hint{margin-top:14px;font-size:13.5px;color:var(--text-muted)}
.notice{margin-bottom:16px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--warning-soft);color:var(--warning);font-weight:500}
.prose-sm{font-size:14.5px;color:var(--text-muted);max-width:62ch}
.prose-sm + .prose-sm{margin-top:10px}
.prose-sm b{color:var(--text)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;padding:0;margin-bottom:var(--gap)}
.stat{display:flex;flex-direction:column;gap:3px;padding:var(--pad);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat-wide{grid-column:span 2}
.stat-label{font-size:13.5px;font-weight:600;color:var(--text-muted)}
.stat-value{font-size:24px;font-weight:700;letter-spacing:-.02em}
.stat-value.is-late{color:var(--danger)}
.stat-note{font-size:13.5px;color:var(--text-muted);line-height:1.45}
.stat .meter{margin:6px 0 2px}

.meter{height:6px;border-radius:var(--radius-pill);background:var(--ghost);overflow:hidden}
.meter > i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--accent)}


/* ── Tags ────────────────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.tag-paid{background:var(--success-soft);color:var(--success)}
.tag-sent{background:var(--accent-soft);color:var(--accent-hover)}
.tag-late{background:var(--danger-soft);color:var(--danger)}
.tag-draft{background:var(--warning-soft);color:var(--warning)}
.tag-void{background:var(--ghost);color:var(--text-muted)}

/* ── Tables ──────────────────────────────────────────────────────────── */
.card-table{padding:0}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{padding:11px var(--cell);border-bottom:1px solid var(--line);text-align:left;font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.table td{padding:var(--row) var(--cell);border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table .num{text-align:right;white-space:nowrap}
.table .strong{font-weight:600}
.table tr[data-href],.table tr[data-action]{cursor:pointer}
@media (hover:hover) and (pointer:fine){.table tr[data-href]:hover td,.table tr[data-action]:hover td{background:var(--bg)}}
.group-row th{padding:10px var(--cell);background:var(--bg);color:var(--text);font-size:13.5px;font-weight:600;border-bottom:1px solid var(--line)}
.group-row span{margin-left:10px;font-weight:500;color:var(--text-muted)}
.total-row td{font-weight:700;border-top:1px solid var(--line-strong)}
.table-compact td,.table-compact th{padding-left:0;padding-right:0}
.table-compact td{padding-top:9px;padding-bottom:9px}
.note{display:block;margin-top:1px;font-size:13px;color:var(--text-muted)}
.note-late{color:var(--danger);font-weight:600}
.row-link{white-space:nowrap;padding:0;border:0;background:none;color:var(--text);font-weight:600;text-decoration:none;text-align:left;cursor:pointer}
@media (hover:hover) and (pointer:fine){.row-link:hover{text-decoration:underline;text-underline-offset:3px}}
.client-cell{display:inline-flex;align-items:center;gap:10px}
.is-void{color:var(--text-muted);text-decoration:line-through}

/* ── Toolbar: segmented filter and search ────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:var(--ghost);overflow-x:auto;max-width:100%;scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.seg{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border:0;border-radius:3px;background:transparent;color:var(--text-muted);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.seg-count{font-size:12px;font-weight:600;color:var(--text-faint)}
.seg[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (hover:hover) and (pointer:fine){.seg[aria-pressed="false"]:hover{color:var(--text)}}
.search{position:relative;display:flex;align-items:center;flex:0 1 280px}
.search .ph{position:absolute;left:12px;color:var(--text-faint);pointer-events:none}
.search input{padding-left:38px !important}

/* ── Forms ───────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.setting > legend,.lines-set > legend,.bands-set > legend,.shift-picker > legend{font-size:13.5px;font-weight:600;color:var(--text)}
.optional{font-weight:500;color:var(--text-muted)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);line-height:1.35}
textarea{resize:vertical;min-height:72px}
select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
[aria-invalid="true"]{border-color:var(--danger) !important}
input:disabled{background:var(--bg);color:var(--text-faint)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:18px;height:18px;margin:0;flex:none}
.field-help{font-size:13px;color:var(--text-muted);line-height:1.45}
.field-error{font-size:13.5px;font-weight:600;color:var(--danger)}
.field-error:empty{display:none}
.money-input,.pct-input,.suffix-input{position:relative;display:flex;align-items:center}
.money-input > span{position:absolute;left:12px;color:var(--text-muted);pointer-events:none}
.money-input input{padding-left:26px !important}
.pct-input > span,.suffix-input > span{position:absolute;right:12px;color:var(--text-muted);pointer-events:none}
.pct-input input{padding-right:32px !important}
.suffix-input input{padding-right:50px !important}
.with-button{display:flex;gap:8px}
.with-button select{flex:1}
.grid-2,.grid-3{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:1 / -1}
.narrow{max-width:180px}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;margin-bottom:10px}
.check{display:inline-flex;align-items:center;gap:10px;min-height:42px;font-weight:500;cursor:pointer}
.check-field{justify-content:flex-end}
.error-summary{margin-bottom:18px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--danger)}
.error-summary:focus{outline:2px solid var(--danger);outline-offset:2px}
.error-summary ul{margin-top:4px;padding-left:18px;list-style:disc}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* Radio cards, accent swatches, switches (Settings) */
.choices{display:grid;gap:10px}
.choices-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer}
.choice > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice b{font-weight:600}
.choice span span{font-size:13px;color:var(--text-muted);line-height:1.4}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choice input{margin-top:2px}
.choices-3 .choice{flex-direction:column;gap:10px}
.choices-3 .choice input{position:absolute;opacity:0}
.choices-3 .choice{position:relative}
.theme-thumb{display:flex;flex-direction:column;gap:5px;width:100%;height:58px;padding:9px;border-radius:var(--radius-sm);border:1px solid var(--line)}
.theme-thumb i{display:block;height:12px;border-radius:2px}
.theme-thumb i:last-child{width:60%}
.thumb-light{background:var(--preview-light-bg)}
.thumb-light i{background:var(--preview-light-card)}
.thumb-dark{background:var(--preview-dark-bg)}
.thumb-dark i{background:var(--preview-dark-card)}
.thumb-system{background:linear-gradient(90deg,var(--preview-light-bg) 50%,var(--preview-dark-bg) 50%)}
.thumb-system i{background:linear-gradient(90deg,var(--preview-light-card) 50%,var(--preview-dark-card) 50%)}
.thumb-system i:last-child{width:100%;opacity:.7}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;font-weight:500}
.swatch input{position:absolute;opacity:0}
.swatch-dot{width:20px;height:20px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(15,27,45,.12)}
[data-swatch="blue"]{background:var(--swatch-blue)}
[data-swatch="teal"]{background:var(--swatch-teal)}
[data-swatch="graphite"]{background:var(--swatch-graphite)}
.swatch:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.swatch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.switch-list{display:flex;flex-direction:column}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.switch-list .switch-row:first-child{border-top:0}
.switch-row > span{display:flex;flex-direction:column;gap:2px}
.switch-row b{font-weight:500}
.switch-row span span{font-size:13px;color:var(--text-muted)}
.switch{appearance:none;position:relative;width:42px !important;height:24px !important;flex:none;margin:0;border-radius:var(--radius-pill);background:var(--line-strong);cursor:pointer;transition:background .15s}
.switch::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:0 1px 2px rgba(15,27,45,.25);transition:transform .2s var(--ease-out)}
.switch:checked{background:var(--accent)}
.switch:checked::before{transform:translateX(18px)}

/* ── Empty states ────────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center}
.empty > .ph{font-size:30px;color:var(--text-faint);margin-bottom:4px}
.empty h2{font-size:17px;font-weight:600}
.empty p{max-width:46ch;color:var(--text-muted)}
.empty .btn{margin-top:10px}

/* ── Dialogs and toast ───────────────────────────────────────────────── */
.dialog{width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--radius);background:var(--card);color:var(--text);box-shadow:0 2px 6px rgba(2,6,14,.08),0 12px 28px rgba(2,6,14,.18)}
.dialog-small{width:min(440px,calc(100vw - 32px))}
.dialog::backdrop{background:var(--scrim)}
.dialog-form{display:flex;flex-direction:column;max-height:calc(100dvh - 50px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 6px 24px}
.dialog-head h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.dialog-body{padding:12px 24px 8px;overflow-y:auto}
.dialog-body > p{color:var(--text-muted)}
.dialog-lede{margin-bottom:14px;color:var(--text-muted)}
.dialog-foot{display:flex;align-items:center;gap:10px;padding:16px 24px 20px;flex-wrap:wrap}
.spacer{flex:1}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;padding:11px 18px;border-radius:var(--radius-sm);background:var(--text);color:var(--card);font-weight:600;font-size:14.5px;box-shadow:0 4px 14px rgba(2,6,14,.2);transform:translateX(-50%);visibility:hidden;pointer-events:none}
.toast.is-on{visibility:visible}

/* ── Invoice paper ───────────────────────────────────────────────────── */
.paper-wrap{min-width:0}
.doc{position:relative;padding:44px 48px 40px;border-radius:2px;background:var(--paper);color:var(--paper-text);font-family:var(--doc-font,var(--font-sans));box-shadow:0 1px 2px rgba(15,23,28,.06),0 4px 12px rgba(15,23,28,.06);font-size:13.5px;line-height:1.5;border:1px solid var(--paper-line)}
.doc p{margin:0}
.doc-head{display:flex;justify-content:space-between;gap:24px;padding-bottom:26px;border-bottom:1px solid var(--paper-line)}
.doc-name{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.doc-muted{color:var(--paper-muted)}
.doc-title{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--doc-accent,var(--paper-text));text-align:right;margin-bottom:10px}
.doc-meta dl{display:grid;gap:3px}
.doc-meta dl > div{display:flex;justify-content:flex-end;gap:14px}
.doc-meta dt{color:var(--paper-muted)}
.doc-meta dd{font-weight:600;min-width:84px;text-align:right}
.doc-to{padding:22px 0}
.doc-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--doc-accent,var(--paper-muted));margin-bottom:4px}
.doc-strong{font-weight:600;font-size:15px}
.is-missing{color:var(--paper-muted);font-style:italic}
.doc-table{width:100%;border-collapse:collapse}
.doc-table th{padding:9px 8px;border-bottom:1.5px solid var(--doc-accent,var(--paper-text));text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-muted)}
.doc-table td{padding:11px 8px;border-bottom:1px solid var(--paper-line);vertical-align:top}
.doc-table th:first-child,.doc-table td:first-child{padding-left:0}
.doc-table th:last-child,.doc-table td:last-child{padding-right:0}
.doc-table .num{text-align:right;white-space:nowrap}
.doc-small{display:block;font-size:12px;color:var(--paper-muted)}
.doc-none{color:var(--paper-muted);font-style:italic;text-align:center;padding:24px 0 !important}
.doc-totals{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:14px}
.doc-totals > div{display:flex;justify-content:space-between;gap:28px;min-width:240px;color:var(--paper-muted)}
.doc-totals > div span:last-child{color:var(--paper-text)}
.doc-total{align-items:baseline;padding-top:6px;font-size:15px;color:var(--paper-text) !important}
.doc-total b{font-size:22px;letter-spacing:-.01em;color:var(--doc-accent,var(--paper-text))}
.doc-logo{display:block;width:auto;max-width:220px;object-fit:contain;margin-bottom:12px}
.logo-small .doc-logo{height:28px}
.logo-medium .doc-logo{height:44px}
.logo-large .doc-logo{height:64px;max-width:300px}
.doc-meta .doc-logo{margin-left:auto}
.doc-logo-row{display:flex;justify-content:center;margin-bottom:22px}
.doc-logo-row .doc-logo{margin-bottom:0}
.doc-compact{padding:32px 36px 30px}
.doc-compact .doc-head{padding-bottom:16px}
.doc-compact .doc-to{padding:14px 0}
.doc-compact .doc-table td{padding:6px 8px}
.doc-compact .doc-table th{padding:6px 8px}
.doc-compact .doc-foot{margin-top:16px;padding-top:12px}
.doc-compact .doc-notes{margin-top:12px}
.doc-notes{margin-top:18px}
.doc-foot{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding-top:18px;border-top:1px solid var(--paper-line)}
.doc-stamp{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:3px 12px;border:1.5px solid var(--paper-muted);border-radius:2px;color:var(--paper-muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.doc-stamp.is-paid{border-color:var(--success);color:var(--success)}

/* ── Motion: none on arrival. Screens, dialogs and figures appear as they
   are; only hover colours ease, so the pointer feels connected. ─────────── */
@media (prefers-reduced-motion: no-preference){
  .btn,.seg,.icon-btn,.nav-link,.choice,.swatch{transition:background-color .12s,color .12s,border-color .12s}
}

.show-sm{display:none}