/* ============================================================================
   craft/p-toolbox.css · the Toolbox page (products.html)
   Loaded after the kit (scrollcraft.css, d-current.css, inner.css). Only what
   the kit does not cover: the tool card, the six tool rail and its readout,
   the grid the rail becomes on phones, under reduced motion and without
   scripts, the index that grid runs as, the tool's object on each card, the
   panel the request form sits in, and the page's own compositions. The form
   itself is the kit's (.ri-form in inner.css). D's tokens throughout; bone
   (#F4F4F0) is written literally, as D writes it.
   The card is .tb-tool, never .tool: d-current.css styles the homepage's own
   .tool cards (a hover lift, a moss border, ash-paper type) and those rules
   would otherwise reach these.
   ========================================================================== */
:root{
  --tb-bone:#F4F4F0;
}

/* text that is read aloud but not shown: the name's separator, a link's tool */
.tb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ HERO ============ */
/* three katakana, not four kanji: a little smaller than D's open so the
   word sits behind the headline instead of running off both edges */
.tb-hero .kanji{font-size:min(30vw,380px);right:-2vw;top:-2%}
.tb-hero .craft .screen img{object-position:50% 46%}
/* the text link after the two buttons (brief section 3), Work's pattern: a
   mono link over a hairline, sized to a 44px target, ash on ink at 5.3:1 */
.tb-tlink{display:inline-flex;align-items:center;min-height:44px;color:var(--ash);
  border-bottom:1px solid var(--line-dim);transition:color .16s var(--e-io),border-color .16s var(--e-io)}
.tb-tlink:hover{color:var(--lime);border-color:var(--lime)}
.phero .cta-row .tb-tlink{margin-left:.6rem}

/* ============ THE SUITE: the tool card ============ */
/* A D door (.lane) carrying a tool. The heading holds the tool's name (the
   big word on the card) and its one line, so a reader moving by heading
   hears "Pinpoint: Website feedback lands on the page..."; the label above
   keeps the number and the kind of tool. */
.tb-tool{--tb-pad:clamp(1.3rem,2vw,1.9rem);--tb-gap:.8rem;gap:var(--tb-gap);padding:var(--tb-pad)}
.tb-tool .tb-tool__lbl{line-height:1.4}
.tb-tool h3{margin:-.25rem 0 0;font-family:var(--font-display);font-weight:700;text-transform:none;letter-spacing:0;
  font-size:1rem;line-height:1.2}
.tb-tool__name{display:block;margin-bottom:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  line-height:.9;font-size:clamp(1.75rem,2.35vw,2.25rem);color:var(--tb-bone);text-wrap:balance}
/* the line is a sentence, set as D sets a sentence length card title */
.tb-tool__line{display:block;font-weight:700;letter-spacing:-.01em;font-size:clamp(1.08rem,1.3vw,1.24rem);line-height:1.2;
  color:var(--tb-bone);text-wrap:balance}
/* D gives every paragraph in a door flex:1; here only the body grows, so the
   desk line and the link sit on the same line across the six cards */
.tb-tool p{flex:none;font-size:.9rem;line-height:1.52;color:var(--ash)}
.tb-tool__body{flex:1;display:flex;flex-direction:column;gap:.65rem}
.tb-tool .tb-tool__privacy{color:var(--tb-bone);padding-left:.8rem;border-left:1px solid var(--line-lime)}
.tb-tool .tb-tool__fine{font-size:.74rem;line-height:1.45}
.tb-tool .tb-tool__desk{padding-top:.8rem;border-top:1px solid var(--line-dim);color:var(--tb-bone)}
.tb-tool__desk .k{display:block;margin-bottom:.35rem}
/* a 44px target, only as wide as its words (in the spec sheet grid a link
   would otherwise stretch across its column); it rises into the gap above,
   so the card grows by a few pixels, not by the whole target. A block with a
   44px line, not a flex box: the hidden tool name splits the text, and flex
   items would drop the space before the arrow. */
.tb-tool .lane__link{display:inline-block;min-height:44px;line-height:44px;width:max-content;max-width:100%;
  margin-top:-.6rem;justify-self:start;transition:color .15s var(--e-io)}
