/* =====================================================================
   TMW Fabrication Tools - shared chrome layer
   ---------------------------------------------------------------------
   Loaded on top of each tool's own stylesheet. It only standardizes the
   HEADER: the "Free Shop Tools - Texas Metal Works" eyebrow, the
   Imperial/Metric toggle, the theme + print controls pinned top-right, a
   full-width intro line, clean print, and tidy wrapping on phones.
   Every rule is namespaced under a tool root (.tmw, .nco, .tmwbf, .wsc),
   so this file is inert on any page without a tool. Tool bodies and all
   calculation behavior are untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Canonical header layout for the .tmw ("t-") tools.
   Forces the screenshot layout: the eyebrow and the controls share a top
   bar, then the title and the intro paragraph run the FULL width below.
   This un-confines the intro on the hardness, gauge, tap-drill, and unit
   converter tools, which previously squeezed the intro into a left column.
   --------------------------------------------------------------------- */
.tmw .t-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.tmw .t-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
}
.tmw .t-topbar > .t-tools{ flex:0 0 auto; }
.tmw .t-title{ width:100%; }
.tmw .t-sub{ width:100%; max-width:100%; }
.tmw .t-eyebrow b{ color:var(--ink2); }

/* ---------------------------------------------------------------------
   2) Header harmonization for the three "sibling" tools that use their own
   class prefixes (NestCut .nco, Press Brake .tmwbf, Weld .wsc). Match the
   .tmw eyebrow (mono, uppercase, muted) and the 8px control radius so the
   header reads identically across every tool.
   --------------------------------------------------------------------- */
