:root {
    --ink: #13262f;
    --ink-soft: #3a5160;
    --mist: #d9e4ea;
    --foam: #f3f7f9;
    --paper: #ffffff;
    --paper-2: #fbfcfd;
    --board: #eef3f6;
    --chrome: color-mix(in srgb, var(--foam) 96%, transparent);
    --sea: #1f6f78;
    --sea-deep: #0f4c54;
    --sea-text: var(--sea-deep);
    --sand: #e7d7c4;
    --ember: #c45c26;
    --line: rgba(19, 38, 47, 0.12);
    --ok: #2f7d4a;
    --warn: #a56b12;
    --disabled: #5c6b73;
    --shadow: 0 10px 28px rgba(19, 38, 47, 0.12);
    --shadow-lg: 0 24px 60px rgba(19, 38, 47, 0.18);
    --atmosphere-a: rgba(31, 111, 120, 0.18);
    --atmosphere-b: rgba(196, 92, 38, 0.12);
    --atmosphere-base: linear-gradient(165deg, #e8f0f3 0%, #f5f8fa 42%, #eef3f1 100%);
    --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --elev-1: 0 0 0 1px var(--line);
    --focus-ring: 2px solid var(--sea);
    --focus-offset: 2px;
    --tap: 2.75rem;
    --logo-mark: 28px;
    --logo-gap: 10px;
    --radius: 14px;
    --shift-h: 54px;
    --crew-w: 196px;
    --day-min: 118px;
    --app-drawer-w: 264px;
    --app-drawer-dur: 300ms;
    --app-drawer-ease: cubic-bezier(.22, 1, .36, 1);
    --app-topbar-pad-y: 0.75rem;
    --app-topbar-pad-x: 1.25rem;
    --app-topbar-min-h: 3.9rem;
    --app-header-h: var(--app-topbar-min-h);
    --overnight-suffix: " (+1 day)";
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e6eef2;
    --ink-soft: #9db0bb;
    --mist: #2a3b44;
    --foam: #0d151a;
    --paper: #172026;
    --paper-2: #1b262d;
    --board: #121b20;
    --chrome: color-mix(in srgb, var(--foam) 94%, transparent);
    --sea: #3aa4ad;
    --sea-deep: #17656e;
    --sea-text: #8fd0d7;
    --sand: #3a3229;
    --ember: #e3925c;
    --line: rgba(230, 238, 242, 0.12);
    --ok: #5cbf80;
    --warn: #d4a85c;
    --disabled: #8a9aa4;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --atmosphere-a: rgba(47, 143, 152, 0.16);
    --atmosphere-b: rgba(227, 146, 92, 0.08);
    --atmosphere-base: linear-gradient(165deg, #0b1216 0%, #0d151a 42%, #0c1418 100%);
}

html[lang="is"] {
    --overnight-suffix: " (+1 dagur)";
}

html[lang="no"] {
    --overnight-suffix: " (+1 dag)";
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    background: var(--foam);
}

html {
    overflow-x: clip;
    scrollbar-gutter: stable;
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    overflow-x: clip;
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 500px at 10% -10%, var(--atmosphere-a), transparent 60%),
        radial-gradient(900px 420px at 90% 0%, var(--atmosphere-b), transparent 55%),
        var(--atmosphere-base);
}

.atmosphere::after {
    display: none;
}

.shell {
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr) auto;
    grid-template-areas: "brand toolbar menu";
    gap: 1rem 1.5rem;
    align-items: center;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--app-topbar-min-h);
    padding: var(--app-topbar-pad-y) var(--app-topbar-pad-x);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
    background: var(--chrome);
}

.brand-block {
    grid-area: brand;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.brand-text {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.brand-text > :not(.logo),
.clock-top-brand > :not(.logo) {
    margin-inline-start: calc(var(--logo-mark) + var(--logo-gap));
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--logo-gap);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sea-text);
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}

.logo-mark {
    width: var(--logo-mark);
    height: var(--logo-mark);
    flex: none;
    border-radius: 8px;
    background: var(--sea-deep);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
}

.logo-word b {
    color: var(--sea);
    font-weight: 800;
}

h1.logo {
    cursor: default;
}

.brand-sub {
    font-size: 0.65rem;
    color: var(--ink-soft);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

.org-switch {
    position: relative;
    min-width: 0;
    justify-self: start;
}

.org-switch-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 16rem;
    margin: 0;
    padding: 0.12rem 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
    cursor: pointer;
    text-align: left;
}

.org-switch-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switch-btn::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.7;
}

.org-switch-btn:hover,
.org-switch-btn[aria-expanded="true"] {
    color: var(--sea-text);
}

.org-switch-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    min-width: max(100%, 12rem);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.org-switch-item {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}

.org-switch-item:hover:not(:disabled) {
    background: rgba(31, 111, 120, 0.08);
}

.org-switch-item.is-current,
.org-switch-item:disabled {
    color: var(--sea-text);
    cursor: default;
}

.toolbar {
    grid-area: toolbar;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    min-width: 0;
}

.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.view-btn {
    background: transparent;
    color: var(--ink-soft);
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.view-btn-label {
    display: none;
}

@media (min-width: 1100px) {
    .view-btn-label {
        display: inline;
    }

    .view-btn-short {
        display: none;
    }
}

.view-btn.is-active {
    background: var(--sea-deep);
    color: #fff;
}

.view-btn:not(.is-active):hover {
    color: var(--ink);
    background: rgba(31, 111, 120, 0.08);
}

.period-nav {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.1rem;
    align-items: center;
}

.period-nav .nav-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    font-size: 0.78rem;
    flex: none;
}

.period-name {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-align: center;
    min-width: 0;
    padding: 0.15rem 0.2rem;
    pointer-events: none;
    white-space: nowrap;
}

.period-name-short {
    display: none;
}

.field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.field[hidden] {
    display: none;
}

.field > span,
.field .field-title {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.field-title {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
}

.clock-kicker {
    margin: 0 0 0.15rem;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-soft);
}

.field select,
.field input[type="time"],
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="number"],
.field textarea {
    appearance: none;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    color: var(--ink);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    min-width: 9rem;
}

