/* Liquid Glass inspired · white monochrome · blue selected states · neutral Tinted material
 * User requested the current layout, type and functionality be preserved.
 * Web approximation: translucent tint, backdrop blur, rim highlights and depth.
 * Supersedes the prior Hallmark prohibition on glass for this requested revision.
 */
@import url("tokens.css");
/* Existing base rules retained, with palette and type routed through tokens. */
:root{color-scheme:light;font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper);line-height:1.6}
*{box-sizing:border-box}body{margin:0}header{background:var(--color-ink);color:var(--color-paper);padding:var(--space-xl) var(--space-md)}header>div,main{max-width:1000px;margin:auto}h1,h2,h3,p{margin:0}header p{color:var(--color-paper-2);margin-top:var(--space-xs)}.eyebrow{font-size:.8rem;letter-spacing:.12em}h1{font-size:1.8rem}h2{font-size:1.25rem}main{padding:var(--space-lg) var(--space-md) var(--space-2xl)}.notice{background:var(--color-notice-paper);border:1px solid var(--color-notice-rule);padding:var(--space-sm);border-radius:10px}.month-navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);margin:var(--space-lg) 0 var(--space-md)}.controls{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm)}button{font:inherit;color:var(--color-ink);border:1px solid var(--color-rule-strong);border-radius:8px;background:var(--color-paper);padding:var(--space-xs) var(--space-sm);min-height:44px;cursor:pointer}button:hover{background:var(--color-accent-paper)}button:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:disabled{opacity:.6;cursor:wait}.view-switch{display:flex;gap:var(--space-xs)}[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}#status{margin-top:var(--space-md);min-height:1.6em;font-size:.95rem}#status.error{color:var(--color-error)}.muted{font-size:.85rem;color:var(--color-muted)}.periods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);margin:var(--space-md) 0}.period-card{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:12px;padding:var(--space-md)}.period-card h3{font-size:1rem;margin-bottom:var(--space-xs)}.period-card p{margin-top:var(--space-2xs)}.schedule-list{display:grid;gap:var(--space-xs)}.day-row{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:10px;padding:var(--space-sm);display:grid;grid-template-columns:110px 1fr;gap:var(--space-sm)}.day-row.closed,.cell.closed{background:var(--color-paper-2)}.date{font-weight:700;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:var(--space-xs)}.shift{display:flex;justify-content:space-between;gap:var(--space-sm);padding:var(--space-2xs) 0}.shift+.shift{border-top:1px solid var(--color-paper-2)}.time{font-variant-numeric:tabular-nums;white-space:nowrap}.tag{display:inline-block;border-radius:5px;padding:var(--space-2xs) var(--space-xs);font-size:.75rem;background:var(--color-accent-paper);color:var(--color-accent)}.changed{background:var(--color-change-paper);color:var(--color-change)}.pending{background:var(--color-paper-2);color:var(--color-muted)}.calendar-scroll{overflow-x:auto;border-radius:10px}.calendar{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:var(--space-xs);min-width:806px}.weekday{text-align:center;font-size:.85rem;font-weight:700;padding:var(--space-2xs)}.cell{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:8px;min-height:135px;padding:var(--space-xs)}.cell .date{margin-bottom:var(--space-xs)}.cell .shift{display:block;font-size:.8rem}.cell .time{display:block}.empty{border:0;background:var(--color-paper)}.calendar-help,.footer{font-size:.85rem;color:var(--color-muted);margin-top:var(--space-md)}.footer{margin-top:var(--space-xl)}ul{list-style:none;padding:0;margin:0}[hidden]{display:none!important}
@media(max-width:560px){main{padding:var(--space-md) var(--space-sm) var(--space-xl)}.periods{grid-template-columns:1fr}.day-row{grid-template-columns:86px 1fr;padding:var(--space-sm);gap:var(--space-xs)}.month-navigation button{padding:var(--space-xs)}.shift{flex-wrap:wrap;gap:var(--space-2xs) var(--space-xs)}.period-card{padding:var(--space-sm)}.controls>button{flex-grow:1}}

