/* /styles/date-time-picker.css */
/* Standalone enhancement; load after the shared form styles. */
.date-time-picker { position: relative; min-width: 0; }
.date-time-picker__native { min-width: 0; max-width: 100%; }
.date-time-picker__native::-webkit-calendar-picker-indicator { display: none; }
.date-time-picker__trigger { justify-self: start; }
.date-time-picker__popover {
  box-sizing: border-box;
  width: min(100%, 22rem);
  padding: 12px;
  border: 1px solid var(--border-strong, #cbd0d6);
  border-radius: 13px;
  background: var(--surface-raised, #fff);
  color: var(--text-primary, #20242b);
  box-shadow: var(--e3, 0 10px 28px -10px #20242b2b);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.date-time-picker__popover[hidden] { display: none; }
.date-time-picker__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.date-time-picker__grid [role="row"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-time-picker__grid [role="columnheader"] { text-align: center; padding-block: 8px; color: var(--text-secondary, #505966); font-size: .8125rem; }
.date-time-picker button {
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong, #cbd0d6);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-primary, #20242b);
  font: inherit;
  cursor: pointer;
}
.date-time-picker__grid button { width: 100%; padding: 6px 0; border-color: transparent; }
.date-time-picker button:hover:not(:disabled) { background: var(--accent-soft, #fdeff0); }
.date-time-picker__grid [aria-selected="true"] button,
.date-time-picker .date-time-picker__apply { background: var(--accent, #c31f35); color: var(--text-on-accent, #fffaf9); border-color: var(--accent, #c31f35); }
.date-time-picker__grid [aria-selected="true"] button:hover,
.date-time-picker .date-time-picker__apply:hover:not(:disabled) { background: var(--accent-hover, #ab1729); }
.date-time-picker button:focus-visible,
.date-time-picker__time input:focus-visible { outline: 2px solid var(--focus-ring, var(--accent, #c31f35)); outline-offset: 2px; }
.date-time-picker button:disabled { opacity: .5; cursor: not-allowed; }
.date-time-picker__time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-block: 12px; border-top: 1px solid var(--border, #e1e3e6); margin-top: 8px; }
.date-time-picker__time label { display: grid; gap: 4px; color: var(--text-secondary, #505966); }
.date-time-picker__time input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; padding: 6px; border: 1px solid var(--border-strong, #cbd0d6); border-radius: 6px; font: inherit; color: var(--text-primary, #20242b); background: var(--surface, #fff); }
.date-time-picker__actions { display: flex; justify-content: flex-end; gap: 8px; }
.date-time-picker__error { color: var(--error, #b42318); font-size: .875rem; margin-block: 0 12px; }
@media (pointer: coarse) { .date-time-picker button, .date-time-picker__time input { min-height: 44px; } }
@media (forced-colors: active) {
  .date-time-picker__grid [aria-selected="true"] button { border: 2px solid Highlight; }
  .date-time-picker button:disabled { color: GrayText; opacity: 1; }
}

/* /styles/cube.css */
/* Shared tile language. Loaded after palette styles so all ten palettes inherit
   the same layout, while keeping their accents and semantic status colours. */
:root {
  --tile-radius: 24px;
  --tile-shadow: 0 4px 18px -10px rgba(24, 32, 48, .14);
  --tile-border: color-mix(in srgb, var(--border) 75%, transparent);
}
[data-theme="sail"], [data-theme="blueprint"] { --tile-radius: 20px; }
[data-theme="garden"], [data-theme="botanic"] { --tile-radius: 28px; }
[data-theme="amber"], [data-theme="archive"] { --tile-radius: 18px; }
:is(.panel,.event,.square-card,.activity-master,.activity-detail-head,.activity-person,.gate__card) {
  border-radius: var(--tile-radius);
  border-color: var(--tile-border);
  box-shadow: var(--tile-shadow);
}
:is(.panel,.event,.square-card,.wsregion,.activity-master,.activity-detail) { min-width: 0; }
:is(.input,.select,.textarea) { border-radius: 12px; }
.btn { border-radius: 12px; }
:is(.panel__head,.panel__body,.panel__foot) { min-width: 0; }
.panel__head { padding: 22px 24px; }
.panel__body { padding: 24px; }
.panel--flush .panel__body { padding: 0; }
.drawer { border-radius: 24px 0 0 24px; }
.drawer__head,.drawer__foot { background: var(--surface); }
.segmented { border-radius: 14px; padding: 4px; }
.segmented__item { border-radius: 10px; }
.notice { border-radius: 14px; }
.table-wrap { border-radius: 16px; border: 1px solid var(--border); }
.table th { background: var(--bg-sunken); }
:is(.event__go,.metric__go,.queue__action) { opacity: 1; transform: none; }
/* Directory cards: stable row-major keyboard order, no absolute placement. */
.square-grid { gap: 20px; align-items: stretch; }
.square-grid--home { grid-template-columns: repeat(3,minmax(0,1fr)); }
.square-grid--home .square-card:first-child { grid-column: span 2; background: linear-gradient(125deg,var(--surface),var(--accent-soft)); }
.square-card { padding: 28px; gap: 16px; min-height: 220px; }
.square-card__icon { width: 60px; height: 60px; border-radius: 18px; box-shadow: inset 0 1px 0 #ffffff80; }
.square-card__action { padding-top: 12px; }
.square-card h3 { letter-spacing: -.035em; }
.square-card p { max-width: 42ch; }
:is(.square-card,.event,.event-row):focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 4px; }
/* A quiet editorial tile and four live data tiles replace the heavy dark hero. */
.hero { background: transparent; color: var(--text-primary); padding: 36px 0 16px; }
.hero__depth,.hero__cross { display: none; }
.hero__inner { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
.hero__lede { max-width: none; padding: clamp(28px,4vw,56px); border-radius: 32px; background: linear-gradient(135deg,var(--surface),var(--accent-soft)); border: 1px solid var(--tile-border); box-shadow: var(--tile-shadow); }
.hero h1 { font-size: clamp(32px,4.4vw,60px); line-height: 1.16; }
.hero h1 em { color: var(--accent); }
.hero__sub { color: var(--text-secondary); font-size: 16px; max-width: 48ch; }
.hero__eyebrow { color: var(--accent); background: var(--surface); border-color: var(--border); }
.hero__cta .btn--inverse { color: var(--text-primary); background: var(--surface); border-color: var(--border); backdrop-filter: none; }
.hero__cta .btn--inverse:hover { background: var(--bg-sunken); border-color: var(--border-hover); }
.hero__figures { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; border: 0; background: transparent; overflow: visible; }
.hero__figure { border-radius: var(--tile-radius); padding: 24px; background: var(--surface); border: 1px solid var(--tile-border); box-shadow: var(--tile-shadow); align-content: center; gap: 12px; backdrop-filter: none; }
.hero__figure b { font-size: clamp(28px,3vw,44px); color: var(--accent); }
.hero__figure span { color: var(--text-secondary); }
.hero__figures:empty { display: none; }
.hero__inner:has(.hero__figures:empty) { grid-template-columns: minmax(0,1fr); }
.psection { padding-top: 48px; padding-bottom: 48px; }
.psection--sunken { background: transparent; border: 0; }
.psection--sunken > .psection__inner { padding-top: 12px; padding-bottom: 24px; }
.rail { grid-auto-flow: row; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; align-items: start; gap: 20px; }
.event { padding: 26px; gap: 20px; }
.event-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.event-row { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 26px; border-radius: var(--tile-radius); box-shadow: var(--tile-shadow); align-items: start; }
.event-row__date { justify-self: start; width: 72px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); border: 0; }
.event-row__body { min-width: 0; }
.event-row__body .t-clamp-1 { -webkit-line-clamp: 2; }
.event-row > .btn { align-self: end; width: 100%; }
.programs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; border: 0; background: transparent; }
.program { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border: 1px solid var(--tile-border); border-radius: var(--tile-radius); background: var(--surface); }
.member-shortcuts .btn { min-height: 64px; border-radius: 18px; }
/* Admin panels form a two-column waterfall, preserving each column's sequence. */
.console .wscols { gap: 24px; }
.console .wsregion { background: var(--surface); border: 1px solid var(--tile-border); border-radius: var(--tile-radius); padding: 24px; box-shadow: var(--tile-shadow); }
.console .view:not(.operations-module) .metrics { background: transparent; border: 0; gap: 14px; overflow: visible; }
.console .view:not(.operations-module) .metric { background: var(--surface); border: 1px solid var(--tile-border); border-radius: 20px; padding: 24px; box-shadow: var(--tile-shadow); }
.console .view:not(.operations-module) .wsregion .metric { padding: 16px; box-shadow: none; border-radius: 14px; }
.console .nav__item { border-radius: 12px; min-height: 40px; }
.console .nav { background: color-mix(in srgb,var(--bg-sunken) 75%,var(--surface)); }
.console .topbar { background: color-mix(in srgb,var(--surface) 94%,transparent); }
.activity-summary { gap: 14px; }
.activity-summary > * { border-radius: 20px; box-shadow: var(--tile-shadow); }
.activity-list-item { border-radius: 16px; margin-bottom: 6px; }
.activity-detail-head { padding: 28px; }
.activity-stages { gap: 8px; }
.activity-stages > * { border-radius: 12px; background: var(--surface); padding: 12px 8px; }
.queue__row { border-radius: 14px; padding: 16px; border: 1px solid var(--border); background: var(--surface); }
.queue { gap: 10px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .square-card:hover,.event:hover,.event-row:hover { box-shadow: 0 10px 28px -14px color-mix(in srgb,var(--accent) 30%,#202838); }
}
@media (max-width:1100px) {
  .hero__inner { grid-template-columns: minmax(0,1fr); }
  .hero__figures { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .event-list,.rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .programs { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:800px) {
  .square-grid--home { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .square-grid--home .square-card:first-child { grid-column: auto; }
  .hero__figures { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero__inner { padding-inline: 20px; }
  .hero__lede { padding: 28px; border-radius: 26px; }
  .hero__figure { padding: 22px; }
  .console .wsregion { padding: 20px; }
  .console .view:not(.operations-module) .metric { padding: 20px; }
  .drawer { border-radius: 22px 0 0 22px; }
  .btn,.icon-btn,.theme-trigger { min-height: 44px; }
  .btn--sm { padding-block: 10px; }
  :is(.input,.select) { min-height: 44px; font-size: 16px; }
  .table__actions { opacity: 1; }
}
@media (max-width:540px) {
  .square-grid,.square-grid--home,.event-list,.rail { grid-template-columns: minmax(0,1fr); }
  .square-card { min-height: auto; padding: 24px; }
  .square-card__icon { width: 52px; height: 52px; }
  .hero { padding-top: 20px; }
  .hero__inner { padding-inline: 16px; }
  .hero__lede { padding: 24px; }
  .hero__cta { align-items: stretch; flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__figure { padding: 20px 16px; }
  .hero__figure span { font-size: 12px; }
  .psection { padding: 32px 16px; }
  .psection--sunken > .psection__inner { padding-inline: 16px; }
  .psection__head { flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
  .event,.event-row { padding: 24px; }
  .panel__head,.panel__body { padding: 20px; }
  .panel--flush .panel__body { padding: 0; }
  .console .wsregion { padding: 18px; }
  .console .view:not(.operations-module) .metrics { gap: 10px; }
  .console .view:not(.operations-module) .metric { padding: 16px; }
  .drawer { border-radius: 0; }
  .activity-detail-head { padding: 20px; }
  .activity-stages { overflow-x: auto; }
}

/* Community plans need two full-width cards, rather than the home directory's
   three columns and the former inline icon/body/action grid. */
.community-page { max-width: 1120px; width: 100%; }
.community-programs { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
.community-programs .program { gap: 20px; }
.community-programs .program__body { width: 100%; min-width: 0; }
.community-programs .program > .btn { position: static; margin-top: auto; width: 100%; white-space: normal; }
.community-programs .warmth__facts { grid-template-columns: minmax(0,1fr); }
.workflow-page { width: 100%; max-width: 1120px; padding: 40px 24px 64px; margin: 0 auto; }
.workflow-page .page-head { margin: 0; }
.workflow-page .panel { width: 100%; }
.workflow-page .kv { max-width: 100%; }
.workflow-actions > .btn:first-child { background: var(--accent); color: white; border-color: var(--accent); }
.workflow-records { scroll-margin-top: 100px; }
.workflow-registration { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-base); }
.workflow-registration + .workflow-registration { border-top: 1px solid var(--border); }
.workflow-registration details { border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; background: var(--surface); }
.workflow-registration details > div { padding-bottom: 16px; }
.workflow-registration summary { font-weight: 600; color: var(--accent); min-height: 44px; }
@media(max-width:700px) {
 .community-programs { grid-template-columns: minmax(0,1fr); }
 .workflow-page { padding: 24px 16px 48px; }
 .workflow-registration { padding: 16px; }
 .workflow-actions { flex-direction: column; align-items: stretch; }
 .workflow-actions .btn { width: 100%; }
}
/* Detail-page navigation and participation controls share one visual hierarchy. */
.workflow-page .workflow-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 14px; margin-left: -14px; border-radius: 12px; color: var(--text-secondary); font-size: 14px; }
.workflow-back:hover { color: var(--accent); background: var(--accent-soft); }
.workflow-back:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.registration-callout { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--accent-soft); border-radius: 18px; }
.registration-callout__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface); border-radius: 14px; color: var(--accent); flex-shrink: 0; }
.registration-callout__text { flex: 1; min-width: 0; }
.registration-callout__text b { font-size: 16px; }
.registration-callout__text p { margin-top: 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.workflow-registration .participation-action { padding: 0; border-radius: 16px; }
.workflow-registration .participation-action summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--text-primary); }
.participation-action summary::-webkit-details-marker { display: none; }
.participation-action summary::marker { content: ''; }
.participation-action__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.participation-action__label { display: grid; gap: 4px; flex: 1; min-width: 0; }
.participation-action__label b { font-size: 14px; font-weight: 600; }
.participation-action__label > span { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.participation-action__chevron { color: var(--text-muted); flex-shrink: 0; transition: transform var(--theme-time); }
.participation-action[open] .participation-action__chevron { transform: rotate(180deg); }
.participation-action summary:hover { background: var(--bg-base); border-radius: 16px; }
.participation-action summary:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; border-radius: 16px; }
.workflow-registration .participation-action > .participation-action__body { padding: 0 18px 18px; }
@media(max-width:700px) {
 .registration-callout { flex-wrap: wrap; padding: 16px; }
 .registration-callout > .btn { width: 100%; }
 .workflow-registration .participation-action summary { padding: 16px; gap: 10px; }
}
/* Shared guidance for activity details and registration. */
.guidance { display: grid; gap: 16px; min-width: 0; }
.guidance__heading { font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--text-primary); }
.guidance__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.guidance__card { display: flex; align-items: flex-start; gap: 14px; padding: 12px 20px; min-width: 0; background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
.guidance__card:first-child { border-left: 0; padding-left: 0; }
.guidance__icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.guidance__icon > .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.guidance__content { min-width: 0; padding-top: 1px; }
.guidance__content h4 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.6; color: var(--text-primary); }
.guidance__content p { margin: 7px 0 0; font-size: 13px; line-height: 1.75; color: var(--text-secondary); overflow-wrap: anywhere; }
/* Informational blocks and form progress use the same readable icon scale. */
.portal .notice { grid-template-columns: 20px minmax(0,1fr); gap: 12px; padding: 16px; line-height: 1.75; }
.portal .notice > .ico { width: 20px; height: 20px; margin-top: 2px; stroke-width: 1.7; }
.portal .notice > div { min-width: 0; overflow-wrap: anywhere; }
.portal .steps { flex-wrap: wrap; gap: 10px; row-gap: 12px; }
.portal .steps__item { min-width: 0; gap: 8px; }
.portal .steps__dot { width: 28px; height: 28px; flex-shrink: 0; font-size: 12px; }
.portal .steps__dot .ico { width: 16px; height: 16px; }
.portal .steps__name { font-size: 13px; }
.community-page .bullets li { align-items: flex-start; gap: 10px; }
.community-page .bullets .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
@media(min-width:701px) and (max-width:1000px) {
 .guidance__card { padding: 12px; gap: 10px; }
}
@media(max-width:700px) {
 .guidance__grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
 .guidance__card, .guidance__card:first-child { padding: 12px 0; gap: 14px; border-left: 0; border-top: 1px solid var(--border); }
 .guidance__card:first-child { border-top: 0; }
 .portal .steps__link { width: 12px; }
}
@media(max-width:400px) {
 .portal .steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .portal .steps__item { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
 .portal .steps__link { display: none; }
}

/* /styles/refinement.css */
/* Shared refinement: colour belongs to actions; depth belongs to outer surfaces.
   Native typography keeps Chinese text crisp without delaying content for fonts. */
:root {
  --tile-shadow: 0 3px 12px -8px rgba(20, 28, 40, .14);
  --tracking-heading: -.015em;
  --tracking-body: 0;
}
.portal, .console { --tile-shadow: 0 3px 12px -8px rgba(20, 28, 40, .14); }
::selection { background: var(--accent-soft); color: var(--text-primary); }
input, textarea { caret-color: var(--accent); }
h1, h2, h3 { text-wrap: balance; }
.t-secondary, .workflow-copy { line-height: 1.7; }
:where(.blood-entry,.event-row,.event,.square-card,.blood-calendar__slot):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
/* The service entrance has a distinct identity; individual positions stay inside. */
.blood-entry {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: 24px; color: var(--text-primary); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--tile-radius);
  background: var(--surface); transition: border-color 180ms ease-out;
}
.blood-entry__top, .blood-entry__action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blood-entry__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none; }
.blood-entry__icon .ico { width: 24px; height: 24px; }
.blood-entry__availability { font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: right; }
.blood-entry__body { display: grid; gap: 8px; }
.blood-entry__body h3 { font-size: 21px; font-weight: 650; line-height: 1.4; }
.blood-entry__body p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); max-width: 48ch; }
.blood-entry__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.blood-entry__facts > span { display: flex; align-items: center; gap: 8px; }
.blood-entry__action { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--accent); font-size: 14px; font-weight: 600; }
:is(.event-browser,.rail--single) .blood-entry { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px 24px; align-items: center; }
:is(.event-browser,.rail--single) .blood-entry__top { grid-row: span 2; flex-direction: column; align-items: center; }
:is(.event-browser,.rail--single) .blood-entry__availability { max-width: 140px; text-align: center; }
:is(.event-browser,.rail--single) .blood-entry__action { grid-column: 3; grid-row: 1 / span 2; border: 0; padding: 0; margin: 0; }
:is(.event-browser,.rail--single) .blood-entry__facts { grid-column: 2; }
.event-row__action { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--accent); font-size: 14px; font-weight: 600; margin-top: auto; }
/* Main reading path. Quiet supporting figures replace four competing hero tiles. */
.portal .hero__inner { grid-template-columns: minmax(0,1fr); gap: 28px; }
.portal .hero__lede { max-width: 760px; padding: 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.portal .hero h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.22; letter-spacing: -.025em; }
.portal .hero h1 em { color: var(--text-primary); font-style: normal; }
.portal .hero__sub { font-size: 15px; line-height: 1.8; max-width: 52ch; }
.portal .hero__figures { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; overflow: hidden; }
.portal .hero__figure { border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; padding: 20px 24px; }
.portal .hero__figure:last-child { border-right: 0; }
.portal .hero__figure b { color: var(--text-primary); font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.portal .rail { align-items: stretch; }
.portal .event { box-shadow: none; border-color: var(--border); gap: 16px; padding: 24px; }
.portal .event__foot { margin-top: auto; }
.portal .square-grid--home .square-card:first-child { background: var(--surface); }
.portal .square-card { box-shadow: none; border-color: var(--border); min-height: 180px; gap: 12px; padding: 24px; }
.portal .square-card__icon { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
.portal .square-card h3 { letter-spacing: var(--tracking-heading); }
.portal .program { background: transparent; border: 0; padding: 20px 0; box-shadow: none; }
.portal .community-programs .program { padding: 24px; background: var(--surface); border: 1px solid var(--border); }
.portal .workflow-registration { box-shadow: none; background: transparent; }
/* Operational data needs a stable grid, without nested elevation. */
.console .wsregion, .console .metric, .activity-summary > *, .activity-person, .activity-detail-head { box-shadow: none; }
.console .wsregion .metric { background: transparent; border: 0; }
.console .queue__row { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 4px; }
.console .activity-stages > * { background: transparent; border-radius: 0; }
.console .metric__value { font-variant-numeric: tabular-nums; }
@media (hover:hover) {
  .portal :is(.square-card,.event,.event-row):hover { box-shadow: none; border-color: var(--accent); }
  .blood-entry:hover { border-color: var(--accent); }
  .blood-entry:hover .blood-entry__action .ico { transform: translateX(3px); }
}
.blood-entry__action .ico { transition: transform 180ms ease-out; }
@media (min-width:801px) and (max-width:1100px) {
  .portal .hero__figures { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .portal .hero__figure { border-bottom: 0; border-right: 1px solid var(--border); }
  .portal .hero__figure:last-child { border-right: 0; }
}
@media (max-width:700px) {
  .blood-entry { padding: 20px; gap: 16px; }
  :is(.event-browser,.rail--single) .blood-entry { display: flex; align-items: stretch; }
  :is(.event-browser,.rail--single) .blood-entry__top { flex-direction: row; }
  :is(.event-browser,.rail--single) .blood-entry__availability { max-width: none; text-align: right; }
  :is(.event-browser,.rail--single) .blood-entry__action { border-top: 1px solid var(--border); padding-top: 16px; }
  .portal .hero__figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal .hero__figure { padding:16px 12px; }
  .portal .hero__figure:nth-child(2) { border-right:0; }
  .portal .hero__figure:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .portal .hero__figure b { font-size: 30px; }
  .portal .event { padding: 20px; }
  .portal .blood-calendar__toolbar { width: 100%; justify-content: space-between; gap: 8px; }
  .portal .blood-calendar__toolbar strong { font-size: 12px; text-align: center; }
  .portal .blood-calendar__toolbar .btn { padding-inline: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .blood-entry, .blood-entry__action .ico { transition: none; }
  .blood-entry:hover .blood-entry__action .ico { transform: none; }
}

.portal .rail--single { grid-template-columns: minmax(0,1fr); }

/* Blood appointments: semantic colors stay distinct across accent themes. */
.portal .blood-slot-top { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; }
.portal .blood-slot-status { font-size:11px; white-space:nowrap; }
.portal .blood-slot-capacity { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.blood-wish-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--border); }
@media(max-width:700px) { .blood-wish-row { align-items:flex-start; flex-direction:column; } }

/* /styles/portal-discovery.css */
/* Shared discovery controls; homepage composition is owned by discovery-art.css. */
.portal .registration-actions { display:grid; grid-template-columns:minmax(140px,1fr); align-items:center; gap:10px; margin:0; }
.portal .registration-actions .btn { min-height:44px; min-width:0; padding-inline:14px; white-space:nowrap; }
.event-browser .blood-entry__top { grid-column:1; grid-row:1; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
.event-browser .blood-entry__body { grid-column:1; grid-row:2; }
.event-browser .blood-entry__facts { grid-column:1; grid-row:3; }
.event-browser .blood-entry__action { grid-column:2; grid-row:1 / span 3; align-self:center; }
@media(max-width:760px) {
  .event-browser .blood-entry { padding:20px; }
  .portal .registration-actions { width:100%; grid-column:1/-1; border-top:1px solid var(--border); padding-top:16px; }
  .portal .registration-actions .btn { padding-inline:10px; }
}
.discovery-filters { --field-h:48px; --control-radius:12px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(340px,1.15fr) minmax(280px,.95fr); gap:24px; align-items:end; padding:24px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.discovery-filters__search,.discovery-filters__group { display:grid; gap:10px; min-width:0; }
.discovery-filters .field__label { margin:0; line-height:20px; }
.discovery-filters .search-field { width:100%; max-width:none; min-height:48px; }
.filter-segments { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(var(--choices),minmax(0,1fr)); padding:4px; min-height:48px; border:1px solid var(--border); border-radius:12px; background:var(--bg-sunken); }
.filter-segments__indicator { position:absolute; z-index:-1; inset:4px auto 4px 4px; width:calc((100% - 8px) / var(--choices)); border-radius:8px; background:var(--surface-raised); box-shadow:0 1px 4px rgb(0 0 0 / .09); transform:translateX(calc(var(--choice) * 100%)); transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.filter-segments button { min-width:0; min-height:38px; padding:6px 8px; border-radius:8px; font-size:14px; white-space:nowrap; color:var(--text-secondary); transition:color 160ms ease; }
.filter-segments button[aria-checked="true"] { color:var(--text-primary); font-weight:650; }
.filter-segments__compact-label { display:none; }
.filter-segments button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.filter-segments--keyboard .filter-segments__indicator { transition:none; }
.event-browser--aligned .psection__head { align-items:center; justify-content:space-between; }
.event-browser--aligned .events-results { padding-inline:4px; }
.event-browser--aligned .events-results p { margin:0; }
.event-browser--aligned .row-2:empty { display:none; }

@media(hover:hover) and (pointer:fine) {
  .filter-segments button:hover { color:var(--text-primary); }
}
@media(max-width:1100px) {
  .discovery-filters { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; }
  .discovery-filters__search { grid-column:1/-1; }
}
@media(max-width:640px) {
  .discovery-filters { grid-template-columns:minmax(0,1fr); padding:16px; gap:18px; border-radius:16px; }
  .filter-segments__full-label { display:none; }
  .filter-segments__compact-label { display:inline; }
  .filter-segments button { font-size:13px; padding-inline:3px; min-height:40px; }
}
@media(prefers-reduced-motion:reduce) {
  .filter-segments__indicator { transition:none; }
}

/* The supplied official emblem is displayed intact, independent of theme. */
.brand-emblem { display:block; width:44px; height:44px; flex:none; object-fit:contain; border-radius:50%; background:#fff; }
.portal .plogo__text .brand-wordmark,.console .nav__brand-text .brand-wordmark { font-family:"Times New Roman",serif; font-size:13px; font-weight:700; letter-spacing:.025em; text-transform:none; line-height:1.35; color:#21386b; }
.portal .plogo__text { gap:3px; }
@media(max-width:640px) {
  .brand-emblem { width:36px; height:36px; }
  .portal .plogo__text .brand-wordmark { font-size:11px; letter-spacing:.025em; }
}

/* The plaza borrows the home page's brand surface; browsing stays quiet. */
.portal .event-browser--aligned .psection { padding-top:32px; }
.portal .discovery-intro { position:relative; isolation:isolate; overflow:hidden; margin:0 0 24px; padding:44px 36px; gap:28px; border:1px solid var(--border-soft); border-radius:24px; color:var(--hero-ink);  }

.portal .discovery-intro .t-h1 { font-size:clamp(28px,3.2vw,44px); font-weight:650; letter-spacing:-.035em; line-height:1.3; }
.discovery-intro__eyebrow { margin:0 0 12px; font-size:12px; letter-spacing:.1em; color:var(--art-accent); }
.portal .discovery-intro .t-secondary { color:var(--text-secondary); margin-top:12px; }
.discovery-intro__account { display:grid; justify-items:end; gap:12px; flex:none; }
.discovery-intro__account > span { font-size:12px; color:var(--text-secondary); }
.portal .discovery-intro__account .btn { background:var(--hero-ink); color:var(--canvas-raised); border:1px solid var(--hero-ink); min-height:46px; padding-inline:20px; }
.portal .event-browser--aligned .discovery-filters { border-radius:18px; padding:22px 24px; gap:24px; box-shadow:0 4px 18px -14px rgb(46 17 25 / .2); }
.portal .event-browser--aligned .events-results { display:flex; align-items:center; gap:10px; padding:0 4px; }
.portal .event-browser--aligned .events-results::before { content:''; width:4px; height:14px; border-radius:2px; background:var(--accent); }
.portal .event-browser--aligned .blood-entry { position:relative; grid-template-columns:minmax(0,1fr) auto; border-radius:20px; padding:28px; gap:12px 28px; background:linear-gradient(110deg,var(--accent-soft),var(--surface) 54%); border:1px solid var(--border); border-left:4px solid var(--accent); transition:box-shadow 200ms ease,border-color 200ms ease,transform 200ms cubic-bezier(.22,1,.36,1); }
.portal .event-browser--aligned .blood-entry__body h3 { font-size:24px; letter-spacing:-.025em; }
.portal .event-browser--aligned .event-list { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.portal .event-browser--aligned .event-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:24px; padding:28px; border-radius:20px; transition:box-shadow 200ms ease,border-color 200ms ease,transform 200ms cubic-bezier(.22,1,.36,1); }
.portal .event-browser--aligned .event-row__date { width:64px; min-height:76px; display:grid; place-content:center; gap:4px; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.portal .event-browser--aligned .event-row__date b { font-size:28px; line-height:1; }
.portal .event-browser--aligned .event-row__body { display:grid; gap:10px; }
.portal .event-browser--aligned .registration-actions .btn { min-height:46px; padding-inline:20px; border-radius:12px; }
@media(hover:hover) and (pointer:fine) {
 .portal .event-browser--aligned :is(.blood-entry,.event-row):hover { transform:translateY(-2px); box-shadow:0 12px 30px -22px rgb(45 18 24 / .38); border-color:var(--accent); }
 .portal .discovery-intro__account .btn:hover { background:#efdce1; }
}
@media(max-width:760px) {
 .portal .discovery-intro { padding:28px 24px; flex-direction:column; align-items:flex-start; gap:24px; border-radius:20px; }
 .discovery-intro__account { justify-items:start; }
 .discovery-intro__account > span { display:none; }
 .portal .event-browser--aligned .blood-entry { display:flex; flex-direction:column; padding:22px; }
 .portal .event-browser--aligned .event-row { grid-template-columns:52px minmax(0,1fr); gap:16px; padding:22px; }
 .portal .event-browser--aligned .event-row__date { width:52px; min-height:68px; }
 .portal .event-browser--aligned .registration-actions { grid-column:1/-1; width:100%; }
}
@media(max-width:640px) {
 .portal .event-browser--aligned .psection { padding-top:20px; }
 .portal .event-browser--aligned .discovery-filters { padding:16px; gap:18px; }
 .portal .discovery-intro .t-h1 { font-size:28px; max-width:9em; }
}
@media(prefers-reduced-motion:reduce) { .portal .event-browser--aligned :is(.blood-entry,.event-row) { transition:none; transform:none; } }

/* Search field is self-contained in this release. */
.discovery-filters .search-field { position:relative; display:flex; align-items:center; }
.discovery-filters .search-field > .ico { position:absolute; left:14px; color:var(--text-secondary); pointer-events:none; }
.discovery-filters .search-field > .input { width:100%; height:48px; min-height:48px; padding-left:40px; padding-right:42px; border-radius:12px; }
.discovery-filters .search-field__clear { position:absolute; right:3px; width:40px; height:40px; display:grid; place-items:center; border:0; color:var(--text-secondary); background:transparent; border-radius:8px; }
.discovery-filters .search-field__clear[hidden] { display:none; }
.discovery-filters .search-field > .input::-webkit-search-cancel-button { display:none; }
@media(max-width:700px) { .discovery-filters .search-field > .input { font-size:16px; } }

.portal .rail--single .blood-entry { grid-template-columns:minmax(0,1fr) auto; }
.portal .rail--single .blood-entry__top { grid-column:1; grid-row:1; flex-direction:row; justify-content:flex-start; gap:8px; flex-wrap:wrap; }
.portal .rail--single .blood-entry__body { grid-column:1; grid-row:2; }
.portal .rail--single .blood-entry__facts { grid-column:1; grid-row:3; }
.portal .rail--single .blood-entry__action { grid-column:2; grid-row:1/span 3; }

/* Footer: clear destinations, restrained brand detail, generous touch targets. */
.pfoot { background: var(--bg-sunken); border-top: 1px solid var(--border); }
.pfoot__inner { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding-block: 56px 40px; }
.pfoot__brand { min-width: 0; padding-right: 24px; }
.pfoot__motto { margin: 24px 0 10px; font-size: 18px; font-weight: 650; color: var(--text); letter-spacing: .02em; }
.pfoot__description { max-width: 32em; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.9; }
.pfoot__col { gap: 2px; }
.pfoot__col h2 { margin: 0 0 12px; font-size: 12px; letter-spacing: .12em; color: var(--text-secondary); }
.pfoot__col .pfoot__link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 4px 0; border-bottom: 1px solid transparent; text-decoration: none; transition: color 180ms ease, border-color 180ms ease; }
.pfoot__arrow { opacity: 0; transform: translate(-4px, 4px); transition: opacity 180ms ease, transform 180ms ease; }
.pfoot__link:hover, .pfoot__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--border); }
.pfoot__link:hover .pfoot__arrow, .pfoot__link:focus-visible .pfoot__arrow, .pfoot__link[aria-current="page"] .pfoot__arrow { opacity: 1; transform: translate(0, 0); }
.pfoot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.pfoot__values { letter-spacing: .18em; color: var(--text-secondary); }
@media (max-width: 800px) {
  .pfoot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; padding-block: 36px 28px; }
  .pfoot__brand { grid-column: 1 / -1; padding: 0 0 24px; border-bottom: 1px solid var(--border); }
  .pfoot__col:first-child { grid-column: auto; }
}
@media (max-width: 480px) {
  .pfoot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfoot__bar { padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pfoot__arrow, .pfoot__col .pfoot__link { transition: none; } }

/* The other service plazas share the home/plaza brand surface and rhythm. */
.portal .plaza-frame { width: 100%; min-width: 0; max-width: var(--content-max); margin-inline: auto; padding: 32px var(--s8) 72px; display: grid; gap: 28px; }
.portal .events-page .plaza-frame { padding-bottom:48px; }
.portal .plaza-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: 0; padding: 40px 36px; }
/* On the activity browser the page is a single browsing surface, so the
   header card needs a visible background to read as a rounded rectangle.
   The filters and list below stay borderless on the page background, as
   before.
   NOTE: the activity browser keeps the legacy `.event-browser--aligned` class
   for its list styling, and discovery-art.css (loaded AFTER this file) resets
   `.discovery-intro` on that class to `background:transparent; border:0;
   border-radius:0`. Joining both classes here raises specificity to 4 classes
   so the card treatment wins regardless of load order. */
.portal .events-page .discovery-intro.plaza-intro { padding: 40px 36px; border: 1px solid var(--border-soft); border-radius: 24px; background: var(--surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 4%, transparent) inset; }
.plaza-intro__copy { min-width: 0; max-width: 42em; }
.portal .plaza-intro .t-h1 { max-width: 18em; text-wrap: balance; }
.portal .plaza-intro .t-secondary { max-width: 36em; line-height: 1.85; font-size: 15px; }
.plaza-intro__side { display: grid; justify-items: end; gap: 16px; }
.plaza-intro__symbol { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; border: 1px solid var(--border-soft); color: var(--art-accent); background: var(--art-paper); }
.plaza-intro__symbol .ico { width: 28px; height: 28px; }
.plaza-intro__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.portal .plaza-intro__actions .btn { min-height: 46px; padding-inline: 18px; border-radius: 12px; }
.portal .plaza-intro__actions .btn--primary { background: var(--hero-ink); border-color: var(--hero-ink); color: var(--canvas-raised); }
.portal .plaza-intro__actions .btn--secondary { background: var(--canvas-raised); border-color: var(--border-soft); color: var(--hero-ink); box-shadow: none; }
.plaza-intro__note { margin: 0; color: var(--text-secondary); font-size: 12px; text-align: right; }
.plaza-section { min-width: 0; display: grid; gap: 18px; }
.plaza-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.plaza-section__head p { margin: 0; }
.outreach-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.outreach-channel { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 18px; padding: 28px; color: var(--text-primary); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); text-decoration: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
.outreach-channel__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.outreach-channel__body { display: grid; gap: 10px; }
.outreach-channel__body .t-h2 { font-size: 22px; }
.outreach-channel__body p { margin: 0; line-height: 1.8; }
.outreach-channel__action { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: 13px; }
.outreach-channel__action .ico { transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.service-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px; gap: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-sunken); }
.service-flow__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.service-flow__step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--accent); background: var(--surface); }
.service-flow__item h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.service-flow__item p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.75; }
.portal .plaza-frame .panel { min-width: 0; box-shadow: none; border-radius: 20px; }
.portal .plaza-frame .panel__head { padding: 22px 24px; align-items: center; flex-wrap: wrap; gap: 12px; }
.portal .plaza-frame .panel__body { padding: 24px; }
.portal .plaza-frame .panel__head .t-h2 { font-size: 20px; }
.portal .plaza-frame .btn { min-height: 44px; }
.portal .plaza-frame .community-programs { gap: 20px; border: 0; background: transparent; }
.portal .plaza-frame .community-programs .program { display: flex; align-items: stretch; flex-direction: column; padding: 28px; gap: 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: none; }
.portal .plaza-frame .program__icon { width: 48px; height: 48px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.portal .plaza-frame .program__body { gap: 14px; }
.portal .plaza-frame .program__body > p { line-height: 1.85; }
.portal .plaza-frame .program__title { font-size: 22px; }
.portal .plaza-frame .program > .btn { margin-top: auto; width: 100%; min-height: 46px; }
.program-details { margin-top: 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.program-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; min-height: 48px; cursor: pointer; list-style: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.program-details summary::-webkit-details-marker { display: none; }
.program-details summary .ico { transition: transform 160ms cubic-bezier(.22,1,.36,1); }
.program-details[open] summary .ico { transform: rotate(180deg); }
.program-details .warmth__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 4px 0 20px; }
.portal .plaza-frame .warmth-letter-panel { background: var(--surface); border-color: var(--border); }
.portal .plaza-frame .warmth-letter-panel__title { font-size: 22px; }
.portal .service-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 24px; }
.material-form { min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.material-form .panel { border: 0; border-radius: 0; background: transparent; }
.material-form .panel__body { padding: 0; }
.material-form .steps { margin-bottom: 4px; }
.service-aside { padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-sunken); }
.service-aside > p { margin: 14px 0 24px; line-height: 1.85; }
.service-aside__rule { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.service-aside__rule h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
.service-aside__rule p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.8; }
.member-toolbar, .member-session-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.member-toolbar p, .member-session-actions p { margin: 0; }
.member-session-actions { border-top: 1px solid var(--border); padding-top: 20px; }
.member-workspace { display: grid; gap: 24px; min-width: 0; }
.member-tabs { max-width: 520px; width: 100%; }
.member-tabs button[aria-selected="true"] { color: var(--text-primary); font-weight: 650; }
.member-view { min-width: 0; outline-offset: 4px; }
.member-view[hidden] { display: none !important; }
.member-view .profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.member-view .state { min-height: 160px; padding: 24px; gap: 12px; }
.member-view .state__art { width: 40px; height: 40px; }
.member-view .queue-row { min-width: 0; }
.plaza-frame :is(a, button, summary, [role="tabpanel"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .outreach-channel:hover { border-color: var(--accent); box-shadow: 0 10px 24px -20px rgb(45 18 24 / .3); }
  .outreach-channel:hover .outreach-channel__action .ico { transform: translateX(4px); }
  .portal .plaza-intro__actions .btn--primary:hover { background: var(--accent-soft); }
  .portal .plaza-intro__actions .btn--secondary:hover { background: var(--accent-soft); }
}
@media (max-width: 1000px) {
  .portal .service-workspace { grid-template-columns: minmax(0, 1fr); }
  .service-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
  .service-aside > h2, .service-aside > p { grid-column: 1 / -1; margin: 0; }
  .service-aside__rule { margin: 0; }
}
@media (max-width: 760px) {
  .portal .plaza-frame { padding: 20px 16px 48px; gap: 24px; }
  .portal .plaza-intro { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 24px; }
  /* Same specificity bump as above; discovery-art.css also resets the header
     padding inside this breakpoint. */
  .portal .events-page .discovery-intro.plaza-intro { padding: 28px 24px; border-radius: 20px; }
  .portal .plaza-intro .t-h1 { max-width: 16em; }
  .plaza-intro__side { justify-items: start; gap: 12px; }
  .plaza-intro__symbol { display: none; }
  .plaza-intro__actions { justify-content: flex-start; }
  .plaza-intro__note { text-align: left; }
  .outreach-channels { grid-template-columns: minmax(0, 1fr); }
  .service-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .portal .plaza-frame .community-programs { grid-template-columns: minmax(0, 1fr); }
  .portal .plaza-frame .community-programs .program { padding: 24px; }
  .portal .plaza-frame .panel__head, .portal .plaza-frame .panel__body { padding: 20px; }
  .service-aside { grid-template-columns: minmax(0, 1fr); }
  .member-toolbar { align-items: start; flex-direction: column; }
}
@media (max-width: 480px) {
  .portal .plaza-intro { padding: 26px 20px; }
  .portal .plaza-intro .t-h1 { font-size: 27px; }
  .portal .plaza-intro .t-secondary { font-size: 14px; }
  .plaza-intro__actions { width: 100%; }
  .plaza-intro__actions .btn { flex: 1 1 auto; }
  .outreach-channel { grid-template-columns: 40px minmax(0, 1fr); padding: 22px 20px; gap: 14px; }
  .outreach-channel__icon { width: 40px; height: 40px; border-radius: 12px; }
  .outreach-channel__body .t-h2 { font-size: 20px; }
  .outreach-channel__action { grid-column: 1 / -1; }
  .material-form { padding: 20px; }
  .member-view .profile-fields { grid-template-columns: minmax(0, 1fr); }
  .member-session-actions { align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .outreach-channel, .outreach-channel__action .ico, .program-details summary .ico { transition: none; }
}

.member-hours__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 24px; }
.member-hours__metrics > div { min-width: 0; padding-left: 24px; border-left: 1px solid var(--border); }
.member-hours__metrics > div:first-child { padding-left: 0; border: 0; }
.member-hours__metrics dt { color: var(--text-secondary); font-size: 13px; }
.member-hours__metrics dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.member-hours__metrics strong { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; }
.member-hours__metrics dd span { color: var(--text-secondary); font-size: 12px; }
.member-hours > .panel__head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.member-hours__records { display:grid; gap:12px; border-top:1px solid var(--border); padding-top:20px; }
.member-hours__record { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:12px; border-bottom:1px solid var(--border-soft); }
.member-hours__record:last-child { border-bottom:0; }
.member-hours__record-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media(max-width:700px) { .member-hours__record { align-items:start; flex-direction:column; } }
@media (max-width: 480px) {
  .member-hours__metrics { gap: 12px; }
  .member-hours__metrics > div { padding-left: 12px; }
  .member-hours__metrics strong { font-size: 24px; }
}

/* Membership labels: muted borders keep department names readable in every theme. */
.member-department { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border: 1px solid var(--member-department-border); border-radius: 8px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.member-department--presidium { --member-department-border: #b598aa; }
.member-department--life { --member-department-border: #92aaa0; }
.member-department--care { --member-department-border: #94a6bb; }
.member-department--affairs { --member-department-border: #baa887; }

/* /styles/warmth.css */
/* Birthday-specific layout only; main tokens and neighboring components own the visual system. */
.warmth-report-banner { background: var(--warning-soft); }
.warmth-report-banner[data-tone="success"] { background: var(--success-soft); }
.warmth-report-banner[data-tone="neutral"] { background: var(--surface-raised); }
.warmth-report-banner__item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.warmth-report-banner__item:hover { background: var(--surface); }
.warmth-report-banner__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.warmth-report-banner__row { display: flex; align-items: center; gap: var(--s2); }
.warmth-report-banner__row .warmth-report-banner__item { flex: 1; min-width: 0; }
.warmth-letter-panel__intro { max-width: 70ch; }
.warmth-letter-panel__hint { color: var(--text-secondary); }
.warmth-letter-panel :is(p, h2, h3), .blessing-delivery-hint { min-width: 0; overflow-wrap: anywhere; line-break: strict; }
.warmth-member-blessings .queue__row[data-actions="true"] .queue__action { opacity: 1; transform: none; }
.warmth-letter { display: grid; gap: var(--s5); padding: var(--s6); border-radius: var(--r-lg); background: var(--surface-raised); }
.warmth-letter .blessing-preview__content { margin: 0; padding: 0; min-height: 0; border: 0; background: transparent; color: var(--text-primary); font-family: var(--font-reading); font-size: var(--fs-title); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.warmth-letter__seal { justify-self: start; color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.warmth-letter__signature { display: grid; gap: var(--s1); justify-self: end; max-width: 100%; text-align: right; color: var(--text-secondary); font-size: var(--fs-secondary); }
.warmth-letter__signature span { overflow-wrap: anywhere; }
.warmth-letter__signature-name { color: var(--text-primary); font-weight: var(--fw-semibold); }
.warmth-member-blessings .panel__head { flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 720px) {
  .warmth-letter { padding: var(--s4); }
  .warmth-report-banner__row { align-items: stretch; flex-direction: column; }
  .warmth-member-blessings .queue__row { flex-wrap: wrap; }
  .warmth-member-blessings .queue__row[data-actions="true"] .queue__action { margin-left: 0; flex-wrap: wrap; }
}

/* Scoped dialog content shares the platform controls and responsive sheet. */
.blessing-preview__content { margin: 0; padding: var(--s4); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font-size: var(--fs-body); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer:has(.blessing-delivery-hint) { grid-template-columns: minmax(0, 1fr); }
:is(.drawer, .sheet):has(.blessing-delivery-hint) .drawer__foot { flex-wrap: wrap; }

.warmth-member-blessings .panel__head > .section-head__text { flex: 1 1 260px; min-width: 0; }
.warmth-member-blessings .panel__head > .btn { flex: 0 0 auto; white-space: nowrap; }
.warmth-member-blessings .panel__head > .spacer { display: none; }
@media (max-width: 720px) {
  .warmth-member-blessings .panel__head > .section-head__text { flex-basis: 100%; }
}

/* Community landing: editorial introduction, two distinct programs, private mail desk.
   These selectors own this route only; shared letter dialogs remain above. */
.community-page { width: calc(100% - clamp(40px, 10vw, 144px)); max-width: 1440px; margin: 0 auto; padding: 48px 0 64px; }
.community-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.community-eyebrow { color: var(--text-secondary); font-size: 13px; font-weight: 600; letter-spacing: .08em; margin: 0 0 20px; }
.community-heading h1 { margin: 0; font-size: clamp(38px, 3.7vw, 62px); line-height: 1.2; letter-spacing: 0; font-family:var(--font-display-editorial); font-weight: 700; }
.community-heading h1 span { color: var(--accent); }
.community-heading__aside { padding-bottom: 4px; justify-self: end; }
.community-heading__aside p { line-height: 1.85; color: var(--text-secondary); white-space: pre-line; margin: 0 0 20px; }
.community-programs { display: grid; grid-template-columns: 1.12fr 1fr; gap: 24px; }
.community-program { position: relative; overflow: hidden; padding: 30px 34px 22px; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--hero-ink); background: var(--art-paper); display: flex; flex-direction: column; min-width: 0; }
.community-program--morning { color: var(--canvas-raised); background: var(--art-accent); border-color: var(--art-accent); }
.community-program__top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; letter-spacing: .08em; position: relative; z-index: 1; }
.community-program__copy { position: relative; z-index: 1; margin: 62px 0 32px; }
.community-program h2 { margin: 0 0 18px; font-size: clamp(28px, 2.4vw, 38px); font-weight: 650; letter-spacing: 0; }
.community-program__copy > p { font-size: 20px; line-height: 1.7; white-space: pre-line; margin: 0; max-width: 25em; }
.community-program__copy .community-program__description { font-size: 14px; line-height: 1.8; margin-top: 22px; max-width: 29em; }
.community-program__participation { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; margin-top: auto; border-top: 1px solid var(--border-soft); position: relative; z-index: 1; }
.community-program--morning .community-program__participation { border-color: color-mix(in srgb,var(--canvas-raised) 40%,transparent); }
.community-program__status { font-size: 13px; font-weight: 600; }
.community-program__participation .btn { min-height: 46px; }
.community-program__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.community-program--morning .btn--primary { background: var(--canvas-raised); border-color: var(--canvas-raised); color: var(--art-accent); }
.community-program--morning .btn--primary:hover { background: var(--canvas-muted); border-color: var(--canvas-muted); }
.community-program__privacy { position: relative; z-index: 1; margin-top: 20px; font-size: 13px; line-height: 1.8; }
.community-program__privacy summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.community-program__privacy summary:focus-visible, .community-maildesk summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.community-program__privacy p { margin: 12px 0; }
.community-program__privacy ul { padding-left: 20px; }
.community-art { pointer-events: none; position: absolute; right: 30px; top: 74px; width: 152px; height: 124px; opacity: .55; }
.community-art--birthday { transform: rotate(-12deg); border: 1px solid #b78e83; background: #f9efe5; border-radius: 2px; }
.community-art--birthday::before { content: ''; position: absolute; inset: 0; background: #e9d1c3; clip-path: polygon(0 0,100% 0,50% 62%); }
.community-art--birthday .community-art__seal { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #aa4b55; left: calc(50% - 12px); top: 62%; }
.community-art--morning { border-bottom: 1px solid #aeb0a4; }
.community-art--morning::before { content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 60px; border-radius: 120px 120px 0 0; background: #dfb780; }
.community-art--morning .community-art__seal { position: absolute; width: 30px; height: 30px; border-radius: 50%; top: 0; left: 0; box-shadow: 8px 5px 0 0 #e9e1cf; }
.community-maildesk { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; padding: 36px 0 20px; margin-top: 12px; }
.community-maildesk h2 { margin: 8px 0 0; font-size: 26px; }
.community-maildesk .community-eyebrow { margin: 0; }
.community-maildesk > p { line-height: 1.8; color: var(--text-secondary); align-self: end; margin: 0; }
.community-maildesk__rules { grid-column: 1 / -1; color: var(--text-secondary); font-size: 14px; line-height: 1.8; }
.community-maildesk summary { cursor: pointer; width: fit-content; }
.community-mailboxes { display: grid; gap: 16px; }
.community-care { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--border); margin-top: 40px; padding-top: 26px; }
.community-care > .ico { color: var(--accent); flex-shrink: 0; }
.community-care > div { flex: 1; }
.community-care h2 { font-size: 16px; margin: 0 0 8px; }
.community-care p { font-size: 13px; color: var(--text-secondary); line-height: 1.8; margin: 0; max-width: 70em; }
.community-page > .warmth-report-banner { margin-top: 24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) .community-art { transition: transform 220ms ease-out; }
  html:not([data-motion="reduced"]) .community-program--birthday:hover .community-art { transform: rotate(-6deg) translateY(-4px); }
  html:not([data-motion="reduced"]) .community-program--morning:hover .community-art { transform: translateY(-4px); }
}
@media (max-width: 1100px) {
  .community-art { width: 100px; right: 20px; opacity: .3; }
  .community-program { padding: 26px 24px 20px; }
}
@media (max-width: 720px) {
  .community-page { padding-top: 28px; }
  .community-heading, .community-programs, .community-maildesk { grid-template-columns: 1fr; gap: 24px; }
  .community-heading__aside { justify-self: start; }
  .community-heading h1 { font-size: 38px; }
  .community-program__copy { margin-top: 42px; }
  .community-care { align-items: flex-start; flex-wrap: wrap; }
  .community-care > div { flex-basis: 80%; }
  .community-program__participation { flex-wrap: wrap; }
  .community-program__actions { width: 100%; justify-content: flex-start; }
}
/* Community editorial heading shares the paper field, not a second hero panel. */
.portal .community-page .plaza-intro { background:transparent; border:0; border-radius:0; padding-inline:0; overflow:visible; }
.portal .community-page .plaza-intro .t-h1 { font-family:var(--font-display-editorial); letter-spacing:0; line-height:1.35; }
.portal .community-page .plaza-intro::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background:repeating-linear-gradient(8deg,transparent 0 5px,var(--border-soft) 6px,transparent 7px); mask-image:linear-gradient(90deg,#000,transparent 75%); }
@media(forced-colors:active) { .portal .community-page .plaza-intro::before { display:none; } }

/* /styles/morning.css */
/* Independent “早安晚安” registration surface. */

.morning-view {
  display: grid;
  gap: 24px;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.morning-content {
  width: 100%;
}

.morning-identity {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-accent-soft);
}

.morning-form {
  display: grid;
  gap: 20px;
}

.morning-form__grid {
  display: grid;
  gap: 16px;
}

.morning-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.morning-form__grid > .field,
.campus-segmented-field {
  min-width: 0;
  min-height: 118px;
}

.morning-form__grid .input {
  height: 44px;
}

.campus-segmented-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.campus-segmented-field .field__label {
  min-height: 25px;
  line-height: 1.4;
}

.campus-segmented-field .segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-height: 44px;
  padding: 4px;
  border-color: var(--accent-strong, var(--accent));
  background: var(--surface);
}

.campus-segmented-field .segmented__thumb {
  top: 4px;
  bottom: 4px;
  border: 1px solid var(--accent-strong, var(--accent));
  background: var(--accent-strong, var(--accent));
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}

.campus-segmented-field .segmented button {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 6px;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.campus-segmented-field .segmented button[aria-checked="true"] {
  color: white;
}

.campus-segmented-field .segmented[aria-invalid="true"] {
  border-color: var(--danger);
}

.morning-tags-field {
  display: grid;
  gap: 12px;
}

.morning-tags__samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.morning-tags__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.morning-tags__grid .field {
  min-width: 0;
}

.morning-tags__grid .field__label {
  font-size: 0.75rem;
}

.morning-tag-picker__selected,
.morning-tag-picker__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.morning-tag-picker__selected {
  min-height: 30px;
  align-items: center;
}

.morning-tag-picker__selected-tag,
.morning-tag-picker__preset,
.morning-tag-picker__create {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
}

.morning-tag-picker__selected-tag {
  color: var(--accent-strong, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.morning-tag-picker__preset {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface);
}

.morning-tag-picker__create {
  color: var(--accent-strong, var(--accent));
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.morning-tag-picker__preset:hover,
.morning-tag-picker__create:hover,
.morning-tag-picker__selected-tag:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  transform: translateY(-1px);
}

.morning-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.morning-card-status .panel__body,
.morning-form-panel .panel__body {
  display: grid;
  gap: 20px;
}

.morning-plaza-entry__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.morning-plaza-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  align-items: stretch;
}

.morning-plaza-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.morning-plaza-summary p {
  margin: 0;
}

.morning-plaza-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 420px;
  min-width: 0;
  padding: 24px 24px 22px 30px;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--accent) 13%, transparent) 18px 19px, transparent 19px),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 7%, transparent);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.morning-plaza-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(color-mix(in srgb, var(--text-primary) 5%, transparent) 0.6px, transparent 0.6px);
  background-size: 8px 8px;
  opacity: 0.15;
  mask-image: linear-gradient(145deg, #000, transparent 72%);
}

@media (hover: hover) and (pointer: fine) {
  .morning-plaza-card:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-2px);
  }
}

.morning-plaza-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 3px;
}

.morning-plaza-card:active {
  transform: scale(0.995);
}

.morning-plaza-card__letterhead {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 72%, var(--text-secondary));
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.morning-plaza-card__head,
.morning-plaza-card__identity,
.morning-plaza-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.morning-plaza-card__head {
  justify-content: space-between;
}

.morning-plaza-card__identity {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

.morning-plaza-card__avatar {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 5px;
  color: var(--accent-strong, var(--accent));
  background: color-mix(in srgb, var(--surface-accent-soft) 88%, white);
  font-weight: 800;
  font-size: 1.1rem;
  transform: rotate(-2deg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent);
}

.morning-plaza-card__title {
  min-width: 0;
}

.morning-plaza-card__title h2 {
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.morning-plaza-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.78rem;
}

.morning-plaza-card__profile {
  min-height: 30px;
  align-content: flex-start;
}

.morning-plaza-card__note {
  display: -webkit-box;
  flex: 1;
  min-height: 4.9em;
  margin: 0;
  padding-left: 13px;
  color: var(--text-secondary);
  border-left: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  font-family: var(--font-serif);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.morning-plaza-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--border));
}

.morning-card-detail {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 34px) clamp(24px, 4vw, 38px) clamp(30px, 5vw, 48px);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg, transparent 0 24px, color-mix(in srgb, var(--accent) 13%, transparent) 24px 25px, transparent 25px),
    repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--accent) 7%, transparent) 31px 32px),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 7%, transparent);
  overflow: hidden;
}

.morning-card-detail::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text-primary) 5%, transparent) 0.6px, transparent 0.6px);
  background-size: 8px 8px;
  opacity: 0.13;
  mask-image: linear-gradient(145deg, #000, transparent 74%);
}

.morning-letter__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.morning-letter__masthead,
.morning-letter__postmark {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary));
  font-family: var(--font-serif);
  font-size: 0.78rem;
}

.morning-letter__postmark {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform: rotate(7deg);
}

.morning-card-detail__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.morning-card-detail__avatar {
  display: inline-grid;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 6px;
  color: var(--accent-strong, var(--accent));
  background: var(--surface-accent-soft);
  font-weight: 800;
  font-size: 1.5rem;
  transform: rotate(-2deg);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.morning-card-detail__title {
  min-width: 0;
  margin-right: auto;
}

.morning-card-detail__title h1 {
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.18;
  text-wrap: balance;
}

.morning-card-detail__note {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px 20px 22px 28px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-accent-soft) 54%, transparent);
}

.morning-card-detail__note::before {
  content: '“';
  position: absolute;
  top: 8px;
  left: 8px;
  color: color-mix(in srgb, var(--accent) 22%, transparent);
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
}

.morning-card-detail__note p:last-child {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.morning-card-detail__actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 4px;
}

.drawer .morning-card-detail {
  padding: 24px 24px 24px 34px;
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--accent) 13%, transparent) 22px 23px, transparent 23px),
    repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--accent) 7%, transparent) 31px 32px),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
}

.morning-comments {
  display: grid;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--border));
}

.morning-owner-comments {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.morning-comments__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.morning-comments__list {
  display: grid;
  gap: 10px;
}

.morning-comment {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.morning-comment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.morning-comment__head p {
  margin: 0;
}

.morning-comment__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.morning-comment__content {
  margin: 0;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.morning-comments__form {
  display: grid;
  gap: 16px;
}

.morning-comments__delivery {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-accent-soft) 62%, transparent);
}

.morning-comments__contact-head {
  display: grid;
  gap: 2px;
}

.morning-comments__contact-head p {
  margin: 0;
}

.morning-comments__contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.morning-comments__contact-options[data-disabled="true"] {
  opacity: 0.52;
}

.morning-comments__contact-row {
  display: grid;
  gap: 10px;
  align-content: start;
}

.morning-comments__contact-row .field {
  min-width: 0;
}

.morning-comments__contact-row[data-disabled="true"] .field {
  opacity: 0.7;
}

@media (max-width: 980px) {
  .morning-plaza-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .morning-plaza-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .morning-identity,
  .morning-form__grid,
  .morning-tags__grid {
    grid-template-columns: 1fr;
  }

  .morning-plaza-entry__body {
    align-items: stretch;
    flex-direction: column;
  }

  .morning-plaza-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .morning-comments__contact-options {
    grid-template-columns: 1fr;
  }

  .morning-form__actions {
    align-items: stretch;
  }

  .morning-form__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .morning-plaza-card,
  .morning-plaza-card:hover,
  .morning-plaza-card:active,
  .morning-tag-picker__preset,
  .morning-tag-picker__create,
  .morning-tag-picker__selected-tag {
    transform: none;
    transition: none;
  }

  .drawer.drawer--center.morning-detail-modal,
  .drawer.drawer--center.morning-detail-modal[data-closing="true"],
  .scrim--blur-strong,
  .scrim--blur-strong[data-closing="true"],
  .morning-detail-modal .drawer__head,
  .morning-detail-modal .drawer__body > .stack-4 {
    animation: none;
  }
}

/* Match the shared plaza and form system. */
.morning-plaza-card { background:var(--surface); box-shadow:none; padding:24px; }
.morning-plaza-card::before { display:none; }
.morning-plaza-card__letterhead { color:var(--text-muted); }
.morning-card-detail { box-shadow:none; background:var(--surface); }
.morning-form { padding:clamp(18px,3vw,32px); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.morning-form__actions .btn { min-height:48px; }
.morning-view > .plaza-intro { margin-bottom:8px; }
.morning-member-entry { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:20px; }
.morning-plaza-card__note,.morning-card-detail__note { overflow-wrap:anywhere; }

/* The surrounding panel supplies the form boundary. */
.morning-form-panel .morning-form { border: 0; padding: 0; border-radius: 0; }

/* /styles/experience.css */
/* Cross-surface finishing layer. Feature layout and semantic palette remain authoritative. */
:root {
  --reading-leading: 1.8;
  --surface-radius: 14px;
}
html { scroll-padding-top: 88px; }
input, textarea { caret-color: var(--accent); }
:is(h1,h2,h3) { text-wrap: balance; }
:is(.t-secondary,.hero__sub,.state__text p) { text-wrap: pretty; }
:is(.btn,.icon-btn,.field__control,.nav__item,.pnav__link) { touch-action: manipulation; }
:is(.btn,.icon-btn,.field__control,.theme-trigger):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:is(.state__actions,.drawer__foot,.modal__foot) { flex-wrap: wrap; }
:is(.drawer__body,.modal__body,.wsmain) { scroll-padding-block: 24px; }
.drawer__head { align-items: flex-start; }
.drawer__head > .btn { flex-shrink: 0; }
.field__control::placeholder { color: var(--text-muted); opacity: 1; }
.field__hint { line-height: 1.6; }
.table :is(th,td) { font-variant-numeric: tabular-nums; }
.table thead th { font-size: 12px; letter-spacing: 0; height: 42px; background: var(--bg-sunken); }
.table tbody tr:focus-within { background: var(--accent-soft); }
.toolbar { gap: 12px; padding-block: 16px; }
.toolbar__count { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.state__text { max-width: 52ch; }
.metric__go { transition-property: opacity, transform; }

/* The public site keeps its Red Cross identity and brings services into the first viewport. */
.discovery-hero__motto { font-size: 14px; letter-spacing: .12em; color: var(--hero-secondary); }
.discovery-hero__glow { animation: none; }
.discovery-hero__cross { right: 5%; opacity: .07; transform: none; }
.portal .psection__head { align-items: center; gap: 20px; }
.portal .psection__head-text { display: grid; gap: 10px; }
.portal .psection__head .t-secondary { line-height: var(--reading-leading); }
.portal :is(.event,.square-card) { border-radius: var(--surface-radius); }
.portal .square-grid--home { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.portal .square-grid--home .square-card:first-child { grid-column: auto; }
.portal .square-card { min-height: 200px; }
.portal .square-card p { line-height: var(--reading-leading); }
.portal .square-card__action { margin-top: auto; }
.portal .event__title { line-height: 1.5; }
.portal .event__fact { line-height: 1.6; }
.portal .program__body p { line-height: var(--reading-leading); }

/* A calmer, more compact workspace; preserve user-selected density and theme colours. */
.console .nav__item { border-radius: 8px; min-height: 42px; padding-inline: 12px; margin-bottom: 4px; }
.console .nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.console .nav__item:hover .ico { transform: none; }
.console .nav__workspace { border-radius: 10px; }
.console .wsregion { border-radius: var(--surface-radius); padding: 24px; }
.console .wsregion__head { align-items: center; padding-bottom: 16px; }
.console .view:not(.operations-module) .wsregion__body .state { padding: 36px 24px; min-height: 220px; }
.console .state__art { width: 48px; height: 48px; border-radius: 12px; }
.console .state__art .ico { width: 24px; height: 24px; }
.console .wsregion .wsregion { border: 0; border-radius: 0; padding: 0; }
.console .page-head { gap: 20px; }
.console .page-head h1 { font-size: 28px; line-height: 1.35; }
.console .view:not(.operations-module) .metric { gap: 12px; }
.console .view:not(.operations-module) .metric__value { font-size: 30px; }
.console .queue__row { padding: 18px 4px; }
.console .topbar { background: var(--surface); }
.gate--studio .gate__card { border-radius: 16px; box-shadow: var(--e3); }
.gate--studio .gate__intro h2 { letter-spacing: -.025em; }

@media (hover:hover) and (pointer:fine) {
  .portal :is(.event,.square-card):hover { transform: none; border-color: var(--accent); }
}
@media (max-width:1000px) {
  .portal .square-grid--home { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .portal .psection__head { align-items: flex-start; }
  .portal .psection__head > .spacer { display: none; }
  .console .wsregion { padding: 18px 16px; }
  .console .view:not(.operations-module) .wsregion__body .state { padding: 24px 8px; min-height: 180px; }
  .console .page-head h1 { font-size: 24px; }
  :is(.state__actions,.modal__foot) .btn { min-height: 44px; }
  .console .nav__item { min-height: 44px; }
}
@media (max-width:480px) {
  .portal .square-grid--home { grid-template-columns: minmax(0,1fr); }
  .portal .square-card { min-height: 0; padding: 22px; }
  .toolbar__count { width: 100%; }
}
@media (forced-colors:active) {
  .console .nav__item[aria-current="page"] { outline: 1px solid Highlight; }
}

/* /styles/atmosphere.css */
/* Page Art Direction: canvas, axes, local light, ornament, surfaces, transitions.
   Component layouts and semantic status palettes remain with their owners. */
#ambient { display:none; pointer-events:none; }
.portal { background:var(--art-canvas); }
.portal__outlet { isolation:isolate; }
.portal:has(.workflow-page,.member-page,.event-browser--aligned) { background:var(--canvas-workspace); }
.portal:has(.community-page,.morning-view,.outreach-page) { background:var(--canvas-paper); }
[data-art-scene] { position:relative; isolation:isolate; }
.page-art { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:clip; color:var(--art-decor); }
.page-art * { pointer-events:none; }
.page-art__plane { position:absolute; right:-2%; top:0; width:48%; height:88%; background:var(--art-hero-depth); clip-path:var(--art-page-edge); }
.page-art__axis { position:absolute; inset:auto 0 0; height:1px; background:var(--art-line); }
.page-art__ornament { position:absolute; width:250px; height:172px; right:2%; top:10px; opacity:.28; display:none; transform:rotate(var(--art-turn)); }
[data-theme="dawn"] .page-art__ornament--dawn,
[data-theme="sail"] .page-art__ornament--sail,
[data-theme="garden"] .page-art__ornament--garden,
[data-theme="iris"] .page-art__ornament--iris,
[data-theme="amber"] .page-art__ornament--amber { display:block; }
/* P01: static cut-paper stage, bounded to the hero rather than the viewport. */
[data-art-scene="home"] { background:var(--art-canvas); }
.home-paper { position:absolute; top:20px; left:max(0px,calc((100% - 1600px)/2)); width:min(100%,1600px); height:calc(100% - 148px); z-index:-1; pointer-events:none; }
.home-paper * { pointer-events:none; }
.home-paper__back { fill:var(--art-hero-depth); }
.home-page[data-art-direction="spotlight"] .home-paper__back { fill:var(--art-accent); }
.home-paper__ochre { fill:var(--page-aura-2); }
.home-paper__rose { fill:var(--page-aura-1); }
.home-paper__edge { fill:color-mix(in srgb,var(--hero-ink) 8%,var(--art-canvas)); }
.home-paper__front { fill:var(--art-canvas); }
/* Directory and publishing scenes expose only margins around live controls. */
[data-art-scene="directory"] .page-art__plane { width:88px; height:100%; opacity:.65; }
[data-art-scene="directory"] .page-art__ornament { width:120px; right:32%; top:-70px; }
[data-art-scene="editorial"] { background:var(--art-surface); }
[data-art-scene="editorial"] .page-art__plane { width:32%; opacity:.6; }
[data-art-scene="editorial"] .page-art__ornament { right:30%; top:-110px; }
/* Correspondence remains warm; private and scheduling workspaces stay quiet. */
[data-art-scene="letter"] .page-art { inset:-24px -24px -16px; }
[data-art-scene="letter"] .page-art__plane { width:20px; right:auto; left:0; opacity:.7; }
[data-art-scene="letter"] .page-art__ornament { right:42%; top:-105px; opacity:.22; }
[data-art-scene="workspace"] { background:var(--art-surface); border-inline-start:3px solid var(--art-line); }
[data-art-scene="workspace"] .page-art__plane,
[data-art-scene="workspace"] .page-art__ornament,
[data-art-scene="calendar"] .page-art__plane,
[data-art-scene="calendar"] .page-art__ornament { display:none; }
/* A shared page edge connects sections without alternating solid colour bands. */
.home-page .psection--sunken { background:var(--art-canvas); border-block:0; }
.home-page .psection__inner { position:relative; }
.home-page .psection__inner::before { content:''; position:absolute; top:0; left:32px; width:64px; height:3px; background:var(--art-decor); pointer-events:none; }
.console { background:var(--bg-base); }
::selection { background:var(--accent-soft); color:var(--accent); }
@media(max-width:1100px) { .page-art__ornament,.page-art__plane { visibility:hidden; } [data-art-scene="home"] .page-art__axis { inset:auto 32px 0; width:auto; height:1px; } }
@media(forced-colors:active) { .page-art,.home-page .psection__inner::before { display:none; } .portal,.console,[data-art-scene],.home-page .psection--sunken { background:Canvas; } }

@media(max-width:760px) { .home-paper { opacity:.35; } }
@media(forced-colors:active) { .home-paper { display:none; } }

/* /styles/calendar.css */
/* Booking surface: a luminous shell, quiet dates and clearly separated shifts. */

.portal .blood-calendar {
  padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-raised); box-shadow: var(--calendar-shadow); color: var(--calendar-ink);
}
.blood-calendar__header { gap:0; padding: 28px 28px 24px; background: var(--art-paper); }
.blood-calendar__heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.blood-calendar__period { display:grid; gap:7px; }
.blood-calendar__month { font-size:28px; font-weight:650; letter-spacing:-.025em; line-height:1.2; }
.blood-calendar__period > strong { font-size:16px; font-weight:550; color:var(--calendar-muted); font-variant-numeric:tabular-nums; }
.portal .blood-calendar__toolbar { display:flex; width:auto; gap:8px; }
.portal .blood-calendar__toolbar .btn { min-height:44px; box-shadow:none; border:1px solid var(--border); background:var(--canvas-raised); padding-inline:12px; }
.blood-calendar__filters { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:20px; align-items:end; }
.blood-calendar__filter-group { display:grid; gap:10px; min-width:0; }
.blood-calendar__filter-group .field__label { color:var(--calendar-muted); font-size:12px; font-weight:550; }
.blood-calendar .filter-segments { min-height:50px; background:color-mix(in srgb,var(--accent) 5%,var(--canvas-muted)); border:0; border-radius:12px; padding:4px; }
.blood-calendar .filter-segments__indicator { background:var(--accent); box-shadow:0 4px 8px -4px color-mix(in srgb,var(--accent) 65%,transparent); }
.blood-calendar .filter-segments button { font-size:13px; min-height:42px; font-weight:500; color:var(--calendar-muted); padding-inline:6px; }
.blood-calendar .filter-segments button[aria-checked="true"] { color:white; font-weight:650; }
.blood-calendar .filter-segments button:focus-visible { outline-offset:3px; }
.blood-calendar__result { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; padding:12px 28px; }
.blood-calendar__summary { color:var(--calendar-muted); font-size:14px; line-height:1.6; }
.blood-calendar__result .btn { flex:none; }
.blood-calendar__display { display:flex; align-items:center; gap:12px; }
.blood-calendar__density { display:none; }
.blood-calendar__grid { gap:0; padding:0 18px 24px; align-items:stretch; }
.blood-calendar__day { padding:0 8px; border-inline-end:1px solid var(--border-soft); }
.blood-calendar__day:last-child { border-inline-end:0; }
.blood-calendar__date { display:grid; grid-template-rows:20px 31px 16px; gap:3px; padding:12px 4px; height:100px; min-height:100px; color:var(--calendar-muted); font-size:14px; border-radius:10px; transition:background-color 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out; }
.blood-calendar__date b { font-size:27px; font-weight:550; color:var(--calendar-ink); line-height:1.15; }
.blood-calendar__date small { font-size:12px; line-height:1.2; }
.blood-calendar__date > span { line-height:1.2; }
.blood-calendar__day[data-selected="true"] .blood-calendar__date { color:var(--accent); background:var(--accent-soft); box-shadow:none; }
.blood-calendar__day[data-selected="true"] .blood-calendar__date b { color:var(--accent); }
.blood-calendar__date[data-today="true"] b { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.blood-calendar__slots { gap:12px; margin-top:16px; }
.portal .blood-calendar__slot {
  --slot-bg:#f0f6f4; --slot-ink:#28564a;
  position:relative; display:flex; flex-direction:column; gap:8px; align-items:stretch;
  border:1px solid var(--slot-border); border-radius:10px; padding:14px 12px 10px; min-height:154px;
  background:var(--slot-bg);
  box-shadow:none; color:var(--slot-ink);
  transition:border-color 180ms ease-out,box-shadow 180ms ease-out;
}
.portal .blood-calendar__slot .blood-slot-status { font-size:11px; font-weight:500; }
.portal .blood-calendar__slot .blood-slot-location { font-size:16px; font-weight:650; margin-top:3px; line-height:1.45; }
.portal .blood-calendar__slot .blood-calendar__time { font-size:14px; font-weight:550; line-height:1.6; }
.blood-slot-bottom { display:flex; justify-content:space-between; align-items:center; gap:4px; border-top:1px solid color-mix(in srgb,var(--slot-ink) 16%,transparent); padding-top:9px; margin-top:auto; }
.portal .blood-slot-capacity { display:flex; align-items:baseline; gap:3px; font-size:12px; font-weight:500; }
.blood-slot-capacity b { font-size:18px; font-weight:650; }
.blood-slot-bottom > .ico { opacity:.7; }
.portal .blood-calendar__slot[data-active="true"] { outline:2px solid var(--accent); outline-offset:3px; }
.blood-calendar__empty { display:grid; justify-items:center; gap:10px; padding:28px 4px; color:var(--calendar-muted); text-align:center; font-size:11px; line-height:1.7; }
.blood-calendar__empty > .ico { opacity:.55; }
.blood-calendar__empty-hint { margin:0 28px 20px; padding:18px 20px; border-radius:12px; background:var(--accent-soft); color:var(--calendar-ink); line-height:1.7; }
.blood-calendar__legend { --blood-open-bg:#f2f8f4; --blood-open-ink:#24553d; --blood-pending-bg:#fff5d7; --blood-pending-ink:#735016; --blood-own-bg:#e6f2ff; --blood-own-ink:#205880; padding:18px 28px; border-top:1px solid var(--border-soft); background:var(--art-paper); color:var(--calendar-muted); font-size:13px; }
@media (hover:hover) and (pointer:fine) {
 .portal .blood-calendar__slot:hover { box-shadow:0 0 0 1px var(--slot-ink); }
 .blood-calendar__date:hover { background:var(--canvas-muted); }
 .blood-calendar .filter-segments button:not([aria-checked="true"]):hover { color:var(--accent); }
}
@media (max-width:1100px) and (min-width:701px) {
 .blood-calendar__grid { padding-inline:8px; }
 .blood-calendar__day { padding-inline:5px; }
 .portal .blood-calendar__slot { padding:12px 8px; }
 .blood-calendar__filters { grid-template-columns:minmax(0,1fr); gap:14px; }
 .blood-calendar__filter-group:last-child { max-width:300px; }
}
@media (max-width:700px) {
 .blood-calendar__header { gap:0; padding:18px 16px 18px; }
 .blood-calendar__heading { gap:10px; margin-bottom:18px; }
 .blood-calendar__month { font-size:24px; }
 .blood-calendar__period > strong { font-size:11px; }
 .portal .blood-calendar__toolbar { gap:4px; }
 .portal .blood-calendar__toolbar .btn { padding-inline:8px; gap:3px; font-size:12px; }
 .blood-calendar__filters { grid-template-columns:minmax(0,1fr); gap:16px; }
 .blood-calendar .filter-segments button { font-size:12px; white-space:pre-line; line-height:1.45; }
 .blood-calendar__filter-group:last-child .filter-segments { max-width:280px; }
 .blood-calendar__result { padding:14px 16px; flex-wrap:wrap; gap:6px; min-height:68px; }
 .blood-calendar__summary { font-size:12px; }
 .blood-calendar__grid { padding:0 12px 18px; gap:3px; }
 .blood-calendar__day { display:contents; }
 .blood-calendar__date { font-size:11px; height:108px; min-height:108px; padding:10px 0; border-radius:10px; position:relative; }
 .blood-calendar__date b { font-size:22px; }
 .blood-calendar__date small { font-size:12px; }
 /* Take the "今天" indicator out of the grid flow on mobile so the slot count
    stays in row 3 instead of being pushed into an implicit row. The badge
    lives in the bottom padding, fully inside the 108px cell. */
 .blood-calendar__date::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  grid-row: auto;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
 }
 .blood-calendar__slots { margin-top:16px; }
 .portal .blood-calendar__slot { padding:18px; gap:8px; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; }
 .portal .blood-calendar__slot .blood-slot-top { grid-column:1/-1; grid-row:auto; }
 .portal .blood-calendar__slot .blood-slot-status { grid-column:auto; grid-row:auto; }
 .portal .blood-calendar__slot .blood-slot-location { grid-column:1; grid-row:2; font-size:17px; margin:0; }
 .portal .blood-calendar__slot .blood-calendar__time { grid-column:1; grid-row:3; font-size:14px; }
 .blood-slot-bottom { grid-column:2; grid-row:2/4; border:0; margin:0; padding:0; gap:12px; }
 .portal .blood-slot-capacity { display:grid; text-align:right; gap:2px; }
 .blood-slot-capacity b { font-size:27px; }
 .blood-slot-capacity span { font-size:11px; }
 .blood-calendar__empty { padding:32px 12px; font-size:13px; }
 .blood-calendar__empty-hint { margin:0 16px 16px; padding:14px; font-size:13px; }
 .blood-calendar__legend { gap:10px 16px; padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
 .portal .blood-calendar__slot,.blood-calendar__date { transition:none; }
 .portal .blood-calendar__slot:hover { transform:none; }
}
[data-motion="reduced"] .blood-calendar__slot,[data-motion="reduced"] .blood-calendar__date { transition:none; }
[data-motion="reduced"] .blood-calendar__slot:hover { transform:none; }

/* Desktop composition: keep the weekly board broad and the controls collected. */
@media (min-width:1101px) {
 .blood-calendar__header { display:grid; grid-template-columns:260px minmax(0,1fr); gap:32px; padding:30px 32px; position:relative; }
 .blood-calendar__header > * { position:relative; z-index:1; }

 .blood-calendar__heading { display:grid; gap:18px; margin:0; align-content:start; }
 .blood-calendar__month { font-size:30px; color:var(--calendar-ink); }
 .blood-calendar__period { gap:10px; }
 .blood-calendar__filters { grid-template-columns:minmax(0,1fr); gap:18px; align-content:center; }
 .blood-calendar__filter-group { grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:center; }
 .blood-calendar__filter-group:last-child .filter-segments { max-width:280px; }
 .blood-calendar__result { padding:18px 32px; min-height:76px; border-top:1px solid color-mix(in srgb,var(--accent) 7%,white); }
 .blood-calendar__density { display:block; }
 .blood-calendar__density .filter-segments { width:140px; min-height:36px; padding:3px; background:var(--canvas-muted); border-radius:8px; }
 .blood-calendar__density .filter-segments button { min-height:30px; font-size:12px; }
 .blood-calendar__density .filter-segments__indicator { background:var(--canvas-raised); box-shadow:0 2px 5px -2px rgb(31 40 49 / .25); border-radius:6px; }
 .blood-calendar__density .filter-segments button[aria-checked="true"] { color:var(--calendar-ink); }
 .blood-calendar__grid { padding:0 24px 28px; }
 .blood-calendar__date { grid-template-columns:1fr auto; grid-template-rows:20px 18px 16px; justify-items:start; text-align:left; align-items:center; gap:4px 8px; height:100px; min-height:100px; padding:14px; }
 .blood-calendar__date > span { grid-column:1; grid-row:1; }
 .blood-calendar__date b { grid-column:2; grid-row:1/3; font-size:32px; }
 .blood-calendar__date small { grid-column:1; grid-row:2; font-size:11px; }
 .portal .blood-calendar__slot { padding:16px 14px 12px; min-height:164px; }
 .portal .blood-calendar__slot .blood-slot-location { font-size:17px; }
 .portal .blood-calendar__slot .blood-slot-status { font-size:12px; }
 .blood-slot-capacity b { font-size:24px; }
 .portal .blood-calendar[data-density="compact"] .blood-calendar__slot { min-height:125px; padding:12px; gap:5px; }
 .blood-calendar[data-density="compact"] .blood-calendar__slots { gap:8px; }
 .blood-calendar[data-density="compact"] .blood-slot-bottom { padding-top:6px; }
 .blood-calendar[data-density="compact"] .blood-slot-capacity b { font-size:18px; }
}
@media (hover:hover) and (pointer:fine) {
 .blood-calendar__toolbar .btn:hover { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
 .portal .blood-calendar__slot:active { transform:translateY(-1px) scale(.99); }
 .blood-calendar__date:active { filter:brightness(.96); }
}
@media (prefers-reduced-motion:reduce) { .portal .blood-calendar__slot:active { transform:none; } }
[data-motion="reduced"] .blood-calendar__slot:active { transform:none; }

/* P09: semantic colors are owned here, independent of the selected accent. */
.portal .blood-calendar__slot[data-state="available"] { --slot-bg:#f2f8f4; --slot-ink:#24553d; --slot-border:#bbd6c5; }
.portal .blood-calendar__slot[data-state="full"] { --slot-bg:#f2f3f5; --slot-ink:#606670; --slot-border:#d6d9df; border-style:dashed; }
.portal .blood-calendar__slot[data-state="pending"] { --slot-bg:#fff5d7; --slot-ink:#735016; --slot-border:#dec885; }
.portal .blood-calendar__slot:is([data-state="confirmed"],[data-state="attended"]) { --slot-bg:#e6f2ff; --slot-ink:#205880; --slot-border:#9dc4e3; }
.portal .blood-calendar__legend [data-state="full"] i { background:#f2f3f5; border-color:#8b929c; border-style:dashed; }
.blood-calendar__date[data-weekend="true"] > span { color:var(--text-secondary); }
.blood-calendar__date::after { content:'\00a0'; grid-row:3; font-size:11px; line-height:16px; }
.blood-calendar__date[data-today="true"]::after { content:'今天'; color:var(--blood-open-ink); }
.blood-calendar__day[data-selected="true"] .blood-calendar__date { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 -3px var(--accent); }
.blood-calendar__day[data-selected="true"] .blood-calendar__date b { color:var(--accent); }
.portal .blood-slot-top { order:4; }
.portal .blood-calendar__slot .blood-slot-location { order:1; }
.portal .blood-calendar__slot .blood-calendar__time { order:2; }
.blood-slot-bottom { order:3; }
.portal .blood-slot-status { white-space:normal; }
/* Reservation controls remain readable even when new point names are long. */
@media(min-width:701px) {
 .calendar-point-scroll { min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; padding:4px; margin:-4px; }
 .calendar-point-scroll .filter-segments { min-width:calc(var(--choices) * 124px); }
 .blood-calendar__filter-group:first-child .filter-segments button { white-space:nowrap; padding-inline:12px; }
 .blood-calendar__date[data-weekend="true"]:not([aria-pressed="true"]) { background:var(--canvas-muted); }
 .blood-calendar__grid { align-items:start; }
 .blood-calendar__date[data-today="true"]::after { grid-column:1/-1; }
}

/* ==========================================================================
   Period trigger — the date-range title becomes a button that opens the
   week picker. It mimics the visual weight of the original <strong> but
   signals interactivity with a soft border, a chevron and a hover lift.
   ========================================================================== */
.blood-calendar__period-trigger {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 width: fit-content;
 padding: 7px 11px 7px 13px;
 font-size: 15px;
 font-weight: 560;
 color: var(--calendar-muted);
 font-variant-numeric: tabular-nums;
 letter-spacing: 0;
 background: color-mix(in srgb, var(--canvas-raised) 70%, transparent);
 border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
 border-radius: 999px;
 cursor: pointer;
 transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
 box-shadow: none;
}
.blood-calendar__period-trigger:hover {
 background: var(--accent-soft);
 color: var(--accent);
 border-color: transparent;
 box-shadow: 0 4px 14px -8px var(--accent-ring);
}
.blood-calendar__period-trigger:active { transform: translateY(1px); }
.blood-calendar__period-trigger:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}
.blood-calendar__period-trigger .blood-calendar__period-text {
 font-feature-settings: "tnum" 1, "ss01" 1;
}
.blood-calendar__period-trigger-icon {
 opacity: .55;
 transition: transform 220ms cubic-bezier(0.34, 1.42, 0.52, 1), opacity 180ms ease-out;
}
.blood-calendar__period-trigger:hover .blood-calendar__period-trigger-icon,
.blood-calendar__period-trigger:focus-visible .blood-calendar__period-trigger-icon {
 opacity: 1;
 transform: rotate(180deg);
}
@media (max-width: 700px) {
 .blood-calendar__period-trigger { font-size:13px; padding:6px 10px; gap:6px; }
}
@media (prefers-reduced-motion: reduce) {
 .blood-calendar__period-trigger,
 .blood-calendar__period-trigger-icon { transition: none; }
 .blood-calendar__period-trigger:hover .blood-calendar__period-trigger-icon,
 .blood-calendar__period-trigger:focus-visible .blood-calendar__period-trigger-icon { transform: none; }
}
[data-motion="reduced"] .blood-calendar__period-trigger,
[data-motion="reduced"] .blood-calendar__period-trigger-icon { transition: none; }

/* ==========================================================================
   Blood week picker — centered dialog that lets the user jump to any week.
   The surface uses mountOverlay directly, so we provide the centering,
   entrance animation and grid layout here.
   ========================================================================== */
.blood-week-picker {
 position: fixed;
 top: 50%;
 left: 50%;
 width: min(var(--picker-w, 540px), calc(100vw - 2 * var(--s4)));
 max-height: calc(100vh - 2 * var(--s4));
 display: grid;
 grid-template-rows: auto auto auto 1fr auto;
 border-radius: 20px;
 background: var(--surface-raised);
 border: 1px solid var(--border-strong);
 box-shadow: var(--e4), 0 1px 0 color-mix(in srgb, var(--accent) 8%, transparent) inset;
 transform: translate(-50%, -50%);
 animation: blood-week-picker-in var(--dur-3) var(--ease-spring);
 overflow: hidden;
}
.blood-week-picker[data-closing="true"] {
 animation: blood-week-picker-out var(--dur-2) var(--ease-in-out) forwards;
}
@keyframes blood-week-picker-in {
 from { transform: translate(-50%, -48%) scale(0.96); opacity: 0; }
 to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes blood-week-picker-out {
 to { transform: translate(-50%, -50%) scale(0.985); opacity: 0; }
}

.blood-week-picker__head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s4);
 padding: 22px 24px 6px;
}
.blood-week-picker__title-wrap {
 display: grid;
 gap: 4px;
 min-width: 0;
}
.blood-week-picker__eyebrow {
 margin: 0;
 color: var(--text-faint);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 font-size: 11px;
 font-weight: 600;
}
.blood-week-picker__title {
 margin: 0;
 font-size: 19px;
 font-weight: 650;
 letter-spacing: -0.01em;
 color: var(--text-primary);
}
.blood-week-picker__hint {
 margin: 0;
 color: var(--text-muted);
 font-size: 12.5px;
 line-height: 1.55;
}

.blood-week-picker__nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--s3);
 padding: 10px 18px 14px;
 border-bottom: 1px solid var(--border);
 background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
}
.blood-week-picker__month-wrap {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px;
 border-radius: 12px;
 background: var(--canvas-muted);
}
.blood-week-picker__month {
 min-width: 132px;
 text-align: center;
 font-size: 17px;
 font-weight: 650;
 color: var(--text-primary);
 letter-spacing: -0.015em;
 font-variant-numeric: tabular-nums;
}

.blood-week-picker__weekdays {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 padding: 14px 18px 6px;
}
.blood-week-picker__weekday {
 text-align: center;
 font-size: 12px;
 font-weight: 550;
 color: var(--text-faint);
 letter-spacing: 0.04em;
}
.blood-week-picker__weekday:nth-child(n+6) { color: color-mix(in srgb, var(--text-faint) 70%, var(--accent)); }

.blood-week-picker__grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
 padding: 4px 18px 18px;
}
.blood-week-picker__row { display:contents; }
.blood-week-picker__cell {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 aspect-ratio: 1 / 1;
 min-height: 44px;
 padding: 4px 2px;
 background: transparent;
 border: 0;
 border-radius: 12px;
 color: var(--text-primary);
 font-size: 14.5px;
 font-weight: 510;
 font-variant-numeric: tabular-nums;
 cursor: pointer;
 transition: background-color 140ms ease-out, color 140ms ease-out, transform 140ms ease-out, box-shadow 140ms ease-out;
}
.blood-week-picker__cell:hover { background: var(--canvas-muted); }
.blood-week-picker__cell:active { transform: scale(0.96); }
.blood-week-picker__cell:focus-visible {
 outline: none;
 box-shadow: 0 0 0 2px var(--accent);
 z-index: 1;
}
.blood-week-picker__cell[data-other="true"] { color: var(--text-faint); }
.blood-week-picker__cell[data-other="true"]:hover { background: color-mix(in srgb, var(--canvas-muted) 50%, transparent); }

.blood-week-picker__cell[data-today="true"]::before {
 content: "";
 position: absolute;
 inset: 4px;
 border-radius: 9px;
 border: 1.5px solid var(--accent);
 pointer-events: none;
}
.blood-week-picker__cell[data-today="true"] .blood-week-picker__cell-num { color: var(--accent); font-weight: 650; }
.blood-week-picker__cell[data-other="true"][data-today="true"] .blood-week-picker__cell-num { color: color-mix(in srgb, var(--accent) 70%, var(--text-faint)); }

.blood-week-picker__cell-num {
 font-feature-settings: "tnum" 1;
 position: relative;
 z-index: 1;
}
.blood-week-picker__cell-dot {
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: var(--blood-open-ink);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--blood-open-ink) 18%, transparent);
 position: absolute;
 bottom: 6px;
 left: 50%;
 transform: translateX(-50%);
}
.blood-week-picker__cell[data-other="true"] .blood-week-picker__cell-dot { opacity: 0.45; }

.blood-week-picker__cell[aria-selected="true"] {
 background: var(--accent);
 color: var(--text-on-accent);
 box-shadow: 0 6px 16px -8px var(--accent-ring);
}
.blood-week-picker__cell[aria-selected="true"] .blood-week-picker__cell-num { color: var(--text-on-accent); }
.blood-week-picker__cell[aria-selected="true"] .blood-week-picker__cell-dot {
 background: color-mix(in srgb, var(--text-on-accent) 92%, transparent);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 25%, transparent);
}
.blood-week-picker__cell[aria-selected="true"]:hover { background: var(--accent-hover); }

.blood-week-picker__cell[data-event="true"]:not([aria-selected="true"]) .blood-week-picker__cell-num { font-weight: 600; }

.blood-week-picker__foot {
 display: flex;
 align-items: center;
 gap: var(--s4);
 padding: 14px 24px 16px;
 border-top: 1px solid var(--border);
 background: var(--bg-sunken);
}
.blood-week-picker__legend {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--text-muted);
 font-size: 12px;
}
.blood-week-picker__legend-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--blood-open-ink);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--blood-open-ink) 18%, transparent);
}
.blood-week-picker__preview {
 margin: 0;
 flex: 1;
 text-align: right;
 color: var(--text-secondary);
 font-size: 13.5px;
 font-weight: 550;
 font-variant-numeric: tabular-nums;
}
.blood-week-picker__actions {
 display: inline-flex;
 align-items: center;
 gap: var(--s2);
}

@media (max-width: 700px) {
 .blood-week-picker {
  border-radius: 20px 20px 0 0;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100vw;
  max-height: 92vh;
  overflow-y: auto;
  transform: none;
  animation: blood-week-picker-sheet-in var(--dur-3) var(--ease-spring);
 }
 .blood-week-picker[data-closing="true"] {
  animation: blood-week-picker-sheet-out var(--dur-2) var(--ease-in-out) forwards;
 }
 @keyframes blood-week-picker-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
 }
 @keyframes blood-week-picker-sheet-out {
  to { transform: translateY(100%); }
 }
 .blood-week-picker__head { padding: 18px 18px 4px; }
 .blood-week-picker__nav { padding: 10px 14px 12px; }
 .blood-week-picker__weekdays, .blood-week-picker__grid { padding-inline: 14px; }
 .blood-week-picker__grid { padding-bottom: 14px; }
 .blood-week-picker__cell { min-height: 48px; font-size: 15px; }
 .blood-week-picker__foot { flex-wrap: wrap; padding: 14px 18px 18px; }
 .blood-week-picker__preview { order: 3; flex: 1 0 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
 .blood-week-picker { animation: none; }
 .blood-week-picker__cell { transition: none; }
 .blood-week-picker__cell:active { transform: none; }
}
[data-motion="reduced"] .blood-week-picker { animation: none; }
[data-motion="reduced"] .blood-week-picker__cell { transition: none; }
[data-motion="reduced"] .blood-week-picker__cell:active { transform: none; }

/* /styles/booking.css */
/* Booking owns the workspace, ordinary sessions, confirmations and records.
   Weekly-board geometry and state colours stay in calendar.css. */
.portal .workflow-page { max-width:1480px; gap:24px; padding:24px 32px 64px; font-family:var(--font-ui); font-size:16px; line-height:1.7; }
.workflow-page > .pagehead { position:relative; isolation:isolate; padding:8px 0 24px; border-bottom:1px solid var(--border); margin:0; }
.workflow-page > .pagehead::after { content:''; position:absolute; right:0; bottom:-1px; width:128px; height:3px; background:var(--art-accent); pointer-events:none; }
.workflow-page > .pagehead::before { content:''; position:absolute; z-index:-1; right:0; top:0; bottom:0; width:20%; background:var(--canvas-muted); clip-path:var(--art-page-edge); opacity:.6; pointer-events:none; }
.portal .workflow-page > .pagehead h1 { font-family:var(--font-display-editorial); font-size:clamp(32px,3.2vw,44px); line-height:1.35; letter-spacing:0; }
.workflow-page .pagehead p { font-size:16px; max-width:42em; }
.booking-sync { font-size:14px; margin-top:-8px; }
.booking-sync .t-caption { font-size:14px; }
.workflow-page .btn { min-height:44px; height:auto; padding-block:8px; font-size:15px; white-space:normal; }
.workflow-page .badge { height:auto; min-height:24px; font-size:13px; padding:2px 8px; white-space:normal; }
.workflow-page .badge--success { color:color-mix(in srgb,var(--success) 75%,var(--text-primary)); }
.workflow-page .badge--warning { color:color-mix(in srgb,var(--warning) 75%,var(--text-primary)); }
.workflow-page :is(h2,h3,p,dd) { overflow-wrap:anywhere; }
.workflow-page :is(.field__label,.field__hint,.t-caption) { font-size:14px; }
.workflow-page :is(input,textarea) { font-size:16px; }
.workflow-page input[type="file"] { max-width:100%; color:var(--text-secondary); }
.workflow-page input[type="file"]::file-selector-button { min-height:44px; margin-right:12px; padding:8px 16px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--canvas-raised); color:var(--text-primary); font:inherit; cursor:pointer; }
.workflow-event-detail .activity-facts dd { font-size:20px; }
.workflow-event-detail .blood-section-label { font-size:16px; color:var(--text-primary); }
.workflow-event-detail .panel__head .badge { justify-self:start; width:fit-content; }

/* Ordinary selection board: dates are navigation, venues are columns, slots are choices. */
.ordinary-sessions { padding:28px; display:grid; gap:24px; background:var(--canvas-raised); border:1px solid var(--border); border-radius:var(--r-lg); scroll-margin-top:100px; }
.ordinary-sessions__head { display:flex; align-items:start; justify-content:space-between; gap:24px; }
.ordinary-sessions__head > div { min-width:0; }
.ordinary-sessions__head h2 { font-family:var(--font-heading); font-size:28px; line-height:1.45; }
.ordinary-sessions__head p { color:var(--text-secondary); font-size:15px; margin-top:8px; }
.ordinary-sessions__cutoff { display:flex; gap:8px; flex:none; padding-left:20px; border-left:1px solid var(--border); }
.ordinary-sessions__cutoff .ico { margin-top:5px; }
.ordinary-sessions__cutoff strong { display:block; color:var(--text-primary); font-size:15px; font-variant-numeric:tabular-nums; }
.ordinary-sessions__cutoff small { font-size:13px; }
.ordinary-sessions__dates.filter-segments { width:100%; max-width:600px; min-height:76px; padding:4px; background:var(--art-paper); border:1px solid var(--border); border-radius:var(--r-md); }
.ordinary-sessions__dates .filter-segments__indicator { background:var(--accent-soft); box-shadow:inset 0 -2px var(--accent); border-radius:var(--r-sm); }
.ordinary-sessions__dates button { display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-content:center; justify-items:start; padding:8px 16px; color:var(--text-secondary); min-height:68px; }
.ordinary-sessions__dates button strong { font-family:var(--font-numeric); font-size:20px; font-weight:650; }
.ordinary-sessions__dates button > span { align-self:center; font-size:14px; }
.ordinary-sessions__dates button small { grid-column:1/-1; font-size:13px; }
.ordinary-sessions__dates button[aria-checked="true"] { color:var(--accent); }
.ordinary-sessions__venues { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.ordinary-sessions__venue { min-width:0; display:grid; gap:10px; align-content:start; }
.ordinary-sessions__venue > header { padding:0 0 6px; }
.ordinary-sessions__venue h3 { display:flex; align-items:baseline; gap:8px; font-size:18px; line-height:1.5; }
.ordinary-sessions__venue header p { color:var(--text-secondary); font-size:14px; margin:4px 0 0 23px; }
.ordinary-sessions__slot { display:flex; align-items:center; gap:12px; padding:14px 16px; min-width:0; width:100%; text-align:left; border:1px solid var(--border); border-radius:var(--r-md); background:var(--canvas-raised); color:var(--text-primary); cursor:pointer; transition:background-color 160ms ease-out,border-color 160ms ease-out; }
.ordinary-sessions__position { color:var(--text-secondary); font-size:13px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.ordinary-sessions__time { flex:1; min-width:0; display:grid; gap:2px; }
.ordinary-sessions__time strong { font-family:var(--font-numeric); font-size:20px; line-height:1.4; font-weight:600; font-variant-numeric:tabular-nums; }
.ordinary-sessions__time > span { color:var(--text-secondary); font-size:14px; font-variant-numeric:tabular-nums; }
.ordinary-sessions__slot[data-state="closed"],.ordinary-sessions__slot[data-state="full"] { background:var(--blood-full-bg); }
.ordinary-sessions__slot[data-state="full"] { border-style:dashed; }
.ordinary-sessions__slot[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 3px 0 var(--accent); }
.ordinary-sessions__selected { display:grid; place-items:center; width:24px; flex:none; color:var(--accent); }
.ordinary-sessions__slot:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
@media(hover:hover) { .ordinary-sessions__slot:hover { border-color:var(--accent); } }
.ordinary-sessions__slot:active { background:var(--canvas-muted); }

/* Appointment summary has a leading date/place and a quiet metadata rail. */
.workflow-event-detail { border:1px solid var(--border); box-shadow:none; overflow:visible; border-radius:var(--r-lg); }
.workflow-event-detail .panel__head { padding:20px 28px; background:transparent; }
.workflow-event-detail .panel__head h2 { font-family:var(--font-heading); font-size:26px; line-height:1.45; }
.workflow-event-detail .panel__body { padding:24px 28px 28px; }
.workflow-slot-summary { padding:0 0 24px; display:grid; gap:20px; border-bottom:1px solid var(--border); }
.booking-appointment { display:flex; gap:20px; align-items:center; }
.booking-appointment__date { flex:none; width:64px; display:grid; justify-items:center; padding:8px; color:var(--accent); background:var(--accent-soft); border-top:3px solid var(--accent); border-radius:var(--r-sm); font-family:var(--font-numeric); }
.booking-appointment__date strong { font-size:32px; line-height:1.2; }
.booking-appointment__date span { font-size:14px; }
.booking-appointment__copy { min-width:0; }
.booking-appointment__label { font-size:14px; color:var(--text-secondary); }
.booking-appointment__copy h3 { font-size:24px; line-height:1.5; font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
.booking-appointment__place { display:flex; align-items:baseline; gap:8px; font-size:18px; margin-top:4px; }
.booking-appointment__meta { display:grid; gap:8px; margin:0 0 0 84px; font-size:15px; }
.booking-appointment__meta > div { display:flex; gap:12px; align-items:baseline; min-width:0; }
.booking-appointment__meta dt { color:var(--text-secondary); flex:none; }
.booking-appointment__meta dd { margin:0; font-weight:600; }
.blood-detail-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:start; padding-top:8px; }
.blood-detail-information,.blood-detail-personal { min-width:0; }
.blood-detail-information { display:grid; gap:16px; }
.blood-section-label { margin:0; font-family:var(--font-heading); font-size:22px; line-height:1.5; }
.blood-detail-information .workflow-copy { font-size:16px; line-height:1.8; max-width:38em; }
.blood-detail-personal { padding:24px; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--r-md); background:var(--art-paper); }
.blood-detail-submit { display:grid; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.participation-notice { margin:0; padding:0; }
.participation-notice h3 { display:flex; gap:10px; align-items:center; font-size:16px; margin:0 0 20px; }
.workflow-page .participation-notice ol { display:grid; gap:0; counter-reset:participation-step; list-style:none; margin:0; padding:0; }
.workflow-page .participation-notice ol > li { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 12px; padding:0 0 24px; }
.workflow-page .participation-notice li::before { counter-increment:participation-step; content:counter(participation-step); display:grid; place-items:center; width:28px; height:28px; font-size:14px; border:1px solid var(--border); border-radius:50%; color:var(--accent); background:var(--canvas-raised); z-index:1; }
.workflow-page .participation-notice li:not(:last-child)::after { content:''; position:absolute; left:13px; top:28px; bottom:0; border-left:1px solid var(--border); }
.workflow-page .participation-notice li:last-child { padding-bottom:0; }
.participation-notice li > b,.participation-notice li > p { grid-column:2; margin:0; }
.participation-notice li > b { grid-row:1; font-size:17px; }
.participation-notice p { font-size:16px; color:var(--text-secondary); line-height:1.75; }
.booking-identity { margin-top:16px; }
.booking-identity__heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.booking-identity__seal { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border-accent); border-radius:50%; color:var(--accent); background:var(--accent-soft); }
.booking-identity__caption { display:block; font-size:14px; color:var(--text-secondary); }
.booking-identity__heading strong { font-family:var(--font-heading); font-size:24px; line-height:1.45; }
.booking-identity__edit { display:inline-block; padding-top:12px; font-size:14px; color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) .dl { display:grid; gap:0; }
.workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) .dl__row { grid-template-columns:5em minmax(0,1fr); align-items:baseline; gap:16px; padding-block:7px; border-bottom:1px solid var(--border); }
.workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) .dl__row:last-child { border:0; }
.workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) .dl__row :is(dt,dd) { margin:0; font-family:var(--font-reading); font-size:16px; line-height:1.65; }
.workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) dd { color:var(--text-primary); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.blood-signup-controls { display:grid; gap:12px; }
.workflow-event-detail .blood-signup-controls .check { grid-template-columns:20px minmax(0,1fr); gap:12px; padding:16px; border-radius:var(--r-md); }
.workflow-event-detail .blood-signup-controls .check__box { width:20px; height:20px; margin-top:4px; }
.workflow-event-detail .blood-signup-controls .check__text { min-width:0; }
.workflow-event-detail .blood-signup-controls .check__text b { display:block; font-family:var(--font-sans); font-size:17px; line-height:28px; }
.workflow-event-detail .blood-signup-controls .check__text p { margin:4px 0 0; font-size:14px; line-height:1.6; }
.booking-consent-hint { font-size:14px; line-height:1.6; color:var(--text-secondary); }
.portal .blood-signup-controls > button { width:100%; min-height:52px; font-size:16px; }
.portal .blood-signup-controls > button:disabled { background:var(--blood-full-bg); border:1px solid var(--blood-full-border); color:var(--blood-full-ink); opacity:1; box-shadow:none; }
.workflow-submit-feedback:empty { display:none; }
.workflow-submit-feedback { padding:16px; border-left:3px solid var(--accent); background:var(--accent-soft); font-size:16px; line-height:1.7; }
.workflow-submit-feedback[data-state="error"] { border-color:var(--error); background:var(--error-soft); }
.workflow-submit-feedback[data-state="success"] { border-color:var(--success); background:var(--success-soft); }
.workflow-submit-feedback[data-state="uncertain"] { border-color:var(--warning); background:var(--warning-soft); }
.blood-detail-personal .vacancy-callout { align-items:stretch; flex-direction:column; background:var(--canvas-raised); }

/* Transactions: compact default view; the full form opens only on demand. */
.workflow-records { scroll-margin-top:100px; }
.workflow-records > .panel { border:0; background:transparent; box-shadow:none; }
.workflow-records > .panel > .panel__head { padding:8px 0 16px; }
.workflow-records > .panel > .panel__head h2 { font-family:var(--font-heading); font-size:28px; }
.workflow-records > .panel > .panel__body { padding:20px 0 0; }
.workflow-records .state { min-height:0; padding:20px; }
.blood-registration { min-width:0; padding:20px 24px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--canvas-raised); color:var(--text-primary); }
.blood-registration__heading { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; }
.blood-registration__heading h3 { flex:1 1 260px; min-width:0; margin:0; font-size:22px; font-family:var(--font-heading); line-height:1.5; }
.blood-registration .activity-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:16px 0; padding:0; border:0; }
.blood-registration .activity-facts dd { font-size:16px; line-height:1.6; }
.blood-registration__journey { padding:16px 0; border-block:1px solid var(--border); }
.registration-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; font-size:14px; }
.workflow-page .registration-progress li { display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-secondary); }
.workflow-page .registration-progress li::before { content:none; }
.registration-progress__mark { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid var(--border); border-radius:50%; font-size:13px; font-variant-numeric:tabular-nums; }
.registration-progress li[data-done="true"] .registration-progress__mark { color:var(--blood-open-ink); border-color:var(--blood-open-border); background:var(--blood-open-bg); }
.registration-progress li[data-current="true"] { color:var(--text-primary); font-weight:650; }
.registration-progress li[data-current="true"] .registration-progress__mark { color:var(--blood-pending-ink); border-color:var(--blood-pending-border); background:var(--blood-pending-bg); }
.blood-registration__hint { margin:8px 0 0; font-size:14px; line-height:1.7; color:var(--text-secondary); }
.blood-registration__actions { display:flex; align-items:start; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* When the actions are not wrapped (e.g. event-detail card), give them breathing room above the bar. */
.blood-registration > .participation-action,
.blood-registration > .notice { margin-top:16px; }
.blood-registration .participation-action { flex:0 1 auto; min-width:0; max-width:100%; border:1px solid var(--border); border-radius:var(--r-sm); background:transparent; padding:0; }
.blood-registration .participation-action[open] { flex-basis:100%; background:var(--art-paper); }
.blood-registration .participation-action summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:10px 12px; min-height:44px; color:var(--text-primary); border-radius:var(--r-sm); }
.blood-registration .participation-action summary:hover { background:var(--accent-soft); border-radius:var(--r-sm); }
.blood-registration .participation-action__icon { width:20px; height:20px; border-radius:0; background:transparent; }
.blood-registration .participation-action__label b { font-size:15px; }
.blood-registration .participation-action__label > span { display:none; font-size:14px; }
.blood-registration .participation-action[open] .participation-action__label > span { display:block; }
.blood-registration .participation-action[data-action="camera"] { border-color:var(--border-accent); background:var(--accent-soft); }
.blood-registration .participation-action__body { padding:16px; border-top:1px solid var(--border); margin:0; overflow-wrap:anywhere; }
.blood-registration .participation-action__body .dl { margin:0; max-width:860px; }
.blood-registration .participation-action__body input { min-width:0; max-width:100%; }
.blood-registration input[type="file"] { width:100%; font-size:15px; }
.blood-registration__submit { display:flex; justify-content:flex-end; }
.blood-registration summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }

/* Correspondence is supporting content: a letterhead and a compact invitation. */
.booking-wishes { position:relative; padding:24px; border-block:1px solid var(--border); background:var(--art-paper); }
.booking-wishes__heading { display:flex; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.booking-wishes__heading > div { flex:1; min-width:0; }
.booking-wishes__heading h2 { font-family:var(--font-heading); font-size:26px; line-height:1.5; }
.booking-wishes__heading p { font-size:15px; line-height:1.7; color:var(--text-secondary); margin-top:4px; }
.booking-wishes__stamp { display:grid; place-items:center; flex:none; width:44px; height:52px; border:1px dashed var(--accent); border-radius:var(--r-sm); color:var(--accent); background:var(--accent-soft); transform:rotate(-6deg); }
.booking-wishes__stamp .ico { width:24px; height:24px; }
.booking-wishes__count { font-size:14px; color:var(--accent); }
.booking-wishes__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.booking-wishes .blood-wish-row { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0; gap:16px; padding:20px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--canvas-raised); }
.booking-wishes__bookmark { position:absolute; top:-1px; right:20px; display:grid; place-items:center; width:30px; height:40px; color:var(--accent); background:var(--accent-soft); border-radius:0 0 13px 13px; }
.booking-wishes__caption { display:flex; align-items:center; gap:8px; padding-right:32px; color:var(--text-secondary); font-size:14px; }
.booking-wishes__copy h3 { margin:12px 0; font-family:var(--font-heading); font-size:22px; line-height:1.5; }
.booking-wishes__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:12px; border-top:1px dashed var(--border); }
.booking-wishes__empty { display:flex; align-items:center; gap:24px; padding:24px 0 0; }
.booking-wishes__letter { display:grid; place-items:center; flex:none; width:72px; height:56px; border:1px solid var(--border-accent); border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent); transform:rotate(-5deg); }
.booking-wishes__letter .ico { width:28px; height:28px; }
.booking-wishes__empty h3 { font-family:var(--font-heading); font-size:22px; line-height:1.5; }
.booking-wishes__empty p { margin:4px 0; max-width:40em; font-size:16px; color:var(--text-secondary); }
.booking-return { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.booking-return p { font-size:14px; color:var(--text-secondary); }
@media(max-width:1000px) {
 .blood-detail-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .ordinary-sessions__head { flex-wrap:wrap; }
 .ordinary-sessions__cutoff { padding-left:0; border:0; }
}
@media(max-width:700px) {
 .portal .workflow-page { padding:20px 16px 48px; gap:20px; }
 .ordinary-sessions { padding:20px 16px; gap:20px; }
 .ordinary-sessions__head h2 { font-size:24px; }
 .ordinary-sessions__venues { grid-template-columns:1fr; gap:24px; }
 .ordinary-sessions__dates button { grid-template-columns:1fr; justify-items:center; gap:0; padding:8px; }
 .ordinary-sessions__dates button strong { font-size:18px; }
 .ordinary-sessions__slot { flex-wrap:wrap; padding:12px; gap:8px; }
 .ordinary-sessions__time strong { font-size:18px; }
 .ordinary-sessions__slot .badge { max-width:120px; }
 .workflow-event-detail .panel__head { padding:20px 16px; }
 .workflow-event-detail .panel__head h2 { font-size:24px; }
 .workflow-event-detail .panel__body { padding:20px 16px; }
 .booking-appointment { gap:12px; align-items:start; }
 .booking-appointment__date { width:48px; }
 .booking-appointment__date strong { font-size:26px; }
 .booking-appointment__copy h3 { font-size:20px; }
 .booking-appointment__place { font-size:16px; }
 .booking-appointment__meta { margin-left:0; display:grid; gap:8px; }
 .blood-detail-personal { padding:20px 16px; }
 .workflow-page :is(.booking-identity,.participation-action__body,.booking-wishes) .dl__row { grid-template-columns:4em minmax(0,1fr); gap:12px; }
 .blood-registration { padding:20px 16px; }
 .blood-registration__heading h3 { flex-basis:100%; font-size:20px; }
 .blood-registration .activity-facts { grid-template-columns:1fr; gap:10px; }
 .blood-registration .activity-facts__item { display:grid; grid-template-columns:5em minmax(0,1fr); gap:12px; align-items:baseline; }
 .blood-registration .activity-facts dt { font-size:14px; margin:0; }
 .blood-registration .activity-facts dt .ico { display:none; }
 .registration-progress { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .blood-registration__submit .btn { width:100%; }
 .booking-wishes { padding:20px 16px; }
 .booking-wishes__heading { flex-wrap:wrap; }
 .booking-wishes__heading h2 { font-size:24px; }
 .booking-wishes__list { grid-template-columns:minmax(0,1fr); }
 .booking-wishes .blood-wish-row { padding:20px 16px; }
 .booking-wishes__empty { align-items:flex-start; gap:16px; }
 .booking-wishes__letter { width:40px; height:36px; }
 .booking-wishes__empty h3 { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { .ordinary-sessions__slot { transition:none; } }
.ordinary-event-detail { max-width:1480px; margin-inline:auto; }
.event-editorial-heading { padding:40px 32px 32px; border-bottom:1px solid var(--border); }
.event-editorial-heading h1 { font-family:var(--font-display-editorial); font-size:clamp(32px,3.3vw,48px); line-height:1.35; max-width:24em; overflow-wrap:anywhere; }
.ordinary-event-detail .pdetail { padding-top:32px; gap:48px; grid-template-columns:minmax(0,1fr) 350px; }
.ordinary-event-detail .pdetail__main { gap:32px; }
.ordinary-event-detail .pdetail__aside { top:100px; }
.event-editorial-copy { display:grid; gap:16px; }
.event-editorial-copy p { white-space:pre-line; line-height:1.85; }
.event-booking-panel { border-top:3px solid var(--accent); background:var(--art-paper); box-shadow:none; }
.booking-count { display:flex; align-items:baseline; gap:8px; }
.booking-number { font-size:48px; line-height:1.15; font-variant-numeric:tabular-nums; font-weight:650; }
.booking-count > span,.booking-outcome { font-size:14px; color:var(--text-secondary); }
.session-choices { display:grid; gap:10px; border:0; padding:0; margin:0; min-width:0; }
.session-choices legend { padding:0 0 12px; }
.session-choice { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--canvas-raised); transition:background-color 180ms ease-out,border-color 180ms ease-out; }
.session-choice:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); }
.session-choice:has(input:focus-visible) { outline:2px solid var(--focus-ring); outline-offset:3px; }
.session-choice input { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.session-choice__copy { display:grid; gap:6px; flex:1; min-width:0; font-size:14px; line-height:1.6; }
.session-choice__copy > span { font-size:13px; color:var(--text-secondary); }
@media(max-width:900px) {
 .ordinary-event-detail .pdetail { grid-template-columns:minmax(0,1fr); gap:24px; }
 .ordinary-event-detail .pdetail__aside { position:static; }
 .event-editorial-heading { padding:24px 16px; }
 .booking-return { align-items:start; }
 .booking-return p { font-size:12px; }
 .workflow-event-detail .blood-detail-personal { padding:18px; }
 .session-choice { flex-wrap:wrap; padding:14px; }
}
@media(prefers-reduced-motion:reduce) { .session-choice,.workflow-event-detail .blood-signup-controls > button { transition:none; } }

.workflow-published-notice { padding-block:var(--s4); border-block:1px solid var(--border); }
.workflow-published-notice__body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.85; }

/* /styles/discovery-art.css */
/* Shared daylight language for the home and activity plaza. */
/* Palette tokens are defined in themes.css. */
.portal .home-page .discovery-hero { color:var(--hero-ink); padding-block:56px 16px; isolation:isolate; }
/* P05: one original editorial illustration, independent of API readiness. */
.portal .home-page .hero__inner { max-width:1480px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 80px; align-items:center; }
.portal .home-page .hero__lede { max-width:660px; gap:28px; }
.portal .home-page .discovery-hero h1 { font-size:clamp(58px,4.8vw,72px); line-height:1.22; letter-spacing:0; font-family:var(--font-display-editorial); font-weight:650; color:var(--hero-ink); }
.portal .home-page .discovery-hero h1 em { color:var(--art-accent); font-style:normal; }
.home-page .discovery-hero__motto { color:var(--art-accent); font-size:14px; letter-spacing:.16em; }
.portal .home-page .hero__sub { color:var(--text-secondary); font-size:16px; line-height:1.85; max-width:30em; }
.portal .home-page .hero__cta { gap:14px; padding-top:8px; }
.portal .home-page .hero__cta .btn--primary { background:var(--accent); border:1px solid var(--border-soft); box-shadow:none; }
.portal .home-page .hero__cta .btn--inverse { background:transparent; border:1px solid var(--border-soft); color:var(--hero-ink); box-shadow:none; }
.portal .home-page .hero__cta .btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
/* P06: opening metrics have priority; secondary totals remain honest. */
.portal .home-page .hero__figures { grid-column:1/-1; grid-template-columns:1.25fr 1.25fr 1fr 1fr; background:transparent; border:0; border-top:1px solid var(--border-soft); border-radius:0; padding:24px 0 8px; gap:0; }
.portal .home-page .hero__figure { background:none; backdrop-filter:none; border-right:1px solid var(--border-soft); padding:8px 24px; align-content:center; }
.portal .home-page .hero__figure b { color:var(--hero-ink); font-size:30px; }
.portal .home-page .hero__figure:nth-child(-n+2) b { font-size:46px; }
.portal .home-page .hero__figure:nth-child(-n+2) { background:transparent; }
.portal .home-page .hero__figure span { color:var(--text-secondary); font-size:13px; }
.portal .home-page .hero__figure:last-child { border-right:0; }
.hero__stats-error { grid-column:1/-1; color:var(--hero-ink); padding:12px; }
.home-page .psection { max-width:1480px; padding-block:64px; }
.home-page .home-recent { padding-top:40px; }
.home-page .home-services .psection__inner { border-top:1px solid var(--art-line); }
.home-page .psection--sunken { max-width:none; padding:0; }
.home-page .psection--sunken > .psection__inner { max-width:1480px; padding-block:56px; }
.home-activities { display:grid; gap:24px; }
.home-activities--multiple { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.home-activities__featured,.home-activities__list { min-width:0; }
.home-activities__list { display:grid; gap:0; border-top:1px solid var(--border); }
.home-activities__list .event-row { grid-template-columns:56px minmax(0,1fr); gap:12px 18px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:20px 0; }
.home-activities__list .event-row__action { grid-column:2; justify-self:start; }
.home-activities__list .event-row__body h3 { white-space:normal; -webkit-line-clamp:2; font-size:18px; }
.portal .home-page .home-activities .event { min-width:0; height:100%; padding:32px; border-radius:12px; border:1px solid var(--border); background:var(--canvas-raised); box-shadow:none; }
.home-activities .event__title { font-size:28px; }
.home-activities--single .event { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px 48px; }
.home-activities--single .event__facts { grid-column:2; grid-row:1/span 2; align-self:center; }
.home-activities--single .event__foot { grid-column:1/-1; }
/* P07: the service index follows the same reading and keyboard order. */
.portal .home-page .square-grid--home { grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.portal .home-page .square-card { grid-column:span 4; border:0; border-radius:12px; box-shadow:none; padding:30px; min-height:250px; gap:14px; background:var(--canvas-muted); }
.portal .home-page .service-index__outreach { grid-column:span 4; background:var(--art-paper); }
.portal .home-page .service-index__community { grid-column:span 4; background:var(--canvas-muted); }
.portal .home-page .square-card h3 { font-size:24px; }
.portal .home-page .square-card__action { color:var(--accent); border-top:1px solid currentColor; padding-top:14px; }
.portal .home-page .service-index__events :is(h3,p,.square-card__action) { color:var(--text-on-accent); }
.portal .home-page .service-index__events .square-card__action { margin-top:auto; }
.home-page .home-trust { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(0,2fr); gap:48px; padding-block:44px 56px; border-top:2px solid var(--art-accent); }
.home-trust__intro { display:grid; align-content:start; gap:20px; }
.home-trust__intro .btn { justify-self:start; }
.home-trust__intro h2 { max-width:12em; line-height:1.5; }
.home-trust__principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.home-trust__principle { border-left:1px solid var(--art-line); padding-left:24px; }
.home-trust__principle > .ico { color:var(--art-accent); margin-bottom:16px; }
.home-trust__principle h3 { font-size:17px; font-weight:650; }
.home-trust__principle p { font-size:14px; color:var(--text-secondary); line-height:1.85; margin-top:10px; }
@media(max-width:900px) { .home-page .home-trust { grid-template-columns:1fr; } }
@media(max-width:600px) { .home-trust__principles { grid-template-columns:1fr; } }

/* One coherent surface from plaza discovery into the booking calendar. */
.portal .event-browser--aligned > .psection { max-width:1480px; }
.portal .event-browser--aligned .discovery-intro { background:transparent; color:var(--discovery-ink); border:0; border-radius:0; padding:8px 0 28px; box-shadow:none; }
.portal .event-browser--aligned .discovery-intro::after { display:none; }
.portal .event-browser--aligned .discovery-intro .t-h1 { color:var(--discovery-ink); font-family:var(--font-heading); font-size:clamp(32px,3.2vw,46px); line-height:1.35; text-shadow:0 4px 24px color-mix(in srgb,var(--art-accent) 12%,transparent); }
.portal .event-browser--aligned .discovery-intro .t-secondary,.portal .event-browser--aligned .discovery-intro__account > span { color:var(--discovery-muted); }
.portal .event-browser--aligned .discovery-intro__account .btn { color:var(--accent); background:var(--canvas-raised); border:0; box-shadow:0 5px 16px -12px rgb(33 56 107 / .3); }
.portal .event-browser--aligned .discovery-filters { --field-h:44px; border:1px solid var(--border); border-radius:12px; padding:24px; box-shadow:none; background:var(--canvas-raised); grid-template-columns:minmax(220px,1.1fr) minmax(0,1fr) minmax(170px,.7fr) minmax(0,1fr); gap:20px; }
.discovery-filters__group > .field { margin:0; gap:10px; }
.discovery-filters .filter-segments { border:0; background:var(--canvas-muted); }
.discovery-filters .filter-segments__indicator { background:var(--accent); box-shadow:0 4px 8px -4px color-mix(in srgb,var(--accent) 60%,transparent); }
.discovery-filters .filter-segments button[aria-checked="true"] { color:white; }
.portal .event-browser--aligned .events-results::before { display:none; }
.portal .event-browser--aligned .events-results { color:var(--discovery-muted); }
.active-filters { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:0; }
.active-filters[hidden] { display:none; }
.active-filters .btn--secondary { background:var(--accent-soft); color:var(--accent); border:0; border-radius:8px; max-width:100%; }
.active-filters .btn > span { overflow-wrap:anywhere; white-space:normal; }
.active-filters .btn .ico { flex:none; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto auto; gap:20px 40px; align-items:start; border:1px solid var(--border-soft); border-left:5px solid var(--art-accent); border-radius:12px; padding:32px; background:var(--art-paper); box-shadow:none; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry__top { grid-column:1; grid-row:1; flex-direction:row; justify-content:start; flex-wrap:wrap; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry__body { grid-column:1; grid-row:2/span 2; gap:12px; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry__body h3 { font-size:30px; letter-spacing:0; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry__facts { grid-column:2; grid-row:1/span 2; display:grid; gap:20px; border-left:1px solid var(--border-soft); padding-left:28px; font-size:15px; }
.blood-entry__facts > span { align-items:start; }
.blood-entry__facts > span > span { display:grid; gap:8px; }
.blood-entry__facts small { color:var(--text-secondary); font-size:13px; }
.blood-entry__facts strong { font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.portal :is(.home-page,.event-browser--aligned) .blood-entry__action { grid-column:2; grid-row:3; justify-self:start; border:0; margin:0; padding:0 0 0 28px; }
.portal .home-activities--single .blood-entry__body { grid-row:2; }
.portal .home-activities--single .blood-entry__action { grid-column:1; grid-row:3; padding-left:0; }
.portal .home-activities--single .blood-entry__facts { grid-column:2; grid-row:1/span 3; align-self:center; }
.home-activities--multiple .blood-entry { min-height:330px; }
.portal .home-activities--multiple .blood-entry { grid-template-columns:minmax(0,1fr); }
.portal .home-activities--multiple .blood-entry :is(.blood-entry__top,.blood-entry__body,.blood-entry__facts,.blood-entry__action) { grid-column:1; grid-row:auto; }
.portal .home-activities--multiple .blood-entry__facts { border-left:0; padding-left:0; }
.portal .home-activities--multiple .blood-entry__action { padding-left:0; }
.discovery-campus { grid-column:1/-1; border-top:1px solid var(--border); padding-top:16px; }
.discovery-campus[hidden] { display:none; }
.portal .discovery-filters .search-field,.portal .discovery-filters .search-field > .input { height:44px; min-height:44px; }
.portal .discovery-filters .filter-segments { min-height:44px; }
.portal .discovery-filters .filter-segments button { min-height:40px; }
.discovery-results { min-width:0; }
.portal :is(.event-browser--aligned,.home-activities) .event-list { gap:0; border-top:1px solid var(--border); }
.portal :is(.event-browser--aligned,.home-activities) .event-row { border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; padding:24px 8px; }
.portal :is(.event-browser--aligned,.home-activities) .event-row__date { background:var(--accent-soft); color:var(--accent); border-radius:8px; }
.portal :is(.event-browser--aligned,.home-activities) .event-row__body .t-h3 { white-space:normal; -webkit-line-clamp:2; font-size:21px; }
.event-row__facts { display:grid; gap:6px; }
.event-row__facts .event__fact { display:grid; grid-template-columns:16px 2em minmax(0,1fr); align-items:start; gap:8px; line-height:1.65; }
.event-row__facts .event__fact .ico { margin-top:.3em; }
.event-row__facts .event__fact > span:last-child { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.event-row__fact-label { color:var(--text-secondary); }
@media(hover:hover) and (pointer:fine) {
 .portal .home-page .hero__cta .btn--primary:hover { background:var(--accent-hover,var(--accent)); }
 .portal .home-page .hero__cta .btn--inverse:hover { background:var(--accent-soft); }
 .portal .home-page .square-card:hover { transform:none; box-shadow:none; }
 .square-card:hover .square-card__action .ico { transform:translateX(4px); }
 .portal :is(.home-page,.event-browser--aligned) :is(.event,.event-row,.blood-entry):hover { transform:none; box-shadow:none; }

}
@media(max-width:1100px) {
 .portal .home-page .hero__inner { gap:32px; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); }
 .portal .home-page .square-grid--home { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portal .home-page .square-grid--home .square-card { grid-column:span 1; }
 .portal .event-browser--aligned .discovery-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media(max-width:760px) {
 .portal .home-page .discovery-hero { padding-block:32px 24px; }
 .portal .home-page .hero__inner { grid-template-columns:minmax(0,1fr); gap:28px; }
 .portal .home-page .hero__lede { max-width:none; gap:20px; }
 .portal .home-page .discovery-hero h1 { font-size:clamp(34px,8.6vw,48px); }
 .portal .home-page .square-grid--home { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portal .home-page .square-card { min-height:210px; padding:22px; }
 .portal .event-browser--aligned .discovery-intro { padding:8px 0 24px; }
 .portal .event-browser--aligned .discovery-filters { padding:20px; }
 .portal :is(.home-page,.event-browser--aligned) .blood-entry { padding:24px; }
 .portal .event-browser--aligned .event-row { padding:22px; }
 .portal .home-page .hero__figure { padding:16px; }
 .portal .home-page .hero__figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-activities--multiple { grid-template-columns:minmax(0,1fr); }
 .portal .home-page .home-activities--single .event { display:flex; flex-direction:column; height:auto; }
 .portal :is(.home-page,.event-browser--aligned) .blood-entry { grid-template-columns:minmax(0,1fr); }
 .portal :is(.home-page,.event-browser--aligned) .blood-entry > * { grid-column:1; grid-row:auto; padding-left:0; border-left:0; }
 .portal .home-page :is(.service-index__materials,.service-index__me) { display:flex; }
}
@media(max-width:480px) {
 .portal .home-page .square-grid--home { grid-template-columns:minmax(0,1fr); }
 .portal .home-page .square-card { min-height:0; }
 .portal .event-browser--aligned .discovery-filters { grid-template-columns:minmax(0,1fr); }
 .portal .home-page .hero__figure b { font-size:26px; }
 .portal .event-browser--aligned .discovery-intro .t-h1 { font-size:28px; }
}
@media(prefers-reduced-transparency:reduce) { .portal .event-browser--aligned .discovery-filters { background:var(--canvas-raised); backdrop-filter:none; } }
@media(prefers-reduced-motion:reduce) { .square-card * { transition:none!important; transform:none!important; } .portal :is(.home-page,.event-browser--aligned) :is(.event,.square-card,.event-row,.blood-entry) { transition:none; transform:none !important; } }
[data-motion="reduced"] :is(.home-page,.event-browser--aligned) :is(.event,.square-card,.event-row,.blood-entry) { transition:none; transform:none !important; }
@media(forced-colors:active) {
 .home-page .discovery-hero__cross,.discovery-intro::after { display:none; }
 .portal :is(.home-page,.event-browser--aligned) :is(.event,.square-card,.event-row,.blood-entry,.discovery-intro,.discovery-filters) { border:1px solid CanvasText; background:Canvas; box-shadow:none; }
}
.portal .pfoot { background:var(--canvas-footer); border-top:1px solid var(--border-soft); }
@media(forced-colors:active) { .portal .pfoot { background:Canvas; border-color:CanvasText; } }

[data-motion="reduced"] .square-card * { transition:none!important; transform:none!important; }
/* P03: the directory owns its content height; the footer follows the results. */
.portal:has(.event-browser--aligned) { grid-template-rows:auto auto auto; align-content:start; }
.portal__outlet:has(.event-browser--aligned) { min-height:0; }
.portal .event-browser--aligned { min-height:0; padding-bottom:0; }
.portal .event-browser--aligned > .psection { padding-bottom:48px; }
.discovery-kicker { color:var(--art-accent); font-size:12px; font-weight:600; letter-spacing:.12em; }
.discovery-results[data-layout="featured"] { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr); gap:32px; align-items:start; }
.portal .discovery-results[data-layout="featured"] .event-list { border:0; }
.portal .discovery-results[data-layout="featured"] .event-row { grid-template-columns:64px minmax(0,1fr); gap:24px; padding:28px; background:var(--art-paper); border:1px solid var(--border); border-left:4px solid var(--art-accent); border-radius:12px; align-items:start; }
.discovery-results[data-layout="featured"] .event-row__action { grid-column:2; justify-self:start; }
.portal .discovery-results[data-layout="featured"] .event-row__body h3 { font-size:28px; white-space:normal; -webkit-line-clamp:unset; }
.featured-event-description { font-size:15px; line-height:1.8; color:var(--text-secondary); margin-top:8px; overflow-wrap:anywhere; }
.discovery-guide { display:grid; gap:20px; padding:24px 0 8px 28px; border-top:2px solid var(--art-accent); border-left:1px solid var(--border); }
.discovery-guide h2 { font-size:20px; font-weight:600; }
.discovery-guide ol { display:grid; gap:18px; list-style:decimal-leading-zero; padding-left:28px; color:var(--text-secondary); font-size:14px; line-height:1.8; }
.discovery-guide li { padding-left:8px; }
.discovery-guide li::marker { color:var(--art-accent); font-weight:600; font-variant-numeric:tabular-nums; }
.discovery-guide strong { display:block; color:var(--text-primary); font-weight:600; }
.portal .discovery-results[data-layout="curated"] .event-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; }
.portal .discovery-results[data-layout="curated"] .event-row { grid-template-columns:56px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; align-items:start; padding:24px 0; gap:16px 24px; }
.discovery-results[data-layout="curated"] .event-row__action { grid-column:2; justify-self:start; align-self:end; }
.portal .discovery-results[data-layout="curated"] .event-list > .event-row:first-child:nth-last-child(odd) { grid-column:1/-1; grid-template-columns:64px minmax(0,1fr) auto; }
.discovery-results[data-layout="curated"] .event-list > .event-row:first-child:nth-last-child(odd) .event-row__action { grid-column:3; align-self:center; }
.portal .discovery-results[data-layout="list"] .event-row { padding-block:18px; }
.discovery-results[data-layout="featured"] > :last-child:not(.discovery-guide) { grid-column:1/-1; }
@media(max-width:1100px) {
 .discovery-results[data-layout="featured"] { grid-template-columns:minmax(0,1fr); gap:24px; }
 .discovery-guide { grid-template-columns:180px minmax(0,1fr); padding:24px 0 0; border-left:0; }
 .discovery-guide ol { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}
@media(max-width:760px) {
 .portal .discovery-results[data-layout="curated"] .event-list { grid-template-columns:minmax(0,1fr); }
 .portal .discovery-results[data-layout="curated"] .event-list > .event-row:first-child:nth-last-child(odd) { grid-template-columns:56px minmax(0,1fr); }
 .discovery-results[data-layout="curated"] .event-list > .event-row:first-child:nth-last-child(odd) .event-row__action { grid-column:2; }
 .discovery-guide,.discovery-guide ol { grid-template-columns:minmax(0,1fr); gap:16px; }
 .portal .discovery-results[data-layout="featured"] .event-row { padding:20px; gap:16px; grid-template-columns:48px minmax(0,1fr); }
 .portal .event-browser--aligned > .psection { padding-bottom:32px; }
}
@media(forced-colors:active) {
 .portal .discovery-results[data-layout="featured"] .event-row { background:Canvas; border-color:CanvasText; }
 .discovery-guide { border-color:CanvasText; }
}

/* Content width, including browser/text zoom, determines filter layout. */
.portal .event-browser--aligned { container-type:inline-size; }
@container (max-width:1100px) {
 .portal .event-browser--aligned .discovery-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .discovery-filters__search { grid-column:1 / -1; }
}
@container (max-width:660px) {
 .portal .event-browser--aligned .discovery-filters { grid-template-columns:minmax(0,1fr); }
}

/* Organization postcards share facts and actions; their emblem and paper edge differ. */
.portal :is(.home-page,.event-browser--aligned) .event-list { gap:20px; border-top:0; }
.portal .event-browser--aligned .discovery-results[data-layout] .event-list { row-gap:32px; }
.portal .discovery-results[data-layout="list"] .event-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portal :is(.home-page,.event-browser--aligned) .event-row.event-row--category {
 position:relative; grid-template-columns:84px minmax(0,1fr); grid-template-rows:1fr auto;
 gap:16px 20px; padding:24px; border:1px solid var(--border); border-radius:28px;
 background:var(--art-paper,var(--surface)); align-items:start; overflow:hidden;
}
.portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__date {
 width:84px; min-height:0; padding:6px 4px 10px; align-content:start; gap:0;
 background:var(--accent-soft); border-radius:13px; color:var(--art-accent,var(--accent));
}
.event-row--category .activity-emblem {
 display:block; width:72px; height:72px; margin:-4px 0 -7px; flex-shrink:0;
 padding:6px;
}
/* Category colours belong to the plaza labels, independent of the site theme. */
.event-browser--aligned .event-row[data-category="献血车专项"] { --category-label-bg:#FEE5E4; --category-label-ink:#A34846; }
.event-browser--aligned .event-row[data-category="博爱中心"] { --category-label-bg:#FFD6A4; --category-label-ink:#87551F; }
.event-browser--aligned .event-row[data-category="生命中心"] { --category-label-bg:#DDF2E4; --category-label-ink:#39704C; }
.event-browser--aligned .event-row[data-category="综事中心"] { --category-label-bg:#CDF1F9; --category-label-ink:#2D6978; }
.event-browser--aligned .event-row[data-category="主席团专项"] { --category-label-bg:#F0E4F6; --category-label-ink:#79558B; }
.event-browser--aligned .event-row[data-category="一加助残专项"] { --category-label-bg:#E6E9FA; --category-label-ink:#505C95; }
@media (forced-colors:none) {
 .event-browser--aligned .event-row:where([data-category="献血车专项"],[data-category="博爱中心"],[data-category="生命中心"],[data-category="综事中心"],[data-category="主席团专项"],[data-category="一加助残专项"]) .event-row__body > .row-2 > .badge--accent {
  background:var(--category-label-bg); color:var(--category-label-ink);
  border-color:color-mix(in srgb,var(--category-label-bg) 45%,var(--category-label-ink));
 }
}
.portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__body h3 {
 font-family:var(--font-heading); font-size:22px; line-height:1.5; white-space:normal; -webkit-line-clamp:unset;
}
.portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__action { grid-column:2; justify-self:start; align-self:end; }
.event-row--category .event-row__facts { margin-top:12px; gap:6px; }
@media(max-width:600px) {
 .portal :is(.home-page,.event-browser--aligned) .event-row.event-row--category { grid-template-columns:56px minmax(0,1fr); gap:14px; padding:18px; }
 .portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__date { width:56px; min-height:0; }
 .event-row--category .activity-emblem { width:48px; height:48px; margin:-3px 0 -5px; }
 .portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__body h3 { font-size:20px; }
 .event-row--category .event-row__facts { font-size:14px; }
}
@media(max-width:900px) {
 .portal .discovery-results[data-layout="list"] .event-list { grid-template-columns:minmax(0,1fr); }
}
/* Dates without artwork use a compact, centred tile at every screen size. */
.portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__date:not(:has(.activity-emblem)) {
 width:64px; max-width:100%; min-height:76px; padding:10px 4px;
 place-content:center; justify-items:center; justify-self:center; text-align:center;
}
@media(forced-colors:active) {
 .portal :is(.home-page,.event-browser--aligned) .event-row.event-row--category { background:Canvas; border-color:CanvasText; }
 .portal :is(.home-page,.event-browser--aligned) .event-row--category .event-row__date { color:CanvasText; background:Canvas; }
}

/* /styles/hero-showcase.css */
/* P02/P03/P06: one owner for the brand stage and its shared editorial illustrations. */
.hero-showcase { min-width:0; position:relative; align-self:center; background:var(--art-paper); border:1px solid var(--border-soft); border-radius:8px; padding:22px 26px 18px; box-shadow:12px 14px 0 color-mix(in srgb,var(--hero-ink) 10%,transparent); }
.showcase__stage { display:grid; }
.showcase__slide { grid-area:1/1; min-width:0; animation:showcase-arrive 420ms cubic-bezier(.2,.7,.2,1) both; }
.showcase__slide[hidden] { display:none; }
.showcase__caption { display:flex; justify-content:space-between; gap:16px; font-size:13px; color:var(--text-secondary); padding-bottom:12px; border-bottom:1px solid var(--border-soft); }
.showcase__caption > :first-child { color:var(--hero-ink); font-weight:650; }
.showcase__art { width:100%; height:auto; aspect-ratio:640/350; display:block; pointer-events:none; }
.showcase__foot { min-height:110px; display:flex; flex-direction:column; justify-content:center; gap:12px; border-top:1px solid var(--border-soft); padding:16px 0; }
.showcase__foot p { font-size:clamp(20px,1.7vw,26px); font-weight:650; line-height:1.4; color:var(--hero-ink); }
.showcase__link { display:flex; align-items:center; gap:10px; width:fit-content; color:var(--accent); font-size:14px; font-weight:600; }
.showcase__link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:5px; }
.showcase__controls { display:grid; gap:10px; border-top:1px solid var(--border-soft); padding-top:14px; }
.showcase__track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.showcase__dot { padding:10px 2px 6px; border-top:3px solid var(--border-soft); color:var(--text-secondary); font-size:12px; min-height:36px; transition:border-color 180ms ease,color 180ms ease; }
.showcase__dot[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); font-weight:700; }
.showcase__dot:focus-visible,.showcase__play:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.showcase__transport { display:flex; gap:8px; align-items:center; }
.showcase__count { font-size:12px; font-variant-numeric:tabular-nums; margin-right:auto; color:var(--text-secondary); }
.showcase__transport .icon-btn { width:36px; height:36px; background:transparent; border:1px solid var(--border-soft); }
.showcase__play { font-size:12px; padding:6px 8px; min-width:48px; min-height:36px; }
.showcase__play:disabled { color:var(--text-secondary); opacity:1; cursor:default; }
@keyframes showcase-arrive { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
.portal .home-page .square-card { position:relative; overflow:hidden; min-height:360px; gap:14px; border:1px solid var(--border-soft); }
.square-card__edition { font-size:12px; color:inherit; padding-bottom:14px; border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.service-art { width:180px; height:135px; margin-left:auto; pointer-events:none; transition:transform 180ms ease-out; }
.portal .home-page .square-card.service-index__events { --art-accent:var(--canvas-raised); grid-column:span 6; background:var(--hero-ink); color:var(--text-on-accent); }
.portal .home-page .square-card__action { margin-top:auto; }
.portal .home-page :is(.service-index__events,.service-index__me) { grid-column:span 6; min-height:280px; padding-right:220px; }
.portal .home-page :is(.service-index__events,.service-index__me) .service-art { position:absolute; right:24px; top:calc(50% - 67.5px); width:180px; height:135px; }
.portal .home-page .service-index__me { background:var(--art-paper); }
@media(hover:hover) and (pointer:fine) {
 .portal .home-page .square-card:hover { border-color:var(--accent); }
 .square-card:hover .service-art { transform:none; }
 .portal .home-page :is(.service-index__events,.service-index__me):hover .service-art { transform:none; }
}
@media(max-width:1100px) { .portal .home-page .square-card.service-index__events { grid-column:span 1; } .portal .home-page :is(.service-index__events,.service-index__me) { grid-column:span 1; padding-right:30px; } .portal .home-page :is(.service-index__events,.service-index__me) .service-art { position:static; transform:none; } }
@media(max-width:760px) { .showcase__foot { min-height:124px; } .hero-showcase { width:100%; max-width:600px; justify-self:center; padding:18px; } .portal .home-page .square-card { min-height:300px; } .service-art { width:140px; height:105px; } }
@media(prefers-reduced-motion:reduce) { .showcase__slide { animation:none; } .service-art { transition:none; } }
[data-motion="reduced"] .showcase__slide { animation:none; }
@media(forced-colors:active) { .hero-showcase,.home-page[data-art-direction="spotlight"] .hero-showcase { background:Canvas; color:CanvasText; border:1px solid CanvasText; } .showcase__art,.service-art { visibility:hidden; } .showcase__dot[aria-pressed="true"] { border-color:Highlight; } }

/* /styles/material-services.css */
/* Material services use the existing portal and console tokens. */
.material-services { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding-bottom:var(--s3); margin-bottom:var(--s5); border-bottom:1px solid var(--border); }
.material-services__item { display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; padding:var(--s2) var(--s3); border-radius:var(--r-md); color:var(--text-secondary); font-size:var(--fs-body); text-decoration:none; transition:background-color var(--dur-1),color var(--dur-1); }
a.material-services__item:hover { background:var(--bg-sunken); color:var(--text-primary); }
.material-services__item.is-active,a.material-services__item.is-active:hover { background:var(--accent-soft); color:var(--accent); font-weight:var(--fw-semibold); }
.material-services__item.is-disabled { color:var(--text-muted); }
.material-services__hint { padding:2px 6px; background:var(--bg-sunken); border-radius:var(--r-sm); font-size:11px; }
.material-services__item:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.material-section-head { display:flex; align-items:flex-start; gap:var(--s3); }
.material-section-head p { margin-top:var(--s1); line-height:1.6; color:var(--text-secondary); }
.material-step { flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); font:600 12px var(--font-mono); }
.material-empty { display:grid; justify-items:center; align-content:center; gap:var(--s2); padding:var(--s6) var(--s5); text-align:center; }
.material-empty > .ico { width:36px; height:36px; padding:var(--s2); box-sizing:content-box; background:var(--bg-sunken); border-radius:var(--r-lg); color:var(--text-muted); }
.material-empty p { max-width:340px; line-height:1.7; }
.material-empty[hidden],.material-prepared[hidden] { display:none; }
.material-intake-layout { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr); align-items:start; gap:var(--s5); margin-top:var(--s5); }
.material-intake-layout > *,.material-finance-layout > * { min-width:0; }
.material-scan-form .panel__body,.material-registration .panel__body { padding:var(--s6); }
.material-scan-form .formgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.material-scan-form [aria-live]:empty { display:none; }
.material-scan-tip { border-top:1px solid var(--border); padding-top:var(--s4); display:grid; gap:var(--s2); font-size:var(--fs-secondary); }
.material-target:not(:empty) { background:var(--bg-sunken); padding:var(--s4); border-radius:var(--r-md); }
.material-target dd { overflow-wrap:anywhere; }
.material-target .dl__row:first-child dd { font-weight:var(--fw-semibold); color:var(--text-primary); }
.material-target .dl__row:nth-child(2) dd { font-family:var(--font-mono); font-size:var(--fs-secondary); }
.material-register-foot { border-top:1px solid var(--border); padding-top:var(--s4); }
.material-balance { padding:var(--s3) var(--s4); border:1px solid var(--border); background:var(--bg-sunken); border-radius:var(--r-md); font-size:var(--fs-body); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.material-balance.is-error { background:var(--error-soft); color:var(--error); border-color:var(--error); }
.material-finance-page { gap:var(--s6); }
.material-finance-page .material-services { margin-bottom:0; }
.material-finance-page .t-caption,.material-bundle .t-caption { color:var(--text-secondary); }
.material-finance-page > [aria-live]:empty { display:none; }
.material-application .panel__body { padding:var(--s6); }
.material-application > .panel__body > p:empty { display:none; }
.material-upload-section,.material-prepared { border-top:1px solid var(--border); padding-top:var(--s6); }
.material-prepared { display:grid; gap:var(--s5); }
.material-upload { position:relative; }
.material-upload__input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.material-upload__label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--s4); row-gap:var(--s1); padding:var(--s5); border:1px dashed var(--border-strong); background:var(--bg-sunken); border-radius:var(--r-lg); cursor:pointer; }
.material-upload__label > .ico { grid-row:span 2; color:var(--accent); width:26px; height:26px; }
.material-upload__label:hover { border-color:var(--accent); background:var(--accent-soft); }
.material-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-lg); }
.material-upload:has(input:disabled) { opacity:.6; }
.material-upload:has(input:disabled) label { cursor:wait; }
.material-file-list { list-style:none; padding:0; margin:0; display:grid; gap:var(--s2); }
.material-file-list li { display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; padding:var(--s3); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-md); }
.material-file-list__name { flex:1; min-width:120px; overflow-wrap:anywhere; font-size:var(--fs-secondary); }
.material-file-list__actions { display:flex; gap:var(--s1); }
.material-file-list button { white-space:nowrap; }
.material-upload-group { padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md); min-width:0; }
.material-typed-files .material-typed-file { align-items:flex-start; }
.material-typed-file .field { margin-top:var(--s2); }
.material-file-list__name > small { display:block; margin-top:var(--s1); }
.material-originals .material-file-list li { padding:var(--s1) var(--s3); flex-wrap:nowrap; }
.material-originals .material-file-list__name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.material-originals .material-file-list li > .row-2 { flex-shrink:0; flex-wrap:nowrap; }
.material-special-note .textarea { min-height:44px; height:44px; padding-block:8px; resize:vertical; }
@media(max-width:600px) {
  .material-originals .material-file-list li { padding-inline:var(--s2); gap:var(--s1); }
  .material-originals .material-file-list .btn { padding-inline:var(--s1); }
}
.material-analysis-page > b { overflow-wrap:anywhere; }
.material-file-actions,.material-bundle-head,.material-submit-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); }
.material-submit-bar { background:var(--bg-sunken); padding:var(--s4) var(--s6); }
.material-submit-feedback { scroll-margin-block:90px; }
.material-submit-feedback .notice--error { color:var(--error); }
.material-submit-bar > p { flex:1; min-width:180px; font-size:var(--fs-secondary); }
.material-originals { padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--r-md); }
.material-originals summary,.material-bundle > details > summary { cursor:pointer; font-size:var(--fs-secondary); color:var(--text-secondary); }
.material-originals[open] > ul { margin-top:var(--s3); }
.material-pdf { margin-top:0; min-width:0; }
.material-pdf > .row-3 { justify-content:space-between; border:1px solid var(--border); border-bottom:0; border-radius:var(--r-md) var(--r-md) 0 0; padding:var(--s2); background:var(--surface); }
.material-pdf__scroll { overflow:auto; height:580px; background:var(--bg-sunken); border:1px solid var(--border); border-radius:0 0 var(--r-md) var(--r-md); padding:var(--s3); }
.material-pdf__sheet + .material-pdf__sheet { margin-top:var(--s4); }
.material-pdf__sheet > p { margin-bottom:var(--s2); text-align:center; }
.material-pdf__page { position:relative; aspect-ratio:var(--pdf-page-ratio, .707); background:white; box-shadow:var(--e1); }
.material-pdf__canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.material-pdf__canvas[hidden],.material-pdf__placeholder[hidden] { display:none; }
.material-pdf__placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:var(--s3); text-align:center; }
.material-pdf__regions { position:absolute; inset:0; pointer-events:none; }
.material-pdf__region { position:absolute; border:2px solid #1677c8; }
.material-analysis { border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s4); background:var(--surface); }
.material-analysis-results:empty { display:none; }
.material-analysis-results:not(:empty) { border-top:1px solid var(--border); padding-top:var(--s3); }
.material-analysis-page { padding:var(--s3) 0; border-bottom:1px solid var(--border); }
.material-invoice-checks { margin-top:var(--s2); }
.material-invoice-fields { margin-block:var(--s3); padding:var(--s4); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-md); }
.material-invoice-fields .dl__row dd { overflow-wrap:anywhere; }
.material-analysis > details { max-height:320px; overflow:auto; }
.material-analysis summary { cursor:pointer; }
.material-analysis-page > .notice--error { color:var(--error); }
.material-recognition-details { margin-top:var(--s3); }
.material-recognition-details > summary { padding-block:var(--s1); }
.material-recognition-details[open] > summary { margin-bottom:var(--s2); }
.material-recognition-details > p + p { margin-top:var(--s2); }
.material-verification-item { padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.material-verification-item__name { display:block; line-height:1.6; }
.material-verification-badges { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s3); }
.material-verification-badge { display:inline-flex; align-items:center; gap:var(--s1); font-size:var(--fs-caption); font-weight:600; }
.material-verification-badge.is-not-applicable,.finance-check.is-not-applicable { color:var(--text-secondary); }
.material-verification-badge .ico { flex-shrink:0; }
.material-verification-badge.is-matched { color:var(--success); }
.material-verification-badge.is-different,.material-verification-badge.is-unknown { color:var(--error); }
.material-verification-badge.is-pending { color:var(--text-muted); }
.material-verification-item > .notice { margin-top:var(--s3); }
.material-cross-check-details { padding-block:var(--s3); }
.material-finance-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr); gap:var(--s6); align-items:start; }
.material-review-sidebar { padding:var(--s4); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-md); }
.material-review-decision { border-top:1px solid var(--border); padding-top:var(--s5); }
.material-review-decision .check { position:relative; }
.material-initial-editor { min-width:0; }
.material-initial-expense { border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s3); background:var(--surface); }
.material-return-action { position:relative; min-width:0; }
.material-return-action > .btn { max-width:100%; white-space:normal; }
.material-return-feedback { position:absolute; bottom:calc(100% + var(--s3)); left:0; width:min(320px,calc(100vw - var(--s8))); z-index:1; box-shadow:var(--e2); border-radius:var(--r-md); }
.material-return-feedback[hidden] { display:none; }
.material-return-feedback .notice--error { color:var(--error); }
.material-finance-history { border-top:1px solid var(--border); padding-top:var(--s3); }
.material-finance-history p { margin-top:var(--s2); line-height:1.7; }
.material-finance-list { display:grid; gap:var(--s3); }
.material-finance-list > .material-empty { border:1px dashed var(--border-strong); border-radius:var(--r-lg); background:var(--surface); }
.material-review-list .material-empty { border:0; }
.material-review-list { margin-top:var(--s5); }
.material-finance-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding:var(--s4); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.material-finance-row__body { display:grid; flex:1; min-width:180px; gap:var(--s2); overflow-wrap:anywhere; }
.material-finance-row__amount { font-variant-numeric:tabular-nums; white-space:nowrap; }
.material-my-requests__scroll { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.material-my-requests__table { width:100%; min-width:690px; border-collapse:collapse; text-align:left; font-size:var(--fs-secondary); }
.material-my-requests__table th,.material-my-requests__table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.material-my-requests__table thead { background:var(--bg-sunken); color:var(--text-secondary); }
.material-my-requests__table thead th { white-space:nowrap; font-weight:500; }
.material-my-requests__table tbody th { font-weight:500; min-width:140px; max-width:320px; overflow-wrap:anywhere; }
.material-my-requests__table td:nth-child(3) { min-width:150px; max-width:280px; overflow-wrap:anywhere; }
.material-my-requests__table tr:last-child > * { border-bottom:0; }
.material-my-requests__return { margin-top:4px; font-weight:400; }
@media (max-width:700px) { .material-my-requests__table .btn { min-height:44px; } }
.console .panel__head.material-review-toolbar { padding:10px 20px; }
.material-review-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); }
.material-review-toolbar > .field { display:flex; align-items:center; gap:10px; flex:0 1 auto; }
.material-review-toolbar .field__label { white-space:nowrap; }
.material-review-toolbar .select-menu,.material-review-toolbar .select-wrap { width:140px; }
.material-review-toolbar > p { flex:1; padding:0; }
.material-review-toolbar > .btn { margin-left:auto; }
.material-source-check { padding:var(--s3) 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.material-source-check p { margin:var(--s2) 0; }
.material-ocr-text { white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; font:inherit; font-size:var(--fs-secondary); padding:var(--s3); background:var(--bg-sunken); border-radius:var(--r-md); }
.material-summary-panel { margin-top:var(--s5); }
.material-summary-toolbar { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-end; }
.material-summary-toolbar > .field { flex:1; min-width:180px; }
.material-summary-edit-entry { display:grid; gap:6px; max-width:320px; scroll-margin-top:20px; }
.material-summary-edit-entry > .btn.is-attention { outline:2px solid var(--warning); outline-offset:3px; box-shadow:0 0 0 5px var(--warning-soft); }
.material-summary-edit-hint { font-size:var(--fs-caption); color:var(--warning); line-height:1.5; }
.material-summary .check { position:relative; }
.material-summary [aria-live]:empty { display:none; }
.material-summary-candidate { display:grid; gap:var(--s2); }
.material-summary-candidate > details { padding-inline:var(--s4); }
.material-summary-candidate summary { cursor:pointer; }
.material-summary-candidate details p { margin-top:var(--s2); overflow-wrap:anywhere; }
.material-summary-form { min-width:0; padding:var(--s4); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.material-summary-form > h2 { text-align:center; }
.material-summary-form table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:var(--fs-secondary); }
.material-summary-form th,.material-summary-form td { border:1px solid var(--border-strong); padding:var(--s3) var(--s2); text-align:center; vertical-align:middle; overflow-wrap:anywhere; white-space:pre-wrap; }
.material-summary-meta td:nth-child(odd) { width:18%; color:var(--text-secondary); }
.material-summary-lines th { font-weight:var(--fw-semibold); background:var(--bg-sunken); }
.material-summary-lines th:first-child { width:25%; }
.material-summary-lines th:nth-child(2) { width:22%; }
.material-summary-lines td:nth-child(2) { font-variant-numeric:tabular-nums; white-space:nowrap; }
.material-summary-lines tr:last-child { font-weight:var(--fw-semibold); }
.material-summary-signatures { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); min-height:64px; align-items:start; padding:var(--s3); border:1px solid var(--border-strong); font-size:var(--fs-secondary); }
@media (max-width:1100px) { .material-intake-layout { grid-template-columns:minmax(0,1fr); } }
@media (max-width:860px) { .material-finance-layout { grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) {
  .material-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s1); }
  .material-services__item { padding:var(--s2); font-size:var(--fs-secondary); min-height:44px; gap:6px; }
  .material-services__hint { font-size:10px; padding:2px 4px; }
  .material-scan-form .panel__body,.material-registration .panel__body,.material-application .panel__body { padding:var(--s5) var(--s4); }
  .material-empty { padding:var(--s6) var(--s4); }
  .material-file-list__actions { margin-left:auto; }
  .material-submit-bar { padding:var(--s4); }
  .material-submit-bar > .row-3 { width:100%; justify-content:flex-end; }
  .material-submit-bar > .row-3 > .btn--primary { flex:1; }
  .material-pdf__scroll { padding:var(--s2); max-height:460px; }
  .console .panel__head.material-review-toolbar { padding:10px 12px; }
  .material-review-toolbar { gap:8px; }
  .material-review-toolbar .select-menu,.material-review-toolbar .select-wrap { width:120px; }
  .material-review-toolbar > p { flex-basis:100%; order:1; }
  .material-finance-row__body { flex-basis:100%; }
}
.material-expense-row { padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.material-expense-row .formgrid { margin-block: 8px; }

/* Material dashboard: actions first, stock totals as a compact supporting strip. */
.material-dashboard-summary { display:grid; gap:var(--s3); }
.console .material-dashboard-summary .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
.console .material-dashboard-summary .material-action-card { padding:14px 18px; min-height:110px; gap:8px; border-radius:14px; border-top:3px solid var(--accent); }
.material-action-card .metric__value { font-size:2rem; }
.material-action-card .metric__go { opacity:1; transform:none; }
.material-action-card.is-active { outline:2px solid var(--accent); outline-offset:2px; }
.material-pending-status { color:var(--error); }
.material-stock-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:8px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.material-stock-data { display:flex; flex-wrap:wrap; gap:24px; margin:0; }
.material-stock-data > div { display:flex; align-items:baseline; gap:12px; }
.material-stock-data dt { font-size:var(--fs-secondary); color:var(--text-secondary); }
.material-stock-data dd { margin:0; font-size:var(--fs-caption); color:var(--text-secondary); }
.material-stock-data b { font-size:1.25rem; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.material-stock-meta { flex:1; }
.material-low-stock { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--warning); background:var(--warning-soft); border-radius:10px; color:var(--text-primary); text-align:left; cursor:pointer; }
.material-low-stock__value { font-weight:600; color:var(--warning); font-variant-numeric:tabular-nums; }
.material-low-stock.is-active { outline:2px solid var(--warning); outline-offset:2px; }
.material-low-stock:focus-visible,.material-task-row:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.material-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.material-task-group { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; align-self:start; }
.material-task-group__head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.material-task-group__head .btn { min-height:32px; padding-block:5px; }
.material-task-list { padding-inline:18px; }
.material-task-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 0; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--border); color:var(--text-primary); cursor:pointer; }
.material-task-row:last-child { border-bottom:0; }
.material-task-row:hover { background:var(--bg-sunken); }
.material-task-row__body { display:grid; gap:6px; min-width:0; flex:1; }
.material-task-row > .ico { flex:none; color:var(--text-muted); }
.material-task-more { padding:10px 18px; border-top:1px solid var(--border); background:var(--bg-sunken); }
.material-task-empty { padding-block:20px; }
.material-management-page > .region { display:grid; gap:var(--s4); }
.material-management-page .panel { border-radius:16px; }
.material-list-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:18px 20px 0; }
.material-management-page .material-applications { scroll-margin-top:16px; }
.material-applications .toolbar,.material-inventory-list .toolbar { align-items:flex-end; flex-wrap:wrap; }
.material-applications .toolbar > .field,.material-inventory-list .toolbar > .field { min-width:155px; }
.material-applications .table__search,.material-inventory-list .table__search { flex:1; max-width:380px; min-width:180px; }
.material-applications td:first-child code { white-space:nowrap; font-size:var(--fs-caption); }
.material-applications td:nth-child(2) { min-width:220px; max-width:420px; }
.material-applications td:nth-child(5) { white-space:nowrap; }
.material-applications td:nth-child(6) > div { flex-wrap:wrap; }
.material-venue-placeholder { margin-top:var(--s5); padding:48px 24px; }
@media (max-width:1000px) { .material-stock-meta { flex-basis:100%; order:1; } .material-low-stock { margin-left:auto; } }
@media (max-width:700px) {
  .material-task-grid { grid-template-columns:minmax(0,1fr); }
  .console .material-dashboard-summary .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .console .material-dashboard-summary .material-action-card { min-height:92px; padding:12px 14px; }
  .material-action-card .metric__value { font-size:2rem; }
  .material-action-card .metric__foot { display:none; }
  .material-action-card .metric__go { top:10px; right:8px; }
  .material-stock-summary { padding:10px 12px; gap:8px; }
  .material-stock-data { width:100%; justify-content:space-between; gap:10px; }
  .material-stock-data > div { gap:6px; }
  .material-low-stock { width:100%; min-height:44px; margin-left:0; justify-content:space-between; }
  .material-stock-meta { order:0; }
}
@media (max-width:400px) {
  .material-review-toolbar .select-menu,.material-review-toolbar .select-wrap { width:104px; }
  .material-review-toolbar > .btn { padding-inline:8px; }
  .console .material-dashboard-summary .metrics { gap:8px; }
  .console .material-dashboard-summary .material-action-card { min-height:86px; padding:10px 14px; }
  .material-action-card > .t-label { font-size:12px; }
  .material-action-card .metric__value { font-size:1.75rem; }
}

