@charset "UTF-8";
/* Font Faces - Playfair Display (Serif) */
@font-face {
  font-family: "Playfair Display";
  src: url("/static/font/Playfair_static/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/static/font/Playfair_static/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/static/font/Playfair_static/PlayfairDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/static/font/Playfair_static/PlayfairDisplay-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Font Faces - Quicksand (Sans-Serif) */
@font-face {
  font-family: "Quicksand";
  src: url("/static/font/Quickstand_static/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/static/font/Quickstand_static/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Font Faces - Source Code Pro (Monospace) */
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/font/SourceCodePro_static/SourceCodePro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/font/SourceCodePro_static/SourceCodePro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/font/SourceCodePro_static/SourceCodePro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/font/SourceCodePro_static/SourceCodePro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Base font stack */
:root {
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans-serif: "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-monospace: "Source Code Pro", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

:root {
  --palette-brand-dark: oklch(0.35 0.045 260);
  --palette-brand-medium: oklch(0.46 0.055 260);
  --palette-brand-light: oklch(0.9 0.02 250);
  --palette-gray-900: oklch(0.24 0.006 260);
  --palette-gray-800: oklch(0.3 0.006 260);
  --palette-gray-700: oklch(0.42 0.008 260);
  --palette-gray-600: oklch(0.55 0.01 260);
  --palette-gray-500: oklch(0.63 0.012 260);
  --palette-gray-400: oklch(0.75 0.01 260);
  --palette-gray-300: oklch(0.85 0.008 260);
  --palette-gray-200: oklch(0.89 0.006 260);
  --palette-gray-100: oklch(0.93 0.005 260);
  --palette-gray-50: oklch(0.98 0.003 260);
  --palette-primary-dark: oklch(0.37 0.15 258);
  --palette-primary-focus: oklch(0.52 0.2 258);
  --palette-primary: oklch(0.58 0.22 250);
  --palette-primary-hover: oklch(0.7 0.15 244);
  --palette-primary-lighter: oklch(0.87 0.06 245);
  --palette-primary-light: oklch(0.96 0.02 250);
  --palette-danger-dark: oklch(0.32 0.12 22);
  --palette-danger-dark-hover: oklch(0.4 0.14 22);
  --palette-danger: oklch(0.58 0.2 25);
  --palette-danger-hover: oklch(0.62 0.2 27);
  --palette-danger-light: oklch(0.9 0.045 20);
  --palette-danger-lighter: oklch(0.97 0.012 25);
  --palette-success-dark: oklch(0.35 0.1 145);
  --palette-success: oklch(0.62 0.16 145);
  --palette-success-hover: oklch(0.68 0.15 145);
  --palette-success-light: oklch(0.92 0.045 145);
  --palette-warning-dark: oklch(0.5 0.11 78);
  --palette-warning: oklch(0.85 0.17 90);
  --palette-warning-lighter: oklch(0.97 0.075 92);
  --palette-warning-light: oklch(0.97 0.055 92);
  --palette-info-dark: oklch(0.57 0.02 250);
  --palette-purple: oklch(0.53 0.22 300);
  --palette-purple-light: oklch(0.88 0.05 305);
  --palette-link-blue: oklch(0.52 0.18 250);
  --palette-link-violet: oklch(0.44 0.18 300);
}

/* Default body font (sans-serif) */
body {
  font-family: var(--font-sans-serif);
}

/* Headers use serif font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
}

/* Monospace elements */
code, kbd, samp, pre {
  font-family: var(--font-monospace);
}

/* Utility classes */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans-serif {
  font-family: var(--font-sans-serif);
}

.font-monospace {
  font-family: var(--font-monospace);
}

.select-all {
  user-select: all;
}

/* Link that looks like regular text */
.stealth-link {
  color: inherit;
  text-decoration: none;
}

.stealth-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

.link-unvisited {
  color: oklch(0.52 0.18 250);
  text-decoration: underline;
  text-decoration-style: solid;
}

.link-visited {
  color: oklch(0.44 0.18 300);
  text-decoration: underline;
  text-decoration-style: dashed;
}

.basic-page {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.leaving-page .leaving-url {
  padding: 0.75rem 1rem;
  background-color: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  word-break: break-all;
}

.leaving-page .leaving-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Help documentation pages. */
.help-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.help-sidebar {
  flex: 0 0 250px;
  background-color: oklch(0.98 0.003 260);
  border-right: 1px solid oklch(0.93 0.005 260);
  padding: 1rem;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
}

.help-sidebar-nav {
  display: flex;
  flex-direction: column;
}

.help-sidebar-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}
.help-sidebar-title a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.help-sidebar-title a.active {
  color: oklch(0.58 0.22 250);
}
.help-sidebar-title a:hover {
  color: oklch(0.58 0.22 250);
}

.help-sidebar-group {
  margin-bottom: 0.75rem;
}

.help-sidebar-group-title {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: oklch(0.63 0.012 260);
}

.help-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-sidebar-list li {
  margin-bottom: 1px;
}

.help-sidebar-link {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  color: oklch(0.42 0.008 260);
  text-decoration: none;
  font-size: 0.875rem;
}
.help-sidebar-link:hover {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.24 0.006 260);
}
.help-sidebar-link.active {
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
  font-weight: 500;
}

.help-sidebar-toggle {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  background-color: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: oklch(0.55 0.01 260);
}
.help-sidebar-toggle:hover {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.3 0.006 260);
}

.help-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

.help-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .help-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    max-height: none;
  }
  .help-sidebar-toggle {
    display: block;
  }
  .help-layout.help-sidebar-open .help-sidebar {
    transform: translateX(0);
  }
  .help-layout.help-sidebar-open .help-sidebar-backdrop {
    display: block;
  }
  .help-layout.help-sidebar-open .help-sidebar-toggle {
    display: none;
  }
}
.help-page {
  padding: 2rem;
  max-width: 800px;
  width: 100%;
}

.help-nav {
  margin-bottom: 1rem;
}

.help-topic-list {
  margin: 0.5rem 0 1.5rem;
  padding-left: 1.5rem;
}

.help-topic-list li {
  margin-bottom: 0.25rem;
}

.help-content {
  min-height: 200px;
}

.help-toc {
  margin: 0 1rem 1.5rem;
  padding: 0.75rem 1rem;
  background-color: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
}

.help-toc .toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.help-toc ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
}

.help-toc li {
  margin-bottom: 0.2rem;
}

.help-toc .toc-level-3 {
  padding-left: 1rem;
}

.heading-anchor {
  visibility: hidden;
  font-size: 0.8em;
  color: oklch(0.75 0.01 260);
  text-decoration: none;
  margin-left: 0.3rem;
  cursor: pointer;
}

h2:hover .heading-anchor,
h3:hover .heading-anchor {
  visibility: visible;
}

.heading-anchor:hover {
  color: oklch(0.42 0.008 260);
}

.help-context-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid oklch(0.75 0.01 260);
  font-size: 0.75rem;
  font-weight: 700;
  color: oklch(0.55 0.01 260);
  text-decoration: none;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.help-context-btn:hover {
  color: oklch(0.42 0.008 260);
  border-color: oklch(0.55 0.01 260);
  background-color: oklch(0.98 0.003 260);
}

/* =============================================================================
   App Title Bar
   ============================================================================= */
.app-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: oklch(0.35 0.045 260);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.title-bar-left {
  display: flex;
  align-items: center;
}

.app-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.app-title:hover {
  color: oklch(0.89 0.006 260);
  text-decoration: none;
}

.title-bar-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.title-bar-nav .nav-link {
  color: oklch(0.89 0.006 260);
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.title-bar-nav .nav-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.title-bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-user-name {
  color: oklch(0.89 0.006 260);
  font-weight: 500;
}

.user-profile-link {
  color: oklch(0.89 0.006 260);
  text-decoration: none;
  font-weight: 500;
}

.user-profile-link:hover {
  color: #fff;
}

.title-bar-right .btn {
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s, opacity 0.2s;
}

.title-bar-right .btn-primary {
  background: oklch(0.7 0.15 244);
  color: #fff;
}

.title-bar-right .btn-primary:hover {
  background: oklch(0.7 0.15 244);
}

.title-bar-right .btn-secondary {
  background: transparent;
  color: oklch(0.89 0.006 260);
  border: 1px solid oklch(0.89 0.006 260);
}

.title-bar-right .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* User menu dropdown in title bar */
.title-bar-right .user-menu {
  position: relative;
}

.title-bar-right .user-menu .dropdown-toggle {
  background: transparent;
  border: none;
  color: oklch(0.89 0.006 260);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.title-bar-right .user-menu .dropdown-toggle:hover {
  color: #fff;
}

.title-bar-right .user-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  transform: translateX(0);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 150px;
  max-width: calc(100vw - 1rem);
  display: none;
  z-index: 110;
}

.title-bar-right .user-menu .dropdown-menu.open {
  display: block;
}

.title-bar-right .user-menu .dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: oklch(0.35 0.045 260);
  text-decoration: none;
}

.title-bar-right .user-menu .dropdown-item:hover {
  background: oklch(0.98 0.003 260);
}

/* App content area (below title bar). Sits at a subtle gray-50 tint so
   centered content columns (documents-page, story-content, etc.) can pop
   forward on white with the edge-delineation treatment. */
.app-content {
  /* padding: 1rem; */
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background: oklch(0.98 0.003 260);
}

/* Center-content edge treatment: 1px vertical rules pinned to each edge of
   the content column plus a soft outer glow. Reads as "a page floating in a
   gutter" without introducing a card frame. `flex: 1` makes the column
   extend to fill its (flex-column) parent so short content still reaches
   the footer edge instead of ending mid-gutter. Applied via a mixin so any
   full-width layout with a max-width'd centered column can opt in. */
