/* S2K shared design tokens and components. */
:root {
    --primary:#172332;
    --secondary:#d51a38;
    --accent:#d51a38;
    --text-on-primary:#fff;
    --purple:var(--primary);
    --purple-dark:var(--primary);
    --purple-pale:#eef0f4;
    --ink:#172332;
    --muted:#626978;
    --line:#e0e3e8;
    --canvas:#f4f5f7;
    --white:#fff;
    --radius:16px;
    --space:24px;
    --blue:#225aa6;
    --orange:#925300;
    --green:#176747;
    --red:#a32c37;
    --grey:#5d606d;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--canvas);
    font-size:15px;
    line-height:1.5;
    color-scheme:light
}


* {
    box-sizing:border-box
}

body {
    margin:0
}

a {
    color:var(--purple);
    text-underline-offset:3px
}

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

button,a,input,select,textarea {
    touch-action:manipulation
}

:focus-visible {
    outline:3px solid #2577cc;
    outline-offset:3px
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font-size:clamp(1.65rem,3vw,2.15rem);
    line-height:1.2;
    letter-spacing:-.04em;
    margin-bottom:8px
}

h2 {
    font-size:1.15rem;
    line-height:1.4;
    margin-bottom:8px
}

h3 {
    font-size:1rem
}

p {
    margin-bottom:12px
}

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

.small,small {
    font-size:.84rem
}

.block {
    display:block
}

.stack {
    display:grid;
    gap:20px
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center
}

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

.app-shell {
    display:grid;
    grid-template-columns:245px minmax(0,1fr);
    min-height:100vh
}

.sidebar {
    background:var(--white);
    border-right:1px solid var(--line);
    padding:32px 22px;
    display:flex;
    flex-direction:column;
    gap:38px
}

.brand-link {
    text-decoration:none;
    width:fit-content
}

.brand {
    display:inline-flex;
    flex-direction:column;
    color:var(--purple-dark);
    line-height:1
}

.brand strong {
    font-size:42px;
    font-weight:850;
    letter-spacing:-3px
}

.brand-dot {
    color:#ab8bdd
}

.brand>span {
    margin-top:8px;
    font-size:10px;
    letter-spacing:2.4px;
    font-weight:750
}

.nav-list {
    display:flex;
    flex-direction:column;
    gap:5px
}

.nav-link {
    display:block;
    text-decoration:none;
    padding:11px 14px;
    border-radius:10px;
    color:var(--muted);
    font-weight:550
}

.nav-link:hover {
    background:var(--canvas);
    color:var(--purple-dark)
}

.nav-link.is-current {
    color:var(--purple-dark);
    background:var(--purple-pale)
}

.nav-heading {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    color:var(--muted);
    margin:30px 14px 8px;
    font-weight:700
}

.sidebar-bottom {
    margin-top:auto;
    border-top:1px solid var(--line);
    padding-top:24px;
    font-size:.85rem;
    overflow-wrap:anywhere
}

.workspace {
    padding:40px clamp(22px,4vw,60px);
    min-width:0;
    max-width:1700px;
    width:100%;
    margin:auto
}

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:32px
}

.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    font-weight:700;
    color:var(--purple);
    margin-bottom:12px
}

.page-footer {
    font-size:11px;
    color:var(--muted);
    margin-top:48px;
    border-top:1px solid var(--line);
    padding-top:18px
}

.card {
    padding:var(--space);
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-width:0
}

.card+.card {
    margin-top:22px
}

.stack>.card+.card {
    margin-top:0
}

.card-heading {
    margin-bottom:22px
}

.card-heading p {
    margin-bottom:0;
    font-size:.9rem
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:11px 18px;
    min-height:44px;
    border:1px solid transparent;
    border-radius:9px;
    text-decoration:none;
    font-weight:650;
    font-size:.88rem;
    cursor:pointer;
    line-height:1.4
}

.button-primary {
    color:var(--text-on-primary);
    background:var(--purple)
}

.button-primary:hover {
    background:var(--purple-dark)
}

.button-secondary {
    background:var(--purple-pale);
    color:var(--purple-dark);
    border-color:#e4d8f7
}

.button-subtle {
    background:transparent;
    color:var(--muted);
    border-color:var(--line)
}

