@font-face { font-family: "Quicksand"; font-weight: 500; font-style: normal; font-display: swap; src: url("../vendor/fonts/quicksand-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 600; font-style: normal; font-display: swap; src: url("../vendor/fonts/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-style: normal; font-display: swap; src: url("../vendor/fonts/quicksand-latin-700-normal.woff2") format("woff2"); }
/* PROTOTYPE: Zanetify website palette. Measured from zanetify.com: buttons #023eaf, 4px radius, Quicksand 700; deep navy #022674; logo navy #00215d; page tint #f5f8fa. */
/* Zanetify Client Portal. Brand tokens are placeholders: swap the values in :root to match the official palette. */
:root {
  --ink: #0b1a3a; --ink-2: #33456b; --muted: #55638a;
  --bg: #f5f8fa; --surface: #ffffff; --line: #d9e1ee; --line-2: #eaeff7;
  --brand: #023eaf; --brand-2: #1a56c9; --brand-ink: #ffffff; --brand-soft: #e7eefb;
  --side: #022674; --side-ink: #dbe6fb; --side-muted: #a7bde6; --side-active: #0a3a94; --side-accent: #7fb0ff;
  --ok: #1d7a4d; --ok-soft: #e2f4ea; --warn: #9a5b00; --warn-soft: #fdf0d9; --bad: #b3261e; --bad-soft: #fbe4e2; --info: #1e5aa8; --info-soft: #e3edfa;
  --r-critical: #6f0f24; --r-high: #c8421a; --r-medium: #e9ae1c; --r-low: #2c7a5c; --r-edge: rgba(11,26,58,.6);
  --radius: 8px; --shadow: 0 1px 2px rgba(13,27,42,.06), 0 4px 14px rgba(13,27,42,.05);
  --font: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9efff; --ink-2: #c3d0ee; --muted: #94a5cc; --bg: #060f24; --surface: #0c1a3a; --line: #1f3366; --line-2: #14244d;
    --brand: #6ea3ff; --brand-2: #92bbff; --brand-ink: #03153f; --brand-soft: #0e2352;
    --side: #040c24; --side-active: #0d2159;
    --ok: #55c58a; --ok-soft: #12301f; --warn: #f0b24d; --warn-soft: #33250c; --bad: #ff8a80; --bad-soft: #3a1714; --info: #7db4ff; --info-soft: #12253f;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 650; margin-bottom: 10px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; border-radius: 6px; }
p { margin: 0 0 10px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; } .prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 13px; }
.ic { width: 18px; height: 18px; flex: none; } .folder-ic { color: var(--brand); } .file-ic { color: var(--muted); }

/* layout */
#app { min-height: 100%; display: grid; grid-template-columns: 264px 1fr; }
.side { background: var(--side); color: var(--side-ink); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 6px; }
.brand strong { display: block; color: #fff; font-family: var(--display); font-size: 19px; letter-spacing: .01em; }
.brand small { color: var(--side-muted); font-size: 12px; }
.mark { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: #00215d; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 22px; display: grid; place-items: center; }
.mark.big { width: 56px; height: 56px; font-size: 32px; margin-bottom: 14px; }
.switcher select { width: 100%; background: var(--side-active); color: #fff; border: 1px solid #2a58b8; border-radius: 6px; padding: 9px 10px; font: inherit; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--side-ink); font-weight: 500; }
.nav a:hover { background: var(--side-active); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--side-active); color: #fff; box-shadow: inset 3px 0 0 var(--side-accent); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.me { display: flex; gap: 10px; align-items: center; } .me-name { color: #fff; font-weight: 600; font-size: 14px; } .me small { color: var(--side-muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.side .avatar { background: #0a3a94; color: #dbe6fb; }
.demo-pill { align-self: flex-start; background: #ffe9a8; color: #4a3500; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.main { padding: 28px 36px 60px; min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .page.narrow { max-width: 820px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pagehead h1:focus { outline: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: 12px; color: var(--brand); font-weight: 700; margin: 0 0 4px; }
.loading { display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--muted); padding: 80px 0; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } * { scroll-behavior: auto !important; } }

/* cards & grid */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; } .err-card { border-color: var(--bad); }
.cardhead { display: flex; justify-content: space-between; align-items: baseline; } .cardhead h2 { margin-bottom: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lead { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); box-shadow: var(--shadow); }
.kpi:hover { text-decoration: none; border-color: var(--brand); }
.kpi-n { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1; } .kpi-l { color: var(--muted); font-size: 13px; margin-top: 6px; }
.kpi.warn .kpi-n { color: var(--warn); } .kpi.bad .kpi-n { color: var(--bad); } .kpi.ok .kpi-n { color: var(--ok); }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 14px 0; } .dl dt { color: var(--muted); } .dl dd { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; }
.chip.sm { font-size: 11px; padding: 0 8px; } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); }
.btnchip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; font-size: 13px; padding: 5px 14px; }
.btnchip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.contacts { display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 14px; }
.contact { display: flex; gap: 10px; } .contact small { display: block; color: var(--muted); }

