/* Design tokens ported from the prototype (index.html :root). */
:root {
  --navy: #0E2438; --navy2: #16314C; --navy3: #1F466B;
  --gold: #C8A24C; --goldd: #9C7C32; --goldl: #E6CE8E;
  --ink: #16202B; --slate: #566472; --slatel: #616C78;
  --bg: #F5F7F9; --card: #FFFFFF; --line: #E2E7EC; --ice: #D7E2EE;
  --green: #2E7D52; --greenbg: #E6F2EA;
  --amber: #B7791F; --amberbg: #FBF1DD;
  --blue: #37557A; --bluebg: #E8EEF6;
  --teal: #2B6E72; --tealbg: #E2F0F0;
  --wash: #FFFDF6;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.beta-tag {
  font: 700 9px/1 Arial, Helvetica, sans-serif; letter-spacing: .6px; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px;
}

.btn {
  border: none; border-radius: 8px; padding: 10px 16px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover:not(:disabled) { background: var(--goldd); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--slatel); }
.btn-block { width: 100%; }

/* Signed-out screens: the prototype's gate card. */
.authpage {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 70% 25%, var(--navy2), var(--navy));
}
.authcard {
  width: min(340px, 100%); background: var(--card); border-radius: 16px; padding: 34px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center;
}
.authbrand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 28px Georgia, "Times New Roman", serif; color: var(--navy);
}
.authbrand .dot { width: 14px; height: 14px; background: var(--gold); border-radius: 3px; }
.authsub { color: var(--slate); font-size: 13px; margin: 6px 0 20px; }
.authnote { color: var(--slatel); font-size: 12.5px; margin: -12px 0 16px; }
.authform { display: flex; flex-direction: column; gap: 10px; }
.authform input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px;
  font: inherit; font-size: 14px;
}
.authform input:focus { outline: none; border-color: var(--gold); }
.autherr { color: #B23A3A; font-size: 12.5px; margin: 0; }

.authform input.code { text-align: center; letter-spacing: 6px; font-size: 20px; font-variant-numeric: tabular-nums; }
.authhint { color: var(--slatel); font-size: 12px; margin: 2px 0 0; }
.qr { display: flex; justify-content: center; margin: 4px 0 10px; }
.qr svg { width: 180px; height: 180px; }
.authdetails { text-align: left; font-size: 12.5px; color: var(--slate); margin-bottom: 12px; }
.authdetails summary { cursor: pointer; }
.authkey { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; margin: 6px 0 0; }
.codes {
  list-style: none; padding: 12px; margin: 0 0 14px; text-align: left;
  background: var(--wash); border: 1px solid var(--line); border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; columns: 2;
}

.linkbtn {
  background: none; border: none; padding: 0; font: inherit; color: var(--goldd);
  font-weight: 700; cursor: pointer; text-decoration: underline;
}

/* Signed-in shell — sidebar, top bar and cards ported from the prototype. */
.shell { display: flex; min-height: 100vh; }
.side {
  width: 222px; flex: 0 0 222px; background: var(--navy); color: #fff;
  padding: 22px 0; position: sticky; top: 0; height: 100vh;
}
.side .brand { display: flex; align-items: center; gap: 10px; padding: 0 22px 20px; }
.side .brand .name { font: 700 22px Georgia, serif; letter-spacing: .3px; }
.side .beta-tag { color: #AEBCCB; border-color: #33506E; }
.navitem {
  display: flex; align-items: center; gap: 11px; padding: 10px 22px;
  color: #AEBCCB; font-weight: 600; font-size: 13.5px;
  border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.navitem .ic { width: 18px; text-align: center; opacity: .9; }
.navitem.active { color: #fff; background: rgba(200, 162, 76, .12); border-left-color: var(--gold); }
/* Nav the prototype has but this build hasn't earned yet: visible, plainly inert. */
/* These are controls, not prose. Without this the sidebar hands you a text caret
   over a thing you're meant to click, and a drag selects the label. */
.navitem, .mi, .iswitch, .who, .iqtab, .pcard, .candidate { cursor: pointer; user-select: none; }
.navitem.soon { opacity: .45; cursor: default; }
/* Waiting for an issuer to be picked, not waiting to be built. Muted enough to say
   "not yet", legible enough not to read as absent. */
.navitem.noissuer { opacity: .6; cursor: default; }
.soontag {
  margin-left: auto; font: 700 9px/1 Arial, sans-serif; letter-spacing: .5px;
  text-transform: uppercase; color: #93A2B2; border: 1px solid #33506E;
  border-radius: 4px; padding: 3px 4px;
}
.side .foot { position: absolute; bottom: 18px; left: 22px; right: 22px; color: #93A2B2; font-size: 11px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px; background: #fff; border-bottom: 1px solid var(--line);
}
.iswitch { display: flex; align-items: center; gap: 12px; border-radius: 9px; padding: 4px 8px; }
.logo {
  width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--goldd), var(--goldl));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font: 800 15px Georgia, serif;
}
.meta b { font-size: 14px; }
.meta span { display: block; color: var(--slate); font-size: 11.5px; }
.who { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: 12.5px; }
.who .av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy2); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 12px inherit;
}

