/* shared/app.css — shell grid, sidebar, fluid panel, formula, loading overlay */
/* Built exclusively on --et-* tokens from shared/enertherm.css.             */

/* ── Viewport reset ──────────────────────────────────────────────────────── */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* outer frame is fixed; panes scroll independently */
}

/* ── App shell — two-column grid ─────────────────────────────────────────── */

#tw-app {
  display: grid;
  grid-template-columns: 264px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

/* ── Top bar (spans both columns) ───────────────────────────────────────── */

.tw-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0 24px;
  background: var(--et-surface);
  border-bottom: 2px solid var(--et-rule);
  /* Override et-header's own bottom border/margin since the topbar carries it */
}

.tw-topbar .et-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

#tw-sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--et-surface);
  border-right: 1px solid var(--et-border);
  overflow-y: auto;
}

/* On desktop the <details> wrapper is transparent — summary is hidden,
   nav scrolls inside the sidebar column.                                     */
@media (min-width: 821px) {
  .tw-sidebar__details {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .tw-sidebar__summary {
    display: none;
  }

  .tw-sidebar__nav {
    flex: 1;
    padding: 8px 0 24px;
  }
}

/* Family group header — tighten enertherm.css defaults for sidebar */
#tw-sidebar .et-section-label {
  padding: 0 16px;
  margin: 20px 0 2px;
  /* the green accent bar via ::before is inherited from enertherm.css */
}

/* ── Collapsible family group ─────────────────────────────────────────────── */
.tw-sidebar__group {
  border: none;
}

/* The family header doubles as the disclosure <summary>. It keeps the
   et-section-label eyebrow look but becomes clickable, with a chevron that
   rotates on open. Scoped with #tw-sidebar so its padding/margin override the
   #tw-sidebar .et-section-label rule above (equal specificity, later wins).   */
#tw-sidebar .tw-sidebar__group-summary {
  padding: 7px 16px;
  margin: 12px 0 2px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.tw-sidebar__group-summary::-webkit-details-marker {
  display: none; /* hide native disclosure triangle (Safari/Chrome) */
}

.tw-sidebar__group-summary:hover {
  background: var(--et-slate-50);
  color: var(--et-ink);
}

.tw-sidebar__group-summary:focus-visible {
  outline: 2px solid var(--et-primary);
  outline-offset: -2px;
}

.tw-sidebar__group-summary svg {
  flex: none;
  opacity: 0.75;
}

.tw-sidebar__group-name {
  flex: 0 1 auto;
}

/* Chevron at the right edge — points right when collapsed, down when open. */
.tw-sidebar__group-summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.65;
}

.tw-sidebar__group[open] > .tw-sidebar__group-summary::after {
  transform: rotate(45deg);
}

/* Calculator row */
.tw-sidebar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 13px; /* 13px left: 3px reserved for active border */
  cursor: pointer;
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--et-body);
  border-left: 3px solid transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  user-select: none;
  line-height: 1.3;
}

/* Collapse the rows when their family group is closed. The author
   `display:flex` above otherwise overrides the browser's native hiding of a
   closed <details>'s children, leaving every row visible. This rule
   (higher specificity) restores proper collapse. */
.tw-sidebar__group:not([open]) > .tw-sidebar__row {
  display: none;
}

.tw-sidebar__row:hover {
  background: var(--et-slate-50);
  color: var(--et-ink);
}

.tw-sidebar__row:focus-visible {
  outline: 2px solid var(--et-primary);
  outline-offset: -2px;
}

.tw-sidebar__row svg {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.14s ease;
}

/* Active row — ENG-blue left border + subtle blue tint */
.tw-sidebar__row--active {
  border-left-color: var(--et-primary);
  background: color-mix(in srgb, var(--et-primary) 6%, transparent);
  color: var(--et-primary);
  font-weight: 600;
}

.tw-sidebar__row--active svg {
  opacity: 1;
  color: var(--et-primary);
}

/* ── Content pane ────────────────────────────────────────────────────────── */

#tw-content {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  padding: 28px 32px 56px;
  background: var(--et-slate-50);
}

/* ── Calculator two-column grid ──────────────────────────────────────────── */

.tw-calc {
  max-width: 1200px;
}

/* The grid lives on the inner wrapper so the title+blurb block above it
   spans the full width as a normal block element.                           */
.tw-calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
}

.tw-calc__col {
  min-width: 0;
}

.tw-calc__title-block {
  margin-bottom: 8px;
}

.tw-calc__btn {
  width: 100%;
  margin-top: 4px;
}

.tw-calc__results {
  margin-bottom: 0;
}

.tw-calc__worked {
  margin-top: 8px;
}

.tw-calc__image-wrap {
  margin-bottom: 16px;
}

.tw-calc__image {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--et-border);
}

/* ── Fluid panel ─────────────────────────────────────────────────────────── */

