/* The live portal's components in the new design (dashboard, search, API,
   API docs, sign-in), matched to the monitoring page that is built from the
   design's own components (portal.css + monitor.css): the same container,
   page title, section titles, panels, fields, buttons, tables and messages.

   The live stylesheet (assets/live/style.css) and the pages' own <style>
   blocks sit in the cascade layer `legacy` (tools/live.py), so these rules win
   without !important. The live pages' style="" attributes are normalised at
   build time (weights, small sizes, old indigo). Values: tokens.css. Buttons
   and the industry tree: components.css. */

/* The live portal's tokens (and api-docs.html's own), pointed at the palette. */
:root{
  --bg:var(--paper); --surface-2:var(--selection); --surface-hover:var(--selection);
  --border-strong:var(--control-rule);
  --text:var(--carbon); --text-2:var(--muted); --text-3:var(--muted);
  --primary:var(--carbon); --primary-hover:var(--carbon-hover); --primary-tint:var(--selection); --primary-ring:var(--control-rule);
  --r-sm:var(--radius-control); --r:var(--radius-control); --r-lg:var(--radius-panel); --r-xl:var(--radius-panel); --r-pill:var(--radius-control);
  --sh-sm:none; --sh:none; --sh-lg:none;
  --font:var(--font-body);
  --warning-bg:var(--warning-surface); --error-bg:var(--error-surface);
  /* api-docs.html */
  --bg2:var(--selection); --text2:var(--muted); --text3:var(--muted); --primary2:var(--carbon-hover); --tint:var(--selection); --mono:var(--font-mono);
  --ok:var(--success); --warn:var(--warning); --err:var(--error);
}

/* what the tour or a link scrolls to stays clear of the sticky navigation */
html{scroll-padding-top:calc(64px + var(--s4))}
@media(max-width:1180px){html{scroll-padding-top:calc(120px + var(--s4))}}
body{font-family:var(--font-body);background:var(--paper);color:var(--carbon);font-size:var(--text-body);line-height:var(--lh-body);
  font-synthesis:none;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--carbon)}
a{color:var(--carbon)}
:focus-visible{outline:3px solid var(--focus-color);outline-offset:var(--focus-offset)}
:is(.page,.auth-wrap,.modal) :is(strong,b){font-weight:500}

/* ---- top navigation ------------------------------------------------- */
.topnav{background:var(--surface);border-bottom:var(--rule) solid var(--border);backdrop-filter:none;height:64px;gap:var(--s4)}
.topnav__brand{min-height:var(--touch-min);align-items:center}
.topnav__brand img{height:28px;width:auto}
.topnav__links a{color:var(--carbon);font-size:var(--text-label);font-weight:500;padding-inline:var(--s3);min-height:var(--touch-min)}
.topnav__links a.active{background:var(--selection);color:var(--carbon)}
.topnav__links a.active::after{background:var(--lime);height:3px;border-radius:0;left:0;right:0}
@media(hover:hover){.topnav__links a:hover{background:var(--selection);color:var(--carbon)}}
.topnav__right{gap:var(--s2)}
.bal-pill{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:var(--s2) var(--s3);background:var(--lime);color:var(--carbon);
  border:var(--rule) solid var(--carbon);border-radius:var(--radius-control);font-size:var(--text-label);font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer}
.topnav .user-card,.user-card{min-height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--radius-control);background:var(--surface);border-color:var(--control-rule)}
.topnav .user-card .who-name{font:500 var(--text-label)/1.25 var(--font-body)}
.user-card .avatar,.avatar{background:var(--selection);color:var(--carbon);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);font-family:var(--font-mono)}
.user-menu{border:var(--rule) solid var(--control-rule);border-radius:var(--radius-panel);background:var(--surface);box-shadow:var(--shadow-overlay)}
.user-menu__item{min-height:var(--touch-min);display:flex;align-items:center}
/* the language switch (i18n.js) and the tour's help button (tour.js) */
.lang-sw{gap:0;border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);overflow:hidden;background:var(--surface)}
.lang-sw button{min-width:var(--touch-min);min-height:var(--touch-min);padding:0 var(--s2);border:0;border-radius:0;background:transparent;color:var(--carbon);
  font:500 var(--text-label)/1 var(--font-body)}
