:root{
  color-scheme: light dark;
  --bg:#F2F2F2; --surface:#FFFFFF; --surface-2:#F7F7F7;
  --ink:#0B0B0C; --ink-2:#3C3C3E; --ink-3:#66666B;
  --hairline:#DCDCDE; --silver:#B8B8BD; --on-ink:#FFFFFF;
  --r:14px; --tap:44px; --pad:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000; --surface:#141416; --surface-2:#1D1D20;
    --ink:#F5F5F7; --ink-2:#C9C9CE; --ink-3:#9A9AA0;
    --hairline:#2E2E32; --silver:#6E6E74; --on-ink:#0B0B0C;
  }
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 1.0625rem/1.5 -apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}

h1{font-size:1.75rem; font-weight:700; letter-spacing:-.021em; line-height:1.2}
h2{font-size:1.3125rem; font-weight:650; letter-spacing:-.015em; line-height:1.25}
.sub{font-size:.9375rem; color:var(--ink-3); margin-top:4px}
.note{font-size:.8125rem; line-height:1.45; color:var(--ink-3); margin-top:8px}
code,.mono{font:.8125rem ui-monospace,"SF Mono",Menlo,monospace; color:var(--ink-2)}

.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r);
      padding:18px; margin-bottom:12px}

.btn,button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:50px; padding:14px 18px; margin-top:12px;
  border:1px solid var(--ink); border-radius:12px; background:var(--ink); color:var(--on-ink);
  font:600 1.0625rem/1 -apple-system,system-ui,sans-serif; letter-spacing:-.01em;
  text-align:center; text-decoration:none; cursor:pointer; -webkit-appearance:none;
}
.btn:active,button:active{opacity:.72}
.btn.secondary,button.secondary{background:var(--surface); color:var(--ink); border-color:var(--silver)}
.btn.plain,button.plain{background:transparent; color:var(--ink-2); border-color:transparent;
                        font-weight:550; min-height:var(--tap)}
button:disabled{opacity:.45; cursor:default}

/* ---- a repeatable block of questions (server.group_html) ----
   The hidden rule is needed because `button{display:flex}` above outranks the
   browser's own [hidden]{display:none}, and "Add" must go when nothing is
   left to add. */
[data-group] [hidden]{display:none!important}
.groupblock{border-top:1px solid var(--hairline); margin-top:18px; padding-top:4px}
.grouphead{display:flex; align-items:center; justify-content:space-between; gap:12px;
           font-size:.9375rem; font-weight:650; color:var(--ink)}
.grouphead button{width:auto; margin:0; padding:8px 4px; min-height:var(--tap)}

/* ---- Schedule A clauses as checkboxes (server.clauses_html) ---- */
.clauses .clause{border-top:1px solid var(--hairline); padding:2px 0 8px}
/* The console sizes every input to a full-width text box; a clause tick is a
   44px target with a 22px box, the same as the renter's own checkboxes. */
.clauses label.chk{display:flex; gap:12px; align-items:flex-start; margin:8px 0 0;
                   padding:10px 0; min-height:var(--tap); cursor:pointer;
                   font-size:.9375rem; color:var(--ink); line-height:1.4}
.clauses label.chk input{width:22px; height:22px; min-height:22px; padding:0; margin:0;
                         flex:0 0 auto; accent-color:var(--ink); -webkit-appearance:auto}
.clauses details{margin:0 0 0 34px; font-size:.8125rem; color:var(--ink-2)}
.clauses summary{cursor:pointer; color:var(--ink-3); padding:4px 0}
.clauses details p{margin:4px 0 0; line-height:1.45}
.clauses .clauseask{margin-left:34px}
.ownclauses{border-top:1px solid var(--hairline); margin-top:14px; padding-top:4px}
.ownclauses textarea{margin-top:8px}
.ownclauses [hidden]{display:none!important}
.pickone{border:1.5px solid var(--ink); border-radius:10px; padding:4px 14px 10px; margin:14px 0}
.pickhead{display:flex; justify-content:space-between; align-items:center; gap:10px;
          font-weight:650; margin:10px 0 0}
.pickrule{font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
          border:1px solid var(--ink); border-radius:999px; padding:2px 8px; white-space:nowrap}

