/* =============================================================================
   Wallcalc: brand shell
   -----------------------------------------------------------------------------
   Loaded after app.css. It re-points the shell variables app.css already uses at
   the shared tokens in /tools/brand.css, then restyles the handful of pieces
   whose look is hardcoded rather than tokenised.

   Nothing here touches the physics. The material swatches, the temperature and
   dew point lines, the heat map inks and the pass/caution/fail hues are left
   exactly as app.css defines them, because those colors carry meaning. The only
   verdict colors that move are the ones brand.css also defines, and they were
   chosen to match what app.css already used.

   Keeping this as an overlay rather than editing app.css means the tool still
   works with the brand removed, and a future version of Wallcalc can be dropped
   in without the restyle having to be reapplied by hand.
   ========================================================================== */

:root {
  --bg:        var(--jl-bg);
  --panel:     var(--jl-panel);
  --panel-2:   var(--jl-panel-2);
  --ink:       var(--jl-ink);
  --muted:     var(--jl-muted);
  --faint:     var(--jl-faint);
  --line:      var(--jl-line);
  --line-2:    var(--jl-line-2);
  --accent:    var(--jl-accent);
  --accent-ink:var(--jl-accent-ink);
  --accent-soft: var(--jl-accent-soft);
  --focus:     var(--jl-focus);

  --ok:        var(--jl-ok);
  --warn:      var(--jl-warn);
  --danger:    var(--jl-danger);

  --radius:    var(--jl-radius);
  --shadow:    none;
  --font:      var(--jl-font);
  --mono:      var(--jl-mono);
}

