/* Shared toolkit chrome - nav bar and footer - used identically by
   floatcheck.html and leadtime.html so a third tool only needs this one file
   touched (plus its own nav/footer markup, which is deliberately copy-paste
   identical across pages, only the "active" tool differs).

   Consumes the --bg/--panel/--line/--text/--muted/--accent/... custom
   properties each page already declares on :root in its own inline <style> -
   this file doesn't redeclare them, so it has to be loaded on a page that
   already defines that palette (both tool pages do). Plain CSS file,
   loaded via a normal <link rel="stylesheet">, so it works over file://
   exactly like everything else in this app - no build step, no bundler. */

/* Nav visual language matches the homepage v2 blueprint-construction design
   exactly (Planning Toolkit Homepage v2.dc.html) - full-height flex bar,
   Barlow Condensed uppercase links with a bottom-border underline, edge-to-
   edge (no centered max-width). This is the ONE nav definition every page
   (including index.html) renders through, so a homepage nav change and a
   tool-page nav change can never drift apart again - see later.md. */
.toolkit-nav{
  border-bottom:1px solid #1E1E1E;
  background:#0A0A0A;
  position:relative;
  z-index:2; /* stays above floatcheck.html's fixed full-viewport watermark */
}
.toolkit-nav-inner{
  padding:0 28px;
  height:76px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.toolkit-nav-brand{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:19px;
  line-height:1.05;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.toolkit-nav-brand .tnb-accent{color:var(--accent);}
.toolkit-nav-brand:hover{opacity:0.85;}

.toolkit-nav-tools{
  display:flex;
  align-items:center;
  height:100%;
  gap:0;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.toolkit-nav-tool{
  display:flex;
  align-items:center;
  height:100%;
  padding:0 14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--body);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.toolkit-nav-tool:hover{color:var(--text);border-bottom-color:#3A3A3A;}
/* The current page's own tool renders as this same element but a <span>,
   not an <a> - not a link to itself, styled as the active peer. */
.toolkit-nav-tool.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
  cursor:default;
}
.toolkit-nav-tool.active:hover{color:var(--accent-hi);border-bottom-color:var(--accent);}

.toolkit-nav-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap;}
.toolkit-nav-login{
  font-family:Archivo,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--body);
  border:1px solid #2E2E2E;
  padding:11px 20px;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.toolkit-nav-login:hover{color:var(--text);border-color:#4A4A4A;}
.toolkit-nav-cta{
  font-family:Archivo,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px 22px;
  text-decoration:none;
  white-space:nowrap;
}
.toolkit-nav-cta:hover{background:var(--accent-hi);color:var(--accent-ink);}

/* Footer - identical across all three pages other than the links/notes each
   one includes inside it; the styling itself is fully shared. */
.site-footer{border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--muted2);margin-top:12px;}
.site-footer p{margin:0 0 8px;}
.site-footer p:last-child{margin-bottom:0;}
.site-footer a{color:var(--accent);text-decoration:underline;}

/* ================================================================
   Homepage (index.html only) - light, single-scroll layout. Replaces the
   earlier dark app-shell (top bar/sidebar/workspace/status bar) - that
   block and its --home-* tokens are gone, not just unused, since nothing
   else in the toolkit referenced them. floatcheck.html/leadtime.html stay
   dark and untouched; this page intentionally uses its own light palette
   (values below are copied from the approved reference design, not
   invented) rather than the --bg/--panel/... dark tokens those two pages
   declare - a deliberate light/dark split for this page only, not a step
   toward re-theming the tools (see later.md's light-vs-dark entry).

   Every element here is a real class with a real :hover rule - the
   reference this was pulled from used inline styles and a placeholder
   `style-hover` attribute, neither of which does anything in a real
   browser; converted to proper CSS throughout. */

:root{
  --home-bg:#F3F1EC; --home-alt-bg:#E7E3D9; --home-card-bg:#FBFAF6; --home-dropzone-bg:#EFECE4;
  --home-ink:#16150F; --home-body:#3C382D; --home-muted:#7C7565; --home-muted2:#8A8271; --home-muted3:#9A9382;
  --home-border:#DAD5C8; --home-border-strong:#D3CEC1; --home-dropzone-border:#A9A292; --home-list-ink:#2C2921;
  --home-accent:#C9862E; --home-accent-hover:#B0741F; --home-accent-ink:#FFFDF8;
}

.home{font-family:'Barlow',Helvetica,sans-serif;background:var(--home-bg);color:var(--home-ink);min-height:100vh;display:flex;flex-direction:column;}

.home-header{background:var(--home-ink);color:#EDEAE2;padding:0 32px;height:46px;display:flex;align-items:center;justify-content:space-between;}
.home-header-brand{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;letter-spacing:0.10em;text-decoration:none;color:#EDEAE2;}
.home-header-brand:hover{color:#EDEAE2;text-decoration:none;opacity:0.85;}
.home-signin{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:#B8B3A6;cursor:default;}
.home-signin:hover{color:#EDEAE2;}

.home-header-left{display:flex;align-items:center;gap:22px;}
.home-header-link{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:#B8B3A6;text-decoration:none;}
.home-header-link:hover{color:#EDEAE2;text-decoration:none;}

.home-hero{padding:52px 32px 40px;}
.home-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:62px;line-height:0.94;letter-spacing:0.005em;margin:0 0 14px;}
.home-hero p{font-size:14px;line-height:1.5;margin:0;max-width:640px;color:var(--home-body);}
.home-hero .home-dropzone-actions{margin-top:24px;}

.home-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;color:var(--home-muted);margin-bottom:18px;}
.home-dropzone-actions{display:flex;gap:10px;flex-wrap:wrap;}
.home-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;border-radius:2px;padding:12px 26px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s ease, border-color .15s ease, color .15s ease;}
.home-btn:hover{text-decoration:none;}
.home-btn-primary{background:var(--home-accent);color:var(--home-accent-ink);border:1px solid var(--home-accent-hover);}
.home-btn-primary:hover{background:var(--home-accent-hover);color:var(--home-accent-ink);}
.home-btn-outline{background:transparent;color:var(--home-ink);border:1px solid var(--home-dropzone-border);}
.home-btn-outline:hover{border-color:var(--home-ink);color:var(--home-ink);}

.home-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;}
.home-tool-card{background:var(--home-card-bg);border:1px solid var(--home-border);border-radius:2px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:20px;transition:border-color .15s ease;}
.home-tool-card:hover{border-color:var(--home-ink);}
.home-tool-card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;}
.home-tool-card-id{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--home-muted2);}
.home-tool-card-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;letter-spacing:0.05em;}
.home-tool-card-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;color:var(--home-muted3);margin-left:auto;}
.home-tool-card-desc{font-size:13px;line-height:1.55;margin:0;max-width:420px;color:var(--home-body);}
.home-tool-card-modules{border-top:1px solid #E3DED1;padding-top:16px;}
.home-tool-card-modules-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;color:var(--home-muted3);margin-bottom:10px;}
.home-tool-card-modules ul{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.9;margin:0;padding:0;list-style:none;color:var(--home-list-ink);}
.home-tool-card-run{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;margin-top:auto;text-decoration:none;color:var(--home-ink);}
.home-tool-card-run:hover{text-decoration:underline;}

.home-note{background:var(--home-alt-bg);border-top:1px solid var(--home-border-strong);padding:32px 32px 40px;flex:1;}
.home-note-grid{display:grid;grid-template-columns:158px minmax(0,1fr);row-gap:18px;column-gap:28px;max-width:860px;}
.home-note-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--home-ink);padding-top:2px;}
.home-note-grid p{font-size:13px;line-height:1.6;margin:0;color:var(--home-body);}

