/* ============================================================================
   Sutton Studio harness v1 — elements.css: styles for elements.js (files,
   button and toggle groups, drawer, one-time code, carousel, menubar,
   navigation menu, native select, scroll area, items, resizable panels,
   questionnaire, line and donut charts). Loads after layouts.css.
   Tokens only, so light and dark both work. Logical properties
   (inline-start / inline-end) so setDirection('rtl') flips these components.
   ============================================================================ */

/* ---- Attachments ----------------------------------------------------------- */
.att {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 280px;
  padding: 4px; padding-inline-end: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); overflow: hidden;
}
.att-media {
  flex: none; position: relative; width: 28px; height: 28px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 6px; background: var(--pill-gray-bg); color: var(--pill-gray-text); overflow: hidden;
}
.att-media .icon { width: 16px; height: 16px; }
.att-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-media--pdf { background: var(--pill-red-bg); color: var(--pill-red-text); }
.att-media--sheet { background: var(--pill-green-bg); color: var(--pill-green-text); }
.att-media--image { background: var(--pill-violet-bg); color: var(--pill-violet-text); }
.att-media--video, .att-media--text { background: var(--pill-blue-bg); color: var(--pill-blue-text); }
.att-media--audio { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.att-media--archive { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.att-ext { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-tight); }
.att-name {
  appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: start;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
button.att-name { cursor: pointer; }
button.att-name:hover { text-decoration: underline; text-underline-offset: 2px; }
button.att-name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.att-meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-meta .icon { width: 12px; height: 12px; }
.att-pct { color: var(--color-text); font-weight: var(--fw-medium); }
.att-spin { width: 10px; height: 10px; border: 1.5px solid var(--color-border); border-top-color: var(--color-text); border-radius: 50%; animation: ui-spin .8s linear infinite; }
.att-err { color: var(--color-danger-text); overflow: hidden; text-overflow: ellipsis; }
.att-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.att-actions:empty { display: none; }
.att .att-btn { width: 24px; height: 24px; border-radius: 6px; }
.att .att-btn .icon { width: 14px; height: 14px; }
.att-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: transparent; pointer-events: none; }
.att-bar-fill { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .2s ease; }
.att.is-processing .att-bar-fill { animation: pulse 1.2s ease-in-out infinite; }
.att.is-error { border-color: var(--color-danger-border); }
.att.is-error .att-meta .icon { color: var(--color-danger-text); }

/* Card: one per row (attachmentList layout 'list'). */
.att--card { display: flex; max-width: none; width: 100%; gap: var(--space-3); padding: var(--space-2) var(--space-3); padding-inline-start: var(--space-2); border-radius: var(--radius-card); }
.att--card .att-media { width: 40px; height: 40px; border-radius: 8px; }
.att--card .att-media .icon { width: 18px; height: 18px; }
.att--card .att-name { font-size: var(--fs-base); }
.att--card .att-main { gap: 2px; }

/* Tile: a thumbnail over the name (layout 'grid'). */
.att--tile { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: none; width: 100%; padding: 0; border-radius: var(--radius-card); }
.att--tile .att-media { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; gap: 4px; }
.att--tile .att-media .icon { width: 28px; height: 28px; }
.att--tile .att-main { padding: var(--space-2) var(--space-3); gap: 2px; }
.att--tile .att-actions { position: absolute; top: 6px; inset-inline-end: 6px; gap: 4px; opacity: 0; transition: opacity .12s ease; }
.att--tile:hover .att-actions, .att--tile:focus-within .att-actions, .att--tile.is-error .att-actions { opacity: 1; }
.att--tile .att-btn { background: var(--color-bg); box-shadow: var(--shadow-sm); color: var(--color-text); }
.att--tile .att-btn:hover { background: var(--color-hover); }
@media (hover: none) { .att--tile .att-actions { opacity: 1; } }

.att-list { min-width: 0; }
.att-list--chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.att-list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.att-list--list { display: flex; flex-direction: column; gap: var(--space-2); }
.att-list:empty { display: none; }
.att-empty { font-size: var(--fs-sm); color: var(--color-muted); padding: var(--space-2) 0; }
.file-upload { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ---- Button group: joined buttons, one outer radius ----------------------------- */
.btn-group { display: inline-flex; align-items: stretch; border-radius: var(--radius-input); box-shadow: var(--shadow-sm); isolation: isolate; }
.btn-group > *, .btn-group > .ui-select > .btn, .btn-group > .ui-select > .ui-menu-trigger { border-radius: 0; box-shadow: none; }
.btn-group > .icon-ghost, .btn-group > .ui-select > .ui-menu-trigger {
  height: var(--btn-height); width: var(--btn-height); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
}
.btn-group > .icon-ghost:hover, .btn-group > .ui-select > .ui-menu-trigger:hover { background: var(--color-hover); }
.btn-group > * + * { margin-inline-start: -1px; }
.btn-group > :first-child, .btn-group > :first-child > .btn, .btn-group > :first-child > .ui-menu-trigger { border-start-start-radius: var(--radius-input); border-end-start-radius: var(--radius-input); }
.btn-group > :last-child, .btn-group > :last-child > .btn, .btn-group > :last-child > .ui-menu-trigger { border-start-end-radius: var(--radius-input); border-end-end-radius: var(--radius-input); }
.btn-group > :hover, .btn-group > :focus-visible, .btn-group > :focus-within { z-index: 1; position: relative; }
.btn-group--v { flex-direction: column; }
.btn-group--v > * + * { margin-inline-start: 0; margin-top: -1px; }
.btn-group--v > :first-child { border-radius: var(--radius-input) var(--radius-input) 0 0; }
.btn-group--v > :last-child { border-radius: 0 0 var(--radius-input) var(--radius-input); }

/* ---- Toggle group -------------------------------------------------------------------- */
.tgl-group { display: inline-flex; align-items: center; gap: 2px; }
.tgl-group .tgl:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tgl-group .tgl:disabled { opacity: .5; cursor: default; }
.tgl-group--sm .tgl { height: 28px; padding: 0 6px; }
.tgl-group--sm .tgl .icon { width: 14px; height: 14px; }
/* Outline: joined white buttons; the pressed ones go cream. */
.tgl-group--outline { gap: 0; border-radius: var(--radius-input); box-shadow: var(--shadow-sm); }
.tgl-group--outline .tgl { border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); color: var(--color-text); padding: 0 var(--space-3); }
.tgl-group--outline .tgl + .tgl { margin-inline-start: -1px; }
.tgl-group--outline .tgl:first-child { border-start-start-radius: var(--radius-input); border-end-start-radius: var(--radius-input); }
.tgl-group--outline .tgl:last-child { border-start-end-radius: var(--radius-input); border-end-end-radius: var(--radius-input); }
.tgl-group--outline .tgl:hover { background: var(--color-hover); }
.tgl-group--outline .tgl.is-on { background: var(--cream-100); }
.tgl-group--outline .tgl:focus-visible { position: relative; z-index: 1; }

/* ---- Drawer ----------------------------------------------------------------------------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 150; background: var(--color-scrim); opacity: 0; transition: opacity .2s ease; }
.drawer-scrim.is-open { opacity: 1; }
.drawer {
  position: absolute; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text);
  box-shadow: var(--shadow-lg); transition: transform .22s cubic-bezier(.32, .72, 0, 1); overflow: hidden;
}
.drawer.is-dragging { transition: none; }
.drawer:focus { outline: none; }
.drawer--bottom { border-top: 1px solid var(--color-border-faint); }
.drawer--top { border-bottom: 1px solid var(--color-border-faint); }
.drawer--left { border-right: 1px solid var(--color-border-faint); }
.drawer--right { border-left: 1px solid var(--color-border-faint); }
.drawer--bottom { inset-inline: 0; bottom: 0; max-height: 85vh; border-radius: 14px 14px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
.drawer--top { inset-inline: 0; top: 0; max-height: 85vh; border-radius: 0 0 14px 14px; transform: translateY(-100%); padding-top: env(safe-area-inset-top); }
.drawer--left { left: 0; top: 0; bottom: 0; width: 400px; max-width: 90vw; transform: translateX(-100%); }
.drawer--right { right: 0; top: 0; bottom: 0; width: 400px; max-width: 90vw; transform: translateX(100%); }
.drawer-scrim.is-open .drawer { transform: none; }
.drawer--bottom > :not(.drawer-handle), .drawer--top > * { width: 100%; max-width: 720px; margin-inline: auto; }
.drawer-handle { flex: none; width: 44px; height: 5px; margin: 10px auto 2px; border-radius: var(--radius-pill); background: var(--color-border); cursor: grab; touch-action: none; }
.drawer-handle::before { content: ''; display: block; height: 28px; margin-top: -12px; }
.drawer--bottom .drawer-head { touch-action: none; }
.drawer-head { flex: none; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.drawer--bottom .drawer-head, .drawer--top .drawer-head { text-align: center; justify-content: center; }
.drawer-titles { flex: 1; min-width: 0; }
.drawer-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.drawer-desc { margin-top: 2px; font-size: var(--fs-sm); color: var(--color-label); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-5) var(--space-4); }
.drawer-foot { flex: none; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-border-faint); }
.drawer--bottom .drawer-foot { flex-direction: column-reverse; border-top: 0; }
.drawer--bottom .drawer-foot .btn { justify-content: center; width: 100%; }

/* ---- One-time code ------------------------------------------------------------------------ */
.otp { display: inline-flex; align-items: center; gap: var(--space-2); }
.otp-group { display: inline-flex; border-radius: var(--radius-input); box-shadow: var(--shadow-sm); }
.otp-slot {
  width: 42px; height: 46px; padding: 0; text-align: center; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg);
  font-family: inherit; font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-text); caret-color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.otp-slot + .otp-slot { margin-inline-start: -1px; }
.otp-slot:first-child { border-start-start-radius: var(--radius-input); border-end-start-radius: var(--radius-input); }
.otp-slot:last-child { border-start-end-radius: var(--radius-input); border-end-end-radius: var(--radius-input); }
.otp-slot:focus { outline: none; position: relative; z-index: 1; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.otp-slot:disabled { opacity: .5; cursor: not-allowed; }
.otp-sep { width: 10px; height: 2px; border-radius: 1px; background: var(--color-border); }
.otp.is-error .otp-slot { border-color: var(--color-danger-border); }
.otp.is-error .otp-slot:focus { border-color: var(--color-danger-text); }

/* ---- Carousel --------------------------------------------------------------------------------- */
.carousel { position: relative; outline: none; }
.carousel:focus-visible .carousel-viewport { box-shadow: var(--focus-ring); }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-card); touch-action: pan-y; }
.carousel-track { display: flex; gap: var(--gap, 12px); transition: transform .32s cubic-bezier(.32, .72, 0, 1); user-select: none; }
.carousel-track.is-dragging { transition: none; cursor: grabbing; }
.carousel-slide { flex: 0 0 calc((100% - var(--gap, 12px) * (var(--pv, 1) - 1)) / var(--pv, 1)); min-width: 0; }
.carousel-slide img { -webkit-user-drag: none; }
.carousel-btn {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm); cursor: pointer; z-index: 1;
}
.carousel-btn:hover { background: var(--color-hover); }
.carousel-btn:disabled { opacity: 0; pointer-events: none; }
.carousel-btn .icon { width: 16px; height: 16px; }
.carousel-prev { inset-inline-start: 10px; }
.carousel-next { inset-inline-end: 10px; }
.carousel:not(:has(.carousel-dots)) .carousel-btn { top: 50%; }
[dir="rtl"] .carousel-btn .icon { transform: scaleX(-1); }
.carousel-dots { display: flex; justify-content: center; gap: 6px; height: 28px; align-items: center; }
.carousel-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-border); cursor: pointer; transition: width .2s ease, background .2s ease; }
.carousel-dot:hover { background: var(--color-muted); }
.carousel-dot.is-on { width: 18px; background: var(--color-text); }
.carousel-dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Menubar ------------------------------------------------------------------------------------- */
.menubar { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); box-shadow: var(--shadow-sm); }
.menubar-trigger {
  height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.menubar-trigger:hover, .menubar-trigger[aria-expanded="true"] { background: var(--color-surface-alt); }
.menubar-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Navigation menu ------------------------------------------------------------------------------ */
.navmenu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.navmenu-trigger {
  height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-input);
  background: transparent; color: var(--color-label); font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); cursor: pointer;
}
.navmenu-trigger:hover, .navmenu-trigger[aria-expanded="true"] { background: var(--color-hover); color: var(--color-text); }
.navmenu-trigger.is-active { background: var(--color-surface-alt); color: var(--color-text); }
.navmenu-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.navmenu-chev { width: 14px; height: 14px; transition: transform .15s ease; }
.navmenu-trigger[aria-expanded="true"] .navmenu-chev { transform: rotate(180deg); }
.ui-menu.navmenu-panel { padding: var(--space-2); max-height: none; overflow: visible; }
.navmenu-panel--featured { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-2); }
.navmenu-links { display: grid; grid-template-columns: minmax(0, 300px); gap: 2px; }
.navmenu-links--2 { grid-template-columns: repeat(2, minmax(0, 260px)); }
.navmenu-link, .navmenu-featured { appearance: none; border: 0; font: inherit; color: var(--color-text); text-align: start; cursor: pointer; }
.navmenu-link { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 6px; background: none; }
.navmenu-link:hover, .navmenu-link:focus-visible { background: var(--color-surface-alt); outline: none; }
.navmenu-link-ico { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--cream-100); color: var(--color-text); }
.navmenu-link-ico .icon { width: 16px; height: 16px; }
.navmenu-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navmenu-link-label { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.navmenu-link-desc { font-size: var(--fs-sm); color: var(--color-label); line-height: var(--lh-tight); }
.navmenu-featured {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 180px; padding: var(--space-4);
  border-radius: 8px; background: var(--cream-100);
}
.navmenu-featured:hover, .navmenu-featured:focus-visible { background: var(--cream-200); outline: none; }
.navmenu-featured-ico { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--color-bg); box-shadow: var(--shadow-sm); margin-bottom: auto; }
.navmenu-featured-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.navmenu-featured-desc { font-size: var(--fs-sm); color: var(--color-label); line-height: var(--lh-tight); }