.content { padding: 24px 28px; flex: 1; }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4px; }
.kick {
  color: var(--goldd); font: 700 11px/1 Arial, sans-serif; letter-spacing: .6px;
  text-transform: uppercase; margin: 0 0 6px;
}
.h-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.sub { color: var(--slate); margin: 0 0 18px; }
.muted { color: var(--slate); }
.small { font-size: 12px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 1px 2px rgba(14, 36, 56, .04); }
.panel { padding: 20px; }
.panel h3 { margin: 0 0 4px; font-size: 18px; }
.panel .ph-sub { color: var(--slate); font-size: 13px; margin: 0 0 16px; }
.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pcard { transition: border-color .15s; }
.issuer { padding: 16px 18px; }
.issuer .head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.issuer .idmeta { min-width: 0; }
.issuer .idmeta b { display: block; font-size: 15px; }
.issuer .badge { margin-left: auto; }
.badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap; letter-spacing: .3px; }
.b-up { background: var(--bluebg); color: var(--blue); }
.b-filed { background: var(--greenbg); color: var(--green); }
.issuer .facts { display: grid; gap: 6px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.kv span:last-child { text-align: right; }
.empty { grid-column: 1 / -1; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--slate); }
.grid input, .grid select {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
}
.grid input:focus, .grid select:focus { outline: none; border-color: var(--gold); }
.grid .wide { grid-column: 1 / -1; }
.grid .check { flex-direction: row; align-items: center; gap: 8px; }
.grid .check input { accent-color: var(--goldd); }
.footnav { display: flex; justify-content: space-between; margin-top: 8px; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .side {
    width: auto; flex: none; height: auto; position: static;
    padding: 14px 0 8px; display: flex; align-items: center; gap: 4px; overflow-x: auto;
  }
  .side .brand { padding: 0 16px 0; }
  .side .foot { display: none; }
  .navitem { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 12px; }
  .navitem.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .soontag { display: none; }
  .content { padding: 16px 13px; }
  .topbar { padding: 9px 12px; }
  .row-head { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* Dropdown menus — the issuer switcher and the account block. */
.dropwrap { position: relative; }
.iswitch, .who { cursor: pointer; border: 1px solid transparent; border-radius: 9px; padding: 4px 8px; }
.iswitch:hover, .who:hover { border-color: var(--line); }
.menu {
  position: absolute; left: 0; top: 50px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 12px 34px rgba(14, 36, 56, .18); min-width: 280px;
  z-index: 50; overflow: hidden;
}
.menu.right { left: auto; right: 0; }
.menu .mh {
  padding: 9px 15px; border-bottom: 1px solid var(--line); font: 800 10.5px/1 Arial, sans-serif;
  letter-spacing: 1px; color: var(--slate); text-transform: uppercase;
}
.menu .mi {
  padding: 11px 15px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line);
  display: flex; gap: 11px; align-items: center;
}
.menu .mi:last-child { border-bottom: none; }
.menu .mi:hover { background: var(--bg); }
.logo.sm { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; }

/* Compliance calendar. */
.chips { display: flex; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; min-width: 112px; }
.stat .n { font: 700 25px Georgia, serif; }
.stat .l { color: var(--slate); font-size: 12px; }
.stat.due .n { color: var(--goldd); }
.stat.risk .n { color: var(--amber); }
.stat.up .n { color: var(--blue); }
.stat.filed .n { color: var(--green); }
.hint { color: var(--slatel); font-size: 11.5px; margin: 0 0 18px; }
.secttl {
  font: 800 11px/1 Arial, sans-serif; letter-spacing: 1px; color: var(--slate);
  text-transform: uppercase; margin-bottom: 10px;
}
.timeline { margin-bottom: 18px; }
.tlwrap { position: relative; height: 92px; }
.tlwrap::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 46px; height: 2px; background: var(--line);
}
.mark { position: absolute; left: var(--left); top: 2px; transform: translateX(-50%); width: 120px; text-align: center; }
.mark b { display: block; font-size: 10.5px; line-height: 1.2; }
.mark .when { display: block; font-size: 9.5px; color: var(--slate); }
.mark .dotx {
  position: absolute; left: 50%; top: 44px; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--colour);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--colour);
}
.mark .in { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); font-size: 9.5px; color: var(--slate); white-space: nowrap; }
.sched-head { align-items: baseline; margin: 0 0 10px; }
.sched-head b { font-size: 15px; }
.frow { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: none; }
.frow .ico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--bg); flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.frow .info { flex: 1; min-width: 0; }
.frow .info b { font-size: 14px; }
.frow .info span { color: var(--slate); font-size: 12px; display: block; }
.frow .info .working { color: var(--slatel); font-variant-numeric: tabular-nums; }

/* Issuer cards. */
.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pcard { cursor: pointer; transition: border-color .15s; }
.pcard:hover { border-color: var(--gold); }
.issuer { padding: 16px 18px; }
.issuer .head { display: flex; align-items: center; gap: 11px; }
.issuer .idmeta { min-width: 0; }
.issuer .idmeta b { display: block; font-size: 15px; }
.issuer .badge { margin-left: auto; }
.badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap; letter-spacing: .3px; }
.b-up { background: var(--bluebg); color: var(--blue); }
.b-filed { background: var(--greenbg); color: var(--green); }
.b-risk { background: var(--amberbg); color: var(--amber); }
.b-due { background: #F6ECD2; color: var(--goldd); }
.issuer .next { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.issuer .next .badge { justify-self: start; margin-left: 0; }
.issuer .next b { font-size: 13px; }
.issuer .next .working { font-variant-numeric: tabular-nums; }
.empty { grid-column: 1 / -1; }

/* Add-issuer form. */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--slate); }
.grid input, .grid select {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
}
.grid input:focus, .grid select:focus { outline: none; border-color: var(--gold); }
.grid .wide { grid-column: 1 / -1; }
.grid .check { flex-direction: row; align-items: center; gap: 8px; }
.grid .check input { accent-color: var(--goldd); }
.footnav { display: flex; justify-content: space-between; margin-top: 8px; }
.addpanel { margin-top: 20px; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .side {
    width: auto; flex: none; height: auto; position: static;
    padding: 14px 0 8px; display: flex; align-items: center; gap: 4px; overflow-x: auto;
  }
  .side .brand { padding: 0 16px 0; }
  .side .foot { display: none; }
  .navitem { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 12px; }
  .navitem.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .soontag { display: none; }
  .content { padding: 16px 13px; }
  .topbar { padding: 9px 12px; }
  .row-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .menu { position: fixed; left: 10px; right: 10px; top: 120px; min-width: 0; }
  .stat { flex: 1 1 calc(50% - 6px); min-width: 0; }
  /* The horizontal run doesn't survive a phone; the same marks stack instead. */
  .tlwrap { height: auto; }
  .tlwrap::before { display: none; }
  .mark { position: static; transform: none; width: auto; text-align: left; padding: 8px 0 8px 16px; border-left: 2px solid var(--line); }
  .mark .dotx, .mark .in { position: static; transform: none; display: inline-block; }
  .mark .dotx { margin-right: 6px; }
}

/* Company IQ completeness. Zero until M1 fills the fact store (#27 computes it
   from the slot registry against current_facts — never a separately kept number). */
