/*
 * Design-system components (prefix ds-). Built only from the variables in 00-tokens.css.
 * The clickable mockup in docs/mockup/index.html uses these files directly; the live pages adopt them in Step 2
 * of docs/revamp_plan.md.
 */

.ds-app {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-body);
    font-optical-sizing: auto;
    color: var(--color-ink-700);
    background: var(--color-canvas);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;  /* the pressed states below replace the grey tap flash */
}
.ds-app *, .ds-app *::before, .ds-app *::after { box-sizing: border-box; }
.ds-app h1, .ds-app h2, .ds-app h3 { color: var(--color-ink-900); line-height: var(--leading-tight); letter-spacing: var(--tracking-title); margin: 0; }
.ds-app button, .ds-app a, .ds-app label { touch-action: manipulation; }   /* no double-tap zoom delay on taps */
.ds-app a { color: var(--color-blue-600); }
.ds-app :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- Header ------------------------------------------------------------------------------------ */
.ds-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--header-height);
    display: flex; align-items: center; gap: var(--space-5);
    padding: 0 var(--space-6);
    /* Translucent bar: the page scrolls underneath it. The lower edge shows a hairline only once content is
       underneath (.is-scrolled, set by assets/shell.js). No coloured accent rules here or on cards. */
    background: var(--material-bar);
    -webkit-backdrop-filter: var(--material-blur-thick);
    backdrop-filter: var(--material-blur-thick);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow var(--dur-fast) linear;
}
.ds-header.is-scrolled { box-shadow: 0 1px 0 var(--hairline), 0 8px 20px -14px rgba(0, 34, 68, 0.35); }
.ds-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* Logo: the dotted map of Africa (assets/logo.svg, drawn by tools/make_logo.py) used as a mask, so it takes the
   theme's blue in light and dark */
.ds-logo {
    display: block; width: 36px; height: 36px; flex: none; background: var(--color-blue-600);
    -webkit-mask: url("/assets/logo.svg") center / contain no-repeat; mask: url("/assets/logo.svg") center / contain no-repeat;
}
.ds-header-title { font-size: 1.2rem; font-weight: 700; color: var(--color-navy-900); line-height: 1.15; letter-spacing: var(--tracking-title); min-width: 0; }
.ds-header-title small { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: 600; color: var(--color-blue-600); letter-spacing: var(--tracking-body); }