/* Questions section - replaces the old STEP 01/STEP 02 split. Each row is a
   question a planner actually asks, paired with the engine that answers it
   and a real link through to that engine's page - the surface (questions)
   and the underlying engines are shown as one connected list, not two
   separate structures a visitor has to mentally reconcile themselves. */
.home-questions{padding:64px 32px 68px;}
.home-questions-grid{display:grid;gap:0;max-width:1040px;}
.home-questions-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--home-border);}
.home-questions-row:first-child{border-top:1px solid var(--home-border);}
.home-questions-text{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:0.005em;color:var(--home-ink);}
.home-questions-engine{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--home-muted2);}
.home-questions-link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;color:var(--home-ink);text-align:right;}
.home-questions-link:hover{text-decoration:underline;}
@media (max-width:700px){
  .home-questions-row{grid-template-columns:1fr;gap:6px;padding:18px 0;}
  .home-questions-link{text-align:left;}
}

/* Engines section - reuses the tool-card component (same visual language as
   the questions-to-tools link above), describing what each engine actually
   computes rather than "click here to run it". */
.home-engines{background:var(--home-alt-bg);border-top:1px solid var(--home-border-strong);border-bottom:1px solid var(--home-border-strong);padding:56px 32px 60px;}
.home-engines-note{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.06em;color:var(--home-muted2);margin:28px 0 0;max-width:70ch;}

/* Sample output card - a real preview of both tools' actual output on the
   bundled demo project (not a live-generated report - see the eyebrow note
   in the markup), styled as a compact drawing-adjacent status sheet rather
   than a dashboard widget. */
.home-output{background:var(--home-alt-bg);border-top:1px solid var(--home-border-strong);padding:64px 32px 72px;}
.home-output h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px;line-height:1.1;margin:16px 0 0;max-width:22em;color:var(--home-ink);}
.home-output-note{font-size:13px;line-height:1.5;color:var(--home-muted2);margin:12px 0 0;max-width:60ch;}
.home-output-card{margin-top:32px;max-width:920px;background:var(--home-card-bg);border:1px solid var(--home-border);border-radius:2px;}
.home-output-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--home-border);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--home-muted2);flex-wrap:wrap;}
.home-output-body{padding:26px 22px 30px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.8;}
.home-output-title{color:var(--home-ink);font-weight:600;letter-spacing:0.02em;font-size:14px;}
.home-output-sub{color:var(--home-muted2);margin-top:3px;}
.home-output-rule{height:1px;background:var(--home-border);margin:18px 0;}
.home-output-rows{display:grid;gap:8px;}
.home-output-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;}
.home-output-tag{font-size:10.5px;letter-spacing:0.1em;}
.home-output-tag.ok{color:#2F6236;}
.home-output-tag.warn{color:#6B5200;}
.home-output-tag.crit{color:#A32A1C;}
.home-output-tag.na{color:var(--home-muted2);}
.home-output-summary{margin-top:20px;padding-top:16px;border-top:1px solid var(--home-border);color:var(--home-body);max-width:68ch;}

.home-footer{background:var(--home-ink);color:var(--home-muted3);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;padding:0 32px;height:30px;display:flex;align-items:center;justify-content:space-between;}
.home-footer-right{display:flex;gap:26px;}