/* v20.20: final responsive rules, after page styles.
   Size layouts by their available content width, not only the monitor width. */
#content, .title-block, .ro17-build, .ro17-build-center,
.ro17-build-workspace>*, .ro17-area-layout>*, .ro17-form-layout>* {min-width:0;max-width:100%;box-sizing:border-box}
#content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#content select,#content textarea {box-sizing:border-box;max-width:100%}
#content :where(h2,h3,p,small,.hint,.ro17-summary-list b) {overflow-wrap:anywhere}
#content .ro-mock-panel {min-width:0}

/* Festival days need room for native date/time editors, including AM/PM UIs. */
body[data-view=festival] .ro176-festival-main {container-type:inline-size;container-name:festivalmain;width:100%;min-width:0}
body[data-view=festival] .ro176-festival-columns {grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important}
@container festivalmain (max-width:1100px) {
 body[data-view=festival] .ro176-festival-columns {grid-template-columns:minmax(0,1fr)!important}
}
body[data-view=festival] .ro176-days-panel {container-type:inline-size;container-name:festivaldays;width:100%!important;box-sizing:border-box}
body[data-view=festival] .ro177-day-head {display:none!important}
body[data-view=festival] .ro176-day-card,
body[data-view=festival] .ro176-day-new-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;padding:14px!important}
body[data-view=festival] .ro176-day-card>* {min-width:0!important;grid-column:auto!important;grid-row:auto!important}
body[data-view=festival] .ro176-day-card .ro176-day-name {grid-column:1!important;grid-row:1!important}
body[data-view=festival] .ro176-day-card .ro176-day-actions {grid-column:2!important;grid-row:1!important;align-self:end;width:auto!important;justify-content:flex-end!important}
body[data-view=festival] .ro176-day-card .ro177-day-time:nth-of-type(2) {grid-column:1!important;grid-row:2!important}
body[data-view=festival] .ro176-day-card .ro177-day-time:nth-of-type(3) {grid-column:2!important;grid-row:2!important}
body[data-view=festival] .ro176-day-new-grid>label:first-child {grid-column:1/-1!important;grid-row:auto!important}
body[data-view=festival] .ro176-day-new-grid>label:nth-child(2),body[data-view=festival] .ro176-day-new-grid>label:nth-child(3) {grid-column:auto!important;grid-row:auto!important;min-width:0!important}
body[data-view=festival] .ro176-day-new-grid #addDay {grid-column:1/-1!important;grid-row:auto!important;width:auto!important;justify-self:start}
body[data-view=festival] .ro179-dt-pair {grid-template-columns:minmax(145px,1fr) minmax(110px,.8fr)!important;gap:8px!important}
body[data-view=festival] .ro179-dt-pair input,body[data-view=festival] .ro176-day-name input {font-size:16px!important;min-height:44px!important;padding:8px!important}
body[data-view=festival] .ro176-day-actions .btn {min-height:44px!important;font-size:13px!important}
body[data-view=festival] .ro176-day-actions .btn.icon {width:44px!important;min-width:44px!important;flex-basis:44px!important}
body[data-view=festival] .ro-field-label {display:block;margin-bottom:6px;color:#d3dfd9;font-size:13px}
@container festivaldays (max-width:640px) {
 body[data-view=festival] .ro176-day-card,body[data-view=festival] .ro176-day-new-grid {grid-template-columns:minmax(0,1fr)!important}
 body[data-view=festival] .ro176-day-card>*,body[data-view=festival] .ro176-day-card .ro176-day-name,body[data-view=festival] .ro176-day-card .ro176-day-actions,body[data-view=festival] .ro176-day-card .ro177-day-time:nth-of-type(2),body[data-view=festival] .ro176-day-card .ro177-day-time:nth-of-type(3),body[data-view=festival] .ro176-day-new-grid>label {grid-column:1!important;grid-row:auto!important}
 body[data-view=festival] .ro176-day-actions {order:4}
}
@container festivaldays (max-width:330px) {
 body[data-view=festival] .ro179-dt-pair {grid-template-columns:minmax(0,1fr)!important}
}

/* Shift creation: the centre column is often narrower than the viewport. */
body[data-view=build] .ro17-build-workspace {grid-template-columns:minmax(160px,.7fr) minmax(0,2fr) minmax(180px,.8fr)!important}
body[data-view=build] .ro17-build-center {container-type:inline-size;container-name:shiftbuilder}
body[data-view=build] .ro17-build .pat-slot {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"time" "desc" "needs" "kill"!important;gap:12px!important;min-width:0!important}
body[data-view=build] .ro17-build .pat-slot>* {grid-column:auto!important;min-width:0!important;max-width:100%!important}
body[data-view=build] .ro-pattern-time {display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;gap:8px!important;min-width:0!important}
body[data-view=build] .ro-pattern-time label {min-width:0!important}
body[data-view=build] .ro-pattern-time input {width:100%!important;min-width:0!important;font-size:16px!important;min-height:44px!important}
body[data-view=build] .patKill {justify-self:end}
body[data-view=build] .ro-pattern-needs>div {display:flex!important;flex-wrap:wrap!important;gap:10px!important}
body[data-view=build] .ro17-build-reviewbar {display:flex!important;flex-wrap:wrap!important;gap:12px!important}
body[data-view=build] .ro17-build-reviewbar>div {flex:1 1 240px;min-width:0}
body[data-view=build] .ro17-panel-title {flex-wrap:wrap;gap:10px}
@media(max-width:1200px){
 body[data-view=build] .ro17-build .ro17-build-workspace {grid-template-columns:minmax(0,1fr)!important}
 body[data-view=build] .ro17-build-days,body[data-view=build] .ro17-build-summary {position:static!important;width:auto!important}
 body[data-view=build] .ro17-build-summary {grid-column:auto!important}
}
@container shiftbuilder (max-width:320px){body[data-view=build] .ro-pattern-time {grid-template-columns:minmax(0,1fr)!important}body[data-view=build] .ro-pattern-time>span {display:none}}

/* Form order arrows must retain separate touch targets. */
body[data-view=form] .ro173-pos-cell {grid-template-columns:56px auto!important;gap:8px!important}
body[data-view=form] .ro175-move-buttons {grid-column:1/-1;display:flex!important;justify-content:flex-start!important;gap:8px!important}
body[data-view=form] .ro175-move-buttons .btn.icon {width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px}
body[data-view=form] .ro173-pos-cell select {width:56px!important;min-width:56px!important;min-height:44px!important}
body[data-view=form] .ro173-field-flags {flex-wrap:wrap!important}
body[data-view=admin] .ro17-inline-add,body[data-view=admin] .ro17-head-actions {flex-wrap:wrap!important}
body[data-view=admin] .ro17-inline-add>* {min-width:0;max-width:100%;box-sizing:border-box}

/* Long headings and native widgets should fit without zooming. */
@media(max-width:600px){
 .topbar>.row:first-child {grid-template-columns:minmax(0,1fr)!important}
 .topbar .menu-toggle {justify-self:start}
 .topbar .title-block h2,#title {font-size:26px!important;line-height:1.2!important;word-break:normal!important;hyphens:auto;overflow-wrap:anywhere!important}
 .topbar .title-block>.row {width:100%!important}
 body[data-view=plan] .ro-plan-tools-v13 {grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"area" "day" "suggest"!important;gap:12px!important}
 body[data-view=plan] .ro-plan-suggest {justify-self:stretch!important;width:100%!important;min-height:44px!important}
 #content .ro17-panel-title,#content .ro-section-intro {flex-wrap:wrap!important;gap:10px}
 #content .ro17-head-actions {flex-wrap:wrap!important}
 #content input[type=date],#content input[type=time],#content input[type=datetime-local] {min-height:44px!important;font-size:16px!important}
 .modal {width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box!important;padding:16px!important;overflow-x:hidden!important;overflow-y:auto!important}
 .modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea {max-width:100%!important;min-width:0;box-sizing:border-box}
 .modal .row {flex-wrap:wrap!important;gap:10px}
}

body[data-view=festival] .ro176-festival-col {min-width:0!important;width:100%!important}
body[data-view=admin] .ro17-inline-add {display:flex!important;width:100%;gap:8px}
body[data-view=admin] .ro17-inline-add input {flex:1 1 170px;width:auto!important}
body[data-view=profil] .ro-profile-grid {grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
body[data-view=profil] .ro-profile-grid>* {min-width:0;box-sizing:border-box}
body[data-view=profil] .ro-profile-form .ro-form-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
body[data-view=profil] .ro-profile-form label {min-width:0}
@media(max-width:1000px){body[data-view=profil] .ro-profile-grid {grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:820px){
 body[data-view=rules] .ro17-rule-table .ro17-rule-tr {grid-template-columns:minmax(0,1fr)!important;gap:8px!important;position:relative;padding-right:32px!important}
 body[data-view=rules] .ro17-rule-table .ro17-rule-tr>span {display:block!important;white-space:normal!important;overflow-wrap:anywhere}
 body[data-view=rules] .ro17-rule-table .ro17-rule-tr>span:last-child {position:absolute;right:12px;top:12px}
 body[data-view=rules] .ro17-rule-table .ro17-rule-tr>span:nth-child(3)::before {content:attr(data-mobile-label) ": ";color:var(--muted)}
 body[data-view=rules] .ro17-rule-table.groups .ro17-rule-tr>span:nth-child(3)::before {content:attr(data-mobile-label) ": "}
 body[data-view=rules] .ro17-rule-table.groups .ro17-rule-tr>span:nth-child(4)::before {content:attr(data-mobile-label) ": ";color:var(--muted)}
}

/* Native controls retain legible text and visible calendar/clock affordances. */
input,select,textarea {color-scheme:dark}
body[data-view=build] .ro-pattern-time,body[data-view=admin] .ro-pattern-time {grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))!important}
body[data-view=build] .ro-pattern-time>span,body[data-view=admin] .ro-pattern-time>span {display:none!important}
body[data-view=festival] .ro176-day-actions .btn:not(.icon) {flex:0 1 auto!important;width:auto!important}
.ro-table-scroll-tools {display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--muted);font-size:13px}
.ro-table-scroll-tools[hidden] {display:none!important}
.ro-table-scroll-tools>span {flex:1}
.ro-table-scroll-tools .btn {min-width:44px!important;min-height:44px!important}
@media(pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,textarea {font-size:16px!important}}

