/* ==========================================================================
   app-one-components.css  —  component layer
   Requires app-one-theme.css. Load AFTER it, and after styles.css.
   --------------------------------------------------------------------------
   Two kinds of rules live here:

   A. RESTYLE of classes styles.css already emits — .data-panel, .panel-header,
      .primary-button, .ghost-button, .compact-action-button, .row-meta.
      No markup change needed. Because this file loads last, it wins on equal
      specificity; a few rules need one extra class to beat late overrides
      inside styles.css. No !important unless a comment says why.

   B. NEW components under the a1- prefix. Additive, opt-in, safe to use
      anywhere. No broad names like .card / .item / .header.

   Behavior hooks (id, data-*, name, role, aria-*) are never styled as hooks
   and never renamed here. Style targets classes only.
   ========================================================================== */


/* ==========================================================================
   A. EXISTING GLOBAL COMPONENTS, RESTYLED
   ========================================================================== */

/* Specificity: every rule in section A is scoped to html[data-a1-skin], which
   lifts it to (0,2,1) — enough to beat the page-scoped selectors in styles.css
   like `.user-page .primary-button` (0,2,0). Loading last is NOT sufficient
   for those; measured 22 such rules on .compact-action-button, 17 on
   .primary-button, 16 on .ghost-button, 12 on .panel-header, 11 on .row-meta.

   Deliberately NOT stronger. Selectors above this weight — e.g.
   `.home-service-body > .services-page > .data-panel > .panel-header` (0,4,0)
   and `.roadmap-course-card-full .roadmap-course-actions
   .compact-action-button` (0,3,0) — are per-context LAYOUT tweaks for modals
   and roadmap cards. Steamrolling them breaks the layouts they exist to fix,
   and their colour already follows the new palette through the token bridge.

   Add the attribute once, in index.html:  <html data-a1-skin>
   Removing it reverts the whole refresh — that is the rollout kill switch.
   Section B (a1-* classes) needs no scoping: nothing in styles.css targets it.
   -------------------------------------------------------------------------- */

/* ---- .data-panel — the workhorse container ------------------------------ */
html[data-a1-skin] .data-panel {
  min-width: 0;
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-lg);
  box-shadow: var(--a1-shadow-1);
  padding: 0;
  margin-bottom: var(--a1-card-gap);
  overflow: hidden;
}
html[data-a1-skin] .data-panel + .data-panel { margin-top: 0; }

/* Calendar is one continuous planner sheet, not a card nested inside the
   Calendar page. Drop only its outer frame; the header divider and the time,
   day, and month grid lines remain as the calendar's meaningful structure. */
html[data-a1-skin] .data-panel.calendar-panel {
  border: 0;
  box-shadow: none;
}

html[data-a1-skin] .panel-header {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  padding: var(--a1-s4) var(--a1-card-pad);
  border-bottom: 1px solid var(--a1-border);
  background: transparent;
  /* Was centered, which made every panel title look like a page title. */
  text-align: left;
}
html[data-a1-skin] .panel-header > h1,
html[data-a1-skin] .panel-header > h2,
html[data-a1-skin] .panel-header > h3,
html[data-a1-skin] .panel-header .panel-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--a1-fs-h2);
  font-weight: 700;
  color: var(--a1-text);
  letter-spacing: -.01em;
}
/* Trailing controls in a header always sit right, at one size. */
html[data-a1-skin] .panel-header .panel-actions {
  display: flex;
  align-items: center;
  gap: var(--a1-s2);
  margin-left: auto;
}

html[data-a1-skin] .panel-body { padding: var(--a1-card-pad); min-width: 0; }
html[data-a1-skin] .panel-body > * + * { margin-top: var(--a1-s3); }

/* An all-day event has no time of day, so the enhanced datetime control drops
   its hour/minute wheels and shows only the date box. The native input stays
   datetime-local — enhanceDatetimeField() redefines its value accessor around
   that format — and the compose handler pins the time to midnight. */
html[data-a1-skin] .calendar-dt.is-allday .calendar-dt-time { display: none; }

/* ---- Empty placeholders must not occupy layout ---------------------------
   Status lines and modal hosts render as empty divs until something fills
   them, and several carry a min-height or pick up `.panel-body > * + *`'s
   12px margin. Nothing is visible, so the space reads as a gap the layout
   forgot to close: 68px between the account card and Integrations where every
   other pair sits at 32, 37px of dead card below the last integration, 30px
   below the last privacy row.

   `:empty` matches only elements with no child nodes at all, which is exactly
   these — and it stops matching the moment JS writes a message in, so the
   spacing comes back when there is something to space. */
html[data-a1-skin] .form-message:empty,
html[data-a1-skin] #calendar-status:empty,
html[data-a1-skin] #calendar-unscheduled:empty,
html[data-a1-skin] #friend-action-message:empty,
html[data-a1-skin] #friend-schedule-panel:empty,
html[data-a1-skin] #integration-config-modal:empty,
html[data-a1-skin] #user-install-app-modal:empty,
html[data-a1-skin] #user-config-modal:empty { display: none; }

/* The last row of the account card sat directly on the card's bottom edge, so
   its divider and the rounded corner collided. */
html[data-a1-skin] .user-identity > .a1-list { padding-bottom: var(--a1-s2); }
/* The identity block's 16px bottom padding met the first row's 12px top
   padding, so 28px of nothing separated the email from Profile while the rows
   below it are 24px apart. Halving it makes the card read as one block. */
html[data-a1-skin] .user-identity > .user-top-body { padding-bottom: var(--a1-s2); }

/* ---- The screen edge ------------------------------------------------------
   docs/design/screen-user.html gives .a1-screen__body `padding: 16px 20px 32px`
   and .a1-stack a 16px gap: cards sit 20px off the phone edge, 16px apart. The
   app had 10px on .workspace, which reads as cramped — the card looks stuck to
   the bezel and the rounded corner has nowhere to land. Home's dashboard
   already used a 16px gap; the User page was on 10.

   The extra 10px per side is not free: it comes out of the row's usable width,
   which is why the inset inside a card stays at 16 rather than growing to
   match. Together they read as one margin of 20 + 16 to the first glyph. */
html[data-a1-skin] .workspace { padding-inline: var(--a1-s5); }
html[data-a1-skin] .user-page { gap: var(--a1-s4); }

/* ---- One inset, everywhere ----------------------------------------------
   Everything inside a card starts at --a1-card-pad from the card's border box.
   That is what .panel-header already uses, so a panel title and the first row
   under it line up on the same vertical edge.

   Before this, four different insets were live at once: a title at 16, a row
   inside .a1-panel-list at 8+12=20, a row sitting straight in an <article> at
   12, and a body at 8. Each was locally defensible and the stack read as
   ragged, because the eye compares a row to the title above it, not to the
   rule that produced it.

   The rule is: THE ROW OWNS ITS INSET, and any container that holds rows
   contributes none. A list can then sit in a padded body, an unpadded one, or
   directly in the article, and still line up. Vertical padding stays at
   --a1-s3 so row height does not change. */
html[data-a1-skin] .a1-list-row { padding: var(--a1-s3) var(--a1-card-pad); }
html[data-a1-skin] .data-panel.a1-panel-list .panel-body { padding: var(--a1-s2) 0 var(--a1-s3); }
/* Home's services list is the same shape with a different container. */
html[data-a1-skin] .home-service-body { padding-inline: 0; }
/* ...except the assistant: its body IS the chat surface, and zero inline
   padding pushed bubbles and the clear button against the card border. One
   shared inset here; the inner rows drop their own margins to match.
   (Simple selectors only — iOS Safari drops rules with complex :not().) */
html[data-a1-skin] .home-service-body.academic-assistant-body {
  padding-inline: 18px;
}
html[data-a1-skin] .academic-assistant-card.is-fullscreen .academic-assistant-body {
  padding-inline: 22px;
}
html[data-a1-skin] .academic-assistant-body .academic-assistant-prompts,
html[data-a1-skin] .academic-assistant-body .academic-assistant-privacy {
  padding-inline: 0;
}
html[data-a1-skin] .academic-assistant-body .academic-assistant-form {
  margin-inline: 0;
}
/* The stat tiles are cards in their own right, so it is their border box that
   has to sit on the shared edge. Their container carried 9px, which put them
   7px shy of everything else in the same panel. */
html[data-a1-skin] .home-tabs { padding-inline: var(--a1-card-pad); }
/* Same idea for the notice above them: it is a card, and it carried 14px. */
html[data-a1-skin] .home-reminder-status { margin-inline: var(--a1-card-pad); }
/* A label that sits among rows rather than in a header still needs the inset,
   since its list contributes none. */
html[data-a1-skin] .a1-panel-list .panel-body > .a1-t-micro,
html[data-a1-skin] .a1-panel-list .panel-body > .row-title,
html[data-a1-skin] .a1-list > .a1-t-micro,
html[data-a1-skin] .a1-list > .row-title { padding-inline: var(--a1-card-pad); }

/* ---- Buttons ------------------------------------------------------------ */
html[data-a1-skin] .primary-button,
html[data-a1-skin] .ghost-button,
html[data-a1-skin] .compact-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a1-s2);
  min-height: var(--a1-hit);
  padding: 0 var(--a1-s5);
  border-radius: var(--a1-r-md);
  font-family: var(--a1-font);
  font-size: var(--a1-fs-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;      /* the old ALL-CAPS pills read as noise */
  transition: background .16s var(--a1-ease), border-color .16s var(--a1-ease);
}

/* Exactly two rules in styles.css put a gradient on this button —
   `.primary-button` (0,1,0) and `.user-page .primary-button` (0,2,0).
   background-image: none at (0,2,0) kills both. */
html[data-a1-skin] .primary-button {
  /* Flat fill. Explicitly overrides the cyan→green gradient. */
  background: var(--a1-accent);
  background-image: none;
  border: 1px solid transparent;
  color: var(--a1-on-accent);
  box-shadow: none;
}
html[data-a1-skin] .primary-button:hover:not(:disabled) { background: var(--a1-accent-hover); }
html[data-a1-skin] .primary-button:disabled { background: var(--a1-muted-bg); color: var(--a1-text-3); cursor: not-allowed; }

html[data-a1-skin] .ghost-button {
  background: var(--a1-surface);
  border: 1px solid var(--a1-border-strong);
  color: var(--a1-text);
}
html[data-a1-skin] .ghost-button:hover:not(:disabled) { background: var(--a1-surface-3); }

/* .refresh-icon-button is styles.css's square icon button: fixed 44px wide,
   padding 0, a lone glyph or svg inside. The generic button restyle above
   gives every .ghost-button `padding: 0 var(--a1-s5)` (20px), which leaves a
   fixed 44px button a 2px content box — and inline-flex then squeezes an svg
   child to those 2px. A text glyph merely overflows its box, which is why the
   ↻ survived while the bell svg next to it vanished. Restore the icon-button
   contract, and never let a button's icon be the flex item that shrinks. */
html[data-a1-skin] .refresh-icon-button {
  padding: 0;
}
html[data-a1-skin] .primary-button svg,
html[data-a1-skin] .ghost-button svg,
html[data-a1-skin] .compact-action-button svg {
  flex-shrink: 0;
}

html[data-a1-skin] .compact-action-button {
  min-height: 36px;
  padding: 0 var(--a1-s3);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-3);
  border: 1px solid transparent;
  color: var(--a1-text-2);
  font-size: var(--a1-fs-sm);
}
html[data-a1-skin] .compact-action-button:hover { background: var(--a1-muted-bg); color: var(--a1-text); }

/* Icon-only control. Still 44px of touch area, 36px of visible chrome. */
.a1-icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-3);
  color: var(--a1-text-2);
  position: relative;
}
.a1-icon-button::after { content: ""; position: absolute; inset: -4px; }
.a1-icon-button:hover { background: var(--a1-muted-bg); color: var(--a1-text); }

/* ---- .row-meta --------------------------------------------------------- */
html[data-a1-skin] .row-meta {
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-sm);
  font-weight: 500;
  color: var(--a1-text-3);
  line-height: 1.4;
}


/* ==========================================================================
   A2. APP SHELL — the surfaces that paint themselves with dark literals
   --------------------------------------------------------------------------
   The token bridge cannot reach any of these: they set background with a
   hardcoded rgba()/hex, not var(). Measured across styles.css there are 428
   such rules and 563 dark literal occurrences (419 of them in background
   position, 138 distinct values). The block below covers the ~20 that paint
   the app's own frame — sidebar, workspace header, auth screen, nav, inputs.
   Those are what made light mode read as "dark components on a grey page".

   Everything here is scoped to html[data-a1-skin] (0,2,1) and overrides only
   colour — never layout, never structure. styles.css is untouched, and the
   kill switch still reverts all of it.

   This is the shell slice of TASK 1b. The long tail (feature-internal panels,
   game boards, per-feature modals) is NOT covered here; those still need the
   mechanical sweep inside styles.css.
   ========================================================================== */

/* ---- Auth screen -------------------------------------------------------- */
html[data-a1-skin] .auth-visual {
  background: var(--a1-accent-soft);
  background-image: none;
  color: var(--a1-accent-text);
}
html[data-a1-skin] .auth-visual .auth-copy h1,
html[data-a1-skin] .auth-visual .eyebrow,
html[data-a1-skin] .auth-visual .auth-note { color: inherit; }
/* Decorative grid dots/traces — quiet them instead of hiding them. */
html[data-a1-skin] .node { background: var(--a1-accent); opacity: .35; }
html[data-a1-skin] .trace { background: var(--a1-accent); opacity: .18; }