.period {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.period strong {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.period span {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.status {
    align-self: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sea-text);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.status-approved { color: var(--ok); }
.status-published { color: var(--sea); }
.status-in_review { color: var(--warn); }

.userchip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.app-menu {
    grid-area: menu;
    position: relative;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hamburger {
    display: grid;
    gap: 5px;
    width: var(--tap);
    height: var(--tap);
    place-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    color: var(--ink);
}

.hamburger span {
    display: block;
    width: 1.05rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.hamburger:hover,
.hamburger[aria-expanded="true"] {
    background: var(--paper);
    color: var(--sea-text);
}

.app-menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 60;
    display: grid;
    min-width: 12.5rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow);
    isolation: isolate;
}

.app-menu-panel[hidden] {
    display: none;
}

.app-menu-user {
    margin: 0;
    padding: 0.45rem 0.7rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}

.app-menu-item {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}

.app-nav-tools {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-self: end;
    min-width: 0;
}

.topbar > .app-nav-tools {
    grid-area: menu;
}

.clock-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    background: linear-gradient(145deg, var(--sea), var(--sea-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 18%, transparent);
    flex: none;
}

.clock-hamburger {
    appearance: none;
    position: relative;
    z-index: 1210;
    display: grid;
    width: var(--tap);
    height: var(--tap);
    flex: none;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    color: var(--ink);
    cursor: pointer;
}

.clock-hamburger span {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 1.05rem;
    height: 2px;
    margin: -1px 0 0 -0.525rem;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform var(--app-drawer-dur) var(--app-drawer-ease),
        opacity var(--app-drawer-dur) var(--app-drawer-ease);
}

.clock-hamburger span:nth-child(1) {
    transform: translateY(-5px);
}

.clock-hamburger span:nth-child(3) {
    transform: translateY(5px);
}

.clock-hamburger:hover,
.clock-hamburger[aria-expanded="true"] {
    background: var(--paper);
    color: var(--sea-text);
}

html.app-drawer-open .clock-hamburger span:nth-child(1) {
    transform: rotate(45deg);
}

html.app-drawer-open .clock-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

html.app-drawer-open .clock-hamburger span:nth-child(3) {
    transform: rotate(-45deg);
}

.app-drawer,
.clock-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: var(--app-drawer-w);
    height: 100dvh;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b1c2c;
    color: #e8eef3;
    border-right: 1px solid rgba(232, 238, 243, 0.1);
    transform: translateX(-100%);
    transition: transform var(--app-drawer-dur) var(--app-drawer-ease);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-drawer::-webkit-scrollbar,
.clock-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html.app-drawer-open .app-drawer,
html.app-drawer-open .clock-sidebar {
    transform: translateX(0);
}

.clock-sidebar-brand {
    display: grid;
    gap: 0.2rem;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(232, 238, 243, 0.1);
}

.clock-sidebar-logo {
    width: 100%;
    padding: 18px 16px 0;
    color: #fff;
    justify-content: flex-start;
}

.clock-sidebar-logo .logo-word b {
    color: #7ec8d4;
}

.clock-sidebar-org {
    padding: 0 16px 0 calc(16px + var(--logo-mark) + var(--logo-gap));
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(232, 238, 243, 0.72);
}

.clock-sidebar-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(232, 238, 243, 0.1);
}

.clock-sidebar-profile .clock-avatar,
.clock-sidebar-profile .app-drawer-avatar {
    display: grid;
}

.clock-sidebar-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

a.clock-sidebar-name {
    cursor: pointer;
}

.clock-sidebar-nav {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 10px 8px;
}

.clock-sidebar-sep {
    height: 1px;
    margin: 6px 12px;
    background: rgba(232, 238, 243, 0.1);
}

.clock-sidebar-link,
.clock-sidebar-note {
    appearance: none;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.clock-sidebar-link i,
.clock-sidebar-note i {
    width: 24px;
    text-align: center;
}

.clock-sidebar-link:hover,
.clock-sidebar-note:hover {
    background: rgba(255, 255, 255, 0.08);
}

.clock-sidebar-link.is-active {
    background: #1a7a8c;
    color: #fff;
}

.clock-sidebar-group {
    display: grid;
    gap: 4px;
}

.clock-sidebar-group > summary {
    list-style: none;
}

.clock-sidebar-group > summary::-webkit-details-marker,
.clock-sidebar-group > summary::marker {
    display: none;
    content: none;
}

.clock-sidebar-chevron {
    width: auto !important;
    font-size: 0.72rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.clock-sidebar-group[open] > summary .clock-sidebar-chevron {
    transform: rotate(180deg);
}

.clock-sidebar-link.is-nested {
    padding-left: 1.35rem;
}

.clock-sidebar-badge {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: var(--ember);
}

.clock-sidebar-locale {
    width: 100%;
    margin: 0.35rem 0 0;
    grid-column: 1 / -1;
}
.clock-sidebar-locale span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}
.clock-sidebar-locale select {
    width: 100%;
    margin-top: 0.2rem;
}

.clock-sidebar {
    color-scheme: dark;
}

.clock-sidebar .field select,
.clock-sidebar .field input[type="text"],
.clock-sidebar .field input[type="email"],
.clock-sidebar .field input[type="search"] {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eef3;
    border-color: rgba(232, 238, 243, 0.18);
    min-width: 0;
}

.clock-sidebar .field select option {
    background: #0b1c2c;
    color: #e8eef3;
}

.clock-availability[data-readonly] .rules-check {
    opacity: 0.85;
    cursor: default;
}

.app-drawer-scrim,
.clock-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(11, 28, 44, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--app-drawer-dur) var(--app-drawer-ease);
}

html.app-drawer-open .app-drawer-scrim:not([hidden]),
html.app-drawer-open .clock-scrim:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.app-drawer-avatar {
    display: none;
}

html.app-drawer-open .app-drawer-avatar {
    display: grid;
}

.clock-sidebar .clock-avatar,
.clock-sidebar .app-drawer-avatar {
    display: grid;
}

@media (min-width: 992px) {
    body {
        transition: padding-left var(--app-drawer-dur) var(--app-drawer-ease);
    }

    html.app-drawer-open body {
        padding-left: var(--app-drawer-w);
    }

    #app-drawer-btn {
        display: none;
    }

    .topbar .logo,
    .clock-top .logo {
        display: none;
    }

    .brand-text > :not(.logo),
    .clock-top-brand > :not(.logo) {
        margin-inline-start: 0;
    }
}

@media (max-width: 991px) {
    .shell,
    .clock-shell,
    .atmosphere {
        transition: transform var(--app-drawer-dur) var(--app-drawer-ease);
    }

    html.app-drawer-open .shell,
    html.app-drawer-open .clock-shell,
    html.app-drawer-open .atmosphere {
        transform: translateX(var(--app-drawer-w));
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .app-drawer,
    .clock-sidebar,
    .shell,
    .clock-shell,
    .atmosphere,
    .clock-hamburger span {
        transition: none;
    }

    .board.is-entering .shift {
        animation: none;
    }
}

.app-menu-item:hover {
    background: rgba(31, 111, 120, 0.08);
}

button,
.ghost,
.primary,
.danger,
a.primary {
    font: inherit;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
}

.ghost {
    background: transparent;
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    padding: 0.25rem 0;
}

.ghost:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.icon-btn {
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink-soft);
    line-height: 1;
}

.icon-btn:hover:not(:disabled) {
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 45%, var(--line));
    background: color-mix(in srgb, var(--sea) 10%, var(--paper));
    border-bottom-color: color-mix(in srgb, var(--sea) 45%, var(--line));
}

.icon-btn:focus-visible,
.help-btn:focus-visible,
.notify-btn:focus-visible,
.clock-hamburger:focus-visible,
.view-btn:focus-visible,
.ghost:focus-visible,
.primary:focus-visible,
.board-action:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.icon-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    color: var(--ink-soft);
}

#btn-auto-schedule[aria-busy="true"] {
    opacity: 1;
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 45%, var(--line));
}

#btn-auto-schedule[aria-busy="true"] i {
    animation: auto-schedule-spin 1.1s linear infinite;
}

@keyframes auto-schedule-spin {
    to { transform: rotate(360deg); }
}

.icon-btn i {
    font-size: 0.92rem;
}

.primary {
    background: var(--sea-deep);
    color: white;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-weight: 700;
}

.primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sea-deep) 88%, black);
}

.primary:disabled,
.board-action:disabled {
    background: color-mix(in srgb, var(--disabled) 22%, var(--paper));
    color: var(--disabled);
    border-color: var(--line);
    cursor: not-allowed;
}

.board-action {
    border-radius: 8px;
    padding: 0.34rem 0.68rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}

.board-action:not(.primary) {
    background: var(--paper);
    color: var(--ink-soft);
    border-color: var(--line);
}

.board-action:not(.primary):hover:not(:disabled) {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
}

.board-action.is-confirm:not(:disabled) {
    background: var(--ember);
    color: #fff;
    border-color: var(--ember);
}

.board-icon-btn.is-confirm:not(:disabled) {
    background: var(--ember);
    color: #fff;
    border-color: var(--ember);
}

.board-icon-btn.is-confirm:not(:disabled):hover {
    background: color-mix(in srgb, var(--ember) 88%, black);
    color: #fff;
    border-color: var(--ember);
}

