@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&family=Lora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Libre Caslon Display", Georgia, serif;
  --ccc-green: #95d600;
  --ccc-green-light: #b8e355;
  --ccc-charcoal: #5c6063;
  --ccc-charcoal-dark: #383a3c;
  --ccc-gray-dark: #81868a;
  --ccc-gray-medium: #a9adb0;
  --ccc-gray-light: #f5f5f5;
  --ccc-cloud: #fefdff;
  --ccc-red: #c02b0a;
  --parchment: var(--ccc-gray-light);
  --paper: var(--ccc-cloud);
  --evergreen: var(--ccc-green);
  --evergreen-dark: #486700;
  --evergreen-soft: #eaf6cf;
  --primary-hover: color-mix(in srgb, var(--evergreen) 76%, white);
  --on-primary: var(--ccc-charcoal-dark);
  --link: var(--ccc-charcoal-dark);
  --gold: var(--ccc-charcoal);
  --gold-soft: #e7e9ea;
  --ink: var(--ccc-charcoal-dark);
  --muted: var(--ccc-charcoal);
  --border: #d0d4d6;
  --danger: var(--ccc-red);
  --danger-soft: #f8e8e3;
  --success: #527500;
  --success-soft: #eaf6cf;
  --shadow: 0 18px 45px rgba(56, 58, 60, 0.11);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --top-height: 72px;
  --side-width: 214px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --parchment: #242628;
  --paper: var(--ccc-charcoal-dark);
  --evergreen: var(--ccc-green-light);
  --evergreen-dark: var(--ccc-green);
  --evergreen-soft: #45551f;
  --primary-hover: var(--ccc-green);
  --on-primary: var(--ccc-charcoal-dark);
  --link: var(--ccc-green-light);
  --gold: #d0d4d6;
  --gold-soft: var(--ccc-charcoal);
  --ink: var(--ccc-cloud);
  --muted: #d0d4d6;
  --border: var(--ccc-charcoal);
  --danger: #ff9d87;
  --danger-soft: #572d24;
  --success: var(--ccc-green-light);
  --success-soft: #45551f;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

[data-org-theme="modern"] {
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Manrope", system-ui, sans-serif;
  --parchment: #f5f3fb;
  --paper: #fff;
  --evergreen: #6d4aff;
  --evergreen-dark: #4f33bd;
  --evergreen-soft: #eee9ff;
  --primary-hover: #593bd8;
  --on-primary: #fff;
  --link: #5136b8;
  --gold: #655d7a;
  --gold-soft: #ebe8f2;
  --ink: #292535;
  --muted: #686273;
  --border: #d8d2e4;
  --danger: #b3264d;
  --danger-soft: #fae8ee;
  --success: #28725a;
  --success-soft: #e3f3ed;
  --shadow: 0 18px 45px rgba(54, 42, 91, .12);
}

[data-org-theme="traditional"] {
  --font-body: "Lora", Georgia, serif;
  --font-display: "Lora", Georgia, serif;
  --parchment: #f6f0e5;
  --paper: #fffdf8;
  --evergreen: #9a5b2e;
  --evergreen-dark: #6f3e1d;
  --evergreen-soft: #f2dfcb;
  --primary-hover: #7f4824;
  --on-primary: #fffdf8;
  --link: #70401f;
  --gold: #80633c;
  --gold-soft: #ede3d3;
  --ink: #352d25;
  --muted: #6e6256;
  --border: #d8cbbb;
  --danger: #a7352a;
  --danger-soft: #f6e5df;
  --success: #4f6a3c;
  --success-soft: #e8efdf;
  --shadow: 0 18px 45px rgba(74, 54, 35, .13);
}

[data-org-theme="ocean"] {
  --font-body: "Manrope", system-ui, sans-serif; --font-display: "Manrope", system-ui, sans-serif;
  --parchment: #eef7f7; --paper: #fbffff; --evergreen: #087e8b; --evergreen-dark: #075e68; --evergreen-soft: #d8eff0;
  --primary-hover: #086c77; --on-primary: #fff; --link: #086670; --gold: #527477; --gold-soft: #dfecec;
  --ink: #18383b; --muted: #577174; --border: #c5dcde; --danger: #b43b48; --danger-soft: #f8e5e7;
  --success: #267158; --success-soft: #dcf0e8; --shadow: 0 18px 45px rgba(19, 78, 83, .12);
}

[data-org-theme="rose"] {
  --font-body: "DM Sans", system-ui, sans-serif; --font-display: "Libre Caslon Display", Georgia, serif;
  --parchment: #fbf2f5; --paper: #fffafd; --evergreen: #b83b68; --evergreen-dark: #872748; --evergreen-soft: #f5dce6;
  --primary-hover: #9d3158; --on-primary: #fff; --link: #8f2b50; --gold: #82626e; --gold-soft: #f0e4e8;
  --ink: #3e2831; --muted: #735d66; --border: #e2ccd5; --danger: #b22f35; --danger-soft: #f8e3e4;
  --success: #477052; --success-soft: #e3eee5; --shadow: 0 18px 45px rgba(105, 42, 65, .12);
}

[data-org-theme="midnight"] {
  --font-body: "Manrope", system-ui, sans-serif; --font-display: "Manrope", system-ui, sans-serif;
  --parchment: #f0f3fa; --paper: #fcfdff; --evergreen: #3154a4; --evergreen-dark: #233e7c; --evergreen-soft: #dfe7f8;
  --primary-hover: #28478d; --on-primary: #fff; --link: #29488d; --gold: #5e6b88; --gold-soft: #e3e7f0;
  --ink: #202b43; --muted: #5c667c; --border: #ccd4e5; --danger: #b43848; --danger-soft: #f7e5e8;
  --success: #33705a; --success-soft: #deeee8; --shadow: 0 18px 45px rgba(31, 54, 105, .13);
}

[data-org-theme="sage"] {
  --font-body: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif;
  --parchment: #f2f5ed; --paper: #fcfdf9; --evergreen: #5f7957; --evergreen-dark: #42573c; --evergreen-soft: #e0e9da;
  --primary-hover: #506849; --on-primary: #fff; --link: #486140; --gold: #73745d; --gold-soft: #e8e8dc;
  --ink: #30382d; --muted: #667061; --border: #d1dbc9; --danger: #a7433a; --danger-soft: #f5e6e1;
  --success: #4d7045; --success-soft: #dfebda; --shadow: 0 18px 45px rgba(55, 75, 48, .12);
}

[data-org-theme="amber"] {
  --font-body: "DM Sans", system-ui, sans-serif; --font-display: "Libre Caslon Display", Georgia, serif;
  --parchment: #fbf5e9; --paper: #fffdf8; --evergreen: #c97812; --evergreen-dark: #8e5108; --evergreen-soft: #f8e5c4;
  --primary-hover: #a9600d; --on-primary: #2e210f; --link: #83500e; --gold: #8b6b3e; --gold-soft: #f0e5d1;
  --ink: #3a3022; --muted: #756751; --border: #e2d4bc; --danger: #b33b2e; --danger-soft: #f7e5df;
  --success: #587144; --success-soft: #e5eddd; --shadow: 0 18px 45px rgba(105, 73, 27, .12);
}

[data-org-theme="slate"] {
  --font-body: "Manrope", system-ui, sans-serif; --font-display: "Manrope", system-ui, sans-serif;
  --parchment: #f1f4f6; --paper: #fcfdfe; --evergreen: #526579; --evergreen-dark: #394957; --evergreen-soft: #e0e7ec;
  --primary-hover: #435466; --on-primary: #fff; --link: #405364; --gold: #69737d; --gold-soft: #e4e8eb;
  --ink: #29343d; --muted: #64717b; --border: #cfd8de; --danger: #ad3d48; --danger-soft: #f5e4e6;
  --success: #39705b; --success-soft: #dfede7; --shadow: 0 18px 45px rgba(45, 62, 76, .12);
}

[data-org-theme="berry"] {
  --font-body: "DM Sans", system-ui, sans-serif; --font-display: "Libre Caslon Display", Georgia, serif;
  --parchment: #f7f1f9; --paper: #fffaff; --evergreen: #7f3f98; --evergreen-dark: #5b286f; --evergreen-soft: #eadcf0;
  --primary-hover: #6b3282; --on-primary: #fff; --link: #642e79; --gold: #77617f; --gold-soft: #ebe3ee;
  --ink: #35283a; --muted: #6e6073; --border: #dacde0; --danger: #b43755; --danger-soft: #f7e4e9;
  --success: #40705a; --success-soft: #dfede7; --shadow: 0 18px 45px rgba(77, 42, 91, .13);
}

[data-theme="dark"][data-org-theme="modern"] {
  --parchment: #191623;
  --paper: #252031;
  --evergreen: #a890ff;
  --evergreen-dark: #c2b3ff;
  --evergreen-soft: #39304f;
  --primary-hover: #beaefe;
  --on-primary: #211a35;
  --link: #b9a8ff;
  --gold: #c1b9d5;
  --gold-soft: #40394d;
  --ink: #faf8ff;
  --muted: #c5bfd0;
  --border: #514960;
  --danger: #ff9ab5;
  --danger-soft: #54263a;
  --success: #83d8bb;
  --success-soft: #23493f;
  --shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

[data-theme="dark"][data-org-theme="traditional"] {
  --parchment: #251f1a;
  --paper: #342a23;
  --evergreen: #d79762;
  --evergreen-dark: #edb486;
  --evergreen-soft: #513a2b;
  --primary-hover: #e4aa7a;
  --on-primary: #2c211a;
  --link: #e0a777;
  --gold: #d9c09e;
  --gold-soft: #4a4035;
  --ink: #fffaf2;
  --muted: #d4c7b8;
  --border: #5c4e42;
  --danger: #ff9d8f;
  --danger-soft: #5a302a;
  --success: #a9cf8c;
  --success-soft: #3a4a30;
  --shadow: 0 18px 45px rgba(0, 0, 0, .3);
}

[data-theme="dark"][data-org-theme="ocean"],
[data-theme="dark"][data-org-theme="rose"],
[data-theme="dark"][data-org-theme="midnight"],
[data-theme="dark"][data-org-theme="sage"],
[data-theme="dark"][data-org-theme="amber"],
[data-theme="dark"][data-org-theme="slate"],
[data-theme="dark"][data-org-theme="berry"] {
  --on-primary: #fff; --gold: #c8cbd0; --danger: #ff9aa5; --danger-soft: #542d35;
  --success: #92d6b9; --success-soft: #29483d; --shadow: 0 18px 45px rgba(0, 0, 0, .3);
}
[data-theme="dark"][data-org-theme="ocean"] { --parchment: #142427; --paper: #1e3336; --evergreen: #57c2ca; --evergreen-dark: #88dce1; --evergreen-soft: #294b4f; --primary-hover: #78d2d8; --link: #73d0d6; --gold-soft: #3b4d4f; --ink: #f3ffff; --muted: #bad0d2; --border: #456166; }
[data-theme="dark"][data-org-theme="rose"] { --parchment: #271920; --paper: #38242d; --evergreen: #ed85aa; --evergreen-dark: #f6aec6; --evergreen-soft: #553140; --primary-hover: #f09abb; --link: #f09abb; --gold-soft: #4d3a42; --ink: #fff7fa; --muted: #d8bdc7; --border: #604650; }
[data-theme="dark"][data-org-theme="midnight"] { --parchment: #151d2e; --paper: #202b42; --evergreen: #82a6ef; --evergreen-dark: #adc5f5; --evergreen-soft: #304365; --primary-hover: #9ab8f2; --link: #9dbafa; --gold-soft: #3c465b; --ink: #f7f9ff; --muted: #bec7d9; --border: #485875; }
[data-theme="dark"][data-org-theme="sage"] { --parchment: #1d241b; --paper: #293126; --evergreen: #9fc394; --evergreen-dark: #bed9b6; --evergreen-soft: #3d5038; --primary-hover: #b2d0a9; --link: #afd0a5; --gold-soft: #42483e; --ink: #fbfff8; --muted: #c5d0c0; --border: #505e4b; }
[data-theme="dark"][data-org-theme="amber"] { --parchment: #282016; --paper: #382c1e; --evergreen: #edae54; --evergreen-dark: #f7c77f; --evergreen-soft: #574225; --primary-hover: #f2bd70; --on-primary: #30200d; --link: #f0bb6b; --gold-soft: #504432; --ink: #fffaf1; --muted: #d6c8b2; --border: #62533e; }
[data-theme="dark"][data-org-theme="slate"] { --parchment: #192126; --paper: #252f36; --evergreen: #9ab1c5; --evergreen-dark: #bfd0df; --evergreen-soft: #394954; --primary-hover: #aec1d1; --link: #b1c7d9; --gold-soft: #404a51; --ink: #f8fbfd; --muted: #c2ccd3; --border: #4e5d67; }
[data-theme="dark"][data-org-theme="berry"] { --parchment: #231929; --paper: #32243a; --evergreen: #c18bd4; --evergreen-dark: #dab4e7; --evergreen-soft: #4c3557; --primary-hover: #d0a2df; --link: #d0a2df; --gold-soft: #493c4e; --ink: #fff8ff; --muted: #d2c0d8; --border: #5b4962; }

* { box-sizing: border-box; }

html { background: var(--parchment); scroll-behavior: smooth; overscroll-behavior-y: none; }

body {
  min-height: 100vh;
  margin: 0;
  padding-top: var(--top-height);
  overscroll-behavior-y: none;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--evergreen-soft) 78%, transparent) 0, transparent 23rem),
    var(--parchment);
  font-family: var(--font-body);
  line-height: 1.55;
}

a { color: var(--link); text-decoration-color: var(--evergreen); text-underline-offset: 3px; }
a:hover { color: var(--evergreen-dark); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { color: var(--ink); }
h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.8rem); line-height: 0.98; font-weight: 400; }
h2 { font-size: 1.35rem; line-height: 1.2; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-160%); padding: .65rem 1rem; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--paper);
}
.skip-link:focus { transform: translateY(0); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted, small { color: var(--muted); }
.optional { color: var(--muted); font-size: .8rem; font-weight: 400; }
.eyebrow { margin-bottom: .55rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.top-nav {
  position: fixed; top: 0; right: 0; left: 0; z-index: 30; height: var(--top-height);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--parchment) 88%, transparent);
  backdrop-filter: blur(16px);
}
.impersonation-banner {
  position: fixed; top: 0; right: 0; left: 0; z-index: 45; display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 1rem;
  padding: .45rem 1rem; color: #fff; background: #71304a; box-shadow: 0 5px 18px rgba(45, 19, 30, .22);
}
.impersonation-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impersonation-banner small { color: inherit; opacity: .8; }
.impersonation-banner form { flex: none; margin: 0; }
.impersonation-banner .btn { min-height: 34px; padding: .45rem .7rem; border-color: rgba(255,255,255,.72); color: #fff; background: transparent; font-size: .75rem; }
.impersonation-banner .btn:hover { color: #71304a; background: #fff; }
.impersonating .top-nav { top: 48px; }
.impersonating .side-nav { top: calc(var(--top-height) + 48px); }
body.impersonating { padding-top: calc(var(--top-height) + 48px); }
.top-nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2rem; }
.top-nav-leading { display: flex; align-items: center; gap: .7rem; }
.top-nav-actions { display: flex; align-items: center; gap: .75rem; }
.organization-switcher-label { width: clamp(280px, 28vw, 380px); }
.organization-switcher-label select { width: 100%; min-height: 42px; background-color: var(--paper); }
.organization-find { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.1rem; font-weight: 500; text-decoration: none; }
.brand strong { color: var(--ink); text-decoration: underline var(--evergreen) 3px; text-underline-offset: 4px; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--evergreen); }
.brand-mark svg { width: 23px; fill: none; stroke: var(--on-primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--ink); background: var(--paper); cursor: pointer; }
.icon-button:hover { border-color: var(--evergreen); }
.nav-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.notification-center { position: relative; flex: none; }
.notification-bell { position: relative; }
.notification-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.notification-bell[aria-expanded="true"] { border-color: var(--evergreen); background: var(--evergreen-soft); }
.notification-badge { position: absolute; top: -4px; right: -4px; display: grid; min-width: 19px; height: 19px; padding: 0 4px; place-items: center; border: 2px solid var(--parchment); border-radius: 99px; color: #fff; background: #c94862; font-size: .6rem; font-weight: 800; line-height: 1; }
.notification-badge[hidden] { display: none; }
.notification-panel { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 80; width: min(390px, calc(100vw - 1.5rem)); max-height: min(520px, calc(100dvh - var(--top-height) - 1.5rem)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); background: var(--paper); box-shadow: 0 18px 48px rgba(39, 42, 41, .22); }
.notification-panel[hidden] { display: none; }
.notification-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.notification-panel-header button { padding: .25rem; border: 0; color: var(--evergreen-dark); background: transparent; font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.notification-list { max-height: min(450px, calc(100dvh - var(--top-height) - 5rem)); overflow-y: auto; }
.notification-list > .muted { margin: 0; padding: 1.2rem; text-align: center; }
.notification-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; padding: .85rem 1rem; color: var(--ink); text-decoration: none; }
.notification-item + .notification-item { border-top: 1px solid var(--border); }
.notification-item:hover, .notification-item:focus-visible { outline: 0; background: var(--evergreen-soft); }
.notification-item.is-unread { background: color-mix(in srgb, var(--evergreen-soft) 52%, var(--paper)); }
.notification-item.is-unread::after { position: absolute; top: .95rem; right: .75rem; width: 7px; height: 7px; border-radius: 50%; background: var(--evergreen); content: ""; }
.notification-heart { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #b82f4d; background: color-mix(in srgb, #f6b5c2 38%, var(--paper)); font-size: 1rem; }
.notification-copy { min-width: 0; padding-right: .5rem; }
.notification-copy p { margin: 0; font-size: .78rem; line-height: 1.45; }
.notification-copy strong { color: var(--ink); }
.notification-entry-label { display: block; overflow: hidden; margin-top: .15rem; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.notification-copy time { display: block; margin-top: .3rem; color: var(--muted); font-size: .65rem; }
.nav-toggle, .side-nav-close { display: none; }
.content-nav-toolbar { position: absolute; top: calc(var(--top-height) + 1rem); inset-inline-start: 1rem; z-index: 19; }
.content-nav-toggle { margin: 0; }
body.impersonating .content-nav-toolbar { top: calc(var(--top-height) + 49px + 1rem); }
.side-nav-collapse { display: grid; width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; }
.side-nav-collapse svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.side-nav-collapse:hover, .side-nav-collapse:focus-visible { border-color: var(--border); background: var(--evergreen-soft); }

.side-nav {
  position: fixed; top: var(--top-height); bottom: 0; left: 0; z-index: 20;
  display: flex; width: var(--side-width); flex-direction: column; padding: 1rem .8rem;
  border-right: 1px solid var(--border); background: color-mix(in srgb, var(--paper) 72%, transparent);
  transition: transform .2s ease;
}
.side-nav-header { display: flex; align-items: center; justify-content: space-between; padding: .25rem .55rem .65rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.side-nav nav { display: grid; gap: .12rem; }
.side-nav nav a { padding: .58rem .7rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.side-nav nav a:hover, .side-nav nav a.is-active { color: var(--evergreen-dark); background: var(--evergreen-soft); }
.side-nav-logout { margin-top: auto; }
.side-nav-logout .btn { width: 100%; }
.nav-scrim { position: fixed; inset: var(--top-height) 0 0; z-index: 18; background: rgba(56, 58, 60, .62); }

.app-main { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 4rem 0 6rem; }
.authenticated .app-main { width: min(1380px, calc(100% - var(--side-width) - 4rem)); max-width: none; margin-left: calc(var(--side-width) + max(2rem, (100vw - var(--side-width) - 1380px) / 2)); }
.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
.authenticated .footer { margin-left: var(--side-width); }

@media (min-width: 761px) {
  [data-navigation-collapsed="true"] .side-nav { transform: translateX(-102%); }
  [data-navigation-collapsed="true"] .content-nav-toggle { display: grid; }
  [data-navigation-collapsed="true"] .authenticated .app-main { width: min(1380px, calc(100% - 4rem)); margin: 0 auto; padding-top: 4rem; }
  [data-navigation-collapsed="true"] .authenticated .footer { margin-left: 0; }
}

.card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow); }
.card-body { color: var(--muted); }
.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .68rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.btn:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .5; }
.btn-primary { border-color: var(--evergreen); color: var(--on-primary); background: var(--evergreen); }
.btn-primary:hover { border-color: var(--primary-hover); color: var(--on-primary); background: var(--primary-hover); }
.btn-secondary { border-color: var(--evergreen); color: var(--evergreen-dark); background: transparent; }
.btn-secondary:hover { color: var(--on-primary); background: var(--evergreen); }
.btn-ghost { border-color: var(--border); color: var(--muted); background: transparent; }
.btn-ghost:hover { color: var(--danger); border-color: var(--danger); }

.alert { max-width: 800px; margin: 0 auto 1rem; padding: .8rem 1rem; border: 1px solid; border-radius: var(--radius-sm); }
.alert-success { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.alert-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.alert-info { border-color: var(--evergreen); color: var(--ink); background: var(--evergreen-soft); }
.alert[data-transient-alert] { transition: opacity .2s ease, transform .2s ease; }
.alert[data-transient-alert].is-dismissing { opacity: 0; transform: translateY(-.35rem); }

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; min-height: calc(100vh - 190px); }
.hero h1 em { color: var(--ink); font-style: italic; text-decoration: underline var(--evergreen) .11em; text-underline-offset: .09em; }
.hero-description { max-width: 650px; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.comma-card { padding: 1.4rem; transform: rotate(1.2deg); }
.comma-step { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; padding: 1rem .4rem; border-bottom: 1px solid var(--border); }
.comma-step:last-child { border-bottom: 0; }
.comma-step > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--on-primary); background: var(--evergreen); font-family: var(--font-display); font-size: 1.35rem; }
.comma-step strong { color: var(--ink); }
.comma-step p { margin: .15rem 0 0; color: var(--muted); font-size: .87rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.feature-grid .card { padding: 1.5rem; }
.feature-grid p:last-child { color: var(--muted); }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 500px); gap: clamp(2rem, 8vw, 8rem); align-items: center; min-height: calc(100vh - 210px); }
.auth-intro h1 { font-size: clamp(2.6rem, 5vw, 5rem); }
.auth-intro > p:last-child { max-width: 560px; color: var(--muted); font-size: 1.08rem; }
.auth-panel { padding: clamp(1.5rem, 4vw, 2.5rem); }
.auth-panel h2 { margin-bottom: .5rem; font-size: 1.7rem; }
.auth-switch { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--muted); text-align: center; }
.mfa-code-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mfa-code-fieldset legend { margin-bottom: .38rem; color: var(--ink); font-size: .88rem; font-weight: 700; }
.mfa-code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
input.mfa-code-digit { min-width: 0; height: 58px; padding: .45rem; text-align: center; font-size: 1.45rem; font-weight: 700; }
.mfa-recovery-toggle { justify-self: start; padding: 0; border: 0; color: var(--link); background: transparent; font: inherit; text-decoration: underline; text-decoration-color: var(--evergreen); text-underline-offset: 3px; cursor: pointer; }
.mfa-recovery-toggle:hover { color: var(--evergreen-dark); text-decoration-thickness: 2px; }
[data-mfa-recovery][hidden] { display: none; }

.stack { display: grid; gap: 1rem; margin-top: 1.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.password-requirements { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem .8rem; margin: -.35rem 0 .2rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--parchment); list-style: none; }
.password-requirements li { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .75rem; }
.password-requirements li span { display: inline-grid; width: 1.1rem; height: 1.1rem; flex: none; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); font-weight: 800; }
.password-requirements li.is-met, .password-requirements li.is-met span, .password-match.is-met { color: var(--success); }
.password-match { margin-top: -.65rem; color: var(--muted); }
.password-match.is-invalid, .field-validation { color: var(--danger); }
.field-validation { margin-top: .25rem; }
.form-row { display: flex; align-items: center; gap: 1rem; }
.form-row-between { justify-content: space-between; }
label { display: grid; gap: .38rem; color: var(--ink); font-size: .88rem; font-weight: 700; }
input { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--parchment); }
textarea { width: 100%; padding: .7rem .8rem; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--parchment); font: inherit; }
input:focus, textarea:focus { border-color: var(--evergreen-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--evergreen) 42%, transparent); }
select { width: 100%; min-height: 46px; padding: .65rem 2.4rem .65rem .8rem; appearance: none; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background-color: var(--parchment); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px; }
select:focus { border-color: var(--evergreen-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--evergreen) 42%, transparent); }
.custom-select { position: relative; display: block; width: 100%; min-width: 0; }
.custom-select-native { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; pointer-events: none; }
.custom-select-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--parchment); font: inherit; text-align: left; cursor: pointer; }
.custom-select-trigger:hover { border-color: color-mix(in srgb, var(--evergreen) 65%, var(--border)); background: color-mix(in srgb, var(--evergreen-soft) 30%, var(--parchment)); }
.custom-select-trigger:focus-visible, .custom-select.is-open .custom-select-trigger { border-color: var(--evergreen-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--evergreen) 42%, transparent); }
.custom-select.is-invalid .custom-select-trigger { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.custom-select-trigger:disabled { color: var(--muted); background: var(--gold-soft); cursor: not-allowed; opacity: .75; }
.custom-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-indicator { width: .62rem; height: .62rem; margin-right: .12rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.16rem) rotate(45deg); transition: transform .15s ease; }
.custom-select.is-open .custom-select-indicator { transform: translateY(.16rem) rotate(225deg); }
.custom-select-options { position: fixed; z-index: 200; display: grid; gap: .2rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); box-shadow: 0 16px 40px rgba(56, 58, 60, .2); }
.custom-select-options[hidden] { display: none; }
.custom-select-search { position: sticky; top: 0; z-index: 1; margin: 0 0 .35rem; background: var(--paper); }
.custom-select-empty { padding: .65rem; color: var(--muted); }
.custom-select-empty[hidden], .custom-select-option[hidden] { display: none; }
.custom-select-option { width: 100%; min-height: 40px; padding: .55rem .65rem; border: 0; border-radius: 6px; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.custom-select-option:hover, .custom-select-option:focus-visible { outline: 0; color: var(--evergreen-dark); background: var(--evergreen-soft); }
.custom-select-option[aria-selected="true"] { color: var(--on-primary); background: var(--evergreen); font-weight: 700; }
.custom-select-option:disabled { color: var(--muted); cursor: not-allowed; opacity: .6; }
.custom-select-global { font-weight: 700; border-inline-start: 3px solid var(--evergreen); background: var(--evergreen-soft); margin-bottom: .35rem; }
label small { font-weight: 400; }
.field-label { display: inline-flex; align-items: baseline; gap: .18rem; }
.required-indicator { color: var(--danger); font-size: 1.05em; font-weight: 800; line-height: 1; }
.qr-code { display: block; width: 190px; height: 190px; margin: 1.5rem auto; border: 8px solid white; border-radius: var(--radius-sm); }
.secret-code { display: grid; gap: .3rem; text-align: center; }
.secret-code span { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.secret-code code { overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem; border: 1px dashed var(--gold); border-radius: var(--radius-sm); list-style: none; background: var(--gold-soft); }

.page-header { max-width: 780px; margin-bottom: 2.5rem; }
.page-header h1 { margin-bottom: 1rem; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.page-header > p:last-child { color: var(--muted); font-size: 1.08rem; }
.dashboard-page .app-main { padding-top: 2rem; padding-bottom: 3.5rem; }
.dashboard-hub { display: grid; gap: .8rem; width: 100%; max-width: 1180px; }
.dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: .35rem; }
.dashboard-welcome .eyebrow { margin-bottom: .25rem; }
.dashboard-welcome h1 { margin: 0; font-size: clamp(2.15rem, 4vw, 3.45rem); }
.dashboard-welcome > p { max-width: 390px; margin: 0 0 .25rem; color: var(--muted); font-size: .92rem; text-align: right; }
.dashboard-feature-grid, .dashboard-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .85fr); gap: .8rem; }
.dashboard-feature, .dashboard-panel { min-width: 0; }
.dashboard-feature {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 1rem; min-height: 156px; align-items: center;
  overflow: hidden; padding: 1.15rem 1.2rem; color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-feature::after { position: absolute; right: -46px; bottom: -84px; width: 190px; height: 190px; border: 1px solid color-mix(in srgb, var(--evergreen) 22%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.dashboard-feature:hover, .dashboard-feature:focus-visible, .dashboard-prayer:hover, .dashboard-prayer:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--evergreen) 72%, var(--border)); color: inherit; box-shadow: 0 20px 38px rgba(56, 58, 60, .15); outline: 0; }
