/* Shared controls and data views. Labels and inputs stay readable on small screens. */
:root{
  --ink:#302b2c;--muted:#625b56;--accent:#8c243e;--accent-dark:#6c172e;
  --line:#ded6ce;--soft:#f5f0ea;--paper:#fff;--blue:#f3eee8;--wine:#8c243e;
  color:var(--ink);background:#faf8f5;font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-synthesis:none;font-size:16px;
}
*{box-sizing:border-box}body{margin:0;line-height:1.65}h1,h2,h3,h4,p{margin:0}
h1,h2{font-size:32px;line-height:1.5;font-weight:700}h3{font-size:20px;line-height:1.6}h4{font-size:18px}
p{line-height:1.8}small{font-size:13px}a{color:var(--accent);text-underline-offset:4px}
button,input,select,textarea{font:inherit;color:inherit;border:1px solid #b7aba1;background:white;border-radius:5px;min-height:48px;padding:11px 14px;max-width:100%}
button{cursor:pointer;line-height:1.5;touch-action:manipulation}
button:hover{background:#fbf0f3;border-color:var(--accent)}
button:disabled{cursor:default;background:#eeeae6;border-color:#d9d1ca;color:#736a63}
.primary{background:var(--accent);border-color:var(--accent);color:white;font-weight:700;padding-inline:24px}
.primary:hover{background:var(--accent-dark);color:white}.primary:disabled{background:#e7e0da;color:#766d66;border-color:#e7e0da}
.wide{width:100%}:focus-visible{outline:3px solid #ad7c31;outline-offset:3px}
[hidden]{display:none!important}.muted,.list-note,.table-footnote,.subtle-notice{color:var(--muted);font-size:14px;line-height:1.85}
.eyebrow{font-size:14px;color:var(--accent);font-weight:600;letter-spacing:.06em;margin-bottom:8px}
.skip{position:fixed;left:16px;top:-90px;background:white;padding:14px;z-index:90}.skip:focus{top:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:30px 0}
.page-heading h2{margin-bottom:10px}.page-heading p:not(.eyebrow){font-size:16px;color:var(--muted)}
.page-heading h1:focus,.page-heading h2:focus{outline:none}
.heading-aside{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.heading-aside strong{font-size:38px}.heading-aside span{font-size:14px}
label{display:block;margin:16px 0 8px;font-size:15px;font-weight:600;line-height:1.7}
label input,label select,label textarea{display:block;width:100%;min-width:0;margin-top:6px}
input,select,textarea{font-size:16px}textarea{resize:vertical;font-weight:400}select{text-overflow:ellipsis;max-width:100%}
.inline-filters{display:flex;gap:20px;align-items:center}
.inline-filters label{display:flex;align-items:center;gap:12px;margin:0;font-size:15px}
.inline-filters select{width:auto;min-width:180px;margin:0}
.short-toolbar{padding:18px 0;border-block:1px solid var(--line)}
.pay-note{font-size:15px;margin:18px 0;color:var(--muted)}.pay-note strong{color:var(--ink)}.pay-note>span{margin-left:18px;display:inline-block}
.table-intro{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:14px}
.table-intro>p{font-weight:600}
.matrix-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.matrix-legend>span{display:flex;align-items:center;gap:6px}.matrix-legend i{width:12px;height:12px;border:1px solid #a99b90}
.legend-open{background:white}.legend-selected{background:var(--accent)}.legend-none{background:#ece6df}
.card,.recruitment-group{background:white;border:1px solid var(--line);border-radius:8px;padding:26px;margin-bottom:24px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.group-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.group-heading>div{display:flex;align-items:center;gap:12px;min-width:0}.group-heading h3{font-size:20px}
.group-store{display:inline-block;background:#f2e3e8;color:var(--accent);font-weight:700;font-size:14px;padding:3px 10px;border-radius:3px;white-space:nowrap}
.group-meta{font-size:13px;color:var(--muted);white-space:nowrap}.group-meta strong{font-size:15px;margin-right:10px}
.group-footnote{display:flex;justify-content:space-between;gap:16px;margin-top:12px;color:var(--muted);font-size:13px}.group-footnote>span:last-child{white-space:nowrap}
.group-scroll,.scroll{overflow:auto;border:1px solid #d8cfc6;border-radius:4px;background:white;overscroll-behavior-x:contain}
.matrix{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:14px}
.matrix th,.matrix td{border-right:1px solid #e7e0d9;border-bottom:1px solid #e7e0d9;padding:0;vertical-align:top}
.matrix tr>*:last-child{border-right:0}.matrix tbody tr:last-child>*{border-bottom:0}
.matrix thead th{background:var(--blue);font-size:16px;padding:12px 4px;text-align:center;vertical-align:middle}
.matrix thead th small{display:block;font-size:13px}.matrix thead th.saturday{color:#315c86}.matrix thead th.sunday{color:#984052}
.matrix .sticky-column{position:sticky;left:0;z-index:2;width:220px;background:#fffdf9;text-align:left}
.matrix thead .sticky-column{background:#e9e0d7;padding:12px 14px;z-index:3;font-size:13px}
.matrix tbody .sticky-column{padding:16px 14px;font-weight:400;box-shadow:2px 0 5px #3920260a}
.row-heading{display:flex;align-items:flex-start;gap:10px}.row-number{font-size:24px;font-weight:700;color:var(--accent);min-width:42px}
.row-content{min-width:0}.row-content>strong{font-size:14px;display:block;line-height:1.7;margin-bottom:6px}
.row-time{font-size:16px;display:block;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row-content>small{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.row-details summary{font-size:14px;color:var(--accent);padding:10px 0;cursor:pointer;min-height:44px}
.row-details p{font-size:13px;margin:6px 0;overflow-wrap:anywhere}
.slot-cell,.manage-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;min-height:150px;padding:16px 7px;border:0;border-radius:0;background:white}
.slot-cell>strong{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}.slot-cell>small{font-size:13px;color:var(--muted)}
.cell-label{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;font-weight:600}.selection-mark{font-size:18px}
.slot-cell:hover{background:#fff1f3;box-shadow:inset 0 0 0 1px #b75f75}
.slot-cell[aria-pressed=true]{background:var(--accent);color:white;box-shadow:inset 0 0 0 2px white}
.slot-cell[aria-pressed=true] .cell-label,.slot-cell[aria-pressed=true]>small{color:white}
.slot-cell:disabled{background:#eeeae6;color:#6d625b}.slot-cell:disabled .cell-label{color:#6d625b}
.cell-exception,.exception-text{color:var(--wine)!important}.slot-cell[aria-pressed=true] .cell-exception{color:white!important}
.no-slot{background:#f3eee8;text-align:center;vertical-align:middle!important}.no-slot>span{font-size:13px;color:#756a62}
.matrix.cols-3{min-width:700px}.matrix.cols-4{min-width:860px}.matrix.cols-5{min-width:1020px}.matrix.cols-7{min-width:1340px}
.matrix button:focus-visible{outline-offset:-3px}.table-footnote{margin:0 0 24px}
.count{font-size:20px;color:var(--accent);margin-left:8px}
.text-button{background:transparent;color:var(--accent);border:0;text-decoration:underline;text-underline-offset:4px;padding:10px 0;font-size:14px}
.text-button:disabled{background:transparent}.remove-button{min-height:44px;padding:8px 12px;font-size:14px}
.selected-card{background:white;border:1px solid var(--line);border-radius:6px;padding:24px;margin:20px 0}
.selected-list{list-style:none;margin:0;padding:0}.selected-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.selected-list li:last-child{border:0}.selected-list strong{font-size:16px}.selected-list span,.selected-list small{display:block;margin-top:5px;font-size:14px;color:var(--muted)}
.selection-bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(940px,calc(100% - 40px));z-index:25;background:var(--accent);color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;border-radius:8px;box-shadow:0 5px 22px #39202630}
.selection-bar .primary{background:white;color:var(--accent);border-color:white;min-width:220px}
#shortSummary{border:0;background:transparent;color:white;font-size:15px;text-decoration:underline;text-underline-offset:5px;padding:5px 0}
.filter-card{border:1px solid var(--line);border-radius:8px;background:#f2ece5;padding:20px 24px;margin-bottom:20px}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.filter-grid label{margin:0}
.filter-disclosure>summary{display:none}.filter-footer{margin:16px 0 0;font-size:15px}.list-note{margin-bottom:20px}
.course-number{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);min-width:0}
.course-number b{display:grid;place-items:center;min-width:38px;height:38px;background:#f3e5e9;border-radius:50%;color:var(--accent);font-size:17px}
.course-location{color:var(--muted);font-size:14px;margin:6px 0 0}
.course-keyfacts{display:grid;grid-template-columns:1.4fr 1fr .7fr;gap:24px;margin:22px 0}
.course-keyfacts p{border-left:2px solid var(--line);padding-left:14px;min-width:0}
.course-keyfacts span{display:block;color:var(--muted);font-size:14px;margin-bottom:5px}
.course-keyfacts strong{display:block;font-size:18px;overflow-wrap:anywhere}.course-keyfacts p:last-child strong{font-size:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.tags>span{font-size:13px;background:#f5f0ea;border-radius:3px;padding:4px 10px;color:#5e544d}
.course-accordion{border-block:1px solid var(--line);margin-top:18px}
.course-accordion>summary,.day-conditions>summary{min-height:48px;padding:12px 0;font-size:15px;color:var(--accent);cursor:pointer}
.course-accordion[open]{padding-bottom:14px}.course-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}
.course-actions .primary{min-width:220px}.course-actions p{max-width:50%}
.status,.badge,.vacancy{display:inline-block;padding:4px 10px;background:#f7eee7;border-radius:4px;font-size:13px;color:#5c4a3e;line-height:1.7}
.vacancy.is-open{background:#edf4ee;color:#28533b}.vacancy.is-muted{background:#eeeae6;color:#655d57}.pending{background:#faf0df;color:#79551d}
.detail-list{margin:12px 0}.detail-list>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;border-bottom:1px solid var(--line);padding:11px 0;font-size:15px}
.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.lookup-form{display:flex;gap:18px;align-items:flex-end}.lookup-form label{flex:1}.lookup-form button{margin-bottom:8px;min-width:210px}
.lookup-card h3{display:inline}.section-number{font-size:16px;color:var(--accent);margin-right:12px}.assignment-summary{margin-top:18px}.assignment-summary p{margin-top:8px}
.rule-note{background:#f5eee6;padding:14px;border-radius:4px;font-size:15px;margin-bottom:12px}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}
.calendar-toolbar button{width:48px;padding:8px}.calendar{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:5px}
.calendar th{font-size:15px;padding:8px 0}.calendar th:first-child{color:#984052}.calendar th:last-child{color:#315c86}.calendar td{padding:0}
.calendar-day{width:100%;min-height:86px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:8px 2px}
.calendar-day strong{font-size:22px}.calendar-day small{font-size:13px;line-height:1.4;white-space:nowrap}
.calendar-day[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}.calendar-day:disabled{border-color:#eee9e3;background:#f1eeea;color:#82786f}
.calendar-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0;font-size:14px}.date-chips{display:flex;flex-wrap:wrap;list-style:none;gap:10px;padding:0;margin:0 0 20px}
.date-chips li{background:#f4e7ec;display:flex;align-items:center;gap:8px;padding-left:12px;border-radius:4px;font-size:15px}.date-chips button{border:0;background:transparent;min-width:44px;padding:8px;font-size:20px;color:var(--accent)}
dialog{border:0;box-shadow:0 15px 80px #39202633;border-radius:10px;padding:30px;width:680px;max-width:calc(100% - 32px);max-height:90dvh;overflow-y:auto;color:var(--ink)}
dialog::backdrop{background:#30242688}dialog h2{font-size:24px;margin-bottom:16px}dialog>p{font-size:15px;color:var(--muted);margin:12px 0}
.dialog-heading{border-bottom:1px solid var(--line);margin-bottom:18px}.dialog-heading .eyebrow{display:block}
.dialog-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-30px;background:white;padding:20px 0 5px;margin-top:20px}
.dialog-actions button{white-space:normal}.review-item{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.review-item h3{font-size:18px}.subtle-notice{margin-top:20px}
#message:empty{display:none}#message{background:#f5e9ed;border-left:3px solid var(--accent);padding:16px 20px;margin:16px 0;font-size:15px}
.empty{background:white;border:1px dashed var(--line);border-radius:6px;padding:30px 20px;text-align:center;color:var(--muted)}
.button-link{display:inline-flex;justify-content:center;align-items:center;min-height:48px;text-decoration:none;border-radius:4px;padding:12px 20px}
.manual-registration{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}#recruitMessage:not(:empty){background:#f1e7e9;padding:10px}#recruitRoster{margin-top:20px}
.roster-list{margin:15px 0}.roster-list>div{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.roster-list small{display:block;margin-top:4px}
.management-counts{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0}.roster-person,.vacant-line{display:block;font-size:13px}.cell-action{color:var(--accent);text-decoration:underline}
.admin-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:16px 0}.admin-tools label{min-width:220px}.admin-tools button{margin-bottom:8px}
.admin-table{width:100%;min-width:960px;border-collapse:collapse;font-size:14px}.admin-table th,.admin-table td{padding:14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table thead{background:#f1ecee}.admin-table tbody th{font-weight:400}.record-note{max-width:240px;overflow-wrap:anywhere;white-space:pre-wrap}
.mobile-records{display:none}.record-card{border-bottom:1px solid var(--line);padding:20px 0}
.cleanup-row{display:flex;align-items:center;justify-content:space-between;gap:25px}.quiet-danger{color:#8b2640;border-color:#b57988}
@media(max-width:1000px){
  .group-heading{flex-direction:column;align-items:flex-start}.course-keyfacts{grid-template-columns:1fr 1fr}.course-keyfacts p:last-child{grid-column:1/-1}
}
@media(max-width:650px){
  h2{font-size:25px}h3{font-size:19px}.page-heading{margin:22px 0;gap:12px;align-items:flex-start}
  .page-heading h2{font-size:25px;line-height:1.55;margin-bottom:8px}.page-heading p:not(.eyebrow){font-size:15px}
  .eyebrow{font-size:13px}.heading-aside{display:none}
  .inline-filters{gap:12px;align-items:flex-end;width:100%}.inline-filters label{display:block;flex:1;min-width:0;font-size:14px}
  .inline-filters select{width:100%;min-width:0;font-size:16px;margin-top:5px;padding:10px}.short-toolbar{padding:14px 0}
  .pay-note{font-size:14px;margin:14px 0}.pay-note>span{display:block;margin:3px 0 0}
  .table-intro{font-size:14px;flex-wrap:wrap;gap:8px;padding:14px 0}.matrix-legend{font-size:12px;gap:12px}
  .card,.recruitment-group{padding:20px 16px;margin-bottom:18px}.group-heading>div{flex-wrap:wrap;gap:8px}.group-heading h3{font-size:19px}
  .group-meta{white-space:normal}.group-meta strong{font-size:14px}.group-footnote{font-size:12px;flex-wrap:wrap;gap:5px}
  .matrix .sticky-column{width:148px}.matrix tbody .sticky-column{padding:12px 10px}.matrix thead .sticky-column{font-size:12px;padding:10px}
  .row-heading{display:block}.row-number{font-size:21px;margin-bottom:5px;display:block}.row-content>strong{font-size:14px}.row-time{font-size:15px}
  .row-content>small{font-size:12px}.row-details summary{font-size:13px}.slot-cell{min-height:160px}.slot-cell>strong{font-size:16px}
  .matrix.cols-3{min-width:628px}.matrix.cols-4{min-width:788px}.matrix.cols-5{min-width:948px}.matrix.cols-7{min-width:1268px}
  .selected-card{padding:18px 14px}.selected-list{font-size:15px}.selected-list strong{font-size:15px}.selected-list span,.selected-list small{font-size:14px}
  .selection-bar{bottom:0;left:0;transform:none;width:100%;border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px}
  .selection-bar .primary{min-width:0;flex:1;padding:12px 10px;font-size:16px}#shortSummary{font-size:13px;max-width:112px;text-align:left}
  .filter-card{padding:0 16px}.filter-grid{grid-template-columns:1fr;gap:14px}.filter-grid label{font-size:15px}
  .filter-disclosure>summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:16px;list-style:none}
  .filter-disclosure>summary:after{content:"＋";font-size:24px}.filter-disclosure[open]>summary:after{content:"−"}.filter-disclosure .filter-grid{padding-bottom:18px}
  .filter-footer{margin:0;padding-bottom:8px;font-size:14px}.course-number{font-size:13px;gap:8px}.course-number b{min-width:32px;height:32px}
  .course-card h3{font-size:20px}.course-keyfacts{grid-template-columns:1fr;gap:16px;margin:20px 0}.course-keyfacts p:last-child{grid-column:auto}
  .course-keyfacts strong{font-size:17px}.course-actions{flex-direction:column;align-items:stretch;gap:10px}.course-actions p{max-width:none}.course-actions .primary{width:100%;min-width:0}
  .detail-list>div{grid-template-columns:76px minmax(0,1fr);gap:12px;font-size:15px}
  .lookup-form{display:block}.lookup-form button{width:100%;margin:8px 0;min-width:0}
  .calendar-card{padding:18px 8px}.calendar-card>.section-heading,.calendar-card>.muted{padding-inline:6px}
  .calendar{border-spacing:3px}.calendar-day{min-height:74px;padding:6px 1px}.calendar-day strong{font-size:20px}.calendar-day small{font-size:11px}
  .calendar-legend{font-size:13px;gap:6px 12px}.rule-note{font-size:14px;padding:12px}.calendar-toolbar{padding-inline:6px}
  dialog{padding:24px 18px;max-width:calc(100% - 20px)}dialog h2{font-size:22px}.dialog-actions{bottom:-24px;gap:8px;flex-wrap:wrap}.dialog-actions button{flex:1;padding-inline:10px;font-size:15px}
  .admin-tools{display:block}.admin-tools label{min-width:0}.admin-tools button{width:100%;margin-top:8px}
  .desktop-records{display:none}.mobile-records{display:block}.cleanup-row{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Controls stay distinct from the quieter, decorative panel borders. */
input,select,textarea{border-color:#887d82}
input::placeholder,textarea::placeholder{color:#625b56;opacity:1}
.row-info-button,.table-heading-compact{display:none}
.recruitment-help{font-size:14px;color:var(--muted);margin:8px 0}
.recruitment-help>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px}
.recruitment-help>summary::after{content:'＋';color:var(--accent)}
.recruitment-help[open]>summary::after{content:'−'}
#rowInfoDialog .detail-list>div{grid-template-columns:110px minmax(0,1fr)}
@media(max-width:650px){
  .matrix[class*="cols-"]{min-width:0;width:max-content;table-layout:auto}
  .matrix .sticky-column{width:64px;min-width:64px;max-width:64px}
  .matrix tbody .sticky-column,.matrix thead .sticky-column{padding:8px 4px;text-align:center}
  .matrix th:not(.sticky-column),.matrix td{width:160px;min-width:160px}
  .matrix .row-content,.table-heading-full{display:none}
  .table-heading-compact{display:inline}
  .matrix .row-number{font-size:17px;min-width:0;overflow-wrap:anywhere}
  .row-info-button{display:block;min-height:44px;width:52px;margin:4px auto 0;padding:8px 2px;font-size:14px;color:var(--accent);border-color:#a97a87;background:white}
  #rowInfoDialog .detail-list>div{grid-template-columns:86px minmax(0,1fr)}
}

