/* Vloka portal — the stylesheet for the half a person looks at.
 *
 * This is a DIFFERENT codebase from the appliance, so it cannot include wifi.css. What it can do
 * is carry the same tokens under the same names and the same component names, so that a customer
 * who signs into the portal and then into their own Vloka is looking at one product and not two.
 * The values below are copied from wifitool/static/css/wifi.css. If a colour changes there and
 * matters here, it is changed here too — there is no import that will do it for us, and pretending
 * otherwise is how two blues appear.
 *
 * The rules that govern this file are the appliance's own:
 *   docs/CONVENTIE_cellen.md  — the standard cell: white card, icon in an --accent-bg badge with
 *                               currentColor, CAPS eyebrow, big figure + " · label", link per
 *                               value and never around the card.
 *   docs/CONVENTIE_labels.md  — CAPS eyebrow in soft grey for headings, sentence case for buttons
 *                               and field labels, values never re-cased, and colour by MEANING:
 *                               grey neutral / yellow caveat / red destructive-or-critical /
 *                               green ok / blue planned.
 */

:root{
  --canvas:#F6F7F5; --surface:#FFFFFF;
  --line:#E7EAE7; --line-soft:#EDEFEC;
  --ink:#19241F; --muted:#6C7A74; --faint:#9AA6A0;
  --accent:#1E6FB8; --accent-bg:#E4EFF8;
  --ok:#1F9D6B; --ok-bg:#E5F3EC; --ok-tx:#0F6E4C;
  --warn:#CE921C; --warn-bg:#FBF1DA; --warn-tx:#8A5E0E;
  --bad:#C8514A; --bad-bg:#FAE8E6; --bad-tx:#8E2E27;
  --act:#6B4FA1; --act-bg:#EEE8F6; --act-tx:#4A357A;
  --plan:#4F79B3; --plan-bg:#E8EFF8;
  --tile:0 1px 2px rgba(25,36,31,0.05), 0 1px 1px rgba(25,36,31,0.03);
  /* Kept for the sign-in screen and nothing else — see .lg-name / .lg-btn at the bottom.
     Every other button in the portal is the flat --accent the software uses, so the buttons
     a customer presses all day look like the ones in the product. */
  --brand-grad:linear-gradient(90deg,#1E7FC2,#2FAE6A);
}

*{box-sizing:border-box;}
html{scrollbar-gutter:stable;}
body{margin:0;background:var(--canvas);color:var(--ink);
     font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     font-size:14px;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'IBM Plex Sans',system-ui,sans-serif;margin:0;letter-spacing:-0.01em;}
a{text-decoration:none;color:inherit;}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
      font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------- the frame */

.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh;}
.side{background-color:var(--canvas);background-image:url("/assets/honeycomb.svg");
      background-repeat:repeat;background-size:12px 7px;padding:18px 14px 14px;
      display:flex;flex-direction:column;gap:4px;position:sticky;top:0;align-self:start;
      height:100vh;overflow:auto;z-index:30;}
.brand{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--surface);
       border:1px solid var(--line);border-radius:10px;
       box-shadow:0 2px 9px rgba(15,61,46,.09);margin-bottom:10px;}
.brand img{width:34px;height:34px;flex:none;display:block;}
.brand .nm{font-weight:700;font-size:17px;letter-spacing:0.02em;}
.brand .sub{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--faint);
            letter-spacing:.04em;}

.grp{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:0.18em;
     text-transform:uppercase;color:var(--muted);padding:14px 8px 7px;margin-top:9px;
     border-top:1px solid var(--line);}
.grp.first{margin-top:2px;border-top:none;}

.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
     color:var(--muted);font-size:13.5px;background:var(--surface);border:1px solid #CDD6D0;
     box-shadow:0 2px 7px rgba(15,61,46,.08);transition:box-shadow .13s ease,transform .13s ease;}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.7;}
.nav:hover{background:var(--line-soft);color:var(--ink);
           box-shadow:0 5px 14px rgba(15,61,46,.14);transform:translateY(-1px);}
