:root {
  --topbar-h: 4.25rem;
  --river-time-col: 4rem;
  --river-day-min: 12rem;
  --river-hour-min: 7.25rem;
}

html, body { width: 100%; height: 100%; }
body { overflow: hidden; display: flex; flex-direction: column; }
button, textarea, select { font: inherit; }
[hidden] { display: none !important; }

.app-shell { width: 100%; height: auto; min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--surface-page); overflow: hidden; }
.topbar { min-height: var(--topbar-h); flex: 0 0 auto; display: grid; grid-template-columns: minmax(13rem, 1fr) auto minmax(18rem, 1fr); align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--layout-gutter); border-bottom: var(--border-w) solid var(--border-strong); background: var(--surface-page); }
.brand-lockup, .topbar-actions, .dialog-head, .dialog-actions, .panel-heading, .stage-heading, .deadline-strip, .reminder-actions { display: flex; align-items: center; }
.brand-lockup { gap: var(--space-sm); min-width: 0; }
.brand-lockup p, .brand-lockup h1, .week-range, .stage-heading p, .empty-state p, .original-input p, .warning-list, .field-error, .brief-card p, .item-group h3 { margin: 0; }
.brand-mark { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; background: var(--color-coral); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.week-range { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.topbar-actions { justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); }
.topbar-actions .btn__face { white-space: nowrap; }
.undo-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-xs) var(--layout-gutter); color: var(--surface-page); background: var(--color-ink); }

.workspace { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; padding: var(--space-md) var(--layout-gutter); }
.cockpit { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 17.5rem); gap: var(--space-md); }
.brief-panel { min-width: 0; min-height: 0; overflow: auto; padding: var(--space-md); background: var(--surface-face); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-md); }
.panel-heading, .stage-heading, .dialog-head, .dialog-actions { justify-content: space-between; gap: var(--space-md); }
.panel-heading h2, .stage-heading h2 { margin-top: var(--space-2xs); }
.stage-heading { align-items: flex-end; }
.stage-heading p { max-width: 22rem; color: var(--text-secondary); font-size: var(--text-body-sm); text-align: right; overflow-wrap: anywhere; }

.calendar-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; }
.deadline-strip { min-height: 3.625rem; flex: 0 0 auto; gap: var(--space-sm); padding: var(--space-sm); background: var(--color-coral-soft); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.deadline-strip.is-empty { background: var(--surface-face); border-style: dashed; color: var(--text-secondary); }
.deadline-flag { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; flex: 0 0 auto; background: var(--color-coral); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); }
.deadline-copy { min-width: 0; display: grid; gap: var(--space-2xs); }
.deadline-copy strong, .deadline-copy span { overflow-wrap: anywhere; }

.time-river { min-width: 0; min-height: 25rem; flex: 1 1 auto; overflow: auto; background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); scrollbar-gutter: stable; }
.time-river__board { min-width: calc(var(--river-time-col) + 7 * var(--river-day-min)); }
.time-river__day-tabs { display: none; }
.time-river__head, .time-river__hour { display: grid; grid-template-columns: var(--river-time-col) repeat(7, minmax(var(--river-day-min), 1fr)); }
.time-river__head { position: sticky; top: 0; z-index: 8; min-height: 3.25rem; background: var(--surface-face); border-bottom: var(--border-w) solid var(--border-strong); }
.time-river__time-head, .time-river__day-head { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-xs); }
.time-river__day-head { border-left: var(--border-w-hair) solid var(--border-quiet); white-space: nowrap; }
.time-river__day-head small { color: var(--text-secondary); }
.time-river__early-notice { width: 100%; min-height: 2.75rem; flex: 0 0 auto; padding: var(--space-xs) var(--space-md); color: var(--text-primary); background: var(--color-coral-soft); border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-sm); text-align: left; font-weight: 700; cursor: pointer; }
.time-river__early-notice:hover { background: var(--surface-face); }
.time-river__early-notice:focus-visible { position: relative; z-index: 9; outline: var(--focus-w) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-w)); }
.time-river__empty { margin: 0; padding: var(--space-sm) var(--space-md); color: var(--text-secondary); background: var(--surface-face); border-bottom: var(--border-w-hair) dashed var(--border-quiet); }
.time-river__hour { min-height: var(--river-hour-min); }
.time-river__time { padding: var(--space-sm) var(--space-xs); color: var(--text-secondary); font-size: var(--text-body-sm); text-align: right; border-bottom: var(--border-w-hair) solid var(--border-quiet); }
.time-river__cell { min-width: 0; padding: var(--space-xs); border-left: var(--border-w-hair) solid var(--border-quiet); border-bottom: var(--border-w-hair) solid var(--border-quiet); }
.time-river__count { display: block; margin-bottom: var(--space-xs); color: var(--text-secondary); font-size: var(--text-label-sm); }
.time-river__stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.time-river__end { display: grid; grid-template-columns: var(--river-time-col) 1fr; min-height: 2rem; color: var(--text-secondary); background: var(--surface-face); }
.time-river__end time { padding: var(--space-xs); text-align: right; }

