/* ==========================================================================
   Site chrome. The report and the survey keep their own ledger styling in
   report.css; this file is everything around them.
   ========================================================================== */
@import url('report.css');

.site{ max-width:70rem; margin:0 auto; padding:0 1.5rem; }

header.top{
  border-bottom:1px solid var(--rule); background:var(--card);
  position:sticky; top:0; z-index:50;
}
header.top .inner{
  max-width:70rem; margin:0 auto; padding:.8rem 1.5rem;
  display:flex; align-items:center; gap:1.2rem;
}
.brand{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:var(--ink); }
.brand .bmark{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oxide); border:1px solid var(--oxide); padding:.1rem .3rem; border-radius:2px;
}
.brand b{ font-size:1rem; font-weight:600; letter-spacing:-.01em; }
header.top nav{ margin-left:auto; display:flex; gap:.3rem; align-items:center;
  font-family:var(--f-ui); font-size:.82rem; }
header.top nav a{ color:var(--ink-2); text-decoration:none; padding:.4rem .6rem; border-radius:2px; }
header.top nav a:hover{ color:var(--indigo); background:rgba(255,255,255,.7); }

/* ------------------------------------------------------------ landing */
.hero{ padding:4.5rem 0 3rem; max-width:44rem; }
.hero .kicker{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oxide); margin:0 0 1rem;
}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; margin:0 0 1.1rem;
  font-weight:600; letter-spacing:-.035em; color:var(--indigo);
}
.hero p.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); margin:0 0 1.6rem; }

.doors{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2.5rem 0 3rem; }
.door{
  border:1px solid var(--rule); background:var(--card-2); padding:1.6rem 1.5rem 1.4rem;
  text-decoration:none; color:var(--ink); display:block; position:relative;
  transition:border-color .15s, transform .15s;
}
.door::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rule);
  transition:background .15s;
}
.door:hover{ border-color:var(--indigo-2); transform:translateY(-2px); }
.door:hover::before{ background:var(--oxide); }
.door .dk{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }
.door h3{ font-size:1.35rem; margin:.4rem 0 .5rem; font-weight:600; letter-spacing:-.02em; color:var(--indigo); }
.door p{ font-family:var(--f-ui); font-size:.86rem; line-height:1.55; color:var(--ink-2); margin:0 0 .9rem; }
.door ul{ font-family:var(--f-ui); font-size:.8rem; color:var(--ink-2); margin:0; padding-left:1.1rem; line-height:1.6; }
.door .cta{ font-family:var(--f-ui); font-size:.85rem; font-weight:600; color:var(--indigo); margin-top:1rem; display:block; }

.band{ border-top:1px solid var(--rule); padding:3rem 0; }
.band h2{ font-size:1.6rem; margin:0 0 .6rem; font-weight:600; letter-spacing:-.02em; color:var(--indigo); }
.band > p{ max-width:40rem; color:var(--ink-2); font-size:.98rem; margin:0 0 1.8rem; }
.three{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.6rem; }
.three h4{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oxide); margin:0 0 .4rem; font-weight:500; }
.three p{ font-family:var(--f-ui); font-size:.84rem; line-height:1.6; color:var(--ink-2); margin:0; }

footer.site-foot{
  border-top:1px solid var(--rule); margin-top:3rem; padding:2rem 0 3rem;
  font-family:var(--f-ui); font-size:.76rem; color:var(--ink-3); line-height:1.7;
}
footer.site-foot a{ color:var(--ink-2); }

/* --------------------------------------------------------------- forms */
.card{
  background:var(--card-2); border:1px solid var(--rule); padding:1.8rem;
  max-width:26rem; margin:3rem auto;
}
.card h2{ font-size:1.5rem; margin:0 0 .3rem; font-weight:600; color:var(--indigo); letter-spacing:-.02em; }
.card > p{ font-family:var(--f-ui); font-size:.84rem; color:var(--ink-2); margin:0 0 1.4rem; }
.field{ margin:0 0 1rem; }
.field label{ display:block; font-family:var(--f-ui); font-size:.78rem; font-weight:600;
  color:var(--ink-2); margin:0 0 .25rem; }
.field input, .field select{ width:100%; max-width:none; }
/* Checkboxes and radios must never be stretched. Without this they take the
   full flex row and squeeze their own label down to one word per line, which
   then overflows the card. Scoped by attribute rather than by reordering the
   @import, so the fix cannot be undone by moving a line. */
.field input[type="checkbox"], .field input[type="radio"]{ width:auto; max-width:none; flex:none; }
.field .hint{ font-family:var(--f-ui); font-size:.72rem; color:var(--ink-3); margin:.25rem 0 0; }
.tabs{ display:flex; gap:.2rem; border-bottom:1px solid var(--rule); margin:0 0 1.4rem; }
.tabs button{ border:0; border-bottom:2px solid transparent; background:none; border-radius:0;
  padding:.5rem .8rem; color:var(--ink-2); }
.tabs button[aria-selected="true"]{ color:var(--indigo); border-bottom-color:var(--oxide); font-weight:600; }

/* --------------------------------------------------------- dashboards */
.rows{ border-top:1px solid var(--rule); }
.row-item{
  display:flex; align-items:baseline; gap:1rem; padding:.9rem 0;
  border-bottom:1px solid var(--rule-soft); font-family:var(--f-ui); font-size:.86rem;
}
.row-item .grow{ flex:1; min-width:0; }
.row-item .t{ font-weight:600; color:var(--ink); font-size:.92rem; }
.row-item .s{ font-size:.76rem; color:var(--ink-3); }
.pill{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.15rem .4rem; border:1px solid var(--rule); border-radius:2px; color:var(--ink-2); white-space:nowrap; }
.pill.ok{ color:var(--sage); border-color:var(--sage); }
.pill.warn{ color:var(--brass); border-color:var(--brass); }
.pill.alert{ color:var(--oxide); border-color:var(--oxide); }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1.2rem; margin:1.5rem 0 2rem; }

/* ------------------------------------------------------------- toasts */
#toasts{ position:fixed; right:1rem; bottom:1rem; z-index:200; display:flex;
  flex-direction:column; gap:.5rem; max-width:24rem; }
.toast{
  background:var(--indigo); color:#F4F7F2; padding:.7rem .9rem; border-radius:2px;
  font-family:var(--f-ui); font-size:.84rem; line-height:1.45; display:flex; gap:.8rem;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
}
.toast.error{ background:var(--oxide); }
.toast.ok{ background:var(--sage); }
.toast button{ background:none; border:0; color:inherit; padding:0; margin-left:auto;
  font-size:1.1rem; line-height:1; opacity:.8; }

.drop.busy{ opacity:.5; pointer-events:none; }
.center{ text-align:center; }
.muted{ color:var(--ink-3); }

/* ------------------------------------------------- checkbox + text rows
   The consent row is an input and a run of prose on one line. The prose needs
   min-width:0 or it refuses to shrink below its longest word and overflows
   the card instead of wrapping. */
.field .opts{ display:block; }
.field .opts .row,
.field .opts > span{
  display:flex; gap:.55rem; align-items:flex-start;
}
.field .opts > span > span{
  flex:1 1 auto; min-width:0; line-height:1.5; overflow-wrap:anywhere;
}
.field .opts input[type="checkbox"]{ margin-top:.15rem; }
.field .opts.inline{ display:flex; flex-direction:row; flex-wrap:wrap; gap:.4rem 1.2rem; }
.field .opts.inline label{ display:flex; gap:.4rem; align-items:center; padding:.2rem 0; }