/* Site content area for public (non-app) pages */
.site-content {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: oklch(0.46 0.055 260);
  color: oklch(0.89 0.006 260);
  font-size: 0.875rem;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

.footer-center {
  text-align: center;
}

.footer-right {
  text-align: right;
}

.page-footer a {
  color: oklch(0.89 0.006 260);
  text-decoration: underline;
}

.page-footer a:hover {
  color: #fff;
}

.site-content a:link {
  color: oklch(0.52 0.18 250);
  text-decoration: underline;
}

.site-content a:visited {
  color: oklch(0.44 0.18 300);
}

.stealth-link:visited {
  color: inherit;
}

/* Storybook styles */
.storybook-layout {
  display: flex;
  min-height: 100vh;
}

.story-sidebar {
  flex: 0 0 250px;
  background-color: oklch(0.98 0.003 260);
  padding: 1rem;
  border-right: 1px solid oklch(0.93 0.005 260);
  min-height: 100vh;
}

.story-main {
  flex: 1;
  min-width: 0;
}

.story-sidebar h3 {
  margin-top: 0;
  color: oklch(0.42 0.008 260);
}

.story-nav-link {
  color: oklch(0.58 0.22 250) !important;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.story-nav-link:hover {
  background-color: oklch(0.93 0.005 260);
}

.story-nav-link.active {
  background-color: oklch(0.58 0.22 250);
  color: white !important;
}

.story-content {
  padding: 2rem;
}

.story-page h1 {
  margin-bottom: 1rem;
  border-bottom: 2px solid oklch(0.93 0.005 260);
  padding-bottom: 0.5rem;
}

.story-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.story-section:last-child {
  border-bottom: none;
}

.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

.color-swatch {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  border: 1px solid oklch(0.89 0.006 260);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px 8px;
  font-family: var(--font-monospace);
  line-height: 1.3;
}

.color-swatch-name {
  font-size: 11px;
  font-weight: 700;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fg-bg-grid {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.fg-bg-header {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}

.fg-bg-corner {
  width: 90px;
  min-width: 90px;
  font-size: 11px;
  color: oklch(0.63 0.012 260);
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
  font-family: var(--font-monospace);
}

.fg-bg-col-label {
  width: 64px;
  min-width: 64px;
  height: 28px;
  font-size: 9px;
  font-family: var(--font-monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid oklch(0.89 0.006 260);
  text-align: center;
  overflow: hidden;
}

.fg-bg-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}

.fg-bg-row-label {
  width: 90px;
  min-width: 90px;
  font-size: 11px;
  font-family: var(--font-monospace);
  font-weight: 700;
  display: flex;
  align-items: center;
}

.fg-bg-cell {
  width: 64px;
  min-width: 64px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid oklch(0.89 0.006 260);
}

.color-elements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.color-element-group h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: oklch(0.42 0.008 260);
}

.color-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.color-banners-demo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.color-tags-demo h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: oklch(0.42 0.008 260);
}

.color-tags-demo h3:first-child {
  margin-top: 0;
}

.color-input-demos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-input-demos label {
  font-size: 0.85rem;
  color: oklch(0.55 0.01 260);
  display: block;
  margin-bottom: 2px;
}

.font-showcase {
  margin: 1rem 0;
  padding: 1rem;
  background-color: oklch(0.98 0.003 260);
  border-radius: 4px;
  border: 1px solid oklch(0.93 0.005 260);
}

.font-showcase h3 {
  margin-top: 0;
  color: oklch(0.42 0.008 260);
}

.font-showcase p {
  margin: 0.5rem 0;
}

.markdown-content {
  background-color: oklch(0.98 0.003 260);
  padding: 2rem;
  border-radius: 4px;
  border: 1px solid oklch(0.93 0.005 260);
}

.markdown-content code {
  background-color: oklch(0.93 0.005 260);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

.markdown-content pre {
  background-color: oklch(0.93 0.005 260);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

.markdown-content pre code {
  background-color: transparent;
  padding: 0;
}

.markdown-content blockquote {
  border-left: 4px solid oklch(0.58 0.22 250);
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: oklch(0.55 0.01 260);
}

/* Error page styles */
.error-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.error-page {
  text-align: center;
  max-width: 700px;
  position: relative;
}

.error-code {
  font-family: var(--font-serif);
  font-size: 10rem;
  font-weight: 700;
  line-height: 1;
  color: oklch(0.85 0.008 260);
  transform: rotate(-25deg);
  user-select: none;
  position: absolute;
  top: -6rem;
  left: 50%;
  margin-left: -8rem;
  z-index: 0;
}

.error-emoji {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: oklch(0.85 0.008 260);
  transform: rotate(10deg);
  user-select: none;
  position: absolute;
  top: -7rem;
  left: 20%;
  margin-left: 13rem;
  z-index: 0;
}

.error-page h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.error-page p {
  color: oklch(0.55 0.01 260);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.error-page .hint {
  font-size: 0.9rem;
  color: oklch(0.75 0.01 260);
}

/* Form validation styles */
.form-field {
  margin-bottom: 1rem;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: oklch(0.58 0.2 25);
  border-width: 2px;
  background-color: oklch(0.97 0.012 25);
}

.field-error label {
  color: oklch(0.58 0.2 25);
}

.validation-error-text,
.error-message {
  color: oklch(0.58 0.2 25);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.validation-error-text:empty {
  display: none;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  font-size: 0.9rem;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background-color: oklch(0.97 0.012 25);
  border-color: oklch(0.58 0.2 25);
  color: oklch(0.58 0.2 25);
}

/* Helper text under a form field (e.g. why a field is locked) */
.form-help {
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Badge marking a protected system property (shown instead of a Delete button) */
.system-badge {
  border-radius: 8px;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: oklch(0.42 0.008 260);
  background-color: oklch(0.93 0.005 260);
  border: 1px solid oklch(0.85 0.008 260);
}

/* Radio button group */
.radio-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-weight: normal;
}

.radio-label input[type=radio] {
  margin: 0;
}

/* Form buttons */
.form-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}

/* Button variants */
.button-success {
  background-color: oklch(0.62 0.16 145);
  color: white;
}

.button-success:hover {
  background-color: oklch(0.68 0.15 145);
}

.button-warning {
  background-color: oklch(0.58 0.2 25);
  color: white;
}

.button-warning:hover {
  background-color: oklch(0.58 0.2 25);
}

.warning-text {
  color: oklch(0.58 0.2 25);
  font-weight: 500;
}

.pure-button-small {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

/* =============================================================================
   Global Loading Overlay
   ============================================================================= */
#global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  font-size: 1.25rem;
  color: oklch(0.3 0.006 260);
}

#global-loading-overlay.visible {
  display: flex;
}

/* Modal styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  border-radius: 8px;
  background-color: white;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.modal-content p {
  margin-bottom: 1rem;
  color: oklch(0.42 0.008 260);
}

.modal-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* =============================================================================
   Share Modal
   ============================================================================= */
.share-modal {
  width: 90%;
  height: 90vh;
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.share-modal-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.share-modal-table-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  min-height: 0;
}

.share-modal-table {
  width: 100%;
}

.share-modal-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.5rem;
  border-bottom: 2px solid oklch(0.85 0.008 260);
}

.share-modal-table td {
  padding: 0.5rem;
  vertical-align: middle;
}

.share-modal-row {
  transition: background-color 0.2s ease;
}

.share-modal-row.changed {
  background-color: oklch(0.97 0.055 92);
}

.share-modal-row.removed {
  background-color: oklch(0.9 0.045 20);
  text-decoration: line-through;
  color: oklch(0.55 0.01 260);
}

.share-modal-row.removed td {
  color: oklch(0.55 0.01 260);
}

.share-modal-user {
  line-height: 1.3;
}

.share-modal-user-name {
  font-weight: 500;
}

.share-modal-user-email {
  display: block;
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
}

.share-modal-you {
  color: oklch(0.52 0.2 258);
  font-size: 0.875rem;
  font-style: italic;
}

.share-modal-role-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: white;
}

.share-modal-role-text {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.share-modal-role-text.role-owner {
  background-color: oklch(0.92 0.045 145);
  color: oklch(0.35 0.1 145);
}

.share-modal-role-text.role-editor {
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
}

.share-modal-role-text.role-viewer {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.share-modal-role-removed {
  color: oklch(0.58 0.2 25);
  font-style: italic;
}

.share-modal-actions {
  white-space: nowrap;
}

.share-modal-remove {
  background-color: #fff;
  border-color: oklch(0.58 0.2 25);
  color: oklch(0.58 0.2 25);
}

.share-modal-remove:hover {
  background-color: oklch(0.58 0.2 25);
  color: #fff;
}

.share-modal-undo {
  background-color: #fff;
  border-color: oklch(0.55 0.01 260);
  color: oklch(0.55 0.01 260);
}

.share-modal-undo:hover {
  background-color: oklch(0.55 0.01 260);
  color: #fff;
}

.share-modal-error {
  background-color: oklch(0.9 0.045 20);
  color: oklch(0.32 0.12 22);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Share modal - pending addition row */
.share-modal-row.pending-add {
  background-color: oklch(0.92 0.045 145);
}

/* Share modal - search section */
.share-modal-search {
  max-width: 300px;
  margin-bottom: 0.5rem;
}

.share-modal-divider {
  border: none;
  border-top: 1px solid oklch(0.89 0.006 260);
  margin: 0.5rem 0 1rem 0;
  width: 100%;
}

/* Share modal - private checkbox section */
.share-modal-private-section {
  margin-bottom: 1em;
}

.share-modal-private-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  cursor: pointer;
}

.share-modal-private-subtitle {
  font-size: 0.85em;
  color: var(--text-muted, oklch(0.55 0.01 260));
  margin-top: 0.25em;
  margin-left: 1.5em;
}

.share-modal-search-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.share-modal-search-container {
  position: relative;
}

.share-modal-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.share-modal-search-input:focus {
  outline: none;
  border-color: oklch(0.87 0.06 245);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.share-modal-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid oklch(0.85 0.008 260);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.share-modal-search-dropdown.visible {
  display: block;
}

.share-modal-search-option {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.share-modal-search-option.highlighted {
  background-color: oklch(0.93 0.005 260);
}

.share-modal-search-option:hover {
  background-color: oklch(0.98 0.003 260);
}

.share-modal-search-option-name {
  font-weight: 500;
}

.share-modal-search-option-email {
  font-size: 0.8rem;
  color: oklch(0.55 0.01 260);
}

.share-modal-search-no-results {
  padding: 0.5rem 0.75rem;
  color: oklch(0.55 0.01 260);
  font-style: italic;
}

.share-modal-search-loading {
  padding: 0.5rem 0.75rem;
  color: oklch(0.55 0.01 260);
}

/* Server info styles */
.server-info {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.server-info-item {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  border-radius: 8px;
  background-color: oklch(0.98 0.003 260);
}

.server-info-item h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(0.55 0.01 260);
}

.server-info-value {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: oklch(0.24 0.006 260);
}

.server-info-item.env-production {
  background-color: oklch(0.97 0.012 25);
  border: 1px solid oklch(0.9 0.045 20);
}

.server-info-item.env-production .server-info-value {
  color: oklch(0.32 0.12 22);
}

/* Application styles */
.room {
  padding: 5px 5px;
}

/* =============================================================================
   Dropdown Menu Component
   ============================================================================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 160px;
  padding: 0.5rem 0;
  margin: 0.25rem 0 0 0;
  background-color: white;
  border: 1px solid oklch(0.93 0.005 260);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  list-style: none;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-menu.dropdown-right {
  left: auto;
  right: 0;
}

.dropdown-menu.dropdown-above {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.25rem 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  color: oklch(0.24 0.006 260);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
}

.dropdown-item:hover {
  background-color: oklch(0.98 0.003 260);
}

.dropdown-item.dropdown-item-danger {
  color: oklch(0.58 0.2 25);
}

.dropdown-item.dropdown-item-danger:hover {
  background-color: oklch(0.97 0.012 25);
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  border-top: 1px solid oklch(0.93 0.005 260);
}

/* Disabled dropdown items */
.dropdown-item.disabled {
  color: oklch(0.75 0.01 260);
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown-item.disabled:hover {
  background-color: transparent;
}

/* Dropdown item with label and shortcut */
.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.dropdown-item-label {
  flex: 1;
}

.dropdown-item-shortcut {
  font-size: 0.75rem;
  color: oklch(0.55 0.01 260);
  text-align: right;
  white-space: nowrap;
}

.dropdown-item.disabled .dropdown-item-shortcut {
  color: oklch(0.85 0.008 260);
}

/* =============================================================================
   Editable Title Component
   ============================================================================= */
.editable-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editable-title-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: background-color 120ms ease;
}

.editable-title-display:hover {
  background-color: oklch(0.98 0.003 260);
}

.editable-title-text {
  margin: 0;
}

.editable-title-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: none;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  cursor: pointer;
  color: oklch(0.55 0.01 260);
  line-height: 1;
}

.editable-title-btn:hover {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.editable-title-editor {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

/* Data-attribute based editing state */
.editable-title[data-editing=true] .editable-title-display {
  display: none;
}

.editable-title[data-editing=true] .editable-title-editor {
  display: flex;
}

.editable-title-input {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border: 2px solid oklch(0.58 0.22 250);
  border-radius: 4px;
  outline: none;
  min-width: 200px;
}

.editable-title-actions {
  display: flex;
  gap: 0.25rem;
}

.editable-title-save,
.editable-title-cancel {
  padding: 0.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}

.editable-title-save {
  background-color: oklch(0.62 0.16 145);
  color: white;
}

.editable-title-save:hover {
  background-color: oklch(0.62 0.16 145);
}

.editable-title-cancel {
  background-color: oklch(0.55 0.01 260);
  color: white;
}

.editable-title-cancel:hover {
  background-color: oklch(0.55 0.01 260);
}

/* =============================================================================
   Ordered Multi-Select Component
   ============================================================================= */
.multi-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.multi-select-selected {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.multi-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: oklch(0.37 0.15 258);
  color: white;
  font-size: 0.8rem;
  border-radius: 12px;
}

.multi-select-chip .chip-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
}

.multi-select-chip .chip-remove:hover {
  opacity: 1;
}

.multi-select-dropdown {
  position: relative;
  display: inline-block;
}

.multi-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.42 0.008 260);
  background-color: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.multi-select-trigger:hover {
  background-color: oklch(0.93 0.005 260);
  border-color: oklch(0.75 0.01 260);
}

.multi-select-trigger .dropdown-arrow {
  font-size: 0.75rem;
  color: oklch(0.55 0.01 260);
}

.multi-select-option {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.multi-select-option:hover,
.multi-select-option-highlighted {
  background-color: oklch(0.98 0.003 260);
}

.multi-select-option-highlighted:hover {
  background-color: oklch(0.93 0.005 260);
}

.multi-select-option.selected,
.multi-select-option[data-selected=true] {
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
}

/* =============================================================================
   Searchable Multi-Select Component
   ============================================================================= */
.searchable-multi-select {
  position: relative;
  display: inline-block;
  min-width: 250px;
}

.sms-input-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.6rem;
  min-height: 38px;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  background-color: #fff;
  cursor: text;
  outline: none;
}

.sms-input-area:focus {
  border-color: oklch(0.58 0.22 250);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.sms-chips {
  display: contents;
}

.sms-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  background-color: oklch(0.7 0.15 244);
  color: white;
  font-size: 0.8rem;
  border-radius: 10px;
  white-space: nowrap;
}

.sms-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
  margin-left: 0.1rem;
}

.sms-chip-remove:hover {
  color: oklch(0.62 0.2 27);
  opacity: 1;
}

.sms-text-input {
  flex: 1;
  min-width: 60px;
  font-family: var(--font-sans-serif);
  font-size: 0.9rem;
  white-space: nowrap;
}

.sms-placeholder {
  color: oklch(0.55 0.01 260);
  pointer-events: none;
}

.sms-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #000;
  vertical-align: text-bottom;
  margin-left: -0.5px;
  margin-right: -0.5px;
}

.sms-cursor.blink {
  animation: sms-cursor-blink 1s step-end infinite;
}

@keyframes sms-cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.sms-selection {
  background-color: oklch(0.87 0.06 245);
}

.sms-input-area:not(:focus) .sms-selection {
  background-color: oklch(0.85 0.008 260);
}

/* Dropdown list */
.sms-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  padding: 0.25rem 0;
  margin: 0.25rem 0 0 0;
  background-color: white;
  border: 1px solid oklch(0.93 0.005 260);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  list-style: none;
}

.searchable-multi-select[data-open=true] .sms-dropdown-list {
  display: block;
}

.sms-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.sms-option:hover {
  background-color: oklch(0.98 0.003 260);
}

.sms-option-highlighted {
  background-color: oklch(0.93 0.005 260);
}

.sms-option-highlighted:hover {
  background-color: oklch(0.89 0.006 260);
}

/* Freetext option styling - subtle emphasis to distinguish from regular options */
.sms-option-freetext {
  font-style: italic;
  color: oklch(0.42 0.008 260);
}

.sms-option[data-hidden=true] {
  display: none;
}

.sms-option[data-selected=true] {
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
}

.sms-option-highlight {
  font-weight: 600;
  background-color: oklch(0.97 0.055 92);
}

.sms-no-results {
  padding: 0.5rem 0.75rem;
  color: oklch(0.55 0.01 260);
  font-style: italic;
  font-size: 0.9rem;
}

/* =============================================================================
   Document List (Finder-style)
   ============================================================================= */
.documents-page,
.projects-page {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 120ch;
  margin: 0 auto;
}

.documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.documents-header h1 {
  margin: 0;
}

.documents-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: oklch(0.98 0.003 260);
  border-radius: 4px;
}

.documents-controls input[type=text] {
  flex: 1;
  max-width: 300px;
  padding: 0.5rem 0.75rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
}

.documents-controls input[type=text]:disabled {
  background-color: oklch(0.93 0.005 260);
  cursor: not-allowed;
}

.document-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.document-row {
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.document-row:last-child {
  border-bottom: none;
}

/* Project rows in projects index - flex layout for left/right alignment */
.project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-right: 0.5rem;
}

.project-row .document-link {
  flex: 1;
  min-width: 0;
}

.project-row .license-badge {
  flex-shrink: 0;
}

.project-row .document-updated {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: oklch(0.55 0.01 260);
}

.document-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}

.document-link:hover {
  background-color: oklch(0.98 0.003 260);
}

.document-link:visited {
  color: inherit;
}

.document-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.empty-document-icon {
  color: oklch(0.58 0.2 25);
  /* Red for empty documents */
  font-weight: bold;
}

.document-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.document-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.document-title-row .document-tags {
  flex-shrink: 0;
}

.document-title {
  font-weight: 600;
  font-size: 1rem;
  color: oklch(0.24 0.006 260);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-row.is-deleted .document-title {
  color: oklch(0.55 0.01 260);
  text-decoration: line-through;
}

.document-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: oklch(0.55 0.01 260);
}

.document-tags {
  display: flex;
  gap: 0.25rem;
}

.tag {
  border-radius: 8px;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
  font-size: 0.75rem;
}

.document-updated {
  white-space: nowrap;
}

.document-role {
  border-radius: 8px;
  padding: 0.15rem 0.5rem;
  background-color: oklch(0.92 0.045 145);
  color: oklch(0.35 0.1 145);
  font-size: 0.75rem;
}

.document-role.role-viewer {
  background-color: oklch(0.89 0.006 260);
  color: oklch(0.42 0.008 260);
}

.document-role.role-editor {
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
}

.document-role.role-owner {
  background-color: oklch(0.92 0.045 145);
  color: oklch(0.35 0.1 145);
}

.documents-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: oklch(0.55 0.01 260);
}

.documents-empty p {
  margin: 0.5rem 0;
}

/* =============================================================================
   Document View Page
   ============================================================================= */
.document-view {
  padding: 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Directory view sits on the same content column as documents/projects/users
   so the gutter treatment is consistent across every listing page. */
.directory-view {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.document-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.document-toolbar .toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.document-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: oklch(0.55 0.01 260);
}

.document-toolbar .toolbar-right .document-type-badge {
  font-weight: 500;
  color: oklch(0.42 0.008 260);
}

.document-toolbar .dropdown-trigger {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
}

.document-header {
  padding: 1.5rem;
}

.document-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.document-breadcrumb a {
  color: oklch(0.55 0.01 260);
  text-decoration: none;
}

.document-breadcrumb a:hover {
  color: oklch(0.42 0.008 260);
  text-decoration: underline;
}

.breadcrumb-icon {
  font-size: 0.8rem;
}

.breadcrumb-separator {
  color: oklch(0.75 0.01 260);
  margin: 0 0.1rem;
}

.document-header h1 {
  margin: 0;
}

/* Three-slot header row: breadcrumb left, title geometrically centered,
   tags/actions right. Grid keeps the center col in the true middle
   regardless of side widths. */
.document-header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.document-header-left {
  min-width: 0;
  overflow: hidden;
  justify-self: start;
}

.document-header-center {
  min-width: 0;
  justify-self: center;
}

.document-header-right {
  min-width: 0;
  justify-self: end;
}

/* Below 900px the tags slot wraps under the breadcrumb/title line. */
@media (max-width: 900px) {
  .document-header-row {
    grid-template-columns: 1fr auto;
  }
  .document-header-right {
    grid-column: 1/-1;
    justify-self: start;
    margin-top: 0.5rem;
  }
}
/* Below 600px stack all three: breadcrumb / title / tags in a single column. */
@media (max-width: 600px) {
  .document-header-row {
    grid-template-columns: 1fr;
  }
  .document-header-left,
.document-header-center,
.document-header-right {
    grid-column: 1/-1;
    justify-self: start;
  }
  .document-header-center {
    margin-top: 0.25rem;
  }
  .document-header-right {
    margin-top: 0.5rem;
  }
}
/* Directory-only action bar (contains the "New" dropdown) sits below the header row. */
.directory-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.document-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: oklch(0.55 0.01 260);
}

.document-tags {
  margin-top: 0.75rem;
}

/* Document tags editor - compact variant for inline editing */
.document-tags-editor {
  margin-top: 0.5rem;
}

/* When the tags editor lives in the right slot of .document-header-row,
   it aligns inline with the title instead of stacking below the header. */
.document-header-right .document-tags-editor {
  margin-top: 0;
}

.document-tags-editor .searchable-multi-select {
  font-size: 0.85rem;
}