/* ---- multiple choice as buttons (server.choice_html) ----
   Radio buttons dressed as pills: every option visible at once, one tap to
   answer. "Other" opens a text box for anything the options don't cover.
   The question's own label is a <p>, because a <label> wrapping a group of
   inputs would forward every tap to the first one. */
.choiceq{font-size:.8125rem; font-weight:600; color:var(--ink-2); margin:16px 0 6px}
.choices{display:flex; flex-wrap:wrap; gap:8px}
.choices label.choicebtn{display:inline-flex; align-items:center; margin:0; cursor:pointer;
                    font-size:.9375rem; font-weight:500; color:var(--ink)}
.choices label.choicebtn input{position:absolute; opacity:0; width:1px; height:1px; min-height:0;
                          padding:0; margin:0; pointer-events:none}
.choices label.choicebtn span{display:inline-flex; align-items:center; min-height:var(--tap);
                         padding:0 16px; border:1px solid var(--silver); border-radius:999px;
                         background:var(--surface)}
.choices label.choicebtn input:checked + span{background:var(--ink); color:var(--on-ink);
                                          border-color:var(--ink); font-weight:650}
.choices label.choicebtn input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.choiceother{margin-top:8px}
.choiceother[hidden]{display:none!important}
/* Fill in the blanks: the form's own sentence, its blanks as short boxes. */
.blanks{font-size:.9375rem; line-height:2.6; color:var(--ink)}
.blanks input.blank{display:inline-block; width:8.5em; max-width:40%; margin:0 4px;
                    vertical-align:baseline}
/* Shortcuts that fill the question above them: a date, or every utility. */
.quickrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.quickrow button.quick{width:auto; min-height:36px; padding:0 14px; font-size:.875rem; margin:0}

label{display:block; font-size:.8125rem; font-weight:600; color:var(--ink-2); margin:16px 0 6px}
label .opt{font-weight:400; color:var(--ink-3)}
input,select,textarea{
  width:100%; min-height:var(--tap); padding:12px 14px;
  border:1px solid var(--silver); border-radius:10px;
  background:var(--surface); color:var(--ink);
  font:400 1.0625rem/1.4 -apple-system,system-ui,sans-serif; -webkit-appearance:none;
}
textarea{min-height:88px; resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
       linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
       background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
       background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--ink); outline:none;
       box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.row{display:flex; gap:12px}
.row>div{flex:1; min-width:0}
fieldset{border:0; padding:0; margin:0}

/* The wordmark. currentColor means it is black on the light theme and white on
   the dark one with no second asset and no filter hack. */
.wordmark{display:block; width:auto; color:var(--ink)}

/* The spear alone, for persistent chrome. Same trick, same reason: it inherits
   the text colour, so one asset serves both themes. */
.spear{display:block; flex:0 0 auto; color:var(--ink)}

/* ---- the brokerage's own line, at the foot of both web surfaces ----
   The same three facts the email footer carries, in the same order, so the
   block reads identically whether somebody is in Gmail, on the intake form or
   in the console. Quiet by construction: --ink-3 at .75rem, below a hairline,
   after the content rather than in front of it. Each surface sets its own
   max-width, to match its own `main`. */
footer.brandfoot{
  margin:32px auto 0; padding:20px var(--pad) 0;
  border-top:1px solid var(--hairline); text-align:center;
  font-size:.75rem; line-height:1.55; color:var(--ink-3);
}
footer.brandfoot b{display:block; font-weight:650; color:var(--ink-2); letter-spacing:.01em}
footer.brandfoot a{color:var(--ink-2); text-decoration:none}

/* Silver Spear Realty: the realtor console.

   Palette, type ramp and controls come from brand.py, shared with the renter's
   intake form and the outbound email so the three cannot drift apart again.
   What is left here is only what the console alone has: the file row, the
   status badge, and the tables.

   Black, white and silver, which forces every piece of state to be legible
   without colour: a badge is told apart by its FILL, its DOT SHAPE and its
   WORDS, never by tone alone. That is the accessibility rule satisfied by
   construction rather than by good intentions. */

body{padding:0 0 max(48px,env(safe-area-inset-bottom))}

