/* ============================================================
   Lockwood & Wallace — Tools Repository shared stylesheet
   Light theme matching lockwoodandwallace.uk.
   Served from the same /tools/ folder as each tool; no backend.
   ============================================================ */
:root{
  --bg:#FFFFFF; --bg-2:#F6F8FA; --surface:#FFFFFF; --surface-2:#F1F5F8;
  --line:#DCE3EA; --line-soft:#EBF0F4;
  --fg:#0E1620; --fg-dim:#4C5A67; --fg-mute:#7A8794;
  --blue:#1F5FD0; --blue-soft:rgba(31,95,208,.07);
  --green:#0E8C64; --green-soft:rgba(14,140,100,.08);
  --ok:#0E7D59; --good:#4F8419; --warn:#9A7310; --poor:#B85A17; --bad:#A8362B;
  --maxw:1280px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.tnum{font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ---- tool app bar ---- */
.app-bar{position:sticky;top:0;z-index:50;background:var(--bg-2);border-bottom:1px solid var(--line)}
.app-bar-in{display:flex;align-items:center;gap:14px;padding-block:11px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--fg-dim);
  padding:6px 10px;border:1px solid var(--line);border-radius:3px;background:var(--surface);
  cursor:pointer;text-decoration:none;flex-shrink:0}
.back:hover{color:var(--fg);border-color:var(--fg-mute)}
.app-crumb{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.app-title{font-size:14px;font-weight:600;line-height:1.25;min-width:0}
.app-main{padding-block:22px 54px;display:flex;flex-direction:column;gap:18px}

.chip{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;border:1px solid var(--line);color:var(--fg-mute);
  background:var(--bg-2);white-space:nowrap;flex-shrink:0}
.chip-live{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent);background:var(--green-soft)}
.chip-blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 34%,transparent);background:var(--blue-soft)}

/* ---- cards ---- */
.card{border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.card-hd{padding:13px 17px;border-bottom:1px solid var(--line);background:var(--bg-2);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.card-hd h2,.card-hd h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.card-hd .hint{font-size:12.5px;color:var(--fg-dim);font-weight:300}
.card-bd{padding:17px}

.grid2{display:grid;gap:18px;grid-template-columns:360px minmax(0,1fr)}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
.grid-auto{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---- form ---- */
.stack{display:flex;flex-direction:column;gap:13px}
.lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:6px}
.lbl .unit{float:right;text-transform:none;letter-spacing:0;opacity:.75}
.inp,select.inp,textarea.inp{width:100%;border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:9px 11px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-variant-numeric:tabular-nums}
textarea.inp{font-size:12px;line-height:1.6;resize:vertical;min-height:90px}
.inp:focus{border-color:var(--blue);outline:none}
.inp.bad{border-color:var(--bad)}
input[type=number].inp::-webkit-outer-spin-button,
input[type=number].inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number].inp{-moz-appearance:textfield}
input[type=range]{width:100%;accent-color:var(--blue)}
.row{display:flex;gap:11px;flex-wrap:wrap}
.row>*{flex:1;min-width:120px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:3px;
  font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:background .18s,border-color .18s,color .18s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:color-mix(in srgb,var(--blue) 86%,#000)}
.btn-sm{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:8px 12px;
  font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn-sm:hover{border-color:var(--blue);color:var(--blue)}

/* ---- readouts ---- */
.kpis{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}
.kpi{border:1px solid var(--line);border-radius:4px;background:var(--bg-2);padding:12px 14px}
.kpi dt{margin:0;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);line-height:1.4}
.kpi dd{margin:6px 0 0;font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;
  line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi dd .sfx{font-size:11px;font-weight:500;color:var(--fg-mute);margin-left:3px}
.kpi.em{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 28%,var(--line))}

.verdict{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;background:var(--bg-2)}
.verdict .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.verdict strong{font-size:14px}
.verdict span{font-size:12.5px;color:var(--fg-dim)}

.note{margin:0;font-size:12.5px;color:var(--fg-dim);line-height:1.68;font-weight:300}
.note-mono{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--fg-dim);
  line-height:1.7;overflow-wrap:anywhere}
.alert{border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  background:color-mix(in srgb,var(--bad) 6%,transparent);border-radius:3px;
  padding:10px 12px;font-size:12.5px;color:var(--bad);line-height:1.6}
.caution{border:1px solid var(--line);border-left:2px solid var(--poor);border-radius:3px;
  background:var(--bg-2);padding:14px 16px}
.caution h4{margin:0 0 6px;font-size:12px;font-weight:600}
.caution p{margin:0;font-size:12px;color:var(--fg-dim);line-height:1.66;font-weight:300}
.caution p+p{margin-top:7px}

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto;max-height:460px;overflow-y:auto;border-top:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{position:sticky;top:0;background:var(--bg-2);text-align:left;padding:9px 14px;font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px}
tbody td{padding:8px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tbody tr:hover td{background:var(--bg-2)}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ---- plots ---- */
.plot{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-dim)}
.legend i{width:11px;height:3px;border-radius:2px;display:block}
canvas{max-width:100%;display:block}

.foot{font-size:11px;color:var(--fg-mute);margin:0}
details.spec{border:1px solid var(--line);border-radius:4px;background:var(--bg-2);padding:0}
details.spec>summary{cursor:pointer;padding:11px 15px;font-size:12px;font-weight:600;
  letter-spacing:.04em;list-style:none}
details.spec>summary::-webkit-details-marker{display:none}
details.spec>summary::before{content:"▸ ";color:var(--blue)}
details.spec[open]>summary::before{content:"▾ "}
details.spec .inner{padding:0 15px 14px;font-size:12px;color:var(--fg-dim);line-height:1.7}

/* ============================================================
   THEME ALIGNMENT — Lockwood & Wallace house system
   Appended so the repository reads as the same site as the
   homepage and O & M Invasion: paper ground, 56px engineering
   grid, teal accent, 1.5px rules and a lift on hover.
   Overrides only; the structural rules above are untouched.
   ============================================================ */
:root{
  --bg:#F4F5F6; --bg-2:#EFF1F2; --surface:#FFFFFF; --surface-2:#F4F5F6;
  --line:#D8DCDF; --line-soft:#E4E7EA;
  --fg:#14181C; --fg-dim:#5B6570; --fg-mute:#8B95A1;
  --blue:#2A5C8A; --blue-soft:rgba(42,92,138,.07);
  --green:#3D7A4C; --green-soft:rgba(61,122,76,.08);
  --teal:#0E7A72; --teal-deep:#0A5F59; --teal-tint:#E3F2EF;
  --ok:#3D7A4C; --good:#3D7A4C; --warn:#A6702A; --poor:#A6702A; --bad:#A8432A;
}
body{background:var(--bg);font-size:15px;}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;}

/* shared background layers, injected by shared.js */
.lw-grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at center, black, transparent 75%);
  mask-image:radial-gradient(ellipse at center, black, transparent 75%);
}
#lw-constellation{position:fixed;inset:0;z-index:0;pointer-events:none;}
.app-bar,.hdr,.app-main,section,footer,.ftr,.band{position:relative;z-index:1;}

