:root {
  --c: #002F5C; --c2: #00535E; --bg: #f4f5f7; --card: #fff; --line: #e1e4e8;
  --text: #1d2228; --muted: #676D71; --red: #b3261e; --green: #2e7d32; --orange: #c46a00; --blue: #1d5fa8;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--blue); }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: 1rem; margin: .3rem 0; }
main { max-width: 1150px; margin: 0 auto; padding: 1.2rem; }

.top { background: var(--c); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .6rem 1.2rem; }
.brand { color: #fff; font-weight: 700; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
.top nav a { color: #dfe8f1; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.top nav a:hover, .top nav a.on { background: rgba(255,255,255,.15); color: #fff; }
.top nav .logout { margin-left: auto; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.narrow { max-width: 420px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c2); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat strong { font-size: 1.5rem; }
.stat small { color: var(--muted); }
.stat.warn { border-left-color: var(--red); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }

.flash { background: #e8f1fb; border: 1px solid #b8d2ee; padding: .6rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.muted { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; }
tfoot th { color: var(--text); border-top: 2px solid var(--line); }
.num { text-align: right; white-space: nowrap; }
.neg { color: var(--red); font-weight: 600; }
.tw { overflow-x: auto; }

label { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .7rem; font-size: .9rem; color: var(--muted); flex: 1; min-width: 160px; }
label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--text); min-width: 0; flex: 0 0 auto; }
input, select, textarea { font: inherit; color: var(--text); padding: .45rem .55rem; border: 1px solid #c8cdd3; border-radius: 6px; background: #fff; width: 100%; }
input[type=checkbox] { width: auto; }
input[type=file] { border: 1px dashed #c8cdd3; }
textarea { resize: vertical; }
.row { display: flex; flex-wrap: wrap; gap: 0 1rem; }

button, .btn { display: inline-block; font: inherit; font-weight: 600; background: var(--c); color: #fff; border: 0; border-radius: 6px; padding: .5rem 1rem; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { filter: brightness(1.15); }
button.light, .btn.light { background: #e6eaef; color: var(--text); }
button.red { background: var(--red); }
button.link { background: none; color: var(--red); padding: 0; font-weight: 400; text-decoration: underline; }
form.inline { display: inline; }
form.sub { border-top: 1px dashed var(--line); margin-top: .8rem; padding-top: .8rem; }
form.danger { margin: 2rem 0 1rem; }
form.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
form.filter select, form.filter input[name=q] { width: auto; min-width: 180px; }
form.book { display: flex; gap: .3rem; }
form.book input { width: 7.5rem; padding: .3rem .4rem; }
form.book input[type=date] { width: 9.5rem; }
form.book button { padding: .3rem .7rem; }

.b { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: #eee; white-space: nowrap; }
.b.red { background: #fde7e6; color: var(--red); }
.b.green { background: #e5f4e6; color: var(--green); }
.b.orange { background: #fdf0e0; color: var(--orange); }
.b.blue { background: #e4eefa; color: var(--blue); }
.b.gray { background: #eceef0; color: var(--muted); }

.entry { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.entry:last-child { border-bottom: 0; }
.entry-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; }
.entry-head .date { font-weight: 700; }
.entry-head .edit { margin-left: auto; font-size: .85rem; }
.text { white-space: normal; }
.files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.file { font-size: .85rem; background: #f0f3f6; padding: .15rem .6rem; border-radius: 6px; text-decoration: none; }
.filelist { padding-left: 1rem; }
.filelist li { margin-bottom: .3rem; }

table.year td.c, table.year th { text-align: center; }
table.year td.c a { color: inherit; text-decoration: none; display: block; }
.c.ok { background: #e5f4e6; } .c.part { background: #fdf0e0; } .c.open { background: #fde7e6; } .c.over { background: #e4eefa; }
td.na { background: #f7f7f7; }

@media (max-width: 640px) {
  main { padding: .8rem; }
  .top nav .logout { margin-left: 0; }
  form.book { flex-wrap: wrap; }
}
@media print {
  .top, .noprint, form, .flash { display: none !important; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
  main { max-width: none; padding: 0; }
  .entry { break-inside: avoid; }
}

/* --- ViaOrdo --- */
.nowrap { white-space: nowrap; }
.small { font-size: .82rem; }
form.quick { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
form.quick label { flex: 0 1 220px; margin-bottom: 0; }
.avail { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.avail ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.avail p { margin: .6rem 0 0; }
.avail.green { background: #eef8ef; border-color: #b9dfbc; }
.avail.orange { background: #fff5e8; border-color: #f0cf9f; }
.avail.red { background: #fdeeed; border-color: #f0b9b5; }


/* Traut euch mit Ben — Designsystem, v1.1.1 */
@font-face{font-family:'IBM Plex Sans';src:url('fonts/plex-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/plex-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/plex-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Newsreader;src:url('fonts/newsreader-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url('fonts/newsreader-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{--bg:#f4f4f5;--bg-muted:#e8e8ea;--ink:#18181a;--ink-soft:#3f3f46;--ink-muted:#52525a;--ink-faint:#71717a;--accent:#5c6b4b;--accent-hover:#48553a;--accent-light:#a9b795;--line:#d8d8dc;--c:var(--accent);--c2:var(--accent);--card:transparent;--text:var(--ink);--muted:var(--ink-muted);--blue:var(--accent);--green:var(--accent);--orange:#805d2c;--red:#943f36}
*{border-radius:0!important;box-shadow:none!important}
body{font:400 16px/1.6 'IBM Plex Sans',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--ink);text-underline-offset:4px;transition:color 220ms ease,background-color 220ms ease}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(20px,2.8vw,36px);margin:0 0 40px;overflow-wrap:anywhere}
h2{font-size:clamp(17px,2.3vw,31px);margin:0 0 28px}
h3{font-size:clamp(11px,1.1vw,14px)}
main{max-width:1440px;padding:clamp(32px,5vw,72px) clamp(20px,5vw,72px);margin:auto}
.eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--accent);margin:0 0 16px}
.top{background:var(--ink);color:var(--bg);padding:26px clamp(20px,5vw,72px);gap:24px 48px;border-bottom:1px solid rgba(244,244,245,.28)}
.brand{display:inline-flex;align-items:center;gap:10px;font:400 28px/1.06 Newsreader,Georgia,serif;letter-spacing:-.015em;color:var(--bg)}
.brand-logo{display:block;width:36px;height:36px;margin:-7px 0 1px;flex:none}  /* 108-px-PNG unverändert, als 36 × 36 angezeigt. Ränder: Kopfzeile bleibt gleich hoch; −4 px gleicht den Unterlängenraum der Schrift aus, damit Icon und Schriftzug optisch mittig auf einer Achse liegen. */
.brand small{display:block;font:400 10px/1.6 'IBM Plex Sans',sans-serif;text-transform:uppercase;letter-spacing:.22em;color:#c0c0c6;margin-bottom:8px}
.top nav{gap:16px 40px;align-items:center}
.top nav a{padding:8px 0;color:#f4f4f5;font-size:15px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a.on{background:transparent;color:var(--accent-light);border-bottom-color:var(--accent-light)}
.top :focus-visible{outline-color:var(--accent-light)}
.card{background:transparent;border:0;border-top:1px solid var(--line);padding:32px 0;margin:0 0 28px}
.narrow{max-width:520px}
.grid2{gap:0 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cards{gap:24px}
.stat{background:transparent;border:0;border-top:1px solid var(--line);padding:24px 0;gap:8px}
.stat.warn{border-left:0;border-top-color:var(--red)}
.stat strong{font:400 42px/1.06 Newsreader,Georgia,serif}
.stat span,th,label,button,.btn{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
th{font-size:11px;color:var(--ink-muted);padding:14px 12px}
td{padding:16px 12px;color:var(--ink-soft)}
td:first-child,th:first-child{padding-left:0}
tbody tr:hover{background:var(--bg-muted)}
td a{font-family:Newsreader,Georgia,serif;font-size:20px}
td small,td .b{font-family:'IBM Plex Sans',sans-serif}
label{color:var(--accent);gap:8px;margin-bottom:24px}
label.check{color:var(--ink-soft);letter-spacing:0;text-transform:none;font-size:15px}
input,select,textarea{border:0;border-bottom:1px solid var(--line);background:transparent;font:400 17px/1.6 'IBM Plex Sans',Helvetica,Arial,sans-serif;color:var(--ink);padding:10px 0;letter-spacing:normal;text-transform:none;transition:border-color 220ms ease}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
input[type=checkbox]{accent-color:var(--accent);min-width:18px;min-height:18px}
input[type=file]{border:0;border-bottom:1px solid var(--line);margin-bottom:20px}
input::file-selector-button{border:1px solid var(--line);background:var(--bg-muted);color:var(--ink);padding:10px 16px;margin-right:16px;font:inherit;cursor:pointer}
.row{gap:0 32px}
button,.btn{background:var(--accent);color:#fdfdfd;padding:17px 38px;line-height:1.4;border:1px solid transparent;transition:background-color 220ms ease,color 220ms ease;filter:none}
button:hover,.btn:hover{background:var(--accent-hover);color:#fdfdfd;filter:none}
button.light,.btn.light{background:transparent;color:var(--ink);border-color:var(--line)}
button.light:hover,.btn.light:hover{background:var(--bg-muted);border-color:var(--accent)}
button.red{background:var(--red)}
button.red:hover{background:#783329}
button.link{background:transparent;color:var(--red);padding:4px 0;letter-spacing:.06em;font-size:11px}
button.link:hover{color:var(--ink)}
.actions{gap:12px}
form.quick{gap:20px 28px;padding:28px 0 36px}
form.quick label{flex:0 1 260px}
form.filter{gap:16px;align-items:end;margin-bottom:28px}
form.filter input,form.filter select{max-width:100%}
form.sub{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.b{font-size:11px;font-weight:500;letter-spacing:.04em;padding:4px 8px;background:var(--bg-muted)}
.b.blue,.b.green{background:#e2e6dc;color:var(--accent-hover)}
.b.orange{background:#ede5d7;color:#785324}
.b.red{background:#eedfdd;color:var(--red)}
.b.gray{background:var(--bg-muted);color:var(--ink-muted)}
.flash{background:var(--bg-muted);border:0;border-left:2px solid var(--accent);padding:16px 20px;margin-bottom:32px}
.avail{border:0;border-left:2px solid;padding:20px 24px;margin-bottom:28px}
.avail.green{background:#e5e9df;border-color:var(--accent)}
.avail.orange{background:#ede5d7;border-color:var(--orange)}
.avail.red{background:#eedfdd;border-color:var(--red)}
.entry{padding:24px 0}.file{background:var(--bg-muted);padding:6px 12px}
/* --- Kalender (Monatsansicht): einzige Stelle für Navigation, Abrufstatus, Tabelle, Termine und Legende ---
   IBM Plex Sans, normale Groß-/Kleinschreibung, keine Sperrung, keine Karten oder Schatten. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cal-nav,.cal-status,.legend,.cal-aufklapp{font:400 14px/1.4 'IBM Plex Sans',Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
/* Kopf: links Navigation, rechts Abrufstatus; bei zu geringer Breite rückt der Status unter den Kalender (siehe unten). */
.cal-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nav status" "tabelle tabelle" "legende legende";gap:8px 24px;align-items:center}
.cal-nav{grid-area:nav;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cal-monat{font:500 18px/32px 'IBM Plex Sans',Helvetica,Arial,sans-serif;letter-spacing:0;color:var(--ink);margin:0;width:8.75em;text-align:center;white-space:nowrap} /* Platz für „September 2026“ */
.cal-knopf{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:32px;margin:0;padding:0 10px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0;font:400 14px/1 'IBM Plex Sans',Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer}
.cal-knopf:hover{background:transparent;color:var(--ink);border-color:var(--accent);text-decoration:none}
.cal-nav>a.cal-knopf{width:6em}            /* Zurück, Weiter und Heute gleich breit */
.cal-icon{width:32px;padding:0}
summary.cal-knopf{list-style:none}
summary.cal-knopf::-webkit-details-marker{display:none}
.cal-wahl,.cal-details{position:relative}
.cal-aufklapp{position:absolute;top:calc(100% + 4px);z-index:10;background:var(--bg);border:1px solid var(--line);padding:10px 12px;width:max-content;max-width:min(34rem,calc(100vw - 32px))}
.cal-wahl .cal-aufklapp{left:0;display:flex;align-items:center;gap:8px}
.cal-aufklapp label{display:inline;min-width:0;margin:0;font:inherit;letter-spacing:0;text-transform:none;color:var(--ink)}
.cal-aufklapp input{width:auto;height:32px;padding:0 6px;border:1px solid var(--line);font:400 14px/1.4 'IBM Plex Sans',Helvetica,Arial,sans-serif}
.cal-status{grid-area:status;position:relative;justify-self:end;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:0}
.cal-status form{margin:0}
.cal-stand{margin:0}
.cal-stand.warn{color:var(--red);font-weight:500}
.cal-details .cal-aufklapp{right:0}
.cal-details summary.cal-knopf::after{content:"▾";margin-left:6px}
.cal-details ul{margin:0 0 6px;padding-left:18px}
.cal-details p{margin:0}
.cal-tabelle{grid-area:tabelle;min-width:0}
table.cal{table-layout:fixed;min-width:760px}
table.cal th{font:500 13px/1.4 'IBM Plex Sans',Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;padding:4px 8px}
table.cal td{height:5rem;vertical-align:top;padding:6px;border:1px solid var(--line);background:transparent} /* Mindesthöhe; volle Tage wachsen */
table.cal td.we{background:var(--bg-muted)}
table.cal td.other,table.cal td.other .day{color:var(--ink-faint)}
table.cal td.today{outline:2px solid var(--accent);outline-offset:-2px}
table.cal .day{display:block;font:400 20px/1.2 Newsreader,Georgia,serif;color:var(--text);text-decoration:none;margin-bottom:4px}
/* Termine: helle Fläche, 3 px Farbstreifen links, Schrift #18181a. Markierungen liegen auf anderen Kanten:
   Sperrhinweis rechts (plus Text „Sperrzeit:“), „veraltet“ gestrichelt oben/rechts/unten, Absage durchgestrichen. */
.ev{display:block;font:400 12px/1.5 'IBM Plex Sans',sans-serif;padding:4px 6px;margin-bottom:4px;border-radius:4px;border-left:3px solid transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;color:#18181a}
.k-privat,.b.k-privat{background:#e6f0fa;border-left:3px solid #0066cc;color:#18181a}   /* Privat, Urlaub, Baïkal Privat */
.k-kirche,.b.k-kirche{background:#e8edff;border-left:3px solid #0033ff;color:#18181a}   /* Kirche, Baïkal Kirche */
.k-frei,.b.k-frei{background:#eee6f3;border-left:3px solid #876095;color:#18181a}     /* Freiberuflich: Aufträge, Baïkal Freiberuflich */
.k-ferien,.b.k-ferien{background:#fff6cc;border-left:3px solid #ffcc00;color:#18181a}   /* Schulferien */
.k-sonst,.b.k-sonst{background:var(--bg-muted);border-left:3px solid #9a9aa2;color:#18181a}
.ev.job.off{background:#e3e3e6;border-left-color:#9a9aa2;color:#52525a;text-decoration:line-through}
.ev.sperrt{box-shadow:inset -3px 0 0 #18181a}
.ev.veraltet{border-top:1px dashed #18181a;border-right:1px dashed #18181a;border-bottom:1px dashed #18181a;font-style:italic}
.legend{grid-area:legende;display:flex;flex-wrap:wrap;gap:8px;margin:0}
.legend .ev{display:inline-block;margin:0}
.kal-bewertung{color:var(--ink-soft)}
.kalender-seite h1{margin-bottom:12px}
@media(max-width:1000px){
  .cal-kopf{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "tabelle" "status" "legende"}
  .cal-status{justify-self:start;justify-content:flex-start}
  .cal-details{position:static}                /* Aufklappbereich an der Statuszeile ausrichten, nicht am Knopf */
  .cal-details .cal-aufklapp{right:auto;left:0}
}
@media(max-width:640px){
  .cal-wahl{position:static}                   /* Monatsauswahl an der Navigation ausrichten */
}

/* --- Einstellungen: zentriert, max. 960 px, leicht dunklerer Hintergrund, linkes Untermenü --- */
/* Nur der zentrierte Bereich (max. 960 px: Überschrift, Untermenü, Inhalt) ist dunkler; außerhalb bleibt #f4f4f5.
   Texte dort #18181a, Eingabefelder hell. Keine Rundungen, Schatten oder Karten. */
.einstellungen-seite main{max-width:960px;background:#c4c4c4;color:#18181a;--ink:#18181a;--ink-soft:#18181a;--ink-muted:#18181a;--ink-faint:#18181a;--muted:#18181a;--text:#18181a}
.einstellungen-seite main label{color:#18181a}
.einstellungen-seite main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){background:#f4f4f5;color:#18181a;border:1px solid #6b6b70;padding:6px 8px}
.einst{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:32px;align-items:start}
.einst-menue{display:flex;flex-direction:column;gap:2px;font:400 15px/1.4 'IBM Plex Sans',Helvetica,Arial,sans-serif}
.einst-menue a{padding:6px 10px;color:var(--ink);text-decoration:none;border-left:2px solid transparent}
.einst-menue a:hover{text-decoration:underline}
.einst-menue a[aria-current="page"]{border-left-color:#18181a;font-weight:500}
.einst-inhalt>h2{margin-top:0}
.einst-teil{border-top:1px solid var(--line);padding:16px 0;margin:0}
.feldstapel{display:grid;gap:4px;max-width:28rem}
.feldstapel label{min-width:0}
.einst-inhalt .b{white-space:normal}            /* lange Hinweise umbrechen statt die Seite zu verbreitern */
@media(max-width:700px){
  .einst{grid-template-columns:minmax(0,1fr);gap:16px}
  .einst-menue{flex-direction:row;flex-wrap:wrap;gap:4px 12px}
  .einst-menue a{padding:6px 0;border-left:0;border-bottom:2px solid transparent}
  .einst-menue a[aria-current="page"]{border-bottom-color:#18181a}
}

footer.version{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:24px;margin-top:56px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
footer.version a{color:inherit;text-decoration:none}
footer.version a:hover,footer.version a[aria-current="page"]{color:var(--ink);text-decoration:underline}
@media(max-width:640px){.top{padding:24px 20px;gap:24px}.top nav{flex-basis:100%;gap:18px 36px}.top nav .logout{margin-left:0}main{padding:32px 20px}h1{margin-bottom:32px}.card{padding:24px 0;margin-bottom:16px}.row{gap:0 20px}.row label{min-width:min(100%,200px)}form.quick label{flex:1 1 100%}button,.btn{padding:15px 22px}form.filter input,form.filter select{width:100%}.actions>*{max-width:100%}td,th{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{body{background:#fff;color:#000}main{padding:0;max-width:none}.card{padding:16px 0;border-top:1px solid #ccc}h1{font-size:24px}h2{font-size:20px}.eyebrow{display:none}thead{display:table-header-group}tr{break-inside:avoid}}

/* Compact working view, v1.2.0 */
[hidden]{display:none!important}
main{max-width:1560px;padding-top:32px;padding-bottom:32px}
h1{margin-bottom:24px}h2{font-size:clamp(22px,2vw,28px);margin-bottom:18px}h3{font-size:20px}
.card{padding:22px 0;margin-bottom:16px}
.top{padding-top:20px;padding-bottom:20px;gap:20px 36px}
.top nav{gap:16px 40px}
.top nav a{font-size:15px}
.jobs{font-size:14px;min-width:940px}
.jobs td,.jobs th{padding:11px 10px}
.jobs .job-name{font:500 16px/1.45 'IBM Plex Sans',Helvetica,Arial,sans-serif;text-decoration:none;color:var(--ink)}
.jobs .job-name:hover{color:var(--accent);text-decoration:underline}
.cell-sub{display:block;color:var(--ink-faint);font:400 12px/1.5 'IBM Plex Sans',sans-serif;margin-top:3px}
.jobs .b{font-size:11px;padding:3px 6px;letter-spacing:0;white-space:normal;display:inline-block}
.customer-picker{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.customer-picker>label{max-width:620px;margin-bottom:8px}
.customer-result{display:block;width:100%;text-align:left;background:var(--bg-muted);color:var(--ink);padding:12px 16px;margin:6px 0;font-size:14px;text-transform:none;letter-spacing:0}
.customer-result:hover{background:var(--accent);color:#fdfdfd}
#customer-clear{padding:9px 14px;font-size:11px}
.text-action{font:500 12px/1.5 'IBM Plex Sans',sans-serif;text-transform:uppercase;letter-spacing:.08em}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
summary{cursor:pointer;font:400 24px/1.3 Newsreader,Georgia,serif;margin-bottom:16px}
form.filter input[name=q]{min-width:220px;flex:1}
form.filter select{min-width:140px}
@media(max-width:640px){.top nav{gap:18px 36px}.card{padding:20px 0}.jobs{min-width:900px}.jobs td,.jobs th{padding:10px 8px}label{margin-bottom:18px}}

/* Table-first workspace, v1.3.0 */
main{max-width:1680px;padding:24px clamp(16px,2.5vw,40px)}
.top nav a{letter-spacing:.02em;text-transform:none;font-size:16px}
.eyebrow{display:none}
h1{font-size:30px;margin-bottom:20px}
.jobs{font-size:16px;min-width:1060px}
.jobs td,.jobs th{padding:12px 10px;border-right:1px solid var(--line)}
.jobs th{font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--bg-muted)}
.jobs tbody tr:nth-child(even){background:#ededee}
.jobs tbody tr:hover{background:#e2e6dc}
.jobs .job-name{font-size:17px}.jobs .b{font-size:14px;background:transparent;padding:0;font-weight:500}
.jobs .cell-sub{font-size:14px;color:var(--ink-muted)}
.table-editor{font-size:16px}
.editor-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:5;border-bottom:1px solid var(--line)}
.editor-toolbar .check{margin:0 0 0 auto}
.table-editor button,.table-editor .btn{font-size:14px;text-transform:none;letter-spacing:0;padding:10px 22px}
.edit-table{width:100%;table-layout:fixed;min-width:780px;border:1px solid var(--line)}
.edit-table caption{text-align:left;font-size:18px;font-weight:500;padding:0 0 10px}
.edit-table col.field-label{width:17%}
.edit-table th,.edit-table td{padding:8px 12px;border:1px solid var(--line);vertical-align:middle}
.edit-table th{font-size:15px;text-transform:none;letter-spacing:0;font-weight:500;line-height:1.4;color:var(--ink-soft);background:var(--bg-muted)}
.edit-table th label{font:inherit;letter-spacing:0;text-transform:none;color:inherit;display:block;margin:0;min-width:0}
.edit-table td{background:var(--bg)}
.edit-table tr:nth-child(even) td{background:#ededee}
.edit-table .edit-group th{font-size:16px;font-weight:600;background:#dadcD6;color:var(--ink);padding:10px 12px;border-top:2px solid #adb4a4}
.edit-table input,.edit-table select,.edit-table textarea{font-size:16px;line-height:1.4;border:1px solid #a9a9b1;background:#fafafa;padding:7px 9px;min-width:0}
.edit-table input:focus,.edit-table select:focus,.edit-table textarea:focus{border-color:var(--accent)}
.edit-table input[type=checkbox]{width:18px;min-height:18px;padding:0}
.edit-table input[type=file]{margin:0;border:0;background:transparent;padding:0}
.edit-table .check{margin:0;font-size:15px;text-transform:none;letter-spacing:0;min-width:0}
.edit-table .small{font-size:14px;line-height:1.45}
.customer-search-line{display:flex;align-items:center;gap:12px}
.customer-search-line input{flex:1}
#customer-clear{font-size:13px;padding:7px 12px;white-space:nowrap;text-transform:none;letter-spacing:0}
.edit-table .customer-result{font-size:16px}
form.filter select,form.filter input{font-size:16px;padding:8px;border:1px solid #a9a9b1}
form.filter button,form.filter .btn{font-size:14px;letter-spacing:0;text-transform:none;padding:10px 20px}
@media(max-width:640px){.editor-toolbar .check{margin-left:0}.edit-table{min-width:780px}.table-editor .tw{border:1px solid var(--line)}.customer-search-line{flex-wrap:wrap}}
@media print{.editor-toolbar{display:none}.edit-table{min-width:0}.jobs{min-width:0;font-size:11px}.jobs th,.jobs .b,.jobs .cell-sub{font-size:10px}.jobs .job-name{font-size:12px}}