/* ═══════════════════════════════════════════════════════════════════════════
   POP.CSS - the app, drawn the way aluma.fun is drawn.

   The site and the product had drifted into two different objects. The site
   has heavy headings, pill buttons standing on a darker ledge they press
   into, and the logo's lime / mint / aqua used as whole panels. The app had
   the same greens as thin washes and hairlines. This layer puts the site's
   surfaces on the app's existing structure.

   It moves nothing, removes no content and changes no word. Every rule below
   is colour, depth or weight, plus padding inside the one surface that becomes
   a panel (Home's hero), so its text does not touch the panel's edge. The one
   thing it hides is a 2px decoration another sheet had already tried to
   retire (section 5).

   House rules, the same as every sheet that loads after the design system:
     - it spends tokens from redesign.css (--lip*, --panel-*, --fill-bar) and
       mints none;
     - it leaves shape to rounded.css, which loads after it and owns every
       corner, including the new ones this layer paints;
     - motion stays in feel.css. A filled button's ledge is a box-shadow, and
       feel.css already runs box-shadow on the press clock (90ms down, 200ms
       back), so the ledge shrinking under a finger needs no motion here.

   Selectors carry `body[data-theme]` so each one outranks the single-class
   rules it answers, and `!important` only where the rule it answers has one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. A filled button stands on a ledge ────────────────────────────────────
   aluma.fun's .btn-3d: the brand fill sits on --lip-color and sinks into it
   while pressed. `.warn` keeps its own amber and gets no green ledge. */
body[data-theme] :is(.primary-btn, .dash-tutor-send, .dash-btn-tutor, .mx-act.is-primary, .mx-go,
      .dash-act-primary, .send-btn, .do-it):not(.warn):not(:disabled) {
  box-shadow: 0 var(--lip-sm) 0 0 var(--lip-color),
              inset 0 1px 0 rgb(255 255 255 / 0.16) !important;
  font-weight: 700 !important;
}
body[data-theme] :is(.primary-btn, .dash-tutor-send, .dash-btn-tutor, .mx-act.is-primary, .mx-go,
      .dash-act-primary, .send-btn, .do-it):not(.warn):not(:disabled):active {
  box-shadow: 0 1px 0 0 var(--lip-color),
              inset 0 1px 0 rgb(255 255 255 / 0.10) !important;
}

/* The quiet buttons get the quiet ledge: the same key shape, drawn in the
   page's own ink at a tenth. */
body[data-theme] :is(.ghost-btn, .mx-act:not(.is-primary), .mx-got, .dash-btn-done, .filter-pill,
      .dash-tutor-chip, .tp-pill, .suggestion):not(:disabled) {
  box-shadow: 0 2px 0 0 var(--lip-quiet) !important;
  font-weight: 650;
}
body[data-theme] :is(.ghost-btn, .mx-act:not(.is-primary), .mx-got, .dash-btn-done, .filter-pill,
      .dash-tutor-chip, .tp-pill, .suggestion):not(:disabled):active {
  box-shadow: 0 1px 0 0 var(--lip-quiet) !important;
}

/* ── 2. Headings read from across the room ───────────────────────────────────
   Page titles take the new --t-page-* tokens on their own. These are the
   headings that name their weight directly and so never saw them. */
body[data-theme] :is(.hw-title, .mx-topic-name h3, .tp-section-title, .ap-group-title,
      .cal-col-head h3, .conn-section-title) {
  font-weight: 780 !important;
  letter-spacing: -0.025em;
}
body[data-theme] :is(.dash-open, .task-title, .tp-custom-text strong, .mx-count) {
  font-weight: 720 !important;
  letter-spacing: -0.015em;
}
/* A score is the loudest thing on its card, as the site sets its numbers. */
body[data-theme] :is(.mx-overall, .mx-topic-pct) {
  font-weight: 800 !important;
  letter-spacing: -0.035em;
}

/* ── 3. Home: the hero is the site's hero ────────────────────────────────────
   The greeting, the one-line state of the day, the ask box and the chips,
   on the lime-to-aqua panel aluma.fun opens with. The ask box and chips stay
   white, so the panel frames them rather than tinting them. */
body[data-theme] .view-school .dash-hero {
  background: var(--panel-hero) !important;
  padding: 26px 32px 30px !important;
  box-shadow: var(--shadow-md) !important;
}
body[data-theme] .view-school .dash-hero :is(.dash-greeting, .dash-summary, .dash-date) {
  color: var(--panel-ink) !important;
}
body[data-theme] .view-school .dash-hero .dash-greeting { font-weight: 650 !important; }
body[data-theme] .view-school .dash-hero .dash-headline {
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.04 !important;
  color: var(--text) !important;
}
body[data-theme] .view-school .dash-hero .dash-ask {
  background: var(--surface-strong) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 36px -18px rgb(19 32 27 / 0.35), 0 1px 2px rgb(19 32 27 / 0.06) !important;
}
body[data-theme] .view-school .dash-hero .dash-tutor-chip {
  border-color: transparent !important;
  color: var(--text) !important;
}
@media (max-width: 767px) {
  body[data-theme] .view-school .dash-hero { padding: 20px 18px 22px !important; }
}

/* ── 4. Home: the board ──────────────────────────────────────────────────────
   Quick actions are tiles with a tinted icon well, the next step is a filled
   button on its ledge, and a to-do row is a white card inside the widget, the
   way the site's task cards sit. Tiles that carry a status tone (alert, warn)
   keep their own colours: those are information, not decoration. */