.document-tags-editor .sms-input-area {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.document-tags-editor .sms-chip {
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 10px;
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.document-tags-editor .sms-chip-remove {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  padding: 0 0.15rem;
}

.document-tags-editor .sms-text-input {
  font-size: 0.85rem;
}

.document-tags-editor .sms-placeholder {
  font-size: 0.8rem;
}

.document-tags-editor .sms-dropdown-list {
  font-size: 0.85rem;
  max-height: 200px;
}

.document-tags-editor .sms-option {
  padding: 0.35rem 0.75rem;
}

.document-content {
  padding: 1.5rem;
}

.document-content .hint {
  color: oklch(0.55 0.01 260);
  font-style: italic;
}

/* Sheet document styles */
.sheet-document {
  width: 100%;
  max-width: 1400px;
}

.document-tab-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* No horizontal padding at this level so the tabs, sheet-data-toolbar,
   and add-row-controls sit flush with the sheet-document edges.
   Children that need breathing room (banners, spreadsheet-container,
   sheet-models-page) apply their own horizontal padding/margin. */
  padding: 0;
}

/* Banners inside the sheet layout keep a horizontal inset so they don't
   look flush like the tab strip does. */
.sheet-layout > .app-banner {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* A banner directly under the document toolbar takes the toolbar's own inset,
   so the two line up on the left edge of the content column. */
.document-view > .app-banner {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Page-level notice banners share one layout; color modifiers below set the
   palette per context. A banner is a flex row whose optional .banner-action
   button is pinned to the far right. */
.app-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  font-size: 0.9rem;
  border-radius: 4px;
}

/* Inline banner button (e.g. "Return to current", "Update"); always right-aligned. */
.banner-action {
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 0.15rem 0.5rem;
  font: inherit;
}

.banner-action:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Warning palette: viewing a past Sheet revision (read-only). */
.sheet-revision-banner {
  background: var(--color-warning-bg, oklch(0.97 0.055 92));
  border-color: var(--color-warning-border, oklch(0.85 0.17 90));
}

/* Info palette: the settings page is open but read-only for this level. */
.settings-readonly-banner {
  background: oklch(0.96 0.02 250);
  border-color: oklch(0.87 0.06 245);
  color: oklch(0.52 0.2 258);
}

/* The settings form wraps its controls in a fieldset so one `disabled`
   attribute turns the whole page read-only. Strip the browser default box so
   the fieldset is invisible. */
.settings-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Grey palette: read-only presentations — the history lookback, the published
   view, and the email preview (layout from .app-banner). */
.history-view-banner,
.published-view-banner,
.email-view-banner {
  font-family: var(--font-sans-serif);
  background: oklch(0.93 0.005 260);
  border-color: oklch(0.75 0.01 260);
  color: oklch(0.42 0.008 260);
}

/* Info palette: a bound Sheet sitting behind its template's schema head. */
.sheet-template-stale-banner {
  background: oklch(0.96 0.02 250);
  border-color: oklch(0.87 0.06 245);
  color: oklch(0.52 0.2 258);
}

.history-btn .history-summary {
  flex: 1;
}

.document-tab-nav {
  border-bottom: 2px solid oklch(0.93 0.005 260);
}

.document-tab-nav .pure-menu-list {
  display: flex;
  gap: 0;
}

.document-tab {
  padding: 0.75rem 1.5rem !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: oklch(0.42 0.008 260) !important;
  text-decoration: none;
}

.document-tab:hover {
  background-color: oklch(0.98 0.003 260);
  color: oklch(0.58 0.22 250) !important;
}

.document-tab.active {
  border-bottom-color: oklch(0.58 0.22 250);
  color: oklch(0.58 0.22 250) !important;
  font-weight: 500;
}

/* Collapsible tab bar: "Data" always shows; every other tab is .document-tab-extra
   and stays hidden until the chevron toggle is checked. Pure CSS via :has() — the
   checkbox holds the open/closed state, no JS. */
/* Specificity must beat pure-min's `.pure-menu-horizontal .pure-menu-item`
   (0,2,0), which otherwise forces these back to inline-block. */
.document-tab-nav .pure-menu-item.document-tab-extra {
  display: none;
}

.document-tab-nav:has(.document-tabs-toggle:checked) .pure-menu-item.document-tab-extra {
  display: inline-block;
}

.document-tabs-toggle-item {
  display: flex;
  align-items: center;
  /* Auto block margins center the toggle <li> vertically in the menu row
   (otherwise it sits at the top and the chevron looks high). */
  margin-top: auto;
  margin-bottom: auto;
}

/* The chevron is the checkbox itself (appearance stripped), so it stays keyboard-
   focusable and Space-togglable. Rotates › → ‹ with a transition between states. */
.document-tabs-toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0 0.5rem;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: oklch(0.42 0.008 260);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* Chevron drawn from borders (not a glyph) so it sits perfectly centered in the
   flex-centered button — the › glyph rendered high in its line box. A small square
   with two borders rotates 45° → "›" (collapsed); +180° → "‹" (expanded). */
.document-tabs-toggle::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  /* The bordered corner sits up-and-right; nudge so the chevron reads centered. */
  margin-left: -0.15rem;
}

.document-tabs-toggle:checked::before {
  transform: rotate(225deg);
  margin-left: 0;
  margin-right: -0.15rem;
}

.document-tabs-toggle:hover {
  background-color: oklch(0.98 0.003 260);
  color: oklch(0.58 0.22 250);
}

.document-tabs-toggle:focus-visible {
  outline: 2px solid oklch(0.58 0.22 250);
  outline-offset: 1px;
}

.document-tab-content {
  padding: 1rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* =============================================================================
   Calendar document styles
   ============================================================================= */
.calendar-month-grid,
.calendar-week-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
}

.calendar-month-header,
.calendar-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.calendar-month-title,
.calendar-week-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.calendar-nav-prev,
.calendar-nav-next {
  min-width: 2.5rem;
}

.calendar-header-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calendar-nav-today {
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.calendar-weekday-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border-bottom: 1px solid #e9ecef;
}

.calendar-weekday-header {
  text-align: center;
  font-weight: 500;
  font-size: 0.85rem;
  color: #6c757d;
  padding: 0.35rem 0;
}

.calendar-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  flex: 1;
  min-height: 0;
}

.calendar-day-cell {
  border: 1px solid #e9ecef;
  padding: 0.25rem;
  min-height: 5rem;
  overflow: hidden;
  cursor: pointer;
}

.calendar-day-cell:hover {
  background-color: #f8f9fa;
}

.calendar-day-today {
  background-color: #e7f1ff;
}

.calendar-day-today .calendar-day-number,
.calendar-day-today .calendar-day-column-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.35em;
  border-radius: 999px;
  background-color: oklch(0.58 0.2 25);
  color: #fff;
  line-height: 1;
  font-weight: 600;
}

.calendar-day-other-month {
  color: #adb5bd;
  background-color: #f8f9fa;
}

.calendar-day-number {
  font-size: 0.85rem;
  font-weight: 500;
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.calendar-event-marker {
  display: block;
  width: 100%;
  padding: 0.1rem 0.3rem;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: left;
  background: oklch(0.58 0.22 250);
  color: #fff;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.calendar-event-marker:hover {
  opacity: 0.9;
}
.calendar-event-marker.is-continuation {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.calendar-event-marker.is-continued {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-event-marker-week {
  position: absolute;
  --col: 0;
  --total: 1;
  left: calc(var(--col) / var(--total) * 100%);
  width: calc(1 / var(--total) * 100%);
  top: calc(var(--start-pct, 0) * 1%);
  height: calc(var(--dur-pct, 4) * 1%);
  min-height: 1.2em;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.calendar-week-all-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.calendar-event-marker-all-day {
  font-size: 0.72rem;
  background: oklch(0.58 0.22 250);
  color: #fff;
}

.calendar-day-columns {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  flex: 1;
  min-height: 0;
}

.calendar-day-column {
  border-left: 1px solid #e9ecef;
  min-height: 20rem;
}

.calendar-day-column:first-child {
  border-left: none;
}

.calendar-day-column-header {
  text-align: center;
  font-weight: 500;
  font-size: 0.85rem;
  color: #6c757d;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e9ecef;
}

.calendar-day-column-name {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.calendar-day-column-date {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
}

.calendar-hour-row {
  border-bottom: 1px solid #f1f3f5;
  height: 3rem;
  position: relative;
}

.calendar-hour-label {
  position: absolute;
  left: -3.5rem;
  top: -0.5em;
  font-size: 0.7rem;
  color: #6c757d;
  white-space: nowrap;
}

.calendar-hour-rows {
  position: relative;
}

.calendar-day-column:first-child .calendar-hour-rows {
  margin-left: 3.5rem;
}

.calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--now-pct, 0) * 1%);
  height: 2px;
  background-color: oklch(0.58 0.2 25);
  z-index: 2;
  pointer-events: none;
}

.calendar-now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: oklch(0.58 0.2 25);
}

.calendar-event-block {
  position: absolute;
  left: 2px;
  right: 2px;
  background: #007bff;
  color: #fff;
  border-radius: 3px;
  padding: 0.15rem 0.3rem;
  font-size: 0.78rem;
  overflow: hidden;
  cursor: pointer;
}

.calendar-event-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem;
}

.calendar-event-form {
  max-width: 600px;
}

.calendar-event-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

.calendar-event-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calendar-event-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.calendar-event-view-title {
  margin: 0;
  font-size: 1.5rem;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.calendar-event-view-time {
  margin: 0;
  color: oklch(0.55 0.01 260);
}

.calendar-event-view-label {
  font-weight: 600;
  color: oklch(0.55 0.01 260);
}

.calendar-event-view-description p {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
}

.calendar-event-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid oklch(0.89 0.006 260);
  margin-top: 0.5rem;
}

.calendar-event-form[data-unedited=true] .calendar-event-header {
  display: none;
}

.calendar-event-menu-trigger {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: oklch(0.55 0.01 260);
  border-radius: 4px;
}
.calendar-event-menu-trigger:hover {
  background-color: oklch(0.89 0.006 260);
}

.calendar-event-field-group {
  margin-bottom: 0.75rem;
}
.calendar-event-field-group label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

.calendar-event-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.calendar-event-time-field {
  flex: 1;
}

.calendar-schedule-editor {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  padding: 0.75rem;
}

.calendar-schedule {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  padding: 0.75rem;
}
.calendar-schedule > label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

.schedule-until-group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid oklch(0.89 0.006 260);
}
.schedule-until-group input[type=date] {
  width: 12rem;
}

.schedule-editor-body {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.schedule-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.schedule-editor-row > label {
  font-weight: 600;
  margin: 0;
}
.schedule-editor-row input[type=number] {
  width: 5rem;
}
.schedule-editor-row input[type=time] {
  width: 8rem;
}
.schedule-editor-row input[type=text] {
  flex: 1;
  min-width: 12rem;
}

.schedule-editor-row-stacked {
  flex-direction: column;
  align-items: stretch;
}
.schedule-editor-row-stacked > label {
  margin-bottom: 0.25rem;
}

.schedule-editor-hint {
  color: oklch(0.63 0.012 260);
  font-size: 0.85em;
  margin-top: 0.25rem;
}

.schedule-editor-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.schedule-editor-choice-grid.dow-grid .schedule-editor-choice, .schedule-editor-choice-grid.weeks-grid .schedule-editor-choice {
  min-width: 3.5rem;
}
.schedule-editor-choice-grid.months-grid .schedule-editor-choice {
  min-width: 4rem;
}

label.schedule-editor-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  cursor: pointer;
}
label.schedule-editor-choice input[type=checkbox] {
  margin: 0;
}

.calendar-attendee-picker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}

.calendar-member:hover {
  background-color: #f8f9fa;
}

.calendar-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0;
}

.calendar-new-event {
  align-self: flex-start;
}

.calendar-agenda {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  overflow-y: auto;
  min-height: 0;
}

.calendar-agenda-empty {
  color: oklch(0.63 0.012 260);
  font-style: italic;
  padding: 1rem 0;
}

.calendar-agenda-day {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.calendar-agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.25rem 0.5rem;
  background: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
  border-radius: 4px;
  flex: 0 0 auto;
}

.calendar-agenda-weekday {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(0.55 0.01 260);
}

.calendar-agenda-daynum {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.calendar-agenda-month {
  font-size: 0.7rem;
  color: oklch(0.55 0.01 260);
}

.calendar-agenda-events {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar-agenda-event {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  white-space: normal;
  text-overflow: clip;
}

.calendar-agenda-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  opacity: 0.85;
}

.calendar-agenda-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .calendar-month-grid > .calendar-weekday-headers,
.calendar-month-grid > .calendar-day-grid,
.calendar-week-grid > .calendar-day-columns {
    display: none;
  }
  .calendar-agenda {
    display: flex;
  }
  .calendar-month-header,
.calendar-week-header {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }
  .calendar-month-title,
.calendar-week-title {
    font-size: 1rem;
  }
}
.sheet-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* Models page scrollable content. Horizontal inset is content-local: the
   sheet-layout no longer pads its children, so this and the Views/Forms
   pages each supply their own breathing room. The Data tab is the
   exception — it stays flush at this level and its spreadsheet-container
   supplies the inset separately. */
.sheet-models-page {
  overflow-y: auto;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Read-only schema view (viewing a past revision): show the models/fields but
   neutralize every editing affordance. Inputs read as plain text; drag handles,
   drop zones and menus are removed. */
.sheet-models-page.read-only input,
.sheet-models-page.read-only select,
.sheet-models-page.read-only textarea,
.sheet-models-page.read-only button,
.sheet-models-page.read-only .dropdown {
  pointer-events: none;
}

.sheet-models-page.read-only input,
.sheet-models-page.read-only select,
.sheet-models-page.read-only textarea {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.sheet-models-page.read-only .drag-handle,
.sheet-models-page.read-only .drop-zone,
.sheet-models-page.read-only .model-fields-actions {
  display: none;
}

/* Hide the model/field action menus (delete) but keep the parent-inheritance
   selector visible — it conveys schema info; it's made non-interactive above. */
.sheet-models-page.read-only .dropdown:not(.parent-selector) {
  display: none;
}

.sheet-page h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.sheet-page .hint {
  color: oklch(0.55 0.01 260);
  font-style: italic;
}

/* Models error message */
.models-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: oklch(0.9 0.045 20);
  border: 1px solid oklch(0.9 0.045 20);
  border-radius: 4px;
  color: oklch(0.32 0.12 22);
}

.models-error-message {
  flex: 1;
}

.models-error-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: oklch(0.32 0.12 22);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  opacity: 0.7;
}

.models-error-close:hover {
  opacity: 1;
}

/* Models list container */
.models-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.models-empty {
  padding: 2rem;
  text-align: center;
  background-color: oklch(0.98 0.003 260);
  border-radius: 8px;
}

.models-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.93 0.005 260);
}

/* Model card */
.model-card {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 8px;
  padding: 1rem;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.model-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.model-card-name {
  font-size: 1.1rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  background: transparent;
  flex: 1;
  margin-right: 0.5rem;
}

.model-card-name:hover {
  border-color: oklch(0.93 0.005 260);
  background-color: oklch(0.98 0.003 260);
}

.model-card-name:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
  background-color: #fff;
}

/* Parent model selector */
.parent-selector {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.parent-selector-trigger {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  color: oklch(0.55 0.01 260);
  background: transparent;
  border: 1px solid transparent;
}

.parent-selector-trigger:hover {
  background-color: oklch(0.98 0.003 260);
  border-color: oklch(0.93 0.005 260);
}

.parent-selector-menu {
  min-width: 200px;
  max-width: 280px;
  padding: 0.5rem;
}

.parent-selector-search {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.parent-selector-search:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
}

.parent-selector-options {
  max-height: 200px;
  overflow-y: auto;
}

.parent-selector-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.parent-selector-option:hover {
  background-color: oklch(0.98 0.003 260);
}

.parent-selector-option input[type=checkbox] {
  margin: 0;
}

.parent-option-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-selector-empty {
  padding: 0.5rem;
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
}

/* Model fields list */
.model-fields-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.model-fields-empty {
  margin: 0;
  padding: 0.5rem;
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
}

.model-field-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 4px;
}

.model-field-row:hover {
  background-color: oklch(0.98 0.003 260);
}

/* Inherited fields section */
.inherited-fields-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed oklch(0.89 0.006 260);
}

.own-fields-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* PersonalInfo group: a locked cluster of part columns (added/removed as a unit) */
.personal-info-group {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  background-color: oklch(0.98 0.003 260);
}

.personal-info-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.personal-info-group-title {
  font-weight: 600;
  color: oklch(0.55 0.01 260);
}

.personal-info-group-parts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.model-field-row.personal-info-part {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background-color: #ffffff;
  opacity: 0.95;
}

.add-personal-info-button {
  margin-left: 0.5rem;
}

/* Inherited (read-only) field row - stays horizontal */
.model-field-row.inherited-field {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background-color: oklch(0.98 0.003 260);
  opacity: 0.8;
}

.model-field-row.inherited-field:hover {
  background-color: oklch(0.93 0.005 260);
}

.inherited-field-indicator {
  color: oklch(0.75 0.01 260);
  font-size: 0.875rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.field-name-readonly {
  flex: 1;
  font-size: 0.875rem;
  color: oklch(0.42 0.008 260);
  padding: 0.375rem 0.5rem;
}

.field-kind-readonly {
  width: 120px;
  font-size: 0.875rem;
  color: oklch(0.55 0.01 260);
  padding: 0.375rem 0.5rem;
}

.inherited-from {
  font-size: 0.75rem;
  color: oklch(0.75 0.01 260);
  white-space: nowrap;
}

.field-name-input {
  flex: 1;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

.field-name-input:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
}

.field-kind-select {
  width: 120px;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  background-color: #fff;
}

.field-kind-select:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
}

/* Model field row content wrapper */
.model-field-row-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.model-field-row-content .field-name-input {
  flex: 1;
  min-width: 0;
}

.model-field-row-content .field-kind-select {
  flex-shrink: 0;
}

/* Options field variants editor */
.options-variants-editor {
  margin-left: 1.75rem;
  padding: 0.5rem;
  background-color: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.93 0.005 260);
  border-radius: 4px;
}

.variant-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.variant-row:last-of-type {
  margin-bottom: 0;
}

.variant-input {
  flex: 1;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.variant-input:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
}

.variant-remove-btn {
  padding: 0.125rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  color: oklch(0.58 0.2 25);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.variant-remove-btn:hover {
  background-color: oklch(0.97 0.012 25);
  border-color: oklch(0.58 0.2 25);
}

.variant-add-btn {
  margin-top: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: oklch(0.58 0.22 250);
  background: transparent;
  border: 1px dashed oklch(0.58 0.22 250);
  border-radius: 4px;
  cursor: pointer;
}

.variant-add-btn:hover {
  background-color: oklch(0.96 0.02 250);
}

/* Inherited field variants display */
.inherited-variants {
  font-style: italic;
  color: oklch(0.55 0.01 260);
}

/* Model field actions */
.model-fields-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.add-field-button {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
}

/* Small ellipsis menu button for models/fields */
.model-card-header .dropdown-trigger,
.model-field-row .dropdown-trigger {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  color: oklch(0.55 0.01 260);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}

.model-card-header .dropdown-trigger:hover,
.model-field-row .dropdown-trigger:hover {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.model-card-header .dropdown-trigger:focus-visible,
.model-field-row .dropdown-trigger:focus-visible {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
  outline: 2px solid oklch(0.58 0.22 250);
  outline-offset: 1px;
}

.document-access {
  padding: 1.5rem;
  border-top: 1px solid oklch(0.93 0.005 260);
}

.document-access h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

/* Status badges */
.status-active {
  color: oklch(0.35 0.1 145);
}

.status-deleted {
  color: oklch(0.32 0.12 22);
}

/* Delete confirmation modal */
#delete-confirm-modal {
  display: none;
}

#delete-confirm-modal[data-visible=true] {
  display: flex;
}

#make-template-modal {
  display: none;
}

#make-template-modal[data-visible=true] {
  display: flex;
}

