/* Calm with character — the shared page components.
 *
 * Contract: docs/CALM_REDESIGN_BRIEF.md ("Component reference"); markup:
 * templates/_calm.html; sheet behaviour: static/js/bloom-calm.js. Every colour
 * is a token from tailwind-input.css, so both themes follow automatically.
 * Page slices do not edit this file: page-specific styling goes in the page's
 * own platform-*.css.
 */

/* ---------- category tokens: data-category picks the family ---------- */
[data-category] { --c: var(--cat-neutral); --c-soft: var(--cat-neutral-soft); --c-ink: var(--cat-neutral-ink); --c-on: var(--cat-neutral-on); }
[data-category="college"] { --c: var(--cat-college); --c-soft: var(--cat-college-soft); --c-ink: var(--cat-college-ink); --c-on: var(--cat-college-on); }
[data-category="school"] { --c: var(--cat-school); --c-soft: var(--cat-school-soft); --c-ink: var(--cat-school-ink); --c-on: var(--cat-school-on); }
[data-category="testing"] { --c: var(--cat-testing); --c-soft: var(--cat-testing-soft); --c-ink: var(--cat-testing-ink); --c-on: var(--cat-testing-on); }
[data-category="scholarship"] { --c: var(--cat-scholarship); --c-soft: var(--cat-scholarship-soft); --c-ink: var(--cat-scholarship-ink); --c-on: var(--cat-scholarship-on); }
[data-category="aid"] { --c: var(--cat-aid); --c-soft: var(--cat-aid-soft); --c-ink: var(--cat-aid-ink); --c-on: var(--cat-aid-on); }
.calm-cat-fill { background: rgb(var(--c)); color: rgb(var(--c-on)); }
.calm-cat-soft { background: rgb(var(--c-soft)); color: rgb(var(--c-ink)); }
.calm-cat-ink { color: rgb(var(--c-ink)); }

/* ---------- type ---------- */
.calm-display { font-family: var(--font-display); letter-spacing: -0.025em; }
.calm-eyebrow { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 600; color: rgb(var(--ink-muted)); }
.calm-sub { margin: .5rem 0 0; font-size: .9375rem; color: rgb(var(--ink-muted)); max-width: 40rem; }

/* A quiet sender label, shared by every proactive Bloom surface. */
.bloom-signature { display: inline-flex; align-items: center; gap: .375rem; flex: none; color: rgb(var(--ink-muted)); font-family: var(--font-sans); font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: normal; text-transform: none; vertical-align: middle; white-space: nowrap; }
.bloom-signature .ab-mascot { width: 24px; height: 24px; flex: none; }
.bloom-signature .ab-mascot, .bloom-signature .ab-mascot * { animation: none !important; }
.calm-found .bloom-signature { color: inherit; }

/* ---------- the column ---------- */
.calm-page { width: 100%; max-width: 45rem; margin-inline: auto; }
.calm-page--with-rail { max-width: 68rem; display: grid; grid-template-columns: minmax(0, 45rem) 18.75rem; gap: 3.5rem; align-items: start; }
.calm-rail { display: flex; flex-direction: column; gap: 1.375rem; padding-top: .375rem; }
@media (max-width: 1279px) {
    .calm-page--with-rail { grid-template-columns: minmax(0, 1fr); max-width: 45rem; gap: 1.5rem; }
}

/* ---------- page header + doors ---------- */
/* The title owns its own line; the sub line and the doors share the next. */
.calm-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1.625rem; }
/* Four or more doors don't fit beside the sub line: an auto column that wide
   squeezed Activities' sub into a one-word column (2026-09-26, once résumé
   import added a fifth door). They take their own row under it instead,
   wrapping left to right; a header with three or fewer is unchanged. */