/* risk + timeline */
.riskbar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--line-2); }
.riskbar span { min-width: 6px; } .r-critical { background: var(--r-critical); } .r-high { background: var(--r-high); } .r-medium { background: var(--r-medium); } .r-low { background: var(--r-low); }
.legend { list-style: none; display: flex; gap: 16px; padding: 0; margin: 10px 0; flex-wrap: wrap; text-transform: capitalize; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); margin-top: 3px; flex: none; position: relative; z-index: 1; }
.m-done .dot { background: var(--ok); border-color: var(--ok); } .m-active .dot { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 4px var(--brand-soft); }
.timeline small { display: block; color: var(--muted); }

/* lists */
.mini { list-style: none; margin: 0; padding: 0; } .mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.mini li:first-child { border-top: 0; } .mini a, .mini .linklike { display: block; text-align: left; color: var(--ink); } .mini small { display: block; color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-align: left; } .linklike:hover { text-decoration: underline; }
.badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.s-open, .s-returned { background: var(--warn-soft); color: var(--warn); } .s-submitted { background: var(--info-soft); color: var(--info); } .s-accepted { background: var(--ok-soft); color: var(--ok); } .s-closed { background: var(--line-2); color: var(--muted); }
.prio { font-size: 12px; text-transform: capitalize; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); }
.p-high { border-color: var(--bad); color: var(--bad); }
.reqlist { display: flex; flex-direction: column; gap: 10px; }
.req { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; color: var(--ink); box-shadow: var(--shadow); }
.req:hover { text-decoration: none; border-color: var(--brand); } .req small { display: block; color: var(--muted); }
.req-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .due { color: var(--muted); font-size: 13px; } .due.late { color: var(--bad); font-weight: 700; }

/* docs table */
.tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; }
.tbl .nm { display: flex; gap: 10px; align-items: center; font-weight: 500; overflow-wrap: anywhere; } .act { text-align: right; white-space: nowrap; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.icon-btn { background: none; border: 0; padding: 6px; border-radius: 8px; color: var(--ink-2); cursor: pointer; } .icon-btn:hover { background: var(--line-2); }
.search, .field input, .field textarea, .field select, .composer textarea, .page textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; width: 100%; }
.search { width: 220px; }
.uploader { display: flex; flex-direction: column; gap: 8px; }
.dropzone { display: flex; gap: 14px; align-items: center; border: 2px dashed var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); cursor: pointer; color: var(--ink-2); }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); } .dropzone small { display: block; color: var(--muted); }
.uplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uplist li { display: grid; grid-template-columns: 1fr auto 120px auto; gap: 12px; align-items: center; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.uplist .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uplist .bad { border-color: var(--bad); } .uplist .bad .muted { color: var(--bad); }
.bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .15s; }
.files { list-style: none; margin: 0 0 12px; padding: 0; } .files li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; } .files small { color: var(--muted); margin-left: auto; }

