/* The app, drawn in the reskin the UX audit approved (13 Oct 2026): white surfaces,
   ink text, a white sidebar with the current page on mist, and Twin Lime used only
   for the one main button and the twin's marks (a lime dot plus words, and a wash
   on the twin's chat bubbles and the one draft that's open). Done is ink with a
   check, never lime. Amber means "needs you". Everything is example data. */

.am {
  --am-ink: #1a1f2e;
  --am-graphite: #4e5566;
  --am-faint: #8b909c;
  --am-line: #e7e8eb;
  --am-mist: #f4f5f6;
  --am-paper: #ffffff;
  --am-lime: #c6f432;
  --am-wash: #effbd0;
  --am-amber-bg: #fdf3e1;
  --am-amber: #8a5a00;
  --am-li: #0a66c2;
  /* Chart colors, checked for colour-blind separation: a muted lime and a muted violet.
     Bars and areas are a pale wash of each with a solid edge at the data end, so the
     charts stay soft. The lime is light on white, so lime marks carry value labels. */
  --am-c1: #9cc236;
  --am-c2: #8a80cf;
  --am-c1-wash: rgba(156, 194, 54, 0.22);
  --am-c2-wash: rgba(138, 128, 207, 0.22);
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}
.am-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 750px;
  transform-origin: 0 0;
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--am-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.am.is-compact .am-stage { width: 460px; height: 820px; font-size: 14px; }
.am:not(.is-ready) { aspect-ratio: 1200 / 750; }
/* Without the script, the window shows Today. */
.am:not(.is-ready) .am-screen[data-screen="today"] { opacity: 1; visibility: visible; transform: none; }
.am-win {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--am-paper);
  border: 1px solid rgba(26, 31, 46, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(26, 31, 46, 0.35), 0 2px 6px rgba(26, 31, 46, 0.06);
}
.am-chrome {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--am-line);
  background: #fafafb;
}
.am-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #e3e4e8; }
.am-chrome span {
  margin: 0 auto;
  font: 11px/1 "Geist Mono", ui-monospace, monospace;
  color: var(--am-faint);
  padding-right: 50px;
}
.am-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* Sidebar: white, ink text, the current page on mist (audit D4). */
.am-side {
  flex: none;
  width: 212px;
  border-right: 1px solid var(--am-line);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.am.is-compact .am-side { display: none; }
.am-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; }
.am-brand svg { width: 18px; height: 18px; }
.am-brand b { font: 700 15px/1 "Plus Jakarta Sans", "Inter Tight", sans-serif; letter-spacing: -0.02em; }
.am-firm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 8px;
  border: 1px solid var(--am-line);
  border-radius: 8px;
  font-weight: 500;
}
.am-firm em {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--am-ink);
  color: #fff;
  font: 600 10px/20px "Inter Tight", sans-serif;
  font-style: normal;
  text-align: center;
}
.am-firm small { margin-left: auto; color: var(--am-faint); }
.am-group {
  margin: 9px 8px 3px;
  font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--am-faint);
}
.am-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--am-graphite);
  transition: background 0.2s, color 0.2s;
}
.am-nav svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.am-nav.is-on { background: var(--am-mist); color: var(--am-ink); font-weight: 500; }
.am-nav .n {
  margin-left: auto;
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace;
  color: var(--am-ink);
}
.am-nav .tw { margin-left: auto; }
.am-side-foot { margin-top: auto; }

/* The twin's mark: a small lime dot plus words (audit D3). */
.am .tw {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--am-lime);
  box-shadow: 0 0 0 1px rgba(26, 31, 46, 0.22);
  flex: none;
}
.am-twin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--am-graphite);
}

.am-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.am-top {
  flex: none;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--am-line);
}
.am-find {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 340px;
  padding: 7px 10px;
  border: 1px solid var(--am-line);
  border-radius: 8px;
  color: var(--am-faint);
}
.am-find kbd { margin-left: auto; font: 10.5px/1 "Geist Mono", monospace; color: var(--am-faint); }
.am-find svg, .am-top svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.am-menu { display: none; }
.am.is-compact .am-find { display: none; }
.am.is-compact .am-menu { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.am-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.am-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--am-line);
  border-radius: 8px;
  color: var(--am-graphite);
  font-size: 12px;
  transition: background 0.2s, border-color 0.2s;
}
.am-chip.is-on { background: var(--am-mist); border-color: transparent; color: var(--am-ink); }
.am-me {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--am-ink);
  color: #fff;
  font: 600 11px/28px "Inter Tight", sans-serif;
  text-align: center;
}

.am-screens { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.am-screen {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.45s var(--ease, ease), visibility 0s 0.35s;
}
.am-screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.45s var(--ease, ease), visibility 0s; }
.am.is-compact .am-screen { padding: 18px 18px; }

/* Page furniture */
.am-h { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.am-h h4 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.am-h p { margin: 4px 0 0; color: var(--am-graphite); font-size: 12.5px; }
.am-h .am-h-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.am-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--am-line); margin-bottom: 14px; }
.am-tabs span { padding: 0 0 9px; color: var(--am-graphite); }
.am-tabs span.is-on { color: var(--am-ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--am-ink); }
.am-label {
  font: 500 10.5px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--am-faint);
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; }
.g { color: var(--am-graphite); }

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(26, 31, 46, 0.55);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
}
.am-btn.main { background: var(--am-lime); border-color: var(--am-lime); color: var(--am-ink); }
.am-btn.quiet { border-color: transparent; color: var(--am-graphite); padding-inline: 6px; }
.am-btn.ink { background: var(--am-ink); border-color: var(--am-ink); color: #fff; }
.am-btn.is-pressed { transform: scale(0.94); }

.am-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--am-mist);
  color: var(--am-graphite);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.am-pill.amber { background: var(--am-amber-bg); color: var(--am-amber); }
.am-pill.ink { background: var(--am-ink); color: #fff; }
.am-pill.line { background: none; box-shadow: inset 0 0 0 1px var(--am-line); }
.am-pill.li { background: #e8f1fb; color: var(--am-li); }
.am-pill svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

.am-card { border: 1px solid var(--am-line); border-radius: 12px; background: var(--am-paper); }
.am-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--am-mist);
  color: var(--am-ink);
  font-size: 10.5px;
  font-weight: 600;
}
.am-av.sm { width: 22px; height: 22px; font-size: 9px; }

/* Lists and tables */
.am-rows { display: flex; flex-direction: column; }
.am-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--am-line);
  transition: background 0.3s, opacity 0.4s, max-height 0.5s, padding 0.5s;
}
.am-row:first-child { border-top: 0; }
.am-row b { font-weight: 500; }
.am-row small { display: block; color: var(--am-graphite); font-size: 11.5px; }
.am-thead { padding-top: 0; padding-bottom: 8px; border-top: 0; }
.am-thead span { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--am-faint); }

/* The pointer that clicks around. Pure decoration; the screens work without it. */
.am-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s;
  will-change: transform;
}
.am-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(26, 31, 46, 0.3)); }
.am-cursor::after {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--am-ink);
  opacity: 0;
  transform: scale(0.4);
}
.am-cursor.is-click::after { animation: am-click 0.45s ease-out; }
@keyframes am-click {
  0% { opacity: 0.6; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .am-cursor { display: none; }
  .am-screen, .am-row { transition: none; }
}

/* The tour around the window: module tabs, the window, a caption, pause. */
.tour-head { display: grid; gap: 18px; align-items: end; }
.tour-tabs {
  display: flex;
  gap: 6px;
  margin: 40px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--graphite);
  font-size: 14px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tour-tab small { font: 11px/1 "Geist Mono", ui-monospace, monospace; color: inherit; opacity: 0.7; }
.tour-tab:hover { color: var(--ink); border-color: rgba(26, 31, 46, 0.3); }
.tour-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tour-tab:focus-visible, .tour-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tour-stage {
  position: relative;
  padding: clamp(10px, 2.2vw, 28px);
  border-radius: 24px;
  background: var(--mist);
}
.tour-foot {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 20px;
}
.tour-cap { margin: 0; max-width: 46rem; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: var(--graphite); }
.tour-cap b { color: var(--ink); font-weight: 500; }
.tour-play {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--graphite);
}
.tour-play i { width: 8px; height: 9px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.tour-play.is-paused i { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tour-note { margin: 10px 0 0; font-size: 13px; color: var(--graphite); }
@media (min-width: 900px) {
  .tour-head { grid-template-columns: 1.1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-play { display: none; }
}

/* ---------- Shared pieces the screens use ---------- */
.am-side-foot {
  margin: auto 2px 0;
  padding: 10px;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--am-graphite);
}
.am-side-foot b { display: flex; align-items: center; gap: 6px; color: var(--am-ink); font-size: 12.5px; font-weight: 600; }
.am-side-foot p { margin: 4px 0 0; }
.am-ok { width: 7px; height: 7px; border-radius: 50%; background: #2f7d4f; flex: none; }
.am-chip.am-nav { padding: 6px 10px; gap: 6px; }
.am-chip.am-nav.is-on { background: var(--am-mist); color: var(--am-ink); font-weight: 500; }
.am-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.am-menu .n { padding: 2px 7px; border-radius: 999px; background: var(--am-mist); font: 500 12px/1.2 "Geist Mono", monospace; }
.am-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--am-mist); }
.am-seg span { padding: 4px 10px; border-radius: 6px; color: var(--am-graphite); font-size: 12px; }
.am-seg span.is-on { background: #fff; color: var(--am-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(26, 31, 46, 0.12); }
.am-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.am-filters .am-chip { padding: 4px 10px; }
.am-filters b { font-weight: 500; color: var(--am-ink); }
.am-tabs b { margin-left: 4px; font: 500 11px/1 "Geist Mono", monospace; }
.am-tabs span { transition: color 0.2s, box-shadow 0.2s; }
.am-done { display: none; align-items: center; gap: 5px; color: var(--am-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.am-done svg, .am-tick { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-row].is-done .am-done { display: inline-flex; }
[data-row].is-done .if-todo { display: none !important; }
.am-dots { display: inline-flex; gap: 3px; }
.am-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--am-ink); }
.am-dots i.f { background: var(--am-ink); }
.am-bar { display: block; height: 6px; border-radius: 999px; background: var(--am-mist); overflow: hidden; }
.am-bar i { display: block; height: 100%; border-radius: inherit; background: var(--am-ink); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.am-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--am-ink);
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s, transform 0.35s;
  box-shadow: 0 16px 30px -12px rgba(26, 31, 46, 0.5);
  pointer-events: none;
}
.am-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.am-toast svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; }
.am-toast u { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.am-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 390px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  background: #fff;
  border-left: 1px solid var(--am-line);
  box-shadow: -24px 0 40px -24px rgba(26, 31, 46, 0.22);
  transform: translateX(calc(100% + 60px));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.am-panel.is-on { transform: none; }
.am-panel-h { display: flex; align-items: flex-start; gap: 10px; }
.am-panel-h h5 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.am-panel-h p { margin: 2px 0 0; color: var(--am-graphite); font-size: 12px; }
.am-panel-h .x { margin-left: auto; color: var(--am-faint); font-size: 16px; line-height: 1; }
.am-panel-acts { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--am-line); }
.am-scrim {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(26, 31, 46, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.am-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.am-modal {
  width: 400px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(26, 31, 46, 0.4);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.35s;
}
.am-scrim.is-on .am-modal { transform: none; }
.am-modal h5 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.am-modal p { margin: 0 0 8px; color: var(--am-graphite); font-size: 12.5px; }
.am-modal ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; }
.am-modal li { display: flex; gap: 8px; align-items: center; }
.am-modal .am-panel-acts { margin: 0; }
.is-flash { animation: am-flash 1.4s ease-out; }
@keyframes am-flash {
  0% { box-shadow: 0 0 0 3px rgba(26, 31, 46, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(26, 31, 46, 0); }
}
.am-stat { display: grid; gap: 8px; }
.am-stat > div { padding: 10px 12px; border: 1px solid var(--am-line); border-radius: 10px; }
.am-stat b { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.am-stat small { display: block; margin-top: 2px; color: var(--am-graphite); font-size: 11px; }
.am.is-compact .c-hide { display: none !important; }
.am:not(.is-compact) .c-only { display: none !important; }

/* ---------- Today ---------- */
.td-date { color: var(--am-graphite); font-size: 12.5px; }
.td-brief { padding: 12px 16px; margin-bottom: 12px; }
.td-brief p { margin: 0; }
.td-brief .td-say { margin-top: 5px; font-size: 17px; letter-spacing: -0.01em; line-height: 1.35; }
.td-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.td-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.td-win-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--am-line); }
.td-win-h b { font-size: 14px; font-weight: 600; }
.td-stage { margin: 10px; padding: 12px 14px; border: 1px solid var(--am-line); border-radius: 10px; }
.td-stage-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.td-stage-t { display: block; margin: 8px 0; font-size: 14px; font-weight: 600; }
.td-ev { display: grid; grid-template-columns: 74px 1fr; gap: 4px 10px; margin: 0 0 8px; font-size: 12px; }
.td-ev dt { color: var(--am-graphite); }
.td-ev dd { margin: 0; }
.td-count { margin: 0 0 10px; font-size: 12px; color: var(--am-graphite); }
.td-count b { color: var(--am-ink); font-weight: 500; }
.td-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-acts .g { font-size: 11.5px; }
.td-draft { grid-template-columns: auto 1fr auto; }
.td-ap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.td-ap small { font-size: 11px; }
.td-batch { grid-template-columns: 1fr auto; }
.td-cal { grid-template-columns: 62px 1fr; align-items: start; }
.td-cal .mono { padding-top: 1px; }
.td-cal u { text-decoration: none; box-shadow: inset 0 -1px 0 var(--am-line); color: var(--am-graphite); font-size: 11.5px; margin-right: 8px; }
.td-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; }
.td-tiles div { padding: 8px 10px; border-radius: 8px; background: var(--am-mist); }
.td-tiles b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.td-tiles span { font-size: 11.5px; color: var(--am-graphite); }
.am.is-compact .td-grid { grid-template-columns: 1fr; }
.am.is-compact .td-ev { grid-template-columns: 70px 1fr; }

/* ---------- Deals ---------- */
.dl-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.dl-col { display: flex; flex-direction: column; gap: 8px; min-height: 470px; padding: 8px; border-radius: 10px; background: var(--am-mist); }
.dl-col-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 4px 4px; }
.dl-col-h b { font: 500 10.5px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.dl-col-h span { font-size: 11px; color: var(--am-graphite); white-space: nowrap; }
.dl-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 31, 46, 0.05);
  transition: box-shadow 0.25s;
}
.dl-card.is-lift { z-index: 5; box-shadow: 0 22px 34px -14px rgba(26, 31, 46, 0.4); }
.dl-co { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--am-graphite); }
.dl-co em, .iv-co em {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  background: var(--am-ink);
  color: #fff;
  font: 600 9.5px/18px "Inter Tight", sans-serif;
  font-style: normal;
  text-align: center;
}
.dl-co .am-pill { margin-left: auto; padding: 2px 6px; font-size: 10.5px; }
.dl-card > b { font-weight: 500; }
.dl-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--am-graphite); }
.dl-meta b { color: var(--am-ink); font-weight: 600; }
.dl-foot { display: flex; gap: 8px; align-items: center; font: 11px/1.2 "Geist Mono", monospace; color: var(--am-graphite); }
.dl-card .am-twin { font-size: 11px; }
.am.is-compact .dl-board { grid-template-columns: 1fr 1fr; }
.am.is-compact .dl-col { min-height: 520px; }