.nav.on{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--accent);font-weight:500;}
.nav .tag{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
          color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
.nav .tag.n{background:var(--accent);border-color:var(--accent);color:#fff;}
.ver{margin-top:auto;padding:10px 8px 2px;font-family:"IBM Plex Mono",monospace;
     font-size:10.5px;color:var(--faint);line-height:1.6;}

.main{display:flex;flex-direction:column;min-width:0;background:var(--surface);}
.top{display:flex;align-items:center;gap:12px;padding:14px 26px;}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);display:flex;
       align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
       border-radius:8px;padding:6px 11px;box-shadow:0 1px 4px rgba(15,61,46,.07);
       min-width:0;overflow:hidden;}
.crumb b{color:var(--ink);font-weight:600;}
.pill{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);
      border-radius:7px;padding:6px 11px;font-size:12.5px;color:var(--muted);
      background:var(--surface);box-shadow:0 1px 4px rgba(15,61,46,.07);flex-shrink:0;}
.av{width:28px;height:28px;border-radius:50%;background:var(--accent-bg);color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11.5px;}
.wrap{padding:6px 26px 40px;max-width:1180px;}
h1.pg{font-size:22px;font-weight:600;margin:10px 0 3px;}
p.pglead{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:70ch;line-height:1.65;}

/* ---------------------------------------------------------------- the cell (CONVENTIE_cellen) */

.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
       margin:0 0 22px;}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 17px;
      box-shadow:var(--tile);display:flex;flex-direction:column;gap:9px;}
.cell .ico{width:38px;height:38px;border-radius:11px;background:var(--accent-bg);
           color:var(--accent);display:flex;align-items:center;justify-content:center;}
.cell .ico svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round;}
.cell .eyebrow{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
               font-weight:500;}
.cell .fig{font-size:28px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
           line-height:1.05;}
.cell .fig .lab{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0;}
.cell .foot{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted);
            margin-top:auto;padding-top:4px;}
.cell .foot i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;
              vertical-align:1px;}
.cell a.val{color:var(--accent);font-weight:600;}
.cell a.val:hover{text-decoration:underline;}
.dot-ok{background:var(--ok);} .dot-bad{background:var(--bad);}
.dot-warn{background:var(--warn);} .dot-plan{background:var(--plan);}
.dot-off{background:var(--faint);}

/* ---------------------------------------------------------------- the table (one definition) */

.vk-tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
        border:1px solid var(--line);border-radius:12px;overflow:hidden;
        box-shadow:var(--tile);font-size:13.5px;}
.vk-tbl th{background:var(--line-soft);color:var(--muted);font-size:11px;font-weight:600;
           letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:10px 13px;
           border-bottom:1px solid var(--line);white-space:nowrap;}
.vk-tbl td{padding:11px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.vk-tbl tr:last-child td{border-bottom:none;}
.vk-tbl tbody tr:hover{background:var(--canvas);}
/* Real number columns right, everything else left — OP_28. */
.vk-tbl th.num,.vk-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
.vk-tbl td.tight{white-space:nowrap;}
.vk-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6;}

/* ---------------------------------------------------------------- labels, by MEANING */

.lbl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
     border-radius:6px;padding:2px 8px;border:1px solid transparent;white-space:nowrap;}
