:root {
  --ua-sheet-backdrop: color-mix(in srgb, var(--bg-scrim) 55%, transparent);
  --ua-sheet-background: linear-gradient(var(--bg-raised), var(--bg-raised)), var(--bg-deep);
  --ua-sheet-border: var(--line-strong);
  --ua-sheet-shadow: 0 0 0 1px color-mix(in srgb, var(--white) 3%, transparent) inset,
    0 18px 50px color-mix(in srgb, var(--black) 55%, transparent);
  --ua-sheet-filter: none;
}
html[data-glass="on"] {
  --ua-sheet-background: linear-gradient(var(--glass), var(--glass)), var(--glass-fill);
  --ua-sheet-border: var(--glass-edge);
  --ua-sheet-shadow: var(--glass-highlight), 0 18px 50px color-mix(in srgb, var(--bg-well) 55%, transparent);
  --ua-sheet-filter: var(--glass-filter);
}

.ua-sheet-card {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  height: min(46vh, 400px);
  border-radius: 24px;
  color: var(--text-hi);
  background: var(--ua-sheet-background);
  border: 1px solid var(--ua-sheet-border);
  box-shadow: var(--ua-sheet-shadow);
  touch-action: pan-y;
}
html[data-glass="on"] .ua-sheet-card { -webkit-backdrop-filter: var(--ua-sheet-filter); backdrop-filter: var(--ua-sheet-filter); }
.ua-sheet-head { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding-block: 10px 4px; padding-inline: 16px 14px; }
.ua-sheet-glyph {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--pc, var(--purple-bright));
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc, var(--purple-bright)) 22%, transparent), color-mix(in srgb, var(--pc, var(--purple-bright)) 6%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--purple-bright)) 38%, transparent);
}
.ua-sheet-glyph > svg:not([width]) { width: 26px; height: 26px; }
.ua-sheet-titles { min-width: 0; }
.ua-sheet-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); }
html[dir="rtl"] .ua-sheet-eyebrow { letter-spacing: 0; }
.ua-sheet-title { margin: 1px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 29px; line-height: 1.05; letter-spacing: 0.005em; outline: none; }
.ua-sheet-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 6px;
  -webkit-mask-image: linear-gradient(transparent, var(--black) 10px, var(--black) calc(100% - 14px), transparent);
  mask-image: linear-gradient(transparent, var(--black) 10px, var(--black) calc(100% - 14px), transparent);
}
@media (min-width: 850px) { .ua-sheet-card { height: auto; max-height: min(72vh, 640px); } }

.ua-sheet-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.ua-sheet-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
}
.ua-sheet-nav button:active { background: color-mix(in srgb, var(--white) 6%, transparent); }
.ua-sheet-nav .ua-sheet-nav-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-sheet-nav svg { flex: none; }
.ua-sheet-nav .ua-sheet-nav-dots { display: flex; align-items: center; gap: 5px; }
.ua-sheet-nav .ua-sheet-nav-dots i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--white) 18%, transparent); }
.ua-sheet-nav .ua-sheet-nav-dots i.is-on { width: 16px; border-radius: 99px; background: var(--pc, var(--purple-bright)); }
html[dir="rtl"] .ua-sheet-nav svg { transform: scaleX(-1); }
.ua-sheet-nav button:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }