/* =====================================================================
   CreatorOS · Werkzeug-Register
   Grundlage + gemeinsames Bauteil-Vokabular für die internen Flächen:
   dashboard.html · deal-tabletop.html · creator-wiki-demo.html ·
   dashboard-directions.html

   Das Schaufenster (site/) benutzt dieselben Token, aber ein eigenes,
   redaktionelles Vokabular. Siehe prototype/DESIGN.md.
   ===================================================================== */

@import url("creatoros-tokens.css");

/* --- Grundlage -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--ui-md);
  line-height: 1.55;
  font-synthesis: none;
  text-wrap: pretty;
}
body > * { min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
a { color: var(--act-text); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--act-deep); }

h1, h2, h3, h4 {
  margin: 0;
  font-style: normal;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
/* Deutsche Komposita setzen sonst die min-content-Breite ganzer Raster. */
p, li, dd, dt, label, legend, td, th,
small, span, strong, b, em, a, figcaption, summary { overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; text-wrap: pretty; }

/* Serif spricht: nur Ansichts- und Abschnittstitel, nie Bedienelemente. */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); font-size: 0.86em; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

::selection { background: var(--act-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.on-night :focus-visible, .mast :focus-visible { outline-color: var(--focus-night); }
[hidden] { display: none !important; }

/* Unsichtbar, aber erreichbar und geometrisch im Viewport.
   Kein translate aus dem Bild heraus: das meldet jede Layout-Prüfung
   als unerreichbares Bedienelement. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible {
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  overflow: visible;
  clip-path: none;
}

/* --- Raster ----------------------------------------------------------- */

.shell {
  width: min(100%, 92rem);
  margin-inline: auto;
  padding-inline: clamp(var(--space-md), 3.5vw, var(--space-xl));
}
.shell--reading { width: min(100%, 76rem); }

/* --- Band: Wegwerf-Hinweis ------------------------------------------- */

.ribbon {
  background: var(--night-2);
  color: var(--on-night);
  font-size: var(--ui-xs);
  letter-spacing: 0.02em;
}
.ribbon .shell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-2xs);
}
.ribbon b { font-weight: 750; }
.ribbon span { color: var(--on-night-2); }

/* --- Kopfleiste ------------------------------------------------------- */

.mast {
  background: var(--night);
  color: var(--on-night);
  border-block-end: var(--masthead-rule);
  border-block-end-color: var(--night);
}
.mast__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  min-height: 3.5rem;
  padding-block: var(--space-sm);
}
/* Bewusst inline-block, nicht inline-flex: in einem Flex-Container würde
   der Wortabstand zwischen den Kindern verschluckt und durch gap ersetzt
   ("Creator OS" statt "CreatorOS"). */
.wordmark {
  display: inline-block;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--ui-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark em { font-style: normal; color: var(--act-on-night); }
.wordmark small {
  margin-inline-start: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--ui-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-night-2);
}
.mast a:not(.wordmark) { color: var(--on-night); }
.mast a:not(.wordmark):hover { color: var(--act-on-night); }
.mast__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); font-size: var(--ui-base); font-weight: 650; }

/* --- Abschnitte ------------------------------------------------------- */

.section { padding-block: var(--space-xl); border-block-start: 1px solid var(--rule-strong); }
.section:first-of-type { border-block-start: 0; }
.section-head {
  display: grid;
  gap: var(--space-sm) var(--space-xl);
  align-items: end;
  margin-block-end: var(--space-lg);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--ui-view);
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.section-head p { max-width: 66ch; color: var(--ink-2); font-size: var(--ui-base); }
.section-head__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
@media (min-width: 52rem) {
  .section-head { grid-template-columns: minmax(0, 1fr) auto; }
}
.lede { max-width: 62ch; color: var(--ink-2); font-size: var(--ui-lg); line-height: 1.45; }

/* --- Schaltflächen ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  border: var(--hair-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--ui-base);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-press) var(--ease-out),
    border-color var(--dur-press) var(--ease-out),
    color var(--dur-press) var(--ease-out);
}
.btn--act { background: var(--act-deep); border-color: var(--act-deep); color: var(--on-act); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.22em; }
.btn--sm { min-height: 2.25rem; padding-inline: var(--space-sm); font-size: var(--ui-sm); }
.btn--wide { width: 100%; justify-content: flex-start; text-align: start; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--ink-3);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--paper-3); border-color: var(--ink); }
  .btn--act:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .btn--quiet:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--act-text); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* --- Felder ----------------------------------------------------------- */

.field {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: var(--hair-strong);
  border-radius: var(--radius);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--ui-base);
}
select.field { padding-inline-end: var(--space-xl); }
textarea.field { min-height: 6rem; padding: var(--space-sm); resize: vertical; line-height: 1.5; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:focus-visible { outline-color: var(--focus); border-color: var(--ink); }
.field:disabled { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .field:hover:not(:disabled) { border-color: var(--ink-2); }
}
.form-row { display: grid; gap: var(--space-2xs); min-width: 0; }
.form-row > label, .form-row > .label { font-size: var(--ui-sm); font-weight: 700; }
.form-row small { color: var(--ink-2); font-size: var(--ui-xs); }

/* --- Zeilenregister: das Arbeitspferd -------------------------------- */

.rows { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--rule-strong); }
.row {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-block-end: var(--hair);
}
.row__main { min-width: 0; }
.row__title { display: block; font-size: var(--ui-base); font-weight: 700; }
.row__meta { display: block; margin-block-start: var(--space-3xs); color: var(--ink-2); font-size: var(--ui-sm); }
.row__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-sm); }

/* --- Kachel: nur für räumlich greifbare Objekte ---------------------- */