/* ---- Fields and buttons ------------------------------------------------------------------------ */
.ds-field { display: flex; flex-direction: column; gap: 2px; }
.ds-field > label { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.ds-select {
    font: inherit; font-size: var(--text-sm); color: var(--color-ink-900);
    height: 36px; min-width: 14rem; padding: 0 var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.ds-select:hover { border-color: var(--color-blue-600); }

.ds-button {
    font: inherit; font-size: var(--text-sm); font-weight: 500;
    height: 36px; padding: 0 var(--space-4); cursor: pointer;
    color: var(--color-blue-600); background: var(--color-surface);
    border: 1px solid var(--color-line); border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
}
.ds-button:hover { border-color: var(--color-blue-600); background: var(--color-blue-50); }
.ds-button, .ds-select { transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.ds-button-primary { color: var(--color-on-accent); background: var(--color-fill-accent); border-color: var(--color-fill-accent); }
.ds-button-primary:hover { background: var(--color-fill-accent-hover); border-color: var(--color-fill-accent-hover); }
.ds-button-quiet { border-color: transparent; background: transparent; color: var(--color-ink-500); }
.ds-button-quiet:hover { background: var(--color-canvas); border-color: transparent; color: var(--color-ink-900); }
.ds-button.ds-menu-toggle { display: none; }

/* ---- Segmented control (replaces radio rows) --------------------------------------------------- */
.ds-segmented { display: inline-flex; padding: 2px; background: var(--color-canvas); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.ds-segmented button {
    font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
    height: 30px; padding: 0 var(--space-3); color: var(--color-ink-500);
    background: transparent; border: 0; border-radius: 6px;
}
.ds-segmented button[aria-pressed="true"] { background: var(--color-thumb); color: var(--color-navy-900); box-shadow: var(--shadow-1); }
.ds-segmented button:hover:not([aria-pressed="true"]) { color: var(--color-ink-900); }

/* ---- Banner ------------------------------------------------------------------------------------ */
.ds-banner {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--color-blue-50); border-bottom: 1px solid var(--color-blue-100);
    font-size: var(--text-sm); color: var(--color-ink-700);
}
.ds-banner p { margin: 0; flex: 1; }
.ds-banner[hidden] { display: none; }

/* ---- Shell: sidebar + content ------------------------------------------------------------------ */
.ds-shell { display: flex; align-items: flex-start; }
.ds-sidebar {
    position: sticky; top: var(--header-height); align-self: flex-start;
    width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
    height: calc(100vh - var(--header-height)); overflow-y: auto;
    padding: var(--space-4) var(--space-3) var(--space-6);
    background: var(--material-sidebar); border-right: 1px solid var(--hairline);
    overscroll-behavior: contain;   /* scrolling the menu never scrolls the page behind it */
}
.ds-nav-group { margin-bottom: var(--space-4); }
.ds-nav-heading { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-blue-700); padding: var(--space-2) var(--space-3) var(--space-1); margin-bottom: 2px; }
.ds-nav-item {
    display: block; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body);
    padding: 7px var(--space-3); margin: 1px 0; cursor: pointer;
    color: var(--color-ink-700); background: transparent; border: 0; border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.ds-nav-item:hover { background: var(--color-blue-50); color: var(--color-navy-900); }
.ds-nav-item.is-active:hover { background: var(--color-selected); color: var(--color-on-accent); }
.ds-nav-item.is-active { background: var(--color-selected); color: var(--color-on-accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 34, 68, 0.2); }
.ds-content { flex: 1; min-width: 0; padding: var(--space-6); max-width: var(--content-max); }

/* ---- Intro strip ------------------------------------------------------------------------------- */
.ds-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.ds-intro h1 { font-size: var(--text-2xl); font-weight: 700; color: var(--color-navy-900); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }

/* ---- Chart card -------------------------------------------------------------------------------- */
.ds-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); margin-bottom: var(--space-4); }
.ds-card-header { padding: var(--space-4) var(--space-5) var(--space-2); display: flex; gap: var(--space-3); align-items: flex-start; }
.ds-card-header h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-title); }
.ds-card-header .ds-subtitle { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-ink-500); }
.ds-card-actions { margin-left: auto; position: relative; }
.ds-menu { position: absolute; right: 0; top: 40px; z-index: 20; min-width: 200px; padding: var(--space-1); background: var(--material-menu); -webkit-backdrop-filter: var(--material-blur-thin); backdrop-filter: var(--material-blur-thin); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-2); transform-origin: top right; }
.ds-menu[hidden] { display: none; }
.ds-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); padding: 8px var(--space-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink-700); }
.ds-menu button:hover { background: var(--color-canvas); }
.ds-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; padding: var(--space-2) var(--space-5) var(--space-3); }
.ds-card-body { padding: 0 var(--space-3); }
.ds-card-footer { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-ink-500); }
.ds-card-footer details summary { cursor: pointer; color: var(--color-blue-600); margin-top: var(--space-1); }
.ds-card-footer p { margin: 0 0 var(--space-1); }

/* ---- Badge and KPI tile ------------------------------------------------------------------------ */
.ds-badge { display: inline-block; font-size: var(--text-xs); font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--color-blue-100); color: var(--color-navy-900); }
.ds-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
/* Topic cards: three per row on a six-column grid; a short last row widens its cards so no gap is left */
.ds-topic-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.ds-topic-grid > * { grid-column: span 2; }
.ds-topic-grid > :nth-last-child(2):nth-child(3n+1), .ds-topic-grid > :last-child:nth-child(3n+2) { grid-column: span 3; }
.ds-topic-grid > :last-child:nth-child(3n+1) { grid-column: span 6; }
@media (max-width: 1023px) {
    .ds-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-topic-grid > *, .ds-topic-grid > :nth-last-child(2):nth-child(3n+1), .ds-topic-grid > :last-child:nth-child(3n+2),
    .ds-topic-grid > :last-child:nth-child(3n+1) { grid-column: auto; }
    .ds-topic-grid > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 600px) {
    .ds-topic-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-topic-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
.ds-kpi { padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.ds-kpi a { font-size: var(--text-xs); }

/* ---- Phones ------------------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .ds-header { height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
    .ds-brand { flex: 1; gap: var(--space-2); }
    .ds-logo { width: 30px; height: 30px; }
    .ds-header-title { font-size: var(--text-base); }
    .ds-header-title small { font-size: var(--text-xs); }
    .ds-header-spacer { display: none; }
    .ds-button.ds-menu-toggle { display: inline-flex; }
    .ds-select { min-width: 0; width: 100%; }
    .ds-banner { flex-direction: column; gap: var(--space-2); padding: var(--space-3); font-size: var(--text-xs); }
    /* Drawer. Its motion is a spring in assets/shell.js (follows the finger, can be flicked shut and grabbed
       mid-flight); these rules are only its two resting states. */
    .ds-sidebar { position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; width: min(var(--sidebar-width), 86vw); flex-basis: auto; z-index: 60; transform: translateX(-100%); visibility: hidden; background: var(--material-drawer); box-shadow: -48px 0 0 0 var(--material-drawer), var(--shadow-3); /* first shadow fills the gap when a flick overshoots */ border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-right: 0; touch-action: pan-y; }
    .ds-sidebar.is-open, .ds-sidebar.is-moving { visibility: visible; }
    .ds-sidebar.is-open { transform: translateX(0); }
    .ds-content { padding: var(--space-3); }
    .ds-intro { flex-direction: column; align-items: flex-start; }
    .ds-intro .ds-button { margin-left: 0; }
    .ds-card-header, .ds-controls, .ds-card-footer { padding-left: var(--space-3); padding-right: var(--space-3); }
    .ds-card-header { flex-wrap: wrap; }
}
/* Scrim behind the phone drawer; its opacity follows the drawer's position (assets/shell.js) */
.ds-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; visibility: hidden; }
.ds-scrim.is-visible { visibility: visible; }
@media (min-width: 769px) { .ds-scrim { display: none; } }