.dashboard-notification { background: linear-gradient(135deg, color-mix(in srgb, var(--evergreen-soft) 68%, var(--paper)), var(--paper) 72%); }
.dashboard-notification.is-unread { box-shadow: inset 4px 0 var(--evergreen), var(--shadow); }
.dashboard-scrolls { color: #fff; border-color: color-mix(in srgb, var(--ccc-charcoal-dark) 80%, var(--evergreen)); background: linear-gradient(145deg, var(--ccc-charcoal-dark), color-mix(in srgb, var(--ccc-charcoal-dark) 82%, var(--evergreen))); }
.dashboard-scrolls:hover, .dashboard-scrolls:focus-visible { color: #fff; }
.dashboard-scrolls::after { border-color: rgba(255, 255, 255, .16); }
.dashboard-feature-orb { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; }
.dashboard-feature-orb svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.dashboard-notification-orb { color: var(--evergreen-dark); background: color-mix(in srgb, var(--evergreen) 30%, var(--paper)); }
.dashboard-scrolls-orb { color: var(--ccc-charcoal-dark); background: var(--ccc-green); transform: rotate(-4deg); }
.dashboard-feature-copy { position: relative; z-index: 1; display: block; min-width: 0; }
.dashboard-feature-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.dashboard-feature-topline .eyebrow { margin: 0; }
.dashboard-scrolls .eyebrow { color: rgba(255, 255, 255, .72); }
.dashboard-feature h2 { display: -webkit-box; overflow: hidden; margin: 0; font-size: clamp(1.1rem, 2vw, 1.42rem); line-height: 1.22; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-scrolls h2 { color: #fff; }
.dashboard-feature p { display: -webkit-box; overflow: hidden; margin: .35rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-scrolls p { color: rgba(255, 255, 255, .76); }
.dashboard-feature time { display: block; margin-top: .45rem; color: var(--muted); font-size: .68rem; }
.dashboard-count { display: inline-flex; min-height: 23px; align-items: center; padding: .22rem .5rem; border-radius: 99px; color: var(--evergreen-dark); background: color-mix(in srgb, var(--evergreen) 26%, var(--paper)); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.dashboard-count.is-quiet { color: var(--muted); background: color-mix(in srgb, var(--gold-soft) 72%, var(--paper)); }
.dashboard-scrolls .dashboard-count { color: var(--ccc-charcoal-dark); background: var(--ccc-green); }
.dashboard-card-arrow { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 50%; font-weight: 700; transition: transform .18s ease; }
.dashboard-feature:hover .dashboard-card-arrow, .dashboard-feature:focus-visible .dashboard-card-arrow { transform: translate(2px, -2px); }
.dashboard-scrolls .dashboard-card-arrow { border-color: rgba(255, 255, 255, .28); }
.dashboard-seals { display: flex; gap: .3rem; margin-top: .65rem; }
.dashboard-seals i { display: block; width: 17px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.dashboard-seals i:first-child { width: 34px; background: var(--ccc-green); }
.dashboard-panel { min-height: 232px; padding: 1.05rem 1.15rem; }
.dashboard-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dashboard-panel-heading .eyebrow { margin-bottom: .22rem; }
.dashboard-panel-heading h2, .dashboard-heading-text { display: block; margin: 0; color: var(--ink); font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.dashboard-panel-heading > a { flex: none; font-size: .75rem; font-weight: 700; text-decoration: none; }
.dashboard-study-list { margin: .65rem -1.15rem -1.05rem; border-top: 1px solid var(--border); }
.dashboard-study-row, .dashboard-empty-action { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .7rem; min-height: 55px; align-items: center; padding: .55rem 1.15rem; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.dashboard-study-row + .dashboard-study-row { border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent); }
.dashboard-study-row:hover, .dashboard-study-row:focus-visible, .dashboard-empty-action:hover, .dashboard-empty-action:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--evergreen-soft) 48%, var(--paper)); outline: 0; }
.dashboard-study-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--evergreen-dark); background: var(--evergreen-soft); font-size: .72rem; font-weight: 800; }
.dashboard-study-copy, .dashboard-empty-action > span:nth-child(2) { display: grid; min-width: 0; }
.dashboard-study-copy strong, .dashboard-empty-action strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-study-copy small, .dashboard-empty-action small { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-row-arrow { color: var(--muted); transition: transform .15s ease; }
.dashboard-study-row:hover .dashboard-row-arrow, .dashboard-empty-action:hover .dashboard-row-arrow { transform: translateX(3px); }
.dashboard-prayer { display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: linear-gradient(145deg, var(--paper), color-mix(in srgb, #f6b5c2 24%, var(--paper))); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dashboard-prayer-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 50%; color: #a62b49; background: color-mix(in srgb, #f6b5c2 48%, var(--paper)); }
.dashboard-prayer-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.8; }
.dashboard-prayer blockquote { display: -webkit-box; overflow: hidden; margin: 1rem 0 .7rem; color: var(--ink); font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.dashboard-prayer > p { margin: 1rem 0; color: var(--muted); font-size: .84rem; }
.dashboard-prayer-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .67rem; }
.dashboard-prayer-meta span + span::before { margin-right: .8rem; color: #c7798d; content: "•"; }
.dashboard-prayer-action { margin-top: auto; padding-top: .65rem; color: var(--evergreen-dark); font-size: .75rem; font-weight: 800; }
.dashboard-shortcuts { display: grid; grid-template-columns: minmax(175px, 1.15fr) repeat(4, minmax(125px, 1fr)); align-items: center; overflow: hidden; padding: .55rem; }
.dashboard-shortcuts-label { display: grid; padding: .15rem .65rem; }
.dashboard-shortcuts-label .eyebrow { margin: 0; font-size: .58rem; }
.dashboard-shortcuts-label strong { font-size: .78rem; }
.dashboard-shortcuts > a { display: flex; min-height: 43px; align-items: center; gap: .55rem; padding: .5rem .7rem; border-left: 1px solid var(--border); border-radius: 7px; color: var(--ink); font-size: .75rem; font-weight: 700; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.dashboard-shortcuts > a:hover, .dashboard-shortcuts > a:focus-visible { color: var(--evergreen-dark); background: var(--evergreen-soft); outline: 0; }
.dashboard-shortcuts > a > span { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border-radius: 8px; color: var(--evergreen-dark); background: color-mix(in srgb, var(--evergreen-soft) 72%, var(--paper)); font-size: .85rem; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.status-badge { display: inline-flex; padding: .35rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.status-pending { color: var(--ink); background: var(--gold-soft); }
.status-active { color: var(--success); background: var(--success-soft); }
.status-inactive { color: var(--danger); background: var(--danger-soft); }

.organization-search-card, .organization-admin-create, .organization-panel { padding: 1.35rem; }
.organization-search label { display: grid; gap: .45rem; font-weight: 700; }
.organization-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin-top: 1.2rem; }
.organization-card { display: grid; gap: .8rem; padding: 1.2rem; }
.organization-card p { margin: 0; color: var(--muted); }
.organization-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.organization-admin-create { margin-top: 1.2rem; }
.organization-admin-create summary { cursor: pointer; font-weight: 700; }
.relationship-directory-shell .page-header { margin-bottom: 1.5rem; }
.relationship-directory-shell .organization-search-card { padding: 1rem; }
.relationship-directory-shell .organization-search label { gap: .3rem; font-size: .78rem; }
.relationship-directory-shell .organization-admin-create { margin-top: .75rem; padding: 1rem; }
.relationship-directory-section { margin-top: 1.35rem; }
.relationship-directory-section + .relationship-directory-section { margin-top: 1.6rem; }
.relationship-directory-section .comma-library-heading { margin-bottom: .45rem; }
.relationship-directory-section .comma-library-heading .eyebrow { margin-bottom: .28rem; font-size: .65rem; }
.relationship-directory-section .comma-library-heading h2 { margin: 0; font-size: 1.15rem; }
.relationship-directory-section .relationship-directory-list { display: block; overflow: hidden; margin-top: 0; }
.relationship-directory-item { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(170px, 1fr) auto minmax(190px, auto); align-items: center; gap: .75rem 1rem; padding: .7rem 1rem; }
.relationship-directory-item + .relationship-directory-item { border-top: 1px solid var(--border); }
.relationship-directory-item:hover { background: color-mix(in srgb, var(--evergreen-soft) 32%, var(--paper)); }
.relationship-directory-identity { min-width: 0; }
.relationship-directory-item .relationship-directory-identity .eyebrow { margin-bottom: .18rem; font-size: .6rem; }
.relationship-directory-item .relationship-directory-identity h3 { margin: 0; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.25; }
.relationship-directory-item .relationship-directory-address { min-width: 0; font-size: .8rem; line-height: 1.35; }
.relationship-directory-item > .status-badge { justify-self: end; }
.relationship-directory-item .organization-card-actions { flex-wrap: nowrap; justify-content: flex-end; gap: .4rem; }
.relationship-directory-section .organization-card-actions .btn { min-height: 40px; padding: .55rem .75rem; font-size: .78rem; }
.relationship-directory-section .status-badge { padding: .28rem .48rem; font-size: .65rem; }
.organization-admin-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.organization-admin-actions .btn { min-width: 220px; }
.organization-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.organization-layout-single { grid-template-columns: 1fr; }
.organization-form-grid label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 700; }
.user-lookup { position: relative; }
.user-search-options { position: absolute; top: calc(100% + .35rem); right: 0; left: 0; z-index: 35; overflow-y: auto; max-height: 250px; padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow); }
.user-search-options[hidden] { display: none; }
.user-search-option { display: grid; gap: .12rem; padding: .65rem .75rem; border-radius: calc(var(--radius-sm) - 3px); color: var(--ink); cursor: pointer; }
.user-search-option + .user-search-option { border-top: 1px solid var(--border); }
.user-search-option strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.user-search-option small { overflow: hidden; color: var(--muted); font-size: .72rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.user-search-option:hover, .user-search-option[aria-selected="true"] { background: var(--evergreen-soft); }
.user-search-empty { display: block; padding: .7rem .75rem; color: var(--muted); font-size: .76rem; font-weight: 500; }
.organization-form-grid > .privacy-check,
.organization-form-grid > .btn { align-self: end; height: 46px; min-height: 46px; }
.organization-form-grid > .btn,
.organization-form-grid > .form-message { grid-column: 1 / -1; width: 100%; }
.organization-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.organization-panel { display: grid; align-content: start; gap: .8rem; }
.organization-panel small { display: block; }
.member-directory-summary .btn { justify-self: start; margin-top: auto; }
.member-directory-dialog { width: min(1080px, calc(100% - 2rem)); max-height: min(780px, calc(100dvh - 2rem)); overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.member-directory-dialog::backdrop { background: rgba(20, 22, 23, .68); backdrop-filter: blur(3px); }
.member-directory-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem 1rem; border-bottom: 1px solid var(--border); }
.member-directory-header h2, .member-directory-header p { margin-bottom: 0; }
.member-directory-header-actions { display: flex; align-items: center; gap: .6rem; }
.member-directory-header-actions form { margin: 0; }
.member-directory-dialog > p { margin: 0; padding: .9rem 1.35rem; }
.member-directory-table-wrap { max-height: min(570px, calc(100dvh - 13rem)); overflow: auto; border-top: 1px solid var(--border); }
.member-directory-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.member-directory-table th, .member-directory-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.member-directory-table th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--paper); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.member-directory-table tbody tr:last-child td { border-bottom: 0; }
.member-directory-table select { min-width: 125px; }
.member-directory-email { overflow-wrap: anywhere; }
.member-directory-action { text-align: right !important; }
.member-directory-empty { padding: 2rem !important; color: var(--muted); text-align: center !important; }
.admin-user-search-card { max-width: 780px; margin-bottom: 1.2rem; padding: 1.35rem; }
.admin-user-search { display: grid; gap: .45rem; font-weight: 700; }
.admin-user-directory { overflow: hidden; }
.admin-user-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; }
.admin-user-directory-heading h2, .admin-user-directory-heading p { margin-bottom: 0; }
.admin-user-table-wrap { max-height: min(680px, calc(100dvh - 13rem)); overflow: auto; border-top: 1px solid var(--border); }
.admin-user-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.admin-user-table th, .admin-user-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-user-table th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--paper); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-user-table td:first-child { min-width: 190px; }
.admin-user-table td:nth-child(3), .admin-user-table td:nth-child(4) { min-width: 210px; }
.admin-user-email { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.admin-access-list { display: grid; gap: .28rem; font-size: .76rem; }
.admin-access-list span { display: block; }
.admin-access-list small { display: block; }
.admin-user-action { text-align: right !important; }
.admin-user-action form { margin: 0; }
.admin-user-action .btn { min-height: 36px; padding: .5rem .65rem; font-size: .75rem; }
.admin-user-empty { padding: 2rem !important; color: var(--muted); text-align: center !important; }
.management-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--border); }
.management-row > span:last-child { display: flex; align-items: center; gap: .4rem; }
.management-row select { min-width: 112px; }
.status-archived { color: var(--muted); background: var(--gold-soft); }
.capability-list strong { font-size: .75rem; }
.capability-list .ready { color: var(--success); }
.capability-list .not-ready { color: var(--gold); }
.empty-state { max-width: 720px; margin: 6vh auto; padding: clamp(2rem, 7vw, 5rem); text-align: center; }
.empty-state-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 1rem; place-items: center; border-radius: 50%; color: var(--on-primary); background: var(--evergreen); font-size: 1.4rem; }
.empty-state h1 { margin-bottom: 1rem; font-size: clamp(2.5rem, 5vw, 4rem); }
.empty-state > p:not(.eyebrow) { color: var(--muted); }
.loading-spinner { display: inline-block; width: 1.2rem; height: 1.2rem; border: 2px solid var(--border); border-top-color: var(--evergreen); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.reader-shell .app-main { padding-top: 2.25rem; }
.reader-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: .75rem; }
.reader-toolbar .eyebrow { margin-bottom: .25rem; }
.reader-toolbar h1 { margin-bottom: 0; font-size: clamp(2.15rem, 4vw, 3.6rem); }
.reader-toolbar h1 span { color: var(--muted); }
.reader-selectors { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(110px, .6fr); gap: .7rem; width: min(100%, 360px); }
.reader-book-field { display: grid; gap: .38rem; }
.reader-book-field > label { display: block; }
.reader-book-option { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.reader-book-option[hidden] { display: none; }
.reader-book-option:focus-visible { outline: 2px solid var(--evergreen); outline-offset: -2px; }
.chapter-navigation { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.chapter-navigation .btn { min-height: 38px; padding: .55rem .8rem; font-size: .82rem; }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.reader-layout.has-context { grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 440px); }
.scripture-column { padding: clamp(1rem, 2.4vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.verse-row { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .65rem .45rem; border-radius: var(--radius-sm); transition: background-color .16s ease, box-shadow .16s ease; }
.verse-row.is-selected { background: var(--evergreen-soft); box-shadow: inset 3px 0 var(--evergreen); }
.verse-number { align-self: start; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.verse-number:hover, .verse-number:focus { color: var(--on-primary); background: var(--evergreen); }
.verse-row.is-selected .verse-number { color: var(--on-primary); background: var(--evergreen); }
.verse-text { margin-bottom: .35rem; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.75; }
.verse-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.verse-badges span { padding: .13rem .4rem; border-radius: 99px; color: var(--muted); background: var(--gold-soft); font-size: .66rem; }
.context-panel { position: sticky; top: calc(var(--top-height) + 1rem); height: var(--context-viewport-height, calc(100dvh - var(--top-height) - 2rem)); max-height: var(--context-viewport-height, calc(100dvh - var(--top-height) - 2rem)); overflow: hidden; padding: 1.25rem; }
.context-panel > [data-context-content] { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.context-panel-pane[hidden] { display: none; }
.context-panel-pane-ai { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.context-panel-pane-references { min-height: 0; flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.context-panel.is-entering { animation: context-panel-enter .28s cubic-bezier(.2, .75, .25, 1); }
.context-close { position: absolute; top: .7rem; right: .7rem; }
.context-group { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.context-group h3 { margin: 0 0 .6rem; font-size: .9rem; }
.context-records { display: grid; gap: .45rem; }
.context-record { display: grid; padding: .55rem .65rem; border-radius: var(--radius-sm); color: var(--ink); background: var(--parchment); text-decoration: none; }
.context-record span { color: var(--muted); font-size: .78rem; }

@keyframes context-panel-enter {
  from { transform: translateX(12px); }
  to { transform: translateX(0); }
}

/* COMMA passage library and study workspace */
.comma-shell {
  --highlight-theme: #f5c84c;
  --highlight-repeating: #69c6e4;
  --highlight-truth: #95d600;
  --highlight-striking: #ff8b70;
  --highlight-other: #b9a0ea;
}
[data-theme="dark"] .comma-shell {
  --highlight-theme: #9b7620;
  --highlight-repeating: #2b7992;
  --highlight-truth: #577d00;
  --highlight-striking: #9a4e3d;
  --highlight-other: #685592;
}
.comma-index-header { margin-bottom: 1.5rem; }
.comma-start { padding: clamp(1.2rem, 3vw, 2rem); }
.comma-start h2, .comma-library h2 { margin-bottom: .2rem; }
.comma-reference-form { max-width: 680px; margin-top: 1.2rem; }
.comma-reference-form .form-row { align-items: stretch; }
.comma-reference-form .btn { white-space: nowrap; }
.comma-picker-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.comma-picker-divider::before, .comma-picker-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.comma-range-form { display: grid; grid-template-columns: 1.1fr .7fr .7fr 1.1fr .7fr .7fr auto; gap: .75rem; align-items: end; }
.book-combobox { position: relative; display: block; }
.book-combobox > input[type="text"] { width: 100%; }
.book-combobox-options { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 30; overflow-y: auto; max-height: 240px; padding: .3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow); }
.book-combobox-options[hidden] { display: none; }
.book-combobox-option { display: block; padding: .55rem .65rem; border-radius: calc(var(--radius-sm) - 3px); color: var(--ink); cursor: pointer; }
.book-combobox-option:hover, .book-combobox-option[aria-selected="true"] { background: var(--evergreen-soft); }
.book-combobox-empty { display: block; padding: .55rem .65rem; color: var(--muted); font-size: .8rem; }
.form-message { min-height: 1.4rem; margin: .8rem 0 0; color: var(--danger); font-weight: 600; }
.comma-placement-note { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--muted); }
.comma-library { margin-top: 2.4rem; }
.comma-library-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.comma-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(135px, .8fr)); gap: .55rem; }
.comma-table-wrap { overflow-x: auto; }
.comma-table { width: 100%; border-collapse: collapse; }
.comma-table th, .comma-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.comma-table th { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.comma-sort-button { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.comma-sort-button span { display: inline-grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; font-size: .75rem; }
.comma-sort-button:hover, .comma-sort-button.is-active { color: var(--evergreen-dark); }
.comma-sort-button.is-active span { color: var(--on-primary); background: var(--evergreen); }
.comma-sort-button:focus-visible { border-radius: 2px; outline: 3px solid var(--evergreen); outline-offset: 3px; }
.comma-metric { font-weight: 700; font-variant-numeric: tabular-nums; }
.comma-table tbody tr:last-child td { border-bottom: 0; }
.comma-reference-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--evergreen); }
.comma-table-empty { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.comma-load-more { display: flex; margin: 1rem auto; }
.comma-load-more[hidden] { display: none; }
.comma-table-wrap.is-loading { opacity: .65; }
.status-completed { color: var(--success); background: var(--success-soft); }
.status-in_progress { color: var(--ink); background: var(--evergreen-soft); }
.status-not_started { color: var(--muted); background: var(--gold-soft); }
.comma-match-dialog { width: min(680px, calc(100% - 2rem)); max-height: 82vh; overflow-y: auto; padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.comma-match-dialog::backdrop { background: rgba(20, 22, 23, .68); backdrop-filter: blur(3px); }
.match-close { position: absolute; top: .8rem; right: .8rem; }
.match-options { display: grid; gap: .7rem; margin-top: 1.2rem; }
.match-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--parchment); }
.match-option.is-exact { border-color: var(--evergreen); }
.match-option p { margin: .2rem 0 0; font-size: .82rem; }

.comma-workspace-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.comma-workspace-header .eyebrow { margin: 1.2rem 0 .35rem; }
.comma-workspace-header h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.comma-progress { display: flex; align-items: center; gap: .7rem; }
.comma-workspace-actions { flex: 0 1 30rem; min-width: 0; }
.comma-workspace-actions .comma-progress { flex-wrap: wrap; justify-content: flex-end; gap: .65rem; font-size: .85rem; color: var(--muted); }
.passage-scope-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .65rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.passage-scope-form label { min-width: 0; gap: .45rem; font-size: .75rem; }
.passage-scope-form .custom-select-trigger, .passage-scope-form > .btn { min-height: 46px; height: 46px; font-size: .85rem; }
.passage-scope-form > .btn { white-space: nowrap; padding-inline: .9rem; }
.passage-scope-form .form-message { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
.passage-scope-form .form-message:empty { display: none; }
.comma-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, 520px); gap: 1.2rem; align-items: stretch; }
.comma-scripture { position: relative; min-width: 0; padding: clamp(1rem, 3vw, 2.4rem); }
.highlight-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.highlight-legend span { padding: .25rem .5rem; border-radius: 99px; color: var(--ccc-charcoal-dark); font-size: .7rem; font-weight: 700; }
.legend-theme { background: var(--highlight-theme); }.legend-repeating { background: var(--highlight-repeating); }.legend-truth { background: var(--highlight-truth); }.legend-striking { background: var(--highlight-striking); }.legend-other { background: var(--highlight-other); }
.comma-passage-text { max-width: 780px; margin: 0 auto; }
.comma-book-heading { margin: 2rem 0 .35rem; font-family: var(--font-display); font-size: 2rem; }
.comma-book-heading:first-child { margin-top: 0; }
.comma-chapter-heading { margin: .7rem 0; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.comma-verse { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .55rem; margin: 0; padding: .48rem .2rem; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.85; }
.comma-verse-number { align-self: start; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-family: var(--font-body); font-size: .7rem; font-weight: 700; }
.observation-mark { padding: .03em .06em; border-radius: 3px; color: inherit; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .18s ease, box-shadow .18s ease; }
.observation-theme { --observation-highlight: var(--highlight-theme); background: color-mix(in srgb, var(--observation-highlight) 24%, transparent); }
.observation-repeating_word_or_idea { --observation-highlight: var(--highlight-repeating); background: color-mix(in srgb, var(--observation-highlight) 24%, transparent); }
.observation-truth_about_god { --observation-highlight: var(--highlight-truth); background: color-mix(in srgb, var(--observation-highlight) 24%, transparent); }
.observation-something_striking { --observation-highlight: var(--highlight-striking); background: color-mix(in srgb, var(--observation-highlight) 24%, transparent); }
.observation-other { --observation-highlight: var(--highlight-other); background: color-mix(in srgb, var(--observation-highlight) 24%, transparent); }
.observation-mark.is-focused { position: relative; z-index: 1; background: color-mix(in srgb, var(--observation-highlight) 38%, transparent); box-shadow: inset 0 -.06em color-mix(in srgb, var(--observation-highlight) 45%, transparent); }
.observation-mark.is-muted { background: color-mix(in srgb, var(--observation-highlight) 9%, transparent); box-shadow: none; }
.observation-mark.is-add-muted { background: color-mix(in srgb, var(--observation-highlight) 16%, transparent); box-shadow: none; }
.draft-observation-theme { --draft-observation-highlight: var(--highlight-theme); }
.draft-observation-repeating_word_or_idea { --draft-observation-highlight: var(--highlight-repeating); }
.draft-observation-truth_about_god { --draft-observation-highlight: var(--highlight-truth); }
.draft-observation-something_striking { --draft-observation-highlight: var(--highlight-striking); }
.draft-observation-other { --draft-observation-highlight: var(--highlight-other); }
.observation-reference-draft, .observation-mark.is-draft-reference { background-color: color-mix(in srgb, var(--draft-observation-highlight, var(--evergreen)) 24%, transparent); background-image: none; box-shadow: inset 0 -.06em color-mix(in srgb, var(--draft-observation-highlight, var(--evergreen)) 38%, transparent); }
.observation-reference-draft { cursor: text; }
.observation-mark.is-overlap { border-bottom: 1px solid color-mix(in srgb, var(--observation-highlight) 45%, transparent); }
.observation-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.comma-panel { position: relative; min-width: 0; overflow: visible; max-height: none; }
.comma-tabs { position: sticky; top: var(--top-height); z-index: 7; display: grid; overflow: hidden; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--parchment); }
.comma-tabs button { display: grid; gap: .1rem; justify-items: center; padding: .7rem .2rem; border: 0; border-right: 1px solid var(--border); color: var(--muted); background: transparent; cursor: pointer; }
.comma-tabs button:last-child { border-right: 0; }
.comma-tabs button strong { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }
.comma-tabs button span { font-size: .63rem; font-weight: 700; }
.comma-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px var(--evergreen); }
.comma-tabs button[aria-selected="true"] strong { color: var(--on-primary); background: var(--evergreen); }
.comma-panel-content { overflow: visible; max-height: none; padding: 1.1rem; }
.comma-panel-content.is-context-agent {
  display: flex;
  position: sticky;
  top: calc(var(--top-height) + 64px);
  height: var(--context-viewport-height, calc(100dvh - var(--top-height) - 76px));
  max-height: var(--context-viewport-height, calc(100dvh - var(--top-height) - 76px));
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.comma-panel-content.is-loading { opacity: .7; }
.comma-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.comma-panel-heading h2 { margin-bottom: 0; }
.visibility-toggle { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--parchment); }
.visibility-toggle button { padding: .34rem .58rem; border: 0; border-radius: 99px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.visibility-toggle button.is-active { color: var(--on-primary); background: var(--evergreen); }
.entry-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin-bottom: 1rem; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--parchment); }
.entry-mode-tabs button { min-width: 0; min-height: 42px; padding: .5rem .35rem; border: 0; border-radius: calc(var(--radius-sm) - 3px); color: var(--muted); background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.entry-mode-tabs button:hover:not(:disabled) { color: var(--evergreen-dark); background: var(--evergreen-soft); }
.entry-mode-tabs button.is-active { color: var(--on-primary); background: var(--evergreen); }
.entry-mode-tabs button:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 2px; }
.entry-mode-tabs button:disabled { cursor: not-allowed; opacity: .55; }
.entry-mode-intro { margin-bottom: .75rem; padding: .8rem 1rem; border-left: 3px solid var(--evergreen); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--evergreen-soft); }
.entry-mode-intro p { margin: .25rem 0 0; color: var(--muted); font-size: .8rem; }
.entry-mode-step { color: var(--evergreen-dark); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.context-waiting { display: grid; justify-items: start; padding: 1.2rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--parchment); }
.context-waiting h3 { margin: .8rem 0 .25rem; }
.context-waiting p { margin-bottom: 1rem; }
.comma-entry-form { display: grid; gap: .8rem; margin-bottom: 1.2rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--parchment); }
.entry-form-heading { display: flex; align-items: center; justify-content: space-between; }
.entry-form-heading h3 { margin: 0; text-transform: capitalize; }
.privacy-check,
.organization-form-grid .privacy-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper) 72%, var(--parchment));
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.privacy-check:hover { border-color: color-mix(in srgb, var(--evergreen) 60%, var(--border)); background: var(--paper); }
.privacy-check:has(input:checked) { border-color: color-mix(in srgb, var(--evergreen) 52%, var(--border)); background: color-mix(in srgb, var(--evergreen-soft) 52%, var(--paper)); }
.privacy-check:has(input:focus-visible) { border-color: var(--evergreen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--evergreen) 24%, transparent); }
.privacy-check:has(input:disabled) { cursor: not-allowed; opacity: .65; }
.privacy-check input {
  position: relative;
  flex: 0 0 auto;
  appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--ccc-gray-medium);
  border-radius: 99px;
  background: var(--gold-soft);
  cursor: inherit;
  transition: border-color .18s ease, background-color .18s ease;
}
.privacy-check input::after {
  position: absolute;
  top: .125rem;
  left: .125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(56, 58, 60, .28);
  content: "";
  transition: transform .18s ease;
}
.privacy-check input:checked { border-color: var(--evergreen); background: var(--evergreen); }
.privacy-check input:checked::after { transform: translateX(1.25rem); }
.privacy-check input:focus-visible { outline: 0; }
.entry-form-actions, .entry-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.entry-guidance { margin: 0; color: var(--muted); font-size: .88rem; }
.reference-chips { display: grid; gap: .4rem; }
.reference-chip-list, .entry-references { display: flex; flex-wrap: wrap; gap: .35rem; }
.reference-chip, .entry-references span { padding: .28rem .45rem; border-radius: var(--radius-sm); color: var(--muted); background: var(--paper); font-size: .7rem; }
.reference-chip { display: inline-flex; align-items: center; gap: .35rem; }
.reference-chip-remove { display: inline-grid; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--parchment); font: inherit; font-size: .9rem; line-height: 1; cursor: pointer; place-items: center; }
.reference-chip-remove:hover, .reference-chip-remove:focus-visible { color: var(--ink); background: var(--border); }
.reference-clear { justify-self: start; padding: .2rem .15rem; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: .72rem; text-decoration: underline; text-underline-offset: .15rem; cursor: pointer; }
.reference-clear:hover, .reference-clear:focus-visible { color: var(--ink); }
.comma-entry-list { display: grid; gap: .75rem; }
.entry-sort-carousel { display: inline-flex; flex: none; align-items: center; gap: .35rem; min-height: 34px; margin-left: auto; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--parchment); font: inherit; font-size: .68rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.entry-sort-carousel:hover { border-color: var(--evergreen); color: var(--ink); }
.entry-sort-carousel:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 2px; }
.entry-sort-carousel:disabled { cursor: wait; opacity: .65; }
.entry-sort-icon { color: var(--evergreen); font-size: .9rem; line-height: 1; }
.comma-entry-card { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--parchment); scroll-margin-top: calc(var(--top-height) + 1rem); }
.comma-entry-card:target { border-color: var(--evergreen); }
.comma-entry-card.is-observation-active { border-color: color-mix(in srgb, var(--evergreen) 58%, var(--border)); box-shadow: inset 3px 0 var(--evergreen); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .7rem; font-size: .72rem; }
.entry-meta time { margin-left: auto; }
.privacy-public, .privacy-private { padding: .18rem .4rem; border-radius: 99px; font-weight: 700; }
.privacy-public { color: var(--success); background: var(--success-soft); }.privacy-private { color: var(--muted); background: var(--gold-soft); }
.share-target-field { display: grid; gap: .45rem; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.share-target-field legend { padding: 0 .35rem; font-weight: 700; }
.share-target-field p { margin: .2rem 0 0; font-size: .72rem; }
.entry-type { display: inline-block; margin-bottom: .45rem; padding: .18rem .4rem; border-radius: 99px; color: var(--muted); background: var(--gold-soft); font-size: .68rem; font-weight: 700; }
.entry-type.observation-theme { color: var(--ink); background: color-mix(in srgb, var(--highlight-theme) 70%, transparent); }
.entry-type.observation-repeating_word_or_idea { color: var(--ink); background: color-mix(in srgb, var(--highlight-repeating) 70%, transparent); }
.entry-type.observation-truth_about_god { color: var(--ink); background: color-mix(in srgb, var(--highlight-truth) 70%, transparent); }
.entry-type.observation-something_striking { color: var(--ink); background: color-mix(in srgb, var(--highlight-striking) 70%, transparent); }
.entry-type.observation-other { color: var(--ink); background: color-mix(in srgb, var(--highlight-other) 70%, transparent); }
.observation-entry-summary { display: grid; gap: .4rem; width: 100%; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.observation-entry-summary:focus-visible { border-radius: var(--radius-sm); outline: 3px solid var(--evergreen); outline-offset: 4px; }
.observation-summary-heading { display: flex; align-items: center; gap: .5rem; }
.observation-summary-heading .entry-type { margin: 0; }
.observation-summary-cue { margin-left: auto; color: var(--evergreen-dark); font-size: .68rem; font-weight: 700; }
.observation-summary-title { font-size: 1.05rem; line-height: 1.3; }
.observation-summary-reference-count { color: var(--muted); font-size: .68rem; }
.observation-entry-details { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.observation-entry-details[hidden] { display: none; }
.observation-entry-details .entry-notes { margin-bottom: .75rem; }
.comma-entry-card h3 { margin-bottom: .5rem; }
.entry-notes { color: var(--muted); white-space: pre-wrap; }
.entry-social { position: relative; display: flex; align-items: center; justify-content: flex-end; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.entry-heart-button, .entry-heart-count, .entry-heart-activity-toggle { display: inline-flex; min-height: 34px; align-items: center; gap: .35rem; padding: .38rem .62rem; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--paper); font: inherit; font-size: .72rem; font-weight: 700; }
.entry-heart-button, .entry-heart-activity-toggle { cursor: pointer; }
.entry-heart-button:hover, .entry-heart-button:focus-visible, .entry-heart-button.is-hearted { border-color: #c94862; color: #b82f4d; background: color-mix(in srgb, #f6b5c2 30%, var(--paper)); }
.entry-heart-button:focus-visible, .entry-heart-activity-toggle:focus-visible { outline: 3px solid color-mix(in srgb, #c94862 45%, transparent); outline-offset: 2px; }
.entry-heart-activity-toggle:hover { border-color: var(--evergreen); }
.entry-heart-button:disabled, .entry-heart-activity-toggle:disabled { cursor: wait; opacity: .65; }
.entry-heart-icon { font-size: 1rem; line-height: 1; }
.entry-heart-modal-open { overflow: hidden; }
.entry-heart-modal-backdrop { position: fixed; inset: 0; z-index: 260; display: grid; padding: 1rem; place-items: center; background: rgba(35, 39, 37, .58); backdrop-filter: blur(3px); }
.entry-heart-modal { width: min(410px, 100%); max-height: min(560px, calc(100dvh - 2rem)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: var(--radius-md); color: var(--ink); background: var(--paper); box-shadow: 0 24px 70px rgba(23, 27, 25, .32); }
.entry-heart-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.15rem; border-bottom: 1px solid var(--border); }
.entry-heart-modal-heading { display: flex; align-items: center; gap: .8rem; }
.entry-heart-modal-heading h2 { margin: 0 0 .15rem; font-size: 1.1rem; }
.entry-heart-modal-heading p { margin: 0; font-size: .72rem; }
.entry-heart-modal-emblem { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 50%; color: #b82f4d; background: color-mix(in srgb, #f6b5c2 36%, var(--paper)); font-size: 1.05rem; }
.entry-heart-modal-close { display: grid; width: 32px; height: 32px; flex: none; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--muted); background: var(--parchment); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.entry-heart-modal-close:hover, .entry-heart-modal-close:focus-visible { border-color: var(--evergreen); color: var(--ink); outline: 3px solid color-mix(in srgb, var(--evergreen) 30%, transparent); }
.entry-heart-modal-body { max-height: min(420px, calc(100dvh - 9rem)); overflow-y: auto; padding: .45rem 1.15rem 1rem; }
.entry-heart-modal-status { margin: .8rem 0 0; text-align: center; font-size: .75rem; }
.entry-heart-activity-list { display: grid; margin: 0; padding: 0; list-style: none; }
.entry-heart-activity-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .75rem 0; }
.entry-heart-activity-list li + li { border-top: 1px solid var(--border); }
.entry-heart-member-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--evergreen-dark); background: var(--evergreen-soft); font-size: .78rem; font-weight: 800; }
.entry-heart-member-copy { display: grid; gap: .16rem; min-width: 0; }
.entry-heart-member-copy strong { font-size: .82rem; }
.entry-heart-member-copy time { color: var(--muted); font-size: .68rem; }
.entry-controls { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.entry-controls .btn { min-height: 34px; padding: .4rem .6rem; font-size: .72rem; }
.empty-entries { display: grid; justify-items: center; gap: .7rem; padding: 1.5rem .5rem; text-align: center; }
.empty-entries p { margin: 0; }

.compact-header { margin-bottom: 1.5rem; }
.compact-header h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
@media (max-width: 980px) {
  .relationship-directory-item { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .75rem; }
  .relationship-directory-item .relationship-directory-address { grid-column: 1 / -1; }
  .relationship-directory-item .organization-card-actions { grid-column: 1 / -1; justify-self: start; }
  .hero, .auth-layout { grid-template-columns: 1fr; min-height: auto; }
  .hero { padding: 3rem 0; }
  .comma-card { transform: none; }
  .auth-intro { text-align: center; }
  .auth-intro > p:last-child { margin-inline: auto; }
  .feature-grid, .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-primary { grid-column: span 2; grid-row: auto; }
  .reader-layout, .reader-layout.has-context { grid-template-columns: 1fr; }
  .context-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 45; height: var(--context-viewport-height, 90dvh); max-height: var(--context-viewport-height, 90dvh); padding: 0.85rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(105%); transition: transform .2s ease; }
  .context-panel.is-open { transform: translateY(0); }
  .comma-range-form { grid-template-columns: repeat(3, 1fr); }
  .comma-range-form .btn { grid-column: span 3; }
  .comma-library-heading { align-items: stretch; flex-direction: column; }
  .comma-filters { grid-template-columns: 1fr 1fr; }
  .comma-workspace { grid-template-columns: 1fr; }
  .comma-panel { position: relative; top: auto; max-height: none; }
  .comma-panel-content { max-height: none; }
  .comma-panel-content.is-context-agent { position: relative; top: auto; height: auto; max-height: none; }
}

@media (max-width: 760px) {
  :root { --top-height: 64px; }
  .top-nav-inner { padding: 0 1rem; }
  .nav-toggle, .side-nav-close { display: grid; }
  .side-nav-collapse { display: none; }
  .top-nav-leading { margin-right: auto; }
  .side-nav { top: var(--top-height); z-index: 21; background: var(--paper); box-shadow: 12px 0 32px rgba(39, 42, 41, .18); transform: translateX(-102%); transition: transform .2s ease; }
  .side-nav.is-open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .content-nav-toolbar { top: var(--top-height); right: 0; left: 0; display: flex; height: 52px; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--paper) 82%, var(--parchment)); }
  body.impersonating .content-nav-toolbar { top: calc(var(--top-height) + 48px); }
  body.nav-open .content-nav-toolbar { visibility: hidden; pointer-events: none; }
  .app-main, .authenticated .app-main { width: min(100% - 2rem, 680px); margin: 0 auto; padding: 4.75rem 0 4rem; }
  .authenticated .footer { margin-left: 0; }
  .authenticated.comma-shell .app-main { width: min(100% - 2rem, 760px); margin: 0 auto; }
  .footer { flex-direction: column; padding: 1.5rem 1rem; text-align: center; }
  .feature-grid, .dashboard-grid, .capability-panel { grid-template-columns: 1fr; }
  .dashboard-primary { grid-column: auto; }
  .capability-panel { gap: 1rem; }
  .reader-toolbar { align-items: stretch; flex-direction: column; }
  .comma-range-form {
    grid-template-areas:
      "start-book end-book"
      "start-chapter end-chapter"
      "start-verse end-verse"
      "action action";
    grid-template-columns: 1fr 1fr;
  }
  .comma-range-start-book { grid-area: start-book; }
  .comma-range-start-chapter { grid-area: start-chapter; }
  .comma-range-start-verse { grid-area: start-verse; }
  .comma-range-end-book { grid-area: end-book; }
  .comma-range-end-chapter { grid-area: end-chapter; }
  .comma-range-end-verse { grid-area: end-verse; }
  .comma-range-form .comma-range-action { grid-area: action; }
  .comma-column-my-study, .comma-column-my-remarks, .comma-column-users, .comma-column-created { display: none; }
  .comma-workspace-header { align-items: stretch; flex-direction: column; }
  .comma-progress { justify-content: space-between; }
  .comma-workspace-actions { flex-basis: auto; width: 100%; }
  .comma-workspace-actions .comma-progress { justify-content: flex-start; }
  .passage-scope-form { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .passage-scope-form label { min-width: 0; }
}

@media (max-width: 480px) {
  .brand-mark { width: 34px; height: 34px; }
  .brand { font-size: 1rem; }
  .relationship-directory-shell .organization-search .form-row { align-items: stretch; flex-direction: column; gap: .6rem; }
  .relationship-directory-shell .organization-search .btn { width: 100%; }
  .reader-selectors { display: grid; grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .password-requirements { grid-template-columns: 1fr; }
  .form-row-between { align-items: stretch; flex-direction: column; }
  .form-row-between .btn { width: 100%; }
  .recovery-codes { grid-template-columns: 1fr; }
  .comma-reference-form .form-row { flex-direction: column; }
  .comma-filters { grid-template-columns: 1fr; }
  .comma-match-dialog {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100vw - 1.5rem);
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    margin: 0;
    padding: 1.2rem;
    transform: translate(-50%, -50%);
  }
  .comma-match-dialog h2 { padding-right: 2.5rem; overflow-wrap: anywhere; }
  .match-option { align-items: stretch; flex-direction: column; }
  .match-option, .match-option > div { min-width: 0; }
  .match-option > div { overflow-wrap: anywhere; }
  .match-option .btn { width: 100%; }
  .comma-tabs button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .comma-panel-content { padding: .8rem; }
  .comma-panel-heading { align-items: stretch; flex-direction: column; }
  .comma-panel-heading.has-entry-sort { align-items: start; flex-direction: row; }
  .comma-panel-heading.has-entry-sort > div { min-width: 0; }
  .visibility-toggle { align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 980px) {
  .dashboard-welcome { align-items: start; }
  .dashboard-feature-grid, .dashboard-detail-grid { grid-template-columns: 1fr; }
  .dashboard-feature { min-height: 142px; }
  .dashboard-panel { min-height: 0; }
  .dashboard-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-shortcuts-label { grid-column: 1 / -1; padding: .4rem .65rem .55rem; }
  .dashboard-shortcuts > a:first-of-type { border-left: 0; }
}

@media (max-width: 760px) {
  .dashboard-page .app-main { padding-top: 4.2rem; padding-bottom: 3rem; }
  .dashboard-hub { gap: .7rem; }
  .dashboard-welcome { display: block; }
  .dashboard-welcome > p { margin-top: .35rem; text-align: left; }
  .dashboard-welcome h1 { font-size: 2.25rem; }
  .dashboard-feature { grid-template-columns: 42px minmax(0, 1fr) auto; gap: .75rem; min-height: 138px; padding: 1rem; }
  .dashboard-feature-orb { width: 42px; height: 42px; border-radius: 13px; }
  .dashboard-feature h2 { white-space: normal; }
  .dashboard-panel { padding: 1rem; }
  .dashboard-study-list { margin: .65rem -1rem -1rem; }
  .dashboard-study-row, .dashboard-empty-action { padding-inline: 1rem; }
  .dashboard-shortcuts { grid-template-columns: 1fr 1fr; }
  .dashboard-shortcuts-label { grid-column: 1 / -1; }
  .dashboard-shortcuts > a { border-left: 0; }
  .dashboard-shortcuts > a:nth-of-type(even) { border-left: 1px solid var(--border); }
}

@media (max-width: 480px) {
  .dashboard-feature { grid-template-columns: 38px minmax(0, 1fr); }
  .dashboard-feature-orb { width: 38px; height: 38px; }
  .dashboard-card-arrow { display: none; }
  .dashboard-feature-topline { align-items: start; }
  .dashboard-shortcuts { grid-template-columns: 1fr; }
  .dashboard-shortcuts > a:nth-of-type(even) { border-left: 0; }
}

@media (max-width: 760px) {
  .organization-switcher-label { width: min(42vw, 180px); }
  .organization-find { display: none; }
  .organization-layout, .organization-form-grid { grid-template-columns: 1fr; }
  .organization-admin-actions .btn { width: 100%; }
  .member-directory-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .member-directory-header { align-items: stretch; flex-direction: column; padding: 1rem; }
  .member-directory-header-actions { justify-content: space-between; }
  .member-directory-dialog > p { padding: .8rem 1rem; }
  .management-row { grid-template-columns: 1fr; }
  .management-row > span:last-child { flex-wrap: wrap; }
}

/* Profile workspace */
.btn-danger { border-color: var(--danger); color: #fff; background: var(--danger); }
.btn-danger:hover { color: #fff; background: color-mix(in srgb, var(--danger) 82%, black); }
.form-message.is-error { color: var(--danger); }
.profile-page { display: grid; gap: 1.25rem; }
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--evergreen-soft) 74%, var(--paper)), var(--paper) 58%);
}
.profile-identity { display: flex; min-width: 0; align-items: center; gap: 1.1rem; }
.profile-initials {
  display: grid; width: 74px; height: 74px; flex: none; place-items: center;
  border: 1px solid color-mix(in srgb, var(--evergreen) 52%, var(--border)); border-radius: 22px;
  color: var(--on-primary); background: var(--evergreen); box-shadow: 0 10px 24px color-mix(in srgb, var(--evergreen) 20%, transparent);
  font-family: var(--font-display); font-size: 1.7rem;
}
.profile-identity h1 { max-width: 820px; margin-bottom: .25rem; overflow-wrap: anywhere; font-size: clamp(2rem, 4vw, 3.8rem); }
.profile-email { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.profile-statuses { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.profile-resume { max-width: 320px; text-align: center; }
.profile-stat-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.profile-stat-grid a { display: grid; gap: .1rem; padding: 1rem 1.2rem 0; color: var(--muted); text-decoration: none; }
.profile-stat-grid a + a { border-left: 1px solid var(--border); }
.profile-stat-grid strong { color: var(--ink); font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.profile-stat-grid span { font-size: .78rem; font-weight: 700; }
.profile-impersonation-note { width: 100%; max-width: none; margin: 0; }
.profile-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.profile-section-rail {
  position: sticky; top: calc(var(--top-height) + 1rem); display: grid; gap: .2rem; padding: .55rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: var(--shadow);
}
.profile-section-rail a { padding: .62rem .7rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.profile-section-rail a:hover, .profile-section-rail a:focus-visible { color: var(--evergreen-dark); background: var(--evergreen-soft); outline: 0; }
.profile-sections { display: grid; min-width: 0; gap: 3.5rem; }
.profile-section { min-width: 0; scroll-margin-top: calc(var(--top-height) + 1.5rem); }
.profile-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.profile-section-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 400; }
.profile-section-heading .eyebrow { margin-bottom: .3rem; }
.profile-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-form, .profile-preference-card, .profile-future-card { padding: 1.25rem; }
.profile-form { display: grid; align-content: start; gap: 1rem; }
.profile-form h3, .profile-security-card h3, .profile-preference-card h3, .profile-future-card h3, .profile-danger-zone h3 { margin: 0; font-size: 1.05rem; }
.profile-form .card-heading p, .profile-security-card p, .profile-preference-card .card-heading p, .profile-future-card .card-heading p, .profile-danger-zone p { margin: .25rem 0 0; color: var(--muted); font-size: .84rem; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-form-actions { display: flex; align-items: center; gap: .8rem; }
.profile-form-actions .form-message { margin: 0; }
.profile-account-stack { display: grid; gap: 1rem; }
.profile-security-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; }
.profile-security-card > div { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.profile-security-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-soft); font-weight: 900; }
.profile-comma-filters { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(150px, .7fr) minmax(180px, 1fr); gap: .7rem; margin-bottom: .8rem; }
.profile-comma-table-wrap { overflow: hidden; }
.profile-comma-table { width: 100%; border-collapse: collapse; }
.profile-comma-table th { padding: .75rem 1rem; color: var(--muted); background: color-mix(in srgb, var(--parchment) 74%, var(--paper)); font-size: .7rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.profile-comma-table td { padding: .9rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.profile-comma-table td:first-child strong, .profile-comma-table td small { display: block; }
.profile-comma-table td small { margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.profile-comma-table td:last-child { text-align: right; }
.profile-comma-table .btn { min-height: 38px; padding: .55rem .75rem; font-size: .78rem; }
.profile-scope-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.profile-comma-empty { padding: 2.5rem 1rem; text-align: center; }
.profile-comma-empty h3 { margin-bottom: .35rem; }
.profile-comma-empty p { color: var(--muted); }
.profile-comma-message { margin: 0; padding: .7rem 1rem 0; }
.profile-comma-message:empty { display: none; }
.profile-comma-more { width: calc(100% - 2rem); margin: 1rem; }
.profile-space-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.profile-space-groups > div > h3 { display: flex; justify-content: space-between; margin-bottom: .7rem; font-size: .9rem; }
.profile-space-groups > div > h3 span { color: var(--muted); }
.profile-space-list { display: grid; gap: .65rem; }
.profile-space-card { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem; color: var(--ink); text-decoration: none; box-shadow: none; transition: border-color .15s ease, transform .15s ease; }
.profile-space-card:hover { color: var(--ink); border-color: var(--evergreen); transform: translateY(-1px); }
.profile-space-card > div { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.profile-space-card strong, .profile-space-card small { display: block; }
.profile-space-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-space-card small { margin-top: .08rem; color: var(--muted); font-size: .72rem; }
.profile-space-mark { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 10px; color: var(--evergreen-dark); background: var(--evergreen-soft); font-weight: 900; }
.profile-space-mark-community { color: var(--gold); background: var(--gold-soft); }
.profile-space-empty { padding: 1rem; color: var(--muted); box-shadow: none; }
.profile-notification-columns { align-items: start; }
.profile-preference-card { display: grid; gap: .25rem; }
.profile-switch-row { display: flex; grid-template-columns: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.profile-switch-row strong, .profile-switch-row small { display: block; }
.profile-switch-row small { margin-top: .12rem; color: var(--muted); font-size: .75rem; }
.profile-switch { position: relative; display: inline-flex; flex: none; }
.profile-switch input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; opacity: 0; }
.profile-switch > span { position: relative; display: block; width: 46px; height: 26px; border: 1px solid var(--border); border-radius: 99px; background: var(--gold-soft); transition: .15s ease; }
.profile-switch > span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.22); content: ""; transition: .15s ease; }
.profile-switch input:checked + span { border-color: var(--evergreen); background: var(--evergreen); }
.profile-switch input:checked + span::after { left: 23px; background: var(--on-primary); }
.profile-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--evergreen) 42%, transparent); outline-offset: 2px; }
.profile-switch input:disabled + span { cursor: not-allowed; opacity: .55; }
.profile-preference-note { margin: .8rem 0 0; color: var(--muted); font-size: .76rem; }
.profile-future-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.profile-future-card { display: grid; align-content: start; gap: .9rem; background: color-mix(in srgb, var(--paper) 82%, var(--parchment)); }
.profile-future-card select:disabled { opacity: .7; cursor: not-allowed; }
.profile-danger-zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.25rem; border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); box-shadow: none; }
.profile-blocker-copy, .profile-blockers { grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); font-size: .82rem; }
.profile-blockers ul { margin: .45rem 0 0; padding-left: 1.2rem; }
.profile-deactivate-dialog { width: min(520px, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.profile-deactivate-dialog::backdrop { background: rgba(20, 22, 21, .68); backdrop-filter: blur(3px); }
.profile-deactivate-dialog > p { color: var(--muted); }
.profile-deactivate-dialog form[data-deactivate-form] { display: grid; gap: 1rem; }
.profile-dialog-close { position: absolute; top: 1rem; right: 1rem; }
.profile-dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; padding-top: .5rem; }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }

@media (max-width: 980px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-section-rail { top: var(--top-height); z-index: 12; display: flex; overflow-x: auto; border-radius: 0; box-shadow: 0 5px 18px color-mix(in srgb, var(--ink) 8%, transparent); scrollbar-width: none; }
  .profile-section-rail::-webkit-scrollbar { display: none; }
  .profile-section-rail a { flex: none; }
  .profile-section { scroll-margin-top: calc(var(--top-height) + 4.5rem); }
}

@media (max-width: 840px) {
  .profile-two-column, .profile-space-groups, .profile-future-grid { grid-template-columns: 1fr; }
  .profile-comma-filters { grid-template-columns: 1fr; }
  .profile-comma-table thead { display: none; }
  .profile-comma-table, .profile-comma-table tbody, .profile-comma-table tr, .profile-comma-table td { display: block; width: 100%; }
  .profile-comma-table tr { position: relative; padding: 1rem; border-top: 1px solid var(--border); }
  .profile-comma-table tr:first-child { border-top: 0; }
  .profile-comma-table td { padding: .3rem 7rem .3rem 0; border: 0; }
  .profile-comma-table td:last-child { position: absolute; top: 1rem; right: 1rem; width: auto; padding: 0; }
}

@media (max-width: 620px) {
  .profile-hero { grid-template-columns: 1fr; }
  .profile-resume { width: 100%; max-width: none; }
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-stat-grid a { padding: .9rem .75rem; border-top: 1px solid var(--border); }
  .profile-stat-grid a:nth-child(3) { border-left: 0; }
  .profile-stat-grid { border-top: 0; }
  .profile-initials { width: 58px; height: 58px; border-radius: 17px; }
  .profile-section-heading { align-items: stretch; flex-direction: column; }
  .profile-section-heading > .btn { width: 100%; }
  .profile-field-grid { grid-template-columns: 1fr; }
  .profile-field-wide { grid-column: auto; }
  .profile-security-card { align-items: stretch; flex-direction: column; }
  .profile-danger-zone { grid-template-columns: 1fr; }
  .profile-danger-zone .btn { width: 100%; }
  .profile-dialog-actions { flex-direction: column-reverse; }
  .profile-dialog-actions .btn { width: 100%; }
}

