:root {
    --bg: #f5f6f7;
    --ink: #1d2731;
    --muted: #77828e;
    --line: #e5e9ec;
    --navy: #172b3a;
    --blue: #2563eb;
    --teal: #0c877c;
    --paper: #fff;
    --cream: #fffaf0
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg)
}

button,
select,
input {
    font: inherit
}

button {
    cursor: pointer
}

/* The project and its workspaces share a compact, horizontal header. */
.shell { display:flex; flex-direction:column; min-height:100vh }
.main { flex:1; min-width:0 }
.app-header { background:var(--navy); color:#edf5f7; flex:none }
.topbar { display:flex; align-items:center; gap:18px; min-height:56px; padding:8px 16px; border-bottom:1px solid #ffffff18 }
.brand { display:flex; align-items:center; gap:9px; flex:none; letter-spacing:.12em; font-size:12px; line-height:1.05 }
.brand small { display:block; color:#96b6c4; font-size:8px; letter-spacing:.4em; margin-top:4px }
.brand-mark { color:#60d5c5; font-size:27px; line-height:1 }
.project-heading { flex:1; min-width:0; padding-left:18px; border-left:1px solid #ffffff26;position:relative }
.project-heading>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
.project-heading>summary::-webkit-details-marker{display:none}
.project-heading>summary>div{min-width:0}
.project-heading>summary>span{color:#95b5c3;font-size:16px}
.project-menu{position:absolute;z-index:40;top:calc(100% + 10px);left:0;width:min(320px,calc(100vw - 54px));padding:10px;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 30px #172b3a33}
.project-heading h1 { font-size:16px; margin:0; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.project-heading p { font-size:10px; margin:4px 0 0; color:#a1b9c5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.top-actions { display:flex; align-items:center; gap:8px; flex:none }
.local-badge { font-size:10px; color:#80dac3; white-space:nowrap }
.primary-nav { display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:thin; padding:0 12px; gap:4px }
.nav { display:flex; align-items:center; gap:7px; flex:none; width:auto; margin:0; padding:11px 13px; background:transparent; color:#aec5d0; border:0; border-bottom:3px solid transparent; border-radius:0; white-space:nowrap; font-size:12px; font-weight:600 }
.nav span { font-size:16px; line-height:1 }
.nav em { font-size:10px; color:#94afbc; background:#ffffff0c; padding:1px 5px; border-radius:4px; font-style:normal }
.nav:hover { color:#fff; background:#ffffff08 }
.nav.active { color:#fff; background:#ffffff08; border-bottom-color:#60d5c5 }
.nav.active span { color:#60d5c5 }
.nav.active em { color:#c4e9e3 }
.nav:disabled { opacity:.4; cursor:default }

.upload,
.print-button,
.subtle-button {
    border: 1px solid #dce3e8;
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #344755;
    white-space: nowrap
}

.upload input {
    display: none
}

.upload:hover,
.print-button:hover,
.subtle-button:hover {
    border-color: #89a6b4;
    background: #f9fbfc
}

.page {
    max-width: 1600px;
    margin: auto;
    padding: 34px 40px
}

.section-kicker { display:none }

.status {
    padding: 11px 14px;
    border: 1px solid #f1caca;
    border-radius: 8px;
    background: #fff0f0;
    color: #a43131;
    margin-bottom: 20px;
    font-size: 13px
}

.controls {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.15fr) minmax(230px, 1.25fr);
    gap: 14px;
    margin-bottom: 21px
}

.control {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
    box-shadow: 0 2px 10px #0d273008
}

.control label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    color: #94a0a9;
    margin-bottom: 5px
}

.control select {
    width: 100%;
    border: 0;
    outline: none;
    background: #fff;
    color: #233644;
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
    cursor: pointer
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px
}

.stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    white-space: nowrap
}

.stat .label {
    font-size: 11px;
    color: #687c89;
    font-weight: 500
}

.stat .value {
    font-size: 12px;
    font-weight: 700;
    color: #1b3444
}

.content-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: 0 3px 15px #0d273009;
    overflow: hidden;
    min-height: 500px
}

.panel-header {
    padding: 23px 27px 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line)
}

.panel-header h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    letter-spacing: -.02em;
    margin: 5px 0 2px
}

.panel-header p {
    margin: 0;
    color: #8a98a2;
    font-size: 12px
}

.panel-tools {
    display: flex;
    align-items: center;
    gap: 9px
}

.search-wrap {
    border: 1px solid #e2e7eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #8f9ca5;
    background: #fff;
    height: 37px
}

.search-wrap span {
    font-size: 19px;
    padding-right: 7px
}

.search-wrap input {
    border: 0;
    outline: none;
    width: 190px;
    font-size: 12px
}

.subtle-button {
    padding: 10px;
    font-size: 11px
}

.subtle-button.selected {
    background: #eaf8f4;
    border-color: #8fd5c7;
    color: #117c6b
}

.view {
    padding: 25px 27px 36px;
    overflow-x: auto
}

.options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-bottom: 16px
}

.print-options,
.report-options,
.visibility-options {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 0;
    color: #526572;
    font-size: 12px
}

.print-options[hidden], .report-options[hidden] { display: none }

.print-options label,
.report-options label,
.visibility-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer }

.print-heading { display: none }

.stripboard-header-block { position: relative }

.day {
    margin-bottom: 24px
}

.day-head {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e7ebed;
    padding: 14px 0 7px
}

.day:first-child .day-head {
    border-top: 0
}

.day-index {
    display: inline-grid;
    place-items: center;
    background: #e5f3f0;
    color: #0d8475;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    min-width: 64px;
    height: 25px
}

.day-head strong {
    font-size: 13px;
    color: #284252
}

.day-head small {
    font-size: 11px;
    color: #98a5ad
}

.day-head .day-total {
    margin-left: auto;
    color: #81919b;
    font-weight: 700
}

.strips {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap: 0;
    zoom: var(--live-board-zoom, 1)
}

.red-flag-icon {
    position: absolute;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: rgba(255,255,255,.9);
    color: #b72d3f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: help
}

.scene-flag-icon { right: 2px; top: 1px }

.strip-field.red-flag-field {
    justify-content: center;
    color: #b72d3f;
    font-size: 18px !important;
    font-weight: 800;
    line-height: 1
}

.strip-outer {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    width: max-content;
    position: relative
}

.strip-outer, .strip-outer * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}
.strip-outer[data-strip-index] { cursor: pointer; touch-action: pan-y; outline: none }
.strip-outer[data-strip-index]:focus-visible:not(.strip-selected) .strip-layout { outline: 2px solid #176d62; outline-offset: -3px }
.strip-outer.strip-long-press .strip-layout { box-shadow: 0 0 0 3px #168d7f66 }
.strip-outer.strip-selected .strip-layout { outline: 2px solid #168d7f; outline-offset: -3px }
.strip-outer.strip-selected::before {
    content: '';
    position: absolute;
    z-index: 4;
    left: -5px;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 999px;
    background: #168d7f
}
.strip-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing }
.strip-drag-preview {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    pointer-events: none;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #94bdb6;
    border-radius: 6px;
    background: #eaf6f2;
    color: #205e57;
    box-shadow: 0 5px 16px #17394033;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800
}
.strip-drop-indicator {
    position: fixed;
    z-index: 1002;
    pointer-events: none;
    border-radius: 3px;
    background: #078b7d;
    box-shadow: 0 0 0 1px #fff
}
.strip-drop-indicator::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #078b7d;
    box-shadow: 0 0 0 1px #fff
}
.strip-drop-indicator.vertical::before { top: -5px; left: -4px }

#undoMoveButton:disabled { opacity: .45; cursor: default }
.document-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end }
#dirtyIndicator { color: #6f828b; font-size: 12px; font-weight: 700 }
#dirtyIndicator.dirty { color: #ad5d22 }
#saveButton, #newBoardButton { border: 1px solid #bfd9d2; background: #eaf6f2; color: #167566; border-radius: 7px; padding: 9px 12px; font-weight: 800; cursor: pointer }
#saveButton:disabled { opacity: .6; cursor: wait }
.board-choice { display: flex; align-items: center; gap: 7px }
.board-choice select { flex: 1 }
#newBoardButton { padding: 4px 9px; font-size: 18px; line-height: 1 }
#moveDialog, #newBoardDialog { width: min(420px, calc(100vw - 32px)); border: 1px solid #d6e4e1; border-radius: 12px; box-shadow: 0 16px 50px #142f3c40; padding: 22px }
#moveDialog::backdrop, #newBoardDialog::backdrop { background: #172b3699 }
#moveDialog h2, #newBoardDialog h2 { margin: 0 0 8px; font-size: 19px }
#moveDialog p, #newBoardDialog p { margin: 0 0 18px; color: #647784 }
#moveDialog label, #newBoardDialog label { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 800 }
#moveDialog select, #newBoardDialog input { display: block; width: 100%; padding: 9px; border: 1px solid #d6e4e1; border-radius: 6px; background: white }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px }
.dialog-actions button { border: 1px solid #bfd9d2; border-radius: 6px; padding: 8px 13px; background: #eaf6f2; color: #176d62; font-weight: 700; cursor: pointer }

.strip-layout {
    position: relative;
    flex: none;
    background: #fbfcfc;
    border: 1px solid black;
    /*border-radius: 4px;*/
    overflow: hidden;
    color: #233441
}

.strips .strip-outer:not(:last-child) {
    margin-bottom: -1px
}

.strip-layout:hover {
    background: #f3f8f7;
    border-color: #9bc9bf
}

.strip-field {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.15;
    padding: 1px 2px;
    display: flex;
    align-items: center;
    min-width: 0
}

.strip-field.multiline {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    align-content: center
}

.strip-field.center {
    justify-content: center;
    text-align: center
}

.strip-field.right {
    justify-content: flex-end;
    text-align: right
}

.strip-field.muted {
    color: #83949d
}

.strip-field.line {
    padding: 0;
    background: #9aabb4;
    opacity: .55
}

.empty {
    padding: 35px 0;
    color: #9aa6ae;
    font-size: 13px
}

.orientation-note {
    margin-bottom: 15px;
    color: #74838c;
    font-size: 11px
}

.vertical-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.vertical-grid .strip-outer {
    display: block;
    min-width: 0
}

.vertical-grid .strip-layout {
    display: block
}

.vertical-grid .strip-outer[data-strip-index] { touch-action: pan-x pan-y }

.report-intro {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center
}

.pill {
    display: inline-block;
    border-radius: 20px;
    background: #e8f4f1;
    color: #127a6c;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em
}

.report-intro span:not(.pill) {
    font-size: 12px;
    color: #81909a
}

.paper {
    background: #fff;
    color: #000;
    box-shadow: 0 6px 30px #172b3a15;
    border: 1px solid #dce3e6;
    width: max-content;
    padding: 0 24px 24px;
    margin: auto;
    overflow: hidden
}

.report-block {
    position: relative;
    background: #fff;
    overflow: hidden
}

.record-block.record-separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #000
}

.record-block.preceded-by-layout-line::before { display: none }

.report-inline {
    border-bottom: 1px solid #e3e8eb;
    color: #526572;
    font-size: 11px;
    line-height: 1.35;
    padding: 3px 0;
    overflow-wrap: anywhere;
    break-inside: avoid
}

.report-shape {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding: 2px
}

.report-shape.line {
    padding: 0;
    background: #000
}

.report-shape.center {
    text-align: center
}

.report-shape.right {
    text-align: right
}

.report-shape.muted {
    color: #8a9ba5
}

.report-shape.multiline {
    white-space: normal;
    overflow-wrap: anywhere
}

.element-list {
    display: grid;
    gap: 0 4px;
    align-content: start
}

.element-entry, .element-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.allow-wrap .element-entry, .allow-wrap .element-name {
    white-space: normal;
    overflow-wrap: anywhere
}

.element-entry.with-id {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr)
}

.element-id { text-align: right; white-space: nowrap }
.element-entry.indented { padding-left: 1.5em }
.element-group + .element-group { margin-top: .3em }
.element-inline { padding-left: 1.5em }

.element-heading {
    margin-bottom: 2px;
    font-weight: 700
}

.record-caption {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 9px;
    color: #afbac1
}

.report-more {
    display: block;
    margin: 24px auto 0;
    background: #eef5f5;
    border: 0;
    border-radius: 7px;
    color: #226f70;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 12px
}

.report-notice {
    font-size: 11px;
    color: #81909b;
    text-align: center;
    margin-top: 16px
}

footer {
    font-size: 11px;
    color: #a2adb4;
    text-align: center;
    padding: 25px
}

footer span {
    padding: 0 8px
}

@media print {

    .app-header,
    .display-options,
    .topbar,
    .controls,
    .options-row,
    .print-options,
    .report-options,
    .visibility-options,
    .stats,
    .panel-tools,
    .print-button,
    footer,
    .report-more,
    .report-notice,
    .eyebrow,
    .title-row,
    .panel-header {
        display: none !important
    }
    .strip-drag-preview, .strip-drop-indicator,
    #moveDialog, #newBoardDialog { display: none !important }
    .strip-outer.strip-selected::before { display: none }
    .strip-outer.strip-selected .strip-layout { outline: none }

    .shell { display: block }

    .main { width: 100%; min-width: 0 }

    .main,
    .page {
        padding: 0;
        max-width: none
    }

    .title-row {
        margin: 0 0 10px
    }

    .title-row h1 {
        font-size: 20px
    }

    .content-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        min-height: 0
    }

    .panel-header {
        padding: 0 0 10px
    }

    .view {
        padding: 0;
        overflow: visible
    }

    #boardView .day { break-inside: auto }

    .record-block.keep-on-page { break-inside: avoid }
    .record-block.record-new-page + .record-block { break-before: page }

    .strip-outer { break-inside: avoid }

    .strip-outer { min-width: 0 }

    body.print-with-header #boardView .print-heading {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        font-weight: 700;
        overflow-wrap: anywhere
    }

    #boardView {
        width: max-content;
        max-width: none;
        padding-left: 0
    }

    #boardView.print-fit {
        zoom: min(calc(99vw / var(--print-board-width)), calc(90vh / var(--print-strip-height)))
    }

    #boardView .strips { zoom: 1 }

    #boardView.is-vertical { display: block; overflow: visible }

    #boardView.is-vertical .day { width: max-content }

    .strip-layout,
    .paper {
        box-shadow: none !important
    }

    html,
    body {
        background: #fff
    }
}

.strip-special {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
    white-space: normal;
    line-height: 1.16;
    overflow: hidden
}

.strip-special.banner-strip {
    background: #d5d6d7;
    color: #263746
}

.strip-special.day-break-strip {
    background: #68717a;
    color: #fff;
    justify-content: flex-start;
    text-align: left;
    font-weight: 700
}

.strip-special.vertical-special {
    writing-mode: vertical-rl;
    padding: 0 4px
}

.strip-layout.has-source-color .strip-field.line {
    background: currentColor
}

@media(max-width:1250px) {
    .panel-tools {
        flex-wrap: wrap;
        justify-content: flex-end
    }
}

@media(max-width:950px) {
    .panel-tools {
        justify-content: flex-start
    }
}

@media print {

    .strip-layout,
    .strip-special {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }
}

.version-badge {
    font-size: 11px;
    font-weight: 800;
    color: #657885;
    letter-spacing: .04em
}

footer a {
    color: #527f8c;
    text-decoration: none;
    font-weight: 700
}

footer a:hover {
    text-decoration: underline
}

#boardView .day {
    width: max-content;
    margin-bottom: 0
}

#boardView.is-vertical {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden
}

#boardView.is-vertical .day {
    flex: 0 0 auto;
    width: max-content;
    min-width: 0
}

#boardView.is-vertical .vertical-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content
}

#boardView.is-vertical .strip-outer {
    flex: 0 0 auto
}

.view[hidden], .control[hidden], #stats[hidden], #visibilityOptions[hidden], #panelTools[hidden] { display: none !important }
.controls { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.controls.minimal { grid-template-columns: minmax(190px, 320px) }
.controls .control:last-child { grid-column: auto }

.viewer-intro { color: #5f7380; font-size: 13px; line-height: 1.55; margin-bottom: 18px }
.viewer-intro p { margin: 0 }
.calendar-layout { display: grid; grid-template-columns: minmax(235px, 310px) minmax(0, 1fr); gap: 18px; align-items: start }
.viewer-side, .viewer-main { display: grid; gap: 16px; min-width: 0 }
.viewer-side > h3 { font-size: 12px; color: #728794; letter-spacing: .08em; text-transform: uppercase; margin: 1px 0 -6px }
.viewer-card { background: #fff; border: 1px solid #e0e8eb; border-radius: 10px; padding: 17px; min-width: 0 }
.viewer-card h3 { font-size: 16px; color: #1f3d4d; margin: 0 0 14px }
.viewer-card h4 { font-size: 12px; color: #677e8b; margin: 18px 0 8px }
.calendar-choices { display: grid; gap: 8px }
.calendar-choice { display: grid; gap: 6px; text-align: left; border: 1px solid #e0e8eb; border-radius: 9px; background: #fff; padding: 12px 13px; color: #657987; font-size: 11px }
.calendar-choice.selected { border-color: #47a99b; background: #f0f9f7; color: #366d68 }
.choice-title { font-size: 13px; font-weight: 800; color: #244554; display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.choice-title small { font-size: 8px; color: #157f70; letter-spacing: .08em; background: #d9f1e9; border-radius: 4px; padding: 3px 4px }
.date-facts { display: grid; gap: 9px }
.date-fact { display: flex; justify-content: space-between; gap: 10px; color: #83929a; font-size: 11px }
.date-fact strong { color: #324a58; white-space: nowrap }
.date-fact button { border: 0; background: transparent; color: #287f78; font-size: 11px; font-weight: 800; padding: 0; white-space: nowrap }
.weekday-chips { display: flex; flex-wrap: wrap; gap: 5px }
.weekday-chip { background: #e7f4ed; color: #35836b; padding: 5px 7px; border-radius: 5px; font-size: 10px; font-weight: 800 }
.weekday-chip.off { background: #e9edf0; color: #7e8e97 }
.month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.month-toolbar h3, .month-toolbar strong { margin: 0; color: #1f5361; font-size: 17px; text-transform: capitalize }
.month-toolbar button { border: 1px solid #dce5e9; border-radius: 7px; background: #fff; color: #287a79; font-size: 23px; line-height: 1; width: 32px; height: 31px }
.month-toolbar input[type="month"] { width: 127px; padding: 5px 6px; font-size: 11px; margin-left: auto }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px }
.month-weekday { text-align: center; color: #748792; font-size: 10px; font-weight: 800; padding: 0 2px 6px }
.month-cell, .month-blank { min-width: 0; min-height: 62px; border: 1px solid #e5ebee; border-radius: 6px; background: #fff }
.month-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 3px; padding: 6px; text-align: left; color: #244351 }
.month-cell:hover { border-color: #58a69c }
.month-cell.nonworking { background: #f1f3f5; color: #7b8a93 }
.month-cell.special { box-shadow: inset 3px 0 #e5a46a }
.month-cell.shooting { background: #eef8f5 }
.month-cell.outside-activity { background: #faf6ef; color: #938779 }
.month-cell.has-flags { box-shadow: inset 3px 0 #c75a66 }
.month-cell.selected { outline: 2px solid #158b7d; outline-offset: -2px }
.month-number { font-size: 12px; font-weight: 800 }
.month-meta { color: #aa3d4b; font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.month-cell.shooting .month-meta { color: #137e70 }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #6e818b; font-size: 10px; margin-top: 14px }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.legend-dot.work { background: #80c9a4 }.legend-dot.off { background: #a5b2ba }.legend-dot.outside { background: #ddc9a9 }.legend-dot.special { background: #e5a46a }.legend-dot.shoot { background: #2d9a85 }
.date-detail p { color: #617783; font-size: 12px; margin: 0 0 12px }
.detail-pills { display: flex; flex-wrap: wrap; gap: 7px }
.detail-pills span { border-radius: 16px; background: #edf4f5; color: #336470; padding: 5px 9px; font-size: 10px; font-weight: 700 }
.date-detail .scene-summary { margin: 12px 0 0; color: #788a94 }
.flag-filter-layout { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(320px, 1.5fr) minmax(190px, .8fr); align-items: start; gap: 15px; margin-bottom: 16px }
.viewer-label { display: block; font-size: 11px; font-weight: 800; color: #627986; margin: 12px 0 5px }
.viewer-card select, .viewer-card input[type="date"] { width: 100%; border: 1px solid #dce6ea; border-radius: 7px; background: #fff; padding: 8px; color: #263e4c; font-size: 12px }
.viewer-card select:disabled { background: #f1f3f4; color: #9aa7ae }
.viewer-card select[size] { min-height: 225px; padding: 4px }
.viewer-card select[size] option { padding: 7px 6px }
.viewer-hint { font-size: 11px; line-height: 1.5; color: #8b9aa2; margin: 10px 0 0 }
.date-range { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; align-items: end; margin-top: 12px }
.date-range label { font-size: 10px; font-weight: 800; color: #718590 }
.date-range input { display: block; margin-top: 4px }
.date-range button { border: 1px solid #dce6ea; background: #fff; color: #426675; padding: 8px; border-radius: 7px; font-size: 11px; font-weight: 700 }
.results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.results-heading span { color: #83949e; font-size: 11px }
.flag-results { margin-bottom: 16px }
.flag-table-wrap { overflow-x: auto }
.flag-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 12px; text-align: left }
.flag-table th { color: #637b88; background: #f3f7f8; font-size: 10px; letter-spacing: .05em }
.flag-table th, .flag-table td { border-bottom: 1px solid #e9eff1; padding: 9px 10px }
.flag-table tr[data-flag-id] { cursor: pointer }
.flag-table tr[data-flag-id]:hover, .flag-table tr.selected { background: #edf8f5 }
.flag-table tr[data-flag-id]:focus-visible { outline: 2px solid #138878; outline-offset: -2px }
.flag-table td:last-child { min-width: 220px }
.no-results { text-align: center; color: #8d9ca4; padding: 18px !important }
.flag-detail { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(230px, 2fr); gap: 20px; background: #f9fbfb }
.flag-detail p { color: #607683; font-size: 12px; line-height: 1.5; margin: 0 0 8px }
.flag-detail strong { font-size: 11px; color: #294b5b }
.flag-detail small { color: #9aa7ae; font-size: 10px }
.detail-kicker { color: #c15562; font-size: 9px; font-weight: 800; letter-spacing: .12em }
.viewer-empty { color: #8798a1; font-size: 13px }

@media(max-width:1100px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flag-filter-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flag-filter-layout > :last-child { grid-column: 1 / -1 }
}
@media(max-width:760px) {
  .calendar-layout, .flag-filter-layout { grid-template-columns: 1fr }
  .flag-filter-layout > :last-child { grid-column: auto }
  .month-cell, .month-blank { min-height: 48px }
}
@media(max-width:620px) {
  .controls { grid-template-columns: 1fr }
  .controls.minimal { grid-template-columns: 1fr }
  .flag-detail { grid-template-columns: 1fr }
  .date-range { grid-template-columns: 1fr 1fr }
  .date-range button { grid-column: 1 / -1 }
}

/* Read-only production data and complete calendar exception list. */
.production-cards{display:grid;gap:16px}
.calendar-exceptions{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px;font-size:12px;line-height:1.5}
.calendar-exceptions button{border:0;background:transparent;color:#168878;cursor:pointer;font:inherit;padding:0;text-align:left;font-weight:700}
.calendar-exceptions button:hover{text-decoration:underline}
.calendar-exceptions button:focus-visible{outline:2px solid #168878;outline-offset:3px}

/* Segment labels and spacing belong only to the editing UI. */
.subboard-picker{position:relative;margin-left:auto;flex:none}
.subboard-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;width:min(260px,calc(100vw - 60px));min-width:0;max-height:min(320px,50vh);overflow:auto;padding:8px;background:white;border:1px solid #dce6ea;border-radius:8px;box-shadow:0 5px 18px #172b3a18}
.subboard-menu[hidden]{display:none}
.subboard-menu label{display:flex;align-items:center;gap:8px;padding:7px 8px;font-size:12px;color:#3c5868;cursor:pointer}
.subboard-menu label:hover{background:#f0f8f6;border-radius:4px}
.subboard-menu input{accent-color:#168878;flex:none}
.subboard-menu label span{min-width:0;overflow-wrap:anywhere}
#boardView .board-segment{margin-top:12px}
#boardView .print-heading + .board-segment{margin-top:0}
.segment-heading{padding-bottom:5px;font-size:11px;font-weight:600;line-height:1.4;color:#758996}
#boardView.is-vertical .board-segment{flex:0 0 auto;margin-top:0;margin-right:12px;width:max-content}
#boardView.is-vertical .segment-days{display:flex;align-items:flex-start}
@media print{
 .subboard-menu,.segment-heading{display:none!important}
 #boardView .board-segment,#boardView.is-vertical .board-segment,#boardView .segment-days,#boardView.is-vertical .segment-days{display:contents!important;margin:0!important;padding:0!important}
}

#boardView.is-monochrome .strip-layout{background:#fff!important;color:#000!important}
#boardView.is-monochrome .strip-field,#boardView.is-monochrome .red-flag-icon{color:#000!important}
#boardView.is-monochrome .strip-field.line{background:#000!important}

/* Operational calendar and shared preview, using the existing workspace palette. */
.workspace-toolbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.workspace-toolbar label{display:flex;gap:8px;align-items:center}.workspace-toolbar select{max-width:220px;padding:5px;border:1px solid var(--line);border-radius:5px;background:#fff}
.workspace-toolbar button,.calendar-toolbar button,.calendar-rules button{border:1px solid #d0dddf;border-radius:5px;background:#fff;color:#21675f;padding:6px 9px;font-size:12px}
#splitHint{color:var(--muted);font-size:11px}.workspace-views{min-width:0}.workspace-views>.view{min-width:0}
.workspace-views.split{display:grid;grid-template-columns:minmax(0,calc((100% - 8px)*var(--split-ratio,.55))) 8px minmax(0,1fr);overflow:hidden}.workspace-views.split>.view{overflow:auto;margin:0;padding:8px;min-width:0;height:100%}
.workspace-views.split>#boardView,.workspace-views.split>#calendarView{grid-column:1}
.workspace-views.split.calendar-first>#boardView{grid-column:3}.workspace-views.split>#breakdownPreview{grid-column:3}.workspace-views.split>.view{grid-row:1}
.workspace-splitter{grid-column:2;grid-row:1;cursor:col-resize;background:#dce6e9;touch-action:none;position:relative}.workspace-splitter:hover,.workspace-splitter:focus-visible{background:#7dbaaf;outline:none}
.breakdown-preview{order:3;background:#fafcfc;padding:14px;border-left:1px solid var(--line)}
.breakdown-header{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px}.breakdown-header h3{margin:5px 0 0;font-size:18px}.breakdown-header small{color:var(--teal);font-size:10px;letter-spacing:.08em}.breakdown-header button{border:0;background:transparent;font-size:25px;color:#385363}
.breakdown-context{font-size:11px;color:#627986;padding:12px 0}.breakdown-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:0}.breakdown-fields>div{border-bottom:1px solid #e7ecee;padding:5px 0}.breakdown-fields dt{font-size:10px;color:#778995}.breakdown-fields dd{margin:3px 0;font-size:12px;overflow-wrap:anywhere}.breakdown-synopsis{font-size:13px;line-height:1.5;padding:12px;background:#fff;border:1px solid #e3eaec;border-radius:6px}.breakdown-empty-toggle{font-size:12px;display:flex;align-items:center;gap:7px;margin:12px 0}
.breakdown-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:start}.breakdown-category{border:1px solid #dde7e9;border-radius:6px;background:#fff;overflow:hidden}.breakdown-category h4{border-left:4px solid var(--category-color);padding:8px;margin:0;font-size:13px;border-bottom:1px solid #e4e9ec}.breakdown-category h4 small{font-size:11px;font-weight:400;color:#718594}.breakdown-category>p{font-size:11px;color:#8b9aa2;margin:9px}.breakdown-element{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:12px;padding:8px;border-bottom:1px solid #edf0f1;overflow-wrap:anywhere}.breakdown-element strong{flex:1 1 110px;font-weight:500}.breakdown-element small{flex-basis:100%;color:#6b7d88;font-size:10px}.element-quantity{white-space:nowrap;font-size:11px;color:#57766b}
#calendarView{padding:12px}.calendar-context{display:flex;flex-direction:column;gap:4px;font-size:12px;margin-bottom:10px}.calendar-context span{color:#748892;font-size:11px;overflow-wrap:anywhere}.calendar-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:11px}.calendar-toolbar input{border:1px solid #d3dfe3;border-radius:5px;padding:5px;font-size:12px;background:#fff}.calendar-toolbar label{display:flex;gap:5px;align-items:center}.month-navigation{display:flex;gap:3px}.calendar-view-menu{position:relative}.calendar-view-menu summary{cursor:pointer;padding:6px 9px;color:#21675f;border:1px solid #d0dddf;border-radius:5px;list-style:none}.calendar-view-options{position:absolute;top:100%;right:0;background:#fff;border:1px solid #d3e0e3;box-shadow:0 8px 24px #172b3a22;padding:10px;z-index:10;min-width:210px;display:grid;gap:8px;border-radius:7px}.calendar-view-options label{font-size:12px}
.calendar-operational-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}.calendar-operational-layout.with-rules{grid-template-columns:minmax(0,1fr) 225px}.calendar-grid-scroll{min-width:0;overflow:auto}.operational-grid{display:grid;grid-template-columns:repeat(var(--calendar-columns),minmax(110px,1fr));gap:1px;background:#d8e2e6;border:1px solid #d8e2e6;min-width:calc(var(--calendar-columns)*110px)}.operational-weekday{background:#edf3f4;text-align:center;font-size:10px;font-weight:700;padding:6px}.operational-cell{background:#fff;min-width:0;min-height:68px;display:flex;flex-direction:column}.operational-cell.nonworking{background:#f3f5f6}.operational-cell.adjacent-month{background:#f7f9fa}.operational-cell.selected{outline:2px solid var(--teal);outline-offset:-2px}.civil-date{border:0;background:transparent;width:100%;padding:5px;text-align:left;display:flex;gap:4px;justify-content:space-between;align-items:start;font-size:11px;color:#344e5c}.civil-date span{font-size:9px;text-align:right;color:#7c8d95;max-width:85px}.cell-content{padding:0 3px 4px;overflow:visible;flex:0 0 auto}.calendar-shooting-day{margin:3px 0}.calendar-summary{background:#29424f;color:#fff;padding:4px;font-size:10px;line-height:1.4;border-radius:3px;margin-bottom:3px}.calendar-summary small{display:block;opacity:.7;font-size:9px}.calendar-strip{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) max-content;gap:2px 5px;width:100%;border:1px solid #172b3a14;border-radius:2px;padding:4px;margin:2px 0;text-align:left;font-size:10px;line-height:1.25}.calendar-strip>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-strip small{font-size:8px;grid-column:1/-1;opacity:.75}.calendar-strip .mini-synopsis{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9px}.calendar-strip.selected{outline:1px solid #077d70;outline-offset:-1px}.calendar-strip.active{outline:2px solid #e7492e;outline-offset:-2px}.calendar-strip:focus-visible{outline:2px solid #2563eb}.calendar-banner{padding:4px;margin:2px 0;font-size:10px;line-height:1.3;border-radius:2px;overflow-wrap:anywhere}.calendar-event,.calendar-flag,.calendar-conflict{font-size:10px;padding:3px;margin:2px 0;border-radius:3px;overflow-wrap:anywhere}.calendar-event{background:#e4f0f8;color:#1d5a81}.calendar-flag{background:#fff0ee;color:#993d36}.calendar-conflict{background:#fff2d9;color:#935b0d}.calendar-note{font-size:11px;color:#71838f;line-height:1.5;margin:8px 0}.calendar-selected-detail{border:1px solid var(--line);border-radius:5px;padding:8px;margin-top:10px;font-size:12px}.selected-date-content{max-width:520px;margin-top:8px}.selected-date-content .mini-synopsis{display:block;-webkit-line-clamp:unset}.calendar-rules{padding:12px;background:#f5f9f9;border:1px solid #d7e5e7;border-radius:7px;display:grid;gap:9px;font-size:12px}.calendar-rules h3,.calendar-rules h4{margin:2px 0;font-size:13px}.calendar-rules label{display:grid;gap:5px;font-size:11px}.calendar-rules input[type=date],.calendar-rules select{width:100%;min-width:0;border:1px solid #d3e0e3;border-radius:5px;background:#fff;padding:6px;font-size:12px}.calendar-week-rules{display:flex;flex-wrap:wrap;gap:7px}.calendar-week-rules label{display:flex;align-items:center;gap:2px}.rules-target{font-size:11px;line-height:1.5;overflow-wrap:anywhere;margin:0}.reschedule-plan{border:1px solid var(--line);border-radius:5px;padding:10px;margin-bottom:8px;font-size:12px}.reschedule-plan p{font-size:12px!important;margin:6px 0}#rescheduleDialog{max-width:650px;width:calc(100% - 32px);max-height:85vh;overflow:auto}
@media(max-width:1500px){.workspace-views.split .calendar-operational-layout.with-rules{grid-template-columns:minmax(0,1fr)}.workspace-views.split .calendar-rules{order:-1}}
@media(max-width:1200px){.workspace-views.split{display:block;height:auto;overflow:visible}.workspace-splitter{display:none}.calendar-operational-layout.with-rules{grid-template-columns:minmax(0,1fr)}.calendar-rules{order:-1}}

@media print{.workspace-toolbar,.workspace-splitter,.breakdown-preview,.calendar-toolbar,.calendar-rules{display:none!important}.workspace-views.split{display:block;height:auto;overflow:visible}.workspace-views.split>.view{height:auto;overflow:visible}.cell-content{max-height:none;overflow:visible}}
.workspace-toolbar[hidden],.workspace-splitter[hidden],.calendar-rules[hidden]{display:none!important}

#panelTools:has(#search[hidden]) .search-wrap{display:none}
.workspace-views.split .calendar-operational-layout.with-rules{grid-template-columns:minmax(0,1fr)}
.workspace-views.split .calendar-rules{order:0}
.operational-grid{grid-template-columns:repeat(var(--calendar-columns),minmax(82px,1fr));min-width:calc(var(--calendar-columns)*82px)}

.calendar-strip-number{max-width:6ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-strip-pages{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.calendar-density-option{border-bottom:1px solid var(--line);padding-bottom:8px}

/* Compact workspace: controls stay outside the independently scrolling content. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid #268d82;outline-offset:2px}
.strip-mobile-summary{display:none}
.agenda-weekday{display:none}
@media screen {
  .shell{height:100dvh;min-height:0;overflow:hidden}
  .main{display:flex;min-height:0}
  .page{display:flex;flex-direction:column;flex:1;min-height:0;max-width:none;width:100%;padding:0 12px;margin:0}
  .top-actions .upload,.top-actions .print-button,.top-actions #saveButton{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;min-height:32px;border-radius:5px;font-size:11px;background:#ffffff09;border-color:#ffffff30;color:#e4f0f3;cursor:pointer}
  .top-actions #saveButton{background:#7ce0ca;color:#143f3a;border-color:#7ce0ca}
  .top-actions .upload:hover,.top-actions .print-button:hover{background:#ffffff17}
  .top-actions #dirtyIndicator{font-size:10px;color:#adc4ce;white-space:nowrap}
  .top-actions #dirtyIndicator.dirty{color:#ffd69b}
  .controls,.controls.minimal{display:flex;flex-wrap:wrap;gap:7px;padding:7px 0;margin:0;flex:none}
  .control{flex:1 1 160px;min-width:0;border-radius:4px;padding:4px 8px;background:#edf2f4;box-shadow:none}
  .control label{font-size:9px;letter-spacing:.07em;margin-bottom:3px;color:#657c88}
  .control select{font-size:12px;font-weight:600;background:transparent;min-height:21px;outline:revert}
  .project-menu .control{border:0}
  #boardControl{flex-grow:1.2}
  .controls.minimal .control{flex:0 1 300px}
  .controls:not(:has(>.control:not([hidden]))){display:none}
  .board-choice{gap:4px}
  #newBoardButton{padding:0;width:23px;height:23px;font-size:17px;border-radius:4px;flex:none}
  .status{margin:6px 0 0;padding:7px 10px;border-radius:4px;flex:none}
  .stats{gap:0;flex:none;margin:0;padding:0 0 7px;overflow-x:auto;flex-wrap:nowrap}
  .stat{background:transparent;border:0;border-radius:0;padding:2px 12px;gap:6px;border-right:1px solid #d6e0e5}
  .stat:first-child{padding-left:2px}
  .stat:last-child{border:0}
  .stat .label{font-size:10px}.stat .value{font-size:11px;font-variant-numeric:tabular-nums}
  .content-panel{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:5px;box-shadow:none;overflow:visible}
  .panel-header{position:relative;flex:none;padding:7px 10px;gap:10px;align-items:center;flex-direction:row;background:#f7f9fa;border-radius:5px 5px 0 0;min-height:45px}
  .panel-heading{flex:1;min-width:90px}
  .panel-header h2{font-family:inherit;font-size:14px;letter-spacing:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .panel-header p{font-size:10px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6d838f}
  .panel-tools{gap:5px;flex:none;width:auto;flex-wrap:wrap;justify-content:flex-end}
  .search-wrap{height:30px;padding:0 7px;border-radius:4px}
  .search-wrap input{width:170px;max-width:100%;font-size:11px;background:transparent}
  .subtle-button{padding:6px 8px;font-size:11px;border-radius:4px;min-height:30px}
  .subboard-picker{margin-left:0}
  .display-options{position:relative;flex:none;font-size:11px}
  .display-options>summary{list-style:none;cursor:pointer;border:1px solid #dce3e8;border-radius:4px;padding:7px 8px;white-space:nowrap;min-height:30px;background:white;color:#344755;font-weight:600}
  .display-options>summary::-webkit-details-marker{display:none}
  .display-options[open]>summary{border-color:#69b9ab;color:#0b776b}
  .display-options .options-row{position:absolute;right:0;top:calc(100% + 5px);z-index:25;width:250px;margin:0;padding:12px;background:#fff;border:1px solid #d9e3e7;border-radius:5px;box-shadow:0 6px 20px #172b3a22;display:grid;gap:12px}
  .display-options .print-options,.display-options .report-options,.display-options .visibility-options{flex-direction:column;gap:11px;font-size:12px}
  .display-options .control{padding:6px;flex:none}
  input[type=checkbox]{accent-color:var(--teal)}
  .workspace-toolbar{padding:5px 10px;gap:8px;flex:none;min-height:36px}
  .workspace-toolbar label{gap:5px;font-size:11px}
  .workspace-toolbar select{font-size:11px;padding:4px 6px}
  .workspace-toolbar button{font-size:11px;padding:5px 8px}
  #splitHint{margin-left:auto;font-size:10px}
  .workspace-views{flex:1;min-height:0;overflow:hidden;border-radius:0 0 5px 5px}
  .workspace-views:not(.split)>.view:not([hidden]){height:100%;overflow:auto;overscroll-behavior:contain}
  .workspace-views.split{height:auto;min-height:0}
  .workspace-views.split>.view{overscroll-behavior:contain}
  .view,#calendarView{padding:8px 10px}
  #boardView .board-segment{margin-top:6px}
  .segment-heading{padding:0 0 4px;font-size:10px}
  .workspace-splitter::after{content:'';position:absolute;left:2px;top:calc(50% - 18px);width:4px;height:36px;border-radius:3px;background:#9db4bd}
  .workspace-splitter:hover,.workspace-splitter:focus-visible,.workspace-splitter.dragging{background:#c3e5de;outline:0}
  .workspace-splitter:hover::after,.workspace-splitter:focus-visible::after,.workspace-splitter.dragging::after{background:var(--teal)}
  .breakdown-preview{background:#fff;padding:8px 10px}
  .workspace-views.preview-only .breakdown-preview{border-left:0}
  .page.breakdown-focus>.controls,.page.breakdown-focus>.stats,.page.breakdown-focus .panel-header{display:none}
  .page.breakdown-focus .content-panel{margin-top:7px}
  .breakdown-header{padding-bottom:7px;gap:8px}
  .breakdown-header h3{font-size:16px;margin:2px 0 0}
  .breakdown-header small{font-size:9px}
  .breakdown-navigation{display:flex;align-items:center;gap:5px}
  .breakdown-navigation button{font-size:22px;border:1px solid #d7e1e5;border-radius:4px;width:30px;height:30px;line-height:1;display:grid;place-items:center;background:#f6f9fa}
  .breakdown-navigation button:disabled{opacity:.3;cursor:default}
  .breakdown-scene-picker{display:flex;align-items:center;gap:8px;margin:7px 0 0;font-size:11px;color:#6c828e}
  .breakdown-scene-picker select{border:1px solid #dce6e9;border-radius:4px;background:#f6f9fa;min-width:0;flex:1;padding:5px;font-size:12px;color:#28414f}
  .breakdown-context{padding:7px 0;font-size:10px}
  .breakdown-fields{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 10px}
  .breakdown-fields>div{padding:4px 0}
  .breakdown-fields dt{font-size:9px}
  .breakdown-fields dd{font-size:12px;margin:3px 0}
  .breakdown-synopsis{font-size:12px;line-height:1.4;padding:8px;margin:8px 0;background:#f5f8f9;border-radius:4px}
  .breakdown-empty-toggle{font-size:11px;margin:8px 0}
  .breakdown-categories{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px}
  .breakdown-category{border-radius:4px}
  .breakdown-category h4{font-size:12px;padding:7px;background:#f8fafb}
  .breakdown-element{padding:6px 8px;min-height:28px;font-size:12px}
  .calendar-context{flex-direction:row;align-items:center;gap:8px;margin-bottom:6px;font-size:11px}
  .calendar-context span{font-size:10px}
  .calendar-toolbar{gap:6px;margin-bottom:7px}
  .calendar-toolbar button,.calendar-toolbar input,.calendar-view-menu summary{min-height:30px;padding:5px 7px}
  .calendar-operational-layout{gap:8px}
  .calendar-summary{padding:3px 4px;line-height:1.3}
  .calendar-summary small{font-size:8px}
  .calendar-strip{padding:3px 4px;line-height:1.2}
  .calendar-strip-set{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .calendar-banner{padding:3px 4px}
  .calendar-note{font-size:10px;margin:6px 0}
  .operational-cell{min-height:56px}
  .operational-cell:not(:has(.cell-content>:not(:empty))){min-height:32px}
  .calendar-agenda-toggle{display:none}
  .viewer-card{padding:12px;border-radius:5px}
  .flag-filter-layout,.production-cards{gap:10px;margin-bottom:10px}
  .month-toolbar{margin-bottom:8px}
  .flag-table th,.flag-table td{padding:7px 8px}
  footer{display:flex;gap:5px;align-items:center;flex:none;margin:0;padding:5px 2px;font-size:9px;color:#81949f}
  footer span{padding:0}.footer-local{margin-left:auto}
}
@media screen and (max-width:1200px) {
  .topbar{gap:12px}.local-badge{display:none}
  .panel-heading{min-width:80px}
  .workspace-views.split{display:block}
}
@media screen and (max-width:950px) {
  .topbar{padding:8px 12px;flex-wrap:wrap}
  .project-heading{padding-left:12px}
  .brand{font-size:10px}
  .top-actions #dirtyIndicator:not(.dirty){display:none}
  .primary-nav{padding:0 8px}.nav{padding:10px;font-size:12px}
  .page{padding:0 8px}
  .control{flex-basis:145px}
  .search-wrap input{width:135px}
  .panel-header{flex-wrap:wrap;gap:6px}
  .panel-tools{flex:1 1 auto}
}
@media screen and (max-width:620px) {
  .topbar{gap:7px;padding:7px 10px;flex-direction:row;min-height:0}
  .brand>span:last-child{display:none}.brand-mark{font-size:24px}
  .project-heading{padding-left:0;border:0;flex:1 1 calc(100% - 40px)}
  .project-heading h1{font-size:14px}.project-heading p{font-size:9px;margin-top:2px}
  .top-actions{width:100%;gap:7px;flex-wrap:nowrap;justify-content:flex-end}
  .top-actions #dirtyIndicator{margin-right:auto;font-size:9px;white-space:normal}
  .top-actions #dirtyIndicator:not(.dirty){display:block}
  .top-actions .upload{margin-left:0}
  .top-actions .upload,.top-actions .print-button,.top-actions #saveButton{min-height:34px;padding:6px 9px;font-size:11px}
  .primary-nav{gap:0;padding:0 5px}
  .nav{padding:10px 9px;min-height:42px;font-size:11px;gap:5px}.nav span{font-size:14px}.nav em{display:none}
  .controls,.controls.minimal{gap:5px;padding:5px 0}
  .control{flex:1 1 calc(50% - 5px)!important;padding:3px 6px}
  .control label{font-size:8px;letter-spacing:.04em;margin-bottom:1px}
  .control select{font-size:12px;min-height:24px}
  .stats{padding-bottom:5px}
  .stat{padding:2px 8px;gap:4px}.stat .label{font-size:9px}.stat .value{font-size:10px}
  .panel-header{padding:6px 7px}
  .panel-heading{flex:1 1 40%;min-width:0}.panel-header h2{font-size:12px}
  .panel-header p{display:none}
  .panel-tools{order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:nowrap}
  .panel-tools .search-wrap{flex:1 1 70px;width:0;min-width:65px;height:32px}
  .search-wrap input{width:100%;font-size:16px}
  .subtle-button{font-size:10px;padding:5px;min-height:32px}
  .display-options>summary{font-size:10px;padding:7px;min-height:32px}
  .workspace-toolbar{padding:5px 7px;min-height:38px}.workspace-toolbar button{min-height:32px}
  .view,#calendarView{padding:6px}
  .calendar-context{display:none}
  .calendar-toolbar{gap:5px;align-items:center}
  .calendar-toolbar input{font-size:12px;min-width:0;max-width:140px}
  .calendar-toolbar label{font-size:10px}.calendar-toolbar button,.calendar-view-menu summary{min-height:34px;font-size:11px}
  .calendar-toolbar .month-navigation{order:0}
  .calendar-toolbar .calendar-view-menu{order:1}
  #calendarRulesToggle{order:2}
  .calendar-toolbar label{order:3}
  .calendar-toolbar [data-go-date]{order:4}
  body[data-view=calendar] .panel-header .panel-heading{flex:0 1 auto}
  body[data-view=calendar] .panel-tools{order:0;flex:1 1 auto;justify-content:flex-end}
  .calendar-agenda-toggle{display:inline-block;border:1px solid #d0dddf;border-radius:4px;background:#f5f8f9;color:#21675f;padding:6px 9px;font-size:11px;min-height:34px;margin-bottom:6px}
  .calendar-grid-scroll.agenda-mobile .operational-grid{display:block;min-width:0;background:white}
  .calendar-grid-scroll.agenda-mobile .operational-weekday{display:none}
  .calendar-grid-scroll.agenda-mobile .operational-cell{display:grid;grid-template-columns:65px minmax(0,1fr);min-height:36px;border-bottom:1px solid #dce5e9}
  .calendar-grid-scroll.agenda-mobile .operational-cell.adjacent-month{display:none}
  .calendar-grid-scroll.agenda-mobile .operational-cell:not(:has(.cell-content>:not(:empty))):not(.selected){display:none}
  .calendar-grid-scroll.agenda-mobile .civil-date{flex-direction:column;justify-content:flex-start;padding:8px 6px;gap:3px}
  .calendar-grid-scroll.agenda-mobile .civil-date b{font-size:13px}
  .calendar-grid-scroll.agenda-mobile .agenda-weekday{display:block;font-size:10px;text-transform:uppercase;color:#607b89}
  .calendar-grid-scroll.agenda-mobile .civil-date span{text-align:left;font-size:9px}
  .calendar-grid-scroll.agenda-mobile .cell-content{padding:3px 5px}
  .calendar-grid-scroll.agenda-mobile .calendar-strip{font-size:12px;min-height:34px;align-items:center;padding:5px 6px;margin:3px 0}
  .calendar-grid-scroll.agenda-mobile .calendar-summary{font-size:10px}
  .calendar-grid-scroll.agenda-mobile .calendar-summary small{display:inline;font-size:8px;margin-left:5px}
  .calendar-grid-scroll.agenda-mobile .calendar-banner{min-height:28px;font-size:11px;padding:6px}
  .calendar-grid-scroll.agenda-mobile .calendar-strip.extended .mini-synopsis{font-size:11px}
  .breakdown-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
  .breakdown-categories{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
  .breakdown-category h4{font-size:11px}.breakdown-element{font-size:11px;padding:6px;min-height:30px}
  .breakdown-navigation button{width:36px;height:36px}
  .breakdown-scene-picker select{font-size:16px;min-height:36px}
  .viewer-card{padding:8px}
  footer{font-size:8px;padding:4px 1px}
}
@media print {
  .strip-mobile-summary,.breakdown-scene-picker{display:none!important}
  body[data-print-view=breakdown] #breakdownPreview{display:block!important;height:auto;overflow:visible;border:0;padding:0;background:white}
  body[data-print-view=breakdown] .workspace-views{display:block;overflow:visible;height:auto}
  .breakdown-navigation,.breakdown-empty-toggle{display:none!important}
  .breakdown-category{break-inside:avoid}
}

/* A narrow desktop pane uses the same readable rows as a phone. */
@media screen {
  #boardView.compact-board.is-vertical{display:block;overflow:auto}
  #boardView.compact-board .board-segment,#boardView.compact-board.is-vertical .board-segment{width:100%;margin-right:0}
  #boardView.compact-board.is-vertical .segment-days,#boardView.compact-board .day,#boardView.compact-board.is-vertical .day{display:block;width:100%}
  #boardView.compact-board .strips,#boardView.compact-board.is-vertical .vertical-grid{display:flex;flex-direction:column;width:100%;zoom:1}
  #boardView.compact-board .strip-outer{display:flex;width:100%;min-width:0;flex:none;touch-action:pan-y}
  #boardView.compact-board .strip-layout:not(.strip-special){display:none}
  #boardView.compact-board .strip-mobile-summary{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:3px 6px;width:100%;min-height:46px;padding:6px 7px;border-bottom:1px solid #172b3a30;font-size:12px;line-height:1.25}
  .strip-mobile-summary .mobile-scene-number{grid-row:1/3;font-weight:800;font-size:14px;align-self:center;overflow-wrap:anywhere}
  .strip-mobile-summary .mobile-scene-set{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .strip-mobile-summary .mobile-scene-meta{font-size:10px;white-space:nowrap}
  .strip-mobile-summary .mobile-scene-synopsis{grid-column:2/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;opacity:.85}
  #boardView.compact-board .strip-special{width:100%!important;height:auto!important;min-height:32px;writing-mode:horizontal-tb;font-size:12px!important;line-height:1.3;padding:6px 8px;justify-content:flex-start;text-align:left}
  #boardView.compact-board .strip-outer.strip-selected .strip-mobile-summary{outline:2px solid #077d70;outline-offset:-2px}
  #boardView.compact-board .strip-outer.strip-active .strip-mobile-summary{box-shadow:inset 3px 0 #e7492e}
  #boardView.compact-board .strip-outer:focus-visible .strip-mobile-summary{outline:2px solid #2563eb;outline-offset:-2px}
  #boardView.compact-board.is-monochrome .strip-mobile-summary{background:white!important;color:black!important}
}

/* Standard layouts use readable fields at every pane width. */
.strip-fields-picker{border:0;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:11px}
.strip-fields-picker legend{font-weight:700;padding:0;margin-bottom:8px}
.strip-fields-picker label{display:flex;gap:5px;align-items:center;min-width:0;overflow-wrap:anywhere}
.display-options .options-row{max-height:calc(100dvh - 180px);overflow:auto;width:310px;max-width:calc(100vw - 24px)}
.calendar-strip-menu .calendar-view-options{width:310px;max-height:65dvh;overflow:auto;max-width:calc(100vw - 24px)}
.calendar-strip-menu .calendar-view-options>label{display:grid;gap:5px}
.calendar-strip-menu select{width:100%;font-size:12px;padding:5px;border:1px solid var(--line);border-radius:3px}
#boardView.is-standard .strips{width:100%;zoom:1}
#boardView.is-standard .standard-outer{width:100%;min-width:0}
#boardView.is-standard .strip-layout{display:flex!important;width:100%;min-height:28px;height:auto;max-width:100%;box-sizing:border-box}
.standard-strip{flex-wrap:wrap;gap:3px 9px;padding:5px 8px;align-items:baseline;border-bottom:1px solid #172b3a20;font-size:12px;line-height:1.3}
.standard-field{flex:var(--field-weight,1) 1 50px;min-width:0;overflow-wrap:anywhere}
.standard-field[data-strip-field=scene]{flex:0 0 38px;font-weight:700}
.standard-field[data-strip-field=set]{font-weight:600;min-width:100px}
.standard-field[data-strip-field=synopsis],.standard-field[data-strip-field=comments]{flex-basis:100%;font-size:11px}
.standard-field[data-strip-field^="category:"],.standard-field[data-strip-field=location],.standard-field[data-strip-field=sequence]{min-width:100px}
.standard-field[data-strip-field^="category:"]::before{content:attr(data-strip-label) ': ';font-size:10px;opacity:.7}
#boardView.is-standard .strip-special{padding:6px 8px;font-size:11px}
.calendar-strip.configured-fields{display:flex;flex-wrap:wrap;gap:3px 5px}
.calendar-strip.configured-fields>[data-strip-field]{min-width:0;overflow-wrap:anywhere;flex:1 1 40px}
.calendar-strip.configured-fields>[data-strip-field=scene]{flex:0 0 auto}
.calendar-strip.configured-fields>[data-strip-field=set]{flex:2 1 70px;white-space:normal}
.calendar-strip.configured-fields>[data-strip-field=synopsis],.calendar-strip.configured-fields>[data-strip-field=comments],.calendar-strip.configured-fields>[data-strip-field^="category:"]{flex-basis:100%;font-size:9px;white-space:normal}
.calendar-banner{display:block;width:100%;border:1px solid #172b3a14;text-align:left;cursor:grab}
.calendar-strip,.calendar-banner{touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.calendar-banner.selected{outline:1px solid #077d70;outline-offset:-1px}
.calendar-banner.active{outline:2px solid #e7492e;outline-offset:-2px}
.calendar-drop-target{box-shadow:inset 0 0 0 3px #0c877c!important;background:#edf9f6!important}
.calendar-drop-target .cell-content:empty{min-height:35px}
@media print{#boardView.is-standard .strips{width:100%!important;zoom:1!important}#boardView.is-standard .strip-layout{display:flex!important}#boardView.is-standard .standard-outer{break-inside:avoid}}
.calendar-strip-menu{position:relative}
.calendar-strip-menu>summary{cursor:pointer;padding:5px 7px;min-height:30px;color:#21675f;border:1px solid #d0dddf;border-radius:5px;list-style:none}
@media(max-width:620px){.calendar-strip-menu>summary{min-height:34px;font-size:11px}.calendar-strip-menu .calendar-view-options{position:fixed;left:12px;right:12px;top:140px;width:auto;z-index:30}}
#boardView.is-standard .day{width:100%;min-width:0}
#boardView.is-standard .standard-strip{border-color:#a9b8bf;border-bottom-color:#899ba6}
@media print{#boardView.is-standard{width:100%;max-width:100%;zoom:1!important}#boardView.is-standard .day{width:100%}}

/* DOOD is a single operational projection; print pagination lives in the shared service. */
#doodView{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#doodView[hidden]{display:none}
.dood-toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:12px 16px;border-bottom:1px solid #d9e1e5;background:#f7fafb;font-size:12px}
.dood-toolbar label,.dood-rule-controls label{display:flex;gap:5px;align-items:center}
.dood-toolbar button,.dood-toolbar select,.dood-toolbar input,.dood-rule-controls select,.dood-rule-controls input,.dood-rule-controls button{font:inherit;min-height:29px;border:1px solid #c8d3d9;border-radius:4px;background:white;padding:4px 7px;color:#263943}
.dood-toolbar input[type=checkbox],.dood-rule-controls input[type=checkbox]{min-height:0}
.dood-toolbar input[type=date]{max-width:130px}
.dood-menu{position:relative}.dood-menu summary{cursor:pointer;padding:6px 9px;list-style:none;border:1px solid #c8d3d9;border-radius:4px;background:white}
.dood-menu>div{position:absolute;top:100%;left:0;z-index:30;background:white;border:1px solid #c8d3d9;box-shadow:0 5px 20px #142d3e20;padding:12px;min-width:270px;display:grid;gap:10px}
.dood-rules,.dood-diagnostics{padding:8px 16px;font-size:12px;border-bottom:1px solid #d9e1e5}.dood-rules summary,.dood-diagnostics summary{cursor:pointer}.dood-rule-controls{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}.dood-rule-controls input[type=number]{width:70px}.dood-rules p{color:#62747e;margin:8px 0}
.dood-grid-scroll{overflow:auto;flex:1;min-height:150px;position:relative;overscroll-behavior:contain}
.dood-grid{border-collapse:separate;border-spacing:0;font-size:12px;table-layout:fixed;width:max-content;min-width:100%;--dood-date-width:54px;--dood-row-height:32px}
.dood-grid-scroll.compact .dood-grid{--dood-date-width:42px;--dood-row-height:27px;font-size:11px}
.dood-grid th,.dood-grid td{padding:0;border-right:1px solid #d9e1e5;border-bottom:1px solid #d9e1e5;text-align:center;min-width:var(--dood-date-width);width:var(--dood-date-width);height:var(--dood-row-height);background:#fff;color:#344650}
.dood-grid thead th{position:sticky;top:0;z-index:5;height:23px;font-weight:500;background:#eaf0f3}
.dood-grid thead tr:nth-child(2) th{top:23px}.dood-grid thead tr:nth-child(3) th{top:46px}.dood-grid thead tr:nth-child(4) th{top:69px}
.dood-grid .dood-id,.dood-grid .dood-name,.dood-grid .dood-worked,.dood-grid .dood-held{position:sticky;z-index:4;background:#f7fafb}
.dood-grid .dood-id{left:0;width:44px;min-width:44px}.dood-grid .dood-name{left:44px;width:200px;min-width:200px;text-align:left;padding:0 9px;white-space:normal;overflow-wrap:anywhere;font-weight:500}
.dood-grid .dood-worked{left:244px;width:54px;min-width:54px}.dood-grid .dood-held{left:298px;width:46px;min-width:46px;box-shadow:2px 0 3px #26394312}
.dood-grid thead .dood-id,.dood-grid thead .dood-name,.dood-grid thead .dood-worked,.dood-grid thead .dood-held{z-index:8;background:#eaf0f3}
.dood-grid .nonworking{background:#eef0f2}.dood-grid .dood-dropped{color:#a5adb3}
.dood-grid td button{border:0;border-radius:0;background:transparent;color:inherit;width:100%;height:100%;min-height:var(--dood-row-height);padding:2px;font:inherit;cursor:pointer;white-space:normal;line-height:1.1}
.dood-grid td button:hover{background:#ddece9}.dood-grid td button.selected{background:#d1e8e3;box-shadow:inset 0 0 0 2px #318779}.dood-conflict{color:#a74438!important}
.dood-legend{padding:9px 16px;font-size:10px;color:#62747e;border-top:1px solid #d9e1e5;background:#f7fafb}.dood-empty{padding:18px}
.dood-cell-detail{position:relative;max-height:34vh;overflow:auto;padding:12px 18px;border-top:1px solid #c8d3d9;background:#f7fafb;font-size:12px}.dood-cell-detail h3{font-size:14px;margin:0 0 8px}.dood-cell-detail h4{margin:12px 0 6px}.dood-cell-detail #doodCloseCell{float:right}.dood-cell-detail button{border:1px solid #c8d3d9;border-radius:4px;background:white;padding:5px 9px;margin-right:6px;font:inherit;cursor:pointer}
.studio-print-dialog{width:min(96vw,1500px);max-width:96vw;height:94vh;max-height:94vh;border:0;border-radius:8px;padding:16px;overflow:hidden;background:#f5f7f8}
.studio-print-dialog[open]{display:flex;flex-direction:column;gap:10px}.studio-print-dialog::backdrop,.production-event-dialog::backdrop{background:#102a3d88}.print-service-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.print-service-header h2{font-size:18px;margin:0}.print-service-controls{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px}.print-service-controls label{display:flex;gap:5px;align-items:center}.print-service-controls label[hidden]{display:none}.print-service-controls input[type=number]{width:60px}.print-service-controls input,.print-service-controls select,.print-service-controls button,.print-service-header button{font:inherit;padding:5px;border:1px solid #bdcbd3;border-radius:4px;background:white}.print-service-status{font-size:11px;margin:0;color:#526772}.studio-print-dialog iframe{width:100%;flex:1;min-height:0;border:1px solid #bdcbd3;background:#e7eaed}
.production-event-dialog{width:min(650px,94vw);max-height:90vh;border:0;border-radius:8px;padding:20px;overflow:auto}.production-event-list{max-height:180px;overflow:auto;font-size:12px;border:1px solid #d9e1e5;padding:10px}.production-event-list>div{margin-bottom:8px}.production-event-dialog form{display:grid;gap:10px}.production-event-dialog form>label{display:grid;gap:4px;font-size:12px}.production-event-dialog label[hidden]{display:none}.production-event-dialog input,.production-event-dialog select,.production-event-dialog textarea{font:inherit;padding:7px;border:1px solid #c8d3d9;border-radius:4px}.production-event-dialog form h3{font-size:14px}
@media(max-width:600px){.dood-grid .dood-name{width:140px;min-width:140px}.dood-grid .dood-worked{left:184px}.dood-grid .dood-held{left:238px}.dood-toolbar{padding:8px;gap:5px}.dood-toolbar label{font-size:11px}.dood-legend{font-size:9px}.dood-menu>div{position:fixed;left:10px;right:10px;top:210px}.dood-cell-detail{max-height:40vh}.studio-print-dialog{padding:8px}}
@media print{#studioPrintDialog,#productionEventDialog,.dood-toolbar,.dood-rules,.dood-legend,.dood-cell-detail{display:none!important}}