/* Shared layout for the hub's tools (/hub-tools/). Mobile first: one column on a phone, more only when there is room.
   Uses kit tokens only (/kit/tokens.css); the kit's .field, .btn, .chip and .contact-line rules still apply. */

.tool-main{padding-block:2rem 4rem;overflow-x:clip}
.tool-main > * + *{margin-top:1.5rem}
.tool-links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.tool-links a{min-height:var(--target,48px);display:inline-flex;align-items:center}
.tool-intro{max-width:var(--measure)}
.tool-intro h1{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,7vw,3.75rem);line-height:1.05;margin:0}
.tool-intro p{margin-top:.75rem;color:var(--cream-2)}
.tool-note{border:1px solid var(--line);border-radius:var(--r-card);padding:1rem;color:var(--cream-2);max-width:var(--measure);background:var(--ink-2)}
.tool-status{min-height:3rem;padding:.75rem 1rem;border-left:3px solid var(--gold);background:var(--ink-2);color:var(--cream);display:flex;align-items:center;overflow-wrap:anywhere}
.tool-status[data-tone="problem"]{border-left-color:var(--red);color:var(--gold)}

/* Tool switcher tabs: stacked 2x2 on narrow phones, 4-up from 760px, 48px minimum tap target */
.tool-tabs{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;margin-top:1.25rem}
@media (min-width:480px){.tool-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.tool-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tool-tab{min-height:var(--target,48px);padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--ink-2);color:var(--cream);font-family:var(--body);font-size:1.05rem;font-weight:600;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:.2rem;transition:border-color .15s ease,background-color .15s ease}
.tool-tab .tab-code{font-family:var(--mono);font-size:.82rem;color:var(--cream-2);letter-spacing:.04em;text-transform:uppercase}
.tool-tab .tab-title{font-family:var(--display);font-size:1.3rem;font-weight:800;line-height:1.15;color:var(--cream)}
.tool-tab[aria-selected="true"]{border-color:var(--gold);background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.tool-tab[aria-selected="true"] .tab-code{color:var(--gold)}
.tool-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tool-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.tool-panel[hidden]{display:none !important}
.tool-form{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}

/* Steps: one fieldset per step, stacked on a phone */
.tool-step{border:1px solid var(--line);border-radius:var(--r-card);padding:1rem;margin:0;background:var(--ink-2);min-width:0}
.tool-step legend{font-family:var(--display);font-weight:800;font-size:1.35rem;padding:0 .35rem;color:var(--cream)}
.tool-step > * + *{margin-top:1rem}
.tool-row{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:600px){.tool-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .tool-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tool-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-weight:600;color:var(--cream)}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;min-height:var(--target,48px);padding:.6rem .75rem;border:1px solid var(--cream-2);border-radius:var(--r-btn);background:var(--ink);color:var(--cream);font-family:var(--body);font-size:max(1.125rem,18px)}
.field textarea{min-height:6rem;resize:vertical}
.field .hint{color:var(--cream-2);font-size:.95rem}
.field[data-problem] input,.field[data-problem] select{border-color:var(--gold)}
.field .problem{color:var(--gold);font-size:.95rem}