.calm-header:has(.calm-doors > :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
.calm-header:has(.calm-doors > :nth-child(4)) .calm-header-aside { grid-column: 1; justify-content: flex-start; }
.calm-header:has(.calm-doors > :nth-child(4)) .calm-doors { justify-content: flex-start; }
.calm-header-text { display: contents; }
.calm-header :is(.calm-eyebrow, .calm-title) { grid-column: 1 / -1; }
.calm-header .calm-sub { grid-column: 1; margin: 0; }
.calm-header .calm-eyebrow { margin-bottom: -.5rem; }
body.bloom-app .calm-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.calm-header-aside { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
@media (max-width: 767px) {
    .calm-header { grid-template-columns: minmax(0, 1fr); }
    .calm-header-aside { grid-column: 1; justify-content: flex-start; }
}

.calm-doors { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.calm-door {
    display: inline-flex; align-items: center; gap: .4375rem; min-height: 2.625rem; padding: 0 .9375rem;
    border: 0; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1;
    color: rgb(var(--ink)); background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line));
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: box-shadow .15s ease, background-color .15s ease;
}
.calm-door:hover { box-shadow: 0 0 0 1px rgb(var(--ink) / .7); }
.calm-door--primary { color: rgb(var(--surface-light)); background: rgb(var(--ink)); box-shadow: none; }
.calm-door--primary:hover { box-shadow: 0 8px 18px -10px rgb(var(--ink) / .7); }
.calm-door .calm-glyph { width: 1.125rem; height: 1.125rem; flex: none; }
.calm-door .app-icon { --app-icon-fill-opacity: 0; --app-icon-specular-opacity: 0; }

/* Buttons for inside sheets and empty states. */
.calm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; font: inherit; font-size: .9375rem; font-weight: 700; color: rgb(var(--surface-light)); background: rgb(var(--ink)); text-decoration: none; cursor: pointer; }
.calm-btn:disabled { opacity: .6; cursor: default; }
.calm-btn--ghost { color: rgb(var(--ink)); background: transparent; box-shadow: 0 0 0 1px rgb(var(--line)); }
.calm-btn--highlight { color: rgb(var(--highlight-ink)); background: rgb(var(--highlight)); }
.calm-btn--violet { color: #fff; background: rgb(var(--accent-dark)); }

/* ---------- the flower: five petals, a face, four moods ---------- */
.calm-flower { --s: 30px; position: relative; display: inline-block; flex: none; width: 1em; height: 1em; font-size: var(--s); line-height: 0; animation: calm-float 5s ease-in-out infinite; }
.calm-flower--xs { --s: 20px; animation: none; }
.calm-flower--sm { --s: 30px; animation: none; }
.calm-flower--md { --s: 54px; }
.calm-flower--lg { --s: 96px; }
.calm-flower--xl { --s: 155px; }
.calm-flower-petals { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2, .85, .25, 1.15); }
/* Near the brand mark's geometry (a slim ellipse turning on the centre): wide
   petals overlapped so far that the two living petals ran together into one
   green blot at md. A hairline cast shadow keeps each petal's edge readable. */
.calm-flower-petals i {
    position: absolute; left: .345em; top: .02em; width: .31em; height: .48em; border-radius: 50%; transform-origin: 50% 100%;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: inset .016em .02em .05em #ffffff66, inset -.012em -.016em .04em #1d163d1f, 0 0 .028em #1d163d40;
}
/* Brand petal paint (APP_DESIGN.md §5.1), top clockwise: cool, rose, living,
   reversed living, reversed cool. The character is never a single-hue flower. */
