/* ============================================================
   POSTWERKS design system — industrial console skin
   Source of truth: claude.ai/design project "postwerks"
   (tokens/colors|typography|spacing|effects.css, ui_kits/postwerks)

   VOICE GUIDE v3 (2026-08-18, James — canonical reference:
   email-templates/invite-welcome.html, written by James himself).
   North star: German-ish, direct, corny, comedy from playing it
   completely straight — but SUBTLE. Clarity first; the joke is
   seasoning, one wink per surface. "A growth engine, not a school
   play."

     RULES
     — NO "Das X" label chrome anywhere. Section labels, screen
       eyebrows, kickers: plain English. The .kicker class survives
       for English eyebrows only.
     — German appears as occasional in-sentence PUNCHLINES only:
       "Hallo!", "Das good!", "Wunderbar!", "groundwerk". Sparingly.
     — Word list unchanged: das · haus · funk · neu · uber · werk,
       plus German-sounding proper nouns (Klaus-Dieter Ostermann,
       hans@firma.de). No umlauts, no ß, no real German.
     — Tone: warm, simple, direct. "Welcome to Postwerks. Our simple
       system helps your brand grow." State the fact, then the
       consequence. Dry self-aware joke where it fits ("We are
       efficient and have no sense of humour").
     — BANNED: cryptic machine-theatre ("The machine is awake",
       "This key was cut for you alone"), "seamless", "unlock",
       "elevate", "source of truth", marketing slop. Footers are
       plain and functional.
     — BANNED (James, 2026-08-18: "AI slop"): the paired-declarative
       epigram tic. "X is not Y. It is Z." / "Silence is consent —
       a system that begs…" / "The backlog is an asset. It is not a
       to-do list." Write plain single sentences instead. Self-
       deprecating jokes yes; portentous aphorisms no.
     — NEVER German on: nav labels, buttons, field labels, tabs, or
       anything on the veto/approve/publish path.

   Held to workplace-tool standards (HubSpot / Shopify class):
   powerful under the hood, easy to read and use on top. Type floor
   is 10px absolute minimum, 11px for anything carrying data.

   FUTURE PAGES: link this file, use the same class names
   (.card .chip .metric .tabs .nav-item button.primary etc.)
   and you inherit the whole look. No build step.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Michroma&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root{
  color-scheme:dark;
  /* ---- schwarz stack (page → raised) ---- */
  --schwarz-0:#0e0f11; --schwarz-1:#131416; --schwarz-2:#1b1c1e;
  --schwarz-3:#1f2023; --schwarz-4:#242527; --schwarz-5:#2c2d30;
  /* ---- lines & greys ---- */
  --linie-1:#37383b; --linie-2:#4a4b4e;
  --grau-1:#6d6e72; --grau-2:#94959a; --grau-3:#a4a5ab;
  /* ---- papier ---- */
  --papier:#f2f0ea; --papier-dim:#c9c7c1;
  /* ---- signal ---- */
  --signal-rot:#e0211f; --signal-rot-hell:#ff5a45; --signal-rot-tief:#8f120f;
  --signal-gelb:#f5b700; --signal-gelb-tief:#b38600;
  --signal-gruen:#38c172;
  /* ---- semantic ---- */
  --surface-page:var(--schwarz-1); --surface-section:var(--schwarz-2);
  --surface-panel:var(--schwarz-3); --surface-raised:var(--schwarz-4);
  --surface-hover:var(--schwarz-5); --surface-inset:var(--schwarz-0);
  --border-default:var(--linie-1); --border-strong:var(--linie-2);
  --text-primary:var(--papier); --text-secondary:var(--grau-3);
  --text-muted:var(--grau-2); --text-disabled:var(--grau-1);
  /* ---- type ---- */
  --font-display:'Michroma','Eurostile',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  /* ---- effects ---- */
  --shadow-panel:0 12px 30px rgba(0,0,0,.6);
  --shadow-raised:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-inset:inset 0 2px 8px rgba(0,0,0,.8);
  --shadow-press:0 3px 0 var(--signal-rot-tief);
  --glow-gelb:0 0 10px rgba(245,183,0,.5);
  --glow-gruen:0 0 10px rgba(56,193,114,.5);
  --stripe-rot:repeating-linear-gradient(-45deg,#e0211f 0 14px,#c11815 14px 28px);
  --skew-badge:skewX(-12deg);
  --ease-snap:cubic-bezier(.2,.9,.2,1);
  --dur-fast:120ms;
  /* ---- geometry: POSTWERKS is square ---- */
  --radius-1:4px; /* inputs + small controls ONLY */
  --clip-panel:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  --clip-button:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
  /* legacy aliases still referenced by inline styles in the console JS */
  --bg:var(--surface-page); --card:var(--surface-panel); --text:var(--papier);
  --dim:var(--grau-3); --faint:var(--grau-2); --border:var(--linie-1);
  --accent:var(--signal-gelb); --accent-bg:rgba(245,183,0,.1);
  --green:var(--signal-gruen); --green-bg:rgba(56,193,114,.12);
  --amber:var(--signal-gelb); --amber-bg:rgba(245,183,0,.09);
  --red:var(--signal-rot-hell); --red-bg:rgba(224,33,31,.14);
}

