/* ============================================================
   Oulution Design System v2 — UX audit fixes applied
   See UX_AUDIT.md for the rationale behind every change here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --purple-900: #2E2A66;
  --purple-700: #4A3F8F;
  --purple-600: #6A67B6;
  --purple-500: #8A87CC;
  --purple-300: #B5B2DD;
  --purple-200: #D7D4EE;
  --purple-100: #ECE9F6;
  --purple-50:  #F6F4FB;

  /* Cream warmed-down: less yellow on sRGB displays */
  --cream:      #F8F5EE;
  --cream-2:    #F0EBDD;
  --paper:      #FFFFFF;
  --rule:       #E4DDCC;
  --rule-soft:  #EDE6D4;

  --ink:        #14121F;
  --ink-2:      #2B2740;
  --ink-3:      #4F4B65;   /* darker for AA on cream */
  --ink-4:      #6E6B82;   /* darker — was #8A879C (failed AA) */
  --ink-5:      #9A97AC;   /* decorative only, never information */

  --pos: #2A6248; --pos-bg: #E6F0EA; --pos-rule: #C0D5C6;
  --warn: #7A5C18; --warn-bg: #F5EBD2; --warn-rule: #E0C99C;
  --neg: #7E2828; --neg-bg: #F4DCDC; --neg-rule: #DDB8B8;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 0 rgba(20,18,31,0.04), 0 1px 2px rgba(20,18,31,0.04);
  --shadow:    0 1px 0 rgba(20,18,31,0.05), 0 8px 24px -12px rgba(46,42,102,0.18);
  --shadow-lg: 0 2px 0 rgba(20,18,31,0.04), 0 24px 48px -20px rgba(46,42,102,0.22);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --tap-target: 36px;  /* min interactive height per Fitt's */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;   /* was 15px — AAO recommends 16px+ for sustained reading */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--purple-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* Focus visible — critical for keyboard navigation */
:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; border-radius: 6px; }
button:focus, input:focus, textarea:focus, select:focus, a:focus { outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--purple-600); outline-offset: 2px;
}

/* ========== Layout ========== */
.app { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }

/* ========== Sidebar ========== */
.sidebar {
  background: var(--cream);
  border-right: 1px solid var(--rule);
  padding: 22px 14px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
  transition: width 200ms cubic-bezier(.2,.7,.1,1);
}
.logo {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--purple-700);
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px; text-decoration: none;
  min-height: var(--tap-target);
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--purple-600); position: relative; flex: 0 0 26px;
}
.logo-mark::after {
  content: ""; position: absolute; right: -2px; top: 5px;
  width: 10px; height: 13px; background: var(--cream);
  border-left: 2.5px solid var(--purple-600);
  border-radius: 0 8px 8px 0;
}

.new-chat-btn {
  background: var(--purple-600); color: var(--paper);
  border: 0; border-radius: var(--radius-sm);
  padding: 12px 14px; font-weight: 500; font-size: 14.5px;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: background 150ms; text-decoration: none;
  min-height: 40px;
}
.new-chat-btn:hover { background: var(--purple-700); text-decoration: none; }
.new-chat-btn:hover { text-decoration: none; }
.new-chat-btn svg { width: 16px; height: 16px; }
.new-chat-btn .kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; opacity: 0.75; padding: 2px 6px; background: rgba(255,255,255,0.18); border-radius: 4px; }

.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); padding: 6px 12px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink-2);
  cursor: pointer; text-decoration: none; transition: background 150ms;
  min-height: var(--tap-target);
}
.nav-item:hover { background: var(--purple-50); text-decoration: none; }
.nav-item.active { background: var(--purple-100); color: var(--purple-700); font-weight: 500; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: 0.85; }
.nav-item .badge {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  background: var(--cream-2); color: var(--ink-3);
  padding: 2px 7px; border-radius: 4px;
}
.nav-item.active .badge { background: var(--purple-200); color: var(--purple-700); }
.nav-item.active svg { opacity: 1; }

/* Promoted-CTA nav item — used for "Find a Lawyer" on the business lane.
   Subtle gradient so it reads as the primary action without screaming. */