/* ---- Native select (phones only) ------------------------------------------------------------------- */
.nsel { position: relative; display: inline-flex; min-width: 160px; }
.nsel .nsel-input {
  appearance: none; -webkit-appearance: none; width: 100%; padding-inline: var(--space-3) 34px; cursor: pointer;
  box-shadow: var(--shadow-sm); font-size: var(--fs-base);
}
.nsel .nsel-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.nsel .nsel-input:disabled { opacity: .5; cursor: not-allowed; }
.nsel.is-empty .nsel-input { color: var(--color-muted); }
.nsel-input option { color: var(--color-text); }
.nsel-caret { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-muted); pointer-events: none; }

/* ---- Scroll area ------------------------------------------------------------------------------------ */
.scroll-area {
  --fade-s: 0px; --fade-e: 0px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; outline: none; border-radius: inherit;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
}
.scroll-area--x { overflow-x: auto; overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
}
[dir="rtl"] .scroll-area--x {
  -webkit-mask-image: linear-gradient(to left, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, rgb(0 0 0) var(--fade-s), rgb(0 0 0) calc(100% - var(--fade-e)), transparent 100%);
}
.scroll-area.fade-start { --fade-s: 24px; }
.scroll-area.fade-end { --fade-e: 24px; }
.scroll-area:focus-visible { box-shadow: var(--focus-ring); }
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-thumb { border-width: 2px; }