.calm-flower-petals i:nth-child(2) { transform: rotate(72deg); background: linear-gradient(180deg, #8b5cf6 0%, #ec4899 100%); }
.calm-flower-petals i:nth-child(3) { transform: rotate(144deg); background: linear-gradient(180deg, #f59e0b 0%, #10b981 52%, #06b6d4 100%); }
.calm-flower-petals i:nth-child(4) { transform: rotate(216deg); background: linear-gradient(180deg, #06b6d4 0%, #10b981 48%, #f59e0b 100%); }
.calm-flower-petals i:nth-child(5) { transform: rotate(288deg); background: linear-gradient(180deg, #8b5cf6 0%, #6366f1 100%); }
.calm-flower-face { position: absolute; left: .335em; top: .374em; width: .342em; height: .342em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fef3c7 0%, #fde68a 40%, #f5b53d 100%); box-shadow: inset .006em .013em .045em #fff9, 0 .013em .045em #4b325629; }
.calm-flower-face b { position: absolute; top: 36%; width: 7.5%; height: 13%; border-radius: 40%; background: #3e3656; transition: all .35s; }
.calm-flower-face b:first-child { left: 32%; }
.calm-flower-face b:nth-child(2) { right: 32%; }
.calm-flower-face i { position: absolute; left: 50%; top: 57%; width: 16%; height: 8%; transform: translateX(-50%); border-bottom: max(1.5px, .013em) solid #3e3656; border-radius: 0 0 50% 50% / 0 0 100% 100%; transition: all .35s; }
.calm-flower-face::before, .calm-flower-face::after { content: ""; position: absolute; top: 56%; width: 14%; height: 9%; border-radius: 50%; background: #f7a3a3; opacity: 0; transition: opacity .35s; }
.calm-flower-face::before { left: 14%; }
.calm-flower-face::after { right: 14%; }
.calm-flower[data-mood="thinking"] .calm-flower-petals { animation: calm-mull 7s linear infinite; }
.calm-flower[data-mood="thinking"] .calm-flower-face b { transform: translate(28%, -40%); height: 10%; }
.calm-flower[data-mood="thinking"] .calm-flower-face i { width: 9%; height: 0; left: 58%; border-radius: 2px; }
.calm-flower[data-mood="happy"] .calm-flower-petals { transform: scale(1.05); }
.calm-flower[data-mood="happy"] .calm-flower-face b { top: 40%; width: 11%; height: 7%; background: none; border-top: max(1.5px, .013em) solid #3e3656; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.calm-flower[data-mood="happy"] .calm-flower-face i { top: 56%; width: 26%; height: 15%; background: #3e3656; border: 0; border-radius: 0 0 999px 999px; }
.calm-flower[data-mood="happy"] .calm-flower-face::before,
.calm-flower[data-mood="happy"] .calm-flower-face::after { opacity: .75; }
/* Kind: a soft tilt, a gentle smile and a blush — for "that's okay" moments. */
.calm-flower[data-mood="kind"] .calm-flower-petals { transform: rotate(-8deg); }
.calm-flower[data-mood="kind"] .calm-flower-face { transform: rotate(-6deg); }
.calm-flower[data-mood="kind"] .calm-flower-face b { top: 38%; height: 10%; }
.calm-flower[data-mood="kind"] .calm-flower-face i { width: 22%; height: 10%; }
.calm-flower[data-mood="kind"] .calm-flower-face::before,
.calm-flower[data-mood="kind"] .calm-flower-face::after { opacity: .55; }
@keyframes calm-float { 50% { transform: translateY(-4%); } }
@keyframes calm-mull { to { transform: rotate(360deg); } }

/* ---------- status line: "am I okay?" ---------- */
.calm-status { display: flex; align-items: center; gap: .875rem; margin: 0 0 1.875rem; padding: .875rem 1.125rem .875rem .875rem; border-radius: 1.375rem; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.calm-status-text { flex: 1; min-width: 0; }
.calm-status-headline { margin: 0; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: rgb(var(--ink)); text-wrap: balance; }
.calm-status-sub { margin: .125rem 0 0; font-size: .90625rem; color: rgb(var(--ink-muted)); }
.calm-status-action { flex: none; }

/* ---------- chips ---------- */
.calm-kind { display: inline-flex; align-items: center; padding: .1875rem .625rem; border-radius: 999px; font-size: .78125rem; font-weight: 700; line-height: 1.3; color: rgb(var(--c-ink, var(--ink))); background: rgb(var(--surface-light) / .72); }
.calm-row .calm-kind { background: rgb(var(--c-soft, var(--surface-lighter))); }
/* One tone word on a block, only when it changes what you do today. No red:
   late is marigold, a window that is open is green. */
.calm-tone { display: inline-flex; align-items: center; padding: .1875rem .625rem; border-radius: 999px; font-size: .78125rem; font-weight: 700; line-height: 1.3; color: rgb(var(--cat-testing-ink)); background: rgb(var(--cat-testing-soft)); box-shadow: inset 0 0 0 1px rgb(var(--cat-testing) / .45); }
.calm-tone[data-tone="open"] { color: rgb(var(--cat-scholarship-ink)); background: rgb(var(--cat-scholarship-soft)); box-shadow: inset 0 0 0 1px rgb(var(--cat-scholarship) / .45); }
/* Turned in / Not yet (lms/status.py): a fact reported, not a nudge — the
   quiet tone is the neutral chip, and "You said" gets a dashed ring so a
   student's own word never reads as the teacher's. */
.calm-tone[data-tone="quiet"] { color: rgb(var(--ink-muted)); background: rgb(var(--surface-light) / .72); box-shadow: inset 0 0 0 1px rgb(var(--ink-muted) / .22); }
.calm-tone[data-self="1"] { box-shadow: none; outline: 1px dashed rgb(var(--cat-scholarship) / .6); outline-offset: -1px; }
.calm-turnin { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.calm-turnin-btn { font-size: .78125rem; font-weight: 700; color: rgb(var(--cat-scholarship-ink)); background: none; border: 0; padding: .1875rem .25rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 1.75rem; }
.calm-turnin-btn:disabled { opacity: .55; cursor: default; }
.calm-who { display: inline-flex; align-items: center; gap: .375rem; font-size: .78125rem; font-weight: 600; color: rgb(var(--ink-muted)); }
.calm-avatar { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: .625rem; font-weight: 700; color: rgb(var(--cat-college-ink)); background: rgb(var(--cat-college-soft)); }
.calm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

/* ---------- the day timeline ---------- */
.calm-timeline { --tl-label: 4.5rem; --tl-cap: 3.5rem; --tl-gap: .875rem; position: relative; display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.calm-timeline::before { content: ""; position: absolute; left: calc(var(--tl-label) + var(--tl-gap) + var(--tl-cap) / 2 - 1px); top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: rgb(var(--line)); }
.calm-day { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); column-gap: var(--tl-gap); }
.calm-day-label { padding-top: .375rem; text-align: right; }
.calm-day-label b { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: rgb(var(--ink)); }
.calm-day-label > span:last-child { display: block; font-size: .8125rem; font-weight: 600; color: rgb(var(--ink-muted)); }
.calm-today { display: inline-block; margin-bottom: .375rem; padding: .125rem .5625rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: rgb(var(--highlight-ink)); background: rgb(var(--highlight)); }
.calm-day-items { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.calm-block-row { display: grid; grid-template-columns: var(--tl-cap, 3.5rem) minmax(0, 1fr); column-gap: var(--tl-gap, .875rem); align-items: start; }
.calm-capsule { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 2.875rem; height: 3.625rem; border-radius: 1.4375rem; color: rgb(var(--c-on)); background: rgb(var(--c)); box-shadow: 0 0 0 5px rgb(var(--surface)); }
.calm-capsule .calm-glyph { width: 1.375rem; height: 1.375rem; }
.calm-capsule .app-icon { color: currentColor; --icon-tone: currentColor; --app-icon-fill-opacity: 0; --app-icon-specular-opacity: 0; }
.calm-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .875rem; align-items: center; min-width: 0; padding: .8125rem .875rem .8125rem 1.125rem; border-radius: 1.25rem; background: rgb(var(--c-soft)); }
.calm-block-text { min-width: 0; }
.calm-block-title { margin: 0; font-family: var(--font-sans); font-size: 1.03125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: rgb(var(--ink)); overflow-wrap: anywhere; }
.calm-block-sub { margin: .125rem 0 .5rem; font-size: .84375rem; color: rgb(var(--ink-muted)); }
.calm-block-text > .calm-block-title + .calm-tags { margin-top: .5rem; }
.calm-block-action { display: flex; align-items: center; gap: .5rem; }
.calm-block-more { grid-column: 1 / -1; min-width: 0; }
.calm-block-row.is-done .calm-block { background: rgb(var(--surface-lighter)); }
.calm-block-row.is-done .calm-block-title { color: rgb(var(--ink-muted)); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.calm-block-row.is-done .calm-capsule { color: rgb(var(--surface-light)); background: rgb(var(--cat-neutral)); }

/* The Done check — a round button that fills with the category colour. */
.calm-done { display: grid; place-items: center; flex: none; width: 2.625rem; height: 2.625rem; padding: 0; border: 0; border-radius: 50%; color: rgb(var(--c-ink) / .35); background: rgb(var(--surface-light)); box-shadow: inset 0 0 0 2px rgb(var(--c)); cursor: pointer; transition: background-color .2s, color .2s; }
.calm-done:hover { color: rgb(var(--c-ink)); }
.calm-done[aria-pressed="true"] { color: #fff; background: rgb(var(--accent-dark)); box-shadow: none; }
.calm-done:disabled { opacity: .6; cursor: default; }
.calm-done .calm-glyph { width: 1.25rem; height: 1.25rem; }

.calm-quiet { display: grid; grid-template-columns: var(--tl-label) var(--tl-cap) minmax(0, 1fr); column-gap: var(--tl-gap); align-items: start; }
.calm-quiet-label { padding-top: 1px; text-align: right; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: rgb(var(--ink-muted)); }
.calm-quiet-dot { position: relative; z-index: 1; justify-self: center; width: .75rem; height: .75rem; margin-top: .25rem; border-radius: 50%; background: rgb(var(--surface)); box-shadow: inset 0 0 0 2px rgb(var(--line)); }
.calm-quiet-text { padding-bottom: .25rem; font-size: .875rem; color: rgb(var(--ink-muted)); }
.calm-divider { display: grid; grid-template-columns: var(--tl-label) var(--tl-cap) minmax(0, 1fr); column-gap: var(--tl-gap); align-items: center; margin: .625rem 0 .125rem; }
.calm-divider > span { grid-column: 3; display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1; letter-spacing: -0.015em; color: rgb(var(--ink)); }
.calm-divider > span::after { content: ""; flex: 1; height: 1px; background: rgb(var(--line)); }

/* ---------- same-shape rows ---------- */
.calm-rows { display: flex; flex-direction: column; gap: .375rem; }
.calm-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: .875rem; width: 100%; padding: .75rem .875rem; border-radius: .875rem; color: rgb(var(--ink)); background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); text-align: left; text-decoration: none; }
a.calm-row:hover { box-shadow: 0 0 0 1px rgb(var(--ink) / .35); }
.calm-row-lead { min-width: 3.5rem; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calm-row-dot { width: .75rem; height: .75rem; border-radius: 4px; background: rgb(var(--c)); }
.calm-row-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.calm-row-facts { min-width: 0; max-width: 22rem; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; font-size: .8125rem; color: rgb(var(--ink-muted)); }
.calm-row-action { display: inline-flex; }
.calm-month { margin: 1.375rem 0 .5rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1; color: rgb(var(--ink)); }

/* ---------- section headings inside a calm page ---------- */
.calm-section { margin-top: 2.75rem; }
.calm-section-title { margin: 0 0 .25rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: rgb(var(--ink)); }
.calm-section-sub { margin: 0 0 .875rem; color: rgb(var(--ink-muted)); }

/* ---------- cards for the rail ---------- */
.calm-card { padding: 1.125rem; border-radius: 1.375rem; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.calm-card-title { margin: 0 0 .75rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: rgb(var(--ink)); }

/* The dark "Bloom found" banner: Bloom's own voice, chartreuse glow. */
.calm-found { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1.25rem; border-radius: 1.375rem; color: #fff; background: #232437; }
.dark .calm-found { background: rgb(var(--surface-lighter)); }
.calm-found::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, rgb(221 245 122 / .5), transparent 70%); pointer-events: none; }
.calm-found-text { position: relative; flex: 1 1 12rem; min-width: 0; }
.calm-found-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.calm-found-title svg { width: 1.25rem; height: 1.25rem; color: rgb(var(--highlight)); flex: none; }
.calm-found-sub { margin: 0; font-size: .84375rem; line-height: 1.45; color: #d6d2e6; }
.calm-found .calm-btn { position: relative; z-index: 1; }

/* ---------- empty state ---------- */
.calm-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.25rem 1.25rem; border-radius: 1.375rem; text-align: center; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.calm-empty-title { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: rgb(var(--ink)); }
.calm-empty-sub { margin: 0; max-width: 28rem; color: rgb(var(--ink-muted)); }
.calm-empty-action { margin-top: .75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* ---------- tier 4: the quiet reference link + disclosure ---------- */
.calm-reference { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-weight: 600; color: rgb(var(--ink)); text-decoration: none; }
.calm-reference:hover { color: rgb(var(--accent)); }
.calm-reference-arrow { width: 1rem; height: 1rem; }
.calm-disclosure { margin-top: 2.25rem; }
.calm-disclosure > summary { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-weight: 600; color: rgb(var(--ink)); cursor: pointer; list-style: none; }
.calm-disclosure > summary::-webkit-details-marker { display: none; }
.calm-disclosure > summary::after { content: "→"; transition: transform .2s; }
.calm-disclosure[open] > summary::after { transform: rotate(90deg); }
.calm-disclosure-body { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .calm-disclosure-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- sheets (<dialog>) ---------- */
dialog.calm-sheet { width: min(33rem, calc(100vw - 1.5rem)); max-height: min(88vh, 52rem); margin: auto; padding: 0; border: 0; border-radius: 1.625rem; color: rgb(var(--ink)); background: rgb(var(--surface-light)); box-shadow: 0 40px 80px -30px rgb(29 22 61 / .55); overflow: auto; overscroll-behavior: contain; scroll-padding-top: 4.5rem; /* the browser's own #fragment scroll lands below the sticky head */ }
dialog.calm-sheet--wide { width: min(46rem, calc(100vw - 1.5rem)); }
dialog.calm-sheet::backdrop { background: rgb(35 36 55 / .48); }
.calm-sheet-inner { position: relative; padding: 1.5rem; }
/* The head stays pinned while a long sheet scrolls, so a deep link into the
   sheet never scrolls its title (and the close button) away. */
.calm-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: -1.5rem -1.5rem .375rem; padding: 1.5rem 1.5rem .5rem; background: rgb(var(--surface-light)); }
.calm-sheet-title { margin: 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.calm-sheet-sub { margin: 0 0 1rem; font-size: .875rem; color: rgb(var(--ink-muted)); }
.calm-sheet-close { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; margin: -.25rem -.25rem 0 0; padding: 0; border: 0; border-radius: 50%; color: rgb(var(--ink)); background: rgb(var(--surface-lighter)); cursor: pointer; }
.calm-sheet-close .calm-glyph { width: 1.125rem; height: 1.125rem; }
html.calm-sheet-open { overflow: hidden; }
@media (max-width: 767px) {
    /* On a phone a sheet rises from the bottom edge. */
    dialog.calm-sheet { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 1.625rem 1.625rem 0 0; }
    .calm-sheet-inner { padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
    .calm-sheet-head { margin: -1.25rem -1rem .375rem; padding: 1.25rem 1rem .5rem; }
}

/* ---------- the phone "+" ---------- */
.calm-fab { display: none; }
@media (max-width: 767px) {
    .calm-fab { position: fixed; right: 1.125rem; bottom: calc(var(--bloom-tabbar-clearance, 5rem) + 5rem); /* above the Ask Bloom launcher */ z-index: 35; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; padding: 0; border: 0; border-radius: 1.375rem; color: #fff; background: rgb(var(--accent-dark)); box-shadow: 0 16px 30px -12px rgb(75 48 201 / .67); cursor: pointer; }
    .calm-fab .calm-glyph { width: 1.625rem; height: 1.625rem; }
}

/* ---------- phone rhythm ---------- */
@media (max-width: 767px) {
    .calm-header { margin-bottom: 1rem; }
    .calm-status { gap: .75rem; margin-bottom: .875rem; padding: .75rem .875rem .75rem .625rem; border-radius: 1.125rem; }
    .calm-status .calm-flower { --s: 44px; }
    .calm-status-headline { font-size: 1.0625rem; }
    .calm-status-sub { font-size: .84375rem; }
    .calm-found { padding: .875rem .875rem .875rem 1.125rem; border-radius: 1.125rem; }
    .calm-found-title { font-size: 1rem; margin: 0; }
    .calm-found-sub { font-size: .78125rem; }
    .calm-timeline { --tl-label: 2.625rem; --tl-cap: 2.75rem; --tl-gap: .5rem; }
    .calm-day-label b { font-size: 1.375rem; }
    .calm-today { padding: .125rem .375rem; font-size: .65625rem; }
    .calm-capsule { width: 2.375rem; height: 3rem; border-radius: 1.1875rem; box-shadow: 0 0 0 4px rgb(var(--surface)); }
    .calm-capsule .calm-glyph { width: 1.1875rem; height: 1.1875rem; }
    .calm-block { column-gap: .5rem; padding: .6875rem .625rem .6875rem .875rem; border-radius: 1.125rem; }
    .calm-block-title { font-size: .9375rem; }
    .calm-block-sub { font-size: .78125rem; margin-bottom: .375rem; }
    .calm-done { width: 2.375rem; height: 2.375rem; }
    .calm-quiet-label { font-size: .6875rem; line-height: 1.3; }
    .calm-section-title { font-size: 1.5rem; }
    .calm-row { grid-template-columns: auto minmax(0, 1fr); gap: .25rem .625rem; padding: .6875rem .75rem; }
    .calm-row-facts { grid-column: 2; justify-content: flex-start; font-size: .75rem; }
    .calm-row-dot { display: none; }
    .calm-row-lead { min-width: 3.25rem; }
}

/* ---------- the counselor's student header (_practice_chart.html) ----------
   The shared band on brief / availability / scratchpad / dossier keeps its
   markup; it only takes the calm type and palette here: paper card, display
   name, violet initial, pill tabs with a violet "you are here". */
body.bloom-app .practice-chart { padding: 1.25rem 1.5rem 1rem; border: 0; border-radius: 1.625rem; background: rgb(var(--surface-light)); background-image: none; box-shadow: 0 0 0 1px rgb(var(--line)); }
body.bloom-app .practice-chart .page-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em; }
body.bloom-app .practice-chart .practice-avatar { border-radius: 1rem; background: rgb(var(--accent-soft)); background-image: none; box-shadow: none; }
body.bloom-app .practice-chart .practice-avatar > span { font-family: var(--font-display); font-weight: 800; color: rgb(var(--accent)); }
body.bloom-app .practice-chart .practice-tabs { gap: .375rem; padding: .125rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; scrollbar-width: none; }
body.bloom-app .practice-chart .practice-tab { min-height: 2.375rem; padding: 0 .875rem; border: 0; border-radius: 999px; font-size: .84375rem; font-weight: 600; color: rgb(var(--ink-muted)); background: rgb(var(--surface-lighter)); background-image: none; transition: color .15s ease, background-color .15s ease; }
body.bloom-app .practice-chart .practice-tab:hover { color: rgb(var(--ink)); }
body.bloom-app .practice-chart .practice-tab-active { color: rgb(var(--ink)); background: rgb(var(--accent-soft)); box-shadow: inset 0 0 0 1px rgb(var(--accent) / .35); }
@media (max-width: 767px) {
    body.bloom-app .practice-chart { padding: 1rem 1rem .875rem; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .calm-flower, .calm-flower-petals { animation: none !important; transition: none !important; }
    .calm-door, .calm-done, .calm-disclosure > summary::after, .practice-tab { transition: none; }
}
@media (forced-colors: active) {
    .calm-block, .calm-status, .calm-row, .calm-card, .calm-empty, .calm-found, .calm-door, body.bloom-app .practice-chart { border: 1px solid CanvasText; }
    body.bloom-app .practice-chart .practice-tab-active { outline: 2px solid Highlight; }
    .calm-done, .calm-capsule { border: 1px solid ButtonText; }
    .calm-flower { forced-color-adjust: none; }
}
@media print {
    .calm-doors, .calm-fab, .calm-done, dialog.calm-sheet { display: none !important; }
}

/* calm.css loads after Tailwind, so a calm class that sets display would beat
   Tailwind's .hidden and the hidden attribute. Hidden always wins on calm pieces. */
[hidden],
[class*="calm-"].hidden,
.btn.hidden { display: none !important; }