.schedule-card { position: relative; width: 100%; height: auto; min-width: 0; display: grid; gap: var(--space-2xs); padding: var(--space-sm); color: var(--text-primary); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); text-align: left; cursor: pointer; overflow: visible; }
.schedule-card:hover { background: var(--color-coral-soft); }
.schedule-card:focus-visible { z-index: 2; outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--space-2xs); }
.schedule-card > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.schedule-card__name { font-family: var(--font-display); font-size: var(--text-body-md); line-height: var(--leading-snug); }
.schedule-card__time { font-weight: 700; }
.schedule-card__place, .schedule-card__note { color: var(--text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.schedule-card__overlap { width: max-content; max-width: 100%; padding: var(--space-2xs) var(--space-xs); background: var(--color-coral-soft); border: var(--border-w-hair) solid var(--border-strong); border-radius: var(--radius-full); font-size: var(--text-label-sm); font-weight: 700; }
.schedule-card.is-fixed { border-left: calc(3 * var(--border-w)) double var(--border-strong); }
.schedule-card.is-movable { background: var(--surface-face); border-top-style: dashed; }
.schedule-card.is-life { border-style: dashed; }
.schedule-card.has-overlap { box-shadow: inset 0 0 0 var(--border-w-hair) var(--color-coral); }

.empty-state { display: grid; gap: var(--space-sm); place-items: start; padding: var(--space-lg); background: var(--surface-page); border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-md); }
.empty-state p { color: var(--text-secondary); overflow-wrap: anywhere; }
.brief-card { display: grid; gap: var(--space-sm); padding: var(--space-md); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.brief-card.is-accent { background: var(--color-coral-soft); }
.brief-card p { color: var(--text-secondary); overflow-wrap: anywhere; }

.login-page { min-height: 100%; display: grid; place-items: center; padding: var(--space-lg); background: var(--surface-page); }
.login-card { width: min(27.5rem, 100%); }
.login-card .card__face { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.login-brand { display: flex; align-items: center; gap: var(--space-md); }
.login-card form { display: grid; gap: var(--space-md); }

.site-compliance { flex: 0 0 auto; display: flex; justify-content: center; padding: var(--space-xs) var(--layout-gutter); color: var(--text-secondary); background: var(--surface-face); border-top: var(--border-w-hair) solid var(--border-quiet); font-size: var(--text-label-sm); line-height: var(--leading-normal); text-align: center; }
.site-compliance__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); }
.site-compliance a { color: inherit; text-decoration: none; text-underline-offset: var(--space-2xs); }
.site-compliance a:hover { color: var(--text-primary); text-decoration: underline; }
.site-compliance a:focus-visible { border-radius: var(--radius-sm); outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--space-2xs); }
.site-compliance__public-security { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.site-compliance__public-security img { width: 20px; height: 20px; flex: 0 0 auto; }
.site-compliance__separator { color: var(--border-strong); }

.privacy-page { min-height: 100%; overflow: auto; }
.privacy-main { width: min(100% - 2 * var(--space-lg), 52rem); margin: 0 auto; padding: var(--space-2xl) 0; }
.privacy-card { display: grid; gap: var(--space-xl); padding: var(--space-xl); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.privacy-card header, .privacy-section { display: grid; gap: var(--space-sm); }
.privacy-card h1, .privacy-card h2, .privacy-card p, .privacy-card ul { margin: 0; }
.privacy-card h2 { font-family: var(--font-display); font-size: var(--text-title-md); line-height: var(--leading-snug); }
.privacy-card ul { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); }
.privacy-card a { color: inherit; text-underline-offset: var(--space-2xs); }
.privacy-back { width: max-content; font-weight: 700; }

.dialog { width: min(45rem, calc(100vw - 2 * var(--space-md))); max-height: calc(100vh - 2 * var(--space-md)); padding: 0; color: var(--text-primary); background: transparent; border: 0; overflow: visible; }
.dialog.sheet { width: min(40.625rem, calc(100vw - 2 * var(--space-md))); margin-right: var(--space-md); }
.dialog::backdrop { background: var(--surface-backdrop); }
.dialog-panel { max-height: calc(100vh - 2 * var(--space-md)); overflow: auto; display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 var(--space-xs) 0 var(--color-ink); }
.dialog-head { align-items: flex-start; }
.icon-button { min-width: 3rem; min-height: 2.75rem; padding: var(--space-xs) var(--space-sm); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.icon-button:hover { background: var(--surface-face); }
.icon-button:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--space-2xs); }
.capture-textarea { min-height: 9.375rem; resize: vertical; }
.field-error { min-height: 1.4em; color: var(--text-error); font-size: var(--text-body-sm); }
.original-input { display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--surface-face); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.original-input p { overflow-wrap: anywhere; white-space: pre-wrap; }
.draft-fields, .item-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.draft-fields .field:last-child, .field--wide { grid-column: 1 / -1; }
.warning-list { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--color-coral-soft); border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-md); }
.warning-list li, .warning-list span { overflow-wrap: anywhere; }
.time-summary, .time-needed { display: grid; gap: var(--space-sm); padding: var(--space-md); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-face); }
.time-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.time-summary details { border-top: var(--border-w-hair) solid var(--border-quiet); padding-top: var(--space-sm); }
.time-summary summary { width: max-content; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: var(--space-2xs); }
.time-summary details[open] summary { margin-bottom: var(--space-sm); }
.reminder-editor { display: grid; gap: var(--space-sm); padding: var(--space-md); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.reminder-presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.reminder-chip { min-height: 2.75rem; padding: var(--space-xs) var(--space-sm); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-full); cursor: pointer; }
.reminder-chip[aria-pressed="true"] { background: var(--color-coral-soft); outline: var(--border-w) solid var(--color-ink); outline-offset: var(--space-2xs); }
.reminder-custom { display: grid; grid-template-columns: minmax(6.25rem, 1fr) minmax(7rem, .7fr); gap: var(--space-sm); }