#make-template-modal .modal-content {
  max-width: 640px;
}

/* Superadmin permanent ("true") delete modal */
#hard-delete-modal {
  display: none;
}

#hard-delete-modal[data-visible=true] {
  display: flex;
}

.hard-delete-modal-content {
  max-width: 560px;
}

.hard-delete-effects {
  margin: 0 0 1rem 1.25rem;
  color: oklch(0.42 0.008 260);
}

.hard-delete-effects li {
  margin-bottom: 0.25rem;
}

.hard-delete-phrase {
  font-family: var(--font-monospace);
  font-weight: 700;
  background-color: oklch(0.93 0.005 260);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

/* Phase 5c "advance to newest template" modal */
#sheet-ref-advance-modal {
  display: none;
}

#sheet-ref-advance-modal[data-visible=true] {
  display: flex;
}

.schema-advance-changes {
  margin: 0 0 1rem 1.25rem;
  color: oklch(0.42 0.008 260);
  max-height: 16rem;
  overflow-y: auto;
}

.schema-advance-changes li {
  margin-bottom: 0.25rem;
}

.schema-advance-hidden-note {
  color: oklch(0.42 0.008 260);
}

.schema-advance-unavailable {
  color: oklch(0.63 0.012 260);
}

.hard-delete-confirm-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  font-family: var(--font-monospace);
}

/* Stronger red than .button-warning to mark an irreversible action. */
.button-danger {
  background-color: oklch(0.32 0.12 22);
  color: white;
}

.button-danger:hover {
  background-color: oklch(0.4 0.14 22);
}

.button-danger:disabled,
.button-danger[disabled] {
  background-color: oklch(0.9 0.045 20);
  color: #fff;
  cursor: not-allowed;
}

/* Project settings "Danger Zone" section */
.danger-zone {
  border-radius: 8px;
  border: 1px solid oklch(0.9 0.045 20);
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: oklch(0.9 0.045 20);
}

.danger-zone h3 {
  color: oklch(0.32 0.12 22);
  margin-top: 0;
}

/* =============================================================================
   User Profile Pages
   ============================================================================= */
.users-page {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  width: 100%;
  max-width: 120ch;
  margin: 0 auto;
  padding: 1rem 2rem;
}

/* Open-sided list (matches .document-list). The column's own edges are
   drawn by content-column-edges on the page container; the list carries
   only the row separators. */
.user-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.user-item {
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.user-item:last-child {
  border-bottom: none;
}

.user-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}

.user-link:hover {
  background-color: oklch(0.98 0.003 260);
}

.user-link:visited {
  color: inherit;
}

.user-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  display: block;
  font-weight: 500;
  color: oklch(0.24 0.006 260);
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: oklch(0.55 0.01 260);
  margin-top: 0.25rem;
}

.user-email {
  color: oklch(0.55 0.01 260);
}

.user-private-tag {
  background-color: oklch(0.9 0.045 20);
  color: oklch(0.32 0.12 22);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.user-profile {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  /* Match documents/projects/users at 120ch so all listing/profile pages
   share the same column width. */
  width: 100%;
  max-width: 120ch;
  min-width: min(800px, 100%);
  margin: 0 auto;
  padding: 1rem;
}

.user-profile h1 {
  margin-bottom: 0.5rem;
}

.profile-status {
  margin-bottom: 1rem;
}

.status-public {
  border-radius: 8px;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: oklch(0.92 0.045 145);
  color: oklch(0.35 0.1 145);
  font-size: 0.875rem;
}

.status-private {
  border-radius: 8px;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: oklch(0.9 0.045 20);
  color: oklch(0.32 0.12 22);
  font-size: 0.875rem;
}

/* Administrative badge. The level modifier only changes the colour; see
   `common::superadmin::AdminLevel::css_class`. */
.status-superadmin {
  border-radius: 8px;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: oklch(0.97 0.055 92);
  color: oklch(0.5 0.11 78);
  font-size: 0.875rem;
}

.status-admin-l1 {
  background: oklch(0.9 0.045 20);
  color: oklch(0.32 0.12 22);
}

.status-admin-l2 {
  background: oklch(0.97 0.055 92);
  color: oklch(0.5 0.11 78);
}

.status-admin-l3 {
  background: oklch(0.88 0.05 305);
  color: oklch(0.53 0.22 300);
}

.status-timezone {
  border-radius: 8px;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: oklch(0.88 0.05 305);
  color: oklch(0.53 0.22 300);
  font-size: 0.875rem;
}

/* Honorific + pronouns subtitle under the profile name. */
.profile-identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: oklch(0.55 0.01 260);
}

.profile-honorific {
  font-weight: 600;
}

.profile-pronouns {
  border-radius: 8px;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: oklch(0.88 0.05 305);
  color: oklch(0.53 0.22 300);
  font-size: 0.85rem;
}

/* Bio rich-text block on the read-only profile. */
.profile-bio {
  margin-bottom: 1.5rem;
}

.profile-bio-content {
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Amber palette: project license notice (layout from .app-banner). */
.project-license-banner {
  background: oklch(0.97 0.055 92);
  border-color: oklch(0.85 0.17 90);
  color: oklch(0.5 0.11 78);
}

/* Purple palette: project timezone notice (layout from .app-banner). */
.project-timezone-banner {
  background: oklch(0.88 0.05 305);
  border-color: oklch(0.53 0.22 300);
  color: oklch(0.53 0.22 300);
}

.profile-actions {
  margin-top: 1.5rem;
}

/* Admin Stats Section */
.admin-stats {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.93 0.005 260);
}

.admin-stats h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: oklch(0.42 0.008 260);
}

.stats-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.stats-list dt {
  font-weight: 500;
  color: oklch(0.55 0.01 260);
}

.stats-list dd {
  margin: 0;
  font-weight: 600;
  color: oklch(0.24 0.006 260);
}

.stats-list .ip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stats-list .ip-list li {
  margin: 0;
}

.stats-list .ip-list code {
  font-size: 0.85rem;
  background: oklch(0.93 0.005 260);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.stats-list .honeypot-warning {
  color: oklch(0.5 0.11 78);
  background-color: oklch(0.97 0.055 92);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.admin-stats h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: oklch(0.42 0.008 260);
  border-top: 1px solid oklch(0.89 0.006 260);
  padding-top: 1rem;
}

.edit-profile-page {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  /* Match documents/projects/users at 120ch so the edit-profile page
   shares the same column width as the other centered pages. */
  width: 100%;
  max-width: 120ch;
  min-width: min(800px, 100%);
  margin: 0 auto;
  padding: 1rem;
}

.edit-profile-page .hint {
  font-size: 0.875rem;
  color: oklch(0.55 0.01 260);
  margin-top: 0.25rem;
}

.edit-profile-page .form-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}

/* Personal URL (slug) field with live availability check */
.personal-url-field {
  display: flex;
  align-items: center;
}

.personal-url-prefix {
  color: oklch(0.55 0.01 260);
  font-family: monospace;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.personal-url-field input {
  flex: 1;
}

.url-status {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  min-height: 1.25em;
  color: oklch(0.55 0.01 260);
}

.url-status.is-available {
  color: oklch(0.52 0.2 258);
}

.url-status.is-taken {
  color: oklch(0.58 0.2 25);
}

.url-status.is-invalid {
  color: oklch(0.58 0.2 25);
}

.empty-state {
  color: oklch(0.55 0.01 260);
  font-style: italic;
  padding: 2rem;
  text-align: center;
}

/* =============================================================================
   Users Page Controls
   ============================================================================= */
.users-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.users-controls #users-search {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  padding: 0.5rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
}

.users-empty {
  padding: 2rem;
  text-align: center;
  color: oklch(0.55 0.01 260);
}

/* =============================================================================
   Pagination Controls
   ============================================================================= */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.93 0.005 260);
  flex-wrap: wrap;
}

.pagination-info {
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination-page {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid oklch(0.85 0.008 260);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination-page:hover:not(.active) {
  background: oklch(0.98 0.003 260);
  border-color: oklch(0.85 0.008 260);
}

.pagination-page.active {
  background: oklch(0.58 0.22 250);
  color: #fff;
  border-color: oklch(0.58 0.22 250);
  cursor: default;
}

.pagination-prev,
.pagination-next {
  font-weight: bold;
}

.pagination-ellipsis {
  padding: 0 0.5rem;
  color: oklch(0.75 0.01 260);
}

.per-page-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.per-page-selector label {
  color: oklch(0.55 0.01 260);
  font-size: 0.875rem;
}

.per-page-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  font-size: 0.875rem;
}

/* =============================================================================
   Plaintext Document View
   ============================================================================= */
.plaintext-document {
  max-width: 1400px;
}

.document-type-badge {
  padding: 0.25rem 0.5rem;
  background-color: oklch(0.96 0.02 250);
  color: oklch(0.37 0.15 258);
  font-size: 0.75rem;
  border-radius: 4px;
  margin-left: auto;
}

.plaintext-panels {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  /* Column-stack the notification banner + editor. Was `row + flex-wrap`
   which, once the mixin added `flex: 1` (so the panels reach the
   footer), let `align-content: stretch` distribute the tall row across
   the two wrapped rows — the notification blew up to ~300px because it
   claimed half of the extra vertical space. Column layout keeps the
   notification at content-height and lets the editor consume the rest. */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  min-height: 500px;
  width: 100%;
  max-width: 1000px;
  min-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.plaintext-editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Flex wrapper that places the panel flush-right alongside the document */
.document-with-panel {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 60px);
}

.document-with-panel > .document-view {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* Project view - full width, no padding */
.project-view-fullwidth {
  max-width: none;
  margin: 0;
  padding: 0;
}

.project-view-fullwidth .storybook-layout {
  min-height: calc(100vh - 60px);
}

.project-view-fullwidth .story-main {
  flex: 1;
  min-width: 0;
  /* Flex column so .story-content inside can flex-grow to the full row
   height (matches the sidebar) instead of collapsing to content-height. */
  display: flex;
  flex-direction: column;
}

/* Project sidebar sits on the same white content surface as the story
   content column, with a soft edge on its left gutter side so nav +
   content read as two panels floating together over the gray-50 page.
   The right edge is where it meets .story-content — no gutter treatment
   there; the border-right + story-content's own left edge cover the seam.
   Also drop the sidebar's global 100vh floor (see prior fix) so the
   row's calc height governs. */
.project-view-fullwidth .story-sidebar {
  min-height: 0;
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
}

.project-view-fullwidth .story-content {
  background: #fff;
  box-shadow: -1px 0 0 oklch(0.93 0.005 260), 1px 0 0 oklch(0.93 0.005 260), 0 0 12px -2px rgba(0, 0, 0, 0.05);
  flex: 1;
  /* Guarantee 800px reading width when the viewport allows; below that
   the min collapses to 100% so the column shrinks with the viewport
   instead of forcing horizontal scroll. Can still expand up to
   1200px if the content pushes past 800. Gutters take whatever's
   left over. */
  min-width: min(800px, 100%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Project home page header */
.project-home-header {
  margin-bottom: 1.5rem;
}

.project-home-header .editable-title {
  font-size: 1.75rem;
  font-weight: 600;
}

/* Project home two-column layout. `auto-fit` collapses to one column when
   the viewport is narrower than 2 * 22rem + gap. */
.project-home-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.project-home-left,
.project-home-right {
  min-width: 0;
  /* Stack widgets vertically with breathing room between them; the grid
   `gap` only spaces the two outer columns, not siblings inside one. */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Project home widget container — one outline per widget; content
   inside blends against the widget's background. */
.project-home-widget {
  background: oklch(0.98 0.003 260);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid oklch(0.89 0.006 260);
}

.project-home-widget-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: oklch(0.3 0.006 260);
}

/* Placeholder body copy. */
.project-home-placeholder-body {
  margin: 0 0 0.75rem;
  color: oklch(0.55 0.01 260);
  line-height: 1.5;
}

.project-home-placeholder-body:last-child {
  margin-bottom: 0;
}

/* Admin-stats widget: strip out the old `.admin-stats h2` heading margins
   and let the shared widget title carry the styling. */
.admin-stats-widget .stats-list {
  margin: 0;
}

/* Upcoming events widget: 3-line cards (meta / title / description) with
   dividers between rows and vertical margin so cards breathe. */
.upcoming-events-empty {
  margin: 0;
  color: oklch(0.55 0.01 260);
}

.upcoming-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.upcoming-event-item {
  display: block;
  margin: 0.5rem 0;
  border-top: 1px solid oklch(0.89 0.006 260);
  padding-top: 0.5rem;
}

.upcoming-event-item:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.upcoming-event-item:last-child {
  margin-bottom: 0;
}

.upcoming-event-card {
  display: block;
  /* Bleed to the widget's inner edges so the hover highlight spans the
   full inside width; matches `.project-home-widget`'s horizontal padding. */
  padding: 0.25rem 1.25rem;
  margin: 0 -1.25rem;
  text-decoration: none;
  color: oklch(0.24 0.006 260);
  background: transparent;
  transition: background-color 0.1s ease;
}

.upcoming-event-card:hover {
  background: oklch(0.96 0.02 250);
}

/* Meta row: date/time on the left, calendar tag pushed to the right. */
.upcoming-event-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: oklch(0.55 0.01 260);
  margin-bottom: 0.15rem;
}

.upcoming-event-when {
  color: oklch(0.42 0.008 260);
}

/* Calendar name is a subtle pill so it reads as a tag, not body text. */
.upcoming-event-calendar {
  padding: 0.05rem 0.4rem;
  background: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
  border-radius: 4px;
}

.upcoming-event-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.upcoming-event-description {
  font-size: 0.9rem;
  color: oklch(0.42 0.008 260);
  line-height: 1.4;
}

/* Project people page - styled like users index */
.project-people-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.project-people-title-row h2 {
  margin: 0;
}

.project-people .users-controls {
  margin-bottom: 1.5rem;
}

/* Document side panel (tabs + content) */
.document-side-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid oklch(0.89 0.006 260);
  background-color: oklch(0.98 0.003 260);
}

#document-panel:empty {
  display: none;
}

.panel-tabs {
  display: flex;
  background-color: oklch(0.93 0.005 260);
  border-bottom: 1px solid oklch(0.89 0.006 260);
  overflow-x: auto;
  flex-shrink: 0;
}

.panel-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-right: 1px solid oklch(0.89 0.006 260);
  background: transparent;
  font-size: 0.8rem;
  font-family: var(--font-sans-serif);
  color: oklch(0.42 0.008 260);
  white-space: nowrap;
}

.panel-tab.active {
  background-color: oklch(0.98 0.003 260);
  box-shadow: inset 0 -2px 0 oklch(0.58 0.22 250);
  color: oklch(0.24 0.006 260);
  font-weight: 600;
}

.panel-tab-label {
  cursor: pointer;
}

.panel-tab-label:hover {
  color: oklch(0.24 0.006 260);
}

.panel-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  font-size: 0.75rem;
  line-height: 1;
  color: oklch(0.63 0.012 260);
  cursor: pointer;
}

.panel-tab-close:hover {
  background-color: oklch(0.85 0.008 260);
  color: oklch(0.24 0.006 260);
}

.panel-content {
  flex: 1;
  padding: 0.75rem;
  overflow-y: auto;
}

.panel-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  font-family: var(--font-sans-serif);
  color: oklch(0.42 0.008 260);
}

/* Debug History panel */
.debug-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.debug-history-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid oklch(0.93 0.005 260);
  font-size: 0.78rem;
  line-height: 1.4;
}

.debug-history-item:last-child {
  border-bottom: none;
}

.debug-history-item.skipped {
  opacity: 0.5;
}

.debug-history-user {
  font-weight: 600;
  color: oklch(0.24 0.006 260);
}