*{box-sizing:border-box}
body{margin:0;font:14px/1.55 var(--font-body);background:var(--surface-page);color:var(--text-primary)}
::selection{background:var(--signal-gelb);color:var(--schwarz-1)}
:focus-visible{outline:2px solid var(--signal-gelb);outline-offset:2px}

/* ---- signal stripe (top of every page) ---- */
.stripe{height:6px;display:flex}
.stripe i{display:block}
.stripe .s-rot{flex:5;background:var(--signal-rot)}
.stripe .s-gelb{flex:1.6;background:var(--signal-gelb)}
.stripe .s-papier{flex:.8;background:var(--papier)}

/* ---- type ---- */
h1{font-family:var(--font-display);font-size:19px;font-weight:400;letter-spacing:.03em;text-transform:uppercase;margin:0 0 4px;color:var(--text-primary)}
h2{font-family:var(--font-display);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 10px;color:var(--text-secondary)}
.sub{color:var(--text-secondary);font-size:13px;margin:0 0 14px}
.meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--text-muted)}
a{color:var(--papier-dim);text-decoration-color:var(--linie-2)}
a:hover{color:var(--signal-gelb)}

/* ---- controls ---- */
button{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--border-default);background:transparent;border-radius:0;padding:6px 12px;
  cursor:pointer;color:var(--text-secondary);transition:all var(--dur-fast) var(--ease-snap)}