/* thread & messages */
.thread { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.thread li { background: var(--bg); border-radius: 10px; padding: 10px 14px; } .thread li.staff { background: var(--brand-soft); } .who { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .who small { color: var(--muted); } .thread p, .msg p { margin: 4px 0 0; }
.chatpage { height: calc(100vh - 90px); } .msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 240px; }
.msg { max-width: 78%; background: var(--bg); border-radius: 14px 14px 14px 4px; padding: 10px 14px; align-self: flex-start; } .msg.staff { background: var(--brand-soft); }
.msg.mine { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-radius: 14px 14px 4px 14px; } .msg.mine small, .msg.mine .chip { color: inherit; opacity: .85; } .msg.mine .chip { background: rgba(255,255,255,.2); }
.composer { display: flex; gap: 10px; align-items: flex-end; } .composer textarea { resize: vertical; }

/* buttons, forms, modal, toasts */
.btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; font: inherit; font-weight: 600; border-radius: 10px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn:hover { border-color: var(--brand); } .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.primary:hover { background: var(--brand-2); }
.btn.ghost { background: transparent; } .btn.sm { padding: 6px 12px; font-size: 13px; } .btn.lg { padding: 13px 22px; font-size: 16px; }
.side .btn.ghost { color: var(--side-ink); border-color: #2a58b8; }
.row { display: flex; gap: 12px; align-items: center; } .row.end { justify-content: flex-end; } .row.wrap { flex-wrap: wrap; } .row > .field { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 5px; } .lbl { font-weight: 600; font-size: 13px; } .hint { color: var(--muted); font-size: 12px; }
.form-err { color: var(--bad); min-height: 1em; margin: 0; }
dialog.modal { border: 0; border-radius: 16px; padding: 24px; width: min(560px, 92vw); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.modal::backdrop { background: rgba(7,16,26,.55); }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: 360px; } .toast.err { background: var(--bad); color: #fff; }
.clientgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.clientcard { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: var(--ink); } .clientcard:hover { border-color: var(--brand); } .clientcard small { color: var(--muted); }
.signin { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% -10%, var(--brand-soft), transparent), var(--bg); grid-column: 1 / -1; padding: 20px; }
.signin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 40px; max-width: 460px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; gap: 10px; }
  .nav { flex-direction: row; flex-wrap: wrap; } .nav a span { display: none; } .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; } .me > div:last-child { display: none; }
  .main { padding: 18px 16px 50px; } .grid2, .kpis { grid-template-columns: 1fr 1fr; } .hide-s { display: none; } .chatpage { height: auto; } .msg { max-width: 92%; }
}
@media (max-width: 560px) { .grid2, .kpis { grid-template-columns: 1fr; } .dl { grid-template-columns: 1fr; } .search { width: 100%; } h1 { font-size: 24px; } .uplist li { grid-template-columns: 1fr auto; } }

/* ===== v2 additions ===== */
.nav a { position: relative; }
.nbadge { margin-left: auto; min-width: 20px; padding: 0 6px; height: 20px; border-radius: 10px; background: #fff; color: #022674; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.nbadge[hidden] { display: none; }
.trustlink { display: flex; gap: 8px; align-items: center; color: var(--side-ink); font-size: 13px; }
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius); font-weight: 500; border: 1px solid; }
.banner:hover { text-decoration: none; filter: brightness(.97); }
.banner.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.idle-banner { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; display: flex; gap: 14px; align-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.35); }