.debug-history-range {
  font-family: var(--font-monospace);
  font-size: 0.72rem;
  color: oklch(0.55 0.01 260);
  background-color: oklch(0.93 0.005 260);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.debug-history-text {
  color: oklch(0.42 0.008 260);
  word-break: break-all;
}

.debug-history-gen {
  font-family: var(--font-monospace);
  font-size: 0.7rem;
  color: oklch(0.63 0.012 260);
}

.debug-history-skipped {
  font-size: 0.7rem;
  color: oklch(0.62 0.2 27);
  font-style: italic;
}

.debug-history-empty {
  color: oklch(0.55 0.01 260);
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
}

/* Aggregated History panel */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-item {
  padding: 0;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.history-item:last-child {
  border-bottom: none;
}

.history-item.skipped {
  opacity: 0.5;
}

.history-user {
  font-weight: 600;
  font-size: 0.82rem;
  color: oklch(0.24 0.006 260);
}

.history-time {
  font-size: 0.72rem;
  color: oklch(0.63 0.012 260);
}

.history-skipped {
  color: oklch(0.62 0.2 27);
  font-style: italic;
}

.history-empty {
  color: oklch(0.55 0.01 260);
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
}

/* History buttons */
.history-btn {
  all: unset;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  width: 100%;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
}

.history-btn:hover {
  background-color: oklch(0.93 0.005 260);
}

.history-btn.history-selected {
  background-color: oklch(0.96 0.02 250);
}

/* Undone entries render as a static div (not navigable) — show them as inert. */
.history-item.skipped .history-btn {
  cursor: default;
}

.history-item.skipped .history-btn:hover {
  background-color: transparent;
}

/* History diff annotations */
.history-addition {
  color: oklch(0.62 0.16 145);
  background-color: oklch(0.92 0.045 145);
}

.history-deletion {
  color: oklch(0.62 0.2 27);
  background-color: oklch(0.9 0.045 20);
  text-decoration: line-through;
}

/* Read-only history view */
.plaintext-history-view {
  padding: 1rem;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* .history-view-banner shares the grey read-only palette with
   .published-view-banner; both live with the other banner variants above. */
.plaintext-textarea {
  width: 100%;
  flex: 1;
  min-height: 400px;
  padding: 1rem;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  resize: vertical;
  background-color: #fff;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.plaintext-textarea:focus {
  outline: none;
  border-color: oklch(0.58 0.22 250);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.plaintext-readonly {
  width: 100%;
  flex: 1;
  min-height: 400px;
  padding: 1rem;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  background-color: oklch(0.98 0.003 260);
  overflow: auto;
}

.plaintext-readonly pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.richtext-readonly {
  width: 100%;
  flex: 1;
  min-height: 400px;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  overflow: auto;
}

.richtext-readonly h2,
.richtext-readonly h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
}

.richtext-readonly h2 {
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
}

.richtext-readonly h3 {
  font-size: 1.2rem;
  margin: 1.25rem 0 0.5rem;
}

.richtext-readonly ul,
.richtext-readonly ol {
  padding-left: 1.75rem;
  margin: 0.5rem 0;
}

.richtext-readonly li {
  min-height: 1.5em;
}

.richtext-readonly p {
  margin: 0.5rem 0;
}

/* =============================================================================
   Remote Cursor Display
   ============================================================================= */
/* Color palette for remote cursors (6 colors) */
:root {
  --cursor-color-0: #e91e63;
  /* pink */
  --cursor-color-1: #2196f3;
  /* blue */
  --cursor-color-2: #4caf50;
  /* green */
  --cursor-color-3: #ff9800;
  /* orange */
  --cursor-color-4: #9c27b0;
  /* purple */
  --cursor-color-5: #00bcd4;
  /* cyan */
  /* Selection highlights (more visible, 40% opacity) */
  --selection-color-0: rgba(233, 30, 99, 0.4);
  --selection-color-1: rgba(33, 150, 243, 0.4);
  --selection-color-2: rgba(76, 175, 80, 0.4);
  --selection-color-3: rgba(255, 152, 0, 0.4);
  --selection-color-4: rgba(156, 39, 176, 0.4);
  --selection-color-5: rgba(0, 188, 212, 0.4);
}

/* Container for textarea + overlay */
.textarea-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hidden mirror div - matches textarea styling exactly */
.cursor-mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Must match textarea styling exactly */
  padding: 1rem;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

/* Overlay for cursor elements */
.cursor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

/* Individual remote cursor */
.remote-cursor {
  position: absolute;
  pointer-events: auto;
  z-index: 10;
}

/* The cursor caret line */
.cursor-caret {
  width: 2px;
  height: 1.35em;
  /* ~line-height */
  opacity: 0.8;
  animation: cursor-blink 1.2s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}
/* Small nub above the caret (always visible) */
.cursor-nub {
  position: absolute;
  bottom: 100%;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Flag that expands on hover */
.cursor-flag {
  position: absolute;
  bottom: 100%;
  left: -3px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-sans-serif);
  font-size: 0.7rem;
  white-space: nowrap;
  color: white;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

/* Show flag on hover */
.remote-cursor:hover .cursor-flag {
  opacity: 1;
  transform: translateY(0);
}

/* Hide nub when flag is shown */
.remote-cursor:hover .cursor-nub {
  opacity: 0;
}

/* Selection highlight for remote cursors (when start != end) */
.cursor-selection {
  position: absolute;
  opacity: 0.2;
  pointer-events: none;
}

/* =============================================================================
   TextEditor Component
   ============================================================================= */
.text-editor {
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0 1rem 1rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  min-height: 400px;
  background-color: #fff;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  outline: none;
  cursor: text;
  overflow-y: auto;
  flex: 1;
  user-select: none;
  /* We handle selection ourselves */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  /* positioning context for .editor-proxy */
}

/* The hidden control that actually holds focus. A painted div receives no
   clipboard or IME events, so a real focusable element sits inside the editor
   and takes them. It is invisible but must stay laid out: `display: none` or
   `hidden` cannot be focused. */
.editor-proxy {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1em;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  opacity: 0;
  z-index: -1;
  white-space: pre;
  /* The editor sets `user-select: none`; the proxy needs the opposite or the
   copy path cannot select the text it just seeded. */
  user-select: text;
  -webkit-user-select: text;
}

/* Where the render model is painted. Separate from the host so that replacing
   it wholesale never re-inserts (and so blurs) the focused proxy. */
.editor-surface {
  display: block;
}

.text-editor.richtext-editor {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

.text-editor:focus-within {
  border-color: oklch(0.58 0.22 250);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Individual text line */
.text-editor .text-line {
  min-height: 1.5em;
  /* Ensure empty lines have height */
  position: relative;
}

/* Empty line placeholder to maintain height */
.text-editor .text-line:empty::after {
  content: " ";
  /* Non-breaking space */
}

/* Local cursor (primary editing cursor) */
.text-editor .cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background-color: #000;
  vertical-align: text-bottom;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
}

.text-editor .cursor.blink {
  animation: text-editor-blink 1s step-end infinite;
}

@keyframes text-editor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* Text selection highlight */
.text-editor .selection {
  background-color: oklch(0.87 0.06 245);
}

/* When editor is not focused, dim the selection */
.text-editor:not(:focus-within) .selection {
  background-color: oklch(0.85 0.008 260);
}

/* Remote cursor (other users) */
.text-editor .remote-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  vertical-align: text-bottom;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
  opacity: 0.8;
}

/* Expanded hover zone - 5px on each side, doesn't block clicks */
.text-editor .remote-cursor::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -5px;
  right: -5px;
}

/* Remote cursor name flag */
.text-editor .remote-cursor-flag {
  position: absolute;
  bottom: 100%;
  left: -3px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-sans-serif);
  font-size: 0.65rem;
  white-space: nowrap;
  color: white;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 10;
}

.text-editor .remote-cursor:hover .remote-cursor-flag {
  opacity: 1;
  transform: translateY(0);
}

/* Remote selection highlight */
.text-editor .remote-selection {
  border-radius: 2px;
}

/* Remote selection start marker (shows display name at beginning of selection) */
.text-editor .remote-selection-start {
  position: relative;
  display: inline;
}

.text-editor .remote-selection-flag {
  position: absolute;
  bottom: 100%;
  left: 0;
  font-size: 0.7rem;
  padding: 1px 4px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
  color: white;
  font-weight: 500;
  z-index: 10;
  pointer-events: none;
}

/* Color variants for selection flags */
.text-editor .remote-selection-flag.color-0 {
  background-color: var(--cursor-color-0);
}

.text-editor .remote-selection-flag.color-1 {
  background-color: var(--cursor-color-1);
}

.text-editor .remote-selection-flag.color-2 {
  background-color: var(--cursor-color-2);
}

.text-editor .remote-selection-flag.color-3 {
  background-color: var(--cursor-color-3);
}

.text-editor .remote-selection-flag.color-4 {
  background-color: var(--cursor-color-4);
}

.text-editor .remote-selection-flag.color-5 {
  background-color: var(--cursor-color-5);
}

/* =============================================================================
   Cursor Color Variants (consolidated)
   Applied to: .cursor-caret, .cursor-nub, .cursor-flag, .cursor-selection,
               .text-editor .remote-cursor, .text-editor .remote-cursor-flag,
               .text-editor .remote-selection
   ============================================================================= */
/* Cursor elements use solid colors */
.cursor-caret.color-0, .cursor-nub.color-0, .cursor-flag.color-0, .cursor-selection.color-0,
.text-editor .remote-cursor.color-0, .text-editor .remote-cursor-flag.color-0 {
  background-color: var(--cursor-color-0);
}

.cursor-caret.color-1, .cursor-nub.color-1, .cursor-flag.color-1, .cursor-selection.color-1,
.text-editor .remote-cursor.color-1, .text-editor .remote-cursor-flag.color-1 {
  background-color: var(--cursor-color-1);
}

.cursor-caret.color-2, .cursor-nub.color-2, .cursor-flag.color-2, .cursor-selection.color-2,
.text-editor .remote-cursor.color-2, .text-editor .remote-cursor-flag.color-2 {
  background-color: var(--cursor-color-2);
}

.cursor-caret.color-3, .cursor-nub.color-3, .cursor-flag.color-3, .cursor-selection.color-3,
.text-editor .remote-cursor.color-3, .text-editor .remote-cursor-flag.color-3 {
  background-color: var(--cursor-color-3);
}

.cursor-caret.color-4, .cursor-nub.color-4, .cursor-flag.color-4, .cursor-selection.color-4,
.text-editor .remote-cursor.color-4, .text-editor .remote-cursor-flag.color-4 {
  background-color: var(--cursor-color-4);
}

.cursor-caret.color-5, .cursor-nub.color-5, .cursor-flag.color-5, .cursor-selection.color-5,
.text-editor .remote-cursor.color-5, .text-editor .remote-cursor-flag.color-5 {
  background-color: var(--cursor-color-5);
}

/* Remote selection highlights use translucent colors */
.text-editor .remote-selection.color-0 {
  background-color: var(--selection-color-0);
}

.text-editor .remote-selection.color-1 {
  background-color: var(--selection-color-1);
}

.text-editor .remote-selection.color-2 {
  background-color: var(--selection-color-2);
}

.text-editor .remote-selection.color-3 {
  background-color: var(--selection-color-3);
}

.text-editor .remote-selection.color-4 {
  background-color: var(--selection-color-4);
}

.text-editor .remote-selection.color-5 {
  background-color: var(--selection-color-5);
}

/* =============================================================================
   Sheet Focus Indicators
   Colored borders and name tags for remote users focused on model/field elements.
   ============================================================================= */
/* Focus overlay - positioned absolutely around focused elements */
.sheet-focus-overlay {
  border: 2px solid;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Color variants for focus overlay borders */
.sheet-focus-overlay.color-0 {
  border-color: var(--cursor-color-0);
}

.sheet-focus-overlay.color-1 {
  border-color: var(--cursor-color-1);
}

.sheet-focus-overlay.color-2 {
  border-color: var(--cursor-color-2);
}

.sheet-focus-overlay.color-3 {
  border-color: var(--cursor-color-3);
}

.sheet-focus-overlay.color-4 {
  border-color: var(--cursor-color-4);
}

.sheet-focus-overlay.color-5 {
  border-color: var(--cursor-color-5);
}

/* Name tag at bottom-left of focused element */
.sheet-focus-tag {
  position: absolute;
  bottom: -18px;
  left: -2px;
  padding: 1px 6px;
  border-radius: 0 0 3px 3px;
  font-family: var(--font-sans-serif);
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  color: white;
}

/* Color variants for focus tags */
.sheet-focus-tag.color-0 {
  background-color: var(--cursor-color-0);
}

.sheet-focus-tag.color-1 {
  background-color: var(--cursor-color-1);
}

.sheet-focus-tag.color-2 {
  background-color: var(--cursor-color-2);
}

.sheet-focus-tag.color-3 {
  background-color: var(--cursor-color-3);
}

.sheet-focus-tag.color-4 {
  background-color: var(--cursor-color-4);
}

.sheet-focus-tag.color-5 {
  background-color: var(--cursor-color-5);
}

/* =============================================================================
   SearchInput Component (single-line text input for search boxes)
   ============================================================================= */
.search-input {
  display: inline-block;
  font-family: var(--font-sans-serif);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  background-color: #fff;
  min-width: 180px;
  outline: none;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.search-input:focus {
  border-color: oklch(0.58 0.22 250);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.search-input .search-placeholder {
  color: oklch(0.55 0.01 260);
  pointer-events: none;
}

.search-input .search-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #000;
  vertical-align: text-bottom;
  margin-left: -0.5px;
  margin-right: -0.5px;
}

.search-input .search-cursor.blink {
  animation: search-cursor-blink 1s step-end infinite;
}

@keyframes search-cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.search-input .search-selection {
  background-color: oklch(0.87 0.06 245);
}

.search-input:not(:focus) .search-selection {
  background-color: oklch(0.85 0.008 260);
}

/* =============================================================================
   Format Toolbar (Richtext Documents)
   ============================================================================= */
.format-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: oklch(0.93 0.005 260);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.format-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: oklch(0.42 0.008 260);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}

.format-btn:hover {
  background-color: oklch(0.98 0.003 260);
  border-color: oklch(0.75 0.01 260);
}

.format-btn:active {
  background-color: oklch(0.93 0.005 260);
}

.format-btn.active,
.format-btn[data-active=true] {
  background-color: oklch(0.89 0.006 260);
  border-color: oklch(0.55 0.01 260);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.format-btn.active:hover,
.format-btn[data-active=true]:hover {
  background-color: oklch(0.85 0.008 260);
}

.format-btn.format-italic {
  font-style: italic;
}

.format-btn.format-underline {
  text-decoration: underline;
}

.format-btn.format-strikethrough {
  text-decoration: line-through;
}

/* Full-tier toolbar: several button islands on one row, visually separated. */
.format-toolbars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.format-toolbars .format-toolbar {
  margin-bottom: 0;
}

/* Heading + list buttons hold text labels, wider than the square inline ones. */
.format-btn.format-h2,
.format-btn.format-h3,
.format-btn.format-ul,
.format-btn.format-ol {
  width: auto;
  min-width: 28px;
  padding: 0 0.4rem;
  font-size: 0.8rem;
}

/* Link toolbar button uses an emoji, not a styled letter. */
.format-btn.format-link {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
}

/* Link modal overlay (display toggled by JS). */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.modal-dialog {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 440px;
  width: 90%;
}

.modal-dialog h3 {
  margin: 0 0 1rem;
}

.modal-body .form-group {
  margin-bottom: 0.75rem;
}

.modal-body .form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.link-type-radios label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
  cursor: pointer;
}

.link-type-radios label + label {
  margin-top: 0.25rem;
}

.modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Link rendering inside the live editor and readonly views. */
.text-editor a,
.plaintext-readonly a,
.richtext-readonly a {
  color: #1971c2;
  text-decoration: underline;
  cursor: pointer;
}

.text-editor a:hover,
.plaintext-readonly a:hover,
.richtext-readonly a:hover {
  color: #1864ab;
}

.richtext-readonly a.heading-anchor {
  text-decoration: none;
}

/* In the editor, links aren't navigable — suppress pointer navigation. */
.text-editor a {
  pointer-events: none;
}

/* Heading rendering inside the live editor. */
.text-editor h2,
.text-editor h3 {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
}

.text-editor h2 {
  font-size: 1.5rem;
}

.text-editor h3 {
  font-size: 1.2rem;
}

/* List rendering inside the live editor. */
.text-editor ul,
.text-editor ol {
  margin: 0;
  padding-left: 1.75rem;
}

.text-editor li {
  min-height: 1.5em;
}

/* Per-line hit-test element (paragraph div, heading div, or list-item span). */
.text-editor .editor-line {
  position: relative;
}

/* Empty line/list-item placeholder so it keeps height and stays clickable. */
.text-editor .editor-line:empty::after {
  content: " ";
  /* Non-breaking space */
}

/* =============================================================================
   Floating Richtext Toolbar (Sheet Cells)
   ============================================================================= */
.richtext-floating-toolbar {
  position: absolute;
  display: none;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.25rem;
  background-color: #fff;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.richtext-floating-toolbar.visible {
  display: flex;
}

.richtext-format-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: oklch(0.42 0.008 260);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s, border-color 0.1s;
}

.richtext-format-btn:hover {
  background-color: oklch(0.98 0.003 260);
  border-color: oklch(0.75 0.01 260);
}

.richtext-format-btn:active {
  background-color: oklch(0.93 0.005 260);
}

.richtext-format-btn[data-active=true] {
  background-color: oklch(0.89 0.006 260);
  border-color: oklch(0.55 0.01 260);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.richtext-format-btn.richtext-format-italic {
  font-style: italic;
}

.richtext-format-btn.richtext-format-underline {
  text-decoration: underline;
}

.richtext-format-btn.richtext-format-strikethrough {
  text-decoration: line-through;
}

/* =============================================================================
   New Version Notification (for viewers)
   ============================================================================= */
.new-version-notification {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(0.97 0.055 92);
  border: 1px solid oklch(0.85 0.17 90);
  border-radius: 4px;
  margin: 0 1rem 0.75rem 1rem;
  font-size: 0.9rem;
  color: oklch(0.5 0.11 78);
  width: calc(100% - 2rem);
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Notification inside .plaintext-panels (now a flex column) — natural
   content-height row, full width. `flex-basis: 100%` in a column would
   claim the full main axis (vertical) and reintroduce the blowout. */
.plaintext-panels .new-version-notification {
  width: 100%;
  margin: 0 0 0.75rem 0;
  flex: 0 0 auto;
}

.new-version-notification span {
  flex: 1;
}

.new-version-notification a {
  color: oklch(0.37 0.15 258);
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

.new-version-notification a:hover {
  color: oklch(0.37 0.15 258);
}

.new-version-notification button {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: oklch(0.5 0.11 78);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.new-version-notification button:hover {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* .plaintext-panels is already flex-column at every width; nothing to
   override here. */
  .document-with-panel {
    flex-direction: column;
  }
  .document-side-panel {
    width: auto;
    max-height: 300px;
    border-left: none;
    border-top: 1px solid oklch(0.89 0.006 260);
  }
}
/* =============================================================================
   Attachment Document Styles
   ============================================================================= */
/* Attachment upload modal */
#attachment-upload-modal {
  display: none;
}

#attachment-upload-modal[data-visible=true] {
  display: flex;
}

.attachment-upload-modal {
  max-width: 500px;
}

/* Attachment upload error display */
.attachment-upload-error {
  display: none;
  color: oklch(0.58 0.2 25);
  background-color: oklch(0.97 0.012 25);
  border: 1px solid oklch(0.58 0.2 25);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.attachment-upload-error[data-visible=true] {
  display: block;
}

.attachment-upload-modal .form-group {
  margin-bottom: 1rem;
}

.attachment-upload-modal .form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.attachment-upload-modal .form-group input[type=text] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  font-size: 1rem;
}

/* Drop zone */
.attachment-drop-zone {
  border: 2px dashed oklch(0.85 0.008 260);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
  position: relative;
  min-height: 180px;
}

.attachment-drop-zone:hover {
  border-color: oklch(0.75 0.01 260);
}

.attachment-drop-zone.drag-over,
.attachment-drop-zone[data-drag-over=true] {
  border-color: oklch(0.7 0.15 244);
  background-color: oklch(0.96 0.02 250);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.attachment-drop-zone.has-file .drop-zone-content {
  display: none;
}

.drop-zone-icon {
  font-size: 3rem;
  margin: 0;
}

.drop-zone-text {
  color: oklch(0.42 0.008 260);
  margin: 0;
}

.drop-zone-browse {
  cursor: pointer;
  margin-top: 0.5rem;
}

.drop-zone-browse input[type=file] {
  display: none;
}

.drop-zone-hint {
  color: oklch(0.57 0.02 250);
  font-size: 0.875rem;
  margin: 0;
  transition: color 0.2s ease;
}

.drop-zone-hint.error {
  color: oklch(0.58 0.2 25);
  font-weight: 500;
}

/* File preview (shown when file selected) */
.attachment-file-preview {
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: oklch(0.98 0.003 260);
  border-radius: 4px;
}

.attachment-drop-zone.has-file .attachment-file-preview {
  display: flex;
}

.attachment-file-preview .file-icon {
  font-size: 2rem;
}

.attachment-file-preview .file-name {
  flex: 1;
  font-weight: 500;
  word-break: break-all;
}

.attachment-file-preview .file-size {
  color: oklch(0.57 0.02 250);
  font-size: 0.875rem;
}

.attachment-file-preview .unattach-btn {
  background: none;
  border: none;
  color: oklch(0.75 0.01 260);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.attachment-file-preview .unattach-btn:hover {
  color: oklch(0.62 0.2 27);
  background: oklch(0.97 0.012 25);
}

/* Email preview: the generated email HTML, shown in an isolated iframe so the
   application stylesheet cannot reach it. Same shape as .attachment-viewer —
   a fixed-height frame that scrolls internally, since sizing an iframe to its
   content needs JavaScript. */
.email-preview {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.email-preview-caption {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: oklch(0.42 0.008 260);
}

.email-preview-frame {
  border-radius: 8px;
  width: 100%;
  height: 70vh;
  min-height: 400px;
  border: 1px solid oklch(0.89 0.006 260);
  display: block;
  background: #fff;
  overscroll-behavior: contain;
}

/* Attachment viewer (iframe) */
.attachment-viewer {
  margin-top: 1rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  overflow: hidden;
  background: oklch(0.98 0.003 260);
}

.attachment-viewer iframe {
  width: 100%;
  height: 80vh;
  min-height: 500px;
  border: none;
  display: block;
  /* Keep scroll/zoom gestures inside the frame when possible */
  overscroll-behavior: contain;
}

/* Attachment document view */
.attachment-document .document-header {
  margin-bottom: 1rem;
}

.attachment-document .attachment-info {
  color: oklch(0.57 0.02 250);
}

/* Document type badge (already exists but adding attachment variant) */
.document-type-badge {
  background: oklch(0.89 0.006 260);
  color: oklch(0.42 0.008 260);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

/* =============================================================================
   Auth Page Layout (Login / Register)
   ============================================================================= */
.auth-page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: oklch(0.7 0.15 244);
}

.auth-container {
  background: #fff;
  width: 100%;
  max-width: 480px;
  padding: 3rem 2rem;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15), 4px 0 12px rgba(0, 0, 0, 0.15);
}

.auth-site-name {
  font-family: var(--font-serif);
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.auth-title {
  text-align: center;
  margin: 0 0 1.5rem;
}

.auth-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-form label {
  margin-bottom: -0.5rem;
}

.auth-link {
  text-align: center;
  margin-top: 1.5rem;
}

/* =============================================================================
   Dual List Select Component
   ============================================================================= */
.dual-list-select {
  display: flex;
  gap: 1.5rem;
}

.dual-list-active,
.dual-list-inactive {
  flex: 1;
  min-width: 200px;
}

.dual-list-active {
  position: relative;
}

.dual-list-active h4,
.dual-list-inactive h4 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(0.42 0.008 260);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dual-list-items {
  min-height: 100px;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  background: #fff;
  padding: 0.25rem;
}

.dual-list-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  background: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.dual-list-item:hover {
  background: oklch(0.93 0.005 260);
}

.dual-list-item:active {
  cursor: grabbing;
}

.dual-list-item:focus {
  outline: 2px solid oklch(0.7 0.15 244);
  outline-offset: -2px;
  background: oklch(0.96 0.02 250);
}

.dual-list-grip {
  color: oklch(0.75 0.01 260);
  margin-right: 0.5rem;
  font-size: 1rem;
  line-height: 1;
}

.dual-list-item-label {
  flex: 1;
  font-size: 0.9375rem;
}

.dual-list-item.dragging-self {
  opacity: 0.4;
  background: oklch(0.89 0.006 260);
}

.dual-list-indicator {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  height: 6px;
  background: oklch(0.7 0.15 244);
  border-radius: 3px;
  display: none;
  pointer-events: none;
  z-index: 10;
}

.dual-list-select[data-dragging=true] .dual-list-indicator {
  display: block;
}

.dual-list-inactive-target[data-drag-over=true] {
  background: oklch(0.96 0.02 250);
  border-color: oklch(0.7 0.15 244);
}

/* =============================================================================
   Single List (generic editable + drag-reorderable rows)
   ============================================================================= */
.single-list {
  position: relative;
}

.single-list-rows {
  min-height: 2.5rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  background: #fff;
  padding: 0.25rem;
}

.single-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  margin: 0.25rem 0;
  background: oklch(0.98 0.003 260);
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
}

.single-list-grip {
  color: oklch(0.75 0.01 260);
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.single-list-grip:active {
  cursor: grabbing;
}

.single-list-grip:focus {
  outline: 2px solid oklch(0.7 0.15 244);
  outline-offset: 2px;
  color: oklch(0.7 0.15 244);
  border-radius: 3px;
}

.single-list-row.dragging-self {
  opacity: 0.4;
  background: oklch(0.89 0.006 260);
}

.single-list-row-error {
  flex-basis: 100%;
  color: oklch(0.58 0.2 25);
  font-size: 0.8125rem;
}

.single-list-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: oklch(0.75 0.01 260);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.single-list-delete:hover {
  color: oklch(0.62 0.2 27);
  background: oklch(0.9 0.045 20);
}

.single-list-add {
  margin-top: 0.5rem;
}

.single-list-indicator {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  height: 6px;
  background: oklch(0.7 0.15 244);
  border-radius: 3px;
  display: none;
  pointer-events: none;
  z-index: 10;
}

/* Show the drop indicator on every list that is a valid target for the current
   drag (the source list and any same-kind sibling — e.g. other sections' field
   lists), so cross-list drop areas are visible, not just the source. */
.single-list[data-drop-active=true] .single-list-indicator {
  display: block;
}

/* Highlight valid field drop targets during a field drag so other sections
   visibly accept the row. Scoped to field lists: the sections list wraps every
   section, so outlining its rows would draw a box through all of them. */
.single-list[data-list-kind=fields][data-drop-active=true] .single-list-rows {
  outline: 2px dashed oklch(0.87 0.06 245);
  outline-offset: 2px;
}

#single-list-delete-modal {
  display: none;
}

#single-list-delete-modal[data-visible=true] {
  display: flex;
}

/* =============================================================================
   Phone Numbers (editor row content + read-only profile list)
   ============================================================================= */
.phone-kind {
  flex: 0 0 auto;
}

.phone-number-input {
  flex: 1 1 auto;
  min-width: 8rem;
}

.phone-can-text {
  flex: 0 0 auto;
  font-size: 0.9375rem;
}

.phone-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.phone-list li {
  padding: 0.35rem 0.6rem;
  display: flex;
  align-items: center;
  border-radius: 3px;
}

/* Zebra striping so the eye tracks across each row. */
.phone-list li:nth-child(even) {
  background: oklch(0.98 0.003 260);
}

/* tel:/sms: action links, right-justified. Hidden until the container's
   data-can-call / data-can-text resolve (set by the server from the request
   platform header and re-applied by WASM on load). */
.phone-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 0.5rem;
  padding-left: 0.75rem;
}

.phone-action {
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.phone-action.phone-call,
.phone-action.phone-text {
  display: none;
}

.profile-phones[data-can-call=true] .phone-action.phone-call {
  display: inline-flex;
}

.profile-phones[data-can-text=true] .phone-action.phone-text {
  display: inline-flex;
}

.phone-list-kind {
  display: inline-block;
  min-width: 3.5rem;
  color: oklch(0.57 0.02 250);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.phone-list-number {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Email Addresses (editor rows + read-only profile list)
   ============================================================================= */
/* Editor: two stacked inputs (address + optional note) inside each row. */
.email-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.email-address-input,
.email-note-input {
  width: 100%;
}

.email-note-input {
  font-style: italic;
}

/* The account row: read-only address, taller, with an explanatory line. */
.email-address-input[readonly] {
  background: oklch(0.98 0.003 260);
  color: oklch(0.42 0.008 260);
  cursor: default;
}

.email-account-note {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: oklch(0.57 0.02 250);
}

/* Read-only profile list. */
.email-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.email-list li {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
}

.email-list li:nth-child(even) {
  background: oklch(0.98 0.003 260);
}

.email-list-main {
  flex: 1 1 auto;
  min-width: 0;
}

.email-list-note {
  font-style: italic;
  color: oklch(0.57 0.02 250);
  font-size: 0.875rem;
}

/* mailto: link, right-justified, gated by the platform's can_email. */
.email-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 0.5rem;
  padding-left: 0.75rem;
}

.email-action {
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.email-action.email-mail {
  display: none;
}

.profile-emails[data-can-email=true] .email-action.email-mail {
  display: inline-flex;
}

/* =============================================================================
   Quick Links Section (User Settings)
   ============================================================================= */
.quick-links-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.89 0.006 260);
}

.quick-links-section h2 {
  margin-top: 0;
}

.quick-links-section .form-buttons {
  margin-top: 1rem;
}

/* =============================================================================
   Reporting Page (Dashboard)
   ============================================================================= */
.reporting-page {
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.reporting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.reporting-header h1 {
  margin: 0;
}

.reporting-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: oklch(0.98 0.003 260);
  border-radius: 4px;
}

.reporting-controls .search-input {
  flex: 1;
  max-width: 300px;
}

.reporting-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reporting-row {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid oklch(0.93 0.005 260);
}

.reporting-row:last-child {
  border-bottom: none;
}

.reporting-row.has-honeypot {
  background-color: oklch(0.97 0.055 92);
}

.reporting-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.reporting-ip {
  flex-shrink: 0;
}

.reporting-ip code {
  font-family: "SF Mono", "Consolas", "Liberation Mono", monospace;
  font-size: 0.9rem;
  background: oklch(0.93 0.005 260);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

.reporting-users {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
  border-left: 2px solid oklch(0.93 0.005 260);
  padding-left: 1rem;
}

.reporting-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  gap: 1rem;
}

.reporting-user-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.reporting-user .user-link {
  color: oklch(0.52 0.2 258);
  text-decoration: none;
  font-weight: 500;
}

.reporting-user .user-link:hover {
  text-decoration: underline;
}

.reporting-user .anonymous {
  color: oklch(0.55 0.01 260);
  font-size: 0.85rem;
}

.reporting-user-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.reporting-updated {
  font-size: 0.8rem;
  color: oklch(0.55 0.01 260);
}

.reporting-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.reporting-stats .stat {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.reporting-stats .stat.honeypot {
  background: oklch(0.97 0.055 92);
  color: oklch(0.5 0.11 78);
  font-weight: 600;
}

.reporting-erase {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid oklch(0.9 0.045 20);
  border-radius: 4px;
  background: oklch(0.9 0.045 20);
  color: oklch(0.32 0.12 22);
  cursor: pointer;
}

.reporting-erase:hover {
  background: oklch(0.9 0.045 20);
}

.reporting-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: oklch(0.55 0.01 260);
}

.session-lookup {
  margin: 1.5rem 0;
}

.session-lookup-input {
  width: 22rem;
  max-width: 100%;
  margin-right: 0.5rem;
}

.session-timeline-result {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 6px;
  background: oklch(0.98 0.003 260);
}

.session-steps .session-time,
.session-errors .session-time {
  color: oklch(0.55 0.01 260);
  font-size: 0.8rem;
}

.session-args {
  color: oklch(0.55 0.01 260);
}

.session-error-msg {
  color: oklch(0.32 0.12 22);
}

.reporting-empty p:first-child {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.reporting-empty .hint {
  font-size: 0.9rem;
  color: oklch(0.63 0.012 260);
}

.reporting-pagination {
  margin-top: 1rem;
}

/* =============================================================================
 * Drag and Drop Reordering for Models and Fields
 * ============================================================================= */
/* Drag handles */
.drag-handle {
  cursor: grab;
  color: oklch(0.75 0.01 260);
  padding: 0.25rem;
  user-select: none;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.drag-handle:hover {
  color: oklch(0.55 0.01 260);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Drop zones - large hit area, small visual indicator */
.drop-zone {
  position: relative;
  height: 0;
  pointer-events: none;
  z-index: 10;
}

/* The visible indicator line (pseudo-element) */
.drop-zone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s;
}

/* Model drop zones - extend hit area into model card padding (16px) */
.model-drop-zone {
  margin: -16px 0;
  padding: 16px 0;
}

/* Field drop zones - smaller hit area for tighter spacing */
.field-drop-zone {
  margin: -8px 0;
  padding: 8px 0;
}

/* Enable pointer events and show indicator when dragging a model */
[data-dragging-model=true] .model-drop-zone {
  pointer-events: auto;
}

[data-dragging-model=true] .model-drop-zone::after {
  height: 8px;
  background-color: oklch(0.93 0.005 260);
}

[data-dragging-model=true] .model-drop-zone.drag-over::after {
  height: 12px;
  background-color: oklch(0.7 0.15 244);
}

/* Enable pointer events and show indicator when dragging a field */
.field-drop-zone.show-field-zone {
  pointer-events: auto;
}

.field-drop-zone.show-field-zone::after {
  background-color: oklch(0.93 0.005 260);
}

.field-drop-zone.show-field-zone.drag-over::after {
  background-color: oklch(0.7 0.15 244);
  height: 6px;
}

/* Dragging state on source item */
.model-card.dragging {
  opacity: 0.4;
  border-color: oklch(0.75 0.01 260);
}

.model-field-row.dragging {
  opacity: 0.4;
  background-color: oklch(0.93 0.005 260);
}

/* =============================================================================
   Object Row Drag-and-Drop (Sheet Data Table)
   ============================================================================= */
/* Order column header - narrow, fits drag handle + 3-digit number */
.order-column {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0.25rem 2px !important;
  text-align: center;
  font-size: 0.7rem;
  color: oklch(0.75 0.01 260);
}

/* Order cell - contains drag handle and order number */
.order-cell {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 2px !important;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

/* Order number display - 3 digits, monospace */
.order-number {
  font-family: var(--font-monospace);
  font-size: 0.7rem;
  color: oklch(0.75 0.01 260);
  margin-left: 1px;
}

/* Row menu dropdown */
.row-menu-dropdown {
  display: inline-block;
  position: relative;
  margin-left: 2px;
}

.row-menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.6rem;
  color: oklch(0.85 0.008 260);
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s;
}

.order-cell:hover .row-menu-trigger,
.row-menu-dropdown.open .row-menu-trigger {
  opacity: 1;
}

.row-menu-trigger:hover {
  color: oklch(0.55 0.01 260);
}

.row-menu-dropdown .dropdown-menu {
  min-width: 100px;
  left: 0;
  top: 100%;
  z-index: 1000;
}

/* Deleted row styling - use color changes instead of opacity so dropdown isn't affected */
tr.deleted-row {
  background-color: oklch(0.98 0.003 260);
}

tr.deleted-row td:not(.order-cell) {
  text-decoration: line-through;
  text-decoration-color: oklch(0.58 0.2 25);
}

tr.deleted-row .spreadsheet-cell,
tr.deleted-row .spreadsheet-cell-readonly {
  text-decoration: line-through;
  text-decoration-color: oklch(0.58 0.2 25);
  color: #aaa;
}

tr.deleted-row .order-number,
tr.deleted-row .drag-handle {
  color: oklch(0.85 0.008 260);
}

tr.deleted-row .kind-cell {
  color: #aaa;
}

/* Disabled drag handle (when sorting is active) */
.drag-handle-disabled {
  display: inline-block;
  color: oklch(0.85 0.008 260);
  padding: 0;
  user-select: none;
  font-size: 0.75rem;
  line-height: 1;
  cursor: not-allowed;
}

/* Object drag handle styling */
.object-drag-handle {
  display: inline-block;
  cursor: grab;
  color: oklch(0.75 0.01 260);
  padding: 0;
  user-select: none;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
}

.object-drag-handle:hover {
  color: oklch(0.55 0.01 260);
  opacity: 1;
}

.object-drag-handle:active {
  cursor: grabbing;
}

/* Object drop zones - invisible rows that overlap adjacent data rows */
tr.object-drop-zone {
  height: 0;
  pointer-events: none;
  position: relative;
}

tr.object-drop-zone td {
  padding: 0 !important;
  border: none !important;
  height: 0;
  line-height: 0;
  position: relative;
}

/* Drop zone indicator - absolutely positioned, overlaps rows above/below */
tr.object-drop-zone td::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

/* Show drop zones when dragging - expand hit area but NOT visual height */
tr.object-drop-zone.show-object-zone {
  pointer-events: auto;
}

/* Expand the clickable area above/below by using a pseudo-element on the td */
tr.object-drop-zone.show-object-zone td {
  height: 0;
}

/* Use ::before to create a large invisible hit area that overlaps rows */
tr.object-drop-zone.show-object-zone td::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  bottom: -26px;
  z-index: 5;
  cursor: pointer;
}

tr.object-drop-zone.show-object-zone td::after {
  background-color: rgba(66, 153, 225, 0.3);
}

tr.object-drop-zone.show-object-zone.drag-over td::after {
  background-color: oklch(0.7 0.15 244);
  height: 6px;
}

/* Dragging state on source row */
tr.dragging {
  opacity: 0.4;
}

tr.dragging td {
  background-color: oklch(0.93 0.005 260) !important;
}

/* Body-level indicator for object dragging */
body.dragging-object .spreadsheet-table tr:not(.dragging):not(.object-drop-zone) {
  cursor: default;
}

/* Dropdown positioning - above trigger when not enough space below */
.dropdown-menu.dropdown-above {
  margin-bottom: 0.25rem;
}

/* =============================================================================
   Validated Input Components
   ============================================================================= */
.validated-input {
  margin-bottom: 1rem;
}

.validated-input > label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--text-primary, oklch(0.3 0.006 260));
}

.validated-input-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.validated-input-field {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.validated-input-field:focus {
  outline: none;
  border-color: oklch(0.7 0.15 244);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.validated-input-field.is-invalid,
.pure-form .validated-input-field.is-invalid {
  border-color: oklch(0.58 0.2 25);
  border-width: 2px;
}

.validated-input-field.is-invalid:focus,
.pure-form .validated-input-field.is-invalid:focus {
  border-color: oklch(0.58 0.2 25);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.validated-input-field.is-valid,
.pure-form .validated-input-field.is-valid {
  border-color: oklch(0.62 0.16 145);
}

.validated-input-field.is-valid:focus,
.pure-form .validated-input-field.is-valid:focus {
  border-color: oklch(0.62 0.16 145);
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.15);
}

/* Generic validity styling for any input wired with `data-validate` (see
   validation.js). Kept separate from `.validated-input-field` so inputs can opt
   in without inheriting that component's flex/padding layout. */
[data-validate].is-invalid,
.pure-form [data-validate].is-invalid {
  border-color: oklch(0.58 0.2 25);
  border-width: 2px;
}

[data-validate].is-invalid:focus,
.pure-form [data-validate].is-invalid:focus {
  border-color: oklch(0.58 0.2 25);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

[data-validate].is-valid,
.pure-form [data-validate].is-valid {
  border-color: oklch(0.62 0.16 145);
}

[data-validate].is-valid:focus,
.pure-form [data-validate].is-valid:focus {
  border-color: oklch(0.62 0.16 145);
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.15);
}

.validated-input-error {
  display: block;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: oklch(0.58 0.2 25);
  margin-top: 0.25rem;
}

.validated-input-error:empty {
  display: none;
}

.validated-input-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: oklch(0.55 0.01 260);
}

/* Date input specifics */
.validated-date-input .validated-input-field {
  max-width: 200px;
}

/* Time input specifics */
.validated-time-input .validated-input-field {
  max-width: 150px;
}

/* Datetime input specifics */
.validated-datetime-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.validated-datetime-date {
  max-width: 180px;
}

.validated-datetime-time {
  max-width: 120px;
}

/* Number input specifics */
.validated-number-input .validated-input-field {
  max-width: 200px;
}

/* ================================================
   Spreadsheet Table Component
   ================================================ */
.spreadsheet-container {
  overflow: auto;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
}

.spreadsheet-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.spreadsheet-table th,
.spreadsheet-table td {
  padding: 0;
  margin: 0;
  border: 1px solid oklch(0.85 0.008 260);
  position: relative;
}

/* Column headers */
.spreadsheet-table th {
  background: oklch(0.98 0.003 260);
  font-weight: 600;
  text-align: center;
  padding: 6px 12px;
  min-width: 100px;
  user-select: none;
  border-bottom: 2px solid oklch(0.85 0.008 260);
}

/* Row number column */
.spreadsheet-table .row-header {
  background: oklch(0.98 0.003 260);
  font-weight: 500;
  text-align: center;
  padding: 0 8px;
  min-width: 40px;
  width: 40px;
  color: oklch(0.55 0.01 260);
  user-select: none;
  border-right: 2px solid oklch(0.85 0.008 260);
}

/* Cell inputs */
.spreadsheet-cell {
  width: 100%;
  height: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}

.spreadsheet-cell:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px oklch(0.7 0.15 244);
}

/* Cell container for proper sizing */
.spreadsheet-table td {
  height: 28px;
  min-width: 100px;
}

/* Focused cell row/column highlight */
.spreadsheet-table tr:has(.spreadsheet-cell:focus) .row-header {
  background: oklch(0.96 0.02 250);
  color: oklch(0.52 0.2 258);
}

/* Selection state (for future multi-select) */
.spreadsheet-cell.selected {
  background: oklch(0.96 0.02 250);
}

/* Hover state for cells */
.spreadsheet-table td:hover {
  background: oklch(0.98 0.003 260);
}

.spreadsheet-table td:has(.spreadsheet-cell:focus) {
  background: transparent;
}

/* Corner cell (top-left) */
.spreadsheet-table th.corner-cell {
  min-width: 40px;
  width: 40px;
}

/* Ensure inputs fill the cell */
.spreadsheet-table td {
  position: relative;
}

.spreadsheet-cell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Readonly cells for view-only mode */
.spreadsheet-cell-readonly {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 28px;
  padding: 4px 8px;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  outline: none;
}

.spreadsheet-cell-readonly:focus {
  background: oklch(0.98 0.003 260);
  box-shadow: inset 0 0 0 1px oklch(0.85 0.008 260);
}

.spreadsheet-cell-readonly.richtext-cell {
  white-space: normal;
  overflow: auto;
}

.spreadsheet-cell.mini-richtext-editor.sheet-richtext {
  min-height: 28px;
  max-height: none;
  padding: 4px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 20px;
  overflow: auto;
}

.spreadsheet-cell.sheet-richtext:focus {
  border: none;
  box-shadow: inset 0 0 0 2px oklch(0.58 0.22 250);
}

.spreadsheet-cell-readonly.disabled-cell {
  background: oklch(0.98 0.003 260);
}

/* Readonly checkbox styling */
.spreadsheet-cell-readonly.spreadsheet-checkbox {
  cursor: not-allowed;
}

/* ================================================
   Sheet Data Page
   ================================================ */
.sheet-data-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sheet-data-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: oklch(0.98 0.003 260);
  border-bottom: 1px solid oklch(0.89 0.006 260);
}

.sheet-data-model-label {
  font-weight: 500;
  color: oklch(0.42 0.008 260);
}

.sheet-data-model-select {
  min-width: 200px;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  background-color: #fff;
}

.sheet-data-model-select:focus {
  border-color: oklch(0.7 0.15 244);
  outline: none;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.25);
}

.sheet-data-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: oklch(0.55 0.01 260);
  text-align: center;
}

.sheet-data-empty p {
  margin: 0.25rem 0;
}

.sheet-data-page .spreadsheet-container {
  flex: 1;
  overflow: auto;
  border: none;
  border-radius: 0;
  min-height: 0;
  /* The table sits inset from the sheet-document edges (the toolbar and
   add-row-controls above/below it stay flush). */
  padding: 0 1rem;
}

.sheet-data-page .spreadsheet-table {
  /* Fixed layout makes the <colgroup> widths authoritative: columns honour their
   set width instead of growing to fit content, and cell overflow clips. */
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

/* Colgroup column widths. The order/kind columns are fixed; data columns default to
   160px and are overridden per-field by the persisted-width <style> block. */
.sheet-data-page .spreadsheet-table col.order-col {
  width: 44px;
}

.sheet-data-page .spreadsheet-table col.kind-col {
  width: 80px;
}

.sheet-data-page .spreadsheet-table col.sheet-data-col {
  width: 160px;
}

/* Clip cell content to its (now fixed-width) column so long values don't hang out.
   Drop the auto-layout min-width that would otherwise fight the fixed widths. */
.sheet-data-page .spreadsheet-table td {
  overflow: hidden;
  min-width: 0;
}

/* Cells that host a popover (the Options dropdown and the row-menu dropdown) must
   never clip it — the dropdown extends below the cell, and clipping it would swallow
   clicks on its lower items. These stay overflow:visible regardless of focus. */
.sheet-data-page .spreadsheet-table td.order-cell,
.sheet-data-page .spreadsheet-table td:has(.options-cell-wrapper) {
  overflow: visible;
}

/* Column header styling for data table */
.sheet-data-page .spreadsheet-table th {
  text-align: left;
  vertical-align: top;
  /* Override the auto-layout 100px floor so columns can shrink to MIN_COL_WIDTH. */
  min-width: 0;
}

/* Resize handle on a data column header's right edge. Straddles the border so it's
   easy to grab; sits above the header content. JS (.col-resize-handle) drives the drag. */
.sheet-data-page .spreadsheet-table th .col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
  user-select: none;
}

.sheet-data-page .spreadsheet-table th .col-resize-handle:hover,
.sheet-data-page .spreadsheet-table th .col-resize-handle.resizing {
  background: rgba(74, 144, 217, 0.4);
}

/* Focus reveal: when the focused cell's content overflows its column, it shows the
   full content as an overlay popover, overflowing neighbours via a raised z-index
   without disturbing layout. The td always allows overflow on focus; the actual
   reveal styling is gated by the `.cell-revealed` class, which sheetData.js toggles
   only when overflow is detected (CSS alone can't measure overflow), so non-overflowing
   cells look unchanged during normal editing. Non-input cells size to content via
   max-content; <input> cells are sized to fit by JS (inputs ignore max-content). */
.sheet-data-page .spreadsheet-table td:focus-within {
  overflow: visible;
  z-index: 5;
}

.sheet-data-page .spreadsheet-table .spreadsheet-cell.cell-revealed,
.sheet-data-page .spreadsheet-table .spreadsheet-cell-readonly.cell-revealed {
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: 480px;
  overflow: visible;
  white-space: nowrap;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 5;
}

.sheet-data-page .spreadsheet-table th.kind-column {
  min-width: 80px;
  width: 80px;
  font-weight: 600;
  text-align: center;
  background: oklch(0.93 0.005 260);
  border-right: 2px solid oklch(0.85 0.008 260);
}

.sheet-data-page .column-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.sheet-data-page .column-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sheet-data-page .column-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-data-page .column-source {
  font-weight: 400;
  font-size: 0.75em;
  font-style: italic;
  color: oklch(0.63 0.012 260);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column sort button */
.column-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.75rem;
  color: oklch(0.75 0.01 260);
  vertical-align: middle;
  margin-left: 4px;
}

.column-sort-btn:hover {
  color: oklch(0.42 0.008 260);
}

.column-sort-btn[data-current=asc],
.column-sort-btn[data-current=desc] {
  color: oklch(0.7 0.15 244);
}

/* Sort chips container (inline with toolbar) */
.sheet-sort-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 1rem;
  align-items: center;
}

