/* EnvoyApps (F041–F043).
 *
 * Bygger PÅ app.css' tokens og klasser (.card, .kpi, .tag, .btn, .tw) og
 * tilføjer kun det galleriet og diagrammerne har brug for. Ingen nye farver:
 * --accent, --ink-* og --line kommer fra app.css, så en app ser ud som resten
 * af fladen og ikke som en tredjeparts widget.
 *
 * Diagrammerne er INLINE SVG tegnet af PHP (src/Apps/Svg.php). Der er intet
 * JS og intet byggetrin — formen på figuren er bestemt af tallene, og
 * farverne står her.
 */

/* ------------------------------------------------------------ galleriet */

.appgallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.apptile{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--sunk);
  display:flex;flex-direction:column;gap:6px}
.apptile b{font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.apptile p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.apptile form{margin:4px 0 0}

/* --------------------------------------------------------- de to datoer */

.appstamp .rule{gap:24px;flex-wrap:wrap}
.appstamp b{font-size:12px;color:var(--ink-2);
  font-weight:500;display:block}

/* ------------------------------------------------------------ diagrammer */

.appchart{padding:14px 14px 10px;overflow-x:auto}
/* Skriften er appens egen (F079). Tallene i diagrammet er SVG-enheder, ikke
   skærm-px: figuren skaleres med sin viewBox, og etiketternes størrelse er
   derfor bestemt af Apps\Svg's geometri — ikke af skalaen i app.css. */
.appsvg{display:block;max-width:100%;font-family:var(--font-sans)}
/* F079: søjler og linjer er SPEJLDATA, ikke modeltekst — derfor `--ink-2`
   og ikke lilla (VIS-002). Et negativt tal er rødt som et nej overalt. */
.appsvg .bar{fill:var(--ink-2);opacity:0.85}
.appsvg .bar.neg{fill:var(--deny);opacity:0.8}
.appsvg .ln{fill:none;stroke:var(--ink-2);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.appsvg .pt{fill:var(--ink-2)}
.appsvg .ax{stroke:var(--line);stroke-width:1}
.appsvg .lbl{font-size:9.5px;fill:var(--ink-3)}
.appsvg .val{font-size:9.5px;fill:var(--ink-2);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- formular */

.apptile .btn,.card-body form select{font-family:inherit}
.card-body form label{display:block;font-size:13px;color:var(--ink-2);margin:9px 0 3px}
.card-body form select{font-size:14px;padding:6px 10px;min-height:36px;border:1px solid var(--field);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);min-width:180px;max-width:100%}

/* ------------------------------------------------------------- telefonen */

@media (max-width:720px){
  .appgallery{grid-template-columns:1fr}
  .appstamp .rule{flex-direction:column;gap:10px;align-items:flex-start}
  .appchart{padding:10px 8px}
}