:root{
    --paper:#F6F7F9; --card:#FFFFFF; --ink:#171A1F; --muted:#6A707A;
    --line:#E3E6EB; --line-strong:#CFD4DC;
    --accent:#2B4ED1; --accent-soft:#EAEEFC;
    --pass:#2F8F5B; --pass-soft:#E7F3EC;
    --fail:#C8453B; --fail-soft:#FBEAE8;
    --block:#C2820F; --block-soft:#FBF1DC;
    --skip:#8A909B; --skip-soft:#EFF1F4;
    --disc:#2B5BD1; --disc-soft:#E6ECFC;
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
    --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --r:9px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:22px 20px 80px}
  h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
  a{color:var(--accent)}
  button{font-family:var(--ui);cursor:pointer;border:none;background:none}
  input,textarea,select{font-family:var(--ui);font-size:13.5px;color:var(--ink);background:var(--card);
    border:1px solid var(--line-strong);border-radius:7px;padding:7px 9px;width:100%}
  textarea{resize:vertical;line-height:1.45}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
  label.fld{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px}

  /* header */
  .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .brand{display:flex;align-items:center;gap:11px}
  .glyph{width:34px;height:34px;border-radius:8px;background:var(--ink);position:relative;flex:0 0 auto}
  .glyph::before{content:"";position:absolute;inset:9px;border:2px solid var(--paper);border-radius:2px}
  .glyph::after{content:"";position:absolute;left:13px;top:16px;width:8px;height:4px;border-left:2px solid var(--pass);
    border-bottom:2px solid var(--pass);transform:rotate(-45deg)}
  .brand h1{font-size:19px}
  .brand .sub{font-size:11.5px;color:var(--muted);font-family:var(--mono);letter-spacing:0}
  .top-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1 0 100%;justify-content:flex-end}
  #timerToggle{min-width:68px}
  .timer{display:inline-flex;align-items:center;gap:7px}
  .timer-clock{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);
    border:1px solid var(--line);border-radius:7px;padding:5px 9px;min-width:78px;text-align:center}

  .btn{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:8px;
    padding:8px 13px;font-size:13px;font-weight:550;display:inline-flex;align-items:center;gap:7px}
  .btn:hover{border-color:var(--ink)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.primary:hover{background:#2340b8}
  .btn.ghost{border-color:transparent;color:var(--muted);padding:8px 10px}
  .btn.ghost:hover{color:var(--ink);background:var(--skip-soft)}
  .btn.sm{padding:5px 9px;font-size:12px}
  .btn.danger:hover{border-color:var(--fail);color:var(--fail)}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;margin-bottom:16px}
  .card > h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
    display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
  .card > h2 .n{font-family:var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--line);
    border-radius:20px;padding:1px 9px;font-size:11px;letter-spacing:0}

  .grid{display:grid;gap:11px}
  .meta-grid{grid-template-columns:repeat(3,1fr)}
  @media(max-width:640px){.meta-grid{grid-template-columns:1fr 1fr}}

  /* runs / tabs */
  .runbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
  .runtab{border:1px solid var(--line-strong);background:var(--card);border-radius:8px;padding:7px 12px 7px 11px;
    display:flex;align-items:center;gap:9px;font-size:13px;font-weight:550}
  .runtab .dot{width:7px;height:7px;border-radius:50%;background:var(--skip)}
  .runtab.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .runtab .rate{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
  .runtab.active .rate{color:var(--ink)}
  .runtab .x{color:var(--muted);font-size:15px;line-height:1;margin-left:1px}
  .runtab .x:hover{color:var(--fail)}

  .meter{height:6px;border-radius:6px;background:var(--line);overflow:hidden;display:flex}
  .meter i{display:block;height:100%}
  .meter i.p{background:var(--pass)} .meter i.f{background:var(--fail)}
  .meter i.b{background:var(--block)} .meter i.s{background:var(--skip)} .meter i.d{background:var(--disc)}
  .runsummary{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
  .runsummary .stat{font-family:var(--mono);font-size:12px;color:var(--muted)}
  .runsummary .stat b{color:var(--ink)}
  .runsummary .meter{flex:1;min-width:140px}
  .runfields{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
  @media(max-width:640px){.runfields{grid-template-columns:1fr}}

  /* steps */
  .step{border:1px solid var(--line);border-radius:9px;padding:0;margin-bottom:10px;overflow:hidden;background:var(--card)}
  .step-head{display:flex;align-items:center;gap:11px;padding:11px 12px}
  .step-num{font-family:var(--mono);font-size:11px;color:var(--muted);width:22px;flex:0 0 auto}
  .step-title{flex:1;font-weight:550;border:none;padding:2px 0;background:none;font-size:14px}
  .step-title:focus{outline:none;background:var(--accent-soft);border-radius:4px;padding:2px 6px}
  .seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;flex:0 0 auto}
  .seg button{padding:6px 10px;font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--muted);
    border-right:1px solid var(--line)}
  .seg button:last-child{border-right:none}
  .seg button.on[data-s="pass"]{background:var(--pass-soft);color:var(--pass)}
  .seg button.on[data-s="fail"]{background:var(--fail-soft);color:var(--fail)}
  .seg button.on[data-s="block"]{background:var(--block-soft);color:var(--block)}
  .seg button.on[data-s="skip"]{background:var(--skip-soft);color:var(--ink)}
  .seg button.on[data-s="discussion"]{background:var(--disc-soft);color:var(--disc)}
  .step-body{padding:0 12px 12px 45px;display:grid;gap:9px}
  .step-body textarea{min-height:96px}
  .step-detail{font-size:12.5px;color:var(--muted);margin:-2px 0 2px;border:none;background:none;padding:0}
  .step-detail:focus{outline:none;background:var(--accent-soft);border-radius:4px;padding:2px 6px}
  .shotrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
  .shotrow input[type=text]{flex:1;min-width:160px}
  .thumbslot{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .thumbwrap{position:relative;display:inline-flex}
  .thumb{height:34px;border-radius:5px;border:1px solid var(--line-strong);cursor:pointer}
  .thumb:hover{border-color:var(--accent)}
  .thumbx{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--card);
    border:1px solid var(--line-strong);color:var(--muted);font-size:11px;line-height:1;padding:0;
    display:flex;align-items:center;justify-content:center}
  .thumbx:hover{color:var(--fail);border-color:var(--fail)}
  .rmstep{color:var(--muted);font-size:16px;line-height:1;flex:0 0 auto}
  .rmstep:hover{color:var(--fail)}

  /* screenshot lightbox */
  .lightbox{position:fixed;inset:0;background:rgba(10,12,16,.66);display:flex;align-items:center;
    justify-content:center;z-index:50;padding:24px}
  .lightbox[hidden]{display:none}
  .lb-inner{background:var(--card);border-radius:var(--r);padding:12px;max-width:min(92vw,920px);
    max-height:90vh;display:flex;flex-direction:column;gap:10px}
  .lb-inner img{max-width:100%;max-height:74vh;object-fit:contain;border:1px solid var(--line);
    border-radius:6px;background:var(--paper)}
  .lb-actions{display:flex;align-items:center;gap:9px}
  .lb-msg{font-size:12.5px;font-weight:600;min-height:16px}

  /* print-only screenshot appendix */
  .printonly{display:none}

  /* reminders / gate */
  .gate{border-left:3px solid var(--block)}
  .gate.ok{border-left-color:var(--pass)}
  .rem{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
  .rem:last-child{border-bottom:none}
  .rem input[type=checkbox]{width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
  .rem span{flex:1;font-size:13.5px}
  .rem.done span{color:var(--muted);text-decoration:line-through}
  .gate-flag{font-size:12.5px;font-weight:600;color:var(--block);display:flex;align-items:center;gap:7px;margin-top:11px}
  .gate.ok .gate-flag{color:var(--pass)}

  /* output */
  .outbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
  .outbar .spacer{flex:1}
  .pill{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
  .pill button{padding:6px 11px;font-size:12px;font-weight:550;color:var(--muted)}
  .pill button.on{background:var(--ink);color:#fff}
  pre.out{font-family:var(--mono);font-size:12px;line-height:1.55;background:#11141A;color:#D7DCE3;
    border-radius:9px;padding:15px 16px;overflow:auto;max-height:380px;white-space:pre-wrap;word-break:break-word;margin:0}
  .copied{color:var(--pass);font-size:12px;font-weight:600;opacity:0;transition:opacity .2s}
  .copied.show{opacity:1}
  .jira-hint{font-size:11.5px;color:var(--muted);line-height:1.25;max-width:230px;text-align:right}

  .footnote{font-size:11.5px;color:var(--muted);margin-top:6px}
  .addrow{display:flex;gap:8px;margin-top:4px}
  .crewlist{display:flex;flex-direction:column;gap:6px}
  .crewrow{display:flex;align-items:center;gap:8px}
  .crewrow input{flex:1}
  .crewrow .rmstep{flex:0 0 auto;font-size:16px}
  .step-body .step-rec{min-height:48px}
  .runrec textarea{min-height:48px}
  .overall-rec{margin:0 0 11px}
  .overall-rec textarea{min-height:54px}

  /* hours & minutes calculator modal */
  #calcModal .calc-inner{width:min(92vw,420px)}
  .calc-title{font-size:14px;margin:0 0 4px}
  #calcRows{overflow:auto;max-height:50vh}
  .calc-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
  .calc-sign{width:34px;flex:0 0 auto;font-weight:700;text-align:center}
  .calc-row .calc-h,.calc-row .calc-m{width:62px;flex:0 0 auto;text-align:center;min-width:0}
  .calc-colon{font-weight:700;color:var(--muted);flex:0 0 auto}
  .calc-row .rmstep{flex:0 0 auto;font-size:16px;color:var(--muted)}
  .calc-row .rmstep:hover{color:var(--fail)}
  .calc-total{font-family:var(--mono);font-size:14px;margin:10px 0;padding-top:9px;border-top:1px solid var(--line)}

  /* first-time planner config modal */
  #plannerModal .planner-inner{width:min(92vw,560px)}
  .planner-title{font-size:14px;margin:0 0 4px}
  #plannerBody{overflow:auto;max-height:60vh}
  .planner-item{display:flex;align-items:flex-start;gap:9px;padding:5px 0;border-bottom:1px dashed var(--line);cursor:pointer;font-size:13.5px}
  .planner-item:last-child{border-bottom:none}
  .planner-item input{width:16px;height:16px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent);cursor:pointer}
  .planner-item.lvl1{padding-left:22px}
  .planner-item.lvl2{padding-left:44px}
  .planner-item.lvl3{padding-left:66px}
  .planner-item.done span{color:var(--muted);text-decoration:line-through}

  /* rave setup modal */
  #raveModal .rave-inner{width:min(92vw,520px)}
  #raveBody{overflow:auto;max-height:60vh}

  /* print -> this is the PDF */
  @media print{
    @page{margin:14mm}
    body{background:#fff}
    .wrap{max-width:none;padding:0}
    .noprint{display:none !important}
    .card{border-color:#bbb;box-shadow:none;break-inside:avoid}
    .step{break-inside:avoid}
    pre.out{background:#fff;color:#000;border:1px solid #ccc}
    .seg button:not(.on){display:none}
    .thumbslot{display:none}                 /* hide tiny inline thumbs; full images go in the appendix */
    .printonly{display:block}
    .shot-page{break-before:page;break-inside:avoid;text-align:center;padding-top:4mm}
    .shot-page img{max-width:100%;max-height:88vh;object-fit:contain;border:1px solid #ccc}
    .shot-cap{font-size:12px;font-weight:600;color:#000;margin-bottom:7px}
    /* full per-run report */
    .run-report{break-before:page}
    .rr-head{font-size:14px;margin:0 0 4px}
    .rr-meta{font-size:12px;color:#333;margin:0 0 8px}
    .rr-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:10px}
    .rr-table th,.rr-table td{border:1px solid #bbb;padding:4px 6px;text-align:left;vertical-align:top}
    .rr-table th{background:#f0f0f0}
    .rr-table tr{break-inside:avoid}
    .st-pass{color:#2F8F5B;font-weight:700}
    .st-fail{color:#C8453B;font-weight:700}
    .st-block{color:#C2820F;font-weight:700}
    .st-skip{color:#555;font-weight:700}
    .st-discussion{color:#2B5BD1;font-weight:700}
    .rr-rec{font-size:11px;color:#000;margin:6px 0}
    .rr-rec b{font-weight:700}
  }

  /* collapsible Before-you-start */
  .pre-toggle{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:0 6px;margin-right:2px}
  .pre-toggle:hover{color:var(--ink)}
  #checklist.collapsed #prechecks{display:none}
  #checklist.collapsed .addrow{display:none}

  /* history modal */
  #historyModal .history-inner{width:min(92vw,560px)}
  #historyBody{overflow:auto;max-height:60vh}
  .hist-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line)}
  .hist-row:last-child{border-bottom:none}
  .hist-label{flex:1;font-size:13px}
  .hist-row.current .hist-label{font-weight:650}
  .btn.sm.danger:hover{border-color:var(--fail);color:var(--fail)}