/* Shared rhythm; layout-specific grids and scrolling remain owned by their sections. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--control-radius:12px;--panel-radius:20px}
.person-colour{--person-hue:205;background:hsl(var(--person-hue) 48% 88%)!important;color:hsl(var(--person-hue) 55% 25%)!important;border:2px solid hsl(var(--person-hue) 48% 52%)!important;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;object-fit:cover;overflow:hidden;font-weight:650}
[data-theme=night] .person-colour{background:hsl(var(--person-hue) 32% 27%)!important;color:hsl(var(--person-hue) 65% 90%)!important;border-color:hsl(var(--person-hue) 48% 65%)!important}
.person-colour img{width:100%;height:100%;object-fit:cover}.person-avatar{width:36px;height:36px;font-size:13px;vertical-align:middle}.chat-author{display:flex;align-items:center;gap:8px}.chat-author .person-avatar{width:28px;height:28px;font-size:11px}
.main .page-title{gap:16px;margin-bottom:24px}.main .section-space{margin-top:24px}.main .stack{gap:16px}.main .card{padding:24px}.main .row,.modal-body .row{gap:8px}.main .row.between{gap:16px}.main .form-grid,.modal-body .form-grid{gap:16px}.field{gap:4px}.field input,.field select,.field textarea{margin-top:0}.form-grid .field{min-width:0}.main .field label,.employee-field label{margin-bottom:4px}.main .btn,.modal-foot .btn{min-height:44px;border-radius:var(--control-radius)}
.modal-head,.modal-body,.modal-foot{padding:16px 24px}.modal-head{gap:16px}.modal-foot{gap:8px;flex-wrap:wrap}.modal-body .form-grid>.full{grid-column:1/-1}.modal-body .error:empty{display:none}.modal-body .error{margin:12px 0 0}.modal-foot .danger{margin-right:auto}
main>article,main>form.card{padding:24px;margin:24px 0}main>nav:not(.portal-header-actions){gap:8px}main label{gap:4px}main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main select,main textarea{min-height:44px}main textarea{line-height:1.5}main th,main td{padding:12px 16px;vertical-align:top}.table-wrap,.employee-table-wrap{max-width:100%;overflow:auto}.main .table-wrap th,.main .table-wrap td{padding:12px 16px}.main h1,.main h2,main h1,main h2{overflow-wrap:anywhere}
.team-chat{gap:16px}.conversation-list,.conversation-pane,.chat-details-panel{padding:16px;min-width:0}.conversation-list>.field,.conversation-list>.row{margin-top:16px}.conversation-item{padding:12px;gap:8px}.conversation-pane>header{gap:12px;flex-wrap:wrap}.conversation-pane>header h2{margin:0;overflow-wrap:anywhere}.chat-message-search{display:grid;gap:4px;margin:16px 0}.chat-message{padding:12px 16px}.chat-message p{margin:8px 0}.chat-compose{gap:12px;padding-top:16px}.chat-compose .field{flex:1;min-width:0;margin:0}.chat-compose textarea{min-height:76px}.chat-details-panel h4{margin:24px 0 8px}.chat-details-panel ul{padding-left:0;list-style:none}.chat-details-panel li{display:flex;align-items:center;gap:8px;padding:8px 0}
.account-menu{position:relative;margin:0;font-size:12px;flex-shrink:0}.account-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 8px;border-radius:8px}.account-menu summary::-webkit-details-marker{display:none}.account-menu summary:after{content:'⌄';margin-left:4px}.account-menu-panel{position:absolute;right:0;top:100%;min-width:220px;max-width:calc(100vw - 24px);z-index:90;padding:12px;border:1px solid var(--line,#424940);border-radius:16px;background:var(--card,#f4f2ea);box-shadow:0 12px 32px #0003;display:grid;gap:8px}.account-menu-panel form{margin:0;padding:0;background:none;border:0}.account-menu-panel button,.account-menu-panel a{width:100%;min-height:44px;justify-content:flex-start;text-align:left;margin:0}.demo-strip,.hanaman-account-strip{position:relative;z-index:41;align-items:center;overflow:visible}.demo-strip>.account-menu,.hanaman-account-strip>.account-menu{font-size:12px}.account-menu-panel .danger{background:linear-gradient(145deg,#b8474738,#731f1f40)!important;border:1px solid #d66c6c99!important;color:#922e2e!important}[data-theme=night] .account-menu-panel .danger{color:#ffd1ce!important}
@media(max-width:760px){.main .card,main>article,main>form.card{padding:16px}.modal-head,.modal-body,.modal-foot{padding:16px}.main .page-title{gap:12px}.team-chat{gap:0}.conversation-pane{padding:12px}.chat-message{max-width:94%}.chat-compose{gap:8px}.account-menu summary{font-size:11px;max-width:220px}.account-menu summary>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-strip>button[data-action=about]{display:none}.main .row.between{flex-wrap:wrap}.modal-foot .btn{flex:1 1 130px}}
@media(min-width:1100px){.main{padding:32px}.main .form-grid{column-gap:24px}.main .page-title{margin-bottom:32px}}
.timesheet-person{margin-bottom:16px}.account-menu summary:focus-visible{outline:2px solid #72add5;outline-offset:2px}
.account-menu summary>span{display:block!important}.conversation-item{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:4px;text-align:left;min-height:80px}.conversation-item>.chat-avatar{grid-column:1;grid-row:1/3}.conversation-item>strong{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-item>small{grid-column:2/4;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-item>span:last-child{grid-column:3;grid-row:1;font-size:11px;white-space:nowrap}.conversation-item>.chat-avatar{width:36px;height:36px}

.page-heading-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.page-heading-actions .page-help{margin:0}.page-title>div:first-child{min-width:0}.page-title p{margin-bottom:0}@media(max-width:760px){.page-heading-actions{justify-content:flex-start;width:100%}.main .page-title{margin-bottom:16px}}

.main:has(.team-chat) .page-heading-actions{width:auto}.main:has(.team-chat) .page-heading-actions .btn{font-size:12px;min-height:36px;padding:8px 12px}

/* Compact report navigation and readable phone headings; keep 44px touch controls. */
.report-sections{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.report-sections .btn{flex:1 1 140px;justify-content:center;margin:0}.report-draft-list{margin:16px 0}.report-draft-list h2{font-size:18px;margin:0}.report-draft-list .review-line{padding:12px 0}.report-draft-list .review-line>.btn{margin:8px 8px 0 0}
@media(max-width:760px){.main .page-title{align-items:flex-start;margin-bottom:16px}.main .page-title h1{font-size:28px;line-height:1.2;margin:0}.main .page-title p{font-size:14px;line-height:1.45;margin:8px 0 0}.main .page-title .eyebrow{display:none}.main .page-title>.btn{margin:0}.report-sections .btn{font-size:14px;flex-basis:calc(50% - 8px)}.report-sections .btn:last-child{flex-grow:0}.main .page-title:has(+.report-draft-list){flex-wrap:wrap}.main .page-title:has(+.report-draft-list)>.btn{width:100%}}

.page-guide{margin:12px 0 16px;font-size:14px;line-height:1.5}.page-guide summary{cursor:pointer;padding:8px 0;min-height:44px}.page-guide p{margin:8px 0}.main .page-title p:empty{display:none}

/* Crew choices keep names and allocation conflicts in a single readable column. */
#modal .crew-member-choices{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0}
#modal .crew-member-choices legend{margin:0 0 12px;font-size:16px}
#modal .crew-member-choices>label{display:grid!important;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;min-width:0;min-height:52px;margin:0;padding:12px;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
#modal .crew-member-choices input{margin:0;width:22px;height:22px;flex-shrink:0}
#modal .crew-member-name{min-width:0}#modal .crew-member-name small{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--muted)}
#modal .crew-member-choices label:has(input:disabled){opacity:.65}
@media(max-width:760px){#modal .crew-member-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){#modal .crew-member-choices{grid-template-columns:minmax(0,1fr)}}
.allocation-weather,.home-report .allocation-weather{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:100%;max-height:2.8em;margin:4px 0 8px;font-size:12px;line-height:1.4;font-weight:400;color:var(--muted);text-align:left}
.allocation-weather .weather-summary,.allocation-weather .weather-planning-alert{display:inline;white-space:nowrap}
.next-shift>span{min-width:0}.next-shift .allocation-weather{margin:4px 0}
.allocation-weather .weather-planning-alert{color:#b93131;font-weight:600}[data-theme=night] .allocation-weather .weather-planning-alert{color:#ff9c9c}

.notification-choice{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:center;gap:16px;min-height:48px}.notification-choice input{width:22px;height:22px;flex-shrink:0}

/* Weather identity colours are separate from the planning alert thresholds. */
.allocation-weather .weather-rain,.allocation-weather .weather-temp-cold{color:#246a9a}
.allocation-weather .weather-temp-mild{color:var(--text,#24372c)}
.allocation-weather .weather-temp-warm{color:#866000}
.allocation-weather .weather-temp-hot{color:#b93131}
[data-theme=night] .allocation-weather .weather-rain,[data-theme=night] .allocation-weather .weather-temp-cold{color:#9cd7ff}
[data-theme=night] .allocation-weather .weather-temp-mild{color:#fff}
[data-theme=night] .allocation-weather .weather-temp-warm{color:#f7d76b}
[data-theme=night] .allocation-weather .weather-temp-hot{color:#ff9c9c}

.weather-attribution{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;font-size:11px;color:var(--muted);clear:both}
.weather-attribution a{display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:11px}
.weather-attribution img{height:14px;width:auto;max-width:100px}
.weather-attribution .weather-mark-night{display:none}[data-theme=night] .weather-attribution .weather-mark-day{display:none}[data-theme=night] .weather-attribution .weather-mark-night{display:inline}