body[data-view=admin] .ro17-subhead {flex-wrap:wrap!important;gap:12px}
body[data-view=admin] .ro17-subhead>div {min-width:0;max-width:100%}
body[data-view=build] .ro17-build:is([data-step="2"],[data-step="3"],[data-step="4"]) .ro17-build-workspace {grid-template-columns:minmax(0,1fr) 280px!important}
body[data-view=build] .ro17-area-pick-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important}
@media(max-width:1200px){body[data-view=build] .ro17-build:is([data-step="2"],[data-step="3"],[data-step="4"]) .ro17-build-workspace {grid-template-columns:minmax(0,1fr)!important}}
/* Desktop sheets retain a separate body; mobile person cards scroll as a whole. */
.modal.sheet {padding:0!important;overflow:hidden!important;max-height:calc(94dvh - var(--keyboard-inset,0px))!important}
.modal.sheet>.sheet-body {min-height:0;flex:1 1 auto}
.modal.sheet>.ro-person-hero {flex-shrink:0}
.ro-person-pager {grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);flex-wrap:nowrap!important}
.ro-person-pager .btn {min-width:0!important;white-space:normal;min-height:44px!important}
.modal.sheet>.ro-save-dock {position:relative!important;margin-top:0;flex-shrink:0}
@media(max-width:600px){
 .ro-person-hero {padding:10px!important;gap:8px!important}
 .ro-person-identity h3 {font-size:18px!important;overflow-wrap:anywhere}
 .ro-person-quickstats {display:flex!important;flex-wrap:wrap!important;gap:6px!important}
 .ro-person-quickstats>span {min-width:0!important;padding:6px!important;flex:1}
 .ro-person-quickstats b {font-size:15px!important}
 .ro-person-quickstats small {font-size:10px!important}
 .ro-person-hero-actions {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 .ro-person-hero-actions .btn {min-width:0!important;min-height:44px!important;padding:6px!important;font-size:12px!important;white-space:normal!important}
 .ro-person-pager {margin-top:0;gap:6px!important}
 .ro-person-pager .btn {font-size:12px!important;padding:6px!important}
 .modal.sheet>.ro-save-dock {padding:8px;gap:6px}
 .modal.sheet>.ro-save-dock .btn {font-size:13px!important;padding:8px!important}
}

/* A single scroll surface frees the phone viewport from the tall person header. */
@media(max-width:900px){
 .modal.sheet.ro-person-card {display:block!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0!important}
 .modal.sheet.ro-person-card>.ro-person-hero {position:static!important;flex:none}
 .modal.sheet.ro-person-card>.sheet-body {overflow:visible!important;max-height:none!important;flex:none}
 .modal.sheet.ro-person-card>.ro-save-dock {position:sticky!important;bottom:0;margin:0;border-radius:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));flex-wrap:nowrap}
 .modal.sheet.ro-person-card>.ro-save-dock:not(.is-dirty) {display:none!important}
 .modal.sheet.ro-person-card>.ro-save-dock .ro-draft-status {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;flex-basis:auto}
 .modal.sheet.ro-person-card>.ro-save-dock .btn {flex:1 1 0;min-width:0;min-height:44px!important}
}

