/* ===== SealPal glass theme: page layouts in the workspace (Beta 1.4) =====
   Loaded last in index.html. The topbar and grids at every width, the lawyer cards, the fluid news page and
   the community wall. The paper grain under the page is in paper.css, shared with the homepage. */

/* ---------- Shell: shared content edges, a full-width tablet, and a scrollable navigation drawer ---------- */
:root{--workspace-side:224px;--workspace-gutter:clamp(24px,3vw,40px);--workspace-width:1520px;--workspace-panel-inset:24px}
.sidebar{width:var(--workspace-side);padding:28px 16px 20px;overflow-y:auto;overscroll-behavior:contain}
.sidebar>*{flex-shrink:0}
.sidebar .nav-spacer{flex:1 0 24px}
.sidebar .brand{flex-wrap:nowrap;gap:8px;padding:0 13px 32px}
.sidebar .brand small{flex:none;margin:0;padding:3px 5px;line-height:1.4;letter-spacing:.5px}
.main{margin-left:var(--workspace-side)}
.content{width:100%;max-width:var(--workspace-width);padding:32px var(--workspace-gutter) 40px}
.topbar{height:68px;padding-inline:max(var(--workspace-gutter),calc((100% - var(--workspace-width))/2 + var(--workspace-gutter)))}
.demo-banner{padding:10px max(var(--workspace-gutter),calc((100% - var(--workspace-width))/2 + var(--workspace-gutter)));line-height:1.5}
.content h1,.page-heading h1{font-size:clamp(1.8rem,2.5vw,2.5rem)}
.page-heading{margin-bottom:24px}
.card-header,.card-body{padding:20px var(--workspace-panel-inset)}
.rail-card{padding:20px var(--workspace-panel-inset)}
.card-header{flex-wrap:wrap;align-items:center}
.card-header h2{min-width:0}
.card-header>.badge{white-space:normal}
.page-footer{flex-wrap:wrap;padding-top:28px;line-height:1.6}
.rail{display:grid;align-content:start;gap:20px}
.rail>.card{margin-top:0}
.nav-backdrop{display:none}
body.nav-open{overflow:hidden}
@media(max-width:1180px){:root{--workspace-gutter:24px}}
@media(max-width:960px){
  .sidebar{width:248px;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s;box-shadow:none}
  .sidebar.open{transform:none;visibility:visible;box-shadow:none}
  .main{margin-left:0}
  .mobile-menu{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--radius-control);background:none;color:var(--ink)}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:19;border:0;border-radius:0;background:rgba(0,0,0,.3);visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
  .sidebar.open+.nav-backdrop{visibility:visible;opacity:1}
}
@media(max-width:650px){
  :root{--workspace-gutter:16px;--workspace-panel-inset:16px}
  .content{padding-top:24px}
  .topbar{height:64px;padding-inline:var(--workspace-gutter);gap:4px}
  .demo-banner{font-size:11px}
  .card-header,.card-body{padding:18px 16px}
  .page-heading{gap:12px;margin-bottom:20px}
  .topbar .role-select{max-width:136px;font-size:12px}
  .topbar .top-controls{gap:4px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.nav-backdrop{transition:none}}

/* ---------- Topbar: one line at every width (glass.js adds each step until the controls fit) ---------- */
.topbar .breadcrumb,.top-controls>*{white-space:nowrap}
.top-controls>*{flex-shrink:0}
.topbar .role-select{min-height:36px}
.topbar.tb-short .sr-top{justify-content:center;width:40px;padding:0}
.topbar.tb-short .sr-top-label,.topbar.tb-short .sr-top kbd{display:none}
.topbar.tb-short .g-cta .pill-long,.topbar.tb-short .plan-pill .pill-long{display:none}
.topbar.tb-short .g-cta .pill-short,.topbar.tb-short .plan-pill .pill-short{display:inline}
.topbar.tb-lean .breadcrumb>span,.topbar.tb-lean .breadcrumb>svg{display:none}
.topbar.tb-lean .plan-pill:not(.paid){display:none}
.topbar.tb-lean .top-controls{gap:6px}
.topbar.tb-min .breadcrumb,.topbar.tb-min .avatar{display:none}
.topbar.tb-min .top-controls{gap:2px}
.topbar.tb-min .icon-button,.topbar.tb-min .lang-button{padding:4px}
.topbar .g-cta,.topbar .plan-pill,.topbar .sr-top{border-radius:var(--radius-control)}
.topbar .g-cta,.topbar .ac-top-in{display:inline-flex;align-items:center;justify-content:center;min-height:40px;line-height:1.25}
html[data-theme] .topbar .ac-top-in{background:transparent;border-color:transparent;color:var(--ink)}
html[data-theme] .topbar .ac-top-in:hover{background:var(--line)}
.topbar .icon-button,.topbar .lang-button,.topbar .jg-theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;line-height:1}
.topbar .icon-button svg,.topbar .jg-theme-toggle svg{display:block;width:18px;height:18px}
@media(max-width:650px){
  .topbar .breadcrumb,.topbar .sr-top,.topbar .icon-button,.topbar .avatar,.topbar .plan-pill{display:none}
  .topbar .top-controls{gap:4px}
  .topbar .g-cta,.topbar .ac-top-in{min-height:44px;padding:8px 6px;font-size:12px}
  .topbar .g-cta .pill-long{display:none}
  .topbar .g-cta .pill-short{display:inline}
  .topbar .mobile-menu,.topbar .lang-button,.topbar .jg-theme-toggle{width:44px;height:44px;min-width:44px;padding:0}
  .topbar .mobile-menu{margin-left:-8px}
}
@media (max-width:360px){
  .topbar .sr-top{display:none}
  .topbar .role-select,.topbar.tb-min .role-select{max-width:136px;min-width:0;padding-inline:6px}
  .topbar.tb-min .top-controls{gap:0}
}
.quiz fieldset{min-width:0}
.quiz .qopt{min-width:0;overflow-wrap:anywhere}
.rec-head{flex-wrap:wrap}
/* Card contents use the same inset, and actions stay opposite their heading when text wraps. */
.rec-win{padding:20px var(--workspace-panel-inset)}
.rec-win .rec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.rec-win .rec-head h2{grid-column:1;grid-row:1;min-width:0;line-height:1.35}
.rec-win .rec-head>.wh-more{grid-column:2;grid-row:1;justify-self:end}
.rec-win .rec-head>.badge{grid-column:1/-1;justify-self:start;margin:0}
.rec-profile .kv{display:grid;grid-template-columns:minmax(80px,.7fr) minmax(0,1.3fr);align-items:baseline}
.rec-profile .kv b{text-align:left;overflow-wrap:anywhere}
.rec-counts b,.metric .number{font-variant-numeric:tabular-nums lining-nums;line-height:1.2}
.rec-counts>span{align-content:start}
/* A file's metadata and actions align with its name, beside a consistent icon column. */
.document-list .file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding:18px var(--workspace-panel-inset)}
.document-list .file-left{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.document-list .file-icon{display:grid;place-items:center;width:36px;height:36px;padding:0}
.document-list .file-left strong,.document-list .file-left small{overflow-wrap:anywhere}
.content>.row:has(#doc-search){margin-bottom:16px;gap:12px;align-items:center}
.content>.row:has(#doc-search) .list-filters{margin:0}
@media(max-width:650px){
  .document-list .file-row{grid-template-columns:minmax(0,1fr)}
  .document-list .file-row>.row{padding-left:48px;justify-content:flex-start;flex-wrap:wrap}
  .content>.row:has(#doc-search) .search-input{width:100%;max-width:none}
  .content .field input:not([type=checkbox]):not([type=radio]),.content .field select,.content .field textarea,.content .search-input{font-size:16px}
}
/* Explicit early access: a single email field and primary action, with aligned dialog edges. */
#modal:has(.g-email-form){width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
#modal:has(.g-email-form) #modal-content{padding:24px}
#modal:has(.g-email-form) .modal-title{gap:16px;margin-bottom:20px}
#modal:has(.g-email-form) .modal-title h2{font-size:24px;line-height:1.3}
#modal:has(.g-email-form) .close{flex:none;width:44px;height:44px;border-radius:var(--radius-control);background:none}
#modal:has(.g-email-form) .modal-actions:empty{display:none}
.g-email-form{display:grid;gap:16px}
.g-email-form.card{padding:20px var(--workspace-panel-inset)}
.g-email-form .field input{min-height:48px;font-size:16px;line-height:1.5}
.g-email-form .g-actions{display:block}
.g-email-form .g-actions .btn{width:100%;min-height:48px;margin:0}
.g-email-form .g-error{margin:0;font-size:13px;line-height:1.5}
.g-email-form .g-error:empty{display:none}
.g-waitlist{width:min(440px,100%);margin-inline:auto}
@media(max-width:650px){#modal:has(.g-email-form) #modal-content{padding:20px var(--workspace-panel-inset)}}
/* Columns may shrink below their widest field or tab row, which then wraps or scrolls inside, so narrow
   windows never push the page sideways; on tablets, where the sidebar still takes its share of the width,
   two- and three-column grids take fewer columns. */
@media (max-width:920px){.dashboard-grid{grid-template-columns:minmax(0,1fr)}}
@media (min-width:651px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:651px) and (max-width:920px){.grid-2,.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}}
@media (min-width:921px) and (max-width:1180px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Lawyer cards: fluid columns, 8px corners, 16px apart, a slight lift on hover ---------- */
.lawyer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));grid-auto-rows:minmax(200px,auto);gap:16px;padding:0 24px 24px}
.lawyer-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.55);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lawyer-card:hover,.lawyer-card:focus-within{transform:translateY(-4px);border-color:rgba(21,112,230,.55);box-shadow:0 16px 34px -12px rgba(40,34,24,.3)}
html[data-theme=night] .lawyer-card{background:rgba(255,255,255,.06)}
html[data-theme=night] .lawyer-card:hover,html[data-theme=night] .lawyer-card:focus-within{border-color:rgba(21,112,230,.5);box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.lc-head{display:flex;align-items:center;gap:10px;min-width:0}
.lc-head .avatar{width:32px;height:32px;font-size:12px}
.lc-head strong{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-head .badge{flex:none}
.lawyer-card small{display:block;font-size:12px;line-height:1.55;color:var(--muted)}
.lawyer-card small span{white-space:nowrap}
.lawyer-card .lc-also{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lawyer-card .lawyer-stats{margin:0}
.lawyer-card .button-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.lawyer-card .button-group .btn{flex:1 1 auto;margin:0;padding:6px 10px}
@media (max-width:650px){.lawyer-grid{padding:0 16px 20px}}
@media (prefers-reduced-motion:reduce){.lawyer-card{transition:none}.lawyer-card:hover,.lawyer-card:focus-within{transform:none}}

/* ---------- Lawyer portal: a single statistics strip and aligned lead actions ---------- */
.metrics-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1px solid var(--line)}
.metrics-strip .metric{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:20px 24px;border:0;border-right:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.metrics-strip .metric:first-child{padding-left:0}
.metrics-strip .metric:last-child{border-right:0}
.metrics-strip .label{font-size:13px;line-height:1.5;color:var(--muted)}
.metrics-strip .number{margin:8px 0 0;font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.portal-leads .lawyer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:20px 24px}
.portal-leads .lawyer-row>div{min-width:0}
.portal-leads .button-group{display:flex;align-items:center;gap:8px;margin:0}
.portal-leads .button-group .btn{min-width:72px;min-height:40px;margin:0}
@media(max-width:650px){
  .metrics-strip .metric{padding:16px 12px}
  .metrics-strip .label{font-size:12px;min-height:3em}
  .metrics-strip .number{font-size:24px}
  .portal-leads .lawyer-row{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:12px}
  .portal-leads .button-group{justify-content:flex-start;flex-wrap:wrap}
  .portal-leads .button-group .btn{min-height:44px}
}

/* ---------- News: a fluid reading layout, like Medium ---------- */
/* No fixed pixel sizes: widths are percentages, spacing and type are rem, em, vw or clamp() of them, so the
   page stretches and shrinks with the screen. One column below 52em. */
.nf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.5rem 4%;margin-top:1.5rem}
.nf-main{flex:1 1 64%;min-width:0;padding:clamp(1.25rem,3vw,3rem) clamp(1.1rem,3.4vw,3.25rem);border:.0625rem solid var(--glass-border,var(--line));border-radius:var(--radius-panel);background:var(--glass,rgba(255,255,255,.7));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nf-aside{flex:1 1 28%;min-width:0;display:grid;gap:1rem;position:sticky;top:5.5rem}
.nf-aside section{padding:1.4em 1.5em;border:.0625rem solid var(--glass-border,var(--line));border-radius:var(--radius-panel);background:var(--glass,rgba(255,255,255,.7));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nf-aside h2{font-size:1rem;font-weight:700;margin:0 0 .5em}
.nf-aside p{font-size:.875rem;line-height:1.7;color:var(--muted);margin:0}
.nf-aside .btn{margin-top:1em}
.nf-kicker{margin:0 0 .45em;font-size:.8125rem;letter-spacing:.03em;color:var(--muted)}
.nf-kicker b{color:var(--ink);font-weight:700}
.nf-kicker span,.nf-keep{white-space:nowrap}
.nf-lead h2,.nf-item h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.nf-lead h2{margin:.15em 0 .4em;font-size:clamp(1.55rem,1.05rem + 1.6vw,2.6rem);line-height:1.2}
.nf-lead p{margin:0 0 .9em;font-size:clamp(1rem,.94rem + .3vw,1.2rem);line-height:1.65;color:var(--muted)}
.nf-list{list-style:none;margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding:0}
.nf-item{display:grid;grid-template-columns:minmax(0,1fr) 24%;gap:1rem 6%;align-items:start;padding:1.6em 0;border-top:.0625rem solid var(--line)}
.nf-item:last-child{padding-bottom:0}
.nf-item h3{margin:0 0 .35em;font-size:clamp(1.1rem,.92rem + .7vw,1.5rem);line-height:1.3}
.nf-item p{margin:0 0 .7em;font-size:clamp(.9rem,.86rem + .2vw,1rem);line-height:1.65;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-thumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:.5rem;font-family:var(--serif);font-weight:700;font-size:clamp(.8rem,.5rem + 1vw,1.6rem);color:#2b2410;letter-spacing:.02em;text-align:center;padding:.4em}
.nf-lead .nf-thumb{aspect-ratio:21/8;margin-bottom:1.2em;border-radius:.75rem;font-size:clamp(1.6rem,.9rem + 3.4vw,4rem)}
.nf-t0{background:linear-gradient(135deg,#ffe48f,#1570e6)}
.nf-t1{background:linear-gradient(135deg,#f7d9cc,#e6a48c)}
.nf-t2{background:linear-gradient(135deg,#ded8f8,#a597e6)}
.nf-t3{background:linear-gradient(135deg,#d3e8f6,#8dbde0)}
.nf-t4{background:linear-gradient(135deg,#d8eedc,#94c79f)}
.nf-t5{background:linear-gradient(135deg,#f1e8d6,#ccb68b)}
html[data-theme=night] .nf-thumb{filter:saturate(.85) brightness(.8)}
@media (max-width:52em){.nf-main,.nf-aside{flex-basis:100%}.nf-aside{position:static}}

/* ---------- Community: every case type as a wall of tiles of uneven height ---------- */
/* Bricks by CSS columns: three columns on wide screens, fewer as it narrows. A tile only holds totals for a
   group; picking one shows that type's details below. */
.pt-wall-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.pt-wall-h h2{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em}
.pt-wall-h .compact-p{margin:0}
.pt-wall{columns:3 240px;column-gap:16px}
.pt-tile{display:flex;flex-direction:column;gap:8px;width:100%;margin:0 0 16px;padding:18px;break-inside:avoid;border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-panel);background:var(--glass,#fff);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:inherit;font:inherit;text-align:left}
button.pt-tile{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
button.pt-tile:hover{border-color:rgba(21,112,230,.6);box-shadow:0 14px 34px -16px rgba(40,34,24,.35)}
.pt-tile.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.pt-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pt-head b{font-size:17px}
.pt-head span,.pt-n,.pt-mid,.pt-foot{font-size:12px;color:var(--muted)}
.pt-row{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)}
.pt-mode{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.pt-med{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.15}
.pt-few{font-size:13px;color:var(--muted)}
.pt-c{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.pt-c b{font-weight:600}
.pt-c span{color:var(--muted)}
.pt-spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:2px;border-bottom:1px solid var(--line)}
.pt-spark i{flex:1;min-width:0;border-radius:2px 2px 0 0;background:#e9dfbf}
.pt-spark i.med{background:#1570e6}
html[data-theme=night] .pt-spark i{background:rgba(21,112,230,.22)}
html[data-theme=night] .pt-spark i.med{background:#1570e6}
.pt-foot{display:flex;flex-wrap:wrap;gap:4px 14px}
.pt-foot b{color:var(--ink)}
.pt-tile p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
#pt-detail{scroll-margin-top:84px}
#pt-detail:focus{outline:none}

/* ---------- Workspace home (ws-home.js) ---------- */
/* Ask SealPal with a few preset questions on one line, then one screen as a bento: the latest news and what
   people are discussing on the left, your status as the biggest card on the right (timeline and flow chart).
   One radius and one 16px gap throughout; below, every feature as a card. */
.sr-hero{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,2fr);align-items:center;gap:12px 24px;max-width:none;margin:0 0 28px;text-align:left}
.sr-hero h1{font-size:clamp(1.7rem,2.6vw,2.25rem)}
.sr-hero .sr-box{width:100%;max-width:none;margin:0}
.sr-hero .sr-chips{grid-column:2;flex-wrap:wrap;justify-content:flex-start;gap:4px 16px;margin:0}
.sr-hero .sr-chips .chip{max-width:100%;padding:3px 0;border:0;border-radius:0;background:none;font-size:12.5px;text-align:left;white-space:normal;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;line-height:1.7}
.sr-hero .sr-chips .chip:hover{color:var(--green);text-decoration-color:currentColor}
.sr-hero .sr-out{grid-column:2;width:100%;max-width:none;margin:0}
.sr-hero .sr-chips .chip[hidden]{display:none}
.sr-box{border-radius:calc(var(--radius-control) + 6px);padding:6px 6px 6px 16px}
.sr-box .sr-go{border-radius:var(--radius-control)}
html[data-theme] .sr-box{box-shadow:0 2px 8px rgba(0,0,0,.04)}
html[data-theme] .sr-box:focus-within{box-shadow:0 0 0 3px rgba(21,112,230,.2)}
.wh-app .text-link{display:inline;padding:0;border:0;background:none;color:var(--green);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:1180px){
  .sr-hero{grid-template-columns:minmax(0,1fr);gap:12px}
  .sr-hero .sr-chips,.sr-hero .sr-out{grid-column:1}
}
@media(max-width:650px){
  .sr-hero{margin-bottom:20px}
}
.wh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);grid-template-areas:"news status" "com status";gap:16px}
.wh-card-status{grid-area:status}
.wh-card-news{grid-area:news}
.wh-card-com{grid-area:com}
.wh-card-status,.wh-card-news,.wh-card-com{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px var(--workspace-panel-inset) 16px}
.wh-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.wh-head h2{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
.wh-card-status .wh-head h2{font-size:23px}
.wh-head h2 svg{width:19px;height:19px;flex:none;color:var(--green)}
.wh-meta{font-size:12px;color:var(--muted)}
.wh-more{align-self:flex-start;padding:0;border:0;background:none;color:var(--green);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.wh-more:hover{text-decoration:underline;text-underline-offset:3px}
.wh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto}
.wh-actions .btn{min-height:32px;margin:0 0 0 auto;padding:5px 14px}
.wh-tag{display:inline-block;padding:1px 8px;border-radius:var(--radius-control);background:rgba(21,112,230,.18);color:var(--ink);font-size:11.5px;font-weight:600}
.wh-tag.mine{background:rgba(232,106,28,.14);color:#b44a0c}
html[data-theme=night] .wh-tag.mine{background:rgba(255,138,61,.18);color:#ffb07a}
.wh-date{font-size:12.5px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
/* the latest news: one story */
.wh-story{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wh-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.wh-story b{font-size:16.5px;line-height:1.4}
.wh-story:hover b,.wh-story:focus-visible b{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
.wh-sum{font-size:13px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wh-card-news .wh-more{margin-top:auto}
/* what people are discussing */
.wh-topics{display:grid;grid-template-columns:minmax(0,1fr)}
.wh-topic{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"q a s";align-items:baseline;column-gap:10px;padding:7px 0;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wh-topic:first-child{border-top:0;padding-top:0}
.wh-q{grid-area:q;font-size:13.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wh-topic b{grid-area:a;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap}
.wh-topic small{grid-area:s;min-width:4.2em;text-align:right;font-size:11px;color:var(--muted);white-space:nowrap}
.wh-nb{white-space:nowrap}
/* the attorney's guide: one line when it fits, else the byline drops below */
.wh-topic.guide{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.wh-topic.guide .wh-q{display:block;flex:0 1 auto;min-width:0;white-space:nowrap;text-overflow:ellipsis}
.wh-topic.guide small{min-width:0}
.wh-topic:hover .wh-q,.wh-topic:focus-visible .wh-q{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
/* your status: now, the timeline so far and the flow chart ahead */
.wh-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,34%);align-items:center;gap:6px 20px;padding:8px 14px;border:2px solid var(--brand);border-radius:var(--radius-inset);background:rgba(21,112,230,.1)}
.wh-now-side{display:grid;gap:8px;justify-items:start}
.wh-now-side .wh-bar{width:100%}
.wh-now-side .wh-flag{margin:0}
html[data-theme=night] .wh-now{background:rgba(21,112,230,.08)}
.wh-now small{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--green)}
.wh-now b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25}
.wh-now span{font-size:12.5px;color:var(--muted)}
.wh-bar{display:block;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.wh-bar span{display:block;height:100%;border-radius:8px;background:var(--brand)}
.wh-tl{position:relative;padding:16px 0 0}
.wh-track{position:relative;height:22px;border-radius:7px;background:rgba(20,18,14,.05)}
html[data-theme=night] .wh-track{background:rgba(255,255,255,.06)}
.wh-track.plan{height:16px;margin-top:6px;background:none}
.wh-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;min-width:3px;border-radius:7px;overflow:hidden}
.wh-seg.end{justify-content:flex-end}
.wh-seg em{padding:0 7px;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-seg.f1{background:rgba(27,33,48,.16);color:#1b2130}
.wh-seg.cpt{top:3px;bottom:3px;background:#1b2130;border-radius:4px}
.wh-seg.cpt em{display:none}
.wh-seg.opt{background:rgba(21,112,230,.45);color:#0b3f8f}
.wh-seg.stem{background:var(--brand);color:#fff}
.wh-seg.h1b{border:1.5px dashed rgba(27,33,48,.45);background:rgba(27,33,48,.05);color:#1b2130;border-radius:6px}
html[data-theme=night] .wh-seg.f1{background:rgba(185,178,224,.22);color:#d9d4ff}
html[data-theme=night] .wh-seg.cpt{background:#b9b2e0}
html[data-theme=night] .wh-seg.h1b{border-color:rgba(217,212,255,.5);background:rgba(217,212,255,.06);color:#d9d4ff}
.wh-today{position:absolute;top:2px;bottom:18px;width:2px;margin-left:-1px;background:#e86a1c;border-radius:2px}
.wh-today em{position:absolute;top:-4px;left:50%;transform:translate(-50%,-50%);padding:1px 6px;border-radius:var(--radius-control);background:#e86a1c;color:#fff;font-style:normal;font-size:10.5px;font-weight:700;white-space:nowrap}
.wh-years{position:relative;height:18px;margin-top:4px}
.wh-years span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wh-years span::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:5px;background:var(--line)}
/* The last year sits on the track's right end: keep its label inside the card */
.wh-years span:last-child{transform:translateX(-100%)}
.wh-years span:last-child::before{left:100%}
.wh-flow{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.wh-flow>li{position:relative;flex:1 1 0;min-width:0}
.wh-flow>li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:12px;height:12px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translateY(-50%) rotate(45deg)}
.wh-node{display:flex;flex-direction:column;gap:1px;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-inset);background:rgba(255,255,255,.4);list-style:none}
html[data-theme=night] .wh-node{background:rgba(255,255,255,.05)}
.wh-node small{font-size:11px;font-weight:600;color:var(--green)}
.wh-node b{font-size:13.5px;line-height:1.35}
.wh-node>span{font-size:11.5px;line-height:1.4;color:var(--muted)}
.wh-flow>.wh-split{flex:1.3 1 0}
.wh-split>ul{display:grid;gap:5px;margin:0;padding:0}
.wh-else{list-style:none;padding:0 2px;font-size:11px;line-height:1.4;color:var(--muted)}
.wh-node.yes{border-color:rgba(63,122,52,.45)}
.wh-flag{align-self:flex-start;max-width:100%;margin-top:4px;padding:2px 8px;border:1px solid rgba(232,106,28,.4);border-radius:var(--radius-control);background:rgba(232,106,28,.08);color:#b44a0c;font:inherit;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.wh-flag::before{content:"⚑ "}
.wh-flag:hover,.wh-flag:focus-visible{background:rgba(232,106,28,.16)}
html[data-theme=night] .wh-flag{border-color:rgba(255,138,61,.45);background:rgba(255,138,61,.1);color:#ffb07a}
.wh-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.wh-case,.wh-track-link{display:inline-flex;align-items:center;gap:6px}
.wh-case{flex:none;white-space:nowrap}
.wh-track-link{flex:0 1 auto;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wh-track-link>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-track-link:hover b{text-decoration:underline;text-underline-offset:3px}
.wh-foot svg{width:15px;height:15px;color:var(--green)}
.wh-foot b{color:var(--ink)}
.wh-foot .btn{margin:0 0 0 6px}
.wh-receipt{font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* every feature: a bento of cards with one radius and one gap */
.wh-top+.g-hero{margin:24px 0 0}
.wh-all{margin-top:40px}
.wh-all-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
.wh-all-head h2{margin:0;font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em}
.wh-all-head .compact-p{margin:0}
.wh-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wh-card{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:148px;padding:18px var(--workspace-panel-inset) 16px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.wh-card.big{grid-column:span 2}
.wh-card:hover,.wh-card:focus-visible{transform:translateY(-3px);border-color:rgba(21,112,230,.6)}
.wh-kicker{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--green)}
.wh-kicker svg{width:15px;height:15px;flex:none}
.wh-card b{font-size:16px;line-height:1.35}
.wh-card.big b{font-family:var(--serif);font-size:21px;font-weight:600}
.wh-desc{font-size:13px;line-height:1.6;color:var(--muted)}
.wh-live{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:600;color:var(--ink)}
/* narrower desktops: a tighter flow chart, so each step keeps its flag on one line */
@media (min-width:1081px) and (max-width:1366px){
  .wh-flow{gap:16px}
  .wh-flow>li:not(:last-child)::after{right:-13px;width:10px;height:10px}
  .wh-node{padding:8px}
  .wh-flag{padding:2px 6px}
}
/* short laptop screens: a tighter hero, so the bento still fits on the first screen */
@media (min-width:1081px) and (max-height:820px){
  .sr-hero{margin-bottom:20px}
}
@media (max-width:1180px){.wh-bento{grid-template-columns:repeat(3,minmax(0,1fr))}.wh-card.big{grid-column:span 1}.wh-card.big:first-child{grid-column:span 2}}
@media (max-width:1080px){.wh-top{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"status status" "news com"}}
@media (max-width:920px){.wh-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.wh-card.big,.wh-card.big:first-child{grid-column:span 2}}
@media (max-width:720px){
  .wh-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "news" "com"}
  .wh-flow{flex-direction:column;align-items:stretch;gap:18px}
  .wh-flow>li:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:22px;transform:rotate(135deg)}
  .wh-now{grid-template-columns:minmax(0,1fr)}
  .wh-foot{flex-wrap:wrap}
  .wh-track-link>span{white-space:normal}
}
@media (max-width:560px){.wh-bento{grid-template-columns:minmax(0,1fr)}.wh-card.big,.wh-card.big:first-child{grid-column:auto}.wh-card-status,.wh-card-news,.wh-card-com{padding:18px 16px 16px}.wh-seg em{font-size:10px;padding:0 4px}}
@media (prefers-reduced-motion:reduce){.wh-card{transition:none}.wh-card:hover,.wh-card:focus-visible{transform:none}}
/* Home: the one way into an application (ws-home.js), a slim bar between the search and the cards */
.wh-app{display:flex;align-items:center;gap:18px;padding:16px var(--workspace-panel-inset);margin:0 0 16px}
.wh-app-t{display:grid;gap:2px;min-width:0;flex:1}
.wh-app-t small{font-size:12.5px;color:var(--muted)}
.wh-app-t b{font-size:17px;font-weight:650}
.wh-app-p{display:grid;gap:6px;flex:0 1 260px;min-width:120px}
.wh-app-p small{font-size:12.5px;color:var(--muted)}
.wh-app .btn{flex:none}
@media(max-width:560px){.wh-app{flex-wrap:wrap;gap:12px;padding:14px 16px}.wh-app-p{flex:1 1 100%;order:3}}

/* Early access after a feature click: a nonmodal bar, centered in the workspace with room to scroll
   the underlying controls above it. Reduced motion shows it without an entrance animation. */
.g-sheet{position:fixed;left:calc((100% + var(--workspace-side))/2);bottom:calc(max(20px,env(safe-area-inset-bottom,0px)) + var(--g-sheet-lift,0px));z-index:120;width:min(760px,calc(100% - var(--workspace-side) - 2*var(--workspace-gutter)));max-height:var(--g-sheet-max-height,calc(100dvh - 32px));overflow-y:auto;padding:18px 22px 14px;border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-panel);background:var(--glass-strong,var(--glass,#fff));-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 28px 60px -24px rgba(20,18,14,.45),0 2px 8px rgba(20,18,14,.06);opacity:0;transform:translate(-50%,28px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.g-nudge-open{padding-bottom:var(--g-sheet-space,220px)}
html:has(body.g-nudge-open){scroll-padding-bottom:var(--g-sheet-space,220px)}
body.gd-focus .g-sheet,body.ac-focus .g-sheet{left:50%;width:min(760px,calc(100% - 32px))}
@media(max-width:960px){.g-sheet{left:50%;width:calc(100% - 32px);max-width:760px}}
.g-sheet.in{opacity:1;transform:translate(-50%,0)}
html[data-theme=day] .g-sheet{background:rgba(255,255,255,.86)}
html[data-theme=night] .g-sheet{background:rgba(40,38,35,.9);border-color:rgba(255,255,255,.14)}
.g-sheet-x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.g-sheet-x:hover{background:rgba(127,127,127,.12)}
.g-sheet-x svg{width:17px;height:17px}
.g-sheet-head{position:relative;display:flex;align-items:center;gap:8px;padding-right:36px}
.g-sheet-head .info-tip{position:static;margin:0}
/* Keep the shared tooltip inside this scrollable bar, including above the phone keyboard. */
.g-sheet-head .fm-pop{position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:320px;padding:0!important}
.g-sheet h2{font-size:18px;font-weight:700}
.g-sheet-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;margin-top:16px}
.g-sheet-form input,.g-sheet-form select{min-width:0;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--glass,#fff);color:var(--ink);font:inherit;font-size:14px}
html[data-theme=night] .g-sheet-form input,html[data-theme=night] .g-sheet-form select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:inherit}
.g-sheet-form .btn{height:46px;padding:0 22px;border-radius:var(--radius-control);white-space:nowrap}
.g-sheet-fine{margin-top:10px;font-size:12px;color:var(--muted)}
.g-sheet-fine:empty{display:none}
.g-sheet-fine.g-error{color:#b3261e;font-weight:600}
html[data-theme=night] .g-sheet-fine.g-error{color:#ffa49b}
@media (max-width:560px){.g-sheet{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--g-sheet-lift,0px));padding:16px}.g-sheet-form{grid-template-columns:minmax(0,1fr) auto;gap:10px}.g-sheet-form input[type=email]{grid-column:1/-1}.g-sheet-form .btn{padding-inline:14px}}
@media (prefers-reduced-motion:reduce){.g-sheet{transition:none}}
/* AABANY among the matched lawyers while the partnership is pending: a dashed tile, same size as the cards */
.lawyer-card.aab-tile{border-style:dashed;background:transparent;justify-content:center}
.aab-tile .aab-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aab-tile .aab-head strong{font-size:18px;letter-spacing:.04em}
.aab-tile p{margin:2px 0 4px;font-size:13px;color:var(--muted)}
.aab-tile .button-group{margin-top:auto}