/* ── App shell shared by Practice, History and Worksheets ──────────────
   Loaded after each page's own CSS and before theme-light.css.
   Brings the three sidebar pages onto /play/'s chrome: the same topbar,
   the same 5-tab bottom nav, full-screen paper, hairline borders instead
   of the old 2px ink outlines, pill controls. Taste pass 2026-09-25.

   Shape rule (same as landing): controls are pills, cards 16px, inset
   blocks (expressions, practice cards) 12px. */

:root {
  --as-bg: #f9f8f5;
  --as-surface: #ffffff;
  --as-surface-2: #f4f3ee;
  --as-line: #e9e7df;
  --as-line-2: #dcd9cf;
  --as-text: #2c2c34;
  --as-text-2: #555560;
  --as-muted: #6b6b76;
  --as-accent: #5b6abf;
  --as-accent-dark: #4a58a8;
  --as-accent-soft: rgba(91,106,191,.10);
  --as-tint: #f3f4fb;
}

html, body.app-page { background: var(--as-bg) !important; margin: 0; }
body.app-page { color: var(--as-text); }

/* ── Frame: topbar / content / tabs, exactly like .shell on /play/ ── */
.appframe {
  height: 100vh;
  height: calc(100dvh - var(--kb, 0px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; min-height: 56px;
  background: var(--as-bg); border-bottom: 1px solid var(--as-line);
}
.topbar-left {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  text-decoration: none; color: var(--as-text);
}
.topbar-avatar-img { border-radius: 50%; display: block; }
.topbar-name { font-family: "Geist", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.topbar-im { color: var(--as-accent); }
.topbar-right { display: flex; align-items: center; gap: 4px; }
.appframe .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--as-text-2); text-decoration: none;
  transition: background .12s, color .12s;
}

.bottom-nav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--as-line); background: var(--as-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 6px;
  font-size: 12.5px; color: var(--as-text-2); text-decoration: none;
  border-top: 2px solid transparent;
  transition: color .12s;
}
.bottom-nav a.active { color: var(--as-accent); border-top-color: var(--as-accent); }

