/* [HX] Hermes contract-build artifact — contractor-owned (not CTO/founder). See notes/OWNERSHIP.md. */
/* Lifted VERBATIM from contract/bundle/Daily_Operator_Brief_Web_Workstation_Leavebehind_v1.html */
/* per wave1-ui-v1.0-decision1 (a): the <style> block IS the design system. Do not re-derive. */

  :root {
    --bg-app:      #efeae2;
    --bg-rail:     #2a2520;
    --rail-ink:    #c4b9a8;
    --rail-active: #f5efe3;
    --paper:       #fbf8f3;
    --paper-2:     #f5f0e6;
    --surface:     #ffffff;
    --ink:         #1a1714;
    --ink-2:       #4a4239;
    --ink-3:       #8a8073;
    --ink-4:       #b3a895;
    --rule:        #d8cfc0;
    --rule-soft:   #ebe4d6;
    --oxblood:     #8c2a2a;
    --oxblood-soft:#f3e0dc;
    --sage:        #5d6a3c;
    --sage-soft:   #e6e9d8;
    --sage-mid:    #94a566;
    --amber:       #b5781e;
    --amber-soft:  #f5e6cb;
    --moat:        #2b4a5a;
    --moat-soft:   #dde7ed;
    --moat-mid:    #4e7388;
    --warn:        #c44a2a;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg-app); font-family: 'IBM Plex Sans', -apple-system, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
  body {
    min-height: 100vh; padding: 32px; display: flex; flex-direction: column; align-items: center;
    background:
      radial-gradient(1200px 600px at 10% 0%, #e9e1d2 0%, transparent 60%),
      radial-gradient(1000px 800px at 100% 100%, #ddd2bd 0%, transparent 55%),
      linear-gradient(180deg, #efeae2 0%, #e6dfd3 100%);
  }

  .doc-title { width: 1440px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; }
  .doc-title h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; letter-spacing: -0.01em; font-variation-settings: "opsz" 144; color: var(--ink); }
  .doc-title h1 em { font-style: italic; color: var(--oxblood); }
  .doc-title .frame-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

  /* App shell */
  .app-shell {
    width: 1440px; height: 900px; background: var(--paper); border-radius: 14px; overflow: hidden;
    display: grid; grid-template-columns: 220px 1fr;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 40px 80px -30px rgba(40, 28, 14, 0.40), 0 16px 40px -16px rgba(40, 28, 14, 0.25);
    border: 1px solid var(--rule);
  }

  /* Left rail */
  .rail { background: var(--bg-rail); color: var(--rail-ink); display: flex; flex-direction: column; padding: 22px 0; }
  .rail .brand { padding: 4px 22px 30px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--rail-active); font-variation-settings: "opsz" 144; display: flex; align-items: baseline; gap: 1px; }
  .rail .brand .dot { color: var(--oxblood); font-style: italic; }
  .rail .nav-section { padding: 0 14px; margin-bottom: 24px; }
  .rail .nav-label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6f6457; padding: 0 8px 10px; }
  .rail .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--rail-ink); cursor: pointer; margin-bottom: 1px; letter-spacing: -0.005em; }
  .rail .nav-item:hover { background: rgba(255,255,255,0.04); }
  .rail .nav-item.active { background: rgba(245, 239, 227, 0.10); color: var(--rail-active); }
  .rail .nav-item.active::before { content: ""; width: 2px; height: 16px; background: var(--oxblood); margin-left: -10px; margin-right: 8px; border-radius: 1px; }
  .rail .nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
  .rail .nav-badge { margin-left: auto; background: var(--oxblood); color: var(--paper); font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.04em; }
  .rail .spacer { flex: 1; }
  .rail .sources { padding: 14px 22px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 14px; }
  .rail .sources .sub-label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6f6457; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .rail .sources .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-mid); box-shadow: 0 0 0 0 rgba(148, 165, 102, 0.6); animation: pulse 2s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(148, 165, 102, 0.7);} 70% { box-shadow: 0 0 0 6px rgba(148, 165, 102, 0);} 100% { box-shadow: 0 0 0 0 rgba(148, 165, 102, 0);} }
  .rail .source-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; color: var(--rail-ink); }
  .rail .source-row .time { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #6f6457; }

  /* Main */
  .main { display: flex; flex-direction: column; overflow: hidden; }
  .topbar { height: 64px; border-bottom: 1px solid var(--rule); background: var(--paper); display: flex; align-items: center; padding: 0 26px; gap: 20px; }
  .topbar .date-block { display: flex; flex-direction: column; }
  .topbar .date-block .day { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
  .topbar .date-block .full { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.005em; font-variation-settings: "opsz" 144; }
  .topbar .picker { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
  .topbar .picker svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .topbar .search { flex: 0 0 280px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--paper-2); border: 1px solid transparent; border-radius: 7px; font-size: 13px; color: var(--ink-3); }
  .topbar .search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .topbar .icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--ink-2); position: relative; }
  .topbar .icon-btn:hover { background: var(--paper-2); }
  .topbar .icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .topbar .icon-btn .badge { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--oxblood); border: 1.5px solid var(--paper); }
  .topbar .user { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--rule); }
  .topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #8c2a2a, #b5781e); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
  .topbar .user-meta { display: flex; flex-direction: column; }
  .topbar .user-meta .name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .topbar .user-meta .role { font-size: 10.5px; color: var(--ink-3); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; }

  .content { flex: 1; display: grid; grid-template-columns: 420px 1fr; overflow: hidden; }

  /* Queue column */
  .queue-col { border-right: 1px solid var(--rule); background: var(--paper); overflow-y: auto; display: flex; flex-direction: column; }
  .queue-header { padding: 22px 24px 16px; border-bottom: 1px solid var(--rule); }
  .queue-header .salutation { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 144; margin-bottom: 4px; }
  .queue-header .salutation em { font-style: italic; color: var(--ink-2); font-weight: 400; }
  .queue-header .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule-soft); }
  .queue-header .meta-row .count { font-size: 12px; color: var(--ink-2); font-weight: 500; }
  .queue-header .meta-row .count .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: var(--oxblood); font-weight: 500; margin-right: 4px; }
  .queue-header .meta-row .total { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
  .queue-header .meta-row .total .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; margin-right: 6px; font-weight: 500; }

  .queue-filter { display: flex; gap: 6px; padding: 14px 24px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
  .queue-filter .chip { font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
  .queue-filter .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .queue-filter .chip .num { color: var(--ink-3); margin-left: 4px; font-size: 10.5px; }
  .queue-filter .chip.active .num { color: var(--ink-4); }

  .queue-list { padding: 6px 0; }
  .queue-row { padding: 13px 24px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; position: relative; transition: background 0.12s ease; }
  .queue-row:hover { background: var(--paper-2); }
  .queue-row.selected { background: var(--surface); border-left: 3px solid var(--oxblood); padding-left: 21px; }
  .queue-row.selected::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 8px; background: linear-gradient(90deg, transparent, var(--surface)); pointer-events: none; }
  .queue-row .top-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
  .pill { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; font-weight: 600; }
  .pill.cash  { background: var(--moat-soft);    color: var(--moat); }
  .pill.labor { background: var(--oxblood-soft); color: var(--oxblood); }
  .pill.menu  { background: var(--sage-soft);    color: var(--sage); }
  .pill.guest { background: var(--amber-soft);   color: var(--amber); }
  .pill.eod   { background: #e7e0d2;             color: #6b5e3f; }
  .queue-row .rank { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-3); }
  .queue-row h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.005em; margin-bottom: 4px; font-variation-settings: "opsz" 144; }
  .queue-row .location { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 7px; }
  .queue-row .preview { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; margin-bottom: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .queue-row .bottom-row { display: flex; justify-content: space-between; align-items: center; }
  .queue-row .impact { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14.5px; color: var(--ink); font-variation-settings: "opsz" 144; }
  .queue-row .impact .sign { color: var(--sage); font-weight: 500; }
  .queue-row .arrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-4); }
  .queue-row.selected .arrow { color: var(--oxblood); }

  /* Detail column */
  .detail-col { background: var(--paper); overflow-y: auto; display: flex; flex-direction: column; }
  .detail-header { padding: 26px 36px 22px; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, #fcf6f4 0%, var(--paper) 100%); position: relative; }
  .detail-header .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
  .detail-header .breadcrumb .sep { color: var(--ink-4); }
  .detail-header h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; font-variation-settings: "opsz" 144; margin-bottom: 12px; max-width: 640px; }
  .detail-header h2 em { font-style: italic; color: var(--oxblood); font-weight: 500; }
  .detail-header .sub-meta { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-2); }
  .detail-header .sub-meta strong { color: var(--ink); font-weight: 600; }
  .detail-header .sub-meta .item .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; display: block; margin-bottom: 2px; }
  .detail-actions-bar { position: absolute; top: 26px; right: 36px; display: flex; gap: 8px; align-items: center; }

  .btn { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 8px; cursor: pointer; border: none; letter-spacing: 0.005em; display: inline-flex; align-items: center; gap: 7px; }
  .btn.primary { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 4px rgba(26, 23, 20, 0.18); }
  .btn.primary:hover { background: var(--oxblood); }
  .btn.primary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
  .btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--rule); }
  .btn.icon-only { padding: 9px; background: transparent; color: var(--ink-2); border: 1px solid var(--rule); }
  .btn.icon-only svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .btn.large { padding: 11px 24px; font-size: 14px; }

  .detail-body { padding: 26px 36px 40px; display: flex; flex-direction: column; gap: 26px; }
  .section { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; }
  .section.outcome { background: linear-gradient(180deg, #f0f6fa 0%, #e7eff5 100%); border-color: #c4d1da; }
  .section.measurement { background: var(--sage-soft); border-color: #c7d1a7; }
  .section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .section-head h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; letter-spacing: -0.005em; font-variation-settings: "opsz" 144; }
  .section-head .label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; }
  .section.outcome .section-head .label { color: var(--moat); }
  .section.measurement .section-head .label { color: var(--sage); }

  .reasoning-body { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
  .reasoning-body strong { color: var(--ink); font-weight: 600; }
  .src { display: inline-block; background: var(--amber-soft); color: #7a5a18; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; margin: 0 1px; vertical-align: 1px; }

  .data-chart { background: var(--paper-2); border-radius: 9px; padding: 14px 16px; border: 1px solid var(--rule-soft); }
  .data-chart .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
  .data-chart .head .title { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 600; }
  .data-chart .head .legend { display: flex; gap: 12px; font-size: 11px; color: var(--ink-2); }
  .data-chart .head .legend span { display: inline-flex; align-items: center; gap: 5px; }
  .data-chart .head .legend span::before { content: ""; width: 9px; height: 2px; border-radius: 1px; display: inline-block; }
  .data-chart .head .legend .actual::before { background: var(--oxblood); }
  .data-chart .head .legend .forecast::before { background: var(--ink-3); border-top: 2px dashed var(--ink-3); }
  .chart-svg { width: 100%; height: 120px; display: block; }

  /* Outcome layer — honest, pre-product (replaces fabricated cohort evidence) */
  .outcome-headline { font-size: 14.5px; color: var(--ink); line-height: 1.55; margin-bottom: 18px; }
  .outcome-headline strong { font-weight: 600; }
  .outcome-headline .product { font-family: 'Fraunces', serif; font-style: italic; color: var(--moat); font-weight: 600; font-variation-settings: "opsz" 144; }
  .await-plot {
    background: var(--surface); border: 1px dashed #b6c6cf; border-radius: 9px;
    height: 110px; margin-bottom: 16px; position: relative; overflow: hidden;
    background-image: repeating-linear-gradient(90deg, transparent 0 31px, rgba(43,74,90,0.045) 31px 32px);
  }
  .await-plot .baseline { position: absolute; left: 18px; right: 18px; bottom: 22px; height: 1px; background: #c4d1da; }
  .await-plot .seed { position: absolute; left: 18px; bottom: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--moat); box-shadow: 0 0 0 4px rgba(43,74,90,0.12); }
  .await-plot .await-label { position: absolute; top: 14px; left: 18px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moat); font-weight: 600; }
  .await-plot .plot-tag { position: absolute; right: 18px; bottom: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; color: var(--moat-mid); }
  .await-plot .plot-tag em { font-style: italic; }
  .gauge-note { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px; }
  .gauge-note em { font-style: italic; color: var(--moat); }

  .signals { padding: 14px 16px; background: var(--surface); border: 1px solid #c4d1da; border-radius: 9px; }
  .signals .label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--moat); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 8px; }
  .signal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .signal-chip { background: var(--moat-soft); color: var(--moat); font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 500; padding: 4px 9px; border-radius: 999px; border: 1px solid #c4d1da; }

  /* Measurement plan */
  .measurement-plan { display: flex; flex-direction: column; gap: 8px; }
  .measurement-plan p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 6px; }
  .measurement-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .measurement-item { background: var(--paper); border: 1px solid #c7d1a7; border-radius: 8px; padding: 11px 13px; }
  .measurement-item .what { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
  .measurement-item .how { font-size: 11px; color: var(--ink-2); line-height: 1.4; }
  .measurement-item .how .src { font-size: 9px; }
  .measurement-item .when { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--sage); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; font-weight: 600; }

  /* Decision bar */
  .decision-bar { border-top: 1px solid var(--rule); background: var(--paper); padding: 16px 36px; display: flex; justify-content: space-between; align-items: center; }
  .decision-bar .left { display: flex; align-items: baseline; gap: 12px; }
  .decision-bar .left .impact-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; }
  .decision-bar .left .impact-val { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; color: var(--ink); font-variation-settings: "opsz" 144; }
  .decision-bar .left .impact-val .sign { color: var(--sage); font-weight: 500; }
  .decision-bar .left .impact-note { font-size: 12px; color: var(--ink-3); }
  .decision-bar .right { display: flex; gap: 8px; }