.tw-fluid__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--et-gap);
  margin-bottom: 12px;
}

.tw-fluid__override-row {
  margin: 8px 0 10px;
}

.tw-fluid__override-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--et-ink-soft);
  cursor: pointer;
}

.tw-fluid__override-cb {
  cursor: pointer;
  accent-color: var(--et-primary);
}

.tw-fluid__props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
}

.tw-fluid__prop-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 5px;
}

.tw-fluid__prop-sym {
  font-family: var(--et-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--et-ink-soft);
  text-align: right;
}

.tw-fluid__prop-unit {
  font-family: var(--et-mono);
  font-size: 0.68rem;
  color: var(--et-muted);
  white-space: nowrap;
}

.tw-fluid__prop-input {
  font-family: var(--et-mono) !important;
  font-size: 0.8rem !important;
  padding: 5px 7px !important;
}

.tw-fluid__props-grid--editable .tw-fluid__prop-input {
  background: var(--et-surface) !important;
  border-color: var(--et-border-strong) !important;
}

/* ── Formula block ───────────────────────────────────────────────────────── */

.tw-formula__item {
  margin-bottom: 18px;
}

.tw-formula__item:last-child {
  margin-bottom: 0;
}

.tw-formula__tex {
  overflow-x: auto;
  padding: 4px 0;
}

/* Nudge KaTeX display-mode font size */
.tw-formula__tex .katex-display {
  font-size: 1.08em;
  margin: 0.4em 0;
}

.tw-formula__desc {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--et-ink-soft);
  line-height: 1.45;
}

/* Fallback for unparseable TeX */
.tw-formula__raw {
  font-family: var(--et-mono);
  font-size: 0.83rem;
  color: var(--et-muted);
  font-style: italic;
}

/* ── Validation / error block ────────────────────────────────────────────── */
/* Mirrors EENG thermal-calculator's #thc-validationErrors */

.et-validation {
  padding: 11px 15px;
  border: 1px solid var(--et-danger);
  border-left: 4px solid var(--et-danger);
  background: color-mix(in srgb, var(--et-danger) 5%, transparent);
  color: var(--et-danger);
  font-size: 0.875rem;
  line-height: 1.5;
}

.et-validation strong {
  font-weight: 700;
}

/* ── Theory collapsible ──────────────────────────────────────────────────── */

.tw-theory {
  margin-top: 16px;
  border: 1px solid var(--et-border);
}

.tw-theory__summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  margin: 0;
}

.tw-theory__summary::-webkit-details-marker {
  display: none;
}

.tw-theory[open] .tw-theory__summary {
  border-bottom: 1px solid var(--et-border);
}

.tw-theory__body {
  padding: 16px 18px;
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */

.tw-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--et-slate-50) 90%, transparent);
  backdrop-filter: blur(2px);
  z-index: 9999;
}

.tw-overlay--hidden {
  display: none;
}

.tw-overlay__box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  font-family: var(--et-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--et-ink-soft);
}

/* ── Empty-state placeholder (no calculators registered yet) ─────────────── */

.tw-empty {
  padding: 48px 0 32px;
}

.tw-empty__headline {
  font-family: var(--et-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--et-ink);
  margin: 0 0 10px;
}

.tw-empty__sub {
  font-size: 0.9rem;
  color: var(--et-ink-soft);
  margin: 0;
  max-width: 52ch;
}

/* ── Responsive — single column at ≤820px ───────────────────────────────── */

@media (max-width: 820px) {
  html, body {
    overflow: auto;
  }

  #tw-app {
    display: block;
    height: auto;
    min-height: 100vh;
  }

  /* Sidebar becomes a collapsible top drawer */
  #tw-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--et-border);
    overflow: visible;
  }

  .tw-sidebar__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    font-family: var(--et-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--et-accent);
    background: var(--et-surface);
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--et-border);
  }

  .tw-sidebar__summary::-webkit-details-marker {
    display: none;
  }

  /* Accent bar matching et-section-label::before */
  .tw-sidebar__summary::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--et-accent);
    flex: none;
  }

  .tw-sidebar__nav {
    padding: 4px 0 12px;
    background: var(--et-surface);
  }

  #tw-content {
    padding: 20px 16px 40px;
  }

  /* Calculator: stack columns to one at narrow viewports */
  .tw-calc__grid {
    grid-template-columns: 1fr;
  }

  .tw-fluid__controls {
    grid-template-columns: 1fr;
  }

  .tw-fluid__props-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Embed mode (?family=...) — host page carries branding, theory, FAQs ── */
.tw-embed .tw-topbar,
.tw-embed .tw-theory {
  display: none;
}

/* ── Single-calc mode (?calc=...) — one calculator, no sidebar ── */
.tw-single #tw-sidebar {
  display: none;
}
.tw-single #tw-app {
  grid-template-columns: 1fr;
}
.tw-single #tw-content {
  grid-column: 1;
}