/* Anertex Content Management Portal: the admin UI, in the website's branding (design-export/anertex-tokens.css).
   Design pass 2026-10-15 (docs/DESIGN-PASS-AUDIT.md): one type scale (44 / 24 / 16 / 13 / 12px), the site's box
   (1368px with 64 / 40 / 20px gutters, so the header, the pages and the footer share one edge), space and hairlines
   instead of boxes, square corners, one interactive red (hover, the current tab, the featured mark), the yellow
   focus ring, the tri-colour only as the 3px top bar and the footer's bar. Function first: 44px targets, AA text,
   16px inputs, one obvious action per screen. Motion: the house ease, hovers only under (hover:hover). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.01ba6c2a.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.65850a37.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/space-grotesk-latin-ext.dea099b7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/space-grotesk-latin.25ea4a78.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- the design tokens (names and values from design-export/anertex-tokens.css) */
:root {
  /* brand tri-colour: exact logo hexes, only the top bar and the footer bar */
  --anx-red: #D30009; --anx-yellow: #FBFA0A; --anx-blue: #282EFF;
  --anx-tricolour-gradient: linear-gradient(90deg, #D30009 0%, #D30009 30%, #FBFA0A 38%, #FBFA0A 62%, #282EFF 70%, #282EFF 100%);
  /* functional accents */
  --anx-accent: #E8332A; --anx-accent-press: #D42B22; --anx-focus: #F5C518; --anx-selection: #D93537;
  /* dark canvas ramp */
  --anx-black: #0E0E0F; --anx-panel: #131315; --anx-surface-1: #161618; --anx-surface-1h: #18181B; --anx-border: #1E1E22;
  --anx-surface-2: #1F1F22; --anx-hairline: #2A2A2E; --anx-rule: #3A3A40; --anx-rule-hover: #46464D;
  /* text ramp: every grey that carries text passes AA on the canvas and on a field (#9A9DA0 7.1 / 6.6, #8E9192 6.1 / 5.7) */
  --anx-white: #FFFFFF; --anx-text: #F5F5F5; --anx-text-ui: #F4F5F7; --anx-ink: #ECEDEF; --anx-quote: #E4E5E7;
  --anx-text-2: #C4C7C8; --anx-grey: #9A9DA0; --anx-note: #8E9192; --anx-label: #7D8083;
  /* translucent recipes */
  --anx-outline-fill: rgba(255, 255, 255, .10); --anx-ghost-bg: rgba(14, 14, 16, .42); --anx-ghost-ring: rgba(236, 237, 239, .4); --anx-ghost-sweep: rgba(236, 237, 239, .14);
  --anx-accent-ring: rgba(232, 51, 42, .5); --anx-plate: rgba(14, 14, 15, .78);
  /* type: five sizes, three weights, two families */
  --anx-font-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --anx-font-display: 'Space Grotesk', 'Inter', sans-serif;
  --anx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;   /* only the authenticator key, read character by character */
  --fs-1: clamp(30px, 3.1vw, 44px);   /* page titles */
  --fs-2: 24px;                        /* section and dialog titles */
  --fs-3: 16px;                        /* body, inputs, row titles */
  --fs-4: 13px;                        /* secondary text, hints, buttons */
  --fs-5: 12px;                        /* caps labels: tabs, links, status */
  /* motion */
  --anx-ease: cubic-bezier(.16, 1, .3, 1); --anx-ease-wave: cubic-bezier(.65, 0, .35, 1);
  --anx-dur-press: .06s; --anx-dur-hover: .2s; --anx-dur-sweep: .55s;
  /* layout: the site's box (as the footer: 1368px, gutters 64 / 40 / 20px) */
  --w: 1368px; --gut: 64px; --hdr: 64px;
}
@media (max-width: 1279px) { :root { --gut: 40px; } }
@media (max-width: 767px) { :root { --gut: 20px; } }

* { box-sizing: border-box; }
html { background: var(--anx-black); color: var(--anx-text-ui); font: 400 var(--fs-3)/1.5 var(--anx-font-ui); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
/* the site-wide fixed 3px tri-colour top bar (body::before on every live page) */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: var(--anx-tricolour-gradient); }
#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--anx-text); outline-offset: 2px; }   /* white, not the site's yellow (user, 2026-10-15) */
::selection { background: var(--anx-selection); color: #fff; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--anx-ink); color: var(--anx-panel); padding: 12px 16px; z-index: 10000; }
.skip:focus { left: 8px; }
.noscript { padding: 40px 20px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--anx-grey); }
.dim { color: var(--anx-note); }
.small { font-size: var(--fs-4); }
.mono { font-family: var(--anx-font-mono); font-size: var(--fs-4); word-break: break-all; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp { flex: 1; }
.arr { display: inline-block; transition: transform .35s var(--anx-ease); }

/* ---- the wordmark: the ANERTEX lettering from the site's nav (drawn A + Space Grotesk 600) */
.anx-wordmark { display: block; flex: none; height: 16px; width: auto; aspect-ratio: 608.1 / 89; }

/* ---- header: logo + wordmark + label | the three tabs | Account, Sign out. One row from 1220px (sticky),
   two rows below (the tabs take their own row), the label stacked beside the logo on phones. */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--anx-black); border-bottom: 1px solid var(--anx-hairline); }