/* translucent sticky bars, as on the homepage */
.app-bar,.hdr{
  background:rgba(244,245,246,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

/* mono micro-labels pick up the teal accent */
.app-crumb,.sec-num,.track-code,.card-hd .hint{color:var(--teal);}
.lbl,.kpi dt{color:var(--fg-mute);}

/* surfaces: 1.5px rule, lift on hover */
.card,details.spec,.caution,.tbl-wrap,.tool,.track-tab{
  border-width:1.5px;
}
.card{background:var(--surface);transition:border-color .3s cubic-bezier(.16,1,.3,1),
  transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);}
.tool{
  background:var(--surface);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),
    transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.tool:hover{
  border-color:var(--teal);transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(14,122,114,.12);
}
.kpi{background:var(--surface);border-width:1.5px;}
.inp,select.inp,textarea.inp{background:var(--bg-2);border-width:1.5px;}
.inp:focus{border-color:var(--teal);background:var(--surface);}

/* buttons in the homepage idiom */
.btn{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  border-radius:3px;transition:all .3s cubic-bezier(.16,1,.3,1);
}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-deep);border-color:var(--teal-deep);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(14,122,114,.2);}
.btn-sm{border-width:1.5px;}
.btn-sm:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint);}
.back{border-width:1.5px;}
.back:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint);}
.openbtn{color:var(--teal);}
.openbtn:hover{color:var(--teal-deep);}

/* chips and tags */
.chip-live{color:var(--green);border-color:rgba(61,122,76,.35);background:rgba(61,122,76,.07);}
.chip-blue{color:var(--teal-deep);border-color:rgba(14,122,114,.28);background:var(--teal-tint);}
.tag{color:var(--fg-dim);}
tbody tr:hover td{background:var(--teal-tint);}

/* Grid/flex children default to min-width:auto, so a wide child could push
   the tool pages ~10px past the viewport on phones. Let the containers
   shrink and keep any real overflow inside the scrollable table wrapper. */
.grid2>*,.grid-auto>*,.kpis>*,.app-main>*,.card-bd>*,.stack>*{min-width:0;}
@media (max-width:760px){
  .grid2{grid-template-columns:minmax(0,1fr);}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:9px;}
  .row>*{min-width:104px;}
}
@media (max-width:760px){
  /* a long nowrap chip label was the last 7px of page scroll */
  .chip{white-space:normal;}
  .card-hd{flex-wrap:wrap;row-gap:6px;}
}
@media (max-width:760px){
  /* Several tool pages hardcode two-track grids inline (e.g.
     "200px minmax(0,1fr)", "minmax(0,1fr) 310px"). Those tracks cannot
     collapse, so on a phone the content column was crushed to ~94px and
     its contents spilled past the viewport. Stack them instead. */
  .card-bd[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
}