.lbl-neutral{background:var(--line-soft);color:var(--muted);border-color:var(--line);}
.lbl-ok{background:var(--ok-bg);color:var(--ok-tx);border-color:#cfe7da;}
.lbl-warn{background:var(--warn-bg);color:var(--warn-tx);border-color:#f0dfb4;}
.lbl-bad{background:var(--bad);color:#fff;border-color:var(--bad);}
.lbl-plan{background:var(--plan-bg);color:var(--plan);border-color:#d3e0f0;}
.lbl-act{background:var(--act-bg);color:var(--act-tx);border-color:#ddd2ee;}

/* "We have no record of this" is its own thing and must never look like a value. */
.vk-absent{color:var(--faint);font-style:italic;}

/* ---------------------------------------------------------------- notes and alerts */

.note{border:1px solid var(--line);background:var(--canvas);border-radius:11px;padding:12px 14px;
      font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 16px;}
.note b{color:var(--ink);}
.note-warn{background:var(--warn-bg);border-color:#f0dfb4;color:var(--warn-tx);}
.note-bad{background:var(--bad-bg);border-color:#f0cbc6;color:var(--bad-tx);}
.note-ok{background:var(--ok-bg);border-color:#cfe7da;color:var(--ok-tx);}
.note-act{background:var(--act-bg);border-color:#ddd2ee;color:var(--act-tx);}

/* ---------------------------------------------------------------- buttons, one tier system */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;
     padding:0 16px;border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:600;
     border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
     box-shadow:var(--tile);text-decoration:none;}
.btn:hover{background:var(--line-soft);}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff;
             box-shadow:0 6px 16px rgba(30,111,184,.22);}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent);}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff;}
.btn-danger:hover{background:#b4443e;}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:7px;}
.btn[disabled]{opacity:.55;cursor:default;filter:none;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 0;}

/* ---------------------------------------------------------------- forms */

.fld{margin:0 0 14px;}
.fld label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:0 0 5px;}
.fld .req{color:var(--bad);margin-left:2px;}
.fld input,.fld select,.fld textarea{width:100%;box-sizing:border-box;min-height:40px;
    border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px;
    font-family:inherit;background:var(--canvas);color:var(--ink);}
.fld textarea{min-height:120px;line-height:1.6;resize:vertical;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-bg);background:var(--surface);}
.fld .hint{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.55;}
/* A form that is mostly short fields. Two columns where there is room, one where there is not —
   an address and a postcode on separate full-width rows reads as a questionnaire. */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 18px;
       max-width:760px;}
.fgrid .fld.wide{grid-column:1/-1;}
/* Read-only is a state, not a disabled control: it stays selectable and copyable, and it looks
   like what it is rather than like a field that failed to load. */
.fld input[readonly],.fld textarea[readonly]{background:var(--canvas);color:var(--muted);
       cursor:default;}
/* A file input is a button plus a filename, not a text field: without this it inherits the 40 px
   box and the browser's own control sits inside it looking like a rendering fault. */
.fld input[type=file]{border:1px dashed var(--line);background:var(--canvas);padding:9px 10px;
       font-size:13px;cursor:pointer;}
.fld input[type=file]:hover{border-color:var(--accent);}
/* A screenshot on an incident. Bounded, because a 4000 px wide capture must not set the width of
   the conversation it is in. */
.shot{display:block;margin-top:12px;max-width:520px;border:1px solid var(--line);
      border-radius:10px;overflow:hidden;background:var(--surface);}
.shot img{display:block;width:100%;height:auto;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
      box-shadow:var(--tile);margin:0 0 18px;}
.card h2{font-size:15px;font-weight:600;margin:0 0 4px;}
.card .sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.6;}
.sect{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
      text-transform:uppercase;color:var(--muted);margin:26px 0 11px;}

/* ---------------------------------------------------------------- the sign-in screen
 * The same frame as the appliance's own welcome.html and lock.html: a standalone page, centred,
 * one card, the rotating intro drawing at the top. Signing in to the portal should look like
 * signing in to Vloka, because it is the same product.
 */

body.lg{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
        background:var(--line-soft);padding:28px 16px;}
.lg-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);
         border-radius:18px;padding:22px 26px 26px;text-align:center;
         box-shadow:0 18px 50px rgba(20,40,32,.10);}
.lg-art{width:100%;aspect-ratio:3/2;border:1px solid var(--line);border-radius:12px;
        background:var(--canvas);object-fit:cover;display:block;
        box-shadow:0 6px 16px rgba(16,32,45,.06);}
/* COONEIT's own artwork carries the wordmark, so it IS the masthead rather than a picture above
   one: no frame, no card inside a card, and `contain` because cropping a logo is not a crop, it
   is a different logo. */
.lg-art-brand{border:none;background:transparent;box-shadow:none;object-fit:contain;
              aspect-ratio:auto;margin-bottom:4px;}
.lg-mark{display:block;margin:20px auto 0;}
.lg-name{font-weight:700;font-size:34px;line-height:1;margin-top:8px;
         background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;
         color:transparent;}
