/* Components: see DESIGN.md and /admin/design. One block per component. */

/* Buttons. Every variant sets all its state tokens (see .btn in base.css).
   Primary: ink. Secondary: outlined. Quiet: underlined text. Read: a piece's way out. */
.btn.secondary { --btn-bg:transparent; --btn-fg:var(--fg); --btn-border:var(--control);
                 --btn-bg-hover:var(--surface); --btn-fg-hover:var(--fg); --btn-border-hover:var(--fg);
                 --btn-bg-active:var(--chip); --btn-fg-active:var(--fg); --btn-border-active:var(--fg); }
.btn.quiet { --btn-bg:transparent; --btn-fg:var(--fg); --btn-border:transparent;
             --btn-bg-hover:transparent; --btn-fg-hover:var(--accent); --btn-border-hover:transparent;
             --btn-bg-active:transparent; --btn-fg-active:var(--accent); --btn-border-active:transparent;
             min-height:44px; padding:0 4px; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
/* Read: underlined text on larger screens; a full-width paper button on phones (below). */
.btn.read { --btn-bg:transparent; --btn-fg:var(--fg); --btn-border:transparent;
            --btn-bg-hover:transparent; --btn-fg-hover:var(--accent); --btn-border-hover:transparent;
            --btn-bg-active:transparent; --btn-fg-active:var(--accent); --btn-border-active:transparent;
            min-height:44px; padding:0; border-radius:0; font-size:0.9375rem;
            text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; text-decoration-thickness:1.5px; }
.btn.read.alt { --btn-fg:var(--muted); --btn-fg-hover:var(--fg); --btn-fg-active:var(--fg); font-weight:500; text-decoration-color:var(--rule); }
/* Tool: a small action beside a piece (Save, Share, Mark as read). Quiet text on larger screens,
   an outlined button on phones (see Pieces). It needs JavaScript, so it is hidden without it. */
.btn.tool { --btn-bg:transparent; --btn-fg:var(--muted); --btn-border:transparent;
            --btn-bg-hover:transparent; --btn-fg-hover:var(--fg); --btn-border-hover:transparent;
            --btn-bg-active:transparent; --btn-fg-active:var(--fg); --btn-border-active:transparent;
            display:none; min-height:44px; padding:0; gap:7px; font-size:0.875rem; font-weight:500; }
.js .btn.tool { display:inline-flex; }
.btn.tool.save[aria-pressed="true"] { --btn-fg:var(--accent); --btn-fg-hover:var(--accent); --btn-fg-active:var(--accent); }
.btn.tool.save[aria-pressed="true"] svg { fill:currentColor; }
li.item.is-read .btn.tool.mark { --btn-fg:var(--free); --btn-fg-hover:var(--free); --btn-fg-active:var(--free); }
.btn.tool.nudge { --btn-fg:var(--accent); --btn-fg-hover:var(--accent); --btn-fg-active:var(--accent); font-weight:600; }
.btn.full { width:100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:none; }
.read-link { font-weight:600; color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent);
             text-decoration-thickness:1.5px; text-underline-offset:4px; }
@media (max-width:44.9375em) {
  .btn.full, form .btn[type=submit], form button[type=submit] { width:100%; min-height:56px; font-size:1.0625rem; }
  /* A long form keeps its one action within reach of the thumb. */
  form.sticky-cta button[type=submit] { position:sticky; bottom:calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); z-index:5;
                                        box-shadow:0 0 0 8px var(--bg); }
}

/* Stars, badges and tags are in base.css; these are the small bits around them. */
.badge.quiet { color:var(--faint); }

/* Empty state: one calm sentence, optionally an action. */
.empty-state { padding:40px 0; text-align:center; color:var(--muted); }
.empty-state .mark-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin:0 auto 14px; }
.empty-state p { margin:0 0 16px; font:400 calc(1.125rem * var(--ts))/1.5 var(--serif); }

/* "Caught up" and "Pick up where you left off". */
.caught-up { display:flex; align-items:center; gap:10px; margin:8px 0 0; padding:14px 0; color:var(--muted); font-size:0.9375rem;
             border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.caught-up::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--free); }
.resume { margin:0 0 28px; padding:14px 16px; border-left:2px solid var(--accent); background:var(--surface); border-radius:0 var(--round) var(--round) 0; }
.resume .eyebrow { margin:0 0 4px; }
.resume a { display:block; font:700 1.1875rem/1.3 var(--serif); color:var(--fg); text-decoration:none; }
@media (hover:hover) { .resume a:hover { text-decoration:underline; text-decoration-color:var(--accent); } }
.resume .m { display:block; font-size:0.8125rem; color:var(--faint); margin-top:4px; }