html[data-a1-skin] .auth-panel {
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
}
html[data-a1-skin] .auth-tabs { background: var(--a1-surface-3); }
html[data-a1-skin] .auth-tab { color: var(--a1-text-2); }
html[data-a1-skin] .auth-tab.active {
  background: var(--a1-surface);
  color: var(--a1-text);
  box-shadow: var(--a1-shadow-1);
}
html[data-a1-skin] .brand-mark { background: #fff; }
html[data-a1-skin] .terms-check,
html[data-a1-skin] .auth-terms-details { background: var(--a1-surface-2); }
html[data-a1-skin] .auth-link-button { color: var(--a1-accent-text); }

/* ---- Form controls -----------------------------------------------------
   `input, select { background: #0f1520 }` in styles.css is (0,0,1) and applies
   to every field in the app. (0,1,2) here beats it, and also beats the
   page-scoped `.auth-form input` / `.w2m-shell input` variants at (0,1,1). */
html[data-a1-skin] input,
html[data-a1-skin] select,
html[data-a1-skin] textarea {
  background: var(--a1-surface);
  border-color: var(--a1-border-strong);
  color: var(--a1-text);
}
html[data-a1-skin] input::placeholder,
html[data-a1-skin] textarea::placeholder { color: var(--a1-text-3); }
html[data-a1-skin] input:focus,
html[data-a1-skin] select:focus,
html[data-a1-skin] textarea:focus { border-color: var(--a1-accent); }
/* Checkboxes and radios keep the native control, now theme-aware. */
html[data-a1-skin] input[type="checkbox"],
html[data-a1-skin] input[type="radio"] { accent-color: var(--a1-accent); background: none; }

/* ---- Signed-in shell ---------------------------------------------------- */
html[data-a1-skin] .sidebar {
  background: var(--a1-surface);
  border-right: 1px solid var(--a1-border);
}
html[data-a1-skin] .sidebar-user,
html[data-a1-skin] .sidebar-brand { background: transparent; color: var(--a1-text); }

html[data-a1-skin] .workspace-header {
  background: var(--a1-surface);
  border-bottom: 1px solid var(--a1-border);
}
html[data-a1-skin] .workspace-header .eyebrow { color: var(--a1-text-3); }
html[data-a1-skin] .user-chip { background: var(--a1-surface-3); color: var(--a1-text); }

html[data-a1-skin] .feature-nav button { background: transparent; color: var(--a1-text-2); }
html[data-a1-skin] .feature-nav button:hover { background: var(--a1-surface-3); color: var(--a1-text); }
html[data-a1-skin] .feature-nav button.active {
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .logout-button {
  background: var(--a1-surface);
  border: 1px solid var(--a1-border-strong);
  color: var(--a1-text);
}

html[data-a1-skin] .offline-banner {
  background: var(--a1-soon-bg);
  color: var(--a1-soon-fg);
  border: 1px solid var(--a1-soon-line);
}
html[data-a1-skin] .offline-retry-button {
  background: var(--a1-surface);
  border: 1px solid var(--a1-border-strong);
  color: var(--a1-text);
}

/* ---- Generic card surfaces sharing .data-panel's old rule --------------- */
html[data-a1-skin] .feature-card,
html[data-a1-skin] .metric-card {
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
}
html[data-a1-skin] .services-grid { background: transparent; }

/* ---- Home → Services -------------------------------------------------
   The whole block stayed dark: an outer dark panel, dark row cards from a
   @media override, and cyan-tinted icon tiles. Worse, .service-card sets
   `color: var(--text)`, which the bridge correctly turned dark — so dark
   text was sitting on a dark card and the rows were unreadable.
   Media queries add no specificity, so (0,2,1) here beats the mobile
   variants without needing to restate the breakpoint. */
html[data-a1-skin] .home-service-card {
  background: var(--a1-surface);
  border-color: var(--a1-border);
}
/* .home-service-card.academic-assistant-card.is-fullscreen is (0,3,0) and
   hardcodes #0d1521 — it needs one more class to lose. */
html[data-a1-skin] .home-service-card.academic-assistant-card.is-fullscreen {
  background: var(--a1-surface);
  border-color: var(--a1-border);
}
/* Styleguide rule 3: never a column of outlined boxes — siblings get a
   hairline between them instead. The phone breakpoint in styles.css gives each
   .service-card a full 1px border, which is exactly the boxed look the rule
   forbids. An earlier pass here only reset border-COLOR, so every box survived
   in the new palette. Reset the width too and keep one bottom rule. */
html[data-a1-skin] .service-card,
html[data-a1-skin] .service-card:last-child {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a1-border);
  border-radius: 0;
  color: var(--a1-text);
}
html[data-a1-skin] .services-grid > .service-card:last-child { border-bottom: 0; }
html[data-a1-skin] .service-card:hover,
html[data-a1-skin] .service-card:focus-visible { background: var(--a1-surface-3); }
html[data-a1-skin] .service-card-icon { background: var(--a1-accent-soft); }
html[data-a1-skin] .service-card-sub,
html[data-a1-skin] .service-card-arrow { color: var(--a1-text-3); }

/* ---- Home: let the dashboard scroll -------------------------------------
   styles.css:22226-22245 makes Home a FIXED-height dashboard rather than a
   scrolling page — .workspace, .feature-host and .home-dashboard are all
   `overflow: hidden`, and only #home-service-body-services scrolls, inside
   itself. That is another session's deliberate layout and it works, as long as
   the content fits.

   Adding the greeting hero broke that assumption: ~100px more content pushed
   the Academic Assistant panel below the fold of a container that cannot
   scroll, so it became unreachable. My change, my regression.

   One property, not a rewrite of their fifteen rules: keep `height: 100%` so
   the dashboard still fills the viewport, but let it scroll when the content
   exceeds it. The inner Services scroller is untouched. Specificity (0,3,2)
   beats their (0,2,1), and the whole thing reverts with the skin attribute.

   The reference screen is a single scrolling body, so this also moves Home
   toward it — but the full conversion touches their layout and is a separate
   decision, not something to slip in here. */
html[data-a1-skin] body[data-active-feature="home"] .home-dashboard {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ONE scroller on Home, not three nested ones.
   Making the dashboard scrollable was only half the job, and on its own it made
   things worse. styles.css:22259 gives the services list its own scroller with

       max-height: min(50dvh, 460px); overflow-y: auto;
       overscroll-behavior: contain;

   and `contain` exists precisely to stop scroll chaining. That was harmless
   while the dashboard could not scroll at all — it was the only scroller. With
   a scrollable dashboard underneath it, a finger resting on the services list
   scrolls the inner box to its end and then stops dead: the gesture never
   reaches the parent, so the greeting above becomes unreachable once the list
   is expanded. This is why the page could not scroll back after expansion.

   The reference screen has a single scrolling body. So do the same: give the
   inner regions their natural height and let the dashboard be the only thing
   that scrolls. The assistant's thread keeps a bounded height — an open
   conversation should not stretch the page forever — but it chains now. */
html[data-a1-skin] body[data-active-feature="home"] #home-service-body-services,
html[data-a1-skin] body[data-active-feature="home"] .home-dashboard:has(.academic-assistant-card:not(.collapsed)) #home-service-body-services {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}
/* The assistant was sized to fill the leftover height of a fixed dashboard
   (flex: 1 1 auto + overflow: hidden). In a scrolling page that clips it
   instead — which is why it looked cut off mid-content. */
html[data-a1-skin] body[data-active-feature="home"] .home-academic-assistant,
html[data-a1-skin] body[data-active-feature="home"] .home-academic-assistant:has(.academic-assistant-card.collapsed) {
  flex: 0 0 auto;
  overflow: visible;
}
html[data-a1-skin] body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) {
  height: auto;
}
html[data-a1-skin] body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-body {
  overflow: visible;
}
html[data-a1-skin] body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-thread {
  max-height: 60vh;
  overscroll-behavior: auto;
}

/* ---- Hand the library back its own values --------------------------------
   These are not new styling. Each rule exists because a legacy declaration in
   styles.css sits at the same specificity as an a1-* component rule and had to
   be told to stop competing, so the component's own values win outright. */

/* Stat tile. .home-tab-count declares 12px/850/--muted, which fights
   .a1-tile__value's 22px/800.

   The previous attempt here set `font-size: inherit` at (0,2,1) intending to
   "step aside" for the component — but .a1-tile__value is only (0,1,0), so the
   reset OUTRANKED it and the number came out the same size as its label. That
   is not stepping aside, that is overriding with a worse value.

   A legacy declaration can only be beaten at or above its own weight, so the
   component's values are restated here verbatim rather than deferred to.
   These numbers are .a1-tile__value's and .a1-tile__label's own, copied
   unchanged from section B — if the component changes, change both. */
html[data-a1-skin] .home-tab-count.a1-tile__value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--a1-text);
}
html[data-a1-skin] .home-tab.is-zero .home-tab-count.a1-tile__value { color: var(--a1-text-3); }
html[data-a1-skin] .home-tab.active .home-tab-count.a1-tile__value,
html[data-a1-skin] .home-tab.active .home-tab-title.a1-tile__label { color: var(--a1-accent-text); }
html[data-a1-skin] .home-tab-title.a1-tile__label {
  font-size: var(--a1-fs-sm);
  font-weight: 600;
  color: var(--a1-text-2);
}
/* .home-tab centres its column; the reference tile is left-aligned, with the
   number and the label sharing one left edge. */
html[data-a1-skin] .home-tab.a1-tile {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--a1-s1);
  min-height: 72px;
  padding: var(--a1-s4);
  text-align: left;
}
/* .home-tab's own border was `1px solid var(--line)`, and the bridge maps
   --line to --a1-border-STRONG — hence the heavy grey frame. .a1-tile wants
   the plain --a1-border, and no tinted fill. */
html[data-a1-skin] .home-tab {
  border: 1px solid var(--a1-border);
  background: var(--a1-surface);
}
html[data-a1-skin] .home-tab.active {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}

/* Bottom nav. Every item's icon sat in its own filled tile. Per .a1-nav__item
   only the ACTIVE item carries accent-soft, and it carries it on the item —
   the icon itself is a bare stroke glyph on any state. */
html[data-a1-skin] .feature-nav .nav-icon,
html[data-a1-skin] .feature-nav button.active .nav-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-a1-skin] .feature-nav .app-nav-brand-icon {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Top safe area. The real shell header is .workspace-header, not .a1-topbar,
   so it never picked up the notch inset — same values as the component. */
html[data-a1-skin] .workspace-header {
  padding-top: calc(var(--a1-s6) + env(safe-area-inset-top, 0px));
}

/* ---- Home service-card headers ------------------------------------------
   Home's panels do NOT use .panel-header — they use .home-service-head, which
   the earlier restyle missed entirely. styles.css lays it out as
   `justify-content: space-between` with the <h3> between two 30px bordered
   square buttons, so the title reads as centred and the collapse affordance
   competes with it for weight. The reference puts a bare chevron immediately
   before a left-aligned title, with quiet icon actions pushed right. */
html[data-a1-skin] .home-service-head,
html[data-a1-skin] .home-service-head.academic-assistant-header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  column-gap: var(--a1-s2);
  padding: var(--a1-s4) var(--a1-card-pad);
  border-bottom: 1px solid var(--a1-border);
}
html[data-a1-skin] .home-service-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--a1-fs-h2);
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: left;
}
/* The collapse toggle is an affordance, not a button: strip the box and let it
   sit inline with the title, the way a1-collapse__trigger does. `order: -1`
   keeps it first even though styles.css emits it before the heading already —
   belt and braces if that markup is ever reordered. */
html[data-a1-skin] .home-service-hide[data-home-service-toggle],
html[data-a1-skin] .home-service-hide[data-assistant-collapse] {
  order: -1;
  /* Fixed box, not width:auto. With auto the chevron is only as wide as its
     glyph, so the title's left edge depended on each header's own contents and
     Services sat ~10px off Academic Assistant. A fixed 24px means the title
     starts at exactly padding + 24 + gap in BOTH headers. */
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--a1-text-3);
}
html[data-a1-skin] .home-service-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a1-s2);
  min-width: 36px;
}
/* The remaining icon actions stay, but quietly. */
/* One trailing-action button, used by both headers. The pencil used to be a
   14px text character in a 30px box while the fullscreen control was an SVG, so
   the two panels' right-hand controls never matched. Same box, same icon size,
   same inset now — .a1-icon-button's geometry. */
html[data-a1-skin] .home-service-edit,
html[data-a1-skin] .home-service-more,
html[data-a1-skin] .academic-assistant-fullscreen-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-3);
  color: var(--a1-text-2);
}
html[data-a1-skin] .home-service-edit svg,
html[data-a1-skin] .home-service-more svg,
html[data-a1-skin] .academic-assistant-fullscreen-toggle svg {
  width: 18px;
  height: 18px;
}

/* ---- Home items ---------------------------------------------------------
   TASK 2, Home. renderHomeItem() now emits .a1-list-row inside its existing
   <article class="home-item">, so the row and its expandable details stay one
   unit. That nesting means `.a1-list--divided .a1-list-row + .a1-list-row`
   never matches — the adjacent siblings are the articles, not the rows — so
   the divider is restated one level up. Styleguide rule 3: a hairline between
   peers, never a box per row. */
html[data-a1-skin] .home-item-list.a1-list--divided > .home-item + .home-item {
  border-top: 1px solid var(--a1-border);
}
/* The row already carries its own padding from .a1-list-row; the article must
   not add a second inset or the divider floats away from the text. */
html[data-a1-skin] .home-item-list.a1-list { gap: 0; }
html[data-a1-skin] .home-item-row.a1-list-row { min-height: 52px; }
/* Toggle is a <button> acting as the text column — strip the button chrome. */
html[data-a1-skin] .home-item-toggle.a1-list-row__text {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
html[data-a1-skin] .home-item-titleline.a1-list-row__title {
  display: flex;
  align-items: center;
  gap: var(--a1-s2);
}
html[data-a1-skin] .home-item-titleline.a1-list-row__title strong { font-weight: 600; }

/* ---- Chat -------------------------------------------------------------
   TASK 2, Chat. renderMessage() now emits .a1-msg / .a1-msg__col / .a1-bubble
   alongside its original classes, so the rules below only have to stop the
   pre-existing chat layout from fighting the new one. styles.css lays .chat-msg
   out as its own grid with a fixed gutter column; .a1-msg is a flex row, and
   the two disagree about who positions the avatar. */
html[data-a1-skin] .chat-msg.a1-msg {
  display: flex;
  align-items: flex-end;
  gap: var(--a1-s2);
  max-width: 84%;
  width: auto;
}
html[data-a1-skin] .chat-msg-gutter { flex: none; display: flex; align-items: flex-end; }
/* A grouped message hides the avatar and shows a clock instead; keep the
   column width so consecutive bubbles stay aligned. */
html[data-a1-skin] .chat-msg.grouped .chat-msg-gutter { min-width: 32px; justify-content: center; }
html[data-a1-skin] .chat-msg-content.a1-msg__col { min-width: 0; }

/* Name and time were two elements on separate lines; the reference puts them
   on one quiet meta line above the bubble. */
html[data-a1-skin] .chat-msg-head.a1-msg__who {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
html[data-a1-skin] .chat-msg-head.a1-msg__who .chat-msg-name,
html[data-a1-skin] .chat-msg-head.a1-msg__who .chat-msg-time {
  font-size: var(--a1-fs-xs);
  font-weight: 600;
  color: var(--a1-text-3);
}
html[data-a1-skin] .a1-msg--out .chat-msg-head.a1-msg__who { justify-content: flex-end; }

/* The bubble is a <p>; drop the paragraph margin so padding is the only inset. */
html[data-a1-skin] .chat-msg-body.a1-bubble { margin: 0; }

/* Own messages: `.chat-msg.mine .chat-msg-body` in styles.css (0,3,0) beats
   `.a1-msg--out .a1-bubble` (0,2,0), so the old 11%-cyan background survived
   under the skin's white text — white on near-white. Restate the accent fill
   at winning specificity; deleted bubbles keep their muted look. */
html[data-a1-skin] .chat-msg.mine .chat-msg-body.a1-bubble:not(.a1-bubble--deleted) {
  background: var(--a1-accent);
  border-color: transparent;
  color: var(--a1-on-accent);
}

/* Per-person avatar colour is information — it is how you tell speakers apart.
   .a1-avatar would otherwise flatten every avatar to --a1-illus-1, so let the
   inline --chat-avatar-bg keep driving the fill and only borrow the shape. */
html[data-a1-skin] .chat-avatar.a1-avatar {
  background: var(--chat-avatar-bg, var(--a1-illus-1));
  color: #fff;
}

/* Attachment card sits inside the bubble, per the reference. */
html[data-a1-skin] .chat-attachment-link.a1-attach { text-decoration: none; }
html[data-a1-skin] .a1-msg--out .chat-attachment-link.a1-attach {
  background: var(--a1-surface);
  border-color: transparent;
}

/* ---- Mobile bottom navigation ----------------------------------------
   Only `.feature-nav button` was covered before; the bar itself is a
   separate rule inside a @media block and stayed near-black. */
html[data-a1-skin] .feature-nav {
  background: var(--a1-surface);
  border-top-color: var(--a1-border);
  backdrop-filter: none;
}
html[data-a1-skin] .sidebar { backdrop-filter: none; }

/* ---- Modal scrims ------------------------------------------------------
   Attribute selectors, so one rule covers every *-backdrop / *-overlay in the
   app without enumerating them. Only the scrim colour changes — the class
   names and the [role="dialog"][aria-modal="true"] child that
   mobile-dialogs.css matches on are untouched. */
html[data-a1-skin] [class$="-backdrop"],
html[data-a1-skin] [class*="-backdrop "],
html[data-a1-skin] [class$="-overlay"],
html[data-a1-skin] [class*="-overlay "] {
  background: rgba(20, 20, 18, .45);
}


/* ==========================================================================
   B. NEW COMPONENTS  (a1- prefix)
   ========================================================================== */

/* ---- Screen scaffold ---------------------------------------------------
   container-type makes every rule below respond to the SCREEN's own width,
   not the browser window's. Viewport media queries were breaking any context
   where the app is narrower than the window (reference frames, split view,
   embedded panes) — a 4-across tile grid was being forced into 393px. */
.a1-screen {
  container-type: inline-size;
  container-name: a1screen;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  background: var(--a1-bg);
  overflow-x: clip;
}
.a1-screen__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--a1-s4) var(--a1-gutter) var(--a1-s7);
  -webkit-overflow-scrolling: touch;
}
.a1-stack { display: flex; flex-direction: column; gap: var(--a1-card-gap); min-width: 0; }
.a1-stack--tight { gap: var(--a1-s2); }
.a1-row { display: flex; align-items: center; gap: var(--a1-s3); min-width: 0; }
.a1-row--between { justify-content: space-between; }
.a1-spacer { flex: 1; min-width: 0; }

/* ---- Screen header -----------------------------------------------------
   Top inset clears the notch / Dynamic Island on device and still keeps a
   comfortable 24px on browsers that report no safe area. */
.a1-topbar {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  padding: calc(var(--a1-s6) + env(safe-area-inset-top, 0px)) var(--a1-gutter) var(--a1-s4);
  background: var(--a1-bg);
  border-bottom: 1px solid transparent;
}
.a1-topbar--bordered { border-bottom-color: var(--a1-border); background: var(--a1-surface); }
.a1-topbar__titles { min-width: 0; flex: 1 1 auto; }
.a1-topbar__kicker { font-size: var(--a1-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a1-text-3); }
.a1-topbar__title { font-size: var(--a1-fs-h1); font-weight: 700; line-height: var(--a1-lh-tight); color: var(--a1-text); }
.a1-topbar__sub { font-size: var(--a1-fs-sm); color: var(--a1-text-2); font-family: var(--a1-font-alt); }

/* ---- Bottom navigation (#feature-nav internals) ------------------------ */
.a1-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: var(--a1-s1);
  padding: var(--a1-s2) var(--a1-s2) calc(var(--a1-s3) + env(safe-area-inset-bottom, 0px));
  background: var(--a1-surface);
  border-top: 1px solid var(--a1-border);
}
.a1-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--a1-hit);
  padding: var(--a1-s2) 0;
  border: 0;
  border-radius: var(--a1-r-md);
  background: transparent;
  color: var(--a1-text-3);
  font-size: var(--a1-fs-xs);
  font-weight: 600;
}
.a1-nav__item svg { width: 22px; height: 22px; stroke-width: 1.75; }
.a1-nav__item.active,
.a1-nav__item[aria-selected="true"] {
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}

/* ---- Stat tile (Notifications / Tasks / Reminders / Events) ------------
   auto-fit, never a hardcoded column count: the grid reflows instead of
   overflowing when the container is narrow. */
