/* Alpha Studio: page content.
   The yearbook page (Alpha identity) and the Liquid Glass components that can be placed on it.
   These styles are independent of the editor chrome theme, so a page looks the same in light or dark chrome. */

/* ───────────── Alpha identity tokens ───────────── */
.yb-page {
  --yb-red: #FD5109;
  --yb-gold: #E4AC03;
  --yb-warm: #F8F7F3;
  --yb-ink: #111111;
  --yb-brown: #776E56;          /* sampled: subtitle and folio text on the identity sheet */
  --yb-graphite: #515151;       /* sampled: numbered section headers */
  --yb-ph: rgba(17, 17, 17, 0.06);
  --yb-ph-line: rgba(17, 17, 17, 0.14);
  --yb-ph-text: #6b6559;
  --yb-serif: "Prata", "Iowan Old Style", Georgia, serif;
  --yb-sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --yb-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  position: relative; overflow: hidden;
  background: var(--yb-warm); color: var(--yb-ink);
  font-family: var(--yb-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.3;
  user-select: none; -webkit-user-select: none;
}
.yb-page *, .yb-page *::before, .yb-page *::after { box-sizing: border-box; }

.yb-el { position: absolute; transform-origin: 50% 50%; }
.yb-el.is-hidden { display: none; }
.is-editing-page .yb-el { cursor: default; }

/* Text */
.yb-text { white-space: pre-wrap; overflow-wrap: break-word; min-height: 1em; }
.yb-text[contenteditable] { outline: none; cursor: text; user-select: text; -webkit-user-select: text; caret-color: currentColor; }
.yb-text:empty::before { content: "Type here"; opacity: 0.35; }

/* Images */
.yb-img { position: absolute; inset: 0; overflow: hidden; }
.yb-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--stroke, none); pointer-events: none; }
.yb-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.yb-img.is-cropping img { cursor: move; }
.yb-ph { position: absolute; inset: 0; background: var(--yb-ph); display: grid; place-items: center; overflow: hidden; }
.yb-ph svg.x { position: absolute; inset: 0; width: 100%; height: 100%; }
.yb-ph svg.x line { stroke: var(--yb-ph-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yb-ph-label {
  position: relative; padding: 4px 10px; background: var(--yb-warm); color: var(--yb-ph-text);
  font-family: var(--yb-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.yb-page.is-export .yb-ph-label { display: none; }
.yb-el.drop-hover .yb-img, .yb-el.drop-hover .yb-ph { outline: 3px solid var(--yb-red); outline-offset: -3px; }

/* Shapes and motifs */
.yb-shape { position: absolute; inset: 0; }
.yb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ───────────── Liquid Glass components on the page (Starwisp Design System v19) ─────────────
   Each component is laid out at its natural size inside .ui and scaled with a transform.
   Tone (light or dark) is set per element, so a page looks the same in light or dark chrome. */
.ui {
  --u-text: rgba(0, 0, 0, 0.92);
  --u-text2: #6e6e73;
  --u-accent: #0071e3;
  --u-accent-fill: #0071e3;
  --u-on-accent: #ffffff;
  --u-on-tint: #0055B3;
  --u-surface: #ffffff;
  --u-fill-subtle: rgba(0, 0, 0, 0.06);
  --u-selected: rgba(0, 0, 0, 0.08);
  --u-edge: rgba(0, 0, 0, 0.05);
  --u-edge-strong: rgba(0, 0, 0, 0.12);
  --u-edge-clear: rgba(255, 255, 255, 0.40);
  --u-glass: rgba(255, 255, 255, 0.12);
  --u-glass-dialog: rgba(255, 255, 255, 0.70);
  --u-film: rgba(255, 255, 255, 0.07);
  --u-tint-neutral: rgba(120, 120, 128, 0.22);
  --u-tint-accent: rgba(0, 113, 227, 0.22);
  --u-tint-danger: rgba(255, 59, 48, 0.22);
  --u-tint-success: rgba(52, 199, 89, 0.22);
  --u-danger: #d70015;
  --u-danger-text: #d70015;
  --u-success-text: #1c7c3a;
  --u-thumb: rgba(255, 255, 255, 0.85);
  --u-switch-off: rgba(120, 120, 128, 0.32);
  --u-knob: #ffffff;
  --u-outline: rgba(0, 0, 0, 0.45);
  --u-specular: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.54), inset -1px -1px 0 rgba(255, 255, 255, 0.27);
  --u-capsule-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  --u-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
  --u-shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 15px 6px rgba(0, 0, 0, 0.18);
  --u-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --u-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --u-menu-rule: rgba(0, 0, 0, 0.08);
  --u-filter-opaque: saturate(160%) blur(22px);
  --u-filter-regular: saturate(160%) blur(8px);
  --u-filter-clear: saturate(160%) blur(3px);
  --u-font: var(--yb-rounded);
  --u-fw-read: 400; --u-fw-tap: 600; --u-fw-title: 700; --u-fw-caps: 600;

  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  color: var(--u-text);
  font-family: var(--u-font);
  font-size: 15px; line-height: 1.3; letter-spacing: -0.01em;
  display: flex;
}
.ui[data-tone="dark"] {
  --u-text: #ffffff;
  --u-text2: #a1a1a6;
  --u-accent: #3D9BFF;
  --u-on-tint: #66B0FF;
  --u-surface: #2c2c2e;
  --u-fill-subtle: rgba(255, 255, 255, 0.08);
  --u-selected: rgba(255, 255, 255, 0.10);
  --u-edge: rgba(255, 255, 255, 0.08);
  --u-edge-strong: rgba(255, 255, 255, 0.15);
  --u-edge-clear: rgba(255, 255, 255, 0.18);
  --u-glass: rgba(28, 28, 32, 0.14);
  --u-glass-dialog: rgba(28, 28, 32, 0.14);
  --u-film: rgba(255, 255, 255, 0.05);
  --u-danger-text: #ff6961;
  --u-success-text: #5fe08a;
  --u-thumb: rgba(255, 255, 255, 0.20);
  --u-outline: rgba(255, 255, 255, 0.45);
  --u-specular: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.30), inset -1px -1px 0 rgba(255, 255, 255, 0.12);
  --u-capsule-shadow: 0 10px 40px rgba(0, 0, 0, 0.40);
  --u-menu-rule: rgba(255, 255, 255, 0.10);
}
.ui[data-font="sans"] { --u-font: var(--yb-sans); --u-fw-tap: 500; --u-fw-title: 500; --u-fw-caps: 500; }
.ui[data-font="serif"] { --u-font: var(--yb-serif); --u-fw-tap: 400; --u-fw-title: 400; --u-fw-caps: 400; }

/* Glass: material on ::before, highlight on ::after, the soft-look edge on every material */
.ui-glass { position: relative; overflow: hidden; border: 0.5px solid var(--u-edge-clear); box-shadow: var(--u-shadow); --ut: var(--u-glass); --uf: var(--u-filter-regular); }
.ui-glass::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--ut); backdrop-filter: var(--uf); -webkit-backdrop-filter: var(--uf); }
.ui-glass::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: var(--u-specular); }
.ui-glass > * { position: relative; z-index: 1; }
.ui-glass[data-material="opaque"] { --uf: var(--u-filter-opaque); }
.ui-glass[data-material="clear"] { --uf: var(--u-filter-clear); }
.ui-capsule { box-shadow: var(--u-capsule-shadow); }
.ui-pop { border-color: var(--u-edge-strong); box-shadow: var(--u-shadow-pop); --uf: var(--u-filter-opaque); }
.ui-dialog-glass { --ut: var(--u-glass-dialog); box-shadow: var(--u-capsule-shadow); }

