/* InTown button, card and status. The shared source for the landing, the settings and sign-in
   pages, and the chrome around the town. Most tokens use --it-*; --watch-ink and --act-ink are
   the shared semantic text colors. A page can load this without web/style/ui/tokens.css.

   Buttons, three colors:
     <a class="it-btn">              black (ink): the usual action
     <a class="it-btn sun">          sun: the one main call to action on a screen
     <a class="it-btn white">        white: the second choice next to a black or sun button
     add .small for tight rows (still a 44 px target) and .wide to fill the row
   Card:
     <div class="it-card"> <h3>, .num, .why, .src </div>
     add .float only when it sits over the town; a card on the page is flat with a hairline
     an <a class="it-card"> gets a hover edge and a focus ring
   Status:
     <span class="it-chip watch"><i aria-hidden="true"></i>Watch: payment overdue</span>
     the one scale (THEORY.md, web/statusmark.js), best first: .ahead Ahead, .good On track,
     .watch Needs a look, .short Falling short, .act Failing, .unknown No read.
     Name the state in the visible text

   On a black ground set data-theme="dark" on any parent, or let prefers-color-scheme do it. */
:root {
  --it-ground: #ffffff; --it-surface: #ffffff; --it-surface-2: #f5f5f4;
  --it-line: #e7e5e4; --it-line-strong: #d6d3d1;
  --it-ink: #0a0a0a; --it-ink-soft: #44403c; --it-ink-faint: #78716c;
  --it-on-ink: #ffffff; --it-ink-hover: #2a2a2a;
  --it-sun: #ffd23f; --it-sun-deep: #e8b440; --it-on-sun: #0a0a0a;
  --it-focus: #0a0a0a;
  --it-good: #1f7790; --watch-ink: #a36109; --act-ink: #c43d22;
  --it-lift: 0 1px 0 var(--it-line), 0 12px 24px -16px rgba(10, 10, 10, .28);
  --it-font: 'Schibsted Grotesk', system-ui, sans-serif;
  --it-mono: 'Azeret Mono', ui-monospace, monospace;
  --it-ease: cubic-bezier(.23, 1, .32, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --it-ground: #0a0a0a; --it-surface: #141414; --it-surface-2: #1c1c1c;
    --it-line: #2a2a2a; --it-line-strong: #3a3a3a;
    --it-ink: #fafafa; --it-ink-soft: #d6d3d1; --it-ink-faint: #a8a29e;
    --it-on-ink: #0a0a0a; --it-ink-hover: #e7e5e4;
    --it-focus: #ffd23f;
    --it-good: #3fb3cc; --watch-ink: #f2a93b; --act-ink: #f0583a;
    --it-lift: 0 1px 0 var(--it-line), 0 12px 24px -16px rgba(0, 0, 0, .7);
  }
}
[data-theme="dark"] {
  --it-ground: #0a0a0a; --it-surface: #141414; --it-surface-2: #1c1c1c;
  --it-line: #2a2a2a; --it-line-strong: #3a3a3a;
  --it-ink: #fafafa; --it-ink-soft: #d6d3d1; --it-ink-faint: #a8a29e;
  --it-on-ink: #0a0a0a; --it-ink-hover: #e7e5e4;
  --it-focus: #ffd23f;
  --it-good: #3fb3cc; --watch-ink: #f2a93b; --act-ink: #f0583a;
  --it-lift: 0 1px 0 var(--it-line), 0 12px 24px -16px rgba(0, 0, 0, .7);
}
[data-theme="light"] {
  --it-ground: #ffffff; --it-surface: #ffffff; --it-surface-2: #f5f5f4;
  --it-line: #e7e5e4; --it-line-strong: #d6d3d1;
  --it-ink: #0a0a0a; --it-ink-soft: #44403c; --it-ink-faint: #78716c;
  --it-on-ink: #ffffff; --it-ink-hover: #2a2a2a;
  --it-focus: #0a0a0a;
  --it-good: #1f7790; --watch-ink: #a36109; --act-ink: #c43d22;
  --it-lift: 0 1px 0 var(--it-line), 0 12px 24px -16px rgba(10, 10, 10, .28);
}