.trend { margin: 6px 0 0; } .trendsvg { width: 100%; height: auto; max-height: 180px; display: block; }
.trendsvg text { font-size: 11px; fill: var(--muted); }
.ln { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .ln-all { stroke: var(--muted); } .ln-hi { stroke: var(--r-high); }
.dot-all { fill: var(--muted); } .dot-hi { fill: var(--r-high); }
.trend figcaption { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.lg::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-all::before { background: var(--muted); } .lg-hi::before { background: var(--r-high); }
.feed, .toplist, .plain { margin: 0; padding: 0; list-style: none; }
.feed li { border-top: 1px solid var(--line-2); } .feed li:first-child { border-top: 0; }
.feed a { display: block; padding: 10px 0; color: var(--ink); } .feed small { display: block; color: var(--muted); }
.toplist { counter-reset: t; } .toplist li { counter-increment: t; display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.toplist li::before { content: counter(t); width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.toplist small, .blk { display: block; }
.plain { display: flex; flex-direction: column; gap: 8px; } .plain li { padding-left: 18px; position: relative; } .plain li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.h2like { font-size: 18px; font-family: var(--font); font-weight: 650; margin-bottom: 8px; }
.cardhead.pad { padding: 16px 20px 0; } .kpis.in-card { grid-template-columns: repeat(4, 1fr); }
.dl.tight { margin: 6px 0; grid-template-columns: 110px 1fr; }
.sep { width: 1px; height: 22px; background: var(--line); }
.linked { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); margin-top: 10px; }

/* ratings + heat map */
.rate { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; color: #fff; }
.rate.rt-critical { background: var(--r-critical); } .rate.rt-high { background: var(--r-high); } .rate.rt-medium { background: var(--r-medium); color: #1c1400; } .rate.rt-low { background: var(--r-low); }
.grid-heat { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; }
.heat { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.heat-row { display: grid; grid-template-columns: 28px repeat(5, 1fr); gap: 4px; align-items: center; }
.heat-ax { font-size: 12px; color: var(--muted); text-align: center; font-weight: 600; }
.heat-cell { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; color: #fff; opacity: .88; }
.heat-cell.rt-critical { background: var(--r-critical); } .heat-cell.rt-high { background: var(--r-high); } .heat-cell.rt-medium { background: var(--r-medium); color: #1c1400; } .heat-cell.rt-low { background: var(--r-low); }
.heat-cell:hover { opacity: 1; } .heat-cell.on { opacity: 1; border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.tblscroll { overflow-x: auto; } .tblscroll .tbl { min-width: 640px; }
.detail td { background: var(--bg); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 4px 0; } .detail-grid p { margin: 4px 0 0; }
.searchbox { position: relative; display: flex; align-items: center; } .searchbox .ic { position: absolute; left: 10px; color: var(--muted); pointer-events: none; } .searchbox input { padding-left: 34px; min-width: 240px; }
.chk { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.kind { background: var(--info-soft); color: var(--info); }
.tpl-items { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; }
.tpl-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line-2); cursor: pointer; } .tpl-item:first-child { border-top: 0; } .tpl-item small { display: block; color: var(--muted); }
.modal.wide, dialog.modal.wide { width: min(720px, 94vw); }
.req-main { min-width: 0; }
.s-in-progress { background: var(--info-soft); color: var(--info); } .s-on-track, .s-done { background: var(--ok-soft); color: var(--ok); }
.printonly { display: none; }
@media (max-width: 900px) { .grid-heat { grid-template-columns: 1fr; } .kpis.in-card { grid-template-columns: 1fr 1fr; } }

@media print {
  .side, .nav, .noprint-actions, .btn, #toasts, .idle-banner, .skip { display: none !important; }
  #app { display: block; } .main { padding: 0; } body { background: #fff; color: #000; font-size: 12pt; }
  .card, .kpi { box-shadow: none; break-inside: avoid; } .printonly { display: block; }
  .page { max-width: none; } a { color: inherit; }
}
.mono { white-space: nowrap; } .tbl td { overflow-wrap: anywhere; } .tbl td:nth-child(4) { text-transform: capitalize; }

/* ===== prototype: Zanetify website look ===== */
body { font-weight: 500; }
h1, h2, h3, .kpi-n, .lead, .brand strong { font-family: var(--display); font-weight: 700; }
h1 { letter-spacing: 0; font-size: 28px; } h3 { font-weight: 700; }
.btn { border-radius: 4px; font-weight: 700; } .btn.lg { font-size: 16px; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.search, .field input, .field textarea, .field select, .composer textarea, .page textarea, .switcher select, .searchbox input { border-radius: 4px; }
.mark { border-radius: 50%; } .brand strong { letter-spacing: .14em; text-transform: uppercase; font-size: 17px; }
.brand small { letter-spacing: .04em; }
.signin-card .mark.big { background: #00215d; color: #fff; }
.signin { background: linear-gradient(160deg, #022674 0%, #00215d 55%, #001752 100%); }
.signin-card { border-radius: 8px; border-top: 4px solid var(--brand); }
.nav a { border-radius: 4px; } .nav a { font-weight: 600; }
.eyebrow { font-weight: 700; letter-spacing: .12em; }
dialog.modal { border-radius: 8px; } .chip, .badge, .btnchip { font-weight: 700; }
.banner { border-radius: 4px; }
@media (prefers-color-scheme: dark) { .signin-card .mark.big { background: #fff; color: #00215d; } .signin-card { border-top-color: var(--brand); } }

/* ===== prototype round 2: cleaner ===== */
.card, .kpi, .req { box-shadow: none; border-color: var(--line); }
.kpi:hover, .req:hover { box-shadow: 0 2px 10px rgba(2,38,116,.08); }
/* headline numbers: neutral by default; colour only where action is needed */
.kpi-n { color: var(--ink); font-size: 32px; }
.kpi.bad .kpi-n { color: var(--bad); } .kpi.warn .kpi-n { color: var(--ink); } .kpi.ok .kpi-n { color: var(--ink); }
.kpi.warn, .kpi.bad { border-left: 3px solid currentColor; } .kpi.warn { color: var(--warn); } .kpi.bad { color: var(--bad); }
.kpi.warn .kpi-l, .kpi.bad .kpi-l { color: var(--muted); }
/* no tall-card gaps: columns size to their own content */
.grid2 { align-items: start; }
/* calmer banner */
.banner { padding: 10px 14px; font-weight: 600; font-size: 14px; }
.banner span { flex: 1; }
.pagehead { padding-bottom: 4px; }
.page { gap: 16px; }
h2 { font-size: 16px; }
.tbl th { background: transparent; }
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 14px; } .kpi-n { font-size: 26px; } .kpi-l { font-size: 12px; }
  .main { padding: 14px 14px 40px; } .card { padding: 16px; }
  .side { padding: 10px 12px; } .brand small { display: none; }
  .nav a { padding: 9px 11px; }
}

.banner .go { flex: none; font-weight: 700; text-decoration: underline; }

/* ===== round 3: risk colours keep red/orange/amber/green but never rely on colour alone ===== */
/* 1) lightness steps: critical (darkest) > high > medium (lightest) > low; each shape gets a dark edge so graphics keep 3:1 against the card */
.riskbar span, .legend i, .heat-cell { box-shadow: inset 0 0 0 1px var(--r-edge); }
.riskbar { background: var(--line); gap: 3px; height: 18px; }
/* 2) patterns: critical solid, high diagonal stripes, medium dots, low solid lighter edge */
.riskbar .r-high, .legend .r-high, .heat-cell.rt-high { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px); }
.riskbar .r-medium, .legend .r-medium, .heat-cell.rt-medium { background-image: radial-gradient(rgba(11,26,58,.45) 1.2px, transparent 1.5px); background-size: 7px 7px; }
.legend i { width: 14px; height: 14px; border-radius: 3px; }
/* 3) heat cells carry the rating letter (C/H/M/L) and the count */
.heat-cell { position: relative; display: grid; place-items: center; }
.heat-cell .hc-l { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
.heat-cell .hc-n { font-size: 16px; font-weight: 700; }
.heat-cell.rt-medium { color: #1c1400; }
@media (prefers-color-scheme: dark) { :root { --r-edge: rgba(255,255,255,.55); } }
/* 4) typography: Quicksand for brand voice; plain system sans for dense data and small text */
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; }
h1, h2, h3, .lead, .kpi-n, .brand strong, .btn, .nav a, .eyebrow, .chip, .badge, .btnchip, .mark, .pagehead, .cardhead h2, .signin-card, dialog.modal h2 { font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif; }
.tbl, .tbl td, .tbl th, .mono, .small, small, .muted, .field input, .field textarea, .field select, .search, .composer textarea, .msg, .thread, .files, .mini, .feed, .req small { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.tbl td, .kpi-n, .due, .usize { font-variant-numeric: tabular-nums; }
.dl, .dl dd, .dl dt { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* 5) one loud blue per page: chips are quiet neutrals (status chips keep their colour) */
.chip { background: var(--line-2); color: var(--ink-2); }
.chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.kind { background: var(--info-soft); color: var(--info); }
.msg.staff .chip, .thread li.staff .chip { background: rgba(2,62,175,.1); }
.avatar { background: var(--line-2); color: var(--ink-2); }
.eyebrow { color: var(--ink-2); }

/* round 3 fixes */
.rate, .badge, .chip, .prio { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.tbl td:nth-child(3) { min-width: 104px; }
.heat-cell.rt-high, .heat-cell.rt-critical, .heat-cell.rt-low { color: #fff; }
.heat-cell .hc-n:not(:empty) { min-width: 22px; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,.42); color: #fff; line-height: 1.3; }
.heat-cell.rt-medium .hc-n:not(:empty) { background: rgba(255,255,255,.78); color: #1c1400; }
.heat-cell.rt-high { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 3px, transparent 3px 7px); }

/* ===== official logo mark (extracted from the supplied logo file) ===== */
.mark, .mark.big, .signin-card .mark.big { background: url("../assets/zanetify-mark-256.png") center / cover no-repeat; color: transparent; font-size: 0; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .signin-card .mark.big { background: url("../assets/zanetify-mark-256.png") center / cover no-repeat; } }
/* sign-in card is white: seat the mark on the logo navy so the white disc stays visible */
.signin-card .mark.big, .signin-card .mark.big { width: 64px; height: 64px; background: url("../assets/zanetify-mark-256.png") center / 80% no-repeat, #00215d; border-radius: 50%; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .signin-card .mark.big { background: url("../assets/zanetify-mark-256.png") center / 80% no-repeat, #00215d; } }