.tile {
  display: block;
  width: 100%;
  min-width: 0;
  padding: var(--space-sm);
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-align: start;
  white-space: normal;
  transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  button.tile:hover { border-color: var(--ink); background: var(--act-soft); }
}
button.tile:active { transform: translateY(1px); }

/* --- Marke, Kennung, Zustand ----------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.1rem 0.4rem;
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--ui-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag--act { border-color: var(--act); background: var(--act-soft); color: var(--act-text); }
.tag--hold { border-color: var(--hold-rule); background: var(--hold-soft); color: var(--hold); }
.tag--settled { border-color: var(--settled-rule); background: var(--settled-soft); color: var(--settled); }
.tag--plain { border-color: transparent; background: transparent; padding-inline: 0; }

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: 0.3rem;
  background: var(--act-deep);
  color: var(--on-act);
  font-size: var(--ui-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.count--quiet { background: var(--paper-3); color: var(--ink-2); }

/* --- Bandmesser: Leistung nur relativ zum eigenen Normalbereich ------
   Bewusst ohne Ampelfarbe. Unter dem eigenen Bereich zu liegen ist eine
   Beobachtung, kein Fehler; über ihm zu liegen ist kein Versprechen. */

.band { display: inline-flex; align-items: center; gap: var(--space-xs); }
.band__meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.85rem; }
.band__meter i { display: block; width: 0.3rem; height: 100%; background: var(--rule); }
.band__meter i:nth-child(1) { height: 45%; }
.band__meter i:nth-child(2) { height: 72%; }
.band--below .band__meter i:nth-child(1),
.band--near  .band__meter i:nth-child(2),
.band--above .band__meter i:nth-child(3) { background: var(--ink); }
.band__label { font-size: var(--ui-sm); font-weight: 650; }
.band__sample { color: var(--ink-2); font-size: var(--ui-xs); }

/* --- Schranke: warum etwas gesperrt ist ------------------------------ */

.guard {
  margin: 0;
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--ui-sm);
}
.guard--locked { border-inline-start-color: var(--hold); color: var(--hold); }
.guard--open { border-inline-start-color: var(--settled); color: var(--settled); font-weight: 650; }

/* --- Merkzettel: der Mensch entscheidet ------------------------------ */

.note {
  padding: var(--space-sm) var(--space-md);
  border: var(--hair-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: var(--ui-base);
}
.note b { display: block; }
.note--act { border-color: var(--act); background: var(--act-soft); }
.note--hold { border-color: var(--hold-rule); background: var(--hold-soft); }

/* --- Übergabe: vormerken und senden sind zwei Schritte --------------- */

.handoff { display: grid; gap: var(--space-sm); padding: var(--space-md); border: var(--hair-strong); background: var(--paper-2); }
.handoff__status { margin: 0; color: var(--ink-2); font-size: var(--ui-sm); }
.handoff__list { margin: 0; padding-inline-start: 1.1rem; color: var(--ink-2); font-size: var(--ui-sm); }
.handoff textarea { min-height: 11rem; font-family: var(--font-mono); font-size: var(--ui-xs); background: var(--paper); }

/* --- Umschalter: Board <-> Heute ------------------------------------- */

.switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--night-rule);
  background: var(--night);
}
.switch__cell {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-2xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--on-night-2);
  text-align: start;
  transition: background-color var(--dur-swap) var(--ease-out), color var(--dur-swap) var(--ease-out);
}
.switch__cell + .switch__cell { border-inline-start: 1px solid var(--night-rule); }
.switch__name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--ui-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.switch__hint { font-size: var(--ui-xs); font-weight: 500; overflow-wrap: anywhere; }
.switch__cell[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.switch__cell[aria-selected="true"] .switch__hint { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .switch__cell:hover:not([aria-selected="true"]) { background: var(--night-2); color: var(--on-night); }
}
.switch__cell:active { transform: translateY(1px); }

/* --- Ansichtswechsel: die wichtigste Bewegung im Produkt ------------- */

.view[hidden] { display: none !important; }
.view { animation: view-in var(--dur-swap) var(--ease-out) both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Modaler Dialog --------------------------------------------------- */

.sheet {
  width: min(36rem, calc(100% - 2rem));
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sheet);
}
.sheet::backdrop { background: var(--backdrop); }
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border-block-end: var(--hair);
  background: var(--paper-2);
  font-size: var(--ui-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sheet__body { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md) var(--space-md); }
.sheet__body h2 { font-family: var(--font-display); font-size: var(--ui-view); font-weight: 400; }
.sheet__close {
  min-height: 2.25rem;
  min-width: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--ui-lg);
  line-height: 1;
}
.sheet__close:hover { color: var(--ink); }
.sheet__status { min-height: 1.4em; margin: 0; color: var(--ink-2); font-size: var(--ui-sm); }
dialog.sheet[open] { animation: sheet-in var(--dur-sheet) var(--ease-out) both; }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Hinweisstreifen -------------------------------------------------- */

.toast {
  position: fixed;
  z-index: var(--z-toast);
  inset: auto var(--space-md) var(--space-md) auto;
  max-width: min(30rem, calc(100% - var(--space-xl)));
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--ui-base);
}

/* --- Fußzeile --------------------------------------------------------- */

.foot { margin-block-start: auto; background: var(--night); color: var(--on-night-2); font-size: var(--ui-xs); }
.foot .shell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  justify-content: space-between;
  padding-block: var(--space-md);
}
.foot strong { color: var(--on-night); font-weight: 700; }

/* --- Bewegung abschalten --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .view { animation: none; }
}

@media (pointer: coarse) {
  .btn, .field, .switch__cell { min-height: 3rem; }
}

@media (max-width: 34rem) {
  .row__side { justify-content: flex-start; }
  .btn-row .btn { flex: 1 1 auto; }
}