/* tool.css — the shell every working tool shares: a title band above the app, the industry switcher,
 * the "Play it for me" tour, the synthetic cursor and caption strip, and the app frame itself.
 * Loaded after board.css. The app's own layout lives in each tool's file. */
.tool{max-width:1440px;margin:0 auto;width:100%;padding:calc(var(--rail) + 6vh) clamp(16px,3vw,40px) 10vh}
.tool-hd{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,56px);align-items:end;padding-bottom:4vh}
.kicker{margin:0 0 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tool-h1{font:700 clamp(38px,5.2vw,84px)/.95 var(--display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;max-width:14ch}
.tool-lede{margin-top:16px;font-size:17px;color:var(--sec);max-width:52ch;line-height:1.5}
.tool-lede b{color:var(--ink);font-weight:600}
.tool-ctl{display:grid;gap:14px;justify-items:start}
.tool-ctl .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ink);background:var(--paper)}
.seg button{appearance:none;border:0;background:none;font:600 13px/36px var(--sans);padding:0 14px;color:var(--sec);cursor:pointer;border-right:1px solid var(--grid-soft)}
.seg button:last-child{border-right:0}
@media (max-width:899px){.seg{max-width:100%}.seg button{flex:1 1 auto;border-bottom:1px solid var(--grid-soft)}.tool-ctl,.tool-ctl .row{max-width:100%;min-width:0}}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--board)}
.seg button:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.seg-l{font:600 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.ghost{appearance:none;display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer;text-decoration:none}
.ghost:hover{background:var(--board-2)}
.ghost:focus-visible{outline:2px solid var(--b);outline-offset:2px}
button.mag{appearance:none;border:0;cursor:pointer}
button.mag:focus-visible{outline:2px solid var(--b);outline-offset:3px}

/* the app frame */
.frame-wrap{position:relative;border:1.5px solid var(--ink);background:var(--paper);box-shadow:0 30px 60px -30px rgba(27,27,27,.55);overflow:hidden}
.frame-wrap.touring{cursor:none}
.frame-wrap.touring *{pointer-events:none}

/* the synthetic cursor and caption strip used by the tour */
.cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:60;pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .25s;transform:translate(-100px,-100px)}
.cur svg{display:block;width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.cur.down svg{transform:scale(.85)}
.cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);z-index:61;display:inline-flex;align-items:stretch;background:var(--ink);color:var(--board);font:600 15px/1.3 var(--sans);padding:12px 18px 12px 0;opacity:0;transition:opacity .3s,transform .3s;max-width:min(92%,560px);pointer-events:none}
.cap::before{content:"";width:10px;flex:none;background:var(--o);margin-right:14px}
.cap.on{opacity:1;transform:translateX(-50%)}
.cap b{color:#fff;font-weight:700}
.skip{position:absolute;right:14px;top:14px;z-index:62;display:none;appearance:none;border:1px solid var(--board);background:rgba(27,27,27,.9);color:var(--board);font:600 12px/1 var(--sans);padding:9px 12px;cursor:pointer;pointer-events:auto!important}
.frame-wrap.touring .skip{display:inline-flex}

/* the big data hit: one line of display type stamped over the app for a beat */
.hit{position:absolute;inset:0;z-index:55;display:grid;place-items:center;pointer-events:none;opacity:0}
.hit span{font:700 clamp(48px,9vw,160px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase;color:var(--o);background:var(--ink);padding:.08em .2em;transform:scale(.6) rotate(-3deg)}
.hit.on{animation:hit-in 1.5s cubic-bezier(.2,1.2,.3,1) forwards}
@keyframes hit-in{0%{opacity:0}12%{opacity:1}75%{opacity:1}100%{opacity:0}}
.hit.on span{animation:hit-pop .5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes hit-pop{to{transform:none}}

.tool-note{margin-top:22px;font-size:14px;color:var(--sec);max-width:70ch;line-height:1.55}
.tool-note b{color:var(--ink);font-weight:600}
.tool-foot{margin-top:6vh;border-top:1.5px solid var(--grid);padding-top:4vh;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.tool-foot p{color:var(--sec);font-size:16px;max-width:52ch}
.tool-foot p b{color:var(--ink);font-weight:600}

@media (max-width:899px){
  .tool{padding:calc(var(--rail) + 4vh) 4vw 8vh}
  .tool-hd{grid-template-columns:1fr;gap:18px;align-items:start}
  .kicker{margin:0 0 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tool-h1{font-size:clamp(34px,10vw,52px)}
  .tool-lede{font-size:15.5px}
  .seg button{font-size:12px;padding:0 10px;line-height:34px}
  .cap{bottom:12px;font-size:13.5px;padding:10px 14px 10px 0}
}
@media (prefers-reduced-motion:reduce){
  .cur{transition:none}.cap{transition:none}.hit.on,.hit.on span{animation:none}.hit.on{opacity:1}
}

/* record mode (?record=1): the app fills the viewport, the caption strip and skip button are hidden; the harness drives the tour api */
html.recording,html.recording body{overflow:hidden;background:var(--paper)}
html.recording .rail,html.recording .menu,html.recording .tool-hd,html.recording .tool-note,html.recording .tool-foot,html.recording .foot{display:none!important}
html.recording .tool{padding:0;max-width:none}
html.recording .frame-wrap{position:fixed;inset:0;border:0;box-shadow:none;z-index:5000}
html.recording .frame-wrap .cap,html.recording .frame-wrap .skip{display:none!important}
html.recording .tapp{height:100vh!important;min-height:0!important;max-height:none!important}
html.recording .cur{transition-duration:.7s}
html.recording .tapp .top .seg{border-color:rgba(246,246,241,.45);background:transparent;margin-right:6px}
html.recording .tapp .top .seg button{color:rgba(246,246,241,.75);line-height:32px;font-size:12px;padding:0 11px;border-right-color:rgba(246,246,241,.2)}
html.recording .tapp .top .seg button[aria-pressed="true"]{background:var(--o);color:#fff}

/* record mode on a phone: the industry switcher becomes a strip under the top bar; each tool fills the viewport with no page scroll */
@media (max-width:899px){
  html.recording .tapp .top{flex-wrap:wrap;height:auto;padding-bottom:8px;row-gap:0}
  html.recording .tapp .top .seg{order:10;flex:1 0 100%;display:flex;margin:4px 0 0;border-color:rgba(246,246,241,.35)}
  html.recording .tapp .top .seg button{flex:1;padding:0;font-size:11.5px;line-height:28px;text-align:center}
  html.recording .rec-tapp-records{grid-template-rows:auto minmax(0,1fr)}
  html.recording .rec-tapp-records .view{max-height:none}
  html.recording .rec-tapp-records .detail{max-height:62vh}
  html.recording .rec-tapp-intake{grid-template-rows:auto auto auto minmax(0,1fr)}
  html.recording .rec-tapp-intake .inbox{padding:8px 12px}
  html.recording .rec-tapp-intake .msg{flex-basis:56vw;padding:8px 10px}
  html.recording .rec-tapp-intake .body{max-height:25vh}
  html.recording .rec-tapp-intake .rec{overflow:auto;min-height:0}
  html.recording .rec-tapp-dispatch{grid-template-rows:auto auto auto minmax(0,1fr) auto}
  html.recording .rec-tapp-dispatch .boardwrap{max-height:none}
  html.recording .rec-tapp-dispatch .tray{align-content:flex-start;align-items:flex-start}
}
@media (max-width:899px){
  html.recording .rec-tapp-dispatch .lane{height:104px}html.recording .rec-tapp-dispatch .board .job,html.recording .rec-tapp-dispatch .shadow{height:80px;padding:12px 8px 10px 14px}
  html.recording .rec-tapp-dispatch .board .job b{font-size:13.5px;white-space:normal;line-height:1.15;max-height:2.3em}
  html.recording .hit span{font-size:14vw}
}