.ui-icon { display: inline-flex; width: 1em; height: 1em; flex: none; line-height: 0; }
.ui-icon svg { width: 88%; height: 88%; margin: auto; display: block; }
.ui-icon svg [opacity] { opacity: 0.45 !important; }

/* Buttons: grey glass pill (film, no specular, no shadow) and the one solid primary */
.ui-btn, .ui-btn-primary {
  position: relative; overflow: hidden; width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: var(--u-fw-tap); white-space: nowrap;
}
.ui-btn { --t: var(--u-tint-neutral); background: var(--t); border: 0.5px solid var(--u-edge); color: var(--u-text); }
.ui-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--u-film); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); }
.ui-btn > * { position: relative; z-index: 1; }
.ui-btn[data-tint="accent"]  { --t: var(--u-tint-accent);  color: var(--u-on-tint); }
.ui-btn[data-tint="danger"]  { --t: var(--u-tint-danger);  color: var(--u-danger-text); }
.ui-btn[data-tint="success"] { --t: var(--u-tint-success); color: var(--u-success-text); }
.ui-btn-primary { background: var(--u-accent-fill); color: var(--u-on-accent); border: 0; }
.ui-btn .ui-icon, .ui-btn-primary .ui-icon { font-size: 16px; }
.ui-iconbtn { padding: 0; }
.ui-iconbtn .ui-icon { font-size: 21px; }

