/* css/layout.css - Universal UI Components */

.container { max-width: 1060px; margin: 0 auto; padding: 0 1rem; }
.main-content { padding: 1.25rem 0 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* ── Header ── */
.header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); transition: background var(--transition); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0; gap:0.75rem; flex-wrap:wrap }
.header-brand { display:flex; align-items:center; gap:0.6rem; }
/* Route home. ../index.html is the only href that works BOTH online and off:
   an absolute URL dies with no network, and a leading slash resolves to the
   drive root on a USB stick, not the site root.
   All four link states are pinned so the brand never picks up the global
   a:hover underline or colour shift from base.css — same treatment, and the
   same reason, as .portal-brand in portal.css. The hamburger stays OUTSIDE
   this link: a <button> nested in an <a> is invalid and breaks keyboard use. */
.header-brand-link,
.header-brand-link:hover,
.header-brand-link:focus,
.header-brand-link:active {
  display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:inherit;
}

/* ── Brand lockup ──────────────────────────────────────────────────────
   The squircle takes its size from --brand-h (base.css), the computed height
   of the three-line stack. Width and height are BOTH set explicitly rather
   than derived from aspect-ratio: in a flex row the main axis resolves before
   stretch resolves the cross axis, so an auto width collapses to the glyph's
   content box and the square renders as a lozenge. Explicit is correct
   everywhere and needs no JS measurement.
   ───────────────────────────────────────────────────────────────── */
.btn-hamburger { border:none; background:none; padding:0; margin-right:12px; cursor:pointer; color:var(--text-muted); display:inline-flex; align-items:center; }
.btn-hamburger:hover { color:var(--primary) }
.btn-hamburger svg { width:1.35rem; height:1.35rem }

.logo-icon { width:var(--brand-h); height:var(--brand-h); flex:0 0 auto; background:var(--primary); border-radius:28%; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden; }
.logo-icon > svg { width:55%; height:55% }

/* Unlisted pages (worksheet, grader, ph-square, math-display-test) fall back
   to the full brand mark: it fills the box on the constant brand near-black
   instead of sitting at 55% on the scheme colour. */
.logo-icon-mark { background:#1A1F2B }
.logo-icon-mark > svg { position:absolute; inset:0; width:100%; height:100% }
.logo-icon-mark .ec-brand-e { position:relative; z-index:2; font-weight:700; line-height:1; color:#fff; font-size:calc(var(--brand-h) * 0.40); text-shadow:0 1px 5px rgba(12,16,24,0.8); }

/* align-items:flex-start keeps .brand-lockup shrink-to-fit, so a long app name
   can overrun the spectrum bar without stretching it. */
.logo-text { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.brand-lockup { display:flex; flex-direction:column; align-items:stretch; }
.logo-title { font-size:var(--wordmark-size); line-height:1.05; letter-spacing:-0.03em; color:var(--text); white-space:nowrap; }
.logo-title .wm-light { font-weight:400 }
.logo-title .wm-bold { font-weight:700 }

/* The bar stretches to the lockup's width, which is the wordmark's width —
   no hard-coded length, so it stays synced at every font scale and in the
   fallback font. */
/* font-size is set so --bar-inset's em resolves against the WORDMARK, not
   the inherited size. The inset makes the bar stop before the 't'. */
.ec-spectrum { display:flex; margin-top:5px; gap:var(--bar); height:var(--bar); font-size:var(--wordmark-size); margin-right:var(--bar-inset); }
.ec-spectrum span { flex:1; border-radius:2px }

/* Stays a single element with plain text content: 14 app files write to it
   via querySelector('.logo-subtitle').textContent to swap in mode names. */
/* Title case now, matching the landing pages. The casing lives in the strings
   themselves (config.appName and the per-mode .short values), so this rule
   deliberately does NOT transform — turning uppercase back on here would
   re-break 'pH', which is why ph.css and bronsted.css used to need
   'text-transform: none !important'. Those overrides are now redundant. */
.logo-subtitle { font-size:0.72rem; font-weight:500; color:var(--text-muted); letter-spacing:0.02em; margin-top:4px; line-height:1.25; }

.header-actions { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; margin-left:auto }
/* Scoped to the header so the rest of the suite's .btn-icon buttons are
   untouched. The button boxes already scale (rem padding + rem font-size);
   only the glyphs inside them were pinned to 16px. 1.1em of a 0.8rem
   button is 15.8px at 100%, so this preserves today's look and scales. */
.header-actions svg { width:1.1em; height:1.1em }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; transition: all var(--transition); font-family: var(--font); }
.btn-icon:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary) }
.btn-icon.active { color: var(--primary); background: var(--primary-light); border-color: var(--primary) }
.btn-random { background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; transition: all var(--transition); font-family: var(--font); }
.btn-random:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Buttons & Cards ── */
.card { background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:28px; transition:all var(--transition) }
.btn-link { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:0.84rem; font-weight:600; color:var(--primary); transition:color var(--transition) }
.btn-link:hover { color:var(--primary-hover) }

/* ── Modals & App Drawer ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 100; animation: fadeIn .2s ease-out; cursor: pointer; }
.modal-wrapper { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:101; pointer-events:none; padding:16px }
.modal-box { position:relative; z-index:105; background:var(--surface); width:100%; max-width:620px; max-height:88vh; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); pointer-events:auto; display:flex; flex-direction:column; border:1px solid var(--border); animation:scaleIn .25s ease-out; overflow:hidden }
.modal-header { padding:18px 24px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between }
.modal-header h2 { font-size:1.12rem; font-weight:700; letter-spacing:-0.01em }
.btn-close { width:34px; height:34px; border-radius:999px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-light); transition:all var(--transition) }
.btn-close:hover { background:var(--bg); color:var(--text) }
.modal-body { padding:24px; overflow-y:auto; flex:1 }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border-light); display:flex; justify-content:space-between; align-items: center; background:var(--bg) }
.btn-modal-close { padding:8px 20px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all var(--transition) }
.btn-modal-close:hover { background:var(--primary-hover) }

/* Privacy Modal Specifics */
.privacy-item { display:flex; gap:10px; margin-bottom:14px }
.privacy-item svg { color:var(--secondary); flex-shrink:0; margin-top:3px }
.privacy-item strong { display:block; font-size:0.88rem; color:var(--text) }
.privacy-item span { font-size:0.8rem; color:var(--text-muted); display: block; line-height: 1.5; }

/* Drawer Hover Effects */
.drawer-app-card:hover { background: var(--bg); border-color: var(--primary-mid); transform: translateY(-1px); }

/* ── Mega Menu Nav Links ── */
.nav-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); padding: 12px 16px 4px; margin-top: 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--text-muted); background: transparent; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem; transition: all var(--transition); border: 1px solid transparent; }
.nav-link:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.nav-link-active { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }
.nav-link-active:hover { background: var(--primary-light); color: var(--primary); }
.nav-link-icon { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; }

/* ── Color Scheme Picker ── */
.scheme-picker-wrap { position:relative; display:flex; align-items:center }
.btn-scheme { display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:all var(--transition); position:relative; }
.btn-scheme:hover { border-color:var(--primary); background:var(--primary-light) }
.btn-scheme .swatch-preview { width:0.9rem; height:0.9rem; border-radius:50%; background:var(--primary); transition:background var(--transition); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.scheme-dropdown { position:absolute; top:calc(100% + 8px); right:0; z-index:60; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; min-width:170px; animation:scaleIn .2s ease-out; }
.scheme-dropdown-title { font-size: 0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-light); margin-bottom:8px; padding:0 4px; }
.scheme-option { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer; border:none; background:transparent; width:100%; font-family:var(--font); font-size:0.78rem; font-weight:500; color:var(--text-muted); transition:all var(--transition); text-align:left; }
.scheme-option:hover { background:var(--bg); color:var(--text) }
.scheme-option.active { background:var(--primary-light); color:var(--primary); font-weight:600 }
.scheme-swatch { width:18px; height:18px; border-radius:50%; flex-shrink:0; border:2px solid transparent; transition:all var(--transition); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
.scheme-option.active .scheme-swatch { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light), inset 0 0 0 1px rgba(0,0,0,0.08) }

/* ── Footer ── */
.footer { border-top:1px solid var(--border); margin-top:52px }
.footer-inner { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; padding:28px 0; font-size:0.8rem; color:var(--text-light) }
@media (min-width:640px) { .footer-inner { flex-direction:row } }
.footer-links { display:flex; gap:18px }
.footer-links button { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:0.8rem; color:var(--text-light); transition:color var(--transition) }
.footer-links button:hover { color:var(--primary) }