/* Day workstream (polish): Today and Notes on the web. Loaded after shell.css,
   so a rule here with the same selector wins.

   The assistant's home: the name sits closer to the rail and smaller, so the
   Today card starts about 36px higher (the phone's version of this is the
   day's own first row, components/pages/TodayPage.tsx). */
.chat-home { gap: 8px; }
.chat-wordmark.top { font-size: 22px; line-height: 28px; }
.chat-home .fund-pill + .chat-wordmark { line-height: 28px; }

/* The lit streak pill is cream in every theme, so its number keeps the
   phone's brown rather than the theme's ink (white on cream in dark mode). */
.today-streak.lit { color: #6B4A0F; }

/* A narrow window: the row's actions (rename, remind, skip, delete...) are
   invisible until the row is touched, but they still took their width, so a
   short line like "Study for an hour" wrapped a word to a line. They leave
   the layout until the row is hovered or has focus; a bell that is on stays. */
@media (max-width: 520px) {
  .today-item:not(:hover):not(:focus-within) .today-x:not(.on) { display: none; }
}

/* Today, split by profile (6 Oct 2026): the notches are All, Personal, Learn,
   Work. All is a word, not a profile, so it is only as wide as it needs and
   the three keep room for "Personal" at 320px. Under All the profile you are
   in wears a ring in its colour (persona.js sets --ring), and every thing on
   the day says where it is from with a small tag (persona.js personaTag). */
.persona-tab.all { flex: 0 0 auto; padding: 0 11px; }
.persona-tab { position: relative; }
.persona-tab.here { color: var(--ink); }
/* Under the name, out of the row, so it costs "Personal" no width. */
.persona-tab.here::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ring, var(--ink-muted));
}
/* A 320-wide phone: four notches in 288px, and "Personal" whole. */
@media (max-width: 360px) {
  .persona-tab { gap: 3px; padding: 0 3px; font-size: 12px; }
  .persona-tab svg { width: 12px; height: 12px; }
  .persona-tab.all { padding: 0 8px; }
}
.persona-tag {
  flex: none; align-self: center; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  padding: 3px 6px; border-radius: 6px;
  color: var(--tag-ink, var(--ink-muted)); background: var(--tag-bg, var(--surface-2, transparent));
}
.today-tick .persona-tag { margin-left: auto; }
/* A URL with no spaces breaks rather than running under the tag. */
.today-itemtext, .today-ticktext { overflow-wrap: anywhere; min-width: 0; }
/* The tag's second place, under the words: only on a 320-wide screen, where
   beside them it would leave the words 130px. */
.today-tagline { display: none; margin-top: 4px; }
.today-tagline .persona-tag { display: inline-block; }
@media (max-width: 360px) {
  .today-tagline { display: block; }
  .today-item > .persona-tag { display: none; }
}
.today-moverow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.today-moverow .btn { display: inline-flex; align-items: center; gap: 6px; }
.today-moverow .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }

/* The row's actions (remind, edit, copy, move, snooze, mark, remove) are one
   group. A narrow window takes them out of the row until it is touched (the
   rule above), and the row's own bell is the one it shows. A wide one used
   to keep their width, invisible, all the time — with the profile tag beside
   the words that left a short line wrapping at 150px. So there the group
   comes up over the row's end on hover, opaque, bell and all, and the words
   keep the width; the row's own bell stays only while a reminder is on. */