/* ---- chrome ---- */
header{
  background:var(--surface); border-bottom:1px solid var(--hairline);
  padding:calc(12px + env(safe-area-inset-top)) var(--pad) 12px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
/* The brokerage's own lockup, not its name set in the interface font. It is
   sized off its smallest line -- REALTY BROKERAGE, the bottom rule of the
   stacked mark -- which is why the header is 38px of logo and not the 19px a
   spear alone would need: below about 34px that line stops being readable and
   the mark is worse than absent. Openfile sits beside it as live text, because
   the product is ours and the lockup is the brokerage's. */
header .mark{display:flex; align-items:center; gap:10px; flex:1; min-width:150px;
             text-decoration:none; color:inherit}
header .mark .wordmark{flex:0 0 auto}
header .mark span{font-size:.9375rem; font-weight:550; letter-spacing:-.01em;
                  color:var(--ink-3); padding-left:10px;
                  border-left:1px solid var(--hairline)}
/* Five links for the broker. On a phone they stay one row and scroll rather
   than folding each label onto two lines. */
header nav{display:flex; gap:4px; max-width:100%; overflow-x:auto; scrollbar-width:none}
header nav a{white-space:nowrap}
@media (max-width:420px){ header nav{gap:2px} header nav a{padding:8px 6px} }
header nav a{
  font-size:.8125rem; font-weight:550; color:var(--ink-2); text-decoration:none;
  padding:8px 10px; border-radius:8px; min-height:36px; display:flex; align-items:center;
}
header nav a:hover{background:var(--surface-2)}
main{max-width:760px; margin:0 auto; padding:20px var(--pad) 0}
footer.brandfoot{max-width:760px}

/* ---- the sign-in page ----
   The header above it carries the lockup, so this card names the product and
   asks for the password and does not repeat the mark. */
.signin{text-align:center; padding:30px 22px 26px}
.signin h1{margin-bottom:4px}
.signin form{text-align:left}

/* A lone tick box with its words (Schedule A's "This PDF includes Schedule
   B"): a 22px box beside its label, not a full-width text box. The clause
   ticks have their own rule in brand.FOUNDATION. */
label.chk{display:flex; gap:10px; align-items:center; cursor:pointer}
label.chk input[type=checkbox]{width:22px; height:22px; min-height:22px; padding:0; margin:0;
  flex:0 0 auto; accent-color:var(--ink); -webkit-appearance:auto}

/* ---- type ---- */
h3{font-size:.75rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
   color:var(--ink-3); margin:28px 0 10px}

/* ---- surfaces ---- */
.card.flush{padding:0; overflow:hidden}
.empty{text-align:center; padding:40px 20px; color:var(--ink-3)}

/* ---- the file row ---- */
.file{display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit;
      padding:16px 18px; min-height:var(--tap); border-bottom:1px solid var(--hairline)}
.file:last-child{border-bottom:0}
.file:hover,.file:active{background:var(--surface-2)}
/* The name keeps at least 190px. A long badge ("Data sheet in progress") that
   will not fit beside it drops to a second line instead of squeezing an
   address into one word per line. */
.file{flex-wrap:wrap; row-gap:8px}
.file .body{flex:1 1 190px; min-width:0}
.file .nm{font-size:1.0625rem; font-weight:600; letter-spacing:-.01em}
.file .meta{font-size:.8125rem; color:var(--ink-3); margin-top:3px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file .who{font-size:.75rem; color:var(--ink-3); margin-top:5px; font-weight:550;
           text-transform:uppercase; letter-spacing:.05em}
.chev{color:var(--silver); font-size:1.25rem; line-height:1; flex-shrink:0; margin-left:auto}

/* ---- badges: fill + dot + words, so tone is never doing the work alone ---- */
.badge{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
       padding:5px 11px 5px 9px; border-radius:20px; font-size:.75rem; font-weight:650;
       letter-spacing:.01em; border:1px solid transparent}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0}
/* your move: solid fill, solid dot */
.badge.act{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.badge.act::before{background:var(--on-ink)}
/* waiting on somebody else: outline, hollow ring */
.badge.wait{background:transparent; color:var(--ink-2); border-color:var(--silver)}
.badge.wait::before{background:transparent; box-shadow:inset 0 0 0 2px var(--ink-2)}
/* dormant / done: soft fill, flat dash */
.badge.done{background:var(--surface-2); color:var(--ink-3); border-color:var(--hairline)}
.badge.done::before{border-radius:1px; height:2px; width:9px; background:var(--silver)}

/* ---- controls the console adds to the shared set ---- */
input[type=file]{padding:10px 12px; font-size:.9375rem}
legend{font-size:.75rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
       color:var(--ink-3); padding:22px 0 2px}

/* ---- data ---- */
table{border-collapse:collapse; width:100%; font-size:.9375rem}
td{padding:11px 0; vertical-align:top; border-bottom:1px solid var(--hairline)}
tr:last-child td{border-bottom:0}
td.k{color:var(--ink-3); width:46%; padding-right:12px}
td.v{font-weight:550}
.sect td{background:var(--surface-2); font-size:.6875rem; font-weight:650; letter-spacing:.07em;
         text-transform:uppercase; color:var(--ink-3); padding:8px 10px;
         border-radius:6px; border-bottom:0}

/* ---- a short list of things a person has to check or do themselves ----
   Used where the system is telling somebody what it deliberately did not do
   for them, so it reads as prose rather than as a form. */
ul.check{margin:0; padding-left:20px; font-size:.875rem; line-height:1.5; color:var(--ink-2)}
ul.check li{margin-top:6px}

/* ---- messages ---- */
.msg{border:1px solid var(--hairline); border-left:3px solid var(--ink);
     background:var(--surface); border-radius:10px; padding:14px 16px;
     margin-bottom:14px; font-size:.9375rem}
.msg.quiet{border-left-color:var(--silver); color:var(--ink-2)}
.msg b{font-weight:650}
.linkbox{font:.8125rem ui-monospace,"SF Mono",Menlo,monospace; color:var(--ink-2);
   background:var(--surface-2); border:1px solid var(--hairline); border-radius:10px;
   padding:12px 14px; word-break:break-all; margin-top:10px}
.log{font:.75rem/1.7 ui-monospace,"SF Mono",Menlo,monospace; color:var(--ink-3);
     white-space:pre-wrap; word-break:break-word; max-height:280px; overflow:auto}
.pill{display:inline-block; background:var(--surface-2); border:1px solid var(--hairline);
      border-radius:6px; padding:3px 8px; font-size:.75rem; color:var(--ink-3); margin:2px 6px 0 0}

/* ---- section head: a title and one control on the same baseline ---- */
.head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
      margin:28px 0 10px}
.head h3{margin:0}
.head a{font-size:.8125rem; font-weight:600; color:var(--ink-2); text-decoration:none}

/* ---- segmented control: the shelves of the vault ----
   One shelf is showing and the others are one tap away. The selected segment is
   told apart by a raised white card, not by hue, same rule as the badges. */
.seg{display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--hairline);
     border-radius:11px; padding:2px}
.seg a{flex:1; min-width:0; min-height:36px; display:flex; align-items:center;
       justify-content:center; gap:6px; padding:7px 8px; border-radius:9px;
       font-size:.8125rem; font-weight:600; color:var(--ink-3); text-decoration:none;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seg a[aria-current=page]{background:var(--surface); color:var(--ink);
       box-shadow:0 1px 3px rgba(0,0,0,.13), 0 0 0 .5px rgba(0,0,0,.05)}
.seg a .n{font-size:.6875rem; font-weight:650; color:var(--ink-3);
          font-variant-numeric:tabular-nums}
.seg a[aria-current=page] .n{color:var(--ink-2)}

/* ---- a document in the vault ----
   The glyph is a sheet of paper with a folded corner and its type stamped on
   it, so a PDF and a photo of an ID are told apart before the filename is read. */
.doc{display:flex; gap:13px; align-items:center; padding:13px 18px; min-height:var(--tap);
     text-decoration:none; color:inherit; border-bottom:1px solid var(--hairline)}
.doc:last-child{border-bottom:0}
.doc:hover,.doc:active{background:var(--surface-2)}
.doc .glyph{position:relative; flex-shrink:0; width:36px; height:44px; border-radius:5px;
     border:1px solid var(--silver); background:var(--surface-2);
     display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px;
     font:700 .5rem/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.05em;
     color:var(--ink-3); text-transform:uppercase; overflow:hidden}
.doc .glyph::after{content:""; position:absolute; top:-1px; right:-1px; width:11px; height:11px;
     background:var(--bg); border-left:1px solid var(--silver);
     border-bottom:1px solid var(--silver); border-bottom-left-radius:3px}
.doc .body{display:block; flex:1; min-width:0}
.doc .nm{display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
     overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc .meta{display:block; font-size:.75rem; color:var(--ink-3); margin-top:3px;
     overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc .kind{display:block; font-size:.6875rem; font-weight:650; text-transform:uppercase;
     letter-spacing:.05em; color:var(--ink-3); margin-bottom:3px}

/* ---- stage rail: where this file is in its seven states ---- */
.rail{display:flex; align-items:center; margin:16px 0 6px}
.rail .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;
     border:1.5px solid var(--silver); background:transparent}
.rail .dot.past{background:var(--silver)}
.rail .dot.now{width:13px; height:13px; background:var(--ink); border-color:var(--ink);
     box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 13%,transparent)}
.rail .bar{flex:1; height:1.5px; background:var(--hairline); min-width:6px}
.rail .bar.past{background:var(--silver)}
.railcap{font-size:.75rem; color:var(--ink-3); display:flex; justify-content:space-between;
     gap:10px; font-variant-numeric:tabular-nums}

/* ---- tiles: the numbers a broker reads first ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
       gap:10px; margin-bottom:12px}
.tile{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r);
      padding:15px 16px; text-decoration:none; color:inherit; display:block}
/* Proportional figures on a standalone number: tabular digits are for columns
   that have to line up, and make a lone 121 look loose. */
.tile .n{font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1.05}
/* The one hero figure on a page: the lead tile, 48px, same face as the rest. */
.tile.lead .n{font-size:3rem}
.tile .lbl{font-size:.75rem; font-weight:600; color:var(--ink-3); margin-top:5px;
           letter-spacing:.01em}
.tile.lead{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.tile.lead .lbl{color:color-mix(in srgb,var(--on-ink) 64%,transparent)}

/* ---- a stage of the pipeline, as a row with a proportion bar ---- */
.stage{display:flex; align-items:center; gap:12px; padding:11px 18px;
       border-bottom:1px solid var(--hairline); text-decoration:none; color:inherit}
.stage:last-child{border-bottom:0}
.stage .lbl{flex:1; min-width:0; font-size:.9375rem; overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap}
.stage .track{display:block; width:88px; height:8px; border-radius:4px; background:var(--hairline);
              overflow:hidden; flex-shrink:0}
/* Square where it leaves the baseline, rounded at the data end. */
.stage .fill{display:block; height:100%; border-radius:0 4px 4px 0; background:var(--ink-3)}
.stage.act .fill{background:var(--ink)}
.stage .n{width:26px; text-align:right; font-size:.9375rem; font-weight:650;
          font-variant-numeric:tabular-nums; flex-shrink:0}
.stage.zero{color:var(--ink-3)}

/* ---- a realtor on the overview ---- */
.who-card{background:var(--surface); border:1px solid var(--hairline);
          border-radius:var(--r); padding:16px 18px; margin-bottom:10px}
.who-card .top{display:flex; align-items:center; gap:12px}
.who-card .init{width:38px; height:38px; border-radius:50%; flex-shrink:0;
     background:var(--ink); color:var(--on-ink); display:flex; align-items:center;
     justify-content:center; font-size:.8125rem; font-weight:650; letter-spacing:.02em}
.who-card .nm{flex:1; min-width:0; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em}
.who-card .cnt{font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
/* A 2px gap in the surface colour between segments, never a stroke around
   them: neighbours one step of grey apart read apart because of the gap. */
.who-card .split{display:flex; gap:2px; height:8px; border-radius:4px; overflow:hidden;
     margin:14px 0 4px}
.who-card .split i{display:block; min-width:4px}
.who-card .split i.act{background:var(--ink)}
.who-card .split i.wait{background:var(--silver)}
.who-card .split i.done{background:var(--hairline)}
.who-card .inset{border:1px solid var(--hairline); border-radius:10px; overflow:hidden;
     margin-top:12px; background:var(--surface-2)}
.who-card .inset .file{padding:12px 14px}
.key{display:flex; flex-wrap:wrap; gap:12px; font-size:.75rem; color:var(--ink-3)}
.key span{display:inline-flex; align-items:center; gap:5px}
.key i{width:8px; height:8px; border-radius:2px; display:block}
.key i.act{background:var(--ink)}
.key i.wait{background:var(--silver)}
.key i.done{background:var(--hairline); border:1px solid var(--silver)}

/* ---- the dashboard ---- */
.tiles .tile.lead{grid-column:span 1}
.head h3 + a, .head a{white-space:nowrap}
.scope{margin:14px 0 18px; overflow-x:auto}
.scope a{flex:0 0 auto; min-width:64px}
.grid2{display:grid; grid-template-columns:1fr; gap:0 12px}
@media (min-width:640px){ .grid2{grid-template-columns:1fr 1fr} }
.grid2 .card{margin-bottom:0}

/* ---- Unit found: the form on the left, the round's documents on the right ---- */
main.wide{max-width:1120px}
.unitgrid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start}
.unitside{position:sticky; top:84px}
.unitside .card{padding:16px 0 6px}
.unitside h3{margin:0 18px 8px}
.docs{list-style:none; margin:0; padding:0}
.docs li{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
         padding:10px 18px; border-top:1px solid var(--hairline)}
.docs .no{flex:0 0 44px; font-size:.8125rem; font-weight:650; color:var(--ink);
          font-variant-numeric:tabular-nums}
.docs .nm{flex:1 1 160px; min-width:0; font-size:.875rem; color:var(--ink-2)}
.docs .badge{margin-left:56px}
.docs li.added .no::after{content:""; display:inline-block; width:6px; height:6px;
                          border-radius:50%; background:var(--ink); margin-left:6px;
                          vertical-align:middle}
.unitside h3.opth{margin:14px 18px 8px}
.docs.opt .no,.docs.opt .nm{color:var(--ink-3); font-weight:550}
.docs li.fresh{animation:docin 1.8s ease-out}
@keyframes docin{0%,35%{background:var(--silver)} 100%{background:transparent}}
@media (prefers-reduced-motion:reduce){ .docs li.fresh{animation:none} }
@media (max-width:900px){
  .unitgrid{grid-template-columns:minmax(0,1fr)}
  .unitside{position:static; order:-1}
}
.minis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px 16px}
.mini .n{font-size:1.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.mini .lbl{font-size:.75rem; color:var(--ink-3); font-weight:600; margin-top:3px}
.actions{margin-top:22px}

/* A date, as a small calendar leaf: month over day. */
.date{flex-shrink:0; width:44px; text-align:center; border:1px solid var(--hairline);
      border-radius:9px; padding:4px 0 5px; font-size:1.0625rem; font-weight:700;
      line-height:1.1; background:var(--surface)}
.date b{display:block; font-size:.625rem; font-weight:650; letter-spacing:.08em;
        text-transform:uppercase; color:var(--ink-3)}
/* Already past: inverted, so it is told apart by fill and not by shade. */
.date.past{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.date.past b{color:color-mix(in srgb,var(--on-ink) 70%,transparent)}

/* ---- a column chart: one series, one ink, the numbers underneath ---- */
figure.chart{margin:0}
figure.chart figcaption{font-size:.9375rem; font-weight:650; margin-bottom:12px}
figure.chart figcaption span{font-weight:500; color:var(--ink-3); margin-left:6px;
     font-size:.8125rem}
.cols{display:flex; align-items:flex-end; gap:2px; height:120px;
      border-bottom:1px solid var(--hairline); padding-top:18px}
.cols .col{flex:1; min-width:0; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; align-items:center; position:relative}
.cols .col .b{display:block; width:min(24px,72%); background:var(--ink);
      border-radius:4px 4px 0 0; min-height:0}
.cols .col .b.z{height:0 !important}
.cols .col .v{position:absolute; top:-18px; left:0; right:0; text-align:center;
      font-size:.75rem; font-weight:650; color:var(--ink-2)}
.cols .col:hover .b{background:var(--ink-2)}
.xaxis{display:flex; justify-content:space-between; font-size:.6875rem;
       color:var(--ink-3); margin-top:6px}
details.twin{margin-top:10px; font-size:.8125rem}
details.twin summary{cursor:pointer; color:var(--ink-3); font-weight:600;
       min-height:32px; display:flex; align-items:center}
details.twin table{font-size:.8125rem; margin-top:6px}
details.twin td{padding:6px 0}
td.num,th{font-variant-numeric:tabular-nums; text-align:right}
table.grid th{font-size:.6875rem; font-weight:650; letter-spacing:.05em;
       text-transform:uppercase; color:var(--ink-3); padding:6px 0 6px 8px}
table.grid th:first-child{text-align:left; padding-left:0}
table.grid td.num{padding-left:8px}

/* ---- a realtor on the team overview ---- */
.who-card .nm .seen{display:block; font-size:.75rem; font-weight:500;
     color:var(--ink-3); letter-spacing:0; margin-top:2px}
.who-card .open{font-size:.8125rem; font-weight:600; color:var(--ink-2);
     text-decoration:none; white-space:nowrap; padding:8px 0 8px 8px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px}
.stats div{background:var(--surface-2); border-radius:9px; padding:8px 10px}
.stats b{display:block; font-size:1.25rem; font-weight:700; letter-spacing:-.02em}
.stats span{display:block; font-size:.6875rem; color:var(--ink-3); font-weight:600;
     margin-top:1px}

/* ---- access ---- */
.acct{display:flex; gap:12px; align-items:center; padding:14px 18px;
      border-bottom:1px solid var(--hairline); flex-wrap:wrap}
.acct:last-child{border-bottom:0}
.acct .body{flex:1; min-width:200px}
.acct .nm{font-weight:650}
.acct .meta{font-size:.8125rem; color:var(--ink-3); margin-top:2px}
.acct form button, .acct .btn{margin:0; width:auto; padding:10px 14px}
.linkbox.temp{font-size:1.25rem; letter-spacing:.04em; text-align:center}

/* ---- quiet marker: a file that has sat still too long ---- */
/* Scoped to span. The bare class selector also matched every .msg.quiet
   banner, which then rendered as one clipped line with a triangle in front --
   the test-mode warning on the send screen among them. */
span.quiet{font-size:.75rem; font-weight:650; color:var(--ink-2); letter-spacing:.01em;
       white-space:nowrap; display:inline-flex; align-items:center; gap:5px}
span.quiet::before{content:""; width:0; height:0; flex-shrink:0;
       border-left:4.5px solid transparent; border-right:4.5px solid transparent;
       border-bottom:8px solid var(--ink-2)}

/* ---- carried over: a value the next offer took from the last one ---- */
span.carried{font-size:.75rem; font-weight:600; color:var(--ink-2); text-transform:none;
       letter-spacing:0; margin-left:6px; padding:1px 7px; border:1px solid var(--silver);
       border-radius:999px; white-space:nowrap}

/* ---- the voice board: cards to review before a file opens ---- */
.vboard{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px}
@media (max-width:760px){.vboard{grid-template-columns:1fr}}
.vcol h2{font-size:.75rem; font-weight:650; text-transform:uppercase; letter-spacing:.06em;
         color:var(--ink-3); margin:0 0 8px}
.vcard{display:block; background:var(--surface); border:1px solid var(--hairline);
       border-radius:var(--r); padding:12px 14px; margin-bottom:10px; color:var(--ink);
       text-decoration:none; min-width:0}
.vcard:hover{border-color:var(--silver)}
.vcard .who{display:block; font-weight:650}
.vcard .what{display:block; font-size:.8125rem; color:var(--ink-2); margin-top:2px}
.vcard .said{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
             overflow:hidden; font-size:.8125rem; color:var(--ink-3); margin-top:6px;
             overflow-wrap:anywhere}
.vflag{display:inline-block; font-size:.75rem; font-weight:650; margin-top:8px;
       padding:1px 8px; border:1px solid var(--ink); border-radius:999px}
.vflag.dim{border-color:var(--silver); color:var(--ink-2); font-weight:550}
.heard{border-left:3px solid var(--silver); padding:4px 0 4px 12px; margin:10px 0 0;
       color:var(--ink-2); font-size:.9375rem; overflow-wrap:anywhere}
.sure{display:block; font-size:.75rem; color:var(--ink-3); margin-top:4px}
.sure.check{color:var(--ink); font-weight:650}
.vperson{border-top:1px solid var(--hairline); margin-top:16px}
.vstatus{border:1.5px solid var(--ink); border-radius:10px; padding:10px 14px; margin-top:14px}
.vstatus.dim{border:1px solid var(--silver)}
.vstatus ul{margin:6px 0 0; padding-left:18px; font-size:.875rem}
p.example{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
          color:var(--ink-3)}