button:hover{border-color:var(--border-strong);color:var(--text-primary)}
button.primary{font-family:var(--font-display);font-size:10.5px;letter-spacing:.08em;background:var(--signal-rot);
  border:none;color:#fff;padding:7px 14px;clip-path:var(--clip-button);box-shadow:var(--shadow-press)}
button.primary:hover{filter:brightness(1.12);color:#fff}
button.primary:active{transform:translateY(2px);box-shadow:none}
button.small{font-size:10.5px;padding:4px 9px}
button.primary.small{font-size:10px;padding:5px 10px}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font-family:var(--font-mono);font-size:12.5px;border:1px solid var(--border-default);
  border-left:3px solid var(--signal-rot);border-radius:var(--radius-1);padding:8px 11px;
  background:var(--surface-inset);color:var(--signal-gelb);box-shadow:var(--shadow-inset);
  caret-color:var(--signal-gelb);outline:none;transition:border-color var(--dur-fast)}
input:focus,select:focus,textarea:focus{border-left-color:var(--signal-gelb)}
input::placeholder,textarea::placeholder{color:var(--grau-1)}
select{cursor:pointer}
input[type=checkbox]{accent-color:var(--signal-rot);box-shadow:none}
textarea{width:100%;min-height:90px;resize:vertical;color:var(--papier);line-height:1.5}

/* ---- shell ---- */
.topbar{display:flex;align-items:center;gap:14px;padding:0 18px;height:54px;background:var(--surface-section);
  border-bottom:1px solid var(--border-default);position:sticky;top:0;z-index:10}
.logo{font-family:var(--font-display);font-size:15px;letter-spacing:.05em;color:var(--papier);white-space:nowrap}
.logo em{font-style:normal;color:var(--signal-rot)}
.tagline{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.35em;color:var(--signal-gelb);
  text-transform:uppercase;white-space:nowrap}
.layout{display:flex;min-height:calc(100vh - 60px)}
.sidebar{width:196px;flex-shrink:0;padding:14px 10px;border-right:1px solid var(--border-default);background:var(--surface-section)}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;color:var(--text-muted);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  border-left:2px solid transparent;transition:all var(--dur-fast) var(--ease-snap)}
.nav-item:hover{background:var(--surface-panel);color:var(--text-secondary)}
.nav-item.active{background:var(--surface-panel);color:var(--text-primary);border-left-color:var(--signal-gelb)}
.nav-item .count{margin-left:auto;background:var(--signal-rot);color:#fff;font-size:10px;padding:1px 7px;transform:var(--skew-badge)}
.nav-item.locked{color:var(--text-disabled)}
.nav-item .lock{margin-left:auto;font-size:9px;letter-spacing:.14em;color:var(--text-disabled)}
/* one-list nav (2026-08-15): live modules read as clickable, locked as coming */
.nav-item .ic{width:14px;text-align:center;flex-shrink:0}
.nav-item.live{color:var(--text-secondary)}
.nav-item.live:hover{color:var(--text-primary)}
.nav-item.live .ic-rot{color:var(--signal-rot)}
.nav-item.live .ic-gelb{color:var(--signal-gelb)}
.nav-item.live .ic-papier{color:var(--papier)}
.nav-item.locked .ic{color:var(--text-disabled)}
.nav-sep{border-top:1px solid var(--border-default);margin:10px 4px}
/* .kicker = small mono eyebrow ABOVE an <h1>. Plain English only (voice v3):
   it names the room, the h1 names the job. Never load-bearing.
   .stamp  = works-plate / signage block. Plain, functional, mono. */
.kicker{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--signal-gelb);display:block;margin-bottom:2px}
.kicker::after{content:"";display:inline-block;width:16px;height:1px;background:var(--signal-rot);
  vertical-align:middle;margin-left:8px}
.stamp{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-disabled);line-height:1.7;border-top:1px solid var(--border-default);
  margin-top:14px;padding-top:9px}
.stamp b{color:var(--grau-2);font-weight:500}
.center-box .stamp{text-align:center;margin-top:18px}
.main{flex:1;padding:22px 26px;min-width:0;max-width:880px}

/* ---- panels ---- */
.card{background:var(--surface-panel);border:1px solid var(--border-default);border-radius:0;
  clip-path:var(--clip-panel);padding:14px 16px;margin-bottom:10px}
.glyph{font-size:15px;color:var(--signal-gelb);line-height:1}
.chip{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:0;background:transparent;color:var(--text-secondary);
  border:1px solid var(--border-default)}
.chip.accent{color:var(--papier);border-color:var(--border-strong)}
.chip.green{background:var(--green-bg);color:var(--signal-gruen);border-color:transparent}
.chip.amber{background:var(--amber-bg);color:var(--signal-gelb);border-color:transparent}
.chip.red{background:var(--red-bg);color:var(--signal-rot-hell);border-color:transparent}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.metric{background:var(--surface-panel);border:1px solid var(--border-default);border-top:2px solid var(--signal-gelb);
  clip-path:var(--clip-panel);padding:11px 14px}