.nav-item.nav-item-promoted {
  background: linear-gradient(135deg, var(--purple-100), var(--purple-50));
  color: var(--purple-700);
  font-weight: 500;
}
.nav-item.nav-item-promoted:hover {
  background: linear-gradient(135deg, var(--purple-200), var(--purple-100));
}
.nav-item.nav-item-promoted svg { opacity: 1; }

.thread-item {
  padding: 10px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; gap: 3px;
  transition: background 150ms;
  min-height: var(--tap-target);
}
.thread-item:hover { background: var(--purple-50); text-decoration: none; }
.thread-item .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item .t-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); }
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; cursor: pointer;
  text-decoration: none;
  min-height: var(--tap-target);
}
.user-card:hover { background: var(--purple-50); text-decoration: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-600); color: var(--paper);
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
  flex: 0 0 32px;
}
.avatar.lg { width: 44px; height: 44px; font-size: 16px; flex: 0 0 44px; }
.user-card .who { font-size: 13.5px; line-height: 1.3; flex: 1; color: var(--ink); }
.user-card .who small { color: var(--ink-3); font-size: 11.5px; }

/* Build version stamp at the very bottom of the sidebar */
.version-stamp-sidebar {
  margin-top: 10px;
  padding: 6px 6px 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0.6;
  text-align: center;
}

/* ========== "All tools" expandable in sidebar ========== */
.all-tools-toggle {
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
}
.all-tools-toggle .all-tools-chev {
  margin-left: auto; color: var(--ink-4); font-size: 11px;
  transition: transform 200ms;
}
.all-tools-toggle.all-tools-open .all-tools-chev { transform: rotate(180deg); color: var(--purple-700); }
.all-tools-list { display: flex; flex-direction: column; gap: 1px; padding-left: 16px; margin-top: 2px; }
.all-tools-list[hidden] { display: none; }

/* v0.9.x — emphasised chevron on the Office Tools accordion so it clearly
   reads as "click to expand". Bigger, bolder, sits in a soft purple pill,
   rotates 0°→90° on open, hover nudges it right. Once-per-page-load nudge
   animation catches the eye for new users; respects reduced-motion. */
.accordion-toggle .accordion-chev {
  font-size: 18px; font-weight: 700;
  color: var(--purple-700);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: auto;
  border-radius: 6px;
  background: var(--purple-50, #EBE7F8);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), background-color 180ms;
  line-height: 1;
}
.accordion-toggle:hover .accordion-chev {
  background: var(--purple-100, #DCD4F5);
  transform: translateX(2px);
}
.accordion-toggle.all-tools-open .accordion-chev {
  transform: rotate(90deg);
  background: var(--purple-100, #DCD4F5);
}
.accordion-toggle.all-tools-open:hover .accordion-chev {
  transform: rotate(90deg) translateX(2px);
}
@keyframes accordion-chev-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  80% { transform: translateX(3px); }
  90% { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .accordion-toggle:not(.all-tools-open) .accordion-chev {
    animation: accordion-chev-nudge 2.6s ease-in-out 1.2s 2;
  }
}
.nav-item-sub { padding-left: 12px; font-size: 13.5px; }
.nav-item-sub svg { opacity: 0.7; }

/* ========== In-composer model chip (.8052526 — wider, brand logo) ========== */
.composer-model-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  cursor: pointer; font-family: inherit;
  min-height: 36px;
  position: relative;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.composer-model-chip:hover, .composer-model-chip[aria-expanded="true"] {
  background: var(--purple-50); color: var(--purple-700); border-color: var(--purple-300);
}
.composer-model-chip .cm-logo {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 18px;
}
.composer-model-chip .cm-logo svg {
  width: 16px; height: 16px;
  display: block;
}
.composer-model-chip .cm-name {
  font-weight: 600; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.composer-model-chip .cm-chev {
  color: var(--ink-4); display: inline-flex; align-items: center;
  transition: transform 140ms;
}
.composer-model-chip .cm-chev svg { width: 9px; height: 6px; }
.composer-model-chip[aria-expanded="true"] .cm-chev { color: var(--purple-700); transform: rotate(180deg); }

[data-composer-model-chip] { position: relative; display: inline-block; }
.composer-model-menu {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  min-width: 340px; max-width: 380px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 40px rgba(20, 18, 31, 0.16);
  z-index: 50;
  max-height: 460px; overflow-y: auto;
}
.composer-model-menu[hidden] { display: none; }
.composer-model-menu .cm-menu-head {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); padding: 10px 12px 8px;
}
.composer-model-menu .cm-menu-foot {
  padding: 10px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink-4);
  line-height: 1.4;
}

/* ========== Model chooser (deprecated sidebar version — kept for fallback) ========== */
.model-chip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; cursor: pointer; font-family: inherit;
  margin-bottom: 10px;
  transition: border-color 150ms, background 150ms;
  text-align: left;
}
.model-chip:hover { border-color: var(--purple-300); background: var(--purple-50); }
.model-chip[aria-expanded="true"] { border-color: var(--purple-400, var(--purple-300)); background: var(--purple-50); }
.model-chip-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: radial-gradient(circle at 35% 30%, var(--purple-500, #8A87CC), var(--purple-700, #4A3F8F) 70%);
  color: var(--paper);
  display: grid; place-items: center; flex: 0 0 28px;
}
.model-chip-icon svg { width: 14px; height: 14px; }
.model-chip-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.model-chip-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); line-height: 1;
}
.model-chip-name {
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-chip-chev { color: var(--ink-4); font-size: 11px; flex: 0 0 auto; }

.model-menu {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; padding: 4px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto;
}
.model-menu[hidden] { display: none; }
.model-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 14px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; font-family: inherit; text-align: left;
  gap: 12px;
  transition: background 140ms, border-color 140ms;
}
.model-option:hover { background: var(--purple-50); }
.model-option.selected {
  background: var(--purple-50);
  border-color: var(--purple-300);
  box-shadow: inset 0 0 0 1px var(--purple-200);
}
.model-option-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px;
}
.model-option-logo svg { width: 18px; height: 18px; display: block; }
.model-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-option-name {
  font-size: 14px; color: var(--ink); font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.model-option-tagline {
  font-size: 12px; color: var(--ink-3);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-option-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px;
  background: transparent;
  color: var(--paper);
  opacity: 0;
  transition: opacity 140ms, background 140ms;
}
.model-option-check svg { width: 12px; height: 12px; }
.model-option.selected .model-option-check {
  background: var(--purple-600);
  opacity: 1;
}
.model-option-provider { display: none; }  /* legacy field, no longer rendered */

/* When sidebar is in icon-rail mode (narrow viewport), hide the chooser */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar #model-chooser-slot { display: none; }
}

/* ========== Sidebar icon-rail at narrow widths ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  .app { grid-template-columns: 60px 1fr; }
  .sidebar { padding: 18px 8px; align-items: center; }
  .sidebar .logo span:last-child,
  .sidebar .nav-label,
  .sidebar .nav-item span:not(.badge),
  .sidebar .thread-item,
  .sidebar .new-chat-btn span,
  .sidebar .user-card .who,
  .sidebar .nav-section .nav-item .badge { display: none; }
  .sidebar .new-chat-btn { width: 40px; padding: 0; justify-content: center; }
  .sidebar .new-chat-btn .kbd { display: none; }
  .sidebar .nav-item { width: 40px; padding: 10px; justify-content: center; gap: 0; position: relative; }
  .sidebar .nav-item:hover::after,
  .sidebar .nav-item.active::after {
    content: attr(data-tip); position: absolute; left: 50px;
    background: var(--ink); color: var(--paper); padding: 6px 10px;
    border-radius: 6px; font-size: 12.5px; white-space: nowrap; z-index: 50;
    pointer-events: none;
  }
  .sidebar .user-card { width: 40px; padding: 4px; justify-content: center; }
}

/* ========== Main ========== */
.main { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid transparent;
  min-height: 56px;
}
.topbar-context {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.page { padding: 12px 28px 80px; max-width: 1240px; width: 100%; margin: 0 auto; }
.page-narrow { max-width: 880px; }
.page-wide { max-width: none; }

/* ========== Page header ========== */
.page-header { margin: 12px 0 26px; }
.page-header h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.page-header h1 em { font-style: italic; color: var(--purple-700); font-weight: 500; }
.page-header p { color: var(--ink-3); font-size: 16px; margin: 0; max-width: 680px; }

/* ========== Buttons — min 36px, clearer hover ========== */
.btn {
  font-weight: 500; font-size: 14px;
  border-radius: 8px; padding: 9px 14px;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 150ms cubic-bezier(.2,.7,.1,1);
  text-decoration: none;
  min-height: var(--tap-target);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--purple-600); color: var(--paper); }