.a1-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--a1-s3);
  min-width: 0;
}
.a1-tile {
  display: flex;
  flex-direction: column;
  gap: var(--a1-s1);
  min-height: 72px;
  padding: var(--a1-s4);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-md);
  background: var(--a1-surface);
  text-align: left;
  color: var(--a1-text);
}
.a1-tile__value { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.a1-tile__label { font-size: var(--a1-fs-sm); font-weight: 600; color: var(--a1-text-2); overflow-wrap: anywhere; }
.a1-tile.is-zero .a1-tile__value { color: var(--a1-text-3); font-weight: 700; }
.a1-tile.active,
.a1-tile[aria-selected="true"] {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}
.a1-tile.active .a1-tile__value,
.a1-tile.active .a1-tile__label { color: var(--a1-accent-text); }

/* ---- List row (service, setting, friend, file) ------------------------- */
.a1-list { display: flex; flex-direction: column; gap: var(--a1-row-gap); }
.a1-list-row {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  width: 100%;
  min-height: 56px;
  padding: var(--a1-s3);
  border: 0;
  border-radius: var(--a1-r-md);
  background: transparent;
  color: var(--a1-text);
  text-align: left;
}
.a1-list-row:hover { background: var(--a1-surface-3); }

/* Text column shrinks first; the status pill never does.
   Rule: status > title > meta. A title that cannot fit gets an ellipsis
   rather than pushing the pill out of the row. */
.a1-list-row__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.a1-list-row__title,
.a1-list-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.a1-list-row__title { font-size: var(--a1-fs-body); font-weight: 600; line-height: 1.3; }
.a1-list-row__meta  { font-size: var(--a1-fs-sm); color: var(--a1-text-3); font-family: var(--a1-font-alt); }
/* padding-left guarantees breathing room even when the title runs full width */
.a1-list-row__trail {
  display: flex;
  align-items: center;
  gap: var(--a1-s2);
  margin-left: auto;
  padding-left: var(--a1-s3);
  flex: 0 0 auto;
  color: var(--a1-text-3);
}
/* Two lines are allowed where the row is the primary content, not a link. */
.a1-list-row--wrap .a1-list-row__title { white-space: normal; overflow: visible; text-wrap: pretty; }
/* Divider instead of a box per row: 8 outlined boxes in a column is the
   single biggest source of visual noise in the current build. */
.a1-list--divided .a1-list-row + .a1-list-row { border-top: 1px solid var(--a1-border); border-radius: 0; }

.a1-chevron { width: 18px; height: 18px; flex: none; opacity: .6; }

/* ---- Leading glyph tile ----------------------------------------------- */
.a1-glyph {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--a1-surface-3);
  color: var(--a1-text-2);
  font-size: var(--a1-fs-sm);
  font-weight: 800;
  letter-spacing: -.02em;
}
.a1-glyph--accent { background: var(--a1-accent-soft); color: var(--a1-accent-text); }
.a1-glyph svg { width: 20px; height: 20px; }

/* ---- Pill: state, urgency, ownership ---------------------------------- */
.a1-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--a1-r-pill);
  background: var(--a1-muted-bg);
  color: var(--a1-muted-fg);
  font-size: var(--a1-fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.a1-pill.is-urgent { background: var(--a1-urgent-bg); color: var(--a1-urgent-fg); }
.a1-pill.is-soon   { background: var(--a1-soon-bg);   color: var(--a1-soon-fg); }
.a1-pill.is-ok     { background: var(--a1-ok-bg);     color: var(--a1-ok-fg); }
.a1-pill.is-accent { background: var(--a1-accent-soft); color: var(--a1-accent-text); }
/* Institution tag (MIT / CMU). Deliberately the quietest pill on screen. */
.a1-pill--org {
  height: 22px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--a1-border-strong);
  color: var(--a1-text-3);
  font-size: 10.5px;
  letter-spacing: .06em;
}

/* ---- Count badge. One size everywhere, so columns align. -------------- */
.a1-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 7px;
  border-radius: var(--a1-r-pill);
  background: var(--a1-accent);
  color: var(--a1-on-accent);
  font-size: var(--a1-fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The fill is a token that INVERTS between themes — --a1-urgent-fg is a dark
   red (#A2352A) in light and a light salmon (#EFA79B) in dark — so a literal
   #fff foreground only works in one of them. It measured 6.82:1 in light and
   1.97:1 in dark, i.e. unreadable exactly where the count matters most.
   Pairing the fill with its own designed counterpart tracks the flip:
   5.81:1 light, 7.40:1 dark. This was the only hardcoded colour left in the
   component layer; everything else here is token-driven. */
.a1-badge.is-urgent { background: var(--a1-urgent-fg); color: var(--a1-urgent-bg); }
.a1-badge.is-zero { background: transparent; color: var(--a1-text-3); font-weight: 600; }

/* ---- Segmented control (Day / 5 Day / Week / Month / Year) ------------- */
.a1-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--a1-r-md);
  background: var(--a1-surface-3);
}
.a1-segmented__item {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--a1-s2);
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--a1-text-2);
  font-size: var(--a1-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.a1-segmented__item.active,
.a1-segmented__item[aria-selected="true"] {
  background: var(--a1-surface);
  color: var(--a1-text);
  box-shadow: var(--a1-shadow-1);
}

/* ---- Tabs (underline, for Learn / Dashboard-Answers-Workspace) ---- */
.a1-tabs {
  display: flex;
  gap: var(--a1-s5);
  padding: 0 var(--a1-gutter);
  border-bottom: 1px solid var(--a1-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.a1-tabs::-webkit-scrollbar { display: none; }
.a1-tabs__item {
  position: relative;
  min-height: var(--a1-hit);
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--a1-text-3);
  font-size: var(--a1-fs-body);
  font-weight: 600;
  white-space: nowrap;
}
.a1-tabs__item.active,
.a1-tabs__item[aria-selected="true"] { color: var(--a1-text); }
.a1-tabs__item.active::after,
.a1-tabs__item[aria-selected="true"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--a1-accent);
}

/* ---- Avatar ----------------------------------------------------------- */
/* Initials are CONTENT, so they take a text token, not --a1-illus-ink.
   --a1-illus-ink is tuned as a soft illustration stroke and measures only
   2.95:1 against --a1-illus-1 — below AA, and below AA-large too. The
   illustrations get away with it because they are decorative and
   aria-hidden; an avatar's initials do not. --a1-text gives 14.6:1 light
   and 8.9:1 dark on the same fill. */
.a1-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--a1-illus-1);
  color: var(--a1-text);
  font-size: var(--a1-fs-body);
  font-weight: 700;
  overflow: hidden;
}
.a1-avatar--sm { width: 32px; height: 32px; border-radius: 10px; font-size: var(--a1-fs-sm); }
.a1-avatar--lg { width: 56px; height: 56px; border-radius: 18px; font-size: var(--a1-fs-h2); }
.a1-avatar--round { border-radius: var(--a1-r-pill); }
.a1-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Form field ------------------------------------------------------- */
.a1-field { display: flex; flex-direction: column; gap: 6px; }
.a1-field__label { font-size: var(--a1-fs-sm); font-weight: 600; color: var(--a1-text-2); }
.a1-input, .a1-textarea, .a1-select {
  width: 100%;
  min-height: var(--a1-hit);
  padding: 10px var(--a1-s3);
  border: 1px solid var(--a1-border-strong);
  border-radius: var(--a1-r-md);
  background: var(--a1-surface);
  color: var(--a1-text);
  font-size: var(--a1-fs-body);
}
.a1-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.a1-input::placeholder, .a1-textarea::placeholder { color: var(--a1-text-3); }
.a1-input:focus, .a1-textarea:focus, .a1-select:focus {
  outline: none;
  border-color: var(--a1-accent);
  box-shadow: 0 0 0 3px var(--a1-accent-soft);
}
.a1-field__hint { font-size: var(--a1-fs-sm); color: var(--a1-text-3); }
.a1-field.is-error .a1-input { border-color: var(--a1-urgent-line); }
.a1-field.is-error .a1-field__hint { color: var(--a1-urgent-fg); }

/* ---- Switch ----------------------------------------------------------- */
.a1-switch {
  position: relative;
  width: 46px; height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--a1-r-pill);
  background: var(--a1-border-strong);
  transition: background .18s var(--a1-ease);
}
.a1-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: var(--a1-r-pill);
  background: #fff;
  box-shadow: var(--a1-shadow-1);
  transition: transform .18s var(--a1-ease);
}
.a1-switch[aria-checked="true"] { background: var(--a1-accent); }
.a1-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* ---- Chat ------------------------------------------------------------- */
.a1-thread { display: flex; flex-direction: column; gap: var(--a1-s4); padding: var(--a1-s4) var(--a1-gutter); }
.a1-daysep { display: flex; align-items: center; gap: var(--a1-s3); color: var(--a1-text-3); font-size: var(--a1-fs-xs); font-weight: 600; }
.a1-daysep::before, .a1-daysep::after { content: ""; flex: 1; height: 1px; background: var(--a1-border); }

.a1-msg { display: flex; gap: var(--a1-s2); align-items: flex-end; max-width: 84%; }
.a1-msg__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a1-msg__who { font-size: var(--a1-fs-xs); font-weight: 600; color: var(--a1-text-3); padding: 0 4px; }
.a1-bubble {
  padding: 10px var(--a1-s3);
  border-radius: 16px;
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
  color: var(--a1-text);
  font-size: var(--a1-fs-body);
  line-height: 1.45;
  word-break: break-word;
}
.a1-msg--in  { align-self: flex-start; }
.a1-msg--in  .a1-bubble { border-bottom-left-radius: 6px; }
.a1-msg--out { align-self: flex-end; flex-direction: row-reverse; }
.a1-msg--out .a1-msg__who { text-align: right; }
.a1-msg--out .a1-bubble {
  background: var(--a1-accent);
  border-color: transparent;
  color: var(--a1-on-accent);
  border-bottom-right-radius: 6px;
}
.a1-bubble--deleted { background: var(--a1-muted-bg); border-color: transparent; color: var(--a1-text-3); font-style: italic; }

/* Attachment card inside a bubble. */
.a1-attach {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  padding: var(--a1-s3);
  border-radius: 14px;
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
  min-width: 240px;
}
.a1-msg--out .a1-attach { background: var(--a1-surface); border-color: transparent; }
.a1-attach__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.a1-attach__name { font-size: var(--a1-fs-sm); font-weight: 700; color: var(--a1-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-attach__meta { font-size: var(--a1-fs-xs); color: var(--a1-text-3); font-family: var(--a1-font-alt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.a1-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--a1-s2);
  padding: var(--a1-s3) var(--a1-gutter) calc(var(--a1-s3) + env(safe-area-inset-bottom, 0px));
  background: var(--a1-surface);
  border-top: 1px solid var(--a1-border);
}
.a1-composer__input {
  flex: 1;
  min-height: var(--a1-hit);
  max-height: 120px;
  padding: 11px var(--a1-s3);
  border: 1px solid var(--a1-border-strong);
  border-radius: 22px;
  background: var(--a1-surface-2);
  font-size: var(--a1-fs-body);
  resize: none;
}
.a1-composer__input:focus { outline: none; border-color: var(--a1-accent); background: var(--a1-surface); }
.a1-composer__send {
  display: grid; place-items: center;
  width: var(--a1-hit); height: var(--a1-hit);
  flex: none;
  border: 0;
  border-radius: var(--a1-r-pill);
  background: var(--a1-accent);
  color: var(--a1-on-accent);
}
.a1-composer__send:disabled { background: var(--a1-muted-bg); color: var(--a1-text-3); }

/* ---- Modal ------------------------------------------------------------
   Structure is dictated by mobile-dialogs.css: an element whose class ends in
   -backdrop or -overlay, containing [role="dialog"][aria-modal="true"].
   Keep both or dialogs stop going full-screen on phones.               */
.a1-modal-backdrop {
  position: fixed; inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--a1-s5);
  background: rgba(20, 20, 18, .45);
  backdrop-filter: blur(2px);
}
.a1-modal {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--a1-surface);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-xl);
  box-shadow: var(--a1-shadow-3);
  overflow: hidden;
}
.a1-modal__head {
  display: flex; align-items: center; gap: var(--a1-s3);
  padding: var(--a1-s5) var(--a1-s5) var(--a1-s4);
}
.a1-modal__title { flex: 1; font-size: var(--a1-fs-h2); font-weight: 700; }
.a1-modal__body { padding: 0 var(--a1-s5); overflow-y: auto; }
.a1-modal__body > * + * { margin-top: var(--a1-s4); }
.a1-modal__foot {
  display: flex; gap: var(--a1-s2);
  padding: var(--a1-s5);
  margin-top: var(--a1-s2);
}
.a1-modal__foot > * { flex: 1; }

/* ---- Empty / loading / error ------------------------------------------ */
.a1-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a1-s3);
  padding: var(--a1-s7) var(--a1-s5);
  text-align: center;
}
.a1-empty__title { font-size: var(--a1-fs-h3); font-weight: 700; }
.a1-empty__text { font-size: var(--a1-fs-sm); color: var(--a1-text-2); max-width: 30ch; }

.a1-skeleton {
  border-radius: var(--a1-r-sm);
  background: linear-gradient(90deg, var(--a1-surface-3) 25%, var(--a1-muted-bg) 37%, var(--a1-surface-3) 63%);
  background-size: 300% 100%;
  animation: a1-shimmer 1.3s ease-in-out infinite;
}
.a1-skeleton--line { height: 12px; }
.a1-skeleton--title { height: 18px; width: 55%; }
@keyframes a1-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.a1-notice {
  display: flex; gap: var(--a1-s3);
  padding: var(--a1-s3) var(--a1-s4);
  border-radius: var(--a1-r-md);
  background: var(--a1-muted-bg);
  color: var(--a1-text-2);
  font-size: var(--a1-fs-sm);
}
.a1-notice.is-urgent { background: var(--a1-urgent-bg); color: var(--a1-urgent-fg); }
.a1-notice.is-soon { background: var(--a1-soon-bg); color: var(--a1-soon-fg); }

/* ---- Flat illustration. Two options, both zero-asset:
   1. Scene illustrations — app-one-illustrations.js, one per page/state.
      Mount with <div class="a1-scene-slot" data-a1-illus="home"></div>.
   2. The primitive CSS figure below, for tight slots that need no scene. */
.a1-scene-slot { flex: none; display: flex; align-items: center; justify-content: center; }
.a1-scene { display: block; height: auto; max-width: 100%; }