.lg-tag{font-weight:500;font-size:15px;margin-top:5px;white-space:nowrap;
        background:linear-gradient(90deg,#2b8fb8,#2FAE6A);-webkit-background-clip:text;
        background-clip:text;color:transparent;}
.lg-form{text-align:left;margin-top:20px;}
.lg-form label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:0 0 5px;}
.lg-form label + input{margin-bottom:12px;}
.lg-form input{width:100%;box-sizing:border-box;height:40px;border:1px solid var(--line);
    border-radius:9px;padding:0 12px;font-size:14px;font-family:inherit;background:var(--canvas);
    color:var(--ink);}
.lg-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);}
.lg-btn{display:block;width:100%;margin-top:20px;padding:12px 0;border:none;border-radius:10px;
        background:var(--brand-grad);color:var(--surface);font-weight:600;font-size:15px;
        cursor:pointer;font-family:inherit;text-decoration:none;
        box-shadow:0 8px 20px rgba(30,127,194,.25);}
.lg-btn:hover{filter:brightness(1.05);}
.lg-btn[disabled]{opacity:.6;cursor:default;filter:none;}
.lg-err{margin-top:16px;background:var(--bad-bg);color:#b3261e;border:1px solid #f3c6c0;
        border-radius:9px;padding:9px 12px;font-size:12.5px;text-align:left;line-height:1.55;}
.lg-ok{margin-top:16px;background:var(--ok-bg);color:var(--ok-tx);border:1px solid #cfe7da;
       border-radius:9px;padding:9px 12px;font-size:12.5px;text-align:left;line-height:1.55;}
.lg-note{margin-top:14px;font-size:11px;color:var(--faint);line-height:1.6;text-align:left;}
.lg-forgot{margin-top:14px;text-align:center;font-size:12.5px;}
.lg-forgot a{color:var(--accent);font-weight:600;}
.lg-forgot a:hover{text-decoration:underline;}
.lg-brand{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:1.4px;color:#5c6b77;}
.lg-ver{margin-top:4px;font-size:10.5px;color:#a6b2ba;font-family:'IBM Plex Mono',monospace;}

/* The MFA step: six digits, spaced out, monospace, so a typo is visible before it is submitted. */
.mfa-code{letter-spacing:.42em;font-family:'IBM Plex Mono',monospace !important;font-size:20px !important;
          text-align:center;height:52px !important;font-variant-numeric:tabular-nums;}
.mfa-badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 12px 6px 9px;
           border:1px solid var(--line);border-radius:6px;background:var(--canvas);font-size:12px;
           font-weight:600;color:var(--muted);}
.mfa-badge svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.8;
               stroke-linecap:round;stroke-linejoin:round;}
.qr{display:block;margin:0 auto;image-rendering:pixelated;border:8px solid #fff;border-radius:8px;
    box-shadow:var(--tile);}
/* The TOTP secret, in groups of four. It wraps BETWEEN groups and never inside one:
   `word-break:break-all` split it mid-group ("… 4QSC TPH" / "5"), which is unreadable for the
   one job this element has — being typed or read aloud by somebody whose camera will not scan. */
.secret{font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.08em;
        background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
        word-break:keep-all;overflow-wrap:normal;text-align:center;line-height:1.9;}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
       font-family:'IBM Plex Mono',monospace;font-size:13.5px;margin:14px 0;}
.codes span{background:var(--canvas);border:1px solid var(--line);border-radius:7px;
            padding:8px 10px;text-align:center;letter-spacing:.03em;}

@media (max-width:820px){
  .app{grid-template-columns:1fr;}
  .side{position:static;height:auto;}
  .wrap{padding:6px 16px 32px;}
}