/* ---------- A search: pipeline, candidate panel, playbook ---------- */
.sr-crumb { margin: 0 0 6px; font-size: 12px; color: var(--am-graphite); }
.sr-sum { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sr-sum > span:first-child { margin-right: auto; color: var(--am-graphite); }
.sr-sum > span:first-child b { color: var(--am-ink); font-weight: 500; }
.sr-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; }
.sr-col { display: flex; flex-direction: column; gap: 7px; min-height: 380px; padding: 7px; border-radius: 10px; background: var(--am-mist); }
.sr-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--am-line);
  border-radius: 9px;
  background: #fff;
  transition: box-shadow 0.25s;
}
.sr-card.is-lift { z-index: 5; box-shadow: 0 22px 34px -14px rgba(26, 31, 46, 0.4); }
.sr-card > div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sr-card b { font-weight: 500; font-size: 12.5px; }
.sr-card small { color: var(--am-graphite); font-size: 11px; line-height: 1.3; }
.sc { padding: 1px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--am-line); font: 500 10.5px/1.5 "Geist Mono", monospace; }
.sr-card .sr-f { font: 10.5px/1.2 "Geist Mono", monospace; color: var(--am-graphite); }
.sr-card .am-pill { align-self: flex-start; padding: 1px 6px; font-size: 10px; }
.cand-score { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--am-mist); }
.cand-score b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cand-score span { color: var(--am-graphite); font-size: 12px; }
.cand-score .am-pill { margin-left: auto; background: #fff; color: var(--am-ink); }
.crit { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.crit li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crit em { font-style: normal; color: var(--am-graphite); font-size: 11.5px; margin-left: 6px; }
.cand-why { margin: 0; padding: 10px 12px; border-left: 2px solid var(--am-line); color: var(--am-graphite); font-size: 12.5px; line-height: 1.45; }
.pb-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 12px; }
.pb-top b { font-size: 15px; font-weight: 600; }
.pb-top p { margin: 3px 0 8px; color: var(--am-graphite); font-size: 12px; }
.pb-top .am-bar { width: 260px; }
.pb-top .td-acts { justify-content: flex-end; }
.pb-prop { padding: 12px 14px; margin-bottom: 12px; transition: opacity 0.4s; }
.pb-prop .td-acts { margin-top: 8px; }
.pb-diff { margin: 8px 0 0; display: grid; gap: 4px; font-size: 12.5px; }
.pb-diff del { color: var(--am-graphite); }
.pb-diff ins { text-decoration: none; padding: 1px 6px; border-radius: 5px; background: var(--am-mist); box-shadow: inset 2px 0 0 var(--am-ink); }
[data-row].is-done.pb-prop { opacity: 0.55; }
.pb-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pb-groups > div { padding: 10px; border: 1px solid var(--am-line); border-radius: 12px; }
.pb-groups .am-label { display: block; margin: 0 2px 8px; }
.pb-sec { display: flex; align-items: center; gap: 7px; padding: 5px 2px; font-size: 12px; color: var(--am-graphite); border-radius: 6px; }
.pb-sec.ok { color: var(--am-ink); }
.pb-sec i { width: 13px; height: 13px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--am-line); }
.pb-sec.ok i { box-shadow: none; background: var(--am-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pb-sec .tw { margin-left: auto; }
.pb-sec small { margin-left: auto; font-size: 10.5px; color: var(--am-graphite); }
.pb-bool { display: block; margin: 6px 0 2px; padding: 8px 10px; min-height: 52px; border-radius: 8px; background: var(--am-mist); font: 11px/1.5 "Geist Mono", monospace; color: var(--am-ink); white-space: pre-wrap; }
.am.is-compact .sr-board { grid-template-columns: 1fr 1fr; }
.am.is-compact .am-panel { width: auto; left: 0; }
.am.is-compact .pb-groups { grid-template-columns: 1fr 1fr; }
.am.is-compact .pb-top { grid-template-columns: 1fr; }
.am.is-compact .pb-top .am-bar { width: 100%; }
.am.is-compact .pb-top .td-acts { justify-content: flex-start; }

/* ---------- Outreach: a campaign's Review tab ---------- */
.rv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; }
.rv-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: start; }
.rv-sec { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 6px; }
.rv-list .am-row { grid-template-columns: auto 1fr auto; padding: 8px 10px; }
.rv-list .am-row.is-open { border-radius: 10px; background: var(--am-mist); }
.rv-list .am-row .am-pill { font-size: 10.5px; }
.rv-list .am-row .am-done { font-size: 11.5px; }
.rv-routine { margin-top: 6px; }
.rv-routine .am-row { padding: 6px 10px; }
.rv-draft { padding: 14px 16px; border-radius: 12px; background: var(--am-wash); }
.rv-draft .am-twin { color: var(--am-ink); }
.rv-head { display: grid; gap: 4px; margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid rgba(26, 31, 46, 0.1); font-size: 12.5px; }
.rv-head span { display: inline-block; width: 58px; color: var(--am-graphite); }
.rv-body { font-size: 13px; line-height: 1.5; }
.rv-body p { margin: 0 0 8px; }
.rv-body p[data-typed]:not(.is-on) { display: none; }
.rv-body p[data-typed] { padding: 2px 6px; margin-left: -6px; border-radius: 5px; background: rgba(255, 255, 255, 0.6); }
.rv-why { margin: 4px 0 12px; font-size: 12px; color: var(--am-graphite); }
.rv-why .am-label { display: block; margin-bottom: 3px; color: var(--am-graphite); }
.rv-acts { display: flex; align-items: flex-start; gap: 8px; }
.rv-acts > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rv-when { display: block; margin-top: 5px; font-size: 11px; color: var(--am-graphite); }
.rv-draft .am-done { font-size: 13px; }
.am.is-compact .rv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am.is-compact .rv-grid { grid-template-columns: 1fr; }