.nco .nco-eyebrow,
.tmwbf .tmwbf-eyebrow,
.wsc .wsc-eyebrow{
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:#9aa3ad !important;
}
.nco .nco-eyebrow b,
.tmwbf .tmwbf-eyebrow b,
.wsc .wsc-eyebrow b{ color:#aeb7c4 !important; font-weight:600 !important; }

.nco[data-theme="light"] .nco-eyebrow,
.tmwbf[data-theme="light"] .tmwbf-eyebrow,
.wsc[data-theme="light"] .wsc-eyebrow{ color:#5d6b7a !important; }
.nco[data-theme="light"] .nco-eyebrow b,
.tmwbf[data-theme="light"] .tmwbf-eyebrow b,
.wsc[data-theme="light"] .wsc-eyebrow b{ color:#46505c !important; }

.nco .nco-icon,
.tmwbf .tmwbf-icon,
.wsc .wsc-icon{ border-radius:8px !important; }

/* Full-width intro on the sibling tools too (they already stack, this is a
   guard so nothing can constrain the line). */
.nco .nco-sub,
.tmwbf .tmwbf-sub,
.wsc .wsc-sub{ width:100% !important; max-width:100% !important; }

/* ---------------------------------------------------------------------
   3) One unified Imperial / Metric toggle pill.
   The class .tmwft-seg is added to each tool's unit-group wrapper. The
   inner <button>s keep their original data-attributes and active classes
   (aria-pressed / is-active / is-on), so each tool's own JS still drives
   them. !important is deliberate here: this is a cross-tool override that
   must win regardless of stylesheet load order.
   --------------------------------------------------------------------- */
.tmwft-seg{
  display:inline-flex !important;
  align-items:stretch !important;
  height:38px !important;
  margin:0 2px 0 0 !important;
  padding:0 !important;
  border:1px solid var(--tmwft-seg-line, #39424e) !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:transparent !important;
}
.tmwft-seg > button{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:#9aa3ad !important;
  font:600 12px/1 "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace !important;
  letter-spacing:.05em !important;
  text-transform:none !important;
  padding:0 13px !important;
  min-width:0 !important;
  height:38px !important;
  line-height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.tmwft-seg > button + button{ border-left:1px solid var(--tmwft-seg-line, #39424e) !important; }
.tmwft-seg > button[aria-pressed="true"],
.tmwft-seg > button.is-active,
.tmwft-seg > button.is-on{
  background:#ff6a2c !important;
  color:#10131a !important;
}
/* Light-theme pill borders / idle text */
.tmw[data-theme="light"] .tmwft-seg,
.nco[data-theme="light"] .tmwft-seg,
.tmwbf[data-theme="light"] .tmwft-seg,
.wsc[data-theme="light"] .tmwft-seg{ --tmwft-seg-line:#cdd3dc; }
.tmw[data-theme="light"] .tmwft-seg > button,
.nco[data-theme="light"] .tmwft-seg > button,
.tmwbf[data-theme="light"] .tmwft-seg > button,
.wsc[data-theme="light"] .tmwft-seg > button{ color:#5d6b7a !important; }

/* ---------------------------------------------------------------------
   4) NestCut new header toggle: keep it the same height as the icons.
   --------------------------------------------------------------------- */
.nco .nco-units.tmwft-seg{ align-self:center; }

/* ---------------------------------------------------------------------
   5) PRINT. Two problems solved here, once, for every tool:
      (a) Print ONLY the tool, not the whole WordPress page. The :has()/:not()
          selector below hides every element that is neither the tool, an
          ancestor of it, nor inside it. That is what keeps a printout to one
          page instead of dragging in the site header, nav and footer.
      (b) Pure black on white, never reversed. Every descendant is forced to a
          transparent background + black text + gray borders, shadows/glows
          removed, so a dark-theme screen never prints white-on-black.
   Each tool's OWN stylesheet adds an @media print block on top of this that
   does the COMPACTING (hide non-critical sections, shrink fonts, two columns,
   add borders). This shared block is only the "tool-only + black/white" base.
   Requires a :has()-capable browser (Chrome 105+, Safari 15.4+, FF 121+).
   --------------------------------------------------------------------- */
@media print{
  @page{ size: letter portrait; margin: 0.4in; }
  /* Print only the tool: collapse every branch of the page that is neither the
     tool, an ancestor of it, nor inside it. One clean page, no WordPress chrome. */
  body *:not(:has(.tmw,.nco,.tmwbf,.wsc)):not(.tmw,.nco,.tmwbf,.wsc):not(.tmw *):not(.nco *):not(.tmwbf *):not(.wsc *){
    display:none !important;
  }
  /* Pure black on white. No reverse, no dark fills, no glow or shadow. */
  .tmw,.nco,.tmwbf,.wsc{
    background:#fff !important; color:#000 !important; border:0 !important; box-shadow:none !important;
    margin:0 !important; max-width:100% !important; width:auto !important;
  }
  .tmw *,.nco *,.tmwbf *,.wsc *{
    background:transparent !important; background-image:none !important; color:#000 !important;
    box-shadow:none !important; text-shadow:none !important; filter:none !important;
    border-color:#888 !important; outline-color:#888 !important;
  }
  .tmw *::before,.tmw *::after,.nco *::before,.nco *::after,
  .tmwbf *::before,.tmwbf *::after,.wsc *::before,.wsc *::after{ box-shadow:none !important; background:transparent !important; }
  .t-tools,.nco-tools,.tmwbf-tools,.wsc-tools{ display:none !important; }
  /* drop any panel whose only content is a long reference chart */
  .panel:has(#refTable),.tbl-wrap:has(#refTable){ display:none !important; }
}

/* ---------------------------------------------------------------------
   6) Mobile: let the header top bar wrap so the controls drop under the
   eyebrow on narrow phones instead of overflowing. Tool bodies are already
   responsive; this only touches the header rows.
   --------------------------------------------------------------------- */
@media (max-width:540px){
  .tmw .t-topbar,
  .nco .nco-topbar,
  .tmwbf .tmwbf-topbar,
  .wsc .wsc-topbar{ flex-wrap:wrap !important; }
  .tmw .t-tools,
  .nco .nco-tools,
  .tmwbf .tmwbf-tools,
  .wsc .wsc-tools{ flex-wrap:wrap !important; row-gap:8px !important; }
}