/* =============================================================================
   HaeJuristi — site stylesheet
   -----------------------------------------------------------------------------
   Component semantics, which the visual design depends on:
     .lk-chip     interactive (clickable)  — white, hairline, hover accent
     .lk-tag      static data (languages, area tags) — filled tint, no border
     buttons      three tiers: primary / secondary / quiet text
     .lk-eyebrow  section label, anchored with a small accent tick
   All colours meet WCAG 2.1 AA against the warm background; the contrast ratios
   are recorded against each token below, so re-check them if you change one.
   ========================================================================== */

:root{
  /* ---- Colour ------------------------------------------------------------ */
  --lk-bg:          #FAF8F4;  /* warm near-white page                         */
  --lk-surface:     #FFFFFF;  /* cards                                        */
  --lk-panel:       #F7F4EE;  /* soft panel fill (trust panel)                */
  --lk-panel-calm:  #F1F6F4;  /* availability fill                            */
  --lk-foot:        #FBF9F3;  /* card footer tint (areas)                     */
  --lk-foot-line:   #EEE8DD;  /* divider above card footer                    */

  --lk-ink:         #1C1B19;  /* primary text   — 16.4:1 on bg                */
  --lk-ink-2:       #57544E;  /* secondary text —  7.1:1 on bg                */
  --lk-ink-3:       #6F6B62;  /* captions/meta  —  5.0:1 on bg                */
  --lk-sep:         #C8C2B8;  /* dot separators between meta items            */

  --lk-line:        #E6E2DA;  /* hairline border                             */
  --lk-line-2:      #DAD5CC;  /* slightly stronger hairline (inputs/chips)    */

  --lk-accent:      #1C4A53;  /* petrol teal — 9.2:1 on bg                    */
  --lk-accent-press:#163C44;  /* pressed/hover of primary                     */
  --lk-accent-tint: #E9F0EF;  /* count pill / monogram background             */
  --lk-on-accent:   #FFFFFF;
  --lk-calm-ink:    #143A33;
  --lk-calm-line:   #DCE6E4;

  /* ---- Staff figure (result card 4a) -------------------------------------
     Lightness-ordered, dark → light, so the bar survives greyscale and colour
     blindness: the distinction is carried by lightness and by the words beside
     it, never by hue. Do not reorder or re-hue these to "look nicer". */
  --lk-aa:          #1C4A53;  /* asianajajat — official Bar register, exact    */
  --lk-lu:          #7A9A9B;  /* luvan saaneet oikeudenkäyntiavustajat (self)  */
  --lk-ju:          #CBD8D6;  /* muut juristit (self-reported)                 */
  --lk-unknown:     #8C867A;  /* dashed "not reported" stroke — 3:1 on white,
                                 a meaning-bearing graphical object under
                                 WCAG 1.4.11, so it may not be lightened       */

  /* ---- Practice-area tiers (design 6a) ------------------------------------
     Gold = the firm's main areas, silver = secondary, neutral = unranked.
     ⚠️ POSITION CARRIES THE TIER, NOT HUE. Gold and silver are only ~1.2:1 apart
     from each other — the same tone in greyscale — so the gold row being FIRST is
     what makes the distinction survive. Re-hue freely; never reorder.
     Contrast on white: gold 5.0:1, silver 6.9:1, neutral 5.1:1. */
  --lk-gold:        #8A6A2B;  --lk-gold-ink:   #6B5220;
  /* --lk-silver-ink darkened #4B4F53 → #3A3E44 on 2026-08-23 (8.3:1 → 10.7:1 on white).
     ⚠️ This is now close to the primary tier's #3A3833, so TEXT COLOUR NO LONGER
     SEPARATES THE TWO TIERS in any useful way. Position (gold block first), the dot and
     the 600 weight on primary are what carry it — which was already the stated rule, and
     is now the only one. Do not lighten it back to "restore the contrast between tiers";
     re-hue or re-weight instead. --lk-silver, the DOT, is unchanged. */
  --lk-silver:      #5A6066;  --lk-silver-ink: #3A3E44;
  --lk-neutral:     #8C867A;  --lk-neutral-ink:#6F6B62;
  /* Search-hit tint. The tint alone is 1.15:1 against --lk-foot, so .lk-hit also
     carries a 2px inset underline — THAT is the accessible half. Keep both. */
  --lk-hit-bg:      #DCEAE6;
  --lk-rule:        #EAE4D8;  /* column header rule */
  /* Reserved width for the areas expander, so it sits on the same x on every card.
     Measured against the widest label the data can produce — see `.lk-areas__toggle--split`
     before changing it. */
  --lk-more-col:    170px;

  --lk-area-bg:     #ECF1F0;  /* static area-tag fill (cool, on-brand)        */
  --lk-area-ink:    #3F5B5A;
  --lk-sand:        #F1ECE3;  /* neutral "+ offices" pill                     */

  /* ---- Type --------------------------------------------------------------
     System stack: no webfont, so no third-party request and nothing to disclose
     in the seloste. Adding a webfont is a GDPR decision, not just a design one. */
  --lk-font: -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---- Radius / layout --------------------------------------------------- */
  --lk-r-sm: 10px; --lk-r-md: 12px; --lk-r-lg: 16px; --lk-r-pill: 999px;
  --lk-col: 720px; --lk-gutter: 20px;
}

/*  Never reference an asset that is not shipped — not even inside a comment.
    The static-file rewriter does not skip comments, so it breaks the build.  */

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--lk-bg); color:var(--lk-ink); font-family:var(--lk-font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; } ul{ list-style:none; margin:0; padding:0; } svg{ display:block; }
h1,h2,h3{ margin:0; }
:focus-visible{ outline:3px solid var(--lk-accent); outline-offset:2px; border-radius:6px; }
a:focus,button:focus,summary:focus{ outline:3px solid var(--lk-accent); outline-offset:2px; }
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){ outline:none; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---- Site chrome --------------------------------------------------------- */
.lk-chrome{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px;
  flex-wrap:wrap; padding:12px var(--lk-gutter); border-bottom:1px solid var(--lk-line); background:var(--lk-bg); }
.lk-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--lk-ink); }
.lk-brand__mark{ flex:none; }
.lk-brand__name{ font-size:20px; letter-spacing:-0.02em; }
.lk-brand__hae{ font-weight:600; color:#16302F; }
.lk-brand__juristi{ font-weight:800; color:var(--lk-accent); }
/* section nav: distinct tab-like elements; the current section is highlighted */
.lk-nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; }
.lk-nav a{ color:var(--lk-ink-2); text-decoration:none; font-size:14px; font-weight:600;
  min-height:40px; padding:0 13px; border-radius:var(--lk-r-pill); display:inline-flex; align-items:center;
  transition:background-color .15s, color .15s; }
.lk-nav a:hover{ background:var(--lk-panel); color:var(--lk-ink); }
.lk-nav a[aria-current="page"]{ background:var(--lk-accent-tint); color:var(--lk-accent); }
.lk-lang{ display:inline-flex; align-items:center; gap:3px; padding:3px;
  border:1px solid var(--lk-line-2); border-radius:var(--lk-r-pill); }
.lk-lang__opt{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; min-width:42px;
  padding:0 13px; border-radius:var(--lk-r-pill); font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.02em; text-decoration:none; color:var(--lk-ink-2); transition:background-color .15s,color .15s; }
.lk-lang__opt:hover{ color:var(--lk-ink); }
.lk-lang__opt[aria-current="page"]{ background:var(--lk-accent); color:var(--lk-on-accent); }

/* ---- Layout -------------------------------------------------------------- */
.lk-col{ width:100%; max-width:var(--lk-col); margin:0 auto; padding:0 var(--lk-gutter); }
.lk-main{ display:flex; flex-direction:column; gap:18px; padding:22px 0 8px; }
.lk-back{ display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:20px;
  color:var(--lk-accent); text-decoration:none; font-size:15px; font-weight:600; }
.lk-back:hover{ text-decoration:underline; text-underline-offset:3px; }
.lk-back__arrow{ font-size:17px; line-height:1; }

/* ---- Headings / section labels ------------------------------------------ */
.lk-h1{ font-size:30px; line-height:1.14; font-weight:700; letter-spacing:-0.02em;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.lk-lead{ margin:10px 0 0; color:var(--lk-ink-2); font-size:17px; text-wrap:pretty; }
.lk-section{ display:flex; flex-direction:column; gap:14px; }
/* section label now anchors with a small accent tick */
.lk-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--lk-ink-2); }
.lk-eyebrow::before{ content:""; width:16px; height:2px; flex:none; border-radius:2px; background:var(--lk-accent); }

/* ---- Identity / trust (firm profile) ------------------------------------ */
.lk-identity{ display:flex; flex-direction:column; gap:16px; padding-top:8px; }
.lk-monogram{ width:54px; height:54px; border-radius:13px; background:var(--lk-accent-tint); color:var(--lk-accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:25px; font-weight:700; letter-spacing:-0.01em; }
.lk-title{ font-size:30px; line-height:1.12; font-weight:700; letter-spacing:-0.02em;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.lk-meta{ margin:0; font-size:16px; color:var(--lk-ink-2); font-weight:500; }
.lk-muted{ color:var(--lk-ink-2); font-size:14.5px; }
.lk-trust{ border:1px solid var(--lk-line); border-radius:var(--lk-r-lg); background:var(--lk-panel); padding:20px; }
.lk-trust__list{ display:flex; flex-direction:column; gap:14px; }
.lk-trust__item{ display:flex; align-items:flex-start; gap:12px; font-size:16px; font-weight:500; line-height:1.45; }
.lk-trust__icon{ flex:none; margin-top:2px; }
.lk-trust__reg{ margin-top:16px; padding-top:16px; border-top:1px solid var(--lk-line); font-size:14px; color:var(--lk-ink-2); }

/* ---- Chips (INTERACTIVE) vs Tags (STATIC) -------------------------------
   A chip is clickable (hover state); a tag is passive data (no border/hover).
   Keep them visually distinct — that difference is the affordance. */
.lk-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.lk-chip{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  border:1px solid var(--lk-line-2); border-radius:var(--lk-r-sm); background:var(--lk-surface);
  color:var(--lk-ink); font-size:15px; font-weight:500; text-decoration:none;
  transition:border-color .15s, color .15s, background-color .15s; }
.lk-chip:hover{ border-color:var(--lk-accent); color:var(--lk-accent); background:#F4F8F7; }
.lk-chip--on{ border-color:var(--lk-accent); color:var(--lk-accent); background:var(--lk-accent-tint); }
.lk-chip--sm{ min-height:36px; padding:7px 13px; font-size:14px; }

.lk-tag{ display:inline-flex; align-items:center; min-height:34px; padding:6px 13px;
  border:0; border-radius:var(--lk-r-sm); background:var(--lk-panel); color:var(--lk-ink-2);
  font-size:14px; font-weight:500; }
.lk-tag--area{ background:var(--lk-area-bg); color:var(--lk-area-ink); }
.lk-tag--sm{ min-height:30px; padding:5px 11px; font-size:12.5px; }
/* (.lk-tag--hit / --primary / --secondary deleted with design 6a: the result card's
   practice areas are TEXT now, not chips. `.lk-tag` itself stays — the firm page's
   language list and other pages still use it. The card's hit treatment moved to
   `.lk-hit`, which is accent-only and never gold or silver.) */

/* ---- Audience segmented toggle ------------------------------------------ */
/* Currently unreferenced: the audience toggle lives inside the filter card.
   Retained for a centred segmented control. */
.lk-seg-wrap{ display:flex; justify-content:center; }
.lk-seg{ display:inline-flex; padding:3px; border:1px solid var(--lk-line-2); border-radius:var(--lk-r-pill);
  gap:3px; background:var(--lk-surface); }
.lk-seg a{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 18px;
  border-radius:var(--lk-r-pill); text-decoration:none; font-size:13.5px; font-weight:600; color:var(--lk-ink-2);
  white-space:nowrap; transition:background-color .15s,color .15s; }
.lk-seg a:hover{ color:var(--lk-ink); }
.lk-seg a[aria-current="true"]{ background:var(--lk-accent); color:var(--lk-on-accent); }

/* ---- Forms --------------------------------------------------------------- */
.lk-grid{ display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.lk-filter-grid{ display:grid; gap:15px 16px; grid-template-columns:1fr 1fr; }
.lk-filter-grid .span2{ grid-column:1 / -1; }
@media (max-width:560px){ .lk-filter-grid{ grid-template-columns:1fr; } .lk-filter-grid .span2{ grid-column:1; } }
.lk-label{ display:block; font-size:13px; font-weight:600; margin:0 0 6px; color:#3A3833; }
.lk-input,.lk-select{ width:100%; min-height:46px; padding:0 13px; border:1px solid var(--lk-line-2);
  border-radius:11px; background:var(--lk-surface); color:var(--lk-ink); font:inherit; font-size:15px; }
.lk-input{ padding:11px 13px; }
.lk-input::placeholder{ color:#9A958B; }
.lk-input:hover,.lk-select:hover{ border-color:#C3BDB2; }
.lk-input:focus,.lk-select:focus{ border-color:var(--lk-accent); outline:none;
  box-shadow:0 0 0 3px rgba(28,74,83,.14); }
.lk-select{ appearance:auto; }

/* ---- Checkbox filter cell (the claim filter, beside Tarve) ------------------
   `align-self:end` rather than a spacer element: the neighbouring cells are a 13px label
   plus a 46px control, and hard-coding that sum would drift the first time the label's
   font-size changes. Aligning to the bottom of the grid row lines this box up with the
   select beside it whatever those numbers become.
   The whole box is the <label>, so the click target is the full row — WCAG 2.5.8 (AA)
   asks 24×24 and a bare 20px tick would miss it. */
.lk-filter-grid .lk-check-cell{ align-self:end; }
/* The BOX is a <div>; the <label> is `.lk-check__main` inside it. A click anywhere in a
   <label> toggles its checkbox, so the "?" cannot be nested in one — and leaving it
   outside the box dangled it on its own line and knocked the next grid row out of
   alignment. Two siblings in one box solves both. */
.lk-check{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 13px;
  border:1px solid var(--lk-line-2); border-radius:11px; background:var(--lk-surface); }
.lk-check__main{ display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  cursor:pointer; }
.lk-check:hover{ border-color:#C3BDB2; }
.lk-check:focus-within{ border-color:var(--lk-accent); box-shadow:0 0 0 3px rgba(28,74,83,.14); }
/* 15px regular — DELIBERATELY IDENTICAL to `.lk-input,.lk-select`, i.e. to "Kaikki tarpeet"
   in the Tarve dropdown sitting next to it. The developer's call, 2026-09-01, seeing all
   four controls together. Keep the two in step: if the select's size moves, move this.

   ⚠️ THIS REVERSES THE 14px/600 THIS RULE USED TO ASK FOR, and the argument it reverses is
   worth keeping. That version treated the text as the NAME of a filter (so: a label's
   face, 14px/600, a peer of `.lk-label`'s 13px/600) and 15px regular as input text, which
   would make it read as a typed VALUE. The counter-argument is what the screenshot showed:
   this box IS one of four controls in a row, and the other three carry 15px regular inside
   them, so the label face made this one box shout. Bold with nothing to contrast against
   is not emphasis. If it ever reads as a value rather than a filter, the note above is why.

   ⚠️ THE COMBINATOR WAS `.lk-check>span` AND MATCHED NOTHING, which is how it ended up at
   the inherited 17px in the first place — bigger than everything around it. The span is a
   grandchild: `.lk-check` > `.lk-check__main` (the <label>) > span, a level added when the
   "?" moved inside the box as a sibling of the label. Nothing failed, because an unmatched
   CSS selector is not an error in the browser or in `collectstatic`.

   Scoped to `__main` rather than loosened to a descendant selector `.lk-check span`: the
   "?" explainer is the other child of `.lk-check` and carries its own spans (the sr-only
   name, the popover text), which must not inherit a filter label's face. */
.lk-check__main>span{ font-size:15px; font-weight:400; color:var(--lk-ink); }

/* Round tick. `appearance:none` means `accent-color` no longer applies and every part of
   the control has to be drawn here — including, crucially, the checked state. */
.lk-check input{ appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:22px; height:22px; border-radius:50%; border:2px solid var(--lk-line-2);
  background:var(--lk-surface); cursor:pointer; position:relative;
  transition:background-color .12s, border-color .12s; }
.lk-check input:hover{ border-color:var(--lk-accent); }
.lk-check input:checked{ background:var(--lk-accent); border-color:var(--lk-accent); }
/* The tick is two borders on a rotated box — no icon font, no SVG request, and it scales
   with the control. Drawn only when checked, so the unchecked circle stays empty. */
.lk-check input:checked::after{ content:""; position:absolute; left:6px; top:3px;
  width:4px; height:9px; border:solid var(--lk-on-accent); border-width:0 2px 2px 0;
  transform:rotate(45deg); }
/* ⚠️ WINDOWS HIGH CONTRAST STRIPS AUTHOR COLOURS, so the drawn circle and tick both
   disappear and the control becomes invisible — checked and unchecked look identical.
   Handing the native widget back is the fix; it is ugly and it is legible, which is the
   right trade in a mode chosen for legibility. */
@media (forced-colors: active){
  .lk-check input{ appearance:auto; -webkit-appearance:auto; width:auto; height:auto;
    border:revert; border-radius:revert; }
  .lk-check input:checked::after{ display:none; }
}

/* ---- "Näytä kaikki suodattimet" — secondary filters, pure <details>, no JS ---
   The <summary> carries `.lk-textlink` in the template rather than restating its font
   here, so it IS the same control as "Selaa kaikkia" on the homepage and cannot drift
   from it. This block adds only the +/− marker and the row's own spacing.
   A text link and not a button, deliberately: it reveals controls, it does not run a
   search, and making it a peer of "Hae" invites a click that appears to do nothing. */
.lk-morefilters{ margin-top:15px; }
.lk-morefilters>summary{ list-style:none; cursor:pointer; }
.lk-morefilters>summary::-webkit-details-marker{ display:none; }
/* Chevron AFTER the text, matching "Selaa kaikkia →" on the homepage — this is the same
   `.lk-textlink` control, so it should carry its marker in the same place.
   DRAWN, NOT A GLYPH. "▾"/"+"/"–" all depend on the font having them and on its metrics
   for vertical centring; two borders on a rotated box render identically everywhere and
   inherit the link colour through `currentColor`. Same technique as the checkbox tick. */
.lk-morefilters>summary::after{ content:""; flex:none; width:8px; height:8px;
  margin-left:1px; border:solid currentColor; border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.lk-morefilters[open]>summary::after{ transform:translateY(1px) rotate(225deg); }
.lk-morefilters>summary:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .lk-morefilters>summary::after{ transition:none; } }

/* ---- Buttons (clear tiers) ----------------------------------------------- */
.lk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px;
  font:inherit; font-size:16px; font-weight:600; text-decoration:none; border-radius:11px; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s; }
.lk-btn--primary{ background:var(--lk-accent); color:var(--lk-on-accent); border:1px solid var(--lk-accent); }
.lk-btn--primary:hover{ background:var(--lk-accent-press); border-color:var(--lk-accent-press); }
.lk-btn--secondary{ background:var(--lk-surface); color:var(--lk-ink); border:1px solid var(--lk-line-2); }
.lk-btn--secondary:hover{ background:#F1ECE4; border-color:#B3ACA0; }
.lk-btn--block{ width:100%; }
.lk-btn--sm{ min-height:42px; padding:0 18px; font-size:15px; }
.lk-btn__caption{ text-align:center; font-size:13px; color:var(--lk-ink-2); margin-top:-3px; }
/* ⚠️ THE GLOBAL RESET AT THE TOP OF THIS FILE SETS `ul{ list-style:none }`, so any list
   outside `.lk-legal__body` renders WITHOUT MARKERS. The guides set `padding-left:20px`
   inline, which indents the text and restores no bullet — so four <li> read as one
   run-together block, which is exactly how the price guide looked until 2026-08-31.
   Opt back in explicitly rather than weakening the reset: the reset is what keeps every
   chip row, filter list and nav from carrying discs. */
.lk-bullets{ list-style:disc; padding-left:20px; margin:0; }
.lk-bullets>li+li{ margin-top:6px; }
.lk-bullets .lk-textlink{ min-height:0; margin-left:4px; }

.lk-textlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--lk-accent); font-size:14px; font-weight:600; text-decoration:none; }
.lk-textlink:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Results header ------------------------------------------------------ */
.lk-resulthead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:4px 2px 0; }
.lk-resulthead__count{ font-size:15px; color:var(--lk-ink-2); }
.lk-resulthead__count strong{ color:var(--lk-ink); font-weight:700; font-size:16px; }
.lk-resulthead form,.lk-sort{ display:inline-flex; align-items:center; gap:8px; }
.lk-sort label{ font-size:13px; color:var(--lk-ink-2); font-weight:600; }
.lk-sort .lk-select{ min-height:38px; width:auto; padding:0 12px; border-radius:9px; font-size:14px; }

/* ===== RESULT CARD ========================================================= */
.lk-result{ display:flex; background:var(--lk-surface); border:1px solid var(--lk-line);
  border-radius:var(--lk-r-lg); overflow:hidden; margin-bottom:14px;
  transition:border-color .15s, box-shadow .15s;
  /* the containing block for the stretched overlay below — without it the ::after
     resolves against the page and covers the whole viewport */
  position:relative; }
.lk-result:hover{ border-color:var(--lk-accent); box-shadow:0 8px 22px rgba(28,74,83,.08); }
.lk-result__spine{ width:3px; flex:none; background:var(--lk-accent); }
.lk-result__body{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ----- THE WHOLE CARD IS THE LINK (2026-08-23) ---------------------------- */
/* STRETCHED LINK, NOT A WRAPPING <a> AND NOT A JS CLICK HANDLER. The firm name stays the
   one real anchor; an empty ::after on it grows to cover the card. Why this shape:

     · A wrapping <a> would be invalid — the footer's <summary> is interactive, and
       interactive content cannot nest inside a link. It also swallows the areas, the
       staff figure and the pills into one enormous link name.
     · A JS handler breaks the no-JS path this whole site is built to keep working, gives
       no middle-click / ctrl-click / "copy link address", and is invisible to crawlers.
     · Duplicating the href onto a second element would give Google two links to one page
       from one card.

   The a11y tree is therefore UNCHANGED: exactly one link per card, named by the firm.
   ⚠️ THE COST IS TEXT SELECTION. The overlay eats mousedown, so a visitor cannot select
   the firm name, the areas or the staff line with the mouse. That is inherent to the
   pattern (Bootstrap's `.stretched-link` has the same behaviour) and was accepted
   deliberately — the footer text stays selectable because it sits above the overlay. */
.lk-result__name::after{ content:""; position:absolute; inset:0; z-index:1; }
/* Hovering anywhere on the card colours the name, so the card says what it will do. */
.lk-result:hover .lk-result__name{ color:var(--lk-accent); }
/* ⚠️ THE FOOTER MUST OUTRANK THE OVERLAY or the expander stops opening — the click lands
   on the link instead and the visitor is taken to the firm page by a control that looks
   like a toggle. `.lk-result__empty` is raised with it purely so the two footers behave
   identically; it has nothing to click. Guarded by tests in ResultCardLinkTests. */
.lk-areas,.lk-result__empty{ position:relative; z-index:2; }
/* gap 14 → 18: the 212px staff column needs the room (handoff §Layout). */
.lk-result__head{ padding:17px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.lk-result__main{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lk-result__name{ font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--lk-ink);
  text-decoration:none; line-height:1.2; overflow-wrap:break-word; }
.lk-result__name:hover{ color:var(--lk-accent); }
.lk-result__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; font-size:14px; color:var(--lk-ink-2); }
.lk-result__loc{ display:inline-flex; align-items:center; gap:5px; color:var(--lk-accent); font-weight:600; }
.lk-result__sep{ color:var(--lk-sep); }
.lk-result__offices{ font-size:13px; color:var(--lk-ink-3); }
/* (.lk-result__count — the "12 asianajajaa" pill — deleted with the 4a card. Its slot was
   the second most prominent thing on the card, spent on firm size, which is a weak signal
   for "who should handle my divorce". The staff figure below replaces it with something
   that also answers "what kind of people work here". The old <400px rule that existed to
   stop the pill colliding with long firm names went with it; the 560px rule at the end of
   this section supersedes it.) */
.lk-result__empty{ border-top:1px solid var(--lk-foot-line); padding:12px 20px; font-size:13px; color:#9A958B; }

/* ----- staff figure (zone 1, right column) -------------------------------- */
/* A LEFT RULE, NOT A BOX, and that is a design-language decision rather than taste.
   In this card an OUTLINE means self-reported (zone 2's chips and the hollow ring) and
   a FILL means verified. Boxing the staff figure would put register data — the
   asianajaja count, the most authoritative thing on the card — inside the visual
   vocabulary of a firm's own claim about itself. A single rule groups the bar, the lead
   line and the not-reported line into one block without borrowing that meaning.
   Switching it to a full border or a tinted fill is a one-line change; read this first
   and decide deliberately.
   228px, not the handoff's 212: box-sizing is border-box globally, so the 16px gutter
   would otherwise eat into the column the lead line needs. */
.lk-result__staff{ flex:none; width:228px; display:flex; flex-direction:column;
  gap:7px; padding-top:2px; padding-left:16px;
  border-left:1px solid var(--lk-line); }
/* Decorative by duplication: every value in the bar is also in the text beside it, so the
   bar is aria-hidden and each card carries an .sr-only full breakdown instead. */
.lk-staffbar{ display:flex; gap:3px; height:9px; align-items:stretch; }
/* Width is set inline per firm — a SHARED SCALE across cards, deliberately NOT 100%. A
   one-person office must not draw the same bar as a twelve-person one. See
   card.staff_bar_width(); do not turn this into a percentage. */
.lk-staffbar__scale{ display:flex; gap:2px; flex:none; }
.lk-staffbar__seg{ flex-basis:0; min-width:6px; border-radius:2px; }
.lk-staffbar__seg--aa{ background:var(--lk-aa); }
.lk-staffbar__seg--lu{ background:var(--lk-lu); }
.lk-staffbar__seg--ju{ background:var(--lk-ju); }
/* The open end = "at least this many, probably more". Never omit it for a firm that has
   not reported its other staff: without it, an un-updated firm reads as a small one. */
.lk-staffbar__open{ width:30px; flex:none; border-radius:2px;
  border:1px dashed var(--lk-unknown); }
.lk-result__lead{ font-size:14px; font-weight:700; color:var(--lk-ink); line-height:1.3; }
.lk-result__more{ font-size:13px; color:var(--lk-ink-2); line-height:1.35; }
/* --lk-ink-3 (5.3:1), NOT #9A958B (2.98:1): these lines carry meaning, they are not the
   "no data" shrug the lighter grey is reserved for. */
.lk-result__unknown{ font-size:13px; color:var(--lk-ink-3); line-height:1.35; }

/* ----- zone 2: the firm's own words --------------------------------------- */
/* OUTLINED, NEVER FILLED. The outline is the only visual separation between what the
   official register says (zone 1, filled) and what the firm says about itself. Do not
   give anything in this zone a background fill. */
.lk-result__own{ border-top:1px solid var(--lk-foot-line); padding:13px 20px;
  display:flex; flex-direction:column; gap:10px; }
.lk-result__desc{ margin:0; font-size:14px; line-height:1.5; color:var(--lk-ink-2);
  max-width:64ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }
/* The clamp is a VISUAL guard only — it hides overflow without preventing it, and does
   nothing for the AJAX payload or a screen reader. Firm.description_short is capped at
   200 chars server-side; that is the real limit.
   The clamp is 3 lines here and 5 under 560px — see the mobile block below.
   At 64ch/3 lines desktop no longer clamps a 200-char field at all; the clamp is
   now insurance against the server cap being raised, not a routine truncation. */
.lk-claim{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  min-height:30px; padding:5px 12px; border-radius:var(--lk-r-pill);
  background:var(--lk-surface); border:1px solid var(--lk-sep); color:#3A3833;
  font-size:12.5px; font-weight:600; }
/* ⚠️ THIS WAS A HOLLOW RING UNTIL 2026-08-27 AND THAT WAS A REAL DEFECT, not a taste
   call. An 8px circle outlined in ink-3 is the universal shape for an EMPTY checkbox, so
   every pill read as a claim switched OFF — the pill asserts "this firm does offer a free
   first consultation" and the marker beside it said the opposite. It only became obvious
   once the search filter grew a filled tick and the two sat on screen together.

   Drawn as an SVG data URI rather than borders-on-a-rotated-box (the technique used for
   the filter tick and the expander chevron) because this mark has to sit INSIDE a filled
   disc, and a pseudo-element cannot hold a second pseudo-element. One `::before`, no
   extra HTTP request, crisp at both pill sizes.

   ⚠️ The stroke is a hardcoded `%23fff` and NOT `var(--lk-on-accent)` — custom properties
   do not resolve inside a data URI. If the accent ever changes to something light, this
   tick has to change with it and nothing will warn you. */
.lk-claim::before{ content:""; flex:none; width:15px; height:15px; box-sizing:border-box;
  border-radius:var(--lk-r-pill); background:var(--lk-accent) center/9px 9px no-repeat
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3 4.8 8.7 9.6 3.6' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
/* Windows High Contrast drops the background colour AND the image, leaving a blank disc.
   The outlined ring survives any palette, so that is what this mode gets — the same
   trade as the filter checkbox: legible beats decorated. */
@media (forced-colors: active){
  .lk-claim::before{ width:9px; height:9px; background:none;
    border:2px solid currentColor; }
}
/* The pills' own row, used by BOTH the search card's zone 2 and the firm page's.
   Not cosmetic: .lk-result__own is a flex column, so without this wrapper each pill
   takes a line of its own — invisible at one label, three rows deep at the cap of
   three (card.CARD_LABELS_MAX). `align-self:flex-start` above keeps a pill hugging its
   text inside either container, so it stays whether the parent is a row or a column. */
.lk-claims{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* Same reasoning as `.lk-areas-rows--page` below: 12.5px is a card size, and on the firm
   page the pill sits under 18px prose as the only thing the firm itself says. Scoped to
   the page modifier so the search card's zone 2 is untouched (2026-08-24).
   `min-height` and `padding` move with the type or the pill turns into a tight capsule —
   the 30px box was sized around 12.5px text. */
.lk-claims--page .lk-claim{ font-size:14px; min-height:34px; padding:6px 14px; }
/* The tick scales with the pill for the same reason the box does — a 15px mark sized
   around 12.5px text looks undersized beside 14px. */
.lk-claims--page .lk-claim::before{ width:17px; height:17px; background-size:10px 10px; }
/* The outline is the ONLY thing separating a firm's claim from a register fact — see
   the zone rule in _firm_results.html. Never give .lk-claim a filled background. */

/* ---- "?" explainer: what "maksuton alkuneuvonta" actually means -------------
   ⚠️ OPENS ON HOVER **AND** ON FOCUS, and the second one is not optional. A touch screen
   has no hover, so a hover-only bubble is invisible to most of this site's visitors — not
   merely awkward for them. `:focus-within` is what makes tapping and Tab work, and it is
   why the trigger is a <button> rather than a styled <span>.

   The bubble is POSITIONED, so it does not shove the layout around on hover — but it is
   `position:absolute` inside a `position:relative` inline wrapper, which means it can
   overlap what is under it. Kept narrow and given a solid background and a border so the
   text underneath never bleeds through.

   No JS, so there is no Esc-to-dismiss (WCAG 1.4.13 "dismissible"). Moving the pointer or
   focus away closes it, which satisfies the other two thirds of that criterion. Accepted
   knowingly for a 3-sentence caption; a modal popover would need JavaScript and a focus
   trap, which is a lot of machinery for one paragraph. */
.lk-explain{ position:relative; display:inline-flex; align-items:center; margin-left:6px; }
/* Pinned to the right edge of its container, bubble opening leftwards — otherwise a "?"
   at the right of a full-width box throws its bubble off the screen. */
.lk-explain--end{ margin-left:auto; }
.lk-explain--end .lk-explain__text{ left:auto; right:0; }
.lk-explain__btn{ display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; flex:none; border-radius:50%;
  border:1.5px solid var(--lk-ink-3); background:transparent; color:var(--lk-ink-3);
  font:inherit; font-size:11px; font-weight:700; line-height:1; cursor:help; }
.lk-explain__btn:hover{ border-color:var(--lk-accent); color:var(--lk-accent); }
/* The click target is 18px, under WCAG 2.5.8's 24×24. Enlarged with a transparent
   pseudo-element rather than by growing the circle, which would dominate the pill it sits
   inside. The box is invisible; the target is not. */
.lk-explain__btn::after{ content:""; position:absolute; left:50%; top:50%;
  width:24px; height:24px; transform:translate(-50%,-50%); }
.lk-explain__text{ position:absolute; left:0; top:calc(100% + 8px); z-index:5;
  width:max-content; max-width:min(320px, 78vw); padding:11px 13px;
  border:1px solid var(--lk-line-2); border-radius:11px; background:var(--lk-surface);
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  font-size:13px; font-weight:400; line-height:1.55; color:var(--lk-ink-2);
  text-align:left; white-space:normal;
  opacity:0; visibility:hidden; transition:opacity .12s; }
.lk-explain:hover .lk-explain__text,
.lk-explain:focus-within .lk-explain__text{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce){ .lk-explain__text{ transition:none; } }
/* Near the right edge the bubble would run off screen; anchor it to the right instead. */
@media (max-width:560px){ .lk-explain__text{ left:auto; right:0; } }

/* ----- practice areas: text rows on the card face (design 6a) ------------- */
/* NOT chips. An outlined box is a heavy container for a word, and it made
   non-interactive text look clickable. */
.lk-areas-rows{ display:flex; flex-direction:column; gap:3px; margin-top:3px; }
.lk-arow{ display:flex; align-items:baseline; gap:8px; font-size:14px; line-height:1.5; }
.lk-arow__dot{ width:8px; height:8px; border-radius:999px; flex:none;
  transform:translateY(-2px); }
.lk-arow--primary   .lk-arow__dot{ background:var(--lk-gold); }
.lk-arow--secondary .lk-arow__dot{ background:var(--lk-silver); }
.lk-arow--other     .lk-arow__dot{ background:var(--lk-neutral); }
.lk-arow__items{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px; min-width:0; }
.lk-arow--primary   .lk-arow__rest{ color:#3A3833; font-weight:600; }
.lk-arow--secondary .lk-arow__rest{ color:var(--lk-silver-ink); }
.lk-arow--other     .lk-arow__rest{ color:var(--lk-neutral-ink); }
/* Text, not controls: no hover, no tabindex, no link of their own.
   (A `.lk-arow *{ cursor:auto }` rule sat here until 2026-08-23, to stop area text
   looking clickable. The whole card became one link that day, so these rows now sit
   UNDER the stretched overlay — which owns the cursor — and the rule both fought the
   pointer the card is supposed to show and no longer matched what a click does.) */

/* ----- the same rows on the FIRM PAGE ("Painopistealueet", #170) ----------- */
/* ⚠️ THE COMPONENT IS SHARED ON PURPOSE. The firm page draws the curated tiers with the
   card's own `.lk-arow` markup so the two pages cannot say one thing in two vocabularies
   — they disagreed about highlighting for months once already (#141). Restyling `.lk-arow`
   restyles both, and that is the feature. This modifier only adds the room the page has.

   (A `.lk-arow__need` caption stacked above each name here until 2026-08-23, which made
   the row two lines and needed a column flex, a dot offset and an explicit
   `align-items:flex-start` so `.lk-hit`'s tint would not stretch to full width. The
   caption was removed at the developer's request, the names went back to the full
   taxonomy form with it — see the template — and all of that went away. One line again.) */
.lk-areas-rows--page{ gap:7px; margin-top:12px; }
/* ⚠️ BIGGER TYPE HERE THAN ON THE CARD, and it is scoped to the modifier ON PURPOSE
   (2026-08-24). 14px is right on a card, which is a dense summary in a list of many;
   it is too small on the page ABOUT this firm, where the prose beside it is 18px and
   the Oikeudenalat block under it runs 15px headers / 14px chips. Painopistealueet was
   the smallest text in its own section while being the most important thing in it.

   16px, not 17px/18px: it still has to read as a compact list rather than a paragraph,
   and it must stay clearly under the `Esittely` prose that can sit directly above it.

   DO NOT lift this onto bare `.lk-arow` — that is the shared card component, and the
   whole point of the sharing (#170) is that the card stays a card. */
.lk-areas-rows--page .lk-arow{ font-size:16px; }
/* The dot's -2px nudge is tuned for 14px/1.5 optical baseline; at 16px it needs a hair
   more or it rides low against the taller cap height. */
.lk-areas-rows--page .lk-arow__dot{ transform:translateY(-3px); }

/* ----- the search hit ----------------------------------------------------- */
/* ACCENT BLUE, NEVER GOLD OR SILVER. Tier and match are independent facts and must not
   share a channel — if a hit were gold, "highlighted" and "main area" would be the same
   signal. Emitted only when the request carries an area filter; in browse mode there is
   nothing for a highlight to mean and none are rendered.
   Keep BOTH the tint and the inset underline: the tint alone is 1.15:1 against
   --lk-foot, so the underline is the half that survives greyscale. */
.lk-hit{ display:inline-flex; align-items:center; padding:1px 7px; border-radius:5px;
  background:var(--lk-hit-bg); box-shadow:inset 0 -2px 0 var(--lk-accent);
  color:var(--lk-calm-ink); font-weight:700; }

/* ----- expanded list: stacked tiers, items in columns, no boxes ------------ */
/* ⚠️ REVERSED 2026-08-24 (#178). This grid used to hold one COLUMN PER TIER with the
   items stacked one per line inside each. Every one of the 745 imported firms has a
   single tier, so auto-fit gave it one full-width column and the "columns" layout
   produced exactly the one-per-line wall it existed to avoid. Now the TIERS stack
   (`.lk-areas__tiers`) and the ITEMS flow through this grid.

   auto-fit, not a fixed `1fr 1fr`: the item count per tier ranges from 1 to ~40, and a
   fixed column count leaves a hole at one end and wraps awkwardly at the other.

   ⚠️ `--lk-areacol` IS THE ONE KNOB. Two callers need different track widths — the firm
   page's Oikeudenalat runs SHORT names, this runs FULL taxonomy names — and the variable
   is what lets them differ without a second copy of `grid-template-columns` drifting out
   of step with this one. Set the variable on the caller; never redeclare the tracks.
   No `margin-top` here either: both callers set their own spacing. */
.lk-areas__grid{ display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--lk-areacol, 190px), 1fr));
  gap:18px 28px; }
/* The tiers, stacked. Gold first is load-bearing (gold and silver are ~1.2:1 apart, so
   ORDER is what separates them) and vertical order carries that better than side-by-side
   columns did — a reader scanning down meets the firm's main areas first. */
.lk-areas__tiers{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
/* 240px, not the 190px default: these are the full taxonomy names, and the longest of
   them ("Insolvenssiasiat – konkurssit") wraps in a 190px track at 13.5px. */
.lk-acol__items{ --lk-areacol:240px; gap:5px 24px; }
.lk-acol{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lk-acol__head{ display:flex; align-items:center; gap:7px; padding-bottom:6px;
  border-bottom:1px solid var(--lk-rule); }
.lk-acol__dot{ width:8px; height:8px; border-radius:999px; flex:none; }
.lk-acol__label{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.lk-acol__n{ font-size:11.5px; font-weight:700; color:#8C867A; margin-left:auto; }
.lk-acol--primary   .lk-acol__dot{ background:var(--lk-gold); }
.lk-acol--primary   .lk-acol__label{ color:var(--lk-gold-ink); }
.lk-acol--secondary .lk-acol__dot{ background:var(--lk-silver); }
.lk-acol--secondary .lk-acol__label{ color:var(--lk-silver-ink); }
.lk-acol--other     .lk-acol__dot{ background:var(--lk-neutral); }
.lk-acol--other     .lk-acol__label{ color:var(--lk-neutral-ink); }
/* FULL taxonomy names here — this is where the card's short names are redeemed. */
.lk-acol__item{ font-size:13.5px; line-height:1.45; }
/* The need caption above each area on the FIRM PAGE. Small, uppercase and in the muted
   ink so it reads as a category label rather than as another area — it is context for
   the name below it, not a peer of it. Only the firm page sets `with_needs`; the search
   card has no room and never renders this. */
.lk-acol__need{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lk-neutral-ink); margin-bottom:1px; }
.lk-acol__item + .lk-acol__item{ margin-top:6px; }
.lk-acol--primary   .lk-acol__item{ color:#3A3833; }
.lk-acol--secondary .lk-acol__item{ color:var(--lk-silver-ink); }
.lk-acol--other     .lk-acol__item{ color:var(--lk-neutral-ink); }

/* ----- zone 2 spacing (the firm's own words) ------------------------------ */

/* ----- the one-time legend above the first result ------------------------- */
.lk-note--legend{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;
  background:var(--lk-foot); border:1px solid var(--lk-foot-line); color:var(--lk-ink-2); }
.lk-note--legend p{ margin:0; font-size:13.5px; line-height:1.5; }
.lk-note--legend .lk-staffbar{ flex:none; margin-top:5px; }

@media (max-width:560px){
  .lk-result__head{ flex-direction:column; gap:12px; padding:16px; }
  /* the staff figure becomes a wrapping inline row: bar, lead, secondary line. The
     rule rotates with it — a left border on a full-width row would sit under the firm
     name and read as an indent rather than as a grouping. */
  .lk-result__staff{ width:100%; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:6px 11px;
    padding-left:0; padding-top:12px;
    border-left:none; border-top:1px solid var(--lk-line); }
  .lk-result__staff .lk-staffbar{ flex:none; }
  .lk-result__own{ padding:13px 16px; }
  /* Narrow column = ~35-40 chars a line against 64ch on desktop, so a phone needs
     more LINES to show the same amount of TEXT. 5 lines clears the 200-char server
     cap outright, so nothing is hidden on mobile either. */
  .lk-result__desc{ -webkit-line-clamp:5; }
  /* Single column on a phone, for BOTH callers — the card's expander and the firm page's
     Oikeudenalat. It wins over `--lk-areacol` because it replaces the whole track spec
     rather than the variable, which is intended: at ~360px even one 240px track plus a
     gutter does not fit, so auto-fit would give one column anyway and this just makes the
     gap sensible. ⚠️ `gap:14px` is a ROW gap here; if a caller ever needs a tighter one,
     override on that caller, not by loosening this. */
  .lk-areas__grid{ grid-template-columns:1fr; gap:14px; }
  .lk-note--legend{ flex-direction:column; gap:8px; }
}

/* areas: collapsible footer (pure HTML <details>, no JS) */
/* 6px, was 12px. With .lk-areas__more at 30px the strip is 42px tall against 64px
   before — a third off, which is what the collapsed footer was asked for. It also makes
   this row the same height as .lk-result__empty below it, so a firm with no areas and a
   firm with areas no longer have differently-sized footers. */
.lk-areas{ border-top:1px solid var(--lk-foot-line); background:var(--lk-foot); padding:6px 20px; }
.lk-areas__toggle{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  min-height:40px; color:var(--lk-accent); font-size:13.5px; font-weight:700; width:max-content; }
.lk-areas__toggle::-webkit-details-marker{ display:none; }
.lk-areas__toggle:hover{ text-decoration:underline; text-underline-offset:3px; }
.lk-areas__chev{ flex:none; transition:transform .15s; }
.lk-areas[open] .lk-areas__chev{ transform:rotate(180deg); }
.lk-areas .hide{ display:none; } .lk-areas[open] .show{ display:none; } .lk-areas[open] .hide{ display:inline; }
.lk-areas__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* Collapsed summary: matched uncurated areas on the left, expander in a RESERVED column
   on the right. The expander sat left for one iteration after design 6a moved the areas
   into the head; margin-left:auto put it back, but "pushed right by whatever is beside it"
   is not the same as "always in the same place". With three long Finnish area names the
   row overflowed the card and the label was shoved off the end of it.

   So the column width is reserved, not negotiated. --lk-more-col is measured, not guessed:
   the widest label a firm can produce is "Näytä 71 oikeudenalaa" (71 = the most distinct
   area names any firm has), which is 150px at 13.5px/700 in a font wider than the system
   stack, plus a 13px chevron and its 7px gap. 170px is that with a little air. The open
   state's "Piilota oikeudenalat" is shorter, so it cannot be the constraint.

   ⚠️ If the label copy ever changes, re-measure. A label wider than the column does not
   overflow — white-space:nowrap plus a fixed column means it gets CLIPPED, which is
   silent. Re-check `max(len(distinct area names per firm))` too; it is a data fact. */
.lk-areas__toggle--split{ display:grid; grid-template-columns:minmax(0,1fr) var(--lk-more-col);
  align-items:start; column-gap:14px; row-gap:6px; width:100%; min-height:0; }
/* The hits column. Wraps freely — the strip is allowed to grow downwards, which is the
   whole point of reserving the other column: room comes from height, not from the
   expander's position. A single area name can be wider than this column (the widest is
   "Perhe- ja perintöoikeus (…)" at ~570px against ~456px available), so it wraps inside
   its own tint rather than overflowing. min-height keeps a card with no matches exactly
   as tall as a card with some. */
.lk-areas__hits{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  min-width:0; min-height:30px; }
/* 30px, was 40px — this is what actually sets the collapsed strip's height, because
   .lk-areas__toggle--split sets min-height:0 and lets its tallest child decide.
   30px is deliberate rather than arbitrary: .lk-tag--sm is exactly 30px, so session 5b's
   focus tags drop into this row with no further change and no reflow.
   ⚠️ TAP TARGET: this was the handoff's ≥40px. 30px still clears WCAG 2.2 SC 2.5.8
   (Target Size Minimum, AA = 24×24), and the whole <summary> is clickable across the full
   card width, so the target is short rather than small. But it IS less comfortable on a
   phone than 40px was. If it turns out to be fiddly in use, the fix is to keep 40px inside
   the ≤560px media query and leave desktop at 30 — one line, and the reason it was not
   done pre-emptively is that two heights for one control is worth avoiding unless the
   smaller one actually hurts. */
.lk-areas__more{ display:inline-flex; align-items:center; gap:7px; justify-self:end;
  min-height:30px; white-space:nowrap; color:var(--lk-accent);
  font-size:13.5px; font-weight:700; }
/* Under 560px the card is ~296px of content, so reserving 170 of it for the label would
   leave the hits a column too narrow to be worth having. One column instead: hits first,
   label under them and still right-aligned, so it is in a consistent place per breakpoint
   even though that place is not the desktop one. */
@media (max-width:560px){
  .lk-areas{ padding:8px 16px; }
  .lk-areas__toggle--split{ grid-template-columns:minmax(0,1fr); }
  /* On desktop the empty span is what holds the grid at two columns, so it keeps its
     30px. Stacked, that same 30px is just a blank row above the label on every card
     with no matches — which is most of them. `:empty` is exact here: the template emits
     `<span class="lk-areas__hits"></span>` with no whitespace inside, verified in the
     rendered output. If a space ever creeps in between the tags and the closing tag,
     this silently stops matching. */
  .lk-areas__hits:empty{ display:none; }
}

/* oikeudenalat grouped by tarve: FLAT DISCLOSURE ROWS (pure <details>, no JS) */
/* Restyled 2026-08-24 (#177) from a stack of bordered pills into the same visual language
   as Painopistealueet above: no card, no border, no fill, 16px text on a flat row.

   ⚠️ THE CHEVRON IS THE AFFORDANCE AND IT IS THE ONLY ONE LEFT. The Painopistealueet
   rows directly above are INERT TEXT; these open. Once both are flat rows in the same
   type on one page, a reader has nothing but that glyph to tell them apart. That is why:
     - it sits in the LEADING slot, where Painopistealueet has its tier dot, rather than
       at the far right where a reader arrives at it last;
     - there is no decorative dot here. A second glyph in the leading slot would carry no
       meaning (there is no tier to encode) and would compete with the one that does;
     - the hover and focus states below are not polish. The border used to imply both.
   This is #144's rule ("a box made inert text look clickable") pointed the other way.

   ⚠️ 44px MIN-HEIGHT ON 16px TEXT IS DELIBERATE. The boxed version got its target size
   from card padding; a bare text row is ~24px, and the site holds 44px everywhere else.
   Flat look, generous padding — that is the whole trick. Do not tighten it to close the
   gaps between rows. */
.lk-tarvegroups{ display:flex; flex-direction:column; gap:2px; }
.lk-tarve{ border-radius:var(--lk-r-sm); }
.lk-tarve__sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:10px 8px; min-height:44px; border-radius:var(--lk-r-sm);
  color:var(--lk-ink); font-weight:600; font-size:16px; }
.lk-tarve__sum::-webkit-details-marker{ display:none; }
.lk-tarve__sum:hover{ color:var(--lk-accent); background:var(--lk-panel-calm); }
/* Focus is inherited from the global `summary:focus` / `:focus-visible` rules near the
   top of this file. ⚠️ Never add `outline:none` here to tidy the row — with the border
   gone there is nothing else left showing a keyboard user where they are. */
/* `currentColor`, not a hex: the chevron then follows hover and the matched-group accent
   for free. It was hardcoded #1C4A53 and stayed that colour through both. */
.lk-tarve__chev{ flex:none; transition:transform .15s; color:var(--lk-accent); }
.lk-tarve[open] .lk-tarve__chev{ transform:rotate(180deg); }
/* No `flex:1 1 auto` any more — the label must NOT stretch, or the count is pushed to the
   right edge instead of sitting directly after the text. */
.lk-tarve__label{ min-width:0; }
/* A circle at one digit, a stadium at two. Several needs carry 10–20 areas, so a fixed
   diameter would clip; `min-width` + pill radius is what makes both cases work. */
.lk-tarve__count{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 7px; border-radius:var(--lk-r-pill);
  background:var(--lk-accent-tint); color:var(--lk-accent); font-size:13px; font-weight:700; }
/* matched group: the visitor searched an area that lives here. Auto-opened by `open` in
   the template — ⚠️ this comment and `tarve_groups()`'s docstring both CLAIMED that for
   months while the attribute was simply missing; it became true on 2026-08-24. The label
   is flagged with `.lk-hit`, the same highlight Painopistealueet uses.
   ⚠️ The label's hit means "your match is INSIDE here", which is a weaker claim than the
   same highlight on Painopistealueet, where the highlighted thing IS the matched area.
   Left visual-only on purpose: the group opens, and the matched link inside carries the
   `area_sr_hit` announcement, so a screen reader is not missing anything. */
.lk-tarve--on>.lk-tarve__sum{ color:var(--lk-accent); }
.lk-tarve--on>.lk-tarve__sum .lk-tarve__count{ background:var(--lk-accent); color:#fff; }

/* the areas themselves: text links in the card's expanded-list columns, not chips */
/* The `<ul>` also carries `.lk-areas__grid`, so the auto-fit track spec lives in ONE
   place and a 20-area group is ~7 lines rather than 20. Only the gaps and padding are
   overridden here — do not copy the `grid-template-columns` down into this rule. The
   default 190px track is correct here and only here: this list shows the SHORT names.
   If it ever needs wider, set `--lk-areacol`, the way `.lk-acol__items` does.
   `padding-left:30px` aligns the items under the LABEL (8px summary padding + 14px
   chevron + 8px gap), not under the chevron.

   ⚠️ THESE ARE LINKS AND NOTHING BOXES THEM ANY MORE. The colour is not decoration; it
   is the only thing saying they navigate. Underline is held back for hover deliberately:
   `.lk-hit` already owns a 2px inset underline, and if every area were underlined the
   match signal would lose half its channel — the half that survives greyscale. */
.lk-tarve__list{ gap:9px 28px; margin:6px 0 12px; padding:0 8px 0 30px; }
.lk-tarve__list li{ min-width:0; line-height:1.5; }
.lk-arealink{ color:var(--lk-accent); text-decoration:none; }
.lk-arealink:hover{ text-decoration:underline; }
/* `.lk-arealink` is defined after `.lk-hit`, so without this the accent colour wins and a
   matched area loses the hit's ink. Everything else about `.lk-hit` still applies. */
.lk-arealink.lk-hit{ color:var(--lk-calm-ink); }

/* ---- Generic card / contact / offices (home + firm profile) ------------- */
.lk-card{ background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:var(--lk-r-lg); padding:20px; }
.lk-main--profile{ gap:30px; }
.lk-contact{ display:flex; flex-direction:column; gap:13px; }
.lk-offices{ display:flex; flex-direction:column; gap:11px; }
.lk-office{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:12px; font-size:15px; line-height:1.4; color:var(--lk-ink-2); transition:border-color .15s, box-shadow .15s; }
.lk-office:hover{ border-color:#CBD8D6; box-shadow:0 4px 14px rgba(28,74,83,.06); }
.lk-office__main{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; }
.lk-office__city{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--lk-ink); }
.lk-office__sep{ color:var(--lk-sep); }
/* Count pill — still used by the landing hubs ("N toimistoa"). It is NO LONGER the
   firm page's office count: that is now the search card's staff figure below. */
.lk-office__count{ flex:none; display:inline-flex; align-items:center; padding:5px 11px; background:#EEF3F2; color:#3F5B5A; border-radius:var(--lk-r-pill); font-size:13px; font-weight:600; white-space:nowrap; }

/* ----- the per-office staff figure (firm page) ----------------------------- */
/* Deliberately a near-copy of .lk-result__staff, down to the 228px and the hairline
   divider, because it draws the same picture from the same builder and a second visual
   treatment would read as a second kind of fact. Kept as its own class rather than
   reusing .lk-result__* : the office row is a shorter, denser container and the card
   rules are tuned to the result card's spine. If you restyle one, restyle both.
   --staff switches the row to top alignment so the divider spans the whole block; the
   centred default stays for the guide-index and register cards that share .lk-office. */
.lk-office--staff{ align-items:flex-start; }
.lk-office__staff{ flex:none; width:228px; display:flex; flex-direction:column;
  gap:6px; padding-left:16px; border-left:1px solid var(--lk-line); }
.lk-office__lead{ font-size:14px; font-weight:700; color:var(--lk-ink); line-height:1.3; }
.lk-office__more{ font-size:13px; color:var(--lk-ink-2); line-height:1.35; }
/* --lk-ink-3 (5.3:1), NOT the lighter grey: these lines carry meaning. Same reasoning
   as .lk-result__unknown. */
.lk-office__unknown{ font-size:13px; color:var(--lk-ink-3); line-height:1.35; }
.lk-office__legend{ margin:11px 0 0; font-size:13.5px; line-height:1.5; color:var(--lk-ink-3); }
@media (max-width:560px){
  .lk-office--staff{ flex-direction:column; gap:10px; }
  /* No divider when the block sits under the address rather than beside it — a
     left border on a full-width row reads as a quote, not a column split. */
  .lk-office__staff{ width:100%; padding-left:0; border-left:0; }
}
/* --stack: for office rows with long text + a CTA (guide index cards, in-article
   register links). Align the CTA to the top instead of floating it mid-height, and
   drop it under the text on narrow screens so the text isn't squeezed into a column. */
.lk-office--stack{ align-items:flex-start; }
.lk-office__cta{ flex:none; color:var(--lk-accent); font-weight:600; white-space:nowrap; }
@media (max-width:560px){
  .lk-office--stack{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---- People / availability (firm profile) -------------------------------- */
.lk-people__count{ margin:0; font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.lk-people__note{ margin:0; font-size:14px; color:var(--lk-ink-2); line-height:1.55; }
.lk-accepting{ display:flex; align-items:center; gap:11px; padding:15px 18px; border:1px solid var(--lk-calm-line);
  border-radius:13px; background:var(--lk-panel-calm); }
.lk-accepting__text{ font-size:16.5px; font-weight:600; color:var(--lk-calm-ink); }

/* ---- Pager / footer ------------------------------------------------------ */
.lk-pager{ display:flex; justify-content:space-between; align-items:center; padding:14px 2px 0; font-size:15px; }
.lk-pager__page{ color:var(--lk-ink-3); font-size:14px; }
.lk-footer{ margin-top:48px; padding:26px 0 40px; border-top:1px solid var(--lk-line);
  display:flex; flex-direction:column; gap:14px; }
.lk-disclaimer{ margin:0; font-size:13.5px; color:var(--lk-ink-2); line-height:1.6; }
.lk-sources{ margin:0; font-size:13px; color:var(--lk-ink-3); line-height:1.6; }

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width:700px){
  .lk-chrome{ padding:16px 32px; }
  /* True optical centring for .lk-nav. Under the flex fallback the header has only two
     children (brand + nav), so `justify-content:space-between` lets the nav claim all the
     space to the RIGHT of the brand and centres the links inside that box — which sits
     half a brand-width right of the page centre. It used to be balanced by a third child,
     the .lk-lang switcher, hidden for the FI-only launch (see the comment in <header>).
     A 1fr/auto/1fr grid gives equal gutters either side, so the nav is centred on the page
     regardless of brand width. Below 700px the flex rule still applies and the nav wraps
     to its own full-width row, where justify-content:center is already correct. */
  .lk-chrome{ display:grid; grid-template-columns:1fr auto 1fr; }
  .lk-brand{ justify-self:start; }
  .lk-nav{ grid-column:2; flex:0 0 auto; }
  .lk-title,.lk-h1{ font-size:42px; }
  .lk-meta,.lk-lead{ font-size:17.5px; }
  .lk-trust{ padding:26px; }
  .lk-main{ gap:22px; }
  .lk-main--profile{ gap:44px; }
  .lk-footer{ margin-top:60px; }
}

/* ---- Django messages (flash) -------------------------------------------- */
.lk-msg{ background:#E7F6EC; border:1px solid #B6E0C4; color:#1D6B39;
  padding:12px 16px; border-radius:var(--lk-r-md); margin:16px 0; font-size:15px; }

/* ---- Form notices + footer nav (contact page) --------------------------- */
.lk-note{ padding:12px 16px; border-radius:var(--lk-r-md); font-size:14.5px; line-height:1.5; }
.lk-note--warn{ background:#FBF0E6; border:1px solid #F0D6B8; color:#8A4B12; }
.lk-err{ margin:6px 0 0; color:#A32D2D; font-size:13px; }
.lk-footnav{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.lk-footnav a{ color:var(--lk-ink-2); text-decoration:none; font-size:14px; font-weight:600;
  min-height:44px; display:inline-flex; align-items:center; }
.lk-footnav a:hover{ color:var(--lk-ink); }

/* visually-hidden (screen-reader only) — used for the polite search-results announcement */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Legal / long-form pages (tietosuojaseloste) ------------------------- */
.lk-legal__body{ display:flex; flex-direction:column; }
.lk-legal__body h2{ font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:26px 0 8px;
  padding-top:18px; border-top:1px solid var(--lk-line); }
.lk-legal__body h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.lk-legal__body h3{ font-size:16px; font-weight:700; margin:16px 0 6px; color:var(--lk-ink); }
.lk-legal__body p{ margin:0 0 12px; color:var(--lk-ink-2); }
.lk-legal__body ul{ margin:0 0 14px; padding-left:20px; list-style:disc; color:var(--lk-ink-2); }
.lk-legal__body li{ margin:0 0 6px; }
.lk-legal__body code{ background:var(--lk-panel); padding:1px 6px; border-radius:6px; font-size:13.5px; }
.lk-legal__body a{ color:var(--lk-accent); }
.lk-legal__tablewrap{ overflow-x:auto; margin:0 0 14px; }
.lk-legal__table{ width:100%; border-collapse:collapse; font-size:14px; }
.lk-legal__table th,.lk-legal__table td{ text-align:left; vertical-align:top; padding:9px 11px;
  border:1px solid var(--lk-line); }
.lk-legal__table th{ background:var(--lk-panel); font-weight:700; color:var(--lk-ink); }
.lk-legal__table td{ color:var(--lk-ink-2); }