.metric .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.metric .value{font-family:var(--font-display);font-size:23px;margin-top:3px;color:var(--text-primary)}
.note{background:var(--amber-bg);border-left:3px solid var(--signal-gelb);color:var(--papier-dim);
  padding:6px 10px;font-size:12px;margin:8px 0}
.error-bar{background:var(--surface-raised);border-left:4px solid var(--signal-rot);border-bottom:1px solid var(--border-strong);
  color:var(--papier);padding:9px 18px;font-family:var(--font-mono);font-size:11.5px;display:none}
.error-bar.ok{border-left-color:var(--signal-gruen)}

/* ---- das poof: a checked-off item exits stage right ----
   Bauhaus rules of motion: geometric (the badge skew), one axis, snap
   easing, a yellow edge as it goes. Then the row's height collapses so
   the list closes ranks. Honours prefers-reduced-motion. */
@keyframes pw-poof{
  0%{transform:none;opacity:1}
  35%{transform:translateX(10px);opacity:1}
  100%{transform:translateX(130%) skewX(-12deg);opacity:0}
}
.poofing{animation:pw-poof 280ms var(--ease-snap) forwards;pointer-events:none;
  border-left:3px solid var(--signal-gelb)}
@media (prefers-reduced-motion:reduce){.poofing{animation:none;opacity:0}}

/* ---- inline dialog (replaces window.prompt/confirm) ---- */
.pw-modal-wrap{position:fixed;inset:0;background:rgba(14,15,17,.72);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.pw-modal{background:var(--surface-raised);border:1px solid var(--border-strong);border-top:2px solid var(--signal-gelb);
  clip-path:var(--clip-panel);padding:18px 20px;width:min(440px,92vw);box-shadow:var(--shadow-raised)}
.pw-modal b{display:block;margin-bottom:8px}
.pw-modal .meta{margin:0 0 10px}
.pw-modal input,.pw-modal textarea{width:100%}

/* ---- auth / stub screens ---- */
.center-box{max-width:400px;margin:12vh auto;background:var(--surface-panel);border:1px solid var(--border-default);
  border-top:2px solid var(--signal-gelb);clip-path:var(--clip-panel);padding:28px;position:relative;z-index:1}
.wordmark-stacked{font-family:var(--font-display);font-size:30px;line-height:.98;letter-spacing:-.01em;color:var(--papier);margin:2px 0 10px}
.wordmark-stacked em{font-style:normal;color:var(--signal-rot)}
.wordmark-bar{display:flex;align-items:center;margin:10px 0 16px}
.wordmark-bar i{display:block;height:8px}
.wordmark-bar .b-rot{width:96px;background:var(--signal-rot)}
.wordmark-bar .b-gelb{width:38px;background:var(--signal-gelb)}
.wordmark-bar .b-papier{width:15px;background:var(--papier)}
.wordmark-bar .b-dot{width:8px;height:8px;background:var(--signal-rot);border-radius:50%;margin-left:8px}
.wordmark-bar .b-diamond{width:7px;height:7px;background:var(--signal-gelb);margin-left:5px;transform:rotate(45deg)}
.deco-ring{position:fixed;top:-120px;right:-100px;width:420px;height:420px;border-radius:50%;
  border:48px solid var(--signal-rot);opacity:.9;pointer-events:none;z-index:0}
.deco-diamond{position:fixed;bottom:90px;left:-60px;width:200px;height:200px;background:var(--signal-gelb);
  transform:rotate(45deg);opacity:.1;pointer-events:none;z-index:0}
.deco-stripes{position:fixed;bottom:40px;right:60px;display:flex;gap:4px;pointer-events:none;z-index:0}
.deco-stripes i{display:block;height:10px;transform:skewX(-18deg)}
.deco-stripes .d1{width:44px;background:var(--signal-rot)}
.deco-stripes .d2{width:26px;background:var(--signal-gelb)}
.deco-stripes .d3{width:12px;background:var(--papier)}
.stub{max-width:520px;text-align:center;margin:8vh auto}
.stub .badge{display:inline-block;background:var(--signal-gelb);color:var(--schwarz-1);font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;
  transform:var(--skew-badge);margin-bottom:14px}

/* ---- tables ---- */
.table-scroll{overflow-x:auto}
table.services{width:100%;border-collapse:collapse;font-size:13px}
table.services td,table.services th{text-align:left;padding:8px;border-bottom:1px solid var(--border-default);vertical-align:top}
table.services th{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);font-weight:500}

