/* Operational components. Shared interface foundations live in foundation.css. */
* {
    box-sizing: border-box
}




button,
input,
select,
textarea {
    font: inherit
}

button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

button:disabled {
    opacity: .45;
    cursor: not-allowed
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cbd4de;
    border-radius: 9px;
    background: #fff;
    padding: 11px 13px;
    color: var(--ink);
    min-height: 46px
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 3px solid #008080;
    outline-offset: 3px
}

input[type=checkbox] {
    width: 22px;
    height: 22px;
    min-height: 22px;
    accent-color: var(--green);
    flex-shrink: 0
}

textarea {
    resize: vertical
}

p {
    margin-top: 0
}




p {
    margin-bottom: 15px
}


.muted {
    color: var(--muted)
}

.prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.hidden {
    display: none !important
}

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: #fff;
    padding: 15px
}

.skip:focus {
    top: 10px
}




.beta {
    font-size: 9px;
    letter-spacing: .7px;
    color: var(--muted);
    margin-left: 5px;
    font-weight: 600
}




.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ebe7f1;
    color: #77678f;
    font-weight: 650
}

.avatar.green {
    background: var(--mint);
    color: var(--green)
}








.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #528863;
    margin-right: 5px
}































.amber-text {
    color: var(--amber)
}






.card-link {
    font-size: 12px;
    color: var(--green);
    font-weight: 600;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 25px
}







.visit-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 21px 0;
    border-top: 1px solid #e7ebf0;
    color: var(--ink);
    min-width: 0
}

.visit-row:hover {
    text-decoration: none;
    background: #f7f9fb
}

.visit-time {
    font-size: 14px;
    font-weight: 650;
    min-width: 43px
}

.visit-time small {
    display: block;
    color: #647088;
    font-size: 10px;
    font-weight: 400
}

.visit-info {
    flex: 1;
    min-width: 0
}

.visit-info strong {
    font-size: 13px;
    display: block;
    line-height: 1.4
}

.visit-info small {
    font-size: 11px;
    color: var(--muted);
    display: block;
    margin-top: 5px
}

.row-arrow {
    color: #657187
}








.progress-card {
    padding: 25px;
    background: #e5f3f2;
    border: 1px solid #d4e9e7;
    border-radius: var(--radius);
    color: #006766
}

.progress-card .eyebrow {
    color: #466775
}

.progress-number {
    font-size: 54px;
    line-height: 1.2;
    font-weight: 550;
    letter-spacing: -2px
}

.progress-number span {
    font-size: 27px;
    margin-left: 4px
}

.progress-track {
    height: 6px;
    background: #d3e7e7;
    border-radius: 8px;
    margin: 21px 0 15px;
    overflow: hidden
}

.progress-track>div {
    height: 100%;
    background: #008080;
    border-radius: 8px
}

.progress-card p {
    font-size: 12px;
    margin-bottom: 8px
}

.progress-card small {
    font-size: 11px;
    color: #59677d;
    display: block
}

.attention-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px
}

.attention-row strong {
    font-size: 14px;
    color: var(--ink)
}

.section-gap {
    margin-top: 25px
}

.issue-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    color: var(--ink)
}

.issue-row>div {
    flex: 1;
    min-width: 0
}

.issue-row strong {
    font-size: 13px
}

.issue-row small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 5px
}

.issue-row:hover {
    text-decoration: none;
    background: #f7f9fb
}

.issue-marker {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f0e1;
    color: #ad9151;
    border-radius: 9px;
    flex-shrink: 0
}

.issue-marker.urgent {
    background: #f5e4df;
    color: #b76d58
}

.issue-marker.high {
    background: #f7ecd5;
    color: #a88546
}

.sync-caption {
    font-size: 11px;
    color: #657187;
    margin: 18px 0 0
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: 25px;
    align-items: start
}

.back-link {
    font-size: 12px;
    display: inline-block;
    margin-bottom: 22px
}

.check-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    cursor: pointer;
    min-height: 60px
}

.check-row span {
    font-size: 14px
}

.check-row:has(input:checked) span {
    color: #526778
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 650;
    margin: 23px 0 8px
}

.mini-issue {
    display: block;
    padding: 15px 0;
    border-top: 1px solid var(--line)
}

.mini-issue strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    margin-bottom: 8px
}

.timeline {
    margin-top: 20px
}

.timeline>div {
    padding: 0 0 23px 20px;
    position: relative;
    border-left: 1px solid #dae3ec;
    margin-left: 5px
}

.timeline-dot {
    position: absolute;
    left: -4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #008080
}

.timeline strong {
    display: block;
    font-size: 12px;
    overflow-wrap: anywhere
}

.timeline small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin: 4px 0
}

.timeline p {
    font-size: 12px;
    color: #5a6477;
    margin: 8px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.form-card {
    max-width: 800px
}

.form-field {
    margin-bottom: 22px;
    min-width: 0
}

.form-field label,
form>p>label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px
}

.form-field small,
.helptext {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 7px
}

.errorlist {
    color: #a94434;
    font-size: 13px;
    padding-left: 20px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px
}

.form-grid .wide {
    grid-column: 1/-1
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px
}

.filters input {
    flex: 2;
    min-width: 180px;
    width: auto
}

.filters select {
    flex: 1;
    min-width: 130px;
    width: auto
}

.site-icon {
    font-size: 30px;
    color: #819781
}

.site-card h2 {
    margin-top: 20px
}

.site-card small {
    color: var(--muted)
}

.workflow-card h2 {
    margin-top: 20px
}

.workflow-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 20px
}

.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.tabs a {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
    min-height: 40px
}

.table-wrap {
    overflow-x: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font-size: 12px
}

th {
    font-size: 10px;
    color: #52616a;
    letter-spacing: .3px;
    font-weight: 550;
    background: #f7f9f4
}

td,
th {
    padding: 15px 13px;
    border-bottom: 1px solid var(--line)
}

td {
    vertical-align: middle
}

td strong {
    font-weight: 600
}