/* ---------- Your twin: the chat page ---------- */
.ch-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; height: 540px; }
.ch-thread { display: flex; flex-direction: column; min-height: 0; }
.ch-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px; list-style: none; overflow: hidden; }
.ch-log li { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ch-log li.you { align-self: flex-end; border: 1px solid var(--am-line); }
.ch-log li.bot { align-self: flex-start; background: var(--am-wash); }
.ch-log li[hidden] { display: none; }
.ch-log li.is-new { animation: am-rise 0.4s ease-out; }
.ch-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--am-ink); opacity: 0.3; animation: am-blink 1s infinite; }
.ch-dots i:nth-child(2) { animation-delay: 0.15s; }
.ch-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes am-blink { 50% { opacity: 0.9; } }
@keyframes am-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ch-compose { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 12px; border: 1px solid var(--am-line); border-radius: 10px; }
.ch-compose span:first-child { flex: 1; min-height: 18px; }
.ch-compose span:first-child:empty::before { content: "Ask your twin…"; color: var(--am-faint); }
.ch-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--am-ink); color: #fff; }
.ch-send svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.ch-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ch-side .am-label { margin: 4px 2px 0; }
.ch-wait { padding: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.45s; }
.ch-wait.is-on { opacity: 1; transform: none; }
.ch-empty { padding: 14px; border: 1px dashed var(--am-line); border-radius: 12px; color: var(--am-graphite); font-size: 12.5px; }
.ch-dec { display: grid; gap: 6px; }
.ch-dec .am-row { grid-template-columns: auto 1fr; padding: 9px 12px; border: 1px solid var(--am-line); border-radius: 10px; }
.ch-dec .am-row + .am-row { border-top: 1px solid var(--am-line); }
.am.is-compact .ch-grid { grid-template-columns: 1fr; height: auto; }
.am.is-compact .ch-thread { height: 330px; }