@media (max-width:760px){
  .doors{ grid-template-columns:1fr; }
  .hero{ padding:2.5rem 0 1.5rem; }
  /* Full-bleed card on a phone; 26rem plus page padding overflows a 360px screen. */
  .card{ margin:1.5rem auto; padding:1.4rem 1.1rem; max-width:none; }
  .site{ padding:0 1rem; }
  header.top .inner{ padding:.7rem 1rem; }
  .row-item{ flex-wrap:wrap; gap:.5rem; }
  .row-item .grow{ flex:1 0 100%; }
}
@media print{ header.top, footer.site-foot, #toasts{ display:none !important; } }

/* --------------------------------------------- statement review panel
   Shown under the upload list in the survey. The investor checks what a
   parser read out of their statement before any of it counts. */
.extract{
  border:1px solid var(--rule); background:var(--card-2);
  padding:1rem 1.1rem; margin:1rem 0 0;
}
.extract-head{
  display:flex; align-items:flex-start; gap:1rem; justify-content:space-between;
  padding:0 0 .7rem; border-bottom:1px solid var(--rule-soft); margin:0 0 .7rem;
  font-family:var(--f-ui); font-size:.9rem;
}
.pill2{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--oxide); color:var(--oxide); padding:.15rem .4rem; white-space:nowrap;
}
.pill2.ok{ border-color:var(--sage); color:var(--sage); }
table.extract-table{ width:100%; border-collapse:collapse; font-family:var(--f-ui); font-size:.79rem; }
table.extract-table th{
  text-align:left; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  padding:.3rem .4rem; border-bottom:1px solid var(--rule);
}
table.extract-table td{ padding:.45rem .4rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
table.extract-table td.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.extract-table td.n.bad{ color:var(--oxide); }
.extract .why{ display:block; font-size:.68rem; color:var(--brass); font-style:italic; }
.extract-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.9rem; }
.extract-actions select{ max-width:12rem; }
.ok-line{ color:var(--sage); }
@media (max-width:700px){
  table.extract-table th:nth-child(4), table.extract-table td:nth-child(4){ display:none; }
}

/* ------------------------------------------------- profile picker
   The optional head start at the top of the survey. Deliberately quieter
   than the questions themselves: it is a shortcut, not the instrument. */
.picker{
  border:1px solid var(--rule); background:var(--card-2);
  padding:1.2rem 1.3rem; margin:0 0 1.8rem;
}
.picker-head h3{ font-size:1.15rem; margin:0 0 .35rem; color:var(--indigo); font-weight:600; }
.picker-head p{ font-family:var(--f-ui); font-size:.84rem; line-height:1.55;
  color:var(--ink-2); margin:0 0 1.1rem; max-width:44rem; }
.picker-group{ margin:0 0 1.1rem; }
.picker-gtitle{ font-family:var(--f-ui); font-size:.8rem; margin:0 0 .5rem; color:var(--ink-2); }
.picker-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:.5rem; }
.picker-card{
  text-align:left; background:var(--paper); border:1px solid var(--rule);
  padding:.6rem .7rem; border-radius:2px; cursor:pointer; display:block; width:100%;
}
.picker-card:hover{ border-color:var(--indigo-2); background:#fff; }
.picker-card .pl{ display:block; font-family:var(--f-ui); font-size:.84rem;
  font-weight:600; color:var(--indigo); }
.picker-card .pb{ display:block; font-family:var(--f-ui); font-size:.74rem;
  color:var(--ink-3); line-height:1.4; margin-top:.15rem; }
.picker-done{ font-family:var(--f-ui); font-size:.86rem; line-height:1.55; color:var(--ink-2); }
.picker-list{ font-family:var(--f-ui); font-size:.82rem; color:var(--ink-2);
  margin:.6rem 0 0; padding-left:1.1rem; line-height:1.65; }
@media (max-width:700px){ .picker-grid{ grid-template-columns:1fr; } }

/* A report the adviser sent back. Deliberately prominent: the investor has
   something to do and will not find out any other way. */
.returned{
  font-family:var(--f-ui); font-size:.8rem; line-height:1.5; color:var(--ink-2);
  border-left:2px solid var(--oxide); background:#FDF6F4;
  padding:.5rem .7rem; margin:.5rem 0 0;
}