:root{
  /* The ground is LIGHT HONEY (Clifford, 2026-08-21). It was a cool grey-green (#F6F7F5),
     which is a neutral nobody chose - it came with the shell. Honey ties the page to the
     honeycomb that is already TIENOOC's mark, and it makes the white cards read as lying ON
     something instead of merging into the field. The surface stays pure white on purpose:
     that contrast IS the lift. */
  --canvas:#F7F2E4; --surface:#FFFFFF;
  /* The neutrals are warmed to sit on that ground. A cool grey line on a honey field reads as
     a leftover from another palette - a neutral with a slight bias towards the ground reads as
     chosen. Same lightness as before, so nothing loses contrast. */
  --line:#E7E0CD; --line-soft:#EFEADB;
  --ink:#19241F; --muted:#6C7A74; --faint:#9AA6A0;
  --accent:#8A5533; --accent-bg:#F3E7DA; --save:#BA7A6B; --save-bg:#F3E3DE;
  --ok:#1F9D6B; --ok-bg:#E5F3EC; --ok-tx:#0F6E4C;
  --warn:#CE921C; --warn-bg:#FBF1DA; --warn-tx:#8A5E0E;
  --bad:#C8514A; --bad-bg:#FAE8E6; --bad-tx:#8E2E27;

  /* Purple = "you must do this once". A meaning of its own, used nowhere else, so it never
     competes with warn (amber, "heads up") or bad (red, "this is broken"). Carried over from
     the Vloka standard, where it is the .action-required box. */
  --act:#6B4FA1; --act-bg:#EEE8F6; --act-tx:#4A357A;

  /* The card shadow. Was two hairlines (1px/0.05 and 1px/0.03), which laid a card FLAT on the
     ground. Now a real lift: a short contact shadow, a soft fall under it, and a thin light
     edge along the top. One token, so every card, panel and popup follows without its own rule.
     Depth lives in the GROUND, never in the data — no shadow or gradient on a bar or a figure. */
  --tile:0 1px 1px rgba(25,36,31,.06), 0 6px 14px -6px rgba(25,36,31,.16),
         0 14px 34px -18px rgba(25,36,31,.22), inset 0 1px 0 rgba(255,255,255,.65);

  /* The one glass ground. Every glass surface refers to these three instead of carrying its own
     rgba(): glass is the SHELL, never the data. Anything showing a measurement stays opaque. */
  --glass-bg:rgba(255,255,255,.30);
  --glass-blur:blur(22px) saturate(1.7);
  --glass-border:rgba(255,255,255,.55);

  /* The chevron as a mask, so the CSS variant and the SVG variant are literally the same drawing.
     14x14, --faint, and closed -> open is a quarter turn down. */
  --tn-chev-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Five series colours, then grey. A sixth is never added: it folds into "everything else".
     Meaning colours stay meaning — --ok/--warn/--bad say how something IS, never "series 4". */
  --tn-s1:#8A5533;   /* TIENOOC green - the accent that was already here */
  --tn-s2:#B4762A;   /* ochre - the gold of the honeycomb, as a series */
  --tn-s3:#1E6FB8;   /* blue */
  --tn-s4:#A64BC0;   /* violet - deliberately not the purple of "action required" */
  --tn-s5:#5E9440;   /* moss green, muted */
  --tn-srest:#A3AEA8;
  --tn-hair:rgba(25,36,31,.13);
  --tn-track:rgba(25,36,31,.055);

  /* Every corner in TIENOOC is 2px. Not 8, not 12, not something else per page. What is 50% or
     999px stays: that is a circle - a dot, an avatar, a ring - and a circle is a shape, not a
     corner. */
  --hoek:2px;
}
*{box-sizing:border-box;}
html{scrollbar-gutter:stable;}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;}
/* The ground is a SURFACE, not a flat fill: a grazing light from the top, a saturation towards
   the bottom, and three soft lamps in TIENOOC's own colours (green accent, honeycomb gold). The
   cards then have something to lie on. Nothing here touches data - depth in the ground only. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 26%,
                            rgba(94,74,26,.05) 78%, rgba(94,74,26,.10) 100%),
    radial-gradient(54vw 42vw at 88% -10%, rgba(201,162,39,.26), transparent 64%),
    radial-gradient(46vw 40vw at -4% 34%,  rgba(214,178,74,.20), transparent 66%),
    radial-gradient(60vw 48vw at 64% 108%, rgba(192,57,43,.13), transparent 62%),
    var(--canvas);}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;margin:0;letter-spacing:-0.01em;}
a{text-decoration:none;color:inherit;}

/* sidebar */
/* The sidebar is GLASS over the lit ground, not a flat fill - that is what the honeycomb
   sits on in Vloka, and it is why the pattern reads as a texture on a surface instead of
   as wallpaper. Honey-tinted where Vloka uses a cool white. */
.side{background-color:rgba(252,248,238,.44);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  background-image:url("../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:visible;z-index:30;}
.brand{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 2px 9px rgba(58,40,24,.09);margin-bottom:10px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.brand .logo{width:30px;height:30px;flex:none;display:block;}
.brand .logo svg{width:30px;height:30px;display:block;}
.brand .nm{font-family:"Space Grotesk";font-weight:700;font-size:17px;letter-spacing:0.02em;}
.brand .sub{font-family:"IBM Plex Mono";font-size:10px;color:var(--faint);}

/* group headers — the main section dividers, made more visible */
.grp{font-family:"IBM Plex Mono";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:2px;color:var(--muted);font-size:13.5px;background:var(--surface);border:1px solid #CDD6D0;box-shadow:0 2px 7px rgba(58,40,24,.08);transition:box-shadow .13s ease,transform .13s ease;}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.nav:hover{background:var(--line-soft);color:var(--ink);box-shadow:0 5px 14px rgba(58,40,24,.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";font-size:9.5px;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:1px 5px;}
.ver{margin-top:auto;padding:10px 8px 2px;font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint);}

/* topbar */
/* Geen raat op het werkvlak: die is het kenmerk van de zijkolom, niet het behang van de
   pagina (02-09). Data hoort op een rustige grond te liggen. */
.main{display:flex;flex-direction:column;min-width:0;background-color:var(--canvas);}
.top{display:flex;align-items:center;gap:12px;padding:14px 26px;background:transparent;min-height:66px;box-sizing:border-box;}
.top .pill,.top .pill-btn,.top .guide-pill{transform:none !important;transition:color .12s,border-color .12s,background .12s;}
.top > *{position:relative;z-index:1;}
.crumb{font-family:"IBM Plex Mono";font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:6px 11px;box-shadow:0 1px 4px rgba(58,40,24,.07);flex-shrink:1;min-width:0;overflow:hidden;}
.crumb b{color:var(--ink);font-weight:600;}
.crumb-home{display:inline-flex;align-items:center;color:var(--faint);}
.crumb-home svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;}
.crumb-home:hover{color:var(--accent);}
.crumb-link{color:var(--accent);text-decoration:none;font-weight:500;padding:1px 3px;border-radius:2px;}
.crumb-link:hover{text-decoration:underline;background:var(--accent-bg);}
.crumb-sep{color:var(--faint);}
.gap{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:2px;padding:6px 11px;font-family:"IBM Plex Mono";font-size:11.5px;color:var(--ok-tx);background:var(--ok-bg);box-shadow:0 1px 4px rgba(58,40,24,.07);flex-shrink:0;}
.gap i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;}
.pill{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:2px;padding:6px 11px;font-size:12.5px;color:var(--muted);background:var(--surface);box-shadow:0 1px 4px rgba(58,40,24,.07);flex-shrink:0;}
.pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:2px;padding:6px 11px;color:var(--faint);font-size:12.5px;width:230px;background:var(--surface);box-shadow:0 1px 4px rgba(58,40,24,.07);flex-shrink:0;}
.search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;}
.search-wrap{position:relative;}
.search input{border:none;background:transparent;outline:none;width:100%;font-family:inherit;font-size:12.5px;color:var(--ink);padding:0;}
.search input::placeholder{color:var(--faint);}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.search-panel{position:absolute;top:calc(100% + 6px);right:0;width:360px;max-height:62vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 10px 30px rgba(58,40,24,.16);z-index:60;padding:6px;}
.gs-grp{font-family:"IBM Plex Mono";font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:8px 9px 4px;}
.gs-item{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:2px;text-decoration:none;cursor:pointer;}
.gs-item:hover,.gs-item.sel{background:var(--accent-bg);}
.gs-item .l{font-size:13px;color:var(--ink);}
.gs-item .s{font-size:11px;color:var(--muted);font-family:"IBM Plex Mono";}
.gs-empty{padding:12px 11px;color:var(--muted);font-size:12.5px;}
.av{width:30px;height:30px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;}

/* Wide: for screens whose CONTENT is wide - a card grid, a ten-column table. 1360px is Vloka's `.wrap.wide`
   (the dashboard there); text and forms stay at 1000px, a 1360px line does not read well. */
.body.wide{max-width:1360px;}
.body{flex:1;align-self:flex-start;padding:22px 26px;display:flex;flex-direction:column;gap:16px;width:calc(100% - 96px);margin-left:0;margin-right:96px;max-width:1000px;margin-top:2px;background:var(--canvas);border-radius:2px;box-shadow:0 1px 3px rgba(58,40,24,.06),inset 0 0 0 1px rgba(58,40,24,.03);}
.head{display:flex;align-items:flex-end;}
.head h1{font-size:26px;font-weight:600;}
.head p{margin:7px 0 0;color:var(--muted);font-size:14px;}
.head .acts{margin-left:auto;display:flex;gap:10px;}
/* One button system: every variant shares the SAME height (36px), padding, font-size (13px)
   and weight (600) - only the colour/role differs. These four were 9/14, 8/13, 8/18 and 4/14
   padding at three font sizes, so no two rows of buttons in TIENOOC lined up. Full tier = 36px;
   the compact tier is .btn-sm (28px) and .io-btn. Never an inline or per-page height again. */
.btn{font-family:inherit;font-size:13px;font-weight:600;height:36px;box-sizing:border-box;padding:0 16px;border-radius:2px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;white-space:nowrap;box-shadow:var(--tile);}
.btn:hover{background:var(--accent-bg);border-color:var(--accent);}
.btn.pri{background:var(--save);border-color:var(--save);color:#fff;}
.btn.pri:hover{background:var(--accent);filter:brightness(0.92);}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:15px 16px;box-shadow:var(--tile);}
.kpi .k{font-family:"IBM Plex Mono";font-size:11px;color:var(--muted);}
.kpi .v{font-family:"Space Grotesk";font-weight:600;font-size:27px;margin-top:8px;line-height:1;}
.kpi .v small{font-size:13px;color:var(--faint);font-family:"IBM Plex Mono";font-weight:400;}
.kpi.ok .v{color:var(--ok-tx);} .kpi.warn .v{color:var(--warn-tx);} .kpi.bad .v{color:var(--bad-tx);}

.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:var(--tile);}
.ch{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);}
.ch h3{font-size:14.5px;font-weight:600;}
.ch .more{margin-left:auto;font-family:"IBM Plex Mono";font-size:11px;color:var(--accent);cursor:pointer;}

/* zone posture */
.zone{padding:14px 16px;border-bottom:1px solid var(--line-soft);}
.zone:last-child{border-bottom:none;}
.zone .zt{display:flex;align-items:baseline;margin-bottom:9px;}
.zone .zt .zn{font-family:"IBM Plex Mono";font-size:12.5px;}
.zone .zt .zc{margin-left:auto;font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);}
.bar{display:flex;height:8px;border-radius:2px;overflow:hidden;background:var(--line-soft);}
.bar span{display:block;height:100%;}

/* system status */
.st{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:13px;}
.st:last-child{border-bottom:none;}
.st .sl{color:var(--muted);}
.st .sv{margin-left:auto;font-family:"IBM Plex Mono";font-size:12px;display:flex;align-items:center;gap:7px;}
.st .sv.t-ok{color:var(--ok-tx);} .st .sv.t-warn{color:var(--warn-tx);}
.st .sv i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.d-ok{background:var(--ok);} .d-warn{background:var(--warn);} .d-bad{background:var(--bad);}

/* activity */
.act{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);}
.act:last-child{border-bottom:none;}
.act .ic{width:26px;height:26px;border-radius:2px;flex:none;display:flex;align-items:center;justify-content:center;}
.act .ic svg{width:14px;height:14px;stroke-width:1.9;fill:none;}
.ic-ok{background:var(--ok-bg);} .ic-ok svg{stroke:var(--ok-tx);}
.ic-warn{background:var(--warn-bg);} .ic-warn svg{stroke:var(--warn-tx);}
.ic-bad{background:var(--bad-bg);} .ic-bad svg{stroke:var(--bad-tx);}
.ic-info{background:var(--accent-bg);} .ic-info svg{stroke:var(--accent);}
.act .at{font-size:13px;} .act .at b{font-weight:500;}
.act .am{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint);margin-top:3px;}
.act .ts{margin-left:auto;font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint);white-space:nowrap;padding-top:2px;}