.lang-sw button.on{background:var(--carbon);color:var(--surface)}
/* sign-in page: the switch sat fixed over the preview banner; it now scrolls with the page below it */
.lang-sw--fixed{position:absolute;top:calc(var(--touch-min) + var(--s3));right:var(--s4)}
/* inside the sign-in card (28 px padding), level with the 44 px Back link */
.auth-card>.lang-sw--card{position:absolute;top:27px;right:28px;z-index:1}
.tour-help{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--radius-control);border-color:var(--control-rule);color:var(--carbon)}
/* Up to 1280 px the user's address gives way to the menu. Up to 1180 px the
   navigation takes its own row (the live portal did that only below 761 px,
   which with 44 px controls left the right-hand tools off the screen). */
@media(max-width:1280px){.topnav .user-card .who-name{display:none}}
@media(max-width:1180px){
  .topnav{height:auto;flex-wrap:wrap;padding:var(--s2) var(--s4);gap:var(--s2);row-gap:0}
  .topnav__brand{order:1;flex:0 0 auto}
  .topnav__right{order:2;margin-left:auto;flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .topnav__links{order:3;flex:0 0 100%;width:100%;min-width:0;margin-top:var(--s2);height:48px;gap:0;border-top:var(--rule) solid var(--border);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .topnav__links a{flex:0 0 auto;white-space:nowrap}
}
/* Phones: logo, language, balance and account fit one row at 44 px; the tour's
   replay button goes (the tour still starts by itself for a new account). */
@media(max-width:480px){
  .topnav__brand img{height:22px}
  .topnav .tour-help,.topnav .user-card .chev{display:none}
  .topnav .user-card{padding:var(--s1)}
}

/* ---- page container and headings (as .mon-shell / .portal-heading) -- */
.page{background:var(--paper)}
.page-content{width:100%;max-width:var(--app-main);padding:var(--s8) var(--s12) var(--s12)}
.page-content.wide{max-width:1320px}
.page-head{margin-bottom:var(--s8);align-items:flex-start}
.page-head h1,.auth-card h1,main.page h1{font-family:var(--font-display);font-weight:700;letter-spacing:var(--tracking-display);
  font-size:var(--text-page);line-height:var(--lh-page);color:var(--carbon)}
.page-head .sub{font-size:var(--text-body);line-height:var(--lh-body);color:var(--muted);margin-top:var(--s2);max-width:65ch}
.section-title{margin:var(--s8) 0 var(--s3);font-family:var(--font-body);font-size:var(--text-lead);line-height:var(--lh-sub);font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--carbon)}
.section-title .muted{font-size:var(--text-body)}
:is(.panel,.modal,.auth-card) h2{font-size:var(--text-lead);line-height:var(--lh-sub);font-weight:500;letter-spacing:0;color:var(--carbon)}
:is(.panel,.modal,.auth-card) h3{font-size:var(--text-body);line-height:var(--lh-sub);font-weight:500;letter-spacing:0;color:var(--carbon)}
.muted,.hint,.sub{color:var(--muted)}
@media(max-width:760px){.page-content{padding:var(--s6) var(--s4) var(--s8)}}

/* ---- panels and figures --------------------------------------------- */
/* grid items may shrink: a wide table scrolls inside its panel instead of widening the page */
.grid > *,.an-cols > *{min-width:0}
.panel,.moncard,.wallet-hero,.cta-banner,.onboard,.auth-card,.stat,.mon-box,.danger-zone,.filter-panel,.results-wrap{
  background:var(--surface);border:var(--rule) solid var(--border);border-radius:var(--radius-panel);box-shadow:none}
.wallet-hero,.auth-card{position:relative}
.wallet-hero::after,.auth-card::after{content:"";position:absolute;bottom:0;left:0;width:var(--panel-corner);height:var(--panel-corner);background:var(--lime);
  clip-path:polygon(0 0,100% 100%,0 100%)}
.wallet-hero__label,.stat .label{font-size:var(--text-label);font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.wallet-hero__amt,.stat .num{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--carbon)}
.stat .num.indigo{color:var(--carbon)}
.cta-banner .t,.onboard .t{color:var(--carbon)}
.cta-banner.warn,.warn{color:var(--warning)}
.onboard .n{background:var(--surface);color:var(--carbon);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);font-weight:500}
.danger-zone{border-color:var(--error)}
.divider{color:var(--muted)}

