/* Business cases (#cases): one case per kind of shop, built from the example packs the product ships with
   (app/src/examples.js; test/site-cases.test.js keeps every figure in step). The chip row picks a case (cases.js);
   without JavaScript every case is listed. A case reads left to right: the customer, what น้องเก้า drafted, then what
   the admin does next. Same tokens as site.css. */
.cases{padding:var(--space-section) var(--gutter);background:var(--white);border-block:var(--line)}
.case-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:60rem;margin:0 auto var(--space-6)}
.case-picker button{min-height:44px;padding:8px 18px;border:var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:500 1rem/1.4 var(--font-display);cursor:pointer;box-shadow:3px 3px 0 rgb(75 74 103 / .2);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms ease}
.case-picker button:hover{background:var(--rose-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgb(75 74 103 / .24)}
.case-picker button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgb(75 74 103 / .24)}
.case-picker [aria-selected="true"],.case-picker [aria-selected="true"]:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:none;box-shadow:4px 4px 0 rgb(47 44 70 / .3)}

.case{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"head head" "chat hud" "foot foot";gap:var(--space-5) clamp(20px,3vw,40px);max-width:1120px;margin:0 auto;padding:clamp(18px,3vw,36px);border:var(--line);border-radius:32px;box-shadow:var(--drop-lg);background:radial-gradient(120% 90% at 100% 0%,#d9f6ff 0,transparent 55%),radial-gradient(90% 80% at 0% 100%,var(--peach) 0,transparent 60%),var(--rose-soft)}
.case[hidden]{display:none}
.case:focus-visible{outline-offset:6px}
.case-head{grid-area:head;display:flex;align-items:center;gap:var(--space-4)}
.case-head img{flex:none;width:64px;height:64px;border-radius:50%;border:var(--line);background:var(--white);box-shadow:var(--drop)}
.case-head p{margin-top:2px;color:var(--navy);line-height:1.6}
.case-label{font:500 .88rem/1.4 var(--font-display);color:var(--navy)}

/* The customer's side: the room the admin has open (header, then the log with the newest message at the bottom),
   drawn like the chat in the demo above. */
.case-chat{--pad:18px;grid-area:chat;display:flex;flex-direction:column;gap:10px;padding:0 var(--pad) var(--pad);background:var(--surface);border:var(--line);border-radius:var(--r-panel);overflow:hidden}
.case-chat .case-label{display:flex;align-items:center;gap:10px;margin:0 calc(var(--pad) * -1) auto;padding:12px var(--pad);background:var(--white);border-bottom:1px solid var(--border)}
.case-chat .case-label::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:var(--line);background:var(--peach)}
.case-them{align-self:flex-start;max-width:94%;padding:10px 14px;border:1px solid var(--border);border-radius:18px 18px 18px 6px;background:var(--white);line-height:1.65;overflow-wrap:anywhere}
/* A photo the customer sent (illustrations made for the page: brand/site-cases/PROVENANCE.md). */
.case-photo{flex:none;align-self:flex-start;width:min(200px,70%);height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--border);border-radius:16px 16px 16px 6px;background:var(--rose-soft)}

/* น้องเก้า's side: what she looked at, her draft, the light, and a picture to send with it. */
.case-hud{grid-area:hud;display:grid;gap:12px;align-content:start;padding:18px;background:rgb(255 255 255 / .7);border:var(--line);border-radius:var(--r-panel)}
.case-hud .ctx-chips,.case-hud .balloons{margin-top:0}
.case-hud .balloons{gap:10px}
.case-hud .balloon{max-width:34em;font-size:.95rem;line-height:1.7}
.ctx-chips .seen-pic{display:inline-flex;align-items:center;gap:8px}
.case-pic{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 12px;border:var(--line);border-radius:var(--r-control);background:var(--white);font-size:.88rem}
.case-light{display:flex;align-items:baseline;gap:10px;font-size:.93rem;line-height:1.6}
.case-light .light{align-self:center}
.case-light b{white-space:nowrap}

.case-foot{grid-area:foot;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-4) clamp(20px,3vw,40px);padding-top:var(--space-5);border-top:1.5px dashed var(--navy)}
.case-foot h4{margin:0 0 6px;font:500 1.02rem/1.4 var(--font-display)}
.case-helps{display:grid;gap:6px}
.case-helps li{position:relative;padding-left:28px;line-height:1.7}
.case-helps li::before{content:"";position:absolute;left:0;top:.4em;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--navy);background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.3l1.8 1.8 3.6-4' fill='none' stroke='%232F2C46' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat}

.cases-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-5);max-width:1120px;margin:var(--space-6) auto 0;text-align:center}
.cases-cta span{max-width:30em;font-size:var(--text-small);color:var(--navy)}

@media (prefers-reduced-motion:no-preference){
  .case .balloon{animation:pop-in 420ms var(--ease-out) both}
  .case .b2{animation-delay:140ms}
}
@media (max-width:860px){
  .case{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "chat" "hud" "foot";border-radius:24px}
  .case-foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .case-picker{gap:8px}.case-picker button{min-height:40px;padding:6px 14px;font-size:.92rem}
  .case-head{align-items:flex-start}.case-head img{width:52px;height:52px}
  .case-chat{--pad:14px}.case-hud{padding:14px}
  .case-hud .b2{margin-left:12px}
}