/* Load after the functional styles. Local adaptation of the Maly Theatre visual language. */
:root {
  --paper: #f9f0e0;
  --ink: #333333;
  --text: #333333;
  --muted: #716a60;
  --line: #ded6c8;
  --accent: #72572e;
  --accent-soft: #f5eddf;
  --brand-gold: #c8923c;
  --gold: #876b3e;
  --gold-line: var(--brand-gold);
  --green: #365c45;
  --wash: #f8f5ef;
  --soft: #f8f5ef;
  --surface: #ffffff;
  --surface-soft: #f8f5ef;
  --radius: 5px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--paper); color: var(--ink); }
.app-header {
  height: 96px;
  padding: 14px 32px;
  background: #fff;
  border-bottom: 3px double var(--gold-line);
  gap: 24px;
}
.brand { gap: 20px; min-width: 0; }
.brand img {
  display: block;
  width: 320px;
  height: 54px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}
.brand span {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  border-left-color: var(--gold-line);
  padding-left: 20px;
}
.identity { flex-shrink: 0; }
.identity #identity-name { color: var(--ink); }
.demo-picker summary { border-radius: 4px; background: var(--wash); }
.demo-picker-fields {
  border-radius: 5px;
  box-shadow: 0 8px 24px #4d39251a;
}
.shell {
  min-height: calc(100dvh - 96px);
  max-width: 1680px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
aside { background: var(--wash); padding-top: 28px; }
main { background: #fff; padding-top: 30px; }
nav button { color: #5b5348; border-radius: 4px; }
nav button.active {
  background: #eee4d3;
  color: #62471f;
  box-shadow: inset 2px 0 var(--accent);
}
nav button:hover { background: #f0e8db; }
.nav-caption, .demo { color: var(--muted); }
.count { background: var(--accent); border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { font-size: 32px; line-height: 1.2; color: var(--gold); }
h2 { font-size: 25px; line-height: 1.3; }
h3 { font-size: 19px; line-height: 1.35; }
.heading {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 3px double var(--gold-line);
}
.heading::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold-line);
  outline: 4px solid #fff;
}
.sub { margin-bottom: 0; line-height: 1.6; }
.eyebrow { color: var(--muted); letter-spacing: 1px; }
.month-picker { color: var(--gold); font-family: var(--serif); font-weight: 400; font-size: 22px; }
.show-card h3, .plan-event-heading h3, .activity-card h3,
.tour-card h2, .tour-document h2, .activity-document-head h2,
.agenda-event strong, .event strong, .actor-agenda-row strong,
.actor-production h4 button, .next-call strong {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}
.show-card h3 { font-size: 21px; }
.repertoire-grid { gap: 18px; }
.repertoire-grid > .show-card { display: flex; flex-direction: column; padding: 20px; }
.repertoire-grid .show-card h3 { min-height: 0; margin-bottom: 10px; overflow-wrap: anywhere; }
.repertoire-grid .show-card-meta { font-size: 13px; line-height: 1.6; margin-bottom: 0; }
.show-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 18px;
}
.show-card-footer > button { margin-top: 0; }
.show-next-date { color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.agenda-event strong { font-size: 18px; }
.event strong { font-size: 14px; }
.plan-event-heading h3 { font-size: 20px; }
.actor-production h4 button { font-size: 19px; }
.actor-agenda-row strong { font-size: 17px; }
.actor-tile strong, .profile-card h2,
#detail:has(.person-summary) .dialog-head h2 { font-family: var(--sans); font-weight: 600; }
.time, .agenda-time, .day-num, .performance-timing dd,
.personal-arrival-time, .tour-dates dd, .activity-document-time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.agenda-date > strong { color: var(--accent); }

button, input, select, textarea { border-radius: 4px; }
button { border-color: #cfc4b3; background: #fff; }
button:hover { background: #f7f0e5; border-color: #ac9672; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #58401f; border-color: #58401f; }
button.danger { color: #922f32; border-color: #d7b1ad; }
button.danger:hover { background: #fff2ef; border-color: #a8625b; }
button:disabled { opacity: .55; }
input, select, textarea { border-color: #cfc6b8; }
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible, summary:focus-visible,
.month-plan-workspace button:focus-visible, .intake-file input:focus-visible {
  outline: 3px solid #947348;
  outline-offset: 3px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.segmented { background: var(--wash); border: 1px solid var(--line); border-radius: 5px; }
.segmented button { border-radius: 3px; }
.toolbar .selected, .segmented .selected {
  background: #eee4d3;
  color: #62471f;
  box-shadow: none;
}
.toolbar > button.selected { background: var(--accent-soft); color: var(--accent); border-color: #bba67f; }
.people-tabs, .actor-card-tabs, .inbox-tabs { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.plan-queue-filters button { color: var(--muted); border-radius: 4px; }
.plan-queue-filters button[aria-pressed=true] { background: #eee4d3; color: #62471f; border-color: var(--gold-line); }
.activity-picker-scopes button[aria-pressed=true], .activity-picker-categories button[aria-pressed=true] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.card, .empty-state, .calendar, .agenda, .matrix-wrap, .callsheet-scroll,
.settings-tile, .actor-tile, .activity-edit-block, .activity-document,
.personal-arrival, .performance-timing, .availability-summary,
.tour-fieldset, .tour-personal-dates, .tour-exit-confirm, .tour-assembly,
.tour-dates div, .sheet-settings, .sheet-date-picker > summary,
.sheet-date-picker[open] > label, .actor-portrait,
.activity-actors > details, .replacement-steps li { border-radius: 5px; }
.card, .activity-edit-block, .activity-document, .settings-tile, .actor-tile { background: #fff; }
.actor-tile:hover, .settings-tile:hover { background: #fcfaf6; }
.actor-portrait { background: #f0ece4; color: #8b806e; }
.empty-state { border-color: #cfc4b3; background: #fcfaf6; }
.next-call {
  background: #fbf8f1;
  border-color: var(--gold-line);
  border-radius: 5px;
  border-left: 3px solid var(--accent);
}
.next-call:hover { background: #f5eddf; }
.next-call strong { font-size: 28px; }
.next-call-arrow { border-color: var(--gold-line); border-radius: 4px; color: var(--accent); }
.performance-timing, .tour-dates div, .tour-assembly, .tour-exit-confirm,
.activity-actors > details, .replacement-steps li { background: var(--wash); }
.personal-arrival { background: #faf5e9; border-color: var(--gold-line); }
.own-call-row, .personal-common-call .own-call-row td,
.activity-document-table tr.activity-document-own td { background: #faf4e6; }
.tour-choice-list .check:has(input:checked) { background: #f3ecdf; }
.tour-choice-list .check { border-radius: 4px; }
.performer-chips button { border-radius: 4px; }
.bubble { background: #f5f1e9; border-radius: 5px; }
.bubble.own { background: #eee4d3; border-radius: 5px; }
.notice { background: #fbf5e8; color: #705429; border-color: #dfcfaa; border-radius: 4px; }
.error { background: #fff2ef; color: #922f32; border-radius: 4px; }
.pill { border-radius: 4px; color: #705429; background: #f6edd9; }
.pill.green { background: #edf3eb; color: var(--green); }
.month-plan-banner { background: var(--wash); color: #635b50; border-radius: 4px; }
.month-plan-banner.published { background: #edf3eb; color: var(--green); }
.plan-general-issues { background: #fff2ef; border-radius: 4px; }
.plan-review-status, .plan-search, .plan-event-status { color: #635b50; }
.plan-event-status, .plan-day { background: #f1ede5; color: #635b50; }
.plan-day.free { background: #edf3eb; color: #365c45; }
.plan-day.official_absence { background: #f0ece4; color: #61533f; }
.plan-day.partial_absence { background: #f6f0e4; color: #705429; }
.plan-day.occupied { background: #f1e7d9; color: #715235; }
.plan-event.excluded .plan-event-heading h3 { color: var(--muted); }
.plan-issue { color: #922f32; }
.intake-file input[type=file], .intake-file input::file-selector-button { border-radius: 4px; }
.intake-file input::file-selector-button { background: #eee4d3; color: var(--ink); }
.intake-file input::file-selector-button:hover { background: #e3d5be; }
.editor-actionbar { background: #fff; box-shadow: 0 -5px 12px #69502e08; }
.month-plan-footer { background: #fff; }
#toast { background: #3e3529; border-radius: 5px; box-shadow: 0 4px 20px #4d392526; }

.weekday, .day.empty, th, th:first-child, .callsheet-table th,
.production-call-preview th, .activity-document-table th { background: #f8f5ef; color: #655b4b; }
.day.today .day-num { background: var(--accent); border-radius: 4px; }
.event { background: #f7f3eb; border-left-color: #a79a80; border-radius: 3px; }
.event:hover { background: #eee6d8; }
.event small { color: var(--muted); }
.event.assigned, .event.programme { background: #f0f4ed; border-left-color: #75856b; }
.event.activity, .event.activity_draft { background: #f5f0e6; border-left-color: #ad946b; }
.event.reported { background: #fbf2df; border-left-color: #b89351; }
.event.needs_review, .event.programme_conflict, .event.required_conflict, .event.possible_after_replacement { background: #fff2ef; border-left-color: #a8625b; }
.event.tour, .event.tour_draft { background: #f0f3ed; border-left-color: #7c8a6f; }
.agenda-event, .agenda-event.tour-event { border-radius: 3px; grid-template-columns: 118px minmax(0,1fr) 20px; }
.agenda-time, .event .time { white-space: normal; overflow-wrap: normal; line-height: 1.5; }
.agenda-event:hover, .quiet-day { background: #fcfaf6; }
.agenda-event + .agenda-event { border-top-color: var(--line); }
.agenda-event.rehearsal { border-left-color: #ad946b; }
.agenda-event.tour-event { border-left-color: #7c8a6f; }
.agenda-arrow { color: #a28c69; }
.callsheet-table select:disabled { color: var(--muted); background: var(--wash); }
.activity-document-head { border-bottom: 3px double var(--gold-line); }
.activity-document-head h2 { font-size: 27px; }
.activity-document-status { border-color: var(--gold-line); color: #705429; }

dialog, dialog.dialog-workspace { border-radius: 6px; box-shadow: 0 18px 70px #4d392533; }
dialog.dialog-panel { border-radius: 6px 0 0 6px; }
dialog::backdrop { background: #30271d66; backdrop-filter: none; }
.dialog-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.dialog-head h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; }
.dialog-head > button { border-radius: 4px; }
.dialog-head > div, .heading > div, .next-call-info { min-width: 0; }
.actions > button, .editor-actionbar button, .heading-actions button,
.activity-block-head button, .plan-publish-actions button { white-space: normal; overflow-wrap: anywhere; }
dialog form, dialog fieldset, .form-row > label, .toolbar > label,
.actor-role-line > div, .actor-role-dates > div > span { min-width: 0; }
.section, .tour-personal-row, .actor-production { border-color: var(--line); }

@media (max-width: 1100px) {
  .app-header { padding-inline: 20px; gap: 16px; }
  .brand { gap: 12px; }
  .brand img { width: 280px; height: 48px; }
  .brand span { max-width: 130px; white-space: normal; line-height: 1.35; padding-left: 12px; }
}

@media (max-width: 760px) {
  .app-header { height: auto; min-height: 78px; padding: 12px 16px; }
  .brand img { width: 240px; height: 42px; }
  .brand span { max-width: 90px; font-size: 13px; }
  .shell { min-height: calc(100dvh - 78px); border: 0; }
  h1 { font-size: 28px; }
  .heading { padding-bottom: 18px; margin-bottom: 22px; flex-wrap: wrap; }
  .heading-actions { flex-wrap: wrap; }
  .heading-actions > .refresh-button { display: inline-flex; align-items: center; justify-content: center; }
  .agenda-event strong { font-size: 17px; }
  .agenda-event, .agenda-event.tour-event { grid-template-columns: 100px minmax(0,1fr) 14px; }
  .agenda-time { font-size: 12px; }
  dialog, dialog.wide-dialog, dialog.dialog-panel, dialog.dialog-workspace { border-radius: 0; }
  .dialog-head h2 { font-size: 24px; }
  .next-call strong { font-size: 24px; }
  .editor-actionbar .actions { flex-wrap: wrap; }
  .editor-actionbar button { flex: 1 1 150px; }
  .personal-common-call tr { border-radius: 4px; }
  body[data-viewer=staff] aside { background: var(--wash); }
  body[data-viewer=staff] #navigation { width: max-content; min-width: 100%; }
  body[data-viewer=actor] aside { background: #fff; backdrop-filter: none; }
}

@media (max-width: 700px) {
  .app-header { gap: 10px; flex-wrap: wrap; align-items: center; }
  .brand { flex: 1 1 280px; gap: 10px; }
  .brand img { width: 220px; height: 42px; }
  .brand span { padding-left: 10px; max-width: none; }
  .identity { margin-left: auto; flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .identity #identity-name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .demo-picker-fields { width: min(320px, calc(100vw - 32px)); }
  .heading > div:first-child { flex: 1 1 200px; }
  .heading-actions { max-width: 100%; }
  .segmented { flex-wrap: wrap; }
  .form-row { grid-template-columns: minmax(0,1fr); }
  .toolbar input, .toolbar > label { min-width: 0; }
  .plan-search { min-width: 0; }
  .activity-personal-row { grid-template-columns: 100px minmax(0,1fr); }
  .actor-role-line, .actor-role-dates > div { gap: 10px; }
  .tour-card-top { flex-wrap: wrap; }
  .tour-dates dd, .tour-assembly, .activity-document-meta dd { overflow-wrap: anywhere; }
  .sheet-date-picker[open] > label { width: min(320px, calc(100vw - 32px)); }
  .intake-overview { flex-wrap: wrap; gap: 18px 24px; }
}

@media (max-width: 430px) {
  .app-header { padding: 10px 12px; }
  .brand { flex-basis: 100%; gap: 12px; }
  .brand img { width: 195px; height: 38px; }
  .brand span { font-size: 13px; }
  .identity { width: 100%; justify-content: flex-end; }
  .identity #identity-name { margin-right: auto; max-width: 180px; }
  main { padding-inline: 12px; }
  h1 { font-size: 26px; }
  .heading { gap: 12px; }
  .heading-actions { width: 100%; }
  .heading-actions:has(> .refresh-button:only-child) { width: auto; }
  .heading-actions > button:not(.refresh-button) { flex: 1 1 auto; }
  .actions > button { max-width: 100%; }
  dialog, dialog.wide-dialog, dialog.dialog-panel, dialog.dialog-workspace { padding-inline: 12px; }
  .dialog-head { gap: 8px; }
  .dialog-head h2 { font-size: 23px; }
  .activity-document { padding: 12px; }
  .activity-document-head { gap: 12px; flex-wrap: wrap; }
  .activity-document-head h2 { font-size: 24px; }
  .activity-document-meta { column-gap: 10px; }
  .activity-personal-row { grid-template-columns: 1fr; gap: 6px; }
  .tour-fieldset, .tour-personal-dates { padding: 12px; }
  .month-navigation { flex-wrap: wrap; }
  .month-picker { min-width: 130px; }
  .month-navigation > button { padding-inline: 8px; }
  .plan-queue-filters { gap: 4px; }
  .plan-queue-filters button { flex: 1 1 auto; }
  .agenda-event, .agenda-event.tour-event { grid-template-columns: 90px minmax(0,1fr) 14px; }
  .repertoire-grid > .show-card { padding: 16px; }
}

@media print {
  body, main, .shell, .activity-document { background: #fff; color: #000; }
  .shell { border: 0; }
  .heading::after { content: none; }
  h1, h2, h3, .activity-document-head h2 { color: #000; }
  .activity-document-head { border-bottom: 3px double #555; }
  .activity-document-status { color: #000; border-color: #777; }
  .activity-document-table-wrap { overflow: visible; }
  .activity-document-table { display: table; table-layout: fixed; width: 100%; min-width: 0; }
  .activity-document-table thead { display: table-header-group; }
  .activity-document-table tbody { display: table-row-group; }
  .activity-document-table tr { display: table-row; margin: 0; }
  .activity-document-table th, .activity-document-table td,
  .activity-document-table td:first-child {
    display: table-cell;
    position: static;
    width: auto;
    padding: 7px 8px;
    font-size: 10pt;
  }
  .activity-document-table td::before { content: none; }
  .activity-document-meta { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .activity-document-table th { background: #f2eee6; color: #000; }
  .activity-document-table th, .activity-document-table td { border-color: #999; }
  .activity-document-table tr { break-inside: avoid; }
  .activity-document-head, .activity-document-meta { break-inside: avoid; }
  .activity-document-head h2 { font: 30px/1.2 var(--serif); }
}

/* A sole role reserves time before the personal call is published. */
.event.required { border-left-color: #9b753b; background: #faf3e7; }
.event.blocked_by_required { border-left-color: #a6a09a; background: #f3f1ee; }