/* Step timer · assets/toolkit/step-timer.js renders into [data-tool="step-timer"].
   Phone-first: big tap targets, the main button at thumb height. Uses the tokens from notes.css.
   No <p> or lists inside, so article prose rules never reach it. */
.st [hidden]{display:none!important;}
.st{background:var(--paper-card); border:1.5px solid var(--ink); border-radius:var(--radius); margin:22px 0 12px; color:var(--ink);}
.st-head{background:var(--ink); color:var(--paper); padding:12px 18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
.st-tag{color:var(--amber);}
.st-sub-head{color:#c9cdc0;}
.st-body{padding:18px;}
.st-body + .st-body{border-top:1px solid var(--line);}
.st-label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;}
.st-label .o{text-transform:none; letter-spacing:.02em; color:var(--ink-faint);}
.st-input{display:block; width:100%; min-height:48px; padding:10px 12px; font:500 17px/1.2 'IBM Plex Sans',sans-serif; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); border-radius:3px; appearance:none;}
.st-input::placeholder{color:var(--ink-faint); font-weight:400;}
.st-input:focus,.st button:focus-visible,.st a:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.st-help{font-size:14px; line-height:1.5; color:var(--ink-soft); margin:12px 0 16px;}
.st-big{appearance:none; display:block; width:100%; min-height:72px; margin:14px 0 0; padding:14px 18px; font:700 22px/1.15 'Space Grotesk',sans-serif; color:var(--paper); background:var(--ink); border:0; border-radius:4px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.st-big:active{background:#2b3035;}
.st-next-name{display:block; font:400 12px/1.4 'IBM Plex Mono',monospace; letter-spacing:.04em; color:#c9cdc0; margin-top:4px;}
.st-row{display:flex; gap:10px; margin-top:10px;}
.st-mid{appearance:none; flex:1 1 0; min-height:56px; padding:10px 12px; font:500 13.5px/1.2 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); border-radius:4px; cursor:pointer; touch-action:manipulation;}
.st-paper{display:inline-block; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-faint); text-underline-offset:3px;}
.st-meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;}
.st-task{text-transform:none; letter-spacing:0; color:var(--ink); font-size:12.5px;}
.st-clock{font:700 clamp(48px,14vw,72px)/1 'Space Grotesk',sans-serif; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; margin:4px 0 14px;}
.st-step{border:1.5px solid var(--ink); border-radius:4px; background:var(--paper); padding:12px 12px 14px;}
.st-step-top{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px;}
.st-step-n{font:700 18px/1.2 'Space Grotesk',sans-serif;}
.st-step-clock{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.st-toggles{display:flex; gap:10px; margin-top:12px;}
.st-tog{appearance:none; flex:1 1 0; min-height:56px; font:500 14px/1.2 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--paper-card); border:1.5px dashed var(--ink-faint); border-radius:4px; cursor:pointer; touch-action:manipulation;}
.st-tog.st-t-wait[aria-pressed="true"]{border:1.5px solid var(--ink); background:var(--ink-soft); color:var(--paper);}
.st-tog.st-t-mis[aria-pressed="true"]{border:1.5px solid var(--red-flag); background:var(--red-flag); color:var(--paper);}
.st-sofar{margin-top:14px;}
.st-done{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px dashed var(--line); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
/* Results */
.st-steps{border:1px solid var(--line); border-radius:3px; background:var(--paper); margin:6px 0 14px;}
.st-srow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:9px 12px; border-top:1px solid var(--line); align-items:baseline;}
.st-srow:first-child{border-top:0;}
.st-shead{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.st-sname{font-size:15px; line-height:1.4; min-width:0; overflow-wrap:anywhere;}
.st-sn{display:inline-block; width:18px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
.st-stime{text-align:right; font:700 17px/1.2 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums;}
.st-range{display:block; font:400 11px/1.4 'IBM Plex Mono',monospace; color:var(--ink-soft);}
.st-flag{display:inline-block; margin-left:6px; font:500 9.5px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; padding:3px 5px; border-radius:2px; border:1.2px dashed; vertical-align:2px;}
.st-f-wait{color:var(--ink-soft); border-color:var(--ink-faint);}
.st-f-mis{color:var(--red-flag); border-color:var(--red-flag);}
.st-f-un{color:var(--amber-ink); border-color:var(--amber);}
.st-total{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px;}
.st-tk{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.st-tv{font:700 32px/1 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums;}
.st-bar{display:flex; height:26px; border:1.5px solid var(--ink); background:var(--paper); overflow:hidden; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
.st-seg{display:block; height:100%;}
.st-work{background:var(--green);}
.st-wait{background:repeating-linear-gradient(45deg,var(--ink-faint) 0 2px,var(--paper-card) 2px 6px);}
.st-rework{background:var(--red-flag);}
.st-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 16px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}
.st-lg i{display:inline-block; width:12px; height:12px; vertical-align:-2px; margin-right:6px; border:1px solid var(--ink-faint); -webkit-print-color-adjust:exact; print-color-adjust:exact;}
.st-week-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.st-pw{max-width:130px;}
.st-hours{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink);}
.st-fb{margin-top:14px;}
.st-fbl{border-left:3px solid var(--amber); background:var(--paper); padding:10px 12px; font-size:14.5px; line-height:1.5; margin:0 0 8px;}
.st-act{display:flex; align-items:center; min-height:52px; margin-top:10px; padding:10px 14px; font:500 14px/1.3 'IBM Plex Mono',monospace; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); border-radius:4px; text-decoration:none;}
.st-act:hover{box-shadow:3px 4px 0 var(--amber);}
.st-status{display:block; min-height:1.4em; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--green);}
.st-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:4px;}
.st-foot .st-paper{margin-top:0;}
.st-clear{appearance:none; background:none; border:0; border-bottom:1px solid var(--ink-faint); color:var(--ink-soft); font:400 12px/1.2 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; padding:4px 0; cursor:pointer;}
.st-nojs{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); border:1.5px dashed var(--ink-faint); border-radius:3px; padding:14px 16px; margin:18px 0;}
@media (max-width:520px){
  .st-body{padding:16px 14px;}
  .st-head{padding:12px 14px;}
}
@media (prefers-reduced-motion:reduce){ .st *{transition:none!important;} }
/* Print result (assets/toolkit/print.js): the results only, no frame or buttons */
.st-printed{border:0; background:none; margin:0;}
.st-printed .st-body{padding:0;}
.st-then{margin:20px 0 0; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}