.document-name {
    display: flex;
    gap: 13px;
    align-items: center;
    min-width: 220px;
    color: var(--ink)
}

.document-name small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    overflow-wrap: anywhere
}

.file-icon {
    font-size: 26px;
    color: #94a38c
}

.info-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid #dfe7d8;
    background: #f0f5eb;
    color: #7a8870;
    padding: 12px 16px;
    border-radius: 9px;
    font-size: 12px;
    margin-bottom: 23px
}

.separator {
    margin: 0 12px;
    color: #bec9b6
}

.document-layout {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start
}

.source-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    background: #f4f5f1;
    border-radius: 8px
}

.pdf-placeholder {
    text-align: center;
    background: #f3f5ef;
    padding: 40px 20px;
    border-radius: 10px
}

.pdf-placeholder>span {
    font-size: 44px;
    font-weight: 700;
    color: #aebba5;
    display: block;
    margin-bottom: 20px
}

.pdf-placeholder p {
    font-size: 12px
}

.extraction-source {
    margin: 17px 0;
    background: #f1f4eb;
    color: #748667;
    font-size: 11px;
    padding: 10px;
    border-radius: 7px
}

.ocr-text {
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    font: 12px/1.6 ui-monospace, monospace;
    background: #f5f6f2;
    padding: 15px;
    overflow-wrap: anywhere
}

.fingerprint {
    font-size: 11px;
    overflow-wrap: anywhere;
    color: var(--muted)
}

summary {
    cursor: pointer;
    padding: 13px 0;
    font-size: 12px;
    font-weight: 600
}

.line-items {
    min-width: 360px
}

.line-items td {
    padding: 9px 5px
}

.line-items td:first-child {
    width: 55%
}

.line-items input {
    padding: 8px;
    min-width: 60px;
    font-size: 12px
}

.line-items input[type=checkbox] {
    min-width: 22px
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px
}

.evidence-tile {
    min-width: 0
}

.evidence-tile img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    background: #f0f4ed
}

.evidence-tile strong {
    font-size: 11px;
    color: var(--ink);
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere
}

.evidence-tile small {
    font-size: 10px;
    color: var(--muted)
}

.document-icon {
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f4ed;
    font-size: 24px;
    color: #94a189;
    border-radius: 8px
}

.upload-preview {
    max-width: 100%;
    max-height: 350px;
    margin-bottom: 20px;
    border-radius: 8px
}




.empty {
    text-align: center;
    padding: 50px 25px;
    color: var(--muted);
    grid-column: 1/-1
}

.empty h3 {
    color: #607258;
    font-size: 17px
}

.empty p {
    font-size: 13px
}

.empty.compact {
    padding: 20px
}

.empty-icon {
    font-size: 30px;
    display: block;
    margin-bottom: 15px
}

.login-grid {
    max-width: 1100px;
    margin: 35px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start
}

.login-story {
    background: #e7eee0;
    border-radius: 22px;
    padding: 45px;
    color: #476243
}

.login-story h1 {
    font-size: 46px;
    line-height: 1.12;
    margin: 24px 0;
    letter-spacing: -2px
}

.login-story>p {
    font-size: 16px;
    color: #74836c
}

.login-story>small {
    font-size: 10px;
    color: #839076;
    display: block;
    margin-top: 30px
}

.story-example {
    background: #f9fcf6;
    border: 1px solid #d6e0cc;
    border-radius: 12px;
    padding: 24px;
    margin-top: 40px
}

.story-example h3 {
    margin: 18px 0 10px
}

.story-example p {
    font-size: 12px;
    color: #87927b
}

.story-line {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e1e9d8;
    padding-top: 16px;
    font-size: 11px
}

.login-panel {
    padding: 24px 0
}

.login-panel h2 {
    font-size: 25px
}

.login-panel input {
    margin-top: 6px
}

.divider {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #a0aa99;
    margin: 30px 0 18px;
    display: flex;
    align-items: center;
    gap: 15px
}

.divider:after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--line)
}

.demo-choices button {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 9px;
    padding: 12px 15px;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600
}

.demo-choices button:hover {
    background: #eaf1e3
}

.demo-choices span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 3px
}

.workspace-card h2 {
    margin-top: 22px
}

.workspace-card>strong {
    font-size: 12px;
    color: var(--green)
}



pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

main>* {
    min-width: 0
}



@media(max-width:1200px) {









.visit-row {
        gap: 11px
    }

.visit-row .badge {
        max-width: 100px;
        white-space: normal
    }


.document-layout {
        grid-template-columns: minmax(250px, .8fr) minmax(0, 1fr)
    }

}

@media(max-width:960px) {











.document-layout {
        grid-template-columns: 1fr 1fr
    }

.login-grid {
        gap: 35px
    }

}

@media(max-width:700px) {

















.detail-grid,
.document-layout {
        grid-template-columns: 1fr
    }


.progress-card {
        padding: 20px
    }

.progress-number {
        font-size: 42px
    }


.attention-row {
        display: block;
        font-size: 10px
    }

.attention-row strong {
        display: block;
        margin-top: 3px
    }

.visit-row {
        gap: 11px;
        flex-wrap: wrap
    }

.visit-info strong {
        font-size: 13px
    }

.visit-info small {
        font-size: 10px
    }

.visit-row .badge {
        font-size: 9px;
        padding: 5px 7px;
        max-width: 84px
    }

.row-arrow {
        display: none
    }





.issue-row {
        gap: 11px
    }

.issue-row strong {
        font-size: 12px
    }

.issue-row small {
        font-size: 10px
    }

.issue-marker {
        width: 27px;
        height: 27px
    }

.issue-row .badge {
        font-size: 9px
    }

.filters input,
.filters select {
        flex: 1 1 140px
    }

.filters .button {
        flex: 1
    }

.form-grid {
        grid-template-columns: 1fr
    }

.form-grid .wide {
        grid-column: auto
    }

input,
select,
textarea {
        font-size: 16px
    }

.evidence-grid {
        grid-template-columns: 1fr 1fr
    }

.login-grid {
        display: block;
        margin: 0 auto
    }

.login-story {
        padding: 30px;
        margin-bottom: 24px
    }

.login-story h1 {
        font-size: 38px
    }

.story-example {
        display: none
    }

.login-panel {
        padding: 0 5px
    }

.login-story>small {
        margin-top: 18px
    }

.login-story>p {
        font-size: 14px
    }

.login-grid .eyebrow {
        font-size: 9px
    }

.info-strip {
        font-size: 10px
    }

.info-strip .separator {
        display: none
    }

.document-layout .source-panel {
        order: 0
    }

.source-image {
        max-height: 440px
    }


.table-wrap {
        margin: 0 -3px
    }

.line-items input {
        font-size: 14px
    }


footer>span {
        display: none
    }


td,
th {
        padding: 12px 9px
    }

#visit-editor .button-row .button {
        flex: 1 1 135px
    }
}

