nordisk/holger-ui

assets/console.css

/* holger console: the stylesheet of BOTH bundles (A28 M13: index.html, the open page, and
   index-metered.html, the metered page, link it). Moved out of index.html so the two pages are
   one page; trunk and the Build Thing's web-app step copy it content-hashed. */

/* ── Vetra design system (vetra.se) — dark-first, navy + electric blue ──
   Ground/card/elevated surfaces, brand #3b82f6, Inter, white/slate text.
   Single-theme by brand decision: the identity is dark. No font CDN —
   the console must render identically inside an airgap. */
:root {
  --bg: #0a0e1a;
  --card: #111827;
  --elevated: #1c2536;
  --hover: #243044;
  --brand: #3b82f6;
  --brand-dim: #2563eb;
  --brand-light: #60a5fa;
  --brand-glow: rgba(59, 130, 246, 0.15);
  --ink: #f1f5f9;
  --sub: #94a3b8;
  /* Dimmest text tone that still clears WCAG AA 4.5:1 on every surface
     it lands on: 6.59:1 on --bg, 6.08 on --card, 5.71 on the th blend,
     5.26 on --elevated. #64748b (the old value) failed all four. */
  --muted: #8b98ad;
  --good: #34d399;
  --bad: #f87171;
  --warn: #fbbf24;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 24px;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--elevated);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.mark { width: auto; height: 42px; flex: none; }
.brand-product { font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { color: var(--sub); font-weight: 400; margin-left: -4px; }

.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
  color: var(--sub); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  padding: 5px 12px; border-radius: 7px;
}
.nav a:hover { color: var(--ink); background: var(--elevated); }
.nav a[aria-current="page"] {
  color: var(--brand-light);
  background: var(--brand-glow);
}

.authbox { display: flex; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.authbox a { color: var(--sub); text-decoration: none; }
.authbox a:hover { color: var(--brand-light); }
.health { font-size: 0.82rem; }

/* ── Content ────────────────────────────────────────────── */
main {
  margin: 0 auto;
  padding: 30px 24px 80px;
}
section { animation: fade-up 0.45s ease-out both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  section { animation: none; }
}

h2 {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 14px;
}
h3 {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sub);
  margin: 30px 0 10px;
}
.crumbs { margin: 0 0 6px; color: var(--muted); font-size: 0.88rem; }
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--brand-light); }
.crumbs strong { color: var(--ink); font-weight: 600; }

/* ── Tables as cards ────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--elevated);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.92rem;
}
th {
  text-align: left;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--elevated);
  background: rgba(28, 37, 54, 0.45);
  white-space: nowrap;
}
td { padding: 10px 16px; border-bottom: 1px solid var(--elevated); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
td a { color: var(--brand-light); text-decoration: none; }
td a:hover { text-decoration: underline; text-underline-offset: 3px; }

.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.count { color: var(--muted); font-size: 0.85rem; }
.measurenote { max-width: 64ch; line-height: 1.6; }

/* ── States ─────────────────────────────────────────────── */
.pending { color: var(--muted); }
.ok { color: var(--good); }
.err { color: var(--bad); }