/* app.css defines its dark values at this same weight, so these have to match it
   selector for selector to win on order alone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--jl-bg); --panel: var(--jl-panel); --panel-2: var(--jl-panel-2);
    --ink: var(--jl-ink); --muted: var(--jl-muted); --faint: var(--jl-faint);
    --line: var(--jl-line); --line-2: var(--jl-line-2);
    --accent: var(--jl-accent); --accent-ink: var(--jl-accent-ink);
    --accent-soft: var(--jl-accent-soft); --focus: var(--jl-focus);
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: var(--jl-bg); --panel: var(--jl-panel); --panel-2: var(--jl-panel-2);
  --ink: var(--jl-ink); --muted: var(--jl-muted); --faint: var(--jl-faint);
  --line: var(--jl-line); --line-2: var(--jl-line-2);
  --accent: var(--jl-accent); --accent-ink: var(--jl-accent-ink);
  --accent-soft: var(--jl-accent-soft); --focus: var(--jl-focus);
  --shadow: none;
}

/* --- the bar across the top ---------------------------------------------- */
/* app.css gives the topbar the panel color. The family signature is the navy. */
.topbar {
  background: var(--jl-navy);
  color: var(--jl-navy-ink);
  border-bottom: 0;
}
.brand {
  font-family: var(--jl-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brand svg { fill: var(--jl-navy-faint); }
/* The subtitle beside the wordmark is its own element. It used to be app.css's
   screen-reader text, un-hidden here to show something next to the name, which
   worked until that text grew into a full sentence for search engines and
   rendered 620px of it across the header. The two jobs are separate now: .sr
   stays hidden and says the long thing, .brand-sub is short and visible. */
.brand .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.brand-sub {
  font-family: var(--jl-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--jl-navy-faint);
  white-space: nowrap;
}

/* Controls sitting on the navy have to invert to stay legible. */
.topbar .chip-btn,
.topbar .btn,
.topbar .icon-btn {
  background: transparent;
  color: var(--jl-navy-ink);
  border-color: rgba(255, 255, 255, .35);
}
.topbar .chip-btn:hover,
.topbar .btn:hover,
.topbar .icon-btn:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
.topbar input[type="search"] {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: var(--jl-navy-ink);
  border-radius: var(--jl-radius);
}
.topbar input[type="search"]::placeholder { color: rgba(255, 255, 255, .6); }
.topbar .zone-badge {
  border-radius: var(--jl-radius);
  background: rgba(255, 255, 255, .14);
  color: var(--jl-navy-ink);
  font-family: var(--jl-mono);
  font-weight: 500;
}

/* --- corners -------------------------------------------------------------- */
/* app.css hardcodes 8, 9, 14 and 999px in places. Square them all up. */
.stage, .side, .guidance, .sim { border-radius: var(--jl-radius); box-shadow: none; }
.chip-btn, .btn, .seg, .seg button, .icon-btn, .suggest, .suggest li,
input[type="search"], select, .zone-badge, .tile {
  border-radius: var(--jl-radius);
}

/* --- segmented control ----------------------------------------------------- */
/* Was a pill with an inner raised thumb. Now a bordered strip with a solid
   selection, which is the same control the rest of the family uses. */
.seg { padding: 0; background: var(--panel); border: var(--jl-rule); overflow: hidden; }
.seg button { border-right: var(--jl-rule); }
.seg button:last-child { border-right: 0; }
.seg button[aria-checked="true"] {
  background: var(--jl-navy);
  color: var(--jl-navy-ink);
  box-shadow: none;
}

/* --- numbers --------------------------------------------------------------- */
/* Small stats and sublines take the mono face. Headline values take the
   condensed face with tabular figures instead: several of these tiles report a
   phrase rather than a number ("Dries by March", "Stable"), and mono is both
   too wide for them and wrong for prose. Measured on the default wall, mono at
   this size pushed "0.11 oz/ft2 month" 76px past its tile and clipped
   "Dries by March", which previously fit. */
.tile .s { font-family: var(--jl-mono); }
.tile .v {
  font-family: var(--jl-cond);
  font-weight: 600;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
}
.tile .k {
  font-family: var(--jl-cond);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tile {
  background: var(--panel);
  border: var(--jl-rule);
  border-left: 3px solid var(--jl-navy);
}
.tile.good { border-left-color: var(--jl-ok); }
.tile.bad  { border-left-color: var(--jl-danger); background: var(--panel); }

/* --- focus ----------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--jl-focus); outline-offset: 1px; }

/* --- the written section under the tool ------------------------------------ */
/* Readable prose rather than another panel: a measure of about 70 characters,
   and the same type roles as the rest of the family. */
.about {
  max-width: 760px;
  margin: var(--jl-6) auto;
  padding: 0 var(--jl-4) var(--jl-6);
  font-family: var(--jl-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--jl-ink);
}
.about h2, .about h3 {
  font-family: var(--jl-cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jl-muted);
  font-weight: 600;
}
.about h2 {
  font-size: 13px;
  margin: 0 0 var(--jl-3);
  padding-bottom: var(--jl-1);
  border-bottom: var(--jl-rule);
}
.about h3 { font-size: 11px; margin: var(--jl-5) 0 var(--jl-2); }
.about h4 {
  font-family: var(--jl-font);
  font-size: 14px;
  font-weight: 600;
  margin: var(--jl-4) 0 var(--jl-1);
  color: var(--jl-ink);
  text-transform: none;
  letter-spacing: 0;
}
.about p { margin: 0 0 var(--jl-2); }
.about a { color: var(--jl-accent); }

.about-who { margin: 0; }
.about-who dt {
  font-weight: 600;
  margin-top: var(--jl-3);
  color: var(--jl-navy);
}
:root[data-theme="dark"] .about-who dt { color: var(--jl-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-who dt { color: var(--jl-accent); }
}
.about-who dd { margin: 2px 0 0; color: var(--jl-muted); }

.about-list { margin: 0; padding-left: 1.1em; }
.about-list li { margin: var(--jl-1) 0; color: var(--jl-muted); }
.about-list b { color: var(--jl-ink); font-weight: 600; }

.faq p { color: var(--jl-muted); }

.about-foot {
  margin-top: var(--jl-5);
  padding-top: var(--jl-3);
  border-top: var(--jl-rule);
  font-size: 13px;
  color: var(--jl-muted);
}

/* The written section is for reading and for search engines, not for a printed
   wall report, which carries its own summary. */
@media print { .about { display: none; } }

/* --- the top bar as it narrows ---------------------------------------- */
/*
  No width is written down here, because there is no width that is right.

  A fixed breakpoint left a band that still wrapped, for three reasons at once.
  A media query counts the scrollbar in the viewport width and the layout does
  not, which is a 15px disagreement on its own. The wall-type chip reads either
  "Above-grade wall" or "Basement / foundation", and the indoor chip grows with
  the humidity model, so the bar's own appetite changes while you use it. And
  the location search carries a zone badge whose text depends on where you are.

  So the bar asks the browser instead: lay the full row out, see whether it
  overflows, and fold if it does. wireBar in js/ui/app.js owns that and sets
  .compact. Without script the bar wraps as it did before, which is the old
  behavior rather than a broken one.
*/
.topbar { flex-wrap: nowrap; }
.bar-rest { display: contents; }
#menu-btn { display: none; }

.topbar.compact #menu-btn { display: inline-grid; margin-left: auto; flex: none; }
.topbar.compact #menu-btn svg { stroke: currentColor; }

.topbar.compact .bar-rest {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  z-index: 40;
  flex-direction: column;
  align-items: stretch;
  gap: var(--jl-2);
  min-width: 232px;
  max-width: calc(100vw - 24px);
  padding: var(--jl-3);
  background: var(--jl-panel);
  border: var(--jl-rule);
  border-top: 3px solid var(--jl-navy);
  border-radius: var(--jl-radius);
  box-shadow: 0 10px 26px rgba(19, 26, 36, .22);
}
.topbar.compact.menu-open .bar-rest { display: flex; }

/* The spacer only has a job when the bar is one row. */
.topbar.compact .bar-rest .spacer { display: none; }

/* Stack the controls and let them fill the panel. */
.topbar.compact .bar-rest .tools { flex-wrap: wrap; gap: var(--jl-2); }
.topbar.compact .bar-rest .tools .chip-btn { flex: 1 1 100%; text-align: left; }
.topbar.compact .bar-rest .indoor { width: 100%; }
.topbar.compact .bar-rest .indoor .chip-btn { width: 100%; text-align: left; }
.topbar.compact .bar-rest .seg { width: 100%; }
.topbar.compact .bar-rest .seg button { flex: 1; }
/* Undo and redo are a pair and read better side by side than stacked. */
.topbar.compact .bar-rest .tools .icon-btn { flex: 0 0 auto; }

/* Inside the panel a popover has room to sit under its own button rather than
   being anchored to a bar that is no longer there. */
.topbar.compact .bar-rest .popover { position: static; width: 100%; margin-top: var(--jl-1); }

/* Put the controls back on a light background. The rule that inverts them is
   scoped to .topbar because that is the navy bar, and the panel is inside the
   bar too, so without this every button in the menu is white on white and the
   panel looks empty. */
.topbar.compact .bar-rest .chip-btn,
.topbar.compact .bar-rest .btn,
.topbar.compact .bar-rest .icon-btn {
  background: var(--jl-panel);
  color: var(--jl-ink);
  border-color: var(--jl-line);
}
.topbar.compact .bar-rest .chip-btn:hover,
.topbar.compact .bar-rest .btn:hover,
.topbar.compact .bar-rest .icon-btn:hover {
  border-color: var(--jl-faint);
  background: var(--jl-panel-2);
}
.topbar.compact .bar-rest .seg button { color: var(--jl-muted); }
.topbar.compact .bar-rest .seg button[aria-checked="true"] { color: var(--jl-navy-ink); }


@media (max-width: 640px) {
  .brand-sub { display: none; }   /* the wordmark alone is enough on a phone */
}

/* --- light surfaces inside the navy bar -------------------------------- */
/*
  .topbar paints itself navy and sets white text, and everything inside it
  inherits that. Most of what is in the bar sits on the navy and wants it. The
  things that paint their own light surface do not: the location suggestions and
  the condition popovers were white on white, a contrast ratio of 1.0, which is
  to say invisible until you select the row.

  The bar's white belongs to the navy. Anything drawing its own surface inside
  the bar states its own ink here, rather than each one being patched when
  somebody notices it.
*/
.topbar .suggest,
.topbar .popover {
  color: var(--jl-ink);
}

.topbar .suggest li { color: var(--jl-ink); }
.topbar .suggest li span { color: var(--jl-muted); }
.topbar .suggest li[aria-selected="true"],
.topbar .suggest li:hover {
  background: var(--jl-accent-soft);
  color: var(--jl-ink);
}

.topbar .popover label,
.topbar .popover output { color: var(--jl-ink); }
.topbar .popover .pop-lab,
.topbar .popover .hint { color: var(--jl-muted); }
.topbar .popover select {
  color: var(--jl-ink);
  background: var(--jl-panel);
  border-color: var(--jl-line);
}
.topbar .popover .seg { border-color: var(--jl-line); }
.topbar .popover .seg button { color: var(--jl-muted); background: var(--jl-panel); }
.topbar .popover .seg button[aria-checked="true"] {
  background: var(--jl-navy);
  color: var(--jl-navy-ink);
}