.sheet-sort-chips:empty {
  display: none;
}

.sheet-data-no-rows {
  text-align: center;
  color: oklch(0.55 0.01 260);
  font-style: italic;
  padding: 2rem !important;
}

/* Kind column in data rows */
.sheet-data-page td.kind-column,
.sheet-data-page td.kind-cell {
  text-align: center;
  background: oklch(0.98 0.003 260);
  font-size: 0.85rem;
  color: oklch(0.42 0.008 260);
  border-right: 2px solid oklch(0.85 0.008 260);
  padding: 0 8px;
}

/* Disabled cells (non-applicable fields) */
.spreadsheet-cell.disabled-cell {
  background: oklch(0.98 0.003 260);
  color: oklch(0.75 0.01 260);
  cursor: default;
}

.spreadsheet-cell.disabled-cell:focus {
  box-shadow: inset 0 0 0 2px oklch(0.7 0.15 244);
  background: oklch(0.93 0.005 260);
}

/* Invalid cells (value could not be parsed for the field type) */
.spreadsheet-cell.invalid-cell {
  border: 2px solid oklch(0.58 0.2 25);
  background: oklch(0.97 0.012 25);
}

.spreadsheet-cell.invalid-cell:focus {
  box-shadow: inset 0 0 0 2px oklch(0.58 0.2 25);
}

