:root {
  --navy: #1B3944;
  --teal: #2CD5C4;
  --violet: #6600FF;
  --accent: var(--teal);
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #1b2430;
  --muted: #5b6775;
  --line: #e3e8ee;
  --ok: #1f8a5b;
  --warn: #b7791f;
  --danger: #c0392b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
}
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.topbar img.logo { height: 34px; width: auto; border-radius: 4px; }
.topbar .client { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.topbar .client .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 14px; }
.btn { display: inline-block; border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:hover { text-decoration: none; filter: brightness(0.97); }

.opbar { background: #fff8e6; border-bottom: 1px solid #f1dfae; }
.opbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 16px; font-size: 14px; }
.opbar .tag { background: var(--navy); color: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; }
.opbar select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 14px; max-width: 340px; }
.opbar .now { color: var(--muted); }

.hero { padding: 34px 0 10px; }
.hero h1 { font-size: 28px; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
.hero .accent { display: inline-block; width: 56px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--violet)); margin: 6px 0 12px; }
.hero p { margin: 0; color: var(--muted); max-width: 720px; }
.hero .kind { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 18px 0 30px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; min-height: 130px; position: relative;
  transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 6px 20px rgba(27,57,68,.10); transform: translateY(-1px); text-decoration: none; }
.tile h3 { margin: 0; font-size: 16px; font-weight: 600; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.tile .foot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.badge { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.badge.wired { background: #e4f7ee; color: var(--ok); }
.badge.mockup { background: #eef0ff; color: var(--violet); }
.badge.coming_soon, .badge.needs_tenant { background: #fff3dc; color: var(--warn); }
.tile.coming_soon, .tile.needs_tenant { background: #fbfcfd; border-style: dashed; }
.tile .arrow { position: absolute; right: 14px; top: 14px; color: var(--muted); font-size: 14px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 8px 0 18px; }
.panel h2 { margin: 0 0 8px; font-size: 15px; }
.panel .kv { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.panel .kv b { color: var(--text); font-weight: 600; }
.panel .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.panel .stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.panel .stat .n { font-size: 20px; font-weight: 700; }
.panel .stat .l { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.panel table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.panel th, .panel td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.panel th { color: var(--muted); font-weight: 500; font-size: 13px; text-transform: uppercase; }
.empty { color: var(--muted); font-size: 14px; padding: 30px 0; }
.note { font-size: 14px; color: var(--muted); }

/* Per-case portfolio styling (operator 2026-10-18): IK-IP-managed cases crisp/branded + verified
   (green), so they look more appealing; cases handled by another firm greyed + unverified, with a
   "Manage with IK-IP" take-over control. */
.panel table.portfolio-dates td.sel, .panel table.portfolio-dates th.sel { width: 30px; text-align: center; }
.panel table.portfolio-dates td.sel input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--teal); }
.panel table.portfolio-dates tr.case.managed-ikip { background: linear-gradient(90deg, rgba(44,213,196,.12), rgba(44,213,196,0)); }
.panel table.portfolio-dates tr.case.managed-ikip td { color: var(--text); font-weight: 600; }
.panel table.portfolio-dates tr.case.managed-ikip td.rep { color: var(--navy); }
.panel table.portfolio-dates tr.case.managed-other { background: #fafbfc; color: var(--muted); }
.panel table.portfolio-dates tr.case.managed-other td { color: var(--muted); }
.panel table.portfolio-dates tr.case.managed-other td.rep { font-style: italic; }
.tag-verified { display: inline-block; background: #e4f7ee; color: var(--ok); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag-unverified { display: inline-block; background: #eef0f3; color: var(--muted); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.takeover-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.takeover-bar .note { flex: 1; min-width: 240px; margin: 0; }

/* prosecution-efficiency panel */
#prosecution-panel .peer-line { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
#prosecution-panel .stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
#prosecution-panel table.metrics td .hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.flags { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 6px; }
.flags .flag { font-size: 14px; border-radius: 8px; padding: 7px 10px; border-left: 4px solid var(--line); }
.flags .flag.rag-red { background: #fdecea; border-left-color: var(--danger); color: var(--danger); }
.flags .flag.rag-amber { background: #fff3dc; border-left-color: var(--warn); color: var(--warn); }
.flags .flag.rag-green { background: #e4f7ee; border-left-color: var(--ok); color: var(--ok); }
.rag-chip { border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.rag-chip.rag-green { background: #e4f7ee; color: var(--ok); }
.rag-chip.rag-amber { background: #fff3dc; color: var(--warn); }
.rag-chip.rag-red { background: #fdecea; color: var(--danger); }
.rag-chip.rag-na { background: #eef0f3; color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 18px 0 30px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#install-btn { display: none; }

.login { max-width: 440px; width: 100%; margin: 24px auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.login img.logo { height: 48px; margin-bottom: 12px; border-radius: 6px; }
.login h1 { font-size: 22px; margin: 0 0 4px; }
.login p { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.providers { display: grid; gap: 8px; margin-bottom: 18px; }
.providers .btn { text-align: center; }
.login form { display: flex; gap: 8px; }
.login input[type=email] { flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.error { background: #fdecec; color: #a12d2d; border-radius: 8px; padding: 8px 10px; font-size: 14px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .topbar .wrap { height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .hero h1 { font-size: 22px; }
}

/* Login / offline: centre the card vertically so the viewport has no dead strip. */
main.centre { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; }

/* --- welcome / onboarding --- */
.welcome { padding: 48px 0 40px; }
.welcome-brand { max-width: 760px; margin-bottom: 28px; }
.welcome-brand .kind { display: block; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 14px; }
.welcome-brand h1 { font-size: 36px; margin: 6px 0 4px; letter-spacing: -0.02em; }
.welcome-brand p { color: var(--muted); font-size: 17px; max-width: 640px; }
.welcome-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.card h2 { margin: 0 0 6px; font-size: 20px; }
.card p { color: var(--muted); margin: 0 0 14px; }
.providers { display: grid; gap: 8px; margin-bottom: 14px; }
.btn.provider { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 15px; padding: 10px 14px; }
.btn.provider .plogo { flex: 0 0 20px; }
.btn.provider span { flex: 1; }
.btn.provider em { font-style: normal; font-size: 12px; color: var(--warn); background: #fff3dc; border-radius: 999px; padding: 2px 8px; }
.btn.provider.pending { opacity: .85; }
.login.wide { max-width: 560px; }
form.stack { display: grid; gap: 10px; }
form.stack label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
form.stack input, form.stack select, form.stack textarea { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; color: var(--text); background: #fff; }
form.grid2 { grid-template-columns: 1fr 1fr; }
form.grid2 .span2 { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; }
.ok { background: #e4f7ee; color: var(--ok); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin-bottom: 12px; }
.terms-doc { max-height: 48vh; overflow: auto; }
.terms-doc h1 { font-size: 18px; } .terms-doc h2 { font-size: 16px; margin-top: 14px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .two-col, form.grid2 { grid-template-columns: 1fr; } .welcome-brand h1 { font-size: 28px; } }
.pay-method { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.pay-method h3 { margin: 0 0 6px; font-size: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Demo watermark: "Demo only" diagonally across the page (operator 2026-10-18).
   Shown unless the non-demo flag is set (IKIP_DEMO=0). Non-interactive overlay. */
.demo-watermark { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.demo-watermark span { transform: rotate(-30deg); font-weight: 900; font-size: 6vw; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; color: rgba(110, 110, 110, .15);
  user-select: none; }

/* Operator selector page (3-row chooser) — operator 2026-10-18 */
.chooser { margin-top: 1rem; }
.facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; }
.facet-row .facet-label { font-weight: 700; min-width: 5.5rem; color: var(--muted, #667); }
.chip { border: 1px solid rgba(0,0,0,.15); background: #fff; border-radius: 999px; padding: .3rem .8rem;
  cursor: pointer; font: inherit; }
.chip.active { background: #2CD5C4; border-color: #2CD5C4; color: #06201d; font-weight: 700; }
#chooser-search { flex: 1; min-width: 12rem; padding: .4rem .7rem; border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px; font: inherit; }
.chooser-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; margin: .5rem 0 1.5rem; }
.chooser-item { margin: 0; }
.chooser-item button { width: 100%; text-align: left; background: #fff; border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px; padding: .6rem .8rem; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: .15rem; }
.chooser-item button:hover { border-color: #2CD5C4; box-shadow: 0 1px 6px rgba(44,213,196,.25); }
.chooser-item .ci-name { font-weight: 700; }
.chooser-item .ci-tag { font-size: .8rem; color: var(--muted, #778); text-transform: capitalize; }
form.inline { display: inline; }

/* Lazy panel reveal (progressive enhancement). Only hidden when JS is active (the
   .js class is set by app.js), so no-JS users always see the panels. Heavy
   below-the-fold dashboard panels fade/slide in as they enter the viewport. */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── dashboard widgets: per-widget async load + progress bar (operator 2026-10-18) ── */
.widget .widget-title { margin: 0 0 .6rem; }
.widget-progress { height: 4px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden;
  margin: .4rem 0 .8rem; position: relative; }
.widget-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 999px;
  background: var(--teal, #2CD5C4); animation: widget-indet 1.1s ease-in-out infinite; }
.widget-progress:not(.busy) { display: none; }
@keyframes widget-indet { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .widget-progress span { animation: none; width: 100%; opacity: .5; } }
.actions.next-actions .count { font-weight: 700; color: var(--muted, #667); margin: 0 .3rem; }
/* operator layout editor */
.layout-editor summary { cursor: pointer; font-weight: 700; }
.layout-editor .layout-list { list-style: none; padding: 0; margin: .6rem 0; }
.layout-editor .layout-row { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .35rem .5rem; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; margin: .3rem 0; }
.layout-editor .layout-row .row-move .btn { padding: .1rem .5rem; }
.layout-editor .layout-status { margin-left: .6rem; color: var(--muted, #667); font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .widget-progress { background: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .layout-editor .layout-row { border-color: rgba(255,255,255,.14); }
}

/* ── CLIENT LANDING (operator picked / emulated a client; operator 2026-10-22) ──
   Instant first paint, deduped header tiles, top-5 per category, greyed tool tiles, contacts. */
.landing-hero .pros-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.landing-hero .tier { font-weight: 700; border-radius: 6px; padding: 2px 9px; font-size: .9rem; background: var(--accent); color: #fff; }
.landing-hero .meta { font-size: .9rem; color: var(--muted); }
.landing-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; margin-top: 6px; }
.demoflag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 600; background: #fff3dc; color: #9a6a00; }
.demoflag.ok { background: #e4f7ee; color: var(--ok); }
.demoflag.err { background: #fde8e8; color: #b42318; }
.demoflag.busy { background: #eef0ff; color: var(--violet); }
.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: landing-spin .9s linear infinite; vertical-align: -1px; margin-right: 4px; }
@keyframes landing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.landing-tiles .stat.collecting .n { color: var(--muted); }
.landing-tiles .stat .dots { letter-spacing: 2px; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 14px; }
.landing-cat .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.landing-cat .cat-head h2 { margin: 0 0 6px; }
.landing-cat .cnt, .hero .cnt { font-size: .8rem; font-weight: 700; color: var(--muted); background: #eef0f3; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.landing-cat .btn.more { padding: 4px 10px; font-size: .85rem; white-space: nowrap; }
.landing-cat.is-empty { opacity: .72; }
.landing-items { list-style: none; margin: 4px 0 0; padding: 0; }
/* badge + date on one line, the title on its own full-width line (clamped to 2 lines), detail under it —
   in a 3-column grid a title squeezed beside the date wrapped one word per line (measured 2026-10-22). */
.landing-items .action { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "badge when" "main main" "detail detail"; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.landing-items .action:first-child { border-top: 0; }
.landing-items .badge { grid-area: badge; justify-self: start; background: #eef0f3; color: #30414d; font-size: .72rem; white-space: nowrap; }
.landing-items .main { grid-area: main; font-weight: 600; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.landing-items .when { grid-area: when; white-space: nowrap; font-size: .82rem; color: var(--muted); }
.landing-items .detail { grid-area: detail; font-size: .8rem; color: var(--muted); }
.landing-items .detail a { margin-left: 8px; }
.landing-items .detail a.go { font-weight: 600; }
.landing-items .urgency-overdue .when, .landing-items .urgency-urgent .when { color: #b42318; font-weight: 700; }
.landing-items .urgency-soon .when { color: var(--warn); font-weight: 600; }
.landing-items .urgency-urgent .badge, .landing-items .urgency-overdue .badge { background: #fde8e8; color: #b42318; }
.landing-items .urgency-soon .badge { background: #fff3dc; color: #9a6a00; }
.landing-contact .contact-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.landing-contact address { font-style: normal; line-height: 1.45; }
.landing-contact .contact-list { list-style: none; padding: 0; margin: 0 0 8px; }
.landing-contact .contact-list li { padding: 2px 0; }
.landing-tools .tile.greyed { opacity: .5; filter: grayscale(1); background: #fbfcfd; border-style: dashed; }
.landing-tools .tile.greyed:hover { opacity: .85; }
.note.collecting { color: var(--violet); }
@media (max-width: 640px) { .landing-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-cat .cnt, :root:not([data-theme="light"]) .landing-items .badge { background: rgba(255,255,255,.1); color: #cfe; }
  :root:not([data-theme="light"]) .landing-tools .tile.greyed { background: transparent; }
}