source: Klonkt/src/assets/css/guardian.css@ 7d7b36d

/* 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; }