.hdr__in { max-width: var(--w); height: var(--hdr); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: stretch; gap: 24px; }
.brand { flex: none; display: flex; align-items: center; gap: 12px; color: var(--anx-text-ui); text-decoration: none; }
.brand__logo { height: 32px; width: auto; flex: none; }
.brand__s { padding-left: 12px; border-left: 1px solid var(--anx-rule); font: 600 10px/16px var(--anx-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--anx-grey); white-space: nowrap; }
.nav { display: flex; margin-left: auto; }
.nav a, .me__link, .me__out { display: flex; align-items: center; padding: 0 14px; font: 600 10px/16px var(--anx-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--anx-text-2); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color var(--anx-dur-hover) ease, box-shadow .35s var(--anx-ease); }
.nav a[aria-current="page"], .me__link[aria-current="page"] { color: var(--anx-text-ui); box-shadow: inset 0 -2px 0 var(--anx-accent); }
.me { flex: none; display: flex; align-items: stretch; }
.me::before { content: ""; align-self: center; width: 1px; height: 20px; margin-right: 10px; background: var(--anx-rule); }   /* sections | session */
.me__out { margin: 0; border: 0; background: none; color: var(--anx-grey); cursor: pointer; padding-right: 0; }
@media (hover: hover) {
  .nav a:hover, .me__link:hover, .me__out:hover { color: var(--anx-text-ui); }
}
@media (max-width: 1219px) {
  .hdr { position: static; }
  .hdr__in { height: auto; flex-wrap: wrap; gap: 0 12px; }
  .brand, .me { min-height: 64px; }
  .me { margin-left: auto; }
  .nav { order: 3; flex-basis: calc(100% + 2 * var(--gut)); height: 48px; margin: 0 calc(-1 * var(--gut)); padding: 0 calc(var(--gut) - 12px); border-top: 1px solid var(--anx-hairline); }
}
@media (max-width: 767px) {
  .brand { gap: 10px; min-height: 60px; }
  .brand .anx-wordmark { display: none; }                       /* phones: the logo alone, as the site's nav */
  .brand__logo { height: 36px; }
  .brand__s { width: min-content; padding-left: 10px; line-height: 13px; letter-spacing: .06em; white-space: normal; }   /* stacked beside the logo */
  .me { min-height: 60px; }
  .me::before { margin-right: 4px; }
  .nav a, .me__link, .me__out { letter-spacing: .06em; }
  .me__link, .me__out { padding: 0 8px; }
  .me__out { padding-right: 0; }
  .nav { justify-content: space-between; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0 8px; }
  .nav a:first-child { padding-left: 0; }
  .nav a:last-child { padding-right: 0; }
}