.board-icon-btn-primary {
    background: var(--sea-deep);
    color: #fff;
    border-color: var(--sea-deep);
}

.board-icon-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sea-deep) 88%, black);
    color: #fff;
    border-color: var(--sea-deep);
}

.board-icon-btn-primary:disabled {
    opacity: 1;
    background: color-mix(in srgb, var(--disabled) 22%, var(--paper));
    color: var(--disabled);
    border-color: var(--line);
}

.danger {
    background: transparent;
    color: var(--ember);
    border-bottom: 1px solid transparent;
    padding: 0.25rem 0;
    font-weight: 600;
}

.danger:hover {
    border-bottom-color: var(--ember);
}

.board-wrap {
    padding: 1.1rem 1.25rem 1.25rem;
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
}

.board-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
}

.board-meta-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.board-title {
    margin: 0;
    min-width: 0;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.duty-legend {
    margin: 0.35rem 0 0;
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.duty-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.duty-swatch {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(19, 38, 47, 0.12);
}

.duty-swatch.on_duty {
    background: color-mix(in srgb, var(--ok) 28%, var(--paper));
}

.duty-swatch.resting {
    background: color-mix(in srgb, var(--sea) 22%, var(--paper));
}

.duty-swatch.busy {
    background: color-mix(in srgb, var(--mist) 65%, var(--paper));
}

.board-sync-msg {
    margin: 0.35rem 0 0;
    grid-column: 1;
    color: var(--sea-text);
    font-size: 0.85rem;
}

.roster-toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.72rem 1.05rem;
    border-radius: 12px;
    background: var(--ink);
    color: var(--foam);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 36px rgba(19, 38, 47, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.roster-toast.is-on {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.roster-toast.is-warn {
    box-shadow:
        inset 3px 0 0 var(--ember),
        0 14px 36px rgba(19, 38, 47, 0.28);
}

.roster-toast.is-ok {
    box-shadow:
        inset 3px 0 0 var(--ok),
        0 14px 36px rgba(19, 38, 47, 0.28);
}

.roster-toast.is-busy {
    box-shadow:
        inset 3px 0 0 var(--sea),
        0 14px 36px rgba(19, 38, 47, 0.28);
}

.duty-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(19, 38, 47, 0.12);
}

.duty-dot.on_duty {
    background: var(--ok);
}

.duty-dot.resting {
    background: var(--sea);
}

.duty-dot.busy-sample {
    background: #c5ced4;
    filter: grayscale(0.4);
}

.role-icon {
    font-size: 0.85rem;
    color: var(--sea-text);
    line-height: 1;
}

.role-icon-slot {
    flex: 0 0 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-grid;
    place-items: center;
    overflow: visible;
}

.role-icon-slot .role-icon {
    font-size: 0.9rem;
    width: 1em;
    text-align: center;
}

.role-icon.is-captain {
    width: 0.95em;
    height: 0.95em;
    display: block;
    overflow: visible;
}

.legend-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.15rem 0 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.board-meta-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    margin-left: auto;
    flex: none;
}

.legend-btn:hover {
    background: var(--paper);
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 40%, var(--line));
}

.legend-btn-swatches {
    display: inline-flex;
    align-items: center;
}

.legend-btn-swatches > * {
    width: 0.72rem;
    height: 0.72rem;
    margin-left: -0.22rem;
    box-shadow: 0 0 0 1.5px var(--paper);
}

.legend-btn-swatches > *:first-child {
    margin-left: 0;
}

.legend {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
    align-self: center;
    position: relative;
    z-index: 1;
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.swatch {
    width: 0.85rem;
    height: 0.85rem;
    display: inline-block;
    border-radius: 3px;
}

.swatch.draft {
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--sea);
    box-sizing: border-box;
}
.swatch.approved { background: color-mix(in srgb, var(--ok) 18%, var(--paper)); box-shadow: inset 3px 0 0 var(--ok); }
.swatch.published { background: color-mix(in srgb, var(--sea) 14%, var(--paper)); box-shadow: inset 3px 0 0 var(--sea-deep); }
.swatch.deleted {
    background: color-mix(in srgb, #9aa3a8 8%, var(--paper));
    border: 1.5px dotted #7d868c;
    border-radius: 3px;
    box-sizing: border-box;
}
.swatch.callout { background: color-mix(in srgb, var(--warn) 14%, var(--paper)); box-shadow: inset 3px 0 0 var(--warn); }
.swatch.leave { background: color-mix(in srgb, var(--warn) 14%, var(--paper)); box-shadow: inset 3px 0 0 var(--warn); }
.swatch.rest { background: color-mix(in srgb, var(--ember) 18%, var(--paper)); box-shadow: inset 3px 0 0 var(--ember); }
.swatch.market { background: color-mix(in srgb, var(--ember) 12%, var(--paper)); box-shadow: inset 3px 0 0 var(--ember); }

.sheet-legend {
    width: min(340px, calc(100vw - 2rem));
}

.legend-modal-group {
    display: grid;
    gap: 0.45rem;
}

.legend-modal-group h3 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.legend-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.legend-modal-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.notify-wrap {
    position: relative;
}

.help-btn {
    appearance: none;
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
}

.help-btn:hover {
    background: var(--paper);
    color: var(--sea-text);
}

.theme-btn .theme-icon {
    display: none;
    width: 1.05em;
    height: 1.05em;
}

html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-btn .theme-icon-system,
html[data-theme-pref="light"] .theme-btn .theme-icon-light,
html[data-theme-pref="dark"] .theme-btn .theme-icon-dark {
    display: block;
}

.notify-btn {
    appearance: none;
    position: relative;
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.notify-btn.has-unread {
    background: color-mix(in srgb, var(--ember) 16%, var(--paper));
    border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
    color: var(--ember);
    animation: none;
}

.notify-btn.has-unread .notify-dot {
    display: block;
}

@keyframes notifyPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55);
        transform: scale(1);
    }
    55% {
        box-shadow: 0 0 0 8px rgba(198, 40, 40, 0);
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notify-btn.has-unread {
        animation: none;
        box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.45);
    }
}

.notify-dot {
    position: absolute;
    top: 0.28rem;
    right: 0.28rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--ember);
}

.notify-panel {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 0.35rem);
    width: min(22rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    max-height: min(22rem, calc(100dvh - var(--app-header-h) - 1.25rem));
    overflow: auto;
    z-index: 60;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow);
    isolation: isolate;
}

.notify-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.notify-head-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: none;
}

.notify-head-actions .icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    text-decoration: none;
}

.notify-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.notify-list li {
    display: grid;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

.notify-list li.is-unread {
    background: color-mix(in srgb, var(--sea) 10%, var(--paper));
}

.notify-list li.empty {
    color: var(--ink-soft);
    cursor: default;
}

.notify-list span {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
    user-select: none;
    cursor: pointer;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.filter-check input {
    accent-color: var(--sea-deep);
    margin: 0;
}

.filter-check:has(input:checked) {
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 45%, var(--line));
    background: color-mix(in srgb, var(--sea) 10%, var(--paper));
}

.board-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    min-width: 0;
}

.board-control-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    flex: none;
}

.board-tool-btn {
    width: auto;
    min-width: var(--tap);
    padding: 0 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.board-tool-label {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.board-more {
    position: relative;
}

.board-more-btn[aria-expanded="true"] {
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 45%, var(--line));
}

.board-more-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 40;
    display: none;
    gap: 0.35rem;
    min-width: 12.5rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}

.board-more.is-open .board-more-menu {
    display: grid;
}

.board-more-menu .icon-btn,
.board-more-menu .board-tool-btn {
    width: 100%;
    justify-content: flex-start;
}

