/* SPM Calendar — flat, light, macaron palette.
   Colour carries meaning: each exam type has one pastel (fill) and one deeper
   ink (text on that fill). Butter marks "today"/the countdown. Nothing else
   is coloured, and nothing uses a gradient. */
.spm-cal {
    --ink: #1f1d1a;
    --muted: #8a847c;
    --line: #ece8e2;
    --soft: #f7f5f2;
    --surface: #ffffff;

    --written-bg: #ffe9de;   --written-ink: #a4532d;   --written-dot: #f4a582;
    --speaking-bg: #eee8fb;  --speaking-ink: #6b55b0;  --speaking-dot: #b9a5ee;
    --practical-bg: #e1f4ea; --practical-ink: #3a7d5c; --practical-dot: #8fd3ae;
    --listening-bg: #e2f0fa; --listening-ink: #3a6f96; --listening-dot: #92c5ea;
    --butter-bg: #fff5cf;    --butter-ink: #8a6b00;    --butter-dot: #f2d36b;

    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 12px 0 80px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
}
.spm-cal.calendar-view { max-width: 1000px; }
.spm-cal button, .spm-cal input { font: inherit; color: inherit; }
.spm-cal button { cursor: pointer; }
.spm-cal [hidden] { display: none !important; }
.spm-cal .emoji { display: inline-block; margin-right: 8px; font-size: 0.95em; }

/* Type tokens, applied by class anywhere: .t-written etc. */
.spm-cal .t-written   { --t-bg: var(--written-bg);   --t-ink: var(--written-ink);   --t-dot: var(--written-dot); }
.spm-cal .t-speaking  { --t-bg: var(--speaking-bg);  --t-ink: var(--speaking-ink);  --t-dot: var(--speaking-dot); }
.spm-cal .t-practical { --t-bg: var(--practical-bg); --t-ink: var(--practical-ink); --t-dot: var(--practical-dot); }
.spm-cal .t-listening { --t-bg: var(--listening-bg); --t-ink: var(--listening-ink); --t-dot: var(--listening-dot); }

.spm-cal .type-tag {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--t-bg);
    color: var(--t-ink);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.01em;
    vertical-align: 1px;
}

/* ---------- Header ---------- */
.spm-cal .page-head { margin-bottom: 24px; }
.spm-cal .page-title {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.03em;
}
.spm-cal .intro { max-width: 60ch; margin: 0; color: var(--muted); font-size: 14.5px; }
.spm-cal .intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.spm-cal .intro a:hover { text-decoration-color: var(--ink); }