.items-panel { width: min(48rem, calc(100vw - 2 * var(--space-md))); }
.item-groups, .item-group, .item-list, .item-change-draft { display: grid; gap: var(--space-md); }
.item-list { gap: var(--space-sm); max-height: 55vh; overflow: auto; padding: var(--space-2xs); }
.item-history summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; }
.item-history[open] summary { margin-bottom: var(--space-sm); }
.item-card { width: 100%; display: grid; gap: var(--space-2xs); padding: var(--space-md); color: var(--text-primary); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); text-align: left; cursor: pointer; }
.item-card:hover { background: var(--surface-face); }
.item-card:active { background: var(--color-coral-soft); }
.item-card:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--space-2xs); }
.item-card > * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.item-card__time, .item-card__place { color: var(--text-secondary); font-size: var(--text-body-sm); }
.item-card__name { font-family: var(--font-display); font-size: var(--text-title-md); line-height: var(--leading-snug); }
.item-detail { display: grid; gap: var(--space-md); padding: var(--space-md); background: var(--surface-face); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.item-detail h3, .item-detail dl, .item-detail dd { margin: 0; }
.item-detail dl { display: grid; }
.item-detail dl > div { display: grid; grid-template-columns: minmax(5rem, .35fr) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--border-w-hair) solid var(--border-quiet); }
.item-detail dt { color: var(--text-secondary); }
.item-detail dd { overflow-wrap: anywhere; }
.item-change-draft { min-width: 0; }