@media(prefers-reduced-motion:no-preference) {

button {
        transition: background .15s, border-color .15s
    }

.progress-track>div {
        transition: width .3s
    }
}














@media(max-width:380px) {




.beta {
        display: none
    }
}

.hotel-brand {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.6px
}

.hotel-brand small {
    display: block;
    font-size: 9px;
    letter-spacing: 1.8px;
    font-weight: 550
}

.department-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.department-card {
    display: block;
    color: var(--ink)
}

.department-card:hover {
    text-decoration: none;
    border-color: #008080
}

.department-card p {
    font-size: 13px;
    color: var(--muted);
    min-height: 40px
}

.department-card h2 {
    display: flex;
    justify-content: space-between
}

.dept-statline {
    display: flex;
    gap: 20px;
    margin: 18px 0 12px
}

.dept-statline strong {
    display: block;
    font-size: 25px;
    color: var(--ink)
}

.dept-statline span {
    font-size: 11px;
    color: var(--muted)
}

.hotel-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.hotel-metrics .metric {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 22px;
    display: flex;
    flex-direction: column
}

.hotel-metrics .metric strong {
    font-size: 34px;
    margin: 10px 0
}

.hotel-metrics .metric span,
.hotel-metrics .metric small {
    color: var(--muted);
    font-size: 12px
}

.hotel-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.hotel-filters input,
.hotel-filters select {
    flex: 1;
    min-width: 150px
}

.large-number {
    font-size: 52px;
    font-weight: 650;
    color: var(--green)
}





.table-sub {
    display: block;
    margin-top: 5px;
    color: var(--muted)
}

.briefing-point {
    padding: 17px 0;
    border-bottom: 1px solid var(--line)
}

.briefing-point p {
    margin: 10px 0
}

progress {
    width: 100%;
    height: 12px;
    accent-color: var(--green);
    margin-bottom: 15px
}

@media(max-width:1150px) {

.department-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {

.department-grid {
        grid-template-columns: 1fr
    }

.hotel-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.hotel-metrics .metric {
        padding: 17px
    }

.hotel-filters {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

.hotel-filters input {
        grid-column: 1/-1
    }

.hotel-filters select {
        min-width: 0
    }
}
























.login-grid {
    max-width: 1200px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 65px;
    align-items: start
}

.login-story {
    background: var(--navy);
    border-radius: 18px;
    padding: 45px 38px;
    color: #fff
}

.login-story h1 {
    font-size: 40px;
    line-height: 1.4;
    color: #fff
}

.login-story .eyebrow {
    color: #afdbdc
}

.login-story>p {
    color: #d1d7e5;
    line-height: 1.8
}

.login-story h3 {
    color: #fff
}

.story-example {
    background: #ffffff0b;
    border: 1px solid #ffffff25;
    padding: 24px;
    margin-top: 35px
}

.story-example p {
    color: #d1d7e5
}

.story-line {
    color: #d1d7e5
}

.story-departments {
    font-size: 11px;
    color: #b8c4db;
    line-height: 2;
    margin-top: 30px
}

.login-panel h2 {
    font-size: 25px
}

.demo-panel {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.demo-panel h2 {
    font-size: 20px
}

.demo-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.demo-role {
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: left;
    padding: 15px;
    min-height: 87px;
    color: var(--navy)
}

.demo-role:hover {
    border-color: var(--teal);
    background: #f0f8f7
}

.demo-role strong {
    display: block;
    font-size: 12px;
    font-weight: 600
}

.demo-role span {
    display: block;
    font-size: 10px;
    color: #58667c;
    line-height: 1.7;
    margin-top: 6px
}

.primary-role {
    grid-column: 1/-1;
    background: #e9f4f3;
    border-color: #bcd9d7;
    min-height: 78px
}

.primary-role strong {
    font-size: 14px
}

.demo-caption {
    font-size: 11px;
    color: #59677d;
    margin-top: 14px
}



.hotel-metrics .metric strong {
    color: var(--navy)
}

.department-card h2 {
    font-size: 17px
}

.department-card p {
    font-size: 12px
}

.department-card .eyebrow {
    color: #64718a
}

.hotel-brand {
    font-family: var(--font-ui)
}

.large-number {
    color: var(--teal)
}

.hotel-filters input {
    min-width: 120px
}


.fingerprint {
    overflow-wrap: anywhere
}


.demo-role:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px
}

@media(max-width:960px) {






.login-grid {
        gap: 30px
    }

.login-story {
        padding: 30px
    }

.login-story h1 {
        font-size: 33px
    }
}

@media(max-width:700px) {


.login-story {
        padding: 29px 24px
    }

.login-story h1 {
        font-size: 31px
    }

.story-departments {
        margin-top: 20px
    }

.login-panel h2 {
        font-size: 22px
    }



.demo-panel .section-head {
        align-items: flex-start
    }

.demo-panel .section-head>.badge {
        font-size: 9px
    }






.demo-role-grid {
        gap: 8px
    }

.demo-role {
        padding: 12px
    }


}





.filter-field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.chart-row {
    margin: 22px 0
}

.chart-row>strong,
.chart-row>span,
.chart-row>small {
    display: block
}

.chart-row meter {
    display: block;
    width: 100%;
    height: 23px;
    accent-color: var(--teal)
}

.timeline article {
    position: relative;
    padding: 0 0 24px 22px;
    margin-left: 6px;
    border-left: 1px solid var(--line)
}

.timeline article small {
    display: block;
    color: var(--muted)
}

.timeline article:target {
    background: var(--mint)
}

.form-card #id_entries label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0
}

.form-card #id_entries input {
    flex-shrink: 0
}