.reg-page .reg-shell,.reg-page .reg-hero,.reg-page .brand>div {min-width:0;max-width:100%;box-sizing:border-box}
.reg-page .brand {flex-wrap:wrap}
.reg-page h1 {font-size:clamp(24px,6vw,40px);overflow-wrap:anywhere}
.reg-page :where(p,li,h2) {overflow-wrap:anywhere}
.reg-page input,.reg-page select,.reg-page textarea {min-width:0;max-width:100%}

body.reg-page .reg-shell {width:100%}
.ro-table-scroll-tools,body[data-view=rules] .ro17-rule-table .ro17-rule-tr>span::before {color:#b2c0bb}
/* Public boards also fit portrait screens; ticker and day rotation are preserved. */
.display .board-head {grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:8px}
.display .banner-flank {max-width:100%;width:100%;height:auto;max-height:86px}
.display h1,.display .day-title {font-family:inherit;overflow-wrap:anywhere}
.display .board-head-center {min-width:0}
@media(max-width:600px){
 .display .board-head {padding:10px;min-height:90px;grid-template-columns:minmax(0,1fr)}
 .display .banner-flank {display:none}
 .display h1,.display .day-title {font-size:24px;line-height:1.15}
 .display .board-ticker-row {display:grid;grid-template-columns:minmax(0,1fr)}
 .display .board-swap-row .board-label-ghost {display:none}
 .display .ov-pane {overflow-y:auto;overscroll-behavior:contain}
 .display .ov-row {grid-template-columns:minmax(0,1fr);flex:none;overflow:visible;gap:8px}
 .display .ov-row h3 {white-space:normal;overflow-wrap:anywhere}
 .display .ov-slots {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));height:auto;min-height:160px}
 .display .ov-slot {min-height:160px}
}
@media print{.ro-table-scroll-tools {display:none!important}}
/* The application uses a dark UI even when the device prefers light mode.
   Keep inherited legacy colour variables consistent with those surfaces. */
body:not(.reg-page),body:has(.reg-form) {
 --bg:#071011;--bg2:#0d1718;--bg3:#111d1e;--bg4:#162425;
 --text:#f4f1e8;--muted:#b2c0bb;--gold:#e4c56a;--gold2:#d6ad4d;
 --line:rgba(207,173,91,.18);--line2:rgba(207,173,91,.3);
 color-scheme:dark;
}
body.display {background:#071011;color:#f4f1e8}
.modal.sheet .dossier-sec h4 {color:#e4c56a}