.today-item { position: relative; }
.today-actions { display: flex; align-items: center; gap: 2px; flex: none; }
@media (max-width: 520px) {
  .today-actions .today-bell { display: none; }
  /* Empty until the row is touched, so it takes no gap either — and then a
     line of its own under the words, which keep the row's width. */
  .today-item:not(:hover):not(:focus-within) .today-actions { display: none; }
  .today-item { flex-wrap: wrap; }
  .today-actions { flex-basis: 100%; justify-content: flex-end; gap: 4px; padding-top: 2px; }
  /* A finger, not a pointer: each action a 36px box. */
  .today-actions .today-x { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 521px) {
  .today-item > .today-bell:not(.on) { display: none; }
  .today-actions {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    padding: 4px 6px; border-radius: 10px;
    /* The row's own colour (surface over the page), made solid. */
    background: linear-gradient(var(--surface), var(--surface)), var(--bg);
    box-shadow: 0 0 0 1px var(--border);
    opacity: 0; pointer-events: none; transition: opacity 120ms;
  }
  .today-item:hover .today-actions, .today-item:focus-within .today-actions { opacity: 1; pointer-events: auto; }
}

/* ==== 10 Oct 2026: the face beside the Calendar tab ======================
   The user: "make it smaller and stick it between the move button and the
   days of the week (shouldn't move days of week down at all) … Dont make
   text unreadable tho so mainly focus on shrinking the circle guy."
   The Calendar tab's row is exactly as tall as the tab alone was (its 24px
   and the 2px over it), and the tab's own pull-up onto the strip moves to
   the row — so the days stand where they stood, and the list starts higher
   by the whole height of the big face. */
.today-calrow { display: flex; align-items: center; gap: 10px; height: 26px; margin: 2px 0 -6px; }
.today-calrow .today-caltab { margin: 0 !important; flex: none; }
.buddy-mini { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.buddy-mini-line { min-width: 0; font-size: 13.5px; line-height: 15px; font-weight: 700; color: var(--ink); text-align: right; display: block; overflow-wrap: break-word; }
.buddy-mini .buddy-angry { animation-name: buddy-shake-mini; }
.buddy-mini .buddy-sad { animation-name: buddy-sag-mini; }
.buddy-mini .buddy-happy, .buddy-mini .buddy-done { animation-name: buddy-hop-mini; }
@keyframes buddy-shake-mini { 0%, 16%, 100% { transform: translateX(0); } 2%, 7%, 12% { transform: translateX(-1.2px); } 4.5%, 9.5%, 14% { transform: translateX(1.2px); } }
@keyframes buddy-sag-mini { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes buddy-hop-mini { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.5px); } }

/* ==== 10 Oct 2026: Today, one layout per profile ==========================
   pages/today-desk.js (../todayLayouts.mjs is the rule). Since 19 Oct 2026
   the desks' parts stand in School's Study view (pages/school-study.js) and
   Hours' "Waiting on you" (pages/work-waiting.js). The phone's components/today/Parts.tsx. */
.today-head.on-desk { margin-bottom: 0; }
.desk { display: flex; flex-direction: column; gap: 10px; }
.desk-label { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 4px 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink-muted); }
.desk-plan, .work-queue { display: flex; flex-direction: column; gap: 7px; }
.desk-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; min-height: 36px; }
.desk-head .desk-date { flex: 1; min-width: 0; min-height: 36px; justify-content: flex-start; font-size: 19px; }
.desk-count { font-size: 13px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.desk-empty { padding: 2px 6px 0; font-size: 13px; line-height: 19px; }
.desk-week { display: flex; padding: 0 2px; }
.desk-weekday { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; padding: 4px 0; border: 0; background: none; font: inherit; color: var(--ink-muted); cursor: pointer; border-radius: 12px; }
.desk-weekday:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.desk-weekletter { font-size: 11px; font-weight: 700; }
.desk-weeknum { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); box-sizing: border-box; }
.desk-weekday.now .desk-weekletter, .desk-weekday.on .desk-weekletter { color: var(--ink); }
.desk-weekday.now .desk-weeknum { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; }
.desk-weekday.on .desk-weeknum { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 800; }
.desk-weekday:hover:not(.on) .desk-weeknum { background: var(--accent-soft); }
.desk-weekdot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.desk-weekday.open .desk-weekdot { background: var(--ink-faint); }
.desk-weekday.part .desk-weekdot { background: var(--accent); }
.desk-weekday.done .desk-weekdot { background: var(--success); }
.desk-listcard { border: 1px solid var(--border); background: var(--surface); border-radius: 18px; overflow: hidden; }
.desk-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 13px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; box-sizing: border-box; }
.desk-row:first-child { border-top: 0; }
.desk-row.plain { cursor: default; }
.desk-row:not(.plain):not(.off):hover { background: var(--accent-soft); }
.desk-row:focus-visible, .learn-tile:focus-visible, .learn-class:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.desk-row.off, .learn-tile.off { opacity: 0.5; cursor: default; }
.desk-rowicon { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.desk-rowicon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 34; }
.desk-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.desk-rowtext b { font-size: 15px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.desk-rowtext span { font-size: 12.5px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.desk-rown { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.desk-chev { flex: none; display: inline-flex; color: var(--ink-faint); }
.desk-chev svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 44; }
.desk-fold { margin-top: 6px; }
.desk-fold > summary { list-style: none; cursor: pointer; padding: 8px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-muted); }
.desk-fold > summary::-webkit-details-marker { display: none; }
.desk-fold > summary::before { content: '›'; display: inline-block; width: 14px; transition: transform .15s ease; }
.desk-fold[open] > summary::before { transform: rotate(90deg); }
.today-item.lead { padding: 16px 13px; border-radius: 16px; border-color: var(--ink-faint); }
.today-item.lead .today-itemtext { font-size: 17.5px; line-height: 23px; font-weight: 700; }
.today-item.lead .today-check { color: var(--ink); }

/* ---- Learn ---- */
.learn-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--learn-course, var(--accent)); display: inline-block; }
.learn-hero { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; border: 1px solid var(--border); background: var(--accent-soft); }
.learn-kicker { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink-muted); min-width: 0; }
.learn-kicker span { white-space: normal; overflow-wrap: break-word; }
.learn-hero-title { font-size: 22px; line-height: 27px; font-weight: 800; color: var(--ink); }
.learn-hero-line { font-size: 14px; line-height: 19px; color: var(--ink-muted); }
.learn-hero-bar { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.learn-track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-solid); overflow: hidden; }
.learn-track > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.learn-track > i.done { background: var(--success); }
.learn-hero-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 6px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--ink); color: var(--bg); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.learn-hero-btn:hover:not(:disabled) { opacity: 0.88; }
.learn-hero-btn:disabled { opacity: 0.5; cursor: default; }
.learn-hero-btn svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 34; }
.learn-err { font-size: 12.5px; color: var(--danger); }
.learn-classes { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 10px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; }
.learn-classes::-webkit-scrollbar { display: none; }
.learn-class { display: flex; flex-direction: column; gap: 6px; min-height: 142px; padding: 13px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.learn-class:hover { border-color: var(--ink-faint); }
.learn-class-name { display: flex; align-items: flex-start; gap: 7px; font-size: 14.5px; line-height: 19px; font-weight: 700; flex: 1; }
.learn-class-name .learn-dot { margin-top: 5px; }
.learn-class-name span { display: block; overflow-wrap: break-word; }
.learn-class-ready { display: flex; align-items: baseline; gap: 6px; }
.learn-class-ready b { font-size: 24px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.learn-class-ready span { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.learn-class-ready span.alone { font-size: 14px; line-height: 28px; font-weight: 700; color: var(--ink); }
.learn-class .learn-track { flex: none; height: 5px; background: var(--accent-soft); }
.learn-class-line { font-size: 12.5px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.learn-class-line.waiting { color: var(--accent); font-weight: 700; }
.learn-class-line.quiet { color: var(--ink-faint); }
.learn-class.add { align-items: center; justify-content: center; gap: 4px; border-style: dashed; background: none; color: var(--ink-muted); font-size: 13.5px; font-weight: 700; }
.learn-class.add svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 36; }
.learn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.learn-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: 13px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.learn-tile:not(.off):hover { border-color: var(--ink-faint); }
.learn-tile b { margin-top: 4px; font-size: 15px; font-weight: 700; }
.learn-tile > span:last-child { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.learn-pick { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.learn-pick .btn { justify-content: flex-start; gap: 8px; }
.learn-arch-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 36px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-muted); text-align: left; cursor: pointer; }
@media (min-width: 720px) {
  .learn-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Work ---- */
.work-clock { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-radius: 22px; background: var(--ink); color: var(--bg); }
.work-clock-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; opacity: 0.85; white-space: normal; overflow-wrap: break-word; }
.work-clock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.work-clock.on .work-clock-dot { background: var(--success); }
.work-clock-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.work-clock-big { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.work-clock-figure { font-size: clamp(28px, 9vw, 38px); line-height: 44px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.work-clock-note { font-size: 13px; opacity: 0.7; }
.work-clock-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 23px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.work-clock-btn:disabled { opacity: 0.5; cursor: default; }
.work-clock-btn svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
/* Earlier and Clock in wrap under the figure together; the key and the wheel (org/clockStart.js) drawn for the dark card. */
.work-clock-acts { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; max-width: 100%; min-width: 0; }
.work-clock-acts > .work-clock-btn { flex: 0 1 auto; min-width: 0; text-align: center; line-height: 1.2; }
.work-clock .clock-earlier { min-height: 46px; border-radius: 23px; border-color: var(--bg); color: var(--bg); }
.work-clock .clock-earlier.open { width: 46px; }
.work-clock .clock-start { margin-top: 4px; background: var(--bg); color: var(--ink); border-color: transparent; }
.work-clock-stats { display: flex; margin-top: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.work-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.work-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: 0.65; white-space: nowrap; }
.work-stat-value { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-queue .desk-label { padding-top: 6px; }
.work-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 800; letter-spacing: 0; box-sizing: border-box; }
.work-waiting { display: flex; flex-direction: column; gap: 8px; }
.work-waiting[hidden] { display: none; }
.work-waiting .desk-row.has .desk-rowicon { background: var(--ink); color: var(--bg); }
.work-waiting .desk-row:not(.has) .desk-rowicon { color: var(--ink-muted); }
.work-waiting .desk-row.has .desk-rowtext span { color: var(--ink); }
@media (max-width: 359px) {
  /* A 320 phone: the running shift's figure and its button share one row with room to spare. */
  .work-clock-btn { min-height: 44px; padding: 0 14px; }
  .work-clock .clock-earlier { min-height: 44px; padding: 0 12px; }
  .work-clock .clock-earlier.open { width: 44px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .buddy-mini .buddy-face { animation: none; }
  .desk-fold > summary::before { transition: none; }
}

/* ---- Today's top row: the notches left, the alarm button right (13 Oct 2026) ----
   The user: "Move the All, Personal, Learn, and Work oval to be centered to
   the left and then with the space on the right add a nice easy to click
   alarm icon … it should say none set or the time if it's set." One row,
   one height (40px; 44+ to hit), the oval taking what the button leaves.
   The phone's TodayPage ctrlRow + components/today/AlarmPill.tsx. */
.today-ctrl { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; margin: 4px auto 8px; box-sizing: border-box; }
.chat-home > .today-ctrl { margin: 0 auto; }
.today-ctrl > .persona-tabs { flex: 1 1 0; min-width: 0; max-width: none; height: 40px; margin: 0; border-radius: 20px; }
.today-ctrl .persona-tab { height: 34px; border-radius: 17px; position: relative; flex: 1 1 auto; }
/* 44 to hit, 34 to see. */
.today-ctrl .persona-tab::before { content: ''; position: absolute; inset: -5px 0; }
/* All is a word, not a profile: as wide as it needs, so the three keep room for "Personal". */
.today-ctrl .persona-tab.all { flex: none; padding: 0 12px; }
@media (max-width: 399px) {
  .today-ctrl .persona-tab svg { display: none; }
  .today-ctrl .persona-tab { padding: 0 3px; font-size: 12.5px; }
  .today-ctrl .persona-tab.all { padding: 0 9px; }
}
/* A 320 phone: tighter still, so every name stands whole beside "None set". */
@media (max-width: 359px) {
  .today-ctrl { gap: 6px; }
  .today-ctrl .persona-tabs { gap: 0; }
  .today-ctrl .persona-tab { padding: 0 2px; font-size: 11.5px; letter-spacing: -0.1px; }
  .today-ctrl .persona-tab.all { padding: 0 7px; }
  .today-ctrl .alarm-pill { padding: 0 9px; gap: 4px; font-size: 13px; }
  .today-ctrl .alarm-pill svg { width: 16px; height: 16px; }
  /* "Fri / 10:30 PM", the widest it gets: a size smaller, so the names still stand whole. */
  .today-ctrl .alarm-pill:has(.has-day) { padding: 0 8px; gap: 3px; }
  .today-ctrl .alarm-pill:has(.has-day) svg { width: 14px; height: 14px; }
  .alarm-pill-text.has-day .alarm-pill-time { font-size: 12.5px; }
}
.alarm-pill {
  flex: none; height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; position: relative;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--ink-muted);
  font: inherit; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.alarm-pill::before { content: ''; position: absolute; inset: -4px; }
.alarm-pill:hover { background: var(--accent-soft); }
.alarm-pill:active { transform: scale(0.96); }
.alarm-pill svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 36; }
.alarm-pill.set { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.alarm-pill.set svg { stroke: var(--accent); }
.alarm-pill-slot { display: contents; }
.alarm-pill-text { display: inline-flex; align-items: baseline; gap: 4px; }
.alarm-pill-day { font-size: inherit; }
/* A phone-sized screen: the weekday stands over the time, so the names beside the button keep their room. */
@media (max-width: 399px) {
  .alarm-pill-text.has-day { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05; }
  .alarm-pill-text.has-day .alarm-pill-day { font-size: 10.5px; letter-spacing: 0.3px; color: var(--ink-muted); }
  .alarm-pill-text.has-day .alarm-pill-time { font-size: 13.5px; }
}
.alarm-menu-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Under the time, lined up with it: 14 (row) + 28 (face) + 4 + 11 (gap). */
.alarm-menu-skip { align-self: flex-start; margin: -4px 0 9px 57px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 11px; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-muted); cursor: pointer; position: relative; white-space: nowrap; }
.alarm-menu-skip::before { content: ''; position: absolute; inset: -10px -4px; }
.alarm-menu-skip.on { color: var(--accent); }
.alarm-menu-skip:hover { background: var(--accent-soft); }
/* The list under the button: in place, from its corner — ~220ms in on a spring, 160ms out. */
.alarm-menu-back { position: fixed; inset: 0; z-index: 900; }
.alarm-menu {
  position: fixed; z-index: 901; box-sizing: border-box; max-height: min(420px, 70vh); overflow: auto;
  background: var(--surface-solid, var(--bg)); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); transform-origin: top right;
  opacity: 0; transform: translateY(-8px) scale(0.94); transition: opacity 160ms ease, transform 160ms ease;
}
.alarm-menu.open { opacity: 1; transform: none; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.alarm-menu-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; min-height: 60px; }
.alarm-menu-row + .alarm-menu-row { border-top: 1px solid var(--border); }
.alarm-menu-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 8px 0 8px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); min-height: 56px; }
.alarm-menu-face { flex: none; width: 28px; height: 28px; display: inline-flex; margin-right: 4px; }
.alarm-menu-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* The label on its own line under the time, whole (19 Oct 2026: no text cut short). */
.alarm-menu-time { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.alarm-menu-label { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); margin: 1px 0 0; }
.alarm-menu-bits { font-size: 12px; color: var(--ink-faint); white-space: normal; overflow-wrap: break-word; }
.alarm-menu-row.off .alarm-menu-time, .alarm-menu-row.off .alarm-menu-label { color: var(--ink-faint); }
.alarm-menu-new { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--accent); cursor: pointer; text-align: left; }
.alarm-menu-new:hover, .alarm-menu-main:hover { background: var(--accent-soft); }
.alarm-menu-plus { width: 28px; height: 28px; border-radius: 14px; background: var(--accent); display: inline-grid; place-items: center; flex: none; }
.alarm-menu-plus svg { width: 16px; height: 16px; stroke: var(--bg); fill: none; stroke-width: 48; }

/* ---- Unsettled, at the top of the list (13 Oct 2026) ----
   What the days before today left as a question, settled where it stands
   (pages/today.js unsettledSection; the phone's components/today/Unsettled.tsx). */
/* flex: none — .today is a flex column of fixed height, and an overflow-hidden child would be shrunk to nothing (the band's old trap). */
.unsettled { flex: none; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.unsettled-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px 0 12px; }
.unsettled-face { width: 26px; height: 26px; display: inline-flex; flex: none; }
.unsettled-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.unsettled-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; box-sizing: border-box; }
.unsettled-row { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; min-height: 56px; border-top: 1px solid var(--border); }
.unsettled-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 0 9px 12px; border: 0; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; min-height: 56px; }
.unsettled-main:hover .unsettled-check svg { stroke: var(--success); }
.unsettled-check svg { width: 23px; height: 23px; stroke: var(--ink-faint); fill: none; stroke-width: 32; flex: none; display: block; }
.unsettled-school { width: 23px; height: 23px; border-radius: 12px; background: var(--accent); display: inline-grid; place-items: center; flex: none; }
.unsettled-school svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 40; }
.unsettled-words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.unsettled-text { font-size: 15.5px; line-height: 20px; overflow-wrap: anywhere; }
.unsettled-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.unsettled-sub.late { color: var(--danger); }
.unsettled-btn { flex: none; width: 34px; height: 34px; border-radius: 17px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-muted); display: inline-grid; place-items: center; cursor: pointer; position: relative; }
.unsettled-btn::before { content: ''; position: absolute; inset: -5px; }
.unsettled-btn:hover { background: var(--accent-soft); color: var(--ink); }
.unsettled-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
@media (max-width: 499px) { .unsettled-btn.wide { display: none; } }
/* The bin removes for good: a step apart from the X, and red under the pointer. */
.unsettled-btn.wide { margin-left: 6px; }
.unsettled-btn.wide:hover { color: var(--danger); border-color: var(--danger); background: none; }
.unsettled-rest { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.unsettled-rest svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.unsettled-rest:hover { background: var(--accent-soft); }
/* The glance card on the main page in Personal: how many, one click from them. */
.today-home-unsettled { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 14px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.today-home-unsettled svg { width: 14px; height: 14px; margin-left: auto; stroke: var(--ink-faint); fill: none; stroke-width: 44; }

/* ---- the calendar's highlighted days (13 Oct 2026): something put on that day, not just the daily stuff ----
   19 Oct 2026: a disc of the accent at 28% over the page (dayLocal.mjs ADDED_TINT; --accent-soft read as nothing),
   the number on it in the ink (the accent does not read on it in every light theme; the ink does, 4.5:1 or better).
   Today keeps its ring, the day you are on its fill — and the strip of days wears the same disc on its number. */
.cal2-day.added:not(.on) .cal2-num, .today-mcell.added:not(.on) .today-mnum, .today-day.added .today-score, .desk-weekday.added:not(.on) .desk-weeknum {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg)); color: var(--ink); font-weight: 800;
}
/* Today on its disc: a ring twice as strong, so it never reads as just another day with something on it (UI review). */
.cal2-day.now.added:not(.on) .cal2-num, .today-mcell.now.added:not(.on) .today-mnum { border-width: 2.5px; }
.today-day.added .today-score { height: auto; min-width: 22px; padding: 2px 4px; border-radius: 10px; box-sizing: border-box; }