@media (min-width: 901px) {
    .board-more-btn {
        display: none;
    }

    .board-more-menu {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .board-more-menu .icon-btn,
    .board-more-menu .board-tool-btn {
        width: auto;
    }
}

@media (max-width: 1399px) {
    .board-tool-label {
        display: none;
    }

    .board-tool-btn,
    .board-more-menu .board-tool-btn {
        width: var(--tap);
        min-width: var(--tap);
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .board-more-menu .board-tool-label {
        display: inline;
    }

    .board-more-menu .icon-btn,
    .board-more-menu .board-tool-btn {
        width: 100%;
        min-width: 0;
        padding: 0 0.7rem;
        justify-content: flex-start;
    }
}

.board-publish-cluster {
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    flex: none;
}

.board-vessel {
    margin-left: 0;
}

.board-meta-actions .board-vessel {
    margin: 0;
}

.board-meta-actions .board-vessel > span {
    display: none;
}

.board-vessel select {
    min-width: 6.6rem;
    width: 6.6rem;
    max-width: 6.6rem;
    font-size: 0.86rem;
    padding: 0.6rem 0.82rem;
}

.board-meta-actions .board-vessel select {
    height: 2.15rem;
    min-height: 2.15rem;
    padding-top: 0;
    padding-bottom: 0;
}

.plan-switch {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
}

.board-plan select {
    min-width: 12rem;
    max-width: 16rem;
}

#plan-select {
    min-width: 11rem;
    max-width: 16rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.55rem;
}

.plan-lock-banner {
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sea-text);
    background: color-mix(in srgb, var(--sea) 12%, var(--paper));
    border-bottom: 1px solid var(--line);
}

.plan-lock-banner[hidden] {
    display: none;
}

.plan-lock-banner-warn {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    color: #7a2e12;
    background: color-mix(in srgb, var(--ember, #d35400) 16%, var(--paper));
    border-bottom: 1px solid color-mix(in srgb, var(--ember, #d35400) 35%, var(--line));
}

.plan-lock-banner-warn .icon-close {
    flex: 0 0 auto;
    margin: -0.15rem -0.2rem 0 0;
}

.template-save {
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.template-save legend {
    font-weight: 700;
    padding: 0;
}

.template-slot-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0;
}

.template-slot-row select,
.template-slot-row input[type="number"] {
    min-width: 5.5rem;
}

.template-slot-row input[type="number"] {
    width: 3.5rem;
}

.board-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    padding: 0.15rem 0.1rem 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.board-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
}

.board-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.board-legend[hidden] {
    display: none;
}

.board-frame {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 55%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 65%, transparent);
    min-height: 16rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.board-frame.is-scheduling {
    position: relative;
    pointer-events: none;
}

.board-frame.is-scheduling::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    background: color-mix(in srgb, var(--board) 52%, transparent);
    pointer-events: none;
}

.board-head-sticky {
    position: sticky;
    top: var(--app-header-h);
    z-index: 12;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
    background: var(--board);
    box-shadow: 0 1px 0 var(--line);
}

.board-head-sticky::-webkit-scrollbar {
    display: none;
}

.board-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 8rem;
    height: auto;
    max-height: none;
    scrollbar-width: none;
}

.board-scroll::-webkit-scrollbar {
    display: none;
}

#roster-app[data-view="month"] .board-scroll,
#roster-app[data-view="month"] .board-head-sticky {
    cursor: grab;
}

#roster-app[data-view="month"] .board-scroll.is-panning,
#roster-app[data-view="month"] .board-head-sticky.is-panning,
body.is-board-panning {
    cursor: grabbing;
    user-select: none;
}

#roster-app[data-view="month"] .shift,
#roster-app[data-view="month"] .dayhead,
#roster-app[data-view="month"] .crewcell,
#roster-app[data-view="month"] button,
#roster-app[data-view="month"] select {
    cursor: pointer;
}

.board-scroll:has(.axis-role) {
    overflow-y: hidden;
}

.board {
    --weekband-h: 1.55rem;
    min-width: max(100%, calc(var(--crew-w) + 7 * var(--day-min)));
    display: grid;
    grid-template-columns: var(--crew-w) repeat(var(--days, 7), minmax(var(--day-min), 1fr));
}

.board-head-sticky .weekband-corner,
.board-head-sticky .weekband,
.board-head-sticky .corner,
.board-head-sticky .dayhead {
    background: var(--board);
}

.weekband-corner,
.weekband {
    position: sticky;
    top: 0;
    z-index: 7;
    padding: 0.15rem 0.35rem 0.05rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: none;
    box-shadow: none;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weekband-corner {
    left: 0;
    z-index: 9;
    background: var(--board);
}

.weekband {
    text-align: center;
    background: var(--board);
}

.weekband-short {
    display: none;
}

.dayhead.is-week-end,
.cell.is-week-end {
    border-right-color: rgba(19, 38, 47, 0.42);
}

.board.view-month {
    --day-min: 72px;
    --shift-h: 42px;
    min-width: max(100%, calc(var(--crew-w) + var(--days, 31) * var(--day-min)));
}

.board.view-month .dayhead strong {
    font-size: 0.78rem;
}

.board.view-month .dayhead span {
    font-size: 0.72rem;
}

.board.view-month .shift {
    min-height: var(--shift-h);
    padding: 0.28rem 0.35rem;
}

.board.view-month .shift .meta {
    display: none;
}

#btn-compress {
    display: inline-flex;
}

#btn-shift-label {
    display: none;
}

#roster-app[data-view="week"].is-compressed #btn-shift-label {
    display: inline-flex;
}

#btn-compress.is-active,
#btn-filter-deleted.is-active,
#btn-shift-label.is-active {
    color: var(--sea-text);
    border-color: color-mix(in srgb, var(--sea) 45%, var(--line));
    background: color-mix(in srgb, var(--sea) 10%, var(--paper));
}

#roster-app.is-compressed .crewcell,
#roster-app.is-compressed .rolecell {
    padding-left: 0.4rem;
    padding-right: 0.35rem;
}

#roster-app.is-compressed .crewcell .role-icon-slot,
#roster-app.is-compressed .rolecell .role-icon-slot {
    display: none;
}

#roster-app.is-compressed .crewcell .crew-meta,
#roster-app.is-compressed .crewcell .crew-elsewhere {
    display: none;
}

#roster-app.is-compressed .crewcell .crew-fairness {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roster-app.is-compressed .corner {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

#roster-app.is-compressed .crewcell strong,
#roster-app.is-compressed .rolecell strong {
    font-size: 0.78rem;
}

#roster-app.is-compressed .board.view-month {
    --crew-w: 108px;
    --day-min: 0px;
    width: max(100%, calc(900px + var(--app-drawer-w)));
    min-width: calc(900px + var(--app-drawer-w));
    grid-template-columns: var(--crew-w) repeat(var(--days, 31), minmax(0, 1fr));
}

#roster-app.is-compressed .dayhead {
    padding-left: 0.08rem;
    padding-right: 0.08rem;
}

#roster-app.is-compressed .weekband,
#roster-app.is-compressed .weekband-corner {
    padding-left: 0.12rem;
    padding-right: 0.12rem;
}

#roster-app.is-compressed .cell {
    padding-left: 0.12rem;
    padding-right: 0.12rem;
}

#roster-app.is-compressed .shift {
    padding-left: 0.22rem;
    padding-right: 0.22rem;
}

#roster-app.is-compressed .shift .time {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roster-app.is-compressed .dayhead strong {
    font-size: 0.62rem;
}

#roster-app.is-compressed .dayhead span {
    font-size: 0.68rem;
}

#roster-app[data-view="week"].is-compressed .board.view-week {
    --shift-h: 32px;
    --crew-w: 148px;
}