.issuer .iq { margin-top: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.issuer .iq .bar { height: 6px; border-radius: 4px; background: var(--ice); overflow: hidden; }
.issuer .iq .bar i { display: block; height: 100%; background: var(--gold); }

/* People on an issuer: invitations, and the form to send one. */
.people-head { margin-top: 22px; }
.inviteform { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inviteform input, .inviteform select {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  font: inherit; font-size: 13px; background: #fff; color: var(--ink);
}
.inviteform input { flex: 1 1 220px; }
.inviteform input:focus, .inviteform select:focus { outline: none; border-color: var(--gold); }
.inviteform .autherr { flex-basis: 100%; }

/* Document register: the drop zone, the basis checklist, filing rows. */
.drop {
  border: 2px dashed var(--ice); border-radius: 11px; background: #fff;
  padding: 26px 20px; text-align: center; margin-bottom: 18px; transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--gold); background: var(--wash); }
.drop.busy { opacity: .6; pointer-events: none; }
.drop p { margin: 0 0 4px; }
.basis { margin-bottom: 18px; }
.basisrow { padding: 5px 0; border-bottom: 1px solid var(--line); }
.basisrow:last-child { border-bottom: none; }
.covered { color: var(--green); font-weight: 600; }
.uncovered { color: var(--slate); }
.kindpick {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  font: inherit; font-size: 12.5px; background: #fff; color: var(--ink); max-width: 210px;
}
.kindpick:focus { outline: none; border-color: var(--gold); }
.frow .info .meta { color: var(--slate); font-size: 12px; }

/* Verification queue: a claim, its source, and three keys. */
.keys { margin: -8px 0 16px; }
.keys b {
  display: inline-block; min-width: 16px; text-align: center; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px;
  font-size: 11px;
}
.queue { display: grid; gap: 12px; }
.candidate { padding: 16px 18px; outline: none; border-left: 3px solid transparent; }
.candidate.focused { border-left-color: var(--gold); box-shadow: 0 2px 14px rgba(14, 36, 56, .10); }
.chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chead b { font-size: 14px; display: block; }
.cvalue { font: 700 20px Georgia, serif; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.cquote {
  margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--ice);
  color: var(--inklt); font-size: 13px;
}
.csource a { color: var(--goldd); }
.cactions { display: flex; gap: 8px; }

/* Two sources disagreeing: both values, both citations, no default winner. */
.disputes { display: grid; gap: 12px; margin-bottom: 18px; }
.dispute { padding: 16px 18px; border-left: 3px solid var(--amber); }
.dsides { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 12px 0; }
.dside { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: var(--wash); align-self: start; }
.dvalue { font: 700 18px Georgia, serif; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.dquote { margin: 0 0 6px; padding-left: 10px; border-left: 2px solid var(--ice); color: var(--slate); font-size: 12.5px; }
.dsource { margin-bottom: 10px; }
.dsource a { color: var(--goldd); }

/* Coverage: what Company IQ knows, and what it doesn't. */
.headline { text-align: right; }
.headline .hpct { display: block; font: 700 30px Georgia, serif; color: var(--ink); line-height: 1.1; }
.domains { display: grid; gap: 12px; }
.dom { padding: 16px 18px; }
.domhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.domhead .domsrc { margin-left: 8px; }
.dombar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--ice); margin: 10px 0 8px; }
.dombar span { display: block; height: 100%; }
.fill-ok { background: var(--green); }
.fill-warn { background: var(--gold); }
.fill-bad { background: var(--amber); }
.domcount { margin: 0; }
.domgaps { display: grid; gap: 4px; margin-top: 10px; }
.gap { display: flex; align-items: center; justify-content: space-between; gap: 12px;
       padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.gapcap { margin: 0 0 2px; }
.mnpi { margin-left: 8px; }
.scopepick { max-width: 180px; }

/* Questionnaires: the Owner's preview, and the form a director opens from email. */
.qs { display: grid; gap: 12px; }
.qsheet { padding: 16px 18px; }
.qgroup { margin: 14px 0 6px; font: 700 12px/1 -apple-system, system-ui, sans-serif;
          letter-spacing: .08em; text-transform: uppercase; color: var(--goldd); }
.qrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
        padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.qacts { display: flex; gap: 10px; }
.qperson { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
           border-top: 1px solid var(--line); font-size: 13px; }
.qemail, .qname { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
                  font: 13px -apple-system, system-ui, sans-serif; }
.qemail { min-width: 220px; }
.plain { max-width: 720px; margin: 48px auto; padding: 0 16px; }
.sheet { padding: 28px 30px; }
.qitem { display: grid; gap: 5px; padding: 10px 0; border-top: 1px solid var(--line); }
.qitem label { font-size: 14px; }
.qitem input { padding: 9px 11px; border: 1px solid var(--ice); border-radius: 8px;
               font: 14px -apple-system, system-ui, sans-serif; }
.qitem input:disabled { background: var(--wash); color: var(--slate); }
.qstate.saved { color: var(--green); }
.qstate.failed { color: var(--amber); }
.qdone { margin-top: 16px; }

/* Follow-up threads: what the engine is saying on the Owner's behalf. */
.threads { display: grid; gap: 12px; margin-bottom: 18px; }
.thread { padding: 16px 18px; border-left: 3px solid var(--blue); }
.tnext { margin: 8px 0 0; }
.tpreview { margin-top: 10px; font-size: 13px; }
.tpreview summary { cursor: pointer; color: var(--goldd); }
.tsubject { font-weight: 700; margin: 10px 0 6px; font-size: 13px; }
.tbody { margin: 0; padding: 12px 14px; background: var(--wash); border: 1px solid var(--line);
         border-radius: 9px; white-space: pre-wrap; font: 12.5px/1.55 ui-monospace, monospace;
         color: var(--inklt, var(--slate)); }
.tacts { margin-top: 12px; }
.qconfirm { margin-top: 8px; padding: 10px 12px; background: var(--amberbg);
            border: 1px solid var(--gold); border-radius: 9px; }
.qread { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.qconfirmacts { display: flex; gap: 8px; }

/* Company IQ's four surfaces, as tabs inside one destination rather than four
   sidebar rows (the prototype's sidebar has five items; ours had grown to nine). */
/* Pills, as the prototype draws them — navy when you're on it, ghost when you're
   not. They were underlines; the two-class `.iqtab.on` then outranked `.btn-navy`
   and painted the label dark on dark. */
.iqtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.iqtab.on { cursor: default; }

/* The record, laid out the way the prototype lays it out. */
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy2); }
.recgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.reccard { padding: 18px 20px; }
.rechead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.recname { font: 700 15px Georgia, serif; margin: 0; }
.recsub { margin: 6px 0 12px; }
.recrow { display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
          border-bottom: 1px solid var(--line); padding: 9px 0; margin: 0; font-size: 13.5px; }
.recrow:last-child { border-bottom: none; }
.recval { font-weight: 700; text-align: right; }
.recval a { color: var(--ink); text-decoration-color: var(--ice); }
.recval a:hover { text-decoration-color: var(--gold); }
.recrow.empty .recval { color: var(--slatel); font-weight: 400; }
.recasat { font-weight: 400; margin-left: 6px; }
@media (max-width: 1100px) { .recgrid { grid-template-columns: 1fr; } }

/* The audit trail, drawn as the prototype draws its activity log. */
.auditfilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tl .ev { position: relative; padding: 0 0 16px 16px; border-left: 2px solid var(--line); }
.tl .ev:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl .ev .dotx { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
                border-radius: 50%; background: var(--gold); border: 2px solid #fff; }
/* A different dot for what the system did on its own, so a person scanning the trail
   can tell their own actions from the engine's without reading every line. */
.tl .ev.bysystem .dotx { background: var(--ice); }
.tl .ev b { font-size: 13px; display: block; }
.tl .ev span { display: block; color: var(--slate); font-size: 11.5px; margin-top: 1px; }
.morewrap { margin-top: 14px; }
.cardname { font: 700 15px Georgia, serif; margin: 0 0 12px; }
.whyhead { font: 700 14px -apple-system, system-ui, sans-serif; margin: 22px 0 12px; }
.whylist { display: grid; gap: 12px; }
.whycard { padding: 16px 18px; }
.whycard .cardname { margin: 0; }
.whyrule { margin: 8px 0 12px; }
.whyrow { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.whymark { width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
           align-items: center; justify-content: center; font-size: 11px; flex: none; }
.whymark.ok { background: var(--greenbg); color: var(--green); }
.whymark.warn { background: var(--amberbg); color: var(--amber); }

/* Correcting the issuer record. */
.editpanel { margin-bottom: 16px; border-left: 3px solid var(--gold); }
.editgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.editgrid label { display: grid; gap: 4px; font-size: 12.5px; color: var(--slate); }
.editgrid input, .editgrid select { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: 13.5px -apple-system, system-ui, sans-serif; color: var(--ink); }
.editgrid label.check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.editgrid label.check input { width: auto; }
.movewarn { background: var(--amberbg); border: 1px solid var(--gold); border-radius: 9px;
            padding: 12px 14px; margin: 4px 0 12px; }
.movetitle { margin: 0 0 8px; font-weight: 700; font-size: 13px; }
.moverow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
@media (max-width: 760px) { .editgrid { grid-template-columns: 1fr; } }
.movecols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.movecols .moverow { border-top: 1px solid var(--gold); padding: 5px 0; }
.movearith { margin: 0; }
@media (max-width: 760px) { .movecols { grid-template-columns: 1fr; } }

/* Disclosures — the MD&A outline (#36). */
.draftpick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.draftbody { display: flex; flex-direction: column; gap: 14px; }

/* The product saying what it hasn't checked. Gold rather than red: this is a caveat
   on a usable list, not a failure. */
.unverifiedbanner { border-left: 4px solid var(--gold); background: #FCF8EE; }
.unverifiedbanner b { color: var(--navy); }

.secard .secname { font: 600 16px Georgia, "Times New Roman", serif; color: var(--navy); }
.secguide { margin: 2px 0 10px; }
/* An empty section is quieter but never hidden — fourteen blanks is the honest
   picture of an unwritten MD&A. */
.secempty { opacity: .72; }
.secparas { display: flex; flex-direction: column; gap: 12px; }

.dpara { border-left: 3px solid #E4E8EE; padding-left: 12px; }
.dtext { margin: 0 0 6px; line-height: 1.55; }
.dauthor { margin-left: 8px; vertical-align: middle; }
.dcites { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: #EEF2F7; color: var(--navy2); border: 1px solid #DCE3EC;
}
a.dcite { text-decoration: none; }
a.dcite:hover { background: #E2EAF4; border-color: var(--navy3); }
.nocite { font-style: italic; }

/* The document's filing date, entered by hand — nothing can infer it (#26 feedback). */
.filedon {
  font: inherit; font-size: 13px; padding: 3px 6px; margin-right: 8px;
  border: 1px solid #DCE3EC; border-radius: 6px; background: #fff; color: var(--navy2);
}
.filedon:focus { outline: none; border-color: var(--gold); }
.filedon:disabled { opacity: .5; }

/* Step 4 — Checks (#39). Findings shown where they are, not in a separate list. */
.checkbanner b { color: var(--navy); }
.c-clean { border-left: 4px solid #1F7A4C; background: #F2FAF5; }
.c-found { border-left: 4px solid #B3401F; background: #FDF4F1; }
.c-unknown { border-left: 4px solid var(--slate, #64748B); background: #F5F6F8; }
.checkpending { margin: 6px 0 0; font-style: italic; }

mark.figflag { padding: 0 2px; border-radius: 3px; background: #FBE3DB; color: inherit; }
mark.figflag.v-unsourced { background: #FDEFD3; }
mark.figflag.v-disputed { background: #FBE9C9; }

.dfindings { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.dfinding { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
.dfinding .fmark {
  flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; font-weight: 700; font-size: 12px;
  background: #B3401F; color: #fff;
}
.dfinding.v-unsourced .fmark { background: #9C7C32; }
.dfinding.v-disputed .fmark { background: #9C7C32; }
.dfinding .ftext { color: var(--navy2); }

/* Step 1 — Start (#34). Filings due, offered from the calendar. */
.startcard { margin-bottom: 14px; }
.startrows { display: flex; flex-direction: column; gap: 10px; }
.startrow {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1px solid #E4E8EE; padding-top: 10px;
}
.startrow:first-child { border-top: none; padding-top: 0; }
.startwhat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.startname { color: var(--navy); }
.startgo { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 760px) {
  .startrow { flex-direction: column; align-items: flex-start; }
}