/* ---- Live-app specifics -------------------------------------------------------------------------- */
.ds-tabs-hidden { display: none; }
.ds-country-dropdown { min-width: 15rem; font-size: var(--text-sm); }
.ds-intro-title { font-size: var(--text-xl); letter-spacing: var(--tracking-title); }
.ds-card-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.ds-kpi p { color: var(--color-ink-500); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.ds-page { padding: var(--space-5); }
.ds-page-card { max-width: 60rem; margin: 0 auto; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.ds-page-card h1 { font-size: var(--text-2xl); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin-bottom: var(--space-4); }
.ds-page-card h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
@media (max-width: 768px) {
    .ds-header .ds-field { min-width: 0; }
    .ds-country-dropdown { min-width: 0; }
    .ds-page { padding: var(--space-3); }
    .ds-page-card { padding: var(--space-4); }
}

/* ---- Overview tiles ------------------------------------------------------------------------------ */
.ds-section-title { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-3); }
.ds-card-footer { letter-spacing: var(--tracking-caption); }
.ds-link-button { white-space: nowrap; font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 0; background: none; border: 0; color: var(--color-blue-600); cursor: pointer; }
.ds-link-button:hover { text-decoration: underline; }

/* ---- Accessibility ------------------------------------------------------------------------------- */
.ds-skip-link { position: absolute; left: var(--space-3); top: -4rem; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--color-selected); color: var(--color-on-accent) !important; border-radius: var(--radius-sm); }
.ds-skip-link:focus { top: var(--space-3); }
.ds-content:focus { outline: none; }
.ds-app button:focus-visible, .ds-app a:focus-visible, .ds-app input:focus-visible, .ds-app select:focus-visible,
.ds-app .Select-control:focus-within, .ds-app .dash-dropdown:focus-within { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 768px) {
    .modebar-container { display: none !important; }
}

/* Message shown while the page loads (the free hosting plan can take up to a minute to wake up) */
._dash-loading { font-size: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; font-family: var(--font-sans); color: var(--color-ink-500); text-align: center; padding: var(--space-5); }
._dash-loading::before { content: "Loading the dashboard…"; font-size: var(--text-lg); font-weight: 600; color: var(--color-navy-900); }
._dash-loading::after { content: "The first visit after a quiet period can take up to a minute while the server wakes up."; font-size: var(--text-sm); margin-top: var(--space-2); max-width: 28rem; }

/* ---- Country selector, pinned at the top of the sidebar ------------------------------------------- */
.ds-sidebar-context { position: sticky; top: calc(-1 * var(--space-4)); z-index: 5; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3); background: var(--material-context); -webkit-backdrop-filter: var(--material-blur-thin); backdrop-filter: var(--material-blur-thin); box-shadow: 0 1px 0 var(--hairline); display: flex; flex-direction: column; gap: var(--space-3); }
.ds-sidebar-context .ds-field > label { font-size: var(--text-xs); }
.ds-sidebar-context .ds-country-dropdown { min-width: 0; width: 100%; }

.ds-header-spacer { flex: 1; }

/* ---- Header links and the light/dark switch ------------------------------------------------------ */
/* Full labels on wide windows, short ones in between; below 1024 px the links move to the end of the sidebar (and
   the phone drawer), where .ds-sidebar-links shows them. */
