/* =============================================================================
   EngineerOS · Base
   Reset, canvas, layout, the focused-view system, and the type scale.
   Note: a hard rule — no element declares a `border`. Ever.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; border: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  min-height: 100svh;
  overflow-x: hidden;
}

/* Ambient background wash — soft, alive, never flat. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 16% -4%, var(--bg-tint-1) 0%, transparent 60%),
    radial-gradient(64% 56% at 102% 6%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 56%),
    radial-gradient(80% 70% at 50% 108%, var(--bg-tint-2) 0%, transparent 62%);
  opacity: 0.92;
}

h1,h2,h3,h4,p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
input, textarea, select { font: inherit; color: var(--text); }
img, svg { display: block; max-width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Focus: a soft ring (box-shadow, NOT a border) — keyboard users only. */
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- App frame ----------------------------------------------------------- */
#app { min-height: 100svh; display: flex; flex-direction: column; }

#topbar {
  position: sticky; top: 0; z-index: var(--z-bar);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--s-4) 0;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--material);
  backdrop-filter: saturate(var(--material-saturate)) blur(var(--material-blur));
  -webkit-backdrop-filter: saturate(var(--material-saturate)) blur(var(--material-blur));
  /* separation from content is a soft shadow that appears on scroll — no line */
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow var(--dur-3) var(--ease-standard);
}
#topbar.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), var(--shadow-1); }

#views { flex: 1; width: 100%; }

/* Responsive container system — the measure adapts to BOTH the view type and the
   screen. Reading views stay comfortable; grid views and Studios use the room. */
:root { --gutter: 18px; --view-max: 760px; --view-grid-max: 760px; --view-wide-max: 760px; }
@media (min-width: 600px)  { :root { --gutter: 26px; } }
@media (min-width: 768px)  { :root { --view-grid-max: 980px;  --view-wide-max: 1060px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --view-max: 820px; --view-grid-max: 1160px; --view-wide-max: 1320px; } }
@media (min-width: 1600px) { :root { --gutter: 56px; --view-grid-max: 1360px; --view-wide-max: 1520px; } }

.view { display: none; width: 100%; max-width: var(--view-max); margin: 0 auto;
        padding: var(--s-5) var(--gutter) calc(var(--tabbar-h) + 96px); }
.view-grid { max-width: var(--view-grid-max); }
.view-wide { max-width: var(--view-wide-max); }
.view.is-active { display: block; }

/* Tab bar — a floating glass pill (functional layer above content). */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; justify-content: center; pointer-events: none;
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
}

/* Onboarding hides the chrome for a focused first run. */
#app.is-onboarding #topbar, #app.is-onboarding #tabbar { display: none; }
#app.is-onboarding .view { padding-bottom: var(--s-8); }

/* ---- Type scale ---------------------------------------------------------- */
.t-display  { font-size: var(--fs-display);  line-height: var(--lh-display);  letter-spacing: var(--tr-display);  font-weight: var(--fw-heavy); }
.t-title1   { font-size: var(--fs-title-1);  line-height: var(--lh-title-1);  letter-spacing: var(--tr-title-1);  font-weight: var(--fw-bold); }
.t-title2   { font-size: var(--fs-title-2);  line-height: var(--lh-title-2);  letter-spacing: var(--tr-title-2);  font-weight: var(--fw-bold); }
.t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); font-weight: var(--fw-semibold); }
.t-body     { font-size: var(--fs-body);     line-height: var(--lh-body); }
.t-callout  { font-size: var(--fs-callout);  line-height: var(--lh-callout); }
.t-foot     { font-size: var(--fs-foot);     line-height: var(--lh-foot); }
.t-caption  { font-size: var(--fs-caption);  line-height: var(--lh-caption); letter-spacing: var(--tr-caption); }
.eyebrow    { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.07em;
              text-transform: uppercase; color: var(--accent); }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }
.fw-medium{font-weight:var(--fw-medium);} .fw-semibold{font-weight:var(--fw-semibold);}
.fw-bold{font-weight:var(--fw-bold);} .fw-heavy{font-weight:var(--fw-heavy);}
.center { text-align: center; }
.balance { text-wrap: balance; }