/* ---- page */
.main { flex: 1 0 auto; width: 100%; max-width: var(--w); margin: 0 auto; padding: 56px var(--gut) 120px; }   /* 56px: the gap above headings stays */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin: 0 0 48px; }
.page-head > div:first-child { min-width: 0; max-width: 760px; }
h1, .h1 { margin: 0; font: 500 var(--fs-1)/.95 var(--anx-font-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--anx-text); overflow-wrap: anywhere; text-wrap: balance; }
h2, .h2 { margin: 0 0 24px; font: 500 var(--fs-2)/1.1 var(--anx-font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--anx-text); }
.h2__n { margin-left: 6px; font: 500 var(--fs-4)/1 var(--anx-font-ui); letter-spacing: 0; text-transform: none; color: var(--anx-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the one outlined key word (the site's .anx-key) */
.anx-key { font-family: var(--anx-font-ui); font-weight: 700; letter-spacing: -.02em; color: var(--anx-outline-fill); -webkit-text-stroke: 1.6px #fff; paint-order: stroke fill; }
@media (max-width: 767px) { .anx-key { color: #fff; -webkit-text-stroke: 0; } }   /* a hairline outline is illegible small */
.lede { margin: 16px 0 0; max-width: 58ch; color: var(--anx-grey); font-size: var(--fs-3); line-height: 1.6; text-wrap: pretty; }
.lede b { color: var(--anx-text-ui); font-weight: 600; }
.lede--tight { margin: -8px 0 24px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.section { margin: 48px 0 0; padding: 48px 0 0; border-top: 1px solid var(--anx-hairline); }
.section--first { margin-top: 0; padding-top: 0; border-top: 0; }
.count { margin: 0 0 12px; font-size: var(--fs-4); color: var(--anx-grey); }
.note { margin: 0; padding: 16px 20px; border: 1px dashed var(--anx-rule); color: var(--anx-grey); font-size: var(--fs-4); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.cols { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 0 112px; align-items: start; }
@media (max-width: 1100px) { .cols { gap: 0 64px; } }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } .cols > * + * { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--anx-hairline); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.split__main { min-width: 0; }
@media (max-width: 767px) {
  .main { padding-bottom: 88px; }
  .page-head { margin-bottom: 40px; }
  .section:not(.section--first) { margin-top: 40px; padding-top: 40px; }
}

/* ---- buttons: the site's pair. Primary = the off-white fill; the default (ghost) = the inset ring.
   On hover a fill sweeps in from the left and leaves to the right (.55s house ease). Every one is 44px tall. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 0; background: var(--anx-ghost-bg); color: var(--anx-ink); box-shadow: inset 0 0 0 1px var(--anx-ghost-ring); font: 600 var(--fs-4)/1 var(--anx-font-ui); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--anx-dur-hover) var(--anx-ease), box-shadow .35s ease, color var(--anx-dur-hover) ease, background-color var(--anx-dur-hover) ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--anx-ghost-sweep); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--anx-dur-sweep) var(--anx-ease); }
.btn > * { position: relative; }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--anx-dur-press); }
.btn:active::before { background: rgba(236, 237, 239, .22); }
.btn--primary { background: var(--anx-ink); color: var(--anx-panel); box-shadow: none; }
.btn--primary::before { background: var(--anx-white); }
.btn--primary:active::before { background: #D6D7DC; }
.btn--danger { color: var(--anx-accent); box-shadow: inset 0 0 0 1px var(--anx-accent-ring); }
.btn--danger::before { background: rgba(232, 51, 42, .08); }
.btn--sm { padding: 0 16px; font-size: var(--fs-5); }
.btn--icon { width: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[disabled]::before { display: none; }
.btn--block { width: 100%; }
.btn:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) {
  .btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .btn:hover { box-shadow: inset 0 0 0 1px var(--anx-ink); }
  .btn--primary:hover { box-shadow: none; }
  .btn--danger:hover { box-shadow: inset 0 0 0 1px var(--anx-accent); }
  .btn:hover .arr { transform: translate(2px, -2px); }
}
/* the text link (the site's .anx-textlink): caps, a 1px #3A3A40 underline 6px below that turns red. Row actions
   use it; a 44px target. --danger turns red itself on hover. */
.link { display: inline-block; margin: 0; padding: 13px 0; border: 0; background: none; font: 600 var(--fs-5)/18px var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-text); white-space: nowrap; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--anx-rule); text-underline-offset: 6px; cursor: pointer; transition: text-decoration-color .35s var(--anx-ease), color var(--anx-dur-hover) ease; }
.link .arr { margin-left: 6px; }
.link:focus-visible { text-decoration-color: var(--anx-accent); }
@media (hover: hover) {
  .link:hover { text-decoration-color: var(--anx-accent); }
  .link--danger:hover { color: var(--anx-accent); }
  .link:hover .arr { transform: translate(2px, -2px); }
}
.back { margin: -24px 0 8px; }   /* in the gap above the title */
.back::before { content: "\2191"; display: inline-block; margin-right: 8px; transform: rotate(-90deg); }

/* ---- forms: one surface step up, a hairline, the label above in sentence case; focus = a brighter, thicker
   white edge (border + 1px ring), eased in, no yellow (user, 2026-10-15) */
.field { display: block; min-width: 0; margin: 0 0 24px; }
.field__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font: 500 var(--fs-4)/1.4 var(--anx-font-ui); color: var(--anx-text-2); }
.field__l .req { color: var(--anx-accent); }
.opt { color: var(--anx-note); font-weight: 400; text-align: right; }
.input, .select, .textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; background: var(--anx-surface-1); border: 1px solid var(--anx-hairline); border-radius: 0; color: var(--anx-text); font-size: var(--fs-3); line-height: 24px; transition: border-color .3s var(--anx-ease), box-shadow .3s var(--anx-ease); -webkit-appearance: none; appearance: none; }
.textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--anx-text); box-shadow: 0 0 0 1px var(--anx-text); }
.input::placeholder, .textarea::placeholder { color: var(--anx-note); opacity: 1; }
.input:disabled, .select:disabled { opacity: .5; }
.select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A9DA0' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
@media (hover: hover) { .input:hover:not(:focus):not(:disabled), .select:hover:not(:focus):not(:disabled), .textarea:hover:not(:focus) { border-color: var(--anx-rule); } }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--anx-accent); }
.field.is-invalid .input:focus, .field.is-invalid .select:focus, .field.is-invalid .textarea:focus { box-shadow: 0 0 0 1px var(--anx-accent); }
.field--bare .field__l { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the label stays for screen readers and autofill */
.err { display: block; margin: 8px 0 0; font-size: var(--fs-4); line-height: 1.5; color: var(--anx-accent); }
.hint { display: block; margin: 8px 0 0; font-size: var(--fs-4); line-height: 1.5; color: var(--anx-grey); }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--anx-accent); }
.checks { display: flex; flex-wrap: wrap; gap: 0 32px; }
.toolbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; margin: 0 0 40px; }
.toolbar .field { margin: 0; }
@media (max-width: 767px) { .toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .toolbar .field--search { grid-column: 1 / -1; } }
/* the editor's save bar: stays at the foot of the screen while the form is in view */
.form-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; margin-top: 48px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--anx-black); border-top: 1px solid var(--anx-hairline); }
.dirty { font-size: var(--fs-4); color: var(--anx-text-2); }