#roster-app[data-view="week"].is-compressed .cell,
#roster-app[data-view="week"].is-compressed .crewcell,
#roster-app[data-view="week"].is-compressed .rolecell {
    min-height: calc(var(--shift-h) + 0.7rem);
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

#roster-app[data-view="week"].is-compressed .leave-band {
    display: none;
}

#roster-app[data-view="week"].is-compressed .shift {
    min-height: var(--shift-h);
    padding: 0.12rem 1.05rem 0.12rem 0.28rem;
    display: grid;
    grid-template-areas: "face";
    place-items: center;
    align-content: center;
    gap: 0;
}

#roster-app[data-view="week"].is-compressed .shift .meta {
    display: none;
}

#roster-app[data-view="week"].is-compressed .shift-primary,
#roster-app[data-view="week"].is-compressed .shift-hover {
    grid-area: face;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roster-app[data-view="week"].is-compressed .shift-hover {
    opacity: 0;
    pointer-events: none;
}

#roster-app[data-view="week"].is-compressed .shift .time {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roster-app[data-view="week"].is-compressed .shift .role-icon-slot {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}

#roster-app[data-view="week"].is-compressed .shift .role-icon {
    font-size: 0.95rem;
}

#roster-app[data-view="week"].is-compressed .shift-role-fallback,
#roster-app[data-view="week"].is-compressed .shift-initials {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--sea-text);
}

@media (hover: hover) and (pointer: fine) {
    #roster-app[data-view="week"].is-compressed .shift:hover .shift-primary {
        opacity: 0;
    }

    #roster-app[data-view="week"].is-compressed .shift:hover .shift-hover {
        opacity: 1;
    }
}

.board-loading,
.empty {
    padding: 3rem 1.5rem;
    color: var(--ink-soft);
}

.empty h1 {
    margin: 0 0 0.4rem;
    color: var(--ink);
}

.cell,
.corner,
.dayhead,
.crewcell,
.rolecell {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.corner,
.dayhead {
    position: sticky;
    top: var(--weekband-h, 1.55rem);
    z-index: 5;
    background: var(--board);
    backdrop-filter: none;
    padding: 0.75rem 0.7rem;
    box-shadow: 0 1px 0 var(--line);
}

.corner {
    left: 0;
    z-index: 6;
    padding: 0.55rem 0.55rem 0.65rem;
}

.crew-role-filter {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.crew-role-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.crew-role-filter select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.35rem 0.45rem;
}

.dayhead {
    text-align: center;
    display: grid;
    align-content: center;
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    min-height: 3.25rem;
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: var(--board);
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: var(--weekband-h, 1.55rem);
    z-index: 5;
    pointer-events: auto;
}

.dayhead:hover {
    background: rgba(31, 111, 120, 0.08);
}

.dayhead.is-selected {
    background: rgba(31, 111, 120, 0.28);
    box-shadow: inset 0 -4px 0 var(--sea-deep);
    color: var(--sea-text);
}

.dayhead.is-selected strong {
    color: var(--sea-text);
}

.dayhead strong {
    display: block;
    font-size: 0.95rem;
    text-transform: capitalize;
}

.dayhead span {
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.dayhead.is-today:not(.is-selected) {
    box-shadow: inset 0 -3px 0 var(--sea);
}

.crewcell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--paper) 92%, var(--board));
    padding: 0.85rem 0.75rem;
    min-height: calc(var(--shift-h) + 1.4rem);
    cursor: pointer;
    transition: opacity 160ms ease, filter 160ms ease, background 160ms ease;
}

.crewcell:hover {
    filter: brightness(0.97);
}

html[data-theme="dark"] .crewcell:hover {
    filter: brightness(1.08);
}

.crewcell.is-on-duty {
    background: color-mix(in srgb, var(--ok) 26%, var(--paper));
}

.crewcell.is-resting {
    background: color-mix(in srgb, var(--sea) 20%, var(--paper));
}

.crewcell.is-busy:not(.is-on-duty) {
    background: color-mix(in srgb, var(--mist) 55%, var(--paper));
}

.crewcell.is-on-duty.is-busy {
    box-shadow: inset 3px 0 0 var(--ok);
}

.crewcell.is-inactive {
    color: var(--disabled);
    background: color-mix(in srgb, var(--mist) 70%, var(--paper));
    filter: grayscale(0.35);
}

.crewcell.is-inactive strong {
    color: var(--disabled);
}

.crewcell.is-inactive .role-icon {
    color: var(--disabled);
}

.crew-elsewhere {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ember);
    line-height: 1.3;
}

.crewcell .crew-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.crewcell .crew-line .role-icon-slot {
    flex: 0 0 1.2rem;
}

.crewcell strong {
    min-width: 0;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crewcell .crew-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.crewcell .crew-fairness {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.crewcell .crew-fairness.is-over {
    color: var(--ember);
}

.wave-preview,
.unpublished-notify {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line, rgba(31, 111, 120, 0.18));
    border-radius: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.wave-preview p,
.unpublished-notify p {
    margin: 0 0 0.35rem;
}

.wave-preview p:last-child,
.unpublished-notify p:last-child {
    margin-bottom: 0;
}

.wave-preview strong,
.unpublished-notify strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.crewcell .crew-rank {
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.rolecell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--paper) 92%, var(--board));
    padding: 0.85rem 0.75rem;
    min-height: calc(var(--shift-h) + 1.4rem);
}

.rolecell strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.rolecell .role-icon-slot {
    flex: 0 0 1.2rem;
}

.rolecell .role-icon {
    flex: none;
    font-size: 0.9rem;
}

.rolecell .role-remove {
    margin-left: auto;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}

.rolecell .role-remove:hover {
    color: var(--ember);
}

.role-corner {
    display: grid;
    gap: 0.35rem;
}

.role-corner select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.45rem;
}

.rolecell .crew-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.role-empty {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ember);
    line-height: 1.3;
}

.role-filled {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ok);
    line-height: 1.3;
}

.fit-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.fit-chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.12rem 0.4rem;
    background: rgba(31, 111, 120, 0.12);
    color: var(--sea-text);
}

.fit-chip-agency {
    background: rgba(196, 92, 38, 0.16);
    color: var(--ember);
}

.fit-chip-oncall {
    background: rgba(47, 125, 74, 0.16);
    color: var(--ok);
}

.fit-chip-leave {
    background: rgba(47, 125, 74, 0.16);
    color: var(--ok);
}

.fit-chip-leave-pending {
    background: rgba(31, 111, 120, 0.12);
    color: var(--sea-text);
    border: 1px dashed color-mix(in srgb, var(--sea) 40%, transparent);
}

.fit-chip-cheap,
.fit-chip-local {
    background: rgba(31, 111, 120, 0.1);
}

.cell {
    position: relative;
    min-height: calc(var(--shift-h) + 1.4rem);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: background 160ms ease, outline-color 160ms ease;
}

.cell:hover {
    background: rgba(31, 111, 120, 0.05);
}

