/*
 * printIQ look kit
 *
 * Makes the prototypes read as printIQ's own web app. Every value here was read off the
 * live printIQ web app (computed styles and screenshots of the menu bar, the Power BI
 * report list and an open report, the All Jobs, Quotes and Customers boards, the Izenda
 * report list) on 8 Oct 2026, or out of printIQ's Power BI theme (themes/printIQ-Green.json,
 * themes/tokens.json reportHeader). PROTOTYPES.md, section Look, says what each token is.
 *
 * Font: Nunito Sans, every printIQ prototype (Sam, 8 Oct 2026). printIQ itself draws in
 * Arial and Roboto; we keep its colours, sizes and shapes and set them in Nunito Sans.
 *
 * Load order: after the page's own <style>. The report pages (.sheet) are styled in the
 * page's own #pagecss, not here, because that CSS is what the server PDF renders with.
 */

:root {
  /* type */
  --piq-font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* menu bar (.main-menu) */
  --piq-nav: #2E2D35;            /* menu bar fill */
  --piq-nav-2: #232228;          /* one step darker, for strips under it */
  --piq-nav-ink: #F9FAFA;        /* menu tab text */
  --piq-nav-rule: #01BBCF;       /* teal line under the menu on hero pages */
  --piq-go: #02C386;             /* Create Order button, page title badge, rule above a board */
  --piq-go-deep: #02A874;        /* hover on the go colour */
  --piq-timer: #DA4F49;          /* clock-in button */

  /* panels and toolbars (.iq-panel-header, .iq-btn) */
  --piq-panel-head: #FAFAFA;     /* toolbar strip above a report */
  --piq-rule: #DDDDDD;           /* panel and input edges */
  --piq-btn: #F0F0F0;            /* toolbar button fill */
  --piq-btn-hover: #E6E6E6;
  --piq-btn-ink: #4A89DC;        /* toolbar button text and icons */
  --piq-btn-ink-deep: #3B73BD;
  --piq-btn-edge: rgba(0,0,0,.1);
  --piq-btn-edge-low: rgba(0,0,0,.15);
  --piq-clock-edge: #4C4C4C;     /* the clock box, top right */

  /* left report tree (.iq-tree) */
  --piq-left: #F5F5F5;           /* column behind the tree */
  --piq-tree: #FFFFFF;
  --piq-tree-edge: #E5E5E5;
  --piq-tree-ink: #333333;
  --piq-tree-count: #AAAAAA;     /* "(24)" after a folder */
  --piq-tree-icon: #999999;
  --piq-select: #D9EDF7;         /* selected report */
  --piq-select-ring: rgba(74,137,220,.62);

  /* report canvas (Power BI pane) */
  --piq-canvas: #F7F8FA;
  --piq-canvas-dot: rgba(22,32,43,.07);

  /* boards: grids and status chips (.WFTable, .navfilters) */
  --piq-grid: #4DAE4D;           /* grid header fill */
  --piq-grid-edge: #449A44;
  --piq-grid-ink: #E9F4E9;       /* grid header text */
  --piq-cell-ink: #5C5C5C;       /* grid cell text */
  --piq-key: #449A44;            /* job, quote and customer numbers */
  --piq-chip: #DEF0D8;           /* selected status chip */
  --piq-input-ink: #555555;
  --piq-focus: #66AFE9;

  /* report pages (Power BI standard report theme) */
  --piq-report-green: #28A03C;   /* the line under a report title */
  --piq-report-ink: #333333;     /* report title */
  --piq-report-head: #FAFAFA;    /* table header row */
  --piq-report-head-ink: #24252B;
  --piq-report-line: #E3E8EE;    /* row rules */

  /* neutrals */
  --piq-ink: #333333;
  --piq-ink-2: #5C5C5C;
  --piq-muted: #999999;

  /* the page's own names, re-pointed */
  --display: var(--piq-font);
  --body: var(--piq-font);
  --stage: var(--piq-nav);
  --stage-2: var(--piq-nav-2);
  --iq: var(--piq-grid);
  --iq-deep: var(--piq-key);
  --iq-dim: rgba(77,174,77,.16);
  --ground: var(--piq-canvas);
  --line: var(--piq-rule);
  --line-2: var(--piq-tree-edge);
  --ink: var(--piq-ink);
  --slate: var(--piq-ink-2);
  --muted: var(--piq-muted);
  --good: var(--piq-key);
}