body[data-theme] .dash-act:not(.dash-act-primary) {
  box-shadow: 0 2px 0 0 var(--lip-quiet);
}
body[data-theme] .dash-act:not(.dash-act-primary):not([data-tone="alert"]):not([data-tone="warn"]) .dash-act-ico {
  background: var(--panel-mint) !important;
  color: var(--accent) !important;
}
body[data-theme] .dash-act-primary {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0)), var(--accent) !important;
}
/* The next-step tile wrote white on --accent in both themes. On the dark
   theme --accent is a light mint, and white on it measured about 1.6:1.
   --accent-ink is the ink the design system pairs with --accent: white on the
   light theme, where nothing changes, and near-black on the dark one. */
body[data-theme] .dash-act-primary :is(.dash-act-text strong, .dash-act-text small, .dash-act-go, .dash-act-ico) {
  color: var(--accent-ink) !important;
}
body[data-theme] .dash-act .dash-act-text strong { font-weight: 750 !important; }

body[data-theme] .hub-assignment {
  background: var(--surface-strong) !important;
  box-shadow: 0 1px 2px rgb(19 32 27 / 0.05), 0 12px 24px -16px rgb(19 32 27 / 0.30) !important;
}
body[data-theme] .dash-due-pill { font-weight: 700 !important; }

/* ── 5. The sidebar ──────────────────────────────────────────────────────────
   New chat is the one filled button in the column, like Open Aluma in the
   site's header. The page you are on is a white pill raised off the column,
   written in the brand colour. */
body[data-theme] .sidebar .nav-item.nav-compose {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 var(--lip-sm) 0 0 var(--lip-color) !important;
}
body[data-theme] .sidebar .nav-item.nav-compose:hover { background: var(--accent-hover) !important; }
body[data-theme] .sidebar .nav-item.nav-compose:active { box-shadow: 0 1px 0 0 var(--lip-color) !important; }
body[data-theme] .sidebar .nav-item.nav-compose svg { color: currentColor !important; }

body[data-theme] .sidebar .nav-item.active:not(.nav-compose) {
  background: var(--surface-strong) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 0 var(--lip-quiet), 0 10px 20px -12px rgb(19 32 27 / 0.30) !important;
}
body[data-theme] .sidebar .nav-item.active:not(.nav-compose) svg { color: var(--accent) !important; }
/* soft.css retired the 2px gutter tick because inside a pill it "lands on the
   fill and reads as a scratch", but styles.css draws it again at (0,3,1) with
   !important, so it went on showing at the pill's left edge. Beside a raised
   white pill it is a stray mark; the pill already says where you are. */
body[data-theme] .sidebar .nav-item.active::before { display: none !important; }
/* Settings keeps its own list of panels and marks the open one the same way.
   (0,5,1): the rule it answers is body[data-theme="light"][data-view=
   "settings"] .settings-tab.active with !important, at (0,4,1). */
body[data-theme][data-view="settings"] .settings-tab.active.active {
  background: var(--surface-strong) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 0 var(--lip-quiet), 0 10px 20px -12px rgb(19 32 27 / 0.30) !important;
}

/* ── 6. Mastery ──────────────────────────────────────────────────────────────
   The summary card is a mint panel, and a bar that carries no status fills
   with the site's lime-to-teal. Known and due bars keep their status colour. */
body[data-theme] .mx-top {
  background: var(--panel-mint) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
}
body[data-theme] .mx-top .mx-next { color: var(--panel-ink) !important; }
body[data-theme] .mx-top .mx-bar { background: rgb(255 255 255 / 0.55) !important; }
/* The overall bar only. A topic's bar is a skill bar: its colour is its
   progress (skillFill in app.js), set inline, so this must not paint over it. */
body[data-theme] .mx-top .mx-bar > span {
  background: var(--fill-bar) !important;
}
body[data-theme] .mx-topic {
  box-shadow: var(--card-shadow) !important;
}

/* ── 7. Test Prep ────────────────────────────────────────────────────────────
   The school-test card is the lime panel; everything else composes from the
   tokens and the ledges above. */
body[data-theme] .tp-custom-card {
  background: var(--panel-lime) !important;
  border-color: transparent !important;
}
body[data-theme] .tp-custom-card .tp-custom-text span { color: var(--panel-ink) !important; }

/* ── 8. Assignments and Calendar ─────────────────────────────────────────────
   Cards float the way the site's cards do: a diffuse shadow under a lighter
   edge. */
body[data-theme] :is(.task-card, .cal-card, .tp-school-item, .conn-tile) {
  border-color: var(--border) !important;
  box-shadow: var(--card-shadow) !important;
}

/* ── 9. The Tutor's composer ─────────────────────────────────────────────────
   The box you type into floats like the site's hero input. */
body[data-theme] .composer-inner {
  background: var(--surface-strong) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 36px -18px rgb(19 32 27 / 0.30), 0 1px 2px rgb(19 32 27 / 0.05) !important;
}
body[data-theme] .composer-inner:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 18px 36px -18px rgb(19 32 27 / 0.30) !important;
}

/* ── 10. The top bar is the page ─────────────────────────────────────────────
   aluma.fun has no header bar: the title stands on the canvas with its
   buttons beside it. The app's bar is a grid row that nothing scrolls under
   (blend.css says so), so it can simply be the canvas, and the white band
   with its fade into the page goes away. */
html[data-theme] body[data-theme] .topbar {
  background: var(--bg) !important;
  background-image: none !important;
}

/* ── 11. Words that stand alone ──────────────────────────────────────────────
   The empty chat's one line and an empty page's title are the only words on
   the screen, so they are set like the site's headings. Neither rule touches
   display: where the line is hidden (under 1200 x 800) it stays hidden. */
body[data-theme] .welcome:not(.welcome-first) .welcome-line {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
}
body[data-theme] :is(.tt-empty h3, .projects-empty-title) {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}