.form-card #id_entries {
    overflow-wrap: anywhere
}

.detail-grid>.stack,
.detail-grid>.card {
    min-width: 0
}

details>summary {
    cursor: pointer;
    min-height: 44px;
    padding: 10px 0
}

#record-update {
    scroll-margin-top: 20px
}

.chart-row span {
    font-size: 12px
}

.form-grid>p {
    min-width: 0
}

.form-grid select {
    max-width: 100%
}

@media(max-width:700px) {


.filter-field {
        grid-column: 1/-1
    }

.timeline article {
        padding-left: 15px
    }

.form-card #id_entries label {
        font-size: 13px
    }
}

.form-grid>button {
    align-self: end;
    min-height: 46px
}

.hotel-filters>button {
    align-self: end
}
/* Daily work: large touch targets, with the same readable cards at every width. */
.daily-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.daily-stats a {
    color: inherit;
    text-decoration: none;
}

.daily-stats strong {
    display: block;
    font-size: 2rem;
    color: var(--navy, #030A44);
}

.daily-stats span {
    display: block;
    font-size: .86rem;
}

.daily-link {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid #e5e8ef;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.daily-link:last-child {
    border-bottom: 0;
}

.daily-link>strong,
.daily-link>small,
.daily-link>span {
    display: block;
}

.daily-link>small {
    margin: 5px 0;
    color: #536078;
}

.daily-link:focus-visible {
    outline: 3px solid #EEA71F;
    outline-offset: 3px;
}

#id_weekdays {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 6px;
}

#id_weekdays label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

#id_weekdays input {
    width: 20px;
    height: 20px;
    margin: 0;
}

@media(max-width:600px) {

.daily-stats {
        gap: 8px;
    }

.daily-stats .card {
        padding: 12px;
    }

.daily-stats strong {
        font-size: 1.5rem;
    }

.daily-stats span {
        font-size: .72rem;
        line-height: 1.5;
    }
}

/* Read-only front desk: source freshness and room states remain distinct. */
.pms-filters {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0
}

.pms-filters label {
    display: grid;
    gap: 6px;
    flex: 1;
    min-width: 180px
}

.pms-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.pms-stats strong {
    display: block;
    font-size: 28px;
    margin-bottom: 8px
}

.pms-stats span,
.pms-stats small {
    display: block
}

.pms-stats small {
    margin-top: 8px;
    color: var(--muted, #627080)
}

.pms-room-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.pms-room {
    min-width: 0
}

.pms-room h2 {
    font-size: 24px
}

.pms-room dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0
}

.pms-room dt {
    color: #526173
}

.pms-room dd {
    margin: 0;
    font-weight: 600
}

.pms-room-alert {
    border-left: 4px solid #a45d18
}

.pms-issue {
    color: #79450e;
    font-weight: 600
}

.pms-attention summary {
    font-weight: 700;
    cursor: pointer
}

.pms-attention li {
    margin: 8px 0
}

.pms-stay-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px
}

.pms-hash {
    overflow-wrap: anywhere;
    font-size: 12px
}

.pms-tabs {
    flex-wrap: wrap
}

@media(max-width:1100px) {

.pms-room-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.pms-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:560px) {

.pms-room-grid {
        grid-template-columns: minmax(0, 1fr)
    }

.pms-stats {
        gap: 10px
    }

.pms-stats .card {
        padding: 16px
    }

.pms-stats strong {
        font-size: 23px
    }

.pms-stats span {
        font-size: 13px
    }

.pms-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr)
    }

.pms-tabs .button {
        padding: 10px 13px
    }
}








.status-dot.unavailable {
    background: var(--amber)
}



.system-state {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0
}

.system-state strong {
    font-size: 14px
}

.system-state small {
    display: block;
    color: var(--muted)
}

.department-card {
    transition: border-color .15s
}

.department-card:hover {
    border-color: var(--teal)
}

.department-card .dept-statline {
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.department-card small {
    display: block;
    margin-top: 12px;
    line-height: 1.7
}


.login-panel form {
    max-width: 480px
}

.login-panel form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 7px
}

.login-panel input {
    min-height: 50px
}

.login-panel form .button {
    margin-top: 12px
}



@media(prefers-reduced-motion:reduce) {

.department-card {
        transition: none
    }
}

@media(max-width:700px) {

input,
select,
textarea {
        font-size: 16px
    }


.login-story .story-example,
.login-story .story-departments {
        display: none
    }

.login-story {
        padding: 25px
    }

.login-story h1 {
        font-size: 28px
    }

.login-grid {
        gap: 24px
    }

.login-story>p {
        margin-bottom: 0
    }

.department-card .dept-statline {
        gap: 12px
    }

.system-state {
        align-items: flex-start
    }
}
/* Hotel identity, staff planning and support. */
.hotel-logo {
    max-width: 145px;
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0
}


.flow-steps {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: #f0f5f3;
    border-radius: 12px;
    font-size: .85rem;
    margin: 20px 0
}

.support-update {
    padding: 16px 0;
    border-bottom: 1px solid #e3e9e7
}

.support-update small {
    display: block;
    margin-top: 6px
}

.availability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

@media(max-width:650px) {

.hotel-logo {
        max-width: 85px;
        max-height: 32px
    }


.flow-steps {
        gap: 12px 24px
    }

.availability-row {
        display: block
    }
}

@media print {

form,
button,
.back-link {
        display: none !important
    }



.table-wrap {
        overflow: visible
    }


}