/* ---- Aspect ratio ------------------------------------------------------------------------------------ */
.aspect { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--cream-50); }
.aspect > img, .aspect > video, .aspect > iframe, .aspect > canvas { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* ---- Item ---------------------------------------------------------------------------------------------- */
.item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; padding: var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-card); background: transparent; color: var(--color-text); text-align: start; font: inherit;
}
.item--outline { border-color: var(--color-border); background: var(--color-bg); }
.item--muted { background: var(--cream-50); }
.item--sm { gap: 10px; padding: var(--space-2) 10px; }
.item--link { appearance: none; cursor: pointer; }
.item--link:hover { background: var(--color-hover); }
.item--muted.item--link:hover { background: var(--cream-100); }
.item--link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.item-media { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.item-media--icon { width: 36px; height: 36px; border-radius: 8px; background: var(--cream-100); color: var(--color-text); }
.item--sm .item-media--icon { width: 30px; height: 30px; border-radius: 7px; }
.item-media--icon .icon { width: 18px; height: 18px; }
.item--sm .item-media--icon .icon { width: 16px; height: 16px; }
.item-media--image img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }
.item--sm .item-media--image img { width: 32px; height: 32px; border-radius: 6px; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-title { font-size: var(--fs-base); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-desc { font-size: var(--fs-sm); color: var(--color-label); line-height: var(--lh-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-meta { flex: none; font-size: var(--fs-sm); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-actions { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.item-chev { width: 16px; height: 16px; color: var(--color-muted); }
[dir="rtl"] .item-chev { transform: scaleX(-1); }
.item-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-group--sep { gap: 0; }
.item-group--sep > .item + .item { position: relative; }
.item-group--sep > .item + .item::before { content: ''; position: absolute; top: -1px; inset-inline: var(--space-3); height: 1px; background: var(--color-border-faint); }
.item-group--outline { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); padding: 4px; }

/* ---- Resizable panels ------------------------------------------------------------------------------------ */
.rsz { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.rsz--v { flex-direction: column; }
.rsz-panel { min-width: 0; min-height: 0; overflow: auto; }
.rsz-panel.is-collapsed { overflow: hidden; visibility: hidden; }
.rsz-handle { position: relative; flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; z-index: 1; }
.rsz--h > .rsz-handle { width: 9px; margin-inline: -4px; cursor: col-resize; }
.rsz--v > .rsz-handle { height: 9px; margin-block: -4px; cursor: row-resize; }
.rsz-handle::before { content: ''; position: absolute; background: var(--color-border); transition: background .12s ease; }
.rsz--h > .rsz-handle::before { top: 0; bottom: 0; width: 1px; left: 4px; }
.rsz--v > .rsz-handle::before { left: 0; right: 0; height: 1px; top: 4px; }
.rsz-handle:hover::before, .rsz-handle.is-active::before, .rsz-handle:focus-visible::before { background: var(--color-accent); }
.rsz-grip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 4px;
  background: var(--color-bg); color: var(--color-muted); box-shadow: var(--shadow-sm);
}
.rsz--h .rsz-grip { width: 12px; height: 22px; }
.rsz--v .rsz-grip { width: 22px; height: 12px; }
.rsz-grip .icon { width: 10px; height: 10px; }
.rsz-handle:focus-visible .rsz-grip { border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.rsz.is-resizing { user-select: none; }
.rsz--h.is-resizing { cursor: col-resize; }
.rsz--v.is-resizing { cursor: row-resize; }
.rsz.is-resizing .rsz-panel { pointer-events: none; }

/* ---- Questionnaire ----------------------------------------------------------------------------------------- */
.quiz { max-width: 600px; outline: none; }
.quiz-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.quiz-progress { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
.quiz-progress-fill { display: block; height: 100%; width: 0; background: var(--btn-primary-bg); border-radius: inherit; transition: width .25s ease; }
.quiz-count { flex: none; font-size: var(--fs-xs); color: var(--color-label); font-variant-numeric: tabular-nums; }
.quiz-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.quiz-req { color: var(--color-danger-text); }
.quiz-desc { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-label); }
.quiz-opts { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.quiz-opt {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); color: var(--color-text); font: inherit; text-align: start; cursor: pointer;
}
.quiz-opt:hover { border-color: var(--cream-400); }
.quiz-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.quiz-opt.is-on { border-color: var(--btn-primary-bg); box-shadow: 0 0 0 1px var(--btn-primary-bg), var(--shadow-sm); background: var(--cream-25); }
.quiz-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--color-label);
  border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 5px; background: var(--color-bg);
}
.quiz-opt.is-on .quiz-key { color: var(--color-text); }
.quiz-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quiz-opt-label { font-weight: var(--fw-medium); }
.quiz-opt-desc { font-size: var(--fs-sm); color: var(--color-label); }
.quiz-radio, .quiz-check { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border); background: var(--color-bg); }
.quiz-radio { border-radius: 50%; }
.quiz-check { border-radius: 5px; }
.quiz-opt.is-on .quiz-radio { border: 5px solid var(--btn-primary-bg); }
.quiz-opt.is-on .quiz-check { border-color: var(--btn-primary-bg); background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.quiz-check .icon { width: 12px; height: 12px; stroke-width: 3; }
.quiz-input { display: block; width: 100%; margin-top: var(--space-4); }
.quiz-error { margin-top: var(--space-2); }
.quiz-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.quiz-spacer { flex: 1; }
.btn.quiz-skip { background: transparent; border-color: transparent; color: var(--color-label); }
.btn.quiz-skip:hover { background: var(--color-hover); color: var(--color-text); }
.quiz-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) 0 var(--space-4); }
.quiz-done-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pill-green-bg); color: var(--pill-green-text); margin-bottom: var(--space-2); }
.quiz-done-ico .icon { width: 22px; height: 22px; }
.quiz-review { margin-top: var(--space-3); border-top: 1px solid var(--color-border-faint); }
.quiz-review-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border-faint); }
.quiz-review-main { flex: 1; min-width: 0; }
.quiz-review-q { font-size: var(--fs-sm); color: var(--color-label); }
.quiz-review-a { margin-top: 2px; font-weight: var(--fw-medium); }