/* Hallmark redesign: a compact date index, composed with rules rather than cards. */
html, body { overflow-x: clip; }
html { scroll-padding-block-start: var(--space-md); }
body { font-family: var(--font-body); font-size: var(--text-base); background: var(--color-paper); color: var(--color-ink); padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3 { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
button, a { -webkit-tap-highlight-color: var(--color-accent-paper); }
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--size-target); min-width: var(--size-target); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-paper); font-size: var(--text-sm); font-weight: 700; line-height: 1.25; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:active:not(:disabled) { transform: translateY(1px); background: var(--color-paper-3); color: var(--color-ink); }
button:focus-visible, a:focus-visible, [tabindex="-1"]:focus { outline: var(--rule-focus) solid var(--color-focus); outline-offset: var(--space-2xs); }
button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-paper); color: var(--color-accent); }
button[data-state="loading"] { cursor: wait; }
button[data-state="error"] { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-paper); }
button[data-state="success"] { border-color: var(--color-accent); color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--color-paper-2); color: var(--color-ink); }
  button[aria-pressed="true"]:hover { background: var(--color-accent-paper); color: var(--color-accent); }
  a:hover { text-decoration-thickness: 2px; }
}
a { color: var(--color-ink); text-underline-offset: .2em; }
.skip-link { position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-md); transform: translateY(-200%); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); z-index: var(--z-sticky); white-space: nowrap; }
.skip-link:focus { transform: none; }
.masthead { background: var(--color-paper); color: var(--color-ink); padding: var(--space-lg) var(--space-gutter) 0; }
.masthead-inner { max-width: 68rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 3px double var(--color-rule-strong); }
.masthead h1 { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.3; font-weight: 700; letter-spacing: .02em; }
.pilot-label { font-size: var(--text-sm); color: var(--color-muted); }
main { max-width: 68rem; padding: var(--space-md) var(--space-gutter) var(--space-2xl); }
.notice { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); padding: 0; border: 0; border-radius: 0; background: var(--color-paper); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.notice strong { color: var(--color-ink); white-space: nowrap; }
.month-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-lg); }
.month-copy { min-width: 0; }
.month-copy h2 { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.month-copy p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.month-navigation { flex-shrink: 0; display: flex; gap: var(--space-xs); margin: 0; }
.month-navigation .icon-button { padding: var(--space-xs); width: var(--size-target); font-size: var(--text-md); }
.periods { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.period-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: baseline; padding: var(--space-sm) 0; border: 0; border-radius: 0; background: var(--color-paper); color: var(--color-ink); }
.period-card + .period-card { border-top: var(--rule-hair) solid var(--color-rule); }
.period-card h3 { margin: 0; font-size: var(--text-base); font-weight: 700; }
.period-card p { margin: 0; }
.period-title .period-range { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.period-version { font-size: var(--text-sm); color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.period-version.pending { color: var(--color-muted); background: var(--color-paper); font-weight: 400; }
.period-card .period-detail { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.schedule-workspace { padding-top: var(--space-lg); }
.controls { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.view-switch, .actions { display: flex; gap: var(--space-xs); }
.controls .actions { margin-inline-start: auto; }
.fetch-status { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block: var(--space-sm) var(--space-md); }
#status { margin: 0; min-height: 1.5em; font-size: var(--text-sm); color: var(--color-muted); }
#status::before { content: ""; display: inline-block; width: .375rem; height: .375rem; margin-inline-end: var(--space-xs); border: var(--rule-hair) solid var(--color-muted); vertical-align: middle; border-radius: 50%; }
#status[data-state="success"]::before { background: var(--color-accent); border-color: var(--color-accent); }
#status.error { padding: var(--space-sm); border-inline-start: 3px solid var(--color-error); background: var(--color-error-paper); color: var(--color-error); }
#status.error::before { display: none; }
.muted, #fetched-at { font-size: var(--text-sm); color: var(--color-muted); }
.schedule-key { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; padding-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.key-today { display: flex; align-items: center; gap: var(--space-xs); }
.key-today::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-accent); }
#schedule { scroll-margin-block-start: var(--space-md); }
.schedule-list { display: block; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.list-head { display: grid; grid-template-columns: 5.25rem minmax(0,1fr); gap: var(--space-md); padding-block: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.day-row { display: grid; grid-template-columns: 5.25rem minmax(0,1fr); gap: var(--space-md); padding: var(--space-md) 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); scroll-margin-block-start: var(--space-lg); }
.day-row.half-start { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.date { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-base); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.date-label { white-space: nowrap; }
.today-label { color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; }
.day-shifts { min-width: 0; align-self: center; }
.shift { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-2xs); }
.shift + .shift { border: 0; }
.surname { overflow-wrap: anywhere; font-weight: 700; }
.time { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { display: inline-block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; line-height: 1.3; white-space: nowrap; }
.tag.changed { color: var(--color-change); background: var(--color-change-paper); }
.tag.pending { color: var(--color-muted); background: var(--color-paper-2); }
.day-row.closed, .cell.closed { background: var(--color-paper-2); color: var(--color-ink-2); }
.day-row.closed { padding-inline: var(--space-xs); }
.day-row.today { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-xs); }
.calendar-help { margin: 0; padding-block: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.calendar-scroll { overflow-x: auto; border-radius: 0; padding: var(--space-2xs); }
.calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; min-width: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.weekday { padding: var(--space-xs) 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); background: var(--color-paper); border-inline-end: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.cell { min-width: 0; min-height: 8rem; padding: var(--space-2xs); border: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); scroll-margin-block-start: var(--space-md); }
.cell .date { margin-bottom: var(--space-xs); gap: var(--space-2xs); font-size: var(--text-base); }
.cell .date-label { font-family: var(--font-display); font-size: var(--text-md); }
.cell .shift { display: block; padding-block: var(--space-2xs); font-size: var(--text-sm); line-height: 1.4; }
.cell .surname { font-size: var(--text-sm); }
.cell .time { display: none; font-size: var(--text-sm); }
.cell .tag { display: block; width: fit-content; padding: var(--space-2xs); white-space: normal; overflow-wrap: anywhere; font-size: var(--text-sm); }
.cell .muted { font-size: var(--text-sm); overflow-wrap: anywhere; }
.cell.today { background: var(--color-accent-paper); color: var(--color-ink); box-shadow: inset 0 3px var(--color-accent); }
.cell.empty { background: var(--color-paper-2); color: var(--color-ink); }
.day-details-button { padding: 0; border: 0; border-radius: 0; display: block; min-width: 0; min-height: var(--size-target); width: 100%; background: var(--color-paper); color: var(--color-ink); text-align: start; }
.cell .day-details-button { background: inherit; color: inherit; }
.day-details-button .date-label { display: block; }
.cell-selected-note { margin-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.calendar-day-detail { padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-strong); }
.calendar-day-detail h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.calendar-day-detail .shift { grid-template-columns: minmax(0,1fr) auto; }
.footer { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-start; justify-content: space-between; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-strong); color: var(--color-muted); font-size: var(--text-sm); }
.footer a { display: inline-flex; align-items: center; min-height: var(--size-target); font-size: var(--text-sm); white-space: nowrap; }
.skeleton-line { display: block; min-height: 1em; background: var(--color-placeholder); color: var(--color-ink); max-width: 8rem; }
.loading-row .skeleton-line { max-width: 12rem; margin-block: var(--space-2xs); }
.loading-row { min-height: 4.5rem; }
@media (min-width: 40rem) {
  .masthead { padding-top: var(--space-xl); }
  .month-heading { padding-block: var(--space-xl); }
  .periods { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .period-card { padding-block: var(--space-md); padding-inline-end: var(--space-lg); }
  .period-card + .period-card { border-top: 0; border-inline-start: var(--rule-hair) solid var(--color-rule); padding-inline-start: var(--space-lg); padding-inline-end: 0; }
  .controls { gap: var(--space-md); }
  .fetch-status { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
  .list-head, .day-row { grid-template-columns: 9rem minmax(0,1fr); gap: var(--space-lg); }
  .day-row { padding-block: var(--space-lg); }
  .date { flex-direction: row; flex-wrap: wrap; align-items: baseline; font-size: var(--text-md); }
  .time { font-size: var(--text-base); }
  .cell { padding: var(--space-xs); min-height: 11rem; }
  .cell .time { display: block; }
  .calendar-scroll { padding: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active:not(:disabled) { transform: none; }
}

.cell.selected { box-shadow: inset 0 0 0 2px var(--color-accent); }
.cell .day-details-button[aria-pressed="true"] { background: var(--color-accent-paper); color: var(--color-accent); }

/* Narrow calendars retain a 44px date target; only the grid can scroll. */
.calendar { min-width: calc(7 * (var(--size-target) + var(--rule-hair))); }
.cell { padding: 0; }
.cell .day-details-button { min-width: var(--size-target); padding-inline: var(--space-2xs); }
.cell .day-shifts, .cell .today-label, .cell .tag.changed { margin-inline: var(--space-2xs); }
.calendar-narrow-help { display: none; }
@media (max-width: 23rem) {
  .month-copy h2 { font-size: var(--text-lg); }
  .calendar-narrow-help { display: block; }
}
@media (min-width: 40rem) {
  .cell .day-shifts { margin-inline: var(--space-xs); }
}

.masthead-inner { flex-direction: column; align-items: center; gap: var(--space-2xs); }
.view-switch, .actions, .footer { align-items: center; }
.footer a { line-height: 1; }
.period-error, .schedule-error { padding-block: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.skip-link:active, .footer a:active { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .skip-link { transform: none; visibility: hidden; } .skip-link:focus { visibility: visible; } }

.cell .day-shifts { margin-inline: 0; }
.cell .shift, .cell .day-shifts > .muted { padding-inline: var(--space-2xs); }
.cell .tag.pending { margin-inline: auto; padding-inline: 0; }
.detail-back { margin-top: var(--space-md); }

/* Soft revision: quiet warmth, rounded controls, context beside the date index. */
.masthead { padding-top: var(--space-lg); }
.masthead-inner { flex-direction: row; align-items: center; justify-content: space-between; border: 0; padding-bottom: 0; }
.site-title { min-width: 0; }
.site-title h1 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }
.pilot-label { display: block; margin-top: var(--space-2xs); }
.header-today { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-target); padding-inline: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1; white-space: nowrap; text-decoration: none; }
.header-today:active { background: var(--color-paper-3); }
main { padding-top: var(--space-lg); }
.notice { padding-bottom: var(--space-lg); }
.workspace-summary { background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); padding: var(--space-md); }
.month-heading { padding-block: 0 var(--space-lg); }
.month-copy h2 { font-weight: 600; letter-spacing: -.025em; }
.month-navigation .icon-button { border-color: var(--color-rule); background: var(--color-paper); border-radius: var(--radius-pill); }
.periods { display: block; border: 0; }
.period-card { background: inherit; color: inherit; padding: var(--space-sm) 0; }
.period-card + .period-card { border-inline-start: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0 0; }
.period-card:first-child { padding-top: 0; }
.period-version.pending { background: inherit; }
.period-card h3 { font-weight: 600; }
.period-detail { line-height: 1.65; }
button { font-weight: 600; border-color: var(--color-rule-strong); }
.view-switch { background: var(--color-paper-2); border-radius: var(--radius-pill); padding: var(--space-2xs); gap: 0; }
.view-switch button { border: var(--rule-hair) solid var(--color-paper-2); background: var(--color-paper-2); border-radius: var(--radius-pill); }
.view-switch button[aria-pressed="true"] { background: var(--color-paper); border-color: var(--color-rule); color: var(--color-accent); }
.tag { border-radius: var(--radius-pill); }
.schedule-list { border-top-color: var(--color-rule); }
.list-head { border-bottom-color: var(--color-rule); }
.day-row { border-bottom-color: var(--color-rule); }
.day-row.closed { border-radius: var(--radius-card); }
.day-row.today { border-inline-start: 0; padding-inline-start: var(--space-xs); background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); }
.date, .surname { font-weight: 600; }
.cell .date-label { font-weight: 600; }
.calendar-day-detail { border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-md); }
.footer { border-top-color: var(--color-rule); }
@media (hover: hover) and (pointer: fine) { .header-today:hover { background: var(--color-paper-3); text-decoration: none; } }
@media (max-width: 23rem) {
  .header-today { padding-inline: var(--space-xs); }
  .workspace-summary { padding: var(--space-sm); }
  .month-copy h2 { font-size: var(--text-md); }
}
@media (min-width: 64rem) {
  main { display: grid; grid-template-columns: 19rem minmax(0,1fr); gap: var(--space-lg); align-items: start; }
  .notice, .footer, noscript { grid-column: 1 / -1; }
  .notice { padding-bottom: 0; }
  .workspace-summary { padding: var(--space-lg); }
  .month-heading { flex-wrap: wrap; gap: var(--space-md); }
  .month-copy h2 { font-size: var(--text-lg); }
  .schedule-workspace { padding-top: 0; min-width: 0; }
  .period-card { padding: var(--space-md) 0; }
  .period-card + .period-card { padding-top: var(--space-md); }
  .list-head, .day-row { grid-template-columns: 7rem minmax(0,1fr); gap: var(--space-md); }
  .date { font-size: var(--text-base); }
  .cell .time { overflow-wrap: anywhere; white-space: normal; }
  .footer { margin-top: var(--space-md); }
}

@media (min-width: 64rem) { .cell .time { display: none; } }

/* Tinted Liquid Glass surface layer; no layout or typography overrides. */
body {
  background-color: var(--color-paper);
  background-image: radial-gradient(ellipse at 10% 0%, var(--color-backdrop-blue), var(--color-clear) 65%), radial-gradient(ellipse at 95% 25%, var(--color-backdrop-sky), var(--color-clear) 60%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
}
.masthead { background: var(--color-clear); color: var(--color-ink); }
.workspace-summary, .view-switch, .actions, .header-today {
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: var(--glass-shadow);
}
.workspace-summary { outline: var(--rule-hair) solid var(--glass-edge); outline-offset: -1px; }
.period-card { background: var(--color-clear); color: inherit; }
.period-version.pending { background: var(--color-clear); }
.actions { border-radius: var(--radius-control); box-shadow: var(--glass-control-shadow); }
.header-today, .view-switch { box-shadow: var(--glass-control-shadow); }
button { background: var(--glass-control); color: var(--color-ink); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.month-navigation .icon-button { background: var(--glass-control); border-color: var(--glass-edge); box-shadow: var(--glass-control-shadow); }
.view-switch button { background: var(--color-clear); border-color: var(--color-clear); box-shadow: none; }
.view-switch button[aria-pressed="true"] { background: var(--glass-selected); color: var(--color-accent); border-color: var(--glass-edge); box-shadow: var(--glass-control-shadow); }
.actions #today { background: var(--glass-prominent); color: var(--color-accent); border-color: var(--glass-edge); }
#refresh[data-state="success"] { color: var(--color-accent); border-color: var(--glass-edge); }
button[data-state="error"] { background: var(--color-error-paper); color: var(--color-error); border-color: var(--color-error); }
button:disabled { box-shadow: none; }
button:active:not(:disabled), .header-today:active { background: var(--color-paper-3); color: var(--color-ink); }
.day-row { background: var(--color-reading); color: var(--color-ink); }
.day-row.closed { background: var(--color-paper-2); }
.day-row.today { background: var(--color-accent-paper); color: var(--color-ink); }
.cell, .weekday { background: var(--color-reading); color: var(--color-ink); }
.cell.closed, .cell.empty { background: var(--color-paper-2); }
.cell.today { background: var(--color-accent-paper); }
.cell .day-details-button { background: var(--color-clear); color: var(--color-ink); box-shadow: none; }
.cell .day-details-button[aria-pressed="true"] { background: var(--color-accent-paper); color: var(--color-accent); }
.calendar-day-detail { background: var(--color-reading); color: var(--color-ink); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workspace-summary, .view-switch, .actions, .header-today {
    background: linear-gradient(145deg, var(--glass-control), var(--glass-surface));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  }
  .view-switch, .actions, .header-today {
    -webkit-backdrop-filter: blur(var(--glass-control-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-control-blur)) saturate(var(--glass-saturation));
  }
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled), .header-today:hover { background: var(--glass-hover); color: var(--color-ink); }
  .view-switch button[aria-pressed="true"]:hover, .actions #today:hover { background: var(--glass-selected); color: var(--color-accent); }
}
@media (prefers-reduced-transparency: reduce) {
  .workspace-summary, .view-switch, .actions, .header-today { background: var(--color-paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  button, .month-navigation .icon-button { background: var(--color-paper); }
  .actions #today { background: var(--color-accent-paper); }
  .view-switch button[aria-pressed="true"] { background: var(--color-paper); }
  .day-row, .cell, .weekday, .calendar-day-detail { background: var(--color-paper); }
  .day-row.today, .cell.today { background: var(--color-accent-paper); }
  .day-row.closed, .cell.closed, .cell.empty { background: var(--color-paper-2); }
}
@media (forced-colors: active) {
  .workspace-summary, .view-switch, .actions, .header-today { background: Canvas; color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; outline: 1px solid CanvasText; }
  button { border-color: ButtonText; box-shadow: none; }
}
.notice { background: var(--color-clear); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  button, .month-navigation .icon-button { background: var(--color-paper); }
  .view-switch button { background: var(--color-paper-2); }
  .view-switch button[aria-pressed="true"] { background: var(--color-paper); }
  .actions #today { background: var(--color-accent-paper); }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-control: var(--color-paper);
    --glass-selected: var(--color-paper);
    --glass-hover: var(--color-paper-3);
    --glass-prominent: var(--color-accent-paper);
    --color-reading: var(--color-paper);
  }
}

/* Accent clarification: neutral surfaces; blue identifies the current selection. */
body { background-color: var(--color-paper); background-image: none; }
.period-version, .today-label, #refresh[data-state="success"] { color: var(--color-ink); }
#status[data-state="success"]::before, .key-today::before { background: var(--color-muted); border-color: var(--color-muted); }
.actions #today { background: var(--glass-control); color: var(--color-ink); border-color: var(--glass-edge); }
.day-row.today, .cell.today { background: var(--color-paper-2); color: var(--color-ink); }
.cell.today { box-shadow: inset 0 3px var(--color-rule-strong); }
.view-switch button[aria-pressed="true"],
.view-switch button[aria-pressed="true"]:hover,
.view-switch button[aria-pressed="true"]:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-control-shadow);
}
.cell .day-details-button[aria-pressed="true"],
.cell .day-details-button[aria-pressed="true"]:hover,
.cell .day-details-button[aria-pressed="true"]:active {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
@media (hover: hover) and (pointer: fine) {
  .actions #today:hover { background: var(--glass-hover); color: var(--color-ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .actions #today { background: var(--color-paper); color: var(--color-ink); }
}
@media (forced-colors: active) {
  .view-switch button[aria-pressed="true"], .cell .day-details-button[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
}