:root { --ink: #17343a; --muted: #65747a; --paper: #fffdf7; --sand: #f1ecdf; --line: #d9d3c7; --teal: #0d6d70; --teal-pale: #d8efeb; --coral: #b74b35; --coral-pale: #f9dfd8; }
.matrix { min-width: 1900px; }.matrix th,.matrix td { min-width: 195px; padding: 10px; }.matrix .sticky-left { min-width: 145px; }.flow-card { min-width: 0; padding: 9px 10px; scroll-margin: 120px 40px; }.flow-card:target { box-shadow: 0 0 0 3px rgba(13,109,112,.35); }.flow-card-heading { align-items: start; display: flex; gap: 7px; justify-content: space-between; }.flow-card-heading strong { font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }.process-badge { background: rgba(255,255,255,.72); border-radius: 3px; color: var(--ink) !important; flex: 0 0 auto; font: .62rem ui-monospace, monospace !important; padding: 2px 4px; }.flow-volume { color: var(--ink) !important; font-size: .78rem !important; font-weight: bold; margin-top: 7px; }.flow-step { font-size: .68rem !important; }.rule-actions { align-items: center; display: flex; gap: 5px; margin-top: 8px; }.arrow-form { display: inline; margin: 0; }.move-arrow { align-items: center; background: white; border: 1px solid #9eb8b4; border-radius: 3px; color: var(--teal); cursor: pointer; display: inline-flex; font: bold 1rem/1 Georgia,serif; height: 29px; justify-content: center; padding: 0; width: 31px; }.move-arrow:hover { background: var(--teal); color: white; }.rule-actions small { color: var(--muted); font-size: .6rem; line-height: 1.15; margin-left: 3px; }
.session-bar { align-items: center; background: var(--ink); color: white; display: flex; font-family: ui-monospace, monospace; font-size: .75rem; justify-content: flex-end; gap: 16px; padding: 7px 28px; }.session-bar .text-button { color: white; }.login-shell { align-items: center; display: grid; min-height: 100vh; padding: 24px; }.login-card { background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(23,52,58,.15); margin: auto; max-width: 520px; padding: 46px; width: 100%; }.login-logo { height: auto; margin-bottom: 28px; max-width: 250px; width: 70%; }.login-card h1 { font-size: clamp(2.5rem,8vw,4.5rem); }.login-form { display: grid; gap: 18px; margin-top: 28px; }.planning-toolbar { align-items: center; flex-wrap: wrap; }.period-nav { display: flex; gap: 14px; white-space: nowrap; }.button.secondary { background: var(--ink); }.command-grid { display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 24px; }.command-card { background: white; border: 1px solid var(--line); display: grid; gap: 10px; padding: 16px; }.command-card .eyebrow { margin: 0; }.command-card .button { align-self: end; }.form-help { color: var(--muted); font-size: .78rem; margin: 0; }.danger-card { border-color: #dfb4aa; }.text-button.danger { font-size: .9rem; text-align: left; }.process-chip { border-radius: 50%; display: inline-block !important; height: 11px; margin: 0 8px 0 0 !important; width: 11px; }.weekend-row td { background-color: #f4f2ed; }.holiday-row td { background-color: #fff3db; }.holiday-row .date { color: var(--coral); }.empty-state { background: var(--sand); padding: 28px; }@media (max-width: 900px) { .command-grid { grid-template-columns: 1fr; } }.filters .button { width: auto; }
.app-version { color: #b8cdca; margin-left: auto; }.login-version { color: var(--muted); font: .68rem ui-monospace, monospace; margin: 24px 0 0; text-align: center; }
.process-legend { display: flex !important; flex-wrap: wrap; gap: 12px; margin-top: 7px !important; }.process-legend > span { align-items: center; display: inline-flex; margin: 0; }.process-legend .process-chip { display: inline-block !important; }
.page-actions { align-items: center; display: flex; justify-content: space-between; gap: 24px; margin: 25px 0; }.page-actions p { color: var(--muted); margin: 0; max-width: 550px; }.process-list { display: grid; gap: 12px; }.process-card { align-items: start; display: grid; gap: 18px; grid-template-columns: 8px 1fr auto; margin: 0; padding: 18px; }.process-card h2 { font-size: 1.2rem; margin-bottom: 7px; }.process-card p { margin-bottom: 7px; }.process-color { align-self: stretch; border-radius: 8px; min-height: 50px; }.card-actions { align-items: center; display: flex; gap: 12px; }.text-link,.cancel-link { color: var(--teal); }.editor-card,.detail-card { background: white; border: 1px solid var(--line); padding: 28px; }.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }.form-grid .wide { grid-column: 1 / -1; }.form-grid small { color: var(--muted); display: block; font-size: .72rem; margin-top: 4px; }.form-actions { align-items: center; display: flex; gap: 16px; margin-top: 24px; }.form-errors { background: var(--coral-pale); border-left: 4px solid var(--coral); margin-bottom: 18px; padding: 12px 16px; }.form-errors ul { margin-bottom: 0; }.detail-card { display: grid; gap: 18px; grid-template-columns: 12px 1fr; }.color-swatch { border-radius: 8px; }.detail-card dl { display: grid; gap: 14px; grid-template-columns: 150px 1fr; margin: 0; }.detail-card dt { color: var(--muted); font-family: ui-monospace, monospace; }.detail-card dd { margin: 0; }.detail-card .form-actions { grid-column: 2; }@media (max-width: 760px) { .page-actions { align-items: stretch; flex-direction: column; }.page-actions { display: flex; }.process-card { grid-template-columns: 8px 1fr; }.card-actions { grid-column: 2; }.form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.detail-card { grid-template-columns: 8px 1fr; }.detail-card dl { grid-template-columns: 1fr; }.detail-card .form-actions { grid-column: 2; } }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #e0f0e9, transparent 30%), var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.brand-logo { display: block; height: auto; margin: 2px 0 12px; max-width: min(300px, 72vw); width: 100%; }.section-logo { display: block; height: auto; margin-bottom: 12px; max-width: 145px; width: 100%; }
.shell { max-width: 1500px; margin: 0 auto; padding: 42px 28px 70px; }.shell.compact { max-width: 1020px; }.masthead { display: flex; justify-content: space-between; gap: 24px; align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 22px; margin-bottom: 26px; }h1,h2,p { margin-top: 0; }h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.06em; line-height: .86; margin-bottom: 12px; }.eyebrow { color: var(--teal); font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }.subtitle { color: var(--muted); margin: 0; }.nav-link { color: var(--ink); margin-left: 18px; text-decoration: none; border-bottom: 1px solid transparent; }.nav-link:hover,.nav-link.active { border-color: var(--teal); color: var(--teal); }.toolbar { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin: 24px 0; }.filters,.new-flow { display: flex; align-items: end; gap: 12px; }label { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 5px; }input,select,textarea { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 3px; background: #fff; padding: 9px; }textarea { resize: vertical; }.button { border: 0; border-radius: 3px; background: var(--teal); color: white; cursor: pointer; font: inherit; padding: 10px 16px; }.context { align-items: center; background: var(--sand); display: flex; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding: 14px 16px; }.context span { color: var(--muted); display: block; margin-top: 3px; }.legend { color: var(--muted); font: .75rem ui-monospace, monospace; white-space: nowrap; }.dot { border-radius: 100%; display: inline-block; height: 9px; margin: 0 4px 0 12px; width: 9px; }.dot.normal { background: var(--teal); }.dot.over { background: var(--coral); }.matrix-wrap { border: 1px solid var(--line); overflow: auto; }.matrix { border-collapse: separate; border-spacing: 0; min-width: 1000px; table-layout: fixed; width: 100%; }.matrix th,.matrix td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 155px; padding: 9px; text-align: left; vertical-align: top; }.matrix thead th { background: #e7e2d6; position: sticky; top: 0; z-index: 2; }.matrix th small,.date small { color: var(--muted); display: block; font-weight: normal; margin-top: 4px; }.matrix .sticky-left { left: 0; min-width: 130px; position: sticky; z-index: 3; }.matrix thead .sticky-left { z-index: 4; }.matrix .date { background: #f7f3eb; font-family: ui-monospace, monospace; font-size: .78rem; }.matrix td { background: #fffdf8; height: 117px; }.matrix td.over-capacity { background: var(--coral-pale); }.flow-card { background: var(--teal-pale); border-left: 4px solid var(--teal); margin-bottom: 7px; padding: 7px; }.flow-card strong,.flow-card span { display: block; font-size: .78rem; }.flow-card span,.capacity { color: var(--muted); font-size: .7rem; }.move-rule { display: flex; gap: 4px; margin-top: 7px; }.move-rule input { font-size: .66rem; padding: 3px; }.move-rule input[type=submit] { background: white; cursor: pointer; width: auto; }.capacity { display: block; }.flows-list { margin-top: 28px; max-width: 620px; }.flows-list h2 { font-size: 1.25rem; }.flow-row { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 10px 0; }.text-button { background: none; border: 0; color: var(--coral); cursor: pointer; text-decoration: underline; }.flash { border-left: 4px solid; margin: 16px 0; padding: 10px 14px; }.notice { background: var(--teal-pale); border-color: var(--teal); }.alert { background: var(--coral-pale); border-color: var(--coral); }.process-card,.audit-table { background: white; border: 1px solid var(--line); margin-bottom: 18px; padding: 22px; }.process-card form { display: grid; gap: 10px; }.steps { color: var(--muted); font-size: .86rem; }.audit-table { overflow: auto; padding: 0; }.audit-table table { border-collapse: collapse; min-width: 750px; width: 100%; }.audit-table th,.audit-table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }.audit-table th { background: var(--sand); }code { font-size: .75rem; }@media (max-width: 760px) { .shell { padding: 24px 14px; }.masthead,.toolbar,.context { align-items: flex-start; flex-direction: column; }.new-flow,.filters { flex-wrap: wrap; width: 100%; }.new-flow > div,.filters > div { flex: 1 1 150px; }.nav-link { margin-left: 0; margin-right: 15px; } }