/* ── Controls ───────────────────────────────────────────── */
button {
  padding: 7px 16px;
  border: 1px solid var(--elevated);
  border-radius: 8px;
  background: var(--elevated);
  color: var(--ink);
  font: inherit; font-size: 0.9rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
button:hover { background: var(--hover); border-color: var(--brand-dim); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: var(--elevated); border-color: var(--elevated); }

.toolbar button, .attach button {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
}
.toolbar button:hover, .attach button:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.toolbar button:disabled, .attach button:disabled {
  background: var(--elevated); border-color: var(--elevated);
}

.danger-big {
  background: transparent !important;
  border-color: var(--bad) !important;
  color: var(--bad) !important;
}
.danger-big:hover { background: rgba(248, 113, 113, 0.1) !important; }
.danger-big:disabled {
  border-color: var(--elevated) !important;
  color: var(--muted) !important;
  background: transparent !important;
}

input[type="text"], input[type="search"], input[type="password"], select {
  padding: 7px 12px;
  border: 1px solid var(--elevated);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit; font-size: 0.9rem;
}
input::placeholder { color: var(--muted); }
input[type="file"] { font: inherit; font-size: 0.88rem; color: var(--sub); max-width: 320px; }

:is(a, button, input, select, summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1.5px var(--brand);
  border-radius: 8px;
}

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar input[type="search"], .toolbar input[type="password"] { flex: 1; max-width: 360px; }

.axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.axis { display: flex; flex-direction: column; gap: 4px; }
.axis > span {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}

.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

/* ── Detail view ────────────────────────────────────────── */
.facts {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 0 0 16px;
  background: var(--card);
  border: 1px solid var(--elevated);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.92rem;
}
.facts dt {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 0.25em;
}
.facts dd { margin: 0; overflow-wrap: anywhere; }

.doc {
  background: var(--card);
  border: 1px solid var(--elevated);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto; max-height: 320px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem; line-height: 1.6;
  color: var(--sub);
}

.attach {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px;
}

.rowact { text-align: right; }
.rowact .danger {
  padding: 3px 12px;
  background: transparent;
  border-color: var(--elevated);
  color: var(--muted);
  font-size: 0.8rem;
}
.rowact .danger:hover {
  border-color: var(--bad); color: var(--bad);
  background: rgba(248, 113, 113, 0.08);
}

/* ── Upload panel ───────────────────────────────────────── */
.upload {
  margin-top: 30px;
  background: var(--card);
  border: 1px solid var(--elevated);
  border-radius: 10px;
}
.upload summary {
  padding: 12px 18px; cursor: pointer; user-select: none;
  font-size: 0.9rem; font-weight: 500; color: var(--sub);
  border-radius: 10px;
}
.upload summary:hover { color: var(--ink); }
.upload[open] summary { border-bottom: 1px solid var(--elevated); color: var(--ink); }
.upload-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.report { max-width: 440px; }
.report td:first-child { color: var(--sub); }

/* ── Feedback vocabulary ────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  border: 1px solid var(--elevated); margin-right: 6px;
}
.badge-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.badge-neutral { color: var(--sub); }

.banner {
  padding: 10px 16px; border-radius: 8px; margin: 0 0 16px;
  font-size: 0.92rem; border: 1px solid;
}
.banner-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent);
              background: rgba(248, 113, 113, 0.07); }
.banner-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent);
               background: rgba(251, 191, 36, 0.07); }

/* ── Dashboard ──────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         gap: 14px; margin: 0 0 8px; }
.card { background: var(--card); border: 1px solid var(--elevated);
        border-radius: 10px; padding: 16px 18px; }
.card h3 { margin-top: 0; }
.minted { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--elevated); border-radius: 8px; }
.minted .mono { word-break: break-all; }
.cardline { margin: 8px 0 4px; font-weight: 600; }
.cardline a { color: var(--brand-light); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 2px;
        padding: 2px 10px; border-radius: 99px; font-size: 0.78rem;
        background: var(--elevated); color: var(--sub); }
.chip-x { border: none; background: none; color: var(--sub); cursor: pointer;
          font-size: 0.72rem; padding: 0 2px; }
.chip-x:hover { color: var(--bad); }
.shortcuts { display: flex; flex-wrap: wrap; gap: 10px; }
.shortcut { padding: 8px 16px; border: 1px solid var(--elevated); border-radius: 8px;
            background: var(--card); color: var(--brand-light);
            text-decoration: none; font-size: 0.9rem; }
.shortcut:hover { border-color: var(--brand-dim); background: var(--hover); }

/* ── Security workflow ──────────────────────────────────── */
.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--sub); }
.tile:hover { border-color: var(--brand-dim); background: var(--hover); }
.tile-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.tile-title { font-size: 0.85rem; }
.tile-count { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 18px; }
.pane .facts dd, .pane .mono, td.mono, td.wrap { overflow-wrap: anywhere; word-break: break-word; }
.pane .scanner { border-top: 1px solid var(--elevated); padding-top: 8px; margin-top: 8px; }
.actions input[type="text"] { flex: 1; min-width: 160px; max-width: 360px; }
.board { margin: 0 0 18px; }
.board-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }

/* ── Confirm dialog ─────────────────────────────────────── */
.dialog-scrim { position: fixed; inset: 0; z-index: 50;
                background: rgba(4, 6, 12, 0.7); backdrop-filter: blur(3px);
                display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialog { background: var(--card); border: 1px solid var(--elevated);
          border-radius: 12px; padding: 22px 24px; max-width: 480px; width: 100%; }
.dialog-title { margin: 0 0 12px; font-size: 1rem; color: var(--ink);
                text-transform: none; letter-spacing: 0; }
.dialog-consequence { color: var(--warn); font-size: 0.9rem; line-height: 1.55;
                      margin: 14px 0 16px; }
.facts-plain { border: none; background: none; padding: 0; }

/* ── Misc structure ─────────────────────────────────────── */
.tablewrap { overflow-x: auto; }
.pathlist { margin: 8px 0; padding-left: 1.2em; line-height: 1.8; color: var(--sub); }
.metaline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.metaline .count { margin-left: auto; }
.rowactions a { color: var(--brand-light); text-decoration: none; font-size: 0.85rem; }
.quiet { background: transparent; border-color: var(--elevated); color: var(--sub); }
.quiet:hover { color: var(--ink); }

/* ── Failure model ──────────────────────────────────────── */
.failbox {
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  background: rgba(248, 113, 113, 0.06);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 16px;
}
.fail-summary { margin: 0 0 6px; color: var(--bad); }
.fail-summary a { color: var(--brand-light); }
.fail-detail { margin: 0 0 8px; color: var(--sub); font-size: 0.8rem; }

/* ── Shell chips ────────────────────────────────────────── */
.envchip {
  font-family: ui-monospace, monospace; font-size: 0.72rem;
  color: var(--muted); border: 1px solid var(--elevated);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.ident { text-decoration: none; }
.copy {
  padding: 2px 10px; font-size: 0.75rem;
  background: transparent; border-color: var(--elevated); color: var(--sub);
}
.copy:hover { color: var(--brand-light); border-color: var(--brand-dim); }
.th-sort {
  all: unset; cursor: pointer; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1.5px var(--brand); }


/* ── Skeletons ──────────────────────────────────────────── */
/* Shape-of-what-arrives placeholders. The shimmer is decoration:
   aria-hidden on the boxes, a live region carries the sentence. */
.skeleton-table td { padding: 10px 14px; }
.skeleton-bar {
  display: block; height: 0.72rem; border-radius: 4px;
  background: linear-gradient(90deg,
    var(--elevated) 0%, color-mix(in srgb, var(--elevated) 55%, var(--sub)) 50%,
    var(--elevated) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Refreshing data stays on screen but reads as not-yet-current.
   NOT via opacity: a group opacity composites the TEXT too and dropped
   table headers to 2.58:1 and links to 2.92:1 — below AA, and below the
   3:1 non-text floor, for the whole duration of a refresh. Staleness is
   carried by chrome (a ribbon + a muted border) instead, so every glyph
   keeps its checked contrast. aria-busy on the same container tells
   assistive tech. */
.stale { position: relative; }
.stale > table { border-color: var(--brand-dim); }
.stale::before {
  content: "refreshing…";
  position: absolute; top: 8px; right: 12px; z-index: 1;
  font-size: 0.72rem; color: var(--sub);
  background: var(--elevated); border: 1px solid var(--brand-dim);
  padding: 2px 9px; border-radius: 999px;
}

/* Motion is a preference, not a given. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; }
  .stale { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ── Type-to-confirm gate ───────────────────────────────── */
.phrase-gate { margin: 4px 0 14px; }
.phrase-gate code {
  background: var(--elevated); padding: 1px 6px; border-radius: 4px;
  color: var(--brand-light);
}
.phrase-gate input { width: 100%; }

/* ── A11y ───────────────────────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--brand-dim); color: #fff; padding: 8px 16px;
        border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
  .nav { order: 3; width: 100%; margin-right: 0; overflow-x: auto; }
  .health { display: none; }
  main { padding: 20px 14px 60px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dt { padding-top: 10px; }
  .metaline .count { margin-left: 0; width: 100%; }
  .panes { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions input[type="text"] { max-width: none; width: 100%; }
}