/* AdsNgin UI. Paper (default) and Night (data-theme="dark"). One file, every class an-.
   Tokens first, components second. Layout structure lives in the templates. */

/* UI-2 (2026-10-02): "Ember + Ink". Red is the call to act (buttons, the logo mark, the unread dot);
   deep ink navy does charts, nav, links and tags; "needs action" is an oxblood "!" badge, never a button
   colour. The an- variable names the pages already use are kept; the new ones are grouped below. */
:root {
  --an-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --an-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* display role; Geist throughout (Lee, 2026-09-29) */
  /* surfaces: page canvas, flat white card (long tables borrow this), inset/hover tint, hairline */
  --an-page: #f4f4f7; --an-pane: #ffffff; --an-card: #f7f8fb; --an-hover: #f1f3f8; --an-line: #e3e6ee;
  --an-warn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 23 21.5H1zm-1.1 7.5v5.5h2.2V10zm0 7.2v2.2h2.2v-2.2z' fill-rule='evenodd'/%3E%3C/svg%3E");
  --an-ink: #161b2e; --an-muted: #545a6e; --an-faint: #626879; --an-input-line: #7d8397;
  --an-accent: #1f2a44; --an-accent-ink: #ffffff; --an-accent-soft: #e6e9f2;   /* ink navy: links, focus, chart marks */
  --an-action: #8f1d2c; --an-action-bg: #f8e1e3;                              /* oxblood: needs action (7.1:1 on its bg) */
  --an-attention: #9a5b00; --an-attention-bg: #fcefd6; --an-attention-dot: #e09a2b;
  --an-fine: #23764a; --an-fine-bg: #e0f2e7;
  --an-idle: #626879; --an-idle-bg: #ebedf2;
  --an-track: #e6e9f1; --an-bar: #1f2a44; --an-down: #8f1d2c; --an-up: #23764a;
  /* ember: the brand and the call to act */
  --an-brand: #ea4335; --an-brand-grad: linear-gradient(135deg, #ea4335, #ff6b35);
  --an-btn: #ea4335; --an-btn-hover: #c43221; --an-btn-ink: #ffffff;           /* Lee, 2026-10-02: plain Ember with white semibold text; the darker #c43221 only on hover and press */
  --an-link: #1f2a44; --an-nav-on: #1f2a44;
  --an-tag-bg: #e6e9f2; --an-tag-ink: #1f2a44;
  --an-chart: #1f2a44; --an-chart-soft: #b6bfd4; --an-hatch: #9aa6c2; --an-hatch-bg: #e8ebf3;
  --an-avatar: linear-gradient(135deg, #3a4a72, #1f2a44);
  --an-badge-action: #8f1d2c;                                                  /* the "!" status badge fill (white glyph 8.8:1) */
  /* glass surfaces (shell, Board, popovers) */
  --an-glass: rgba(255, 255, 255, 0.76); --an-glass-strong: rgba(255, 255, 255, 0.94); --an-glass-line: rgba(255, 255, 255, 0.88); --an-blur: 22px;
  --an-sunk: rgba(22, 27, 46, 0.045); --an-hairline: rgba(22, 27, 46, 0.08);
  --an-bg-warm: #f6e3db; --an-bg-cool: #dfe4f0;
  /* shape and depth */
  --an-radius: 10px; --an-r-card: 20px; --an-r-flat: 16px; --an-r-ctl: 999px; --an-row: 44px;
  --an-shadow-card: 0 1px 2px rgba(22, 27, 46, 0.04), 0 14px 36px -18px rgba(22, 27, 46, 0.18);
  --an-shadow-raised: 0 1px 2px rgba(22, 27, 46, 0.06), 0 6px 16px -6px rgba(22, 27, 46, 0.16);
  --an-shadow-pop: 0 2px 6px rgba(22, 27, 46, 0.08), 0 24px 48px -16px rgba(22, 27, 46, 0.28);
}
:root[data-theme="dark"] {
  --an-page: #0d1017; --an-pane: #1a1e2a; --an-card: #222636; --an-hover: #242a3b; --an-line: #2b3144;
  --an-ink: #e9ecf4; --an-muted: #aab1c4; --an-faint: #9198ac; --an-input-line: #7e869c;
  --an-accent: #a9bce3; --an-accent-ink: #10131b; --an-accent-soft: rgba(159, 179, 217, 0.16);
  --an-action: #ff8a9c; --an-action-bg: rgba(224, 71, 95, 0.18);
  --an-attention: #f2c063; --an-attention-bg: rgba(242, 180, 70, 0.14); --an-attention-dot: #f2b546;
  --an-fine: #7fd3a1; --an-fine-bg: rgba(110, 200, 145, 0.14);
  --an-idle: #a7aec0; --an-idle-bg: rgba(255, 255, 255, 0.07);
  --an-track: #2b3144; --an-bar: #9fb3d9; --an-down: #ff8a9c; --an-up: #7fd3a1;
  --an-btn: #ff6b4f; --an-btn-hover: #ff8566; --an-btn-ink: #10131b;          /* 6.6:1 */
  --an-link: #a9bce3; --an-nav-on: #e9ecf4;
  --an-tag-bg: rgba(159, 179, 217, 0.16); --an-tag-ink: #b5c6e8;
  --an-chart: #9fb3d9; --an-chart-soft: rgba(159, 179, 217, 0.4); --an-hatch: rgba(159, 179, 217, 0.5); --an-hatch-bg: rgba(159, 179, 217, 0.1);
  --an-avatar: linear-gradient(135deg, #6f86b8, #3a4a72);
  --an-badge-action: #e0475f;
  --an-glass: rgba(26, 30, 42, 0.74); --an-glass-strong: rgba(34, 38, 54, 0.97); --an-glass-line: rgba(255, 255, 255, 0.07);
  --an-sunk: rgba(255, 255, 255, 0.045); --an-hairline: rgba(255, 255, 255, 0.07);
  --an-bg-warm: #22140f; --an-bg-cool: #121a2c;
  --an-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  --an-shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  --an-shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 56px -16px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
.an-body {
  background-color: var(--an-page); color: var(--an-ink); font: 15px/1.45 var(--an-font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image:
    radial-gradient(1100px 680px at -5% -10%, var(--an-bg-warm) 0%, transparent 62%),
    radial-gradient(1000px 760px at 105% 110%, var(--an-bg-cool) 0%, transparent 62%),
    radial-gradient(800px 500px at 70% 0%, var(--an-bg-cool) 0%, transparent 70%);
  background-attachment: fixed;
}
:root[data-theme="dark"] .an-body { font-weight: 400; }
a { color: var(--an-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.an-row a { color: inherit; }
h1, h2, h3, .an-serif { font-family: var(--an-serif); font-weight: 600; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: 24px; line-height: 1.3; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { font-weight: 500; }
:focus-visible { outline: 2px solid var(--an-brand); outline-offset: 2px; }

/* header: logo left, centred pill nav, search + bell + user right (UI-2). Content width matches .an-main. */
.an-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; height: 68px; padding: 0 40px; background: none; border: 0; }
.an-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--an-serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--an-ink); text-decoration: none; }
.an-brand:hover { text-decoration: none; }
.an-logo { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 2px 4px rgba(22, 27, 46, 0.18)); }
.an-wordmark { font-size: 19px; line-height: 1; white-space: nowrap; }
.an-wm-ads { font-family: 'Space Grotesk', var(--an-font); font-weight: 700; letter-spacing: -0.03em; }
.an-wm-ngin { font-family: 'Space Mono', ui-monospace, Menlo, monospace; font-weight: 700; color: #ea4335; }
.an-nav { display: flex; gap: 2px; padding: 5px; border-radius: var(--an-r-ctl); }
.an-nav a { display: flex; align-items: center; padding: 8px 16px; border-radius: var(--an-r-ctl); color: var(--an-muted); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; }
.an-nav a:hover { color: var(--an-ink); }
.an-nav a.on { background: var(--an-glass-strong); color: var(--an-nav-on); box-shadow: var(--an-shadow-raised); font-weight: 600; }
/* "More" behind the main links: a plain <details>, closed by adsngin-shell.js on an outside click. */
.an-navmore { position: relative; }
.an-navmore summary { list-style: none; display: flex; align-items: center; padding: 8px 16px; border-radius: var(--an-r-ctl); color: var(--an-muted); font-weight: 500; font-size: 14px; cursor: pointer; }
.an-navmore summary::-webkit-details-marker { display: none; }
.an-navmore summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.an-navmore summary:hover, .an-navmore[open] summary { color: var(--an-ink); }
.an-navmore.on summary { color: var(--an-nav-on); font-weight: 600; }
.an-navmore-box { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; padding: 6px; display: grid; background: var(--an-glass-strong); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); border: 1px solid var(--an-glass-line); box-shadow: var(--an-shadow-pop); border-radius: 16px; }
.an-navmore-box a { padding: 9px 12px; }
.an-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.an-bell { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--an-ink); text-decoration: none; }
.an-bell:hover { text-decoration: none; }
.an-bell .an-pip { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--an-brand); box-shadow: 0 0 0 2px var(--an-glass-strong); }
.an-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--an-action-bg); color: var(--an-action); font-size: 12px; font-weight: 600; text-align: center; line-height: 20px; }
.an-user { color: var(--an-muted); font-size: 14px; }
.an-user b { color: var(--an-ink); font-weight: 500; }
.an-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--an-avatar); color: #fff; font-size: 14px; font-weight: 600; flex: none; }
:root[data-theme="dark"] .an-avatar { color: #10131b; }
.an-inline { display: inline; }
.an-icon { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.an-ic { flex: none; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* glass: the translucent surface of the shell, the Board and popovers. Long-table pages use .an-card (flat white). */
.an-glass { background: var(--an-glass); -webkit-backdrop-filter: blur(var(--an-blur)) saturate(140%); backdrop-filter: blur(var(--an-blur)) saturate(140%); border: 1px solid var(--an-glass-line); border-radius: var(--an-r-card); box-shadow: var(--an-shadow-card); }
.an-iconbtn.an-glass { width: 44px; height: 44px; border-radius: 50%; }

/* layout */
.an-main { max-width: 1440px; margin: 0 auto; padding: 8px 40px 48px; }
.an-main > h1 { margin-bottom: 16px; }
.an-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; max-width: 1440px; margin: 0 auto; padding: 8px 40px 48px; align-items: start; }
.an-split > .an-list { background: var(--an-pane); border: 1px solid var(--an-line); border-radius: var(--an-r-flat); overflow: hidden; box-shadow: var(--an-shadow-card); }
.an-split > .an-pane { padding: 0; min-width: 0; }
.an-split > .an-list { min-width: 0; }
.an-foot { text-align: center; color: var(--an-faint); font-size: 12px; padding: 24px; }

/* left list */
.an-list-head { padding: 16px; }
.an-group { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-family: var(--an-serif); font-weight: 600; font-size: 15px; background: var(--an-sunk); border-top: 1px solid var(--an-line); border-bottom: 1px solid var(--an-line); }
.an-group .an-n { font-family: var(--an-serif); font-size: 18px; }
.an-list-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; line-height: 1.3; border-bottom: 1px solid var(--an-line); color: var(--an-ink); text-decoration: none; border-left: 3px solid transparent; font-family: var(--an-serif); font-size: 16px; }
.an-list-row:hover { background: var(--an-card); }
.an-list-row.sel { background: var(--an-card); border-left-color: var(--an-accent); font-weight: 600; }
.an-list-row .an-num { font-family: var(--an-font); font-size: 15px; }
.an-collapsed { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; color: var(--an-muted); border-bottom: 1px solid var(--an-line); }

/* dots and chips */
.an-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--an-idle); flex: 0 0 8px; }
.an-dot.action { background: var(--an-badge-action); } .an-dot.attention { background: var(--an-attention-dot); } .an-dot.fine { background: var(--an-fine); } .an-dot.idle { background: var(--an-idle); }
.an-dot.hollow { background: transparent; border: 1.5px solid var(--an-faint); }
.an-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--an-r-ctl); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--an-idle); background: var(--an-idle-bg); }
.an-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.an-chip.action { color: var(--an-action); background: var(--an-action-bg); }
.an-chip.attention { color: var(--an-attention); background: var(--an-attention-bg); }
.an-chip.fine { color: var(--an-fine); background: var(--an-fine-bg); }
.an-chip.plain::before { display: none; }
/* a chip or pill that holds a sentence (every <p> chip, or .wrap) wraps; short status chips stay on one line */
p.an-chip, p.an-pill, .an-chip.wrap, .an-pill.wrap { height: auto; min-height: 24px; padding: 4px 9px; white-space: normal; max-width: 100%; align-items: flex-start; line-height: 1.4; }
p.an-chip::before, p.an-pill::before, .an-chip.wrap::before, .an-pill.wrap::before { flex: 0 0 6px; margin-top: 7px; }
.an-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
/* .an-pill is the old name of .an-chip: same size, dot and tones (ok = fine, warn = attention, alert = action) */
.an-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--an-r-ctl); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--an-idle); background: var(--an-idle-bg); }
.an-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.an-pill.ok { color: var(--an-fine); background: var(--an-fine-bg); }
.an-pill.warn { color: var(--an-attention); background: var(--an-attention-bg); }
.an-pill.alert { color: var(--an-action); background: var(--an-action-bg); }
.an-pill.muted { color: var(--an-idle); background: var(--an-idle-bg); }
.an-pill.quiet, .an-chip.quiet { background: none; color: var(--an-muted); padding: 0; }
.an-pill.quiet::before, .an-chip.quiet::before { display: none; }
.an-up { color: var(--an-up); } .an-down { color: var(--an-down); }