.hotel-logo-mobile {
    display: none
}

@media(max-width:650px) {


.hotel-logo-mobile {
        display: block;
        max-width: 75px;
        max-height: 34px;
        object-fit: contain
    }

}
/* Hotel diary: readable grids on desktop, stacked days on phones. */
.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px
}

.calendar-filters label {
    flex: 1 1 180px;
    min-width: 0;
    display: grid;
    gap: 7px
}

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.calendar-toolbar h2 {
    margin: 0;
    font-size: 18px
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px
}

.calendar-legend span {
    border-left: 4px solid;
    padding-left: 8px
}

.legend-event {
    border-color: #387b78 !important
}

.legend-work {
    border-color: #6571a8 !important
}

.legend-rota {
    border-color: #a26c28 !important
}

.legend-review {
    border-color: #827187 !important
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    overflow: hidden
}

.calendar-day {
    padding: 12px;
    min-width: 0;
    min-height: 160px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line)
}

.calendar-day-heading {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 14px
}

.calendar-day.is-today {
    background: #f2f8f6
}

.calendar-day.outside {
    opacity: .45;
    background: #f5f6f8
}

.calendar-entry {
    border-left: 3px solid #6571a8;
    background: #f3f5fc;
    padding: 9px;
    margin: 9px 0;
    font-size: 11px;
    overflow-wrap: anywhere;
    border-radius: 4px
}

.calendar-entry strong,
.calendar-entry small {
    display: block;
    line-height: 1.6
}

.entry-event {
    border-color: #387b78;
    background: #edf6f4
}

.entry-rota {
    border-color: #a26c28;
    background: #fbf5e9
}

.entry-review {
    border-color: #827187;
    background: #f4f0f5
}

.calendar-flag {
    font-size: 12px;
    color: #885417;
    display: block;
    margin-top: 8px
}

.calendar-day .muted {
    font-size: 11px
}

.calendar-day-view,
.calendar-day.calendar-day-view {
    min-height: 0
}

.calendar-grid.calendar-day {
    display: block;
    padding: 0
}

.calendar-grid.calendar-day .calendar-day {
    border: 0
}

.calendar-grid.calendar-day .calendar-entry {
    font-size: 14px
}

.calendar-year {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.calendar-year .large-number {
    font-size: 30px
}

.event-state {
    font-size: 17px !important;
    line-height: 1.4
}

@media(max-width:1100px) {

.calendar-grid.calendar-week {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.calendar-year {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

.calendar-month .calendar-day {
        padding: 6px
    }

.calendar-month .calendar-entry {
        font-size: 10px;
        padding: 5px
    }
}

@media(max-width:700px) {

.calendar-grid {
        display: block
    }

.calendar-day.outside {
        display: none
    }

.calendar-day {
        min-height: 0;
        padding: 14px !important
    }

.calendar-entry {
        font-size: 13px !important;
        padding: 10px !important
    }

.calendar-day-heading {
        font-size: 15px
    }

.calendar-year {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.calendar-year .card {
        padding: 18px
    }

.calendar-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr)
    }

.calendar-toolbar .button {
        padding: 10px 13px
    }

.calendar-toolbar .button-row {
        gap: 8px
    }

.calendar-toolbar h2 {
        font-size: 15px
    }
}

@media print {

.calendar-filters,
.calendar-toolbar .button-row:first-child,
.calendar-legend~.button-row {
        display: none !important
    }

.calendar-grid {
        overflow: visible;
        border: 0;
        display: block
    }

.calendar-day {
        break-inside: auto;
        min-height: 0;
        border: 0
    }

.calendar-entry {
        break-inside: avoid
    }

.calendar-year {
        grid-template-columns: repeat(3, 1fr)
    }
}

.calendar-date-short,
.calendar-month-count {
    display: none
}

@media(max-width:700px) {

.calendar-grid.calendar-month {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

.calendar-month .calendar-day {
        min-height: 78px;
        padding: 4px !important
    }

.calendar-month .calendar-day.outside {
        display: block
    }

.calendar-month .calendar-day-heading {
        font-size: 14px;
        margin-bottom: 6px
    }

.calendar-month .calendar-date-long,
.calendar-month .calendar-entry,
.calendar-month .muted,
.calendar-month .calendar-show-all,
.calendar-month .calendar-day-heading small {
        display: none
    }

.calendar-month .calendar-date-short,
.calendar-month .calendar-month-count {
        display: block
    }

.calendar-month .calendar-month-count {
        font-size: 11px;
        color: #295b58;
        background: #e4eeec;
        border-radius: 4px;
        padding: 4px 1px;
        text-align: center
    }

.calendar-month .calendar-count-label {
        display: none
    }

.calendar-month .calendar-day-heading a {
        display: block;
        padding: 4px;
        min-height: 30px
    }

.calendar-month .is-today {
        box-shadow: inset 0 3px #387b78
    }
}

.calendar-weekday-labels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0
}
/* Capacity, configuration and actionable urgency use restrained semantic accents. */
.account-strip,
.usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.usage-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.account-strip {
    margin-bottom: 22px
}

.plan-card {
    border-top: 4px solid var(--teal)
}

.plan-card h2 small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted)
}

.module-card {
    border-top: 4px solid #527b90
}

.module-paused {
    border-top-color: #adb6bf;
    background: #f6f7f8
}

.priority-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    margin: 5px 6px 0 0;
    border-radius: 4px
}

.priority-label.urgent {
    background: #fbe7e5;
    color: #972a23
}

.priority-label.high,
.priority-label.overdue {
    background: #fff0d7;
    color: #815209
}

.visit-row.priority-urgent:not(.state-done):not(.state-cancelled) {
    border-left: 4px solid #ae3f36;
    background: #fff9f8;
    padding-left: 12px
}

.visit-row.state-blocked {
    border-left: 4px solid #b57721;
    background: #fffaf0;
    padding-left: 12px
}

.visit-row.state-review {
    border-left: 4px solid #5268a5;
    padding-left: 12px
}