/* Toast: a short confirmation above the tabs, with Undo. */
.toast { position:fixed; z-index:70; left:50%; bottom:calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
         display:flex; align-items:center; gap:16px; max-width:calc(100vw - 32px); padding:10px 12px 10px 16px; border-radius:var(--round);
         background:var(--fg); color:var(--bg); font-size:0.9375rem; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.toast[hidden] { display:none; }
.toast button { min-height:36px; padding:0 10px; background:transparent; color:var(--bg); border:0; font:600 0.875rem/1 var(--sans);
                text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion:no-preference) { .toast:not([hidden]) { animation:toast-in .18s ease-out; }
  @keyframes toast-in { from { opacity:0; transform:translate(-50%, 8px); } } }

/* Switch row: a label, a note and an on/off switch. */
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; cursor:pointer;
              border-bottom:1px solid var(--rule); }
.switch-row strong { display:block; font-weight:600; } .switch-row small { display:block; color:var(--faint); font-size:0.8125rem; }
.switch-row input { appearance:none; flex:none; position:relative; width:46px; height:28px; margin:0; border-radius:999px;
                    background:var(--faint); cursor:pointer; transition:background-color .15s; }
.switch-row input::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
                           background:var(--bg); transition:transform .15s; }
.switch-row input:checked { background:var(--accent); } .switch-row input:checked::after { transform:translateX(18px); }

/* Fields and messages. */
.field-help { font-size:0.8125rem; color:var(--faint); margin:6px 0 0; }
.field-error { font-size:0.8125rem; color:var(--paid); margin:6px 0 0; }
input[aria-invalid="true"] { border-color:var(--paid); }

/* Keyboard shortcuts list. */
.keys { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:8px 0 0; font-size:0.9375rem; }
.keys kbd { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 8px;
            border:1px solid var(--rule); border-bottom-width:2px; border-radius:6px; font:600 0.8125rem/1 var(--sans); color:var(--fg); }

/* Bottom sheet: on phones it rises from the bottom; larger screens get a centred panel. */
dialog.sheet.sheet-bottom { margin:auto 0 0; width:100%; max-width:100vw; height:fit-content; max-height:86dvh;
                            border-radius:16px 16px 0 0; padding:8px 20px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width:45em) { dialog.sheet.sheet-bottom { margin:auto; width:min(440px, 92vw); border-radius:12px; padding:12px 24px 24px; } }
@media (prefers-reduced-motion:no-preference) { dialog.sheet.sheet-bottom[open] { animation:sheet-up .22s ease-out; }
  @keyframes sheet-up { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } } }
.sheet-title { font:700 1.3125rem/1 var(--serif); }

/* Pieces in every list. */
.filters { display:none; position:sticky; top:var(--subnav-h, 0px); z-index:5; gap:8px; overflow-x:auto; scrollbar-width:none;
           margin:0 calc(-1 * var(--gutter)); padding:10px var(--gutter);
           background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px);
           border-bottom:1px solid var(--rule); }
.filters::-webkit-scrollbar { display:none; }
.js .filters { display:flex; }
.chip { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px;
        font:500 0.875rem/1 var(--sans); border-radius:var(--round); background:var(--surface); color:var(--fg); border:1px solid var(--control); }
/* A row of chips that scrolls sideways on phones, and a search field above it. */
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter); }
.chips::-webkit-scrollbar { display:none; }
.tools { display:grid; gap:10px; }
.tools input[type=search] { width:100%; min-height:46px; background:var(--surface); color:var(--fg); border:1px solid var(--control);
                            border-radius:var(--round); padding:0 18px; font:inherit; font-size:0.9375rem; }
