/* Breaktrail Intelligence — design system.
   Lifted from design/portal-v3.html, the approved mockup. Brand colors
   mirror core/config.py so web and PDF cannot drift apart. */

:root{
    --brand:#F04530; --brand-deep:#C9351F;
    --good:#1E7A48; --watch:#D4860A;
    --ink:#16181A; --ink-soft:#22262A;
    --paper:#FAF9F8; --card:#FFFFFF; --line:#E6E2DE;
    --text:#1B1D1F; --slate:#6B6560; --faint:#9A938C;
    --rail:#16181A; --rail-text:#B9B3AD;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --r:4px;
  }
  @media (prefers-color-scheme:dark){
    :root{--paper:#121415;--card:#1A1D1F;--line:#2C3033;--text:#ECE8E4;
          --slate:#9A948E;--faint:#6E6862;--ink:#0D0F10;--ink-soft:#191C1E;--rail:#0D0F10}
  }
  :root[data-theme="dark"]{--paper:#121415;--card:#1A1D1F;--line:#2C3033;--text:#ECE8E4;
      --slate:#9A948E;--faint:#6E6862;--ink:#0D0F10;--ink-soft:#191C1E;--rail:#0D0F10}
  :root[data-theme="light"]{--paper:#FAF9F8;--card:#FFFFFF;--line:#E6E2DE;--text:#1B1D1F;
      --slate:#6B6560;--faint:#9A938C;--ink:#16181A;--ink-soft:#22262A;--rail:#16181A}

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
       line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.02em;font-weight:700}
  button{font:inherit;cursor:pointer}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--faint)}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

  /* ---- shell ---- */
  .shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
  .rail{background:var(--rail);padding:22px 0;display:flex;flex-direction:column;gap:26px;
        position:sticky;top:0;height:100vh}
  .mark{display:flex;align-items:center;gap:10px;padding:0 20px}
  .mark b{color:#fff;font-size:13px;line-height:1.25}
  .mark span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
             color:#6E6862;text-transform:uppercase;font-weight:400}
  nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
  .nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;
       color:var(--rail-text);border-radius:var(--r);text-align:left;font-size:13.5px;width:100%}
  .nav:hover{background:#ffffff10;color:#fff}
  .nav[aria-current="true"]{background:var(--brand);color:#fff;font-weight:600}
  .nav i{width:14px;height:14px;border:1.5px solid currentColor;flex:none;opacity:.85}
  .nav i.tri{border:0;width:0;height:0;border-left:7px solid transparent;
             border-right:7px solid transparent;border-bottom:12px solid currentColor}
  .nav i.up{border-radius:50%} .nav i.arc{border-radius:1px;border-left-width:4px}
  .railfoot{margin-top:auto;padding:0 20px}
  .who{color:#8B857F;font-size:12px}

  main{padding:34px 40px 72px;max-width:1080px}
  .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
        flex-wrap:wrap;margin-bottom:22px}
  .head h1{font-size:26px}
  .head p{margin:4px 0 0;color:var(--slate);font-size:14px}
  .view{display:none} .view.on{display:block}

  /* ---- briefing board ---- */
  .board{background:var(--ink);border-radius:6px;overflow:hidden;margin-bottom:26px}
  .board-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
             padding:16px 22px;border-bottom:1px solid #2A2E31;flex-wrap:wrap}
  .board-top .lbl{color:#7C766F}
  .board-top b{color:#fff;font-size:15px;display:block;margin-top:2px;font-weight:600}
  .tally{display:flex;gap:16px}
  .tally div{text-align:right}
  .tally .n{font-family:var(--mono);font-size:19px;color:#fff;
            font-variant-numeric:tabular-nums;line-height:1.1}
  .tally .n.g{color:#4FBF83} .tally .n.a{color:#E5A93B}
  .tally .lbl{color:#6E6862;font-size:9.5px}
  .row{display:grid;grid-template-columns:34px 150px 1fr;gap:14px;padding:15px 22px;
       border-bottom:1px solid #24282B;align-items:start}
  .row:last-child{border-bottom:0}
  .sig{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:-.03em}
  .sig.p{color:#4FBF83} .sig.w{color:#E5A93B} .sig.n{color:var(--brand)}
  .co{color:#fff;font-size:14px;font-weight:600}
  .co small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
            color:#6E6862;text-transform:uppercase;font-weight:400;margin-top:3px}
  .txt{color:#C6C1BC;font-size:13.5px}
  .txt .watch{display:block;margin-top:6px;color:#E5A93B;font-size:12.5px}
  .txt .src{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;
            color:#6E6862;letter-spacing:.04em}
  .board-foot{padding:13px 22px;display:flex;justify-content:space-between;align-items:center;
              gap:12px;flex-wrap:wrap;background:var(--ink-soft)}
  .quiet{color:#7C766F;font-size:12.5px}
  .lnk{background:none;border:1px solid #3A3E41;color:#DDD8D3;padding:6px 12px;
       border-radius:var(--r);font-size:12.5px}
  .lnk:hover{border-color:var(--brand);color:#fff}

  .acts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
  .act{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px;
       text-align:left;display:flex;flex-direction:column;gap:7px;transition:border-color .15s}
  .act:hover{border-color:var(--brand)}
  .act b{font-size:15px} .act p{margin:0;color:var(--slate);font-size:13px}
  .act .go{margin-top:6px;color:var(--brand);font-family:var(--mono);font-size:11px;
           letter-spacing:.1em;text-transform:uppercase}

  .sec{margin-bottom:30px}
  .sec-h{display:flex;justify-content:space-between;align-items:baseline;
         border-bottom:1px solid var(--line);padding-bottom:8px}
  .item{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;
        border-bottom:1px solid var(--line);align-items:center}
  .item b{font-size:14px;font-weight:600}
  .item .meta{margin-top:2px;color:var(--slate);font-size:12.5px}
  .pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
        padding:3px 8px;border-radius:100px;border:1px solid var(--line);color:var(--slate);
        white-space:nowrap}
  .pill.on{border-color:var(--good);color:var(--good)}
  .pill.run{border-color:var(--watch);color:var(--watch)}

  /* ---- forms ---- */
  .panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px;
         margin-bottom:22px}
  .fld{margin-bottom:16px}
  .fld label{display:block;margin-bottom:6px}
  .fld input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
    background:var(--paper);color:var(--text);font-size:14px;font-family:var(--sans)}
  .fld input:focus{border-color:var(--brand);outline:none}
  .hint{margin:6px 0 0;color:var(--faint);font-size:12px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .btn{background:var(--brand);border:0;color:#fff;padding:11px 20px;border-radius:var(--r);
       font-size:14px;font-weight:600}
  .btn:hover{background:var(--brand-deep)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn.ghost{background:none;border:1px solid var(--line);color:var(--slate);font-weight:500;
             padding:7px 13px;font-size:12.5px}
  .btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
  .drop{border:1.5px dashed var(--line);border-radius:6px;padding:40px 24px;text-align:center;
        background:var(--paper);margin-bottom:18px}
  .drop b{display:block;font-size:15px;margin-bottom:4px}
  .drop p{margin:0;color:var(--slate);font-size:13px}
  .tri-m{margin:0 auto 14px;width:0;height:0;border-left:13px solid transparent;
         border-right:13px solid transparent;border-bottom:22px solid var(--line)}
  label.drop{display:block;cursor:pointer;transition:border-color .15s,background .15s}
  .drop:hover,.drop.over{border-color:var(--brand)}
  .drop.over{background:var(--card)}
  .drop.has{border-style:solid;border-color:var(--good)}
  .drop.has .tri-m{border-bottom-color:var(--good)}
  .fld input[type=file]{padding:7px 10px;font-size:13px}
  .btn.ghost[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:#fff}
  .err{color:var(--brand);font-size:13px;margin:10px 0 0}
  .err:empty{display:none}
  .pill.verdict.yes{border-color:var(--good);color:var(--good)}
  .pill.verdict.maybe{border-color:var(--watch);color:var(--watch)}
  .pill.verdict.no{border-color:var(--brand);color:var(--brand)}
  a.btn{text-decoration:none;display:inline-block}
  a.lnk{text-decoration:none}
  .caveats{border-left:3px solid var(--watch)}
  .caveats ul{margin:8px 0 0;padding-left:18px;color:var(--slate);font-size:13px}

  /* ---- agent picker ---- */
  .picker{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:18px}
  .picker-h{display:flex;justify-content:space-between;align-items:center;gap:12px;
            padding:11px 15px;background:var(--paper);border-bottom:1px solid var(--line);
            flex-wrap:wrap}
  .agent{display:grid;grid-template-columns:20px 26px 1fr auto;gap:11px;align-items:center;
         padding:10px 15px;border-bottom:1px solid var(--line);cursor:pointer}
  .agent:last-child{border-bottom:0}
  .agent:hover{background:var(--paper)}
  .agent input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
  .agent .idx{font-family:var(--mono);font-size:11px;color:var(--faint)}
  .agent .nm{font-size:13.5px;font-weight:500}
  .agent .nm em{display:block;font-style:normal;color:var(--slate);font-size:12px;
                font-weight:400;margin-top:1px}
  .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
       padding:2px 7px;border-radius:100px;border:1px solid var(--line);color:var(--faint)}
  .tag.slow{border-color:var(--watch);color:var(--watch)}
  .agent input:not(:checked)~.nm{opacity:.42}
  .agent input:not(:checked)~.idx{opacity:.42}

  .sliders{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:20px}
  .slide-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .slide-h b{font-family:var(--mono);font-size:12px;color:var(--brand);font-weight:600}
  input[type=range]{width:100%;accent-color:var(--brand)}
  .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;
         color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}

  /* ---- live crew ---- */
  .crew{background:var(--ink);border-radius:6px;overflow:hidden;margin-bottom:22px;display:none}
  .crew.on{display:block}
  .crew-h{padding:15px 20px;border-bottom:1px solid #2A2E31;display:flex;
          justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  .crew-h b{color:#fff;font-size:14.5px;font-weight:600}
  .crew-h .lbl{color:#7C766F}
  .bar{height:2px;background:#2A2E31;position:relative;overflow:hidden}
  .bar span{position:absolute;inset:0 100% 0 0;background:var(--brand);
            transition:right .5s ease}
  .wks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#24282B}
  .wk{background:var(--ink);padding:12px 18px;display:grid;
      grid-template-columns:9px 1fr;gap:12px;align-items:start}
  .dot{width:9px;height:9px;border-radius:50%;background:#3A3E41;margin-top:5px}
  .wk.working .dot{background:var(--brand);animation:pulse 1.1s ease-in-out infinite}
  .wk.done .dot{background:#4FBF83}
  .wk.failed .dot{background:#E5A93B}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
  .wk .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
           color:#6E6862}
  .wk .what{color:#DDD8D3;font-size:13px;font-weight:500;margin:2px 0 3px}
  .wk .act{font-size:12px;color:#7C766F}
  .wk.working .act{color:#C6C1BC}
  .wk.done .act{color:#4FBF83}
  .wk.skipped{opacity:.3}
  .crew-f{padding:13px 20px;background:var(--ink-soft);display:flex;
          justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .crew-f .quiet{color:#7C766F;font-size:12.5px}

  .scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
     color:var(--faint);text-align:left;font-weight:400;padding:0 12px 8px 0;
     border-bottom:1px solid var(--line)}
  td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .note{border-left:2px solid var(--brand);padding:2px 0 2px 14px;color:var(--slate);
        font-size:13px;margin:20px 0}

  @media(max-width:820px){
    .shell{grid-template-columns:1fr}
    .rail{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;
          padding:12px 14px;gap:14px}
    .mark{padding:0} .mark b{display:none}
    nav{flex-direction:row;padding:0} .nav{white-space:nowrap;padding:7px 11px}
    .nav i{display:none} .railfoot{display:none}
    main{padding:24px 18px 60px}
    .acts,.two,.sliders,.wks{grid-template-columns:1fr}
    .row{grid-template-columns:28px 1fr;gap:10px} .row .txt{grid-column:1/-1}
  }