.tb-tool .lane__link:hover{color:var(--lime)}

/* the tool's object, cropped from the bench render in the hero: a specimen
   frame floated at the card's top right and lifted level with the label, so
   the name wraps around it only where it has to. It waits in grey on the
   rack and comes into colour while its tool is the one the readout names
   (.is-near, from craft/p-toolbox.js, which also adds .tb-live; without
   scripts every object shows in colour). The lift is the label's line
   (.68rem at 1.4) plus the card's gap, less the heading's -.25rem. */
.tb-glyph{--tb-lift:calc(.952rem + var(--tb-gap) - .25rem);float:right;position:relative;display:block;
  width:3.5rem;height:3.5rem;margin:calc(-1 * var(--tb-lift)) 0 .45rem 1rem;
  border:1px solid var(--line-dim);background:#0b0b0f;overflow:hidden;transition:border-color .3s var(--e-io)}
.tb-glyph img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .5s var(--e-io)}
.tb-glyph .tick{width:6px;height:6px}
.tb-glyph .tick.tl{top:3px;left:3px}
.tb-glyph .tick.br{bottom:3px;right:3px}
.tb-live .tb-glyph img{filter:grayscale(1) brightness(.62)}
.tb-live .tb-tool.is-near .tb-glyph{border-color:var(--line-lime)}
.tb-live .tb-tool.is-near .tb-glyph img{filter:none}

/* ============ THE SUITE: the rail as a pan act ============ */
/* each card is as wide as its copy needs, so the six come out close to one
   height (a door never stretches far past its own words) and the tallest,
   Sales Titans, stays short enough to pan on a laptop */
.tb-suite .rail>.tb-tool--s{width:clamp(20rem,24vw,24rem)}
.tb-suite .rail>.tb-tool--m{width:clamp(22rem,28vw,27rem)}
.tb-suite .rail>.tb-tool--d{width:clamp(25rem,34vw,33rem)}
.tb-suite .rail>.tb-tool--w{width:clamp(30rem,44vw,42rem)}
/* the rail's start: on a wide screen the lead grows so the first tool opens
   at the centre and takes the readout first (the end cap below does the
   same for the last); on a laptop D's own lead width already puts it there */
.tb-suite .rail>.rail__lead{min-width:calc(50vw - clamp(22rem,28vw,27rem) / 2 - var(--gutter) - clamp(1rem,1.8vw,1.5rem))}
/* D sets a heading at .87; here a comma ends a line, and at that leading its
   tail lands on the capital below */
.tb-suite .rail__lead .sec-head{max-width:12ch;line-height:.95}
/* the rail's end: furniture wide enough that the last tool can travel to the
   centre and take the readout (without it Chorus lands flush right and the
   readout stays on Board of Directors); a hairline, the katakana set
   vertically, the rack's closing label */
.tb-suite .rail>.tb-rail-end{width:calc(50vw - clamp(25rem,34vw,33rem) / 2);min-width:8rem;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:1.2rem;padding-left:1.6rem;border-left:1px solid var(--line-lime);color:var(--ash)}
.tb-rail-end__k{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,6vw,5.4rem);line-height:1;
  writing-mode:vertical-rl;color:var(--tb-bone);opacity:.14}
/* the numerals: six under the rack, in the open ground between the cards and
   the stage's foot, travelling a layer slower than the cards. craft/p-toolbox.js
   places each one so it reaches the centre with its own card and sizes them
   to the band, so no numeral sits behind a card and shows as a sliver in the
   gap between two doors. Drawn in outline (D's thin line work); the one under
   the named tool takes a lime line. The row fades out on the left, where the
   readout lives, and the fade stays put while the row travels. */