.badge {
    display:inline-flex;
    padding:5px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:650;
    white-space:nowrap
}

.badge-purple {
    color:var(--purple-dark);
    background:var(--purple-pale)
}

.badge-green {
    color:var(--green);
    background:#e7f5ed
}

.badge-grey {
    color:var(--grey);
    background:#eeeff3
}

.badge-blue {
    color:var(--blue);
    background:#e9f1fb
}

.badge-orange {
    color:var(--orange);
    background:#fff1da
}

.badge-red {
    color:var(--red);
    background:#fcebed
}

.alert {
    padding:15px 18px;
    border-radius:10px;
    border:1px solid var(--line);
    margin-bottom:22px;
    font-size:.9rem
}

.stack>.alert {
    margin-bottom:0
}

.alert-blue {
    color:var(--blue);
    background:#edf4fd
}

.alert-green {
    color:var(--green);
    background:#e7f5ed
}

.alert-red {
    color:var(--red);
    background:#fcebed
}

.alert-grey {
    color:var(--grey);
    background:#eeeff3
}

.alert-orange {
    color:var(--orange);
    background:#fff1da
}

.alert ul {
    margin-bottom:0
}

.dashboard-banner {
    border-radius:var(--radius);
    background:var(--purple-dark);
    color:#fff;
    padding:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    overflow:hidden;
    margin-bottom:28px
}

.dashboard-banner .eyebrow {
    color:#d5c1f3
}

.dashboard-banner h2 {
    font-size:clamp(1.3rem,2vw,1.85rem);
    line-height:1.3;
    font-weight:650;
    letter-spacing:-.03em
}

.dashboard-banner p:last-child {
    color:#dfd0f5;
    font-size:.88rem;
    margin-bottom:0
}

.banner-type {
    color:#a782dd;
    opacity:.4;
    font-size:clamp(50px,8vw,100px);
    font-weight:850;
    letter-spacing:-8px
}

.empty-state {
    text-align:center;
    padding:48px 20px
}

.empty-symbol {
    display:flex;
    width:60px;
    height:60px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    background:var(--purple-pale);
    color:var(--purple);
    font-size:24px
}

.empty-state .button {
    margin-top:12px
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}

.field {
    display:grid;
    gap:6px;
    min-width:0
}

.field>label,legend {
    font-weight:650;
    font-size:.87rem
}

.field input,.field select,.field textarea {
    width:100%;
    min-width:0;
    background:white;
    border:1px solid #ccc8d7;
    border-radius:8px;
    padding:11px 12px;
    color:var(--ink)
}

.field input[type=file] {
    font-size:.85rem
}

.field textarea {
    resize:vertical
}

.field [aria-invalid=true] {
    border-color:var(--red)
}

.field-error {
    color:var(--red);
    font-size:.83rem;
    margin:3px 0 0
}

fieldset {
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    margin:20px 0;
    min-width:0
}

legend {
    padding:0 7px
}

.check {
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 0
}

.check input {
    accent-color:var(--purple);
    width:17px;
    height:17px;
    flex-shrink:0
}

.check-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:8px
}

.admin-grid {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);
    gap:24px;
    align-items:start
}

.admin-grid>.card+.card {
    margin-top:0
}

.responsibility-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px
}

.assignment {
    border:1px solid var(--line);
    padding:15px;
    border-radius:10px
}

.table-scroll {
    overflow-x:auto
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:.9rem
}

th {
    font-size:.75rem;
    font-weight:650;
    color:var(--muted);
    padding:12px;
    border-bottom:1px solid var(--line);
    background:#faf9fc;
    white-space:nowrap
}

td {
    padding:15px 12px;
    border-bottom:1px solid var(--line);
    vertical-align:top
}

tr:last-child td {
    border-bottom:0
}

.detail-grid {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
    gap:24px;
    align-items:start
}

.data-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin:0
}

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

dd {
    margin:0;
    overflow-wrap:anywhere
}

.presence-summary {
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:25px;
    color:var(--purple)
}

.presence-summary strong {
    font-size:2.6rem;
    letter-spacing:-.05em
}

.upload-form {
    border-top:1px solid var(--line);
    padding-top:22px;
    margin-top:20px
}

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

.timeline {
    list-style:none;
    margin:0;
    padding:0
}

.timeline li {
    display:flex;
    gap:14px;
    position:relative;
    padding-bottom:28px
}

.timeline li:not(:last-child):before {
    content:"";
    position:absolute;
    left:5px;
    top:13px;
    height:calc(100% - 10px);
    border-left:1px solid var(--line)
}

.timeline-dot {
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--purple);
    margin-top:6px;
    flex-shrink:0
}

.timeline-dot.future {
    background:#c9c6d4
}

.timeline p {
    font-size:.85rem;
    margin:5px 0 0
}

.login-page {
    display:grid;
    place-items:center;
    min-height:100svh;
    padding:24px;
    background:var(--canvas)
}

.login-panel {
    width:min(100%,460px);
    border:1px solid var(--line);
    background:white;
    padding:40px;
    border-radius:22px
}

.login-panel>.brand {
    margin-bottom:40px
}

.login-panel>p.small {
    margin-top:28px;
    margin-bottom:0
}

.login-panel h1 {
    font-size:1.65rem
}

.skip-link {
    position:fixed;
    left:16px;
    top:-100px;
    background:white;
    padding:10px;
    z-index:10
}

.skip-link:focus {
    top:12px
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}


@media(max-width:1050px) {
    .app-shell {
    grid-template-columns:210px minmax(0,1fr)
}

.sidebar {
    padding:28px 16px
}

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

.workspace {
    padding:30px 24px
}


}

@media(max-width:700px) {
    .app-shell {
    display:block
}

.sidebar {
    padding:18px 20px;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:20px
}

.brand strong {
    font-size:32px
}

.brand>span {
    font-size:8px
}

.nav-list {
    flex-direction:row;
    flex-wrap:wrap;
    gap:4px
}

.nav-link {
    font-size:.8rem;
    padding:8px 10px
}

.nav-heading {
    flex-basis:100%;
    margin:10px 10px 3px
}

.sidebar-bottom {
    margin:0;
    padding-top:12px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px
}

.sidebar-bottom p {
    margin:0
}

.sidebar-bottom>p:first-child {
    display:none
}

.workspace {
    padding:26px 16px
}

.page-header {
    gap:10px
}

.page-header>.badge {
    display:none
}

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

.card {
    padding:20px
}

.dashboard-banner {
    padding:26px
}

.banner-type {
    display:none
}

.empty-state {
    padding:30px 8px
}

.login-panel {
    padding:28px
}

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

.actions>.button {
    flex:1
}

.toolbar {
    flex-wrap:wrap
}


}