/* Options cell wrapper and searchable dropdown */
.options-cell-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.options-cell-trigger {
  width: 100%;
  height: 100%;
  padding: 0 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: inherit;
  font-family: inherit;
}

.options-cell-trigger:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px oklch(0.7 0.15 244);
  outline: none;
}

.options-cell-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.options-cell-placeholder {
  color: oklch(0.75 0.01 260);
  font-style: italic;
}

.options-cell-arrow {
  color: oklch(0.55 0.01 260);
  font-size: 0.75rem;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.options-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 150px;
  max-height: 200px;
  background: #fff;
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.options-dropdown.dropdown-above {
  top: auto;
  bottom: 100%;
}

.options-dropdown-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid oklch(0.93 0.005 260);
  font-size: 0.875rem;
  outline: none;
}

.options-dropdown-search:focus {
  background: oklch(0.98 0.003 260);
}

.options-dropdown-list {
  overflow-y: auto;
  max-height: 160px;
}

.options-dropdown-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.options-dropdown-item:hover,
.options-dropdown-item.highlighted {
  background: oklch(0.93 0.005 260);
}

.options-dropdown-item.selected {
  background: oklch(0.96 0.02 250);
  font-weight: 500;
}

.options-dropdown-item.selected:hover,
.options-dropdown-item.selected.highlighted {
  background: oklch(0.96 0.02 250);
}

.options-clear-text {
  color: oklch(0.55 0.01 260);
  font-style: italic;
}

/* Person dropdown items stack the display name over a muted email meta line. */
.person-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  white-space: normal;
}

.person-dropdown-item .person-name {
  font-size: 0.875rem;
}

.person-dropdown-item .person-email {
  font-size: 0.75rem;
  color: oklch(0.55 0.01 260);
}

/* Cell container for spreadsheet */
.spreadsheet-cell-td {
  position: relative;
  height: 28px;
  min-width: 100px;
  padding: 0;
}

/* Checkbox cells */
.spreadsheet-checkbox {
  width: 18px;
  height: 18px;
  margin: auto;
  display: block;
  cursor: pointer;
  /* Reset default checkbox appearance for consistent styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid oklch(0.75 0.01 260);
  border-radius: 3px;
  background: #fff;
  position: relative;
}

.spreadsheet-checkbox:checked {
  background: oklch(0.7 0.15 244);
  border-color: oklch(0.7 0.15 244);
}

.spreadsheet-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.spreadsheet-checkbox:focus {
  outline: 2px solid oklch(0.7 0.15 244);
  outline-offset: 2px;
}

/* Add Row Controls */
.add-row-controls {
  padding: 0.75rem 1rem;
  background: oklch(0.98 0.003 260);
  border-top: 1px solid oklch(0.89 0.006 260);
}

.add-row-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: oklch(0.42 0.008 260);
  background: #fff;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.add-row-button:hover {
  background: oklch(0.93 0.005 260);
  border-color: oklch(0.75 0.01 260);
}

.add-row-button:active {
  background: oklch(0.89 0.006 260);
}

.add-row-dropdown {
  position: relative;
  display: inline-block;
}

.add-row-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  width: max-content;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-top: 4px;
  z-index: 1000;
}

.add-row-menu.dropdown-above {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.add-row-menu .dropdown-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid oklch(0.89 0.006 260);
  font-size: 0.9rem;
}

.add-row-menu .dropdown-search:focus {
  outline: none;
  background: oklch(0.98 0.003 260);
}

.add-row-menu .dropdown-options {
  max-height: 220px;
  overflow-y: auto;
}

.add-row-menu .dropdown-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
}

.add-row-menu .dropdown-option:hover {
  background: oklch(0.93 0.005 260);
}

.add-row-menu .dropdown-option:active {
  background: oklch(0.89 0.006 260);
}

/* =============================================================================
   Utility Classes (replacing inline styles per audit)
   ============================================================================= */
.app-error-margin {
  margin: 2em;
}