.material-return-photo { display:block; width:100%; max-height:360px; object-fit:contain; }
.material-original-image { display:block; width:100%; max-height:600px; object-fit:contain; }
.material-expense-group { padding:12px; border:1px solid var(--border); border-radius:12px; overflow-wrap:anywhere; }
.material-item-packets { padding:16px; border:1px solid var(--border); border-radius:12px; }
.material-preview-dialog { position:fixed; inset:0; margin:auto; width:min(1100px,calc(100vw - 48px)); height:min(850px,calc(100dvh - 48px)); display:grid; grid-template-rows:auto auto minmax(0,1fr); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--e4); overflow:hidden; }
.material-preview-dialog.is-fullscreen { width:100vw; height:100dvh; border-radius:0; }
.material-preview-dialog__head { display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4); border-bottom:1px solid var(--border); }
.material-preview-dialog__head > .spacer { min-width:0; }
.material-preview-dialog__head h2 { overflow-wrap:anywhere; }
.material-preview-dialog__head > .btn { flex-shrink:0; }
.material-preview-dialog__toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s2); padding:var(--s2) var(--s4); border-bottom:1px solid var(--border); }
.material-preview-dialog__body { min-height:0; min-width:0; overflow:auto; padding:var(--s3); background:var(--bg-sunken); }
.material-preview-dialog__body > .material-pdf { height:100%; display:flex; flex-direction:column; }
.material-preview-dialog .material-pdf__scroll { flex:1; min-height:0; height:auto; max-height:none; }
.material-preview-dialog .material-pdf__sheet { width:calc(100% * var(--material-preview-zoom,1)); margin-inline:auto; }
.material-preview-dialog .material-original-image { width:calc(100% * var(--material-preview-zoom,1)); max-width:none; max-height:none; margin-inline:auto; }
.material-preview-dialog .material-original-image[hidden] { display:none; }
@media (max-width:600px) {
  .material-preview-dialog { width:calc(100vw - 16px); height:calc(100dvh - 24px); }
  .material-preview-dialog__head { padding:var(--s3); }
  .material-preview-dialog__toolbar { padding:var(--s2); }
  .material-preview-dialog__toolbar .btn { padding-inline:var(--s2); }
}
.material-review-activity { padding-block:12px; }
.material-review-activity + .material-review-activity { border-top:1px solid var(--border); }
.material-ledger-totals { display:flex; flex-wrap:wrap; gap:24px; }
.material-ledger-totals > div { display:grid; gap:4px; }
.material-ledger-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.material-ledger-scroll { max-width:100%; overflow-x:auto; }
.material-ledger-panel .panel__body { grid-template-columns:minmax(0,1fr); }
.material-ledger-rows { min-width:0; }
.material-ledger-table { border-collapse:collapse; width:100%; min-width:760px; }
.material-ledger-table th,.material-ledger-table td { padding:12px; border-bottom:1px solid var(--border); text-align:left; }
.material-services__tool { margin-inline-start:auto; }
@media (max-width:640px) { .material-services__tool { grid-column:1 / -1; margin-inline-start:0; } }
/* Terminal finance workspaces share compact tables and a stable navigation bar. */
.finance-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line,#dce0e5);margin-bottom:20px;padding-bottom:5px}
.finance-tabs__tab{display:block;padding:10px 18px;color:var(--ink-muted,#596273);text-decoration:none;border-radius:8px;font-weight:600}
.finance-tabs__tab:hover{background:var(--surface-2,#f2f4f7)}
.finance-tabs__tab.is-active{background:#fcecee;color:#a52c43}
.finance-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;align-items:end}
.finance-totals{font-weight:600;font-variant-numeric:tabular-nums;margin:0;flex:1}
.finance-actions{min-height:38px}
.finance-table-scroll{max-width:100%;overflow:auto;border:1px solid var(--line,#dce0e5);border-radius:10px;overscroll-behavior-x:contain}
.finance-table{width:100%;border-collapse:collapse;min-width:900px;font-size:13px;line-height:1.5;text-align:left;font-variant-numeric:tabular-nums}
.finance-table th,.finance-table td{padding:9px 12px;border-bottom:1px solid var(--line,#e1e5ea);vertical-align:middle;max-width:320px;overflow-wrap:anywhere}
.finance-table thead th{position:sticky;top:0;background:var(--surface-2,#f2f4f7);z-index:1;font-weight:600;white-space:nowrap}
.finance-table tbody>tr:last-child>td{border-bottom:0}
.finance-table tbody>tr:hover{background:rgba(140,150,165,.04)}
.finance-table .finance-table__group th{background:var(--surface-2,#f2f4f7);padding-top:10px;padding-bottom:10px}
.finance-table input[type=checkbox]{width:16px;height:16px;accent-color:#a52c43;vertical-align:middle;cursor:pointer}
.finance-table .field{margin:0;min-width:110px}
.finance-table .input{min-height:34px;padding:6px 9px;font-size:13px;width:100%}
.finance-table .btn{white-space:nowrap}
.finance-checks{display:grid;gap:2px;min-width:115px;font-size:12px}
.finance-check{color:#716343}.finance-check.is-matched{color:#207545}.finance-check.is-different{color:#b5273a;font-weight:600}
.finance-status{display:inline-block;white-space:nowrap;border-radius:5px;padding:2px 7px;background:#eef1f5;color:#536071;font-size:12px}
.finance-status.is-final_pending{background:#edf2ff;color:#425b91}.finance-status.is-approved{background:#fff3dd;color:#8c641c}.finance-status.is-paid{background:#e9f5ec;color:#207545}
.finance-status.is-initial_returned,.finance-status.is-returned{background:#fcecee;color:#a52c43}
.finance-batch-list{padding:12px 0;min-width:260px}
.finance-batch-list>div+div{border-top:1px solid var(--line,#e1e5ea);padding-top:12px}
.finance-activity-info>summary{cursor:pointer}
.finance-activity-info[open]>summary{margin-bottom:12px}
.finance-activity-info dl{display:grid;grid-template-columns:150px 1fr;gap:8px 16px}
.finance-allocation>summary{cursor:pointer;margin-bottom:12px}
@media(min-width:1100px){.finance-activity-info dl{grid-template-columns:130px 1fr 130px 1fr}}
@media(max-width:600px){.finance-tabs__tab{padding:9px 11px;font-size:13px}.finance-filters{grid-template-columns:1fr 1fr}.finance-workspace .panel__body{padding:12px}.finance-activity-info dl{grid-template-columns:100px 1fr}}

/* Keep the finance table close to its title, filters and selection tools. */
.finance-workspace.wspad{padding-top:16px}
.finance-workspace>.material-services{padding-bottom:6px;margin-bottom:12px}
.finance-workspace>.pagehead{gap:12px;padding-bottom:12px;margin-bottom:12px}
.finance-workspace>.pagehead .pagehead__text{gap:4px}
.finance-workspace>.pagehead .t-h1{font-size:24px;line-height:1.25}
.finance-workspace>.pagehead .t-label{font-size:10px;line-height:1.4}
.finance-workspace>.finance-tabs{margin-bottom:12px;padding-bottom:4px}
.finance-workspace>.finance-tabs .finance-tabs__tab{padding:6px 12px;font-size:13px}
.finance-workspace>.panel>.panel__body{padding:14px 18px;gap:10px}
.finance-workspace>.panel>.panel__body>[aria-live]:empty,
.finance-workspace .finance-actions:empty{display:none}
.finance-workspace .finance-filters{gap:8px 10px}
.finance-workspace .finance-filters>.field{gap:4px}
.finance-workspace .finance-actions{min-height:32px;gap:10px}
@media(min-width:701px){
  .finance-workspace>.material-services .material-services__item{min-height:32px;padding-block:5px}
  .finance-workspace>.pagehead .pagehead__actions,
  .finance-workspace>.panel>.panel__body{--control-h:32px}
  .finance-workspace .finance-filters{--field-h:32px}
  .finance-workspace .finance-filters .input{height:32px;min-height:32px}
}
@media(max-width:700px){
  .finance-workspace.wspad{padding-top:12px}
  .finance-workspace>.pagehead{gap:8px;padding-bottom:10px;margin-bottom:10px}
  .finance-workspace>.pagehead .t-h1{font-size:22px}
  .finance-workspace>.finance-tabs .finance-tabs__tab{display:flex;align-items:center;min-height:44px;padding:4px 10px}
  .finance-workspace>.panel>.panel__body{padding:12px;gap:8px}
  .finance-workspace .finance-filters{--field-h:44px}
}

/* /styles/events-plaza.css */
/* Activity plaza: shared by the live directory and the isolated design example. */
/* Chinese typography is scoped to the plaza; licensed glyph shards load on demand. */
.events-page, .outreach-page, .community-view, .materials-page {
 --plaza-paper:#fcf9f5;--plaza-red:#b50b30;--plaza-deep:#920825;--plaza-ink:#10243b;--plaza-muted:#657082;--plaza-line:#eee6df;
 --plaza-sans:var(--font-sans);--plaza-serif:var(--font-serif);
 font-family:var(--plaza-sans);
 color:var(--plaza-ink);background:var(--plaza-paper);--accent:var(--plaza-red);--accent-soft:#fbedeb;
 /* 英雄区满幅出血；放大或窄视口时在页面内裁剪，不产生横向滚动条。 */
 overflow-x:clip;
}
/* 页面主体至少占满一屏，避免空结果时页脚被内容高度顶起而留下大片空白。 */
.portal :is(.events-page, .outreach-page, .community-view, .materials-page) .plaza-frame {max-width:1280px;margin:auto;padding:0 36px 40px;min-height:100%;display:grid;align-content:start;gap:24px;}
.events-page .btn--primary {background:var(--plaza-red);color:white;border:0;border-radius:9px;box-shadow:0 3px 8px #990f2110;}
.events-page .btn--primary:hover {background:var(--plaza-deep);}
.events-page :is(button,a):focus-visible {outline:3px solid var(--plaza-red);outline-offset:4px;}
.events-hero {position:relative;isolation:isolate;min-height:440px;display:flex;align-items:center;margin:0 -36px;overflow:hidden;}
.events-hero__copy {position:relative;z-index:2;padding:55px 50px;width:60%;pointer-events:none;}
.events-hero__copy a {pointer-events:auto;}
.events-hero__eyebrow {font-size:14px;color:var(--plaza-red);letter-spacing:.18em;margin:0 0 16px;}
.events-hero h1 {font-family:var(--plaza-serif);font-weight:800;font-size:clamp(36px,4.7vw,58px);line-height:1.35;letter-spacing:-.04em;color:var(--plaza-deep);margin:0;text-wrap:balance;overflow-wrap:anywhere;}
.events-hero__motto {font-family:var(--plaza-serif);font-size:25px;letter-spacing:.2em;color:var(--plaza-deep);margin:6px 0 20px;}
.events-hero__description {white-space:pre-line;color:#4d5965;font-size:20px;line-height:1.6;margin:0 0 24px;}
.events-hero__copy .btn {padding:12px 26px;font-size:17px;}
.events-hero__art {position:absolute;inset:0 0 0 30%;z-index:-2;}
.events-hero__art>img {width:100%;height:100%;object-fit:cover;object-position:var(--hero-position,center);}
.events-hero__missing {position:absolute;left:16px;bottom:16px;z-index:1;margin:0;padding:6px 10px;border-radius:8px;background:rgba(23,18,14,.62);color:#fff;font-size:13px;line-height:1.4;}
.events-hero::after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--plaza-paper) 24%,#fcf9f5f0 34%,#fcf9f500 62%),linear-gradient(0deg,var(--plaza-paper),#fcf9f500 22%);pointer-events:none;}
/* 照片就位前：暖纸渐变 + 会徽水印的品牌化占位，保持轮播结构完整。 */
.events-hero__placeholder {height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;
 background:radial-gradient(ellipse at 68% 22%,#fbe4d2 0%,#f5d6c1 42%,#eccdba 74%,#e3c3ae 100%);}
.events-hero__placeholder::before {content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 16% 84%,#ffffff59,transparent 40%),radial-gradient(circle at 86% 10%,#ffffff6b,transparent 36%),
  repeating-linear-gradient(45deg,#b50b300d 0 16px,transparent 16px 32px);}
.events-hero__placeholder img {position:relative;z-index:1;width:92px;height:92px;border-radius:50%;box-shadow:0 12px 32px #92082526;}
.events-hero__placeholder>span {position:relative;z-index:1;font-family:var(--plaza-serif);font-size:26px;letter-spacing:.2em;color:#8f4a33;}
.events-hero__placeholder small {position:relative;z-index:1;font-size:11px;letter-spacing:.3em;color:#a26a52;}
.events-hero__arrow {position:absolute;top:49%;border:0;width:42px;height:42px;border-radius:50%;background:#fffC;color:var(--plaza-deep);display:grid;place-items:center;cursor:pointer;z-index:3;}
.events-hero__arrow--prev {left:43%;}.events-hero__arrow--next {right:16px;}
.events-hero__controls {position:absolute;bottom:18px;right:25px;display:flex;gap:16px;align-items:center;z-index:3;}
.events-hero__pause {border:0;background:#fffc;border-radius:20px;padding:6px 12px;font:inherit;font-size:11px;color:#6a5148;cursor:pointer;}
.events-hero__dots {display:flex;gap:10px;}.events-hero__dots button {border:0;border-radius:50%;width:12px;height:12px;padding:0;background:#d6bdb2;cursor:pointer;outline-offset:5px;}
.events-hero__dots button[aria-current=true] {background:var(--plaza-red);}
.events-categories {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
.events-category {font:inherit;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border:1px solid transparent;border-radius:13px;padding:16px 5px 13px;background:#faefeb;color:var(--plaza-ink);cursor:pointer;}
.events-category[aria-pressed=true] {border-color:var(--plaza-red);background:#f9e5df;}
@media(hover:hover) and (pointer:fine) {
 .events-category:hover {border-color:var(--plaza-red);background:#f9e5df;}
}
.events-category .activity-emblem {display:block;width:58px;height:58px;padding:4px;color:var(--plaza-red);stroke-width:2.6;}
/* 类别说明与背景需达到 4.5:1，否则小字会被无障碍检查判为不可读。 */
.events-category strong {font-size:15px;font-weight:600;}.events-category>span:last-child {font-size:12px;color:#6b665f;}
.events-page .discovery-filters {display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:14px;border:1px solid var(--plaza-line);border-radius:12px;background:#fff8;}
.events-page .discovery-filters__search {flex:1 1 270px;}.events-page .discovery-filters__group {flex:0 1 auto;}
.events-page .discovery-filters .field__label {font-size:11px;color:var(--plaza-muted);}
.portal .events-page.event-browser--aligned .discovery-filters {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) repeat(2,minmax(0,1fr));align-items:center;gap:12px;padding:14px;}
.events-page .discovery-filters__search {grid-column:auto;}
.events-page .discovery-filters__kind>.field {margin:0;gap:0;}
.events-page .discovery-filters :is(.discovery-campus,.active-filters) {grid-column:1/-1;}
@media(max-width:1100px) {.events-page .discovery-filters .filter-segments button {font-size:13px;padding-inline:3px;}}
@media(max-width:1000px) {.portal .events-page.event-browser--aligned .discovery-filters {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px) {.portal .events-page.event-browser--aligned .discovery-filters {grid-template-columns:minmax(0,1fr);}}
.events-page .discovery-campus {flex-basis:100%;}.events-page .active-filters {flex-basis:100%;}
.events-results-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.events-results-heading h2 {font-family:var(--plaza-serif);font-size:24px;color:#352d29;margin:0;border-left:5px solid var(--plaza-red);padding-left:12px;line-height:1.2;}
.events-page .events-results-heading+ [role=status] {margin-top:-14px;}
.portal .events-page .event-list,.portal .events-page .discovery-results[data-layout] .event-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.portal .events-page .discovery-results[data-layout] .event-list>.event-row {grid-column:auto;grid-template-columns:92px minmax(0,1fr);}
.portal .events-page .event-row.event-row--category {display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:1fr auto;gap:6px 18px;padding:0 14px 10px 0;border:1px solid var(--plaza-line);border-radius:12px;background:#fff9;min-height:210px;box-shadow:none;align-items:start;}
.portal .events-page .event-row--category .event-row__date {grid-column:1;grid-row:1/-1;width:92px;height:calc(100% + 10px);padding:12px 4px;background:var(--category-label-bg,#eef0fb);color:var(--category-label-ink,#42579b);border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;}
.portal .events-page.event-browser--aligned .event-row--category .event-row__date:not(:has(.activity-emblem)) {width:100%;max-width:none;min-height:0;padding:12px 4px;justify-self:stretch;align-content:start;justify-content:flex-start;}
.portal .events-page .event-row__date b {font-family:Georgia,serif;font-size:42px;line-height:1.2;margin-top:10px;font-weight:700;}.portal .events-page .event-row__date>span:last-child {font-size:21px;}
.portal .events-page .event-row__date .activity-emblem {width:72px;height:72px;margin:0;stroke-width:2.6;}
.portal .events-page .event-row__body {grid-column:2;grid-row:1;padding-top:10px;min-width:0;position:relative;top:6px;}
.portal .events-page .event-row--category .event-row__body h3 {font-family:var(--plaza-sans);font-size:23px;font-weight:700;line-height:1.25;margin:4px 0;color:var(--plaza-ink);-webkit-line-clamp:2;}
.events-page .event-row__facts {display:grid;gap:8px;margin-top:4px;font-size:16px;color:var(--plaza-muted);}
.events-page .event-row__facts .event__fact {display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:8px;font-size:16px;line-height:1.4;}
.events-page .event-row__facts .ico {width:20px;height:20px;color:var(--plaza-red);flex-shrink:0;}.events-page .event-row__fact-label {display:none;}
.events-page .event-row__facts .event__fact .ico {margin:1.2px 0 0;justify-self:center;}
.event-row__summary {display:none;}.portal .events-page .event-row__summary {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;grid-column:2;grid-row:3;color:var(--plaza-muted);font-size:13px;line-height:1.7;margin:0;}
.events-page .featured-event-description {display:none;}
.portal .events-page .event-row--category .event-row__action {grid-column:2;grid-row:2;justify-self:end;margin:0;align-self:end;}.events-page .event-row__action .btn {font-size:15px;min-height:42px;padding:9px 16px;}
.events-page .event-row__action .ico {width:20px;height:20px;}
/* 六个类别的日期条与徽章按参考稿分别着色；文字对比度均达到 4.5:1。 */
.events-page .event-row[data-category='主席团专项'] {--category-label-bg:#f4e9fb;--category-label-ink:#7a3fa8;}
.events-page .event-row[data-category='博爱中心'] {--category-label-bg:#fdeade;--category-label-ink:#a84a24;}
.events-page .event-row[data-category='生命中心'] {--category-label-bg:#e2f2e6;--category-label-ink:#276b44;}
.events-page .event-row[data-category='综事中心'] {--category-label-bg:#e6eefb;--category-label-ink:#35599f;}
.events-page .event-row[data-category='一加助残专项'] {--category-label-bg:#e4f3e8;--category-label-ink:#276b44;}
.events-page .event-row[data-category='献血车专项'] {--category-label-bg:#fde8e6;--category-label-ink:#a82330;}
.events-page .event-row[data-category='排班类'] {--category-label-bg:#F9F1C0;--category-label-ink:#806515;}
.events-page .event-row[data-category='主席团专项'] .badge {background:#f4e9fb;color:#6d3596;}
.events-page .event-row[data-category='博爱中心'] .badge {background:#fdeade;color:#9c4220;}
.events-page .event-row[data-category='生命中心'] .badge {background:#e2f2e6;color:#276b44;}
.events-page .event-row[data-category='综事中心'] .badge {background:#e6eefb;color:#35599f;}
.events-page .event-row[data-category='一加助残专项'] .badge {background:#e4f3e8;color:#276b44;}
.events-page .event-row[data-category='献血车专项'] .badge {background:#fde8e6;color:#a82330;}
.events-page .event-row[data-category='排班类'] .badge {background:#F9F1C0;color:#806515;}
.events-page .event-row .badge {font-size:14px;}.events-page .event-row .status-indicator {font-size:13px;}
.events-guide {display:flex;align-items:center;gap:22px;padding:20px;background:#faeeea;border-radius:12px;color:var(--plaza-red);}
.events-guide h2 {font-size:18px;white-space:nowrap;margin:0;}.events-guide ol {list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:0;margin:0;flex:1;}
.events-guide li {display:flex;gap:12px;align-items:center;}.events-guide li>b {background:#b82940;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;text-align:center;color:white;font:20px/1 Arial,sans-serif;font-variant-numeric:lining-nums tabular-nums;flex-shrink:0;}.events-guide li strong {font-size:13px;display:block;}.events-guide li span {display:block;color:#6b665f;font-size:11px;margin-top:4px;}
.plaza-example-banner {text-align:center;background:#faeeea;color:#8f1430;padding:9px;font-size:12px;}
body.portal:has(.plaza-example) {display:block;height:auto;min-height:100vh;overflow:auto;}
.plaza-example-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 4%;background:#fff9;}.plaza-example-brand {display:flex;align-items:center;gap:12px;color:#a10b27;font-family:var(--plaza-serif);font-size:22px;font-weight:700;text-decoration:none;}.plaza-example-brand img {border-radius:50%;width:46px;height:46px;}.plaza-example-brand small {display:block;font:10px Georgia,serif;letter-spacing:.04em;margin-top:5px;}.plaza-example-header nav {display:flex;gap:25px;font-size:14px;}.plaza-example-header nav a {text-decoration:none;color:#493a36;}.plaza-example-header nav a[aria-current] {color:#b50b30;border-bottom:2px solid;padding-bottom:10px;}.plaza-example-footer {padding:28px;text-align:center;color:#817775;font-size:12px;}
.plaza-example .discovery-filters label {display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--plaza-muted);}.plaza-example :is(input,select) {font:inherit;padding:10px 12px;border:1px solid var(--plaza-line);border-radius:8px;background:white;color:var(--plaza-ink);min-width:0;}.plaza-example input {width:100%;}.plaza-example .example-search {flex:1;min-width:190px;}.plaza-example .example-layout {display:grid;gap:16px;}.plaza-example .event-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media(max-width:900px) {.events-categories {grid-template-columns:repeat(3,minmax(0,1fr));}.events-hero__copy {width:75%;padding-left:28px;}.events-hero__arrow--prev {left:auto;right:70px;top:auto;bottom:65px;}.events-hero__arrow--next {top:auto;bottom:65px;}.events-guide {align-items:flex-start;flex-direction:column;}.events-guide ol {width:100%;gap:12px;}.plaza-example-header nav {gap:14px;font-size:12px;}.plaza-example-header nav a:nth-child(n+4) {display:none;}}
@media(max-width:640px) {.portal :is(.events-page, .outreach-page, .community-view, .materials-page) .plaza-frame {padding:0 16px 24px;gap:18px;}.events-hero {margin:0 -16px;min-height:470px;align-items:flex-end;}.events-hero__art {inset:0 0 36% 0;}.events-hero::after {background:linear-gradient(0deg,var(--plaza-paper) 20%,#fcf9f5fa 38%,#fcf9f500 85%);}.events-hero__copy {padding:185px 24px 50px;width:100%;}.events-hero h1 {font-size:36px;}.events-hero__eyebrow {font-size:11px;margin-bottom:10px;}.events-hero__motto {font-size:20px;margin:5px 0 12px;}.events-hero__description {font-size:16px;margin-bottom:16px;}.events-hero__placeholder {justify-content:flex-start;padding-top:25px;gap:10px;}.events-hero__placeholder img {width:50px;height:50px;}.events-hero__placeholder>span {font-size:20px;}.events-hero__controls {bottom:14px;right:20px;}.events-hero__arrow {width:34px;height:34px;bottom:64px;}.events-categories {gap:8px;}.events-category {padding:12px 2px;}.events-category strong {font-size:13px;}.events-category>span:last-child {font-size:10px;}.events-category .activity-emblem {width:48px;height:48px;}.portal .events-page .discovery-results .event-list,.plaza-example .event-list {grid-template-columns:1fr;}.portal .events-page .event-row.event-row--category {grid-template-columns:72px minmax(0,1fr);gap:8px 12px;min-height:225px;}.portal .events-page .event-row--category .event-row__date {width:72px;}.portal .events-page .event-row__date .activity-emblem {width:50px;height:50px;}.portal .events-page .event-row--category .event-row__body h3 {font-size:17px;}.events-guide ol {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}.plaza-example-header {padding:14px 16px;}.plaza-example-brand {font-size:17px;}.plaza-example-header nav {display:none;}}
@media(prefers-reduced-motion:reduce) {.events-page * {scroll-behavior:auto!important;}}
@media(max-width:640px) {
 .portal .events-page .event-list,.portal .events-page .discovery-results[data-layout] .event-list {grid-template-columns:minmax(0,1fr);}
 .portal .events-page .discovery-results[data-layout] .event-list>.event-row {grid-template-columns:72px minmax(0,1fr);}
}

/* Reference typography: Chinese running script, Song title, and readable Hei UI. */
:is(.portal:has(.events-page),html[data-events-typography] .portal) {
 --font-sans:'NJU Heading','Microsoft YaHei','PingFang SC',sans-serif;
 --font-heading:var(--font-sans);--font-ui:var(--font-sans);--font-reading:var(--font-sans);--font-numeric:var(--font-sans);
 font-family:var(--font-sans);
}
.events-page {--plaza-sans:'NJU Heading','Microsoft YaHei','PingFang SC',sans-serif;--plaza-serif:'Events Serif','Noto Serif CJK SC','Songti SC','SimSun',serif;font-family:var(--plaza-sans);}
.events-page :is(button,input,select,.field,.event__fact,.badge,.status-indicator,.event-row__meta,.event-row__summary) {font-family:var(--plaza-sans);}
.plaza-example-header .plaza-example-brand>span {
 font-family:'Events Running','STXingkai','KaiTi',cursive;font-size:27px;font-weight:400;line-height:1.15;letter-spacing:.02em;-webkit-text-stroke:.25px currentColor;
}
.plaza-example-brand small {font:9px/1.3 Georgia,'Times New Roman',serif;letter-spacing:0;-webkit-text-stroke:0;}
.plaza-example-header nav,.plaza-example-login {font-family:'NJU Heading','Microsoft YaHei',sans-serif;}
.plaza-example-login {font-weight:700;}
.events-hero h1 {font-family:var(--plaza-serif);font-weight:750;font-size:clamp(34px,4.25vw,52px);line-height:1.3;letter-spacing:-.02em;}
.events-hero__motto {font-family:var(--plaza-serif);font-weight:600;letter-spacing:.16em;line-height:1.5;}
.events-hero__eyebrow {font-weight:400;}
.events-hero__description {font-family:var(--plaza-sans);font-weight:400;}
.events-hero__copy .btn {font-weight:700;}
.events-page .events-category strong {font-size:16px;font-weight:700;line-height:1.4;}
.events-page .events-category>span:last-child {font-size:13px;font-weight:400;line-height:1.4;}
.events-categories .events-category>strong,.events-categories .events-category>span:last-child {max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(min-width:641px) and (max-width:1000px) {
 .events-categories {grid-template-columns:repeat(7,minmax(0,1fr));}
 .events-page .events-category strong {font-size:clamp(10px,1.3vw,14px);line-height:22.4px;}
}
.events-page .events-results-heading h2 {font-family:var(--plaza-sans);font-size:24px;font-weight:700;}
.portal .events-page .event-row--category .event-row__body h3 {font-family:var(--plaza-sans);font-weight:700;}
.portal .events-page .event-row__date b {font-family:var(--plaza-sans);font-weight:700;line-height:1.2;}
.portal .events-page .event-row__date>span:last-child {font-family:var(--plaza-sans);font-weight:400;}
.events-page .events-guide {font-family:var(--plaza-sans);}
.events-page .events-guide :is(h2,strong) {font-weight:700;}
@media(max-width:1150px) and (min-width:641px) {
 .plaza-example-header .plaza-example-brand>span {font-size:24px;}
}
@media(max-width:640px) {
 .events-categories {grid-template-columns:repeat(12,minmax(0,1fr));}
 .events-categories .events-category {grid-column:span 4;}
 .events-categories .events-category:nth-child(-n+4) {grid-column:span 3;}
 .plaza-example-header .plaza-example-brand>span {font-size:19px;}
 .events-hero h1 {font-size:32px;}
 .events-page .events-category strong {font-size:clamp(10px,3vw,14px);line-height:19.6px;}
 .events-page .events-category>span:last-child {font-size:11px;}
 .portal .events-page .event-row__date .activity-emblem {width:60px;height:60px;}
 .portal .events-page .event-row--category .event-row__body h3 {font-size:21px;}
}

/* /styles/home-experience.css */
/* Homepage content only. Shared navigation, footer and activity pages are untouched. */
.home-redesign { --home-wine: #aa1536; --home-ink: #472c33; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 36px 38px; color: var(--home-ink); }
.home-redesign [hidden] { display: none !important; }
.home-redesign .home-banner { position: relative; overflow: hidden; margin-inline: 0; border-radius: 3px 3px 0 0; background: #f2e9e2; }
.home-redesign .home-banner__stage { aspect-ratio: 900 / 342; }
.home-redesign .home-banner__stage > a, .home-redesign .home-banner__stage > .home-photo, .home-redesign .home-banner__stage > a > .home-photo { display: block; height: 100%; }
.home-redesign .home-photo { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(135deg,#f4e9e2,#eee2da); height: 100%; }
.home-redesign .home-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-redesign .home-photo__empty { display: grid; place-items: center; height: 100%; min-height: 150px; color: #907a72; font-size: 16px; letter-spacing: .12em; }
.home-redesign .home-banner__arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #25212536; color: white; cursor: pointer; }
.home-redesign .home-banner__arrow svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-redesign .home-banner__arrow--prev { left: 16px; }
.home-redesign .home-banner__arrow--next { right: 16px; }
.home-redesign .home-banner__dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 0 6px; border-radius: 24px; background: #0003; }
.home-redesign .home-banner__dots button { width: 26px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.home-redesign .home-banner__dots button::after { content: ''; display: block; width: 7px; height: 7px; margin: auto; background: #fff9; border-radius: 100%; }
.home-redesign .home-banner__dots button[aria-pressed=true]::after { background: #bc1539; box-shadow: 0 0 0 2px #fff9; }
.home-redesign .home-banner__pause { position: absolute; right: 16px; bottom: 14px; padding: 5px 10px; background: #251c246b; color: white; border: 1px solid #ffffff70; border-radius: 20px; cursor: pointer; font-size: 12px; }
.home-redesign :is(button,a,input,textarea):focus-visible { outline: 3px solid #9b294d; outline-offset: 4px; }
.home-redesign .home-impact { display: grid; grid-template-columns: repeat(4,1fr); padding: 30px 12px; }
.home-redesign .home-impact__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; text-align: center; }
.home-redesign .home-impact__item + .home-impact__item { border-left: 1px solid #e7cbd0; }
.home-redesign .home-impact__item b { color: var(--home-wine); font-size: clamp(28px,3.3vw,46px); line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; }
.home-redesign .home-impact__item span { font-size: clamp(12px,1.05vw,16px); }
.home-redesign .home-impact__error { grid-column: 1/-1; text-align: center; margin-top: 12px; }
.home-redesign .home-cranes { position: relative; isolation: isolate; margin: 0 0 24px; border: 1px solid #eddbd4; border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 10% 80%,#f9d8d060,transparent 40%),radial-gradient(ellipse at 85% 60%,#f9decd80,transparent 46%),#fffaf4; }
.home-redesign .home-cranes__head { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 32px 0; pointer-events: none; }
.home-redesign .home-cranes__head .btn { pointer-events: auto; border-radius: 30px; color: var(--home-wine); border-color: var(--home-wine); background: #fffaf5; white-space: nowrap; }
.home-redesign .home-cranes h1 { color: #96112d; font-family: var(--font-serif,serif); font-size: clamp(26px,2.5vw,38px); font-weight: 750; line-height: 1.25; margin: 0 0 5px; padding-left: 16px; border-left: 5px solid #a61737; }
.home-redesign .home-cranes__head p { margin: 0; padding-left: 21px; font-size: 15px; color: #8a726a; }
.home-redesign .home-cranes__sky { position: relative; height: 340px; margin-top: -8px; }
.home-redesign .home-cranes__sky::before, .home-redesign .home-cranes__sky::after { content: ''; position: absolute; width: 75%; height: 53%; left: 10%; top: 22%; border: 1px dashed #e7bdb180; border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.home-redesign .home-cranes__sky::after { top: 35%; left: 20%; width: 63%; transform: rotate(15deg); }
.home-redesign .home-cranes__hint { position: relative; z-index: 3; margin: 0; padding: 4px 30px 18px; font-size: 13px; color: #8b7972; pointer-events: none; }
.home-redesign .home-crane { --paper: #c83c49; --light: #f1a19c; --shade: #961e34; position: absolute; width: 100px; top: 30%; left: 12%; z-index: 1; animation: home-crane-flight 8s ease-in-out infinite alternate; filter: drop-shadow(0 8px 5px #914b2812); }
.home-redesign .home-crane svg { width: 100%; height: auto; overflow: visible; transition: transform .35s,opacity .35s; }
.home-redesign .crane__wing-back,.home-redesign .crane__neck { fill: var(--shade); }
.home-redesign .crane__wing,.home-redesign .crane__body { fill: var(--paper); }
.home-redesign .crane__wing-light { fill: var(--light); }
.home-redesign .crane__fold { fill: none; stroke: #fff7; stroke-width: .8; }
.home-redesign .home-crane__trigger { display: block; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.home-redesign .home-crane__note { display: none; position: absolute; width: min(280px,60vw); left: 50%; bottom: 70%; transform: translateX(-50%); background: #fff7e7; border: 1px solid #e7cbbb; box-shadow: 0 12px 30px #84432920; padding: 20px 22px; border-radius: 3px 16px 5px 12px; color: #82452f; font-family: var(--font-serif,serif); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.home-redesign .home-crane__note small { display: block; font-size: 12px; color: #8f7d71; text-align: right; margin-top: 8px; }
.home-redesign .home-crane:is(:hover,:focus-within,.is-open) { z-index: 5; animation-play-state: paused; }
.home-redesign .home-crane:is(:hover,:focus-within,.is-open) .home-crane__note { display: block; }
.home-redesign .home-crane:is(:hover,:focus-within,.is-open) svg { transform: scale(1.12) rotate(-5deg); }
.home-redesign .home-crane--decoration { pointer-events: none; }
.home-redesign .home-crane--1 { left: 25%; top: 18%; width: 110px; --paper:#d3ad85; --light:#f1d4ac; --shade:#af865e; animation-delay: -4s; }
.home-redesign .home-crane--2 { left: 39%; top: 4%; width: 80px; animation-delay: -2s; }
.home-redesign .home-crane--3 { left: 55%; top: 2%; width: 70px; --paper:#d3ad85; --light:#f1d4ac; --shade:#af865e; animation-delay: -5s; }
.home-redesign .home-crane--4 { left: 74%; top: 14%; width: 115px; animation-delay: -3s; }
.home-redesign .home-crane--5 { left: 83%; top: 60%; width: 110px; --paper:#9aab77; --light:#ced5a8; --shade:#77865f; animation-delay: -6s; }
.home-redesign .home-crane--6 { left: 67%; top: 72%; width: 90px; animation-delay: -1s; }
.home-redesign .home-crane--7 { left: 32%; top: 65%; width: 85px; --paper:#d3ad85; --light:#f1d4ac; --shade:#af865e; animation-delay: -3s; }
.home-redesign .home-crane--8 { left: 19%; top: 60%; width: 74px; --paper:#9aab77; --light:#ced5a8; --shade:#77865f; animation-delay: -5s; }
.home-redesign .home-crane--9 { left: 45%; top: 42%; width: 140px; animation-delay: -2s; }
.home-redesign .home-crane--10 { left: 87%; top: 28%; width: 65px; animation-delay: -4s; }
.home-redesign .home-crane--11 { left: 4%; top: 70%; width: 90px; animation-delay: -7s; }
.home-redesign .home-crane--0 { left: 43%; top: 35%; width: 145px; }
.home-redesign .home-crane--9 { left: 6%; top: 25%; width: 100px; }
.home-redesign .home-crane--0 .home-crane__note { left: 85%; top: -8px; bottom: auto; transform: rotate(2deg); }
.home-redesign .home-crane__note { max-height: 230px; overflow-y: auto; }
.home-redesign .home-stories { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin: 0; }
.home-redesign .home-stories > section { padding: 20px; border: 1px solid #eddfd7; border-radius: 14px; background: #fffaf670; min-width: 0; }
.home-redesign .home-stories h2 { margin: 0 0 16px; border-left: 4px solid #ad1738; padding-left: 10px; font-size: 23px; font-weight: 700; }
.home-redesign .home-volunteers__photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.home-redesign .home-volunteers__photo { min-width: 0; text-decoration: none; }
.home-redesign .home-volunteers__photo figure { margin: 0; }
.home-redesign .home-volunteers__photo .home-photo { aspect-ratio: 4 / 3; border-radius: 10px; }
.home-redesign .home-volunteers__photo .home-photo img { object-fit: cover; }
.home-redesign .home-volunteers__photo .home-photo--crop { aspect-ratio: var(--photo-ratio); }
.home-redesign .home-photo--crop img { position: absolute; max-width: none; width: var(--photo-width); height: auto; left: var(--photo-left); top: var(--photo-top); }
.home-redesign .home-volunteers__photo figcaption { margin-top: 8px; font-size: 15px; }
.home-redesign .home-footprints { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; contain: size; }
.home-redesign .home-footprints__list { list-style: none; margin: 0; padding: 0 12px 0 15px; min-height: 0; height: 100%; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #c9949e transparent; }
.home-redesign .home-footprints__list:focus-visible { outline: 2px solid var(--home-wine); outline-offset: 4px; border-radius: 4px; }
.home-redesign .home-footprints__list li { position: relative; border-left: 1px solid #e8b5bd; padding: 0 0 20px 20px; }
.home-redesign .home-footprints__list li:last-child { padding-bottom: 0; }
.home-redesign .home-footprints__list li::before { content: ''; position: absolute; width: 8px; height: 8px; background: #b61a3d; border-radius: 50%; left: -4.5px; top: 8px; }
.home-redesign .home-footprints__story { color: inherit; text-decoration: none; }
.home-redesign .home-footprints__story > div { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
.home-redesign .home-footprints__story time { color: #b41438; font-size: 13px; font-weight: 650; grid-row: span 2; padding-top: 4px; }
.home-redesign .home-footprints__story time small { display: block; margin-top: 4px; color: #756057; font-size: 11px; font-weight: 400; }
.home-redesign .home-footprints__story h3 { margin: 0; font-size: 16px; line-height: 1.5; }
.home-redesign .home-footprints__story p { margin: 3px 0 0; font-size: 13px; color: #756057; }
.home-redesign .home-footprints__empty { color: #756057; font-size: 15px; }
.home-crane-form { display: grid; gap: 12px; }
.home-crane-form textarea,.home-crane-form input:not([type=checkbox]) { width: 100%; padding: 12px; border: 1px solid var(--border,#dbcac3); border-radius: 10px; background: var(--surface,#fffaf5); color: inherit; font: inherit; }
.home-crane-form__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.home-crane-form__consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
@keyframes home-crane-flight { from { transform: translate3d(-5px,6px,0) rotate(-5deg); } to { transform: translate3d(9px,-10px,0) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .home-redesign .home-crane { animation: none; } .home-redesign .home-crane svg { transition: none; } }
@media (max-width: 720px) {
  .home-redesign .home-banner__stage { aspect-ratio: 900 / 342; }
  .home-redesign .home-impact { padding: 22px 0; }
  .home-redesign .home-impact__item { padding: 0 6px; }
  .home-redesign .home-impact__item span { font-size: 11px; }
  .home-redesign .home-cranes { margin: 0 0 16px; border-radius: 15px; }
  .home-redesign .home-cranes__head { padding: 22px 16px 0; gap: 8px; }
  .home-redesign .home-cranes h1 { font-size: 24px; padding-left: 10px; }
  .home-redesign .home-cranes__head p { font-size: 12px; padding-left: 14px; }
  .home-redesign .home-cranes__head .btn { font-size: 12px; padding: 8px 10px; min-height: 36px; }
  .home-redesign .home-cranes__sky { height: 290px; margin-top: 12px; }
  .home-redesign .home-crane { width: 70px; }
  .home-redesign .home-crane--5,.home-redesign .home-crane--10 { left: 76%; }
  .home-redesign .home-crane__note { width: 190px; font-size: 15px; padding: 12px; }
  .home-redesign .home-crane--0 .home-crane__note,.home-redesign .home-crane--8 .home-crane__note,.home-redesign .home-crane--11 .home-crane__note { left: 0; transform: none; }
  .home-redesign .home-crane--0 { left: 38%; top: 34%; width: 100px; }
  .home-redesign .home-crane--0 .home-crane__note { left: 50%; top: 55px; bottom: auto; transform: translateX(-50%); max-height: 180px; }
  .home-redesign .home-crane--4 .home-crane__note,.home-redesign .home-crane--5 .home-crane__note,.home-redesign .home-crane--10 .home-crane__note { right: 0; left: auto; transform: none; }
  .home-redesign .home-cranes__hint { font-size: 11px; padding: 5px 15px 16px; }
  .home-redesign .home-stories { grid-template-columns: 1fr; margin: 0; gap: 16px; }
  .home-redesign .home-stories > section { padding: 16px; }
  .home-redesign .home-stories h2 { font-size: 21px; }
  .home-redesign .home-footprints { contain: none; grid-template-rows: auto auto; }
  .home-redesign .home-footprints__list { height: auto; max-height: 460px; }
}
@media (max-width: 640px) {
  .home-redesign { padding-inline: 16px; }
}