.btn-primary:hover { background: var(--purple-700); box-shadow: var(--shadow); }
.btn-secondary { background: var(--paper); color: var(--ink-2); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--purple-300); background: var(--purple-50); color: var(--purple-700); }
.btn-ghost { background: transparent; color: var(--purple-700); }
.btn-ghost:hover { background: var(--purple-50); }
.btn-lg { padding: 12px 20px; font-size: 15px; min-height: 44px; }
.btn-danger { background: var(--neg-bg); color: var(--neg); border-color: var(--neg-rule); }
.btn-danger:hover { background: var(--neg); color: var(--paper); border-color: var(--neg); }
.btn svg { width: 14px; height: 14px; }
.btn-lg svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Keyboard hint inside buttons */
.kbd {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.06); color: inherit;
  opacity: 0.7;
}
.btn-primary .kbd { background: rgba(255,255,255,0.18); }

/* ========== Tags — bigger, more legible ========== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  background: var(--cream-2); color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.tag.purple { background: var(--purple-100); color: var(--purple-700); border-color: var(--purple-200); }
.tag.pos { background: var(--pos-bg); color: var(--pos); border-color: var(--pos-rule); }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-rule); }
.tag.neg { background: var(--neg-bg); color: var(--neg); border-color: var(--neg-rule); }
.tag svg { width: 12px; height: 12px; }

/* Status dot — for color-blind safe leading indicators */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.dot.pos { background: var(--pos); }
.dot.warn { background: var(--warn); }
.dot.neg { background: var(--neg); }
.dot.active { background: var(--purple-600); animation: pulse 1.4s ease-in-out infinite; }
.dot.idle { background: var(--ink-5); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106,103,182,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(106,103,182,0); }
}

/* ========== Cards ========== */
.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px;
}
.card-sm { padding: 14px; }
.card-callout {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--purple-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
}

/* ========== Table / list rows — better row height, single tag rule ========== */
.list {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
.list-row {
  display: grid; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px; text-decoration: none; color: var(--ink);
  cursor: pointer; transition: background 150ms;
  min-height: 56px;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--purple-50); text-decoration: none; }
.list-row .title { font-weight: 500; font-size: 14.5px; }
.list-row .subtitle { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.list-row .date, .list-row .mono { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.list-header {
  display: grid; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--cream);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}

/* ========== Section header ========== */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 24px 0 14px;
}
.section-title h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em; margin: 0;
}
.section-title a { font-size: 14px; color: var(--purple-700); font-weight: 500; }

/* ========== Inputs ========== */
.input, .select, .textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px;
  padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); outline: 0; transition: border-color 150ms, box-shadow 150ms;
  min-height: 42px;
}
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%234F4B65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--purple-300);
  box-shadow: 0 0 0 4px var(--purple-100);
}
.textarea { min-height: 96px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }

/* ========== Citation system — readable + hoverable ========== */
.inline-cite {
  font-family: var(--mono); font-size: 11px;
  background: var(--purple-100); color: var(--purple-700);
  padding: 2px 6px; border-radius: 4px;
  vertical-align: super; margin-left: 2px;
  cursor: pointer; font-weight: 500;
  position: relative;
  transition: background 150ms;
  line-height: 1;
}
.inline-cite:hover { background: var(--purple-200); }

/* Hover preview popover — shown via .has-preview attribute on parent */
.inline-cite[data-source]::after {
  content: attr(data-source);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  white-space: normal; width: 280px;
  opacity: 0; pointer-events: none; transition: opacity 150ms;
  vertical-align: baseline;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}
.inline-cite[data-source]:hover::after { opacity: 1; }