/* ---- fields ----------------------------------------------------------- */
:is(.page,.auth-wrap,.modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  min-height:var(--control-size);padding:var(--s3) var(--s4);font-family:var(--font-body);font-size:var(--text-body);color:var(--carbon);
  background:var(--surface);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control)}
/* A native <select> in WebKit clips its text under the 12px vertical padding
   above, whatever its height, and iOS Safari does not apply min-height to it, so
   it also kept the 44px (.toolbar 38px) height style.css gives it: the text was
   cut off on iPhones (admin user card, dashboard profile Country, 2026-10-07).
   A select gets the control height outright and no vertical padding; the native
   control centres its text. The :not() chain matches the specificity of the
   field rule above, which counts its input:not() chain for every element. */
:is(.page,.auth-wrap,.modal) select:not([multiple]):not([size]):not([hidden]){height:var(--control-size);padding-block:0}
:is(.page,.auth-wrap,.modal) :is(input,select,textarea):focus{outline:3px solid var(--carbon);outline-offset:1px;border-color:var(--carbon)}
:is(.page,.auth-wrap,.modal) input::placeholder{color:var(--muted)}
:is(.page,.auth-wrap,.modal) label{font-weight:500;color:var(--carbon)}
.chk-list__item,.terms-chk,label:has(> input.chk){min-height:var(--touch-min);display:flex;align-items:center;gap:var(--s3)}
.more-toggle,.mcpx-copy{min-height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--radius-control)}
.pw-toggle{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--radius-control);color:var(--carbon)}

/* ---- tabs, chips, segments, badges ------------------------------------ */
.tabs{background:var(--selection);border-radius:var(--radius-control);padding:var(--s1)}
.tabs button,.mcpx-tab{min-height:var(--touch-min);border-radius:var(--radius-control);color:var(--carbon);font-weight:500;font-size:var(--text-label);
  background:transparent;border:var(--rule) solid transparent}
.tabs button.active{background:var(--surface);color:var(--carbon);border-color:var(--control-rule)}
/* MCP setup block (app.js): the active tab joins the Carbon code panel below it */
.mcpx{background:var(--surface);border:var(--rule) solid var(--border);border-radius:var(--radius-panel)}
.mcpx-hd{font-weight:500;font-size:var(--text-body)}
.mcpx-tab{border-radius:var(--radius-control) var(--radius-control) 0 0;border-color:var(--border);border-bottom:0}
.mcpx-tab.on{background:var(--carbon);color:var(--surface);border-color:var(--carbon)}
.mcpx-codewrap{background:var(--carbon);border-color:var(--carbon);border-radius:0 var(--radius-control) var(--radius-control) var(--radius-control)}
.mcpx-codebar{border-bottom-color:var(--dark-surface)}
.mcpx-file{color:var(--dark-muted);font-size:var(--text-mono)}
.mcpx-code{color:var(--surface);font-size:var(--text-mono)}
.mcpx-copy{background:transparent;color:var(--surface);border:var(--rule) solid var(--dark-muted);font-size:var(--text-label);font-weight:500}
@media(hover:hover){.mcpx-copy:hover{background:var(--dark-surface);border-color:var(--surface)}}
.mcpx-copy:focus-visible{outline-color:var(--lime)}
.mcpx-prompts li{background:var(--selection);border-color:var(--border);border-radius:var(--radius-control);font-size:var(--text-label)}
.mcpx-nudge{background:var(--selection);color:var(--carbon);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);font-size:var(--text-label)}
.chip,.seg button,.country-opt{min-height:var(--touch-min);border-radius:var(--radius-control);border:var(--rule) solid var(--control-rule);
  background:var(--surface);color:var(--carbon);font-weight:500}