progress {
    accent-color: var(--teal);
    max-width: 100%;
    width: 100%
}

.form-card select,
.form-card input {
    max-width: 100%
}

.document-layout textarea {
    width: 100%;
    max-width: 100%
}

.module-card p {
    font-size: 13px;
    line-height: 1.7
}

.module-events {
    border-top-color: #387b78
}

.module-building {
    border-top-color: #a27337
}

.module-handbook {
    border-top-color: #767395
}

.module-rota {
    border-top-color: #527b90
}

.module-frontdesk {
    border-top-color: #384873
}

.module-contractors {
    border-top-color: #8b7763
}

.module-insights {
    border-top-color: #546a5d
}

.module-card.module-paused {
    border-top-color: #adb6bf
}

.capacity-warning {
    border-left: 4px solid #b57721
}
/* Staff onboarding and reporting chains remain readable at every depth. */
.staff-guide {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 3fr;
    gap: 12px 24px;
}

.staff-guide dt {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.staff-guide dd {
    margin: 0;
}

.reporting-chain {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
}

.reporting-chain li {
    border-left: 3px solid var(--accent, #387578);
    padding: 12px 18px;
    position: relative;
}

.reporting-chain li+li {
    border-top: 1px solid #e5e7eb;
}

.reporting-chain li strong,
.reporting-chain li span {
    display: block;
}

.staff-warning {
    color: #92400e;
    font-weight: 700;
}

@media(max-width:600px) {

.staff-guide {
        grid-template-columns: 1fr;
        gap: 8px;
    }

.staff-guide dd {
        margin-bottom: 12px;
    }
}

.staff-table small {
    display: block;
    margin-top: 4px;
    color: #536076;
}

.staff-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media(max-width:760px) {

.staff-table {
        min-width: 0;
        width: 100%;
    }

.staff-table thead {
        display: none;
    }

.staff-table tbody,
.staff-table tr,
.staff-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

.staff-table tr {
        border-bottom: 1px solid #dce3ec;
        padding: 12px 0;
    }

.staff-table td {
        border: 0;
        padding: 6px 4px;
    }

.staff-table td[data-label]::before {
        content: attr(data-label) ': ';
        display: block;
        font-size: 12px;
        color: #536076;
    }

.staff-table td a {
        display: inline-block;
        padding: 8px 0;
    }
}
/* A consistent schedule surface; urgent cover is identifiable without colour alone. */
.rota-needs-cover {
    border-left-color: #a74825;
    background: #fff3eb
}

.rota-needs-cover .calendar-flag {
    color: #843314;
    font-weight: 600
}

.rota-calendar .badge {
    margin-top: 5px;
    font-size: 10px
}

.rota-detail-table td small {
    display: block
}

.rota-detail-table td {
    vertical-align: top
}

.calendar-toolbar a[aria-current=page] {
    box-shadow: 0 0 0 2px #c7ded9
}

.calendar-entry a:focus-visible,
.calendar-day-heading a:focus-visible {
    outline: 3px solid #387b78;
    outline-offset: 3px
}

@media(max-width:700px) {

.rota-detail-table,
.rota-detail-table tbody,
.rota-detail-table tr,
.rota-detail-table td {
        display: block;
        width: 100%;
        min-width: 0
    }

.rota-detail-table thead {
        display: none
    }

.rota-detail-table tr {
        border-bottom: 2px solid var(--line);
        padding: 12px 0
    }

.rota-detail-table td {
        border: 0;
        padding: 7px 0;
        overflow-wrap: anywhere
    }

.rota-detail-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 3px
    }

.rota-detail-table td button,
.rota-detail-table td a {
        min-height: 40px;
        display: inline-flex;
        align-items: center
    }

.rota-calendar.calendar-week {
        display: block
    }
}


.learning-intro {
    padding: 28px 32px;
    background: var(--mint);
    border: 1px solid #c5dedd;
    border-radius: var(--radius);
    max-width: 1100px
}

.learning-intro p:last-child {
    margin-bottom: 0
}

.learning-intro h2 {
    font-size: 23px
}

.learning-search {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto;
    gap: 16px;
    align-items: end
}

.learning-search label {
    font-size: 12px;
    font-weight: 600
}

.learning-grid,
.launch-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.learning-card {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.learning-card h2 {
    margin-top: 16px
}

.learning-card h2 a {
    color: var(--ink)
}

.learning-card-foot {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px
}

.learning-card .badge {
    float: right
}

.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 26px;
    align-items: start
}

.guide-body {
    padding: 32px;
    max-width: 900px
}

.guide-print-identity {
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px
}

.guide-steps {
    padding-left: 25px
}

.guide-steps li {
    padding-left: 10px;
    margin: 24px 0
}

.guide-steps li::marker {
    font-weight: 600;
    color: var(--green)
}

.guide-steps h2 {
    font-size: 18px
}

.guide-success {
    background: var(--mint);
    padding: 20px;
    border-radius: 10px
}

.guide-success p:last-child,
.guide-trouble p:last-child {
    margin-bottom: 0
}

.guide-trouble {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.guide-aside small {
    display: block;
    margin-top: 14px;
    color: var(--muted)
}

.learning-path {
    list-style: none;
    padding: 0;
    max-width: 1100px;
    display: grid;
    gap: 14px
}

.learning-path li {
    display: flex;
    align-items: center;
    gap: 24px
}

.learning-path li>div:nth-child(2) {
    flex: 1
}

.learning-path p {
    margin: 0
}

.learning-path h2 {
    margin: 4px 0 8px
}

.path-number {
    background: var(--mint);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0
}

.launch-checks h2 {
    margin-top: 16px
}

.plan-fit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 18px;
    align-items: end
}

.fit-result {
    padding: 18px;
    background: var(--mint);
    border-radius: 10px;
    margin-top: 20px
}

@media(max-width:1200px) {

.learning-grid,
.launch-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.learning-search {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.plan-fit-form {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {

.learning-grid,
.launch-checks,
.guide-layout,
.learning-search,
.plan-fit-form {
        grid-template-columns: minmax(0, 1fr)
    }

.learning-intro,
.guide-body {
        padding: 22px
    }

.learning-intro h2 {
        font-size: 20px
    }

.learning-path li {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px
    }

.learning-path .button {
        margin-left: 60px
    }


.guide-aside {
        min-width: 0
    }
}

@media print {

.guide-aside,
.learning-search,
.learning-card-foot,
.learning-path .button {
        display: none !important
    }

.guide-layout {
        display: block
    }

.guide-body {
        max-width: none;
        border: 0;
        padding: 0;
        break-inside: auto !important
    }

.guide-steps li,
.guide-success,
.guide-trouble {
        break-inside: avoid
    }

.guide-print-identity {
        color: #222
    }

.learning-grid,
.launch-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

}
/* Work queues: restrained emphasis, clear destinations and readable phone controls. */
.work-queues {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px
}

.work-queues a {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink)
}

.work-queues a[aria-current=page] {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff
}

.work-queues strong {
    font-size: 27px;
    line-height: 1
}

.work-queues span {
    font-size: 12px
}

.work-search-row {
    display: flex;
    gap: 16px;
    align-items: end
}

.work-search-row .work-search {
    flex: 1;
    min-width: 0
}

.work-search-row>a {
    padding-bottom: 12px;
    font-size: 12px;
    white-space: nowrap
}

.work-filter-details {
    margin-top: 16px
}

.work-filter-details summary {
    font-size: 12px;
    color: var(--green);
    cursor: pointer;
    padding: 8px 0
}

.work-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px
}

.work-filter-form label {
    font-size: 12px;
    font-weight: 600
}

.work-results .visit-row:last-child {
    border-bottom: 0
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px
}

.work-next {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    background: var(--mint);
    border: 1px solid #c5dedd;
    border-left: 4px solid var(--green);
    border-radius: 12px;
    padding: 22px 26px;
    margin: 20px 0 28px
}

.work-next.state-blocked {
    background: #fff7ed;
    border-color: #ead0ae;
    border-left-color: #986323
}

.work-next.state-review {
    background: #f2f0f9;
    border-color: #d8d1ed;
    border-left-color: #7763a2
}

.work-next.state-cancelled {
    background: #f0f2f5;
    border-color: #d1d8e2
}

.work-next p {
    margin: 0;
    max-width: 750px
}

.work-next h2 {
    margin: 6px 0 10px
}

.work-next-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0
}

.completion-check {
    padding: 12px 15px;
    background: var(--paper);
    border-radius: 8px;
    font-size: 12px;
    margin-top: 16px
}

.work-editor,
.work-next,
#history,
#work-evidence {
    scroll-margin-top: 24px
}