.a1-illus { position: relative; flex: none; isolation: isolate; }
.a1-illus--hero { width: 84px; height: 96px; }
.a1-illus__head {
  position: absolute; top: 0; left: 16px;
  width: 50px; height: 42px;
  border-radius: 50% 50% 46% 46%;
  background: var(--a1-illus-2);
}
.a1-illus__eye {
  position: absolute; top: 17px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--a1-illus-ink);
}
.a1-illus__eye--l { left: 29px; }
.a1-illus__eye--r { left: 45px; }
.a1-illus__smile {
  position: absolute; top: 25px; left: 31px;
  width: 18px; height: 9px;
  border: 2px solid var(--a1-illus-ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.a1-illus__body {
  position: absolute; top: 38px; left: 9px;
  width: 64px; height: 52px;
  border-radius: 30px 30px 18px 18px;
  background: var(--a1-illus-1);
}
.a1-illus__prop {
  position: absolute; bottom: 8px; left: 26px;
  width: 32px; height: 22px;
  border-radius: 4px;
  background: var(--a1-illus-paper);
}
/* Backdrop shape: one soft blob, no gradient. */
.a1-illus__blob {
  position: absolute; inset: auto -6px 2px -6px;
  height: 58px;
  border-radius: 50% 50% 40% 40%;
  background: var(--a1-illus-3);
  z-index: 0;
}
/* Figure parts sit above the blob. */
.a1-illus__head,
.a1-illus__body,
.a1-illus__prop,
.a1-illus__eye,
.a1-illus__smile { z-index: 1; }

.a1-hero {
  display: flex;
  align-items: center;
  gap: var(--a1-s4);
  /* Was --a1-s5 (20), which put the greeting 4px inside every other card. */
  padding: var(--a1-card-pad);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-lg);
  background: var(--a1-surface);
}
.a1-hero__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

/* ---- Home: expandable today overview -----------------------------------
   The compact greeting remains the card's only trigger. The detail list is a
   sibling below it, so its real task controls cannot accidentally collapse the
   card. One border box and one inset keep the expansion part of the hero. */
html[data-a1-skin] .home-greeting {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
}
html[data-a1-skin] .home-greeting-toggle {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  width: 100%;
  min-width: 0;
  min-height: var(--a1-hit);
  padding: var(--a1-card-pad);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--a1-text);
  font: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s var(--a1-ease), transform .1s var(--a1-ease);
}
html[data-a1-skin] .home-greeting-toggle:hover { background: var(--a1-surface-2); }
html[data-a1-skin] .home-greeting-toggle:active { transform: scale(.995); }
html[data-a1-skin] .home-greeting-toggle .a1-scene-slot {
  width: clamp(72px, 24vw, 108px);
}
html[data-a1-skin] .home-greeting-toggle .a1-scene { width: 100%; }
html[data-a1-skin] .home-greeting-chevron {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--a1-text-3);
}
html[data-a1-skin] .home-greeting-chevron .a1-chevron {
  transition: transform .18s var(--a1-ease);
}
html[data-a1-skin] .home-greeting.is-expanded .home-greeting-chevron .a1-chevron {
  transform: rotate(180deg);
}
html[data-a1-skin] .home-today-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .2s var(--a1-ease),
    opacity .14s var(--a1-ease),
    visibility 0s linear .2s;
}
html[data-a1-skin] .home-greeting.is-expanded .home-today-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
html[data-a1-skin] .home-today-panel-inner {
  min-height: 0;
  overflow: hidden;
}
html[data-a1-skin] .home-today-list {
  border-top: 1px solid var(--a1-border);
}
html[data-a1-skin] .home-today-section + .home-today-section {
  border-top: 1px solid var(--a1-border);
}
html[data-a1-skin] .home-today-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a1-s2);
  margin: 0;
  padding: 10px var(--a1-card-pad) 6px;
  color: var(--a1-text-3);
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
}
html[data-a1-skin] .home-today-section-title span:last-child {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--a1-r-pill);
  background: var(--a1-surface-2);
  text-align: center;
}
html[data-a1-skin] .home-today-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-a1-skin] .home-today-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) max-content 32px;
  align-items: center;
  gap: var(--a1-s3);
  min-width: 0;
  min-height: 60px;
  padding: 10px var(--a1-card-pad);
}
html[data-a1-skin] .home-today-item[data-home-order-item="true"],
html[data-a1-skin] .home-today-item[data-home-order-item="true"] * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html[data-a1-skin] .home-today-item.is-dragging {
  z-index: 3;
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface);
  box-shadow: var(--a1-shadow-2);
  opacity: .92;
}
html[data-a1-skin] .home-today-item.is-lifted { transform: scale(1.01); }
html[data-a1-skin] .home-today-item.is-focus-target {
  animation: home-today-focus 1.8s var(--a1-ease) both;
}
@keyframes home-today-focus {
  0%, 100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
  18%, 72% { background: var(--a1-accent-soft); box-shadow: inset 3px 0 0 var(--a1-accent); }
}
html[data-a1-skin] .home-today-item + .home-today-item {
  border-top: 1px solid var(--a1-border);
}
html[data-a1-skin] .home-today-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--a1-border-strong);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
}
html[data-a1-skin] button.home-today-indicator {
  cursor: pointer;
  touch-action: none;
  transition: background-color .14s var(--a1-ease), border-color .14s var(--a1-ease);
}
html[data-a1-skin] button.home-today-indicator:hover:not(:disabled) {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .home-today-indicator.is-task {
  border-color: color-mix(in srgb, var(--a1-accent) 40%, var(--a1-border));
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .home-today-indicator.is-reminder {
  border-color: var(--a1-soon-line);
  background: var(--a1-soon-bg);
  color: var(--a1-soon-fg);
}
html[data-a1-skin] .home-today-indicator.is-checked {
  border-color: var(--a1-accent);
  background: var(--a1-accent);
  color: var(--a1-on-accent);
}
html[data-a1-skin] .home-today-indicator:not(.is-checked) svg path { opacity: 0; }
html[data-a1-skin] .home-today-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
html[data-a1-skin] button.home-today-copy {
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html[data-a1-skin] button.home-today-copy:hover .home-today-title { color: var(--a1-accent-text); }
html[data-a1-skin] .home-today-title {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--a1-text);
  font-size: var(--a1-fs-body);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-a1-skin] .home-today-meta,
html[data-a1-skin] .home-today-time {
  color: var(--a1-text-3);
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-xs);
  font-weight: 600;
  line-height: 1.35;
}
html[data-a1-skin] .home-today-item.is-completed .home-today-title {
  text-decoration: line-through;
  opacity: .58;
}
html[data-a1-skin] .home-today-item.is-completed .home-today-meta,
html[data-a1-skin] .home-today-item.is-completed .home-today-time { opacity: .64; }
html[data-a1-skin] .home-today-item.is-overdue .home-today-time {
  color: var(--a1-urgent-fg);
  font-weight: 700;
}
html[data-a1-skin] .home-today-delete,
html[data-a1-skin] .home-today-delete-spacer {
  width: 32px;
  height: 40px;
}
html[data-a1-skin] .home-today-delete {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--a1-r-sm);
  background: transparent;
  color: var(--a1-text-3);
  cursor: pointer;
  touch-action: manipulation;
}
html[data-a1-skin] .home-today-delete:hover,
html[data-a1-skin] .home-today-delete:focus-visible {
  background: var(--a1-urgent-bg);
  color: var(--a1-urgent-fg);
}
html[data-a1-skin] .home-today-quick { border-top: 1px solid var(--a1-border); }
html[data-a1-skin] .home-today-add {
  display: flex;
  align-items: center;
  gap: var(--a1-s2);
  width: 100%;
  min-height: var(--a1-hit);
  padding: 8px var(--a1-card-pad);
  border: 0;
  background: transparent;
  color: var(--a1-accent-text);
  font: 700 var(--a1-fs-sm)/1.3 var(--a1-font-alt);
  text-align: left;
  cursor: pointer;
}
html[data-a1-skin] .home-today-add:hover { background: var(--a1-accent-soft); }
html[data-a1-skin] .home-today-quick-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  gap: var(--a1-s2);
  padding: 10px var(--a1-card-pad);
}
html[data-a1-skin] .home-today-quick-form input {
  min-width: 0;
  min-height: var(--a1-hit);
  padding: 8px 11px;
  border: 1px solid var(--a1-border-strong);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface);
  color: var(--a1-text);
  font: inherit;
}
html[data-a1-skin] .home-today-quick-submit,
html[data-a1-skin] .home-today-quick-cancel {
  min-height: var(--a1-hit);
  border: 0;
  border-radius: var(--a1-r-sm);
  font: 700 var(--a1-fs-sm)/1 var(--a1-font-alt);
}
html[data-a1-skin] .home-today-quick-submit { padding: 0 14px; background: var(--a1-accent); color: var(--a1-on-accent); }
html[data-a1-skin] .home-today-quick-cancel { background: var(--a1-surface-2); color: var(--a1-text-2); font-size: 20px; }
html[data-a1-skin] .home-today-edit-form { display: grid; gap: var(--a1-s3); }
html[data-a1-skin] .home-today-edit-form label { display: grid; gap: 6px; color: var(--a1-text-2); font-size: var(--a1-fs-sm); }
html[data-a1-skin] .home-today-edit-form input,
html[data-a1-skin] .home-today-edit-form select,
html[data-a1-skin] .home-today-edit-form textarea {
  width: 100%; min-width: 0; min-height: var(--a1-hit); padding: 9px 11px;
  border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-sm);
  background: var(--a1-surface); color: var(--a1-text); font: inherit;
}
html[data-a1-skin] .home-today-edit-date-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a1-s3); }
html[data-a1-skin] .home-today-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1-s3); }
html[data-a1-skin] .home-today-edit-actions .form-message { flex-basis: 100%; }
html[data-a1-skin] .home-today-edit-actions .danger { color: var(--a1-urgent-fg); }
html[data-a1-skin] .home-items-toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 180;
  display: flex; align-items: center; gap: var(--a1-s3); max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 15px; border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-pill);
  background: var(--a1-text); color: var(--a1-bg); box-shadow: var(--a1-shadow-3);
  font: 600 var(--a1-fs-sm)/1.3 var(--a1-font-alt); opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .16s var(--a1-ease), transform .16s var(--a1-ease);
}
html[data-a1-skin] .home-items-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
html[data-a1-skin] .home-items-toast button {
  min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--a1-r-pill);
  background: var(--a1-bg); color: var(--a1-accent-text); font: inherit; font-weight: 800;
}
html[data-a1-skin] .home-today-meta {
  overflow-wrap: anywhere;
}
html[data-a1-skin] .home-today-time {
  max-width: 30vw;
  text-align: right;
  white-space: nowrap;
}
html[data-a1-skin] .home-today-empty {
  margin: 0;
  padding: var(--a1-s3) var(--a1-card-pad) var(--a1-s4);
  color: var(--a1-text-3);
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-sm);
  text-align: center;
}

@media (max-width: 420px) {
  html[data-a1-skin] .home-greeting-toggle { gap: var(--a1-s2); }
  html[data-a1-skin] .home-today-item {
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: var(--a1-s2);
  }
  html[data-a1-skin] .home-today-time { grid-column: 2; justify-self: start; max-width: 100%; text-align: left; }
  html[data-a1-skin] .home-today-delete,
  html[data-a1-skin] .home-today-delete-spacer { grid-column: 3; grid-row: 1 / span 2; }
  html[data-a1-skin] .home-today-edit-date-row { grid-template-columns: 1fr; }
  html[data-a1-skin] .home-today-quick-form { grid-template-columns: minmax(0, 1fr) 40px; }
  html[data-a1-skin] .home-today-quick-submit { grid-column: 1 / -1; grid-row: 2; }
  html[data-a1-skin] .home-today-quick-cancel { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-a1-skin] .home-greeting-toggle,
  html[data-a1-skin] .home-greeting-chevron .a1-chevron,
  html[data-a1-skin] .home-today-panel,
  html[data-a1-skin] button.home-today-indicator,
  html[data-a1-skin] .home-today-item.is-focus-target,
  html[data-a1-skin] .home-items-toast {
    animation: none;
    transition: none;
  }
}

/* ---- Calendar: expandable range summary -------------------------------
   The shell reuses Home's compact hero/toggle/chevron motion. These rules are
   only the date-grouped content, so the two views retain one interaction
   language without duplicating data or inventing a second calendar renderer. */
html[data-a1-skin] .calendar-summary-list {
  max-height: min(55dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-a1-skin] .calendar-summary-day + .calendar-summary-day {
  border-top: 1px solid var(--a1-border);
}
html[data-a1-skin] .calendar-summary-day-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a1-s2);
  margin: 0;
  padding: 10px var(--a1-card-pad) 6px;
  color: var(--a1-text-3);
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
html[data-a1-skin] .calendar-summary-day-title span:last-child {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--a1-r-pill);
  background: var(--a1-surface-2);
  text-align: center;
}
html[data-a1-skin] .calendar-summary-items {
  display: grid;
}
html[data-a1-skin] .calendar-summary-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--a1-s3);
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 9px var(--a1-card-pad);
  border: 0;
  background: transparent;
  color: var(--a1-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html[data-a1-skin] .calendar-summary-item + .calendar-summary-item {
  border-top: 1px solid var(--a1-border);
}
html[data-a1-skin] .calendar-summary-item:hover,
html[data-a1-skin] .calendar-summary-item:focus-within {
  background: var(--a1-surface-2);
}
html[data-a1-skin] .calendar-summary-kind {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--a1-border-strong);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
  font: 800 16px/1 var(--a1-font-alt);
}
html[data-a1-skin] button.calendar-summary-kind { padding: 0; cursor: pointer; }
html[data-a1-skin] button.calendar-summary-kind:focus-visible {
  outline: 2px solid var(--a1-accent);
  outline-offset: 2px;
}
html[data-a1-skin] .calendar-summary-open {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--a1-s3);
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html[data-a1-skin] .calendar-summary-open:focus-visible {
  outline: 2px solid var(--a1-accent);
  outline-offset: 2px;
  border-radius: var(--a1-r-sm);
}
html[data-a1-skin] .calendar-summary-item.is-task .calendar-summary-kind {
  border-style: dashed;
  color: var(--a1-soon-fg);
}
html[data-a1-skin] .calendar-summary-item.is-reminder .calendar-summary-kind {
  border-color: var(--a1-urgent-line);
  color: var(--a1-urgent-fg);
}
html[data-a1-skin] .calendar-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
html[data-a1-skin] .calendar-summary-copy strong {
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--a1-fs-body);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-a1-skin] .calendar-summary-copy small {
  overflow-wrap: anywhere;
  color: var(--a1-text-3);
  font-family: var(--a1-font-alt);
  font-size: var(--a1-fs-xs);
  font-weight: 600;
  line-height: 1.35;
}
html[data-a1-skin] .calendar-summary-item.is-done {
  opacity: .58;
}
html[data-a1-skin] .calendar-summary-item.is-done .calendar-summary-copy strong {
  text-decoration: line-through;
}
html[data-a1-skin] .calendar-summary-item.is-overdue .calendar-summary-copy small {
  color: var(--a1-urgent-fg);
  font-weight: 700;
}
html[data-a1-skin] .calendar-summary-arrow {
  color: var(--a1-text-3);
  font: 500 22px/1 var(--a1-font-alt);
  text-align: right;
}

@media (max-width: 420px) {
  html[data-a1-skin] .calendar-summary-item {
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    gap: var(--a1-s2);
  }
  html[data-a1-skin] .calendar-summary-copy strong {
    white-space: normal;
  }
}

/* ---- Collapsible section --------------------------------------------- */
.a1-collapse__trigger {
  display: flex; align-items: center; gap: var(--a1-s2);
  width: 100%;
  min-height: var(--a1-hit);
  border: 0; background: transparent;
  color: var(--a1-text);
  font-size: var(--a1-fs-h2); font-weight: 700;
  text-align: left;
}
.a1-collapse__trigger .a1-chevron { transition: transform .18s var(--a1-ease); }
.a1-collapse__trigger[aria-expanded="false"] .a1-chevron { transform: rotate(-90deg); }
.a1-collapse__panel[hidden] { display: none; }

/* ---- Wider containers: the phone layout breathes, it does not
   re-architect. Container query, so it keys off the app's own width. ---- */
@container a1screen (min-width: 700px) {
  .a1-screen__body {
    --a1-gutter: 28px;
    --a1-card-pad: 20px;
    --a1-card-gap: 20px;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
  .a1-nav { border-top: 0; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
  @media (min-width: 760px) {
    .a1-screen__body { max-width: 760px; margin: 0 auto; width: 100%; }
  }
}

/* The Services collapse affordance was the text glyph "▾" at 12px, which sits
   on the text baseline and cannot align with a 17px heading. It is now the
   library's 18px .a1-chevron SVG; this only keeps the existing rotate-on-
   collapse behaviour working and pins the size the component expects. */
html[data-a1-skin] .home-service-chevron.a1-chevron {
  width: 18px;
  height: 18px;
  opacity: .6;
}
html[data-a1-skin] .home-service-hide[aria-expanded="false"] .home-service-chevron.a1-chevron {
  transform: rotate(-90deg);
}

/* ---- Stat tile: zero states recede ---------------------------------------
   The library greys a zero VALUE (.a1-tile.is-zero .a1-tile__value). The owner
   wants the whole tile to recede when the count is zero, and a non-zero tile to
   sit at full strength until it is selected. Opacity on the tile, so the label
   dims with the number instead of the two drifting apart.
   .75 keeps the 22px number at ~3:1 on white (large-text AA); the old .55
   measured ~2.2:1 and read as disabled rather than "currently empty". */
html[data-a1-skin] .home-tab.a1-tile.is-zero { opacity: .75; }
html[data-a1-skin] .home-tab.a1-tile.is-zero.active { opacity: 1; }

/* ---- Academic Assistant --------------------------------------------------
   Three separate defects, all visible in the screenshot.

   1. `width: min(88%, 760px)` on every message. A two-word reply still filled
      88% of the panel, so nothing read as a conversation — it read as cards
      that failed to line up. A bubble should be as wide as its text and no
      wider, capped like .a1-msg at 84%.
   2. The composer had `margin: 4px 18px 0` — no bottom margin at all, so it
      collided with the panel edge.
   3. Suggestion chips were `overflow: hidden` with no ellipsis inside a
      horizontal scroller, so text stopped mid-character with no signal that
      anything had been cut. */
html[data-a1-skin] .academic-assistant-message {
  width: auto;
  max-width: 84%;
  padding: 10px var(--a1-s3);
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  border: 1px solid var(--a1-border);
  /* surface-3, not surface: on the white thread a white bubble leaves only a
     floating hairline — the bubble must read as a shape. */
  background: var(--a1-surface-3);
}
html[data-a1-skin] .academic-assistant-form {
  margin: var(--a1-s2) var(--a1-card-pad) var(--a1-s4);
  border-color: var(--a1-border-strong);
  border-radius: var(--a1-r-lg);
}
html[data-a1-skin] .academic-assistant-prompts {
  gap: var(--a1-s2);
  padding: var(--a1-s3) var(--a1-card-pad) var(--a1-s2);
}
html[data-a1-skin] .academic-assistant-prompts button {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--a1-r-pill);
  min-height: 34px;
  padding: 0 var(--a1-s3);
}

/* Fullscreen Assistant is a conversation, not an enlarged Home card. Keep the
   header fixed, give messages the remaining viewport, and pin the composer to
   the bottom (including the keyboard-safe inset on phones). The stronger body
   selector intentionally beats Home's natural-height embedded-card rules. */
html[data-a1-skin] body .home-service-card.academic-assistant-card.is-fullscreen {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--a1-surface);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-header {
  flex: 0 0 auto;
  background: var(--a1-surface);
  border-bottom: 1px solid var(--a1-border);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-body {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--a1-card-pad) max(10px, env(safe-area-inset-bottom, 0px));
  overflow: hidden !important;
  background: var(--a1-surface);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-ready-row {
  flex: 0 0 auto;
  padding-top: var(--a1-s3);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  margin: 0 calc(-1 * var(--a1-card-pad));
  padding: var(--a1-s4) var(--a1-card-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--a1-surface-2);
}
html[data-a1-skin] .academic-assistant-chat-empty {
  display: grid;
  place-content: center;
  flex: 1 1 auto;
  min-height: 180px;
  color: var(--a1-text-3);
  text-align: center;
}
html[data-a1-skin] .academic-assistant-chat-empty strong {
  color: var(--a1-text-2);
  font-size: var(--a1-fs-body);
}
html[data-a1-skin] .academic-assistant-chat-empty span {
  margin-top: 4px;
  font-size: var(--a1-fs-xs);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-prompts {
  flex: 0 0 auto;
  padding-top: var(--a1-s2);
}
html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-form {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  margin: var(--a1-s2) 0 0;
  background: var(--a1-surface);
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--a1-surface) 84%, transparent);
}

@media (max-width: 680px) {
  html[data-a1-skin] .academic-assistant-fullscreen-toggle {
    visibility: visible;
    pointer-events: auto;
  }
  html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-body {
    padding-inline: max(12px, var(--a1-safe-left)) max(12px, var(--a1-safe-right));
  }
  html[data-a1-skin] body .academic-assistant-card.is-fullscreen .academic-assistant-thread {
    margin-inline: calc(-1 * max(12px, var(--a1-safe-left))) calc(-1 * max(12px, var(--a1-safe-right)));
    padding-inline: max(14px, var(--a1-safe-left)) max(14px, var(--a1-safe-right));
  }
}

/* ---- One card gap on Home ------------------------------------------------
   Three separate spacings stacked between panels and the result was uneven:

       .home-dashboard { display: grid; gap: 16px }   the intended one
       .data-panel     { margin-bottom: 16px }         mine, from section A
       .home-services  { margin-top: 12px }            legacy

   Hero → Activity got 16px (grid gap only). Activity → Services got
   16 + 16 + 12 = 44px, because the Activity panel's bottom margin and the
   services block's top margin both land inside the same grid gap. Styleguide
   rule 2 wants ONE card gap, and the grid already provides it — so the two
   margins are removed rather than tuned. */
html[data-a1-skin] .home-dashboard { gap: var(--a1-card-gap); }
html[data-a1-skin] .home-dashboard > *,
html[data-a1-skin] .home-dashboard > * > .data-panel,
html[data-a1-skin] .home-dashboard .home-services { margin-top: 0; margin-bottom: 0; }

/* The assistant header uses the same .home-service-head markup as Services but
   its <h3> can carry an inline "Working" badge, so it needs the same min-width
   guard the panel titles get — otherwise the heading refuses to shrink and
   overlaps the collapse control to its left. */
/* Both headers' titles get identical treatment — the assistant's used to be a
   flex container while Services' was a plain block, which is half of why they
   did not line up. The "Working" badge inside it is styled on its own instead. */
html[data-a1-skin] .home-service-head h3,
html[data-a1-skin] .academic-assistant-header h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
html[data-a1-skin] .academic-assistant-header-working {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--a1-s2);
  font-size: var(--a1-fs-xs);
  font-weight: 600;
  color: var(--a1-text-3);
}