/* ---- content ---- */
.post-body{white-space:pre-wrap;margin:8px 0;font-size:13px;color:var(--papier-dim)}
.dim-strike{opacity:.45}
.brief-pre{white-space:pre-wrap;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:var(--papier-dim);
  background:var(--surface-inset);border:1px solid var(--border-default);border-radius:var(--radius-1);
  padding:10px;max-height:340px;overflow:auto}
.editor textarea{min-height:280px;font-size:12.5px;line-height:1.5}
details.fold{margin:8px 0}
details.fold summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
details.fold summary:hover{color:var(--text-primary)}
.audit-row{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--border-default);font-size:13px}
.audit-row input{margin-top:2px}
.audit-row.done{opacity:.45;text-decoration:line-through}

/* ---- tabs + run menu ---- */
.tabs{display:flex;gap:2px;margin:0 0 14px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--border-default)}
.tabs>button{background:none;border:none;padding:9px 13px 11px;font-size:11px;letter-spacing:.1em;color:var(--text-muted)}
.tabs>button:hover{color:var(--text-secondary);box-shadow:inset 0 -3px 0 var(--border-strong)}
.tabs>button.active{color:var(--text-primary);box-shadow:inset 0 -3px 0 var(--signal-gelb);font-weight:600}
.tabs.subtabs{margin:-6px 0 14px;padding-left:2px;border-bottom:none}
.tabs.subtabs>button{padding:6px 10px 8px;font-size:10.5px}
.tabs.subtabs>button.active{box-shadow:inset 0 -2px 0 var(--signal-gelb)}
.runmenu{position:relative}
.runmenu summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--signal-gelb);color:var(--signal-gelb);
  background:transparent;padding:4px 10px;user-select:none;transition:box-shadow var(--dur-fast)}
.runmenu summary::-webkit-details-marker{display:none}
.runmenu summary:hover{box-shadow:var(--glow-gelb)}
.runmenu[open] summary{background:var(--signal-gelb);color:var(--schwarz-1)}
.runmenu-pop{position:absolute;right:0;top:calc(100% + 4px);background:var(--surface-raised);
  border:1px solid var(--border-strong);border-radius:0;padding:8px;display:flex;flex-direction:column;gap:6px;
  min-width:250px;box-shadow:var(--shadow-raised);z-index:20}
.runmenu-pop button{text-align:left;display:flex;justify-content:space-between;gap:10px;align-items:baseline}

/* ---- account menu (topbar) ---- */
.acct{position:relative;margin-left:auto}
.acct summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  padding:4px 8px;border:1px solid transparent;user-select:none;max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover{color:var(--text-primary);border-color:var(--border-default)}
.acct[open] summary{border-color:var(--border-strong);color:var(--text-primary)}
.acct-pop{position:absolute;right:0;top:calc(100% + 4px);background:var(--surface-raised);
  border:1px solid var(--border-strong);padding:8px;display:flex;flex-direction:column;gap:6px;
  min-width:200px;box-shadow:var(--shadow-raised);z-index:30}
.acct-pop button{text-align:left}
.acct-pop .who{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);padding:2px 4px 6px;
  border-bottom:1px solid var(--border-default);word-break:break-all}

@media(max-width:700px){
  .sidebar{width:52px}
  .nav-item span.txt,.nav-item .count,.nav-item .lock{display:none}
  .main{padding:14px}
  .topbar{gap:8px;padding:0 10px}
  .topbar .tagline{display:none}
  .deco-ring,.deco-diamond{display:none}
}