/* Citation side-panel (toggled via JS) */
.cite-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform 240ms cubic-bezier(.2,.7,.1,1);
  z-index: 200; padding: 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.cite-panel.open { transform: translateX(0); }
.cite-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.cite-panel-head .cite-num { font-family: var(--mono); font-size: 12px; background: var(--purple-100); color: var(--purple-700); padding: 3px 8px; border-radius: 4px; font-weight: 500; }
.cite-panel-head h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 4px 0 0; letter-spacing: -0.01em; }
.cite-panel-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.cite-panel-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cite-panel-body blockquote { margin: 0; padding: 12px 16px; background: var(--cream); border-left: 3px solid var(--purple-600); border-radius: 0 8px 8px 0; font-style: italic; }
.cite-close { background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--ink-3); }
.cite-close:hover { background: var(--cream); }
.cite-backdrop { position: fixed; inset: 0; background: rgba(20,18,31,0.18); opacity: 0; pointer-events: none; transition: opacity 200ms; z-index: 150; }
.cite-backdrop.show { opacity: 1; pointer-events: all; }

/* Source chips — readable size */
.source-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--sans);
  min-height: 32px;
  transition: all 150ms;
}
.source-chip:hover { border-color: var(--purple-300); background: var(--purple-50); color: var(--purple-700); }
.source-chip .n {
  font-family: var(--mono); font-size: 11px;
  background: var(--purple-100); color: var(--purple-700);
  padding: 2px 6px; border-radius: 4px; font-weight: 500;
}
.source-chip:hover .n { background: var(--purple-200); }
.sources-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

/* ========== Tool chips ========== */
.tool-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule);
  cursor: pointer; transition: all 150ms;
  min-height: 36px;
}
.tool-chip:hover { background: var(--purple-50); color: var(--purple-700); border-color: var(--purple-200); }
.tool-chip svg { width: 14px; height: 14px; }
.tool-chip.active { background: var(--purple-100); color: var(--purple-700); border-color: var(--purple-200); }

/* ========== Empty state ========== */
.empty {
  text-align: center; padding: 60px 24px;
  color: var(--ink-3);
}
.empty .empty-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--purple-50); color: var(--purple-700);
  margin: 0 auto 16px; display: grid; place-items: center;
}
.empty h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 19px; color: var(--ink); margin: 0 0 6px;
}

/* ========== Banners ========== */
.banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 14.5px; color: var(--ink-2);
  margin-bottom: 16px;
}
.banner.pos { background: var(--pos-bg); border-color: var(--pos-rule); color: var(--pos); }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-rule); color: var(--warn); }
.banner.neg { background: var(--neg-bg); border-color: var(--neg-rule); color: var(--neg); }
.banner.purple { background: var(--purple-50); border-color: var(--purple-200); color: var(--purple-900); }
.banner .b-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.05); display: grid; place-items: center; flex: 0 0 32px; }
.banner strong { font-weight: 600; }

/* "Since you were last here" strip */
.since-strip {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); margin-bottom: 18px;
}
.since-strip .label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
.since-strip a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--purple-50); color: var(--purple-700);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.since-strip a:hover { background: var(--purple-100); text-decoration: none; }

/* ========== Skip link (a11y) ========== */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--purple-700); color: var(--paper);
  padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  z-index: 1000; transition: top 200ms;
}
.skip-link:focus { top: 8px; }

/* ========== Glossary hint ========== */
.gloss {
  border-bottom: 1px dotted var(--purple-300);
  cursor: help; position: relative;
}
.gloss:hover::after {
  content: attr(data-def);
  position: absolute; bottom: 100%; left: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 400; line-height: 1.45;
  white-space: normal; width: 260px; margin-bottom: 6px;
  z-index: 100; box-shadow: var(--shadow-lg);
}

/* ========== Mobile menu button (hamburger) ========== */
/* The button is injected by shared.js on every page that has a sidebar.
   It only renders ≤768px (mobile). Above that, the sidebar is visible
   inline so no button is needed. */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink-2);
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: 0 0 44px;
  font-family: inherit; transition: all 150ms;
}
.menu-btn:hover { border-color: var(--purple-300); color: var(--purple-700); }
.menu-btn svg { width: 22px; height: 22px; }