.tb-suite .doors__ghost{top:auto;bottom:0;left:0;width:calc(100vw + var(--tb-gt,0px));height:1em;font-size:var(--tb-gf,10rem);line-height:.8;opacity:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,244,240,.17);
  transform:translate3d(calc(var(--sc-p,0) * var(--tb-gt,0px) * -1),0,0);
  --tb-mask:linear-gradient(90deg,transparent min(calc(var(--gutter) + 20rem),30vw),#000 min(calc(var(--gutter) + 30rem),46vw));
  -webkit-mask-image:var(--tb-mask);mask-image:var(--tb-mask);
  -webkit-mask-size:100vw 100%;mask-size:100vw 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:calc(var(--sc-p,0) * var(--tb-gt,0px)) 0;mask-position:calc(var(--sc-p,0) * var(--tb-gt,0px)) 0}
.tb-suite .doors__ghost span{position:absolute;bottom:0;left:0;width:auto;padding:0;transition:-webkit-text-stroke-color .3s var(--e-io)}
.tb-suite .doors__ghost span.is-near{-webkit-text-stroke-color:rgba(227,248,80,.55)}
.tb-suite .doors__ghost.tb-ghost-off{display:none}
/* the readout names the tool: the kit sets the line in ash, the name here in bone */
/* the readout sits on an ink plate running to the stage's left edge, so a
   numeral travelling under it is cut clean instead of crossing its letters */
.tb-suite .doors__read{background:var(--ink);padding:.5rem 1rem .5rem 0;margin-bottom:-.5rem;
  box-shadow:calc(-1 * var(--gutter)) 0 0 var(--ink)}
.tb-read__name{font-style:normal;color:var(--tb-bone)}
/* the tool the readout names is the tool you can read: its frame lights and
   it comes to full strength over the kit's settle (craft/p-toolbox.js marks
   it .is-near; a stylesheet !important outranks the kit's inline opacity, as
   the kit's own :focus-within rule does). It eases in, and eases out again
   while .tb-fade holds; the rest of the rail follows the scroll exactly. */
.rail .tb-tool{transition:border-color .3s var(--e-io)}
.tb-suite .rail>.tb-tool.is-near{border-color:var(--line-lime)}
.tb-suite:not(.is-flat) .rail>.tb-tool.is-near{opacity:1!important}
.tb-suite .rail>.tb-tool.is-near,.tb-suite .rail>.tb-tool.tb-fade{transition:opacity .3s var(--e-io),border-color .3s var(--e-io)}
/* the tight setting: a short window, or fonts landing wider than measured */
.tb-tight .tb-tool{--tb-pad:1.2rem;--tb-gap:.6rem}
.tb-tight .tb-glyph{width:3rem;height:3rem}
.tb-tight .tb-tool__name{font-size:1.7rem;margin-bottom:.6rem}
.tb-tight .tb-tool p{font-size:.84rem;line-height:1.45}
.tb-tight .tb-tool .tb-tool__fine{font-size:.7rem}
/* a window made shorter than even the tight rail after load: the furniture
   steps aside so no card runs under it */
.tb-cramped .doors-stage>.telem,.tb-cramped .doors-stage>.xhair,.tb-cramped .doors__read{display:none}

/* ============ THE SUITE: the grid (phones, reduced motion, very short windows, no scripts) ============ */
/* The markup ships .is-flat; craft/p-toolbox.js takes it off where the rail
   pans. The stage stops being a one viewport frame and the rail becomes an
   asymmetric grid, never three equal columns: the two short tools side by
   side, the flagship Sales Titans across the full width, two more side by
   side, and Chorus across the foot. */
.tb-suite.is-flat .doors-stage.stage{position:static;height:auto;min-height:0;overflow:visible;display:block;
  padding-block:clamp(4rem,9vw,7.5rem)}
.tb-suite.is-flat .rail{width:auto;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.3rem);perspective:none}
.tb-suite.is-flat .rail>*{width:auto;min-width:0}
.tb-suite.is-flat .rail__lead{grid-column:1/-1;padding-right:0;margin-bottom:.6rem}
.tb-suite.is-flat .rail__lead .sec-head{max-width:22ch}
.tb-suite.is-flat .tb-tool--w,.tb-suite.is-flat .tb-tool--d{grid-column:1/-1}
.tb-suite.is-flat .doors__ghost,.tb-suite.is-flat .doors__read,.tb-suite.is-flat .xhair,.tb-suite.is-flat .tb-rail-end{display:none}
/* a full width card sets its name and line on the left and its copy on the
   right, as a spec sheet does, so no line runs the width of the page */