/* ---- Breathing room at the end of the Home scroll ------------------------
   .home-dashboard is the scroller, and it had no bottom padding — so the last
   card ended exactly where the scroll ended and sat flush against the bottom
   nav. The reference body is `padding: 16px 20px 32px`; the generous bottom
   inset is deliberate, not decoration. Same 32px here, plus the home-indicator
   inset so it also clears on devices that report one. */
html[data-a1-skin] body[data-active-feature="home"] .home-dashboard {
  padding-bottom: calc(var(--a1-s7) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================================
   CALENDAR — lifted verbatim from docs/design/screen-calendar.html, where the
   block is marked "candidate addition to app-one-components.css". Groups 1-13
   only; group 14 was reference-page annotation. Values, selector names and
   ordering are unchanged on purpose: the reference page links this file rather
   than carrying its own copy, so the two cannot drift. No new colours — every
   value resolves through the --a1-* tokens.

   Two rules here look redundant and are not. .a1-tg__cap, .a1-tg__allday and
   .a1-zoom are display:flex, and a class-level display beats the [hidden]
   attribute's UA rule — so hiding a column or the zoom slider needs the
   !important overrides below. Without the first one, 3 Day wraps its day caps
   onto four rows and shows days it is meant to hide.
   ========================================================================= */
/* =========================================================================
   CALENDAR GRID — candidate addition to app-one-components.css
   Tokens only. No new colors. Works in both themes untouched.
   ========================================================================= */

/* ---- 1. Time grid shell (shared by Day / 5 Day / Week) ------------------ */
.a1-tg {
  --a1-tg-hour: 46px;          /* set by the zoom slider, 28–88px */
  --a1-tg-gutter: 34px;        /* hour label column */
  --a1-tg-col: 64px;           /* MIN day column width; grows to fill */
  /* Viewport height of the scroller: track the screen instead of a fixed
     320px, so the grid shows a real slice of the day on tall phones. */
  --a1-tg-h: clamp(320px, calc(100dvh - 400px), 680px);
}
.a1-tg__scroll {
  height: var(--a1-tg-h);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-md);
  background: var(--a1-surface);
  -webkit-overflow-scrolling: touch;
}
.a1-tg__scroll.has-draft-scroll-room::after {
  content: "";
  display: block;
  height: var(--a1-tg-draft-scroll-room, 0px);
  pointer-events: none;
}
.a1-tg__grid {
  display: grid;
  grid-template-columns: var(--a1-tg-gutter) repeat(var(--a1-tg-days, 7), minmax(var(--a1-tg-col), 1fr));
  min-width: min-content;
}
/* caps/all-day cells set display:flex, which would beat [hidden] */
.a1-tg__grid > [hidden] { display: none !important; }

/* ---- 2. Day caps (sticky top) ------------------------------------------ */
.a1-tg__cap {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px 5px;
  background: var(--a1-surface);
  border-bottom: 1px solid var(--a1-border);
  box-shadow: inset 0 -2px 0 transparent;
}
.a1-tg__cap-corner { position: sticky; top: 0; left: 0; z-index: 5;
  background: var(--a1-surface); border-bottom: 1px solid var(--a1-border); }
.a1-tg__dow  { font: 600 10.5px/1 var(--a1-font); color: var(--a1-text-3); letter-spacing: .02em; }
.a1-tg__date { font: 700 14px/1.15 var(--a1-font); color: var(--a1-text); }
.a1-tg__cap.is-today { box-shadow: inset 0 -2px 0 var(--a1-accent); }
.a1-tg__cap.is-today .a1-tg__dow,
.a1-tg__cap.is-today .a1-tg__date { color: var(--a1-accent); }
.a1-tg__cap.is-weekend .a1-tg__dow,
.a1-tg__cap.is-weekend .a1-tg__date { color: var(--a1-text-3); }

/* ---- 3. All-day strip -------------------------------------------------- */
/* DIVERGENCE from the reference export, which pins the grid at scrollTop 0 and
   so never exposes this: the strip was in flow, so it scrolled up under the
   sticky caps. The grid opens at 07:30, which means an all-day item was never
   on screen. It sticks below the caps instead. `--a1-tg-cap` is measured and
   written by the feature after layout; the 40px default is the unstyled-font
   fallback. See docs/design/AUDIT.md. */
.a1-tg__allday {
  position: sticky; top: var(--a1-tg-cap, 40px); z-index: 3;
  min-height: 22px; padding: 3px 2px;
  background: var(--a1-surface);
  border-bottom: 1px solid var(--a1-border);
  display: flex; flex-direction: column; gap: 2px;
}
.a1-tg__allday-gutter { position: sticky; left: 0; top: var(--a1-tg-cap, 40px); z-index: 4;
  background: var(--a1-surface); border-bottom: 1px solid var(--a1-border);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; }
.a1-tg__allday-gutter span { font: 600 9px/1 var(--a1-font-alt); color: var(--a1-text-3); }
/* all-day chips sit in flow, inset a little so the column edge stays readable */
.a1-tg__allday .a1-tgi { position: static; margin: 0 3px; min-height: 15px;
  padding: 2px 5px 2px 7px; border-radius: 5px; }
.a1-tg__allday .a1-tgi.is-task,
.a1-tg__allday .a1-tgi.is-reminder { min-height: 28px; align-items: center; }
.a1-tg__allday button.a1-tgi__kind { width: 22px; height: 22px; }
.a1-tg__allday .a1-tgi__n { font-size: 9.5px; }

/* ---- 4. Hour gutter (sticky left) -------------------------------------- */
.a1-tg__hours {
  position: sticky; left: 0; z-index: 2;
  height: calc(var(--a1-tg-hour) * 24);
  background: var(--a1-surface);
  border-right: 1px solid var(--a1-border);
}
.a1-tg__hour { position: absolute; right: 5px; transform: translateY(-50%);
  font: 600 9.5px/1 var(--a1-font-alt); color: var(--a1-text-3); }
.a1-tg__hour.h0  { transform: none; }
.a1-tg__hour.h24 { transform: translateY(-100%); }

/* ---- 5. Day column ----------------------------------------------------- */
.a1-tg__col {
  position: relative;
  height: calc(var(--a1-tg-hour) * 24);
  border-left: 1px solid var(--a1-border);
  background-image: repeating-linear-gradient(to bottom,
    var(--a1-border) 0 1px, transparent 1px var(--a1-tg-hour));
}
.a1-tg__col.is-today {
  /* The header underline already identifies today. Keep the full column a
     quiet neutral shade instead of washing an entire day in accent blue. */
  background-color: color-mix(in srgb, var(--a1-surface) 94%, var(--a1-text) 6%);
}
.a1-tg__col.is-weekend { background-color: var(--a1-surface-2); }
.a1-tg__now { position: absolute; left: 0; right: 0; height: 2px; z-index: 2; pointer-events: none;
  background: var(--a1-urgent-fg); border-radius: 2px; }
.a1-tg__now::before { content: ""; position: absolute; left: -3px; top: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--a1-urgent-fg); }

/* Unsaved Google-Calendar-style selection. It remains on the grid while the
   quick card is open; its body moves the block and the two circles resize it. */
.a1-tg__draft {
  /* Below the sticky day caps (z 3) and the all-day strip (z 4): scrolling a
     draft up must slide it UNDER the headers, never paint over their text. It
     still sits above grid lines and items (which stack at auto). */
  position: absolute; left: 4px; right: 4px; z-index: 2;
  min-height: 12px;
  border: 2px solid var(--a1-accent); border-radius: 7px;
  background: color-mix(in srgb, var(--a1-accent) 18%, var(--a1-surface));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--a1-accent) 18%, transparent);
  color: var(--a1-accent-text);
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.a1-tg__draft.is-dragging { cursor: grabbing; box-shadow: var(--a1-shadow-2); }
.a1-tg__draft-label {
  display: block; overflow: hidden;
  padding: 5px 7px;
  font: 750 9.5px/1.2 var(--a1-font-alt);
  text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.a1-tg__draft-handle {
  position: absolute; left: 50%; z-index: 2;
  width: 16px; height: 16px;
  border: 3px solid var(--a1-surface); border-radius: 50%;
  background: var(--a1-accent);
  box-shadow: 0 0 0 1px var(--a1-accent);
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}
.a1-tg__draft-handle.is-start { top: 0; }
.a1-tg__draft-handle.is-end { top: 100%; }

/* ---- 6. Items: EVENT / TASK / REMINDER ---------------------------------
   One shape language, three weights. Kind is carried by the left rail and
   the leading mark — never by a decorative hue.                            */
.a1-tgi {
  position: absolute; left: 2px; right: 2px; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start;
  text-align: left; min-height: 16px;
  padding: 3px 4px 3px 7px;
  /* Events carry their picked color as inline --calendar-* vars; chips
     without them (tasks, reminders) keep the neutral fallbacks. */
  border: 1px solid var(--calendar-line, var(--a1-border));
  border-radius: 6px;
  background: var(--calendar-bg, var(--a1-surface-2));
  box-shadow: inset 2px 0 0 var(--calendar-accent, var(--a1-border-strong));
  color: var(--a1-text-2);
  transition: transform .12s var(--a1-ease), box-shadow .12s var(--a1-ease);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.a1-tgi__open {
  display: block; min-width: 0; width: 100%; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
/* Events have no completion control. Let their single button use the whole
   card, including narrow overlap lanes, instead of the old icon column. */
.a1-tgi > .a1-tgi__open:only-child {
  grid-column: 1 / -1;
  min-height: 0;
  overflow: hidden;
}
/* Only timed cards have an explicit height; size containment on all-day
   cards would erase their natural height. Text follows the actual zoom size. */
.a1-tg__events > .a1-tgi:not(.is-task):not(.is-reminder) {
  container: calendar-event / size;
  min-height: 18px;
}
.a1-tgi__open:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 1px; border-radius: 3px; }
.a1-tgi__n { display: block; font: 600 10.5px/1.25 var(--a1-font); color: var(--a1-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-tgi__t { display: block; margin-top: 1px; font: 600 9.5px/1.2 var(--a1-font-alt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-tgi__kind {
  display: inline-grid; place-items: center; min-width: 1.1em; margin-right: 3px;
  padding: 0; border: 0; background: transparent; color: inherit; font: 800 12px/1 var(--a1-font-alt);
}
button.a1-tgi__kind { width: 18px; height: 18px; border-radius: 4px; cursor: pointer; }
button.a1-tgi__kind:hover { background: var(--a1-accent-soft); }
button.a1-tgi__kind:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 1px; }
.a1-tgi__status { display: block; margin-top: 1px; font: 700 8.5px/1.15 var(--a1-font-alt); }

/* Today's event stays visibly highlighted without losing its own calendar
   colour. Course quizzes/exams carry amber in --calendar-accent; using the
   global app accent here used to turn those cards blue on their actual day. */
.a1-tgi.is-today {
  background: color-mix(in srgb, var(--calendar-accent, var(--a1-accent)) 18%, var(--a1-surface));
  border-color: color-mix(in srgb, var(--calendar-accent, var(--a1-accent)) 45%, transparent);
  box-shadow: inset 2px 0 0 var(--calendar-accent, var(--a1-accent));
  color: var(--a1-text-2);
}
.a1-tgi.is-today .a1-tgi__n { color: var(--a1-text); }

/* TASK — dashed rail + checkbox mark, lighter fill */
.a1-tgi.is-task { background: var(--a1-surface); border-style: dashed;
  box-shadow: inset 2px 0 0 var(--a1-soon-line); }
.a1-tgi.is-task .a1-tgi__kind { color: var(--a1-soon-fg); }
.a1-tgi.is-done { opacity: .55; }
.a1-tgi.is-done .a1-tgi__n { text-decoration: line-through; }
.a1-tgi.is-overdue { border-color: var(--a1-urgent-line); box-shadow: inset 2px 0 0 var(--a1-urgent-fg); }
.a1-tgi.is-overdue .a1-tgi__status { color: var(--a1-urgent-fg); }

/* REMINDER — a point in time, not a duration: one line, dot mark */
.a1-tgi.is-reminder { height: 16px; padding: 2px 4px 2px 6px;
  background: transparent; border: 0; box-shadow: none;
  border-top: 1.5px dotted var(--a1-urgent-line); border-radius: 0; }
.a1-tgi.is-reminder .a1-tgi__n { font-size: 10px; color: var(--a1-urgent-fg); }
.a1-tgi.is-reminder .a1-tgi__kind { color: var(--a1-urgent-fg); }
.a1-tgi.is-reminder.is-overdue,
.a1-tgi.is-reminder.is-done { height: 28px; }

/* overlap: two side by side, each half width (see COMPONENT-REFERENCE) */
.a1-tgi.is-split-l { right: auto; width: calc(50% - 3px); }
.a1-tgi.is-split-r { left: auto; right: 2px; width: calc(50% - 3px); }

/* A phone-sized Week column can leave an overlapping half-width item only
   ~28px wide. Keep both of its independent controls measurable: the compact
   kind control takes 14px and the editor button gets the remaining width.
   Without this override the checkbox's normal 18px + margin consumed the
   entire grid track, leaving the editor button at exactly 0px. */
@media (max-width: 720px) {
  .a1-tg:not(.a1-tg--day):not(.is-three) .a1-tgi.is-split-l,
  .a1-tg:not(.a1-tg--day):not(.is-three) .a1-tgi.is-split-r {
    grid-template-columns: 14px minmax(0, 1fr);
    padding-inline: 2px;
  }
  .a1-tg:not(.a1-tg--day):not(.is-three) .a1-tgi.is-split-l .a1-tgi__kind,
  .a1-tg:not(.a1-tg--day):not(.is-three) .a1-tgi.is-split-r .a1-tgi__kind {
    width: 14px;
    min-width: 14px;
    height: 16px;
    margin-right: 0;
    font-size: 10px;
  }
}

.a1-tg .a1-tg__events > .a1-tgi:not(.is-task):not(.is-reminder) {
  grid-template-columns: minmax(0, 1fr);
}

@container calendar-event (max-height: 28px) {
  .a1-tgi__t { display: none; }
}
@container calendar-event (max-width: 68px) {
  .a1-tgi__t { display: none; }
}
@container calendar-event (min-height: 44px) {
  .a1-tgi__n {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* long-press drag states */
.a1-tgi.is-lifted  { transform: scale(1.02); box-shadow: var(--a1-shadow-2), inset 2px 0 0 var(--a1-accent); }
.a1-tgi.is-dragging { z-index: 6; opacity: .95;
  box-shadow: var(--a1-shadow-3), inset 2px 0 0 var(--a1-accent); }
.a1-tg__dragtip { position: absolute; z-index: 7; padding: 2px 6px; border-radius: var(--a1-r-pill);
  background: var(--a1-text); color: var(--a1-bg); font: 700 9.5px/1.4 var(--a1-font-alt); white-space: nowrap; }

/* ---- 7. Zoom slider ----------------------------------------------------- */
.a1-zoom { display: flex; align-items: center; gap: var(--a1-s2); }
.a1-zoom__label { font: 600 9.5px/1 var(--a1-font-alt); color: var(--a1-text-3); white-space: nowrap; }
.a1-zoom input[type="range"] { flex: 1; min-width: 0; height: 20px; accent-color: var(--a1-accent); }

/* ---- 8. Legend ---------------------------------------------------------- */
.a1-legend { display: flex; flex-wrap: wrap; gap: var(--a1-s3); }
/* the year grid ends flush with its last row — give the legend more air there */
[data-pane="year"]:not([hidden]) ~ .a1-legend { margin-top: var(--a1-s4); }
.a1-legend__i { display: flex; align-items: center; gap: 5px;
  font: 600 10px/1 var(--a1-font); color: var(--a1-text-3); }
.a1-legend__k { width: 12px; height: 12px; border-radius: 3px;
  background: var(--a1-surface-2); box-shadow: inset 2px 0 0 var(--a1-accent); border: 1px solid var(--a1-border); }
.a1-legend__k.k-task { border-style: dashed; background: var(--a1-surface-3); box-shadow: inset 2px 0 0 var(--a1-soon-line); }
.a1-legend__k.k-rem { border: 0; background: transparent; border-radius: 50%;
  width: 8px; height: 8px; box-shadow: none; background: var(--a1-urgent-fg); }

/* ---- 9. Month view ------------------------------------------------------ */
.a1-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.a1-month__dow { text-align: center; padding-bottom: 4px;
  font: 600 10px/1 var(--a1-font); color: var(--a1-text-3); }
.a1-month__cell { position: relative; aspect-ratio: 1 / 1.08;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-top: 5px; border-radius: 8px; background: var(--a1-surface-2);
  border: 1px solid transparent; }
.a1-month__cell.is-out { background: transparent; }
.a1-month__cell.is-out .a1-month__num { color: var(--a1-text-3); opacity: .5; }
.a1-month__cell.is-today { background: var(--a1-accent-soft); }
.a1-month__cell.is-sel { border-color: var(--a1-accent); }
.a1-month__cell[role="button"] { cursor: pointer; }
.a1-month__cell[role="button"]:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 1px; }
.a1-month__num { font: 600 11.5px/1 var(--a1-font); color: var(--a1-text); }
.a1-month__cell.is-today .a1-month__num { color: var(--a1-accent); font-weight: 700; }
.a1-month__dots { display: flex; gap: 2px; }
.a1-month__dot {
  display: inline-grid; place-items: center; min-width: 10px; height: 10px; padding: 0 2px;
  border-radius: 3px; background: var(--a1-accent-soft); color: var(--a1-accent-text);
  font: 800 7px/1 var(--a1-font-alt);
}
.a1-month__dot.d-task { background: var(--a1-soon-bg); color: var(--a1-soon-fg); }
.a1-month__dot.d-rem  { background: var(--a1-urgent-bg); color: var(--a1-urgent-fg); }
.a1-month__bar { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px;
  border-radius: 2px; background: var(--a1-border-strong); }

/* ---- 10. Year view ------------------------------------------------------ */
.a1-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a1-s3); }
.a1-year__m { display: flex; flex-direction: column; gap: 3px; }
/* Same affordance the reference gives `.a1-month__cell`: the month tile opens
   that month, so it is a role=button and needs the pointer and focus ring. */
.a1-year__m[role="button"] { cursor: pointer; }
.a1-year__m[role="button"]:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 2px; border-radius: var(--a1-r-sm); }
.a1-year__mt { font: 700 10px/1 var(--a1-font); color: var(--a1-text-2); }
.a1-year__m.is-now .a1-year__mt { color: var(--a1-accent); }
.a1-year__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5px; }
.a1-year__d { aspect-ratio: 1; border-radius: 1.5px; background: var(--a1-surface-3); }
.a1-year__d.l0 { background: transparent; }
.a1-year__d.l1 { background: color-mix(in oklab, var(--a1-accent) 22%, var(--a1-surface-3)); }
.a1-year__d.l2 { background: color-mix(in oklab, var(--a1-accent) 48%, var(--a1-surface-3)); }
.a1-year__d.l3 { background: var(--a1-accent); }
/* Accent, not urgent-red (red is the Reminders legend color), and inset so
   the ring stays inside the 1.5px cell gap instead of touching neighbors. */
.a1-year__d.is-today { outline: 1.5px solid var(--a1-accent); outline-offset: -1px; }

/* ---- 11. Day-view detail rows (wider column = more room) ---------------- */
.a1-tg--day { --a1-tg-days: 1; --a1-tg-col: 240px; --a1-tg-h: 380px; }
.a1-tg--day .a1-tgi__n { font-size: 12px; white-space: normal; }
.a1-tg--day .a1-tgi__t { font-size: 10.5px; }

/* ---- 11b. 3 Day — compact by default, pinch-zoomable --------------------
   At 19px/hour the whole day stays visible as before. A deliberate zoom-in
   switches the time grid to a bounded scroller, so magnifying it does not
   stretch the entire page several screens tall.                            */
.a1-tg.is-three {
  --a1-tg-hour: 19px;
  --a1-tg-col: 40px;
}
.a1-tg.is-three .a1-tg__scroll {
  height: auto;
  overflow: hidden;
  touch-action: pan-x pan-y;
}
.a1-tg.is-three.is-zoomed .a1-tg__scroll {
  height: var(--a1-tg-h);
  overflow: auto;
}
.a1-zoom[hidden] { display: none !important; }
.a1-tg.is-three .a1-tg__hour:not(.h3) { display: none; }
.a1-tg.is-three .a1-tgi { padding: 1px 4px 1px 6px; }
.a1-tg.is-three .a1-tgi__n { font-size: 9.5px; }

.a1-tg.is-three .a1-tgi.is-reminder { height: 12px; }

/* ---- 12. Date strip (Day view header) ----------------------------------- */
.a1-datestrip { display: flex; gap: var(--a1-s2); overflow-x: auto; padding-bottom: 2px; }
.a1-datestrip__d { flex: 0 0 auto; width: 42px; padding: 6px 0 7px; border-radius: var(--a1-r-sm);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--a1-surface-2); border: 1px solid var(--a1-border); }
.a1-datestrip__d.is-sel { background: var(--a1-accent); border-color: var(--a1-accent); }
.a1-datestrip__d.is-sel .a1-tg__dow, .a1-datestrip__d.is-sel .a1-tg__date { color: var(--a1-on-accent); }

/* ---- 13. Sheet (new / edit item) ---------------------------------------- */
.a1-sheet-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(24,24,22,.32);
  display: flex; align-items: flex-end; }