/* One keyboard focus treatment, including native fields and custom focusable controls. */
:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 3px; }

/* ---------- button ---------- */
.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px;
  background: var(--it-ink); color: var(--it-on-ink);
  font: 600 16px/1 var(--it-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--it-ease), background-color 180ms var(--it-ease), border-color 180ms var(--it-ease);
}
.it-btn svg { width: 20px; height: 20px; flex: none; }
.it-btn:active { transform: scale(.97); }
.it-btn.sun { background: var(--it-sun); color: var(--it-on-sun); }
.it-btn.white { background: var(--it-surface); color: var(--it-ink); border-color: var(--it-line-strong); }
.it-btn.small { min-height: 44px; padding: 0 14px; font-size: 15px; }
.it-btn.wide { display: flex; width: 100%; }
.it-btn:disabled, .it-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .it-btn:hover { background: var(--it-ink-hover); }
  .it-btn.sun:hover { background: var(--it-sun-deep); }
  .it-btn.white:hover { background: var(--it-surface-2); border-color: var(--it-ink-faint); }
  .it-btn:disabled:hover, .it-btn[aria-disabled="true"]:hover { background: var(--it-ink); }
  .it-btn.sun:disabled:hover, .it-btn.sun[aria-disabled="true"]:hover { background: var(--it-sun); }
  .it-btn.white:disabled:hover, .it-btn.white[aria-disabled="true"]:hover { background: var(--it-surface); border-color: var(--it-line-strong); }
}

/* ---------- card ---------- */
.it-card {
  position: relative; display: grid; gap: 10px; align-content: start; padding: 20px 22px;
  background: var(--it-surface); color: var(--it-ink);
  border: 1px solid var(--it-line); border-radius: 14px;
  font: 400 15px/1.45 var(--it-font); text-decoration: none;
}
.it-card.float { box-shadow: var(--it-lift); }
.it-card h3 { margin: 0; font: 700 17px/1.25 var(--it-font); }
.it-card .num { font: 800 32px/1 var(--it-font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.it-card .why { margin: 0; color: var(--it-ink-soft); }
.it-card .src {
  display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--it-line);
  color: var(--it-ink-faint); font: 400 12px/1.3 var(--it-mono);
}
.it-card .src svg { width: 16px; height: 16px; flex: none; }
a.it-card { cursor: pointer; transition: border-color 180ms var(--it-ease); }
@media (hover: hover) and (pointer: fine) { a.it-card:hover { border-color: var(--it-ink-faint); } }

/* Status: color gives the band, shape gives the step. Pennant, diamond, triangle, notice, shield;
   no read is a hollow circle. */
.it-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%;
  padding: 4px 10px; background: var(--it-surface); color: var(--it-ink);
  border: 1px solid var(--it-line); border-radius: 999px;
  font: 500 14px/1.35 var(--it-font);
}
.it-chip > i { display: block; width: 10px; height: 10px; flex: none; background: currentColor; }
.it-chip.ahead { color: var(--it-good); }
.it-chip.ahead > i { clip-path: polygon(0 0, 100% 30%, 30% 60%, 30% 100%, 0 100%); }
.it-chip.good { color: var(--it-good); }
.it-chip.good > i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.it-chip.watch { color: var(--watch-ink); }
.it-chip.watch > i { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.it-chip.short { color: var(--watch-ink); }
.it-chip.short > i { clip-path: polygon(15% 0, 85% 0, 85% 100%, 15% 100%); }
.it-chip.act { color: var(--act-ink); }
.it-chip.act > i { clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.it-chip.unknown { color: var(--it-ink-faint); }
.it-chip.unknown > i { box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; background: transparent; }
.it-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  .it-chip { color: CanvasText; border-color: CanvasText; }
  .it-chip > i { forced-color-adjust: none; background: CanvasText; }
  .it-chip.unknown > i { background: transparent; border-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) { .it-btn, a.it-card { transition: none; } .it-btn:active { transform: none; } }