/* counts strip */
.an-strip { display: flex; align-items: center; gap: 24px; min-height: 72px; margin-bottom: 24px; flex-wrap: wrap; row-gap: 12px; }
.an-strip .an-week { display: flex; align-items: center; gap: 4px; font-family: var(--an-serif); font-weight: 600; font-size: 16px; }
.an-count { display: flex; flex-direction: column; justify-content: center; padding: 0 24px; border-left: 1px solid var(--an-line); min-height: 56px; }
.an-count .an-label { display: flex; align-items: center; gap: 6px; }
.an-count .an-big { font-family: var(--an-serif); font-size: 32px; line-height: 1.1; font-weight: 600; }
.an-count.dim .an-big { color: var(--an-faint); }
.an-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-muted); }
.an-spacer { flex: 1; }

/* tables */
.an-table-wrap { background: var(--an-pane); border: 1px solid var(--an-line); border-radius: var(--an-r-flat); overflow: hidden; margin-bottom: 24px; box-shadow: var(--an-shadow-card); }
.an-thead, .an-row { display: grid; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--an-line); }
.an-thead { height: 44px; background: var(--an-sunk); }
.an-thead .an-title { display: flex; align-items: center; gap: 8px; font-family: var(--an-serif); font-weight: 600; font-size: 16px; color: var(--an-ink); }
.an-thead .an-title .an-n { font-size: 18px; }
.an-row { min-height: var(--an-row); color: var(--an-ink); text-decoration: none; border-left: 3px solid transparent; }
.an-row:hover { background: var(--an-card); }
.an-row.sel { background: var(--an-card); border-left-color: var(--an-accent); }
.an-row:last-child { border-bottom: 0; }
.an-name { font-family: var(--an-serif); font-size: 16px; white-space: nowrap; overflow: hidden; }
.an-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-cur { font-size: 11px; color: var(--an-muted); margin-right: 4px; letter-spacing: 0.04em; }
.an-chev { color: var(--an-faint); justify-self: end; }
table.an-table { width: 100%; border-collapse: collapse; background: var(--an-pane); border: 1px solid var(--an-line); border-radius: var(--an-r-flat); overflow: hidden; }
.an-table th, .an-table td { padding: 10px 12px; border-bottom: 1px solid var(--an-line); text-align: left; vertical-align: middle; }
.an-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-muted); background: var(--an-sunk); }
.an-table tr:last-child td { border-bottom: 0; }
.an-table tbody tr:hover td { background: var(--an-card); }