/* ---- status: a square mark and a caps word (filled = live, hollow = draft, red = featured); no boxes */
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; vertical-align: middle; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-5)/16px var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-grey); white-space: nowrap; }
.chip::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid currentColor; }
.chip--published, .chip--featured { color: var(--anx-text); }
.chip--published::before { background: var(--anx-text); border-color: var(--anx-text); }
.chip--featured::before { background: var(--anx-accent); border-color: var(--anx-accent); }
.chip--bin { color: var(--anx-note); }
.tag { font-size: var(--fs-4); color: var(--anx-grey); }
.stars { color: var(--anx-ink); letter-spacing: .12em; font-size: var(--fs-4); white-space: nowrap; }
.stars__off { color: var(--anx-rule); }

/* ---- tables (desktop) and the list rows that replace them on phones */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 0 24px 12px 0; border-bottom: 1px solid var(--anx-rule); text-align: left; font: 500 var(--fs-4)/1.4 var(--anx-font-ui); color: var(--anx-grey); white-space: nowrap; }
.table td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--anx-hairline); vertical-align: middle; transition: background-color .25s var(--anx-ease); }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tr[data-href], .table tr[data-edit] { cursor: pointer; }
.table tr[data-href]:focus-visible, .table tr[data-edit]:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .table tr[data-href]:hover td, .table tr[data-edit]:hover td { background: var(--anx-surface-1); } }
.table .t { font-weight: 600; overflow-wrap: anywhere; }
.table .s { margin-top: 4px; color: var(--anx-grey); font-size: var(--fs-4); }
.table .td-thumb { width: 120px; }
.table .td-act { width: 1%; text-align: right; white-space: nowrap; }
.table .td-cat { white-space: nowrap; }
.table--reviews .td-who { width: 24%; }
.table--reviews .td-text { max-width: 62ch; color: var(--anx-quote); line-height: 1.55; }
.thumb { width: 96px; height: 72px; object-fit: cover; background: var(--anx-surface-1); border: 1px solid var(--anx-hairline); flex: none; }
.thumb--ph, .logo-tile--ph { display: grid; place-items: center; padding: 4px; text-align: center; font: 600 var(--fs-5)/1.2 var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-note); background: repeating-linear-gradient(135deg, #131316 0 6px, #161618 6px 12px); }
.logo-tile { flex: none; position: relative; width: 120px; height: 56px; overflow: hidden; background: var(--anx-black); border: 1px solid var(--anx-hairline); }
/* the whole logo inside its tile, whatever its shape: an absolutely placed box (a percentage height inside a
   flex/grid cell resolves to auto and lets a tall logo spill; this never does) */
.logo-tile img { position: absolute; left: 10px; top: 8px; width: calc(100% - 20px); height: calc(100% - 16px); object-fit: contain; max-width: none; max-height: none; }
.cards { border-top: 1px solid var(--anx-hairline); }
.card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; min-height: 72px; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--anx-hairline); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .25s var(--anx-ease); }
.card--btn { grid-template-columns: minmax(0, 1fr) auto; }
.card .thumb { width: 88px; height: 66px; }
.card__b { min-width: 0; display: grid; gap: 4px; }
.card .t { font-weight: 600; overflow-wrap: anywhere; }
.card .s { color: var(--anx-grey); font-size: var(--fs-4); }
.card .q { color: var(--anx-quote); font-size: var(--fs-4); line-height: 1.5; }
.card__go { color: var(--anx-grey); }
@media (hover: hover) { .card:hover { background: var(--anx-surface-1); } }
.empty { padding: 64px 24px; border: 1px dashed var(--anx-rule); text-align: center; color: var(--anx-grey); }
.empty b { display: block; margin: 0 0 8px; font: 500 var(--fs-2)/1.1 var(--anx-font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--anx-text); }
.empty p { margin: 24px 0 0; }
.desktop-only { display: contents; } .phone-only { display: none; }
@media (max-width: 760px) { .desktop-only { display: none; } .phone-only { display: block; } }