/* Error suite */
.error-shell .app-main {
  display: grid;
  min-height: calc(100dvh - var(--top-height) - 89px);
  align-items: center;
}
.error-page {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 7vw, 6.5rem);
  align-items: center;
  width: min(100%, 1040px);
  margin: 0 auto;
}
.error-code-panel {
  position: relative;
  display: grid;
  min-height: clamp(320px, 45vw, 440px);
  align-content: center;
  justify-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--evergreen-soft) 86%, var(--paper)), var(--paper) 68%);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.error-code-panel::before,
.error-code-panel::after {
  position: absolute;
  z-index: -1;
  content: "";
}
.error-code-panel::before {
  inset: 1rem;
  border: 1px solid color-mix(in srgb, var(--evergreen) 36%, var(--border));
  border-radius: calc(var(--radius-lg) - 7px);
}
.error-code-panel::after {
  top: -24%;
  right: -36%;
  width: 90%;
  aspect-ratio: 1;
  border: clamp(34px, 7vw, 70px) solid color-mix(in srgb, var(--evergreen) 12%, transparent);
  border-radius: 50%;
}
.error-code-panel strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 12vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .85;
}
.error-code-kicker,
.error-code-name {
  color: var(--gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.error-code-kicker { margin-bottom: 1.15rem; }
.error-code-name {
  max-width: 80%;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.error-copy { max-width: 620px; }
.error-copy h1 {
  max-width: 680px;
  margin-bottom: 1.25rem;
  font-size: clamp(3rem, 6vw, 5.5rem);
}
.error-message {
  max-width: 590px;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.16rem);
}
.error-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 2.25rem; }
.error-perspective {
  position: relative;
  max-width: 590px;
  margin: 0;
  padding: 1.15rem 1.25rem 1.1rem 3.4rem;
  border-left: 3px solid var(--evergreen);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--evergreen-soft) 48%, var(--paper));
}
.error-quote-mark {
  position: absolute;
  top: .55rem;
  left: 1rem;
  color: var(--evergreen-dark);
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
}
.error-perspective blockquote { margin: 0 0 .35rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.error-perspective figcaption { color: var(--muted); font-size: .75rem; }
.error-closing-quote {
  color: var(--evergreen-dark);
  font-family: var(--font-display);
  font-size: 1.35em;
  line-height: 0;
}

.error-preview-header { margin-bottom: 2rem; }
.error-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.error-preview-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.35rem;
  box-shadow: none;
}
.error-preview-card-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.error-preview-card-heading .eyebrow { margin: 0; }
.error-preview-code {
  display: inline-grid;
  min-width: 3.4rem;
  min-height: 2.2rem;
  place-items: center;
  border-radius: 99px;
  color: var(--on-primary);
  background: var(--evergreen);
  font-weight: 800;
}
.error-preview-card h2 { margin-bottom: .8rem; }
.error-preview-card blockquote {
  margin: 0 0 .45rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
}
.error-preview-card > p { margin-bottom: 1.25rem; color: var(--muted); font-size: .78rem; }
.error-preview-card .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 820px) {
  .error-shell .app-main { min-height: auto; }
  .error-page { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .error-code-panel { min-height: 230px; }
  .error-code-panel strong { font-size: clamp(5rem, 22vw, 8rem); }
  .error-copy { max-width: 680px; }
  .error-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .error-code-panel { min-height: 210px; }
  .error-copy h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .error-actions .btn { width: 100%; }
  .error-perspective { padding-left: 3rem; }
  .error-preview-grid { grid-template-columns: 1fr; }
  .error-preview-card .btn { width: 100%; }
}
/* Language selection and bidirectional reading use the existing theme tokens. */
.language-dialog { width: min(94vw, 38rem); max-height: 90vh; overflow: auto; }
.language-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.language-dialog > form[method="dialog"] { display: flex; justify-content: flex-end; direction: ltr; }
.language-dialog form[data-language-form] { display: grid; gap: 1rem; }
.language-dialog select, .language-dialog input { width: 100%; }
.language-trigger { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-source { margin: 0 0 1rem; }
.fallback-badge, .translation-status { display: block; font-size: .875rem; color: var(--ccc-charcoal); }
.translation-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-block: .75rem; }
.comma-verse, .comma-verse .observation-reference-draft { cursor: pointer; }
[dir="rtl"] .side-nav { right: 0; left: auto; }
html[dir="rtl"] .authenticated .app-main { margin-left: 0; margin-right: calc(var(--side-width) + max(2rem, (100vw - var(--side-width) - 1380px) / 2)); }
html[dir="rtl"] .authenticated .footer { margin-left: 0; margin-right: var(--side-width); }
html[dir="rtl"][data-navigation-collapsed="true"] .side-nav { transform: translateX(102%); }
html[dir="rtl"][data-navigation-collapsed="true"] .authenticated .app-main { margin: 0 auto; }
html[dir="rtl"][data-navigation-collapsed="true"] .authenticated .footer { margin-right: 0; }
[dir="rtl"] .context-panel { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea { text-align: start; }
.verse-text[dir="rtl"], .comma-verse[dir="rtl"] { text-align: right; }
@media (max-width: 760px) { .language-trigger { max-width: 8rem; } }
@media (max-width: 760px) {
  html[dir="rtl"] .authenticated .app-main { margin: 0 auto; }
  html[dir="rtl"] .authenticated .footer { margin-right: 0; }
  html[dir="rtl"] .side-nav { transform: translateX(102%); }
  html[dir="rtl"] .side-nav.is-open { transform: translateX(0); }
}

/* Daily Scrolls */
.daily-scrolls-page .app-main { max-width: 1180px; }
.scrolls-hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; padding: clamp(1.25rem, 3vw, 2.5rem) 0 1.15rem; border-bottom: 1px solid var(--border); }
.scrolls-hero-copy { max-width: 46rem; }
.scrolls-hero h1 { margin: .15rem 0 .5rem; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .9; }
.scrolls-hero-copy > p:last-child { max-width: 39rem; color: var(--muted); font-size: 1.05rem; }
.scrolls-day-score { display: grid; grid-template-columns: auto auto; align-items: baseline; min-width: 12rem; text-align: end; }
.scrolls-score-number { font-family: var(--font-display); font-size: 3.8rem; line-height: 1; }
.scrolls-day-score small { grid-column: 1 / -1; color: var(--muted); }
.scrolls-seal-meter { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(5, 2.125rem); justify-content: end; gap: .3rem; margin-top: .65rem; direction: ltr; }
.scrolls-seal-meter span { display: block; width: 2.125rem; aspect-ratio: 1; color: var(--muted); transition: color .22s ease, transform .22s ease; }
.scrolls-seal-meter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scrolls-daily-seal-badge { fill: color-mix(in srgb, var(--border) 24%, var(--paper)); stroke: var(--border); stroke-width: 1; }
.scrolls-daily-seal-ring { fill: var(--paper); stroke: color-mix(in srgb, var(--muted) 46%, var(--border)); stroke-width: 1.15; }
.scrolls-daily-seal-book { fill: none; stroke: var(--muted); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.scrolls-seal-meter span.is-earned { --daily-seal-color: #dc9f3d; --daily-seal-ring: #f6ce78; animation: scrolls-seal-pop .42s cubic-bezier(.2, .85, .35, 1.35); }
.scrolls-seal-meter span.is-earned .scrolls-daily-seal-badge { fill: var(--daily-seal-color); stroke: color-mix(in srgb, var(--daily-seal-color) 72%, #2d2418); }
.scrolls-seal-meter span.is-earned .scrolls-daily-seal-ring { fill: color-mix(in srgb, var(--daily-seal-color) 88%, var(--paper)); stroke: var(--daily-seal-ring); }
.scrolls-seal-meter span.is-earned .scrolls-daily-seal-book { stroke: color-mix(in srgb, var(--daily-seal-color) 16%, #20251f); }
.scrolls-seal-meter span.is-sage { --daily-seal-color: #5f7957; --daily-seal-ring: #afc7a7; }
.scrolls-seal-meter span.is-blue { --daily-seal-color: #426e9e; --daily-seal-ring: #a9c6e5; }
.scrolls-seal-meter span.is-violet { --daily-seal-color: #75529a; --daily-seal-ring: #c9b4df; }
.scrolls-seal-meter span.is-lime { --daily-seal-color: #78ad00; --daily-seal-ring: #c9e58a; }
.scrolls-seal-meter span.is-rose { --daily-seal-color: #b9436b; --daily-seal-ring: #eab2c5; }
.scrolls-date-nav { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.scrolls-date-nav select { min-width: 12rem; text-align: center; }
.scrolls-future-notice { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid color-mix(in srgb, #c97812 42%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, #c97812 9%, var(--paper)); }
.scrolls-future-notice[hidden] { display: none; }
.scrolls-future-notice span { flex: 0 0 auto; padding: .25rem .5rem; border-radius: 999px; color: #754306; background: color-mix(in srgb, #c97812 20%, var(--paper)); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.scrolls-future-notice p { margin: 0; color: var(--muted); font-size: .86rem; }
.scrolls-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.scrolls-board.is-loading { position: relative; min-height: 19rem; }
.scrolls-board.is-loading > * { visibility: hidden; }
.scrolls-board.is-loading::after { position: absolute; inset: 50% auto auto 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; content: ""; border: 3px solid var(--border); border-top-color: #c97812; border-radius: 50%; animation: spin .8s linear infinite; }
.scrolls-board.is-unavailable { display: block; }
.scrolls-empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem; min-height: 12rem; margin: 1rem 0 0; padding: clamp(1.5rem, 3vw, 2.25rem); text-align: start; border-inline-start: 4px solid #c97812; }
.scrolls-empty-mark { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 2px solid #c97812; border-radius: 50%; color: #c97812; background: color-mix(in srgb, #c97812 10%, var(--paper)); font-size: 1rem; }
.scrolls-empty-copy h2 { margin: .15rem 0 .35rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.scrolls-empty-copy > p:not(.eyebrow) { max-width: 42rem; margin: 0; color: var(--muted); }
.scrolls-empty-copy .scrolls-next-opening { margin-top: .85rem; color: var(--ink); font-weight: 700; }
.scrolls-next-opening time { color: #a15f0c; }
.scrolls-category { --scroll-accent: #c97812; display: flex; min-height: 17rem; flex-direction: column; padding: 1.5rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.scrolls-category:hover { border-color: color-mix(in srgb, var(--scroll-accent) 50%, var(--border)); box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 12%, transparent); transform: translateY(-2px); }
.scrolls-category-sage { --scroll-accent: #5f7957; }
.scrolls-category-blue { --scroll-accent: #426e9e; }
.scrolls-category-violet { --scroll-accent: #75529a; }
.scrolls-category-rule { width: 4.5rem; height: 3px; margin: -.15rem 0 1.35rem; background: var(--scroll-accent); }
.scrolls-category-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.scrolls-category h2 { margin: .15rem 0 .75rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.scrolls-category > p { max-width: 34rem; color: var(--muted); }
.scrolls-hearts { display: flex; flex: 0 0 auto; gap: .3rem; color: #b9423c; white-space: nowrap; }
.scrolls-hearts[hidden] { display: none; }
.scrolls-hearts span { display: inline-block; transition: color .2s ease, transform .2s ease; }
.scrolls-hearts span.is-lost { color: color-mix(in srgb, var(--muted) 58%, transparent); }
.scrolls-hearts span.is-lost.is-new { animation: scrolls-heart-loss .52s ease both; }
.scrolls-category-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem; }
.scrolls-category-seals { color: var(--border); letter-spacing: .3rem; }
.scrolls-category-seals .is-earned { color: var(--scroll-accent); }
.scrolls-category.is-complete { border-color: color-mix(in srgb, var(--scroll-accent) 48%, var(--border)); }
.scrolls-category-mode { flex: 0 0 auto; padding: .28rem .5rem; border-radius: 999px; color: var(--muted); background: var(--parchment); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.scrolls-category-mode[hidden] { display: none; }
.scrolls-completion, .scrolls-leaderboard { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.scrolls-leaderboard { display: block; }
.scrolls-completion[hidden], .scrolls-leaderboard[hidden] { display: none; }
.scrolls-leaderboard-header, .scrolls-leaderboard-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.scrolls-leaderboard-controls { --scrolls-leaderboard-label-limit: 40ch; }
.scrolls-leaderboard-controls select { width: auto; min-width: 0; max-width: min(100%, calc(var(--scrolls-leaderboard-label-limit) + 3.2rem)); }
.scrolls-standings { display: grid; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.scrolls-standings li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .75rem; padding: 1rem 0 0; border-top: 1px solid var(--border); }
.scrolls-rank { font-family: var(--font-display); font-size: 1.4rem; }
.scrolls-dialog, .scrolls-editor-dialog { width: min(94vw, 900px); max-height: 92vh; padding: clamp(1rem, 4vw, 2rem); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.scrolls-dialog[open], .scrolls-editor-dialog[open] { animation: scrolls-dialog-in .28s cubic-bezier(.2, .72, .25, 1) both; }
.scrolls-dialog { width: min(calc(100vw - 2rem), 46rem); max-height: min(82vh, 48rem); margin: auto; padding: 1rem; }
.scrolls-dialog .game-lab-frame { padding: .55rem; box-shadow: none; }
.scrolls-dialog .lab-game-shell { min-height: 0; padding: clamp(1rem, 2.5vw, 1.5rem); }
.scrolls-editor-dialog { width: min(96vw, 1500px); }
.scrolls-dialog::backdrop, .scrolls-editor-dialog::backdrop { background: rgb(10 14 12 / 65%); backdrop-filter: blur(4px); }
.scrolls-dialog-close { display: flex; justify-content: flex-end; margin: -1rem -1rem .25rem 0; direction: ltr; }
.scrolls-dialog-close button { width: 2.4rem; height: 2.4rem; border: 0; color: var(--muted); background: transparent; font-size: 1.8rem; cursor: pointer; }
.scrolls-puzzle-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.scrolls-puzzle-header h2 { margin: .15rem 0 .45rem; font-size: clamp(2rem, 6vw, 3.5rem); }
.scrolls-puzzle-stats { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); }
.scrolls-edition-label { display: block; margin-top: .5rem; color: var(--muted); }
.scrolls-game-stage { --scroll-accent: #c97812; }
.scrolls-game-category-people_scripture { --scroll-accent: #5f7957; }
.scrolls-game-category-memory_verses { --scroll-accent: #426e9e; }
.scrolls-game-category-wonders_wisdom { --scroll-accent: #75529a; }
.scrolls-play-area { display: grid; gap: 1rem; padding: 1.25rem 0; }
.scrolls-match-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.scrolls-choice-column, .scrolls-chip-list { display: grid; gap: .5rem; }
.scrolls-chip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scrolls-choice-label { padding-inline: .15rem; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scrolls-choice { position: relative; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); text-align: start; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease; }
.scrolls-choice:hover, .scrolls-choice:focus-visible { outline: 0; border-color: var(--scroll-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--scroll-accent) 18%, transparent); transform: translateY(-1px); }
.scrolls-choice.is-selected { border-color: var(--scroll-accent); background: color-mix(in srgb, var(--scroll-accent) 13%, var(--paper)); box-shadow: 0 8px 20px color-mix(in srgb, var(--scroll-accent) 18%, transparent); transform: translateY(-2px) scale(1.01); }
.scrolls-choice.is-solved, .scrolls-fill-row.is-solved { border-color: var(--success); color: var(--success); background: var(--success-soft); opacity: .72; }
.scrolls-choice:disabled { cursor: default; }
.scrolls-match-tray { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 4.25rem; padding: .65rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 72%, var(--paper)); }
.scrolls-match-tray > span { display: grid; min-height: 2.75rem; place-items: center; padding: .45rem .6rem; border: 1px solid transparent; border-radius: 7px; color: var(--muted); text-align: center; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.scrolls-match-tray > span.is-filled { border-color: color-mix(in srgb, var(--scroll-accent) 50%, var(--border)); color: var(--ink); background: var(--paper); animation: scrolls-choice-arrive .24s ease both; }
.scrolls-match-tray i { color: var(--scroll-accent); font-style: normal; }
.scrolls-category-target { display: grid; min-height: 4rem; place-items: center; gap: .15rem; padding: .55rem .75rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 72%, var(--paper)); text-align: center; }
.scrolls-category-target small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scrolls-category-target strong { color: var(--scroll-accent); }
.scrolls-group-buttons, .scrolls-editor-actions, .scrolls-translation-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.scrolls-translation-item { display: grid; align-content: start; gap: .3rem; max-width: min(100%, 30rem); }
.scrolls-translation-error { color: var(--danger); line-height: 1.35; overflow-wrap: anywhere; }
.scrolls-fill-row, .scrolls-open-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem; }
.scrolls-fill-row label { display: grid; gap: .35rem; }
.scrolls-fill-row label.scrolls-fill-clue { display: block; color: var(--ink); font-weight: 500; line-height: 2.45; }
.scrolls-fill-clue input { display: inline-block; width: min(12rem, 74vw); margin: 0 .35rem; vertical-align: baseline; }
.scrolls-fill-row { padding: .65rem; border: 1px solid transparent; border-radius: var(--radius-sm); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.scrolls-fill-row.is-checking, .scrolls-open-form.is-checking { animation: scrolls-submit-nudge .3s ease both; }
.scrolls-order-list { display: grid; gap: .5rem; padding: 0; list-style: none; counter-reset: scroll-order; }
.scrolls-order-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); counter-increment: scroll-order; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.scrolls-order-list li.is-solved { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.scrolls-order-list.is-reordered li { animation: scrolls-order-settle .24s ease both; }
.scrolls-order-list li > span:first-child::before { content: counter(scroll-order) ". "; color: var(--muted); }
.scrolls-order-controls { display: flex; }
.scrolls-feedback { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--gold-soft); animation: scrolls-feedback-in .3s cubic-bezier(.2, .75, .3, 1) both; }
.scrolls-feedback-icon { display: grid; width: 1.65rem; height: 1.65rem; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
.feedback-correct { color: var(--success); background: var(--success-soft); }
.feedback-incorrect { color: var(--danger); background: var(--danger-soft); }
.feedback-partial { color: color-mix(in srgb, var(--ink) 75%, #8c5b00); background: var(--gold-soft); }
.feedback-hint, .feedback-duplicate, .feedback-gave_up { color: var(--evergreen-dark); background: var(--evergreen-soft); }
.scrolls-explanations { display: grid; gap: .5rem; }
.scrolls-explanation { padding: .8rem 0; border-top: 1px solid var(--border); }
.scrolls-explanation.is-new { animation: scrolls-explanation-reveal .4s cubic-bezier(.2, .72, .25, 1) both; }
.scrolls-explanation p { margin: .2rem 0; color: var(--muted); }
.scrolls-source-link { display: inline-block; margin-inline: .65rem 0; font-size: .78rem; }
.scrolls-visual-clue img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-md); }
.scrolls-visual-clue figcaption { padding-top: .5rem; color: var(--muted); }
.scrolls-sandbox-seals, .scrolls-sandbox-hearts { display: flex; align-items: center; gap: .35rem; direction: ltr; }
.scrolls-sandbox-seals span { width: 1.35rem; height: 1.35rem; border: 1px solid color-mix(in srgb, var(--muted) 62%, transparent); border-radius: 50%; background: transparent; }
.scrolls-sandbox-seals span.is-earned { border-color: var(--scroll-accent); background: var(--scroll-accent); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--paper) 58%, transparent); }
.scrolls-sandbox-seals span.is-new { animation: scrolls-seal-pop .46s cubic-bezier(.2, .85, .35, 1.35); }
.scrolls-sandbox-hearts { color: #bf4942; font-size: 1.12rem; }
.scrolls-sandbox-hearts span { display: inline-block; }
.scrolls-sandbox-hearts span.is-lost { color: color-mix(in srgb, var(--muted) 62%, transparent); }
.scrolls-sandbox-hearts span.is-lost.is-new { animation: scrolls-heart-loss .52s ease both; }
.scrolls-game-stage.is-resolving, [data-scrolls-puzzle].is-resolving, .scrolls-preview-frame.is-resolving { pointer-events: none; }
[data-scrolls-puzzle].is-resolving .is-selected, .scrolls-preview-frame.will-resolve-correct .is-selected { animation: scrolls-choice-resolve .5s ease-in-out both; }
.scrolls-preview-frame.will-resolve-incorrect .is-selected { animation: scrolls-choice-wrong .38s ease both; }
.scrolls-open-progress { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
.scrolls-accepted-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.scrolls-accepted-list span { padding: .45rem .65rem; border: 1px solid var(--success); border-radius: 7px; color: var(--success); background: var(--success-soft); animation: scrolls-choice-arrive .25s ease both; }
.scrolls-accepted-list span::after { margin-inline-start: .45rem; content: "●"; }

@keyframes scrolls-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scrolls-choice-arrive { from { opacity: .45; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scrolls-choice-resolve { 45% { transform: translateY(-4px) scale(1.025); } 100% { opacity: .7; transform: translateY(2px) scale(.99); } }
@keyframes scrolls-choice-wrong { 25% { border-color: var(--danger); transform: translateX(-4px); } 55% { border-color: var(--danger); transform: translateX(4px); } 80% { transform: translateX(-2px); } }
@keyframes scrolls-feedback-in { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scrolls-explanation-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrolls-heart-loss { 35% { color: #d42d28; transform: translateY(-4px) scale(1.35); } 100% { color: color-mix(in srgb, var(--muted) 62%, transparent); transform: translateY(0) scale(1); } }
@keyframes scrolls-seal-pop { 0% { transform: scale(.55); } 65% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes scrolls-submit-nudge { 45% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes scrolls-order-settle { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Daily Scrolls owner desk */
.daily-scrolls-admin-page .app-main { width: min(1460px, calc(100% - var(--side-width) - 3rem)); padding-top: 2.25rem; }
[data-navigation-collapsed="true"] .daily-scrolls-admin-page .app-main { width: min(1460px, calc(100% - 3rem)); }
.scrolls-admin-workspace { display: grid; gap: 1.25rem; }
.scrolls-admin-header { display: flex; align-items: end; justify-content: space-between; gap: 3rem; min-height: 9.5rem; padding: .5rem .25rem 1.5rem; border-bottom: 1px solid var(--border); }
.scrolls-admin-intro { max-width: 46rem; }
.scrolls-admin-intro h1 { margin: .1rem 0 .6rem; font-size: clamp(2.7rem, 5vw, 4.4rem); }
.scrolls-admin-intro > p:last-child { max-width: 43rem; margin: 0; color: var(--muted); font-size: 1rem; }
.scrolls-admin-summary { display: grid; min-width: 17rem; grid-template-columns: repeat(2, minmax(7rem, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 8%, transparent); }
.scrolls-admin-summary div { display: flex; min-height: 5.25rem; flex-direction: column-reverse; justify-content: center; padding: .9rem 1rem; }
.scrolls-admin-summary div + div { border-inline-start: 1px solid var(--border); }
.scrolls-admin-summary dt { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.scrolls-admin-summary dd { margin: 0 0 .1rem; color: var(--ink); font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.scrolls-mix-settings { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(30rem, 1.2fr); align-items: center; gap: 2rem; padding: 1.25rem 1.4rem; border-inline-start: 5px solid #c97812; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); }
.scrolls-mix-settings-copy .eyebrow { margin-bottom: .3rem; }
.scrolls-mix-settings-copy h2 { margin: 0; font-size: 1.45rem; }
.scrolls-mix-settings-copy p:last-of-type { margin: .35rem 0 .7rem; color: var(--muted); font-size: .82rem; }
.scrolls-mix-settings-copy code { display: block; width: fit-content; max-width: 100%; overflow: hidden; color: var(--evergreen-dark); font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.scrolls-mix-settings-form { display: grid; gap: .7rem; }
.scrolls-mix-weight-grid { display: grid; grid-template-columns: repeat(3, minmax(7rem, 1fr)); gap: .7rem; }
.scrolls-mix-weight-grid label { gap: .35rem; color: var(--muted); font-size: .74rem; font-weight: 700; }
.scrolls-mix-percentage { position: relative; display: block; }
.scrolls-mix-percentage input { width: 100%; min-height: 46px; padding-inline-end: 2rem; color: var(--ink); background: color-mix(in srgb, var(--parchment) 78%, var(--paper)); font-size: 1rem; font-weight: 700; }
.scrolls-mix-percentage i { position: absolute; inset-block-start: 50%; inset-inline-end: .8rem; color: var(--muted); font-style: normal; transform: translateY(-50%); pointer-events: none; }
.scrolls-mix-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.scrolls-mix-total { margin: 0; color: var(--success); font-size: .78rem; font-weight: 750; }
.scrolls-mix-total.is-invalid { color: var(--danger); }
.scrolls-mix-message { margin: 0; font-size: .76rem; font-weight: 700; }
.scrolls-mix-message.is-success { color: var(--success); }
.scrolls-mix-message.is-error { color: var(--danger); }
.scrolls-admin-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, auto); align-items: end; gap: 1.25rem; padding: 1.15rem 1.25rem; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); }
.scrolls-admin-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.scrolls-admin-filters label { min-width: 10rem; flex: 1 1 10rem; gap: .38rem; }
.scrolls-admin-filters select { background-color: color-mix(in srgb, var(--parchment) 78%, var(--paper)); }
.scrolls-admin-refresh { display: inline-flex; min-height: 46px; align-items: center; gap: .4rem; }
.scrolls-admin-refresh span { font-size: 1.15rem; line-height: 1; }
.scrolls-generator-note { display: grid; gap: .25rem; min-width: 0; padding: .65rem .8rem; border-inline-start: 3px solid var(--evergreen); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--evergreen-soft) 55%, var(--paper)); }
.scrolls-generator-note span { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scrolls-generator-note code { overflow: hidden; color: var(--ink); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.scrolls-admin-layout { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(300px, .75fr); align-items: start; gap: 1.25rem; }
.scrolls-admin-queue, .scrolls-admin-runs, .scrolls-admin-calendar { padding: 1.35rem; box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 8%, transparent); }
.scrolls-admin-queue { width: 100%; }
.scrolls-admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.scrolls-admin-section-heading .eyebrow { margin-bottom: .35rem; }
.scrolls-admin-section-heading h2 { margin: 0; font-size: 1.45rem; }
.scrolls-admin-section-heading p:last-child { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; }
.scrolls-count-badge { flex: none; padding: .45rem .7rem; border-radius: 99px; color: var(--muted); background: var(--gold-soft); font-size: .75rem; }
.scrolls-count-badge strong { color: var(--ink); font-size: .9rem; }
.scrolls-admin-list { display: grid; max-height: 34rem; gap: .55rem; overflow-y: auto; padding-inline-end: .15rem; }
.scrolls-admin-row { --row-accent: #c97812; position: relative; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto 1.5rem; align-items: center; gap: 1rem; overflow: hidden; padding: .9rem 1rem .9rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, var(--parchment)); text-align: start; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.scrolls-admin-row::before { position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--row-accent); content: ""; }
.scrolls-admin-row-people_scripture { --row-accent: #5f7957; }
.scrolls-admin-row-memory_verses { --row-accent: #426e9e; }
.scrolls-admin-row-wonders_wisdom { --row-accent: #75529a; }
.scrolls-admin-row:hover, .scrolls-admin-row:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--row-accent) 60%, var(--border)); background: color-mix(in srgb, var(--evergreen-soft) 28%, var(--paper)); transform: translateY(-1px); }
.scrolls-admin-row-heading { display: grid; min-width: 0; gap: .2rem; }
.scrolls-admin-row-heading strong { overflow: hidden; font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
.scrolls-admin-row-heading small { color: var(--muted); font-size: .75rem; }
.scrolls-admin-row-details { display: grid; justify-items: end; gap: .3rem; }
.scrolls-admin-row-details small { font-size: .7rem; }
.scrolls-admin-row-arrow { color: var(--muted); font-size: 1.15rem; transition: transform .15s ease; }
.scrolls-admin-row:hover .scrolls-admin-row-arrow { color: var(--row-accent); transform: translateX(2px); }
[dir="rtl"] .scrolls-admin-row-arrow { transform: rotate(180deg); }
[dir="rtl"] .scrolls-admin-row:hover .scrolls-admin-row-arrow { transform: translateX(-2px) rotate(180deg); }
.scrolls-admin-empty { margin: 0; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); text-align: center; }
.scrolls-admin-runs { position: sticky; top: calc(var(--top-height) + 1rem); }
.scrolls-admin-runs-list { display: grid; max-height: 34rem; gap: .65rem; overflow-y: auto; padding-inline-end: .15rem; }
.scrolls-run { display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 72%, var(--paper)); }
.scrolls-run-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.scrolls-run-heading > div { display: grid; min-width: 0; gap: .1rem; }
.scrolls-run-heading strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.scrolls-run-heading small, .scrolls-run-total { font-size: .7rem; }
.scrolls-run-meter { height: 5px; overflow: hidden; border-radius: 99px; background: var(--border); }
.scrolls-run-meter span { display: block; height: 100%; border-radius: inherit; background: var(--evergreen); }
.scrolls-run-progress { color: var(--muted); font-size: .75rem; }
.scrolls-run-progress summary { cursor: pointer; font-weight: 700; }
.scrolls-run-progress p { margin: .35rem 0 0; padding-inline-start: .35rem; overflow-wrap: anywhere; }
.scrolls-run-result { display: grid; gap: .18rem; }
.scrolls-run-error { display: block; color: var(--danger); line-height: 1.35; }

/* Daily Scrolls generation runs */
.scrolls-runs-workspace { display: grid; gap: 1.25rem; }
.scrolls-runs-header { display: flex; min-height: 9rem; align-items: end; justify-content: space-between; gap: 2rem; padding: .25rem .25rem 1.5rem; border-bottom: 1px solid var(--border); }
.scrolls-runs-header h1 { margin: .1rem 0 .55rem; font-size: clamp(2.7rem, 5vw, 4.4rem); }
.scrolls-runs-header p:last-child { max-width: 48rem; margin: 0; color: var(--muted); font-size: 1rem; }
.scrolls-runs-refresh { flex: none; gap: .45rem; }
.scrolls-runs-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); }
.scrolls-runs-overview div { display: flex; min-height: 5.4rem; flex-direction: column-reverse; justify-content: center; padding: .85rem 1.1rem; }
.scrolls-runs-overview div + div { border-inline-start: 1px solid var(--border); }
.scrolls-runs-overview dt { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.scrolls-runs-overview dd { margin: 0 0 .1rem; font-size: 1.55rem; font-weight: 750; line-height: 1; }
.scrolls-runs-toolbar { display: grid; grid-template-columns: minmax(15rem, 1.6fr) repeat(3, minmax(9rem, .7fr)) auto; align-items: end; gap: .8rem; padding: 1rem 1.1rem; }
.scrolls-runs-toolbar label { min-width: 0; gap: .35rem; }
.scrolls-runs-toolbar input, .scrolls-runs-toolbar select { min-width: 0; background-color: color-mix(in srgb, var(--parchment) 78%, var(--paper)); }
.scrolls-runs-toolbar .btn { min-height: 46px; }
.scrolls-runs-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .35rem .2rem 0; }
.scrolls-runs-result-heading h2 { margin: .15rem 0 0; font-size: 1.55rem; }
.scrolls-run-page-list { display: grid; gap: .8rem; }
.scrolls-run-page-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 91%, var(--parchment)); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); }
.scrolls-run-page-card-running { border-inline-start: 4px solid color-mix(in srgb, #d9a72a 72%, var(--border)); }
.scrolls-run-page-card-partial, .scrolls-run-page-card-failed { border-inline-start: 4px solid var(--danger); }
.scrolls-run-page-card-completed { border-inline-start: 4px solid var(--success); }
.scrolls-run-card-summary { display: grid; grid-template-columns: minmax(16rem, 1.2fr) minmax(15rem, .8fr) auto; align-items: center; gap: 1.4rem; min-height: 7.6rem; padding: 1.15rem 1.25rem; cursor: pointer; list-style: none; }
.scrolls-run-card-summary::-webkit-details-marker { display: none; }
.scrolls-run-card-summary:hover, .scrolls-run-card-summary:focus-visible { outline: 0; background: color-mix(in srgb, var(--evergreen-soft) 24%, transparent); }
.scrolls-run-card-identity { display: grid; min-width: 0; gap: .18rem; }
.scrolls-run-card-identity .eyebrow { margin: 0; }
.scrolls-run-card-identity code { overflow-wrap: anywhere; color: var(--ink); font-size: .92rem; font-weight: 750; }
.scrolls-run-card-identity small { color: var(--muted); font-size: .72rem; }
.scrolls-run-mode-badge { display: inline-flex; width: fit-content; margin-top: .2rem; padding: .25rem .5rem; border: 1px solid color-mix(in srgb, #c97812 55%, var(--border)); border-radius: 99px; color: #a35f09; background: color-mix(in srgb, #f0a13b 16%, var(--paper)); font-size: .67rem; font-weight: 750; }
.scrolls-run-card-progress { display: grid; gap: .48rem; }
.scrolls-run-card-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.scrolls-run-card-progress-copy strong { font-size: .87rem; }
.scrolls-run-card-progress-copy small { color: var(--muted); font-size: .68rem; text-align: end; }
.scrolls-run-page-meter { display: flex; height: 7px; overflow: hidden; border-radius: 99px; background: var(--border); }
.scrolls-run-page-meter span { display: block; height: 100%; }
.scrolls-run-page-meter .is-completed { background: var(--success); }
.scrolls-run-page-meter .is-failed { background: var(--danger); }
.scrolls-run-card-state { display: flex; align-items: center; gap: .75rem; }
.scrolls-run-disclosure { color: var(--muted); font-size: 1rem; transition: transform .18s ease; }
.scrolls-run-page-card[open] .scrolls-run-disclosure { transform: rotate(180deg); }
.scrolls-run-card-body { display: grid; gap: 1rem; padding: 1.1rem 1.25rem 1.3rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--parchment) 58%, var(--paper)); }
.scrolls-run-metadata, .scrolls-run-provider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--border); }
.scrolls-run-provider { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scrolls-run-metadata div, .scrolls-run-provider div { min-width: 0; padding: .75rem .85rem; }
.scrolls-run-metadata div + div, .scrolls-run-provider div + div { border-inline-start: 1px solid var(--border); }
.scrolls-run-metadata dt, .scrolls-run-provider dt { color: var(--muted); font-size: .67rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.scrolls-run-metadata dd, .scrolls-run-provider dd { margin: .18rem 0 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 650; }
.scrolls-run-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.scrolls-run-tag { display: inline-flex; width: fit-content; align-items: center; padding: .28rem .5rem; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--paper); font-size: .67rem; font-weight: 700; }
.scrolls-run-tag-category { border-color: color-mix(in srgb, var(--evergreen) 42%, var(--border)); }
.scrolls-run-tag-recipe { border-color: color-mix(in srgb, #447cae 42%, var(--border)); }
.scrolls-run-tag-difficulty { border-color: color-mix(in srgb, #8356a3 42%, var(--border)); }
.scrolls-run-tag-mix { border-color: color-mix(in srgb, #c97812 55%, var(--border)); color: var(--ink); }
.scrolls-run-work-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.scrolls-run-work-heading h3 { margin: 0; font-size: 1.05rem; }
.scrolls-run-work-heading span { color: var(--muted); font-size: .72rem; }
.scrolls-run-work-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); }
.scrolls-run-work-table { width: 100%; min-width: 850px; border-spacing: 0; border-collapse: separate; }
.scrolls-run-work-table th, .scrolls-run-work-table td { padding: .75rem .8rem; border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; }
.scrolls-run-work-table th { color: var(--muted); background: color-mix(in srgb, var(--parchment) 75%, var(--paper)); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
.scrolls-run-work-table tbody tr:last-child td { border-block-end: 0; }
.scrolls-run-work-table td { font-size: .76rem; }
.scrolls-run-work-table td:first-child { width: 20%; }
.scrolls-run-work-table td:first-child strong { display: inline-grid; width: 1.6rem; height: 1.6rem; place-items: center; margin-inline-end: .5rem; border: 1px solid var(--border); border-radius: 50%; }
.scrolls-run-work-table td:first-child code { overflow-wrap: anywhere; color: var(--muted); font-size: .67rem; }
.scrolls-run-work-outcome { display: grid; gap: .38rem; min-width: 16rem; }
.scrolls-run-work-stage { display: flex; flex-wrap: wrap; align-items: center; gap: .38rem; }
.scrolls-run-work-stage code { padding: .15rem .3rem; border-radius: 4px; color: var(--danger); background: var(--danger-soft); font-size: .66rem; }
.scrolls-run-work-error { max-width: 62rem; margin: 0; overflow-wrap: anywhere; color: var(--danger); line-height: 1.42; }
.scrolls-run-work-outcome small { color: var(--muted); }
.scrolls-run-puzzle-link { width: fit-content; color: var(--evergreen-dark); font-weight: 750; text-decoration: none; }
.scrolls-run-puzzle-link:hover, .scrolls-run-puzzle-link:focus-visible { text-decoration: underline; }
.status-draft { color: var(--ink); background: var(--gold-soft); }
.status-approved_pending_translation, .status-translating, .status-running, .status-partial { color: color-mix(in srgb, var(--ink) 72%, #8c5b00); background: color-mix(in srgb, #f2c96d 35%, var(--paper)); }
.status-scheduled { color: var(--evergreen-dark); background: var(--evergreen-soft); }
.status-published, .status-completed, .status-ready, .status-recipe_ready { color: var(--success); background: var(--success-soft); }
.status-unreviewed, .status-queued { color: var(--muted); background: color-mix(in srgb, var(--border) 45%, var(--paper)); }
.status-rejected, .status-translation_failed, .status-failed { color: var(--danger); background: var(--danger-soft); }
.scrolls-admin-calendar { overflow: hidden; }
.scrolls-calendar-key { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--muted); font-size: .75rem; }
.scrolls-calendar-key span { display: inline-flex; align-items: center; gap: .35rem; }
.scrolls-calendar-key i { width: .65rem; height: .65rem; border: 1px dashed var(--border); border-radius: 3px; }
.scrolls-calendar-key i.is-scheduled { border-style: solid; border-color: var(--evergreen); background: var(--evergreen-soft); }
.scrolls-calendar { max-height: 38rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.scrolls-calendar-table { width: 100%; min-width: 900px; border-spacing: 0; border-collapse: separate; }
.scrolls-calendar-table th, .scrolls-calendar-table td { padding: .65rem .7rem; border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border); text-align: start; }
.scrolls-calendar-table tr:last-child > * { border-block-end: 0; }
.scrolls-calendar-table tr > *:last-child { border-inline-end: 0; }
.scrolls-calendar-table thead th { position: sticky; top: 0; z-index: 3; height: 3rem; background: color-mix(in srgb, var(--paper) 94%, var(--parchment)); font-size: .78rem; }
.scrolls-calendar-date-heading, .scrolls-calendar-date { position: sticky; inset-inline-start: 0; z-index: 2; width: 10.5rem; min-width: 10.5rem; background: var(--paper); }
.scrolls-calendar-table thead .scrolls-calendar-date-heading { z-index: 4; }
.scrolls-calendar-date { vertical-align: middle; }
.scrolls-calendar-date time, .scrolls-calendar-date small { display: block; }
.scrolls-calendar-date time { font-size: .83rem; font-weight: 700; }
.scrolls-calendar-date small { margin-top: .1rem; color: var(--muted); font-size: .68rem; font-weight: 500; }
.scrolls-calendar-table tr.is-ready .scrolls-calendar-date small { color: var(--success); }
.scrolls-calendar-lane { min-width: 13rem; }
.scrolls-calendar-lane i { display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: #c97812; }
.scrolls-calendar-lane-people_scripture i { background: #5f7957; }
.scrolls-calendar-lane-memory_verses i { background: #426e9e; }
.scrolls-calendar-lane-wonders_wisdom i { background: #75529a; }
.scrolls-calendar-cell { background: color-mix(in srgb, var(--paper) 84%, var(--parchment)); }
.scrolls-calendar-slot { display: grid; width: 100%; gap: .1rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--evergreen) 28%, var(--border)); border-radius: 7px; color: var(--ink); background: color-mix(in srgb, var(--evergreen-soft) 56%, var(--paper)); text-align: start; cursor: pointer; }
.scrolls-calendar-slot:hover, .scrolls-calendar-slot:focus-visible { outline: 0; border-color: var(--evergreen); box-shadow: 0 0 0 2px color-mix(in srgb, var(--evergreen) 22%, transparent); }
.scrolls-calendar-slot strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.scrolls-calendar-slot small { font-size: .65rem; }
.scrolls-calendar-empty { display: inline-flex; min-height: 2.8rem; align-items: center; padding: .45rem .65rem; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); font-size: .75rem; }
.scrolls-editor-dialog { width: min(96vw, 1540px); height: 92vh; height: min(92dvh, 1040px); max-height: 92vh; max-height: 92dvh; padding: 0; overflow: hidden; }
.scrolls-editor-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.scrolls-editor-dialog-header { position: relative; z-index: 6; display: flex; min-height: 5.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--paper) 92%, var(--parchment)); }
.scrolls-editor-dialog-header .eyebrow { margin-bottom: .2rem; }
.scrolls-editor-dialog-header h2 { margin: 0; font-size: 1.5rem; }
.scrolls-editor-quality { max-width: 58rem; margin: .4rem 0 0; color: var(--danger); font-size: .82rem; font-weight: 700; line-height: 1.35; }
.scrolls-editor-dialog .scrolls-dialog-close { margin: 0; }
.scrolls-editor-dialog .scrolls-dialog-close button { display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--paper); line-height: 1; text-align: center; }
.scrolls-editor-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); overflow: hidden; }
.scrolls-editor-grid > form { display: grid; min-width: 0; min-height: 0; align-content: start; gap: 1rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 1.25rem; background: color-mix(in srgb, var(--parchment) 58%, var(--paper)); }
.scrolls-editor-grid label { display: grid; gap: .35rem; font-weight: 600; }
.scrolls-editor-section { display: grid; gap: .85rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.scrolls-editor-section[hidden], [data-editor-v2-only][hidden], .scrolls-editor-translation-section[hidden], .scrolls-editor-inspector[hidden] { display: none; }
.scrolls-editor-section-title { display: flex; align-items: start; gap: .7rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.scrolls-editor-section-title > span { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: 50%; color: var(--evergreen-dark); background: var(--evergreen-soft); font-size: .7rem; font-weight: 800; }
.scrolls-editor-section-title h3 { margin: 0; font-size: 1rem; }
.scrolls-editor-section-title p { margin: .12rem 0 0; color: var(--muted); font-size: .76rem; }
.scrolls-editor-section > .muted { margin: -.35rem 0 0; font-size: .75rem; }
.scrolls-json-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55; direction: ltr; }
.scrolls-editor-order-tools { display: grid; gap: .75rem; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 68%, var(--paper)); }
.scrolls-editor-order-tools[hidden] { display: none; }
.scrolls-editor-order-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.scrolls-editor-order-heading > div { display: grid; gap: .15rem; }
.scrolls-editor-order-heading strong { font-size: .88rem; }
.scrolls-editor-order-heading small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.scrolls-editor-order-heading .btn { flex: none; padding: .5rem .7rem; font-size: .75rem; }
.scrolls-editor-order-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.scrolls-editor-order-row { display: grid; min-width: 0; grid-template-columns: 2.25rem 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease; }
.scrolls-editor-order-row.is-dragging { opacity: .45; }
.scrolls-editor-order-row.is-drop-target { border-color: var(--evergreen); box-shadow: 0 0 0 2px color-mix(in srgb, var(--evergreen) 22%, transparent); transform: translateY(2px); }
.scrolls-editor-order-handle { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: color-mix(in srgb, var(--parchment) 70%, var(--paper)); font-weight: 900; letter-spacing: -.15em; cursor: grab; }
.scrolls-editor-order-handle:active { cursor: grabbing; }
.scrolls-editor-order-handle:hover, .scrolls-editor-order-handle:focus-visible { outline: 0; border-color: var(--evergreen); color: var(--evergreen-dark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--evergreen) 18%, transparent); }
.scrolls-editor-order-position { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: var(--evergreen-dark); background: var(--evergreen-soft); font-size: .7rem; font-weight: 850; }
.scrolls-editor-order-copy { display: grid; min-width: 0; gap: .08rem; }
.scrolls-editor-order-copy strong { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.35; }
.scrolls-editor-order-copy small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.scrolls-editor-order-select { display: block !important; }
.scrolls-editor-order-select select { min-width: 7.5rem; padding: .48rem .55rem; font-size: .72rem; }
.scrolls-editor-order-error { padding: .7rem; border: 1px solid var(--danger); border-radius: 7px; color: var(--danger); background: var(--danger-soft); font-size: .75rem; }
.scrolls-editor-evidence { display: grid; gap: .65rem; }
.scrolls-evidence-card { display: grid; gap: .45rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 68%, var(--paper)); }
.scrolls-evidence-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.scrolls-evidence-card p, .scrolls-evidence-card blockquote { margin: 0; }
.scrolls-evidence-card p { color: var(--ink); font-size: .82rem; font-weight: 650; }
.scrolls-evidence-card blockquote { padding: .55rem .65rem; border-inline-start: 3px solid var(--evergreen); color: var(--muted); background: var(--paper); font-size: .78rem; line-height: 1.5; }
.scrolls-evidence-card blockquote strong { margin-inline-end: .35rem; color: var(--ink); }
.scrolls-evidence-card a { overflow-wrap: anywhere; font-size: .72rem; }
.scrolls-editor-asset-status { display: flex; flex-wrap: wrap; gap: .4rem; }
.scrolls-editor-inspector { margin-top: 1rem; }
.scrolls-editor-next-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--evergreen) 42%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--evergreen-soft) 44%, var(--paper)); }
.scrolls-editor-next-step > span { display: inline-flex; padding: .3rem .5rem; border-radius: 99px; color: var(--evergreen-dark); background: color-mix(in srgb, var(--evergreen) 14%, var(--paper)); font-size: .68rem; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.scrolls-editor-next-step > div { display: grid; gap: .18rem; }
.scrolls-editor-next-step strong { font-size: .88rem; }
.scrolls-editor-next-step p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.scrolls-editor-next-step.is-complete { border-color: color-mix(in srgb, var(--success) 48%, var(--border)); background: color-mix(in srgb, var(--success-soft) 58%, var(--paper)); }
.scrolls-editor-next-step.is-warning { border-color: color-mix(in srgb, var(--danger) 42%, var(--border)); background: color-mix(in srgb, var(--danger-soft) 45%, var(--paper)); }
.scrolls-editor-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 -.25rem -.25rem; padding: 1rem .25rem .25rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--parchment) 92%, transparent); backdrop-filter: blur(10px); }
.scrolls-editor-actions [hidden] { display: none; }
.scrolls-editor-action-pending { gap: .5rem; }
.scrolls-editor-action-pending .loading-spinner { width: 1rem; height: 1rem; border-color: currentColor; border-top-color: transparent; }
.scrolls-editor-actions-primary, .scrolls-editor-actions-secondary { display: flex; flex-wrap: wrap; gap: .55rem; }
.scrolls-editor-preview { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 1.25rem 1.25rem; border-inline-start: 1px solid var(--border); background: var(--paper); }
.scrolls-preview-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 -1.25rem 1rem; padding: 1rem 1.25rem .85rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent); backdrop-filter: blur(12px); }
.scrolls-preview-toolbar > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.scrolls-preview-toolbar .btn { min-height: 40px; padding: .5rem .75rem; font-size: .85rem; }
.scrolls-preview-title { display: grid !important; gap: .1rem !important; }
.scrolls-preview-title span { color: var(--muted); font-size: .78rem; }
.scrolls-preview-toolbar [data-preview-play][aria-pressed="true"] { border-color: var(--evergreen); color: var(--evergreen-dark); background: var(--evergreen-soft); }
.scrolls-preview-frame { min-height: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--parchment); }
.scrolls-preview-frame.is-dark { --paper: #292b2d; --parchment: #202224; --ink: #f8f8f5; --muted: #c7cbcd; --border: #555a5d; color: var(--ink); }
.scrolls-preview-frame.is-mobile { max-width: 360px; margin-inline: auto; }
.scrolls-editor-preview .scrolls-category h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.04; }
.scrolls-preview-instructions { padding-top: 1rem; border-top: 1px solid var(--border); }
.scrolls-sandbox-stage { display: grid; gap: 1rem; min-height: 36rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); animation: scrolls-game-enter .3s cubic-bezier(.2, .72, .25, 1) both; }
.scrolls-sandbox-utility { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.scrolls-sandbox-badge { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
.scrolls-sandbox-badge i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--scroll-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--scroll-accent) 16%, transparent); }
.scrolls-sandbox-headline { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.scrolls-sandbox-headline > div:first-child { min-width: 0; }
.scrolls-sandbox-headline h2 { overflow-wrap: anywhere; font-size: clamp(1.85rem, 3.6vw, 2.65rem); line-height: 1.04; }
.scrolls-sandbox-headline p:last-child { color: var(--muted); }
.scrolls-sandbox-meters { display: grid; flex: none; justify-items: end; gap: .5rem; }
.scrolls-sandbox-tutorial { align-self: start; max-width: 33rem; margin: 2rem auto; padding: clamp(1.25rem, 5vw, 2.25rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--parchment) 68%, var(--paper)); box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 12%, transparent); animation: scrolls-tutorial-in .38s cubic-bezier(.2, .75, .3, 1) both; }
.scrolls-sandbox-tutorial-mark { display: grid; width: 2.4rem; height: 2.4rem; margin-bottom: 2rem; place-items: center; border-radius: 50%; color: var(--paper); background: var(--scroll-accent); font-size: .72rem; font-weight: 800; }
.scrolls-sandbox-tutorial h3 { margin: .15rem 0 .65rem; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.scrolls-sandbox-tutorial > p:not(.eyebrow) { margin: 0 0 1.4rem; color: var(--muted); line-height: 1.65; }
.scrolls-sandbox-tutorial .btn { width: 100%; }
.scrolls-sandbox-play { align-content: start; }
.scrolls-sandbox-complete { display: grid; justify-items: start; gap: .45rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--scroll-accent) 48%, var(--border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--scroll-accent) 10%, var(--paper)); animation: scrolls-feedback-in .32s ease both; }
.scrolls-sandbox-complete h3, .scrolls-sandbox-complete p { margin: 0; }
.scrolls-sandbox-complete h3 { font-size: 1.6rem; }
.scrolls-sandbox-complete > p:not(.eyebrow) { margin-bottom: .7rem; color: var(--muted); }
.scrolls-sandbox-explanations { padding-top: .5rem; }
.scrolls-sandbox-stage .scrolls-visual-clue { margin: 0; }
.scrolls-sandbox-stage .scrolls-choice { font-size: .82rem; }
.scrolls-sandbox-stage .scrolls-order-controls .btn { min-width: 2.25rem; padding: .4rem; }
.scrolls-preview-frame.is-mobile .scrolls-sandbox-headline { flex-direction: column; }
.scrolls-preview-frame.is-mobile .scrolls-sandbox-meters { width: 100%; grid-template-columns: 1fr 1fr; align-items: center; justify-items: start; }
.scrolls-preview-frame.is-mobile .scrolls-sandbox-hearts { justify-self: end; }
.scrolls-preview-frame.is-mobile .scrolls-match-columns, .scrolls-preview-frame.is-mobile .scrolls-chip-list, .scrolls-preview-frame.is-mobile .scrolls-fill-row, .scrolls-preview-frame.is-mobile .scrolls-open-form { grid-template-columns: 1fr; }
.scrolls-preview-frame.is-mobile .scrolls-match-tray { grid-template-columns: 1fr; }
.scrolls-preview-frame.is-mobile .scrolls-match-tray i { transform: rotate(90deg); }
.scrolls-preview-frame.is-mobile .scrolls-sandbox-utility { align-items: flex-start; flex-direction: column; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }

@keyframes scrolls-game-enter { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scrolls-tutorial-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .scrolls-dialog[open], .scrolls-editor-dialog[open], .scrolls-seal-meter span.is-earned, .scrolls-hearts span.is-lost.is-new,
  .scrolls-choice.is-selected, .scrolls-match-tray > span.is-filled, .scrolls-fill-row.is-checking, .scrolls-open-form.is-checking,
  .scrolls-order-list.is-reordered li, .scrolls-feedback, .scrolls-explanation.is-new, .scrolls-sandbox-seals span.is-new,
  .scrolls-sandbox-hearts span.is-lost.is-new, .scrolls-sandbox-stage, .scrolls-sandbox-tutorial, .scrolls-sandbox-complete {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .scrolls-category, .scrolls-choice { transition-duration: .01ms !important; }
  .scrolls-category:hover, .scrolls-choice:hover, .scrolls-choice:focus-visible, .scrolls-choice.is-selected { transform: none; }
}

@media (max-width: 1180px) {
  .scrolls-admin-layout { grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr); }
  .scrolls-mix-settings { grid-template-columns: 1fr; gap: 1rem; }
  .scrolls-admin-toolbar { grid-template-columns: 1fr; }
  .scrolls-generator-note { width: 100%; }
  .scrolls-run-card-summary { grid-template-columns: minmax(15rem, 1fr) auto; }
  .scrolls-run-card-progress { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .scrolls-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-scrolls-admin-page .app-main, [data-navigation-collapsed="true"] .daily-scrolls-admin-page .app-main { width: min(100% - 2rem, 760px); }
  .scrolls-admin-header { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .scrolls-admin-summary { width: 100%; min-width: 0; }
  .scrolls-admin-layout, .scrolls-editor-grid { grid-template-columns: 1fr; }
  .scrolls-admin-runs { position: static; }
  .scrolls-editor-dialog { height: 94vh; height: min(94dvh, 1040px); max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; }
  .scrolls-editor-dialog[open] { display: block; }
  .scrolls-editor-dialog-header { position: sticky; top: 0; }
  .scrolls-editor-grid { overflow: visible; }
  .scrolls-editor-grid > form, .scrolls-editor-preview { overflow: visible; }
  .scrolls-editor-preview { padding-top: 0; border-block-start: 1px solid var(--border); border-inline-start: 0; }
  .scrolls-preview-toolbar { top: 5.25rem; }
  .scrolls-editor-actions { position: static; }
  .scrolls-runs-header { min-height: 0; align-items: stretch; flex-direction: column; gap: 1rem; }
  .scrolls-runs-refresh { align-self: start; }
  .scrolls-runs-toolbar { grid-template-columns: 1fr 1fr; }
  .scrolls-runs-search { grid-column: 1 / -1; }
  .scrolls-runs-toolbar .btn { grid-column: 1 / -1; }
  .scrolls-run-metadata { grid-template-columns: 1fr 1fr; }
  .scrolls-run-metadata div:nth-child(3) { border-inline-start: 0; }
  .scrolls-run-metadata div:nth-child(n + 3) { border-block-start: 1px solid var(--border); }
}
@media (max-width: 680px) {
  .scrolls-hero { align-items: start; flex-direction: column; }
  .scrolls-day-score { text-align: start; }
  .scrolls-seal-meter { justify-content: start; }
  .scrolls-board { grid-template-columns: 1fr; }
  .scrolls-empty-state { grid-template-columns: 1fr; }
  .scrolls-future-notice { align-items: flex-start; flex-direction: column; }
  .scrolls-category { min-height: 15rem; }
  .scrolls-match-columns, .scrolls-chip-list { grid-template-columns: 1fr; }
  .scrolls-fill-row, .scrolls-open-form { grid-template-columns: 1fr; }
  .scrolls-completion, .scrolls-leaderboard-header { align-items: stretch; flex-direction: column; }
  .scrolls-leaderboard-controls { align-items: stretch; flex-direction: column; }
  .scrolls-admin-header { min-height: 0; padding-top: 0; }
  .scrolls-admin-summary { grid-template-columns: 1fr; }
  .scrolls-admin-summary div { min-height: 4rem; flex-direction: row; align-items: center; justify-content: space-between; }
  .scrolls-admin-summary div + div { border-block-start: 1px solid var(--border); border-inline-start: 0; }
  .scrolls-mix-settings { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .scrolls-mix-weight-grid { grid-template-columns: 1fr; }
  .scrolls-mix-settings-actions { align-items: stretch; flex-direction: column; }
  .scrolls-mix-settings-actions .btn { width: 100%; }
  .scrolls-admin-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .scrolls-admin-filters label { min-width: 0; }
  .scrolls-admin-refresh { grid-column: 1 / -1; justify-content: center; }
  .scrolls-admin-queue, .scrolls-admin-runs, .scrolls-admin-calendar { padding: 1rem; }
  .scrolls-admin-section-heading { align-items: start; flex-direction: column; gap: .75rem; }
  .scrolls-admin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .scrolls-admin-row-arrow { display: none; }
  .scrolls-admin-row-details small { display: none; }
  .scrolls-editor-dialog-header { padding: .85rem 1rem; }
  .scrolls-editor-grid > form, .scrolls-editor-preview { padding: 1rem; }
  .scrolls-editor-section { padding: .9rem; }
  .scrolls-editor-order-heading { align-items: stretch; flex-direction: column; }
  .scrolls-editor-order-heading .btn { width: 100%; justify-content: center; }
  .scrolls-editor-order-row { grid-template-columns: 2.25rem 1.8rem minmax(0, 1fr); }
  .scrolls-editor-order-select { grid-column: 3; }
  .scrolls-editor-order-select select { width: 100%; }
  .scrolls-editor-actions { align-items: stretch; flex-direction: column; }
  .scrolls-editor-actions-primary, .scrolls-editor-actions-secondary { display: grid; grid-template-columns: 1fr; }
  .scrolls-runs-refresh { width: 100%; justify-content: center; }
  .scrolls-runs-overview { grid-template-columns: 1fr 1fr; }
  .scrolls-runs-overview div:nth-child(3) { border-inline-start: 0; }
  .scrolls-runs-overview div:nth-child(n + 3) { border-block-start: 1px solid var(--border); }
  .scrolls-runs-toolbar { grid-template-columns: 1fr; }
  .scrolls-runs-search, .scrolls-runs-toolbar .btn { grid-column: auto; }
  .scrolls-run-card-summary { grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; padding: 1rem; }
  .scrolls-run-card-identity code { font-size: .78rem; }
  .scrolls-run-card-state { align-self: start; }
  .scrolls-run-card-progress-copy { align-items: start; flex-direction: column; gap: .15rem; }
  .scrolls-run-card-progress-copy small { text-align: start; }
  .scrolls-run-card-body { padding: 1rem; }
  .scrolls-run-metadata, .scrolls-run-provider { grid-template-columns: 1fr; }
  .scrolls-run-metadata div + div, .scrolls-run-provider div + div, .scrolls-run-metadata div:nth-child(3) { border-block-start: 1px solid var(--border); border-inline-start: 0; }
  .scrolls-run-work-table-wrap { overflow: hidden; }
  .scrolls-run-work-table, .scrolls-run-work-table tbody, .scrolls-run-work-table tr, .scrolls-run-work-table td { display: block; width: 100%; min-width: 0; }
  .scrolls-run-work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
  .scrolls-run-work-table tr + tr { border-block-start: 1px solid var(--border); }
  .scrolls-run-work-table td, .scrolls-run-work-table td:first-child { display: grid; width: 100%; grid-template-columns: 7.4rem minmax(0, 1fr); gap: .65rem; border: 0; }
  .scrolls-run-work-table td::before { color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; content: attr(data-label); }
  .scrolls-run-work-table td:first-child strong { display: none; }
  .scrolls-run-work-outcome { min-width: 0; }
}

/* Daily Scrolls Game Lab */
.scrolls-admin-header-side { display: grid; flex: none; justify-items: end; gap: .7rem; }
.scrolls-admin-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.scrolls-admin-lab-link, .scrolls-admin-runs-link { gap: .45rem; }
.daily-scrolls-game-lab-page .app-main { width: min(1500px, calc(100% - var(--side-width) - 3rem)); padding-top: 2rem; }
[data-navigation-collapsed="true"] .daily-scrolls-game-lab-page .app-main { width: min(1500px, calc(100% - 3rem)); }
.game-lab { display: grid; gap: 1.35rem; }
.game-lab-header { display: flex; min-height: 7rem; align-items: end; justify-content: space-between; gap: 2rem; padding: 0 .2rem 1.3rem; border-bottom: 1px solid var(--border); }
.game-lab-header h1 { margin: .1rem 0 .45rem; font-size: clamp(2.7rem, 5vw, 4.4rem); }
.game-lab-header p:last-child { max-width: 47rem; margin: 0; color: var(--muted); font-size: 1rem; }
.game-lab-back { display: inline-block; margin-bottom: .8rem; color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.game-lab-back:hover, .game-lab-back:focus-visible { color: var(--evergreen-dark); }
.game-lab-safety { display: flex; flex: none; align-items: center; gap: .7rem; min-width: 13rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--paper) 86%, transparent); }
.game-lab-safety > span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 14%, transparent); }
.game-lab-safety div { display: grid; }
.game-lab-safety strong { font-size: .85rem; }
.game-lab-safety small { font-size: .72rem; }
.game-lab-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.game-lab-selector { position: sticky; top: calc(var(--top-height) + 1rem); overflow: hidden; padding: .75rem; box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent); }
.game-lab-selector-heading { padding: .55rem .55rem .8rem; }
.game-lab-selector-heading .eyebrow { margin-bottom: .25rem; }
.game-lab-selector-heading h2 { margin: 0; font-size: 1.2rem; }
.game-lab-tabs { display: grid; gap: .3rem; }
.game-lab-tabs button { display: grid; width: 100%; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: .55rem; min-height: 4rem; padding: .65rem .7rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; text-align: start; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.game-lab-tabs button:hover, .game-lab-tabs button:focus-visible { outline: 0; border-color: var(--border); background: var(--gold-soft); }
.game-lab-tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--evergreen) 52%, var(--border)); color: var(--ink); background: var(--evergreen-soft); box-shadow: inset 3px 0 0 var(--evergreen); }
[dir="rtl"] .game-lab-tabs button[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--evergreen); }
.game-lab-tab-number { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--paper) 72%, transparent); font-size: .66rem; font-weight: 800; }
.game-lab-tabs button > span:nth-child(2) { display: grid; min-width: 0; gap: .1rem; }
.game-lab-tabs strong { overflow: hidden; color: inherit; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.game-lab-tabs small { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.game-lab-tabs i { font-style: normal; transition: transform .16s ease; }
.game-lab-tabs button:hover i, .game-lab-tabs button[aria-selected="true"] i { color: var(--evergreen-dark); transform: translateX(2px); }
[dir="rtl"] .game-lab-tabs i { transform: rotate(180deg); }
.game-lab-workbench { display: grid; min-width: 0; gap: 1rem; }
.game-lab-toolbar { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent); }
.game-lab-toolbar-title { display: grid; min-width: 10rem; gap: .06rem; }
.game-lab-toolbar-title span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.game-lab-toolbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-lab-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.game-lab-toolbar .btn { min-height: 39px; padding: .55rem .7rem; font-size: .78rem; }
.game-lab-toolbar .btn-ghost:hover { border-color: var(--evergreen); color: var(--evergreen-dark); background: var(--evergreen-soft); }
.game-lab-frame { --lab-surface: var(--paper); --lab-ground: color-mix(in srgb, var(--parchment) 74%, var(--paper)); --lab-ink: var(--ink); --lab-muted: var(--muted); --lab-border: var(--border); min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--lab-ink); background: var(--lab-ground); box-shadow: 0 20px 55px color-mix(in srgb, var(--ink) 10%, transparent); transition: max-width .24s ease, background .2s ease; }
.game-lab-frame.is-dark { --lab-surface: #191b1d; --lab-ground: #111315; --lab-ink: #f4f5f5; --lab-muted: #aeb3b6; --lab-border: #41464a; --paper: #191b1d; --parchment: #111315; --ink: #f4f5f5; --muted: #aeb3b6; --border: #41464a; --on-primary: #202224; }
.game-lab-frame.is-mobile { max-width: 430px; margin-inline: auto; }
.lab-game-shell { --game-accent: #c97812; --lab-motion-fast: .44s; --lab-motion-standard: .72s; --lab-motion-slow: 1s; --lab-motion-odd: 1.16s; --lab-motion-ease: cubic-bezier(.25,.6,.2,1); --lab-slide-enter: 1.4rem; --lab-slide-nudge: -.4rem; --lab-slide-counter: .22rem; --lab-slide-small: -.12rem; position: relative; display: grid; min-height: 42rem; align-content: start; gap: 1.25rem; overflow: hidden; padding: clamp(1.35rem, 3vw, 2.5rem); border: 1px solid var(--lab-border); border-radius: calc(var(--radius-lg) - 5px); color: var(--lab-ink); background: var(--lab-surface); animation: lab-game-enter var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-shell.is-interaction-locked { cursor: default; }
.lab-game-shell.is-interaction-locked :is(button, input, select, textarea, a[href], [role="button"]) { pointer-events: none !important; cursor: default !important; }
[dir="rtl"] .lab-game-shell { --lab-slide-enter: -1.4rem; --lab-slide-nudge: .4rem; --lab-slide-counter: -.22rem; --lab-slide-small: .12rem; }
.lab-game-shell.is-text-entry-game, .lab-game-shell.is-text-entry-game *, .lab-game-shell.is-text-entry-game *::before, .lab-game-shell.is-text-entry-game *::after { animation: none !important; }
.lab-game-shell.is-text-entry-game.is-text-entry-incorrect { animation: lab-game-text-shake .28s ease-out both !important; }
.lab-game-shell.is-timed-board { overflow: visible; }
.lab-game-shell.is-update-render, .lab-game-shell.is-update-render .lab-game-top-rule { animation: none; }
.lab-game-shell.is-quiet-update * { animation: none !important; }
.lab-game-shell.is-quiet-update.is-settle-categories .lab-game-category-deck,
.lab-game-shell.is-quiet-update.is-settle-clue-ladder .lab-game-clue-card.is-newly-solved,
.lab-game-shell.is-quiet-update.is-settle-matching .lab-game-matched-pair.is-newly-solved { animation: lab-game-slide-card-in var(--lab-motion-slow) var(--lab-motion-ease) both !important; }
.lab-game-shell.is-quiet-update.is-settle-odd-one-out .lab-game-odd-card { animation: lab-game-slide-card-in var(--lab-motion-odd) var(--lab-motion-ease) both !important; }
.lab-game-accent-amber { --game-accent: #e2871e; }
.lab-game-accent-blue { --game-accent: #4297df; }
.lab-game-accent-sage { --game-accent: #4dbd62; }
.lab-game-accent-lime { --game-accent: #95d600; }
.lab-game-accent-violet { --game-accent: #a844bd; }
.lab-game-accent-rose { --game-accent: #cf4e78; }
.lab-game-top-rule { height: 4px; margin-bottom: .5rem; border-radius: 99px; background: var(--game-accent); transform-origin: left; animation: lab-game-rule-in var(--lab-motion-slow) var(--lab-motion-ease) both; }
[dir="rtl"] .lab-game-top-rule { transform-origin: right; }
.lab-game-header { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.lab-game-header > div:first-child { min-width: 0; }
.lab-game-header .eyebrow { margin-bottom: .5rem; color: var(--game-accent); font-size: .76rem; }
.lab-game-title-line { display: flex; align-items: center; gap: .65rem; }
.lab-game-title-line h2 { margin: 0; overflow-wrap: anywhere; color: var(--lab-ink); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.03; }
.lab-game-help-button { display: grid; width: 2.2rem; height: 2.2rem; flex: none; place-items: center; border: 2px solid var(--lab-border); border-radius: 50%; color: var(--lab-muted); background: transparent; font-weight: 800; cursor: pointer; }
.lab-game-help-button:hover, .lab-game-help-button:focus-visible, .lab-game-help-button[aria-expanded="true"] { outline: 0; border-color: var(--game-accent); color: var(--game-accent); }
.lab-game-description { max-width: 54rem; margin: .65rem 0 0; color: var(--lab-muted); font-size: clamp(1.05rem, 2.1vw, 1.55rem); line-height: 1.38; }
.lab-game-meters { display: grid; flex: none; justify-items: end; gap: .45rem; padding-top: .2rem; direction: ltr; }
.lab-game-progress-count { color: var(--lab-muted); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.lab-game-seals, .lab-game-hearts { display: flex; align-items: center; gap: .45rem; }
.lab-game-seals span { --lab-seal-fill: 0%; --lab-seal-from: 0%; --lab-seal-to: 0%; position: relative; width: 1.8rem; height: 1.8rem; overflow: hidden; border: 3px solid var(--game-accent); border-radius: 50%; opacity: .82; }
.lab-game-seals span::before { position: absolute; inset: 4px; border-radius: inherit; background: conic-gradient(from -90deg, var(--game-accent) var(--lab-seal-fill), transparent var(--lab-seal-fill)); content: ""; }
.lab-game-seals span.is-earned { opacity: 1; }
.lab-game-seals span.is-advancing::before { animation: lab-game-seal-fill var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-seals span.is-new { animation: lab-game-seal-pop var(--lab-motion-slow) cubic-bezier(.2,.85,.35,1.2); }
.lab-game-hearts { color: var(--game-accent); font-size: 1.9rem; line-height: 1; }
.lab-game-hearts span { display: inline-block; }
.lab-game-hearts span.is-lost { opacity: .42; }
.lab-game-hearts span.is-newly-lost { animation: lab-game-heart-loss var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-meter-hints { color: var(--game-accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.lab-game-meters.is-timed { min-width: 12rem; }
.lab-game-seals.is-timed span { opacity: 1; transition: opacity .2s ease; }
.lab-game-seals.is-timed span::before { transition: background .12s linear; }
.lab-game-seals.is-timed span.is-expired { opacity: .38; }
.lab-game-timer { display: grid; justify-items: end; color: var(--game-accent); }
.lab-game-timer strong { font-variant-numeric: tabular-nums; font-size: 1.4rem; line-height: 1; }
.lab-game-timer span { margin-top: .2rem; color: var(--lab-muted); font-size: .72rem; font-weight: 700; }
.lab-game-meters.is-timed.is-penalized .lab-game-timer strong { color: #d8584c; animation: lab-game-time-penalty .75s ease-out both; }
.lab-game-timed-tracker { position: sticky; top: calc(var(--top-height) + .75rem); z-index: 12; display: flex; justify-content: flex-end; pointer-events: none; }
.lab-game-timed-tracker .lab-game-meters.is-timed { display: flex; width: auto; align-items: center; gap: .9rem; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--game-accent) 50%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-surface) 94%, transparent); box-shadow: 0 10px 28px color-mix(in srgb, var(--lab-ink) 18%, transparent); backdrop-filter: blur(14px); pointer-events: auto; }
.lab-game-help { display: flex; align-items: start; gap: 1rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--game-accent) 44%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 9%, var(--lab-surface)); animation: lab-game-feedback-in var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-help strong { flex: none; color: var(--game-accent); font-size: .84rem; }
.lab-game-help p { margin: 0; color: var(--lab-muted); font-size: .88rem; }
.lab-game-intro { display: grid; width: min(100%, 36rem); justify-self: center; gap: .4rem; margin-top: clamp(1.5rem, 7vh, 4rem); padding: clamp(1.35rem, 4vw, 2.25rem); border: 1px solid var(--lab-border); border-radius: var(--radius-md); background: var(--lab-ground); box-shadow: 0 20px 48px color-mix(in srgb, var(--lab-ink) 13%, transparent); animation: lab-game-card-in var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-intro-mark { display: grid; width: 2.7rem; height: 2.7rem; margin-bottom: 1.6rem; place-items: center; border-radius: 50%; color: #202224; background: var(--game-accent); font-size: .72rem; font-weight: 800; }
.lab-game-intro .eyebrow { margin: 0; color: var(--game-accent); }
.lab-game-intro h3 { margin: 0; color: var(--lab-ink); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lab-game-intro p:not(.eyebrow) { margin: .2rem 0 1.1rem; color: var(--lab-muted); font-size: 1rem; line-height: 1.65; }
.lab-game-intro .btn { width: 100%; border-color: var(--game-accent); color: #202224; background: var(--game-accent); }
.lab-game-intro.is-timed { width: min(100%, 43rem); gap: 1rem; }
.lab-game-intro.is-timed .lab-game-intro-mark { margin-bottom: .35rem; font-size: 1.15rem; }
.lab-game-timed-intro-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.lab-game-timed-intro-facts span { padding: .7rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-ink); background: var(--lab-surface); text-align: center; font-size: .84rem; font-weight: 800; }
.lab-game-timed-intro-rewards { display: grid; gap: .4rem; }
.lab-game-timed-intro-rewards > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border-inline-start: 3px solid var(--game-accent); color: var(--lab-muted); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); font-size: .85rem; }
.lab-game-timed-intro-rewards strong { color: var(--game-accent); }
.lab-game-timed-intro-note { margin: 0; color: var(--lab-muted); font-size: .84rem; line-height: 1.5; }
.lab-game-instructions { margin: 0; padding-block: 1rem; border-block: 1px solid var(--lab-border); color: var(--lab-muted); font-size: 1rem; }
.lab-game-body { display: grid; align-content: start; gap: 1.25rem; }
.lab-game-complete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--game-accent) 50%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 10%, var(--lab-surface)); animation: lab-game-feedback-in var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-complete > div { font-weight: 800; }
.lab-game-complete > strong { margin-inline-start: auto; color: var(--game-accent); }
.lab-game-complete .btn { min-height: 40px; border-color: var(--game-accent); color: #202224; background: var(--game-accent); }
.lab-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--lab-border); }
.lab-game-footer span { color: var(--lab-muted); font-size: .78rem; }
.lab-game-footer .btn-ghost:hover { border-color: var(--game-accent); color: var(--game-accent); }
.lab-game-feedback { display: flex; align-items: start; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-muted); background: var(--lab-ground); font-size: .88rem; animation: lab-game-feedback-in var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-feedback.is-correct { border-color: color-mix(in srgb, var(--game-accent) 64%, var(--lab-border)); color: var(--lab-ink); }
.lab-game-feedback.is-incorrect { border-color: color-mix(in srgb, #d8584c 64%, var(--lab-border)); animation: lab-game-wrong var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-feedback.is-hint, .lab-game-feedback.is-duplicate { border-color: color-mix(in srgb, #d5a93c 58%, var(--lab-border)); }
.lab-game-feedback-icon { display: grid; width: 1.35rem; height: 1.35rem; flex: none; place-items: center; border-radius: 50%; color: var(--lab-surface); background: var(--game-accent); font-size: .76rem; font-weight: 900; }
.lab-game-feedback.is-incorrect .lab-game-feedback-icon { background: #d8584c; }
.lab-game-feedback.is-hint .lab-game-feedback-icon, .lab-game-feedback.is-duplicate .lab-game-feedback-icon { background: #d5a93c; }
.lab-game-result-modal { position: fixed; inset: 0; width: min(17rem, calc(100vw - 2rem)); height: max-content; max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; color: var(--lab-ink); background: transparent; animation: lab-game-result-modal-in 1.15s var(--lab-motion-ease) both; }
.lab-game-result-modal::backdrop { background: transparent; backdrop-filter: none; }
.lab-game-result-card { display: grid; width: 100%; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .7rem; padding: .8rem .95rem; border: 2px solid var(--game-accent); border-radius: var(--radius-sm); color: var(--lab-ink); background: var(--lab-surface); box-shadow: 0 12px 34px rgb(0 0 0 / 22%); }
.lab-game-result-modal.is-incorrect .lab-game-result-card { border-color: #d8584c; }
.lab-game-result-icon { display: grid; width: 2.25rem; height: 2.25rem; grid-row: 1 / span 2; place-items: center; border-radius: 50%; color: #202224; background: var(--game-accent); font-size: 1.2rem; font-weight: 900; }
.lab-game-result-modal.is-incorrect .lab-game-result-icon { color: white; background: #d8584c; }
.lab-game-result-card > strong { font-size: 1.1rem; }
.lab-game-result-message { color: var(--lab-muted); font-size: .82rem; line-height: 1.4; }
.is-remote-game :is(.lab-game-category-answer, .lab-game-list-row, .lab-game-clue-card, .lab-game-odd-result).is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-attempt-bank { display: grid; min-width: 0; gap: .45rem; padding: .65rem .75rem; border: 1px dashed color-mix(in srgb, #d8584c 58%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, #d8584c 5%, var(--lab-surface)); }
.lab-game-attempt-bank.is-hint-only { border-color: color-mix(in srgb, #d5a93c 58%, var(--lab-border)); background: color-mix(in srgb, #d5a93c 6%, var(--lab-surface)); }
.lab-game-attempt-list { display: flex; min-width: 0; flex-wrap: wrap; gap: .45rem; }
.lab-game-attempt-chip { display: inline-flex; max-width: 100%; align-items: center; gap: .4rem; padding: .38rem .6rem; border: 1px solid color-mix(in srgb, #d8584c 45%, var(--lab-border)); border-radius: 99px; color: var(--lab-muted); background: var(--lab-ground); font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.lab-game-attempt-chip.is-hint { border-color: color-mix(in srgb, #d5a93c 55%, var(--lab-border)); background: color-mix(in srgb, #d5a93c 5%, var(--lab-ground)); }
.lab-game-attempt-chip.is-new { animation: lab-game-wrong-bank-in var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-attempt-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; flex: none; place-items: center; border-radius: 50%; color: var(--lab-surface); background: #d8584c; font-size: .72rem; font-weight: 900; line-height: 1; }
.lab-game-attempt-chip.is-hint .lab-game-attempt-icon { background: #d5a93c; }
.lab-game-attempt-bank.is-ordering .lab-game-attempt-list { display: grid; }
.lab-game-attempt-bank.is-ordering .lab-game-attempt-chip { width: 100%; border-radius: var(--radius-sm); }
.lab-game-explanation { display: grid; gap: .2rem; margin: 0; padding: .65rem .75rem; border-inline-start: 3px solid var(--game-accent); color: var(--lab-muted); background: color-mix(in srgb, var(--game-accent) 7%, transparent); font-size: .82rem; line-height: 1.5; }
.lab-game-explanation > span { color: var(--game-accent); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lab-game-explanation.is-revealed { border-inline-start-color: var(--lab-muted); }
.lab-game-section-label { margin: 0; color: var(--lab-muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lab-game-short-list { display: grid; gap: .85rem; }
.lab-game-answer-row { display: grid; grid-template-columns: minmax(11rem, .7fr) minmax(16rem, 1.3fr); align-items: start; gap: .65rem 1rem; padding: 1rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-ground) 62%, var(--lab-surface)); }
.lab-game-answer-row.is-solved { border-color: color-mix(in srgb, var(--game-accent) 50%, var(--lab-border)); }
.lab-game-answer-row.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-answer-heading { display: grid; gap: .1rem; padding-top: .45rem; }
.lab-game-answer-heading > span { color: var(--lab-ink); font-size: 1rem; font-weight: 700; }
.lab-game-answer-heading small { font-size: .7rem; }
.lab-game-answer-context { display: block; width: fit-content; margin-bottom: .3rem; padding: .22rem .42rem; border: 1px solid color-mix(in srgb, var(--game-accent) 52%, var(--lab-border)); border-radius: 999px; color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 9%, transparent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lab-game-scripture { color: inherit; font: inherit; line-height: inherit; white-space: normal; }
.lab-game-verse-number { display: inline-block; min-width: 1.45em; margin-inline-end: .08em; padding: .15em .28em; border-radius: .35em; color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 12%, transparent); font-size: .58em; font-weight: 900; line-height: 1; text-align: center; vertical-align: super; }
.lab-game-answer-heading > .lab-game-scripture { color: var(--lab-ink); font-size: 1rem; font-weight: 700; line-height: 1.55; }
.lab-game-answer-form, .lab-game-inline-form, .lab-game-list-form, .lab-game-clue-form { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; }
.lab-game-answer-form input, .lab-game-inline-form input, .lab-game-list-form input, .lab-game-clue-form input { width: 100%; min-height: 3.25rem; padding: .7rem .9rem; border: 2px solid var(--lab-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); outline: 0; color: var(--lab-ink); background: var(--lab-surface); font-size: 1rem; }
[dir="rtl"] .lab-game-answer-form input, [dir="rtl"] .lab-game-inline-form input, [dir="rtl"] .lab-game-list-form input, [dir="rtl"] .lab-game-clue-form input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lab-game-answer-form input:focus, .lab-game-inline-form input:focus, .lab-game-list-form input:focus, .lab-game-clue-form input:focus { border-color: var(--game-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 18%, transparent); }
.lab-game-answer-form input:disabled, .lab-game-inline-form input:disabled, .lab-game-clue-form input:disabled { opacity: .82; }
.lab-game-submit { min-width: 3.25rem; border: 2px solid var(--lab-border); border-inline-start: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--game-accent); background: var(--lab-ground); font-size: 1.25rem; font-weight: 800; cursor: pointer; }
[dir="rtl"] .lab-game-submit { border-inline-start: 0; border-inline-end: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lab-game-submit:hover, .lab-game-submit:focus-visible { outline: 0; border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 12%, var(--lab-ground)); }
.lab-game-submit:disabled { cursor: not-allowed; opacity: .5; }
.lab-game-answer-row .lab-game-feedback, .lab-game-answer-row .lab-game-explanation, .lab-game-answer-row .lab-game-attempt-bank { grid-column: 2; }
.lab-game-match-banks { display: grid; gap: 1.25rem; }
.lab-game-match-bank { display: grid; gap: .65rem; }
.lab-game-match-choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.lab-game-match-choice { min-height: 3rem; overflow: hidden; padding: .55rem .8rem; border: 2px solid var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-muted); background: transparent; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.lab-game-match-choice:hover, .lab-game-match-choice:focus-visible { outline: 0; border-color: var(--game-accent); color: var(--lab-ink); transform: translateY(-1px); }
.lab-game-match-choice.is-selected { border-color: var(--game-accent); color: var(--lab-ink); background: color-mix(in srgb, var(--game-accent) 13%, var(--lab-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 16%, transparent); animation: lab-game-choice-select var(--lab-motion-fast) var(--lab-motion-ease) both; }
.lab-game-match-choice.has-scripture { width: 100%; text-align: start; }
.lab-game-match-choice.has-scripture .lab-game-choice-text { line-height: 1.5; }
.lab-game-choice-text { display: block; font-size: 1rem; }
.lab-game-match-stage { display: grid; width: min(100%, 48rem); min-height: 6.5rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(.65rem, 2vw, 1.35rem); justify-self: center; padding: 1rem 0; border-block: 1px solid var(--lab-border); }
.lab-game-match-selection { display: grid; min-width: 0; gap: .45rem; }
.lab-game-match-selection.is-left { justify-items: end; text-align: end; }
.lab-game-match-selection.is-right { justify-items: start; text-align: start; }
.lab-game-match-selection-value { display: flex; width: min(100%, 18rem); min-height: 3.25rem; align-items: center; justify-content: center; overflow: hidden; padding: .6rem .85rem; border: 2px dashed var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-muted); background: color-mix(in srgb, var(--lab-ground) 58%, transparent); overflow-wrap: anywhere; }
.lab-game-match-selection.is-selected .lab-game-match-selection-value { border-style: solid; border-color: var(--game-accent); color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 11%, var(--lab-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 12%, transparent); }
.lab-game-match-selection.is-left.is-newly-selected { animation: lab-game-match-stage-left var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-match-selection.is-right.is-newly-selected { animation: lab-game-match-stage-right var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-match-stage.is-correct .lab-game-match-selection-value { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 18%, var(--lab-surface)); }
.lab-game-match-stage.is-incorrect .lab-game-match-selection-value { border-color: #d8584c; box-shadow: 0 0 0 3px color-mix(in srgb, #d8584c 12%, transparent); }
.lab-game-match-arrow { align-self: end; padding-bottom: .85rem; color: var(--game-accent); font-size: 1.5rem; font-weight: 800; }
.lab-game-match-placeholder { opacity: .7; font-size: .82rem; }
.lab-game-match-stage .lab-game-image-choice.is-compact { width: 4.25rem; height: 4.25rem; }
.lab-game-match-stage.is-image-grid { width: min(100%, 56rem); min-height: 8rem; align-items: center; padding: 1rem; border: 1px solid var(--lab-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--lab-ground) 64%, var(--lab-surface)); }
.lab-game-match-stage.is-image-grid .lab-game-match-selection-value { min-height: 6.5rem; }
.lab-game-match-stage.is-image-grid .lab-game-match-arrow { align-self: center; padding-bottom: 0; }
.lab-game-match-stage.is-image-grid .lab-game-image-choice.is-compact { width: 8rem; height: 6rem; }
.lab-game-match-banks.is-image-grid .lab-game-match-bank:last-child .lab-game-match-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-game-match-banks.is-image-grid .lab-game-match-bank:last-child .lab-game-match-choice { aspect-ratio: 1; padding: .35rem; }
.lab-game-image-choice { display: block; width: 100%; height: 100%; }
.lab-game-image-choice img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-sm) - 4px); }
.lab-game-image-choice.is-compact { width: 3.4rem; height: 3.4rem; }
.lab-game-match-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.lab-game-match-results > section { display: grid; min-width: 0; gap: .55rem; }
.lab-game-match-results > section:only-child { grid-column: 1 / -1; }
.lab-game-match-results > section:not(:only-child) .lab-game-matched-list { grid-template-columns: 1fr; }
.lab-game-matched { display: grid; gap: .55rem; }
.lab-game-matched-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.lab-game-matched-pair { display: grid; gap: .45rem; padding: .65rem; border: 1px solid color-mix(in srgb, var(--game-accent) 40%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-matched-pair.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-matched-pair.is-revealed { border-color: var(--lab-border); }
.lab-game-matched-choices { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; color: var(--lab-ink); font-weight: 700; }
.lab-game-matched-choices > span:last-child { justify-self: end; }
.lab-game-matched-pair .lab-game-explanation { padding: .45rem .55rem; font-size: .75rem; }
.lab-game-matched-pair.has-media .lab-game-image-choice.is-compact, .lab-game-wrong-pair.has-media .lab-game-image-choice.is-compact { width: 5.5rem; height: 4.25rem; }
.lab-game-wrong-match-list { display: grid; gap: .55rem; }
.lab-game-wrong-pair { display: grid; gap: .45rem; padding: .65rem; border: 1px solid color-mix(in srgb, #d8584c 62%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, #d8584c 7%, var(--lab-surface)); }
.lab-game-wrong-pair.is-new { animation: lab-game-wrong-bank-in var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-wrong-pair .lab-game-matched-choices { color: var(--lab-muted); }
.lab-game-wrong-pair .lab-game-matched-choices > span:nth-child(2) { color: #e36a60; }
.lab-game-wrong-pair-status { display: flex; align-items: center; gap: .4rem; margin: 0; color: #e36a60; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lab-game-wrong-pair-status > span { display: inline-grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; color: var(--lab-surface); background: #d8584c; line-height: 1; }
.lab-game-category-deck { display: grid; gap: 1rem; min-height: 24rem; align-content: center; padding: clamp(1.3rem, 4vw, 2.25rem); border: 1px solid var(--lab-border); border-radius: var(--radius-md); background: var(--lab-ground); }
.lab-game-category-deck h3 { margin: .1rem 0 1rem; color: var(--lab-ink); font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1; }
.lab-game-category-deck.has-scripture { align-content: start; }
.lab-game-category-deck.has-scripture h3 { max-width: 68rem; font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.6; }
.lab-game-category-deck.is-leaving { animation: lab-game-card-resolve var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-category-deck.is-missed { border-color: color-mix(in srgb, #d8584c 58%, var(--lab-border)); }
.lab-game-category-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.lab-game-category-button { display: grid; min-height: 7.5rem; place-items: center; align-content: center; gap: .2rem; padding: .85rem; border: 2px solid var(--lab-border); border-radius: var(--radius-md); color: var(--lab-muted); background: var(--lab-surface); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.lab-game-category-button:hover, .lab-game-category-button:focus-visible { outline: 0; border-color: var(--game-accent); color: var(--lab-ink); background: color-mix(in srgb, var(--game-accent) 10%, var(--lab-surface)); transform: translateY(-2px); }
.lab-game-category-symbol { color: var(--game-accent); font-size: 1.35rem; }
.lab-game-category-button strong { color: inherit; font-size: 1rem; }
.lab-game-category-button small { font-size: .72rem; }
.lab-game-category-history { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.lab-game-category-history > span { color: var(--lab-muted); font-size: .74rem; font-weight: 700; }
.lab-game-category-history strong { padding: .3rem .55rem; border-radius: 99px; color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 10%, var(--lab-surface)); font-size: .76rem; }
.lab-game-category-history strong.has-scripture { flex: 1 1 100%; border-radius: var(--radius-sm); color: var(--lab-muted); font-weight: 600; line-height: 1.5; }
.lab-game-category-history strong.is-missed { color: #e36a60; background: color-mix(in srgb, #d8584c 10%, var(--lab-surface)); }
.lab-game-category-resolution { display: grid; gap: .45rem; padding: .75rem; border-inline-start: 3px solid var(--game-accent); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); animation: lab-game-slide-detail-in var(--lab-motion-standard) var(--lab-motion-ease) .08s both; }
.lab-game-category-resolution.is-revealed { border-inline-start-color: #d8584c; background: color-mix(in srgb, #d8584c 7%, var(--lab-surface)); }
.lab-game-category-resolution .lab-game-explanation { padding: .35rem .5rem; }
.lab-game-category-key { display: grid; gap: .6rem; }
.lab-game-category-answer { display: grid; grid-template-columns: minmax(8rem, .5fr) minmax(8rem, .4fr) minmax(0, 1.5fr); align-items: center; gap: .7rem; padding: .75rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); }
.lab-game-category-answer > strong.has-scripture { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.lab-game-category-answer > span { color: var(--game-accent); font-weight: 700; }
.lab-game-category-answer .lab-game-explanation { padding: .4rem .5rem; }
.lab-game-category-answer .lab-game-attempt-bank { grid-column: 1 / -1; }
.lab-game-fill-lists { display: grid; gap: .8rem; }
.lab-game-fill-list { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-ground) 58%, var(--lab-surface)); }
.lab-game-fill-list.is-solved { border-color: color-mix(in srgb, var(--game-accent) 50%, var(--lab-border)); }
.lab-game-fill-list.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-fill-entries { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lab-game-fill-entries li { display: inline-flex; align-items: center; gap: .4rem; color: var(--lab-muted); }
.lab-game-fill-entries li:not(:last-child)::after { color: var(--lab-border); content: "•"; }
.lab-game-inline-form { width: min(15rem, 100%); }
.lab-game-inline-form input { min-height: 2.75rem; padding: .5rem .7rem; }
.lab-game-inline-form .lab-game-submit { min-width: 2.8rem; }
.lab-game-inline-answer { min-width: 7rem; padding: .5rem .7rem; border-bottom: 2px solid var(--game-accent); color: var(--lab-ink); font-weight: 800; }
.lab-game-list-table-wrap { overflow-x: auto; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); }
.lab-game-list-table { width: 100%; min-width: 32rem; border-spacing: 0; border-collapse: separate; }
.lab-game-list-table th, .lab-game-list-table td { padding: .75rem 1rem; border-block-end: 1px solid var(--lab-border); text-align: start; vertical-align: top; }
.lab-game-list-table thead th { color: var(--lab-muted); background: var(--lab-ground); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.lab-game-list-table tbody th { width: 32%; color: var(--lab-muted); font-size: 1rem; }
.lab-game-list-table tr:last-child > * { border-block-end: 0; }
.lab-game-list-table tr.is-solved { background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-list-table tr.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-list-table td > strong { color: var(--lab-ink); font-size: 1.05rem; }
.lab-game-list-table .lab-game-explanation { margin-top: .4rem; padding: .35rem .5rem; font-size: .75rem; }
.lab-game-empty-answer { color: var(--lab-border); font-size: 1.3rem; }
.lab-game-list-form { position: sticky; bottom: .4rem; z-index: 2; margin-top: .25rem; padding: .45rem; border: 1px solid var(--lab-border); border-radius: calc(var(--radius-sm) + 4px); background: color-mix(in srgb, var(--lab-surface) 92%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--lab-ink) 12%, transparent); backdrop-filter: blur(12px); }
.lab-game-list-form input { border-color: transparent; }
.lab-game-list-form .lab-game-submit { border-color: transparent; border-inline-start: 1px solid var(--lab-border); }
.lab-game-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lab-game-order-heading > strong { color: var(--game-accent); font-size: .82rem; }
.lab-game-order-guide { margin: -.15rem 0 .15rem; padding: .65rem .75rem; border-inline-start: 3px solid var(--lab-border); color: var(--lab-muted); background: color-mix(in srgb, var(--lab-ground) 55%, transparent); font-size: .84rem; line-height: 1.45; }
.lab-game-order-guide.is-active { border-inline-start-color: var(--game-accent); color: var(--lab-ink); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-order-list { display: grid; gap: .6rem; }
.lab-game-order-item { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) 1.75rem; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-ground) 58%, var(--lab-surface)); cursor: grab; touch-action: manipulation; user-select: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease; }
.lab-game-order-item:hover, .lab-game-order-item:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--game-accent) 72%, var(--lab-border)); background: color-mix(in srgb, var(--game-accent) 6%, var(--lab-surface)); }
.lab-game-order-item:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 25%, transparent); }
.lab-game-order-item.is-selected { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 11%, var(--lab-surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--game-accent) 20%, transparent); }
.lab-game-order-item.is-dragging { cursor: grabbing; opacity: .45; transform: scale(.985); }
.lab-game-order-item.is-drop-target { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 15%, var(--lab-surface)); transform: translateY(-2px); }
.lab-game-order-item[aria-disabled="true"] { cursor: default; user-select: text; }
.lab-game-order-item.is-solved { border-color: color-mix(in srgb, var(--game-accent) 54%, var(--lab-border)); background: color-mix(in srgb, var(--game-accent) 8%, var(--lab-surface)); }
.lab-game-order-item.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-order-item.is-moved { animation: lab-game-order-move var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-order-position { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 2px solid var(--lab-border); border-radius: 50%; color: var(--lab-muted); font-size: .8rem; font-weight: 800; }
.lab-game-order-item.is-solved .lab-game-order-position { border-color: var(--game-accent); color: #202224; background: var(--game-accent); }
.lab-game-order-copy { display: grid; min-width: 0; gap: .55rem; }
.lab-game-order-copy > strong { color: var(--lab-ink); font-size: 1rem; }
.lab-game-order-copy .lab-game-explanation { padding: .4rem .55rem; font-size: .76rem; }
.lab-game-order-grip { color: var(--lab-muted); font-size: 1.4rem; font-weight: 900; letter-spacing: -.45rem; line-height: 1; opacity: .72; transform: translateX(-.2rem); }
[dir="rtl"] .lab-game-order-grip { transform: translateX(.2rem); }
.lab-game-order-item.is-selected .lab-game-order-grip, .lab-game-order-item:hover .lab-game-order-grip { color: var(--game-accent); opacity: 1; }
.lab-game-order-item[aria-disabled="true"] .lab-game-order-grip { opacity: .2; }
.lab-game-order-check { justify-self: end; border-color: var(--game-accent); color: #202224; background: var(--game-accent); }
.lab-game-hint-bank { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--game-accent) 42%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-hint-bank > div:last-child { display: grid; gap: .12rem; text-align: end; }
.lab-game-hint-bank strong { color: var(--game-accent); font-size: .9rem; }
.lab-game-hint-bank p { margin: 0; color: var(--lab-muted); font-size: .8rem; line-height: 1.4; }
.lab-game-hint-marks { display: flex; flex-wrap: wrap; gap: .35rem; }
.lab-game-hint-marks span { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 2px solid var(--game-accent); border-radius: 50%; color: #202224; background: var(--game-accent); font-size: .78rem; font-weight: 900; transition: opacity .18s ease, transform .18s ease; }
.lab-game-hint-marks span.is-used { color: var(--lab-muted); background: transparent; opacity: .3; transform: scale(.88); }
.lab-game-clue-board { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: start; }
.lab-game-clue-card { display: grid; min-width: 0; align-content: start; gap: 1rem; padding: clamp(1rem, 2.3vw, 1.5rem); border: 1px solid var(--lab-border); border-radius: var(--radius-md); background: var(--lab-ground); }
.lab-game-clue-card.is-solved { border-color: color-mix(in srgb, var(--game-accent) 55%, var(--lab-border)); }
.lab-game-clue-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lab-game-clue-value { display: grid; justify-items: end; gap: .12rem; }
.lab-game-clue-value strong { color: var(--game-accent); font-size: .9rem; }
.lab-game-clue-value span { color: var(--lab-muted); font-size: .76rem; }
.lab-game-clue-list { display: grid; gap: .65rem; margin: 0; padding: 0; counter-reset: clue; list-style: none; }
.lab-game-clue-list li { position: relative; padding: .8rem .9rem .8rem 3rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-ink); background: var(--lab-surface); line-height: 1.5; counter-increment: clue; }
[dir="rtl"] .lab-game-clue-list li { padding: .8rem 3rem .8rem .9rem; }
.lab-game-clue-list li::before { position: absolute; top: .72rem; left: .8rem; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: #202224; background: var(--game-accent); font-size: .7rem; font-weight: 900; content: counter(clue); }
[dir="rtl"] .lab-game-clue-list li::before { right: .8rem; left: auto; }
.lab-game-clue-list li.is-new { animation: lab-game-clue-reveal var(--lab-motion-standard) var(--lab-motion-ease) both; }
.lab-game-clue-more { justify-self: start; min-height: 40px; color: var(--game-accent); }
.lab-game-clue-result { display: grid; gap: .55rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--game-accent) 48%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-clue-result-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lab-game-clue-result-heading > strong { color: var(--game-accent); font-size: 1.15rem; }
.lab-game-clue-result .lab-game-explanation { padding: .45rem .55rem; }
.lab-game-clue-result .lab-game-attempt-bank { background: color-mix(in srgb, #d8584c 5%, var(--lab-ground)); }
.lab-game-clue-result .lab-game-attempt-bank.is-hint-only { background: color-mix(in srgb, #d5a93c 6%, var(--lab-ground)); }
.lab-game-clue-history { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.lab-game-clue-history > .lab-game-section-label { grid-column: 1 / -1; }
.lab-game-odd-card { display: grid; min-height: 24rem; align-content: center; gap: 1.2rem; padding: clamp(1.2rem, 4vw, 2.25rem); border: 1px solid var(--lab-border); border-radius: var(--radius-md); background: var(--lab-ground); }
.lab-game-odd-card.is-solved { border-color: color-mix(in srgb, var(--game-accent) 55%, var(--lab-border)); }
.lab-game-odd-card.is-missed { border-color: color-mix(in srgb, #d8584c 58%, var(--lab-border)); }
.lab-game-odd-card h3 { max-width: 48rem; margin: 0; color: var(--lab-ink); font-size: clamp(1.4rem, 3vw, 2.25rem); }
.lab-game-odd-card.has-scripture { align-content: start; }
.lab-game-odd-card.has-scripture h3 { max-width: 68rem; font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.6; }
.lab-game-odd-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lab-game-odd-choice { min-height: 5.25rem; padding: .9rem; border: 2px solid var(--lab-border); border-radius: var(--radius-md); color: var(--lab-ink); background: var(--lab-surface); font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.lab-game-odd-choice:hover, .lab-game-odd-choice:focus-visible { outline: 0; border-color: var(--game-accent); transform: translateY(-2px); }
.lab-game-odd-choice.is-selected { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 10%, var(--lab-surface)); }
.lab-game-odd-choice.is-incorrect { border-color: #d8584c; animation: lab-game-wrong var(--lab-motion-odd) var(--lab-motion-ease) both; }
.lab-game-odd-choice.is-correct { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 18%, var(--lab-surface)); animation: lab-game-choice-select .88s var(--lab-motion-ease) both; }
.lab-game-odd-choice:disabled { cursor: default; }
.lab-game-odd-result { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(8rem, .35fr) minmax(0, 1.4fr); align-items: center; gap: .7rem; padding: .75rem; border: 1px solid color-mix(in srgb, var(--game-accent) 40%, var(--lab-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--game-accent) 7%, var(--lab-surface)); }
.lab-game-odd-card.is-solved > .lab-game-odd-result, .lab-game-odd-card.is-missed > .lab-game-odd-result { animation: lab-game-slide-detail-in .88s var(--lab-motion-ease) .06s both; }
.lab-game-odd-result.is-revealed { border-color: color-mix(in srgb, #d8584c 46%, var(--lab-border)); background: color-mix(in srgb, #d8584c 6%, var(--lab-surface)); }
.lab-game-odd-result > span { color: var(--lab-muted); }
.lab-game-odd-result > span.has-scripture { font-size: .9rem; line-height: 1.5; }
.lab-game-odd-result > strong { color: var(--game-accent); }
.lab-game-odd-result .lab-game-explanation { padding: .4rem .5rem; }
.lab-game-odd-result .lab-game-attempt-bank { grid-column: 1 / -1; }
.lab-game-timed-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lab-game-timed-heading > strong { color: var(--game-accent); font-size: .85rem; }
.lab-game-timed-board { display: grid; gap: .7rem; }
.lab-game-timed-item { display: grid; grid-template-columns: minmax(9rem, .55fr) minmax(22rem, 1.45fr); align-items: center; gap: .75rem 1rem; padding: .85rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-ground) 64%, var(--lab-surface)); }
.lab-game-timed-item.is-solved { border-color: color-mix(in srgb, var(--success) 66%, var(--lab-border)); background: color-mix(in srgb, var(--success-soft) 74%, var(--lab-surface)); }
.lab-game-timed-item.is-revealed { border-color: color-mix(in srgb, #d8584c 45%, var(--lab-border)); }
.lab-game-timed-item.is-newly-solved { animation: lab-game-answer-lock var(--lab-motion-slow) var(--lab-motion-ease) both; }
.lab-game-timed-item-label { display: grid; gap: .12rem; }
.lab-game-timed-item-label > strong { color: var(--lab-ink); font-size: 1rem; }
.lab-game-timed-item-label > strong.has-scripture { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.lab-game-timed-item-label > span { color: var(--lab-muted); font-size: .72rem; }
.lab-game-timed-item-label > span.is-correct { color: var(--success); font-weight: 800; }
.lab-game-timed-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lab-game-timed-choice { display: flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .65rem; border: 2px solid var(--lab-border); border-radius: var(--radius-sm); color: var(--lab-muted); background: var(--lab-surface); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.lab-game-timed-choice:hover, .lab-game-timed-choice:focus-visible { outline: 0; border-color: var(--game-accent); color: var(--lab-ink); transform: translateY(-1px); }
.lab-game-timed-choice.is-selected { border-color: var(--game-accent); color: var(--lab-ink); background: color-mix(in srgb, var(--game-accent) 12%, var(--lab-surface)); }
.lab-game-timed-choice.is-tried { border-color: color-mix(in srgb, #d8584c 65%, var(--lab-border)); background: color-mix(in srgb, #d8584c 7%, var(--lab-surface)); }
.lab-game-timed-item.is-solved .lab-game-timed-choice.is-selected, .lab-game-timed-choice.is-correct { border-color: var(--success); color: var(--success); background: var(--success-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 18%, transparent); }
.lab-game-timed-choice:disabled { cursor: default; transform: none; }
.lab-game-timed-item > .lab-game-attempt-bank, .lab-game-timed-item > .lab-game-explanation { grid-column: 1 / -1; }
.lab-game-timed-actions { position: sticky; bottom: .5rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid var(--lab-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--lab-surface) 94%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--lab-ink) 12%, transparent); backdrop-filter: blur(12px); }
.lab-game-timed-actions > span { color: var(--lab-muted); font-size: .82rem; }
.lab-game-timed-actions .btn { flex: none; border-color: var(--game-accent); color: #202224; background: var(--game-accent); }
.lab-game-odd-history { display: grid; gap: .6rem; }
.game-lab-inspector { overflow: hidden; box-shadow: none; }
.game-lab-inspector summary { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.game-lab-inspector summary::-webkit-details-marker { display: none; }
.game-lab-inspector summary > span:first-child { display: grid; gap: .05rem; }
.game-lab-inspector summary strong { font-size: .88rem; }
.game-lab-inspector summary small { font-size: .72rem; }
.game-lab-inspector[open] summary > span:last-child { transform: rotate(180deg); }
.game-lab-inspector-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border); }
.game-lab-inspector-body > p { margin: 1rem 0; color: var(--muted); font-size: .82rem; }
.game-lab-inspector pre { overflow-x: auto; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: #e9eef0; background: #181a1c; font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: left; tab-size: 2; white-space: pre; }

@keyframes lab-game-enter { from { opacity: 0; transform: translateX(var(--lab-slide-enter)) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes lab-game-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lab-game-card-in { from { opacity: 0; transform: translateX(var(--lab-slide-enter)) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lab-game-slide-card-in { from { opacity: .1; transform: translateX(var(--lab-slide-enter)) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes lab-game-slide-detail-in { from { opacity: 0; transform: translateX(var(--lab-slide-enter)); } to { opacity: 1; transform: none; } }
@keyframes lab-game-choice-select { 50% { transform: translateX(var(--lab-slide-nudge)) scale(1.012); } }
@keyframes lab-game-match-stage-left { from { opacity: .2; transform: translateX(-18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lab-game-match-stage-right { from { opacity: .2; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lab-game-wrong { 0% { opacity: .55; transform: translateX(var(--lab-slide-enter)); } 42% { opacity: 1; transform: translateX(var(--lab-slide-nudge)); } 64% { transform: translateX(var(--lab-slide-counter)); } 82% { transform: translateX(var(--lab-slide-small)); } 100% { transform: none; } }
@keyframes lab-game-heart-loss { from { opacity: 1; transform: scale(1.15); } to { opacity: .42; transform: scale(1); } }
@keyframes lab-game-seal-pop { 45% { transform: scale(1.3) rotate(-8deg); } 75% { transform: scale(.94) rotate(3deg); } }
@keyframes lab-game-seal-fill { from { --lab-seal-fill: var(--lab-seal-from); } to { --lab-seal-fill: var(--lab-seal-to); } }
@keyframes lab-game-feedback-in { from { opacity: 0; transform: translateX(var(--lab-slide-enter)); } to { opacity: 1; transform: none; } }
@keyframes lab-game-result-modal-in { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lab-game-answer-lock { from { opacity: .3; transform: translateX(var(--lab-slide-enter)) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes lab-game-wrong-bank-in { from { opacity: .25; transform: translateX(var(--lab-slide-enter)); } to { opacity: 1; transform: none; } }
@keyframes lab-game-text-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes lab-game-card-resolve { 0% { transform: none; } 48% { transform: translateX(var(--lab-slide-nudge)); } 100% { transform: none; } }
@keyframes lab-game-order-move { from { opacity: .55; transform: translateX(var(--lab-slide-enter)); } to { opacity: 1; transform: none; } }
@keyframes lab-game-clue-reveal { from { opacity: .25; transform: translateX(var(--lab-slide-enter)); } to { opacity: 1; transform: none; } }
@keyframes lab-game-time-penalty { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }

@property --lab-seal-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@media (prefers-reduced-motion: reduce) {
  .game-lab-frame, .lab-game-shell, .lab-game-top-rule, .lab-game-intro, .lab-game-seals span, .lab-game-hearts span,
  .lab-game-feedback, .lab-game-explanation, .lab-game-answer-row, .lab-game-attempt-chip, .lab-game-match-choice, .lab-game-match-selection, .lab-game-matched-pair, .lab-game-wrong-pair,
  .lab-game-category-deck h3, .lab-game-category-button, .lab-game-category-resolution, .lab-game-fill-list, .lab-game-list-table tr,
  .lab-game-order-item, .lab-game-odd-choice, .lab-game-clue-list li, .lab-game-hint-marks span, .lab-game-timed-item, .lab-game-timed-choice {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

@media (max-width: 1120px) {
  .daily-scrolls-game-lab-page .app-main { width: min(calc(100% - var(--side-width) - 3rem), 980px); }
  [data-navigation-collapsed="true"] .daily-scrolls-game-lab-page .app-main { width: min(100% - 2rem, 980px); }
  .game-lab-layout { grid-template-columns: 1fr; }
  .game-lab-selector { position: static; }
  .game-lab-selector-heading { display: none; }
  .game-lab-tabs { display: flex; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
  .game-lab-tabs button { min-width: 12rem; }
}

@media (max-width: 760px) {
  .daily-scrolls-game-lab-page .app-main, [data-navigation-collapsed="true"] .daily-scrolls-game-lab-page .app-main { width: min(100% - 2rem, 680px); }
  .game-lab-header { min-height: 0; align-items: stretch; flex-direction: column; gap: 1rem; }
  .game-lab-safety { width: 100%; }
  .game-lab-toolbar { align-items: stretch; flex-direction: column; }
  .game-lab-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .game-lab-toolbar .btn { width: 100%; }
  .game-lab-frame { padding: .55rem; border-radius: var(--radius-md); }
  .lab-game-shell { min-height: 36rem; padding: 1.15rem; }
  .lab-game-header { flex-direction: column; gap: 1rem; }
  .lab-game-meters { width: 100%; grid-template-columns: 1fr 1fr; align-items: center; justify-items: start; }
  .lab-game-hearts { justify-self: end; }
  .lab-game-meter-hints { grid-column: 1 / -1; }
  .lab-game-help { flex-direction: column; gap: .25rem; }
  .lab-game-complete, .lab-game-footer { align-items: stretch; flex-direction: column; }
  .lab-game-complete > strong { margin-inline-start: 0; }
  .lab-game-answer-row { grid-template-columns: 1fr; }
  .lab-game-answer-heading { padding-top: 0; }
  .lab-game-answer-row .lab-game-feedback, .lab-game-answer-row .lab-game-explanation, .lab-game-answer-row .lab-game-attempt-bank { grid-column: 1; }
  .lab-game-match-results { grid-template-columns: 1fr; }
  .lab-game-matched-list { grid-template-columns: 1fr; }
  .lab-game-match-stage { gap: .5rem; }
  .lab-game-match-stage.is-image-grid .lab-game-image-choice.is-compact { width: 5rem; height: 4rem; }
  .lab-game-match-selection-value { min-height: 3rem; padding: .5rem; }
  .lab-game-match-banks.is-image-grid .lab-game-match-bank:last-child .lab-game-match-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-game-category-buttons { grid-template-columns: 1fr; }
  .lab-game-category-button { min-height: 5rem; }
  .lab-game-category-answer { grid-template-columns: 1fr auto; }
  .lab-game-category-answer .lab-game-explanation { grid-column: 1 / -1; }
  .lab-game-order-heading, .lab-game-clue-meta { align-items: start; flex-direction: column; }
  .lab-game-clue-value { justify-items: start; }
  .lab-game-hint-bank { align-items: start; flex-direction: column; }
  .lab-game-hint-bank > div:last-child { text-align: start; }
  .lab-game-order-item { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; }
  .lab-game-order-check { width: 100%; }
  .lab-game-clue-board, .lab-game-clue-history { grid-template-columns: 1fr; }
  .lab-game-odd-choices { grid-template-columns: 1fr; }
  .lab-game-odd-result { grid-template-columns: 1fr; }
  .lab-game-timed-heading, .lab-game-timed-actions { align-items: stretch; flex-direction: column; }
  .lab-game-timed-tracker { top: calc(var(--top-height) + .4rem); }
  .lab-game-timed-tracker .lab-game-meters.is-timed { width: 100%; justify-content: space-between; }
  .lab-game-timed-item { grid-template-columns: 1fr; }
  .lab-game-timed-actions .btn { width: 100%; }
}

@media (max-width: 680px) {
  .scrolls-admin-header-side { width: 100%; justify-items: stretch; }
  .scrolls-admin-header-actions { display: grid; grid-template-columns: 1fr; }
  .scrolls-admin-lab-link, .scrolls-admin-runs-link { width: 100%; }
}

.game-lab-frame.is-mobile .lab-game-shell { min-height: 40rem; padding: 1rem; }
.game-lab-frame.is-mobile .lab-game-header { flex-direction: column; gap: .9rem; }
.game-lab-frame.is-mobile .lab-game-title-line h2 { font-size: 2.1rem; }
.game-lab-frame.is-mobile .lab-game-description { font-size: 1rem; }
.game-lab-frame.is-mobile .lab-game-meters { width: 100%; grid-template-columns: 1fr 1fr; align-items: center; justify-items: start; }
.game-lab-frame.is-mobile .lab-game-hearts { justify-self: end; }
.game-lab-frame.is-mobile .lab-game-meter-hints { grid-column: 1 / -1; }
.game-lab-frame.is-mobile .lab-game-help, .game-lab-frame.is-mobile .lab-game-complete, .game-lab-frame.is-mobile .lab-game-footer { align-items: stretch; flex-direction: column; }
.game-lab-frame.is-mobile .lab-game-answer-row { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-answer-row .lab-game-feedback, .game-lab-frame.is-mobile .lab-game-answer-row .lab-game-explanation, .game-lab-frame.is-mobile .lab-game-answer-row .lab-game-attempt-bank { grid-column: 1; }
.game-lab-frame.is-mobile .lab-game-match-results { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-matched-list { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-match-stage { gap: .4rem; }
.game-lab-frame.is-mobile .lab-game-match-stage.is-image-grid .lab-game-image-choice.is-compact { width: 4.5rem; height: 3.75rem; }
.game-lab-frame.is-mobile .lab-game-match-selection-value { min-height: 3rem; padding: .45rem; font-size: .88rem; }
.game-lab-frame.is-mobile .lab-game-match-banks.is-image-grid .lab-game-match-bank:last-child .lab-game-match-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-lab-frame.is-mobile .lab-game-category-buttons { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-category-button { min-height: 5rem; }
.game-lab-frame.is-mobile .lab-game-category-answer { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-order-heading, .game-lab-frame.is-mobile .lab-game-clue-meta { align-items: start; flex-direction: column; }
.game-lab-frame.is-mobile .lab-game-clue-value { justify-items: start; }
.game-lab-frame.is-mobile .lab-game-hint-bank { align-items: start; flex-direction: column; }
.game-lab-frame.is-mobile .lab-game-hint-bank > div:last-child { text-align: start; }
.game-lab-frame.is-mobile .lab-game-order-item { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; }
.game-lab-frame.is-mobile .lab-game-order-check { width: 100%; }
.game-lab-frame.is-mobile .lab-game-clue-board, .game-lab-frame.is-mobile .lab-game-clue-history, .game-lab-frame.is-mobile .lab-game-odd-choices, .game-lab-frame.is-mobile .lab-game-odd-result { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-timed-intro-facts, .game-lab-frame.is-mobile .lab-game-timed-item { grid-template-columns: 1fr; }
.game-lab-frame.is-mobile .lab-game-timed-heading, .game-lab-frame.is-mobile .lab-game-timed-actions { align-items: stretch; flex-direction: column; }
.game-lab-frame.is-mobile .lab-game-timed-tracker .lab-game-meters.is-timed { display: flex; width: 100%; justify-content: space-between; }
.game-lab-frame.is-mobile .lab-game-timed-actions .btn { width: 100%; }

/* Prayer Wall */
.prayer-wall-page { display: grid; width: 100%; margin-inline: auto; gap: 1rem; }
.prayer-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); overflow: hidden; background: linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--evergreen-soft) 62%, var(--paper))); }
.prayer-hero h1 { margin: .1rem 0 .35rem; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; }
.prayer-hero p:last-child { max-width: 42rem; margin: 0; color: var(--muted); }
.prayer-hero-actions, .prayer-detail-header, .prayer-dialog-actions, .prayer-engagement, .prayer-manage-actions, .prayer-comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.prayer-hero-actions { flex: none; justify-content: end; }
.prayer-detail-header { justify-content: space-between; }
.prayer-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .3rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 86%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent); }
.prayer-tabs button { min-height: 2.9rem; padding: .65rem 1rem; border: 0; border-radius: calc(var(--radius-md) - 4px); color: var(--muted); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.prayer-tabs button[aria-selected="true"] { color: var(--on-primary); background: var(--evergreen); box-shadow: 0 6px 15px color-mix(in srgb, var(--evergreen) 24%, transparent); }
.prayer-tabs button:focus-visible { outline: 3px solid color-mix(in srgb, var(--evergreen) 45%, transparent); outline-offset: 2px; }
.prayer-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; box-shadow: none; }
.prayer-toolbar label, .prayer-dialog label, .prayer-comment-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.prayer-toolbar select, .prayer-dialog select, .prayer-dialog input, .prayer-dialog textarea, .prayer-comment-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font: inherit; }
.prayer-toolbar select, .prayer-dialog select, .prayer-dialog input { min-height: 2.75rem; padding: .6rem .75rem; }
.prayer-dialog textarea, .prayer-comment-form textarea { padding: .7rem .8rem; line-height: 1.5; resize: vertical; }
.prayer-feed { display: grid; gap: 1rem; }
.prayer-card { display: grid; gap: .9rem; padding: clamp(1rem, 3vw, 1.5rem); }
.prayer-card.is-closed { border-color: color-mix(in srgb, var(--muted) 38%, var(--border)); }
.prayer-card-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.prayer-card-header > div { display: grid; gap: .15rem; }
.prayer-card-header time, .prayer-comment-header time { color: var(--muted); font-size: .76rem; }
.prayer-copy { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.prayer-request-copy { font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.65; }
.prayer-audience-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.prayer-resolution { display: grid; gap: .35rem; padding: .9rem 1rem; border-inline-start: 4px solid var(--success); border-radius: var(--radius-sm); background: var(--success-soft); }
.prayer-engagement { padding-block: .15rem .8rem; border-bottom: 1px solid var(--border); }
.prayer-comment-tools { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.prayer-comment-count { color: var(--muted); font-size: .85rem; }
.prayer-comments { display: grid; gap: .75rem; }
.prayer-comments:empty, .prayer-comments:has(> .prayer-comment-form[hidden]:only-child) { display: none; }
.prayer-comment { display: grid; gap: .45rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--parchment) 80%, var(--paper)); }
.prayer-comment-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.prayer-comment-header .muted { font-size: .72rem; }
.prayer-comment-body { display: flex; align-items: flex-end; gap: .55rem; min-width: 0; }
.prayer-comment-body > .prayer-copy { flex: 1; min-width: 0; }
.prayer-comment-actions .btn, .prayer-manage-actions .btn { min-height: 2.15rem; padding: .35rem .6rem; }
.prayer-comment-actions { flex: none; justify-content: end; margin-inline-start: auto; }
.prayer-comment-action.icon-button { width: 2rem; height: 2rem; border-color: color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--paper) 76%, transparent); }
.prayer-comment-action svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.prayer-comment-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--evergreen) 32%, transparent); outline-offset: 2px; }
.prayer-comment-action.is-danger:hover, .prayer-comment-action.is-danger:focus-visible { border-color: var(--danger); color: var(--danger); }
.prayer-comment-form { position: relative; display: grid; justify-items: start; }
.prayer-comment-form[hidden] { display: none; }
.prayer-comment-form.is-expanded { justify-items: stretch; gap: .55rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--border) 66%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--parchment) 55%, var(--paper)); }
.prayer-comment-trigger { gap: .35rem; }
.prayer-comment-trigger-icon { font-size: 1rem; line-height: 1; }
.prayer-comment-composer { display: grid; gap: .55rem; width: 100%; }
.prayer-comment-composer[hidden] { display: none; }
.prayer-comment-form label { color: var(--ink); font-size: .78rem; }
.prayer-comment-form textarea { height: 2.8rem; min-height: 2.8rem; max-height: calc(6em + 1.4rem + 2px); overflow-y: hidden; background: var(--paper); }
.prayer-comment-composer-actions { display: flex; align-items: center; justify-content: end; gap: .45rem; }
.prayer-comment-edit-form > .btn { justify-self: end; }
.prayer-selected-mentions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: -.2rem; }
.prayer-selected-mentions[hidden] { display: none; }
.prayer-mention-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.95rem; padding: .3rem .55rem; border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--border)); border-radius: 999px; color: color-mix(in srgb, var(--gold) 72%, var(--ink)); background: color-mix(in srgb, var(--gold-soft) 78%, var(--paper)); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.prayer-mention-chip::before { display: grid; width: 1rem; height: 1rem; place-items: center; border-radius: 50%; color: var(--paper); background: var(--gold); font-size: .62rem; content: "✓"; }
.prayer-mention-chip:hover { background: var(--gold-soft); }
.prayer-mention-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 35%, transparent); outline-offset: 2px; }
.prayer-mention-menu { position: static; z-index: 5; display: grid; max-height: 13rem; margin-top: -.35rem; overflow-y: auto; padding: .3rem; border: 1px solid color-mix(in srgb, var(--evergreen) 42%, var(--border)); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 12%, transparent); }
.prayer-mention-menu[hidden] { display: none; }
.prayer-mention-option { display: grid; width: 100%; padding: .65rem .75rem; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font: inherit; text-align: start; cursor: pointer; }
.prayer-mention-option:hover, .prayer-mention-option:focus-visible { background: var(--evergreen-soft); outline: none; }
.prayer-mention-identity { display: grid; gap: .08rem; min-width: 0; }
.prayer-mention-identity strong, .prayer-mention-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prayer-mention-identity strong { color: var(--evergreen-dark); font-size: .82rem; }
.prayer-mention-identity small { color: var(--muted); font-size: .7rem; }
.prayer-inline-mention { display: inline; padding: .08rem .32rem; border-radius: 999px; color: color-mix(in srgb, var(--gold) 72%, var(--ink)); background: color-mix(in srgb, var(--gold-soft) 82%, var(--paper)); font-weight: 800; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.prayer-discussion-link { justify-self: start; font-weight: 700; }
.prayer-manage-actions { margin-top: -.15rem; }
.prayer-comments:not(:empty):not(:has(> .prayer-comment-form[hidden]:only-child)) + .prayer-manage-actions { margin-top: .15rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent); }
.prayer-empty { padding: 2rem; text-align: center; }
.prayer-empty h2 { margin-top: 0; }
.prayer-load-more { justify-self: center; }
.prayer-dialog { width: min(calc(100% - 2rem), 660px); max-height: min(88vh, 780px); overflow-y: auto; padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.prayer-dialog::backdrop { background: rgba(20, 22, 23, .68); backdrop-filter: blur(3px); }
.prayer-dialog h2 { margin: .1rem 2rem 1rem 0; font-family: var(--font-display); font-size: 1.8rem; }
[dir="rtl"] .prayer-dialog h2 { margin: .1rem 0 1rem 2rem; }
.prayer-dialog form:not(.prayer-dialog-close), .prayer-dialog section { display: grid; gap: .8rem; }
.prayer-dialog-close { position: absolute; inset-block-start: .75rem; inset-inline-end: .8rem; margin: 0; }
.prayer-dialog-close button { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.5rem; cursor: pointer; }
.prayer-dialog-close button:hover { background: var(--parchment); }
.prayer-audience-fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; margin: .15rem 0 0; padding: 0; border: 0; }
.prayer-audience-fieldset legend { margin-bottom: .25rem; color: var(--ink); font-size: .82rem; font-weight: 700; }
.prayer-audience-fieldset .prayer-audience-option { display: flex; min-height: 3.25rem; align-items: center; margin: 0; padding: .7rem .15rem; color: var(--ink); font-size: .8rem; line-height: 1.35; }
.prayer-audience-option > span:first-child { min-width: 0; }
.prayer-audience-option strong { overflow-wrap: anywhere; }
.prayer-audience-fieldset .profile-switch input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; opacity: 0; }
.prayer-follow-list label { display: flex; align-items: start; gap: .45rem; padding: .55rem; border-radius: 6px; color: var(--ink); font-weight: 500; }
.prayer-follow-list label:hover { background: var(--parchment); }
.prayer-follow-list input { width: auto; min-height: auto; margin-top: .15rem; }
.prayer-privacy-note { margin: 0; padding: .7rem .8rem; border-radius: var(--radius-sm); color: var(--muted); background: var(--evergreen-soft); font-size: .84rem; }
.prayer-dialog-actions { justify-content: end; padding-top: .25rem; }
.prayer-settings-dialog { width: min(calc(100% - 2rem), 780px); }
.prayer-settings-dialog section + section { padding-top: 1.15rem; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.prayer-settings-dialog section > h3, .prayer-settings-heading h3, .prayer-push-card h3 { margin: 0; }
.prayer-settings-dialog section > p, .prayer-settings-heading p, .prayer-push-card p { margin: .15rem 0; color: var(--muted); line-height: 1.55; }
.prayer-settings-grid { display: grid; gap: .55rem; }
.prayer-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 4rem; padding: .72rem .8rem; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 12px; background: linear-gradient(115deg, color-mix(in srgb, var(--paper) 92%, var(--evergreen-soft)), var(--paper)); box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 4%, transparent); }
.prayer-setting-copy { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.prayer-setting-copy strong { line-height: 1.25; }
.prayer-setting-icon { display: grid; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 10px; color: var(--evergreen-dark); background: var(--evergreen-soft); font-size: 1rem; font-weight: 800; }
.prayer-setting-channels { display: flex; align-items: center; gap: .3rem; padding: .3rem; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--parchment) 72%, var(--paper)); }
.prayer-setting-row .prayer-channel-toggle { position: relative; display: flex; align-items: center; gap: .35rem; padding: .25rem .45rem .25rem .3rem; border-radius: 999px; color: var(--ink); font-size: .74rem; font-weight: 700; cursor: pointer; }
.prayer-setting-row .prayer-channel-toggle:has(input:checked) { background: var(--paper); box-shadow: 0 2px 7px color-mix(in srgb, var(--ink) 8%, transparent); }
.prayer-setting-row .prayer-channel-toggle:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.prayer-setting-row .prayer-channel-toggle input, .prayer-follow-option input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.prayer-channel-indicator { display: flex; width: 2rem; height: 1.12rem; align-items: center; justify-content: flex-start; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 33%, transparent); transition: background .16s ease; }
.prayer-channel-indicator::after { width: .88rem; height: .88rem; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 25%, transparent); content: ""; }
.prayer-channel-toggle input:checked + .prayer-channel-indicator { justify-content: flex-end; background: var(--evergreen); }
.prayer-channel-toggle input:focus-visible + .prayer-channel-indicator { outline: 3px solid color-mix(in srgb, var(--evergreen) 35%, transparent); outline-offset: 2px; }
.prayer-follow-list { display: grid; gap: 1rem; }
.prayer-follow-group { display: grid; gap: .5rem; }
.prayer-follow-group-title { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prayer-follow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.prayer-follow-list .prayer-follow-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 3.65rem; padding: .65rem .7rem; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--paper) 96%, var(--parchment)); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.prayer-follow-list .prayer-follow-option:hover { border-color: color-mix(in srgb, var(--evergreen) 58%, var(--border)); background: color-mix(in srgb, var(--evergreen-soft) 42%, var(--paper)); transform: translateY(-1px); }
.prayer-follow-list .prayer-follow-option.is-selected { border-color: color-mix(in srgb, var(--evergreen) 72%, var(--border)); background: color-mix(in srgb, var(--evergreen-soft) 62%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--evergreen) 18%, transparent); }
.prayer-follow-check { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: transparent; background: var(--paper); font-size: .76rem; font-weight: 900; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.prayer-follow-option input:checked + .prayer-follow-check { border-color: var(--evergreen); color: var(--on-primary); background: var(--evergreen); }
.prayer-follow-option input:focus-visible + .prayer-follow-check { outline: 3px solid color-mix(in srgb, var(--evergreen) 35%, transparent); outline-offset: 2px; }
.prayer-follow-copy { display: grid; gap: .08rem; min-width: 0; }
.prayer-follow-copy strong { overflow: hidden; font-size: .82rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.prayer-follow-copy small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.prayer-settings-heading, .prayer-push-card { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; }
.prayer-reminder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.prayer-push-card { padding: 1rem; box-shadow: none; }
.prayer-supporter-list { display: grid; gap: .4rem; }
.prayer-supporter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--parchment); }
.prayer-supporter > div { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 680px) {
  .prayer-hero, .prayer-settings-heading, .prayer-push-card { align-items: stretch; flex-direction: column; }
  .prayer-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .prayer-toolbar, .prayer-audience-fieldset, .prayer-follow-grid, .prayer-reminder-fields { grid-template-columns: 1fr; }
  .prayer-tabs button { padding-inline: .35rem; font-size: .82rem; }
  .prayer-comment-tools { width: 100%; margin-inline-start: 0; justify-content: space-between; }
  .prayer-comment-composer-actions .btn { flex: 1; }
  .prayer-dialog { width: calc(100% - 1rem); padding: 1rem; border-radius: var(--radius-md); }
  .prayer-setting-row { grid-template-columns: 1fr; gap: .65rem; }
  .prayer-setting-channels { justify-self: stretch; justify-content: space-between; }
  .prayer-channel-toggle { flex: 1; justify-content: center; }
  .prayer-setting-row strong { font-size: .82rem; }
}
.context-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  margin: 0 2.5rem 0.6rem 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.context-panel-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: var(--parchment);
  padding: 0.55rem 0.65rem;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.context-panel-tabs button[aria-selected="true"] {
  border-bottom-color: var(--evergreen);
  background: var(--paper);
  color: var(--ink);
}

.context-agent-header { margin-bottom: 1rem; }
.context-agent-header h2 { margin-bottom: 0.35rem; }

.context-agent-chat {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 7%, transparent);
}

.context-panel-pane-ai .context-agent-chat,
.comma-panel-content.is-context-agent .context-agent-chat { min-height: 0; flex: 1 1 0; }

.context-panel-pane-ai .context-agent-header {
  display: grid;
  flex: none;
  gap: 0.12rem;
  margin-bottom: 0.5rem;
}

.context-panel-pane-ai .context-agent-header .eyebrow { display: none; }
.context-panel-pane-ai .context-agent-header h2 { margin: 0; font-size: 1.15rem; }
.context-panel-pane-ai .context-agent-header p { margin: 0; font-size: 0.78rem; line-height: 1.35; }

.context-agent-history {
  position: relative;
  z-index: 0;
  display: flex;
  height: clamp(16rem, 42vh, 31rem);
  min-height: 16rem;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 1rem;
  background: color-mix(in srgb, var(--parchment) 72%, var(--paper));
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.context-panel-pane-ai .context-agent-history,
.comma-panel-content.is-context-agent .context-agent-history {
  height: auto;
  min-height: 0;
  flex: 1;
}

.context-panel-pane-ai .context-agent-history { gap: 0.6rem; padding: 0.65rem; }
.context-panel-pane-ai .context-agent-message { padding: 0.6rem 0.7rem; }

.context-agent-exchange {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.context-agent-message {
  width: fit-content;
  max-width: 92%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
  background: var(--paper);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 5%, transparent);
}

.context-agent-message-user {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--evergreen) 28%, var(--border));
  border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
  background: var(--evergreen-soft);
}

.context-agent-message-ai { align-self: flex-start; }
.context-agent-message p { margin: 0; line-height: 1.55; }
.context-agent-message-role {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.context-agent-welcome { max-width: 100%; }
.context-agent-pending { color: var(--muted); }
.context-agent-pending p { animation: context-agent-pulse 1.4s ease-in-out infinite; }

@keyframes context-agent-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .context-agent-pending p { animation: none; }
}

.context-agent-controls {
  position: relative;
  z-index: 10;
  display: grid;
  flex: none;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--paper);
}

.context-panel-pane-ai .context-agent-controls { gap: 0.4rem; padding: 0.5rem; }
.context-panel-pane-ai .context-question-menu-summary {
  min-height: 38px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
}
.context-panel-pane-ai .context-agent-form { gap: 0.35rem; padding: 0.3rem; }
.context-panel-pane-ai .context-agent-form textarea {
  height: 40px;
  min-height: 40px;
  padding: 0.5rem 0.55rem;
  font-size: 0.82rem;
}
.context-panel-pane-ai .context-agent-send {
  min-width: 3.75rem;
  min-height: 40px;
  padding: 0.45rem 0.65rem;
}
.context-panel-pane-ai .context-agent-meta { min-height: 1.1rem; }
.context-panel-pane-ai .context-agent-budget,
.context-panel-pane-ai .context-agent-clear { font-size: 0.7rem; }

.context-question-menu {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--paper);
}

.context-question-menu-summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.context-question-menu-summary::-webkit-details-marker { display: none; }
.context-question-menu-summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 150ms ease;
}

.context-question-menu[open] .context-question-menu-summary::after {
  transform: translateY(0.15rem) rotate(225deg);
}

.context-question-menu-summary:hover,
.context-question-menu-summary:focus-visible {
  outline: 0;
  color: var(--evergreen-dark);
  background: var(--evergreen-soft);
}

.context-question-menu-summary[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.6;
}

.context-agent-questions {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  overflow-y: auto;
  max-height: min(28rem, 72dvh);
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  color: var(--ink);
  background: var(--paper);
  opacity: 1;
  box-shadow: var(--shadow);
}

.context-question-button {
  width: 100%;
  min-height: 36px;
  padding: 0.48rem 0.58rem;
  border-color: transparent;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  justify-content: flex-start;
}

.context-question-button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.context-question-button:hover,
.context-question-button:focus-visible {
  outline: 0;
  border-color: transparent;
  color: var(--evergreen-dark);
  background: var(--evergreen-soft);
}

.context-agent-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: end;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--parchment);
}

.context-agent-form textarea {
  width: 100%;
  height: 3.35rem;
  min-height: 3.35rem;
  max-height: 10rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  resize: vertical;
  background: transparent;
}

.context-agent-form textarea:focus { outline: 0; }
.context-agent-form:focus-within {
  border-color: var(--evergreen-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--evergreen) 24%, transparent);
}

.context-agent-send { min-width: 4rem; min-height: 42px; padding: 0.5rem 0.7rem; }
.context-agent-meta {
  display: flex;
  min-height: 1.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.context-agent-budget { margin: 0; font-size: 0.74rem; }
.context-agent-clear {
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

.context-agent-clear:hover,
.context-agent-clear:focus-visible { color: var(--danger); }
.context-agent-clear:disabled { cursor: wait; opacity: 0.5; }

.context-evidence-card,
.context-evidence-answer {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--paper);
}

.context-agent-answer-block + .context-agent-answer-block { margin-top: 0.75rem; }
.context-agent-answer-block > p:first-child { margin-bottom: 0.45rem; }
.context-agent-citations, .context-citations { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.context-citation-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--evergreen);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
}

.context-agent-status { padding: 1rem; border-left: 4px solid var(--evergreen); background: var(--parchment); }
.context-agent-error { margin-bottom: 1rem; }
.context-agent-history .context-agent-error { width: 100%; margin: 0; }
.context-agent-retrieved { margin-top: 0.75rem; }
.context-agent-evidence-preview { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid currentColor; }
.context-evidence-page { max-width: 880px; }
.context-evidence-list { display: grid; gap: 1rem; }
.context-evidence-source-group { margin-top: clamp(2rem, 5vw, 4rem); }
.context-evidence-card blockquote { margin: 0.8rem 0; padding-left: 1rem; border-left: 3px solid var(--evergreen); }
.context-evidence-resource-note + .context-evidence-resource-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .context-agent-history { height: min(45vh, 25rem); min-height: 14rem; }
  .context-agent-message { max-width: 96%; }
  .context-agent-controls { padding: 0.6rem; }
}

@media (max-width: 420px) {
  .context-agent-questions { grid-template-columns: 1fr; max-height: min(28rem, 72dvh); }
  .context-question-button:last-child:nth-child(odd) { grid-column: auto; }
}