/* bars */
.an-bar { position: relative; height: 6px; width: 90px; background: var(--an-track); border-radius: 3px; overflow: hidden; }
.an-bar > i { display: block; height: 100%; background: var(--an-bar); border-radius: 3px; }
.an-bar > b { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--an-muted); }
.an-bar-cell { display: flex; align-items: center; gap: 10px; }
.an-delta { position: relative; height: 8px; width: 120px; background: transparent; }
.an-delta::before { content: ""; position: absolute; left: 60px; top: -2px; bottom: -2px; width: 1px; background: var(--an-muted); }
.an-delta > i { position: absolute; top: 0; height: 100%; display: block; }
.an-delta > i.up { left: 60px; background: var(--an-up); }
.an-delta > i.down { right: 60px; background: var(--an-down); }
.an-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.an-bars > i { display: block; flex: 1; background: var(--an-bar); border-radius: 2px 2px 0 0; min-height: 2px; }
.an-bars > i.empty { background: var(--an-faint); height: 2px; opacity: 0.55; border-radius: 0; } /* no data: a baseline tick, never a bar */

/* buttons and forms */
.an-btn { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 64px; margin: 0; padding: 0 16px; border-radius: var(--an-r-ctl); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--an-btn); color: var(--an-btn-ink); box-shadow: var(--an-shadow-raised); }
.an-btn:hover { text-decoration: none; }
.an-btn.secondary { background: var(--an-glass-strong); color: var(--an-ink); border-color: var(--an-hairline); font-weight: 500; }
.an-btn.ghost { background: var(--an-sunk); border-color: transparent; color: var(--an-ink); font-weight: 500; box-shadow: none; }
.an-btn.danger { background: transparent; color: var(--an-ink); border: 1.5px solid var(--an-ink); box-shadow: none; font-weight: 600; } /* destructive = an outlined Ink button; status colours are never button fills */
.an-btn.danger::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; margin-right: 7px; background: currentColor; -webkit-mask: var(--an-warn-icon) center / contain no-repeat; mask: var(--an-warn-icon) center / contain no-repeat; }
.an-btn.danger:hover { background: var(--an-sunk); filter: none; }
.an-btn.sm { height: 32px; min-width: 0; padding: 0 13px; font-size: 13px; }
.an-btn.tall { height: 44px; }
.an-btn:hover { filter: brightness(0.96); }
.an-btn:not(.secondary):not(.ghost):not(.txt):not(.danger):hover, .an-btn:not(.secondary):not(.ghost):not(.txt):not(.danger):active { background: var(--an-btn-hover); filter: none; }
.an-link { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; color: var(--an-muted); cursor: pointer; margin: 0; padding: 0 4px; font: inherit; }
.an-link:hover { color: var(--an-ink); }
.an-input, .an-card input:not([type=checkbox]):not([type=radio]), .an-card select, .an-card textarea { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--an-input-line); border-radius: var(--an-radius); font: inherit; background: var(--an-card); color: var(--an-ink); }
.an-card textarea { height: auto; min-height: 72px; padding: 8px 10px; }
.an-card label { display: block; margin: 8px 0; }
.an-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--an-input-line); border-radius: var(--an-r-ctl); background: var(--an-card); color: var(--an-muted); }
.an-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--an-ink); outline: none; }

/* cards */
.an-card { background: var(--an-pane); border: 1px solid var(--an-line); border-radius: var(--an-r-flat); padding: 16px; margin-bottom: 16px; box-shadow: var(--an-shadow-card); }
.an-card-head { display: flex; align-items: center; gap: 8px; margin: -16px -16px 16px; padding: 0 16px; height: 44px; border-bottom: 1px solid var(--an-line); background: var(--an-sunk); border-radius: var(--an-r-flat) var(--an-r-flat) 0 0; }
.an-narrow { max-width: 380px; margin: 40px auto; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.an-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; }
.an-kv dt { color: var(--an-muted); overflow-wrap: anywhere; } .an-kv dd { margin: 0; overflow-wrap: anywhere; }
.an-kv-stack { grid-template-columns: minmax(0, 1fr); gap: 0 12px; } .an-kv-stack dd { margin-bottom: 8px; }
.an-muted { color: var(--an-muted); }
.an-messages { list-style: none; padding: 0; margin: 0 0 16px; }
.an-messages li { padding: 8px 12px; border-radius: var(--an-radius); background: var(--an-attention-bg); color: var(--an-attention); margin-bottom: 8px; }
.an-messages li.error { background: var(--an-action-bg); color: var(--an-action); }
.an-empty { color: var(--an-muted); padding: 24px 16px; }
.an-hr { border: 0; border-top: 1px solid var(--an-line); margin: 16px 0; }

/* phone */
@media (max-width: 640px) {
  .an-main { padding: 4px 16px 24px; }
  .an-split { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 24px; gap: 16px; }
  .an-split > .an-pane { padding: 0; }
  .an-nav { display: none; }
  .an-top { grid-template-columns: 1fr auto; height: 60px; padding: 0 16px; gap: 12px; }
  .an-strip { min-height: 0; gap: 12px; }
  .an-count { padding: 0 12px; }
  /* group headings stay; only the column labels go (a thead with no title disappears entirely) */
  .an-thead { display: flex; gap: 8px; }
  .an-thead > .an-label, .an-thead > span:empty { display: none; }
  .an-thead > .an-title { flex: 1; }
  .an-thead:not(:has(.an-title)) { display: none; }
  .an-row { grid-template-columns: 16px 1fr auto; }
  .an-row > .an-hide-phone { display: none; }
  .an-list-row { grid-template-columns: 16px minmax(0, 1fr) auto; height: auto; min-height: 52px; padding: 8px 12px; }
  .an-list-row .an-name { white-space: normal; }
  table.an-table { display: block; overflow-x: auto; white-space: nowrap; }
  .an-body { padding-bottom: 104px; }
}
@media (min-width: 641px) { .an-tabs, .an-sheet { display: none !important; } }

/* board additions */
.an-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--an-ink); cursor: pointer; text-decoration: none; padding: 0; border-radius: var(--an-radius); }
.an-iconbtn:hover { background: var(--an-card); }
.an-span2 { grid-column: span 2; }
.an-board .an-thead, .an-board .an-row { grid-template-columns: 16px minmax(0, 1fr) 160px 90px 84px 90px 48px 120px 48px 16px; }
.an-bar.conv > b { left: 20px; }
.an-waiting-row { grid-template-columns: 16px minmax(160px, 280px) 1fr auto; }
.an-waiting-row .an-name { white-space: normal; overflow: visible; }
.an-waiting-desc { display: flex; align-items: center; gap: 10px; }
.an-waiting-actions { display: flex; gap: 8px; justify-self: end; }
.an-list-name { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.an-list-chip { display: none; }
summary.an-collapsed { cursor: pointer; list-style: none; }
summary.an-collapsed::-webkit-details-marker { display: none; }
.an-account-numbers { display: flex; gap: 16px; }
.an-account-numbers .an-count { flex: 1; padding: 12px 16px; height: auto; border: 1px solid var(--an-line); background: var(--an-pane); border-left: 0; }
.an-account-numbers .an-big { display: inline-flex; align-items: baseline; gap: 10px; }
.an-account-charts { display: flex; gap: 40px; padding: 16px; flex-wrap: wrap; }
.an-account-chart .an-label { margin-bottom: 8px; }
.an-account-chart .an-bars { width: 100%; }
.an-chart-labels { display: flex; gap: 6px; margin-top: 6px; }
.an-chart-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--an-muted); }
.an-proposals { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: stretch; margin-bottom: 24px; }
.an-proposals-more { margin: -12px 0 24px; }
.an-proposals .an-card { flex: 1; min-width: 0; margin-bottom: 0; }
.an-comment { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.an-comment b { color: var(--an-muted); }
.an-contract-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.an-contract-form > div { flex: 1; min-width: 140px; }
.an-contract-form label { display: block; margin-bottom: 4px; }
.an-account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.an-account-head .an-chips { display: flex; gap: 6px; }
.an-conversion-line { display: flex; align-items: center; gap: 12px; padding: 16px; }
.an-yes-form { display: flex; flex-direction: column; gap: 8px; }
.an-yes-form .an-input-row { display: flex; gap: 8px; align-items: flex-end; }
.an-yes-form .an-input-row > div { flex: 1; }
.an-yes-form label { display: block; margin-bottom: 4px; }
.an-form-buttons { display: flex; gap: 8px; }
.an-proposal-params { padding: 0 16px; }
.an-proposal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 640px) {
  /* A broader phone-hide than the existing .an-row > .an-hide-phone (that one only hides a
     row's own cells); this one hides a whole block, namely the board's metric table - the left
     list (with its own per-row chip, see .an-list-chip above) is the phone view. */
  .an-hide-phone { display: none; }
  .an-list-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .an-list-chip { display: inline-flex; }
  .an-waiting-row { grid-template-columns: 16px 1fr auto; height: auto; padding: 8px 12px; gap: 8px; }
  .an-waiting-desc { flex-direction: column; align-items: flex-start; gap: 4px; grid-column: 2; }
  .an-account-numbers { flex-wrap: wrap; }
  .an-account-numbers .an-count { flex: 1 1 45%; }
  .an-proposals { grid-template-columns: 1fr; }
  .an-contract-form > div { flex: 1 1 100%; }
}