/* Repeating lines (tickets, merch items, songs, channels): a card per line on a phone */
.tool-lines{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.tool-line{border:1px solid var(--line);border-radius:var(--r-btn);padding:.75rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;background:var(--ink);min-width:0}
.tool-line-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.tool-line-title{font-family:var(--mono);font-size:.9rem;color:var(--gold)}
.tool-line .remove{justify-self:start;min-height:var(--target,48px)}
.tool-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.tool-actions .btn{min-height:var(--target,48px);display:inline-flex;align-items:center;justify-content:center}

/* Summary cards inside tool sheets */
.tool-summary-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-block:1rem}
@media (min-width:540px){.tool-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.tool-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tool-summary-card{border:1px solid var(--line);border-radius:var(--r-card);padding:.85rem 1rem;background:var(--ink);min-width:0}
.tool-summary-card.highlight{border-color:var(--gold)}
.tool-summary-label{font-size:.9rem;color:var(--cream-2);display:block}
.tool-summary-value{font-family:var(--display);font-weight:800;font-size:1.65rem;color:var(--cream);font-variant-numeric:tabular-nums;display:block;margin-top:.2rem;overflow-wrap:anywhere}
.tool-summary-card.highlight .tool-summary-value{color:var(--gold)}
.tool-summary-sub{font-size:.88rem;color:var(--cream-2);display:block;margin-top:.2rem}

/* Visual stage position grid for Tech Rider & Stage Plot (HUB-027) */
.stage-plot-wrap{border:1px solid var(--line);border-radius:var(--r-card);padding:1rem;background:var(--ink);margin-top:1rem}
.stage-front-banner{text-align:center;font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);padding:.4rem;border:1px dashed var(--line);border-radius:var(--r-btn);margin-bottom:.85rem}
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:640px){.stage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stage-zone{border:1px solid var(--line);border-radius:var(--r-card);padding:.75rem;background:var(--ink-2);display:flex;flex-direction:column;gap:.4rem;min-width:0}
.stage-zone-pos{font-family:var(--mono);font-size:.8rem;color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
.stage-zone-title{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--cream)}
.stage-zone-body{font-size:.95rem;color:var(--cream-2);overflow-wrap:anywhere;margin:0}

/* The result: a sheet that reads on a phone and prints on one page */
.tool-sheet{border:1px solid var(--line);border-radius:var(--r-card);padding:1rem;background:var(--ink-2);min-width:0}
.tool-sheet h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6vw,2.2rem);margin:0}
.tool-sheet h3{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:1.25rem 0 .5rem;color:var(--cream)}
.tool-sheet dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;margin:1rem 0 0}
.tool-sheet dt{color:var(--cream-2);overflow-wrap:anywhere}
.tool-sheet dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-sheet .total{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--cream);padding-top:.5rem;border-top:1px solid var(--line)}
.tool-sheet .total dd{color:var(--gold)}
.tool-sheet table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:.5rem}
.tool-sheet th,.tool-sheet td{text-align:left;padding:.5rem .4rem;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.tool-sheet th{color:var(--cream-2);font-size:.92rem;font-weight:600}
.tool-sheet .sheet-foot{margin-top:1rem;color:var(--cream-2);font-size:.95rem}

/* Deep-link banner (?va=<ID>) from the 576 Value-Add Register */
.va-banner{border:2px solid var(--gold);border-radius:var(--r-card);padding:1rem 1.25rem;background:var(--ink-2);color:var(--cream);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.25rem;margin-top:1rem}
.va-banner[hidden]{display:none !important}
.va-banner-body{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.va-banner-kicker{font-family:var(--mono);font-size:.82rem;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.va-banner-title{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--cream)}
.va-banner-actions{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.va-banner-actions a,.va-banner-actions button{min-height:var(--target,48px);display:inline-flex;align-items:center}

/* Checkbox field & boundary notices */
.field-check{display:flex;align-items:center;gap:.65rem;min-height:var(--target,48px);padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--ink);color:var(--cream);cursor:pointer}
.field-check input[type="checkbox"]{width:1.35rem;height:1.35rem;min-height:auto;accent-color:var(--gold);flex-shrink:0}
.boundary-notice{border-left:3px solid var(--gold);border-radius:var(--r-btn);padding:.85rem 1rem;background:var(--ink);color:var(--cream-2);font-size:.95rem;margin-block:.75rem}
.boundary-notice strong{color:var(--gold)}
.deal-preview{display:block;margin-top:.75rem}
.deal-preview-pre{font-family:var(--mono);font-size:.92rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--ink);color:var(--cream);margin:0}
.helper-card{border:2px solid var(--gold);border-radius:var(--r-card);padding:1.1rem;background:var(--ink);margin-top:1rem}
.helper-card-badge{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);display:block;margin-bottom:.35rem}
.status-pill{display:inline-block;font-family:var(--mono);font-size:.8rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);background:var(--ink);color:var(--cream)}
.status-pill[data-tone="confirmed"]{border-color:var(--green,#007a3d);color:var(--cream)}
.status-pill[data-tone="hold"]{border-color:var(--gold);color:var(--gold)}

/* Wide tables are stacked rows on a phone (each cell carries its column name in data-label); a real table from 600 px */
.tool-sheet table.stack thead{display:none}
.tool-sheet table.stack tr{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line);padding-block:.5rem}
.tool-sheet table.stack td{border:0;padding:.15rem 0}
.tool-sheet table.stack td[data-label]::before{content:attr(data-label) " · ";color:var(--cream-2)}
@media (min-width:600px){
  .tool-sheet table.stack thead{display:table-header-group}
  .tool-sheet table.stack tr{display:table-row;padding:0}
  .tool-sheet table.stack td{display:table-cell;border-bottom:1px solid var(--line);padding:.5rem .4rem}
  .tool-sheet table.stack td[data-label]::before{content:none}
}

/* Print: only the active sheet, black on white, no site chrome */
@media print{
  .site-head,.tricolor,.site-foot,.skip,.tool-links,.tool-intro,.tool-tabs,.tool-form,.tool-actions,.tool-note,.tool-status,.va-banner,.no-print{display:none !important}
  body{background:#fff;color:#000}
  .tool-main{padding:0}
  .tool-sheet{border:0;padding:0;background:#fff;color:#000}
  .tool-sheet *{color:#000 !important;border-color:#999 !important;background:transparent !important}
  .tool-sheet table.stack thead{display:table-header-group}
  .tool-sheet table.stack tr{display:table-row}
  .tool-sheet table.stack td{display:table-cell;border-bottom:1px solid #999}
  .tool-sheet table.stack td[data-label]::before{content:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}