@media(min-width:721px){
  .tb-suite.is-flat .tb-tool--w,.tb-suite.is-flat .tb-tool--d{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-areas:"lbl body" "head body" "head desk" "head link";grid-template-rows:auto 1fr auto auto;
    column-gap:clamp(1.6rem,4vw,3.6rem);row-gap:var(--tb-gap);align-content:start}
  /* here the heading has no negative margin to take back */
  .tb-suite.is-flat .tb-tool--w .tb-glyph,.tb-suite.is-flat .tb-tool--d .tb-glyph{--tb-lift:calc(.952rem + var(--tb-gap))}
  .tb-suite.is-flat .tb-tool--w>.tb-tool__lbl,.tb-suite.is-flat .tb-tool--d>.tb-tool__lbl{grid-area:lbl}
  .tb-suite.is-flat .tb-tool--w>h3,.tb-suite.is-flat .tb-tool--d>h3{grid-area:head;margin-top:0}
  .tb-suite.is-flat .tb-tool--w>.tb-tool__body,.tb-suite.is-flat .tb-tool--d>.tb-tool__body{grid-area:body}
  .tb-suite.is-flat .tb-tool--w>.tb-tool__desk,.tb-suite.is-flat .tb-tool--d>.tb-tool__desk{grid-area:desk}
  .tb-suite.is-flat .tb-tool--w>.lane__link,.tb-suite.is-flat .tb-tool--d>.lane__link{grid-area:link}
}
@media(max-width:720px){
  .tb-suite.is-flat .rail{grid-template-columns:minmax(0,1fr)}
  .tb-suite.is-flat .tb-tool__name{font-size:1.72rem}
  /* on a phone each card slides in from the right as it arrives: the rail's
     sideways travel, kept as a gesture (main clips the x axis) */
  .tb-suite.is-flat .tb-tool.rv{transform:translate3d(44px,0,0)}
  .tb-suite.is-flat .tb-tool.rv.in{transform:none}
}

/* ============ THE SUITE: the grid as an index ============ */
/* Where the suite stays a grid, craft/p-toolbox.js runs it as an index
   (.tb-index), the doors' readout carried into a column of cards: the
   readout rides the foot of the screen on an ink plate while the rack is
   being read, and names the tool under the reading line (45% down); that
   card's frame lights, its object comes into colour and its numeral, cut
   by the card's foot, surfaces as the card climbs and lights lime while it
   is named. The plate's top edge is the rack's progress. Under reduced
   motion the readout and the lit card still follow the reader, with no
   transition and no travel. */
.tb-index .tb-tool{overflow:hidden}
.tb-tool__num{position:absolute;right:var(--tb-pad);bottom:-.16em;z-index:-1;font-family:var(--font-display);font-weight:900;
  font-size:5.2rem;line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(244,244,240,.17);
  pointer-events:none;user-select:none;transition:-webkit-text-stroke-color .3s var(--e-io)}
.tb-tool.is-near .tb-tool__num{-webkit-text-stroke-color:rgba(227,248,80,.55)}
/* the narrowest phones: the numeral steps down so it clears the card's link */
@media(max-width:374px){.tb-tool__num{font-size:3.6rem}}
@media(max-width:340px){.tb-tool__num{font-size:3.1rem}}
.tb-suite.is-flat.tb-index .doors__read{display:block;position:sticky;left:auto;bottom:0;z-index:5;
  margin:clamp(1.4rem,4vw,2.2rem) 0 0;box-shadow:none;background:var(--ink);border-top:1px solid var(--line-dim);
  padding:.9rem max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter))) calc(.9rem + env(safe-area-inset-bottom,0px));
  line-height:1.6;text-wrap:balance;opacity:0;visibility:hidden;transform:translate3d(0,10px,0);
  transition:opacity .3s var(--e-io),transform .3s var(--e-io),visibility 0s linear .3s}