.cell.is-leave-approved {
    background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.cell.is-leave-pending {
    background: repeating-linear-gradient(
        -45deg,
        rgba(31, 111, 120, 0.06),
        rgba(31, 111, 120, 0.06) 6px,
        rgba(31, 111, 120, 0.02) 6px,
        rgba(31, 111, 120, 0.02) 12px
    );
}

.leave-band {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.35rem;
    border-radius: 6px;
    line-height: 1.2;
}

.leave-band.is-approved {
    background: rgba(47, 125, 74, 0.18);
    color: var(--ok);
}

.leave-band.is-unavail {
    background: rgba(196, 122, 58, 0.16);
    color: var(--ember, #c47a3a);
    border: 1px dashed color-mix(in srgb, var(--ember, #c47a3a) 40%, transparent);
}

.cell.is-unavail {
    background: color-mix(in srgb, var(--ember, #c47a3a) 6%, transparent);
}

.cell.drag-over {
    background: rgba(31, 111, 120, 0.12);
    outline: 2px dashed var(--sea);
    outline-offset: -4px;
}

.board.is-dragging .cell::after {
    opacity: 0.45;
}

.board.is-dragging .cell.has-shifts::after {
    display: grid;
}

.cell::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: rgba(31, 111, 120, 0.35);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}

.cell:hover::after {
    opacity: 1;
}

.cell.has-shifts::after {
    display: none;
}

.shift {
    position: relative;
    z-index: 1;
    border-left: 3px solid var(--shift-accent, var(--sea));
    background: var(--paper);
    color: var(--ink);
    border-radius: 8px;
    padding: 0.4rem 1.35rem 0.55rem 0.5rem;
    text-align: left;
    font: inherit;
    min-height: var(--shift-h);
    display: grid;
    align-content: center;
    gap: 0.1rem;
    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
    cursor: grab;
    touch-action: none;
    overflow: hidden;
}

.shift.is-static {
    animation: none;
}

.shift:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
}

html[data-theme="dark"] .shift:hover {
    filter: brightness(1.08);
}

.shift-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .shift:hover .shift-remove,
    .shift:focus-visible .shift-remove,
    .shift-remove:hover,
    .shift-remove:focus-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

.shift-remove:hover,
.shift-remove:focus-visible {
    color: var(--ember);
    background: color-mix(in srgb, var(--ember) 12%, var(--paper));
}

.shift-remove.is-confirming,
.shift.is-removing .shift-remove {
    opacity: 1;
    pointer-events: auto;
    color: #fff;
    background: var(--ok);
    font-size: 0.82rem;
    font-weight: 700;
}

.shift-remove.is-confirming:hover,
.shift-remove.is-confirming:focus-visible {
    color: #fff;
    background: #25633c;
}

@media (hover: none), (pointer: coarse) {
    .shift {
        touch-action: pan-x pan-y;
        cursor: pointer;
    }

    .shift:hover {
        transform: none;
        filter: none;
    }

    #roster-app[data-view="week"] .shift-remove {
        opacity: 0.75;
        pointer-events: auto;
    }

    #roster-app[data-view="month"] .shift-remove {
        display: none;
    }
}

.cell-fill {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 11px;
    height: 11px;
    background: var(--sea-deep);
    box-shadow: 0 0 0 1px var(--paper);
    cursor: crosshair;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.cell-fill::before {
    content: "";
    position: absolute;
    inset: -8px;
}

@media (hover: hover) and (pointer: fine) {
    .cell.has-shifts:hover .cell-fill {
        opacity: 1;
        pointer-events: auto;
    }
}

.cell.is-fill-source .cell-fill {
    opacity: 1;
    pointer-events: auto;
}

.cell.fill-range {
    background: color-mix(in srgb, var(--sea) 16%, var(--paper));
    box-shadow: inset 0 0 0 2px var(--sea);
}

.board.is-filling {
    user-select: none;
    cursor: crosshair;
}

.board.is-filling .shift {
    cursor: crosshair;
}

.shift:active {
    cursor: grabbing;
}

.shift.is-dragging {
    opacity: 0.35;
    transform: scale(0.98);
    pointer-events: none;
}

.shift[data-status="approved"] {
    background: color-mix(in srgb, var(--ok) 18%, var(--paper));
    border-left-color: var(--ok);
}

.shift[data-status="published"] {
    background: color-mix(in srgb, var(--sea) 14%, var(--paper));
    border-left-color: var(--sea-deep);
}

.shift.is-deleted,
.shift[data-status="canceled"] {
    opacity: 0.55;
    filter: grayscale(0.35);
    border: 1.5px dotted #7d868c;
    border-left: 1.5px dotted #7d868c;
    background: color-mix(in srgb, #9aa3a8 8%, var(--paper));
    cursor: pointer;
    box-shadow: none;
    padding-right: 1.35rem;
}

.shift.is-deleted:hover,
.shift[data-status="canceled"]:hover {
    transform: none;
    filter: grayscale(0.15);
    opacity: 0.72;
}

.shift.is-deleted .time,
.shift[data-status="canceled"] .time {
    text-decoration: line-through;
}

.cell.has-shifts .shift.is-deleted,
.cell.has-shifts .shift[data-status="canceled"] {
    min-height: 0;
    opacity: 0.55;
}

.shift-deleted-mark {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ink-soft);
    pointer-events: none;
    z-index: 3;
}

.shift-flag-mark {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
}

.shift-flag-mark.callout { color: var(--warn); }
.shift-flag-mark.leave { color: var(--warn); }
.shift-flag-mark.leave-pending { color: var(--sea-text); }
.shift-flag-mark.market { color: var(--ember); }
.shift-flag-mark.coverage { color: var(--sea-text); }

.crewcell.is-market-row {
    background: color-mix(in srgb, var(--ember) 10%, var(--board));
}

.crewcell.is-market-row strong {
    color: var(--ember);
}

.crewcell.is-open-slot-row {
    background: color-mix(in srgb, var(--sea) 10%, var(--board));
}

.crewcell.is-open-slot-row strong {
    color: var(--sea-text);
}

.shift.is-coverage {
    border-left-color: var(--sea);
    background: color-mix(in srgb, var(--sea) 12%, var(--paper));
}

.shift.is-started {
    cursor: grab;
}

.shift.has-rest-break,
.shift[data-status="draft"].has-rest-break,
.shift[data-status="approved"].has-rest-break,
.shift[data-status="published"].has-rest-break {
    border-left-color: var(--ember);
    background: color-mix(in srgb, var(--ember) 18%, var(--paper));
}

.shift.is-callout,
.shift.is-callout.has-rest-break,
.shift[data-status="draft"].is-callout,
.shift[data-status="approved"].is-callout,
.shift[data-status="published"].is-callout,
.shift[data-status="draft"].is-callout.has-rest-break,
.shift[data-status="approved"].is-callout.has-rest-break,
.shift[data-status="published"].is-callout.has-rest-break,
.shift.is-leave-approved,
.shift.is-leave-approved.has-rest-break,
.shift[data-status="draft"].is-leave-approved,
.shift[data-status="approved"].is-leave-approved,
.shift[data-status="published"].is-leave-approved,
.shift[data-status="draft"].is-leave-approved.has-rest-break,
.shift[data-status="approved"].is-leave-approved.has-rest-break,
.shift[data-status="published"].is-leave-approved.has-rest-break {
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 14%, var(--paper));
}

.shift.is-leave-pending,
.shift.is-leave-pending.has-rest-break,
.shift[data-status="draft"].is-leave-pending,
.shift[data-status="approved"].is-leave-pending,
.shift[data-status="published"].is-leave-pending,
.shift[data-status="draft"].is-leave-pending.has-rest-break,
.shift[data-status="approved"].is-leave-pending.has-rest-break,
.shift[data-status="published"].is-leave-pending.has-rest-break {
    border-left-color: var(--sea);
    background: color-mix(in srgb, var(--sea) 12%, var(--paper));
}

.shift.is-market,
.shift.is-market.has-rest-break,
.shift[data-status="draft"].is-market,
.shift[data-status="approved"].is-market,
.shift[data-status="published"].is-market,
.shift[data-status="draft"].is-market.has-rest-break,
.shift[data-status="approved"].is-market.has-rest-break,
.shift[data-status="published"].is-market.has-rest-break {
    border-left-color: var(--ember);
    background: color-mix(in srgb, var(--ember) 12%, var(--paper));
}

.cell.has-rest-break {
    background: color-mix(in srgb, var(--ember) 8%, var(--paper));
}

.shift-rest {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.28rem;
    pointer-events: none;
}

.shift-rest-mark {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--ember);
}

.shift .time {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
}

.shift .meta {
    font-size: 0.72rem;
    color: var(--ink-soft);
}

@keyframes shiftIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.board.is-entering .shift:not(.is-static) {
    animation: shiftIn 280ms ease both;
    animation-delay: calc(var(--i, 0) * 18ms);
}

.day-shift-list {
    display: grid;
    gap: 0.45rem;
}

.day-shift-item {
    display: grid;
    gap: 0.15rem;
    text-align: left;
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sea);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
}