.a1-sheet-scrim[hidden] { display: none; }
.a1-sheet { width: 100%; max-height: 84%; overflow: auto;
  background: var(--a1-surface); border-radius: var(--a1-r-xl) var(--a1-r-xl) 0 0;
  padding: var(--a1-s3) var(--a1-gutter) var(--a1-s6);
  box-shadow: var(--a1-shadow-3); }
.a1-sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: var(--a1-border-strong);
  margin: 0 auto var(--a1-s4); }
.a1-field { display: flex; flex-direction: column; gap: 5px; }
.a1-field__l { font: 600 10.5px/1 var(--a1-font); color: var(--a1-text-3); letter-spacing: .04em; text-transform: uppercase; }
.a1-input { width: 100%; padding: 11px 12px; border-radius: var(--a1-r-sm);
  border: 1px solid var(--a1-border); background: var(--a1-surface-2);
  font: 500 14px/1.3 var(--a1-font); color: var(--a1-text); }
.a1-input::placeholder { color: var(--a1-text-3); }
.a1-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a1-s3); }

/* ---- 15. New / edit item -------------------------------------------------
   New events use a small bottom sheet with the title and selected time. The
   student can save immediately or open the complete form. The complete form
   remains a full-screen mobile workspace because it contains course, location,
   colour, reminder, repeat, navigation, and notes controls. Both steps use the
   same form elements so moving between them never loses the draft. */
html[data-a1-skin] .calendar-compose-modal-backdrop {
  background: var(--a1-scrim, rgba(24,24,22,.42));
  backdrop-filter: blur(6px);
}
/* Flex column, not the inherited grid: a sticky grid item is clamped to its own
   grid area, so the header would have nowhere to travel and would scroll away. */
html[data-a1-skin] .calendar-compose-modal {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  background: var(--a1-surface);
  border-radius: var(--a1-r-xl);
  box-shadow: var(--a1-shadow-3);
}
/* Header and footer hold still; only the field list scrolls. The safe-area
   inset is the header's own job here — the rule in styles.css that handled it
   targets `.calendar-compose-close` as an absolutely-positioned button, and the
   close button is in the flow now. */
/* `flex-direction: row` is restated, not assumed: a mobile rule in styles.css
   (`.calendar-compose-heading, .calendar-compose-actions` at max-width 640) sets
   `column`, and winning on specificity for the properties you do declare leaves
   the ones you skip exactly where they were. */
html[data-a1-skin] .calendar-compose-modal .calendar-compose-heading {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px;
  align-items: center; gap: var(--a1-s3);
  margin: 0;
  padding: calc(var(--a1-s4) + env(safe-area-inset-top, 0px)) var(--a1-card-pad) var(--a1-s4);
  background: var(--a1-surface);
  border-bottom: 1px solid var(--a1-border);
}
html[data-a1-skin] .calendar-compose-leading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--a1-s2);
  min-width: 80px;
}
html[data-a1-skin] .calendar-compose-heading h4 {
  min-width: 0; margin: 0; text-align: center;
  font-size: var(--a1-fs-h2); font-weight: 700; color: var(--a1-text);
  letter-spacing: -.01em;
}
/* The × is positioned absolutely by styles.css and offset again by the
   safe-area rule; in a flex header it belongs in the flow. */
html[data-a1-skin] .calendar-compose-modal .calendar-compose-close,
html[data-a1-skin] .calendar-compose-modal .calendar-compose-collapse {
  position: static; top: auto; right: auto;
  flex: none; width: 34px; min-width: 34px; max-width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--a1-border); border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2); color: var(--a1-text-2);
  font-size: 17px; line-height: 1;
}

html[data-a1-skin] .calendar-compose-quick-submit {
  justify-self: end;
  min-width: 64px; min-height: 38px; padding: 8px 16px;
  border: 0; border-radius: var(--a1-r-pill);
  background: var(--a1-accent); color: var(--a1-on-accent);
  font: 700 13px/1 var(--a1-font); cursor: pointer;
  visibility: hidden; pointer-events: none;
}
html[data-a1-skin] .calendar-compose.is-quick .calendar-compose-quick-submit {
  visibility: visible; pointer-events: auto;
}
html[data-a1-skin] .calendar-compose-quick-submit:hover,
html[data-a1-skin] .calendar-compose-quick-submit:focus-visible {
  background: var(--a1-accent-hover); outline: none;
}
html[data-a1-skin] .calendar-compose-modal .calendar-compose-close:hover,
html[data-a1-skin] .calendar-compose-modal .calendar-compose-close:focus-visible,
html[data-a1-skin] .calendar-compose-modal .calendar-compose-collapse:hover,
html[data-a1-skin] .calendar-compose-modal .calendar-compose-collapse:focus-visible {
  background: var(--a1-muted-bg); color: var(--a1-text);
}

/* One column. The three-column grid was for a 720px desktop card; every field
   here is a full-width row, which is also the one inset rule. */
html[data-a1-skin] .calendar-compose-grid {
  display: flex; flex-direction: column; gap: var(--a1-s4);
  padding: var(--a1-card-pad);
}
html[data-a1-skin] .calendar-compose-grid > label,
html[data-a1-skin] .calendar-compose-grid > .calendar-location-field {
  display: flex; flex-direction: column; gap: 5px;
}
html[data-a1-skin] .calendar-compose-grid > label > span,
html[data-a1-skin] .calendar-compose-grid .calendar-location-field label span,
html[data-a1-skin] .calendar-compose-grid legend {
  font: 600 10.5px/1 var(--a1-font); color: var(--a1-text-3);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 0;
}
html[data-a1-skin] .calendar-compose-grid input:not([type="checkbox"]):not([type="radio"]),
html[data-a1-skin] .calendar-compose-grid select,
html[data-a1-skin] .calendar-compose-grid textarea {
  width: 100%; min-height: 0; padding: 11px 12px;
  border: 1px solid var(--a1-border); border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2); color: var(--a1-text);
  font: 500 14px/1.3 var(--a1-font);
}
html[data-a1-skin] .calendar-compose-grid input::placeholder,
html[data-a1-skin] .calendar-compose-grid textarea::placeholder { color: var(--a1-text-3); }
html[data-a1-skin] .calendar-compose-grid :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--a1-accent);
  box-shadow: 0 0 0 3px var(--a1-accent-soft);
}
html[data-a1-skin] .calendar-compose-grid textarea { resize: vertical; }

/* New events start as a small, keyboard-safe card. The existing form remains
   mounted underneath so Save and More details share one draft and no values
   are lost during the transition. */
html[data-a1-skin] .calendar-compose.is-quick {
  width: min(520px, calc(100% - 28px));
  max-height: min(390px, calc(var(--app-live-viewport-height, 100dvh) - 28px));
  overflow: hidden;
}
html[data-a1-skin] .calendar-compose.is-quick .calendar-compose-grid {
  padding: 22px var(--a1-card-pad) 10px;
}
html[data-a1-skin] .calendar-compose.is-quick .calendar-compose-grid > :not(#calendar-title-field) {
  display: none !important;
}
html[data-a1-skin] .calendar-compose.is-quick #calendar-title-field > span {
  display: none;
}
html[data-a1-skin] .calendar-compose.is-quick #calendar-title-field input {
  min-height: 52px; padding: 5px 2px;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  font-size: clamp(22px, 5.8vw, 28px); font-weight: 600; letter-spacing: -.02em;
}
html[data-a1-skin] .calendar-compose.is-quick #calendar-title-field input:focus-visible {
  border: 0; box-shadow: none;
}
html[data-a1-skin] .calendar-compose-quick-details {
  display: none;
  width: auto; min-width: 0; margin: 0 var(--a1-card-pad);
  padding: 13px 2px max(12px, env(safe-area-inset-bottom, 0px));
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center; gap: var(--a1-s3);
  border: 0; border-top: 1px solid var(--a1-border);
  background: transparent; color: var(--a1-text); text-align: left;
  cursor: pointer;
}
html[data-a1-skin] .calendar-compose.is-quick .calendar-compose-quick-details {
  display: grid;
}
html[data-a1-skin] .calendar-compose-quick-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--a1-accent-soft); color: var(--a1-accent-text);
}
html[data-a1-skin] .calendar-compose-quick-copy {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
html[data-a1-skin] .calendar-compose-quick-copy strong {
  overflow: hidden; color: var(--a1-text);
  font: 650 14px/1.25 var(--a1-font); text-overflow: ellipsis; white-space: nowrap;
}
html[data-a1-skin] .calendar-compose-quick-copy small {
  overflow: hidden; color: var(--a1-text-3);
  font: 500 12px/1.3 var(--a1-font); text-overflow: ellipsis; white-space: nowrap;
}
html[data-a1-skin] .calendar-compose-quick-chevron {
  color: var(--a1-text-3); font-size: 27px; line-height: 1;
}
html[data-a1-skin] .calendar-compose-quick-details:hover,
html[data-a1-skin] .calendar-compose-quick-details:focus-visible {
  color: var(--a1-text); outline: none;
}
html[data-a1-skin] .calendar-compose-quick-details:focus-visible {
  box-shadow: 0 0 0 3px var(--a1-accent-soft);
}
html[data-a1-skin] .calendar-compose.is-quick .calendar-compose-actions {
  display: none;
}
html[data-a1-skin] .calendar-compose-modal-backdrop.is-quick {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
html[data-a1-skin] .calendar-compose-modal-backdrop.is-quick .calendar-compose-modal {
  pointer-events: auto;
}

@media (max-width: 980px) {
  html[data-a1-skin] .calendar-compose-modal-backdrop.is-quick {
    position: fixed !important;
    inset: auto !important;
    top: var(--app-live-viewport-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--app-live-viewport-left, 0px) !important;
    width: var(--app-live-viewport-width, 100dvw) !important;
    height: var(--app-live-viewport-height, 100dvh) !important;
    place-items: end center !important;
    align-items: end !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html[data-a1-skin] .calendar-compose-modal.is-quick[data-mobile-dialog-float] {
    width: min(100%, 560px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(390px, var(--app-live-viewport-height, 100dvh)) !important;
    margin: 0 auto !important;
    border-radius: 24px 24px 0 0 !important;
    /* iOS could show a tall blank band above the heading: whatever stretches
       the card (stale viewport pinning, flex alignment fallbacks), the
       content must hug the top edge of the sheet, not float below it. */
    justify-content: flex-start !important;
    align-content: start !important;
    padding-top: 0 !important;
  }
  html[data-a1-skin] .calendar-compose-modal.is-quick .calendar-compose-heading {
    padding-top: 14px;
  }
}

/* Fieldsets carry the browser's own border and inline legend; the label above
   the group does that job here. */
html[data-a1-skin] .calendar-color-field,
html[data-a1-skin] .calendar-repeat-field {
  display: flex; flex-direction: column; gap: 5px;
  margin: 0; padding: 0; border: 0; background: none;
}
html[data-a1-skin] .calendar-color-options { display: flex; flex-wrap: wrap; gap: var(--a1-s2); }
/* The selected swatch was ringed in `#fff`, which was legible on the old dark
   panel and is invisible on this one. */
html[data-a1-skin] .calendar-color-swatch:has(input:checked) {
  border-color: var(--a1-surface);
  box-shadow: 0 0 0 2px var(--a1-text);
}
html[data-a1-skin] .calendar-repeat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--a1-s3);
}
html[data-a1-skin] .calendar-repeat-grid > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
html[data-a1-skin] .calendar-repeat-grid > label > span {
  font: 600 10.5px/1 var(--a1-font); color: var(--a1-text-3);
  letter-spacing: .04em; text-transform: uppercase;
}
html[data-a1-skin] .calendar-repeat-wide { grid-column: 1 / -1; }

/* All-day and privacy are switches, so each label and control belongs on one
   line. They share one component instead of slowly drifting into two styles. */
html[data-a1-skin] .calendar-compose-grid > .calendar-switch-field {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--a1-s3);
  padding: 10px 12px;
  border: 1px solid var(--a1-border); border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2);
}
html[data-a1-skin] .calendar-switch-field > span {
  text-transform: none; letter-spacing: 0;
  font: 600 14px/1.2 var(--a1-font); color: var(--a1-text);
}
html[data-a1-skin] .calendar-private-field > span {
  display: grid; gap: 3px; min-width: 0;
}
html[data-a1-skin] .calendar-private-field > span > strong {
  color: var(--a1-text); font: 600 14px/1.2 var(--a1-font);
}
html[data-a1-skin] .calendar-private-field > span > small {
  color: var(--a1-text-3); font: 500 11px/1.35 var(--a1-font);
  text-transform: none; letter-spacing: 0;
}
/* `min-height` is restated because a global `input, select { min-height: 46px }`
   (48px on mobile) beats a plain `height` no matter how specific this rule is. */