.tb-suite.is-flat.tb-index .doors__read.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--e-io),transform .3s var(--e-io)}
.tb-index .doors__read .doors__bar{position:absolute;left:0;right:0;top:-1px;width:auto;height:1px;background:none}
.tb-index .doors__read .doors__bar::after{top:0;height:2px;width:calc(var(--tb-rp,0) * 100%)}
/* a control the browser scrolls into view clears the plate */
.tb-index .rail a{scroll-margin-bottom:5rem}

/* ============ THE HONEST VERSION (cream, quiet) ============ */
.tb-honest .sec-head{font-size:clamp(2rem,4.4vw,3.6rem);max-width:21ch}
.tb-honest__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.6rem,4.5vw,4rem);
  align-items:start;margin-top:1.2rem}
.tb-honest__grid .screen{max-width:420px}
.tb-honest .prose p.lede{font-size:clamp(1.12rem,1.6vw,1.32rem)}
.tb-asides{margin-top:2.2rem}
@media(max-width:900px){
  .tb-honest__grid{grid-template-columns:minmax(0,1fr)}
  .tb-honest__grid .screen{max-width:340px}
}

/* ============ ACCESS: two routes under the wire ============ */
.tb-routes.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.tb-routes p a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tb-routes p a:hover{color:var(--tb-bone)}
/* Route 01's own way in: the page's text link, under its paragraph */
.tb-route-link{margin-top:.7rem}
.tb-note{margin-top:2.4rem;max-width:60ch;padding-left:1rem;border-left:1px solid var(--line-lime);color:var(--ash);
  font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.55}
/* the wide drawing hides with the kit's .wire--steps below 820px; the pocket
   drawing takes over there, so the section keeps its device on a phone */
.tb-fork--phone{display:none}
@media(max-width:820px){
  .tb-routes.steps{grid-template-columns:minmax(0,1fr)}
  .tb-fork--phone{display:block;width:min(100%,24rem);margin-top:1.8rem}
}

/* ============ ACCESS: the request panel ============ */
/* The form (the kit's .ri-form) in a framed panel on ink, D's registration
   marks at two corners as on the booking frame: the heading and its one line
   on the left, the fields on the right; stacked from 900px down. The panel
   is the box the wire above runs into. */
.tb-request{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(1.6rem,4vw,3.6rem);
  margin-top:clamp(2.8rem,5vw,3.8rem);padding:clamp(2.4rem,3.4vw,3rem) clamp(1.25rem,3.4vw,2.8rem) clamp(1.5rem,3.4vw,2.8rem);
  border:1px solid var(--line-lime);background:var(--ink)}
.tb-request::before,.tb-request::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--lime);pointer-events:none}
.tb-request::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.tb-request::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.tb-request__tel{position:absolute;top:.9rem;right:clamp(1.25rem,3.4vw,2.8rem);color:var(--ash-dim)}
.tb-request__intro .k{margin-bottom:1rem}
.tb-request__h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--tb-bone);margin-bottom:1rem;text-wrap:balance}
.tb-request__intro p{max-width:30ch;color:var(--ash);font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.55;text-wrap:pretty}
@media(max-width:900px){
  .tb-request{grid-template-columns:minmax(0,1fr)}
  .tb-request__intro p{max-width:46ch}
}

/* ============ THE CLOSE ============ */
/* the kit grows the question from its own centre, as the band is centred */
.tb-close .tb-close__q{max-width:12ch}
.tb-close .reg{color:var(--ash-dim)}
.tb-textlink{margin-top:1.1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.8rem}
/* the band's own grey (the r-mark turns behind these; ash drops under AA over
   it), each link a 44px target; .cta-band p outranks a single class here */
.cta-band .tb-textlink{margin:.4rem auto 0}
.tb-textlink a{display:inline-flex;align-items:center;min-height:44px;color:#9C9CA5;transition:color .15s var(--e-io)}
.tb-textlink a:hover{color:var(--lime)}

@media(max-width:640px){
  .phero .cta-row .tb-tlink{margin-left:0;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .rail .tb-tool,.tb-glyph,.tb-glyph img,.tb-tool__num,.tb-tlink,.tb-textlink a,.tb-suite.is-flat.tb-index .doors__read{transition:none!important}
  .tb-suite.is-flat .tb-tool.rv{transform:none}
}