/* ---- the project editor: the status column (desktop), a compact bar above the photos (tablets, phones) */
.side { position: sticky; top: calc(var(--hdr) + 32px); }
.side__bar { display: grid; gap: 16px; }
.side__cover { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.side__st { display: grid; gap: 8px; min-width: 0; }
.side__note { margin: 0; font-size: var(--fs-4); color: var(--anx-grey); }
.side__go .btn { width: 100%; }
.side__more { margin-top: 24px; }
.side__more summary { list-style: none; cursor: pointer; }
.side__more summary::-webkit-details-marker { display: none; }
.side__more .stack { display: grid; border-top: 1px solid var(--anx-hairline); }
.side__act { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--anx-hairline); background: none; font: 600 var(--fs-5)/1 var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-text-2); text-align: left; text-decoration: none; cursor: pointer; transition: color var(--anx-dur-hover) ease; }
.side__act .arr { color: var(--anx-grey); }
@media (hover: hover) {
  .side__act:hover { color: var(--anx-text); }
  .side__act:hover .arr { transform: translate(2px, -2px); }
  .side__act--danger:hover { color: var(--anx-accent); }
}
.side__more p { margin: 16px 0 0; font-size: var(--fs-4); line-height: 1.6; color: var(--anx-grey); }
@media (min-width: 1001px) { .side__more summary { display: none; } }
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .side { order: -1; position: static; padding: 0 0 8px; border-bottom: 1px solid var(--anx-hairline); }
  .side__bar { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .side__cover { width: 88px; height: 66px; aspect-ratio: auto; }
  .side__go .btn { width: auto; }
  .side__more { margin-top: 8px; }
  .side__more .stack { margin-top: 8px; }
  .side__more[open] summary .link { text-decoration-color: var(--anx-accent); }
}
@media (max-width: 480px) {
  .side__bar { grid-template-columns: 88px minmax(0, 1fr); }
  .side__go { grid-column: 1 / -1; }
  .side__go .btn { width: 100%; }
}