/* Backdrop behind the open drawer */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,18,31,0.45);
  z-index: 998;
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 180ms ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; }

/* ========== Responsive ========== */
@media (max-width: 768px) {
  /* Single-column layout — sidebar floats as a drawer */
  .app { grid-template-columns: 1fr; }
  .page { padding: 14px 16px max(60px, env(safe-area-inset-bottom, 0px)); }
  .page-header h1 { font-size: 26px; letter-spacing: -0.018em; }
  .page-header p { font-size: 15px; }
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  .topbar-context { font-size: 13px; }
  .topbar-actions { gap: 6px; flex-shrink: 0; }
  .topbar-actions .btn {
    padding: 8px 12px; font-size: 13px; min-height: 38px;
  }

  /* Sidebar becomes a slide-in drawer */
  .menu-btn { display: inline-flex; }
  .sidebar-backdrop { display: block; pointer-events: none; }
  body.sidebar-open .sidebar-backdrop { pointer-events: auto; }

  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    z-index: 999;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2,.7,.1,1);
    box-shadow: 12px 0 40px -8px rgba(20,18,31,0.18);
    overflow-y: auto;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); box-shadow: -12px 0 40px -8px rgba(20,18,31,0.18); }
  html[dir="rtl"] body.sidebar-open .sidebar { transform: translateX(0); }

  /* Prevent body scroll while drawer is open */
  body.sidebar-open { overflow: hidden; }

  /* Touch-friendly nav items */
  .sidebar .nav-item, .sidebar .new-chat-btn, .sidebar .all-tools-toggle {
    min-height: 44px; font-size: 15px;
  }
  .sidebar .thread-item { min-height: 44px; }

  /* iOS zoom prevention — inputs must be ≥16px on focus */
  input, textarea, select, .input, .textarea, .select, .composer-input,
  .field input, .field textarea, .field select,
  .fld input, .fld textarea, .fld select,
  .email-form input {
    font-size: 16px !important;
  }

  /* Tap targets — bump small UI to at least 44px */
  .btn, .btn-secondary, .btn-primary, .send-btn, .tool-chip {
    min-height: 44px;
  }
  .tool-chip { padding: 10px 14px; }

  /* Composer hero on landing */
  .hero h1 { font-size: 30px !important; line-height: 1.1; }
  .composer { padding: 20px 18px 14px !important; border-radius: 18px !important; }
  .composer-input { min-height: 150px !important; font-size: 16px !important; }

  /* Settings layout — single column on mobile */
  .settings-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .settings-nav {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 8px;
  }
  .settings-nav h4 { display: none; }
  .settings-nav a { white-space: nowrap; padding: 8px 12px !important; font-size: 13px; }
  .section-card { padding: 18px 18px !important; }
  .field-row { grid-template-columns: 1fr !important; }

  /* Workspace tabs (tariff) — horizontal scroll on overflow */
  .ws-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ws-tab { white-space: nowrap; flex-shrink: 0; }

  /* Drawback / calculator layouts collapse */
  .calc-layout, .dr-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .calc-form, .dr-form { position: static !important; }
}

/* ========== iPad portrait + landscape ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Existing icon-rail sidebar at this width — leave it. But pages still
     benefit from slightly tighter spacing. */
  .page { padding: 18px 24px 60px; }
  .topbar { padding: 14px 20px; }
  .calc-layout, .dr-layout { grid-template-columns: 280px 1fr; gap: 18px; }
  .settings-layout { grid-template-columns: 200px 1fr; gap: 20px; }
}

/* ========== Ultra-narrow: Samsung Fold cover screen (~280px) + small phones ========== */
/* The folded Galaxy Z Fold cover display is only ~280-344px wide. Anything
   with side-by-side layout, fixed widths, or generous padding overflows.
   Squeeze padding, force single-column, shrink type, allow chips to wrap. */
