/* Lorne & Vale · the product interface, drawn rather than photographed.
 *
 * A screenshot of the platform is a fixed grid of pixels: the moment it is
 * shown at anything other than its capture size it is resampled, and on a
 * retina display it is resampled upward, which is what made every framed
 * figure on this site look soft. These components draw the same screens with
 * text and borders, so they are resolved by the device at its own density and
 * stay sharp at any size, in either theme, at a fraction of the weight.
 *
 * Fidelity is the point, not invention: the palette below is the product's own
 * (apps/web/tailwind.config.ts, v7 "Cupertino"), the labels are the product's
 * labels, and the data is the same fictional firm the iPhone captures show.
 * Nothing here depicts a capability the platform does not have.
 *
 * Everything is sized in em from .ui, so one font-size scales a whole screen
 * the way a screenshot scales, without ever losing definition.
 */

/* A drawn screen sizes itself from the column it sits in, not from the
   viewport: the same screen appears full width in a hero and in a half-width
   story column, and in the narrow case it drops the sidebar and shows the
   working area, the way the product itself does when the window narrows. */
.uiwrap,.stage__win{container-type:inline-size}

.ui{
  --u-ink:#1d1d1f; --u-ink2:#48484a;
  /* The product uses #86868b for muted text, which reads 3.3:1 on its own
     canvas. In a screenshot that was nobody's business but the app's; drawn
     here it is text on this page, so the muted tone is darkened to clear
     4.5:1 without changing the character of the interface. */
  --u-ink3:#6b6b70;
  --u-line:#d2d2d7; --u-line2:#e8e8ed; --u-canvas:#f5f5f7; --u-card:#fff;
  --u-brand:#0071e3; --u-hot:#d70015; --u-warm:#c93400; --u-good:#248a3d;
  --u-chrome:#1d1d1f;
  font-size:clamp(11px,1.12vw,14.5px);
  font-size:clamp(11px,2.05cqi,14.5px);
  font-family:var(--ff);
  line-height:1.45;
  color:var(--u-ink);
  background:var(--u-canvas);
  display:grid;
  grid-template-columns:15.5em 1fr;
  border-radius:1.4em;
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--sh-2);
  border:1px solid rgba(0,0,0,.08);
  /* No shape unless a page asks for one: the frame fits the screen it draws,
     so no figure ever carries a band of empty canvas. */
  aspect-ratio:var(--ar,auto);
}
.ui--nochrome{grid-template-columns:1fr}
.ui *{box-sizing:border-box}

/* ---------- Sidebar ---------- */
.ui__side{background:var(--u-chrome);color:#f5f5f7;padding:1.1em 0;display:flex;flex-direction:column;gap:.15em;overflow:hidden}
.ui__firm{display:flex;align-items:center;gap:.7em;padding:0 1.1em 1.1em;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:.9em}
.ui__mark{width:2.1em;height:2.1em;border-radius:.6em;background:#fff;color:#1d1d1f;display:grid;place-items:center;font-weight:700;font-size:.88em;flex:none;letter-spacing:-.02em}
.ui__firmname{display:block;font-size:.95em;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui__firmsub{display:block;font-size:.88em;color:rgba(245,245,247,.5)}
.ui__group{font-size:.79em;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,247,.62);padding:.9em 1.4em .5em}
.ui__nav{display:flex;align-items:center;gap:.75em;padding:.55em 1.4em;font-size:.92em;color:rgba(245,245,247,.82)}
.ui__nav svg{width:1.15em;height:1.15em;flex:none;opacity:.85}
.ui__nav.is-on{color:#fff;background:rgba(255,255,255,.1)}

/* ---------- Main column ---------- */
.ui__main{display:flex;flex-direction:column;min-width:0;background:var(--u-canvas)}
.ui__top{display:flex;align-items:center;gap:.8em;padding:.85em 1.5em;border-bottom:1px solid var(--u-line2);background:rgba(255,255,255,.72);font-size:.9em;color:var(--u-ink3)}
.ui__crumb{display:flex;align-items:center;gap:.5em;white-space:nowrap;overflow:hidden}
.ui__crumb b{color:var(--u-ink);font-weight:600}
.ui__crumb i{font-style:normal;opacity:.5}
.ui__topr{margin-left:auto;display:flex;align-items:center;gap:.7em}
.ui__search{display:flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--u-line);border-radius:.6em;padding:.35em .7em;color:var(--u-ink3);min-width:14em}
.ui__search svg{width:1em;height:1em}
.ui__btn{background:var(--u-brand);color:#fff;border-radius:.6em;padding:.4em .9em;font-size:.92em;font-weight:500;white-space:nowrap}
.ui__body{padding:1.5em;overflow:hidden;display:flex;flex-direction:column;gap:1.1em;min-height:0;flex:1}
.ui__h1{display:block;font-size:1.85em;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.ui__lede{font-size:.98em;color:var(--u-ink2);margin-top:.25em}

/* ---------- Cards ---------- */
.uic{background:var(--u-card);border:1px solid var(--u-line2);border-radius:1em;padding:1.15em 1.25em}
.uic--flush{padding:0;overflow:hidden}
.uic__hd{display:flex;align-items:center;gap:.7em;margin-bottom:.7em}
.uic__k{font-size:.81em;letter-spacing:.09em;text-transform:uppercase;color:var(--u-ink3);font-weight:600}
.uic__t{font-size:1.05em;font-weight:600;letter-spacing:-.01em}

/* ---------- Chips ---------- */
.uich{display:inline-flex;align-items:center;gap:.42em;border:1px solid var(--u-line);border-radius:2em;
  padding:.26em .68em;font-size:.89em;font-weight:500;background:#fff;white-space:nowrap;color:var(--u-ink);max-width:100%;overflow:hidden}
.uich::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--u-ink3);flex:none}
.uich--none::before{display:none}
.uich--hot::before{background:var(--u-hot)}
.uich--warm::before{background:var(--u-warm)}
.uich--good::before{background:var(--u-good)}
.uich--ink{background:var(--u-ink);border-color:var(--u-ink);color:#fff}
.uich--ink::before{background:#fff}
.uich--red{background:#fdeceb;border-color:#f7d3d1;color:#a5141c}
.uich--red::before{background:var(--u-hot)}
.uich--soft{background:var(--u-canvas);border-color:var(--u-line2);color:var(--u-ink2)}

/* ---------- Score ---------- */
.uiscore{display:flex;align-items:center;gap:.6em}
.uiscore b{font-size:2.3em;font-weight:700;letter-spacing:-.04em;line-height:1}
.uiscore span{font-size:1em;color:var(--u-ink3);align-self:flex-end;padding-bottom:.28em}
.uibar{height:.32em;border-radius:.2em;background:var(--u-line2);flex:1;max-width:9em;overflow:hidden}
.uibar i{display:block;height:100%;border-radius:.2em;background:var(--u-ink)}

/* ---------- Label / value pairs ---------- */
.uikv{display:grid;grid-template-columns:1fr 1fr;gap:1em 1.6em;margin-top:1em}
.uikv>div{min-width:0}
.uikv .uikv__k{display:block;font-size:.81em;letter-spacing:.09em;text-transform:uppercase;color:var(--u-ink3);font-weight:600;margin-bottom:.2em}
.uikv .uikv__v{display:block;font-size:.98em;color:var(--u-ink)}
.uikv--1{grid-template-columns:1fr}

/* ---------- Rows (enquiry list) ---------- */
.uirows{display:flex;flex-direction:column}
.uihead,.uirow{display:grid;grid-template-columns:minmax(0,1fr) 8.2em 6.6em 10.6em 4.2em;gap:.9em;align-items:center;padding:.75em 1.15em}
.uihead{font-size:.79em;letter-spacing:.06em;text-transform:uppercase;color:var(--u-ink3);font-weight:600;border-bottom:1px solid var(--u-line2)}
.uihead>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uihead>span:last-child{text-align:right}
.uirow{border-bottom:1px solid var(--u-line2)}
.uirow:last-child{border-bottom:0}
.uirow.is-hot{background:#fdf5f5}
.uirow__who{display:flex;align-items:center;gap:.7em;min-width:0}
.uiav{width:2em;height:2em;border-radius:50%;background:var(--u-canvas);border:1px solid var(--u-line2);
  display:grid;place-items:center;font-size:.8em;font-weight:600;color:var(--u-ink2);flex:none}
.uiav--ink{background:var(--u-ink);border-color:var(--u-ink);color:#fff}
.uirow__txt{min-width:0}
.uirow__txt b{display:block;font-size:.98em;font-weight:600;letter-spacing:-.01em}
.uirow__txt span{display:block;font-size:.89em;color:var(--u-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uisel{display:inline-flex;align-items:center;gap:.45em;border:1px solid var(--u-line);border-radius:2em;padding:.26em .62em;font-size:.89em;background:#fff;white-space:nowrap;max-width:100%;overflow:hidden}
.uisel::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--u-ink3)}
.uisel svg{width:.7em;height:.7em;opacity:.5}
.uinum{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.uinum span{color:var(--u-ink3);font-weight:400}

/* ---------- Start-here band ---------- */
.uistart{display:flex;gap:1em;align-items:flex-start;background:#fff;border:1px solid var(--u-line2);border-radius:1em;padding:1.05em 1.2em}
.uistart__ic{width:2em;height:2em;border-radius:.55em;background:#eaf3ff;color:var(--u-brand);display:grid;place-items:center;flex:none}
.uistart__ic svg{width:1.1em;height:1.1em}
.uistart__b{min-width:0;flex:1}
.uistart__k{display:flex;align-items:center;gap:.7em;font-size:.81em;letter-spacing:.09em;text-transform:uppercase;color:var(--u-ink3);font-weight:600;margin-bottom:.5em}

/* ---------- Filter bar ---------- */
.uifilters{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.uitab{border:1px solid var(--u-line);border-radius:2em;padding:.32em .8em;font-size:.88em;background:#fff;white-space:nowrap}
.uitab b{font-weight:500}
.uitab i{font-style:normal;color:var(--u-ink3);margin-left:.4em}
.uitab.is-on{background:var(--u-ink);border-color:var(--u-ink);color:#fff}
.uitab.is-on i{color:rgba(255,255,255,.6)}

/* ---------- Board ---------- */
.uiboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;min-height:0;align-content:start}
.uicol__hd{display:flex;align-items:center;gap:.6em;font-size:.88em;letter-spacing:.08em;text-transform:uppercase;color:var(--u-ink3);font-weight:600;margin-bottom:.7em}
.uicol__hd b{color:var(--u-ink);font-size:1.1em;letter-spacing:0}
.uicol__hd em{font-style:normal;color:var(--u-hot);letter-spacing:0;text-transform:none;font-size:1.05em}
.uicard{background:#fff;border:1px solid var(--u-line2);border-radius:.85em;padding:.85em .95em;margin-bottom:.7em}
.uicard__t{display:flex;align-items:baseline;gap:.6em}
.uicard__t b{font-size:.98em;font-weight:600;letter-spacing:-.01em;flex:1;min-width:0}
.uicard__sub{font-size:.89em;color:var(--u-ink3);margin-top:.15em}
.uicard__ft{display:flex;align-items:center;gap:.6em;margin-top:.7em;font-size:.88em}

/* ---------- Stat tiles ---------- */
.uistats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em}
.uistat{background:#fff;border:1px solid var(--u-line2);border-radius:.9em;padding:.9em 1em}
.uistat__k{display:flex;align-items:center;gap:.5em;font-size:.80em;letter-spacing:.08em;text-transform:uppercase;color:var(--u-ink3);font-weight:600}
.uistat b{display:block;font-size:1.9em;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:.15em}
.uistat span{display:block;font-size:.88em;color:var(--u-ink3)}
.uistat em{font-style:normal;color:var(--u-good)}

/* ---------- Distribution bars ---------- */
.uidist{display:grid;gap:.55em}
.uidist__r{display:grid;grid-template-columns:9em 1fr 1.6em;gap:.8em;align-items:center;font-size:.9em}
.uidist__t{height:.5em;border-radius:.3em;background:var(--u-line2);overflow:hidden}
.uidist__t i{display:block;height:100%;border-radius:.3em;background:var(--u-brand)}
.uidist__n{text-align:right;font-variant-numeric:tabular-nums;color:var(--u-ink2)}

/* ---------- Toggle ---------- */
.uisw{width:2.4em;height:1.4em;border-radius:1em;background:var(--u-line);position:relative;flex:none}
.uisw::after{content:"";position:absolute;top:.15em;left:.15em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.uisw.is-on{background:var(--u-brand)}
.uisw.is-on::after{left:auto;right:.15em}

/* ---------- Code / address field ---------- */
/* A read-only value the firm copies out: an intake address or a page URL. It
   wraps rather than truncates; the point of showing the field is that the
   whole value is there to read. Anywhere, because the value is one long token
   with no spaces to break on. */
.uifield{background:var(--u-canvas);border:1px solid var(--u-line2);border-radius:.6em;padding:.55em .75em;font-family:var(--mono);font-size:.88em;color:var(--u-ink2);
  overflow-wrap:anywhere}

/* Two cards side by side. The tracks floor at zero so a long unbroken value
   inside one of them cannot push the pair wider than the screen it sits in,
   and they stack once the frame is too narrow to read them side by side. */
.uipair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1em}
@container (max-width:620px){.uipair{grid-template-columns:minmax(0,1fr)}}

/* ---------- Alert band ---------- */
.uialert{display:flex;align-items:flex-start;gap:.7em;border:1px solid #f7d3d1;background:#fdeceb;border-radius:.85em;padding:.8em 1em;font-size:.92em;color:#a5141c}
.uialert svg{width:1.1em;height:1.1em;flex:none;margin-top:.1em}

/* ---------- Dark band placement ---------- */
.dk .ui{border-color:rgba(255,255,255,.12);box-shadow:0 50px 140px rgba(0,0,0,.6)}

@container (max-width:780px){
  .ui{grid-template-columns:1fr}
  .ui__side{display:none}
  .ui__body{padding:1.15em}
  .uikv{grid-template-columns:1fr;gap:.85em}
  .uihead,.uirow{grid-template-columns:minmax(0,1fr) 7em 8.6em;gap:.7em}
  .uihead>span:nth-child(3),.uirow>span:nth-child(3){display:none}
  .uihead>span:nth-child(5),.uirow>span:nth-child(5){display:none}
  .uiboard{grid-template-columns:1fr 1fr}
  .uiboard>div:last-child{display:none}
}
/* Narrower still (a drawn screen sitting in one column of a three-up section):
   the stage pill goes, because the response time is the column that carries the
   argument, and at this width both together clipped the chip. */
@container (max-width:430px){
  .uihead,.uirow{grid-template-columns:minmax(0,1fr) 9.6em;gap:.6em}
  .uihead>span:nth-child(2),.uirow>span:nth-child(2){display:none}
  .uistats{grid-template-columns:1fr 1fr}
}

/* ---------- Phone-width behaviour ----------
   These screens are drawn at desktop proportions, so a full window steps aside
   below the breakpoint and the page shows the iPhone instead. That default had
   a cost nobody intended: with the hero window also hidden in lv.css, a reader
   on a phone never saw the platform anywhere on the site, and the product read
   as an iPhone app with a website attached. The @container rules above were
   written precisely for a narrow drawn screen, so a section that wants one
   opts in and gets the compact layout rather than nothing. */
@media (max-width:900px){
  .ui{display:none}
  .uiwrap--sm .ui{display:grid}
}

/* ---------- Matter lifecycle and line rows ---------- */
.uisteps{display:flex;gap:.5em;flex-wrap:wrap}
.uistep{border:1px solid var(--u-line);border-radius:2em;padding:.3em .85em;font-size:.89em;background:#fff;color:var(--u-ink3)}
.uistep.is-on{background:var(--u-ink);border-color:var(--u-ink);color:#fff}
.uiline{display:flex;align-items:center;gap:.8em;justify-content:space-between;padding:.5em 0;border-bottom:1px solid var(--u-line2);font-size:.94em}
.uiline:last-of-type{border-bottom:0}

/* ---------- The acknowledgement, as the client receives it ----------
   The third surface is the firm's own email. The reply goes out under the
   firm's name and address, so the person who wrote in never sees ours, and the
   partner's weekly report arrives the same way. Drawn from the same tokens as
   the platform above it, at the same em scale, so the two read as one system
   rather than as two products photographed side by side. */
.uimail{background:var(--u-card);border:1px solid var(--u-line2);border-radius:1em;overflow:hidden}
.uimail__hd{padding:1.05em 1.2em;border-bottom:1px solid var(--u-line2);background:rgba(255,255,255,.72)}
.uimail__subj{font-size:1.02em;font-weight:600;letter-spacing:-.01em;color:var(--u-ink);margin-bottom:.5em}
.uimail__row{display:flex;align-items:center;gap:.5em;font-size:.86em;color:var(--u-ink3);margin-top:.18em}
.uimail__row b{font-weight:600;color:var(--u-ink2)}
.uimail__row time{margin-left:auto;font-variant-numeric:tabular-nums;flex:none}
.uimail__body{padding:1.1em 1.2em;font-size:.96em;line-height:1.62;color:var(--u-ink2)}
.uimail__body p+p{margin-top:.65em}
.uimail__ft{display:flex;flex-wrap:wrap;gap:.45em;padding:0 1.2em 1.1em}