/* ---- photos: a compact drop row, then the tiles (photo, order controls, alt + caption, file) */
.drop { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 20px; border: 1px dashed var(--anx-rule); transition: border-color .3s var(--anx-ease), background-color .3s var(--anx-ease); }
.drop.is-over { border-color: var(--anx-text-ui); background: var(--anx-surface-1); }
.drop.is-full { padding: 0; border: 0; }   /* full: one plain line, no box, no dead button */
.drop.is-full .btn { display: none; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop p { margin: 0; font-size: var(--fs-4); color: var(--anx-grey); }
.drop p b { color: var(--anx-text-ui); font-weight: 600; }
.upl { display: grid; margin-top: 16px; border-top: 1px solid var(--anx-hairline); }
.upl__i { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--anx-hairline); font-size: var(--fs-4); color: var(--anx-text-2); }
.upl__i.is-err { color: var(--anx-accent); }
.upl__i.is-ok { color: var(--anx-grey); }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 24px; margin-top: 32px; }
.pic { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: opacity .3s var(--anx-ease); }
.pic.is-dragging { opacity: .45; }
.pic.is-dragging .pic__img { outline: 2px solid var(--anx-text-ui); outline-offset: -2px; }
.pics.is-sorting .pic { cursor: grabbing; }
.pic__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--anx-surface-1); border: 1px solid var(--anx-hairline); }
.pic__img img { width: 100%; height: 100%; object-fit: cover; }
.pic__n { position: absolute; left: 0; top: 0; padding: 8px 10px; background: var(--anx-plate); color: #fff; font: 600 var(--fs-5)/1 var(--anx-font-ui); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.handle { display: grid; place-items: center; width: 44px; height: 44px; color: var(--anx-grey); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: color var(--anx-dur-hover) ease; }
.handle svg { width: 16px; height: 16px; }
.handle--none { cursor: default; }
.pic__handle { position: absolute; right: 0; bottom: 0; background: var(--anx-plate); color: #fff; }
@media (hover: hover) { .order__i .handle:hover { color: var(--anx-text); } }
.pic__ctl { display: flex; align-items: center; gap: 8px; }
.pic__ctl .link { margin-left: auto; }
.pic__body { display: grid; gap: 16px; margin-top: 8px; }
.pic__body .field { margin: 0; }
.pic__meta { font-size: var(--fs-4); color: var(--anx-note); overflow-wrap: anywhere; }
/* the cover: one filled mark across the tiles; the others are buttons that make their photo the cover */
.cov { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 0 4px; padding: 0 4px; border: 0; background: none; font: 600 var(--fs-5)/1 var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-grey); white-space: nowrap; cursor: pointer; transition: color var(--anx-dur-hover) ease; }
.cov::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid currentColor; }
.cov.pic__cover { color: var(--anx-text); cursor: default; }
.cov.pic__cover::before { background: var(--anx-text); border-color: var(--anx-text); }
@media (hover: hover) { button.cov:hover { color: var(--anx-text); } }
/* the move pair: two 44px squares sharing an edge (photos: left / right; the band: up / down) */
.mv { display: inline-flex; flex: none; }
.mv__b { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--anx-hairline); background: none; color: var(--anx-text-2); font: 500 var(--fs-3)/1 var(--anx-font-ui); cursor: pointer; transition: color var(--anx-dur-hover) ease, border-color var(--anx-dur-hover) ease; }
.mv__b + .mv__b { margin-left: -1px; }
.mv__b:disabled { color: var(--anx-rule); cursor: default; }
.mv__b:active:not(:disabled) { transform: translateY(1px); }
.mv__b:focus-visible { position: relative; z-index: 1; }
@media (hover: hover) { .mv__b:not(:disabled):hover { position: relative; z-index: 1; color: var(--anx-text); border-color: var(--anx-rule-hover); } }

/* ---- the logo carousel: the preview is the site's band (A11: #0B0B0C field, the pause key on the left, 176 x 64
   chips 56px apart, one set at least a screen wide and 80s across it, as built-together.html), then the order */
