/* Shared component rules for the public site.
   Phase 3c: panel chrome migrated out of styles.css.
   Phase 3e.1: the shared UI primitives (button/badge/segmented/field/notice/empty/schedule block) migrated out of the
   Why this file exists: the matrix sheet (css/matrix.css) moved into `@layer components` in Phase 3c. An unlayered rule always
   beats a layered one, so every legacy rule that used to be outranked by matrix.css by *source order* had to move into the
   same layer as well. The rules below are pure moves: declarations are copied verbatim from styles.css (and its media blocks)
   and deleted there, so the computed styles of every view are unchanged. See docs/CSS-ARCHITECTURE.md §11. */
@layer components {
  .panel { background: var(--paper-bg); border: 1px solid var(--line-border); border-radius: var(--radius); overflow: hidden; }

  .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 19px 20px 16px; border-bottom: 1px solid var(--line-border); }
  .panel-head p { font-size: var(--font-size-label); color: var(--muted-text); margin-top: 3px; }
  .panel-actions { display: flex; gap: 8px; align-items: center; font-size: var(--font-size-label); }
  .panel-actions button { font-size: var(--font-size-label); }

  .legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: var(--font-size-caption); color: var(--muted-text); padding: 13px 20px; border-bottom: 1px solid var(--line-border); }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }

  .schedule-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-border); background: var(--surface-panel); }
  .schedule-tools button, .schedule-tools select { min-height: 2.75rem; font-size: var(--font-size-body-sm); }
  .schedule-layout-switch { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
  .schedule-layout-switch button { padding: 0.5rem 0.8rem; }
  .schedule-layout-switch button[aria-pressed="true"] { background: var(--ink-bg); color: #ffffff; border-color: var(--ink-border); }

  @media (max-width: 900px), (max-height: 480px) and (orientation: landscape) {
    .panel-head { padding: 16px 14px; }
    .panel-head h2 { font-size: 1.062rem; }
    .panel-head p { font-size: var(--font-size-caption); }
    .legend { padding: 11px 14px; gap: 10px; }
  }

  /* Second compact pass, exactly as styles.css ordered it: it wins over the block above. */
  @media (max-width: 900px), (max-height: 480px) and (orientation: landscape) {
    .panel-head { padding: 14px 13px; gap: 12px; }
    .panel-head p { font-size: var(--font-size-label); }
    .panel-actions { flex-wrap: wrap; }
    .legend { font-size: var(--font-size-caption); gap: 9px; padding: 11px 13px; }
    .legend > span:last-child { display: none; }
    .schedule-tools { padding: 0.65rem 0.75rem; gap: var(--space-2); }
  }

  @media (max-width: 380px) {
    .schedule-layout-switch { width: 100%; }
    .schedule-layout-switch button { flex: 1; }
  }

  /* ==================== Phase 3e.1 — shared UI primitives ====================
     Verbs: Button, Badge, Segmented, Field, Notice, EmptyState, ScheduleBlock.
     Pure moves out of the unlayered styles.css / ui-hardening.css: declarations are copied verbatim and
     deleted there, so every view keeps the identical computed styles. Higher-specificity legacy overrides
     (e.g. `.schedule-panel .schedule .event`, `:root[data-theme="dark"] .swatch`) stay unlayered and still win.
     See docs/CSS-ARCHITECTURE.md §14. */

  /* ---- Button — sidebar group item ---- */
  .group-btn { text-align:left;background:transparent;border:0;font-size:var(--font-size-body-sm);padding:8px 12px;display:flex;align-items:center;justify-content:space-between }
  .group-btn.active { background:var(--c-f1f4f9-bg);color:var(--ink-text);font-weight:650 }
  .group-btn small { font-size:var(--font-size-caption)}

  /* ---- Button — primary action ---- */
  .primary { background:var(--blue-bg);border-color:var(--blue-border);color:#ffffff;font-size:var(--font-size-body-sm)}
  .primary:hover { background:var(--c-194abe-bg);color:#ffffff }

  /* ---- Segmented — row + button ---- */
  .switch-row { display:flex;gap:8px;align-items:center;flex-wrap:wrap }
  .seg-btn { font-size:var(--font-size-label);padding:6px 11px }
  .seg-btn.active { background:var(--blue-bg);color:#ffffff;border-color:var(--blue-border) }

  /* ---- Field — label + control ---- */
  .field:not(.mobile-scope) { display:flex;flex-direction:column;gap:5px }
  .field>span { font-size:var(--font-size-caption);color:var(--muted-text) }
  .field select,.field input { height:40px;border:1px solid var(--c-d3dbe9-border);background:var(--surface-panel);padding:6px 11px;color:var(--ink-text);min-width:0 }

  /* ---- Badge — status tag ---- */
  .tag { display:inline-block;padding:1px 6px;border-radius:5px;background:var(--c-eef2f8-bg);font-size:var(--font-size-caption);font-weight:500;white-space:nowrap }
  .tag.red { background:var(--c-fce1e6-bg);color:var(--c-9d2f45-text) }
  .tag.amber { background:var(--c-f9ecd1-bg);color:var(--c-8a5915-text) }
  .tag.blue { background:var(--c-e9f0ff-bg);color:var(--blue-text) }
  .tag.green { background:var(--c-e9f6ee-bg);color:var(--green-text) }
  .tag.purple { background:var(--c-f3e8ff-bg);color:var(--c-7e22ce-text) }
  .tag.orange { background:var(--c-ffedd5-bg); color:var(--c-c2410c-text); border:1px solid var(--c-fed7aa-border); }

  /* ---- Badge — legend swatch ---- */
  .swatch { width:10px;height:10px;border-radius:3px;background:var(--softblue-bg);border:1px solid var(--c-adc4f6-border) }
  .swatch.makeup { background:var(--c-ffd4d9-bg);border-color:var(--c-e7acb4-border) }
  .swatch.reservation { background:var(--c-f5dfb3-bg);border-color:var(--c-dabc86-border) }
  .swatch.free { background:var(--softgreen-bg);border-color:var(--c-b3d6c3-border) }
  .swatch.unknown { background:var(--c-eef0f4-bg);border-color:var(--c-d2d7df-border) }

  /* ---- Notice — banner + conflict alert ---- */
  .banner { border-left:3px solid var(--c-dca64a-border);padding:10px 13px;background:var(--softamber-bg);font-size:var(--font-size-body-sm);color:var(--c-80551c-text);border-radius:0 8px 8px 0;margin-bottom:14px }
  .conflict-alert { border-left:3px solid var(--c-d9848f-border);padding:10px 14px;margin:16px 20px 0;background:var(--softred-bg);font-size:var(--font-size-body-sm);color:var(--c-983249-text) }

  /* ---- EmptyState — empty cell ---- */
  .empty-cell { display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:73px;height:100%;gap:2px;font-size:var(--font-size-label);color:var(--c-51816d-text);border-radius:6px;background:var(--c-f6fbf8-bg) }
  .empty-cell.unknown { color:var(--c-8991a1-text);background:var(--c-f8f9fb-bg) }

  /* ---- EmptyState — empty state ---- */
  .empty-state { padding:45px 20px;text-align:center;color:var(--muted-text) }
  .empty-state strong { display:block;color:var(--ink-text);font-size:1.062rem;margin-bottom:7px }

  /* ---- ScheduleBlock — course block ---- */
  .event { width:100%;display:block;text-align:left;border:0;border-left:3px solid var(--c-90b0f4-border);border-radius:6px;padding:9px 9px 8px;background:var(--softblue-bg);color:var(--c-204781-text);margin-bottom:5px;line-height:1.5;overflow-wrap:anywhere;transition:box-shadow .15s }
  .event:last-child { margin-bottom:0 }
  .event:hover { background:var(--c-e3edff-bg);box-shadow:0 0 0 1px var(--c-9fbced-border) }
  .event.makeup { background:var(--softred-bg);color:var(--c-922d41-text);border-left-color:var(--c-df8a99-border) }
  .event.exam,.event.reservation { background:var(--softamber-bg);color:var(--c-885916-text);border-left-color:var(--c-d6ac60-border) }
  .event.dimmed { opacity:.42 }
  .event.highlight { box-shadow:0 0 0 2px var(--blue-border) }
  .event .event-title { font-size:var(--font-size-body-sm);font-weight:600;display:block }
  .event .event-time { display:block;font-size:var(--font-size-caption);font-weight:500;white-space:nowrap;margin-top:4px;font-variant-numeric:tabular-nums }
  .event .event-meta { display:block;font-size:var(--font-size-caption);margin-top:2px;opacity:.85;line-height:1.45 }

  /* ==================== Phase 3e.2 — the remaining views ====================
     The five views that were still styled by the unlayered legacy sheets (week, free rooms, exams, duty & keys,
     calendar & reference) move into the same layer as the primitives they are built from. Pure moves again:
     declarations are copied verbatim and deleted from styles.css / ui-hardening.css / css/compact.css, so the
     pages keep their computed styles. Rules that must keep winning over these stay unlayered in their original
     files: the day view's and print blocks, the two legacy-overrides exceptions, and the seven overrides listed
     in docs/CSS-ARCHITECTURE.md §15.2.
     See docs/CSS-ARCHITECTURE.md §15. */

  /* ---- Week view — styles.css ---- */
  .week-summary{width:100%;border:0;background:var(--surface-panel);min-height:86px;padding:10px 5px;text-align:left;border-radius:6px}
  .week-summary:hover{background:var(--c-f3f6fc-bg)}
  .week-summary strong{font-size:var(--font-size-body-sm);font-weight:600;display:block;margin-bottom:8px}
  .week-summary.matched{background:var(--c-edf3ff-bg);box-shadow:inset 0 0 0 2px var(--c-94b0e7-border)}
  .week-summary small{font-size:var(--font-size-caption);display:block;margin-top:5px}
  .mini-blocks{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-width:135px}
  .mini-block{height:6px;background:var(--c-dceddf-bg);border-radius:var(--radius-xs)}
  .mini-block.busy{background:var(--c-79a0ed-bg)}
  .mini-block.makeup{background:var(--c-da8c9b-bg)}
  .mini-block.reservation{background:var(--c-d3ad67-bg)}
  .mini-block.unknown{background:var(--c-e1e5eb-bg)}
  .focus-cell{box-shadow:inset 0 2px 0 var(--c-b4c9f5-border)}

  /* ---- Calendar & reference view — styles.css ---- */
  .section-space{margin-top:17px}

  /* ---- Exams view — styles.css ---- */
  .list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}
  .exam-card{border:1px solid var(--c-e7dce1-border);border-radius:11px;padding:17px;background:var(--surface-panel)}
  .exam-card .exam-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:9px}
  .exam-card h3{font-size:1.062rem;margin-bottom:9px}
  .exam-card p{font-size:var(--font-size-body-sm);margin:5px 0;color:var(--muted-text)}
  .exam-card .exam-time{font-size:var(--font-size-body-lg);color:var(--ink-text);font-weight:650;font-variant-numeric:tabular-nums}
  .exam-card button{font-size:var(--font-size-label);margin-top:11px}
  .exam-card.past{border-color:var(--line-border)}

  /* ---- Free rooms view — styles.css ---- */
  .free-form{padding:20px;border-bottom:1px solid var(--line-border);display:flex;align-items:end;gap:13px;flex-wrap:wrap}
  .quick-times{padding:12px 20px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line-border);font-size:var(--font-size-caption);color:var(--muted-text)}
  .quick-times button{padding:4px 9px;font-size:var(--font-size-caption)}
  .availability{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:13px;padding:18px}
  .room-card{border:1px solid var(--line-border);border-radius:10px;padding:16px}
  .room-card.available{border-color:var(--c-bdd9cc-border);background:var(--c-fbfefc-bg)}
  .room-card-head{display:flex;align-items:start;justify-content:space-between;gap:8px;margin-bottom:12px}
  .room-card h3{font-size:1.062rem}
  .room-card p{font-size:var(--font-size-label);color:var(--muted-text);margin-top:5px}
  .room-card .free-text{font-size:var(--font-size-body-sm);color:var(--green-text)}
  .room-card button{font-size:var(--font-size-label);margin-top:11px}
  .ranges{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
  .range{font-size:var(--font-size-caption);padding:2px 6px;background:var(--c-eff7f2-bg);color:var(--c-37765c-text);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}
  .search-summary{font-size:var(--font-size-label);color:var(--blue-text);padding:0 2px 13px}

  /* ---- Calendar & reference view — styles.css ---- */
  .reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:18px}
  .reference-box{border:1px solid var(--line-border);border-radius:10px;overflow:hidden}
  .reference-box h3{padding:13px 16px;background:var(--surface-subtle);border-bottom:1px solid var(--line-border)}
  .reference-box .content{padding:15px 16px;font-size:var(--font-size-body-sm)}
  .reference-box p+p{margin-top:10px}
  .reference-box ol,.reference-box ul{padding-left:20px;margin:4px 0}
  .reference-box li{margin:8px 0}
  .time-table{table-layout:auto;font-size:var(--font-size-body-sm)}
  .time-table th,.time-table td{padding:9px 14px;border-bottom:1px solid var(--line-border);font-weight:400}
  .time-table th{font-weight:600;background:var(--c-fbfcff-bg);white-space:nowrap}
  .source-buttons{display:flex;gap:8px;flex-wrap:wrap;padding:17px 20px}
  .source-buttons button{font-size:var(--font-size-body-sm)}
  .calendar-table{table-layout:auto;font-size:var(--font-size-body-sm)}
  .calendar-table td,.calendar-table th{padding:8px 12px;border-bottom:1px solid var(--line-border)}
  .calendar-table th{background:var(--surface-subtle);font-weight:600}
  .calendar-table .current{background:var(--softblue-bg)}
  .calendar-table button{font-size:var(--font-size-label);padding:3px 8px}
  .source-image{display:block;max-width:100%;height:auto;margin:10px auto}
  .source-text{white-space:pre-wrap;word-break:break-word;background:var(--c-f4f6fa-bg);padding:14px;border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-label);line-height:1.9;color:var(--c-485870-text)}
  .help-list{font-size:var(--font-size-body-sm);padding-left:20px;line-height:1.85}
  .help-list li{margin-bottom:9px}

  /* ---- Calendar & reference view — styles.css @ @media(max-width:1120px) ---- */
  @media(max-width:1120px) {
    .reference-grid{grid-template-columns:1fr}
  }

  /* ---- Exams view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .list-grid{grid-template-columns:1fr;padding:13px}
  }

  /* ---- Calendar & reference view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .reference-grid{padding:13px;gap:13px}
  }

  /* ---- Free rooms view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form{padding:15px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .availability{padding:13px;grid-template-columns:1fr}
  }

  /* ---- Calendar & reference view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .source-buttons{padding:14px}
  }

  /* ---- Free rooms view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .quick-times{padding:10px 14px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form .field:first-child{grid-column:1 / -1}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form .field>span{font-size:var(--font-size-label)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form input{height:44px;font-size:var(--font-size-body);width:100%;min-width:0;max-width:100%;padding:6px 8px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .free-form button{min-height:44px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .quick-times{gap:7px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .quick-times button{min-height:44px;font-size:var(--font-size-label);padding:8px 10px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .availability{grid-template-columns:minmax(0,1fr)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card,.exam-card{min-width:0;padding:14px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card .event-title{font-size:var(--font-size-body)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card .event-time{font-size:var(--font-size-body-sm)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card .event{padding:11px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card p,.exam-card p{font-size:var(--font-size-body-sm)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card .range{font-size:var(--font-size-label)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .room-card .event-meta{font-size:var(--font-size-label)}
  }

  /* ---- Calendar & reference view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .source-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:13px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .source-buttons button{font-size:var(--font-size-body-sm);padding:8px;overflow-wrap:anywhere}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .reference-grid{padding:11px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .reference-box .content{padding:13px;font-size:0.9375rem}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table th,.time-table td{font-size:var(--font-size-body-sm);padding:9px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table td:nth-child(2){white-space:nowrap}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table td:last-child{font-size:var(--font-size-caption)}
  }

  /* ---- Week view — styles.css ---- */
  .room-label-stack{min-width:0}

  /* ---- Duty & keys view — styles.css ---- */
  .duty-link{display:block;font-size:var(--font-size-caption);color:var(--blue-text);padding:5px 0;border:0;background:transparent;white-space:nowrap;margin-top:4px}
  .duty-link:hover{background:transparent;text-decoration:underline}
  .duty-notice{padding:15px 20px;border-bottom:1px solid var(--line-border);font-size:var(--font-size-body-sm);color:var(--c-6d572f-text);background:var(--c-fffaf0-bg)}
  .duty-notice p+p{margin-top:6px}
  .duty-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:14px;padding:17px 20px;border-bottom:1px solid var(--line-border)}
  .duty-toolbar .field select{min-width:145px}
  .duty-toolbar>p{flex:1;min-width:190px}
  .duty-date-heading{padding:17px 20px 0;font-size:1.062rem;font-weight:650}
  .duty-shift{padding:18px 20px}
  .duty-shift>h3{font-size:1.062rem;margin-bottom:13px}
  .duty-shift>h3 span{margin-left:7px;color:var(--muted-text);font-weight:400;font-variant-numeric:tabular-nums}
  .duty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px}
  .duty-card{border:1px solid var(--line-border);border-radius:11px;padding:16px;min-width:0}
  .duty-card>h3{font-size:1.062rem;margin-bottom:13px}
  .duty-person{font-size:0.9375rem;line-height:1.9;margin-bottom:10px}
  .duty-person p{font-size:var(--font-size-label);line-height:1.7;color:var(--muted-text);margin-top:4px}
  .duty-person.pending{border-left:3px solid var(--c-d8ae62-border);padding-left:10px}
  .duty-marker{font-size:1.062rem;color:var(--c-725625-text)}
  .duty-key{font-size:var(--font-size-label);color:var(--c-78531b-text);padding:10px 0;border-top:1px solid var(--line-border);line-height:1.8}
  .duty-away,.duty-class-note{font-size:var(--font-size-label);color:var(--muted-text);margin-top:8px;line-height:1.8}
  .duty-class-note{color:var(--c-546786-text)}
  .duty-course-list{font-size:var(--font-size-label);margin-top:12px}
  .duty-course-list summary{cursor:pointer;color:var(--blue-text)}
  .duty-course-list>div{padding:9px 0;border-bottom:1px solid var(--line-border)}
  .duty-brief{margin:15px 0;border:1px solid var(--line-border);border-radius:9px;padding:0 12px}
  .duty-brief-shift{margin:13px 0;padding-top:12px;border-top:1px solid var(--line-border)}
  .duty-brief-shift>strong,.duty-brief-shift>h3{display:block;margin-bottom:9px}
  .duty-brief .duty-people{margin-top:8px}
  .duty-brief>p{margin-bottom:10px}
  .duty-week-list{padding:16px 20px}
  .duty-week-day{margin-bottom:12px;border:1px solid var(--line-border);border-radius:10px;overflow:hidden}
  .duty-week-day>summary{padding:15px;background:var(--c-f6f8fc-bg);cursor:pointer;font-size:var(--font-size-body);font-weight:600}
  .duty-week-day>summary span{font-size:var(--font-size-label);color:var(--muted-text);font-weight:400;margin-left:8px}
  .duty-rule-details{padding:16px 20px;border-top:1px solid var(--line-border);font-size:var(--font-size-body-sm);color:var(--muted-text)}
  .duty-rule-details summary{cursor:pointer;color:var(--blue-text)}
  .duty-rule-details li{margin:9px 0}
  .duty-raw{table-layout:auto;min-width:570px;font-size:var(--font-size-body-sm)}
  .duty-raw td,.duty-raw th{border:1px solid var(--line-border);padding:12px;text-align:center;vertical-align:middle}
  .duty-raw th{background:var(--c-eff3fa-bg)}
  .duty-source-notes{font-size:var(--font-size-body-sm);margin-top:17px}
  .duty-source-notes p{margin:8px 0}

  /* ---- Duty & keys view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-link{min-height:44px;font-size:var(--font-size-label);margin:0;padding:7px 0}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-notice{padding:13px;font-size:var(--font-size-label)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar{padding:13px;gap:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar>.switch-row{grid-column:1 / -1}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar>.switch-row button{flex:1;min-height:44px;font-size:var(--font-size-body-sm)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar .field{min-width:0}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar .field select{min-width:0;width:100%;height:44px;font-size:var(--font-size-body)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar>p{grid-column:1 / -1;min-width:0}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-shift{padding:15px 13px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-card{padding:14px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-date-heading{padding:14px 13px 0;font-size:var(--font-size-body)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-week-list{padding:13px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-week-day>summary{font-size:0.9375rem;padding:14px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-week-day>summary span{display:block;margin:5px 0 0 16px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-person{font-size:var(--font-size-body)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-key,.duty-away,.duty-class-note{font-size:var(--font-size-body-sm)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-brief .duty-key{font-size:var(--font-size-label)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-rule-details{padding:13px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-course-list summary{min-height:44px;padding:8px 0}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-raw{font-size:var(--font-size-body-sm)}
  }

  /* ---- Week view — styles.css ---- */
  .time-first thead th:not(:first-child){text-align:left;padding:12px}
  .time-first thead th:first-child{width:130px;position:sticky;left:0;z-index:3}
  .time-first tbody th{width:130px;background:var(--surface-subtle)}
  .time-first .slot-label{font-size:var(--font-size-body-sm);white-space:nowrap}
  .time-first .duty-link{font-size:var(--font-size-caption);padding:2px 0}
  .time-first td{min-height:95px}
  .time-first .empty-cell{min-height:90px}

  /* ---- Duty & keys view — styles.css ---- */
  .day-duty-board{border-top:2px solid var(--line-border)}
  .day-duty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:18px}
  .day-duty-card{border:1px solid var(--line-border);border-radius:11px;overflow:hidden}
  .day-duty-card>h3{padding:12px 14px;background:var(--c-f2f5fb-bg);font-size:1.062rem;border-bottom:1px solid var(--line-border)}
  .day-duty-slot{padding:13px 14px;border-bottom:1px solid var(--line-border)}
  .day-duty-slot:last-child{border-bottom:0}
  .day-duty-time{font-size:var(--font-size-body-sm);font-weight:650;margin-bottom:10px}
  .day-duty-time span{font-size:var(--font-size-label);font-weight:400;color:var(--muted-text);margin-left:5px}
  .day-duty-slot dl{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;margin:0;font-size:var(--font-size-body-sm)}
  .day-duty-slot dt{color:var(--muted-text)}
  .day-duty-slot dd{margin:0}
  .staff-name{display:inline-block;font-weight:650;margin-right:9px}
  .key-holder{display:inline-block;background:var(--c-fff0c9-bg);color:var(--c-764b08-text);border:1px solid var(--c-e8c57e-border);border-radius:5px;padding:2px 7px;font-weight:600}
  .duty-transfer{background:var(--c-edf3ff-bg);color:var(--c-2d5899-text);padding:7px 9px;border-radius:5px;font-size:var(--font-size-label);margin-top:11px}
  .duty-pending{background:var(--c-fff8e9-bg);color:var(--c-835813-text);padding:7px 9px;border-radius:5px;font-size:var(--font-size-label);margin-top:11px}
  .day-duty-caveat{padding:0 18px 17px;color:var(--muted-text);font-size:var(--font-size-label);line-height:1.8}
  .day-duty-slot>p.small{margin-top:9px}

  /* ---- Duty & keys view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .day-duty-grid{grid-template-columns:minmax(0,1fr);padding:12px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .day-duty-slot dl{font-size:0.9375rem}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .day-duty-card>h3{font-size:1.062rem}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .day-duty-board .panel-head button{min-height:44px;font-size:var(--font-size-body-sm)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .day-duty-caveat{padding:0 13px 15px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-transfer,.duty-pending{font-size:var(--font-size-body-sm)}
  }

  /* ---- Free rooms view — styles.css ---- */
  .availability{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}

  /* ---- Duty & keys view — styles.css ---- */
  .duty-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
  .day-duty-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .day-duty-card,.day-duty-slot dd,.duty-card,.reference-box,.room-card{min-width:0;overflow-wrap:anywhere}
  .day-duty-time span,.duty-shift>h3 span{display:inline-block;margin-left:0}
  .duty-toolbar .field{flex:1 1 10rem;min-width:0}
  .duty-toolbar .field select{min-width:0;width:100%}

  /* ---- Week view — styles.css ---- */
  .time-first thead th:first-child,.time-first tbody th{width:8rem}
  .time-first .slot-label,.event .event-time,.slot-label small{white-space:normal}
  .time-first thead th:not(:first-child){padding:10px}
  .time-first tbody td{padding:6px}

  /* ---- Duty & keys view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar .field{min-width:0}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-grid,.day-duty-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .duty-toolbar select,.free-form input{height:auto;min-height:2.75rem}
  }

  /* ---- Calendar & reference view — styles.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .source-buttons{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .calendar-table td,.calendar-table th{padding:8px 6px;font-size:.8125rem;overflow-wrap:anywhere}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .calendar-table button{min-height:44px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table{table-layout:fixed}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table th{white-space:normal}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .time-table td:nth-child(2){white-space:normal}
  }

  /* ---- Duty & keys view — styles.css @ @media(max-width:400px) ---- */
  @media(max-width:400px) {
    .duty-toolbar{grid-template-columns:minmax(0,1fr)}
  }

  /* ---- Week view — ui-hardening.css ---- */
  .mini-block.software{background:var(--c-a855f7-bg)}

  /* ---- Calendar & reference view — ui-hardening.css ---- */
  .ref-hero{
    padding:22px 24px;
    background:linear-gradient(135deg, var(--surface-subtle) 0%, var(--c-edf3fc-bg) 100%);
    border-bottom:1px solid var(--line-border);
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .ref-hero-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }
  .ref-hero-title h2{
    font-size:1.3125rem;
    font-weight:750;
    color:var(--ink-text);
    letter-spacing:-0.01em;
  }
  .ref-hero-title p{
    font-size:var(--font-size-body-sm);
    color:var(--muted-text);
    margin-top:3px;
  }
  .ref-live-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--surface-panel);
    border:1px solid var(--c-bfdbfe-border);
    border-radius:var(--radius-pill);
    padding:6px 14px;
    box-shadow:0 1px 3px rgba(37,99,235,.08);
  }
  .ref-live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--c-10b981-bg);
    box-shadow:0 0 0 3px rgba(16,185,129,.2);
  }
  .ref-live-pill strong{
    font-size:var(--font-size-body-sm);
    color:var(--c-1e40af-text);
    font-weight:650;
  }
  .ref-milestones-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
  }
  .ref-milestone-card{
    background:var(--surface-panel);
    border:1px solid var(--line-border);
    border-radius:10px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:10px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .ref-milestone-card:hover{
    border-color:var(--c-93c5fd-border);
    box-shadow:0 2px 6px rgba(0,0,0,.04);
  }
  .ref-milestone-icon{
    font-size:1.375rem;
    line-height:1;
    flex-shrink:0;
  }
  .ref-milestone-body{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .ref-milestone-body strong{
    font-size:var(--font-size-label);
    color:var(--ink-text);
  }
  .ref-milestone-body span{
    font-size:var(--font-size-caption);
    color:var(--muted-text);
  }
  .ref-section{
    padding:20px 24px;
    border-bottom:1px solid var(--line-border);
  }
  .ref-section:last-child{
    border-bottom:0;
  }
  .ref-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
    flex-wrap:wrap;
    gap:8px;
  }
  .ref-section-title h3{
    font-size:1.0625rem;
    font-weight:700;
    color:var(--ink-text);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .ref-section-title span{
    font-size:var(--font-size-label);
    color:var(--muted-text);
  }
  .ref-schedule-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
  }
  .ref-period-block{
    border:1px solid var(--line-border);
    background:var(--surface-panel);
    border-radius:10px;
    overflow:hidden;
  }
  .ref-period-block-head{
    padding:10px 14px;
    background:var(--surface-subtle);
    border-bottom:1px solid var(--line-border);
    font-weight:700;
    font-size:var(--font-size-body-sm);
    color:var(--ink-text);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .ref-period-list{
    display:flex;
    flex-direction:column;
  }
  .ref-period-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 14px;
    border-bottom:1px solid var(--c-f1f4f9-border);
    font-size:var(--font-size-label);
  }
  .ref-period-row:last-child{
    border-bottom:0;
  }
  .ref-period-row .period-tag{
    font-weight:600;
    color:var(--c-374151-text);
  }
  .ref-period-row .period-time{
    font-family:inherit;
    font-variant-numeric:tabular-nums;
    color:var(--c-1e40af-text);
    font-weight:650;
  }
  .ref-period-row .period-sub{
    font-size:var(--font-size-caption);
    color:var(--muted-text);
  }
  .ref-period-intermission{
    padding:6px 14px;
    background:var(--c-fafbfc-bg);
    font-size:var(--font-size-caption);
    color:var(--c-6b7280-text);
    text-align:center;
    border-bottom:1px dashed var(--c-e5e7eb-border);
    font-weight:500;
  }
  .ref-rooms-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:14px;
  }
  .ref-room-card{
    border:1px solid var(--line-border);
    border-radius:10px;
    padding:15px;
    background:var(--surface-panel);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .ref-room-card h4{
    margin:0;
    font-size:0.9375rem;
    font-weight:700;
    color:var(--ink-text);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .ref-room-pill-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .ref-room-chip{
    font-size:var(--font-size-caption);
    padding:3px 8px;
    background:var(--surface-muted);
    border-radius:6px;
    color:var(--c-334155-text);
    font-weight:500;
  }
  .ref-rules-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .ref-rule-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:var(--font-size-body-sm);
    line-height:1.55;
  }
  .ref-rule-tag{
    padding:2px 7px;
    border-radius:5px;
    font-size:var(--font-size-caption);
    font-weight:650;
    flex-shrink:0;
    margin-top:1px;
  }
  .ref-calendar-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:var(--font-size-body-sm);
  }
  .ref-calendar-table th{
    background:var(--surface-subtle);
    padding:10px 14px;
    font-weight:650;
    color:var(--muted-text);
    border-bottom:1px solid var(--line-border);
    text-align:left;
  }
  .ref-calendar-table td{
    padding:10px 14px;
    border-bottom:1px solid var(--c-f0f3f8-border);
    vertical-align:middle;
  }
  .ref-calendar-table tr:last-child td{
    border-bottom:0;
  }
  .ref-calendar-table tr:hover td{
    background:var(--c-fcfdff-bg);
  }
  .ref-calendar-table tr.current-week td{
    background:var(--surface-info-soft) !important;
    font-weight:550;
  }
  .ref-calendar-table tr.phase-split td{
    background:var(--surface-subtle);
    font-size:var(--font-size-caption);
    font-weight:700;
    color:var(--c-475569-text);
    letter-spacing:0.04em;
    padding:7px 14px;
    border-top:1px solid var(--line-border);
    border-bottom:1px solid var(--line-border);
  }
  .ref-assets-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
  }
  .ref-asset-card{
    border:1px solid var(--line-border);
    border-radius:10px;
    padding:14px 16px;
    background:var(--surface-panel);
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:all .15s ease;
  }
  .ref-asset-card:hover{
    border-color:var(--c-93c5fd-border);
    box-shadow:0 3px 10px rgba(37,99,235,.07);
  }
  .ref-asset-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .ref-asset-icon{
    font-size:var(--font-size-title);
    line-height:1;
  }
  .ref-asset-type{
    font-size:0.6875rem;
    font-weight:700;
    padding:2px 6px;
    border-radius:var(--radius-sm);
    background:var(--surface-muted);
    color:var(--c-475569-text);
  }
  .ref-asset-name{
    font-size:0.9375rem;
    font-weight:650;
    color:var(--ink-text);
  }
  .ref-asset-desc{
    font-size:var(--font-size-caption);
    color:var(--muted-text);
    line-height:1.45;
  }
  .ref-asset-actions{
    display:flex;
    gap:8px;
    margin-top:auto;
    padding-top:6px;
  }
  .ref-asset-btn{
    flex:1;
    font-size:var(--font-size-label);
    padding:6px 10px;
    text-align:center;
    border-radius:6px;
    border:1px solid var(--line-border);
    background:var(--c-f8fafc-bg);
    color:var(--c-2563eb-text);
    font-weight:550;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    transition:background .12s, border-color .12s;
  }
  .ref-asset-btn:hover{
    background:var(--surface-info-soft);
    border-color:var(--c-bfdbfe-border);
  }

  /* ---- Calendar & reference view — ui-hardening.css @ @media(max-width:900px),(max-height:480px) and (orientation:landscape) ---- */
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .ref-hero{padding:16px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .ref-section{padding:16px}
  }
  @media(max-width:900px),(max-height:480px) and (orientation:landscape) {
    .ref-schedule-grid{grid-template-columns:1fr}
  }

  /* ---- Calendar & reference view — ui-hardening.css ---- */
  .ref-relo-card{
    border:1px solid var(--c-e9d5ff-border);
    border-radius:10px;
    background:var(--surface-panel);
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .ref-relo-summary-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .ref-relo-notice-bar{
    margin-top:10px;
    padding:10px 12px;
    border-radius:7px;
    background:var(--c-f5f3ff-bg);
    border:1px solid var(--c-ddd6fe-border);
    font-size:var(--font-size-label);
    color:var(--c-4c1d95-text);
    line-height:1.55;
  }
  .ref-relo-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding-top:4px;
  }

  /* ---- Calendar & reference view — ui-hardening.css @ @media(max-width:768px) ---- */
  @media(max-width:768px) {
    .ref-relo-summary-grid{
        grid-template-columns:1fr;
      }
  }

  /* ---- Week view — ui-hardening.css ---- */
  .time-first .empty-cell { min-height: 56px; }
  .time-first td { min-height: 0; }
  .time-first thead th:not(:first-child) { padding: 6px 8px; text-align: center; vertical-align: middle; }

  /* ---- Calendar & reference view — ui-hardening.css ---- */
  .ref-period-intermission--noon { background: var(--c-f0f7ff-bg); color: var(--c-2563eb-text); }
  .ref-period-intermission--evening { background: var(--c-fdf2f8-bg); color: var(--c-9d174d-text); }
  .ref-period-intermission--curfew { background: var(--c-fef3c7-bg); color: var(--c-92400e-text); }

  /* ---- Duty & keys view — ui-hardening.css ---- */
  .duty-course-list > summary, .duty-rule-details > summary { padding-block: 7px; }

  /* ---- Week view — css/compact.css ---- */
  .tnav-dock { display: none; }

  /* ---- Week view — css/compact.css @ @media (min-width: 901px) and (min-height: 481px) ---- */
  @media (min-width: 901px) and (min-height: 481px) {
    .table-nav { position: relative; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .table-nav.is-scrollable .table-scroll { cursor: grab; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .table-nav.is-panning, .table-nav.is-panning .table-scroll { cursor: grabbing; user-select: none; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .table-nav.is-scrollable .tnav-dock { display: flex; align-items: center; gap: 8px; position: sticky; bottom: 10px; z-index: 5; margin: 6px 16px 0; padding: 5px 12px; border: 1px solid var(--line-border); border-radius: var(--radius-pill); background: var(--paper-bg); box-shadow: 0 2px 10px color-mix(in srgb, var(--c-000000-bg) 14%, transparent); }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-arrow { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-border); border-radius: 50%; background: var(--bg-bg); color: var(--muted-text); font-size: var(--font-size-body); line-height: 1; cursor: pointer; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-arrow:hover:not(:disabled) { border-color: var(--blue-border); color: var(--blue-text); }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-arrow:disabled { opacity: 0.35; cursor: default; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-cells { position: relative; display: flex; flex: 1 1 auto; gap: 3px; min-width: 0; padding: 3px; cursor: pointer; touch-action: none; user-select: none; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-cells > i { flex: 1 1 0; min-width: 0; height: 14px; border-radius: 3px; background: var(--line-border); }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-cells > i.is-busy { background: var(--blue-border); }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-win { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 2px solid var(--blue-text); border-radius: 6px; background: var(--blue-bg); opacity: 0.45; pointer-events: none; }
  }
  @media (min-width: 901px) and (min-height: 481px) {
    .tnav-range { flex: none; min-width: 9.5em; color: var(--muted-text); font-size: var(--font-size-label); text-align: right; font-variant-numeric: tabular-nums; }
  }
}