.day-shift-item:hover {
    background: rgba(31, 111, 120, 0.08);
}

.plan-open-list {
    display: grid;
    gap: 0.45rem;
}

.unpublished-list {
    display: grid;
    gap: 0.45rem;
}

.unpublished-item {
    display: grid;
    gap: 0.12rem;
    text-align: left;
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sea);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
}

.unpublished-item:hover {
    background: rgba(31, 111, 120, 0.08);
}

.unpublished-item[data-kind="new"] {
    border-left-color: var(--ok);
}

.unpublished-item[data-kind="edit"] {
    border-left-color: var(--sea);
}

.unpublished-item[data-kind="cancel"] {
    border-left-color: var(--ember);
}

.unpublished-item strong {
    font-size: 0.9rem;
}

.unpublished-item span {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.unpublished-actor {
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.plan-open-item.is-current {
    border-left-color: var(--ok);
}

.day-shift-item strong {
    font-size: 0.9rem;
}

.day-shift-item span {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.day-shift-empty {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.day-slider {
    display: grid;
    gap: 0.45rem;
    padding: 0.15rem 0 0.25rem;
}

.day-slider-scale {
    position: relative;
    overflow: hidden;
    height: 1rem;
    margin: 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.day-slider-scale-strip {
    display: flex;
    width: 300%; /* 48h strip in a 16h viewport */
    will-change: transform;
    transform: translateX(0%);
}

.day-slider-scale-strip span {
    flex: 0 0 calc(100% / 48);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.day-slider.is-animating .day-slider-scale-strip {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.day-slider.is-animating .day-slider-thumb,
.day-slider.is-animating .day-slider-range {
    transition: left 700ms cubic-bezier(0.22, 1, 0.36, 1),
                width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.day-slider.is-dragging .day-slider-scale-strip,
.day-slider.is-dragging .day-slider-thumb,
.day-slider.is-dragging .day-slider-range,
.day-slider.is-dragging .day-slider-rest {
    transition: none;
}

.day-slider-track {
    position: relative;
    height: 2rem;
    touch-action: none;
    user-select: none;
}

.day-slider-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.45rem;
    margin-top: -0.225rem;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(19, 38, 47, 0.08) 0%,
            rgba(31, 111, 120, 0.14) 25%,
            rgba(196, 92, 38, 0.12) 50%,
            rgba(31, 111, 120, 0.14) 75%,
            rgba(19, 38, 47, 0.08) 100%);
    box-shadow: inset 0 0 0 1px var(--line);
}

.day-slider-range {
    position: absolute;
    top: 50%;
    height: 0.45rem;
    margin-top: -0.225rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sea) 0%, var(--sea-deep) 100%);
    pointer-events: none;
}

.day-slider-rests {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.45rem;
    margin-top: -0.225rem;
    pointer-events: none;
    z-index: 1;
}

.day-slider-rest {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--ember);
    box-shadow: 0 0 0 1px rgba(196, 92, 38, 0.35);
}

.day-slider-thumb {
    position: absolute;
    top: 50%;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -0.675rem;
    margin-left: -0.675rem;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--sea);
    box-shadow: 0 2px 8px rgba(19, 38, 47, 0.25);
    cursor: grab;
    z-index: 2;
    padding: 0;
}

.day-slider-thumb[data-thumb="end"] {
    background: var(--sea-deep);
}

.day-slider.has-rest-break .day-slider-thumb[data-thumb="end"] {
    background: var(--ember);
}

.day-slider-thumb:hover,
.day-slider-thumb:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    transform: scale(1.08);
}

.day-slider-thumb:active,
.day-slider-thumb.is-dragging {
    cursor: grabbing;
    transform: scale(1.12);
}

.day-slider-readout {
    margin: 0;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.day-slider-readout.is-overnight::after {
    content: var(--overnight-suffix);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.78rem;
}

.sheet {
    width: min(420px, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    background: var(--paper-2);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.sheet-wide {
    width: min(560px, calc(100vw - 2rem));
}

.sheet::backdrop {
    background: rgba(19, 38, 47, 0.28);
    animation: fadeIn 180ms ease;
}

.sheet[open] {
    animation: sheetIn 220ms ease;
}

.sheet form {
    display: grid;
}

.sheet header,
.sheet footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.sheet header {
    border-bottom: 1px solid var(--line);
}

.sheet footer {
    border-top: 1px solid var(--line);
    flex-wrap: nowrap;
}

.sheet-action-cluster,
.sheet-save-cluster {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sheet-save-cluster {
    gap: 0.7rem;
    margin-left: auto;
}

#detail-dialog footer:not(:has(button:not([hidden]))) {
    display: none;
}

.icon-btn-danger {
    color: var(--ember);
    border-color: color-mix(in srgb, var(--ember) 35%, var(--line));
}

.icon-btn-danger:hover:not(:disabled) {
    color: #fff;
    background: var(--ember);
    border-color: var(--ember);
}

#detail-dialog .icon-btn.is-armed,
#detail-dialog .icon-btn.is-armed:hover:not(:disabled) {
    background: var(--ember);
    color: #fff;
    border-color: var(--ember);
}

.save-leave-hint {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--ok);
    white-space: nowrap;
    transition: color 0.12s ease;
}

.save-leave-hint.is-armed {
    color: #c62828;
}

#btn-save,
#btn-save-shift,
#btn-correct-coverage {
    box-sizing: border-box;
}

.sheet h2 {
    margin: 0;
    font-size: 1.25rem;
}

.sheet-body {
    padding: 1rem 1.1rem 1.2rem;
    display: grid;
    gap: 0.85rem;
    max-height: min(70vh, 640px);
    overflow: auto;
}

.day-slider.is-readonly {
    pointer-events: none;
    opacity: 0.72;
}

.coverage-history {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-top: 0.15rem;
}

.coverage-history > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.coverage-history p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--ink);
}

.coverage-history time {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    margin-right: 0.35rem;
}

.coverage-history small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.field-row-times {
    grid-template-columns: 1fr 1fr;
}

