/* Page styles for work-obseed.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* ── bursts vs parallel: the PO call, clickable ── */
    .bp { max-width:760px; margin:clamp(44px,8vw,96px) auto; padding:0 clamp(20px,5vw,40px); }
    .bp__eyebrow { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing: 0.02em; color:var(--muted); margin:0 0 12px; }
    .bp__h { font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-.015em; line-height:1.12; margin:0 0 18px; color:var(--ink); }
    .bp__toggle { display:inline-flex; gap:4px; background:#FCFAF4; border:1px solid var(--rule); border-radius:999px; padding:4px; margin-bottom:24px; }
    .bp__btn { border:0; background:transparent; font-family:inherit; font-size:13px; font-weight:500; color:var(--muted); padding:7px 16px; border-radius:999px; cursor:pointer; transition:background .18s ease,color .18s ease; }
    .bp__btn--active { background:var(--ink); color:#F5EFE2; }
    .bp__board { background:#FCFAF4; border:1px solid var(--rule); border-radius:16px; padding:clamp(20px,3vw,30px); }
    .bp__track { display:flex; align-items:center; gap:14px; margin-bottom:13px; }
    .bp__label { flex:0 0 100px; font-size:12.5px; font-weight:500; color:var(--ink); text-align:right; }
    .bp__lane { position:relative; flex:1; height:26px; background:#fff; border:1px solid var(--rule); border-radius:7px; overflow:hidden; }
    .bp__bar { position:absolute; top:3px; bottom:3px; border-radius:5px; transition:left .55s cubic-bezier(.4,0,.2,1),width .55s cubic-bezier(.4,0,.2,1); }
    .bp__bar--design { background:#3f8d5a; }
    .bp__bar--dev { background:#caa94e; }
    .bp__bar--mkt { background:#c0593f; }
    .bp__board[data-mode="seq"] .bp__bar--design { left:1%; width:31%; }
    .bp__board[data-mode="seq"] .bp__bar--dev { left:34%; width:31%; }
    .bp__board[data-mode="seq"] .bp__bar--mkt { left:67%; width:31%; }
    .bp__board[data-mode="par"] .bp__bar { left:1%; width:48%; }
    .bp__axis { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; color:var(--muted); margin:6px 0 0; }
    .bp__cap { font-size:13px; color:var(--muted); line-height:1.55; margin:18px 0 0; max-width:62ch; }
    @media (max-width: 520px){ .bp__label{ flex-basis:66px; font-size:11px; } }

    /* ── designed process figures (replace the wireframe SVG diagrams): visual but restrained ── */
    .pf { margin: clamp(24px,3.5vw,36px) 0 0; }
    .pf__row { display:flex; align-items:stretch; gap:clamp(10px,1.6vw,18px); }
    .pf__k { font-family:inherit; font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin:0 0 10px; }
    .pf-node { flex:1; background:#fff; border:1px solid var(--rule); border-radius:11px; padding:12px 14px; box-shadow:0 8px 18px -14px rgba(20,18,14,.4); }
    .pf-node__n { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
    .pf-node__s { display:block; font-size:11.5px; color:var(--ink-soft,#4a4a44); line-height:1.45; margin-top:6px; }
    .pf-node__m { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing:.03em; color:var(--muted); margin-top:7px; }
    .pf-node--accent { border-color:rgba(63,141,90,.42); }
    .pf-node--accent .pf-node__m { color:#3b8454; }
    .pf-num { font-family:var(--font); font-size:26px; font-weight:700; color:var(--ink); line-height:1; margin-top:8px; }
    .pf-num span { font-size:11px; font-weight:500; color:#3f8d5a; margin-left:6px; vertical-align:middle; }
    .pf-arrow { flex:0 0 auto; color:#c3bba8; display:flex; align-items:center; }
    .pf-arrow svg { width:20px; height:20px; }
    .pf-cap { text-align:left; font-size:13px; color:var(--muted); line-height:1.55; margin:16px 0 0; max-width:60ch; }
    @media (max-width: 720px){ .pf__row{ flex-direction:column; } .pf-arrow{ transform:rotate(90deg); align-self:center; margin:2px 0; } }

    /* obseed brand: warm cream paper + dark warm sidebar + yellow active + coral data accent. */
    .case-mock { margin: clamp(56px, 8vw, 96px) auto; max-width: 1040px; --obs-paper: #F3EDDF; --obs-paper-2: #EFE9DA; --obs-card: #FFFFFF; --obs-dark: #2D2924; --obs-dark-2: #2A2520; --obs-ink: #23262B; --obs-mute: #8a8a82; --obs-yellow: #F9C536; --obs-yellow-soft: rgba(249,197,54,0.16); --obs-coral: #EF7A7A; --obs-line: rgba(10,10,10,0.06); }
    .case-mock__eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.02em; margin: 0 0 18px; }
    .case-mock__frame { width: 100%; border: 1px solid rgba(10,10,10,0.12); border-radius: 14px; background: var(--obs-paper); overflow: hidden; box-shadow: 0 36px 70px -28px rgba(10,10,10,.24), 0 0 0 1px rgba(10,10,10,.05); }

    .case-mock__chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #e8e1d0; border-bottom: 1px solid var(--obs-line); }
    .case-mock__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
    .case-mock__dot--r { background: #ff5f57; }
    .case-mock__dot--y { background: #febc2e; }
    .case-mock__dot--g { background: #28c840; }
    .case-mock__chrome-title { font-size: 11px; color: #777; margin-left: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }

    .case-mock__body { display: grid; grid-template-columns: 178px 1fr; height: clamp(460px, 64vh, 580px); overflow-y: auto; background: var(--obs-paper); }
    .case-mock__side { background: var(--obs-dark); border-right: 1px solid rgba(0,0,0,0.4); padding: 18px 0; display: flex; flex-direction: column; gap: 2px; }
    .case-mock__brand-mark { display: inline-flex; align-items: center; align-self: flex-start; margin: 0 14px 22px; padding: 4px 6px; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; font-family: var(--font); }
    .case-mock__brand-bar { color: var(--obs-yellow); font-weight: 400; margin: 0 1px; }
    .case-mock__brand-accent { color: var(--obs-yellow); letter-spacing: -0.04em; }
    .case-mock__nav { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 12.5px; color: #C8C2B5; font-family: var(--font); cursor: default; }
    .case-mock__burger { display: none; }
    .case-mock__nav-glyph { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
    .case-mock__nav-glyph--dash { background: linear-gradient(135deg, var(--obs-yellow) 50%, rgba(255,255,255,0.1) 50%); border-radius: 50%; }
    .case-mock__nav-glyph--leaf { background: var(--obs-yellow); border-radius: 4px 50% 4px 50%; transform: rotate(-15deg); }
    .case-mock__nav--active { color: #fff; background: rgba(255,255,255,0.04); }
    .case-mock__nav--active::before { content: ''; display: block; width: 3px; height: 16px; background: var(--obs-yellow); border-radius: 0 2px 2px 0; margin-left: -14px; margin-right: 11px; }
    .case-mock__nav--armed { color: var(--obs-ink); background: var(--obs-yellow); border-radius: 0 999px 999px 0; margin-right: 16px; padding-right: 16px; font-weight: 500; }
    .case-mock__nav--sub { padding-left: 18px; font-size: 12px; }
    .case-mock__nav-section { display: block; padding: 16px 14px 6px; font-size: 11px; color: #6B6660; letter-spacing: 0.02em; font-family: 'JetBrains Mono', ui-monospace, monospace; }

    .case-mock__main { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--obs-paper); }
    .case-mock__topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 12px; flex-wrap: wrap; background: var(--obs-paper); border-bottom: 1px solid var(--obs-line); }
    .case-mock__bread { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .case-mock__h { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: var(--obs-ink); letter-spacing: -0.02em; font-family: var(--font); }
    .case-mock__viewtoggle { display: inline-flex; background: rgba(0,0,0,0.04); border: 1px solid var(--obs-line); border-radius: 999px; padding: 2px; }
    .case-mock__tab { border: 0; background: transparent; padding: 5px 14px; font-family: inherit; font-size: 11.5px; color: #6B6660; border-radius: 999px; cursor: pointer; transition: all .2s ease; font-weight: 500; }
    .case-mock__tab:hover { color: var(--obs-ink); }
    .case-mock__tab--active { background: var(--obs-ink); color: #fff; }

    .case-mock__stage { padding: 18px 24px 24px; }

    .dash { display: grid; gap: 18px; }
    .dash[hidden] { display: none; }

    .dash__topstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 520px) { .dash__topstrip { grid-template-columns: 1fr; } }
    .dash__stat { padding: 14px 18px; background: var(--obs-card); border: 1px solid var(--obs-line); border-radius: 10px; }
    .dash__stat--accent { background: var(--obs-yellow-soft); border-color: rgba(249,197,54,0.4); }
    .dash__stat-num { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--obs-ink); margin: 0 0 4px; line-height: 1; font-family: var(--font); }
    .dash__stat-unit { font-size: 14px; color: var(--obs-mute); font-weight: 500; margin-left: 2px; letter-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .dash__stat-label { font-size: 11px; color: var(--obs-mute); margin: 0; letter-spacing: 0.02em; font-family: 'JetBrains Mono', ui-monospace, monospace; }

    .dash__chart { padding: 18px 22px 16px; background: var(--obs-card); border: 1px solid var(--obs-line); border-radius: 10px; }
    .dash__chart-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
    .dash__chart-title { font-size: 17px; font-weight: 700; color: var(--obs-ink); margin: 0; letter-spacing: -0.012em; }
    .dash__chart-sub { font-size: 11px; color: var(--obs-mute); margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
    .dash__chart-svg { width: 100%; height: auto; display: block; }
    .dash__ai { display: flex; align-items: center; gap: 10px; margin: 14px -4px -4px; padding: 11px 14px; background: linear-gradient(135deg, #4A5BA8, #56B7C3); color: #fff; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
    .dash__ai-spark { color: #F9C536; font-size: 14px; flex-shrink: 0; }

    .dash__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    @media (max-width: 720px) { .dash__tiles { grid-template-columns: 1fr; } }
    .tile { padding: 14px 16px; border: 1px solid var(--obs-line); border-radius: 10px; background: var(--obs-card); text-align: left; cursor: pointer; transition: all .18s ease; font-family: inherit; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 4px 10px; align-items: start; position: relative; }
    .tile:hover { border-color: var(--obs-ink); transform: translateY(-1px); box-shadow: 0 8px 24px -16px rgba(10,10,10,0.18); }
    .tile__icon { grid-row: 1 / 4; grid-column: 1; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; align-self: start; margin-top: 2px; }
    .tile__icon--heart { color: var(--obs-coral); }
    .tile__icon--hrv { color: var(--obs-coral); transform: rotate(-30deg); font-size: 12px; }
    .tile__label { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--obs-ink); letter-spacing: 0; text-transform: none; margin: 0; font-family: var(--font); font-weight: 500; }
    .tile__num { grid-column: 2; grid-row: 2; font-size: 30px; font-weight: 700; margin: 0; color: var(--obs-ink); letter-spacing: -0.03em; line-height: 1; font-family: var(--font); }
    .tile__unit { font-size: 13px; font-weight: 500; color: var(--obs-mute); margin-left: 4px; letter-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .tile__spark { grid-column: 2; grid-row: 3; width: 100%; height: 22px; color: var(--obs-coral); display: block; margin-top: 6px; }
    .tile__delta { grid-column: 2; grid-row: 4; font-size: 10.5px; margin: 4px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; color: var(--obs-mute); }

    /* Activity view */
    .dash__activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 4px 4px; }
    .dash__activity-crumb { font-size: 11px; color: var(--obs-mute); margin: 0 0 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
    .dash__activity-crumb span { color: var(--obs-ink); }
    .dash__activity-title { font-size: 22px; font-weight: 700; color: var(--obs-ink); margin: 0; letter-spacing: -0.02em; }
    .dash__activity-device { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .dash__activity-device-label { display: block; font-size: 13px; font-weight: 700; color: var(--obs-ink); letter-spacing: 0.06em; }
    .dash__activity-device-model { display: block; font-size: 11px; color: var(--obs-mute); }
    .dash__activity-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--obs-card); border: 1px solid var(--obs-line); border-radius: 10px; }
    @media (max-width: 520px) { .dash__activity-controls { grid-template-columns: 1fr; } }
    .dash__ctrl { display: grid; gap: 4px; padding: 8px 10px; background: var(--obs-paper-2); border-radius: 6px; }
    .dash__ctrl-label { font-size: 11px; color: var(--obs-mute); letter-spacing: 0.02em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .dash__ctrl-value { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--obs-ink); font-weight: 500; }
    .dash__ctrl-chev { color: var(--obs-mute); margin-left: 6px; font-size: 10px; }
    .dash__chart--multi .dash__chart-svg { height: auto; }
    .dash__chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--obs-line); }
    .dash__chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--obs-mute); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
    .dash__chart-key strong { color: var(--obs-ink); font-weight: 700; margin-left: 4px; }
    .dash__chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
    .dash__chart-swatch--coral { background: #EF7A7A; }
    .dash__chart-swatch--green { background: #5BA585; }
    .dash__chart-swatch--blue { background: #3A88C5; }
    .dash__activity-foot { font-size: 11.5px; color: var(--obs-mute); margin: 14px 4px 0; line-height: 1.55; font-family: var(--font); }

    .dash__roster-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 12px; gap: 10px; flex-wrap: wrap; }
    .dash__roster-label { font-size: 11px; color: var(--obs-ink); letter-spacing: 0.02em; margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
    .dash__roster-note { font-size: 10px; color: var(--obs-mute); margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .roster { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--obs-card); border: 1px solid var(--obs-line); border-radius: 10px; overflow: hidden; }
    .roster th { text-align: left; font-weight: 500; color: var(--obs-mute); padding: 10px 12px; border-bottom: 1px solid var(--obs-line); font-size: 11px; letter-spacing: 0.02em; background: var(--obs-paper-2); font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .roster td { padding: 12px; border-bottom: 1px solid var(--obs-line); color: var(--obs-ink); }
    .roster tr:last-child td { border-bottom: 0; }
    .roster__num { font-weight: 600; }
    .roster__row--alert td:first-child { font-weight: 500; }
    .roster__pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .roster__pill--green { background: rgba(74,140,90,0.12); color: #3d7a48; }
    .roster__pill--amber { background: rgba(212,161,58,0.16); color: #8a6520; }
    .roster__pill--red { background: rgba(239,122,122,0.16); color: #963535; }
    .dash__roster-foot { font-size: 10.5px; color: var(--obs-mute); margin: 12px 4px 0; line-height: 1.55; font-family: 'JetBrains Mono', ui-monospace, monospace; }

    @media (max-width: 520px) {
      .case-mock__body { grid-template-columns: 1fr; height: 68vh; min-height: 360px; }
      .case-mock__side { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; }
      .case-mock__brand-mark { margin: 0; }
      .case-mock__nav { display: none; }
      .case-mock__nav-section { display: none; }
      .case-mock__nav--sub { display: none; }
      .case-mock__burger { display: block; width: 20px; height: 20px; color: #C8C2B5; flex-shrink: 0; }
      .case-mock__topbar { padding: 14px 16px; }
      .case-mock__stage { padding: 14px 16px; }
      .roster .roster__col--md { display: none; }
    }