.timeline small {
    overflow-wrap: anywhere
}

@media(max-width:900px) {

.work-queues {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

.work-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.work-next {
        flex-direction: column
    }

.work-next-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start
    }
}

@media(max-width:520px) {

.work-queues {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

.work-queues a {
        padding: 15px
    }

.work-filter-grid {
        grid-template-columns: minmax(0, 1fr)
    }

.work-search-row {
        flex-wrap: wrap
    }

.work-search-row .work-search {
        flex-basis: 100%
    }

.work-next {
        padding: 20px
    }

.work-next-actions .button {
        flex: 1;
        text-align: center
    }

.work-results {
        padding: 12px
    }

.work-results .visit-row {
        gap: 10px
    }

}

@media print {

.work-queues,
.work-filter-form,
.pagination,
.work-next-actions {
        display: none !important
    }

.work-next {
        break-inside: avoid
    }
}
/* Role-first workspaces and labelled schedule colours; colour is never the only cue. */
.inbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.inbox-row h2 {
    margin: 9px 0
}

.inbox-row p {
    margin: 10px 0 0
}

.needs-escalation {
    border-left: 5px solid #ab3b32
}

.schedule-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 20px
}

.schedule-total {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--muted)
}

.schedule-total strong {
    font-size: 24px;
    color: var(--ink)
}

.schedule-filter-panel {
    padding: 16px 22px
}

.schedule-filter-panel>summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px
}

.schedule-filter-panel .calendar-filters {
    margin-bottom: 6px
}

.calendar-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px
}

.calendar-entry {
    border-left-width: 4px;
    padding: 12px;
    border-radius: 7px;
    font-size: 12px
}

.entry-event {
    border-color: #7042a0;
    background: #f2eafa
}

.entry-work {
    border-color: #2163a6;
    background: #eaf2fc
}

.entry-rota {
    border-color: #16735d;
    background: #e7f4ee
}

.entry-review {
    border-color: #9b5c09;
    background: #fff4d9
}

.legend-event {
    border-color: #7042a0 !important
}

.legend-work {
    border-color: #2163a6 !important
}

.legend-rota,
.shift-published {
    border-color: #16735d !important
}

.legend-review {
    border-color: #9b5c09 !important
}

.shift-draft {
    border-color: #68768a !important;
    background: #eef1f5
}

.shift-attention,
.rota-needs-cover {
    border-color: #b34427 !important;
    background: #fff0e7
}

.shift-cancelled {
    border-color: #8993a1 !important;
    background: #f0f1f3;
    color: #566174
}

.calendar-flag {
    color: #93391d;
    font-weight: 600;
    padding: 5px 0 0
}

.calendar-day.is-today {
    box-shadow: inset 0 3px #16735d
}

.calendar-day.is-today .calendar-day-heading a {
    font-weight: 700;
    color: #125842
}

.calendar-day.outside {
    opacity: 1;
    background: #f3f4f7
}

.calendar-markers {
    display: none
}

.calendar-day-items {
    min-width: 0
}

.calendar-week {
    display: block
}

.calendar-week>.calendar-day {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    min-height: 100px;
    padding: 18px
}

.calendar-week .calendar-day-heading {
    display: block;
    margin: 4px 0
}

.calendar-week .calendar-day-heading small {
    display: block;
    margin-top: 8px
}