/* Chips and labels */
.ui-chip { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; border-radius: 999px; background: var(--u-fill-subtle); font-size: 13px; font-weight: var(--u-fw-tap); white-space: nowrap; }
.ui-chip[data-on="true"] { background: var(--u-tint-accent); color: var(--u-on-tint); }
.ui-gchip { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 999px; box-shadow: none; font-size: 12px; font-weight: var(--u-fw-tap); white-space: nowrap; }
.ui-gchip .ui-icon { font-size: 16px; }
.ui-badge { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; border-radius: 999px; background: var(--u-fill-subtle); font-size: 11px; font-weight: var(--u-fw-caps); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ui-badge[data-tint="accent"]  { background: var(--u-tint-accent);  color: var(--u-on-tint); }
.ui-badge[data-tint="danger"]  { background: var(--u-tint-danger);  color: var(--u-danger-text); }
.ui-badge[data-tint="success"] { background: var(--u-tint-success); color: var(--u-success-text); }

/* Capsule bar (Clear by default) */
.ui-nav { width: 100%; height: 100%; border-radius: 999px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 24px; }
.ui-nav .t { font-weight: var(--u-fw-title); font-size: 17px; white-space: nowrap; }
.ui-nav .links { flex: 1; display: flex; gap: 18px; min-width: 0; overflow: hidden; }
.ui-nav .links span { color: var(--u-text); font-weight: var(--u-fw-tap); white-space: nowrap; }
.ui-nav .end { width: 36px; height: 36px; border-radius: 999px; background: var(--u-tint-neutral); display: grid; place-items: center; }
.ui-nav .end .ui-icon { font-size: 21px; }

/* Segmented control */
.ui-seg { width: 100%; height: 100%; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--u-tint-neutral); }
.ui-seg span { flex: 1; display: grid; place-items: center; border-radius: 999px; color: var(--u-text2); font-size: 12px; font-weight: var(--u-fw-tap); white-space: nowrap; padding: 0 10px; }
.ui-seg span.on { background: var(--u-thumb); color: var(--u-text); box-shadow: var(--u-thumb-shadow); }

/* Switch (52 x 32) and GlassSwitch (64 x 28, outlined thumb) */
.ui-switchrow { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.ui-switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--u-switch-off); }
.ui-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 999px; background: var(--u-knob); box-shadow: var(--u-knob-shadow); }
.ui-switch[data-on="true"] { background: var(--u-accent-fill); }
.ui-switch[data-on="true"]::after { transform: translateX(20px); }
.ui-gswitch { position: relative; flex: none; width: 64px; height: 28px; border: 1px solid var(--u-outline); border-radius: 999px; background: var(--u-switch-off); }
.ui-gswitch i { position: absolute; top: 1px; left: 1px; width: 40px; height: 24px; box-sizing: border-box; border: 1px solid var(--u-outline); border-radius: 999px; background: var(--u-knob); box-shadow: var(--u-knob-shadow); }
.ui-gswitch[data-on="true"] { background: var(--u-accent-fill); }
.ui-gswitch[data-on="true"] i { left: 21px; }