.chip[aria-pressed="true"] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip small { opacity:.65; margin-left:4px; font-size:0.75rem; }
/* Only shown once at least one piece is read. */
.progress { display:none; align-items:center; gap:12px; margin:8px 0 14px; font-size:0.875rem; color:var(--muted); }
.progress.on { display:flex; }
.progress .track { flex:1; height:6px; background:var(--chip); border-radius:var(--round); overflow:hidden; }
.progress .fill { height:100%; width:0; background:var(--accent); border-radius:var(--round); }
ol.items { list-style:none; margin:0; padding:0; }
li.item { border-bottom:1px solid var(--rule); padding:32px 0; }
li.item:last-child { border-bottom:0; }
li.item h2 { line-height:1.2; margin:0 0 6px; text-wrap:pretty; font-size:calc(1.5625rem * var(--ts)); }
li.item[hidden] { display:none; }
.item-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 8px; }
.num { font:700 0.8125rem/1 var(--sans); color:var(--accent); letter-spacing:.06em; }
.badge { font:600 0.6875rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.added { font-size:0.7812rem; color:var(--faint); margin-left:auto; }
.theme-tag { display:inline-flex; align-items:center; gap:5px; font:600 0.7188rem/1 var(--sans); letter-spacing:.08em;
             text-transform:uppercase; color:var(--faint); text-decoration:none; }
.meta { font-size:0.875rem; color:var(--muted); margin:2px 0 0; }
.orig { font-size:0.875rem; color:var(--faint); margin:2px 0 0; font-style:italic; }
.summary { margin:12px 0 0; font:400 calc(1.125rem * var(--ts))/1.6 var(--serif); }
.note { font-size:0.8125rem; color:var(--faint); margin:8px 0 0; }
/* One clear way to read, drawn as a link: a page of black buttons is not calm. */
.actions { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; margin:14px 0 0; }
/* Read, opened and saved states are drawn by /static/reading.js and need JavaScript. */
@media (min-width:45em) { .actions .btn.tool.save { margin-left:auto; } }  /* larger screens: the tools sit at the right */
li.item.is-read h2 a, li.item.is-read .summary { opacity:.55; }
li.item.is-opened h2 a::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
                                 background:var(--accent); margin:0 8px 3px 0; vertical-align:middle; }
li.item.hide-view { display:none; }
.badge-new { font:600 0.6875rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--fg); }
.none { display:none; padding:28px 0; color:var(--muted); }
.none.on { display:block; }
@media (min-width:45em) { li.item h2 { font-size:calc(1.75rem * var(--ts)); } .summary { font-size:calc(1.1875rem * var(--ts)); } }
/* Phones: big targets. Read fills the width; Save, Mark as read and Share share the row below. */
@media (max-width:44.9375em) {
  /* Three tools to a row; fewer when the text is large or the words long (German), never squeezed. */
  .actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 5.5em), 1fr)); gap:8px; margin-top:18px; }
  .actions .btn.read { --btn-bg:var(--surface); --btn-border:var(--control); --btn-fg:var(--fg);
                       --btn-bg-hover:var(--chip); --btn-border-hover:var(--fg); --btn-fg-hover:var(--fg);
                       --btn-bg-active:var(--chip); --btn-border-active:var(--fg); --btn-fg-active:var(--fg);
                       grid-column:1 / -1; justify-content:center; min-height:52px; margin:0; padding:0 16px; text-decoration:none;
                       border-radius:var(--round); font-size:1rem; }
  .actions .btn.read.alt { --btn-bg:transparent; --btn-fg:var(--muted); min-height:48px; font-size:0.9375rem; }
  /* Tools become outlined buttons with words: one row of three, each a 48px target. */
  .actions .btn.tool { --btn-border:var(--control); --btn-bg-hover:var(--surface); --btn-border-hover:var(--fg);
                       --btn-bg-active:var(--chip); --btn-border-active:var(--fg);
                       min-height:48px; margin:0; padding:0 6px; font-size:0.9375rem; line-height:1.2; text-align:center; }
  .actions .btn.tool svg { display:none; }
  .actions .btn.tool.nudge { grid-column:1 / -1; --btn-border:var(--accent); --btn-border-hover:var(--accent); }
  li.item { padding:28px 0; }
}
li.item.is-current { scroll-margin-top:24px; }
li.item.is-current h2 a { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }

/* Theme rows. */
.themes-row { display:grid; border-top:1px solid var(--rule); }
.theme-link { display:flex; gap:14px; align-items:baseline; text-decoration:none; color:var(--fg);
              padding:16px 0; border-bottom:1px solid var(--rule); }
.theme-link .ti { flex:none; align-self:center; color:var(--muted); }
.theme-link .tx { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 16px; align-items:baseline; }
.theme-link strong { font:700 1.25rem/1.25 var(--serif); }
.theme-link .tag { grid-row:2; grid-column:1 / -1; font-size:0.9375rem; color:var(--muted); }
.theme-link .n { font-size:0.8125rem; color:var(--faint); white-space:nowrap; }
@media (hover:hover) { .theme-link:hover strong { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; } }