body, button, input, select, textarea { font-family: var(--piq-font); }
.mono, .tok, .menu .mi small, .ptool .bound b, .fv > button .vn, .fv li .fn, .selcard .sh small,
.fd .tl span, .bindfx .bx small, .conn, .hood .view, .hood pre { font-family: var(--piq-font) !important; }

/* ── Components: reusable printIQ pieces ─────────────────────────────────── */
.piq-btn, .btn, .zoom, .pill, .act, .tabs button {
  background: var(--piq-btn); color: var(--piq-btn-ink);
  border: 1px solid var(--piq-btn-edge); border-bottom-color: var(--piq-btn-edge-low);
  border-radius: 3px; font: 400 13px/1 var(--piq-font); box-shadow: none;
}
.piq-btn:hover, .btn:hover, .act:hover { background: var(--piq-btn-hover); color: var(--piq-btn-ink-deep); border-color: var(--piq-btn-edge); border-bottom-color: var(--piq-btn-edge-low); transform: none; box-shadow: none; }
.btn svg.i, .tabs button svg.i { color: var(--piq-btn-ink); }
.piq-go, .btn.primary, .btn-hero, .act.primary, .btn.good {
  background: var(--piq-go); color: #fff; border: 0; border-radius: 5px; font-weight: 600; box-shadow: none;
}
.piq-go:hover, .btn.primary:hover, .btn-hero:hover, .act.primary:hover { background: var(--piq-go-deep); color: #fff; box-shadow: none; transform: none; }
.btn.primary svg.i, .btn.good svg.i { color: #fff; }
/* The report toolbar draws Print and PDF as plain toolbar buttons, so ours does too. */
.xp .btn.primary { background: var(--piq-btn); color: var(--piq-btn-ink); border: 1px solid var(--piq-btn-edge); border-bottom-color: var(--piq-btn-edge-low); border-radius: 3px; font-weight: 400; }
.xp .btn.primary svg.i { color: var(--piq-btn-ink); }
.xp .btn.primary:hover { background: var(--piq-btn-hover); color: var(--piq-btn-ink-deep); }
.btn { padding: 10px 15px; }
.btn.sm { padding: 7px 10px; font-size: 12px; border-radius: 3px; }

.piq-input, .inp, .search, .recips {
  border: 1px solid var(--piq-rule); border-radius: 4px; background: #fff; color: var(--piq-input-ink); font-family: var(--piq-font);
}
.inp { font-size: 13px; padding: 9px 10px; }
.inp:focus, .search:focus-within, .recips:focus-within { border-color: var(--piq-focus); box-shadow: 0 0 8px rgba(102,175,233,.6); background: #fff; }
select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E"); }

/* The clock box, top right of a report: white, 2px charcoal edge, small bold type. */
.piq-clock, .vchip {
  background: #fff; border: 2px solid var(--piq-clock-edge); border-radius: 0; color: var(--piq-clock-edge);
  font: 700 10px/1 var(--piq-font); letter-spacing: 0; text-transform: none; padding: 7px 11px;
}
.vchip.draft { color: #B7791F; } .vchip.rev { color: #4B4FC9; } .vchip.ok { color: var(--piq-btn-ink-deep); } .vchip.pub { color: var(--piq-key); }

/* Status chip, as on the boards. */
.piq-chip, .cc, .filt button {
  background: #fff; color: var(--piq-cell-ink); border: 1px solid var(--piq-chip); border-radius: 4px;
  font: 700 11px/1 var(--piq-font); padding: 7px 10px;
}
.piq-chip.on, .cc.on, .filt button.on { background: var(--piq-chip); border-color: var(--piq-chip); color: var(--piq-key); }

/* Board grid: green header, grey cells, ruled rows. */
.piq-grid th, table.ui th, .rmx th {
  background: var(--piq-grid); color: var(--piq-grid-ink); font: 700 12px/1.3 var(--piq-font); text-transform: none; letter-spacing: 0;
  border-top: 1px solid var(--piq-grid-edge); border-bottom: 0;
}
.piq-grid td, table.ui td { color: var(--piq-cell-ink); border-bottom: 1px solid var(--piq-rule); font-size: 12.5px; }
.tbl-wrap { border: 1px solid var(--piq-rule); border-radius: 0; }

/* Filter tabs, as on the boards: upper case, bold, green line under the open one. */
.piq-tabs button, .dtabs button {
  font: 700 12px/1 var(--piq-font); text-transform: uppercase; letter-spacing: .02em; color: #999;
  border-bottom: 2px solid transparent;
}
.piq-tabs button.on, .dtabs button.on { color: var(--piq-ink); border-bottom-color: var(--piq-grid); }

/* Report title with the green line under it (Power BI standard report header). */
.piq-report-title { font: 700 24px/1.15 var(--piq-font); color: var(--piq-report-ink); padding-bottom: 8px; border-bottom: 3px solid var(--piq-report-green); }

/* Section heading inside a panel. */
.sec h3, .card > h3, .card h3, .bands-h h3 { font: 700 12px/1 var(--piq-font); text-transform: uppercase; letter-spacing: .02em; color: var(--piq-ink); }
.sec h3 svg.i, .card > h3 svg.i { color: var(--piq-btn-ink); }

/* Cards and panels: square-ish, light edge, the soft Power BI card shadow. */
.card, .sc, .gc, .fd, .oc, .packout, .empty-doc, .rows-ctl, .note.box, .kpi, .tile-like {
  border-radius: 4px; border-color: var(--piq-rule); box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
.kpi { background: #fff; border: 1px solid var(--piq-report-line); }
.kpi .l { font: 400 12px/1.3 var(--piq-font); text-transform: none; letter-spacing: 0; color: #666; }
.kpi .n { font-weight: 700; color: var(--piq-report-ink); }
.kpi .n.iq { color: var(--piq-key); }

/* Drop-down menus: Bootstrap 3, as printIQ uses. */
.menu { border-radius: 4px; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.menu .mi { border-radius: 3px; }
.menu .mi:hover { background: #F5F5F5; }
.menu .mi.on { background: var(--piq-select); }
.menu .mi .ck { color: var(--piq-btn-ink); }
.menu .mh { font: 700 11px/1 var(--piq-font); letter-spacing: .02em; color: #999; }

/* ── Menu bar ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--piq-nav); box-shadow: none; min-height: 46px; padding: 5px 14px; gap: 10px;
}
.topbar .logo, .topbar img { height: 26px; }
.topbar .prod { color: var(--piq-nav-ink); font: 600 13px/1 var(--piq-font); border-left: 1px solid rgba(255,255,255,.16); padding-left: 12px; letter-spacing: 0; }
.topbar .prod span { color: var(--piq-go); }
.pnav { background: none; border: 0; padding: 0; gap: 4px; border-radius: 0; }
.pnav a { color: var(--piq-nav-ink); font: 400 13px/1 var(--piq-font); padding: 11px 26px; border-radius: 5px; }
.pnav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.pnav a.on { background: var(--piq-go); color: #fff; box-shadow: none; }
.tsw-btn { background: none; border: 0; border-radius: 5px; padding: 4px 8px; color: var(--piq-nav-ink); }
.tsw-btn:hover { background: rgba(255,255,255,.08); border: 0; }
.tsw-btn .mk { border-radius: 4px; }
.tsw-btn .tn b { font: 600 13px/1.15 var(--piq-font); }
.tsw-btn .tn small { color: rgba(249,250,250,.55); }
.conn { border: 0; border-radius: 5px; color: rgba(249,250,250,.72); font-size: 12px; background: rgba(255,255,255,.05); }
.conn .dot { background: var(--piq-go); box-shadow: 0 0 0 3px rgba(2,195,134,.22); }
.conn.flash { animation: none; }
.who-btn { border-radius: 5px; color: var(--piq-nav-ink); }
.who-btn:hover { background: rgba(255,255,255,.08); }
.av { background: none; border: 2px solid var(--piq-nav-ink); color: var(--piq-nav-ink); font: 700 10px/1 var(--piq-font); width: 26px; height: 26px; }
.menu .av { border-color: var(--piq-ink-2); color: var(--piq-ink-2); }
.who-btn .wn b { font: 600 13px/1.2 var(--piq-font); }
.who-btn .wn small { color: rgba(249,250,250,.55); }
.livesw { background: rgba(255,255,255,.05); border: 0; border-radius: 5px; }
.livesw button { color: var(--piq-nav-ink); font: 400 12.5px/1 var(--piq-font); border-radius: 4px; }
.livesw button.on { background: #fff; color: var(--piq-nav); }
.livesw button[data-l="1"].on { background: var(--piq-go); color: #fff; }
.topbar .tenant { color: rgba(249,250,250,.6); font-size: 12.5px; }
.topbar .newq { background: none; border: 0; border-radius: 5px; color: var(--piq-nav-ink); font: 400 13px/1 var(--piq-font); padding: 11px 18px; }
.topbar .newq:hover { background: rgba(255,255,255,.08); border: 0; }

/* ── Toolbar strip (the report's panel header) ───────────────────────────── */
.modebar { background: var(--piq-panel-head); border-bottom: 1px solid var(--piq-rule); padding: 12px 20px; }
.crumb .ci { background: none; color: var(--piq-btn-ink); width: 26px; }
.crumb .cn b { font: 600 16px/1.2 var(--piq-font); color: var(--piq-ink); }
.crumb .cn small { color: var(--piq-muted); }
.tabs { background: none; border: 0; padding: 0; gap: 6px; border-radius: 0; }
.tabs button { padding: 10px 15px; }
.tabs button:hover { background: var(--piq-btn-hover); color: var(--piq-btn-ink-deep); }
.tabs button.on { background: #E1E1E1; color: var(--piq-btn-ink-deep); box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }

/* ── Left report tree ─────────────────────────────────────────────────────── */
.pane.left { background: var(--piq-left); border-right: 1px solid var(--piq-rule); }
.pane.right { border-left: 1px solid var(--piq-rule); }
.lib { padding: 12px 10px 20px; }
.search { padding: 10px 10px; color: #D3D3D3; margin-bottom: 10px; border-radius: 6px; }
.search input { font-size: 13px; color: var(--piq-input-ink); }
.search input::placeholder { color: #AAA; font-style: italic; }
.lib-list { background: var(--piq-tree); border: 1px solid var(--piq-tree-edge); border-radius: 5px; padding: 10px 8px 12px; }
.lg-h {
  font: 400 14px/1.2 var(--piq-font); text-transform: none; letter-spacing: 0; color: var(--piq-tree-ink);
  margin: 10px 4px 2px; padding: 6px 4px 6px 34px; position: relative; justify-content: space-between;
}
.lg-h:first-of-type { margin-top: 0; }
.lg-h::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--piq-tree-icon); border-bottom: 1.5px solid var(--piq-tree-icon); transform: rotate(45deg) scale(.75);
}
.lg-h::after {
  content: ""; position: absolute; left: 15px; top: 50%; width: 15px; height: 13px; margin-top: -7px; background: #8A8A8A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32h117.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224h400c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2.1-32.1l112-192z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32h117.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224h400c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2.1-32.1l112-192z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lg-h span:last-child { color: var(--piq-tree-count); font-size: 14px; }
.lg-h span:last-child::before { content: "("; }
.lg-h span:last-child::after { content: ")"; }
.li { padding: 7px 8px 7px 22px; border-radius: 6px; gap: 9px; }
.li:hover { background: #F5F5F5; }
.li.on { background: var(--piq-select); box-shadow: inset 0 0 0 2px var(--piq-select-ring); }
.li.on::before { display: none; }
.li .lic, .li.on .lic { width: 16px; height: 16px; background: none; color: var(--piq-tree-icon); box-shadow: none; border-radius: 0; }
.li .lic svg.i { width: 14px; height: 14px; }
.li .lin b { font: 400 14px/1.3 var(--piq-font); color: var(--piq-tree-ink); }
.li .lin small { font-size: 11px; color: var(--piq-tree-count); }
.li .tag { font: 700 10px/1 var(--piq-font); text-transform: none; letter-spacing: 0; background: var(--piq-btn); color: var(--piq-btn-ink); border: 1px solid var(--piq-btn-edge); border-radius: 3px; }
.lib-foot { border-top-color: var(--piq-rule); color: var(--piq-ink-2); }

/* ── Report canvas ────────────────────────────────────────────────────────── */
.stagepane { background-color: var(--piq-canvas); background-image: radial-gradient(var(--piq-canvas-dot) 1px, transparent 1px); background-size: 20px 20px; }
.ptool { background: rgba(250,250,250,.96); backdrop-filter: none; border-bottom: 1px solid var(--piq-rule); }
.ptool .bound { color: var(--piq-ink-2); }
.ptool .bound .dot { background: var(--piq-go); }
.pill { padding: 7px 10px; font-size: 12px; color: var(--piq-ink-2); }
.pill b { color: var(--piq-ink); font-weight: 700; }
.pill.pc b { color: var(--piq-key); }
.zoom { overflow: hidden; padding: 0; }
.zoom button { color: var(--piq-btn-ink); font: 400 12px/1 var(--piq-font); padding: 7px 9px; }
.zoom button:hover { background: var(--piq-btn-hover); color: var(--piq-btn-ink-deep); }
.zoom span { font: 700 12px/1 var(--piq-font); color: var(--piq-ink); }
.pages .sheet { box-shadow: 0 1px 3px rgba(0,0,0,.09), 0 2px 10px rgba(0,0,0,.06); border-radius: 0; }

/* ── Right panel: parameters, as Power BI slicers in printIQ ─────────────── */
.side { padding: 6px 18px 30px; }
.sec { border-bottom-color: var(--piq-tree-edge); }
.sec h3 .hint { font: 400 11.5px/1 var(--piq-font); color: var(--piq-muted); }
.field > label, .flabel { font: 400 13px/1.3 var(--piq-font); color: #666; }
.seg { background: var(--piq-btn); border: 1px solid var(--piq-btn-edge); border-radius: 3px; }
.seg button { color: var(--piq-btn-ink); font: 400 12px/1.1 var(--piq-font); border-radius: 2px; }
.seg button.on { background: #fff; color: var(--piq-ink); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sw input:checked + .tg { background: var(--piq-grid); }
.sw { color: var(--piq-ink); }
.cc svg.i { color: var(--piq-key); }
.rows-ctl { background: #fff; border: 1px solid var(--piq-report-line); }
.rows-top .big, .rows-top .pgs b { font-weight: 700; }
.rows-top .pgs b { color: var(--piq-key); }
input[type=range] { accent-color: var(--piq-grid); }
.quick button { border-radius: 3px; background: var(--piq-btn); border: 1px solid var(--piq-btn-edge); color: var(--piq-btn-ink); font: 400 11.5px/1 var(--piq-font); }
.quick button:hover, .quick button.on { background: #E1E1E1; color: var(--piq-btn-ink-deep); border-color: var(--piq-btn-edge); }
.note.box { background: #fff; }

/* Designer */
.band { border-radius: 4px; border-color: var(--piq-rule); }
.band.drop { border-color: var(--piq-grid); box-shadow: 0 0 0 3px rgba(77,174,77,.15); }
.band .bl { background: var(--piq-panel-head); }
.band .bl b { font: 700 10px/1.2 var(--piq-font); letter-spacing: .02em; color: var(--piq-ink-2); }
.band.detail .bl { background: #EEF7EE; }
.band.detail .bl b { color: var(--piq-key); }
.el { border-radius: 3px; }
.el.col { border-color: #CFE6CF; background: #F6FBF6; }
.el.sel, .el.col.sel { border-color: var(--piq-grid); background: #EAF5EA; color: var(--piq-key); box-shadow: 0 0 0 3px rgba(77,174,77,.14); }
.el:hover { border-color: var(--piq-grid); color: var(--piq-key); }
.fv { border-radius: 4px; border-color: var(--piq-rule); }
.fv > button { background: var(--piq-panel-head); }
.fv > button .vn, .fv li .fa { color: var(--piq-key); }
.fv li .fa:hover { background: #EAF5EA; }
.fv li .ft { font: 700 9px/1 var(--piq-font); }
.selcard { border-color: #CFE6CF; background: #F6FBF6; border-radius: 4px; }
.selcard .sh small { color: var(--piq-key); border-color: #CFE6CF; }
.ver.rev .vd, .ver.ok .vd { border-color: var(--piq-btn-ink); color: var(--piq-btn-ink-deep); }
.ver .va button { color: var(--piq-btn-ink); }
.ver .va button:hover { background: #EEF4FC; }
.designing .sheet [data-el]:hover { outline-color: rgba(77,174,77,.8); }
.designing .sheet th[data-col]:hover { background: rgba(77,174,77,.14) !important; }

/* ── Schedule, compare and the other pages ───────────────────────────────── */
.ph1 { font: 700 26px/1.15 var(--piq-font); letter-spacing: 0; color: var(--piq-ink); }
.oc.on { border-color: var(--piq-grid); background: #F6FBF6; box-shadow: 0 0 0 3px rgba(77,174,77,.1); }
.oc.on b { color: var(--piq-key); }
.tok { background: var(--piq-chip); color: var(--piq-key); border-radius: 3px; }
.summary { background: var(--piq-nav); border-radius: 4px; }
.summary::after { background: radial-gradient(circle, rgba(2,195,134,.3), transparent 65%); }
.summary .sk { color: var(--piq-go); font: 700 11px/1 var(--piq-font); }
.summary .st em { color: #7FE0B9; }
.st-chip { font: 700 10.5px/1 var(--piq-font); letter-spacing: 0; text-transform: none; border-radius: 4px; }
.st-chip.sent { background: var(--piq-select); color: var(--piq-btn-ink-deep); }
.st-chip.opened, .st-chip.will { background: var(--piq-chip); color: var(--piq-key); }
.subrow .si, .fd .fh .fi { background: var(--piq-chip); color: var(--piq-key); border-radius: 4px; }
.subrow .burst { background: var(--piq-select); color: var(--piq-btn-ink-deep); }
.chero, .stage {
  background:
    radial-gradient(70% 55% at 22% 0%, rgba(40,160,60,.42), transparent 62%),
    radial-gradient(60% 45% at 80% 105%, rgba(2,195,134,.22), transparent 60%),
    linear-gradient(168deg, #0C2A10 0%, #041006 42%, #010301 100%);
}
.aurora.a { background: radial-gradient(circle, rgba(40,160,60,.5), transparent 65%); }
.aurora.b { background: radial-gradient(circle, rgba(2,195,134,.32), transparent 65%); }
.aurora.c { background: radial-gradient(circle, rgba(148,192,30,.22), transparent 65%); }
.stage-eyebrow, .chero .eb { color: var(--piq-go); font-weight: 700; }
.stage-h1, .chero h1 { font-weight: 800; }
.stage-h1 .grad, .chero h1 .grad { background: linear-gradient(92deg, #02C386, #4DAE4D 55%, #94C01E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-hero { border-radius: 5px; font: 600 15px/1 var(--piq-font); }
.btn-ghost { border-radius: 5px; font: 600 14px/1 var(--piq-font); }
.btn-ghost:hover { border-color: var(--piq-go); background: rgba(2,195,134,.14); }
.chip { border-radius: 5px; }
.chip:hover { border-color: var(--piq-go); background: rgba(2,195,134,.14); }
.stage-badge { font: 700 11px/1 var(--piq-font); color: rgba(249,250,250,.6); }
.ctable th { font: 700 12px/1.3 var(--piq-font); letter-spacing: 0; text-transform: none; }
.ctable th.us, .ctable td.us { background: #F6FBF6; color: inherit; }
.ctable th.us { color: var(--piq-key); }
.ctable td.k { font: 700 13.5px/1.35 var(--piq-font); }
.ctable td .mk.e { background: var(--piq-select); color: var(--piq-btn-ink-deep); }
.sc .n { font-weight: 800; }
.sc.dark, .gc .gi { background: var(--piq-nav); }
.sc.dark .n, .gc .gi { color: var(--piq-go); }
.farrow { color: var(--piq-grid); }
.sh2 { font: 700 20px/1.2 var(--piq-font); letter-spacing: 0; }

/* ── Bottom strip, drawer, dialogs ────────────────────────────────────────── */
.govbar { background: #F0F0F0; color: var(--piq-ink-2); border-top: 1px solid var(--piq-rule); }
.govbar button:hover { background: #E4E4E4; color: var(--piq-ink); }
.govbar svg.i { color: var(--piq-btn-ink); }
.govbar b { color: var(--piq-ink); font-weight: 700; }
.govbar .sep { background: var(--piq-rule); }
.govbar .gr { color: var(--piq-muted); }
.scrim { background: rgba(0,0,0,.45); backdrop-filter: none; }
.drawer { box-shadow: -6px 0 24px rgba(0,0,0,.18); }
.dh-bar, .mhd { background: var(--piq-panel-head); border-bottom-color: var(--piq-rule); }
.dh-bar b, .mhd b { font: 700 17px/1.2 var(--piq-font); }
.dh-bar .x, .mhd .x { background: var(--piq-btn); border: 1px solid var(--piq-btn-edge); border-radius: 3px; color: var(--piq-btn-ink); }
.dh-bar svg.i { color: var(--piq-btn-ink) !important; }
.dtabs { border-bottom-color: var(--piq-rule); }
.dtabs button { padding: 12px 12px 10px; }
.modal { border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,.5); }
.mft { border-top-color: var(--piq-rule); }
.toast { background: var(--piq-nav); border-radius: 4px; }
.toast svg.i { color: var(--piq-go); }
.orbit i { background: var(--piq-go); }
.bindfx .bx, .empty-doc { border-radius: 4px; }
.empty-doc .ei { background: var(--piq-chip); color: var(--piq-key); border-radius: 4px; }
.empty-doc b, .bindfx .bx b { font-weight: 700; }

/* ── Ask (IQ Insight) ─────────────────────────────────────────────────────── */
.stage-ask form { border-radius: 6px; }
.stage-ask form:focus-within { border-color: rgba(2,195,134,.8); box-shadow: 0 0 0 4px rgba(2,195,134,.18); }
.stage-ask button, .composer button { background: var(--piq-go); border-radius: 5px; font: 600 15px/1 var(--piq-font); }
.stage-ask button:hover, .composer button:hover { background: var(--piq-go-deep); box-shadow: none; transform: none; }
.work-grid { width: min(1280px, 100%); }
.msg-user { background: var(--piq-nav); border-radius: 6px 6px 2px 6px; box-shadow: none; }
.msg-ai { border-radius: 4px; border-color: var(--piq-rule); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
.headline { font: 700 19px/1.35 var(--piq-font); letter-spacing: 0; color: var(--piq-ink); }
.narrative { color: #444; }
.chart-title, .tbl-title { font: 700 12px/1 var(--piq-font); text-transform: uppercase; letter-spacing: .02em; color: var(--piq-ink); }
.chart-tip { background: var(--piq-nav); font: 700 11.5px/1.4 var(--piq-font); border-radius: 3px; }
.work-grid th { background: var(--piq-grid); color: var(--piq-grid-ink); font: 700 12px/1.3 var(--piq-font); text-transform: none; letter-spacing: 0; border-bottom: 0; border-top: 1px solid var(--piq-grid-edge); }
.work-grid td { color: var(--piq-cell-ink); border-bottom: 1px solid var(--piq-rule); }
.work-grid td:first-child { color: var(--piq-key); font-weight: 700; }
.act { border-radius: 3px; padding: 9px 14px; }
.act.pinned { background: var(--piq-chip); border-color: var(--piq-chip); color: var(--piq-key); border-radius: 3px; }
.composer form { border-radius: 4px; border-color: var(--piq-rule); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
.composer form:focus-within { border-color: var(--piq-focus); box-shadow: 0 0 8px rgba(102,175,233,.6); }
.composer input { color: var(--piq-input-ink); }
.sub .dot { background: var(--piq-go); box-shadow: 0 0 0 4px rgba(2,195,134,.16); }
.sub .name { font: 600 13px/1.35 var(--piq-font); }
.sub .open { font: 600 12px/1 var(--piq-font); color: var(--piq-btn-ink); }
.hood .k { font: 700 11px/1.3 var(--piq-font); letter-spacing: .02em; color: var(--piq-ink); }
.hood .view { background: var(--piq-chip); color: var(--piq-key); border-radius: 3px; }
.hood pre { border-radius: 3px; border-color: var(--piq-rule); background: var(--piq-panel-head); }
/* The Ask report document wears a printIQ report header: charcoal band, title with the green line. */
.reportlayer { background: rgba(0,0,0,.6); backdrop-filter: none; }
.ract { border-radius: 5px; font: 600 13px/1 var(--piq-font); }
.ract.pdf { background: var(--piq-go); }
.ract.pdf:hover { background: var(--piq-go-deep); box-shadow: none; transform: none; }
.report-doc { border-radius: 4px; }
.rd-band { background: var(--piq-nav); }
.rd-band .rd-prod { color: var(--piq-nav-ink); font: 600 13px/1 var(--piq-font); }
.rd-band .rd-prod span { color: var(--piq-go); }
.rd-rule { height: 3px; background: var(--piq-report-green); }
.rd-head { border-bottom: 3px solid var(--piq-report-green); margin: 0 44px; padding: 30px 0 10px; }
.rd-head h1 { font: 700 26px/1.15 var(--piq-font); letter-spacing: 0; color: var(--piq-report-ink); }
.rd-body th { background: var(--piq-report-head); color: var(--piq-report-head-ink); border-top: 0; border-bottom: 1px solid var(--piq-report-line); }
.rd-body td { color: var(--piq-report-head-ink); border-bottom-color: var(--piq-report-line); }
.rd-body td:first-child { color: var(--piq-report-head-ink); font-weight: 400; }
.rd-foot { border-top-color: var(--piq-report-line); }

@media (max-width: 960px) {
  .lib-list { background: none; border: 0; padding: 0 0 2px; }
  .li { border: 1px solid var(--piq-tree-edge); background: #fff; padding: 6px 10px 6px 8px; }
  .pnav a { padding: 9px 14px; }
  .topbar { padding: 6px 12px; }
}
@media (max-width: 1280px) {
  .pnav a { padding: 11px 16px; }
  .tabs button { padding: 10px 11px; }
}

/* The page art on the Reports landing page, in printIQ's report colours. */
.stage-art .hd { border-bottom-color: #28A03C; }
.stage-art .lg { background: linear-gradient(90deg, #2E2D35 30%, #02C386 30%); }
.stage-art .tt { color: #333333; }
.stage-art .th { background: #FAFAFA; box-shadow: inset 0 -1px 0 #C9D2DB; }
.stage-art .th i { background: #9AA3AD; }
.stage-art .gb { background: #EAF5EC; border-left-color: #28A03C; }
.stage-art .gb i { background: #166223; }
.stage-art .stamp { border-color: rgba(2,195,134,.6); color: rgba(2,195,134,.75); }