/* ── Content grid: list rail + workspace ─────────────────────────── */
.appframe > .app {
  width: 100% !important; margin: 0 !important; gap: 0 !important;
  height: auto !important; min-height: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--as-bg);
}
.appframe .panel {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
.appframe .left {
  max-height: none !important;
  display: grid; grid-template-rows: auto auto; min-height: 0;
  border-bottom: 1px solid var(--as-line);
}
.appframe .right { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }

.appframe .left-head, .appframe .right-head {
  background: transparent !important; border-bottom: 0 !important;
  padding: 14px 16px 10px !important;
}
.appframe .brand, .appframe .panel-title, .appframe .right-head h1 {
  font-family: "Geist", Georgia, serif !important;
  font-weight: 400; letter-spacing: -.01em; color: var(--as-text);
}
.appframe .brand { font-size: 24px; line-height: 1.15; }
.appframe .panel-title { font-size: 22px; line-height: 1.2; }
.appframe .sub, .appframe .small { color: var(--as-muted) !important; font-size: 12.5px; }
.appframe .status { color: var(--as-muted); font-size: 12.5px; }

/* Search: a pill like the chat composer */
.appframe .search {
  min-height: 44px; padding: 10px 16px !important;
  border: 1px solid var(--as-line-2) !important; border-radius: 999px !important;
  background: var(--as-surface) !important; color: var(--as-text) !important;
  font-size: 15px;
}
.appframe .search::placeholder { color: var(--as-muted); }
.appframe .search:focus { border-color: var(--as-accent) !important; box-shadow: 0 0 0 4px rgba(91,106,191,.14) !important; }

/* Phones: the session list is a swipeable row of cards, so the
   workspace keeps most of the screen instead of sitting under a
   45vh list. */
.appframe .list {
  display: flex !important; gap: 10px !important;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  padding: 2px 16px 14px !important;
  scrollbar-width: thin;
}
.appframe .entry {
  flex: 0 0 min(78%, 280px);
  scroll-snap-align: start;
  border: 1px solid var(--as-line) !important; border-radius: 16px !important;
  background: var(--as-surface) !important;
  padding: 14px !important; gap: 8px !important;
  align-content: start;
}
.appframe .entry.active {
  border-color: var(--as-accent) !important;
  background: var(--as-tint) !important;
  box-shadow: inset 0 0 0 1px var(--as-accent);
}
.appframe .entry strong { font-size: 15px; font-weight: 500; }

/* ── Buttons, chips, inputs ──────────────────────────────────────── */
.appframe button:not(.icon-btn) {
  min-height: 40px; padding: 8px 16px !important;
  border: 1px solid var(--as-line-2) !important; border-radius: 999px !important;
  background: var(--as-surface) !important; color: var(--as-text) !important;
  font-size: 14px; font-weight: 500;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.appframe button:not(.icon-btn):active { transform: translateY(1px); }
.appframe button.primary {
  background: var(--as-accent) !important; border-color: var(--as-accent) !important; color: #fff !important;
  box-shadow: 0 2px 0 var(--as-accent-dark);
}
.appframe .filter.active {
  background: var(--as-accent-soft) !important; border-color: var(--as-accent) !important; color: var(--as-accent-dark) !important;
}
.appframe button:disabled { opacity: .5; }
.appframe .chip { border-color: var(--as-line-2); border-radius: 999px; font-size: 11.5px; padding: 3px 10px; }

.appframe input[type="text"]:not(.search), .appframe input[type="number"], .appframe .practice-input {
  border: 1px solid var(--as-line-2) !important; border-radius: 12px !important;
  background: var(--as-surface); color: var(--as-text);
  min-height: 44px; padding: 10px 12px !important;
}
.appframe .practice-input:focus, .appframe input[type="text"]:focus, .appframe input[type="number"]:focus {
  outline: none; border-color: var(--as-accent) !important; box-shadow: 0 0 0 4px rgba(91,106,191,.14) !important;
}

/* ── Workspace stream: same cards as chat ────────────────────────── */
.appframe .stream {
  background: var(--as-bg) !important; background-image: none !important;
  padding: 8px 16px 24px !important; gap: 14px !important;
  overflow-y: auto; min-height: 0;
}
.appframe .msg {
  border-radius: 16px !important; box-shadow: none !important;
  padding: 16px 18px !important;
}
.appframe .msg.assistant { background: var(--as-surface) !important; border: 1px solid var(--as-line) !important; }
.appframe .msg.user {
  background: var(--as-surface-2) !important; border: 0 !important;
  border-radius: 18px 18px 4px 18px !important;
  width: fit-content; max-width: min(85%, 560px);
}
.appframe .msg-head { font-size: 11.5px; color: var(--as-muted); opacity: 1; }
.appframe .expr {
  border: 0 !important; border-radius: 12px !important;
  background: var(--as-surface-2) !important; padding: 10px 12px !important;
  font-size: 15px;
}
.appframe .practice-card {
  border: 1px solid var(--as-line) !important; border-radius: 12px !important;
  background: var(--as-tint) !important; padding: 14px !important; gap: 10px !important;
}
.appframe .right .left-foot {
  background: transparent !important; border-top: 1px solid var(--as-line) !important;
  padding: 8px 16px !important; position: static !important;
}

/* Worksheet paper keeps its print look but loses the heavy frame */
.appframe .sheet, .appframe .worksheet { border-color: var(--as-line) !important; border-radius: 16px !important; box-shadow: none !important; }

/* ── Desktop: rail + workspace side by side ──────────────────────── */
@media (min-width: 761px) {
  .topbar { padding: 10px 24px; }
  .bottom-nav { grid-template-columns: repeat(5, minmax(0, 140px)); justify-content: center; }
  .bottom-nav a { font-size: 13px; }
}
@media (min-width: 1021px) {
  .appframe > .app { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .appframe .left {
    grid-template-rows: auto minmax(0, 1fr);
    border-bottom: 0; border-right: 1px solid var(--as-line) !important;
  }
  .appframe .list {
    display: grid !important; grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden; overflow-y: auto;
    padding: 4px 16px 20px !important;
    scroll-snap-type: none;
  }
  .appframe .entry { flex: none; }
  .appframe .stream { padding: 8px 32px 32px !important; }
  .appframe .right-head { padding: 18px 32px 12px !important; }
  .appframe .right .left-foot { padding: 10px 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .appframe button:not(.icon-btn):active { transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .appframe .icon-btn:hover { background: rgba(0,0,0,.04); color: var(--as-text); }
  .bottom-nav a:hover { color: var(--as-text); }
  .appframe button:not(.icon-btn):not(:disabled):hover { border-color: var(--as-accent) !important; background: var(--as-accent-soft) !important; }
  .appframe button.primary:not(:disabled):hover { background: var(--as-accent-dark) !important; }
  .appframe .entry:hover { border-color: var(--as-line-2) !important; transform: none !important; box-shadow: none !important; }
  .appframe .entry.active:hover { border-color: var(--as-accent) !important; }
}

/* List cards: the card is the object, its "Open" button is a quiet
   secondary action. A column of full-width indigo buttons made every
   row shout. */
.appframe .entry button, .appframe .entry button.primary {
  justify-self: start; width: auto !important;
  background: var(--as-surface) !important; color: var(--as-accent-dark) !important;
  border-color: var(--as-line-2) !important; box-shadow: none !important;
  min-height: 36px; padding: 6px 14px !important; font-size: 13.5px;
}
.appframe .entry.active button { background: transparent !important; border-color: transparent !important; color: var(--as-muted) !important; padding-left: 0 !important; }

/* Phones and tablets: the rail becomes a compact strip of title cards so
   the workspace keeps the screen. The card's Open button is stretched
   over the whole card, so tapping anywhere on it opens the session. */
@media (max-width: 1020px) {
  .appframe .left-head { padding: 12px 16px 8px !important; gap: 8px !important; }
  .appframe .left-head .sub { display: none; }
  .appframe .brand { font-size: 21px; }
  .appframe .entry {
    position: relative;
    flex-basis: min(64%, 230px);
    padding: 10px 14px !important; gap: 2px !important;
  }
  .appframe .entry strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appframe .entry .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appframe .entry .row { display: none !important; }
  .appframe .entry button {
    position: static !important; min-height: 0 !important; height: 0; padding: 0 !important;
    border: 0 !important; overflow: hidden; color: transparent !important;
  }
  .appframe .entry button::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
  .appframe .entry button:focus-visible::after { outline: 2px solid var(--as-accent); outline-offset: 2px; }
  .appframe .list { padding-bottom: 12px !important; }
  .appframe .right-head { padding: 12px 16px 6px !important; }
}
[hidden] { display: none !important; }

/* The workspace title is usually the problem itself: STIX keeps 1 and l
   distinct (Instrument Serif set "11" as "ll"). */
.appframe #workspaceTitle, .appframe .right-head h1 { font-family: "STIX Two Math", "Cambria Math", serif !important; }

/* ═══ PREMIUM LAYER (2026-09-25) ═══ ink primary actions, Geist titles
   at 600, paper #f7f6f3; indigo stays for selection and progress. */
:root { --as-bg: #f7f6f3; --as-text: #1d1d24; --as-text-2: #4a4a55; --as-muted: #66666f; --as-line: #e6e4dd; --as-ink: #1d1d24; }
.appframe .brand { font-weight: 600; letter-spacing: -.03em; font-size: 22px; }
.appframe .panel-title { font-weight: 500; }
.appframe button.primary { background: var(--as-ink) !important; border-color: var(--as-ink) !important; color: #fbfaf7 !important; box-shadow: 0 1px 2px rgba(29,29,36,.12) !important; }
@media (hover: hover) and (pointer: fine) { .appframe button.primary:not(:disabled):hover { background: #33333d !important; } }
/* Geist sets 1 and l distinctly, so titles go back to the UI family
   (the STIX override above predates the Geist switch). */
.appframe #workspaceTitle, .appframe .right-head h1 { font-family: "Geist", system-ui, sans-serif !important; font-weight: 600; letter-spacing: -.02em; }