source: Klonkt/src/assets/css/guardian.css@ d7e72b8

/* Guardian PWA (FEP-633c): its own calm, dark surface; the buoy orange is
   the accent. Standalone: this page never inherits the site theme. */
:root {
  --bg: #141a24;
  --card: #1e2632;
  --ink: #e8ecf2;
  --sub: #93a0b4;
  --line: #2c3646;
  --accent: #ff6b35;
  --ok: #4caf7d;
  --danger: #e05a5a;   /* alleen voor onomkeerbare stappen, zoals een ward loslaten */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 48px;
}
.g-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}
.g-head-txt { flex: 1; }
.g-head h1 { font-size: 1.15rem; margin: 0; }
.g-head .g-sub { margin: 0; color: var(--sub); font-size: .78rem; }
.g-buoy { font-size: 1.7rem; }
.g-me { color: var(--sub); font-size: .85rem; }
#site-picker {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
}
main { max-width: 640px; margin: 0 auto; padding: 8px 16px; }

section { padding: 18px 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }
.g-sec-head { display: flex; align-items: center; gap: 8px; }
.g-sec-head h2 { font-size: 1.02rem; margin: 0; }
.g-badge {
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 7px;
}
.g-sec-sub { color: var(--sub); font-size: .84rem; margin: 4px 0 12px; }
.g-empty { color: var(--sub); font-size: .9rem; margin: 6px 0 0; }
.g-msg { font-size: .85rem; color: var(--ok); margin: 8px 0 0; }
.g-msg.err { color: #ff7a7a; }
.g-list { display: flex; flex-direction: column; gap: 8px; }

.g-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.g-card.help { border-left: 3px solid var(--accent); }
.g-card .row { display: flex; align-items: center; gap: 10px; }
.g-card .row .grow { flex: 1; min-width: 0; }
.g-card .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-card .when { color: var(--sub); font-size: .76rem; white-space: nowrap; }
.g-card .body { margin-top: 8px; font-size: .92rem; overflow-wrap: anywhere; }
.g-card .body img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
.g-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .82rem; text-decoration: none; }

.tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.tag.wait { background: #3a2f1a; color: #e8b04b; }
.tag.ok { background: #17301f; color: var(--ok); }
.tag.co { background: #2a1f3a; color: #c39bff; }

#adopt-form { display: flex; gap: 8px; }
#adopt-form input {
  flex: 1; min-width: 0;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
button {
  background: var(--accent); color: #fff; border: 0;
  border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button.quiet { background: transparent; color: var(--sub); border: 1px solid var(--line); font-weight: 500; }
button.quiet.is-on { color: var(--ok); border-color: var(--ok); }
button.small { padding: 6px 12px; font-size: .82rem; }

/* Wards' corner (v2 meekijken) */
.g-card.feed .g-when { color: var(--muted, #888); font-size: .8em; margin-left: auto; }
.g-card.feed .feed-body { margin-top: 6px; line-height: 1.4; }
.g-card.feed .feed-body img { max-width: 100%; border-radius: 8px; }

/* ── The body of a post ────────────────────────────────────────────────────
   The 🛟 card shows a real post, so it is rendered by the same partial de
   Krant and Berichten use (partials/note-body). These are that partial's
   classes, in the PWA's own colours: the dashboard is standalone and does not
   load the site's stylesheet. */
.g-note .tl-content { line-height: 1.5; overflow-wrap: anywhere; }
.g-note .tl-content p { margin: .35rem 0; }
.g-note .tl-content p:first-child { margin-top: 0; }
.g-note .tl-content p:last-child { margin-bottom: 0; }
.g-note .tl-content a { color: var(--accent); }
.g-note img.emoji { height: 1.25em; width: auto; margin: 0 .05em; vertical-align: -.2em;
  display: inline-block; border-radius: 0; background: none; }

/* Quote card and link preview: one card, two origins. */
.g-note .tl-quote { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card-2, rgba(128,128,128,.07)); }
.g-note .tl-quote-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-width: 0; }
.g-note .tl-quote-avatar { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.g-note .tl-quote-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.g-note .tl-quote-handle { color: var(--sub); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.g-note .tl-quote-body { color: var(--sub); font-size: .88rem; line-height: 1.45; max-height: 14em; overflow: hidden; }
.g-note .tl-quote-media { display: block; margin: 6px 0 0; }

/* The capture a 🛟 usually carries. */
.g-note .tl-media { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.g-note .tl-media-img { display: block; border-radius: 10px; overflow: hidden; }
.g-note .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; }
.g-note .tl-media-video, .g-note .tl-media-audio { width: 100%; margin: 8px 0 0; border-radius: 10px; display: block; }
.g-note .tl-media-video { max-height: 320px; background: #000; }

/* ── Paneel per ward ───────────────────────────────────────────────────────
   Een guardian denkt per kind, niet per functie: achter de regel van een kind
   zit alles over dat kind. De regel zelf draagt de tellers, zodat een dicht
   paneel nooit iets verbergt dat een antwoord nodig heeft. */
.g-card.ward > .row { gap: 8px; }
.g-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-panel[hidden] { display: none; }
.g-panel-sec + .g-panel-sec { margin-top: 16px; }
.g-panel-sec h3 { margin: 0 0 6px; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--sub); }
.g-panel-sec .g-card { background: transparent; border-color: var(--line); }
.g-panel-sec .g-card + .g-card { margin-top: 6px; }
.g-panel-sec .row { flex-wrap: wrap; }
.g-empty.small { margin: 0; font-size: .85rem; }
.tag.help { color: var(--accent); border-color: var(--accent); }

/* Loslaten van een ward: geen browser-confirm maar een stap in het paneel, met
   de gevolgen erbij. Rustig van kleur; het is een besluit, geen alarm. */
.g-warn { margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.g-warn strong { display: block; margin-bottom: 6px; }
.g-warn p { margin: 0 0 8px; font-size: .88rem; line-height: 1.45; color: var(--sub); }
.g-warn p.grave { color: var(--ink); font-weight: 500; }
.g-warn .row { margin-top: 10px; gap: 8px; }
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Beschikbaarheid (FEP-633c 3.6) ────────────────────────────────────────
   De buddy-list-stip op de verantwoordelijkheids-as: groen beschikbaar, geel
   afwezig-verklaard met een einde, grijs slapend-geconstateerd (een antwoord
   herstelt alles). Labels zijn UI; de draad houdt de spec-termen. */
.g-avdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.g-avdot.is-active { background: var(--ok); }
.g-avdot.is-away { background: #e0a83a; }
.g-avdot.is-dormant { background: #8a93a3; }
.g-avlabel { color: var(--sub); font-size: .8rem; white-space: nowrap; }
.row.g-guard { gap: 8px; margin-top: 6px; }
/* The status of a proposal this guardian sent (5.6): one quiet line per
   feature. The colour says the state before the words do. */
.g-prop { margin: 6px 0 0; color: var(--sub); }
.g-prop-accepted { color: var(--ok); }
.g-prop-rejected, .g-prop-expired { color: var(--danger); }
.g-away-row { display: flex; gap: 8px; }
.g-card.lapse { border-left: 3px solid #8a93a3; }
.g-card.lapse .row { margin-top: 8px; gap: 8px; }

/* Een voorgestelde gated setting (FEP-633c 5.6) van een mede-guardian. */
.g-card.gated { border-left: 3px solid var(--accent); }
.g-card.gated .row { margin-top: 8px; gap: 8px; }

/* Het gate-paneel per ward (shaer-ahy.1). Een rij per gate, met het soort en de
   drempel erbij. Bewust rustig: dit is een overzicht om te LEZEN, en pas daarna
   een plek om iets voor te stellen. */
.g-gate { padding: .5rem 0; border-top: 1px solid var(--g-line, rgba(0,0,0,.08)); }
.g-gate:first-of-type { border-top: 0; }
.g-gate-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.g-gate-name { font-weight: 600; }
/* Het soort is een fluistering, geen kop: het hoort erbij te staan zonder de
   naam van de gate te overstemmen. */
.g-gate-kind { font-size: .78em; opacity: .65; }
.g-gate-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .15rem; }
.g-gate-meta .g-dim { opacity: .55; }
/* Onomkeerbaar krijgt gewicht, want dat is het enige in dit paneel dat je niet
   kunt terugdraaien. */
.g-gate-warn { font-weight: 600; }
.g-gate-wait { font-weight: 600; }

/* De gedeelde staat van een hulpvraag (shaer-lgo). Rustig: dit is geen alarm,
   het moet alleen onmogelijk te missen zijn wie er al op af is. */
.g-help-state { margin-top: .5rem; }
.g-help-pick { font-size: .9em; }
.g-help-age { opacity: .6; }        /* oud, maar niet weg */
.g-help-done { font-weight: 600; }
.g-confirm { margin-top: .5rem; }

/* Het archief van afgehandelde hulpvragen: aanwezig, niet in de weg. */
.g-help-archive { margin-top: .5rem; opacity: .75; }

/* De geschiedenis onderaan een wardpaneel: aanwezig, duidelijk afgesloten, en
   visueel losgemaakt van wat nog wacht. */
.g-panel-history { border-top: 2px solid var(--g-line, rgba(0,0,0,.12)); margin-top: 1rem; opacity: .8; }

/* ── Het poortenpaneel als cockpit (shaer-ahy.1, Barts richting 8-8) ──
   Elke gate is een toets zoals op een aircopaneel: lampje links, naam erop,
   en een klein verzonken statusveld met de stand als tekst. Het lampje en het
   veld zeggen hetzelfde in twee vormen -- kleur alleen is geen antwoord. */
.g-gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin: .35rem 0; }
.g-sw-wrap { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.g-sw {
  display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
  text-align: left; padding: .5rem .6rem; border-radius: 10px;
  border: 1px solid var(--g-line, rgba(0,0,0,.18));
  background: var(--g-key, linear-gradient(180deg, rgba(255,255,255,.9), rgba(0,0,0,.04)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.12);
  cursor: pointer; font: inherit;
  /* Expliciet, niet geerfd (Barts aanwijzing, 8-8): de paginakleur zakte weg
     in het toetsvlak. Het opschrift is het donkerste op de toets. */
  color: var(--g-key-ink, #1b1e22);
}
.g-sw:active:not([disabled]) { box-shadow: inset 0 1px 3px rgba(0,0,0,.25); transform: translateY(1px); }
/* Niet verstelbaar is niet kapot: de toets drukt niet in, de stand blijft leesbaar. */
.g-sw[disabled] { cursor: default; opacity: .8; }
.g-sw-head { display: flex; align-items: center; gap: .45em; min-width: 0; }
.g-sw-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Het lampje. Aan gloeit, uit is dof, onbeslist is een open kringetje (geen
   besluit is de afwezigheid van een), wachten knippert -- de enige stand die
   vanzelf verandert, dus de enige die om je blik mag vragen -- en gepland is
   een lege fitting: een poort die nog niet bestaat is geen dichte deur. */
.g-sw-lamp { flex: none; width: .6em; height: .6em; border-radius: 50%; box-shadow: inset 0 0 2px rgba(0,0,0,.35); }
.g-lamp-on { background: var(--g-lamp-on, #2f9e5f); box-shadow: 0 0 6px 1px rgba(47,158,95,.55); }
.g-lamp-off { background: var(--g-lamp-off, #7a8087); }
.g-lamp-undecided { background: transparent; border: 1px dashed currentColor; opacity: .55; box-shadow: none; }
.g-lamp-waiting { background: var(--g-warn, #b8860b); animation: g-lamp-pulse 1.4s ease-in-out infinite; }
.g-lamp-planned { background: transparent; border: 1px dotted currentColor; opacity: .4; box-shadow: none; }
@keyframes g-lamp-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .g-lamp-waiting { animation: none; } }

/* In het donker geen lichte toetsen: de site heeft een echt donker thema
   (style.css), en een wit-op-lichtgrijs paneel is daar onleesbaar. Zelfde
   vorm, andere verf; de vars blijven overschrijfbaar. */
@media (prefers-color-scheme: dark) {
  .g-sw {
    background: var(--g-key, linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.5);
    color: var(--g-key-ink, rgba(255,255,255,.95));
  }
  .g-sw-state { background: var(--g-lcd, rgba(0,0,0,.4)); }
}

/* Het statusveld: verzonken venstertje, vaste letter, zoals de temperatuur op
   het aircopaneel. */
.g-sw-state {
  align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74em; padding: .1em .5em; border-radius: 4px;
  border: 1px solid var(--g-line, rgba(0,0,0,.18));
  background: var(--g-lcd, rgba(0,0,0,.07));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  /* Het oplichtende display van de toets: de stand in de accentkleur van het
     huis (Barts aanwijzing, 8-8), zoals de cijfers op het aircopaneel. */
  color: var(--accent, #6b8f71);
  font-weight: 600;
}
.g-sw-meta { display: flex; flex-wrap: wrap; gap: .3em .7em; opacity: .7; font-size: .82em; }

/* De poortenlijst blijft ingeklapt tot je hem opent. Met twaalf toetsen duwt
   een open paneel alles eronder van het scherm. */
.g-gates-toggle { display: block; width: 100%; text-align: left; margin: .25rem 0; }

/* De waarschuwing bij een gate-voorstel (shaer-nf9). Geen rode paniekbalk: dit
   moet gelezen worden, niet weggeklikt. Een rand links, zoals een citaat. */
.g-warn { margin: .5rem 0; padding: .4rem 0 .4rem .7rem; border-left: 3px solid var(--g-warn, #b8860b); }
.g-warn p { margin: 0 0 .25rem; }
.g-warn p:last-child { margin-bottom: 0; }
.g-confirm .g-warn { border-left: 0; padding-left: 0; }

/* De vraag van het kind zelf (shaer-8ru). Het enige op een poortrij dat van het
   kind komt, dus niet grijs weggeschreven tussen de drempels. */
.g-gate-asked { margin: .2rem 0 0; color: var(--g-asked, #7a5ea8); font-weight: 600; }

/* "Jouw antwoord beslist dit" (shaer-8vt). Zwaarder dan de rest van de
   waarschuwing: dit is het verschil tussen meedoen en beslissen. */
.g-decisive { font-weight: 700; color: var(--g-decisive, #a33); }