/* integration fixes 2026-09-28: names never truncate, chips wrap, strip labels stay on one line */
.an-table-wrap.an-board { overflow-x: auto; }
.an-board .an-thead, .an-board .an-row { grid-template-columns: 16px minmax(170px, 1fr) minmax(150px, 230px) 90px 96px 90px 52px 120px 64px 16px; gap: 12px; }
.an-board .an-row { padding-top: 6px; padding-bottom: 6px; }
.an-board .an-name { white-space: normal; overflow: visible; line-height: 1.3; }
.an-board .an-chips { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
.an-strip .an-week, .an-count .an-label, .an-strip .an-contracts { white-space: nowrap; }
.an-strip { gap: 12px; }
.an-count { padding: 0 12px; }
.an-strip-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.an-strip.an-stretch { align-items: stretch; }
.an-strip .an-iconbtn { width: 40px; }

/* laptop widths (a 1440 screen with a Firefox sidebar, or a not-quite-maximised window): a narrower
   left list, tighter pane padding, and the board drops its WoW bar so every column stays in view */
@media (min-width: 641px) and (max-width: 1280px) {
  .an-split { grid-template-columns: 280px minmax(0, 1fr); }
  .an-split > .an-pane { padding: 20px 20px; }
  .an-board .an-thead, .an-board .an-row { grid-template-columns: 16px minmax(150px, 1fr) minmax(130px, 200px) 70px 90px 70px 52px 0 64px 16px; gap: 12px; min-width: 0; }
  .an-board .an-delta { width: 0; visibility: hidden; }
  .an-board .an-bar { width: 70px; }
}
.an-count .an-big, .an-money { white-space: nowrap; }
.an-money { font-size: 28px; }
.an-money .an-cur { font-size: 12px; vertical-align: 6px; }


/* -- UI fix pass 2026-09-29 (U-ids in .agent/QC notes) ---------------------------------- */
.an-count .an-big small { font-size: 14px; font-weight: 500; margin-left: 8px; }
.an-body { -webkit-text-size-adjust: 100%; }

/* one chip system: a level chip is filled, its reasons are outlined (U32) */
.an-chip.solid { color: var(--an-accent-ink); background: var(--an-idle); }
.an-chip.solid::before { display: none; }
.an-chip.solid.action { background: var(--an-action); }
.an-chip.solid.attention { background: var(--an-attention); }
.an-chip.solid.fine { background: var(--an-fine); }
.an-chip.outline.action, .an-chip.outline.attention, .an-chip.outline.fine { background: none; border: 1px solid currentColor; }
.an-chip.outline.action { color: var(--an-action); }
.an-chip.outline.attention { color: var(--an-attention); }
.an-chip.outline.fine { color: var(--an-fine); }

/* form errors, login errors, field errors (U3, U33) */
.errorlist { list-style: none; margin: 0 0 12px; padding: 0; }
.errorlist li { padding: 8px 12px; border-radius: var(--an-radius); background: var(--an-action-bg); color: var(--an-action); }
.an-field-error { margin: 4px 0 0; font-size: 13px; color: var(--an-action); }
.an-card input[aria-invalid="true"], .an-card select[aria-invalid="true"], .an-card textarea[aria-invalid="true"] { border-color: var(--an-action); box-shadow: 0 0 0 1px var(--an-action); }
.an-card .an-form-error { padding: 8px 12px; margin-bottom: 12px; border-radius: var(--an-radius); background: var(--an-action-bg); color: var(--an-action); }

/* contract form: three rows sized by content (U15) */
.an-contract-form { display: block; }
.an-contract-form .an-fieldrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.an-contract-form .an-fieldrow > div { flex: 1 1 150px; min-width: 0; }
.an-contract-form .an-fieldrow > .an-field-wide { flex: 2 1 320px; }
.an-contract-form .an-fieldrow > .an-field-narrow { flex: 0 1 140px; }
.an-contract-form label { display: block; margin: 0 0 4px; color: var(--an-muted); font-size: 13px; }
.an-contract-form .an-fieldset-title { margin: 0 0 6px; }

/* client card: cells start at the top (U22) */
.an-client-grid .an-count { justify-content: flex-start; }

/* accounts list (U12): ended and non-active rows recede */
.an-table tr.an-row-ended td, .an-table tr.an-row-ended a { color: var(--an-muted); }

/* back row on account detail; only shown on phone (U4) */
.an-back { display: none; align-items: center; gap: 6px; min-height: 44px; margin: -4px 0 8px; color: var(--an-muted); }

/* notes-to-confirm first, rules collapsible (U27) */
.an-kn-rules > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.an-kn-rules > summary::-webkit-details-marker { display: none; }
.an-kn-rules > summary::after { content: "Show rules \25BE"; margin-left: auto; flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--an-hairline); border-radius: var(--an-r-ctl); font-size: 13px; font-weight: 500; color: var(--an-ink); }
.an-kn-rules[open] > summary::after { content: "Hide rules \25B4"; }
.an-kn-rules > summary:hover::after { background: var(--an-sunk); }
.an-crumbs { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--an-muted); font-size: 14px; }
.an-crumbs a { color: var(--an-muted); }

/* laptop widths: the WoW label right-aligns over its number now that the bar is gone (U46) */
@media (min-width: 641px) and (max-width: 1280px) {
  .an-board .an-thead > .an-label:nth-child(5) { text-align: right; }
}