html[data-a1-skin] .calendar-switch-field input[type="checkbox"] {
  flex: none; width: 44px; height: 26px; min-height: 26px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-pill);
  background: var(--a1-surface-3); position: relative;
  transition: background .15s ease, border-color .15s ease;
}
html[data-a1-skin] .calendar-switch-field input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--a1-surface); box-shadow: var(--a1-shadow-1);
  transition: transform .15s ease;
}
html[data-a1-skin] .calendar-switch-field input[type="checkbox"]:checked {
  background: var(--a1-accent); border-color: var(--a1-accent);
}
html[data-a1-skin] .calendar-switch-field input[type="checkbox"]:checked::after { transform: translateX(18px); }

/* The enhanced datetime control: date box and the two wheels share a row. */
html[data-a1-skin] .calendar-dt {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px;
  align-items: center; gap: 10px;
  min-width: 0;
}
html[data-a1-skin] .calendar-dt.is-allday {
  display: block;
  box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%;
  overflow: hidden;
  contain: inline-size;
}
html[data-a1-skin] .calendar-dt-date {
  grid-column: 1;
  display: block;
  box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%;
}
html[data-a1-skin] .calendar-dt.is-allday .calendar-dt-date {
  inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
}
html[data-a1-skin] .calendar-dt.is-allday .calendar-dt-date::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
/* Keep the picker in a real, clipped column. Without this boundary WebKit can
   paint the translucent selection bands over the date input while resolving
   the intrinsic width of input[type=date]. */
html[data-a1-skin] .calendar-dt-time {
  grid-column: 2;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px 8px 44px;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100px; min-width: 100px; max-width: 100px;
  overflow: hidden;
  border-radius: var(--a1-r-sm);
}
html[data-a1-skin] .calendar-dt-time .calendar-wheel {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  overflow: hidden;
  contain: layout paint;
}
html[data-a1-skin] .calendar-dt-time .calendar-wheel-scroller {
  overflow-x: hidden;
}
html[data-a1-skin] .calendar-dt-colon {
  width: 8px;
  text-align: center;
}

@media (max-width: 380px) {
  html[data-a1-skin] .calendar-dt {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
  }
  html[data-a1-skin] .calendar-dt-time {
    grid-template-columns: 42px 8px 42px;
    width: 96px; min-width: 96px; max-width: 96px;
  }
  html[data-a1-skin] .calendar-dt-time .calendar-wheel {
    width: 42px; min-width: 42px; max-width: 42px;
  }
}

html[data-a1-skin] .calendar-compose-notes textarea { min-height: 72px; }

html[data-a1-skin] .calendar-compose-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a1-s3);
  margin: 0;
  padding: var(--a1-s3) var(--a1-card-pad) calc(var(--a1-s3) + env(safe-area-inset-bottom, 0px));
  background: var(--a1-surface);
  border-top: 1px solid var(--a1-border);
}
/* Save leads; Delete is destructive and sits apart from it, not beside it.
   The accent fill is restated because Save carries both `.primary-button` and
   `.compact-action-button`, which tie on specificity — and the compact rule is
   the later of the two, so unaided it wins and Save renders as a grey chip. */
html[data-a1-skin] .calendar-compose-actions #calendar-compose-submit {
  flex: 1 1 auto;
  background: var(--a1-accent);
  border-color: transparent;
  color: var(--a1-on-accent);
  font-weight: 600;
}
html[data-a1-skin] .calendar-compose-actions #calendar-compose-submit:hover:not(:disabled) {
  background: var(--a1-accent-hover);
  color: var(--a1-on-accent);
}
html[data-a1-skin] .calendar-compose-actions .calendar-compose-delete { color: var(--a1-urgent-fg); }
html[data-a1-skin] .calendar-compose-actions #calendar-compose-complete { color: var(--a1-accent-text); }
html[data-a1-skin] .calendar-compose-actions .form-message { flex-basis: 100%; }

html[data-a1-skin] .calendar-unscheduled-row.is-done { opacity: .58; }
html[data-a1-skin] .calendar-unscheduled-row.is-done .row-title { text-decoration: line-through; }
html[data-a1-skin] .calendar-unscheduled-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--a1-s2);
}
html[data-a1-skin] .calendar-unscheduled-kind {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--a1-border-strong);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
  font: 800 15px/1 var(--a1-font-alt);
}
html[data-a1-skin] button.calendar-unscheduled-kind { cursor: pointer; }
html[data-a1-skin] button.calendar-unscheduled-kind:focus-visible {
  outline: 2px solid var(--a1-accent);
  outline-offset: 2px;
}

/* When the detailed editor owns a phone, its host must paint every pixel above
   the keyboard. A transparent remainder exposed the calendar behind Location
   and other focused fields after WebKit resized the visual viewport. */
@media (max-width: 980px) {
  html[data-a1-skin] .calendar-compose-modal-backdrop:not(.is-quick) {
    background: var(--a1-surface) !important;
    backdrop-filter: none;
    isolation: isolate;
  }

  html[data-a1-skin] .calendar-compose-modal.is-detailed {
    width: var(--app-live-viewport-width, 100dvw) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--app-live-viewport-height, 100dvh) !important;
    min-height: var(--app-live-viewport-height, 100dvh) !important;
    max-height: var(--app-live-viewport-height, 100dvh) !important;
    border-radius: 0 !important;
    background: var(--a1-surface) !important;
  }
}
html[data-a1-skin] .calendar-unscheduled-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a1-s3);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---- Global Academic Assistant -----------------------------------------
   The Assistant is mounted once under <body>; feature navigation only swaps
   #feature-host, so its draft, in-flight request, and confirmation state stay
   in the same component instance. Its interface is visible only on Home. */
html[data-a1-skin] body > .global-academic-assistant-root {
  display: none;
}
html[data-a1-skin] body:is([data-active-feature="home"], [data-active-feature="assistant"]) > .global-academic-assistant-root {
  display: contents;
}

/* The Assistant route is a real app page. Its persistent shell stays mounted
   under <body>, but the page surface leaves the desktop sidebar and mobile
   bottom navigation available instead of covering them with a modal scrim. */
html[data-a1-skin] body[data-active-feature="assistant"] .academic-assistant-card.is-fullscreen.is-route {
  top: 0;
  right: 0;
  bottom: 0;
  left: 270px;
  z-index: 110;
  width: auto;
  height: var(--app-live-viewport-height, 100dvh) !important;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-a1-skin] body[data-active-feature="assistant"] .academic-assistant-card.is-route .academic-assistant-fullscreen-toggle {
  display: none;
}

html[data-a1-skin] .global-assistant-island {
  position: fixed;
  right: calc(var(--a1-s6) + var(--a1-safe-right));
  bottom: calc(var(--a1-s6) + var(--a1-safe-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--a1-s3);
  min-height: 60px;
  padding: var(--a1-s2) 18px;
  border: 1.5px solid var(--a1-border);
  border-radius: var(--a1-r-xl);
  background: var(--a1-surface);
  color: var(--a1-text);
  box-shadow: var(--a1-shadow-2);
  font: 600 var(--a1-fs-sm)/1 var(--a1-font);
  letter-spacing: -.01em;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 160ms var(--a1-ease), border-color 160ms ease, box-shadow 160ms ease;
}
html[data-a1-skin] .global-assistant-island.is-positioned {
  top: var(--assistant-island-top);
  bottom: auto;
}
html[data-a1-skin] .global-assistant-island.is-dragging {
  cursor: grabbing;
  transition: none;
}
html[data-a1-skin] .global-assistant-island.is-dragging:hover,
html[data-a1-skin] .global-assistant-island.is-dragging:active {
  transform: none;
}
html[data-a1-skin] .global-assistant-island:hover {
  transform: translateY(-1px);
  border-color: var(--a1-border-strong);
  background: var(--a1-surface-2);
  box-shadow: var(--a1-shadow-3);
}
html[data-a1-skin] .global-assistant-island:active {
  transform: translateY(0);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-assistant-island:focus-visible {
  border-color: var(--a1-accent);
  outline-color: var(--a1-accent);
  outline-offset: 3px;
  box-shadow: var(--a1-shadow-3);
}
html[data-a1-skin] .global-assistant-island-icon,
html[data-a1-skin] .global-assistant-heading-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--a1-accent-text);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-assistant-island-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--a1-r-md);
}
html[data-a1-skin] .global-assistant-note-icon {
  width: 29.282px;
  height: 29.282px;
}
html[data-a1-skin] .global-assistant-island-working {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: -3px;
  color: var(--a1-accent);
}
html[data-a1-skin] .global-assistant-island-working .academic-assistant-send-spinner {
  width: 13px;
  height: 13px;
}

html[data-a1-skin] .global-assistant-sheet-scrim {
  display: none;
}