/* "I've taken it", under "<exam> is today", on the exam's own day (pages/school-study.js); "Not taken yet" after it. */
.learn-taken { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.learn-taken-note { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.learn-taken-btn.quiet { color: var(--ink-muted); font-size: 14.5px; }
.learn-taken-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.learn-taken-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.learn-taken-btn:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .alarm-menu, .alarm-menu.open { transition: none; }
}

/* ---- the weather on Today (weatherRow.js; 14 Oct 2026, the user: "Also add
   weather to today app and sunset times") ----
   One row the size and edge of the Eat and Move buttons: the sky now, the
   high and low, the sunset. A click opens the next hours and the sunrise
   under it, in place. */
.wx { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.chat-home > .wx { width: auto; margin-inline: 2px; }
.wx-row {
  height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.wx-row:hover { border-color: var(--ink-faint); }
.wx-row:active { opacity: .7; }
.wx-row:focus-visible, .wx-icon-btn:focus-visible, .wx-place:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wx-now { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; }
.wx-emoji { flex: none; font-size: 16px; line-height: 1; }
.wx-temp { flex: none; font-size: 15px; font-weight: 800; }
.wx-word { min-width: 0; font-size: 13px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.wx-hilo { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.wx-hilo b { color: var(--ink); }
.wx-sun { flex: none; display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.wx-sun-emoji { font-size: 14px; line-height: 1; }
.wx-row.sun-only .wx-sun { flex: 1; justify-content: center; }
.wx-offer-words { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }
.wx-row svg, .wx-icon-btn svg, .wx-searchline > svg, .wx-here svg { flex: none; width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 36; }
.wx-more { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.wx-hours { display: flex; justify-content: space-between; }
.wx-hour { min-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wx-hour-t { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
.wx-hour-e { font-size: 18px; line-height: 1.2; }
.wx-hour b { font-size: 13.5px; font-weight: 800; }
.wx-rain { font-size: 10.5px; font-weight: 700; color: transparent; }
.wx-rain.on { color: var(--accent); }
.wx-sunrow { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-muted); }
.wx-sunrow b { color: var(--ink); }
.wx-gap { flex: 1; }
.wx-icon-btn { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 36px; min-width: 36px; max-width: 160px; padding: 0 6px; position: relative; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.wx-icon-btn span { white-space: normal; overflow-wrap: break-word; }
/* The press reaches past the button, so it is never aimed for. */
.wx-icon-btn::after { content: ''; position: absolute; inset: -4px; }
.wx-searchline { margin-right: -6px; }
.wx-searchline { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.wx-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; padding: 4px 0; outline: none; }
.wx-found { display: flex; flex-direction: column; }
.wx-place { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.wx-place b { color: var(--ink); font-size: 14.5px; }
.wx-place span { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.wx-here b { color: var(--accent); font-size: 14px; }
.wx-here svg { stroke: var(--accent); }
/* A small phone: the word goes, the numbers stay whole. */
@media (max-width: 359px) { .wx-word, .wx-feels { display: none; } .wx-row { padding: 0 10px; gap: 7px; } .wx-sunrow { gap: 10px; } }
.wx-sunrow > span { white-space: nowrap; }