/* ---------- Invoices ---------- */
.iv-money { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.iv-money b { transition: color 0.3s; }
.iv-table .am-row { grid-template-columns: 1.25fr 1.8fr 0.95fr 0.7fr 1.35fr; padding: 10px 14px; }
.iv-table .am-row.is-open { background: var(--am-mist); }
.iv-co { display: flex; align-items: center; gap: 8px; }
.iv-amt { font-variant-numeric: tabular-nums; font-weight: 500; }
.iv-st { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.iv-st small { font-size: 11px; }
.iv-doc { padding: 16px; border: 1px solid var(--am-line); border-radius: 10px; font-size: 12.5px; }
.iv-doc-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.iv-doc-h b { font-size: 15px; font-weight: 600; }
.iv-lines { display: grid; gap: 6px; margin: 10px 0; padding: 10px 0; border-block: 1px solid var(--am-line); }
.iv-lines div { display: flex; justify-content: space-between; gap: 12px; }
.iv-lines small { display: block; color: var(--am-graphite); font-size: 11px; }
.iv-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.am.is-compact .iv-money { grid-template-columns: 1fr 1fr; }
.am.is-compact .iv-table .am-row { grid-template-columns: 1fr auto; }

/* ---------- Analytics ---------- */
.an-pane { display: none; }
.an-pane.is-on { display: block; animation: am-rise 0.35s ease-out; }
.an-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; }
.an-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.an-box { padding: 12px 14px; }
.an-box-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.an-box-h b { font-size: 13.5px; font-weight: 600; }
.an-legend { display: flex; gap: 12px; font-size: 11px; color: var(--am-graphite); }
.an-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.an-legend i.c1 { background: var(--am-c1-wash); box-shadow: inset 0 2px 0 var(--am-c1); }
.an-legend i.c2 { background: var(--am-c2-wash); box-shadow: inset 0 2px 0 var(--am-c2); }
.an-legend i.dash { height: 2px; width: 12px; margin-bottom: 3px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--am-c2) 0 4px, transparent 4px 7px); }
.an-chart rect.c1, .an-chart circle.c1 { fill: var(--am-c1); }
.an-chart rect.c2, .an-chart circle.c2 { fill: var(--am-c2); }
.an-chart rect.w1 { fill: var(--am-c1-wash); }
.an-chart rect.w2 { fill: var(--am-c2-wash); }
.an-chart path.c1 { stroke: var(--am-c1); }
.an-chart path.c2 { stroke: var(--am-c2); }
.an-chart .an-ring { stroke: #fff; stroke-width: 2; }
.an-chart .an-area { fill: var(--am-c1-wash); }
.an-chart .an-val { font: 500 11px "Geist Mono", ui-monospace, monospace; fill: var(--am-ink); }
.an-chart { display: block; width: 100%; height: auto; }
.an-chart .an-b { transform-box: fill-box; transform-origin: bottom; }
.an-pane.is-on .an-chart .an-b { animation: am-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.an-pane.is-on .an-chart .an-b:nth-of-type(n + 7) { animation-delay: 0.12s; }
.an-pane.is-on .an-chart .an-b:nth-of-type(n + 13) { animation-delay: 0.24s; }
.an-pane.is-on .an-chart .an-b:nth-of-type(n + 19) { animation-delay: 0.36s; }
.an-pane.is-on .an-prev { animation: am-fade 1s ease-out both; }
@keyframes am-fade { from { opacity: 0; } }
@keyframes am-grow { from { transform: scaleY(0); } }
.an-line { stroke-dasharray: 900; stroke-dashoffset: 0; }
.an-pane.is-on .an-line { animation: am-draw 1.6s ease-out both; }
@keyframes am-draw { from { stroke-dashoffset: 900; } }
.an-funnel { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.an-funnel li { display: grid; grid-template-columns: 82px 1fr 40px; gap: 10px; align-items: center; }
.an-funnel li span:last-child { text-align: right; font: 11.5px "Geist Mono", monospace; }
.an-funnel .am-bar { height: 16px; border-radius: 5px; }
.an-pane.is-on .an-funnel .am-bar i { animation: am-wide 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.an-funnel .am-bar i { border-radius: 4px 0 0 4px; background: var(--am-c1-wash); box-shadow: inset -2.5px 0 0 var(--am-c1); }
.an-split .am-bar i { background: var(--am-c1); }
@keyframes am-wide { from { width: 0; } }
.an-split { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.an-split li { display: grid; gap: 4px; }
.an-split li div { display: flex; justify-content: space-between; }
.an-rows .am-row { grid-template-columns: 1.6fr repeat(4, 0.7fr); padding: 8px 4px; font-size: 12px; }
.an-rows .am-row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.an-goals { margin-top: 12px; }
.an-goals .am-row { grid-template-columns: 2fr 0.6fr 0.8fr 1fr; }
.an-goals .am-row:has(> :nth-child(3):last-child) { grid-template-columns: 2fr 1fr 1fr; }
.am-panel .crit { font-size: 12px; gap: 6px; }
.cl-cand .crit { font-size: 12.5px; }
.cl-cand .crit li span:first-child { min-width: 0; }
.am.is-compact .an-tiles, .am.is-compact .an-tiles.four { grid-template-columns: 1fr 1fr; }
.am.is-compact .an-grid { grid-template-columns: 1fr; }

/* ---------- Referrals ---------- */
.rf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.rf-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: start; }
.rf-ask { padding: 14px 16px; }
.rf-ask h5 { margin: 0; font-size: 15px; font-weight: 600; }
.rf-ask > p { margin: 3px 0 10px; color: var(--am-graphite); font-size: 12px; }
.rf-names { display: grid; gap: 0; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12.5px; }
.rf-names li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--am-line); }
.rf-names li span { color: var(--am-graphite); font-size: 12px; }
.rf-note { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--am-wash); font-size: 12.5px; line-height: 1.45; }
.rf-note .am-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; color: var(--am-graphite); }
.rf-note p { margin: 0; }
.rf-copy { padding: 2px 8px; border-radius: 6px; background: #fff; font: 500 11px/1.4 "Inter Tight", sans-serif; text-transform: none; letter-spacing: 0; color: var(--am-ink); }
.rf-hist .am-row { grid-template-columns: 1fr auto; padding: 9px 14px; }
.rf-hist .am-row.is-new { animation: am-rise 0.4s ease-out; }
.am.is-compact .rf-tiles { grid-template-columns: 1fr 1fr; }
.am.is-compact .rf-grid { grid-template-columns: 1fr; }

/* ---------- First Day ---------- */
.fd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.fd-side { display: grid; gap: 8px; padding: 14px 16px; margin-top: 54px; }
.fd-side b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.fd-side p { margin: 0; font-size: 12px; }
.am.is-compact .fd-grid { grid-template-columns: 1fr; }
.fd-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fd-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 11px 14px; border: 1px solid var(--am-line); border-radius: 12px; transition: background 0.3s; }
.fd-step > i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--am-line);
  font: 500 11px/24px "Geist Mono", monospace;
  font-style: normal;
  text-align: center;
  color: var(--am-graphite);
}
.fd-step.ok > i { background: var(--am-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; color: transparent; box-shadow: none; }
.fd-step b { font-weight: 600; }
.fd-step p { margin: 2px 0 0; color: var(--am-graphite); font-size: 12px; }
.fd-step .am-btn { margin-top: 1px; }
.fd-body { display: none; grid-column: 2 / -1; padding-top: 6px; }
.fd-step.is-open { border-color: rgba(26, 31, 46, 0.35); }
.fd-step.is-open .fd-body { display: block; }
.fd-step.is-open > .am-btn { display: none; }
.fd-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fd-pick span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--am-line); border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s; }
.fd-pick span small { color: var(--am-graphite); font-size: 11.5px; }
.fd-pick span.is-on { border-color: var(--am-ink); box-shadow: inset 0 0 0 1px var(--am-ink); }
.fd-field { display: block; margin-bottom: 10px; padding: 8px 10px; min-height: 34px; border: 1px solid var(--am-line); border-radius: 8px; font-size: 12.5px; }
.fd-field:empty::before { content: attr(data-ph); color: var(--am-faint); }
.am.is-compact .fd-step { grid-template-columns: 26px 1fr; }
.am.is-compact .fd-step > .am-btn { grid-column: 2; justify-self: start; }