.app-logo-centered {
  display: block;
  margin: 0 auto;
}

.full-width {
  width: 100%;
}

.input-width-sm {
  width: 120px;
}

.select-auto-inline {
  width: auto;
  margin-left: 0.5em;
}

.share-modal-new {
  color: oklch(0.35 0.1 145);
}

/* =========================================================================
   Saved Sheet Views — chip bar + New View modal
   ========================================================================= */
.sheet-view-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: 0.75rem;
}

.sheet-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.3 0.006 260);
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 12px;
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1.4;
}

.sheet-view-chip:hover {
  background-color: oklch(0.89 0.006 260);
}

.sheet-view-chip.sheet-view-default {
  font-weight: 600;
}

.sheet-view-chip.sheet-view-add {
  background-color: transparent;
  border-style: dashed;
  color: oklch(0.7 0.15 244);
}

.sheet-view-chip.sheet-view-add:hover {
  background-color: oklch(0.96 0.02 250);
}

/* Delete affordance lives inside a deletable (sheet-owned) view chip. */
.sheet-view-chip .chip-remove {
  color: oklch(0.63 0.012 260);
  cursor: pointer;
  padding: 0 0.1rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
}

.sheet-view-chip .chip-remove:hover {
  color: oklch(0.62 0.2 27);
}

/* New View + Edit View + Delete View modals: hidden until data-visible (matches the
   other modals, since .modal-backdrop itself defaults to display:flex). */
#new-view-modal,
#edit-view-modal,
#delete-view-modal {
  display: none;
}

#new-view-modal[data-visible=true],
#edit-view-modal[data-visible=true],
#delete-view-modal[data-visible=true] {
  display: flex;
}

/* The inline error only occupies space once it has a message. */
#new-view-error:empty,
#edit-view-error:empty {
  display: none;
}

/* Shared warning line (e.g. editing/deleting a template-owned, shared view). */
.form-warning {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  font-size: 0.9rem;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background-color: oklch(0.97 0.055 92);
  border-color: oklch(0.85 0.17 90);
  color: oklch(0.5 0.11 78);
}

/* Stack each field's label above its control, and let the name input span the
   modal width like the description box (both fields share .form-field's margin). */
#new-view-form > .form-field > label,
#edit-view-modal .form-field > label {
  display: block;
  margin-bottom: 0.25rem;
}

#new-view-form input[type=text],
#edit-view-modal input[type=text] {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* New View modal: scope radio + the mini rich-text description editor. */
.new-view-scope {
  border: none;
  padding: 0;
  margin: 0.5rem 0;
}

.new-view-scope legend {
  font-size: 0.85rem;
  color: oklch(0.55 0.01 260);
  padding: 0;
  margin-bottom: 0.25rem;
}

.new-view-scope-option {
  display: block;
  font-weight: normal;
  margin: 0.15rem 0;
}

/* Mini (b/i/u/s) editor used for the View description — short, unlike the
   full-height document editor it inherits from. */
.text-editor.mini-richtext-editor {
  min-height: 5rem;
  max-height: 12rem;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.5rem;
}

/* ---- Views management tab ------------------------------------------------- */
.sheet-views-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  max-width: 48rem;
}

/* Forms tab: content is loaded lazily into this mount, so put the
   horizontal inset on the mount itself (matches Models/Views padding). */
#forms-tab-loader {
  padding: 1rem 1.5rem;
}

.sheet-views-empty {
  color: oklch(0.55 0.01 260);
  font-style: italic;
}

.sheet-view-card {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background-color: #fff;
}

.sheet-view-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sheet-view-card-title {
  margin: 0;
  font-size: 1.05rem;
  flex: 1 1 auto;
}

.sheet-view-template-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: oklch(0.55 0.01 260);
  background-color: oklch(0.93 0.005 260);
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 10px;
  padding: 0.05rem 0.5rem;
}

/* Compact kebab trigger inside a view card (overrides the default button look). */
.sheet-view-card .dropdown {
  flex: 0 0 auto;
}

.sheet-view-card .dropdown-trigger {
  padding: 0.1rem 0.5rem;
  line-height: 1;
  font-size: 1.1rem;
  background: transparent;
  border: none;
  box-shadow: none;
  color: oklch(0.55 0.01 260);
}

.sheet-view-card .dropdown-trigger:hover {
  background-color: oklch(0.93 0.005 260);
}

.sheet-view-card-description {
  margin: 0.4rem 0 0;
  color: oklch(0.3 0.006 260);
  font-size: 0.9rem;
  /* Description is canonical rich text: newlines are stored as "\n", so render
   them as line breaks (matching the read-only plaintext rich-text view). */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.sheet-view-card-summary {
  margin-top: 0.5rem;
}

.sheet-view-summary-line {
  margin: 0.15rem 0;
  color: oklch(0.55 0.01 260);
  font-size: 0.85rem;
}

.sheet-view-sort-key {
  white-space: nowrap;
}

.sheet-view-card-footer {
  margin-top: 0.6rem;
}

/* Link-styled button: opens the view on the Data tab (own line). */
.sheet-view-open-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: oklch(0.7 0.15 244);
  cursor: pointer;
}

.sheet-view-open-link:hover {
  color: oklch(0.52 0.2 258);
  text-decoration: underline;
}

/* ============================================================================
   Sheet-based Forms — public form page + editor Forms tab
   ============================================================================ */
/* Public form page (/f/{slug}) */
.public-form {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Google reCAPTCHA widget spacing (registration + public forms). Google styles
   the checkbox iframe itself; we only own the margin around it. */
.recaptcha-widget {
  margin: 1rem 0;
}

.public-form .form-title {
  margin-bottom: 0.5rem;
}

.public-form .form-description {
  margin-bottom: 1rem;
  color: oklch(0.55 0.01 260);
}

.public-form .form-section {
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.public-form .form-section legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.public-form .form-field {
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.public-form .form-field-label {
  font-weight: 600;
}

.public-form .form-field .required-marker {
  color: oklch(0.58 0.2 25);
}

.public-form .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
}

.public-form .form-field-help {
  font-size: 0.85em;
  color: oklch(0.55 0.01 260);
  margin: 0;
}

.public-form .form-field.has-error .form-control {
  border-color: oklch(0.58 0.2 25);
  border-width: 2px;
}

/* Error message text under a field. Empty (no text) when the field is valid, so
   it takes no space; the client validator (validation.ts) or a submit failure
   fills it. Inline `.is-invalid`/`.is-valid` borders come from the generic
   `[data-validate]` rules above. */
.public-form .form-field-error {
  color: oklch(0.58 0.2 25);
  font-size: 0.85em;
  margin: 0;
}

.public-form .form-submit {
  margin-top: 0.5rem;
}

/* Honeypot: present in the DOM, invisible to humans, off the tab order. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-thank-you,
.form-closed {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0 1rem;
  text-align: center;
}

/* Editor Forms tab */
.forms-tab .forms-create {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.forms-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row {
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.form-row-title {
  font-weight: 600;
}

.form-row-model {
  color: oklch(0.55 0.01 260);
  font-size: 0.9em;
}

.form-row-link {
  font-family: monospace;
}

/* The kebab "⋯" menu sits at the right end of the card's top row. */
.form-row-menu {
  margin-left: auto;
}

/* Response count is its own (second) row now, so no right-push. */
.form-row-count {
  color: oklch(0.55 0.01 260);
  font-size: 0.85em;
}

.form-row-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.form-delete-button {
  margin-left: auto;
}

/* ── Forms builder (Phase 4) ─────────────────────────────────────────────── */
.forms-builder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.forms-builder-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.forms-builder-bar .form-row-link {
  margin-left: auto;
}

.builder-meta,
.builder-add-section,
.builder-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.builder-add-section {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.builder-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9em;
  color: oklch(0.55 0.01 260);
  width: 100%;
  max-width: 32rem;
}

/* Inside a field card the labels sit inline (text beside the input) and each
   takes the full row width, so its input can grow across the whole card. */
.builder-field-form .builder-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: none;
}

.builder-field-form .builder-label .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.builder-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9em;
  margin-right: 0.75rem;
}

.builder-num {
  width: 6rem;
}

.builder-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.builder-section {
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0;
}

/* Builder rows double as `.single-list-row` (for drag reorder), which is a
   horizontal flex. Override to stack vertically so the head (grip/title/menu)
   sits on top and its content (fields / presentation form) flows underneath,
   rather than head-left / content-right. */
.builder-section.single-list-row,
.builder-field.single-list-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.builder-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid oklch(0.89 0.006 260);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.builder-section-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
}

.builder-section-title {
  font-weight: 600;
  min-width: 10rem;
}

.builder-section-desc {
  min-width: 14rem;
  flex: 1 1 auto;
}

.builder-section-actions,
.builder-field-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.builder-fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.builder-field {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 6px;
  padding: 0.6rem;
  background: oklch(0.98 0.003 260);
  /* Extra breathing room before the next field's name. */
  margin-bottom: 0.75rem;
}

.builder-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.builder-field-name {
  font-weight: 600;
}

.builder-field-kind {
  font-size: 0.8em;
  color: oklch(0.55 0.01 260);
  border: 1px solid oklch(0.85 0.008 260);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.builder-field-pi {
  font-size: 0.8em;
  color: oklch(0.53 0.22 300);
}

.builder-field-actions {
  margin-left: auto;
}

.builder-field-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.builder-constraints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.builder-variants {
  flex-direction: row;
}

.builder-field-userref {
  font-style: italic;
}

.builder-section-empty {
  margin: 0.25rem 0;
}

/* ── Forms phase-4 revision: public form clusters + builder + data tab ─────── */
/* PersonalInfo cluster on the public form. */
.public-form .form-personal-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Given + family name side-by-side; collapses to one column on narrow screens. */
.public-form .form-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 30rem) {
  .public-form .form-name-row {
    grid-template-columns: 1fr;
  }
}
/* The "My family name comes first" toggle reads as a lesser, secondary line. */
.public-form .form-field-reversed {
  margin-top: -0.15rem;
}

.public-form .form-field-label-subtle {
  color: oklch(0.55 0.01 260);
  font-size: 0.9em;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Access & entries block in the form builder. */
.builder-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* Submitter cell on the Data tab: a profile link, never a raw UUID. */
.submitter-link {
  color: oklch(0.52 0.2 258);
  text-decoration: none;
}

.submitter-link:hover {
  text-decoration: underline;
}

.submitter-anon {
  color: oklch(0.63 0.012 260);
  font-style: italic;
}

/* Forms/PersonalInfo confirmation modals use dynamic ids, so they hide via a
   class (not an id rule). `.modal-backdrop` defaults to display:flex, so without
   this the hidden modal overlays the page and intercepts clicks. */
.modal-backdrop.confirm-modal {
  display: none;
}

.modal-backdrop.confirm-modal[data-visible=true] {
  display: flex;
}

/* Rich-text form field: a contenteditable mini editor styled like an input. */
/* Mini rich-text editor box (public forms + the profile edit page's Bio field).
   Both give the contenteditable a visible input-like frame. */
.public-form .form-richtext,
.edit-profile-page .form-richtext {
  min-height: 4.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  background-color: #fff;
  border: 1px solid oklch(0.24 0.006 260);
  border-radius: 4px;
  resize: vertical;
  overflow: auto;
}

/* Forms builder field drag-reorder (single-list rows). */
.builder-fields-list .single-list-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.builder-field-grip {
  cursor: grab;
  color: oklch(0.63 0.012 260);
  user-select: none;
}

.builder-field-grip:active {
  cursor: grabbing;
}

/* Forms builder: section drag-reorder + droppable empty field zones. */
.builder-sections-list .single-list-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.builder-section-grip {
  cursor: grab;
  color: oklch(0.63 0.012 260);
  user-select: none;
  margin-right: 0.4rem;
}

.builder-section-grip:active {
  cursor: grabbing;
}

/* Keep an empty section's field list droppable. */
.builder-fields-list .single-list-rows {
  min-height: 1.6rem;
}

/* ===========================================================================
   Form Wizard (Phase 5) — guided create flow hosted on the Sheet.
   =========================================================================== */
.form-wizard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Step rail: numbered Model → Layout → Preview → Access. */
.wizard-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid oklch(0.93 0.005 260);
  padding-bottom: 0.75rem;
}

.wizard-rail-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: oklch(0.63 0.012 260);
  font-weight: 500;
}

.wizard-rail-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid oklch(0.85 0.008 260);
  background: #fff;
  font-size: 0.85em;
}

.wizard-rail-step.current {
  color: oklch(0.24 0.006 260);
}

.wizard-rail-step.current .wizard-rail-index {
  border-color: oklch(0.52 0.2 258);
  background: oklch(0.52 0.2 258);
  color: #fff;
}

.wizard-rail-step.done {
  color: oklch(0.55 0.01 260);
}

.wizard-rail-step.done .wizard-rail-index {
  border-color: oklch(0.52 0.2 258);
  color: oklch(0.52 0.2 258);
}

.wizard-body {
  min-height: 8rem;
}

.wizard-step-intro h2 {
  margin: 0 0 0.25rem;
}

.wizard-step-intro .hint {
  margin: 0 0 1rem;
}

/* Footer: Back on the left, Exit + Next/Finish on the right. */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid oklch(0.93 0.005 260);
  padding-top: 0.75rem;
}

.wizard-footer-right {
  display: flex;
  gap: 0.5rem;
}

/* Step-1 sample preview controls + mount. */
.wizard-preview-controls {
  margin-top: 1rem;
}

.wizard-preview-mount:not(:empty) {
  margin-top: 1rem;
}

/* Non-interactive form preview (Wizard steps 1 & 3). */
.form-preview {
  border: 1px solid oklch(0.89 0.006 260);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: oklch(0.98 0.003 260);
}

.form-preview-caption {
  margin: 0 0 0.75rem;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: oklch(0.63 0.012 260);
}

/* The preview body reuses .public-form styling but is display-only. */
.form-preview-body {
  pointer-events: none;
}

/* Step 3 shows the blank and sample-filled previews side by side (stacking on
   narrow viewports). */
.wizard-preview-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

/* =============================================================================
   Invite Modal + Invite accept page
   ============================================================================= */
.invite-modal {
  width: 90%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invite-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invite-modal-header h2 {
  margin-bottom: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: oklch(0.63 0.012 260);
  padding: 0 0.25rem;
}

.modal-close:hover {
  color: oklch(0.24 0.006 260);
}

/* Reuse the .public-form *field* styles (full-width inputs, labels above) but drop
   its page-container styles — inside the modal the form fills the available width. */
.invite-add-form.public-form {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Inline error for the add-person form (filled by the hx-on error handler). Empty
   when valid, so it takes no space. */
#invite-add-error:empty {
  display: none;
}

#invite-add-error {
  margin: 0 0 0.5rem;
}

/* Project People page: outstanding-invite rows carry resend/rescind actions on the
   right, so the row is a flex container (member rows keep their single link). */
.user-item-invite {
  display: flex;
  align-items: center;
}

.user-item-invite .user-link-static {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: default;
  flex: 1;
  min-width: 0;
}

.invitee-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
  flex-shrink: 0;
}

.invitee-row-actions .pure-button {
  font-size: 0.85rem;
}

/* Status badge shown on invitee (and used inside the People meta line). */
.invite-status {
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

.invite-status-member {
  background-color: oklch(0.92 0.045 145);
  color: oklch(0.62 0.16 145);
}

.invite-status-pending {
  background-color: oklch(0.97 0.075 92);
  color: oklch(0.5 0.11 78);
}

.invite-status-accepted {
  background-color: oklch(0.92 0.045 145);
  color: oklch(0.62 0.16 145);
}

.invite-status-declined {
  background-color: oklch(0.9 0.045 20);
  color: oklch(0.62 0.2 27);
}

.invite-status-expired {
  background-color: oklch(0.93 0.005 260);
  color: oklch(0.42 0.008 260);
}

/* Invite accept page (/app/invite/{slug}) */
.invite-card {
  border-radius: 8px;
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid oklch(0.93 0.005 260);
}

.invite-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.casting-demographics-section {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms ease;
  margin-top: 1rem;
}

.casting-demographics-section[data-open=false] {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.casting-demographics-inner {
  overflow: hidden;
  min-height: 0;
}

.demographics-fields {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease;
  margin-top: 0.5rem;
}

.demographics-fields[data-open=false] {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.demographics-fields-inner {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .casting-demographics-section,
.demographics-fields {
    transition: none;
  }
}
.demographics-subgroup {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.93 0.005 260);
}

.demographics-subgroup:first-of-type {
  border-top: none;
  padding-top: 0;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.25rem 0 0.75rem;
}

.checkbox-group label {
  margin: 0;
}

.playable-age-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.playable-age-range input[type=number] {
  width: 5rem;
}

.demographics-inline-list {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

.profile-demographics {
  margin-top: 1.5rem;
}

.demographics-list dt {
  font-weight: bold;
  margin-top: 0.5rem;
}

.demographics-list dd {
  margin: 0 0 0.25rem 0;
}

.profile-demographics .demographics-list dt {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(0.55 0.01 260);
  margin-top: 0.75rem;
}
.profile-demographics .demographics-list dt:first-child {
  margin-top: 0;
}
.profile-demographics .demographics-list dd {
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.35;
  color: oklch(0.24 0.006 260);
  margin: 0.15rem 0 0 0;
}
.profile-demographics .demographics-inline-list {
  font-size: 1.05rem;
}