/* Continuum of Care — "Levels of Support" phone presentation (<768px).
   Source: AriseVida-Continuum-Levels-of-Support-Mobile handoff, adapted to the
   site (Fraunces / Inter tokens, host padding, legacy visibility,
   reference-measured sizes). The existing section supplies the 768px+
   presentation; the legacy inner wrapper is hidden only once the controller
   has enhanced this block. Every selector is scoped to .avc-levels or the
   marked host. */
.avc-levels { display:none; }
@media (max-width:767.98px) {
  /* Legacy inner block: defeat any display declaration that would override
     the browser's [hidden] rule once the phone block is live. */
  [data-levels-mount] > [data-levels-legacy][hidden] { display:none !important; }
  /* Host section while the phone block is active: the component owns its
     own gutters and surface, so the outer padding would otherwise double. */
  .coc-spectrum[data-levels-active] {
    padding: 0 !important;
    background: #fffdf8;
  }
  .coc-spectrum[data-levels-active]::before,
  .coc-spectrum[data-levels-active]::after { display:none; }

  .avc-levels {
    --levels-cream:#fffcf5; --levels-ink:var(--ink-900, #0a1f25); --levels-copy:#475569;
    --levels-teal:var(--teal-700, #0f766e); --levels-blue:#006fa8; --levels-green:#467827; --levels-gold:#8f5f12; --levels-red:#b04a2a;
    /* Site fonts: the references are set in the site's display serif (Fraunces)
       and text sans (Inter); the handoff's Times/Arial values were fallbacks. */
    --levels-serif: var(--font-display, 'Fraunces', Georgia, serif);
    --levels-sans: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --levels-icon:44px; --levels-toggle:34px; --levels-gap:18px; --levels-other-gap:24px;
    display:block; inline-size:100%; max-inline-size:46rem; box-sizing:border-box;
    margin-inline:auto; padding:36px clamp(18px,6.15vw,28px) 34px;
    color:var(--levels-copy); background:var(--levels-cream); isolation:isolate;
    font:400 1rem/1.35 var(--levels-sans); text-align:start;
  }
  .avc-levels[hidden], .avc-levels [hidden] { display:none!important; }
  .avc-levels *, .avc-levels *::before, .avc-levels *::after { box-sizing:border-box; }
  .avc-levels p, .avc-levels h2, .avc-levels h3, .avc-levels h4 { margin:0; }
  /* Section header typography/decoration comes from the site's shared mobile heading system ([data-av-mobile-section-heading] in styles.css), the same rules the Methadone page uses; only the wrapper spacing lives here. */
  .avc-levels .avc-levels__intro { margin-block-end:24px; }
  .avc-levels .avc-levels__emergency { display:grid; grid-template-columns:var(--levels-icon) minmax(0,1fr); align-items:start; gap:14px; padding:14px 14px 10px; border:1px solid #ffcabe; border-radius:16px; background:#fdf0ec; }
  .avc-levels .avc-levels__emergency h3 { color:var(--levels-ink); font:600 clamp(14px,4.1vw,18px)/1.15 var(--levels-serif); letter-spacing:-.012em; text-wrap:balance; }
  .avc-levels .avc-levels__emergency p { margin-block-start:3px; font:400 clamp(12.5px,3.33vw,14px)/1.45 var(--levels-sans); }
  .avc-levels .avc-levels__emergency a, .avc-levels .avc-levels__emergency strong { color:var(--levels-red); font-weight:600; }
  /* Inline 911 link: 44px hit box without changing the line flow. */
  .avc-levels .avc-levels__emergency a { display:inline-block; padding-block:14px; margin-block:-14px; }
  .avc-levels .avc-levels__emergency a { text-decoration:none; }
  .avc-levels .avc-levels__group { margin-block-start:13px; }
  .avc-levels .avc-levels__group--other { margin-block-start:14px; }
  .avc-levels .avc-levels__group-intro { margin-block-end:6px; }
  .avc-levels .avc-levels__group--other .avc-levels__group-intro { margin-block-end:2px; }
  .avc-levels .avc-levels__group-intro h3 { color:var(--levels-teal); font:700 11.5px/1.3 var(--levels-sans); letter-spacing:.13em; text-transform:uppercase; }
  .avc-levels .avc-levels__group-intro p { margin-block-start:2px; font:400 clamp(12.5px,3.33vw,14px)/1.4 var(--levels-sans); }
  .avc-levels .avc-levels__arisevida-card { border:1px solid #b9dfd9; border-radius:16px; background:#eef7f5; }
  .avc-levels .avc-levels__item { --accent:var(--levels-teal); --tint:#eaf6f4; --border:#b9dfd9; --toggle:#d9efeb; --crop-width:126.434%; --crop-left:-13.217%; --crop-top:-13.217%; }
  .avc-levels [data-levels-item="outpatient"] { --accent:var(--levels-blue); --tint:#eef8fc; --border:#c2deec; --toggle:#e0f2fb; --crop-width:131.663%; --crop-left:-15.832%; --crop-top:-15.779%; }
  .avc-levels [data-levels-item="residential"] { --accent:var(--levels-gold); --tint:#fff9ef; --border:#f4d9aa; --toggle:#fbf2e3; --crop-width:124.407%; --crop-left:-12.204%; --crop-top:-12.104%; }
  .avc-levels [data-levels-item="php"] { --accent:var(--levels-green); --tint:#f3f8ee; --border:#d4e8ca; --toggle:#ecf5e6; --crop-width:127.735%; --crop-left:-13.867%; --crop-top:-13.867%; }
  .avc-levels [data-levels-item="community"] { --crop-width:136.738%; --crop-left:-18.369%; --crop-top:-18.151%; }
  .avc-levels .avc-levels__arisevida-card > .avc-levels__item { border-radius:15px; transition:background-color 240ms ease; }
  .avc-levels .avc-levels__arisevida-card > .avc-levels__item + .avc-levels__item::before { content:""; display:block; block-size:1px; margin-inline:7px; background:#c9e3e5; }
  .avc-levels .avc-levels__other-list > .avc-levels__item { position:relative; border:1px solid transparent; border-radius:15px; isolation:isolate; background:var(--levels-cream); /* own ground for the icon blend inside this stacking context */ }
  /* Sep 2026: the open panel (tint + border) is painted inside the row's top and bottom edges so its
     rounded corners sit 5px clear of the dividers at the row boundaries (the divider is the first pixel of
     each row, hence 5px top / 4px bottom insets) — the same clearance the last panel already had to the
     educational note. It fades with the open state and follows the row's box. */
  .avc-levels .avc-levels__other-list > .avc-levels__item::after {
    content:""; position:absolute; inset:5px -1px 4px; z-index:-1; border:1px solid var(--border); border-radius:15px;
    background:var(--tint); opacity:0; transition:opacity 240ms ease; pointer-events:none;
  }
  .avc-levels .avc-levels__other-list > .avc-levels__item:last-child::after { inset-block-end:0; }
  .avc-levels .avc-levels__other-list > .avc-levels__item + .avc-levels__item::before { content:""; position:absolute; inset-block-start:-1px; inset-inline:-1px; block-size:1px; background:#dfe4e8; }
  .avc-levels .avc-levels__item[data-open="true"] { background:var(--tint); }
  .avc-levels .avc-levels__other-list > .avc-levels__item[data-open="true"] { background:var(--levels-cream); border-color:transparent; }
  .avc-levels .avc-levels__other-list > .avc-levels__item[data-open="true"]::after { opacity:1; }
  .avc-levels .avc-levels__row-heading { font:inherit; }
  .avc-levels .avc-levels__trigger { appearance:none; display:grid; grid-template-columns:var(--levels-icon) minmax(0,1fr) var(--levels-toggle); align-items:center; column-gap:var(--levels-gap); inline-size:100%; min-inline-size:0; margin:0; padding:8px 11px 4px; border:0; border-radius:8px; background:transparent; box-shadow:none; color:var(--levels-ink); font:inherit; letter-spacing:normal; text-align:start; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  /* The renderings set the outside-care rows tighter: artwork nearer the edge, a wider icon gap, a narrower control gap. */
  .avc-levels .avc-levels__other-list .avc-levels__trigger { column-gap:6px; padding:5px 3px 5px 5px; }
  /* Inpatient/Residential is a one-line row whose trigger height is the icon's: with the open panel's border
     now 6px inside the row its disc needs 10px block padding to stay ~4px clear of the panel's top edge (it sat
     5px inside the old edge-to-edge border). The other two rows keep their closed heights. */
  .avc-levels [data-levels-item="residential"] .avc-levels__trigger { padding-block:10px; }
  /* The inset moved the panel's bottom border 5px up into the old 3px panel padding: give the non-last outside
     rows that clearance back so the callout / last line sits 3px above the panel border, not on it. */
  .avc-levels .avc-levels__other-list > .avc-levels__item:not(:last-child) .avc-levels__panel-inner { padding-block-end:8px; }
  .avc-levels .avc-levels__other-list .avc-levels__copy { padding-inline-start:calc(var(--levels-other-gap) - 6px); }
  .avc-levels .avc-levels__trigger:disabled { opacity:1; color:var(--levels-ink); cursor:default; -webkit-text-fill-color:var(--levels-ink); }
  .avc-levels .avc-levels__copy { display:block; min-inline-size:0; padding-block:4px; }
  .avc-levels .avc-levels__other-list .avc-levels__copy { padding-block:2.5px; }
  .avc-levels .avc-levels__title { display:block; color:var(--levels-ink); font:500 clamp(15.5px,4.1vw,17px)/1.16 var(--levels-serif); letter-spacing:-.015em; text-wrap:balance; }
  /* The renderings break this summary after "outside"; an em measure keeps that break under text zoom. */
  .avc-levels [data-levels-item="php"] .avc-levels__summary { max-inline-size:16em; }
  .avc-levels .avc-levels__summary { display:block; margin-block-start:3px; color:var(--levels-copy); font:400 clamp(12.5px,3.33vw,14px)/1.4 var(--levels-sans); }
  /* White margins are cropped in CSS. Source PNG bytes remain unchanged. */
  .avc-levels .avc-levels__icon { position:relative; display:block; inline-size:var(--levels-icon); block-size:var(--levels-icon); overflow:hidden; border-radius:12px; mix-blend-mode:multiply; }
  .avc-levels .avc-levels__icon img { position:absolute; display:block; inline-size:var(--crop-width); max-inline-size:none; block-size:auto; inset-inline-start:var(--crop-left); inset-block-start:var(--crop-top); }
  .avc-levels .avc-levels__icon--emergency { --crop-width:124.908%; --crop-left:-12.454%; --crop-top:-12.454%; }
  .avc-levels .avc-levels__icon--information { --crop-width:190.135%; --crop-left:-45.068%; --crop-top:-44.385%; inline-size:19px; block-size:19px; }
  .avc-levels .avc-levels__toggle { display:grid; place-items:center; inline-size:var(--levels-toggle); block-size:var(--levels-toggle); border-radius:50%; background:var(--toggle); color:var(--accent); }
  .avc-levels .avc-levels__chevron { display:block; inline-size:13px; block-size:16px; position:relative; transition:transform 240ms cubic-bezier(.2,.65,.3,1); }
  .avc-levels .avc-levels__chevron::before { content:""; position:absolute; inline-size:9px; block-size:9px; inset-block-start:3.5px; inset-inline-start:0; border-block-start:2px solid currentColor; border-inline-end:2px solid currentColor; transform:rotate(45deg); }
  .avc-levels [data-open="true"] .avc-levels__chevron { transform:rotate(90deg); }
  .avc-levels .avc-levels__trigger:disabled .avc-levels__toggle { visibility:hidden; }
  .avc-levels .avc-levels__panel { min-block-size:0; }
  .avc-levels .avc-levels__panel-inner { padding:0 7px 3px; }
  .avc-levels .avc-levels__details { padding:9px 23px 0 6px; border-block-start:1px solid var(--border); font:400 clamp(13.5px,3.6vw,14.5px)/1.5 var(--levels-sans); }
  .avc-levels .avc-levels__availability { margin-block-start:7px; color:var(--accent); font-weight:600; }
  .avc-levels [data-levels-item="php"] .avc-levels__availability { font-family:var(--levels-serif); font-weight:600; font-size:clamp(12.5px,3.33vw,14px); }
  /* Link pitch follows the renderings (~20px); the padding/negative-margin pair keeps a 24px+ hit target without changing the flow. */
  .avc-levels .avc-levels__links { display:grid; margin-block-start:3px; }
  .avc-levels .avc-levels__links a { display:block; margin-block:-7.5px; padding-block:10px; color:var(--accent); font:500 clamp(12.5px,3.46vw,14.5px)/1.35 var(--levels-sans); text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .avc-levels .avc-levels__links a span { white-space:nowrap; }
  .avc-levels .avc-levels__outside-note { display:flex; align-items:center; gap:12px; margin-block-start:10px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:#fdf2dc; color:var(--levels-gold); }
  .avc-levels .avc-levels__outside-icon { display:grid; place-items:center; inline-size:20px; block-size:20px; flex:none; border:1.5px solid currentColor; border-radius:50%; font:600 15px/1 var(--levels-sans); }
  .avc-levels .avc-levels__education { display:grid; grid-template-columns:19px minmax(0,1fr); align-items:start; gap:15px; margin-block-start:4px; padding:9px 12px; border:1px solid #c6e3f1; border-radius:12px; background:#ecf5fa; font:400 clamp(12px,3.2vw,13.5px)/1.45 var(--levels-sans); }
  .avc-levels .avc-levels__education .avc-levels__icon { margin-block-start:2px; }
  .avc-levels .avc-levels__education p { max-inline-size:25.3em; }
  .avc-levels .avc-levels__trigger:focus-visible, .avc-levels a:focus-visible { outline:2px solid #145a77; outline-offset:2px; }
  .avc-levels .avc-levels__trigger:focus-visible { outline-offset:-3px; }
  @media (max-width:359px) { .avc-levels { --levels-icon:38px; --levels-toggle:30px; --levels-gap:12px; --levels-other-gap:16px; } .avc-levels .avc-levels__emergency { gap:11px; padding-inline:10px; } .avc-levels .avc-levels__trigger { padding-inline:9px; } .avc-levels .avc-levels__other-list .avc-levels__trigger { padding-inline:4px; } }
  @media (prefers-reduced-motion:reduce) { .avc-levels .avc-levels__item, .avc-levels .avc-levels__item::after, .avc-levels .avc-levels__chevron { transition:none!important; } }
  @media (forced-colors:active) { .avc-levels .avc-levels__other-list > .avc-levels__item, .avc-levels .avc-levels__other-list > .avc-levels__item[data-open="true"] { border-color:Canvas; } /* the row's transparent border would be forced to CanvasText and frame the inset panel twice */ .avc-levels .avc-levels__toggle, .avc-levels .avc-levels__outside-icon { border:1px solid ButtonText; } .avc-levels .avc-levels__chevron { color:ButtonText; } .avc-levels .avc-levels__trigger:focus-visible, .avc-levels a:focus-visible { outline-color:Highlight; } }
}