/* V1 editorial identity and functional motion. */
.s2k-logo{max-width:100%;height:auto}.context-logo{width:100px;height:72px;object-fit:contain}.brand-preview{height:140px;max-width:100%;object-fit:contain;margin-bottom:24px}
.cockpit-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:42px;background:#e9edf1;border-radius:24px;margin-bottom:24px;border:1px solid #dfe3e8;overflow:hidden}.cockpit-intro h2{font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.05;letter-spacing:-.055em;max-width:650px}.cockpit-intro p{max-width:430px}.orbit-art{display:flex;align-items:center;justify-content:center;position:relative;min-height:200px}.orbit-art span{display:grid;place-items:center;border:2px solid #172332;border-radius:50%;width:76px;height:76px;font-size:28px;font-weight:700}.orbit-art span:last-of-type{background:#d51a38;border-color:#d51a38;color:white}.orbit-art i{height:2px;width:32px;background:#172332}.orbit-art p{position:absolute;bottom:0;font-size:10px;letter-spacing:2px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 32px}.metric-grid article{border-bottom:3px solid var(--accent);padding:20px 24px;background:#fff;border-radius:16px 16px 0 0;animation:enter .25s ease-out both}.metric-grid article:nth-child(2){animation-delay:50ms}.metric-grid article:nth-child(3){animation-delay:100ms}.metric-grid span{display:block;color:var(--muted)}.metric-grid strong{font-size:44px;line-height:1.2;font-weight:650;letter-spacing:-2px}.action-row{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}.action-row p{margin:4px 0}.action-row small{display:block}.action-row>span{font-size:24px}.empty-state{padding:28px 0}.workflow-banner{background:var(--primary);color:var(--text-on-primary);padding:28px;border-radius:20px;margin-bottom:24px;transition:background-color .3s}.workflow-banner h2{font-size:28px}.workflow-banner .eyebrow{color:inherit;opacity:.8}.workflow-track{display:flex;justify-content:space-between;gap:12px;margin:28px 0 12px}.workflow-track span{border-top:2px solid currentColor;padding-top:12px;flex:1;font-size:23px;animation:enter .3s ease-out both}.workflow-track small{display:block;font-size:11px}.review-row{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}.event-list{list-style:none;padding:0 0 0 18px;border-left:2px solid var(--line);margin:16px 0}.event-list li{position:relative;padding:0 0 24px 4px}.event-list li:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);left:-23px;top:8px}.event-list small{display:block;color:var(--muted)}
.week-navigation{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:24px 0}.week-navigation h2{font-size:16px;margin:0}.week-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px}.day-column{background:#edf0f4;border-radius:16px;padding:14px;min-width:0}.day-column h3 small{display:block;color:var(--muted)}.schedule-slot{background:white;border-left:3px solid var(--accent);padding:12px;margin:12px 0;border-radius:8px;animation:enter .2s ease-out}.schedule-slot strong{font-size:12px}.schedule-slot p{font-size:13px;margin:8px 0}.schedule-slot summary{font-size:12px;cursor:pointer}.schedule-slot .field{min-width:0}.schedule-slot input{max-width:100%}.is-break{background:transparent;border:1px dashed #a6aeba;color:var(--muted)}.absence-block{padding:16px;border:1px dashed #a32c37;background:#fff2f3;color:#8d2033}.template-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:16px;align-items:center}.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.button,button{min-height:44px}.signature-once .s2k-logo{animation:signature .7s ease-out both}details.card{padding:24px}details>summary{cursor:pointer;font-weight:600;margin-bottom:12px}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes signature{0%{opacity:0;transform:translateX(-10px)}65%{opacity:1;transform:translateX(2px)}100%{transform:none}}
@media(max-width:1100px){.week-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.orbit-art span{width:50px;height:50px;font-size:20px}.cockpit-intro{padding:28px}}
@media(max-width:700px){.cockpit-intro{grid-template-columns:1fr;padding:24px}.orbit-art{min-height:100px;padding-bottom:32px}.metric-grid{gap:8px}.metric-grid article{padding:16px 12px}.metric-grid strong{font-size:32px}.metric-grid span{font-size:11px}.week-grid,.brand-grid{grid-template-columns:1fr}.day-column{padding:20px}.day-column h3 small{display:inline}.week-navigation{flex-wrap:wrap}.week-navigation h2{order:-1;width:100%}.workflow-track{display:grid;grid-template-columns:repeat(4,1fr)}.workflow-track small{font-size:10px}.template-row{grid-template-columns:1fr 1fr}.template-row .field:last-child{grid-column:1/-1}.action-row{align-items:flex-start;flex-wrap:wrap}.context-logo{width:75px}.workflow-banner{padding:24px}.schedule-slot strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sidebar,.toolbar,form,details,.page-footer,.week-navigation a{display:none!important}.app-shell{display:block}.workspace{padding:0}.week-grid{grid-template-columns:repeat(5,1fr)}.schedule-slot{break-inside:avoid}.card{box-shadow:none}}

.mobile-menu{display:none}.workflow-track .is-future{opacity:1;border-top-style:dashed}.workflow-track .is-current{font-weight:800;border-top-width:4px}.workflow-track .is-complete small:after{content:" ✓"}
@media(max-width:700px){.mobile-menu{display:block;position:absolute;right:20px;top:25px;background:white;border:1px solid var(--line);padding:8px 18px;border-radius:10px}.sidebar{position:relative}.sidebar .s2k-logo{width:120px}.js:not(.menu-open) #s2k-menu{display:none}.sidebar .brand-link{margin-bottom:0}.menu-open #s2k-menu{padding-top:20px}}

.field input[type=color]{height:44px;padding:4px}.brand-grid>.card+.card{margin-top:0}

/* Source artwork is displayed by the common radio-logo component (identity.css). */
.keep-together { white-space:nowrap; }