html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact {
  position: fixed;
  right: calc(var(--a1-s6) + var(--a1-safe-right));
  bottom: calc(var(--a1-s6) + var(--a1-safe-bottom));
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 44px));
  max-height: min(610px, calc(var(--app-live-viewport-height, 100dvh) - 52px));
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-xl);
  background: var(--a1-surface);
  color: var(--a1-text);
  box-shadow: var(--a1-shadow-3);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .global-assistant-compact-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--a1-s3);
  flex: 0 0 auto;
  padding: var(--a1-s3) var(--a1-s4);
  border-bottom: 1px solid var(--a1-border);
  background: var(--a1-surface);
}
html[data-a1-skin] .global-assistant-heading {
  display: flex;
  align-items: center;
  gap: var(--a1-s3);
  min-width: 0;
}
html[data-a1-skin] .global-assistant-heading-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--a1-r-md);
}
html[data-a1-skin] .global-assistant-heading-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html[data-a1-skin] .global-assistant-heading-copy > span {
  color: var(--a1-accent-text);
  font: 600 var(--a1-fs-xs)/1.2 var(--a1-font-alt);
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-a1-skin] .global-assistant-heading-copy > .academic-assistant-header-working {
  margin: 0;
  justify-self: start;
}
html[data-a1-skin] .global-academic-assistant-root .global-assistant-heading-copy h3 {
  overflow: hidden;
  color: var(--a1-text);
  font: 700 var(--a1-fs-h3)/var(--a1-lh-tight) var(--a1-font);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-a1-skin] .global-academic-assistant-root .global-assistant-compact-header .home-service-head-actions {
  gap: var(--a1-s2);
  min-width: 0;
}
@media (max-width: 380px) {
  html[data-a1-skin] .global-assistant-heading-icon {
    display: none;
  }
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-fullscreen-toggle,
  .global-assistant-compact-close
) {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-sm);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-fullscreen-toggle,
  .global-assistant-compact-close
):hover {
  border-color: var(--a1-border-strong);
  background: var(--a1-surface-3);
  color: var(--a1-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--a1-surface);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-ready-row {
  flex: 0 0 auto;
  padding: var(--a1-s3) var(--a1-s4) var(--a1-s2);
}
html[data-a1-skin] .global-academic-assistant-root [data-assistant-clear] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 76px;
  height: 44px;
  padding: 0 10px;
  font: 600 var(--a1-fs-sm)/1.2 var(--a1-font);
}
html[data-a1-skin] .global-academic-assistant-root [data-assistant-clear]:disabled {
  opacity: 1;
  color: var(--a1-text-3);
  background: var(--a1-surface-2);
  cursor: not-allowed;
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-status.is-ready {
  min-height: 29px;
  border-color: var(--a1-ok-line);
  background: var(--a1-ok-bg);
  color: var(--a1-ok-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-status.is-warning {
  border-color: var(--a1-soon-line);
  background: var(--a1-soon-bg);
  color: var(--a1-soon-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-status.is-working {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-thread {
  flex: 1 1 auto;
  min-height: 132px;
  max-height: 292px;
  margin: 0;
  padding: var(--a1-s3) var(--a1-s4);
  border-color: var(--a1-border);
  background: var(--a1-surface-2);
  overscroll-behavior: contain;
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-message {
  max-width: 88%;
  border-color: var(--a1-border);
  background: var(--a1-surface);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-message.is-user {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-message-label,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-working .academic-assistant-send-spinner {
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-message.is-user .academic-assistant-message-label {
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-message.is-working {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-system-message.is-success {
  color: var(--a1-ok-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-inline-action-summary:hover strong,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-inline-action-summary:focus-visible strong {
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-inline-action-summary:focus-visible,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-inline-action-approve:focus-visible {
  outline-color: var(--a1-accent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-inline-action-approve {
  border-color: var(--a1-accent);
  background: var(--a1-accent);
  color: var(--a1-on-accent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-markdown code {
  background: var(--a1-surface-3);
  color: var(--a1-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-markdown pre code {
  background: transparent;
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-markdown pre {
  border-color: var(--a1-border);
  background: var(--a1-surface-3);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-citations :is(a, span) {
  border-color: var(--a1-border);
  background: var(--a1-surface-3);
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-citations a,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-citations a:hover,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-citations a:focus-visible {
  border-color: var(--a1-accent);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-ready-row .academic-assistant-course-list {
  border-color: var(--a1-border);
  background: var(--a1-surface-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course {
  background: var(--a1-surface);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course.is-available {
  background: var(--a1-surface-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course-state-dot.is-ready {
  background: var(--a1-ok-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1-ok-fg) 12%, transparent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course-state-dot.is-initializing {
  background: var(--a1-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1-accent) 12%, transparent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course-state-dot.is-available {
  background: var(--a1-text-3);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-icon-button,
  .academic-assistant-course button
) {
  border-color: var(--a1-border);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-icon-button,
  .academic-assistant-course button
):hover:not(:disabled),
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-icon-button,
  .academic-assistant-course button
):focus-visible {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course-actions .is-remove:hover:not(:disabled),
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-course-actions .is-remove:focus-visible {
  border-color: var(--a1-urgent-line);
  background: var(--a1-urgent-bg);
  color: var(--a1-urgent-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-menu {
  border-color: var(--a1-border);
  background: var(--a1-surface);
  box-shadow: var(--a1-shadow-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-menu button:hover,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-menu button:focus-visible {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-menu button:last-child:hover,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-menu button:last-child:focus-visible {
  border-color: var(--a1-urgent-line);
  background: var(--a1-urgent-bg);
  color: var(--a1-urgent-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-toast {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-integration-toast-icon {
  background: var(--a1-accent);
  color: var(--a1-on-accent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-integration-toast-connect,
  .academic-assistant-integration-toast-close
) {
  border-color: var(--a1-border);
  background: var(--a1-surface);
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-integration-toast-connect,
  .academic-assistant-integration-toast-close
):hover,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact :is(
  .academic-assistant-integration-toast-connect,
  .academic-assistant-integration-toast-close
):focus-visible {
  border-color: var(--a1-accent);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-prompts {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--a1-s2);
  overflow: visible;
  padding: var(--a1-s3) var(--a1-s4) var(--a1-s2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-prompts button {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 32px;
  height: auto;
  overflow: visible;
  padding: var(--a1-s2) var(--a1-s3);
  border-color: var(--a1-border);
  background: var(--a1-surface-2);
  color: var(--a1-text-2);
  line-height: 1.35;
  text-align: left;
  text-overflow: clip;
  white-space: normal;
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-prompts button:hover,
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-prompts button:focus-visible {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form {
  flex: 0 0 auto;
  margin: 0 var(--a1-s4) var(--a1-s4);
  border-color: var(--a1-border-strong);
  background: var(--a1-surface);
  box-shadow: none;
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form:focus-within {
  border-color: var(--a1-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1-accent) 12%, transparent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > button {
  border-color: var(--a1-accent);
  background: var(--a1-accent);
  color: var(--a1-on-accent);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > button:hover:not(:disabled) {
  border-color: var(--a1-accent-hover);
  background: var(--a1-accent-hover);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > :is(.academic-assistant-upload-button, .academic-assistant-voice-button) {
  border-color: var(--a1-border-strong);
  background: transparent;
  color: var(--a1-text-2);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > :is(.academic-assistant-upload-button, .academic-assistant-voice-button):hover:not(:disabled),
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > :is(.academic-assistant-upload-button, .academic-assistant-voice-button):focus-visible {
  border-color: var(--a1-accent);
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form > .academic-assistant-voice-button.is-recording {
  border-color: var(--a1-urgent-line);
  background: var(--a1-urgent-bg);
  color: var(--a1-urgent-fg);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-notice {
  padding-inline: var(--a1-s4);
}
html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-notice.is-error {
  color: var(--a1-urgent-fg);
}

@media (max-width: 980px) {
  html[data-a1-skin] .feature-nav button[data-mobile-nav="false"] {
    display: none !important;
  }
  html[data-a1-skin] body[data-active-feature="assistant"] .academic-assistant-card.is-fullscreen.is-route {
    top: var(--app-live-viewport-top, 0px);
    right: 0;
    bottom: calc(70px + var(--a1-safe-bottom));
    left: 0;
    z-index: 125;
    width: var(--app-live-viewport-width, 100dvw);
    height: calc(var(--app-live-viewport-height, 100dvh) - 70px - var(--a1-safe-bottom)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: var(--a1-safe-top);
  }
  html[data-a1-skin] .global-assistant-island {
    right: calc(var(--a1-s4) + var(--a1-safe-right));
    bottom: calc(72px + var(--a1-s3) + var(--a1-safe-bottom));
    width: 62px;
    min-width: 62px;
    height: 62px;
    min-height: 62px;
    padding: var(--a1-s2);
    border-color: transparent;
    border-radius: var(--a1-r-pill);
    background: var(--a1-accent-soft);
    color: var(--a1-accent-text);
  }
  html[data-a1-skin] .global-assistant-island:hover,
  html[data-a1-skin] .global-assistant-island:active {
    border-color: transparent;
    background: var(--a1-accent-soft);
  }
  html[data-a1-skin] .global-assistant-island:focus-visible {
    border-color: transparent;
  }
  html[data-a1-skin] .global-assistant-island > span:not(.global-assistant-island-icon):not(.global-assistant-island-working) {
    display: none;
  }
  html[data-a1-skin] .global-assistant-island-icon {
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--a1-accent-text);
  }
  html[data-a1-skin] .global-assistant-island .global-assistant-note-icon {
    width: 31.944px;
    height: 31.944px;
  }
  html[data-a1-skin] .global-assistant-island-working {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 19px;
    height: 19px;
    margin: 0;
    border: 2px solid var(--a1-surface);
    border-radius: 50%;
    background: var(--a1-accent-soft);
  }
  html[data-a1-skin] .global-assistant-island-working .academic-assistant-send-spinner {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
  }
  html[data-a1-skin] .global-assistant-sheet-scrim {
    position: fixed;
    inset: 0;
    bottom: calc(68px + var(--a1-safe-bottom));
    z-index: 92;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--a1-scrim) 50%, transparent);
    backdrop-filter: blur(2px);
    overscroll-behavior: none;
    touch-action: none;
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact {
    right: calc(var(--a1-s3) + var(--a1-safe-right));
    bottom: calc(72px + var(--a1-s3) + var(--a1-safe-bottom));
    left: calc(var(--a1-s3) + var(--a1-safe-left));
    z-index: 95;
    width: auto;
    height: min(62dvh, calc(var(--app-live-viewport-height, 100dvh) - 112px - var(--a1-safe-top)));
    min-height: min(50dvh, 420px);
    max-height: min(68dvh, calc(var(--app-live-viewport-height, 100dvh) - 112px - var(--a1-safe-top)));
    border-radius: var(--a1-r-xl) var(--a1-r-xl) var(--a1-r-lg) var(--a1-r-lg);
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .global-assistant-compact-header {
    padding: var(--a1-s3);
  }
  html[data-a1-skin] .global-assistant-heading-icon {
    width: 38px;
    height: 38px;
  }
  html[data-a1-skin] .global-academic-assistant-root .global-assistant-heading-copy h3 {
    font-size: 14px;
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-body {
    background: var(--a1-surface-2);
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-ready-row {
    padding: var(--a1-s3) var(--a1-s3) var(--a1-s2);
    background: var(--a1-surface);
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-thread {
    min-height: 0;
    max-height: none;
    padding: var(--a1-s3);
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-prompts {
    display: none;
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form {
    margin: 0 var(--a1-s3) var(--a1-s3);
  }
  html[data-a1-skin] .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-form textarea {
    font-size: 16px;
  }
  body.mobile-keyboard-open .global-assistant-sheet-scrim {
    bottom: 0;
  }
  html[data-a1-skin] body.mobile-keyboard-open .global-academic-assistant-root .academic-assistant-card.is-compact {
    bottom: calc(var(--app-keyboard-inset, 0px) + var(--a1-s2));
    height: min(64dvh, calc(var(--app-live-viewport-height, 100dvh) - var(--a1-s4)));
    min-height: min(50dvh, 360px);
    max-height: calc(var(--app-live-viewport-height, 100dvh) - var(--a1-s4));
  }

  /* Compact is intentionally not an aria-modal: keep its existing floating
     sheet geometry, but give it the same closed scroll boundary as a modal.
     The body class is owned by academic-assistant.js and remains present while
     compact hands off to fullscreen, so WebKit never sees an unlocked frame. */
  html[data-a1-skin].assistant-compact-open,
  html[data-a1-skin] body.assistant-compact-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html[data-a1-skin] body.assistant-compact-open[data-active-feature="home"] .home-dashboard,
  html[data-a1-skin] body.assistant-compact-open[data-active-feature="chat"] .chat-layout.chat-chat-open #chat-message-list {
    overflow-y: hidden;
    overscroll-behavior: none;
  }
  html[data-a1-skin] body.assistant-compact-open .global-academic-assistant-root .academic-assistant-card.is-compact,
  html[data-a1-skin] body.assistant-compact-open .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html[data-a1-skin] body.assistant-compact-open .global-academic-assistant-root .academic-assistant-card.is-compact .academic-assistant-thread {
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-a1-skin] .global-assistant-island {
    transition: none;
  }
}

/* A single, compact date/time row shared by Home and Calendar editors. */
html[data-a1-skin] .calendar-dt.datetime-fields,
html[data-a1-skin] .calendar-dt.datetime-fields:not(.is-allday) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  box-sizing: border-box;
  border: 1px solid var(--a1-border);
  border-radius: 12px;
  background: var(--a1-surface-2);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
html[data-a1-skin] .calendar-dt.datetime-fields input:is(.calendar-dt-date, .calendar-dt-time) {
  grid-column: auto;
  display: block;
  width: 100%; min-width: 0; max-width: 100%;
  height: 44px; min-height: 44px;
  margin: 0; padding: 8px 10px;
  border: 0; border-radius: 11px;
  background: transparent;
  color: var(--a1-text);
  font: 500 16px/1.25 var(--a1-font);
  font-variant-numeric: tabular-nums;
  text-align: start;
  box-shadow: none;
}
html[data-a1-skin] .calendar-dt.datetime-fields:not(.is-allday) input.calendar-dt-date {
  border-start-end-radius: 0; border-end-end-radius: 0;
}
html[data-a1-skin] .calendar-dt.datetime-fields input.calendar-dt-time {
  border-inline-start: 1px solid var(--a1-border);
  border-start-start-radius: 0; border-end-start-radius: 0;
}
html[data-a1-skin] .calendar-dt.datetime-fields:focus-within {
  border-color: var(--a1-accent);
  box-shadow: 0 0 0 3px var(--a1-accent-soft);
}
html[data-a1-skin] .calendar-dt.datetime-fields input:focus-visible {
  outline: none; box-shadow: none;
  background: var(--a1-accent-soft);
}
html[data-a1-skin] .datetime-fields input::-webkit-datetime-edit { padding: 0; }
html[data-a1-skin] .datetime-fields input::-webkit-calendar-picker-indicator {
  margin: 0; padding: 2px; flex-shrink: 0;
}
html[data-a1-skin] .calendar-dt.datetime-fields.is-allday { display: block; }
html[data-a1-skin] .calendar-dt.datetime-fields.is-allday input.calendar-dt-time { display: none; }
@media (max-width: 360px) {
  html[data-a1-skin] .calendar-dt.datetime-fields input:is(.calendar-dt-date, .calendar-dt-time) {
    padding-inline: 8px;
  }
}

/* Undated items stay behind a narrow footer, leaving the grid full height. */
html[data-a1-skin] body[data-active-feature="calendar"] #calendar-unscheduled:not(:empty) {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  padding: 0 8px;
  overflow: hidden;
  border-top: 1px solid var(--a1-border);
  background: var(--a1-surface);
}
html[data-a1-skin] #calendar-unscheduled .calendar-undated-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a1-text-2);
  font: 600 12px/1 var(--a1-font);
  cursor: pointer;
}
html[data-a1-skin] #calendar-unscheduled .calendar-undated-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--a1-accent-soft);
  color: var(--a1-accent-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
html[data-a1-skin] #calendar-unscheduled .calendar-undated-chevron { color: var(--a1-text-3); }
html[data-a1-skin] #calendar-unscheduled .calendar-undated-entry:focus-visible {
  outline: 2px solid var(--a1-accent);
  outline-offset: -3px;
  border-radius: 8px;
}

html[data-a1-skin] .event-reminder-field { display: grid; gap: 8px; min-width: 0; }
html[data-a1-skin] .event-reminder-field > label { display: grid; gap: 6px; margin: 0; color: var(--a1-text-2); font-size: 13px; }
html[data-a1-skin] .event-reminder-field select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--a1-border); border-radius: 10px; background: var(--a1-surface); color: var(--a1-text); font-size: 16px; }

html[data-a1-skin] .calendar-change-review { min-width: 0; color: var(--a1-text); }
html[data-a1-skin] .calendar-change-review :is(h3,h4,p) { margin: 0 0 10px; overflow-wrap: anywhere; }
html[data-a1-skin] .calendar-change-review h3 { font-size: 18px; }
html[data-a1-skin] .calendar-change-review h4 { font-size: 15px; }
html[data-a1-skin] .calendar-change-review :is(p,small) { font-size: 13px; line-height: 1.6; }
html[data-a1-skin] .calendar-change-row { padding: 14px 0; border-top: 1px solid var(--a1-border); margin-top: 14px; }
html[data-a1-skin] .calendar-change-label { color: var(--a1-text-3); font-size: 11px; font-weight: 600; }
html[data-a1-skin] .calendar-change-review summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; }
html[data-a1-skin] .calendar-change-history { margin-top: 16px; }
html[data-a1-skin] .home-calendar-change-link { display: block; text-align: center; margin: 16px 0; }
html[data-a1-skin] .course-calendar-update-receipt { padding: 12px; background: var(--a1-accent-soft); border-radius: 10px; }

/* Schedule updates: show changed facts first; prose and history are optional. */
html[data-a1-skin] .calendar-change-review .calendar-change-row { margin-top: 10px; padding: 12px 0 2px; }
html[data-a1-skin] .calendar-change-review .calendar-change-dates { color: var(--a1-text-2); }
html[data-a1-skin] :is(.calendar-change-history, .home-notification-settings, .calendar-change-more) > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; color: var(--a1-text-2); overflow-wrap: anywhere; }
html[data-a1-skin] .calendar-change-history { border-top: 1px solid var(--a1-border); }
html[data-a1-skin] .home-schedule-history-link { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; min-height: 44px; padding: 10px 0; font-size: 13px; overflow-wrap: anywhere; }
html[data-a1-skin] .calendar-change-notes p { white-space: pre-wrap; }

html[data-a1-skin] .calendar-change-state { display: inline-block; margin: 0 0 8px; color: var(--a1-text-2); font-size: 12px; font-weight: 600; }
html[data-a1-skin] .calendar-change-row-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
html[data-a1-skin] .calendar-change-row-heading h4 { margin: 0; font-size: 14px; }
html[data-a1-skin] .calendar-change-count { color: var(--a1-text-2); font-size: 12px; }
html[data-a1-skin] .calendar-change-kind { padding: 3px 7px; border-radius: 6px; background: var(--a1-accent-soft); color: var(--a1-text); font-size: 12px; font-weight: 600; }
html[data-a1-skin] .calendar-change-kind.removed { background: var(--a1-surface-2); }
html[data-a1-skin] .calendar-change-delta { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 16px; overflow-wrap: anywhere; }
html[data-a1-skin] .calendar-change-old { color: var(--a1-text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
html[data-a1-skin] .calendar-change-new { min-width: 0; padding: 10px; border-radius: 9px; background: var(--a1-accent-soft); color: var(--a1-text); }
html[data-a1-skin] .calendar-change-arrow { font-size: 22px; text-align: center; color: var(--a1-text-2); }
html[data-a1-skin] .calendar-change-delta-long { grid-template-columns: minmax(0,1fr); font-size: 13px; white-space: pre-wrap; }
html[data-a1-skin] .calendar-change-delta-long .calendar-change-arrow { justify-self: center; width: 26px; height: 26px; line-height: 26px; transform: rotate(90deg); }
html[data-a1-skin] .calendar-change-note-text { white-space: pre-wrap; }
html[data-a1-skin] .calendar-change-review .calendar-change-retained { font-size: 12px; color: var(--a1-text-2); }
html[data-a1-skin] .calendar-change-review-notes > details > summary { padding: 4px 0; font-weight: 700; }
html[data-a1-skin] .calendar-change-note-detail { min-width: 0; padding: 10px 0; border-top: 1px solid var(--a1-border); font-size: 13px; overflow-wrap: anywhere; }
html[data-a1-skin] .calendar-change-note-detail strong { display: block; }
html[data-a1-skin] .calendar-change-note-detail span { color: var(--a1-text-2); }
html[data-a1-skin] .calendar-change-note-detail p { margin: 6px 0 0; white-space: pre-wrap; }

/* Canvas assignment: instructions, a private receipt, then explicit hand-in. */
.canvas-assignment-dialog [hidden] { display: none !important; }
.canvas-assignment-dialog > header { flex-shrink: 0; }
.canvas-assignment-dialog > header > div { min-width: 0; }
.canvas-assignment-dialog h2 { font-size: 22px; line-height: 1.35; margin: 4px 0 8px; }
.canvas-assignment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; flex-shrink: 0; }
.canvas-assignment-toolbar a { font-size: 13px; color: var(--a1-accent-text); padding: 12px 0; white-space: nowrap; }
html[data-a1-skin] .canvas-assignment-dialog .canvas-assignment-toolbar > button { width: auto; flex: 0 0 auto; }
.canvas-assignment-status { margin: 6px 24px 12px; font-size: 12px; line-height: 1.5; color: var(--a1-text-2); overflow-wrap: anywhere; flex-shrink: 0; }
.canvas-assignment-receipt { margin: 0 24px 12px; padding: 12px 16px; background: var(--a1-accent-soft); border-left: 3px solid var(--a1-accent); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.canvas-assignment-dialog .canvas-history-content { border-top: 1px solid var(--a1-border); overscroll-behavior: contain; }
.canvas-assignment-dialog section + section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--a1-border); }
.canvas-assignment-dialog h3 { font-size: 16px; margin-bottom: 16px; }
.canvas-assignment-dialog h4 { font-size: 14px; margin: 16px 0 10px; }
.canvas-assignment-dialog :is(button, input, select, textarea) { font-family: inherit; }
.canvas-assignment-dialog button:disabled { cursor: default; opacity: .55; }
.canvas-assignment-dialog .ghost-button { padding: 10px 14px; background: var(--a1-surface); color: var(--a1-text); border: 1px solid var(--a1-border); border-radius: 10px; }
.canvas-assignment-dialog .primary-button { padding: 12px 18px; background: var(--a1-accent); color: var(--a1-on-accent); border: 0; border-radius: 10px; font-weight: 600; }
.canvas-assignment-stamp { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 16px; border-radius: 10px; background: var(--a1-surface-2); }
.canvas-assignment-stamp.is-submitted { border-left: 3px solid var(--a1-accent); background: var(--a1-accent-soft); }
.canvas-assignment-stamp span { font-size: 12px; color: var(--a1-text-2); overflow-wrap: anywhere; }
.canvas-assignment-dialog summary { min-height: 44px; padding: 12px 0; cursor: pointer; overflow-wrap: anywhere; font-size: 14px; }
.canvas-assignment-file iframe { width: 100%; height: 55vh; margin-top: 12px; border: 1px solid var(--a1-border); border-radius: 8px; }
.canvas-assignment-dialog a { overflow-wrap: anywhere; }
.canvas-assignment-comment { padding: 12px 0; font-size: 13px; }
.canvas-assignment-comment small { display: block; margin-top: 4px; color: var(--a1-text-3); }
.canvas-assignment-comment p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.canvas-assignment-dialog fieldset { display: grid; gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
.canvas-assignment-dialog fieldset > label { display: grid; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; }
.canvas-assignment-dialog :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--a1-border); border-radius: 10px; background: var(--a1-surface); color: var(--a1-text); font-size: 16px; }
.canvas-assignment-dialog textarea { resize: vertical; line-height: 1.6; }
.canvas-assignment-dialog input::file-selector-button { padding: 8px; margin-right: 8px; border: 0; border-radius: 6px; background: var(--a1-surface-2); color: var(--a1-text); }
.canvas-assignment-dialog :is(small, [data-unavailable], .canvas-assignment-group) { font-size: 12px; font-weight: 400; color: var(--a1-text-2); line-height: 1.6; }
.canvas-assignment-dialog [data-unavailable]:empty { display: none; }
.canvas-assignment-review { margin-top: 20px; padding: 16px; border: 1px solid var(--a1-accent); border-radius: 12px; background: var(--a1-accent-soft); }
.canvas-assignment-review h4 { margin-top: 0; }
.canvas-assignment-review p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.canvas-assignment-review [data-review-content] { white-space: pre-wrap; max-height: 220px; overflow: auto; padding: 12px; border-radius: 8px; background: var(--a1-surface); }
.canvas-assignment-review > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.canvas-assignment-dialog :is(button, a, summary, input, textarea, select):focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 3px; }
@media (max-width: 980px) {
  .canvas-assignment-dialog h2 { font-size: 20px; }
  .canvas-assignment-toolbar { padding: 0 18px; }
  .canvas-assignment-status { margin-inline: 18px; }
  .canvas-assignment-receipt { margin-inline: 18px; }
}

.global-academic-assistant-root .academic-assistant-mode-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; padding: 2px 12px 8px;
}
.global-academic-assistant-root .academic-assistant-mode-row > span {
  color: var(--a1-text-3); font-size: 11px; font-weight: 750;
}
.global-academic-assistant-root .academic-assistant-mode-switch {
  display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 154px; padding: 2px; border: 1px solid var(--a1-border);
  border-radius: 10px; background: var(--a1-surface-2);
}
.global-academic-assistant-root .academic-assistant-mode-switch button {
  min-width: 0; min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--a1-text-2); font: inherit; font-size: 12px;
  font-weight: 750; line-height: 1; cursor: pointer;
}
.global-academic-assistant-root .academic-assistant-mode-switch button[aria-pressed="true"] {
  background: var(--a1-accent); color: var(--a1-on-accent);
  box-shadow: var(--a1-shadow-1);
}
.global-academic-assistant-root .academic-assistant-mode-switch button:focus-visible {
  outline: 2px solid var(--a1-accent); outline-offset: 2px;
}
.global-academic-assistant-root .academic-assistant-mode-switch button:disabled {
  cursor: default; opacity: 0.62;
}
@media (max-width: 360px) {
  .global-academic-assistant-root .academic-assistant-mode-row { align-items: stretch; flex-direction: column; }
  .global-academic-assistant-root .academic-assistant-mode-switch { width: 100%; box-sizing: border-box; }
}