/* ---- Charts (shared) ------------------------------------------------------------------------------------------ */
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); font-size: var(--fs-sm); color: var(--color-label); }
.lchart > .chart-legend { margin-bottom: var(--space-3); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; transition: opacity .12s ease; }
.chart-legend-value { margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-key { flex: none; display: inline-block; }
.chart-key--line { width: 14px; height: 3px; border-radius: 2px; }
.chart-key--rect { width: 10px; height: 10px; border-radius: 3px; }
.chart-tip {
  position: absolute; z-index: 5; top: 0; left: 0; min-width: 150px; padding: var(--space-2) 10px; pointer-events: none; opacity: 0; transition: opacity .1s ease;
  background: var(--color-bg); border: 1px solid var(--color-border-faint); border-radius: var(--radius-input); box-shadow: var(--shadow-md); font-size: var(--fs-sm);
}
.chart-tip.is-on { opacity: 1; }
.chart-tip-head { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-label); margin-bottom: 4px; }
.chart-tip-row { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.chart-tip-row + .chart-tip-row { margin-top: 3px; }
.chart-tip-value { color: var(--color-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.chart-tip-label { color: var(--color-label); }
.chart-caption { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-muted); }
/* The data as a table for screen readers (and the relief rule: identity is never color alone). */
.chart-table { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Line chart -------------------------------------------------------------------------------------------------- */
.lchart { position: relative; margin: 0; min-width: 0; }
.lchart-plot { position: relative; width: 100%; outline: none; border-radius: 6px; }
.lchart-plot:focus-visible { box-shadow: var(--focus-ring); }
.lchart-svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--color-border-faint); stroke-width: 1; shape-rendering: crispEdges; }
.chart-grid.is-base { stroke: var(--color-border); }
.chart-tick, .chart-xlabel { fill: var(--color-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart-direct { fill: var(--color-label); font-size: 11px; font-weight: var(--fw-medium); font-family: var(--font-sans); }
.lchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lchart-area { fill-opacity: .14; stroke: none; }
.lchart-area.is-stacked { fill-opacity: .32; }
.chart-cross { stroke: var(--color-border); stroke-width: 1; shape-rendering: crispEdges; visibility: hidden; }
.lchart-plot.is-hover .chart-cross { visibility: visible; }
.lchart-dot { stroke: var(--color-bg); stroke-width: 2; }

/* ---- Donut chart -------------------------------------------------------------------------------------------------- */
.donut { position: relative; margin: 0; min-width: 0; }
.donut-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.donut-ring { position: relative; flex: none; }
.donut-svg { display: block; overflow: visible; }
.donut-slice { stroke: var(--color-bg); stroke-width: 2; stroke-linejoin: round; transition: opacity .12s ease; cursor: default; }
.donut-empty { fill: none; stroke: var(--color-surface-alt); }
.donut.is-focus .donut-slice:not(.is-on) { opacity: .3; }
.donut.is-focus .chart-legend-item:not(.is-on) { opacity: .45; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.donut-center-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.donut-center-label { font-size: var(--fs-xs); color: var(--color-label); }
.donut .chart-legend { flex-direction: column; flex-wrap: nowrap; flex: 1; min-width: 200px; max-width: 320px; }
.donut .chart-legend-item { cursor: default; }