/* reusable: a table that becomes stacked card rows on phone; give each td a data-label (U31) */
@media (max-width: 640px) {
  table.an-table.an-cardrows { display: block; overflow: visible; white-space: normal; border: 0; background: none; }
  .an-cardrows thead { display: none; }
  .an-cardrows tbody, .an-cardrows tr, .an-cardrows td { display: block; }
  .an-cardrows tr { padding: 12px; margin-bottom: 8px; border: 1px solid var(--an-line); border-radius: var(--an-radius); background: var(--an-pane); }
  .an-cardrows td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; }
  .an-cardrows td::before { content: attr(data-label); color: var(--an-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
  .an-cardrows td:first-child { display: block; font-size: 16px; }
  .an-cardrows td:first-child::before, .an-cardrows td[colspan]::before { display: none; }
  .an-cardrows td.an-num { text-align: right; }
  .an-cardrows tbody tr:hover td { background: none; }

  /* Board and Account detail: the pane comes first, the account list follows (U4) */
  .an-split { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .an-split > * { min-width: 0; }
  .an-account-head .an-chips { flex-wrap: wrap; overflow: visible; max-width: 100%; }
  .an-split > .an-pane { order: -1; }
  .an-split.an-split-detail > .an-list { display: none; }
  .an-back { display: flex; }

  /* header: avatar only, Log out never wraps (U30) */
  .an-user b, .an-user small { display: none; }
  .an-right { gap: 8px; }
  .an-right .an-link { white-space: nowrap; }
}

/* Monday routine (SDT-1): mock banner, board clear strip, checklist, Reviewed tick, lead quality, guide */
.an-mockbanner { position: sticky; top: 0; z-index: 50; padding: 8px 24px; background: var(--an-btn); color: var(--an-btn-ink); font-size: 13.5px; font-weight: 500; text-align: center; line-height: 1.35; }
.an-mockbanner b { letter-spacing: 0.08em; }
.an-monday { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--an-line); border-radius: var(--an-r-flat); background: var(--an-pane); }
.an-monday-state { font-family: var(--an-serif); font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.an-monday.cleared { background: var(--an-fine-bg); border-color: var(--an-fine); }
.an-monday.cleared .an-monday-state { color: var(--an-fine); }
.an-monday-guide { margin-left: auto; }
.an-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; padding-bottom: 8px; }
.an-check-row .an-name { flex: 1 1 200px; min-width: 0; }
.an-check-row .an-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.an-reviewed { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.an-lq-form { flex-wrap: wrap; align-items: center; }
.an-lq-form input[type="text"] { flex: 1 1 220px; min-width: 0; }
.an-generate-all { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.an-guide { max-width: 760px; line-height: 1.55; }
.an-guide h1 { margin-bottom: 12px; }
.an-guide h2 { margin: 24px 0 8px; }
.an-guide li { margin-bottom: 6px; }
.an-guide code { font-size: 13px; background: var(--an-card); padding: 1px 5px; border-radius: 4px; }
.an-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* -- UI-2 shell (2026-10-02): account menu, quick search, phone tab bar and More sheet ------------- */
.an-menu { position: relative; }
.an-menubtn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 5px; border-radius: var(--an-r-ctl); background: var(--an-glass); -webkit-backdrop-filter: blur(var(--an-blur)) saturate(140%); backdrop-filter: blur(var(--an-blur)) saturate(140%); border: 1px solid var(--an-glass-line); box-shadow: var(--an-shadow-card); font: inherit; cursor: pointer; }
.an-menubtn b { font-weight: 500; }
.an-menubtn .an-caret { width: 16px; height: 16px; color: var(--an-muted); transition: transform 0.15s; }
.an-menu.open .an-caret { transform: rotate(180deg); }
.an-menupanel { display: none; position: absolute; right: 0; top: 100%; z-index: 60; width: 288px; padding-top: 10px; }
.an-menu.open .an-menupanel { display: block; }
.an-menubox { padding: 8px; background: var(--an-glass-strong); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); border: 1px solid var(--an-glass-line); box-shadow: var(--an-shadow-pop); border-radius: 18px; }
.an-menu-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--an-hairline); margin-bottom: 6px; }
.an-menu-head b { display: block; font-weight: 600; }
.an-menu-head small { color: var(--an-muted); font-size: 12.5px; }
.an-avatar-lg { width: 40px; height: 40px; font-size: 16px; }
.an-role { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: var(--an-r-ctl); background: var(--an-tag-bg); color: var(--an-tag-ink); font-size: 11.5px; font-weight: 600; }
.an-menupanel form { display: block; margin: 0; }
.an-menupanel form.an-menuitem { display: flex; }
.an-menuitem { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--an-ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.an-menuitem:hover { background: var(--an-sunk); text-decoration: none; }
.an-menuitem .an-ic { color: var(--an-muted); width: 17px; height: 17px; }
.an-menuitem.dis { color: var(--an-faint); cursor: default; opacity: 1; }
.an-menuitem.dis:hover { background: none; }
.an-soon { margin-left: auto; font-size: 11.5px; color: var(--an-faint); }
.an-menu-theme { cursor: default; }
.an-menu-theme:hover { background: none; }
.an-seg { display: inline-flex; margin-left: auto; padding: 2px; border-radius: var(--an-r-ctl); background: var(--an-sunk); box-shadow: inset 0 0 0 1px var(--an-hairline); }
.an-seg button { appearance: none; border: 0; background: transparent; padding: 4px 11px; border-radius: var(--an-r-ctl); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--an-muted); white-space: nowrap; }
.an-seg button.on { background: var(--an-glass-strong); color: var(--an-ink); box-shadow: var(--an-shadow-raised); font-weight: 600; }
.an-menubox hr { border: 0; border-top: 1px solid var(--an-hairline); margin: 6px 0; }

.an-searchwrap { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(13, 16, 23, 0.38); }
.an-searchwrap[hidden], .an-sheet[hidden] { display: none; }
.an-searchbox { width: min(520px, 100%); max-height: 70vh; overflow: auto; padding: 8px; background: var(--an-glass-strong); box-shadow: var(--an-shadow-pop); border-radius: 18px; }
.an-searchfield { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; color: var(--an-muted); }
.an-searchfield input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--an-ink); outline: none; }
.an-searchlist { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--an-hairline); }
.an-searchlist li[hidden] { display: none; }
.an-searchlist a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--an-ink); text-decoration: none; }
.an-searchlist a:hover, .an-searchlist a.sel { background: var(--an-sunk); text-decoration: none; }
.an-searchlist a.sel { box-shadow: inset 3px 0 0 var(--an-brand); }

.an-tabs { display: none; }
.an-sheet { display: none; }
@media (max-width: 640px) {
  .an-tabs { display: flex; position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 70; justify-content: space-around; padding: 6px; border-radius: 26px; background: var(--an-glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--an-glass-line); box-shadow: var(--an-shadow-pop); }
  .an-tabs a, .an-tabs .an-tabmore { appearance: none; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border: 0; border-radius: 20px; background: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--an-muted); text-decoration: none; cursor: pointer; }
  .an-tabs a .an-ic, .an-tabs .an-tabmore .an-ic { width: 20px; height: 20px; }
  .an-tabs a.on { color: var(--an-nav-on); background: var(--an-tag-bg); font-weight: 600; }
  .an-sheet:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 75; align-items: flex-end; padding: 12px 12px 92px; background: rgba(13, 16, 23, 0.38); }
  .an-sheetbox { width: 100%; padding: 8px; display: grid; background: var(--an-glass-strong); box-shadow: var(--an-shadow-pop); border-radius: 22px; }
  .an-sheetbox a, .an-sheetbox button { appearance: none; display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: none; font: inherit; font-size: 15px; color: var(--an-ink); text-align: left; text-decoration: none; cursor: pointer; }
  .an-sheetbox a.on { background: var(--an-tag-bg); font-weight: 600; color: var(--an-nav-on); }
  .an-menubtn { padding: 0 8px 0 4px; gap: 6px; }
  .an-menubtn b { display: none; }
  .an-menupanel { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; }
  .an-searchwrap { padding-top: 72px; }
}

/* -- UI-2 Board (2026-10-02): greeting, KPI cards, grouped account rows, side column ------------------ */
.an-boardpage { padding-top: 4px; }
.an-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 0 20px; }
.an-hello h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.an-hello p { margin: 6px 0 0; color: var(--an-muted); }
.an-week { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--an-r-ctl); }
.an-week > span:not(.an-iconbtn) { padding: 0 10px; font-weight: 500; font-size: 14px; white-space: nowrap; }
.an-week .an-iconbtn { width: 36px; height: 36px; border-radius: 50%; }
.an-board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 20px; align-items: start; }
.an-col { display: grid; gap: 20px; min-width: 0; }
.an-side-col { position: sticky; top: 16px; }

.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.an-kpi { padding: 18px 20px; display: flex; flex-direction: column; min-height: 176px; }
.an-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.an-kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--an-sunk); color: var(--an-ink); }
.an-kpi-ic .an-ic { width: 20px; height: 20px; stroke-width: 1.5; }
.an-kpi-n { font-size: clamp(26px, 2.3vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-kpi-n small { font-size: 16px; font-weight: 500; color: var(--an-faint); letter-spacing: 0; }
.an-kpi-l { margin-top: 6px; color: var(--an-muted); font-size: 13.5px; line-height: 1.35; }
.an-kpi-foot { margin-top: auto; padding-top: 12px; }
.an-track { position: relative; height: 10px; border-radius: 999px; background: var(--an-sunk); overflow: hidden; }
.an-track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--an-chart) 0 5px, color-mix(in srgb, var(--an-chart) 75%, white) 5px 10px); }
.an-track.pace { overflow: visible; }
.an-track.pace i { background: var(--an-chart); opacity: .85; }
.an-track .an-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--an-ink); border-radius: 2px; opacity: .55; }
.an-kpi-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--an-faint); }
.an-link-arrow { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--an-muted); background: var(--an-glass-strong); box-shadow: var(--an-shadow-raised); border: 1px solid var(--an-hairline); }
.an-link-arrow:hover { text-decoration: none; color: var(--an-ink); }
.an-link-arrow .an-ic { width: 15px; height: 15px; }
.an-kbars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.an-kbars i { flex: 1; border-radius: 4px 4px 1px 1px; min-height: 3px; background: repeating-linear-gradient(-45deg, var(--an-hatch) 0 2px, var(--an-hatch-bg) 2px 4px); }
.an-kbars i.now { background: var(--an-chart); }
.an-kbars i.empty { height: 2px; min-height: 2px; background: var(--an-faint); opacity: .5; border-radius: 0; }

/* week-on-week / delta pill (up = green, down = oxblood) */
.an-dpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--an-r-ctl); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; letter-spacing: 0; }
.an-dpill.up { background: var(--an-fine-bg); color: var(--an-fine); }
.an-dpill.down { background: var(--an-action-bg); color: var(--an-action); }
.an-dpill.flat { background: var(--an-idle-bg); color: var(--an-muted); }
.an-dpill.warn { background: var(--an-attention-bg); color: var(--an-attention); }

.an-card-h { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; }
.an-card-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.an-card-h .an-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.an-npill { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--an-r-ctl); background: var(--an-sunk); font-size: 12.5px; font-weight: 600; color: var(--an-muted); }
.an-btn.txt { background: transparent; color: var(--an-muted); font-weight: 500; box-shadow: none; }
.an-dec, .an-cur + .an-dec { color: var(--an-faint); font-weight: 400; }
.an-kpi .an-cur, .an-asp .an-cur { color: var(--an-faint); font-size: 0.62em; font-weight: 500; letter-spacing: 0.04em; margin-right: 3px; }

.an-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 22px 12px; font-size: 12.5px; color: var(--an-muted); }
.an-legend b { color: var(--an-ink); font-weight: 600; }
.an-ln { display: inline-flex; align-items: center; gap: 6px; }
.an-sw { width: 10px; height: 10px; border-radius: 3px; }
.an-sw.ok { background: var(--an-fine-bg); box-shadow: inset 0 0 0 1px var(--an-fine); }
.an-sw.low { background: var(--an-attention-bg); box-shadow: inset 0 0 0 1px var(--an-attention); }
.an-sw.unv { box-shadow: inset 0 0 0 1px var(--an-faint); }

.an-acols, .an-arow { display: grid; grid-template-columns: minmax(0, 1fr) 118px 72px 76px 100px 66px 48px 16px; gap: 12px; align-items: center; padding: 0 22px; }
.an-acols { height: 34px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--an-faint); border-bottom: 1px solid var(--an-hairline); }
.an-acols span:not(:first-child) { text-align: right; }
.an-acols span.an-c { text-align: center; }
.an-grp { display: flex; align-items: center; gap: 10px; padding: 0 22px; height: 40px; background: var(--an-sunk); font-weight: 600; font-size: 13.5px; border-top: 1px solid var(--an-hairline); }
.an-grp .an-npill { background: var(--an-glass-strong); }
.an-grp .an-hint { margin-left: auto; font-weight: 400; color: var(--an-muted); font-size: 12.5px; }
.an-grp.action .an-lbl { color: var(--an-action); }
summary.an-grp { cursor: pointer; list-style: none; }
summary.an-grp::-webkit-details-marker { display: none; }
.an-idle-group[open] > summary .an-ic { transform: rotate(180deg); }
.an-arow { min-height: 56px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--an-hairline); color: var(--an-ink); }
.an-arow:hover { background: color-mix(in srgb, var(--an-glass-strong) 60%, transparent); text-decoration: none; }
.an-accounts > :last-child { border-bottom: 0; }
.an-anm { display: flex; align-items: center; gap: 12px; min-width: 0; }
.an-anm-t { min-width: 0; flex: 1; }
.an-anm-t b { display: inline-block; max-width: 100%; font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.an-why { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.an-why span { font-size: 12px; color: var(--an-muted); white-space: nowrap; }
.an-why span + span::before { content: "\00b7"; margin-right: 6px; color: var(--an-faint); }
.an-why .an-hot { color: var(--an-action); font-weight: 500; }
.an-why .an-warm { color: var(--an-attention); font-weight: 500; }
.an-tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 0 5px; border-radius: 5px; background: var(--an-sunk); color: var(--an-muted); margin-left: 6px; vertical-align: 1px; }
.an-why2 { color: var(--an-muted); font-size: 13px; }

/* status marker: a dot with a halo; "needs action" is the oxblood "!" badge, never a brand shape */
.an-mk { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--an-idle); position: relative; }
.an-mk.action { width: 16px; height: 16px; margin: 0 -3px; display: grid; place-items: center; background: var(--an-badge-action); }
.an-mk.action::after { content: "!"; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.an-mk.attention { background: var(--an-attention-dot); box-shadow: 0 0 0 4px var(--an-attention-bg); }
.an-mk.fine { background: var(--an-fine); box-shadow: 0 0 0 4px var(--an-fine-bg); }

.an-asp { text-align: right; font-weight: 500; white-space: nowrap; }
.an-act-ct, .an-act-cv { text-align: right; }
.an-rate { display: inline-block; min-width: 54px; text-align: center; padding: 3px 8px; border-radius: var(--an-r-ctl); font-size: 12.5px; font-weight: 600; }
.an-rate.ok { background: var(--an-fine-bg); color: var(--an-fine); }
.an-rate.low { background: var(--an-attention-bg); color: var(--an-attention); }
.an-rate.na { background: transparent; color: var(--an-faint); font-weight: 500; }
.an-rate.unv { background: transparent; color: var(--an-muted); box-shadow: inset 0 0 0 1px var(--an-faint); font-weight: 500; }
.an-aen { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.an-aen b { font-weight: 600; min-width: 18px; text-align: right; }
.an-spark { display: flex; align-items: flex-end; gap: 2px; width: 56px; height: 24px; }
.an-spark i { flex: 1; background: var(--an-chart-soft); border-radius: 1.5px 1.5px 0 0; min-height: 2px; }
.an-spark i.now { background: var(--an-chart); }
.an-spark i.empty { height: 2px; min-height: 2px; background: var(--an-faint); opacity: .55; border-radius: 0; }
.an-awo { text-align: right; }
.an-amd { display: flex; justify-content: center; gap: 4px; }
.an-tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--an-faint); color: transparent; }
.an-tick.on { background: var(--an-fine); box-shadow: none; color: #fff; }
:root[data-theme="dark"] .an-tick.on { color: #10251a; }
.an-tick svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.an-ach { color: var(--an-faint); display: flex; }
.an-ach .an-ic { width: 16px; height: 16px; }
.an-checklist > summary { display: flex; cursor: pointer; list-style: none; }
.an-checklist > summary::-webkit-details-marker { display: none; }
.an-checklist[open] > summary .an-icon { transform: rotate(180deg); }

/* side column: decisions and recent activity */
.an-side { padding-bottom: 8px; }
.an-side .an-card-h { padding-bottom: 6px; }
.an-dec-item { padding: 12px 22px 14px; border-top: 1px solid var(--an-hairline); }
.an-card-h + .an-dec-item { border-top: 0; }
.an-dec-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--an-muted); }
.an-dec-item p { margin: 6px 0 10px; font-weight: 500; font-size: 14.5px; line-height: 1.35; }
.an-dec-item .an-why2 { margin: -4px 0 12px; }
.an-dec-act { display: flex; gap: 8px; flex-wrap: wrap; }
.an-tier { margin-left: auto; display: inline-block; padding: 1px 8px; border-radius: var(--an-r-ctl); background: var(--an-tag-bg); color: var(--an-tag-ink); font-weight: 600; font-size: 11.5px; }
.an-act { list-style: none; margin: 0; padding: 4px 22px 10px; }
.an-act li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 10px 0; align-items: start; }
.an-act li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 44px; bottom: -6px; width: 1px; background: var(--an-hairline); }
.an-aic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--an-sunk); color: var(--an-muted); }
.an-aic .an-ic { width: 15px; height: 15px; }
.an-aic.ok { background: var(--an-fine-bg); color: var(--an-fine); }
.an-act .an-t { font-size: 13.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.an-act .an-t b { font-weight: 600; }
.an-act .an-t span { display: block; color: var(--an-muted); font-size: 12.5px; }
.an-act time { color: var(--an-faint); font-size: 12px; white-space: nowrap; padding-top: 1px; }
.an-more { display: block; text-align: center; padding: 10px; margin: 0 14px 6px; border-radius: 12px; color: var(--an-link); font-weight: 600; font-size: 13.5px; }

@media (max-width: 1100px) {
  .an-board-grid { grid-template-columns: minmax(0, 1fr); }
  .an-side-col { position: static; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .an-hello { margin: 6px 0 16px; flex-direction: column; align-items: stretch; }
  .an-hello h1 { font-size: 26px; }
  .an-week { justify-content: space-between; }
  .an-board-grid { gap: 16px; }
  .an-col { gap: 16px; }
  .an-kpis { gap: 12px; }
  .an-kpi { padding: 14px; min-height: 0; }
  .an-kpi-top { margin-bottom: 10px; }
  .an-kpi-ic { width: 34px; height: 34px; border-radius: 10px; }
  .an-kpi .an-link-arrow { display: none; }
  .an-kpi-n { font-size: 26px; gap: 6px; }
  .an-kpi-n small { font-size: 13px; }
  .an-kpi-l { font-size: 12.5px; }
  .an-card-h { padding: 16px 16px 10px; flex-wrap: wrap; }
  .an-card-h .an-end .an-btn.secondary { display: none; }
  .an-legend { padding: 0 16px 10px; }
  .an-acols { display: none; }
  .an-grp { padding: 0 16px; }
  .an-arow { grid-template-columns: 96px 82px 96px minmax(0, 1fr); grid-template-areas: "nm nm nm wo" "sp ct cv en"; gap: 8px; padding: 12px 16px; }
  .an-anm { grid-area: nm; } .an-asp { grid-area: sp; text-align: left; padding-left: 22px; font-size: 13.5px; } .an-act-ct { grid-area: ct; text-align: left; } .an-act-cv { grid-area: cv; text-align: left; } .an-aen { grid-area: en; } .an-awo { grid-area: wo; align-self: start; }
  .an-arow .an-amd, .an-arow .an-ach { display: none; }
  .an-rate { min-width: 0; font-size: 12px; padding: 2px 7px; }
  .an-rate::before { content: attr(data-k) " "; font-weight: 500; opacity: .8; }
  .an-dec-item, .an-act { padding-left: 16px; padding-right: 16px; }
  .an-boardpage .an-table-wrap { overflow-x: auto; }
}

/* ======================================================================================================
   UI-2 phase 2 (2026-10-02): the shared old classes restyled into "Ember + Ink" so every page inherits
   them. Class names are unchanged; this block sits last so it wins over the pre-UI-2 rules above.
   Long-table pages use the flat white card (sample C); glass stays on the shell and the Board.
   ====================================================================================================== */

/* page title: one size for every page head */
.an-main > h1, .an-main .an-titlebar h1, .an-main > div > h1:first-child { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 8px 0 16px; }
.an-main .an-titlebar h1 { margin: 0; }
.an-main > h1 + p, .an-main > div > h1 + p { margin: -6px 0 20px; }
.an-main .an-titlebar { margin: 8px 0 18px; }
.an-main h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.an-main h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }

/* KPI cards: a counts strip is a row of flat white cards with a big number (the D KPI card, no glass) */
.an-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: stretch; min-height: 0; margin-bottom: 20px; }
.an-strip .an-week { grid-column: 1 / -1; }
.an-strip > .an-spacer { display: none; }
.an-strip-end { grid-column: 1 / -1; margin-left: 0; }
.an-count { padding: 16px 20px; min-height: 0; border: 1px solid var(--an-line); border-left: 1px solid var(--an-line); border-radius: var(--an-r-flat); background: var(--an-pane); box-shadow: var(--an-shadow-card); }
.an-count .an-label { margin-bottom: 8px; }
.an-count .an-big { font-size: clamp(26px, 2.3vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-family: var(--an-font); }
.an-count.dim .an-big { color: var(--an-faint); }
.an-label { font-size: 11.5px; letter-spacing: 0.05em; color: var(--an-muted); }
.an-count .an-label { color: var(--an-muted); }
.an-money { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

/* status dots: "needs action" is the oxblood "!" badge, amber and green are dots with a soft halo, idle is grey */
.an-dot.action { width: 16px; height: 16px; flex: 0 0 16px; margin: 0 -3px; display: inline-grid; place-items: center; background: var(--an-badge-action); vertical-align: middle; }
.an-dot.action::after { content: "!"; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.an-row .an-dot.attention, .an-thead .an-dot.attention, .an-label .an-dot.attention, .an-list-row .an-dot.attention { box-shadow: 0 0 0 4px var(--an-attention-bg); }
.an-row .an-dot.fine, .an-thead .an-dot.fine, .an-label .an-dot.fine { box-shadow: 0 0 0 4px var(--an-fine-bg); }
.an-dots .an-dot, .an-legend .an-dot { box-shadow: none; }
.an-dots .an-dot.action, .an-legend .an-dot.action { width: 9px; height: 9px; flex-basis: 9px; margin: 0; background: var(--an-badge-action); }
.an-dots .an-dot.action::after, .an-legend .an-dot.action::after { content: none; }
.an-dots .an-dot, .an-dots .an-dot.hollow { width: 9px; height: 9px; flex-basis: 9px; }
.an-chip, .an-pill { font-size: 12.5px; }

/* tables and row lists: flat white card, hairline rows, small faint column labels (the D row layout) */
.an-table-wrap { border-radius: var(--an-r-flat); box-shadow: var(--an-shadow-card); }
.an-thead { height: 48px; background: var(--an-sunk); border-bottom: 1px solid var(--an-hairline); }
.an-thead .an-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--an-font); }
.an-thead .an-title .an-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 8px; border-radius: var(--an-r-ctl); background: var(--an-pane); color: var(--an-muted); font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--an-hairline); }
.an-thead > .an-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--an-faint); }
.an-row { min-height: 54px; border-bottom: 1px solid var(--an-hairline); padding-top: 8px; padding-bottom: 8px; }
.an-row:hover { background: var(--an-hover); }
.an-row.sel { background: var(--an-hover); }
.an-name { font-family: var(--an-font); font-size: 14.5px; font-weight: 500; }
.an-list-row, .an-group .an-n { font-family: var(--an-font); }
.an-collapsed { height: 48px; border-bottom: 0; }
.an-table-wrap > .an-collapsed .an-label { letter-spacing: 0.05em; }
details.an-table-wrap[open] > summary.an-collapsed { border-bottom: 1px solid var(--an-hairline); }
table.an-table { border-collapse: separate; border-spacing: 0; box-shadow: var(--an-shadow-card); font-size: 14px; }
.an-table th { padding: 12px 14px; font-size: 11.5px; letter-spacing: 0.05em; color: var(--an-faint); background: var(--an-sunk); border-bottom: 1px solid var(--an-hairline); }
.an-table td { padding: 12px 14px; border-bottom: 1px solid var(--an-hairline); }
.an-table th.an-num, .an-table td.an-num { text-align: right; }
.an-card .an-table { box-shadow: none; }
.an-table tbody tr:hover td { background: var(--an-hover); }