/* needs attention */
.att{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 13px;border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;}
.att:last-child{border-bottom:none;}
.att.rbad{border-left-color:var(--bad);} .att.rwarn{border-left-color:var(--warn);}
.att .col{display:flex;flex-direction:column;gap:3px;min-width:0;}
.att .an{font-family:"IBM Plex Mono";font-size:12.5px;}
.att .ar{font-size:12px;color:var(--muted);}
.att .badge{margin-left:auto;font-family:"IBM Plex Mono";font-size:10.5px;padding:3px 9px;border-radius:2px;white-space:nowrap;}
.b-bad{background:var(--bad-bg);color:var(--bad-tx);} .b-warn{background:var(--warn-bg);color:var(--warn-tx);} .b-ok{background:var(--ok-bg);color:var(--ok-tx);}

/* placeholder */
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:54px 24px;gap:6px;}
.soon svg{width:34px;height:34px;stroke:var(--faint);fill:none;stroke-width:1.5;margin-bottom:8px;}
.soon .st1{font-family:"Space Grotesk";font-weight:600;font-size:18px;}
.soon .st2{color:var(--muted);font-size:13.5px;max-width:46ch;}

/* --- settings ------------------------------------------------------------- */
.banner{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:2px;font-size:13.5px;box-shadow:var(--tile);}
.banner svg{width:18px;height:18px;fill:none;stroke-width:2;}
.banner.ok{background:var(--ok-bg);color:var(--ok-tx);border:1px solid #CFE7DA;}
.banner.ok svg{stroke:var(--ok-tx);}

.settings-wrap{display:grid;grid-template-columns:218px 1fr;gap:20px;align-items:start;}
.set-nav{display:flex;flex-direction:column;gap:3px;}
.set-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:2px;color:var(--muted);font-size:13.5px;}
.set-item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.set-item:hover{background:var(--line-soft);color:var(--ink);}
.set-item.on{background:var(--accent-bg);color:var(--accent);font-weight:500;}
.set-item .soon-tag{margin-left:auto;font-family:"IBM Plex Mono";font-size:9px;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:1px 5px;}

.setform{padding:0;}
.setnote{padding:12px 20px;font-size:12px;color:var(--muted);background:#FCFAF4;border-bottom:1px solid var(--line-soft);}
.formblk{padding:18px 20px;border-bottom:1px solid var(--line-soft);}
.fb-h{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-width:520px;}
.field:last-child{margin-bottom:0;}
.lbl{font-size:12.5px;color:var(--muted);}
.hint{font-size:11.5px;color:var(--faint);}
.inp{font-family:"IBM Plex Sans";font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink);width:100%;}
.inp.mono{font-family:"IBM Plex Mono";font-size:12.5px;}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.inp::placeholder{color:var(--faint);}
/* ===== Form-control consistency: brand-green accents app-wide =====
   Makes every native checkbox, radio and range control green instead of the
   browser-default blue, everywhere in the app (analysis, storage import, CMDB,
   results history, settings, source defaults, ...). One rule, whole app. */
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--accent);}
input,textarea,select{accent-color:var(--accent);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;}
.frow .field{max-width:none;margin-bottom:0;}
.savebar{display:flex;align-items:center;padding:15px 20px;background:#FCFBF6;}
.savehint{font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);}
.savebar .btn{margin-left:auto;}