/* ---------- Hero ---------- */
.spm-cal .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 28px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
}
.spm-cal .hero-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.spm-cal .hero-title { margin: 0 0 10px; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.spm-cal .hero-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; color: var(--muted); font-size: 14px; }
.spm-cal .hero-more { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.spm-cal .hero-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border-radius: 24px;
    background: var(--butter-bg);
    color: var(--butter-ink);
}
.spm-cal .hero-count strong { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.spm-cal .hero-count span { margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.spm-cal .hero-count.is-today strong, .spm-cal .hero-count.is-done strong { font-size: 30px; }
.spm-cal .hero-count.is-done { background: var(--practical-bg); color: var(--practical-ink); }


/* ---------- Toolbar ---------- */
.spm-cal .toolbar {
    position: sticky;
    top: -24px;
    z-index: 5;
    margin: 28px 0 8px;
    padding: 12px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.spm-cal .toolbar-row { display: flex; align-items: center; gap: 12px; }
.spm-cal .toolbar-row + .toolbar-row { margin-top: 10px; }
.spm-cal .toolbar-row-filters { justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
.spm-cal .toolbar-end { display: flex; align-items: center; gap: 14px; }

.spm-cal .search-box {
    flex: 1;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    transition: border-color 0.15s, background 0.15s;
}
.spm-cal .search-box:focus-within { border-color: #d9d3ca; background: var(--surface); }
.spm-cal .search-box svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spm-cal .search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.spm-cal .search-box input::placeholder { color: var(--muted); opacity: 1; }

.spm-cal .segmented { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--soft); }
.spm-cal .segmented button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.spm-cal .segmented button:hover { color: var(--ink); }
.spm-cal .segmented button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(31, 29, 26, 0.08); }

.spm-cal .type-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.spm-cal .type-filters button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: #5c5750;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.spm-cal .type-filters button:hover { border-color: #d9d3ca; }
.spm-cal .type-filters .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-dot); }
.spm-cal .type-filters button.active { border-color: transparent; background: var(--t-bg, var(--soft)); color: var(--t-ink, var(--ink)); font-weight: 600; }

.spm-cal .mine-group { display: inline-flex; align-items: center; gap: 2px; }
.spm-cal .mine-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: #5c5750;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.spm-cal .mine-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.spm-cal .mine-pill:hover { border-color: #d9d3ca; }
.spm-cal .mine-pill.active { border-color: transparent; background: var(--butter-bg); color: var(--butter-ink); font-weight: 600; }
.spm-cal .mine-pill.active svg { fill: var(--butter-dot); stroke: var(--butter-ink); }
.spm-cal .mine-count:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(31, 29, 26, 0.06); font-size: 11.5px; line-height: 18px; text-align: center; font-weight: 600; }
.spm-cal .mine-edit { padding: 4px 6px; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.spm-cal .mine-edit:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.spm-cal .past-control { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.spm-cal .past-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.spm-cal .switch-ui { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #e5e1da; transition: background 0.2s; }
.spm-cal .switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform 0.2s; }
.spm-cal .past-control input:checked + .switch-ui { background: var(--ink); }
.spm-cal .past-control input:checked + .switch-ui::after { transform: translateX(14px); }
.spm-cal .past-control input:focus-visible + .switch-ui { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- List ---------- */
.spm-cal .month-section { margin-top: 32px; }
.spm-cal .month-section h2 {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.spm-cal .exam-day {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.spm-cal .day-list .exam-day:last-child { border-bottom: 0; }
.spm-cal .day-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--t-bg);
    color: var(--t-ink);
}
.spm-cal .day-number { font-size: 22px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.spm-cal .day-date span { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.spm-cal .exam-day.is-next .day-date { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--t-dot); }
.spm-cal .exam-day.is-next::after {
    content: "Next";
    position: absolute;
    top: 86px;
    left: 0;
    width: 60px;
    color: var(--t-ink);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.spm-cal .exam-day.past { opacity: 0.42; }
.spm-cal .day-papers { min-width: 0; }
.spm-cal .date-range { margin: 0 0 6px; color: var(--muted); font-size: 13px; }

.spm-cal .paper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 8px 14px;
    border-left: 3px solid var(--t-dot);
}
.spm-cal .paper + .paper { margin-top: 6px; }
.spm-cal .paper p { margin: 0; }
.spm-cal .paper-main { flex: 1; min-width: 0; }
.spm-cal .paper-name { font-size: 15.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.spm-cal .paper-meta { margin-top: 3px !important; color: var(--muted); font-size: 13.5px; }
.spm-cal .paper-time { flex: none; max-width: 40%; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spm-cal .paper-time p:first-child { font-weight: 500; }
.spm-cal .paper-time p + p { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.spm-cal .paper-time p:first-child:only-child { color: var(--muted); font-weight: 400; }

.spm-cal .no-results { margin-top: 24px; padding: 44px 24px; border-radius: 18px; background: var(--soft); color: var(--muted); text-align: center; }

/* ---------- Calendar ---------- */
.spm-cal .calendar-month { margin-top: 36px; }
.spm-cal .calendar-month h2 { margin-bottom: 2px; }
.spm-cal .month-summary { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.spm-cal .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.spm-cal .cal-heading { padding: 0 0 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.spm-cal .cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 108px;
    padding: 9px;
    border: 0;
    border-radius: 14px;
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
    text-align: left;
}
.spm-cal .cal-cell.empty { background: transparent; }
.spm-cal .cal-cell.has-exam { background: var(--t-bg); color: var(--t-ink); transition: box-shadow 0.15s; }
.spm-cal .cal-cell.has-exam:hover { box-shadow: inset 0 0 0 1px var(--t-dot); }
.spm-cal .cal-cell.has-exam.selected { box-shadow: inset 0 0 0 2px var(--t-ink); z-index: 1; }
.spm-cal .cal-cell.past { opacity: 0.45; }
.spm-cal .cal-date { line-height: 1.3; font-variant-numeric: tabular-nums; }
.spm-cal .has-exam .cal-date { font-weight: 600; }
.spm-cal .cal-cell.is-today .cal-date { display: inline-grid; place-items: center; align-self: flex-start; width: 24px; height: 24px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: 600; }
.spm-cal .cal-count { margin-top: 1px; font-size: 11px; opacity: 0.8; }
.spm-cal .cal-tags { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-top: 7px; }
.spm-cal .cal-pill {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-size: 11.5px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spm-cal .cal-more { padding-left: 4px; font-size: 11px; }

.spm-cal .day-popover {
    position: fixed;
    z-index: 45;
    max-height: min(420px, 80vh);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(31, 29, 26, 0.12);
}
.spm-cal .popover-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.spm-cal .popover-head strong { font-weight: 600; }
.spm-cal .popover-head span { color: var(--muted); font-size: 13px; }
.spm-cal .popover-papers { padding: 12px 18px 16px; }
.spm-cal .popover-papers .paper-name { font-size: 14.5px; }
.spm-cal .popover-papers .paper-meta, .spm-cal .popover-papers .paper-time { font-size: 13px; white-space: normal; }

/* ---------- Checklist & notes ---------- */
.spm-cal .checklist { margin-top: 44px; padding: 22px 24px; border-radius: 20px; background: var(--soft); }
.spm-cal .checklist h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.spm-cal .checklist ul { margin: 0; padding: 0; list-style: none; }
.spm-cal .checklist li { position: relative; margin: 8px 0; padding-left: 30px; color: #4f4a44; font-size: 14.5px; }
.spm-cal .checklist li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--practical-bg);
    color: var(--practical-ink);
    font-size: 11px;
    font-weight: 600;
}
.spm-cal .footnote { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
    .spm-cal { padding-top: 4px; font-size: 14.5px; }
    .spm-cal .page-title { font-size: 26px; }
    .spm-cal .intro { font-size: 13.5px; }
    .spm-cal .hero { gap: 16px; padding: 18px; border-radius: 18px; }
    .spm-cal .hero-title { font-size: 19px; }
    .spm-cal .hero-count { width: 88px; height: 88px; border-radius: 18px; }
    .spm-cal .hero-count strong { font-size: 36px; }
    .spm-cal .hero-count.is-today strong, .spm-cal .hero-count.is-done strong { font-size: 22px; }
    .spm-cal .hero-more { width: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
    .spm-cal .toolbar { top: -24px; }
    .spm-cal .segmented button { padding: 0 12px; font-size: 13px; }
    .spm-cal .type-filters { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .spm-cal .type-filters button { flex: none; }
    .spm-cal .toolbar-end { width: 100%; justify-content: space-between; }
    .spm-cal .exam-day { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
    .spm-cal .day-date { width: 48px; height: 52px; border-radius: 14px; }
    .spm-cal .day-number { font-size: 19px; }
    .spm-cal .exam-day.is-next::after { top: 74px; width: 48px; }
    .spm-cal .paper { flex-direction: column; gap: 2px; padding-left: 11px; }
    .spm-cal .paper-name { font-size: 15px; }
    .spm-cal .paper-time { max-width: none; text-align: left; white-space: normal; }
    .spm-cal .paper-time p + p { display: inline; margin-left: 6px; }
    .spm-cal .paper-time p + p::before { content: "· "; }
    .spm-cal .calendar-month { overflow-x: auto; }
    .spm-cal .cal-grid { min-width: 560px; gap: 4px; }
    .spm-cal .cal-cell { min-height: 92px; padding: 6px; border-radius: 10px; }
    .spm-cal .checklist { padding: 18px; }
}
@media (max-width: 420px) {
    .spm-cal .toolbar-row:first-child { flex-wrap: wrap; }
    .spm-cal .search-box { flex-basis: 100%; }
    .spm-cal .view-toggle { margin-left: auto; }
}

/* ===== Simplified toolbar =====
   One search row, then one quiet row of borderless chips: exam types, then
   (after a hairline) My subjects and Past. Past is a chip toggle instead of a
   switch. Colour only appears on the chip that's on. */
.spm-cal .search-box { height: 40px; border-color: transparent; }
.spm-cal .search-box:focus-within { border-color: var(--line); }
.spm-cal .segmented button { min-height: 32px; padding: 0 14px; font-size: 13.5px; }

.spm-cal .toolbar-row-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.spm-cal .toolbar-row-filters::-webkit-scrollbar { display: none; }
.spm-cal .type-filters { flex: none; flex-wrap: nowrap; gap: 2px; }
.spm-cal .toolbar-end { flex: none; width: auto; gap: 2px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); }

.spm-cal .type-filters button,
.spm-cal .mine-pill,
.spm-cal .past-control {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
}
.spm-cal .type-filters button:hover,
.spm-cal .mine-pill:hover,
.spm-cal .past-control:hover { color: var(--ink); }
.spm-cal .type-filters .dot { width: 7px; height: 7px; }
.spm-cal .type-filters button.active { background: var(--t-bg, var(--soft)); color: var(--t-ink, var(--ink)); font-weight: 600; }
.spm-cal .mine-pill.active { background: var(--butter-bg); color: var(--butter-ink); font-weight: 600; }
.spm-cal .mine-edit { font-size: 12.5px; }

.spm-cal .past-control { gap: 0; }
.spm-cal .past-control .switch-ui { display: none; }
.spm-cal .past-control:has(input:checked) { background: var(--soft); color: var(--ink); font-weight: 600; }
.spm-cal .past-control:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }


/* List / Calendar toggle as icons, kept on the search row at every width. */
.spm-cal .view-toggle button { width: 40px; min-height: 34px; padding: 0; display: grid; place-items: center; }
.spm-cal .view-toggle .material-symbols-outlined { --icon-size: 20px; font-size: 20px; }
@media (max-width: 420px) {
    .spm-cal .toolbar-row:first-child { flex-wrap: nowrap; gap: 8px; }
    .spm-cal .search-box { flex-basis: auto; }
    .spm-cal .view-toggle { margin-left: 0; }
    .spm-cal .view-toggle button { width: 36px; }
}

/* Sticky toolbar on mobile. The old top: -24px left the search row half
   cut off, and WebKit lets the timeline (the "Next" day tile) show around
   the bar mid-scroll. Stick flush at 0, paint an opaque band over the scroll
   container's 24px gutter above and beside it, and give the bar its own
   compositing layer so iOS doesn't lag behind the scroll. */
.spm-cal .toolbar {
    top: 0;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform;
}
.spm-cal .toolbar::before {
    display: none;
    content: "";
    position: absolute;
    z-index: -1;
    top: -24px;
    right: -24px;
    bottom: 0;
    left: -24px;
    background: var(--surface);
    pointer-events: none;
}
@media (max-width: 640px) {
    .spm-cal .toolbar { top: 0; }
}

/* ===== Minimal layout (header title lives in the chat header) ===== */
.spm-cal .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Notice: soft macaron red, sits right above the search bar. */
.spm-cal .notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fdecee;
    color: #a8434f;
    font-size: 13px;
    line-height: 1.55;
}
.spm-cal .notice .material-symbols-outlined { --icon-size: 18px; flex: none; margin-top: 1px; font-size: 18px; }
.spm-cal .notice a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(168, 67, 79, 0.35); text-underline-offset: 3px; }
.spm-cal .toolbar { margin-top: 8px; }

/* Hero: countdown left, next paper right. No card border. */
.spm-cal .hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.spm-cal .hero-count { width: 104px; height: 104px; border-radius: 22px; }
.spm-cal .hero-count strong { font-size: 42px; }
.spm-cal .hero-count span { margin-top: 4px; font-size: 12px; }
.spm-cal .hero-count.is-today strong, .spm-cal .hero-count.is-done strong { font-size: 24px; }
.spm-cal .hero-eyebrow { margin-bottom: 4px; font-size: 12.5px; }
.spm-cal .hero-title { margin-bottom: 4px; font-size: 20px; }
.spm-cal .hero-detail { font-size: 13.5px; }
.spm-cal .hero-more { margin-left: 8px; padding-left: 8px; }

/* List: a plain date column and plain rows. Colour is just a small dot. */
.spm-cal .month-section { margin-top: 24px; }
.spm-cal .exam-day { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.spm-cal .day-date { width: 44px; height: auto; padding-top: 2px; border-radius: 0; background: transparent; color: var(--ink); }
.spm-cal .day-number { font-size: 20px; }
.spm-cal .day-date span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.spm-cal .exam-day.is-next .day-date { box-shadow: none; }
.spm-cal .exam-day.is-next .day-number { color: var(--t-ink); }
/* "Next" sits under the weekday inside the date column, never overlapping it. */
.spm-cal .exam-day.is-next::after { content: none; }
.spm-cal .exam-day.is-next .day-date::after { content: "Next"; margin-top: 4px; padding: 0 6px; border-radius: 999px; background: var(--t-bg); color: var(--t-ink); font-size: 9.5px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.spm-cal .paper { gap: 12px; padding: 4px 0 4px 14px; border-left: 0; position: relative; }
.spm-cal .paper::before { content: ""; position: absolute; top: 12px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--t-dot); }
.spm-cal .paper + .paper { margin-top: 8px; }
.spm-cal .paper-name { font-size: 15px; font-weight: 500; }
.spm-cal .paper-name .emoji { display: none; }
.spm-cal .paper-meta { font-size: 13px; }
.spm-cal .paper-meta .type-tag { padding: 0; background: transparent; font-size: 12.5px; font-weight: 500; }
.spm-cal .paper-time { font-size: 13.5px; }

/* Checklist: plain list, no card. */
.spm-cal .checklist { margin-top: 36px; padding: 0; border-radius: 0; background: transparent; }
.spm-cal .checklist h2 { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.spm-cal .checklist li { margin: 6px 0; padding-left: 16px; font-size: 14px; }
.spm-cal .checklist li::before { content: ""; top: 9px; width: 5px; height: 5px; background: var(--line); }

@media (max-width: 640px) {
    .spm-cal .hero { gap: 16px; padding: 0; border-radius: 0; }
    .spm-cal .hero-count { width: 88px; height: 88px; border-radius: 18px; }
    .spm-cal .hero-count strong { font-size: 34px; }
    .spm-cal .hero-more { width: auto; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); }
    .spm-cal .exam-day { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
    .spm-cal .day-date { width: 40px; height: auto; border-radius: 0; }
    .spm-cal .paper { padding-left: 14px; }
    .spm-cal .checklist { padding: 0; }
}

/* Cover band only while the bar is pinned (class set in spm-calendar.js). */
.spm-cal .toolbar.is-stuck::before { display: block; }

/* Exam type tag in the countdown, just before the paper's date/time. */
.spm-cal .hero-detail .type-tag { margin-right: 8px; font-size: 11px; line-height: 18px; }

/* Nothing on this page should ever scroll sideways (the chip row and the
   month grid scroll inside their own boxes). */
.chat-scroll:has(> .spm-cal) { overflow-x: hidden; }

/* ===== Mobile calendar: native month grid =====
   Desktop is untouched. On phones the month fits the screen width: each day
   is a number, exam days get a tinted circle and up to three type dots, and
   tapping one opens its papers in a bottom sheet. */
.spm-cal .cal-dots { display: none; }
@media (max-width: 640px) {
    .spm-cal .calendar-month { overflow: visible; }
    .spm-cal .cal-grid { min-width: 0; gap: 2px 0; }
    .spm-cal .cal-heading { padding-bottom: 6px; font-size: 10.5px; letter-spacing: 0.02em; }
    .spm-cal .cal-cell,
    .spm-cal .cal-cell.has-exam {
        align-items: center;
        min-height: 52px;
        padding: 4px 0 6px;
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        font-size: 15px;
        text-align: center;
        box-shadow: none;
    }
    .spm-cal .cal-cell:not(.has-exam):not(.empty) { color: var(--muted); }
    .spm-cal .cal-date { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; line-height: 1; }
    .spm-cal .cal-cell.has-exam .cal-date { background: var(--t-bg); color: var(--t-ink); font-weight: 600; }
    .spm-cal .cal-cell.has-exam.selected .cal-date { background: var(--t-ink); color: #fff; }
    .spm-cal .cal-cell.has-exam:hover, .spm-cal .cal-cell.has-exam.selected { box-shadow: none; }
    .spm-cal .cal-cell.is-today .cal-date { width: 34px; height: 34px; margin: 0; align-self: center; }
    .spm-cal .cal-count, .spm-cal .cal-tags { display: none; }
    .spm-cal .cal-dots { display: flex; justify-content: center; gap: 3px; height: 5px; margin-top: 4px; }
    .spm-cal .cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--t-dot); }
    .spm-cal .cal-cell:active .cal-date { transform: scale(0.92); }
    .spm-cal .cal-date { transition: transform 0.12s, background 0.15s, color 0.15s; }

    /* Day details as a bottom sheet above the dock (JS positions it inline
       for desktop; override that here). */
    .spm-cal .day-popover {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: var(--dock-h, 0px);
        width: auto !important;
        max-height: 60vh;
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 28px rgba(31, 29, 26, 0.12);
        animation: sc-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .spm-cal .day-popover::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--line); }
    .spm-cal .popover-head { padding: 10px 18px 12px; }
}
@keyframes sc-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ===== Floating "only your subjects" card =====
   Sticky to the bottom of the scroll area (above the dock on phones), so it
   floats over the list on both desktop and mobile. */
.spm-cal .mine-card {
    position: sticky;
    z-index: 30;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 24px auto 0;
    padding: 12px 12px 12px 14px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(31, 29, 26, 0.1);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.spm-cal .mine-card[hidden] { display: none; }
.spm-cal .mine-card.show { opacity: 1; transform: none; }
.spm-cal .mine-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.spm-cal .mine-card-text strong { font-size: 14px; font-weight: 600; }
.spm-cal .mine-card-text span { color: var(--muted); font-size: 12.5px; }
.spm-cal .mine-card-btn { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff !important; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.spm-cal .mine-card-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.spm-cal .mine-card-close .material-symbols-outlined { --icon-size: 18px; font-size: 18px; }
/* The close button sits in the top-right corner. */
.spm-cal .mine-card { position: sticky; padding: 14px 40px 14px 16px; }
.spm-cal .mine-card-close { position: absolute; top: 6px; right: 6px; }
/* Phones: fixed just above the dock. (Sticky would sit far higher, as
   Chrome counts the scroller's dock-sized bottom padding.) */
@media (max-width: 720px) {
    .spm-cal .mine-card { position: fixed; left: 12px; right: 12px; bottom: 12px; margin: 0 auto; }
    body:has(.dock) .spm-cal .mine-card { bottom: calc(var(--dock-h, 0px) + 10px); }
}
@media (prefers-reduced-motion: reduce) {
    .spm-cal .mine-card { transition: none; }
}

/* Pinned search bar sits flush with the top. Browsers disagree on whether a
   sticky element respects its scroll container's padding (Chrome leaves a
   24px gap, iOS doesn't), so this page drops the scroller's top padding and
   carries that space inside .spm-cal instead; top: 0 then means the very
   top everywhere. */
.chat-scroll:has(> .spm-cal) { padding-top: 0; }
.spm-cal { padding-top: 36px; }
.spm-cal .toolbar { padding-top: 8px; }
.spm-cal .toolbar::before { top: 0; }
@media (max-width: 640px) {
    .spm-cal { padding-top: 28px; }
}

/* Fade/slide in when the card appears. A keyframe runs reliably the moment
   it leaves display:none, unlike a transition started in the same frame. */
.spm-cal .mine-card.show { animation: sc-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sc-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .spm-cal .mine-card.show { animation: sc-fade 0.2s ease both; }
}

/* Subject settings button, right of the List / Calendar toggle. */
.spm-cal .settings-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--soft);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.spm-cal .settings-btn:hover { color: var(--ink); }
.spm-cal .settings-btn:active { transform: scale(0.94); }
.spm-cal .settings-btn .material-symbols-outlined { --icon-size: 20px; font-size: 20px; }
@media (max-width: 420px) {
    .spm-cal .settings-btn { width: 38px; height: 38px; }
}

/* Popover portal at the end of <body> (see spm-calendar.js): no box of its
   own, only carries the .spm-cal tokens. */
.spm-cal.spm-cal-portal { width: auto; max-width: none; margin: 0; padding: 0; }
.spm-cal-portal .day-popover { z-index: 80; }
@media (max-width: 640px) {
    /* Bottom sheet covers the dock too, so the area behind the dock is the
       sheet's white rather than the page showing through the glass. */
    .spm-cal-portal .day-popover {
        bottom: 0;
        max-height: 70vh;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* ===== List, redesigned =====
   A day = a small heading + one card of rows. Every row has the same two
   columns (time | subject), so times and names line up down the page. */
.spm-cal .tt-days { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.spm-cal .tt-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.spm-cal .tt-day.is-next .tt-head { color: var(--ink); }
.spm-cal .tt-next { padding: 0 8px; border-radius: 999px; background: var(--butter-bg); color: var(--butter-ink); font-size: 10.5px; font-weight: 700; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.spm-cal .tt-rows { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.spm-cal .tt-day.is-next .tt-rows { border-color: #e9dca6; }
.spm-cal .tt-day.past { opacity: 0.45; }
.spm-cal .tt-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 16px; }
.spm-cal .tt-row + .tt-row { border-top: 1px solid var(--line); }
.spm-cal .tt-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; line-height: 1.35; }
.spm-cal .tt-time strong { font-size: 14px; font-weight: 600; white-space: nowrap; }
.spm-cal .tt-time span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.spm-cal .tt-body { min-width: 0; }
.spm-cal .tt-body p { margin: 0; }
.spm-cal .tt-name { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.spm-cal .tt-meta { margin-top: 3px !important; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.spm-cal .tt-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--t-dot); vertical-align: 1px; }

/* Calendar day sheet uses the same rows, without the card border. */
.spm-cal .popover-papers { padding: 4px 0 12px; }
.spm-cal .popover-papers .tt-row { padding: 12px 18px; }

@media (max-width: 640px) {
    .spm-cal .tt-row { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
    .spm-cal .tt-time strong { font-size: 13.5px; }
    .spm-cal .tt-time span { font-size: 12px; }
    .spm-cal .tt-name { font-size: 14.5px; }
}

/* Time set by the school: a short muted label instead of a time. */
.spm-cal .tt-time .tt-tbc { color: var(--muted); font-weight: 500; }

/* ===== Colour order =====
   Three jobs, three rules, so nothing on the page is coloured by accident:
   - Exam type  → only a small dot (rows, filter chips, countdown). Never a fill.
   - "Upcoming" → butter yellow, and only for the countdown and the Next badge.
   - Notice     → the soft red info box, nothing else red.
   Everything else is ink / grey on white. */
.spm-cal .type-filters button.active {
    background: var(--soft);
    color: var(--ink);
}
.spm-cal .type-filters button.active .dot { background: var(--t-dot, var(--ink)); }

.spm-cal .hero-detail .type-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 500;
}
.spm-cal .hero-detail .type-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t-dot); }
.spm-cal .hero-detail .type-tag + span::before { content: "· "; color: var(--muted); }

.spm-cal .tt-day.is-next .tt-rows { border-color: var(--line); }
.spm-cal .tt-next { background: var(--butter-bg); color: var(--butter-ink); }

/* "Upcoming" in ink instead of butter: a black countdown tile and a black
   Next badge — the only dark fills on the page, so they still lead. */
.spm-cal .hero-count { background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.spm-cal .hero-count strong { color: #fff; }
.spm-cal .hero-count.is-done { background: var(--soft); color: var(--muted); }
.spm-cal .hero-count.is-done strong { color: var(--ink); }
.spm-cal .tt-next { background: var(--ink); color: #fff; }

/* "Upcoming": soft stone grey — light, and no clash with the four exam-type
   dot colours or the red notice. */
.spm-cal { --upcoming-bg: #efebe4; --upcoming-ink: #5f584e; }
.spm-cal .hero-count { background: var(--upcoming-bg); color: var(--upcoming-ink); }
.spm-cal .hero-count strong { color: var(--ink); }
.spm-cal .tt-next { background: var(--upcoming-bg); color: var(--upcoming-ink); }

/* "Upcoming": macaron aqua — light, and a hue none of the exam-type dots
   (peach, lavender, mint, sky) or the red notice use. */
.spm-cal { --upcoming-bg: #dcf3f1; --upcoming-ink: #2c7470; }

/* JWP notice: close button on the right instead of the info icon. */
.spm-cal .notice[hidden] { display: none; }
.spm-cal .notice { align-items: flex-start; padding-right: 8px; }
.spm-cal .notice > span:first-child { flex: 1; min-width: 0; }
.spm-cal .notice-close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -3px 0 -3px 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; }
.spm-cal .notice-close:hover { opacity: 1; background: rgba(168, 67, 79, 0.08); }
.spm-cal .notice-close .material-symbols-outlined { --icon-size: 18px; font-size: 18px; margin: 0; }