/* bars (chart marks are Ink) */
.an-bars { gap: 5px; }
.an-bars > i { border-radius: 4px 4px 1px 1px; }
.an-bar { height: 8px; border-radius: 999px; }
.an-bar > i { border-radius: 999px; }

/* Monday banner: a flat card, the state in Ink, cleared turns green */
.an-monday { padding: 16px 20px; border-radius: var(--an-r-flat); box-shadow: var(--an-shadow-card); }
.an-monday-state { font-family: var(--an-font); font-size: 16px; letter-spacing: -0.01em; }
.an-monday.cleared { border-color: color-mix(in srgb, var(--an-fine) 45%, transparent); }

/* empty states: centred, quiet, with room to breathe */
.an-empty { text-align: center; color: var(--an-muted); padding: 28px 16px; font-size: 14px; }
.an-card .an-empty { padding: 12px 0; }
dt.an-empty { grid-column: 1 / -1; text-align: left; }

/* cards: flat white, 22px inside, a quiet header band */
.an-card { padding: 20px 22px; border-radius: var(--an-r-flat); }
.an-card-head { margin: -20px -22px 18px; padding: 0 22px; height: 52px; background: var(--an-sunk); border-bottom: 1px solid var(--an-hairline); font-weight: 500; }
.an-card h2 { margin-bottom: 12px; }
.an-card-head .an-serif { font-family: var(--an-font); font-weight: 600; letter-spacing: -0.01em; }
.an-card .an-kv { font-size: 14px; }