.rules-block {
    margin: 0.2rem 0 0;
    padding: 0.85rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.rules-option {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.rules-block > [id$="-rules-fields"] {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.rules-block legend {
    padding: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rules-block legend .field-title {
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.rules-section-title {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rules-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.28rem;
    min-width: 0;
}

.rules-check-row .rules-check,
.rules-check-row .filter-check {
    flex: 1;
    min-width: 0;
}

.rules-check-row .field-help {
    margin-top: 0.12rem;
}

.field-help {
    position: relative;
    display: inline-flex;
    flex: none;
    vertical-align: middle;
}

.field-help-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
}

.field-help-btn:hover,
.field-help-btn[aria-expanded="true"] {
    color: var(--sea-text);
}

.field-help-bubble {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(18.5rem, 78vw);
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(19, 38, 47, 0.14);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    text-align: left;
    white-space: normal;
}

.field-help-bubble[hidden] {
    display: none;
}

.rules-check-row .field-help-bubble,
.field-row > .field:last-child .field-help-bubble {
    left: auto;
    right: 0;
}

.rules-checks {
    display: grid;
    gap: 0.45rem;
    margin-top: 0;
}

.rules-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    user-select: none;
}

.rules-check input[type="checkbox"],
.rules-check input[type="radio"] {
    appearance: auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    flex: none;
    accent-color: var(--sea-deep);
    cursor: pointer;
}

.filter-check.is-block {
    display: flex;
    align-items: flex-start;
    white-space: normal;
    line-height: 1.35;
    font-weight: 650;
}

.sheet-context {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.confirm-note-wrap {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.confirm-note-wrap[hidden] {
    display: none;
}

.confirm-note-wrap span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.confirm-note-wrap textarea {
    width: 100%;
    min-height: 6.2rem;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    font: inherit;
    line-height: 1.4;
    background: var(--paper);
}

.asched-how {
    margin: -0.35rem 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.asched-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    counter-reset: asched;
}

.asched-checks li {
    display: grid;
    gap: 0.65rem;
    align-items: start;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    font-size: 0.9rem;
    line-height: 1.35;
}

.asched-checks li.is-block {
    border-color: color-mix(in srgb, var(--sea-deep) 45%, var(--line));
    background: color-mix(in srgb, var(--sea-deep) 6%, var(--paper));
}

.asched-step-body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.asched-step-body strong {
    font-size: 0.95rem;
}

.asched-step-body p {
    margin: 0;
    color: var(--ink-soft);
}

.asched-step-body .asched-pattern-row,
.asched-step-body .asched-actions {
    margin-top: 0.35rem;
}

.asched-pattern-row {
    display: grid;
    gap: 0.65rem;
}

.asched-pattern-row .field select {
    min-width: 0;
    width: 100%;
}

.asched-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.asched-actions a,
.asched-actions button {
    font: inherit;
}

.asched-tips {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem 0.15rem 0;
}

.asched-tips h3 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.asched-tips ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.4;
}

.asched-error {
    color: #b42318;
}

.asched-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.4rem;
}

.asched-fieldset legend {
    padding: 0;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.asched-pref-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.asched-pref-row .field select {
    min-width: 0;
    width: 100%;
}

#auto-schedule-dialog .confirm-note-wrap {
    margin-top: 0.2rem;
}

#auto-schedule-dialog .confirm-note-wrap textarea {
    min-height: 4.4rem;
}

@media (max-width: 640px) {
    .asched-pref-row {
        grid-template-columns: 1fr;
    }
}

.help-block {
    display: grid;
    gap: 0.4rem;
}

.help-block h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sea-text);
}

.help-block ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    display: grid;
    gap: 0.28rem;
    line-height: 1.4;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.icon-close {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;
}

.icon-close:hover,
.icon-close:focus-visible {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink);
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.form-error {
    margin: 0;
    color: var(--ember);
    font-size: 0.85rem;
}

.form-notices {
    display: grid;
    gap: 0.45rem;
}

.notice {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
}

.notice-warn {
    background: rgba(165, 107, 18, 0.12);
    color: #7a4e0c;
}

.notice-info {
    background: rgba(31, 111, 120, 0.1);
    color: var(--sea-text);
}

.check-field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.check-field input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--sea);
}

#fit-blocks {
    min-height: 8rem;
}

.date-range {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.date-range[hidden] {
    display: none !important;
}

.date-range-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.date-range-chip {
    appearance: none;
    display: grid;
    gap: 0.12rem;
    text-align: left;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    min-height: 2.75rem;
}

.date-range-chip.is-active {
    border-color: color-mix(in srgb, var(--sea) 55%, var(--line));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 45%, transparent);
    background: color-mix(in srgb, var(--sea) 8%, var(--paper));
}

.date-range-chip:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset, 2px);
}

.date-range-chip-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.date-range-chip-value {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.date-range-chip.is-placeholder .date-range-chip-value {
    color: var(--ink-soft);
    font-weight: 600;
}

.date-range-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.date-range-titles {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}

.date-range-nav {
    appearance: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    color: var(--ink);
    cursor: pointer;
    flex: none;
}

.date-range-nav:hover {
    border-color: color-mix(in srgb, var(--sea) 40%, var(--line));
    color: var(--sea-text, var(--sea));
    background: color-mix(in srgb, var(--sea) 8%, var(--paper));
}

.date-range-nav:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset, 2px);
}

.date-range-hint {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.date-range-months {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
}

.date-range-month:nth-child(2) {
    display: none;
}

.date-range-month {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.date-range-month-title {
    display: none;
    margin: 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}

.date-range-weekdays,
.date-range-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-range-weekdays {
    gap: 0;
    padding: 0 0.1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
}

.date-range-weekday.is-weekend {
    color: color-mix(in srgb, var(--ember, #c47a12) 50%, var(--ink-soft));
}

.date-range-day {
    appearance: none;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.date-range-num {
    position: relative;
    z-index: 1;
    width: 2.15rem;
    height: 2.15rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
}

.date-range-day.is-in::before,
.date-range-day.is-from::before,
.date-range-day.is-to::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2.15rem;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--sea) 16%, var(--paper));
}

.date-range-day.is-preview::before {
    background: color-mix(in srgb, var(--sea) 10%, var(--paper));
}

.date-range-day.is-from::before {
    left: 50%;
    border-radius: 0;
}

.date-range-day.is-to::before {
    right: 50%;
}

.date-range-day.is-from.is-to::before,
.date-range-day.is-from.is-week-end::before,
.date-range-day.is-to.is-week-start::before {
    display: none;
}

.date-range-day.is-endpoint .date-range-num {
    background: var(--sea);
    color: #fff;
}

.date-range-day.is-today:not(.is-endpoint) .date-range-num {
    box-shadow: inset 0 0 0 1.5px var(--sea);
}

.date-range-day:hover:not(.is-endpoint):not(:disabled) .date-range-num {
    background: color-mix(in srgb, var(--sea) 12%, var(--paper));
}

.date-range-day.is-outside {
    color: var(--ink-soft);
}

.date-range-day.is-weekend:not(.is-endpoint) {
    color: color-mix(in srgb, var(--ember, #c47a12) 35%, var(--ink));
}

.date-range-day.is-disabled,
.date-range-day:disabled {
    opacity: 0.34;
    cursor: not-allowed;
}

.date-range-day:focus-visible {
    outline: none;
}

.date-range-day:focus-visible .date-range-num {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

@media (min-width: 720px) {
    .date-range-months {
        grid-template-columns: 1fr 1fr;
    }

    .date-range-month:nth-child(2) {
        display: grid;
    }

    .date-range-month-title {
        display: block;
    }

    .date-range-titles {
        visibility: hidden;
    }
}

@keyframes sheetIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 900px) {
    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand menu"
            "toolbar toolbar";
        align-items: center;
    }

    #roster-app .topbar {
        grid-template-areas: "brand menu";
    }

    #roster-app .topbar > .toolbar {
        display: none;
    }

    .app-menu,
    .topbar > .app-nav-tools {
        justify-self: end;
    }

    .legend {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.65rem 1rem;
    }

    #roster-app .board-vessel > span,
    #roster-app .empty-vessel > span {
        display: none;
    }

    .period-name-full,
    .weekband-full {
        display: none;
    }

    .period-name-short,
    .weekband-short {
        display: inline;
    }

    :root {
        --crew-w: 148px;
        --day-min: 104px;
    }
}

@media (max-width: 991px) {
    .notify-panel,
    .clock-top .notify-panel {
        position: fixed;
        top: calc(var(--app-header-h) + 0.35rem);
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        max-height: min(22rem, calc(100dvh - var(--app-header-h) - 1.25rem));
    }
}