/* --- settings: collapsible cards (cf-*) ----------------------------------- */
.cf-card{background:var(--surface);border:1px solid var(--line);border-radius:2px;margin-bottom:8px;overflow:hidden;box-shadow:var(--tile);}
.cf-hd{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;}
.cf-hd:hover{background:var(--canvas);}
.cf-hd .cf-ico{width:18px;height:18px;color:var(--accent);flex:none;}
.cf-hd .cf-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;}
.cf-hd .cf-ttl{font-weight:500;font-size:14px;flex:1;}
.cf-hd .cf-sub{font-size:11.5px;color:var(--faint);font-weight:400;display:flex;align-items:center;gap:6px;}
.cf-hd .cf-chev{width:14px;height:14px;color:var(--faint);transition:transform .16s ease;flex:none;order:-1;}
.cf-hd .cf-chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.cf-card.open .cf-hd .cf-chev{transform:rotate(90deg);}
.cf-bd{display:none;padding:2px 16px 16px;}
.cf-card.open .cf-bd{display:block;}
.cf-sum{font-size:12.5px;color:var(--muted);background:#FCFAF4;border:1px solid var(--line-soft);border-radius:2px;padding:11px 13px;margin:12px 0 14px;line-height:1.6;}
.cf-sum b{color:var(--ink);font-weight:500;}
.cf-sum ol{color:var(--muted);}
.cf-sum code{font-family:"IBM Plex Mono";font-size:11.5px;background:var(--line-soft);padding:1px 4px;border-radius:2px;}

.sc-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.sc-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.sc-in{font-family:"IBM Plex Sans";font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:2px;background:var(--canvas);color:var(--ink);width:100%;}
.sc-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);}
select.sc-in{cursor:pointer;}
.sc-chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin:2px 0 12px;cursor:pointer;}
.sc-chk input{margin:0;accent-color:var(--accent);}
.sc-note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.55;}
.sc-status{font-size:12.5px;margin-top:10px;font-family:"IBM Plex Mono";}
.sc-status:empty{margin:0;}
.sc-status.ok{color:var(--ok-tx);} .sc-status.err{color:var(--bad-tx);} .sc-status.warn{color:var(--warn-tx);} .sc-status.info{color:var(--muted);}
.sq{width:9px;height:9px;border-radius:2px;display:inline-block;background:#CBD3CD;}
.sq.idle{background:#CBD3CD;} .sq.ok{background:var(--ok);} .sq.warn{background:var(--warn);} .sq.err{background:var(--bad);}
.btn-secondary{font-family:inherit;font-size:13px;font-weight:600;height:36px;box-sizing:border-box;padding:0 16px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;white-space:nowrap;}
.btn-secondary:hover{background:var(--line-soft);}
.btn-secondary:active{background:var(--accent);color:var(--surface);border-color:var(--accent);}
.btn-secondary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* --- sidebar bottom: language switcher ------------------------------------ */
.side-bottom{margin-top:auto;}

/* --- maintenance extras --------------------------------------------------- */
input[type=file].sc-in{padding:6px 8px;font-size:12px;color:var(--muted);cursor:pointer;}
input[type=file].sc-in::file-selector-button{font-family:"IBM Plex Mono";font-size:11px;padding:4px 9px;margin-right:9px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink);cursor:pointer;}
input[type=file].sc-in::file-selector-button:hover{background:var(--line-soft);}
.btn-secondary.danger{color:var(--bad-tx);border-color:#EAC9C6;}
.btn-secondary.danger:hover{background:var(--bad-bg);}
.sc-details{margin:8px 0 4px;font-size:12px;border:1px solid var(--line-soft);border-radius:2px;background:#FCFAF4;}
.sc-details summary{cursor:pointer;padding:9px 12px;font-weight:500;color:var(--accent);}
.sc-details-bd{padding:2px 14px 12px;color:var(--muted);line-height:1.65;}
.sc-details-bd p{margin:8px 0;}
.sc-details-bd b{color:var(--ink);font-weight:500;}
.sc-details-bd code,.sc-note code{font-family:"IBM Plex Mono";font-size:11px;background:var(--line-soft);padding:1px 4px;border-radius:2px;}
.sc-banner{font-size:12.5px;padding:9px 12px;border-radius:2px;margin-top:4px;}
.sc-banner.ok{background:var(--ok-bg);color:var(--ok-tx);border:1px solid #CFE7DA;}
.sc-banner.err{background:var(--bad-bg);color:var(--bad-tx);border:1px solid #EAC9C6;}
.sc-banner.warn{background:var(--warn-bg);color:var(--warn-tx);border:1px solid #F0DFB4;}
.sc-banner.info{background:var(--accent-bg);color:var(--accent);border:1px solid #CFE7DA;}
.ca-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line-soft);}
.ca-item svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7;flex:none;}
.ca-del{font-size:11px;padding:3px 9px;}
.ip-use{font-family:"IBM Plex Mono";font-size:11px;background:var(--accent-bg);color:var(--accent);border:1px solid #CFE7DA;border-radius:2px;padding:2px 8px;margin:0 4px 2px 0;cursor:pointer;}
.ip-use:hover{background:#DCEDE4;}


/* --- per-section save (transparent) + card footer ------------------------- */
/* The save button is FILLED, not an outline: what changes something is the one thing on the
   card the eye should land on, and in the button bar it sits right (order:99). */
.btn-save{font-family:inherit;font-size:13px;font-weight:600;height:36px;box-sizing:border-box;padding:0 22px;border-radius:2px;border:1px solid var(--save);background:var(--save);color:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1;white-space:nowrap;min-width:132px;}
.btn-save:hover{filter:brightness(0.92);}
.cf-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);}
.cf-foot .sc-status{margin:0;flex:1;}
.cf-foot .btn-save{margin-left:auto;}

/* --- users + admin log ---------------------------------------------------- */
.urow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);}
.urow:last-child{border-bottom:none;}
.uav{width:32px;height:32px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none;}
.ucol{flex:1;min-width:0;}
.un{font-size:13.5px;}
.umono{font-family:"IBM Plex Mono";font-size:12px;color:var(--faint);}
.umeta{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint);margin-top:2px;}
.rolebadge{font-family:"IBM Plex Mono";font-size:10.5px;padding:3px 9px;border-radius:2px;background:var(--accent-bg);color:var(--accent);}
.builtintag{font-family:"IBM Plex Mono";font-size:10px;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:3px 8px;}
.u-del{font-size:11px;padding:4px 10px;}

.logtable{width:100%;border-collapse:collapse;font-size:13px;}
.logtable th{text-align:left;font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:9px 10px;border-bottom:1px solid var(--line);}
.logtable td{padding:10px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;overflow-wrap:anywhere;word-break:break-word;}
.logtable tr:last-child td{border-bottom:none;}
.logtable td.mono{font-family:"IBM Plex Mono";font-size:12px;}
.logtable td.dim{color:var(--muted);}
.logtable tbody tr:hover{background:#FCFBF6;}


/* --- sidebar flyout menu (NetGuard-style) --------------------------------- */
.menu{display:flex;flex-direction:column;gap:3px;margin-top:2px;}
.grp-wrap{position:relative;}
.grp-hd{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:2px;color:var(--muted);font-size:13.5px;cursor:pointer;user-select:none;text-decoration:none;background:var(--surface);border:1px solid #CDD6D0;box-shadow:0 2px 7px rgba(58,40,24,.08);transition:box-shadow .13s ease,transform .13s ease;}
.grp-hd:hover{background:var(--line-soft);color:var(--ink);box-shadow:0 5px 14px rgba(58,40,24,.14);transform:translateY(-1px);}
.grp-hd>svg:first-child{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.grp-hd .gchev{width:13px;height:13px;margin-left:auto;opacity:.4;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .12s ease;}
.grp-wrap:hover>.grp-hd{background:var(--line-soft);color:var(--ink);}
.grp-wrap:hover>.grp-hd .gchev{opacity:.85;transform:translateX(2px);}
.grp-wrap.has-active>.grp-hd{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-bg);}
.grp-wrap.has-active>.grp-hd>svg:first-child{color:var(--accent);}
.flyout{position:absolute;left:100%;top:-6px;padding-left:9px;display:none;z-index:90;}
.grp-wrap:hover>.flyout{display:block;}
.flyout-inner{min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 12px 32px rgba(25,36,31,0.14);padding:7px;}
.fly-ttl{font-family:"IBM Plex Mono";font-size:9.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);padding:5px 9px 7px;}
.fly{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;color:var(--ink);font-size:13px;}
.fly svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.fly:hover{background:var(--line-soft);}
.fly.on{background:var(--accent-bg);color:var(--accent);font-weight:500;}
.fly .tag{margin-left:auto;font-family:"IBM Plex Mono";font-size:9.5px;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:1px 5px;}

.flyout-inner .fly-ttl.mt{margin-top:5px;}
.fly-sep{height:1px;background:var(--line-soft);margin:6px 8px;}

/* --- policy builder (OT network baseline) --------------------------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:2px;margin-bottom:8px;box-shadow:var(--tile);overflow:hidden;}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-soft);}
.panel-title{font-weight:500;font-size:14px;}
.bl-in{font-size:12px;padding:5px 7px;border:1px solid var(--line);border-radius:2px;font-family:inherit;width:100%;box-sizing:border-box;}
.bl-sum{width:100%;min-height:42px;font-size:12px;padding:7px;border:1px solid var(--line);border-radius:2px;font-family:inherit;margin-bottom:10px;box-sizing:border-box;}
.bl-sum-ro{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.bl-tbl{border-collapse:collapse;width:100%;font-size:12px;margin-bottom:6px;table-layout:fixed;}
.bl-tbl th{background:var(--canvas);text-align:left;padding:6px 9px;font-weight:500;color:var(--muted);border:1px solid var(--line-soft);}
.bl-tbl td{padding:5px 9px;border:1px solid var(--line-soft);vertical-align:top;word-break:break-word;}
.bl-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);margin:14px 0 5px;font-family:"IBM Plex Mono";}
.bl-formula{font-family:"IBM Plex Mono";font-size:13px;background:#142019;color:#cfeadd;padding:9px 12px;border-radius:2px;margin-bottom:6px;word-break:break-all;}
.bl-cfg{font-family:"IBM Plex Mono";font-size:11px;background:#0F1A14;color:#cfe3d6;padding:10px 12px;border-radius:2px;overflow-x:auto;white-space:pre;line-height:1.45;margin:0 0 4px;}
.bl-mtx{border-collapse:collapse;font-size:11px;}
.bl-mtx th{background:var(--canvas);padding:6px 10px;border:1px solid var(--line-soft);font-weight:500;color:var(--muted);}
.bl-corner{padding:0!important;overflow:hidden;line-height:0;}
.bl-corner img{display:block;height:30px;width:auto;}
.bl-mc{padding:7px 12px;border:2px solid var(--surface);text-align:center;font-weight:600;min-width:62px;font-family:"IBM Plex Mono";}
.bl-list{list-style:none;padding:0;margin:0;}
.bl-list li{padding:5px 0 5px 20px;position:relative;font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--line-soft);}
.bl-list li:before{content:'\2713';position:absolute;left:0;color:var(--ok);font-weight:700;}
.bl-x{border:0;background:var(--bad-bg);color:var(--bad-tx);border-radius:2px;cursor:pointer;font-size:13px;padding:1px 7px;margin-left:6px;transition:background .1s,color .1s;}
.bl-x:active{background:var(--bad-tx);color:#fff;}
.bl-add{border:1px dashed var(--accent);background:transparent;color:var(--accent);border-radius:2px;cursor:pointer;font-size:11px;padding:4px 10px;margin-top:4px;font-family:"IBM Plex Mono";font-weight:600;}
.bl-add:hover{background:var(--accent-bg);}
.bl-add:active{background:var(--accent);color:#fff;border-color:var(--accent);}
.bl-lock,.bl-secbtns{display:inline-flex;align-items:center;gap:6px;}
.bl-lock{font-size:11px;background:var(--warn-bg);color:var(--warn-tx);border:1px solid #F0DFB4;border-radius:2px;padding:3px 11px;}
.bl-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;margin-bottom:6px;}
.bl-meta .k{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);margin-bottom:2px;}
.bl-meta .v{font-size:13px;color:var(--ink);}
.bl-btn{font-size:11px;padding:5px 12px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer;font-family:"IBM Plex Mono";color:var(--ink);}
.bl-btn:hover{background:var(--line-soft);}
.bl-btn.on{background:var(--accent-bg);color:var(--accent);border-color:#BFE0CF;}
.bl-btn.on:hover{background:#DCEDE3;}

/* --- flyout super-groups (Configuration / Daily tasks) -------------------- */
.flyout-inner .fly-grp{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);padding:3px 9px 4px;}
.fly-grp-sep{height:1px;background:var(--line);margin:8px 6px 6px;}
.fly-grp-link{font-weight:600;}

/* --- daily tasks ---------------------------------------------------------- */
.dt-hdr{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:var(--tile);padding:14px 16px;margin-bottom:14px;}
.dt-hf{display:flex;flex-direction:column;gap:4px;}
.dt-hf label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);}
.dt-hf input{font-size:13px;padding:6px 9px;border:1px solid var(--line);border-radius:2px;font-family:inherit;min-width:200px;}
.dt-btn{font-size:12px;padding:7px 14px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer;font-family:inherit;color:var(--ink);}
.dt-btn:hover{background:var(--line-soft);}
.dt-counts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.dt-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin:0 2px 16px;}
.dt-legend span{display:inline-flex;align-items:center;gap:6px;}
.dt-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}
.dt-legend .dt-dot.dt-await{background:var(--faint);}
.dt-legend .dt-dot.dt-int{background:var(--warn);}
.dt-legend .dt-dot.dt-due{background:var(--accent);}
.dt-legend .dt-dot.dt-bad{background:var(--bad);}
.dt-group{margin-bottom:18px;}
.dt-gttl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:0 2px 7px;}
.dt-tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:var(--tile);}
.dt-tbl th{background:var(--canvas);text-align:left;padding:8px 10px;font-weight:500;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line-soft);}
.dt-tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;overflow-wrap:anywhere;word-break:break-word;}
.dt-tbl tr:last-child td{border-bottom:0;}
.dt-comp{font-weight:500;color:var(--ink);}
.dt-note{font-size:11px;color:var(--faint);margin-top:2px;}
.dt-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:2px;white-space:nowrap;}
.dt-ok{background:var(--ok-bg);color:var(--ok-tx);}
.dt-await{background:var(--line-soft);color:var(--muted);}
.dt-int{background:var(--warn-bg);color:var(--warn-tx);}
.dt-due{background:var(--accent-bg);color:var(--accent);}
.dt-bad{background:var(--bad-bg);color:var(--bad-tx);}
.dt-src{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:2px;border:1px solid var(--line);color:var(--muted);background:var(--canvas);}
.dt-src-auto{color:var(--accent);border-color:#BFE0CF;background:var(--accent-bg);}
.dt-src-integration{color:var(--warn-tx);border-color:#F0DFB4;background:var(--warn-bg);}
.dt-src-blocked{color:var(--bad-tx);border-color:#F0C9C5;background:var(--bad-bg);}
.dt-act{text-align:right;}
.dt-done{font-size:11px;padding:4px 10px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:2px;cursor:pointer;font-family:inherit;}
.dt-undo{font-size:11px;padding:4px 10px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:2px;cursor:pointer;font-family:inherit;}
.dt-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;}

.brand .nmver{font-family:"IBM Plex Mono";font-weight:500;font-size:11px;color:var(--faint);}
.body-tight{gap:0;}
.body-tight .head{margin-bottom:18px;}

/* --- daily tasks editor --------------------------------------------------- */
.dt-edit-actions{display:flex;gap:8px;align-items:center;margin:2px 0 14px;}
.dt-save{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:2px;padding:7px 16px;font-size:12px;cursor:pointer;font-family:inherit;}
.dt-cancel{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:7px 16px;font-size:12px;cursor:pointer;font-family:inherit;}
.dt-cancel:hover{background:var(--line-soft);}
.dt-egroup{margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:var(--tile);padding:12px 14px;}
.dt-egh{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.dt-efreq{font-weight:600;max-width:220px;}
.dt-ein,.dt-esel{font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:2px;font-family:inherit;width:100%;box-sizing:border-box;background:var(--surface);color:var(--ink);}
.dt-esel{cursor:pointer;}
.dt-etbl{width:100%;border-collapse:collapse;font-size:12px;}
.dt-etbl th{text-align:left;padding:4px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);font-weight:600;}
.dt-etbl td{padding:3px 6px;vertical-align:middle;}
.dt-del-r{border:0;background:var(--bad-bg);color:var(--bad-tx);border-radius:2px;cursor:pointer;padding:2px 9px;font-size:14px;line-height:1;}
.dt-del-g{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:2px;cursor:pointer;font-size:11px;padding:4px 10px;margin-left:auto;}
.dt-del-g:hover{background:var(--bad-bg);color:var(--bad-tx);border-color:#F0C9C5;}
.dt-addrow,.dt-addgrp{border:1px dashed var(--line);background:var(--canvas);color:var(--muted);border-radius:2px;cursor:pointer;font-size:11px;padding:5px 12px;margin-top:7px;font-family:"IBM Plex Mono";}
.dt-addrow:hover,.dt-addgrp:hover{background:var(--line-soft);}
.dt-addgrp{margin-top:2px;}

/* --- site & ip ranges ----------------------------------------------------- */
.sip-card{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:var(--tile);}
.sip-hd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-soft);}
.sip-ttl{font-weight:600;font-size:13px;}
.sip-save{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:2px;padding:7px 16px;font-size:12px;cursor:pointer;font-family:inherit;}
.sip-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.sip-tbl th{text-align:left;padding:6px 6px;color:var(--faint);font-weight:500;font-size:11px;border-bottom:1px solid var(--line-soft);}
.sip-tbl td{padding:4px 6px;border-bottom:1px solid var(--line-soft);}
.sip-tbl tr:last-child td{border-bottom:0;}
.sip-tbl.sip-compact{width:auto;table-layout:auto;}  /* columns hug their content, side by side; no stretch across the card */
.sip-tbl.sip-compact th,.sip-tbl.sip-compact td{white-space:nowrap;padding-right:14px;overflow:hidden;text-overflow:ellipsis;}
.sip-tbl.sip-compact td.mono,.sip-tbl.sip-compact .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.sip-tbl.sip-compact .sip-in{min-width:90px;}
.sip-in{width:100%;box-sizing:border-box;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:2px;font-family:inherit;background:var(--surface);color:var(--ink);}
.sip-in.mono{font-family:"IBM Plex Mono";}
.sip-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
/* Shared green focus ring for every remaining input class + native time/number,
   so focus is brand-green app-wide instead of the browser-default blue. */
.ar-in:focus,.lg-in:focus,.sch-in:focus,textarea:focus,
input[type="time"]:focus,input[type="number"]:focus,input[type="password"]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.sip-del{color:var(--bad-tx);cursor:pointer;font-size:15px;}

/* --- daily tasks per-group edit ------------------------------------------- */
.dt-gttl{display:flex;align-items:center;gap:10px;}
.dt-editbtn{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:3px 13px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0;}
.dt-editbtn:hover{background:var(--accent-bg);}
/* shared edit/save/cancel/add buttons (transparent, colour-coded) */
/* ===== Canonical button system — one look per category, app-wide =====
   Each category: calm/transparent at rest, hover = tint, :active = dark/filled.
   Save/Edit/Add = brand green; Cancel = neutral grey; Delete = red. */
/* The sanctioned COMPACT tier for dense toolbars - same system, smaller. Use this instead of
   a per-page height. */
.io-btn{font-size:12px;font-weight:600;height:28px;box-sizing:border-box;padding:0 11px;border-radius:2px;cursor:pointer;font-family:inherit;border:1px solid;background:transparent;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;white-space:nowrap;transition:background .1s,color .1s,border-color .1s;}
/* Edit / secondary action */
.io-edit{color:var(--accent);border-color:var(--accent);background:transparent;}
.io-edit:hover{background:var(--accent-bg);}
.io-edit:active{background:var(--accent);color:#fff;border-color:var(--accent);}
/* Save / primary confirm */
.io-save{color:var(--accent);border-color:#BFE0CF;background:var(--accent-bg);}
.io-save:hover{background:#DCEDE3;}
.io-save:active{background:var(--accent);color:#fff;border-color:var(--accent);}
/* Add / create */
.io-add{color:var(--accent);border-color:var(--accent);background:transparent;}
.io-add:hover{background:var(--accent-bg);}
.io-add:active{background:var(--accent);color:#fff;border-color:var(--accent);}
/* Cancel / neutral */
.io-cancel{color:var(--muted);border-color:var(--line);background:transparent;}
.io-cancel:hover{background:var(--line-soft);}
.io-cancel:active{background:var(--muted);color:#fff;border-color:var(--muted);}
/* Delete / danger */
.io-del{color:var(--bad-tx);border-color:#EAC9C6;background:transparent;}
.io-del:hover{background:var(--bad-bg);}
.io-del:active{background:var(--bad-tx);color:#fff;border-color:var(--bad-tx);}
.dt-gedit{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:var(--tile);padding:12px 14px;}
.dt-gactions{display:flex;gap:8px;align-items:center;margin-top:10px;}

/* ---- user menu (topbar) + auth ---- */
.usermenu{position:relative;flex-shrink:0;}
.userbtn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line);border-radius:2px;padding:4px 8px 4px 4px;cursor:pointer;color:var(--ink)}
.userbtn:hover{background:var(--line-soft)}
.userbtn .uinfo{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.userbtn .uname{font-size:12.5px;font-weight:500;color:var(--ink)}
.userbtn .urole{font-family:"IBM Plex Mono";font-size:9.5px;color:var(--faint)}
.userbtn .ucar{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:1.8}
.userpop{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 28px rgba(20,40,30,.12);overflow:hidden;z-index:50}
.userpop.open{display:block}
.userpop .upop-id{padding:11px 14px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px}
.userpop .upop-id b{font-size:13px;color:var(--ink)}
.userpop .upop-id span{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint)}
.userpop a{display:block;padding:10px 14px;font-size:12.5px;color:var(--ink);text-decoration:none}
.userpop a:hover{background:var(--line-soft);color:var(--accent)}
.deny-banner{margin:14px 26px 0;padding:9px 14px;border-radius:2px;font-size:12.5px;background:var(--bad-bg);color:var(--bad-tx);border:1px solid #EAC9C6}
.role-pill{display:inline-block;font-family:"IBM Plex Mono";font-size:10px;font-weight:500;padding:2px 8px;border-radius:2px;background:var(--accent-bg);color:var(--accent)}

/* ---- shared tile component (canonical size, used software-wide:
   Network components, Site & IP, Maintenance, Settings) ---- */
.nc-wrap{max-width:none}
.nc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:0}
.nc-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:2px;padding:18px 18px;background:var(--surface);text-decoration:none;transition:border-color .14s,box-shadow .14s;min-height:104px;box-sizing:border-box}
.nc-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(58,40,24,.12)}
.nc-ico{width:38px;height:38px;flex:none;border-radius:2px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center}
.nc-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nc-bd{flex:1;min-width:0;width:100%;display:flex;flex-direction:column}
.nc-h{display:flex;align-items:center;gap:8px}
.nc-h b{font-size:15.5px;color:var(--ink)}
.nc-tag{font-size:10.5px;font-weight:600;color:var(--accent);background:var(--accent-bg);padding:2px 8px;border-radius:2px}
.nc-d{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5;flex:1}
.nc-go{font-size:12.5px;color:var(--accent);margin-top:auto;padding-top:10px;font-weight:600}
.nc-sub{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:22px 0 0}
.nc-sub:first-of-type{margin-top:6px}
.nc-soon{background:var(--canvas);border-style:dashed;cursor:default}
.nc-soon:hover{border-color:var(--line);box-shadow:none}
.nc-soon .nc-ico{background:var(--accent-bg)}
.nc-soon .nc-ico svg{stroke:currentColor}
.nc-tag-soon{color:var(--muted);background:var(--line-soft)}

/* ---- maintenance/settings sub-page helpers ---- */
.sc-sec-h{font-size:13px;font-weight:600;color:var(--ink)}
.sc-fieldhelp{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:4px}

/* ---- function-linked field marker: a transparent red tint on inputs whose
   value drives a function (analysis source, import, retention, search-that-runs) ---- */
.fn-field{background:rgba(179,45,45,.055) !important;border-color:rgba(179,45,45,.40) !important}
.fn-field:focus{border-color:var(--bad) !important;box-shadow:0 0 0 2px rgba(179,45,45,.15) !important}

/* inner padding for cards that hold content/tables directly (keeps text off the edge) */
.card-pad{padding:16px 18px}
.card-pad>.vf-tbl,.card-pad>table{margin-top:2px}

/* reusable field state (fieldstate.js) */
.fs.fs-empty{background:rgba(179,45,45,.06);border-color:rgba(179,45,45,.45)}
.fs.fs-invalid{background:rgba(179,45,45,.11);border-color:var(--bad)}
.fs.fs-ok{background:rgba(138,85,51,.07);border-color:rgba(138,85,51,.5)}
.fs.fs-empty:focus,.fs.fs-ok:focus,.fs.fs-invalid:focus{border-color:var(--accent)}
@keyframes fsblink{0%,100%{background:rgba(179,45,45,.06);border-color:rgba(179,45,45,.45)}50%{background:rgba(179,45,45,.32);border-color:var(--bad)}}
.fs-blink{animation:fsblink .4s ease-in-out 3}
/* shared file browse box: transparent-red dashed by default, green when a file is chosen (via .fs state) */
.fsfile{font-family:inherit;font-size:13px;padding:8px 10px;border-width:1px;border-style:dashed;border-radius:2px;color:var(--ink);background:rgba(179,45,45,.06);border-color:rgba(179,45,45,.45);}
.fsfile:hover{background:rgba(179,45,45,.09);}
.fsfile::file-selector-button{font-family:inherit;font-size:12px;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:5px 11px;margin-right:10px;cursor:pointer;}
.fsfile::file-selector-button:hover{background:var(--accent-bg);border-color:var(--accent);}

/* Remediation + risk-acceptance buttons (used on analysis result, control matrix, baseline gap) */
.cm-fix{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-bg);border:none;border-radius:2px;padding:4px 9px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.cm-fix:hover{background:var(--accent);color:#fff}
.cm-risk{font-size:11px;font-weight:600;color:#A66A00;background:#FBF1DA;border:none;border-radius:2px;padding:4px 9px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.cm-risk:hover{background:#A66A00;color:#fff}

/* shared table search/filter component (NGF) — ported from NetGuard, TIENOOC theme */
.ngf-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:2px 0 12px}
.ngf-search{flex:0 1 420px;min-width:220px;max-width:420px;font-size:12.5px;padding:8px 10px;border:1px solid var(--line);border-radius:2px;font-family:inherit;background:var(--surface);color:var(--ink)}
.ngf-count{font-size:11.5px;color:var(--muted);flex:0 0 auto;min-width:140px;white-space:nowrap;text-align:right;margin-left:auto}
.sip-card > .ngf-bar{padding:10px 16px 2px}  /* bar lands outside the padded scroll body: match the header inset so the count ends under the Edit button */
.ngf-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ngf-tbl th{background:var(--canvas);color:var(--faint);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ngf-tbl td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;overflow-wrap:anywhere;word-break:break-word}
.ngf-tbl tr:last-child td{border-bottom:none}
.ngf-tbl tbody tr:hover td{background:var(--canvas)}
.alog-th{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.alf-th-t{flex:1;min-width:0}
.alf-kebab{display:inline-flex;align-items:center;justify-content:center;width:23px;height:20px;flex:none;cursor:pointer;color:var(--accent);border:1px solid var(--line);border-radius:2px;background:var(--surface);user-select:none}
.alf-kebab svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.alf-kebab:hover{background:var(--accent-bg);border-color:var(--accent)}
.alf-kebab.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.alf-pop{position:absolute;z-index:9999;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 6px 24px rgba(0,0,0,.14);padding:12px;width:236px;font-size:12px}
.alf-pop .alf-ttl{font-size:11px;color:var(--muted);margin-bottom:7px}
.alf-pop select,.alf-pop input{width:100%;box-sizing:border-box;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:2px;margin-bottom:8px;font-family:inherit;background:var(--surface);color:var(--ink)}
.alf-pop .alf-btns{display:flex;gap:8px}
.alf-pop .alf-do{flex:1;background:var(--accent);color:#fff;border:none;border-radius:2px;padding:7px 0;font-size:12px;cursor:pointer}
.alf-pop .alf-clr{flex:1;background:var(--line-soft);color:var(--muted);border:none;border-radius:2px;padding:7px 0;font-size:12px;cursor:pointer}

/* dashboard widget cards as links to their detail page (main dashboard only) */
.dash-card-link{cursor:pointer;transition:box-shadow .13s ease,transform .13s ease;}
.dash-card-link:hover{box-shadow:0 6px 18px rgba(58,40,24,.12);transform:translateY(-1px);}
.dash-card-link:hover h3{color:var(--accent);}

/* responsive chrome */
@media (max-width:1280px){
  .search{width:170px;}
}

/* Interface-monitor SNMP status banner */
.if-snmp{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;border-radius:2px;padding:9px 12px;margin-bottom:10px;border:1px solid var(--line);}
.if-snmp-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex-shrink:0}
.if-snmp b{flex-shrink:0}
.if-snmp-ok{background:var(--ok-bg);color:var(--ok-tx);border-color:#BFE3CF}
.if-snmp-ok .if-snmp-dot{background:var(--ok)}
.if-snmp-fail{background:var(--bad-bg);color:var(--bad-tx);border-color:#F0C9C5}
.if-snmp-fail .if-snmp-dot{background:var(--bad)}
.if-snmp-off{background:var(--canvas);color:var(--muted)}
.if-snmp-off .if-snmp-dot{background:var(--faint)}

/* Info / Help top-bar buttons */
.pill-btn{cursor:pointer;color:var(--muted);text-decoration:none;margin-left:0;}
.pill-btn:hover{border-color:var(--accent);color:var(--accent);}
.topinfo{margin-left:auto;}   /* first item of the right cluster - pushes Info/Help/search/user right */

/* System-information modal (centred, with close button) */
.info-modal{position:fixed;inset:0;background:rgba(15,32,26,.34);display:flex;align-items:center;justify-content:center;z-index:200;}
.info-modal[hidden]{display:none;}
.info-modal-bd{background:var(--surface);border-radius:2px;box-shadow:0 24px 64px rgba(58,40,24,.30);width:360px;max-width:92vw;overflow:hidden;}
.info-modal-hd{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:none;position:relative;overflow:hidden;background:#8A5533;}
.info-modal-hd::before{content:"";position:absolute;inset:0;background-image:url("../honeycomb-light.svg");background-repeat:repeat;background-size:12px 7px;pointer-events:none;}
.info-modal-hd > *{position:relative;z-index:1;}
.info-modal-hd .info-dot{width:8px;height:8px;border-radius:50%;background:#8ff3c8;box-shadow:0 0 0 3px rgba(143,243,200,.3);flex:none;}
.info-modal-hd b{font-size:14px;color:#fff;flex:1;}
.info-modal-hd .info-x{color:#fff;}
.info-x{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;}
.info-x:hover{color:var(--ink);}
.info-modal-body{padding:8px 16px 14px;}
.ip-row{display:flex;justify-content:space-between;gap:16px;padding:9px 4px;font-size:13px;border-bottom:1px solid var(--line-soft);}
.ip-row:last-child{border-bottom:0;}
.ip-row span{color:var(--muted);}
.ip-row b{color:var(--ink);font-weight:500;text-align:right;}

/* Search: AI help-advisor answer block (optional, grounded) */
.gs-answer{background:var(--accent-bg);border-bottom:1px solid var(--line);padding:11px 14px}
.gs-a-h{margin-bottom:6px}
.gs-a-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--accent);border-radius:2px;padding:2px 7px}
.gs-a-body{font-size:12.5px;color:var(--ink);line-height:1.55}
.gs-a-src{font-size:11px;color:var(--muted);margin-top:6px}
.gs-a-src a{color:var(--accent);text-decoration:none}
.gs-a-src a:hover{text-decoration:underline}

/* "How to" guided demo */
.howto-btn{display:inline-flex;align-items:center;gap:8px;background:#3a2c08;border:0;color:#fff;border-radius:2px;padding:8px 16px;font-size:12.5px;font-weight:500;cursor:pointer;margin-bottom:14px;box-shadow:0 2px 8px rgba(58,44,8,.2);}
.howto-btn:hover{background:#4a3810;}
.howto-btn svg{width:14px;height:14px;color:#ffb020;}
.howto-field{background:rgba(224,150,20,.13)!important;box-shadow:0 0 0 2px rgba(224,150,20,.6),0 0 0 5px rgba(224,150,20,.16)!important;transition:box-shadow .2s,background .2s;}
.howto-done{background:rgba(138,85,51,.07)!important;box-shadow:0 0 0 1px rgba(138,85,51,.4)!important;}
.howto-cap{position:fixed;z-index:400;width:340px;background:#3a2c08;color:#fff;border-radius:2px;padding:11px 13px;font-size:12.5px;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.28);}
.howto-cap b{display:block;margin-bottom:3px;font-size:13px;color:#ffd88a;}
.howto-bar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:401;background:#3a2c08;color:#fff;border-radius:2px;padding:8px 8px 8px 16px;font-size:12.5px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 28px rgba(0,0,0,.24);}
.howto-dot{width:8px;height:8px;border-radius:50%;background:#ffb020;box-shadow:0 0 0 4px rgba(255,176,32,.25);flex-shrink:0;}
.howto-stop{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:2px;padding:5px 14px;font-size:12px;cursor:pointer;}
.howto-stop:hover{background:rgba(255,255,255,.28);}
.howto-pause{background:rgba(255,176,32,.22);border:0;color:#ffd88a;border-radius:2px;padding:5px 14px;font-size:12px;cursor:pointer;}
.howto-pause:hover{background:rgba(255,176,32,.34);}
.howto-bar.paused .howto-dot{background:#fff;box-shadow:none;}

/* Timezone search-as-you-type combobox */
.tzc-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 24px rgba(58,40,24,.14);max-height:264px;overflow:auto;}
.tzc-item{display:flex;align-items:baseline;gap:10px;padding:8px 12px;cursor:pointer;font-size:12.5px;}
.tzc-item:hover{background:var(--accent-bg);}
.tzc-z{font-family:'IBM Plex Mono',monospace;color:var(--ink);}
.tzc-c{color:var(--muted);font-size:11px;margin-left:auto;white-space:nowrap;}
.tzc-empty{padding:10px 12px;font-size:12px;color:var(--muted);}

/* Daily-tasks import */
.dt-imp-card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:20px;max-width:920px;}
.dt-imp-err{background:var(--bad-bg);color:var(--bad-tx);border:1px solid var(--bad);border-radius:2px;padding:11px 14px;margin-bottom:14px;max-width:920px;font-size:13px;}
.dt-imp-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.dt-imp-or{margin:16px 0 8px;font-size:12px;color:var(--muted);text-align:center;}
.dt-imp-ta{width:100%;box-sizing:border-box;font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid var(--line);border-radius:2px;padding:10px;color:var(--ink);}
.dt-imp-sum{font-size:13px;margin-bottom:16px;padding:10px 12px;background:var(--accent-bg);border-radius:2px;}
.dt-imp-grp{margin-bottom:18px;}
.dt-imp-gttl{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.dt-imp-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.dt-imp-tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:5px 8px;border-bottom:1px solid var(--line);}
.dt-imp-tbl td{padding:6px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.dt-imp-src{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:2px;}
.dt-imp-auto{background:var(--ok-bg);color:var(--ok-tx);}
.dt-imp-integration{background:#eef2ff;color:#4453b8;}
.dt-imp-manual{background:var(--line-soft);color:var(--muted);}
.dt-imp-blocked{background:var(--bad-bg);color:var(--bad-tx);}
.dt-imp-mod{font-size:10.5px;color:var(--faint);margin-left:6px;}
.dt-imp-apply{margin-top:8px;border-top:1px solid var(--line);padding-top:16px;}
.dt-imp-mode{display:block;font-size:13px;margin:7px 0;cursor:pointer;}
.dt-imp-note{font-size:11.5px;color:var(--faint);margin-top:10px;}

/* Passive discovery */
.disc-card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:20px;max-width:920px;}
.disc-sum{font-size:13px;background:var(--accent-bg);border-radius:2px;padding:11px 14px;margin-bottom:16px;}
.disc-h{font-size:14px;margin:20px 0 8px;color:var(--ink);}
.disc-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.disc-tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:5px 8px;border-bottom:1px solid var(--line);}
.disc-tbl td{padding:6px 8px;border-bottom:1px solid var(--line-soft);}
.disc-b{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:2px;}
.disc-known{background:var(--ok-bg);color:var(--ok-tx);}
.disc-new,.disc-unm{background:rgba(224,150,20,.16);color:#8a5a00;}
.disc-dom{font-size:10.5px;font-weight:600;color:var(--muted);}
.disc-empty{font-size:13px;color:var(--faint);}

/* ===== Global wait / connecting overlay + spinner ===== */
.tno-wait{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.78);}
.tno-wait.on{display:flex;}
.tno-wait-box{text-align:center;}
.tno-wait-msg{margin-top:20px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.2px;}

/* the spinner (drop-in; sized via --size) */
.spinner{--size:140px;position:relative;width:var(--size);height:var(--size);margin:0 auto;}
.spinner .track{position:absolute;inset:0;border-radius:50%;border:3px solid var(--line);}
.spinner .rim{position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent);opacity:.15;
  box-shadow:0 0 0 0 rgba(138,85,51,0);animation:tno-rim 2s ease-in-out infinite;}
.spinner .sweep{position:absolute;inset:-1px;border-radius:50%;border:3px solid transparent;
  border-top-color:var(--accent);border-right-color:var(--accent);opacity:.85;animation:tno-sweep 2.6s linear infinite;}
.spinner .inner{position:absolute;top:50%;left:50%;width:64%;height:64%;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid var(--line);}
.spinner .ping-wrap{position:absolute;top:50%;left:50%;width:64%;height:64%;transform:translate(-50%,-50%);pointer-events:none;}
.spinner .ping-wrap .ping{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle, rgba(138,85,51,.18) 0%, rgba(138,85,51,.05) 60%, rgba(138,85,51,0) 72%);
  border:2px solid var(--accent);transform:scale(.16);opacity:0;animation:tno-ping 2s cubic-bezier(.22,.61,.36,1) infinite;}
.spinner .ping-wrap .ping.b{animation-delay:1s;}
.spinner .logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34%;height:34%;
  display:flex;align-items:center;justify-content:center;z-index:3;}
.spinner .logo svg{width:100%;height:100%;display:block;}
@keyframes tno-ping{0%{transform:scale(.16);opacity:0;}12%{opacity:.85;}70%{opacity:.22;}100%{transform:scale(1);opacity:0;}}
@keyframes tno-rim{0%,55%{opacity:.15;box-shadow:0 0 0 0 rgba(138,85,51,0);}82%{opacity:1;box-shadow:0 0 14px 1px rgba(138,85,51,.55);}100%{opacity:.15;box-shadow:0 0 0 0 rgba(138,85,51,0);}}
@keyframes tno-sweep{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spinner .rim,.spinner .sweep,.spinner .ping-wrap .ping{animation:none;}.spinner .rim{opacity:.5;}}

/* wait-overlay elapsed timer */
.tno-wait-timer{margin-top:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:15px;font-weight:600;color:var(--accent);letter-spacing:.5px;font-variant-numeric:tabular-nums;}

/* live fetch & analyse elapsed timer */
.ar-timer{display:none;margin-top:4px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:.4px;font-variant-numeric:tabular-nums;}
.ar-timer.running::before{content:"";display:inline-block;width:11px;height:11px;
  border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;
  margin-right:7px;vertical-align:-1px;animation:arspin .7s linear infinite;}
@keyframes arspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.ar-timer.running::before{animation:none;}}

/* ===== Floating navigation assistant ===== */
/* ===========================================================================
   KIDJO - the assistant wears its OWN brand, in both products
   ---------------------------------------------------------------------------
   Taken from Vloka's `.kidjo-*` block. Clifford, 2026-08-06, in that stylesheet:
   "inside this panel everything that is 'the product talking to you' wears the
   brand it belongs to" - and "One product, one glass." KIDJO is one assistant
   across COONEIT, so its panel is KIDJO's navy #0B0F19 and orange #FF642D here
   too, NOT TIENOOC green. This is the one place in TIENOOC wearing another brand.

   Why smoked navy and not clear glass: transparency can only show what is
   there, and a light-tinted panel over a light page looks like nothing but
   white. The panel is smoked in KIDJO's own navy, so the page shows through
   DARKENED - which is unmistakably see-through. Text goes light for the same
   reason, and the contrast was checked rather than assumed.

   No honeycomb on glass: the honeycomb is the ground of the PAGE (the sidebar,
   the sign-in screen). A glass surface refracts the page under it and needs no
   pattern of its own. The green honeycomb header this panel used to carry is
   therefore gone, not restyled.
   =========================================================================== */
.tno-ask{position:fixed;right:22px;bottom:22px;z-index:1200;font-family:inherit;}
/* The button carries KIDJO's MARK, not a drawing of our own. It used to be an
   inline compass SVG with a TIENOOC-green dot in the middle - the wrong brand,
   and no logo at all. The mark on its black disc plus the name beside it is how
   KIDJO appears in Vloka, and it is the same file. */
.tno-ask-btn{display:inline-flex;align-items:center;gap:7px;height:auto;padding:0;border:none;
  background:none;color:#FF642D;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.3px;cursor:pointer;transition:transform .15s,opacity .15s;}
.tno-ask-btn img{background:#0B0F19;border-radius:50%;padding:5px;box-sizing:content-box;
  box-shadow:0 6px 18px rgba(11,15,25,.34);display:block;}
.tno-ask-btn .tno-ask-fabnm{background:#0B0F19;padding:5px 9px;border-radius:2px;line-height:1.25;
  box-shadow:0 6px 18px rgba(11,15,25,.34);}
.tno-ask-btn:hover{transform:translateY(-2px);}
.tno-ask-btn:hover img,.tno-ask-btn:hover .tno-ask-fabnm{box-shadow:0 10px 24px rgba(255,100,45,.26);}
/* The red 6 is part of the name, in both products. */
.tno-ask-six{color:#FF642D;font-weight:800;font-size:.6em;position:relative;top:-0.4em;}

.tno-ask-panel{position:fixed;right:22px;bottom:88px;z-index:1200;width:360px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 44px);
  background:rgba(11,15,25,0.46);
  backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,100,45,.35);border-radius:2px;overflow:hidden;
  box-shadow:0 26px 70px rgba(12,40,28,.34);display:flex;flex-direction:column;max-height:78vh;
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s,transform .2s;pointer-events:none;}
.tno-ask.open .tno-ask-panel,.tno-ask-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
/* Vloka's mechanics (2026-09-05): the panel is a fixed window of its own. `.moved` drops the right/bottom anchor so
   left/top take over; `.mini` keeps only the head; `.dragging` kills the transition so it follows the mouse. */
.tno-ask-panel.moved{right:auto;bottom:auto;}
.tno-ask-panel.dragging{transition:none;} .tno-ask-panel.dragging .tno-ask-head{cursor:grabbing;}
/* When the panel opens the button steps aside - it does NOT tilt. The rotate(4deg)
   that used to be here was a leftover from when this was a round icon button; on a
   mark with a name beside it, it read as the logo going crooked. Vloka hides the
   button instead, and the panel carries its own close. */
.tno-ask-btn.hidden{opacity:0;pointer-events:none;transform:scale(.8);}

.tno-ask-head{display:flex;align-items:center;gap:11px;padding:14px;background:#0B0F19;
  color:#F2F5FA;flex:none;}
.tno-ask-head img{display:block;flex:none;}
.tno-ask-idbox{flex:1;min-width:0;}
.tno-ask-title{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:700;font-size:16.5px;
  line-height:1.1;color:#FF642D;}
/* Above a chat window the one useful thing to say is which language you may use.
   Where the assistant runs is already on its own screen. */
.tno-ask-sub{font-size:11.5px;margin-top:2px;color:#93A0B5;}
/* One icon button for the whole header - close, clear, minimise, feedback. They are
   not action buttons in the sense of the button standard (which governs .btn-*): these
   are chrome, and they carry their own small metrics, exactly as in Vloka. */
.tno-ask-x{background:none;border:none;color:#93A0B5;font-size:24px;line-height:1;cursor:pointer;
  padding:0 3px;opacity:.85;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.tno-ask-x:hover{opacity:1;color:#F2F5FA;}
.tno-ask-x svg{display:block;stroke:currentColor;fill:none;}
/* The stack: minimise on top, close under it. Same reason as in Vloka - the control you
   reach for constantly should not share an edge with the one that puts the chat away. */
.tno-ask-head .tno-ask-stack{display:flex;flex-direction:column;gap:1px;align-items:center;flex:none;}
.tno-ask-head .tno-ask-stack .tno-ask-x{line-height:1;padding:2px 4px;font-size:19px;}

/* Small, but still open: the conversation is kept, only the body is folded away. A
   minimised panel that threw the chat away would be a close button wearing a dash. */
.tno-ask-panel.mini{height:auto;max-height:none;width:240px;}
.tno-ask-panel.mini .tno-ask-body,
.tno-ask-panel.mini .tno-ask-input,
.tno-ask-panel.mini .tno-ask-sub{display:none;}

/* The header is the handle. `grab` says so before you try it. */
.tno-ask-head{cursor:grab;touch-action:none;user-select:none;}
.tno-ask-head:active{cursor:grabbing;}
.tno-ask-head img,.tno-ask-head .tno-ask-idbox{pointer-events:none;}
.tno-ask.moved .tno-ask-panel{right:auto;bottom:auto;}

/* Feedback the user starts himself. Same panel, same queue - only the moment is his. */
.tno-ask-fb{padding:12px;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,25,.62);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);}
.tno-ask-fb[hidden]{display:none;}
.tno-ask-fb-t{font-size:11.5px;color:#93A0B5;margin-bottom:7px;}
.tno-ask-fb textarea{width:100%;box-sizing:border-box;resize:none;height:66px;
  border:1px solid #2A3346;border-radius:2px;padding:9px 11px;font-family:inherit;
  font-size:13px;color:var(--ink);background:rgba(255,255,255,.58);}
.tno-ask-fb textarea:focus{outline:none;border-color:#FF642D;background:rgba(255,255,255,.78);}
.tno-ask-fb-row{display:flex;gap:7px;margin-top:8px;justify-content:flex-end;}
.tno-ask-fb-btn{height:28px;padding:0 11px;border-radius:2px;font-size:12px;font-weight:600;
  font-family:inherit;cursor:pointer;border:1px solid;}
.tno-ask-fb-btn.go{background:#0B0F19;border-color:#0B0F19;color:#FF642D;}
.tno-ask-fb-btn.go:hover{background:#1A2233;}
.tno-ask-fb-btn.no{background:transparent;border-color:rgba(255,255,255,.22);color:#B9C3D4;}
.tno-ask-fb-btn.no:hover{background:rgba(255,255,255,.10);color:#F2F5FA;}

.tno-ask-body{padding:16px;overflow-y:auto;flex:1;min-height:300px;display:flex;
  flex-direction:column;gap:10px;background:transparent;
  /* the one scrollbar in TIENOOC allowed a colour of its own, because this panel
     is the only thing in the product wearing another brand */
  scrollbar-width:thin;scrollbar-color:#FF642D transparent;}
.tno-ask-msg{max-width:82%;padding:9px 13px;border-radius:2px;font-size:13.5px;line-height:1.5;
  white-space:normal;word-wrap:break-word;}
.tno-ask-bot{background:rgba(11,15,25,.34);
  backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);color:#F2F5FA;align-self:flex-start;
  border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.22);}
.tno-ask-user{background:rgba(255,100,45,.22);
  backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);
  border:1px solid rgba(255,100,45,.42);color:#FFE9E0;align-self:flex-end;
  border-bottom-right-radius:5px;}
.tno-ask-took{margin-top:5px;font-size:10.5px;color:#DCE3EE;opacity:.8;font-variant-numeric:tabular-nums;}
.tno-ask-think{color:#B9C3D4;font-style:italic;display:inline-flex;align-items:center;gap:6px;}
.tno-ask-spin{display:inline-block;width:12px;height:12px;border:2px solid #FF642D;
  border-right-color:transparent;border-radius:50%;animation:tnoAskSpin .7s linear infinite;}
.tno-ask-timer{color:#B9C3D4;font-style:normal;font-variant-numeric:tabular-nums;font-size:11px;}

.tno-ask-hitrow{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;}
.tno-ask-hit{display:inline-flex;align-items:center;background:rgba(255,100,45,.18);color:#FFD8C7;
  border:1px solid rgba(255,100,45,.42);border-radius:2px;padding:5px 11px;text-decoration:none;
  font-weight:600;font-size:12px;cursor:pointer;transition:background .12s;}
.tno-ask-hit:hover{background:#FF642D;color:#0B0F19;}
.tno-ask-hit.ghost{background:transparent;color:#B9C3D4;border-color:rgba(255,255,255,.22);font-weight:500;}
.tno-ask-hit.ghost:hover{background:rgba(255,255,255,.10);color:#F2F5FA;}

/* The input bar is glass too, but what you TYPE stays legible: the field itself is
   near-opaque with ink text, because a value you are reading through a dashboard is
   a reading problem, not a design. */
.tno-ask-input{flex:none;display:flex;align-items:flex-end;gap:0;padding:12px;
  background:rgba(11,15,25,.62);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.14);}
/* The send button lives INSIDE the box: one control instead of two things side by
   side. The wrapper is what positions it. */
.tno-ask-inwrap{position:relative;flex:1;display:flex;}
.tno-ask-input textarea{flex:1;resize:none;border:1px solid #2A3346;border-radius:2px;
  padding:10px 46px 10px 12px;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  max-height:120px;line-height:1.45;}
.tno-ask-input textarea::placeholder{color:#5B6672;}
.tno-ask-input textarea:focus{outline:none;border-color:#FF642D;background:rgba(255,255,255,.78);}
.tno-ask-send{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border:none;
  border-radius:2px;background:#0B0F19;color:#FF642D;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;}
.tno-ask-send:hover{background:#1A2233;}
.tno-ask-send:disabled{opacity:.45;cursor:default;}

/* --- coach marks: KIDJO pointing AT the product ---------------------------
   These are NOT KIDJO speaking, they are a ring drawn around a control on the
   page and a caption beside it - so they stay in TIENOOC's accent, not KIDJO's
   orange. (Restored: they were dropped when this block was rewritten in v0.289
   and base.html still uses them in three places.) */
.kidjo-point{position:relative;border-radius:2px;animation:kidjoPulse 1s ease-in-out 3;
  box-shadow:0 0 0 2px var(--accent);}
@keyframes kidjoPulse{0%,100%{box-shadow:0 0 0 2px var(--accent);}
                      50%{box-shadow:0 0 0 5px rgba(138,85,51,.35);}}
.kidjo-point-cap{position:fixed;z-index:9999;max-width:240px;background:var(--accent);color:#fff;
  font-size:12px;line-height:1.35;padding:9px 12px;border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);}

/* --- the animations the old block REFERRED to but never defined ------------
   `kidjo-seek`, `kidjo-echo` and `tnoAskSpin` were all named in `animation:`
   and none of the three had an @keyframes anywhere in the product. So the
   compass never swept and, more visibly, the spinner beside "Looking…" never
   turned - it sat there as a static ring for the whole wait. */
@keyframes tnoAskSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.tno-ask-panel{transition:none;}.tno-ask-btn{transition:none;}}

/* TINO "shall I guide you?" ask-first bar on arrival via ?howto=1 */
/* THE TOP BAR DOES NOT MOVE (Clifford, 2026-09-06: the buttons must not shift while you click). The question
   'shall I explain this page?' used to be inserted INTO the bar, which made the bar taller and pushed the
   buttons. It now hangs under the bar, absolutely placed, so the bar keeps its height. */
.top-actions{position:relative;}
.howto-ask{position:absolute;top:100%;right:0;z-index:60;white-space:nowrap;display:flex;align-items:center;gap:10px;margin:6px 0 0;padding:10px 14px;box-shadow:0 8px 24px rgba(58,40,24,.14);
  background:var(--accent-bg);border:1px solid var(--accent);border-radius:2px;font-size:13px;color:var(--ink);}
.howto-ask span{font-weight:500;}
.howto-ask button{border:1px solid var(--accent);border-radius:2px;padding:5px 12px;font-size:12.5px;
  font-weight:600;cursor:pointer;font-family:inherit;}
.howto-ask-yes{background:var(--accent);color:#fff;}
.howto-ask-yes:hover{filter:brightness(1.05);}
.howto-ask-no{background:transparent;color:var(--muted);border-color:var(--line);}
.howto-ask-no:hover{background:var(--line-soft);color:var(--ink);}

/* analysis-run done links (shown after a run instead of auto-reload) */
.ar-donelinks{margin-top:6px;font-size:12.5px}
.ar-donelinks a{color:var(--accent);text-decoration:none;font-weight:600;margin-right:14px}
.ar-donelinks a:hover{text-decoration:underline}

/* echo spinner inline next to the live analysis timer */
.ar-timerrow{display:flex;align-items:center;gap:10px;margin-top:6px;}
.ar-echo.spinner{--size:38px;margin:0;flex:0 0 auto;}
.ar-echo .logo{width:40%;height:40%;}
.ar-timerrow .ar-timer{display:inline-block;margin-top:0;}
/* the old rotating ring is replaced by the echo spinner */
.ar-timer.running::before{display:none;}

/* KIDJO-initiated analysis marker in the runs "By" column */
.run-by-kidjo{background:var(--accent-bg);color:var(--accent);border-radius:2px;padding:1px 7px;
  font-size:10.5px;font-weight:600;white-space:nowrap;}

/* Audit log: highlight AI-channel (KIDJO) actions so mens-vs-AI is clear at a glance */
.via-ai{color:var(--accent);font-weight:600;white-space:nowrap}

/* ===========================================================================
   THE VLOKA STANDARD, PORTED TO TIENOOC (v0.287)
   ---------------------------------------------------------------------------
   These components are NOT new. They are the shared COONEIT design language,
   taken verbatim from Vloka's `static/css/wifi.css` and its one standard,
   `docs/UI-conventions.md`, so that a person moving between the two products
   meets the same shapes and a session building either one reads one document.

   Brand stays TIENOOC's: --accent is the TIENOOC green #8A5533 and the
   honeycomb stays gold. What transfers is the SYSTEM, not Vloka's hues.

   The rules that come with these classes:
     * a page NEVER redefines a shared component. If a shape exists, use it.
       A component invented quietly on one page is what turns one standard
       into twelve.
     * a class defined in one template is not a standard. If two screens use
       it, it belongs here.
     * every corner is 2px. What is 50% stays a circle.
     * depth lives in the GROUND (body::before, --tile), never in the data.
       No shadow or gradient on a bar, a ring or a figure - that makes a
       measurement prettier than it was measured.
   =========================================================================== */

/* --- A heading over a story is BOLD ------------------------------------- */
/* At 11px monospace, 600 does not read as a heading but as grey text, and
   then the heading does not carry the story under it. One rule, not a class
   per page: there is one section heading in TIENOOC, and a second would
   immediately drift. */
/* The small explaining line under a field or a control. It was used on two screens and
   defined on neither, so it inherited nothing. A class two screens use belongs here. */
.hint{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:4px;max-width:70ch;}
.sec-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:700;margin-bottom:12px;font-family:"IBM Plex Mono",monospace;}

/* --- Label / value ladder ----------------------------------------------- */
/* `secgrp` is what makes the rows look right: it gives .kv119 its padding and
   the hairline under every row but the last. A card with kv rows and no
   secgrp is exactly the drift this block exists to stop. Group labels and row
   labels are SHORT - a label that wraps to two lines means the label is too
   long, not that the column is too narrow. */
.kv119{font-size:12px;color:var(--muted);display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;padding:5px 0;}
.kv119 b{color:var(--ink);font-weight:600;text-align:right;}
.secgrp .kv119{padding:5px 0;border-bottom:1px solid var(--line-soft);}
.secgrp .kv119:last-child{border-bottom:none;}
.secgrp .ctrl-lbl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:11px 0 2px;}
.secgrp .ctrl-sub{font-size:11px;color:var(--faint);padding-bottom:3px;line-height:1.5;}
.secgrp .ctrl-flex{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;}
.secgrp .ctrl-grp{flex:1 1 170px;min-width:0;}
.secgrp .ctrl-grp .ctrl-lbl{margin-top:0;}
.card2{}

/* --- Tile text: three lines, height reserved ---------------------------- */
/* Every tile with a text block: at most three lines, the height reserved
   whether there is one line or three, one line per fact with an ellipsis.
   A card still loading is already as tall as its neighbours, so the button
   row under it never jumps. Does it not fit? Then it belongs on the page
   behind the tile, not abbreviated into it. */
.ts-lines{min-height:calc(1.5em * 3);}
.ts-lines .ts-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The title line counts too: the name shrinks with an ellipsis, the badges
   never - they are the status and may not be the first thing to disappear. */
.ts-title1{display:flex;align-items:center;gap:6px;min-height:1.5em;flex-wrap:nowrap;}
.ts-title1 .ts-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* --- Labels / badges: one colour language ------------------------------- */
/* A label is coloured by what it MEANS, never by what looks good in that
   spot. In doubt between yellow and red: YELLOW. Red only for irreversible
   or genuinely broken - a label that shouts where nothing is wrong teaches
   people to ignore the one that matters. Green is not decoration: "enabled",
   "auto-save on", "template" are STATES, not successes, and those are grey. */
.vlbl{display:inline-block;font-family:"IBM Plex Mono";font-size:10.5px;font-weight:600;
  letter-spacing:.02em;padding:3px 9px;border-radius:2px;white-space:nowrap;
  border:1px solid transparent;vertical-align:middle;line-height:1.45;}
.vlbl-info{background:var(--line-soft);color:var(--muted);border-color:var(--line);}   /* neutral fact */
.vlbl-note{background:var(--warn-bg);color:var(--warn-tx);border-color:#F0DFB4;}       /* heads-up */
.vlbl-stop{background:var(--bad);color:var(--surface);border-color:var(--bad);}        /* destructive / down */
.vlbl-ok{background:var(--ok-bg);color:var(--ok-tx);border-color:#CFE7DA;}             /* ok / succeeded */

/* --- Numbers carry their own severity ----------------------------------- */
/* Same rule as the labels: the colour follows the MEANING. The difference is
   the HUE, not the saturation. Only colour a number TIENOOC has a documented
   threshold for, and print the scale next to the table - a black number beside
   a green one is a riddle otherwise (it means "measured, below every
   threshold", a real fourth state the reader cannot guess).
   .vnum-na is NOT a 0: a zero reads as "clean" when nothing was measured. */
.vnum{font-variant-numeric:tabular-nums;font-weight:600;}
.vnum-ok,.vnum-warn,.vnum-bad{display:inline-block;padding:1px 7px;border-radius:2px;
  line-height:1.5;border:1px solid transparent;}
.vnum-ok{color:var(--ok-tx);background:var(--ok-bg);border-color:#CFE7DA;}
.vnum-warn{color:#8A4B0E;background:rgba(217,122,22,.15);border-color:rgba(217,122,22,.45);}
.vnum-bad{color:var(--bad-tx);background:rgba(200,60,50,.15);border-color:rgba(200,60,50,.5);}
.vnum-na{color:var(--faint);font-weight:400;}

/* --- One button system --------------------------------------------------- */
/* Every variant shares the SAME height (36px), padding, font-size (13px),
   weight (600) and corner - only the colour/role differs. A button NEVER
   carries an inline or per-page height. If a context needs smaller, that is
   .btn-sm (28px) - never a one-off.
   The label sits in the MIDDLE of the button and there is no icon in it:
   centre icon and text together and the label lands 12px right of centre;
   position the icon absolutely and the label is centred but the icon hangs
   loose against the left edge. The label carries the meaning. */
.btn-primary,.btn-test{height:36px;box-sizing:border-box;padding:0 16px;border-radius:2px;
  font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--accent);color:var(--surface);border:1px solid var(--accent);}
.btn-primary:hover{filter:brightness(0.92);}
.btn-primary:disabled,.btn-test:disabled{opacity:.5;cursor:not-allowed;}
.btn-test{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
.btn-test:hover{background:var(--accent-bg);border-color:var(--accent);}
.btn-test.danger{color:var(--bad-tx);border-color:#EAC9C6;}
.btn-test.danger:hover{background:var(--bad-bg);border-color:var(--bad);}
.btn-test.on{background:var(--accent);color:var(--surface);border-color:var(--accent);}
.btn-sm{height:28px;padding:0 11px;font-size:12px;}

/* --- Buttons live in a bar ---------------------------------------------- */
/* What CHANGES something (Save, Apply, Install) goes RIGHT; what only LOOKS
   (Test connection, Test login) goes LEFT - add .split. The answer from those
   buttons belongs in the SAME bar (.bar-note), next to the button that asked
   for it, never at the bottom of the page.
   The order comes from the CSS, not from the markup, so Apply always ends up
   right even on a screen where it happens to come first in the HTML.
   min-height 60 = 12 + 36 + 12: a bar that does not enclose its own button
   is not a bar. */
.btn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn-row.end{justify-content:flex-end;}
.btn-row.bar{width:100%;box-sizing:border-box;margin-top:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:2px;background:var(--accent-bg);
  justify-content:flex-end;min-height:60px;align-content:center;row-gap:10px;}
.btn-row.bar.split{justify-content:space-between;}
.btn-row.bar > *{order:5;}
.btn-row.bar .bar-note{order:0;margin-right:auto;font-size:12px;color:var(--muted);
  line-height:1.5;max-width:60ch;}
.btn-row.bar .btn-primary{order:99;}
.btn-row.bar .bar-left{order:-1;}   /* Cancel/leave -> far left; Save stays right */
.btn-row .btn-primary,.btn-row .btn-test{height:36px;min-width:104px;}

/* --- The message family: three boxes, three directions ------------------ */
/* Keep the split consistent - it is the DIRECTION that separates them, not
   the severity:
     purple .action-required = "you must do something once" (asks the operator)
     green  .action-required.ok = "here IS the answer" (gives him something)
     orange .status-note = "heads up, this stays true until it is resolved"
     .note = the explanation at the top of a page (accent / warn / bad)
   Never put feedback at the bottom of a page. */
.note{display:flex;gap:11px;padding:13px 15px;background:var(--accent-bg);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:2px;
  margin-bottom:18px;}
.note svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.8;
  flex:none;margin-top:1px;}
.note .nt{font-size:12.5px;color:var(--ink);line-height:1.5;}
.note .nt b{color:var(--accent);}
.note.warn{background:var(--warn-bg);border-left-color:var(--warn);}
.note.warn svg{stroke:var(--warn-tx);} .note.warn .nt b{color:var(--warn-tx);}
.note.bad{background:var(--bad-bg);border-left-color:var(--bad);}
.note.bad svg{stroke:var(--bad-tx);} .note.bad .nt b{color:var(--bad-tx);}

.status-note{background:var(--warn-bg);border:1px solid #EAD9A6;border-left:4px solid var(--warn);
  border-radius:2px;padding:11px 13px;margin:0 0 12px;}
.status-note:empty{display:none;}
.status-note .sn-hd{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;
  color:var(--warn-tx);margin-bottom:4px;}
.status-note .sn-hd svg{width:16px;height:16px;fill:none;stroke:var(--warn);stroke-width:1.8;flex:none;}
.status-note p{margin:0;font-size:12.5px;line-height:1.55;color:var(--warn-tx);}

.action-required{background:var(--act-bg);border:1px solid #D9CCEF;border-left:4px solid var(--act);
  border-radius:2px;padding:11px 13px;margin:0 0 12px;}
.action-required .act-hd{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;
  color:var(--act-tx);margin-bottom:5px;}
.action-required .act-hd svg{width:16px;height:16px;fill:none;stroke:var(--act);stroke-width:1.8;flex:none;}
.action-required p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--act-tx);}
.action-required .act-cmd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.action-required .act-cmd.multi{align-items:flex-start;}
.action-required .act-cmd.multi code{white-space:pre;line-height:1.6;}
.action-required code{background:var(--surface);border:1px solid #D9CCEF;border-radius:2px;
  padding:3px 8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#3a2a5e;}
/* The green variant: under a check the box is not an alarm but the ANSWER -
   the lines are there, quoted from a documented source. Then it should not
   look like a fault. Same shape, same sizes, same code block; only the colour
   role turns to --ok, and the icon turns with it (a warning triangle in a
   green box contradicts itself). */
.action-required.ok{background:var(--ok-bg);border-color:#BFE3CF;border-left-color:var(--ok);}
.action-required.ok .act-hd{color:var(--ok-tx);}
.action-required.ok .act-hd svg{stroke:var(--ok);}
.action-required.ok p{color:var(--ok-tx);}
.action-required.ok code{border-color:#BFE3CF;color:var(--ok-tx);}

/* --- Folding a card ------------------------------------------------------ */
/* A results card with forty rows pushes everything under it off the screen.
   Any .card2 folds by adding vfold (plus open to start open). The chevron is
   LEFT, before the title (open/closed); a pin, if a screen ever gets one,
   goes right. Put the count in the header: a closed card must still say how
   much is in it. Start the big one closed and the summary ones open. */
.vfold > .sec-label{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;}
.vfold > .sec-label::before{content:"";width:14px;height:14px;flex:none;
  background:currentColor;color:var(--faint);transition:transform .16s ease;
  -webkit-mask:var(--tn-chev-mask) center/14px 14px no-repeat;
  mask:var(--tn-chev-mask) center/14px 14px no-repeat;}
.vfold.open > .sec-label::before{transform:rotate(90deg);}
.vfold > .vfold-bd{display:none;}
.vfold.open > .vfold-bd{display:block;}
.vfold > .sec-label .vfold-n{font-size:11.5px;color:var(--faint);font-weight:400;
  text-transform:none;letter-spacing:0;}

/* --- A table scrolls, it does not wrap ---------------------------------- */
/* One line per cell. Once there is a scrollbar, wrapping buys nothing and
   costs the thing the alignment standard exists for: a value broken over two
   lines makes every row a different height, so the eye can no longer run down
   a column. Nothing is truncated - the value is reached by scrolling, which
   the reader is already doing. A cell that must wrap gets .wrap. */
.tblwrap{overflow-x:auto;}
.tblwrap .wrap{white-space:normal;}

/* ===========================================================================
   SOLO SCREENS - sign-in and anything else that stands outside the shell
   ---------------------------------------------------------------------------
   Taken from Vloka's `body.vk-solo`. These pages hold a single card in the
   middle of an empty field and the sidebar never reaches them, so the wash may
   be stronger than in the shell without competing with anything - there is no
   data on any of these screens.

   That is also why the CARD may be glass here while a tile in the product may
   not: the rule is that the CHROME is glass and the DATA is not, and a sign-in
   card carries no measurement. The input fields stay opaque on --surface for
   the same reason - a value you have to read through a background is a reading
   problem, not a design.

   ONE definition, and a class on the body. In Vloka five screens each carried
   their own copy of this and that is how they drifted apart; TIENOOC's sign-in
   screen carried its own `body{background:var(--canvas)}` inline for the same
   reason. Add `class="tn-solo"` to the body - do not copy this block.

   The honey ground of the app is NOT touched: that is `body::before`, for the
   shell. This is a different surface with a different job.
   =========================================================================== */
body.tn-solo{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:28px 16px;box-sizing:border-box;overflow:hidden;
  background:linear-gradient(157deg,#F7F2E4 0%,#F2E3D2 46%,#EAD6CC 100%);}
/* The shell's ground must not paint over this one. */
body.tn-solo::before{content:none;}
/* `content` is only set on the pseudo-element. On a real element `content:""` is an
   element-replacement in Chromium and would blank the span out - the two are not
   interchangeable, which is why they are two rules and not one selector list. */
body.tn-solo::after{content:"";}
body.tn-solo::after,body.tn-solo .tn-solo-lamp{position:fixed;z-index:-1;
  border-radius:50%;filter:blur(50px);pointer-events:none;display:block;}
body.tn-solo::after{width:50vmax;height:50vmax;right:-14vmax;bottom:-18vmax;
  background:radial-gradient(circle,rgba(192,57,43,.46),rgba(192,57,43,0) 68%);}
body.tn-solo .tn-solo-lamp{width:58vmax;height:58vmax;left:-16vmax;top:-20vmax;
  background:radial-gradient(circle,rgba(201,162,39,.52),rgba(201,162,39,0) 68%);}

body.tn-solo .lg-card{
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.85);
  box-shadow:0 20px 50px rgba(70,44,16,.14),0 2px 8px rgba(70,44,16,.07),
             inset 0 1px 0 rgba(255,255,255,.75);}
/* Without backdrop-filter a 52%-white card on this wash is readable but muddy. Give those
   browsers a surface that carries the text instead of pretending the blur happened. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.tn-solo .lg-card{background:rgba(255,255,255,.88);}
}

/* Guide me in de topbalk (02-09). Draagt het donkerbruin van de howto-strook die hij
   opent, zodat de knop en wat hij start een ding zijn -- dezelfde redenering als bij
   Vloka, waar die knop het bruin van zijn strook draagt. */

/* ---- Vloka's drie bovenknoppen, 1-op-1 overgenomen (02-09). Rechts uitgelijnd, TIENOOC-kleur. */
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.top .pill{margin-left:0;}
.guide-pill{cursor:pointer;}
.guide-pill:hover{border-color:var(--accent);color:var(--accent);}
.guide-pill svg{width:14px;height:14px;}
.acct-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:2px;padding:5px 10px 5px 6px;background:var(--surface);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 1px 4px rgba(58,40,24,.07);}
.acct-btn:hover,.acct-btn.on{border-color:var(--accent);}
.acct-ini{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#C0392B);color:#fff;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;}
.acct-nm{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-cv{color:var(--muted);transition:transform .18s;}
.acct-btn.on .acct-cv{transform:rotate(180deg);}
.acct-pop{position:fixed;top:60px;right:24px;width:300px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 20px 54px rgba(40,26,10,.26);z-index:400;overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .14s,transform .14s;}
.acct-pop.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.acct-pop-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--accent-bg);}
.acct-idav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#C0392B);color:#fff;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.acct-pop-nm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.acct-pop-sub{font-size:12px;color:var(--muted);margin-top:1px;}
.acct-status{padding:10px 16px;background:var(--canvas);border-bottom:1px solid var(--line-soft);}
.acct-srow{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;padding:4px 0;}
.acct-sk{color:var(--muted);}
.acct-sv{font-weight:600;color:var(--ink);white-space:nowrap;}
.acct-pop-bd{padding:14px 16px 16px;}
.acct-item{display:flex;align-items:center;gap:9px;padding:9px 2px;margin-bottom:12px;color:var(--accent);text-decoration:none;font-size:13px;font-weight:600;}
.acct-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;}
.acct-div{height:1px;background:var(--line);margin:0 0 12px;}
.acct-out{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:9px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:#C0392B;font-weight:600;font-size:13px;text-decoration:none;font-family:inherit;}
.acct-out svg{stroke:currentColor;fill:none;stroke-width:2;}
.acct-out:hover{border-color:#C0392B;background:var(--canvas);}

/* Vloka terugknop, 1-op-1 (02-09): bovenaan, met de pijl-in. */
.backbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.backbtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:2px;cursor:pointer;color:var(--ink);font-family:inherit;box-shadow:var(--tile);text-decoration:none;font-weight:600;}
.backbtn:hover{border-color:var(--accent);color:var(--accent);}
.backbtn svg{stroke:currentColor;fill:none;}

/* ---- CLI text box: de ENE vorm voor een configuratie plakken/tonen (was inline in
   baseline_config.html; een tweede definitie per pagina is precies wat de standaard verbiedt) ---- */
.bl-cli{width:100%;min-height:300px;box-sizing:border-box;resize:vertical;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.55;color:#E8B84B;background:rgba(20,14,8,.96);border:1px solid rgba(201,162,39,.45);border-radius:2px;padding:12px 13px;caret-color:#E8B84B;}
.bl-cli:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);}
.bl-cli::placeholder{color:#7A6A45;}
.bl-cli.short{min-height:170px;}

/* ---- bronkeuze-chip: EEN vorm voor "waar komt het vandaan" (stond inline in
   analysis_scheduler.html; de Scheduler en Config from the catalog gebruiken hem beide) ---- */
.sch-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:2px;border:1px solid var(--line);cursor:pointer;font-size:12px;user-select:none;transition:all .12s;background:var(--surface);color:var(--ink)}
.sch-chip:hover{border-color:var(--accent);background:var(--accent-bg)}
.sch-chip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:500}
.sch-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}
.sch-box{width:14px;height:14px;border:1.5px solid var(--faint);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1}
.sch-chip.on .sch-box{background:var(--accent);border-color:var(--accent);color:#fff}
.sch-row-wrap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sch-lab2{font-size:11px;color:var(--muted);margin-bottom:4px}

.tn-pick-bad{border-color:var(--bad-tx)!important}

.sc-in.sc-short{width:18ch;min-width:18ch}  /* 16 characters plus padding: account fields, not a full-width bar */
.sc-row > div > select.sc-in.sc-short{width:18ch}

/* Device access cards: the short fields spread over the card width with equal gaps */
.cf-card[data-sec="devacc"] .sc-row,.cf-card[data-sec="devsnmp"] .sc-row,.cf-card[data-sec="srclocal"] .sc-row,.cf-card[data-sec="srcsftp"] .sc-row{justify-content:space-between}
.cf-card[data-sec="devacc"] .sc-row > div,.cf-card[data-sec="devsnmp"] .sc-row > div,.cf-card[data-sec="srclocal"] .sc-row > div,.cf-card[data-sec="srcsftp"] .sc-row > div{flex:0 0 18ch;width:18ch}
.cf-card[data-sec="devacc"] .sc-lbl,.cf-card[data-sec="devsnmp"] .sc-lbl,.cf-card[data-sec="srclocal"] .sc-lbl,.cf-card[data-sec="srcsftp"] .sc-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Device access cards: label inside the box, required fields soft red until filled (then soft green) */
.cf-card[data-sec="devacc"] .sc-row > div,.cf-card[data-sec="devsnmp"] .sc-row > div,.cf-card[data-sec="srclocal"] .sc-row > div,.cf-card[data-sec="srcsftp"] .sc-row > div{flex:1 1 0;width:auto;min-width:0}
.cf-card[data-sec="devacc"] .sc-in.sc-short,.cf-card[data-sec="devsnmp"] .sc-in.sc-short,.cf-card[data-sec="srclocal"] .sc-in.sc-short,.cf-card[data-sec="srcsftp"] .sc-in.sc-short{width:100%;min-width:0}
.sc-fld{position:relative}
.sc-fld .req-star{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--bad-tx);font-weight:700;pointer-events:none}
.sc-in.sc-req{background:var(--bad-bg);border-color:#E7C3C0}
.sc-in.sc-req.filled{background:var(--ok-bg);border-color:#CFE6D6}

.btn-test-sec{font-size:12px;font-weight:600;height:28px;padding:0 11px;border-radius:2px;cursor:pointer;font-family:inherit;border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn-test-sec:hover{border-color:var(--accent);color:var(--accent)}

.cf-dot{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--line);margin-left:8px;flex:none}
.cf-dot.ok{background:#7CC29A}.cf-dot.bad{background:#E39B94}.cf-dot.busy{background:var(--line);opacity:.6}

/* reachability square while the check runs: pulsing grey, so "still checking" is visible */
@keyframes cfdot-pulse{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
.cf-dot.busy{background:var(--line);opacity:1;animation:cfdot-pulse 1.2s ease-in-out infinite}
/* column filter: the values present in the column, click to filter */
.alf-pop .alf-vals{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:2px;margin-bottom:8px}
.alf-pop .alf-v{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;cursor:pointer;font-size:12px}
.alf-pop .alf-v:hover{background:var(--accent-bg)}
.alf-pop .alf-vt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alf-pop .alf-vc{color:var(--muted);flex:0 0 auto}

/* tn-pick draws its own list (2026-09-05): everything on focus, narrowed by typing. Same shape as Vloka's picker. */
.tn-ta{position:relative;}
.tn-ta-list{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--surface);border:1px solid var(--line);
  border-radius:2px;box-shadow:0 12px 30px rgba(70,44,16,.16);margin-top:4px;max-height:264px;overflow:auto;display:none;}
.tn-ta-list.show{display:block;}
.tn-ta-i{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink);}
.tn-ta-i:last-child{border-bottom:none;}
.tn-ta-i:hover,.tn-ta-i.on{background:var(--accent-bg);}
.tn-ta-i b{background:#fff3c4;color:var(--ink);border-radius:2px;padding:0 1px;}
.tn-ta-none{padding:9px 11px;font-size:12px;color:var(--muted);}

/* ===== Dashboard standard (Vloka TEMPLATE_dashboard.md, ported 2026-09-05): tabs, head+pill, main card with
   the liquid squares NEXT to the three columns, supporting tiles below. One shape for every tab. ===== */
/* The app-strip (Vloka): one line with the appliance figures and the three dashboards as labels with a
   coloured slash between them. Where you stand is underlined; a dashboard with a problem takes its colour
   and a block in front, and one attention line appears under the strip. */
.app-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:10px 16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(25,36,31,.05);}
.app-strip .as-l{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;}
.app-strip .as-m{font-size:12.5px;color:var(--ink);} .app-strip .as-m b{font-weight:700;}
.as-flaps{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.as-sep{color:#8A5533;font-weight:700;font-size:13px;user-select:none;}
.as-tab{--kl:var(--muted);display:inline-flex;align-items:center;gap:6px;padding:3px 2px 4px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .14s ease;}
.as-tab:hover{color:var(--kl);} .as-tab.on{color:var(--kl);border-bottom-color:var(--kl);} .as-tab.attn{color:var(--kl);}
.as-tab .as-dot{width:8px;height:8px;border-radius:2px;background:var(--kl);flex:none;display:none;} .as-tab.attn .as-dot{display:block;}
.as-tab .as-logo{width:16px;height:16px;display:block;flex:none;}
.as-tab.rood{--kl:#C0392B;} .as-tab.goud{--kl:#C9A227;} .as-tab.oranje{--kl:#D07A16;}
.k6t,.as-tab .k6t,.dc119 h3 .k6t,.db-head .t .k6t{color:#FF642D;font-weight:800;font-size:.6em;position:relative;top:-0.4em;} .as-tab.on .k6t{color:#111;}
.as-attn{width:100%;display:none;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink);}
.as-attn a{color:var(--accent);font-weight:600;text-decoration:none;} .as-attn a:hover{text-decoration:underline;}
@media(max-width:900px){.as-flaps{margin-left:0;width:100%;}}
.secgrp .ctrl-sub{font-size:11px;color:var(--faint);padding-bottom:3px;line-height:1.5;}
.db-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.db-head .t{font-weight:600;font-size:20px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;}
.db-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;box-sizing:border-box;padding:0 16px;border-radius:2px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;}
.db-pill.ok{border-color:var(--ok-tx);color:var(--ok-tx);} .db-pill.bad{border-color:var(--bad-tx);color:var(--bad-tx);}
.db-panel{display:none;} .db-panel.on{display:block;}
.grid119{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:stretch;}
.dc119{min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:12px 14px;box-shadow:0 1px 3px rgba(25,36,31,.05);}
.dc119 h3{margin:0 0 3px;font-size:12px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;font-weight:600;}
.dc119.col-6{grid-column:span 6;} .dc119.col-12{grid-column:span 12;}
@media(max-width:860px){.dc119.col-6{grid-column:span 12;}}
.kv119{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0;}
.kv119 span{color:var(--muted);font-size:12px;} .kv119 b{font-weight:600;font-size:12.5px;text-align:right;overflow-wrap:anywhere;color:var(--ink);}
.kv119 > *{min-width:0;} .kv119 small{color:var(--faint);font-weight:400;}
.secgrp .kv119{border-bottom:1px solid var(--line-soft);} .secgrp .kv119:last-child{border-bottom:none;}
.secgrp .ctrl-lbl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 2px;}
.secgrp .ctrl-flex{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;}
.secgrp .ctrl-sqs{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
.secgrp .ctrl-grp{flex:1 1 170px;min-width:0;}
.dc-sq{width:120px;display:flex;flex-direction:column;align-items:stretch;}
.dc-sq svg{width:100%;height:auto;aspect-ratio:1;overflow:visible;display:block;}
.dc-sq-onder{margin-top:4px;text-align:center;font-size:11px;line-height:1.25;color:var(--muted);letter-spacing:.01em;}
.lq-na{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:2px;color:var(--muted);font-size:11px;gap:4px;}
.lq-na b{color:var(--faint);font-weight:700;font-size:13px;}
.leg-go{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;cursor:pointer;}
.leg-go:hover{color:var(--accent);border-bottom-color:currentColor;}
.t-ok{color:var(--ok-tx) !important;} .t-warn{color:var(--warn-tx) !important;} .t-bad{color:var(--bad-tx) !important;}
.vk-down{border-color:var(--bad-tx) !important;box-shadow:0 0 0 1px var(--bad-tx) inset !important;}

/* Ring tiles and the trend card (Vloka's overview row, 2026-09-05). The overview grid has fifteen columns: five
   tiles of three; every full card spans fifteen. */
.grid119.g15{grid-template-columns:repeat(15,1fr);}
.dc119.col-3{grid-column:span 3;} .dc119.col-4{grid-column:span 4;} .dc119.col-5{grid-column:span 5;} .dc119.col-15{grid-column:span 15;}
@media(max-width:1500px){.grid119.g15 > .dc119:not(.col-15){grid-column:span 5;}}
@media(max-width:1000px){.grid119.g15 > .dc119:not(.col-15){grid-column:span 15;}}
.dc119.attn{border-color:var(--bad);box-shadow:0 0 0 1px rgba(192,57,43,.15);} .dc119.attn h3{color:var(--bad-tx);}
.dc-center{display:flex;justify-content:center;align-items:center;flex:0 0 auto;margin-top:0;}
.leg119{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;font-weight:500;color:#3f4952;margin-top:6px;justify-content:center;line-height:19px;height:69px;overflow:hidden;align-content:flex-start;}
.leg119 > *{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.leg119 .leg-go{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;cursor:pointer;}
.leg119 .leg-go:hover{color:var(--accent);border-bottom-color:currentColor;} .leg-off{color:#8b949c;}
.dot119{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.ring-go{display:block;text-decoration:none;color:inherit;border-radius:2px;transition:background .15s;} .ring-go:hover{background:rgba(0,0,0,.035);}
.ring-num{cursor:pointer;} .ring-num text{transition:fill .15s;} .ring-num:hover text{fill:var(--accent);}
.dc119 .dc-foot{margin-top:auto;text-align:center;font-size:13px;font-weight:500;color:#3f4952;padding-top:5px;}
.dc-foot .leg-go{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;cursor:pointer;}
.dc-foot .leg-go:hover{color:var(--accent);border-bottom-color:currentColor;}
.trend119{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:6px;}
.trend119-lbl{display:block;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px;}
.trend119-sub{margin:0 0 2px;font-size:12px;color:var(--muted);max-width:62ch;}
.trend119 svg{width:100%;height:auto;display:block;}
.trend119-leg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin-top:12px;}
.trend119-key{display:inline-flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--muted);padding:0 14px;}
.trend119-key:first-child{padding-left:0;} .trend119-key + .trend119-key{border-left:1px solid var(--line);}
.trend119-key b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:14px;font-weight:650;}
.trend119-uit{margin:6px 0 0;font-size:12.5px;color:var(--muted);max-width:52ch;}

/* Customize: the dashboard's own arrangement window (order, width, hidden cards per dashboard, saved in this browser). */
.db-head .btn{margin-left:10px;}
.cust-ov{position:fixed;inset:0;background:rgba(20,28,24,.5);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
.cust-modal{background:var(--surface);border-radius:2px;width:720px;max-width:96vw;max-height:92vh;box-shadow:0 18px 52px rgba(0,0,0,.30);overflow:hidden;display:flex;flex-direction:column}
.cust-hd{background:var(--accent);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cust-title{font-size:15px;font-weight:600} .cust-sub{font-size:11px;opacity:.85;margin-top:2px}
.cust-done{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:2px;padding:7px 14px;cursor:pointer;font-size:12px;font-weight:600}
.cust-body{padding:14px 16px;overflow:auto}
.cust-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:11px;border-top:1px solid var(--line-soft);font-size:12px}
.cust-reset{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:5px 12px;cursor:pointer;font-size:11px}
.cust-canvas{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.cust-tile{border:1px solid var(--line);border-radius:2px;background:var(--surface);overflow:hidden;cursor:grab;box-shadow:0 1px 3px rgba(25,36,31,.05);transition:box-shadow .12s}
.cust-tile:hover{box-shadow:0 5px 14px rgba(58,40,24,.12)} .cust-tile.wide{grid-column:1 / -1} .cust-tile.dragging{opacity:.45}
.cust-tile.drop-target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.cust-tile-hd{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--canvas);border-bottom:1px solid var(--line-soft)}
.cust-grip{color:var(--faint);font-size:13px} .cust-tile-name{flex:1;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cust-w{display:inline-flex;gap:3px}
.cust-mini-btn{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:2px 8px;font-size:10px;font-weight:600;cursor:pointer;color:var(--muted)}
.cust-mini-btn:hover{border-color:var(--accent);color:var(--accent)} .cust-mini-btn.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.cust-mini-btn.x{padding:2px 7px;color:var(--bad-tx)} .cust-mini-btn.x:hover{background:var(--bad-bg);border-color:#F0C9C5}
.cust-prev{height:84px;overflow:hidden;position:relative;pointer-events:none;background:var(--surface)}
.cust-prev>*{transform:scale(.42);transform-origin:top left;width:238%}
.cust-tray-wrap{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px} .cust-tray-ttl{font-size:11px;color:var(--muted);margin-bottom:7px}
.cust-tray{display:flex;flex-wrap:wrap;gap:7px}
.cust-chip{display:flex;align-items:center;gap:7px;border:1px dashed var(--line);border-radius:2px;padding:6px 10px;font-size:12px;color:var(--muted);cursor:pointer;background:var(--canvas)}
.cust-chip:hover{border-color:var(--accent);color:var(--accent)}

/* Guide me: the example line under an explanation; the highlight stays .howto-field (one frame, gone at Stop). */
.ght-ex{margin-top:8px;font-size:11.5px;color:#ffd88a;} .ght-ex b{display:inline;color:#fff;font-size:11.5px;margin:0;}
.howto-bar b{color:#ffd88a;}

/* Wait overlay: Stop from the start, and the note after the 60 s limit. */
.tno-wait-acts{margin-top:14px;}
.tno-wait-stop{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:2px;padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;}
.tno-wait-stop:hover{border-color:var(--accent);color:var(--accent);}
.tno-wait-note{margin:12px auto 0;max-width:420px;font-size:12.5px;line-height:1.5;color:var(--ink);}
.tno-wait-note[hidden]{display:none;}