@media (max-width: 380px) {
  .page { padding: 10px 11px max(48px, env(safe-area-inset-bottom, 0px)); }
  .page-header h1 { font-size: 22px; line-height: 1.12; }
  .page-header p { font-size: 14px; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar-context { font-size: 12px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions .btn { padding: 7px 9px; font-size: 12px; min-height: 36px; }
  .topbar-actions .btn span, .topbar-actions .btn .kbd { display: none; }

  /* Drawer takes almost the whole narrow screen */
  .sidebar { width: 90vw; }

  /* Composer: everything stacks, chips wrap, send button full-width row */
  .composer { padding: 14px 12px 12px !important; border-radius: 14px !important; }
  .composer-input { min-height: 120px !important; font-size: 16px !important; }
  .composer-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .composer-tools { flex-wrap: wrap; gap: 6px; }
  .tool-chip { padding: 8px 10px; font-size: 12px; }
  .composer-hint { display: none; }
  .send-btn { width: 100%; height: 44px; border-radius: 10px; }

  /* Tables scroll horizontally instead of breaking the layout */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Cards / tiles: kill any fixed min-widths so they fit */
  .card, .section-card, .result-card, .dr-card, .est-card, .brain-card,
  .vs-card, .net-stat, .continue-card, .starter { min-width: 0 !important; }

  /* Buttons never exceed the viewport */
  .btn, .btn-lg { max-width: 100%; }

  /* Model chooser chip in composer wraps under the tools */
  [data-composer-model-chip] { width: 100%; }

  /* Auth / funnel split-screen pages (signup, login, request-demo,
     demo-thanks) — their .right column is already hidden ≤900px; just
     squeeze the .left/.top padding so forms fit a 280px cover screen. */
  .left { padding: 24px 16px !important; }
  .top { padding: 16px 16px !important; }
  .form-wrap { max-width: 100% !important; }
  .form-wrap h1 { font-size: 28px !important; }
  .sso-grid { grid-template-columns: 1fr !important; }
  .fld-row { grid-template-columns: 1fr !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ========== Foldable unfolded (~717-840px, near-square) + small tablets ========== */
/* Galaxy Z Fold unfolded is ~717-768px and nearly square. Treated as mobile
   (drawer) by the ≤768 rule. Just make sure the composer breathes and the
   landing hero doesn't feel cramped on the wider-but-short aspect. */
@media (min-width: 600px) and (max-width: 768px) {
  .home-wrap { max-width: 92vw; }
  .composer-input { min-height: 170px; }
}

/* ========== Large MacBook / desktop / ultrawide ========== */
/* MacBook 14"/16" report ~1512/1728 CSS px; external 4K/ultrawide go to
   2560+. .page already caps at 1240px so content never sprawls, but on
   very wide screens give the reading column a touch more room and keep
   the centered composer from looking lost in whitespace. */
@media (min-width: 1600px) {
  .page { max-width: 1320px; }
  .home-wrap { max-width: 1040px; }
}
@media (min-width: 2200px) {
  /* Ultrawide / 4K: cap harder so line lengths stay readable, center it. */
  .page { max-width: 1400px; }
}

/* ========== Reduced motion (WCAG 2.2.2 / 2.3.3) ========== */
/* Respect the OS "reduce motion" setting — important for an older
   enterprise audience (vestibular sensitivity). Kill transitions/animations
   and freeze autoplay background videos (the poster frame shows instead). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none !important; }
}

/* ========== iPhone notch / Dynamic Island safe-area ========== */
@supports (padding: env(safe-area-inset-bottom)) {
  .composer-wrap {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ========== Utility ========== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-sm { font-size: 13.5px; } .text-xs { font-size: 12.5px; }
.text-muted { color: var(--ink-3); } .text-faint { color: var(--ink-4); }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* sr-only for accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   ouli-md — the house markdown style for everything Ouli outputs.
   Clean, tight, scannable (Claude-grade). Paired with ouliMarkdown()
   in shared.js. Explicit colours (not vars) so it renders identically
   on every surface regardless of per-page :root tokens.
   ============================================================ */
.ouli-md {
  font-size: 15px;
  line-height: 1.62;
  color: #1f2230;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ouli-md > :first-child { margin-top: 0 !important; }
.ouli-md > :last-child  { margin-bottom: 0 !important; }
.ouli-md .md-p { margin: 0 0 0.8em; }
.ouli-md .md-h { font-weight: 650; line-height: 1.3; color: #14121f;
  margin: 1.45em 0 0.5em; letter-spacing: -0.01em; }
.ouli-md .md-h1 { font-size: 1.3em; }
.ouli-md .md-h2 { font-size: 1.12em; }
.ouli-md .md-h3 { font-size: 1.0em; }
.ouli-md .md-h4 { font-size: 0.92em; color: #5e5a78; text-transform: none; }
.ouli-md strong { font-weight: 650; color: #14121f; }
.ouli-md em { font-style: italic; }
.ouli-md a { color: #6d28d9; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.ouli-md a:hover { color: #5b21b6; }
.ouli-md .md-ul, .ouli-md .md-ol { margin: 0.35em 0 0.85em; padding-left: 1.35em; }
.ouli-md .md-ul { list-style: disc; }
.ouli-md .md-ol { list-style: decimal; }
.ouli-md li { margin: 0.24em 0; padding-left: 0.15em; }
.ouli-md li::marker { color: #9b8fce; }
.ouli-md .md-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em; background: rgba(109,40,217,0.08); color: #4c1d95;
  padding: 0.1em 0.36em; border-radius: 5px; }
.ouli-md .md-pre { background: #faf9f6; border: 1px solid #e8e4f2; border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 0.6em 0 1em; }
.ouli-md .md-pre code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55; background: none; color: #2a2740; padding: 0; }
.ouli-md .md-quote { margin: 0.7em 0 1em; padding: 0.15em 0 0.15em 0.95em;
  border-left: 3px solid #d6cdf2; color: #5e5a78; }
.ouli-md .md-hr { border: 0; border-top: 1px solid #e8e2d2; margin: 1.3em 0; }
.ouli-md .md-tablewrap { overflow-x: auto; margin: 0.7em 0 1.1em;
  border: 1px solid #e8e4f2; border-radius: 10px; }
.ouli-md .md-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ouli-md .md-table th, .ouli-md .md-table td {
  padding: 8px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #eee9f7; border-right: 1px solid #eee9f7; }
.ouli-md .md-table th:last-child, .ouli-md .md-table td:last-child { border-right: 0; }
.ouli-md .md-table tbody tr:last-child td { border-bottom: 0; }
.ouli-md .md-table th { background: #f4f0fb; font-weight: 650; color: #2e1065;
  white-space: nowrap; }
.ouli-md .md-table tbody tr:nth-child(even) td { background: #fbfaff; }
.ouli-md .inline-cite { display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px; margin: 0 1px; vertical-align: super;
  font-size: 9.5px; font-weight: 700; line-height: 1; color: #6d28d9;
  background: #f0e9fb; border-radius: 4px; cursor: pointer; }

/* ============================================================
   wf — Ouli's Workflow & Timeline segment. A clean vertical
   timeline: numbered phase nodes joined by a rail, each phase
   showing what happens / what it produces / owner / when.
   ============================================================ */
.wf-seg { margin: 16px 0 6px; }
.wf-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7c5cd6; margin-bottom: 13px; }
.wf-phase { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.wf-phase:last-child { padding-bottom: 0; }
.wf-rail { position: relative; flex: none; width: 26px; display: flex; justify-content: center; }
.wf-rail::before { content: ""; position: absolute; top: 27px; bottom: -16px; left: 50%;
  width: 2px; background: #e7e1f5; transform: translateX(-50%); }
.wf-phase:last-child .wf-rail::before { display: none; }
.wf-num { width: 26px; height: 26px; border-radius: 50%; background: #6d28d9; color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center; z-index: 1; flex: none; }
.wf-body { flex: 1; min-width: 0; padding-top: 2px; }
.wf-title { font-size: 14px; font-weight: 650; color: #14121f; display: flex;
  align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1.35; }
.wf-when { font-size: 11.5px; font-weight: 600; color: #6d28d9; background: #f3effb;
  padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.wf-detail { font-size: 13.5px; color: #4b4860; line-height: 1.5; margin-top: 3px; }
.wf-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #8a85a8; margin-top: 6px; }
.wf-meta b { color: #5e5a78; font-weight: 600; }