/* forms: 12px radius, Ink focus ring, quiet labels */
.an-input, .an-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .an-card select, .an-card textarea,
.an-act-filters select, .an-act-filters input { border-radius: 12px; border: 1px solid var(--an-input-line); background-color: var(--an-pane); color: var(--an-ink); font: inherit; font-size: 14px; }
.an-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .an-card select { height: 40px; }
.an-card select, .an-act-filters select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
:root[data-theme="dark"] .an-card select, :root[data-theme="dark"] .an-act-filters select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab1c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.an-input:focus, .an-card input:focus, .an-card select:focus, .an-card textarea:focus, .an-act-filters select:focus, .an-act-filters input:focus { outline: 0; border-color: var(--an-accent); box-shadow: 0 0 0 3px var(--an-accent-soft); }
.an-card input::placeholder, .an-card textarea::placeholder, .an-act-filters input::placeholder { color: var(--an-faint); }
.an-card label, .an-act-filters label { font-size: 13px; font-weight: 500; color: var(--an-muted); }
.an-search { background: var(--an-pane); }
.an-search:focus-within { border-color: var(--an-accent); box-shadow: 0 0 0 3px var(--an-accent-soft); }
.an-search input, .an-searchfield input, .an-card .an-search input { height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.an-search input:focus { box-shadow: none; }

/* flash messages: a soft tinted card, tone by tag */
.an-messages li { padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-weight: 500; font-size: 14px; }
.an-messages li.success { background: var(--an-fine-bg); color: var(--an-fine); }
.an-messages li.info { background: var(--an-accent-soft); color: var(--an-accent); }
.errorlist li, .an-card .an-form-error { border-radius: 12px; }

/* tabs and sub-nav: a segmented pill, the current one raised (same language as the Paper / Night switch) */
.an-filters, .an-kn-sub { display: inline-flex; align-items: center; gap: 2px; height: auto; padding: 4px; margin: 0; border-radius: var(--an-r-ctl); background: var(--an-sunk); box-shadow: inset 0 0 0 1px var(--an-hairline); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.an-filters a, .an-kn-sub a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: var(--an-r-ctl); color: var(--an-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.an-filters a:hover, .an-kn-sub a:hover { color: var(--an-ink); }
.an-filters a.on, .an-kn-sub a.on { background: var(--an-pane); color: var(--an-ink); font-weight: 600; box-shadow: var(--an-shadow-raised); }
.an-kn-sub { margin-bottom: 18px; }

/* pagination and breadcrumbs */
.an-act-pager { gap: 12px; margin: 4px 0 24px; }
.an-act-pager .an-muted { font-size: 13.5px; }
.an-crumbs, .an-main > p > a.an-muted { font-size: 14px; }

/* KPI cards inside a card are inset tiles, not a second raised card */
.an-card .an-count { background: var(--an-card); box-shadow: none; border-color: var(--an-hairline); }
.an-report-metrics .an-count .an-big { font-size: clamp(22px, 1.9vw, 27px); }

/* the Cost page's Monday card is a card first; the banner flex layout is for the Board only */
.an-card.an-monday { display: block; padding: 20px 22px; }
.an-card.an-monday .an-monday-strip { margin-top: 4px; }
.an-cost-strip, .an-monday-strip { align-items: stretch; }
.an-row .an-dots .an-dot { box-shadow: none; }
.an-legend { align-items: center; }
.an-act-filters select, .an-act-filters input { padding-left: 12px; }

/* a table that sits directly in a card is not boxed twice */
.an-card > table.an-table { border: 0; box-shadow: none; border-radius: 0; margin-top: 4px; }
.an-card > h3 { margin-bottom: 12px; }
.an-card .an-inline-form input[type=date]:not(.x):not(.y):not(.z) { height: 34px; width: 148px; padding: 0 8px; font-size: 13px; }

/* buttons in table rows and cards sit a little smaller than page-level buttons */
.an-controls .an-btn, .an-table .an-btn, .an-btnrow .an-btn { height: 36px; font-size: 13.5px; }

@media (max-width: 640px) {
  .an-main > h1, .an-main .an-titlebar h1, .an-main > div > h1:first-child { font-size: 24px; }
  .an-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .an-count { padding: 14px; }
  .an-count .an-big { font-size: 26px; }
  .an-card { padding: 16px; }
  .an-card-head { margin: -16px -16px 14px; padding: 0 16px; }
  .an-thead { height: 44px; }
  .an-row { min-height: 52px; }
  .an-monday { padding: 14px 16px; }
  .an-filters, .an-kn-sub { max-width: 100%; }
  .an-titlebar .an-search { width: 100%; }
}
.an-grid-top { align-items: start; }
.an-card.an-guide { max-width: 800px; padding: 28px 32px; }
.an-card.an-guide > h1:first-child { margin: 0 0 12px; }
@media (max-width: 640px) { .an-card.an-guide { padding: 18px 16px; } }

/* a read-only form for a role that may look but not save: the fieldset adds no box, the inputs read as plain text */
fieldset.an-ro { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.an-ro:disabled :is(input, select, textarea) { color: var(--an-ink) !important; -webkit-text-fill-color: var(--an-ink); opacity: 1; background: var(--an-sunk) !important; border-color: transparent !important; cursor: default; resize: none; }
.an-ro-note { margin: 0 0 12px; grid-column: 1 / -1; }

/* ---- Role homes (decision 0017): sections stacked one under another ---- */
.an-sec { margin-bottom: 16px; padding-bottom: 8px; }
.an-sec > .an-empty, .an-sec > .an-more { margin: 4px 22px 10px; display: block; }
.an-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 22px; border-top: 1px solid var(--an-hairline); }
.an-card-h + .an-item { border-top: 0; }
.an-item-acct { font-weight: 600; font-size: 14px; }
.an-item-name { flex: 1 1 200px; min-width: 0; font-size: 14px; }
.an-item-act { display: flex; gap: 8px; margin-left: auto; }
.an-hello > .an-btn { margin-left: auto; align-self: center; }
.an-acctblock { border-bottom: 1px solid var(--an-hairline); }
.an-acctblock > .an-arow { border-bottom: 0; }
.an-acctblock-under { display: flex; flex-direction: column; padding: 0 0 6px; margin-top: -4px; }
.an-acctblock-under > .an-item { border-top: 0; padding-top: 4px; padding-bottom: 4px; padding-left: 52px; }
.an-acctblock-under > .an-inline, .an-acctblock-under > .an-chip { margin: 2px 22px 0 52px; align-self: flex-start; }
.an-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; padding: 16px 22px; align-items: center; }
.an-money-cell { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.an-money-cell > b, .an-money-cell b { font-size: 20px; font-weight: 600; }
.an-money-go { flex-direction: row; gap: 14px; }
.an-week1 { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 10px 22px; }
.an-week1 ul { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.an-week1 li a { display: inline-flex; align-items: center; gap: 6px; color: var(--an-ink); text-decoration: none; }
.an-week1 li.done a { color: var(--an-muted); }
.an-footnote summary, .an-recent summary { cursor: pointer; padding: 14px 22px; list-style: none; }
.an-footnote summary h2, .an-recent summary h2 { display: inline; margin: 0; font-size: 15px; font-weight: 600; }
.an-foot-list { margin: 0; padding: 0 22px 12px 40px; font-size: 14px; }
.an-legend-d > summary { cursor: pointer; padding: 0 22px 8px; font-size: 12.5px; }
.an-fine-group[open] > summary .an-ic { transform: rotate(180deg); }
@media (max-width: 640px) {
  .an-hello > .an-btn { margin-left: 0; align-self: stretch; text-align: center; justify-content: center; }
  .an-money { grid-template-columns: 1fr 1fr; }
  .an-item { padding-left: 14px; padding-right: 14px; }
  .an-acctblock-under > .an-item { padding-left: 14px; }
  .an-acctblock-under > .an-inline, .an-acctblock-under > .an-chip { margin-left: 14px; }
}
@media (max-width: 640px) {
  /* The checklist shows only the next undone step on a phone. */
  .an-week1 li.done, .an-week1 li:not(.done) ~ li { display: none; }
}

/* SDT3 integrate: the shared item buttons sit in one row and wrap, never one per line */
.an-item-buttons { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.an-item-buttons details { display: inline-block; }
.an-item-buttons details[open] { flex-basis: 100%; }
/* The Super Admin money line: four cells in a row (was colliding with .an-money, the big-number class) */
.an-moneystrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: start; }
.an-moneystrip .an-money-cell { display: flex; flex-direction: column; gap: 2px; }
.an-moneystrip .an-money-cell b { font-size: 20px; }
.an-moneystrip .an-money-go { flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; }