/* GlassSlider */
.ui-sliderrow { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ui-sliderrow .lab { display: flex; justify-content: space-between; font-size: 13px; font-weight: var(--u-fw-tap); }
.ui-sliderrow .lab span + span { font-variant-numeric: tabular-nums; font-weight: var(--u-fw-read); }
.ui-gslider { position: relative; height: 24px; margin: 0 12px; }
.ui-gslider .tr { position: absolute; left: 0; right: 0; top: 9px; height: 6px; border-radius: 999px; background: var(--u-switch-off); box-shadow: inset 0 0 0 1px var(--u-outline); overflow: hidden; }
.ui-gslider .fl { position: absolute; left: 0; top: 0; bottom: 0; background: var(--u-accent-fill); }
.ui-gslider .th { position: absolute; top: 0; width: 40px; height: 24px; box-sizing: border-box; border: 1px solid var(--u-outline); border-radius: 999px; background: var(--u-knob); box-shadow: var(--u-knob-shadow); }

/* Search field: the one capsule input */
.ui-search { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; border: 1px solid var(--u-edge-strong); border-radius: 999px; background: var(--u-surface); color: var(--u-text2); font-size: 17px; white-space: nowrap; overflow: hidden; }
.ui-search .ui-icon { font-size: 16px; }

/* Card and callout (solid content) */
.ui-card { width: 100%; height: 100%; padding: 24px; border-radius: 20px; background: var(--u-surface); border: 0.5px solid var(--u-edge); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ui-card .k { font-size: 11px; font-weight: var(--u-fw-caps); letter-spacing: 0.08em; text-transform: uppercase; color: var(--u-text2); }
.ui-card h4 { margin: 0; font-family: var(--u-font); font-size: 22px; font-weight: var(--u-fw-title); letter-spacing: -0.015em; line-height: 1.3; }
.ui-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--u-text2); white-space: pre-wrap; }
.ui-callout { width: 100%; height: 100%; padding: 16px 20px; border-radius: 12px; border-left: 3px solid var(--u-accent); background: var(--u-tint-accent); font-size: 15px; line-height: 1.5; overflow: hidden; white-space: pre-wrap; }
.ui-callout[data-tint="danger"] { border-left-color: var(--u-danger); background: var(--u-tint-danger); }

/* Menu and tooltip: Popover preset (Opaque, strong hairline, highlight) */
.ui-menu { width: 100%; height: 100%; padding: 6px; border-radius: 12px; display: flex; flex-direction: column; }
.ui-menu .mi { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.ui-menu .mi.on { background: var(--u-fill-subtle); }
.ui-menu hr { height: 0.5px; margin: 4px -2px; border: 0; background: var(--u-menu-rule); }
.ui-tip { width: 100%; height: 100%; padding: 0 10px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; white-space: nowrap; }

/* Dialog (Regular, 70% white in light), limit card (Regular, 12%), toast (Regular capsule) */
.ui-dialog { width: 100%; height: 100%; border-radius: 28px; }
.ui-dialog .in { height: 100%; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ui-dialog h4, .ui-limit h4 { margin: 0; font-family: var(--u-font); font-size: 19px; font-weight: var(--u-fw-title); letter-spacing: -0.015em; line-height: 1.3; }
.ui-dialog p, .ui-limit p { margin: 0; font-size: 15px; line-height: 1.5; flex: 1; white-space: pre-wrap; }
.ui-dialog .acts, .ui-limit .acts { display: flex; justify-content: flex-end; gap: 12px; }
.ui-dialog .acts span, .ui-limit .acts span { height: 40px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: var(--u-fw-tap); }
.ui-dialog .acts .n, .ui-limit .acts .n { background: var(--u-tint-neutral); }
.ui-dialog .acts .p { background: var(--u-accent-fill); color: var(--u-on-accent); }
.ui-limit { width: 100%; height: 100%; padding: 20px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; }
.ui-toast { width: 100%; height: 100%; border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; font-weight: var(--u-fw-tap); white-space: nowrap; overflow: hidden; }
.ui-toast .ui-icon { font-size: 16px; }
.ui-toast .act { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--u-tint-neutral); font-size: 13px; }

/* Text field */
.ui-field { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.ui-field .lab { font-size: 13px; font-weight: var(--u-fw-tap); }
.ui-field .box { flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--u-edge-strong); border-radius: 8px; background: var(--u-surface); color: var(--u-text2); font-size: 17px; }

/* Glass panel and label over photos (Regular by default; Clear allowed over media) */
.ui-panel { width: 100%; height: 100%; border-radius: 20px; }
.ui-caption { width: 100%; height: 100%; border-radius: 999px; box-shadow: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 14px; font-weight: var(--u-fw-tap); white-space: nowrap; overflow: hidden; }
.ui-caption .ui-icon { font-size: 16px; }
.ui-caption .sub { font-weight: var(--u-fw-read); }

/* Tab bar (v19): Regular capsule, flat selected-fill indicator, selected label in ink */
.ui-tabbar { width: 100%; height: 100%; border-radius: 999px; display: flex; align-items: stretch; padding: 4px; }
.ui-tabbar .tb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: var(--u-fw-tap); color: var(--u-text2); border-radius: 999px; }
.ui-tabbar .tb .ui-icon { font-size: 28px; }
.ui-tabbar .tb.on { color: var(--u-text); background: var(--u-selected); }