.ds-header-links { display: flex; align-items: center; gap: 2px; }
.ds-header .ds-header-link {
    font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body);
    height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; white-space: nowrap;
    color: var(--color-ink-700); background: transparent; border: 0; border-radius: var(--radius-sm);
    text-decoration: none; cursor: pointer;
}
.ds-header .ds-header-link:hover { background: var(--color-fill-quiet); color: var(--color-ink-900); }
.ds-header .ds-header-link-out { color: var(--color-blue-600); }
.ds-header .ds-header-link-out:hover { color: var(--color-blue-700); }
.ds-label-short { display: none; }
.ds-sidebar-links { display: none; }
.ds-sidebar a.ds-nav-item { color: var(--color-ink-700); text-decoration: none; }
.ds-sidebar a.ds-nav-item:hover { color: var(--color-navy-900); }
@media (max-width: 1239px) {
    .ds-header-title { font-size: 1.05rem; }
    .ds-label-full { display: none; }
    .ds-label-short { display: inline; }
}
@media (max-width: 1023px) {
    .ds-header-links { display: none; }
    .ds-sidebar-links { display: block; }
}

/* Light/dark switch: a moon in light mode, a sun in dark mode; the two icons turn into each other */
.ds-theme-toggle {
    position: relative; flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
    color: var(--color-ink-700); background: transparent; border: 0; border-radius: 50%;
}
.ds-theme-toggle:hover { background: var(--color-fill-quiet); color: var(--color-ink-900); }
.ds-theme-toggle::before, .ds-theme-toggle::after {
    content: ""; position: absolute; inset: 8px; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
    transition: opacity 0.2s linear, rotate var(--dur-spring) var(--ease-spring), scale var(--dur-spring) var(--ease-spring);
}
.ds-theme-toggle::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 14.6A8.6 8.6 0 0 1 9.4 3.6a8.6 8.6 0 1 0 11 11z'/%3E%3C/svg%3E"); }
.ds-theme-toggle::after { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Cpath d='M12 2.6v2.1M12 19.3v2.1M2.6 12h2.1M19.3 12h2.1M5.35 5.35l1.5 1.5M17.15 17.15l1.5 1.5M5.35 18.65l1.5-1.5M17.15 6.85l1.5-1.5'/%3E%3C/svg%3E"); opacity: 0; rotate: -90deg; scale: 0.5; }
:root[data-theme="dark"] .ds-theme-toggle::before { opacity: 0; rotate: 90deg; scale: 0.5; }
:root[data-theme="dark"] .ds-theme-toggle::after { opacity: 1; rotate: 0deg; scale: 1; }
:root.theme-changing .ds-theme-toggle::before, :root.theme-changing .ds-theme-toggle::after {
    transition: opacity 0.2s linear, rotate var(--dur-spring) var(--ease-spring), scale var(--dur-spring) var(--ease-spring) !important;
}
@media (prefers-reduced-motion: reduce) {
    .ds-theme-toggle::before, .ds-theme-toggle::after { rotate: none !important; scale: none !important; }
}

/* ---- Introduction card on the overview ----------------------------------------------------------- */
.ds-intro.is-hidden { display: none; }
.ds-intro-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
/* Landing description: logo and title, a short lead, three uses, how to start */
.ds-hero { padding: var(--space-6); }
.ds-hero-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.ds-hero-logo { width: 64px; height: 64px; }
.ds-hero-eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-blue-700); }
.ds-hero-title { margin: 0; font-size: var(--text-2xl); font-weight: 700; color: var(--color-navy-900); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.ds-hero-lead { margin: 0 0 var(--space-5); max-width: 52rem; font-size: 1.0625rem; line-height: var(--leading-normal); color: var(--color-ink-700); }
.ds-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.ds-use { padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-md); }
.ds-use-title { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: 700; color: var(--color-navy-900); letter-spacing: var(--tracking-body); }
.ds-use-text { margin: 0; font-size: var(--text-sm); color: var(--color-ink-500); line-height: 1.5; }
.ds-hero-start { margin: 0; font-size: var(--text-sm); color: var(--color-ink-500); }
@media (max-width: 768px) {
    .ds-hero { padding: var(--space-4); }
    .ds-hero-logo { display: none; }   /* the header already shows it */
    .ds-hero-title { font-size: var(--text-xl); }
    .ds-hero-lead { font-size: var(--text-base); }
}
@media (max-width: 768px) { .ds-intro-card { padding: var(--space-4); } }

/* Caution on modelled estimates (risk views): one line that opens to the full explanation */
.ds-caution { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-warning-bg); border-radius: var(--radius-md); color: var(--color-warning); font-size: var(--text-sm); line-height: var(--leading-normal); }
.ds-caution > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); cursor: pointer; list-style: none; }
.ds-caution > summary::-webkit-details-marker { display: none; }
.ds-caution-text { flex: 1 1 20rem; font-weight: 500; }
.ds-caution-more { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.ds-caution-more::after { content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin: 0 0 0.15em 0.45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--dur-spring) var(--ease-spring); }
.ds-caution[open] .ds-caution-more::after { transform: translateY(0.15em) rotate(-135deg); }
.ds-caution > p { margin: var(--space-2) 0 0; }
.ds-caution > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }