/* =====================================================================
   FEATURE · CASES (Tapaukset, view #vCa). Golden mockup 06-case.
   Masthead (.mast) · the message as it arrives (.chat / .camail / .cavm / .capost / .castory) with numbered
   .fn markers · vote (.vote) · calm analysis (.quiet: .fnlist, the hidden-message post-it, the healthy
   response, another reading) · pause + help + share · archive of cases read.
   Role tokens and component classes only; no colours of its own, nothing animates.
   ===================================================================== */

/* ---------- layout: #caContent is a wrapper, the view already carries the gutter ---------- */
.cacase>.mast,.cacase>.sec{padding-left:0;padding-right:0}
.cacase>.mast{padding-top:var(--s4)}
.cacase .card{margin-bottom:0}
.cacase [tabindex="-1"]:focus{outline:none}
.cacase [tabindex="-1"]:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* loading */
.caload{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s9) 0;text-align:center}
.caload .ad{justify-content:center;padding:0}

/* ---------- masthead ---------- */
.camast__back{margin:0 0 var(--s3) -10px}
.camast .chips{margin-top:var(--s1)}
/* Title scales with its longest unbreakable run (--ch, set from JS) so "Verkostoitumistilaisuus" or
   "Vorstellungsgespräch" never break mid-word; Montserrat Black caps average ~.75em, hence 1.3.
   Without container units (iOS < 16) the .display/.h1 size applies and long words wrap. */
.catitle{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.catitle.display{font-size:clamp(16px,calc(100cqi * 1.3 / var(--ch,10)),var(--t-display))}
.catitle.h1{font-size:clamp(16px,calc(100cqi * 1.3 / var(--ch,10)),var(--t-h1))}
.camast .lede{max-width:34ch}

/* ---------- the message ---------- */
.casrc{scroll-margin-top:calc(var(--hdr-h,56px) + var(--st,0px) + var(--s4))}
.casrc .msg__b{overflow-wrap:break-word;white-space:normal}
/* the hand-drawn ring needs air above and below inside a bubble */
.casrc .ring{margin:8px 9px 6px 7px}
/* a marker never wraps away from the last word it belongs to */
.canw{white-space:nowrap}
.msg--cont{margin-top:calc(-1 * var(--s2))}
.chat--group .msg--them .msg__who{color:var(--fg-2)}
/* system lines ("Mira perusti ryhmän…", narration before follow-up messages) */
.casys{align-self:stretch;display:flex;align-items:center;gap:var(--s3);color:var(--fg-3);font-size:var(--t-label);line-height:1.4;text-align:center}
.casys::before,.casys::after{content:"";flex:1 1 var(--s5);min-width:var(--s4);height:1px;background:var(--rule)}
.casys--lead{margin:var(--s6) 0 var(--s4);text-transform:none}
/* a photo sent in a chat */
.camsg__img{display:inline-flex;align-items:center;gap:var(--s2);font-style:italic;color:inherit}
.camsg__img .ic{flex:none;opacity:.8}
/* read receipt under a bubble */
.camsg__rc{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-3)}
.camsg__rc .ic{flex:none}
.camsg__rc .fn{margin-left:2px}
.casrc .annot{margin-top:2px}

/* email */
.camail{border:var(--line) solid var(--rule-2);border-radius:var(--r2);background:var(--bg-raise)}
.camail__h{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-bottom:var(--hair) solid var(--rule)}
.camail__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border:var(--line) solid var(--fg);border-radius:var(--r1)}
.camail__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s2);min-height:20px;line-height:1.35}
.camail__row+.camail__row{margin-top:var(--s1)}
.camail__k{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.camail__v{font-weight:var(--w-strong);font-size:15.5px;color:var(--fg);overflow-wrap:anywhere}
.camail__subj{font-weight:var(--w-heavy)}
.camail__b{padding:var(--s4) var(--s4) var(--s5);font-size:17px;line-height:1.6;color:var(--read-fg)}
.camail__b p+p{margin-top:.9em}
.camail__log li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule)}
.camail__log li:first-child{padding-top:0}
.camail__log li:last-child{border-bottom:0;padding-bottom:0}
.camail__t{font-size:16.5px;line-height:1.5}

/* voicemail */
.cavm{border:var(--line) solid var(--rule-2);border-radius:var(--r2);background:var(--bg-raise)}
.cavm__h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) var(--s3)}
.cavm__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--inv-bg);color:var(--inv-fg);border-radius:var(--r1)}
.cavm__t{font-weight:var(--w-heavy);font-size:16px;line-height:1.25}
.cavm__s{margin-top:2px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.cavm__wave{display:flex;align-items:center;justify-content:space-between;height:46px;margin:0 var(--s4);padding-bottom:var(--s3);border-bottom:var(--hair) solid var(--rule)}
.cavm__wave>i{flex:none;width:3px;height:calc(var(--v,.5) * 32px);background:var(--fg-3);border-radius:2px}
.cavm__b{padding:var(--s4) var(--s4) var(--s5);font-style:italic;font-size:17px;line-height:1.6;color:var(--read-fg)}
.cavm__b p+p{margin-top:.9em}

/* social post (Instagram / LinkedIn) */
.capost{border:var(--line) solid var(--rule-2);border-radius:var(--r2);background:var(--bg-raise);overflow:hidden}
.capost__h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4)}
.capost__av{width:36px;height:36px;flex:none;display:grid;place-items:center;border:var(--line) solid var(--rule-2);border-radius:var(--r1);color:var(--fg-2)}
.capost__av .ic{width:20px;height:20px}
.capost__a{font-weight:var(--w-heavy);font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.capost__m{margin-top:1px;font-size:13.5px;line-height:1.35;color:var(--fg-3);overflow-wrap:anywhere}
.capost__pf{flex:none;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.capost__body{padding:0 var(--s4) var(--s4)}
.capost__img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);min-height:150px;margin:0 calc(-1 * var(--s4)) var(--s4);padding:var(--s5) var(--s6);
  background:var(--bg-sunk);border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule);color:var(--fg-3);text-align:center}
.capost__body>.capost__img:last-child{margin-bottom:0}
.capost__body>.capost__cap+.capost__img{margin-top:var(--s4)}
.capost__imgic .ic{width:28px;height:28px;stroke-width:1.8}
.capost__img figcaption{max-width:30ch;font-style:italic;font-size:14px;line-height:1.45}
.capost__cap{font-size:16px;line-height:1.55;color:var(--fg)}
.capost__cap p+p{margin-top:.7em}
.capost__cap+.capost__cap{margin-top:var(--s3)}
.capost__tags{margin-top:var(--s3);font-weight:var(--w-strong);font-size:14px;line-height:1.45;color:var(--fg-2);overflow-wrap:anywhere}
.capost__likes{margin-top:var(--s3);font-weight:var(--w-heavy);font-size:14px}
.capost__c{padding:var(--s3) var(--s4) var(--s4);border-top:var(--hair) solid var(--rule)}
.capost__ch{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.capost__c li{margin-top:var(--s2);font-size:14.5px;line-height:1.45;color:var(--fg-2);overflow-wrap:anywhere}
.capost__c b{font-weight:var(--w-heavy);color:var(--fg)}

/* story */
.castory{margin-top:0;padding-left:var(--s4);border-left:var(--bold) solid var(--rule-2)}

/* ---------- content note gate ---------- */
.cagate__e{display:flex;align-items:center;gap:var(--s2)}
.cagate__note{color:var(--fg);font-size:17px}

/* ---------- vote ---------- */
.cavote .vote__o{min-height:var(--tap);justify-content:center}
.cavote .vote:not(.is-result) .vote__o{min-height:64px;padding-bottom:10px}
.cavote .vote:not(.is-result) .vote__o::after{display:none}
/* a label never breaks inside a word; the check moves under it when the box is too narrow */
.cavote .vote__o b{flex-wrap:wrap;row-gap:2px;font-size:15px;line-height:1.2;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
.cavote .vote.is-result .vote__o{min-height:92px;justify-content:flex-start}
.cavote .vote__o[aria-disabled="true"]{cursor:default}
.cavote .vote__o:not([aria-disabled="true"]):active{transform:scale(.98)}
.cavote__s:empty{display:none}
.cavote__msg{color:var(--fg);font-weight:var(--w-strong)}

/* ---------- analysis (inside .quiet) ---------- */
.caan__what{color:var(--fg);max-width:var(--measure)}
.caan .fnlist{border-top:var(--hair) solid var(--rule)}
.caan .note{font-size:14px}
.cahid .memo__t{text-wrap:pretty}
.cahealthy .eyebrow{display:flex;align-items:center;gap:var(--s2)}
.cahealthy .eyebrow .ic--inline{margin-right:0}
.cahealthy .body{color:var(--fg)}
.casay{font-weight:var(--w-heavy);color:var(--fg)}
.caother .body{max-width:var(--measure)}

/* ---------- pause, help, share ---------- */
.capause__q{padding-left:var(--s4);border-left:6px solid var(--fg);font-weight:var(--w-heavy);font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty;overflow-wrap:break-word;hyphens:auto}
.capause .chips .chip--btn{gap:var(--s2);text-align:left}
.capause .chip--btn .ic{flex:none}
.cahelp,.carow{width:100%;text-align:left;font:inherit}
.cahelp .ic:first-child,.carow>.ic:first-child{flex:none}
.carow{border-top:0}
.cahelp+.carow{margin-top:0}
.canext{display:flex;align-items:center;gap:0}
.canext .ic--inline{flex:none}

/* ---------- archive ---------- */
.caarch__r{width:100%;text-align:left;font:inherit}
.caarch__r .row__t{font-size:16.5px}
.caarch__r[aria-current="true"] .row__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- error ---------- */
.caempty .btn{align-self:stretch}

/* narrow phones: the three vote options stay side by side, labels may wrap */
@media (max-width:359px){
  .cavote .vote__o{padding-left:8px;padding-right:8px}
  .cavote .vote__o b{font-size:13.5px;letter-spacing:0}
  .capause__q{font-size:20px}
  .carow .row__t{font-size:16px}
}