.calendar-week .calendar-day-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start
}

.calendar-week .calendar-entry {
    margin: 0
}

.calendar-week .calendar-show-all {
    grid-column: 1/-1
}

.calendar-week .calendar-day-items>.muted {
    margin: 0;
    padding: 8px
}

.calendar-month .calendar-entry {
    font-size: 11px
}

.calendar-legend span {
    padding: 6px 10px;
    border-left-width: 5px;
    border-radius: 4px
}

.calendar-legend .legend-event {
    background: #f2eafa
}

.calendar-legend .legend-work {
    background: #eaf2fc
}

.calendar-legend .legend-rota {
    background: #e7f4ee
}

.calendar-legend .legend-review {
    background: #fff4d9
}

@media(max-width:1200px) {

.calendar-week .calendar-day-items {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {

.inbox-row {
        display: block
    }

.inbox-row>.button-row {
        margin-top: 18px
    }

.calendar-week>.calendar-day {
        display: block;
        padding: 16px
    }

.calendar-week .calendar-day-heading {
        margin-bottom: 12px;
        display: flex
    }

.calendar-week .calendar-day-items {
        grid-template-columns: minmax(0, 1fr)
    }

.calendar-grid.calendar-week {
        display: block
    }

.schedule-summary {
        gap: 8px 16px
    }

.schedule-total strong {
        font-size: 20px
    }

.calendar-legend {
        gap: 8px;
        font-size: 11px
    }

.calendar-month .calendar-markers {
        display: flex;
        gap: 2px;
        flex-wrap: wrap;
        margin-top: 5px
    }

.calendar-markers span {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        font-size: 8px;
        color: white;
        text-align: center;
        line-height: 12px
    }

.marker-event {
        background: #7042a0
    }

.marker-work {
        background: #2163a6
    }

.marker-rota {
        background: #16735d
    }

.marker-review {
        background: #9b5c09
    }

.calendar-month .calendar-day-items {
        display: none
    }

.schedule-filter-panel {
        padding: 16px
    }

.calendar-type {
        font-size: 10px
    }
}

[data-inbox-count]:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 12px;
    background: #e7edf7;
    color: #030a44;
    font-size: 11px;
    margin-left: 4px
}

.schedule-total small {
    font-size: 10px;
    max-width: 130px
}

.schedule-total {
    flex-wrap: wrap
}
/* Scannable hotel register and a distinct, explicit acceptance step. */
.register-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px 28px;
    margin: 20px 0;
}

.register-details dt {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 5px;
}

.register-details dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.completion-panel {
    border-left: 4px solid #b98b4f;
    background: #fffdf8;
}

.completion-panel form {
    max-width: 760px;
}

.completion-panel textarea {
    min-height: 88px;
}

.completion-panel .button {
    margin-top: 12px;
}

@media(max-width:600px) {

.register-details {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

.completion-panel .button {
        width: 100%;
    }
}
/* Service documents beside package decisions, also available from the public footer. */
.workroom-policies {
    margin: 28px 0;
    padding: 24px;
    border: 1px solid #d9e3e8;
    border-radius: 12px;
    background: #f7f9fa;
    color: #24344a
}

.workroom-policies h2,
.public-site .workroom-policies h2 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 6px
}

.workroom-policies p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 68ch;
    color: #536376
}

.workroom-policies nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.workroom-policies nav a {
    display: block;
    flex: 1 1 190px;
    min-width: 0;
    padding: 14px 16px;
    background: white;
    border: 1px solid #d9e3e8;
    border-radius: 8px;
    color: #006c6c;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere
}

.workroom-policies nav a span {
    display: block;
    margin-top: 5px;
    color: #536376;
    font-size: 12px;
    font-weight: 400
}

.workroom-policies nav a:hover {
    border-color: #008080;
    background: #f1f8f7
}

.workroom-policies nav a:focus-visible {
    outline: 3px solid #008080;
    outline-offset: 3px
}

@media(max-width:600px) {

.workroom-policies {
        padding: 18px
    }

.workroom-policies nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Keep account controls reachable without widening a small phone screen. */
@media(max-width:960px) {





.no-sidebar .topbar {
        height: auto;
        min-height: 94px;
        flex-wrap: wrap;
        padding-top: 12px;
        padding-bottom: 12px
    }

.no-sidebar .top-actions {
        flex-wrap: wrap
    }

.no-sidebar .top-actions>a,
.no-sidebar .top-actions button {
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }
}


.work-next.state-triage {
    background: #fffaf0;
    border-color: #e8d7b8;
    border-left-color: #986323
}

.visit-row.state-triage:not(.priority-urgent) {
    border-left: 4px solid #986323;
    padding-left: 12px
}

.work-search-result {
    border-bottom: 1px solid var(--line)
}

.work-search-result:last-child {
    border-bottom: 0
}

.work-search-result>.visit-row {
    border-bottom: 0
}

.work-search-excerpt {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    overflow-wrap: anywhere
}
/* Saved setup progress: the current stage remains clear without animation. */
.setup-stage-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    list-style: none;
    counter-reset: setup-step;
    padding: 0;
    margin: 0 0 28px
}

.setup-stage-list>li {
    position: relative;
    min-width: 0;
    padding: 13px 14px 13px 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    counter-increment: setup-step
}

.setup-stage-list>li::before {
    content: counter(setup-step);
    position: absolute;
    top: 14px;
    left: 13px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
    line-height: 1
}

.setup-stage-list>li[aria-current="step"] {
    border-color: var(--green);
    box-shadow: inset 3px 0 var(--green);
    background: var(--mint);
    color: #006868;
    font-weight: 650
}

.setup-stage-list>li[aria-current="step"]::before {
    background: var(--green);
    color: #fff
}

@media(max-width:600px) {

.setup-stage-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 20px
    }

.setup-stage-list>li {
        padding: 10px 10px 10px 34px;
        font-size: 12px
    }

.setup-stage-list>li::before {
        top: 11px;
        left: 9px;
        width: 18px;
        height: 18px
    }
}