/* Component styles for the authenticated and public shells.
   Extracted from Shell.html so that any surface — including the brand specimen and, later,
   print — can render them without copying the shell. Colour rules use tokens; the literals
   still here are the ones the raw-colour guard tracks in brand/raw-baseline.json. */
body {
    font-family:var(--acx-body);
    color:var(--acx-ink);
    background:
        radial-gradient(620px 300px at 8% -4%,rgba(180,83,9,.07),transparent 60%),
        radial-gradient(700px 340px at 102% 12%,rgba(194,65,12,.06),transparent 55%),
        var(--acx-paper);
    min-height:100vh;
}
.acx { min-height:100vh; }
.acx-card { background:var(--acx-card); border:1px solid var(--acx-line); border-radius:1.25rem; box-shadow:0 1px 2px rgba(28,25,23,.04),0 12px 32px -20px rgba(28,25,23,.18); }
.acx-h1 { font-family:var(--acx-display); font-weight:700; letter-spacing:-.01em; }
.acx-h2 { font-family:var(--acx-display); font-weight:600; }
.acx-sub { color:var(--acx-muted); }
.acx-label { display:block; font-size:.8125rem; font-weight:600; color:#44403c; margin-bottom:.375rem; }
.acx-input, .acx-select {
    width:100%; background:#fff; border:1px solid #ddd5c6; border-radius:.625rem;
    padding:.5625rem .75rem; font-size:.9rem; color:var(--acx-ink); outline:none;
    transition:border-color .15s,box-shadow .15s,background .15s;
}
.acx-select-inline { width:auto; flex:0 0 auto; }
.acx-input::placeholder { color:#b6aca0; }
.acx-input:focus, .acx-select:focus { border-color:var(--acx-amber); background:#fffdf8; box-shadow:none; }
.acx-route { position:relative; padding-top:1.5rem; margin-top:1.75rem; border-top:1px dashed #dcd2c0; }
.acx-route::before { content:""; position:absolute; top:-4.5px; left:0; width:8px; height:8px; border-radius:999px; background:#fff; border:2px solid var(--acx-amber); }
.acx-section { position:relative; padding-top:1.5rem; margin-top:1.75rem; border-top:1px dashed #dcd2c0; }
.acx-section::before { content:""; position:absolute; top:-4.5px; left:0; width:8px; height:8px; border-radius:999px; background:#fff; border:2px solid var(--acx-amber); }
.acx-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:.375rem; background:#f3ede2; border:1px solid var(--acx-line); border-radius:.75rem; padding:.25rem; }
.acx-seg label { position:relative; text-align:center; cursor:pointer; }
.acx-seg input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.acx-seg span { display:block; padding:.5rem .25rem; font-size:.8125rem; font-weight:600; color:#79716b; border-radius:.5rem; transition:all .15s; white-space:nowrap; }
.acx-seg input:checked + span { background:#fff; color:var(--acx-ink); box-shadow:0 1px 2px rgba(28,25,23,.10); }
.acx-seg input:focus-visible + span { box-shadow:0 0 0 3px var(--focus); }
.acx-btn {
    display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
    padding:.625rem 1.125rem; border-radius:.75rem; font-size:.9rem; font-weight:700;
    transition:background .15s,box-shadow .15s,transform .05s,border-color .15s;
    cursor:pointer; border:1px solid transparent;
}
.acx-btn:active { transform:translateY(1px); }
.acx-btn-primary { background:linear-gradient(180deg,var(--accent),var(--accent-strong)); color:var(--text-on-accent); box-shadow:0 1px 2px rgba(120,53,15,.3),0 8px 20px -12px rgba(194,65,12,.5); }
.acx-btn-primary:hover { background:linear-gradient(180deg,var(--accent-strong),var(--accent-strong)); box-shadow:0 2px 4px rgba(120,53,15,.35),0 10px 24px -12px rgba(194,65,12,.55); }
.acx-btn-primary:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.acx-btn-ghost { background:#fff; border-color:#ddd5c6; color:#57534e; }
.acx-btn-ghost:hover { border-color:#cbbfa9; background:#fdfaf4; color:var(--acx-ink); }
.acx-btn-green { background:#15803d; color:#fff; }
.acx-btn-green:hover { background:var(--state-success-strong); }
.acx-btn-red { background:#b91c1c; color:#fff; }
.acx-btn-red:hover { background:#991b1b; }
.acx-btn-danger { background:#fff; border-color:var(--state-danger-border); color:#b91c1c; }
.acx-btn-danger:hover { background:var(--acx-red-soft); border-color:#e5a4a4; }
.acx-toggle { display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1rem; cursor:pointer; border:1px solid var(--acx-line); border-radius:.875rem; transition:all .15s; background:#fff; }
.acx-toggle:hover { border-color:#d4c8b2; }
.acx-toggle input { margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--acx-amber); cursor:pointer; }
.acx-toggle:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-soft) inset; }
.acx-toggle-title { font-weight:700; font-size:.9rem; display:block; }
.acx-toggle-desc { font-size:.8rem; color:var(--acx-muted); margin-top:.125rem; display:block; }
.acx-required::after { content:" *"; color:var(--acx-red); }
.acx-error { border:1px solid var(--state-danger-border); background:var(--acx-red-soft); color:#b91c1c; }
.acx-warn { border:1px solid var(--state-warning-border); background:var(--acx-yellow-soft); color:#7c5a08; }
.acx-success { border:1px solid var(--state-success-border); background:var(--acx-green-soft); color:var(--acx-green); }
.acx-banner { border-radius:.9rem; padding:.9rem 1rem; font-size:.9rem; }
.acx-note { font-size:.78rem; color:var(--acx-muted); }
.acx-link { color:var(--acx-amber); font-weight:700; }
.acx-link:hover { color:var(--acx-amber-dark); text-decoration:underline; }
.acx-th { text-transform:uppercase; font-size:.7rem; letter-spacing:.06em; color:var(--acx-muted); font-weight:700; }
.acx-trow { transition:background .12s; }
.acx-trow:hover { background:#fdfaf4; }
.acx-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.acx-pill--green { background:var(--acx-green-soft); color:var(--acx-green); }
.acx-pill--amber { background:var(--acx-yellow-soft); color:var(--acx-yellow); }
.acx-pill--red { background:var(--acx-red-soft); color:var(--acx-red); }
.acx-pill--gray { background:#f5f5f4; color:#57534e; }
.acx-pill--blue { background:var(--acx-blue-soft); color:var(--acx-blue); }
.acx-progress { height:.5rem; background:#efe8da; border-radius:999px; overflow:hidden; }
.acx-progress > div { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); border-radius:999px; transition:width .3s; }
.acx-tab { padding:.375rem .8rem; border-radius:999px; font-size:.8125rem; font-weight:700; transition:all .15s; }
.acx-tab--off { background:#f5f5f4; color:#57534e; }
.acx-tab--off:hover { background:#ececea; }
.acx-kv { display:grid; grid-template-columns:9rem 1fr; gap:.5rem 1rem; padding:.55rem 0; border-bottom:1px dashed #efe8da; font-size:.9rem; }
.acx-kv dt { color:var(--acx-muted); font-weight:600; }
.acx-doc { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; background:#fbf8f1; border:1px solid var(--acx-line); border-radius:.75rem; }
/* Record-list pattern (Spec 3c): a responsive, navigable list of anchor cards.
   The container carries the .acx-list class, and each row is an anchor styled with
   the .acx-card and .acx-list-item classes; a .acx-list-main block holds the
   .acx-list-title and .acx-list-meta lines, beside a .acx-list-aside block.
   Cursor pagination is an anchor that points its container at the list and is
   driven by /static/js/load-more.js. */
.acx-list { display:flex; flex-direction:column; gap:.75rem; }
.acx-list-item {
  display:flex; flex-direction:column; gap:.5rem; padding:1rem;
  cursor:pointer; text-decoration:none; color:inherit;
}
.acx-list-item:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.acx-list-main { min-width:0; flex:1 1 auto; }
.acx-list-title { font-weight:700; }
.acx-list-meta { font-size:.875rem; color:var(--acx-muted); }
.acx-list-aside { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media (min-width:640px) {
  .acx-list-item { flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; }
  .acx-list-aside { flex-direction:column; align-items:flex-end; text-align:right; }
}
.acx-chip { background:var(--acx-amber-soft); color:var(--acx-amber); font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; }
/* Primary navigation (AuthShell header). .acx-nav-panel deliberately declares no
   display so the [hidden] attribute keeps it collapsed; nav-menu.js owns the toggle. */
.acx-brandmark { display:inline-flex; align-items:center; gap:.5rem; min-width:0; text-decoration:none; color:var(--acx-ink); transition:color .15s; }
.acx-brandmark:hover { color:var(--acx-amber); }
.acx-brandmark-word { font-family:var(--acx-display); font-weight:600; font-size:1.125rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acx-nav-link { display:inline-flex; align-items:center; padding:.4rem .7rem; border-radius:.625rem; font-size:.875rem; font-weight:600; color:#57534e; text-decoration:none; white-space:nowrap; transition:background .15s,color .15s; }
.acx-nav-link:hover { background:var(--acx-amber-soft); color:var(--acx-amber-dark); }
.acx-nav-link[aria-current="page"] { background:var(--acx-amber-soft); color:var(--acx-amber-dark); }
.acx-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; flex:0 0 auto; border-radius:.75rem; border:1px solid var(--acx-line); background:#fff; color:#57534e; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }
.acx-nav-toggle:hover { border-color:#cbbfa9; background:#fdfaf4; color:var(--acx-ink); }
.acx-nav-toggle:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.acx-nav-panel { padding:.25rem 0 1rem; }
.acx-nav-panel-link { display:block; padding:.75rem .5rem; border-radius:.625rem; font-size:.95rem; font-weight:700; color:#44403c; text-decoration:none; }
.acx-nav-panel-link:hover { background:var(--acx-amber-soft); color:var(--acx-amber-dark); }
.acx-nav-panel-link[aria-current="page"] { background:var(--acx-amber-soft); color:var(--acx-amber-dark); }