.band { display: flex; align-items: stretch; margin: 0 0 56px; background: #0B0B0C; border-top: 1px solid var(--anx-border); border-bottom: 1px solid var(--anx-border); }
.band__k { flex: none; display: flex; align-items: center; padding: 0 20px; background: var(--anx-black); border-right: 1px solid var(--anx-border); }
.band__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--anx-hairline); color: var(--anx-grey); cursor: pointer; transition: border-color var(--anx-dur-hover) ease, color var(--anx-dur-hover) ease; }
.band__toggle::after { content: ""; position: absolute; inset: -7px; }   /* a 46px target */
.bt-pause { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.bt-play { display: none; width: 11px; height: 12px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.band.is-paused .bt-pause { display: none; }
.band.is-paused .bt-play { display: block; }
@media (hover: hover) { .band__toggle:hover { border-color: var(--anx-accent); color: #fff; } }
.band__view { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.band__track { display: flex; width: max-content; animation: band 80s linear infinite; }
.band.is-paused .band__track { animation-play-state: paused; }
@media (hover: hover) { .band__view:hover .band__track { animation-play-state: paused; } }
@keyframes band { to { transform: translateX(-50%); } }
.band__set { display: flex; justify-content: space-around; gap: 56px; min-width: 100vw; padding: 28px; }
.band__chip { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 176px; height: 64px; padding: 10px 16px; background: var(--anx-black); border: 1px solid #222226; overflow: hidden; }
.band__chip img { position: absolute; left: 16px; top: 10px; width: calc(100% - 32px); height: calc(100% - 20px); object-fit: contain; max-width: none; max-height: none; }
.band__chip--ph { background: repeating-linear-gradient(135deg, #131316 0 6px, #161618 6px 12px); font: 600 var(--fs-5)/1.2 var(--anx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--anx-note); text-align: center; }
.band__empty { padding: 40px 28px; font-size: var(--fs-4); color: var(--anx-grey); }
@media (max-width: 767px) {
  .band { flex-direction: column; margin-bottom: 40px; }
  .band__k { padding: 6px 20px; border-right: 0; border-bottom: 1px solid var(--anx-border); }
  .band__set { gap: 32px; padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; width: auto; }
  .band__set { flex-wrap: wrap; justify-content: flex-start; gap: 24px; min-width: 0; width: 100%; }
  .band__set[aria-hidden="true"] { display: none; }
  .band__view { -webkit-mask-image: none; mask-image: none; }
  .band__k { display: none; }
}
/* the order: one row per partner, a hairline between rows; the handle, the logo, the name, then the actions */
.order { border-top: 1px solid var(--anx-hairline); }
.order__i { display: grid; grid-template-columns: 44px 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--anx-hairline); background: var(--anx-black); transition: opacity .3s var(--anx-ease), background-color .25s var(--anx-ease); }
.order__i.is-dragging { opacity: .5; background: var(--anx-surface-1); }
.order.is-sorting .order__i { cursor: grabbing; }
.order__t { display: grid; gap: 4px; min-width: 0; }
.order__t .t { font-weight: 600; overflow-wrap: anywhere; }
.order__t .s { font-size: var(--fs-4); color: var(--anx-grey); }
.order__t .s a { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--anx-rule); text-underline-offset: 4px; transition: color var(--anx-dur-hover) ease, text-decoration-color .35s var(--anx-ease); }
@media (hover: hover) { .order__t .s a:hover { color: var(--anx-text-ui); text-decoration-color: var(--anx-accent); } }
.order__n { display: inline-block; min-width: 32px; color: var(--anx-grey); font: 500 var(--fs-4)/1 var(--anx-font-ui); font-variant-numeric: tabular-nums; }
.order__ctl { display: flex; align-items: center; gap: 24px; }
.order__ctl .mv { margin-right: 8px; }
@media (max-width: 767px) {
  .order__i { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; padding: 12px 0 4px; }
  .order__i > .handle, .order__i > .handle--none { grid-row: 1 / span 2; align-self: start; }
  .order__i .logo-tile, .order__i .order__t { grid-column: 2; }
  .order__i .order__ctl { grid-column: 1 / -1; gap: 20px; }
  .order__ctl .mv { margin-right: auto; }
}

/* ---- dialogs: on the canvas, a hairline frame, the actions pinned to the foot while the form scrolls */
dialog { width: min(92vw, 560px); max-height: min(90dvh, 960px); padding: 0; overflow: auto; overscroll-behavior: contain; background: var(--anx-black); color: var(--anx-text-ui); border: 1px solid var(--anx-rule); border-radius: 0; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
dialog[open] { animation: rise .45s var(--anx-ease); }
dialog::backdrop { background: rgba(5, 5, 6, .74); }
.dlg { padding: 32px 32px 0; }
.dlg h2 { margin: 0 0 24px; }
.dlg > p { margin: 0; max-width: 52ch; color: var(--anx-grey); }
.dlg .actions { position: sticky; bottom: 0; z-index: 2; justify-content: flex-end; margin: 32px -32px 0; padding: 16px 32px; background: var(--anx-black); border-top: 1px solid var(--anx-hairline); }
.dlg--wide { width: min(94vw, 840px); }
.dlg__danger { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--anx-hairline); }
.dlg__danger .hint { margin: 0; }
.logo-row { gap: 16px; }
.story { margin: 8px 0 0; border-top: 1px solid var(--anx-hairline); }
.story summary { list-style: none; display: flex; align-items: center; min-height: 56px; cursor: pointer; }
.story summary::-webkit-details-marker { display: none; }
.story summary .field__l { flex: 1; margin: 0; font-size: var(--fs-3); font-weight: 600; color: var(--anx-text); }
.story summary .opt { font-size: var(--fs-4); }
.story summary::after { content: "\2193"; display: inline-block; margin-left: 16px; color: var(--anx-grey); transition: transform .45s var(--anx-ease); }
.story[open] summary::after { transform: rotate(180deg); }
.story[open] summary { margin-bottom: 8px; }
@media (max-width: 767px) {
  dialog { width: calc(100vw - 32px); }
  .dlg { padding: 24px 20px 0; }
  .dlg .actions { margin: 24px -20px 0; padding: 12px 20px; }
}

/* ---- toasts: one line each at the foot, three at most */
.toasts { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 10000; display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { pointer-events: auto; max-width: 560px; padding: 14px 20px; background: var(--anx-ink); color: var(--anx-panel); font: 500 var(--fs-4)/1.45 var(--anx-font-ui); box-shadow: 0 8px 32px rgba(0, 0, 0, .45); animation: rise .5s var(--anx-ease); transition: opacity .4s var(--anx-ease-wave), transform .4s var(--anx-ease-wave); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast--error { background: var(--anx-accent-press); color: #fff; }   /* white on #D42B22: 5.0:1 */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.rise { animation: rise .6s var(--anx-ease); }

/* ---- the first full load: the app rises into view as the website's loading screen fades (anx:loaderdone).
   No footer in the portal (user, 2026-10-15): a page ends with its content and the bottom padding. */
#app.is-revealed { animation: rise .7s var(--anx-ease); }

/* ---- sign in: the form alone, centred in the viewport (user, 2026-10-15): two fields, the button, an error
   under it when there is one; the code steps add one short line. The 3px top bar is the only colour. */
.main-bare { flex: 1 0 auto; display: flex; flex-direction: column; }
.login { flex: 1; display: grid; place-items: center; padding: 64px var(--gut); }
.login__box { width: min(100%, 360px); }
.login__box .field { margin: 0 0 12px; }
.login__box .btn--block { margin-top: 12px; }
.login__line { margin: 0 0 24px; color: var(--anx-text-2); line-height: 1.6; }
.login [data-field="form"] { min-height: 40px; }   /* the error's line is kept, so the form never jumps when one appears */
.login__err { margin: 16px 0 0; }
.login .field--code .input { max-width: none; }

/* ---- two-factor sign-in */
.totp { display: grid; gap: 20px; margin: 0 0 24px; }   /* one column: the QR, then the key with its Copy, then the code */
.totp__qr { display: grid; place-items: center; width: 196px; height: 196px; padding: 12px; background: #fff; }
.totp__qr svg { display: block; width: 100%; height: 100%; }
.totp__noqr { color: var(--anx-panel); font-size: var(--fs-4); text-align: center; }
.totp__words { min-width: 0; }
.totp__words p { margin: 0 0 16px; color: var(--anx-text-2); line-height: 1.6; }
.totp__words .totp__key { margin: 0; }
.totp__key { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.totp__key .field__l { grid-column: 1 / -1; margin: 0; }
.totp__secret { display: block; min-height: 44px; padding: 12px 14px; background: var(--anx-surface-1); border: 1px solid var(--anx-hairline); font-family: var(--anx-font-mono); font-size: var(--fs-4); line-height: 18px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.totp__state { margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.field--code .input { max-width: 240px; min-height: 56px; font: 500 var(--fs-2)/1 var(--anx-font-display); letter-spacing: .2em; text-align: center; }

/* ---- account */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 16px 32px; margin: 0 0 32px; }
.kv dt { font-size: var(--fs-4); color: var(--anx-grey); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv .err, .kv__note { display: block; margin-top: 6px; }
.kv__note { font-size: var(--fs-4); line-height: 1.5; color: var(--anx-grey); }
@media (max-width: 720px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; } .kv dd { margin-bottom: 16px; } }

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

/* ---- Featured project: one column, the picker and the three stations */
.feat-form { max-width: 720px; }