.chip.sel,.chip.active,.country-opt.active,.seg button.active{background:var(--lime);border-color:var(--carbon);color:var(--carbon)}
@media(hover:hover){.chip:hover,.country-opt:hover,.seg button:hover{border-color:var(--carbon)}}
.badge{border-radius:var(--radius-control);font-weight:500;font-size:var(--text-label)}
.badge.role{background:var(--selection);color:var(--carbon)}
.industry-tag{border-radius:var(--radius-control);background:var(--selection);color:var(--carbon)}
.industry-tree .node-kood{color:var(--carbon);font-weight:500}
.industry-tree .node-text{color:var(--carbon)}
.industry-tree .highlight{background:var(--lime);color:var(--carbon)}

/* ---- tables (portal panels and results) ------------------------------- */
:is(.panel,.results-wrap) table{font-size:var(--text-label)}
:is(.panel,.results-wrap) th{background:var(--selection);color:var(--carbon);font-weight:500;font-size:var(--text-label);letter-spacing:0;text-transform:none}
:is(.panel,.results-wrap) :is(td,th){border-color:var(--border)}
:is(.panel,.results-wrap) th.sortable.sorted{color:var(--carbon)}

/* ---- messages and dialogs (as .portal-feedback / .portal-dialog) -------- */
.msg{border-radius:var(--radius-control)}
.msg.err,.banner-error,.terms-err{background:var(--error-surface);color:var(--error);border:var(--rule) solid var(--error);border-radius:var(--radius-control)}
.msg.ok{background:var(--selection);color:var(--carbon);border:var(--rule) solid var(--control-rule)}
.modal-bg{background:var(--scrim);backdrop-filter:none}
.modal{background:var(--surface);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay)}
/* The header app.js addModalClose() builds in every portal modal: its title and a
   close button, staying at the top while the content scrolls (on a phone the
   modal fills the screen and the backdrop is a 16px strip). It copies the site's
   filter window header (skin-site .modal__header/.modal__close) and spans the
   modal's 24px side padding (style.css .modal). The modal loses its top padding
   instead of the header pulling itself into it: WebKit sticks a header inside the
   scroll container's padding, which showed scrolled text above it. */