@media print{
  .side,.top,.btn-row,.btn{display:none !important;}
  .app{grid-template-columns:1fr;}
  body{background:#fff;}
}

/* ---------------------------------------------------------------------------------------------
   The administrator portal — same shell, unmistakably not the customer's
   ---------------------------------------------------------------------------------------------

   admin.vloka.nl and portal.vloka.nl draw the same components from this same file. That is the
   point: one look, one set of conventions, no fork. But the one question somebody must never get
   wrong is WHICH of the two they are in — publishing a build to every customer and reading your
   own licences are not screens to confuse at a glance.

   So the difference is carried by colour and by name, not by a different layout:
     * the sidebar is a soft, translucent purple rather than the neutral canvas;
     * the mark is red into purple where the customer mark is blue into green
       (assets/logo-mark-admin.svg, same geometry);
     * the accent under it is the purple already in this file as --act, so nothing new is invented.

   The tint is written as rgba over the canvas rather than as an opaque hex, so the honeycomb
   underneath still reads through it and the sidebar stays the same object in a different light —
   the alternative, a flat block of colour, looks like a second design rather than a second door.

   Everything else — cells, tables, buttons, labels, spacing — is inherited unchanged. A rule that
   is not about telling the two apart does not belong in this block. */
.realm-admin{
  --accent:#6B3FA0; --accent-bg:#EEE8F6;
}
.realm-admin .side{
  /* Deliberately faint: this sits behind text all day, and a saturated sidebar is a sidebar
     somebody turns away from. The honeycomb keeps showing through. */
  background-color:rgba(107,63,160,0.07);
  border-right:1px solid rgba(107,63,160,0.18);
}
.realm-admin .brand{
  border-color:rgba(107,63,160,0.20);
  box-shadow:0 2px 9px rgba(107,63,160,.14);
}
.realm-admin .brand .sub{
  /* The words ADMINISTRATOR PORTAL are the label that answers the question in text, for anybody
     who does not read the colour — a difference in hue is not universally visible. */
  color:#6B3FA0;
  font-weight:600;
}
.realm-admin .grp{color:#6A5A80;}
.realm-admin .nav:hover{background:rgba(107,63,160,0.10);}
.realm-admin .nav.on{background:rgba(107,63,160,0.14);border-color:transparent;color:#4A357A;}
.realm-admin .nav .tag.n{background:#6B3FA0;border-color:#6B3FA0;}
.realm-admin .ver{color:#7A6A8E;}
.realm-admin .lg-realm{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.2em;
  font-weight:600;color:#6B3FA0;background:#EEE8F6;border:1px solid #DCD0EC;border-radius:6px;
  padding:6px 10px;display:inline-block;margin:14px 0 2px;}
body.lg.realm-admin .lg-card{border-top:3px solid #6B3FA0;}

/* Customer tiles — administrator portal only.
   ------------------------------------------
   One card per customer instead of a row, because the question this screen answers is "who needs
   me today", and a table answers "what are the numbers". The border carries the answer: orange
   when something is running out or open, red when something has already lapsed. Everything that
   makes a tile orange is listed ON the tile, so the colour is never the only statement — a border
   that says "something" and makes you go and find out what is a border that gets ignored. */
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;}
.cust{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
      box-shadow:var(--tile);display:flex;flex-direction:column;gap:8px;}
.cust.needs{border-color:var(--warn);border-left-width:3px;}
.cust.needs.bad{border-color:var(--bad);}
.cust-h{display:flex;flex-direction:column;gap:2px;}
.cust-code{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:0.12em;
           color:var(--faint);font-weight:600;}
.cust-nm{font-size:15px;font-weight:650;color:var(--ink);text-decoration:none;}
.cust-nm:hover{color:var(--accent);}
.cust-sub{font-size:11.5px;color:var(--muted);}
.cust-why{margin:0;padding:0 0 0 15px;font-size:12px;line-height:1.6;}
.cust-why li.warn{color:var(--warn-tx);}
.cust-why li.bad{color:var(--bad-tx);font-weight:600;}
.cust-ok{font-size:12px;color:var(--muted);}
.cust-n{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted);
        border-top:1px solid var(--line-soft);padding-top:8px;}
.cust-n b{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-size:12.5px;}
.cust-f{font-size:11.5px;color:var(--muted);}
.cust-f a{color:var(--accent);font-weight:600;text-decoration:none;}
.inc-grp{margin-bottom:12px;gap:6px;}
.inc-grp .inc-tbl{margin-top:4px;}
.inc-grp .inc-tbl th{font-size:10.5px;}