.reminder-actions { flex-wrap: wrap; gap: var(--space-sm); }
.review-section, .result-form { display: grid; gap: var(--space-sm); padding: var(--space-md); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); }
.review-section h3, .review-section p { margin: 0; }
.review-section ul { margin: 0; padding-left: var(--space-lg); }
.review-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.review-facts span { display: grid; min-width: 5.25rem; gap: var(--space-2xs); padding: var(--space-sm); background: var(--surface-face); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); }
.review-facts strong { font-family: var(--font-display); font-size: var(--text-title-md); }
.review-item-list { display: grid; gap: var(--space-sm); }
.review-item-list article { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm); background: var(--surface-face); border: var(--border-w-hair) solid var(--border-quiet); border-radius: var(--radius-sm); }
.review-item-list article > span { min-width: 0; display: grid; gap: var(--space-2xs); }
.review-item-list strong, .review-item-list small { overflow-wrap: anywhere; }
.review-item-list small { color: var(--text-secondary); }
.toast { position: fixed; z-index: 100; right: var(--space-lg); bottom: var(--space-lg); max-width: min(26rem, calc(100vw - 2 * var(--space-md))); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--surface-page); border-radius: var(--radius-md); }
.loading { min-height: 100%; display: grid; place-items: center; color: var(--text-secondary); }
.error-panel { margin: auto; max-width: 38.75rem; }

@media (max-width: 73.6875rem) {
  .cockpit { grid-template-columns: minmax(0, 1fr); height: auto; }
  .brief-panel { order: -1; max-height: 15rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief-panel .panel-heading { grid-column: 1 / -1; }
  .time-river { min-height: 30rem; height: calc(100dvh - 8rem); max-height: 46rem; flex: 0 0 auto; }
}
@media (max-width: 60rem) {
  .topbar { grid-template-columns: 1fr auto; }
  .week-range { display: none; }
  .topbar-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .brief-panel { max-height: none; grid-template-columns: 1fr; }
  .brief-panel .panel-heading { grid-column: auto; }
  .time-river { min-height: 22rem; height: calc(100dvh - 8rem); max-height: 42rem; flex: 0 0 auto; }
  .time-river__day-tabs { position: sticky; top: 0; z-index: 9; display: flex; gap: var(--space-xs); overflow-x: auto; padding: var(--space-xs); background: var(--surface-face); border-bottom: var(--border-w) solid var(--border-strong); }
  .time-river__day-tab { min-width: 4.75rem; display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-xs); color: var(--text-primary); background: var(--surface-page); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
  .time-river__day-tab[aria-selected="true"] { background: var(--color-coral-soft); box-shadow: inset 0 calc(-1 * var(--border-w)) 0 var(--color-ink); }
  .time-river__day-tab:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--space-2xs); }
  .time-river__board { min-width: 0; }
  .time-river__head, .time-river__hour { grid-template-columns: var(--river-time-col) minmax(0, 1fr); }
  .time-river__day-head:not(.is-active-day), .time-river__cell:not(.is-active-day) { display: none; }
  .time-river__day-head { white-space: normal; }
}
@media (max-width: 47.5rem) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 0; flex: 1 0 auto; overflow: visible; }
  .topbar { padding-inline: var(--space-sm); }
  .workspace { overflow: visible; padding: var(--space-sm); }
  .cockpit { height: auto; }
  .calendar-stage { min-height: 42.5rem; }
  .stage-heading { align-items: flex-start; flex-direction: column; }
  .stage-heading p { text-align: left; }
  .draft-fields, .item-edit-grid { grid-template-columns: 1fr; }
  .draft-fields .field:last-child, .field--wide { grid-column: auto; }
  .dialog.sheet { margin: auto; }
  .item-detail dl > div { grid-template-columns: 1fr; gap: var(--space-xs); }
  .site-compliance { padding-inline: var(--space-sm); }
  .site-compliance__links { flex-direction: column; gap: var(--space-xs); }
  .site-compliance a { min-height: 2.75rem; padding-inline: var(--space-xs); display: inline-flex; align-items: center; justify-content: center; }
  .site-compliance__separator { display: none; }
  .privacy-main { width: min(100% - 2 * var(--space-sm), 52rem); padding-block: var(--space-lg); }
  .privacy-card { padding: var(--space-lg); }
  .privacy-card a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}
@media (max-width: 32.5rem) {
  .topbar-actions .btn__face { padding-inline: var(--space-sm); }
  .reminder-custom { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}