.modal.has-head{padding-top:0}
.modal-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin:0 calc(var(--s6) * -1) var(--s4);padding:var(--s4) var(--s6);background:var(--surface);border-bottom:var(--rule) solid var(--border)}
.modal-head h1{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.modal-close{flex:none;width:var(--touch-min);height:var(--touch-min);padding:0;display:grid;place-items:center;background:transparent;
  color:var(--muted);border:var(--rule) solid var(--border);border-radius:var(--radius-control);font:400 24px/1 var(--font-body);cursor:pointer}
.modal-close:hover{color:var(--carbon);border-color:var(--control-rule)}
.modal-close:focus-visible{outline:3px solid var(--carbon);outline-offset:1px}
/* Dashboard tables stay inside their panels; invoice fields shrink on phones. */
.panel{min-width:0}
.panel:has(>table){overflow-x:auto}
#finalize-modal .grid>div{min-width:0}
@media(max-width:600px){#finalize-modal .grid.cols-2{grid-template-columns:minmax(0,1fr)!important}.page .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}}

/* ---- footer ------------------------------------------------------------ */
.portal-footer{color:var(--muted);font-size:var(--text-label)}
.portal-footer a{display:inline-flex;align-items:center;min-height:var(--touch-min);min-width:var(--touch-min);color:var(--carbon)}

/* ---- sign-in page: the pitch panel is a dark surface ------------------ */
.auth-wrap{background:var(--paper)}
.auth-logo{height:36px;width:auto}
.back-main{display:inline-flex;align-items:center;min-height:var(--touch-min);color:var(--carbon);font-weight:500}
.portal-pitch{--fg:var(--surface);--fg-muted:var(--dark-muted);--focus-color:var(--lime);background:var(--carbon);background-image:none;color:var(--surface)}
.portal-pitch .pp-brand a{display:block;width:184px;height:var(--touch-min);font-size:0;color:transparent;
  background:url(/assets/identity/innovadata-primary.svg) no-repeat left center/contain}
.portal-pitch h2{font-family:var(--font-display);font-weight:700;font-size:var(--text-page);line-height:var(--lh-page);color:var(--surface)}
.portal-pitch .lede,.pp-feat span{color:var(--dark-muted)}
.pp-feat b{color:var(--surface);font-weight:500}
.pp-feat .ic{flex:0 0 12px;height:12px;margin-top:7px;font-size:0;border-radius:0;background:var(--lime);clip-path:polygon(0 0,100% 100%,0 100%)}
.pp-trust{color:var(--lime);font-weight:500}

/* ---- API docs (api-docs.html carries its own layout) -------------------- */
.topbar > a:first-child{display:flex;align-items:center;min-height:var(--touch-min)}
/* code panels on Carbon: keys Lime, strings Verdite, comments Dark-muted (all over 4.5:1) */
:root{--code-bg:var(--carbon);--code-bg2:var(--dark-surface);--code-text:var(--surface);--code-key:var(--lime);--code-str:var(--verdite)}
.code .c,.code b,.resp .c{color:var(--dark-muted)}
.topbar{background:var(--surface);backdrop-filter:none;border-bottom:var(--rule) solid var(--border)}
/* Display stays the page's own (it hides the Swagger links on phones and turns
   the section list into a strip below 1081 px); only the targets grow. */
.topbar a.pill{min-height:var(--touch-min);border-radius:var(--radius-control);color:var(--carbon);font-weight:500;font-size:var(--text-label)}
@media(min-width:561px){.topbar a.pill{display:inline-flex;align-items:center}}
.side a{min-height:var(--touch-min);border-radius:var(--radius-control);color:var(--carbon);align-items:center}
@media(min-width:1081px){.side a{display:flex}}
@media(max-width:1080px){.side a{display:inline-flex}}
/* Phones: logo, key button and language switch need two rows at 44 px; the
   page's own --sticky offsets the section strip below the taller bar. */
@media(max-width:560px){:root{--sticky:108px}.topbar{flex-wrap:wrap;align-content:center;row-gap:var(--s2);padding-block:var(--s2)}
  .topbar > span:not(.sp){display:none}.topbar img{height:22px;width:auto}}
.side a.active{background:var(--selection);color:var(--carbon);font-weight:500}
.side .grp,.code .label{font-size:var(--text-label);font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.prose h1{font-family:var(--font-display);font-weight:700;font-size:var(--text-page);line-height:var(--lh-page);letter-spacing:var(--tracking-display)}
.prose h2{font-size:var(--text-section);line-height:var(--lh-section);font-weight:500;letter-spacing:0}
.prose h3{font-size:var(--text-lead);line-height:var(--lh-sub);font-weight:500}
.prose .lead{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--muted)}
.callout{background:var(--selection);border:var(--rule) solid var(--border);border-left:3px solid var(--carbon);border-radius:var(--radius-control)}
.badge.free,.badge.metered{border-radius:var(--radius-control);font-size:var(--text-label);font-weight:500}