/* ============================================================
   Sano · Live Studies — .sano-std
   Container-query driven. No outer padding: spacing lives on
   the dnd section.
   ============================================================ */

.sano-std{
  container-type: inline-size;
  interpolate-size: allow-keywords;

  --std-max: 1140px;

  --ink:#0B1B2B;
  --ink-2:#5A6472;
  --ink-3:#8A93A0;
  --surface:#FFFFFF;
  --surface-2:#FAFAFC;
  --row-bg:#F5F6F8;
  --row-bg-hover:#EAEDF2;
  --line:#E4E6F0;
  --accent:#3B2FB5;
  --accent-soft:#EAE8F8;
  --accent-line:#CFC8F3;
  --btn-fg:#FFFFFF;

  --live-fg:#0F7A55;
  --live-bg:#E6F4EC;
  --live-dot:#17A86F;

  --sh-card: 0 1px 2px rgba(11,27,43,.04), 0 4px 12px rgba(11,27,43,.045);
  --sh-card-open: 0 1px 3px rgba(11,27,43,.05), 0 8px 22px rgba(11,27,43,.07);
  --sh-flag: 0 0 0 1px rgba(11,27,43,.08), 0 1px 3px rgba(11,27,43,.18);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-reveal:1000ms;
  --dur-hover:280ms;
  --dur-open:420ms;
}
.sano-std *,
.sano-std *::before,
.sano-std *::after{ box-sizing:border-box; }

.sano-std__wrap{ max-width:var(--std-max); margin:0 auto; }

/* ---------- header ---------- */
.sano-std__head{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center;
}
.sano-std__eyebrow{
  margin:0; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.sano-std__heading{
  margin:0; font-size:clamp(32px, 3.2cqi, 36px); line-height:1.18;
  font-weight:500; letter-spacing:-.02em; color:var(--ink);
  text-wrap:balance;
}
.sano-std__intro{
  margin:0; font-size:16px; line-height:1.55; color:var(--ink-2);
  max-width:54ch; text-wrap:balance;
}

/* ---------- filters ---------- */
.sano-std__filters{
  margin:34px 0 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.sano-std__filters:empty{ display:none; }
.sano-std__chip{
  font-family:inherit; font-size:15px; font-weight:500; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  transition:color var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out),
             background var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out);
}
.sano-std__chip-n{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sano-std__chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--btn-fg);
}
.sano-std__chip[aria-pressed="true"] .sano-std__chip-n{ color:rgba(255,255,255,.7); }
.sano-std__chip:active{ transform:scale(.98); }

/* ---------- condition cards ---------- */
.sano-std__list{ margin:28px 0 0; display:flex; flex-direction:column; gap:12px; }

.sano-std__cond{
  background:var(--surface);
  border-radius:16px;
  box-shadow:var(--sh-card);
  transition:box-shadow var(--dur-hover) var(--ease-out);
}
.sano-std__cond[hidden]{ display:none; }
.sano-std__cond[open]{ box-shadow:var(--sh-card-open); }

.sano-std__sum{
  display:grid; grid-template-columns:48px minmax(0,1fr) auto 24px;
  gap:0 16px; align-items:center;
  padding:20px 26px; border-radius:15px;
  cursor:pointer; list-style:none;
}
.sano-std__sum::-webkit-details-marker{ display:none; }
.sano-std__cond[open] .sano-std__sum{ border-radius:15px 15px 0 0; }

.sano-std__icon{
  width:48px; height:48px; border-radius:10px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--accent-soft);
}
.sano-std__icon img{ width:30px; height:30px; object-fit:contain; display:block; }

.sano-std__name{
  margin:0; font-size:22px; font-weight:500; line-height:1.3;
  letter-spacing:-.015em; color:var(--ink);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  transition:color var(--dur-hover) var(--ease-out);
}

.sano-std__live{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; line-height:1;
  letter-spacing:normal; white-space:nowrap;
  padding:5px 11px 5px 9px; border-radius:999px;
  color:var(--live-fg); background:var(--live-bg);
}
.sano-std__live::before{
  content:""; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--live-dot);
}

.sano-std__flags{ display:flex; align-items:center; gap:8px; }
.sano-std__fchip{ display:block; line-height:0; }
.sano-std__fchip[hidden]{ display:none; }
.sano-std__fchip img{
  width:21px; height:auto; display:block;
  border-radius:3px; box-shadow:var(--sh-flag);
}
.sano-std__count{
  font-size:13px; font-weight:500; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sano-std__count:empty{ display:none; }

.sano-std__chev{
  width:24px; height:24px; color:var(--ink-3);
  transition:transform var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out);
}
.sano-std__cond[open] .sano-std__chev{ transform:rotate(180deg); color:var(--accent); }

/* ---------- panel ---------- */
.sano-std__panel{
  display:flex; flex-direction:column; gap:20px;
  padding:0 26px 26px;
}
.sano-std__desc{
  margin:0; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:66ch;
}

.sano-std__studies{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.sano-std__studies > li[hidden]{ display:none; }

.sano-std__study{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:16px 18px;
  border-radius:12px;
  background:var(--row-bg);
  transition:background var(--dur-hover) var(--ease-out);
}
.sano-std__flag{ flex:none; line-height:0; }
.sano-std__flag img{
  width:26px; height:auto; display:block;
  border-radius:4px; box-shadow:var(--sh-flag);
}

/* Country on top, the facts underneath. */
.sano-std__info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.sano-std__country{ font-size:16px; font-weight:500; line-height:1.35; color:var(--ink); }

/* Every fact is the same component: a Yes and a No look identical. */
.sano-std__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px;
  font-size:14px; line-height:1.35; color:var(--ink-2);
}
.sano-std__fact{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.sano-std__fact svg{ width:15px; height:15px; flex:none; color:var(--ink-3); }
.sano-std__fact b{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }

/* Outline, not solid: four filled pills stacked would shout. */
.sano-std__btn{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:15px; font-weight:500; line-height:1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--accent-line); background:var(--surface); color:var(--accent);
  transition:background var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out);
}
.sano-std__btn svg{ width:13px; height:13px; transition:transform var(--dur-hover) var(--ease-out); }
.sano-std__btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--btn-fg); margin-top:10px; }
.sano-std__btn--wide{ padding:12px 22px; }
.sano-std__btn:active{ transform:scale(.99); }

/* Stretched link (§9): the row is the target, the anchor stays the anchor. */
.sano-std__btn::after{ content:""; position:absolute; inset:0; border-radius:12px; }
.sano-std__btn--solid::after,
.sano-std__btn--wide::after{ content:none; }
.sano-std__study:has(.sano-std__btn:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.sano-std__study .sano-std__btn:focus-visible{ outline:none; }

/* ---------- open animation, where supported ---------- */
@supports selector(::details-content){
  .sano-std__cond::details-content{
    block-size:0; overflow:hidden; opacity:0;
    transition:block-size var(--dur-open) var(--ease-out),
               opacity var(--dur-hover) var(--ease-out),
               content-visibility var(--dur-open) allow-discrete;
  }
  .sano-std__cond[open]::details-content{ block-size:auto; opacity:1; }
}

/* ---------- empty + more ---------- */
.sano-std__empty{
  background:var(--surface); border-radius:16px; box-shadow:var(--sh-card);
  padding:48px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.sano-std__empty[hidden]{ display:none; }
.sano-std__empty-t{ margin:0; font-size:18px; font-weight:500; color:var(--ink); }
.sano-std__empty-p{ margin:0; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:44ch; }
.sano-std__more{ margin:20px 0 0; display:flex; justify-content:center; }
.sano-std__more[hidden]{ display:none; }

/* ---------- hover, gated behind a real pointer ---------- */
/* The card itself does not change colour: only the title and the arrow. */
@media (hover:hover) and (pointer:fine){
  .sano-std__chip:hover{ color:var(--ink); border-color:var(--ink-3); }
  .sano-std__chip[aria-pressed="true"]:hover{ color:var(--btn-fg); border-color:var(--accent); }

  .sano-std__sum:hover .sano-std__name{ color:var(--accent); }
  .sano-std__sum:hover .sano-std__chev{ color:var(--accent); }

  .sano-std__study:hover{ background:var(--row-bg-hover); }
  .sano-std__study:hover .sano-std__btn{ background:var(--accent); border-color:var(--accent); color:var(--btn-fg); }
  .sano-std__study:hover .sano-std__btn svg{ transform:translateX(3px); }
  .sano-std__btn--solid:hover,
  .sano-std__btn--wide:hover{ background:var(--accent); border-color:var(--accent); color:var(--btn-fg); }
}

/* ---------- one-piece load reveal ---------- */
.sano-std.is-ready .sano-std__wrap{ opacity:0; }
.sano-std.is-ready.is-visible .sano-std__wrap{
  opacity:1;
  transition:opacity var(--dur-reveal) var(--ease-soft);
}

/* ---------- container queries ---------- */
@container (max-width: 720px){
  .sano-std__sum{ grid-template-columns:42px minmax(0,1fr) 24px; gap:6px 13px; padding:18px 18px; border-radius:15px; }
  .sano-std__cond[open] .sano-std__sum{ border-radius:15px 15px 0 0; }
  .sano-std__icon{ width:42px; height:42px; border-radius:9px; }
  .sano-std__icon img{ width:26px; height:26px; }
  .sano-std__name{ font-size:20px; gap:5px 10px; }
  .sano-std__flags{ grid-column:2; }
  .sano-std__chev{ grid-column:3; grid-row:1; align-self:start; margin-top:8px; }
  .sano-std__panel{ padding:0 18px 18px; gap:16px; }
  .sano-std__meta{ gap:5px 14px; }
}
@container (max-width: 560px){
  .sano-std__study{ flex-wrap:wrap; gap:12px 13px; padding:15px; }
  .sano-std__info{ flex:1 1 auto; }
  .sano-std__btn{ flex:1 1 100%; justify-content:center; }
}

/* ---------- fallback where container queries are unsupported ---------- */
@supports not (container-type: inline-size){
  @media (max-width: 720px){
    .sano-std__sum{ grid-template-columns:42px minmax(0,1fr) 24px; gap:6px 13px; padding:18px 18px; border-radius:15px; }
    .sano-std__cond[open] .sano-std__sum{ border-radius:15px 15px 0 0; }
    .sano-std__icon{ width:42px; height:42px; border-radius:9px; }
    .sano-std__icon img{ width:26px; height:26px; }
    .sano-std__name{ font-size:20px; gap:5px 10px; }
    .sano-std__flags{ grid-column:2; }
    .sano-std__chev{ grid-column:3; grid-row:1; align-self:start; margin-top:8px; }
    .sano-std__panel{ padding:0 18px 18px; gap:16px; }
    .sano-std__meta{ gap:5px 14px; }
  }
  @media (max-width: 560px){
    .sano-std__study{ flex-wrap:wrap; gap:12px 13px; padding:15px; }
    .sano-std__info{ flex:1 1 auto; }
    .sano-std__btn{ flex:1 1 100%; justify-content:center; }
  }
}

/* ---------- reduced motion: zero the tokens ---------- */
@media (prefers-reduced-motion: reduce){
  .sano-std{
    --dur-reveal:1ms; --dur-hover:1ms; --dur-open:1ms;
  }
  .sano-std.is-ready .sano-std__wrap{ opacity:1; }
}