/* ---------- The client's account: the firm's brand, never Trovero ---------- */
.am-screen.am-client { z-index: 3; padding: 0; background: #fff; display: flex; flex-direction: column; }
.cl-top { flex: none; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 28px; border-bottom: 1px solid var(--am-line); }
.cl-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cl-brand em { width: 28px; height: 28px; border-radius: 7px; background: var(--am-ink); color: #fff; font: 600 12px/28px "Inter Tight", sans-serif; font-style: normal; text-align: center; }
.cl-nav { display: flex; gap: 16px; margin-left: 18px; color: var(--am-graphite); }
.cl-nav span { padding: 18px 0 17px; }
.cl-nav span.is-on { color: var(--am-ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--am-ink); }
.cl-who { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--am-graphite); font-size: 12px; }
.cl-body { position: relative; flex: 1; min-height: 0; }
.cl-view { position: absolute; inset: 0; padding: 22px 28px; display: none; }
.cl-view.is-on { display: block; animation: am-rise 0.35s ease-out; }
.cl-view h4 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.cl-view > p { margin: 4px 0 16px; color: var(--am-graphite); }
.cl-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
.cl-grid > div { display: flex; flex-direction: column; gap: 12px; }
.cl-sec { padding: 4px 0; }
.cl-sec .td-win-h { border-bottom: 0; padding-bottom: 4px; }
.cl-sec .am-row { grid-template-columns: auto 1fr auto; padding: 10px 14px; }
.cl-week { padding: 14px 16px; }
.cl-week p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.cl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-tiles > div { padding: 8px 10px; }
.cl-tiles b { font-size: 18px; }
.cl-ref { padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.cl-ref p { margin: 0; font-size: 12.5px; color: var(--am-graphite); }
.cl-ref p b { display: block; color: var(--am-ink); font-weight: 600; }
.cl-cand { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 12px; }
.cl-cand > div { display: flex; flex-direction: column; gap: 12px; }
.cl-cand .am-card { padding: 14px 16px; }
.cl-cand h6 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.cl-cand ul.cl-list { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--am-ink); }
.cl-cand ul.cl-list li + li { margin-top: 3px; }
.cl-head { display: flex; align-items: flex-start; gap: 12px; }
.cl-head .am-pill { margin-left: auto; }
.cl-decide { position: absolute; left: 28px; right: 28px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--am-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -16px rgba(26, 31, 46, 0.3); }
.cl-decide p { margin: 0 auto 0 0; color: var(--am-graphite); font-size: 12.5px; }
.cl-decide p b { display: block; color: var(--am-ink); font-weight: 600; font-size: 13px; }
.cl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(26, 31, 46, 0.55); font-weight: 500; font-size: 12.5px; transition: background 0.25s, color 0.25s; }
.cl-btn svg { display: none; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.cl-btn.is-chosen { background: var(--am-ink); border-color: var(--am-ink); color: #fff; }
.cl-btn.is-chosen svg { display: block; }
.cl-inv .am-row { grid-template-columns: 1fr auto auto; padding: 12px 16px; }
.am.is-compact .cl-top { padding: 0 16px; gap: 10px; }
.am.is-compact .cl-nav { margin-left: auto; }
.am.is-compact .cl-view { padding: 18px 16px; }
.am.is-compact .cl-grid, .am.is-compact .cl-cand { grid-template-columns: 1fr; }
.am.is-compact .cl-decide { left: 16px; right: 16px; flex-wrap: wrap; }
.am.is-compact .cl-decide p { flex-basis: 100%; }
.am.is-compact .am-panel-h h5 { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .am-panel, .am-scrim, .am-modal, .am-toast, .ch-wait, .am-bar i { transition: none; }
  .an-pane.is-on, .cl-view.is-on, .ch-log li.is-new, .rf-hist .am-row.is-new { animation: none; }
  .an-pane.is-on .an-chart .an-b, .an-pane.is-on .an-line, .an-pane.is-on .an-prev, .an-pane.is-on .an-funnel .am-bar i { animation: none; }
  .ch-dots i { animation: none; }
}
.rv-draft.is-done { background: var(--am-mist); }