/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */

/* ── PicoCSS Overrides ─────────────────────────────────────────────────── */

:root,
:host {
  --pico-font-family-emoji:
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --pico-font-family-sans-serif:
    "Funnel Sans", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica,
    Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
  --pico-font-family-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace, var(--pico-font-family-emoji);
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-line-height: 1.5;
  --pico-font-weight: 400;
  --pico-font-size: 100%;
  --pico-text-underline-offset: 0.1rem;
  --pico-border-radius: 0.25rem;
  --pico-border-width: 0.0625rem;
  --pico-outline-width: 0.125rem;
  --pico-transition: 0.2s ease-in-out;
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: 1rem;
  --pico-block-spacing-vertical: var(--pico-spacing);
  --pico-block-spacing-horizontal: var(--pico-spacing);
  --pico-grid-column-gap: var(--pico-spacing);
  --pico-grid-row-gap: var(--pico-spacing);
  --pico-form-element-spacing-vertical: 0.3rem;
  --pico-form-element-spacing-horizontal: 1rem;
  --pico-form-element-focus-color: var(--pico-primary-focus);
  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-primary-focus);
  --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem
    var(--pico-form-element-border-color);
  --pico-modal-overlay-backdrop-filter: blur(0.375rem);
  --pico-nav-element-spacing-vertical: 0.5rem;
  --pico-nav-element-spacing-horizontal: 0.5rem;
  --pico-nav-link-spacing-vertical: 0.5rem;
  --pico-nav-link-spacing-horizontal: 0.5rem;
  --pico-nav-breadcrumb-divider: ">";
  --pico-primary-focus: #f7e64e;
  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");

  /* Wosh design tokens, sourced from Figma (fileKey Qa9KGapA6cx2yid4aDvr75) */
  --color-brand-primary: #a53860;
  --color-brand-secondary: #ffa5ab;
  --color-brand-disabled: #e5e7ea;
  --color-brand-selected: #911243;
  --color-palette-blush-rose: #da627d;
  --color-palette-cherry-rose: #a53860;
  --color-outline-hover-border: #e3266f;
  --color-outline-hover-bg: #fcf2f6;
  --color-outline-press-bg: #fae0ea;
  --color-success-border: #3da755;
  --color-error-border: #da3e39;
  --color-focus-info: #4e61f6;
  --color-list-bg: #f9fafb;
  --color-toggle-on: #e95d93;
  --color-toggle-hover-off: #d2d5db;
  --color-toggle-focus-ring: #f5c1d5;
  --color-toggle-disabled-off: #f3f4f6;
  --color-toggle-disabled-on: #edeffe;
  --text-color-primary-white: rgb(255 255 255 / 90%);
  --text-color-primary-black: #131927;
  --text-color-disabled: #9fa1ae;
  --text-color-secondary: #6d717f;
  --text-color-success: #43b75d;
  --text-color-error: #ee443f;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-xl: 24px;
  --font-weight-semibold: 600;
  --transition-fast: 0.15s ease;
  --top-nav-height: 70px;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7ea;
  --color-gray-300: #d2d5db;
  --color-gray-400: #9fa1ae;
  --color-gray-500: #6e7080;
  --color-gray-600: #4b5560;
  --color-gray-700: #384050;
  --color-gray-800: #202836;
  --color-gray-900: #131927;
}

/* Color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]),
:host:not([data-theme="dark"]) {
  --pico-primary: var(--color-gray-800, #202836);
  --pico-primary-background: var(--pico-color-grey-450);
  --app-background: var(--pico-color-grey-10, #f9fafb);
  --calendar-background-weekend: var(--pico-color-grey-100, #f3f4f6);
  --pico-secondary-background: var(--pico-color-grey-100, #f3f4f6);
  --pico-muted-border-color: var(--color-gray-300, #d2d5db);
  --pico-card-background-color: var(--color-gray-100, #f3f4f6);
  --pico-primary-inverse: var(--color-gray-800, #202836);
  /* --pico-form-element-focus-color: var(--pico-primary-focus, rgba(245, 107, 61, 0.375));*/
}

/* Color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
  --pico-primary: var(--pico-color-gray-300, #d2d5db);
  --app-background: var(--pico-color-gray-900, #131927);
  --calendar-background-weekend: var(--pico-color-gray-700, #384050);
  --pico-secondary-background: var(--pico-color-gray-800, #202836);
  --pico-muted-border-color: var(--color-gray-800, #384050);
  --pico-primary-background: var(--pico-color-grey-500, #202836);
  --pico-primary-underline: rgba(245, 107, 61, 0.5);
  --pico-primary-hover: #f8a283;
  --pico-primary-hover-background: #e74b1a;
  --pico-primary-focus: rgba(245, 107, 61, 0.375);

  /*  --pico-form-element-focus-color: var(--pico-primary-focus, rgba(245, 107, 61, 0.375)); */
  --pico-primary-inverse: #fff;
}

@media (min-width: 576px) {
  :root,
  :host {
    --pico-font-size: 106.25%;
  }
}

@media (min-width: 768px) {
  :root,
  :host {
    --pico-font-size: 112.5%;
  }
}

@media (min-width: 1024px) {
  :root,
  :host {
    --pico-font-size: 118.75%;
  }
}

@media (min-width: 1280px) {
  :root,
  :host {
    --pico-font-size: 125%;
  }
}

@media (min-width: 1536px) {
  :root,
  :host {
    --pico-font-size: 131.25%;
  }
}

/* ── Article form footer: Cancel left, Submit right ───────────── */

article > footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

article > footer button,
article > footer [type="submit"],
article > footer [type="button"],
article > footer [type="reset"] {
  width: auto;
  flex-grow: 0;
  margin-bottom: 0;
}

a {
  --pico-text-decoration: underline;
}

a.secondary,
a.contrast {
  --pico-text-decoration: underline;
}

small {
  --pico-font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-weight: 700;
}

h1 {
  --pico-font-size: 2rem;
  --pico-line-height: 1.125;
  --pico-typography-spacing-top: 3rem;
}

h2 {
  --pico-font-size: 1.75rem;
  --pico-line-height: 1.15;
  --pico-typography-spacing-top: 2.625rem;
}

h3 {
  --pico-font-size: 1.5rem;
  --pico-line-height: 1.175;
  --pico-typography-spacing-top: 2.25rem;
}

h4 {
  --pico-font-size: 1.25rem;
  --pico-line-height: 1.2;
  --pico-typography-spacing-top: 1.874rem;
}

h5 {
  --pico-font-size: 1.125rem;
  --pico-line-height: 1.225;
  --pico-typography-spacing-top: 1.6875rem;
}

h6 {
  --pico-font-size: 1rem;
  --pico-line-height: 1.25;
  --pico-typography-spacing-top: 1.5rem;
}

thead th,
thead td,
tfoot th,
tfoot td {
  --pico-font-weight: 600;
  --pico-border-width: 0.1875rem;
}

pre,
code,
kbd,
samp {
  --pico-font-family: var(--pico-font-family-monospace);
}

kbd {
  --pico-font-weight: bolder;
}

input:not(
  [type="submit"],
  [type="button"],
  [type="reset"],
  [type="checkbox"],
  [type="radio"],
  [type="file"]
),
:where(select, textarea) {
  --pico-outline-width: 0.0625rem;
}

[type="search"] {
  --pico-border-radius: 5rem;
}

[type="checkbox"],
[type="radio"] {
  --pico-border-width: 0.125rem;
}

[type="checkbox"][role="switch"] {
  --pico-border-width: 0.1875rem;
}

details.dropdown summary:not([role="button"]) {
  --pico-outline-width: 0.0625rem;
}

nav details.dropdown summary:focus-visible {
  --pico-outline-width: 0.125rem;
}

[role="search"] {
  --pico-border-radius: 5rem;
}

[role="search"]:has(
  button.secondary:focus,
  [type="submit"].secondary:focus,
  [type="button"].secondary:focus,
  [role="button"].secondary:focus
),
[role="group"]:has(
  button.secondary:focus,
  [type="submit"].secondary:focus,
  [type="button"].secondary:focus,
  [role="button"].secondary:focus
) {
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-secondary-focus);
}

[role="search"]:has(
  button.contrast:focus,
  [type="submit"].contrast:focus,
  [type="button"].contrast:focus,
  [role="button"].contrast:focus
),
[role="group"]:has(
  button.contrast:focus,
  [type="submit"].contrast:focus,
  [type="button"].contrast:focus,
  [role="button"].contrast:focus
) {
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-contrast-focus);
}

[role="search"] button,
[role="search"] [type="submit"],
[role="search"] [type="button"],
[role="search"] [role="button"],
[role="group"] button,
[role="group"] [type="submit"],
[role="group"] [type="button"],
[role="group"] [role="button"] {
  --pico-form-element-spacing-horizontal: 2rem;
}

details summary[role="button"]:not(.outline)::after {
  filter: brightness(0) invert(1);
}

[aria-busy="true"]:not(input, select, textarea):is(
    button,
    [type="submit"],
    [type="button"],
    [type="reset"],
    [role="button"]
  ):not(.outline)::before {
  filter: brightness(0) invert(1);
}

/* ── App shell ─────────────────────────────────────────────────── */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--top-nav-height, 70px);
  display: flex;
  align-items: center;
  background: var(--app-background, #fff);
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
  padding: 0 var(--spacing-lg);
}

.top-nav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin: 0;
}

.top-nav nav > ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav nav a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--spacing-sm);
  font-family: var(--pico-font-family-sans-serif);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5rem;
  color: var(--pico-color, #131927);
  text-decoration: none;
}

.top-nav nav a.active {
  color: var(--pico-primary-focus, #f76b3d);
}

.app-body {
  display: flex;
  min-height: calc(100vh - var(--top-nav-height, 70px));
  background: var(--app-background, #fff);
}

/* ── Engine layout (shared pattern for all in-repo engines) ───── */

.engine-layout {
  display: flex;
  flex: 1;
  width: 100%;
  position: relative;
}

/* Hamburger — hidden on desktop, shown on mobile */
.engine-hamburger {
  display: none;
  position: fixed;
  top: calc(var(--top-nav-height, 70px) + 0.75rem);
  left: 0.75rem;
  z-index: 200;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  color: var(--pico-color, #111827);
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
  transition: background 0.12s ease;
  padding: 0;
}

.engine-hamburger:hover {
  background: var(--pico-secondary-background, #f3f4f6);
}

/* Backdrop overlay — conditionally rendered by template, always covers content */
.engine-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgb(0 0 0 / 35%);
  animation: engine-backdrop-in 0.18s ease both;
}

@keyframes engine-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.engine-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--engine-sidebar-width, 220px);
  flex-shrink: 0;
  background: var(--pico-secondary-background, #f3f4f6);
  border-right: 1px solid var(--pico-muted-border-color, #e5e7eb);
  padding: 0.75rem 0;
  transition: width var(--transition-fast, 0.15s ease);
}

/* Direct width (not the custom property) so it overrides the inline width the
   resize modifier writes onto the element. */
.engine-sidebar--collapsed {
  width: 12px;
}

/* display:none (not visibility/overflow) so the hidden content adds no layout
   width — otherwise it would spill past the 12px rail and scroll the page —
   and so it never clips the toggle button overhanging the right edge. */
.engine-sidebar--collapsed > :not(.engine-sidebar-collapse) {
  display: none;
}

/* No width animation mid-drag — the pointer already sets the pace. */
body.is-resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing-sidebar .engine-sidebar {
  transition: none;
}

/* Collapse / expand toggle — sits on the sidebar's right edge, always visible */
.engine-sidebar-collapse {
  position: absolute;
  top: 8px;
  right: -11px;
  z-index: 6;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 50%;
  color: var(--pico-muted-color, #6b7280);
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.15s ease;
}

.engine-sidebar-collapse:hover {
  background: var(--pico-secondary-background, #f3f4f6);
  color: var(--pico-color, #111827);
}

.engine-sidebar--collapsed .engine-sidebar-collapse {
  transform: rotate(180deg);
}

/* Drag handle on the right edge — invisible hit area, bar shows on hover */
.engine-sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 5;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.engine-sidebar-resize-handle::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  background: var(--color-brand-primary, #a53860);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.12s ease;
}

.engine-sidebar-resize-handle:hover::after,
.engine-sidebar-resize-handle:focus-visible::after,
body.is-resizing-sidebar .engine-sidebar-resize-handle::after {
  transform: translateX(-50%) scaleX(1);
}

.engine-sidebar-resize-handle:focus-visible {
  outline: none;
}

/* Close button inside sidebar — hidden on desktop */
.engine-sidebar-close {
  display: none;
  margin: 0 0.75rem 0.5rem auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.375rem;
  color: var(--pico-muted-color, #6b7280);
  cursor: pointer;
  transition: background 0.12s ease;
  padding: 0;
}

.engine-sidebar-section {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pico-muted-color, #6b7280);
}

.engine-sidebar-nav,
.engine-sidebar-cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.engine-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--pico-color, #111827);
  border-radius: 0;
  min-height: 44px;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.engine-sidebar-link.active {
  background: var(--pico-primary-background, #eff6ff);
  color: var(--color-gray-100, #f3f4f6);
  font-weight: 600;
}

.engine-sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--pico-muted-border-color, #e5e7eb);
  padding-top: 0.5rem;
}

.engine-sidebar-settings-toggle {
  width: 100%;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

.engine-sidebar-settings-chevron {
  margin-left: auto;
  transition: transform 0.12s ease;
}

.engine-sidebar-settings-chevron--open {
  transform: rotate(180deg);
}

.engine-sidebar-submenu .engine-sidebar-link {
  padding-left: 2.25rem;
}

.engine-sidebar-cal-item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 0.375rem 1rem;
  min-height: 44px;
}

.engine-sidebar-cal-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--pico-color, #111827);
  cursor: pointer;
}

.engine-sidebar-cal-swatch {
  flex: none;

  /* align-items: baseline synthesizes the checkbox's baseline from its bottom
     edge, which lands a few px low; lift it so the box rests on the label's
     text baseline. */
  transform: translateY(-0.25em);
}

.engine-content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow: auto;
}

/* ── Mobile breakpoint ────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Home has nothing useful to link to mid-engine on mobile, so the
     hamburger (below) takes its slot in the top nav instead. Hidden via
     visibility rather than display so the row's other ul stays pinned to
     the right edge (justify-content: space-between needs both to remain
     flex items) instead of collapsing toward the now-empty left side. */
  .top-nav nav > ul:first-of-type {
    visibility: hidden;
  }

  .engine-hamburger {
    display: flex;

    /* top: 50% on a fixed element resolves against the viewport, not the
       nav bar -- use the nav's own height var instead. */
    top: calc(var(--top-nav-height, 70px) / 2);
    left: var(--spacing-lg);
    transform: translateY(-50%);
  }

  .engine-overlay-backdrop {
    display: block;
  }

  .engine-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 150;
    width: min(280px, 85vw);
    padding-top: calc(var(--top-nav-height, 70px) + 0.5rem);
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
  }

  .engine-sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgb(0 0 0 / 18%);
  }

  /* Collapse / resize is a desktop affordance; on mobile the sidebar is an
     overlay drawer, so neutralize any persisted collapsed state. The drawer
     width from the rule above already wins over the 12px collapsed width. */
  .engine-sidebar--collapsed > :not(.engine-sidebar-collapse) {
    display: revert;
  }

  .engine-sidebar-collapse,
  .engine-sidebar-resize-handle {
    display: none;
  }

  .engine-sidebar-close {
    display: flex;
  }

  .engine-content {
    /* The hamburger now sits in the top nav instead of floating over the
       content, so this no longer needs extra top room to clear it -- kept
       tight so the search bar and view switcher sit close to the nav. */
    padding: 0.5rem 1rem 1rem;
  }
}

/* ── Profile menu ─────────────────────────────────────────────── */

.profile-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.top-nav .profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pico-primary-background, #1a56db);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s ease;
  outline-offset: 2px;
}

.profile-avatar:hover {
  opacity: 0.85;
}

/* transparent full-screen layer that closes the menu on outside click */
.profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 101;
  min-width: 220px;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  padding: 0.5rem 0;
}

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.profile-avatar-large {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pico-primary-background, #1a56db);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.profile-section-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pico-muted-color, #6b7280);
  text-transform: uppercase;
}

.profile-username {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pico-color, #111827);
}

.profile-divider {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px solid var(--pico-muted-border-color, #e5e7eb);
}

/* .profile-nav-list.profile-nav-list doubles the class specificity so this
   wins over Pico's `nav ul:first-of-type` negative margin, since this list
   is nested inside the top <nav> */
.profile-nav-list.profile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
}

.profile-nav-list li {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* .profile-menu-item.profile-menu-item doubles the class specificity so this
   wins over Pico's `nav li button` padding, since the dropdown is nested
   inside the top <nav> */
.profile-menu-item.profile-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--pico-card-background-color, #fff);
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: var(--pico-color, #111827);
  cursor: pointer;
  transition: background 0.1s ease;
  border-radius: 0;
}

.profile-menu-item:focus-visible {
  outline: 2px solid var(--pico-primary-background, #1a56db);
  outline-offset: -2px;
}

.profile-menu-item--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: default;
}

.profile-menu-item--danger {
  color: var(--pico-del-color, #dc2626);
}

.profile-menu-item--danger:hover {
  background: #fef2f2;
}

/* ── Login form extras ─────────────────────────────────────────── */

@keyframes login-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scoped card — overrides PicoCSS <article> chrome inside <dialog> */
dialog[data-test-login-form] {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 400px;
  width: calc(100% - 2rem);
}

.login-card {
  position: relative;
  background: var(--pico-card-background-color, #1c2231);
  border: 1px solid var(--pico-muted-border-color, #2e3650);
  border-radius: 0.75rem;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow:
    0 4px 6px rgb(0 0 0 / 8%),
    0 20px 48px rgb(0 0 0 / 22%);
  animation: login-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Reset PicoCSS article margin */
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .login-card {
    animation: none;
  }
}

/* Header block */
.login-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

.login-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pico-primary, #1a56db) 14%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--pico-primary, #1a56db) 28%, transparent);
  color: var(--pico-primary, #1a56db);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.login-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pico-color, #f1f5f9);
  letter-spacing: -0.02em;
}

.login-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pico-muted-color, #8896a5);
}

/* Inline error alert */
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, #dc2626 10%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
  color: #f87171;
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.login-alert svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Fields */
.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.login-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pico-muted-color, #8896a5);
  letter-spacing: 0.01em;
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.875rem;
  font-size: 0.9375rem;
  border: 1px solid var(--pico-muted-border-color, #2e3650);
  border-radius: 0.5rem;
  background: color-mix(
    in srgb,
    var(--pico-background-color, #0f1623) 60%,
    transparent
  );
  color: var(--pico-color, #f1f5f9);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  outline: none;
  /* Minimum touch target height */
  min-height: 44px;
}

.login-input::placeholder {
  color: var(--pico-muted-color, #4b5870);
}

.login-input:focus {
  border-color: var(--pico-primary, #1a56db);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--pico-primary, #1a56db) 18%, transparent);
}

.login-input[aria-invalid="true"] {
  border-color: #dc2626;
}

.login-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 18%, transparent);
}

/* Forgot password */
.login-forgot {
  text-align: right;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
}

.login-forgot-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--pico-primary, #1a56db);
  cursor: pointer;
  font-size: inherit;
  text-decoration: none;
  transition: opacity 0.12s ease;
}

.login-forgot-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.login-forgot-link:focus-visible {
  outline: 2px solid var(--pico-primary, #1a56db);
  outline-offset: 2px;
  border-radius: 2px;
}

.login-register {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--pico-muted-color, #6b7280);
}

/* ── Admin user list ──────────────────────────────────────────── */

.user-list {
  padding: 1rem 0;
}

.user-list-table {
  width: 100%;
  border-collapse: collapse;
}

.user-list-table th,
.user-list-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
}

.user-list-table th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pico-muted-color, #6b7280);
}

.user-list-table td:last-child {
  text-align: center;
}

.permission-cell {
  text-align: left;
  white-space: nowrap;
}

.permission-cell select {
  display: inline-block;
  width: auto;
  min-width: 200px;
  margin-bottom: 0;
  vertical-align: middle;
  font-size: 0.8125rem;
}

.permission-cell button {
  display: inline-block;
  width: auto;
  margin: 0 0 0 0.375rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}

.grant-success {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pico-ins-color, #16a34a);
  vertical-align: middle;
}

.grant-error {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--pico-del-color, #dc2626);
  vertical-align: middle;
}

.user-list-error {
  color: var(--pico-del-color, #dc2626);
  font-size: 0.875rem;
}

/* ── Register / auth page shared ──────────────────────────────── */

.register-success {
  display: block;
  color: var(--pico-ins-color, #16a34a);
  margin-bottom: 0.5rem;
}

/* ── Todo engine sidebar ──────────────────────────────────────── */

.todo-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.625rem;
}

.todo-sidebar-header .engine-sidebar-section {
  margin-bottom: 0;
}

.todo-sidebar-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
  color: var(--pico-muted-color, #6b7280);
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease;
  flex-shrink: 0;
}

.engine-sidebar-close:hover,
.engine-sidebar-link:hover,
.todo-sidebar-add:hover {
  background: var(--pico-secondary-background, #f3f4f6);
  color: var(--pico-color, #111827);
}

.todo-sidebar-list-item {
  cursor: pointer;
  gap: 0.5rem;
  color: var(--pico-color, #111827);
  text-decoration: none;
}

.todo-sidebar-list-icon {
  flex-shrink: 0;
  color: var(--pico-muted-color, #6b7280);
}

/* ── Todo workspace ───────────────────────────────────────────── */

.todo-workspace {
  max-width: 680px;
}

.todo-workspace-title,
.cal-manage-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* ── Todo toolbar: search + status tabs ──────────────────────────── */

.todo-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* ── Todo task table ──────────────────────────────────────────── */

.todo-table {
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
}

.todo-table-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--pico-secondary-background, #f3f4f6);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pico-muted-color, #6e7080);
}

.todo-table-header-check {
  width: 24px;
  flex-shrink: 0;
}

.todo-table-header-title {
  flex: 1;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
  background: var(--pico-card-background-color, #fff);
  min-height: 44px;
  transition: background 0.1s;
}

.todo-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
}

.todo-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}

.todo-row--add .todo-row-add-input {
  flex: 1;
  min-width: 0;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  background: transparent;
}

.todo-row--add .todo-row-add-input:focus {
  box-shadow: none;
}

.todo-row-add-input::placeholder {
  color: var(--pico-secondary-background, #6e7080);
}

.todo-row-title {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--pico-color, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.todo-row-title--done {
  text-decoration: line-through;
  color: var(--pico-muted-color, #6b7280);
}

.todo-row-due {
  font-size: 0.8125rem;
  color: var(--pico-muted-color, #6b7280);
  flex-shrink: 0;
  white-space: nowrap;
}

.todo-table-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--pico-muted-color, #6b7280);
}

/* ── Todo empty state ─────────────────────────────────────────── */

.todo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--pico-muted-color, #6b7280);
}

.todo-empty-icon {
  color: var(--pico-muted-color, #6b7280);
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

.todo-empty-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pico-color, #111827);
}

.todo-empty-sub {
  margin: 0;
  font-size: 0.875rem;
  max-width: 280px;
}

.cal-field--checkbox {
  justify-content: flex-end;
  padding-bottom: 0.25rem;
}

.todo-task-completed-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
  margin: 0;
}

.cal-field input[readonly] {
  background: var(--pico-secondary-background, #f3f4f6);
  color: var(--pico-muted-color, #6b7280);
  cursor: default;
}

/* ── Calendar management ──────────────────────────────────────── */

.cal-manage {
  max-width: 760px;
}

.cal-manage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.cal-error {
  padding: 0.5rem 0.75rem;
  border: 1px solid #fca5a5;
  border-radius: 0.375rem;
  color: var(--pico-del-color, #dc2626);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.cal-form-panel {
  background: var(--pico-card-background-color, #1c2231);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.cal-form-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.cal-form,
.cal-add-member-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cal-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cal-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pico-muted-color, #6b7280);
}

.cal-field input,
.cal-field textarea,
.cal-field select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--pico-background-color, #fff);
  color: var(--pico-color, #111827);
  font-size: 0.875rem;
  transition: border-color 0.12s;
  box-sizing: border-box;
  margin-bottom: 0;
}

.cal-field input:focus,
.cal-field textarea:focus,
.cal-field select:focus {
  outline: none;
  border-color: var(--pico-primary, #1a56db);
}

.cal-form-row,
.cal-add-member-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cal-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
}

.cal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
  background: var(--pico-card-background-color, #1c2231);
  transition: background 0.1s;
}

.todo-row:last-child,
.cal-item:last-child {
  border-bottom: none;
}

.todo-row:hover,
.cal-item:hover {
  background: var(--pico-secondary-background, #f9fafb);
}

.cal-item-body {
  flex: 1;
  min-width: 0;
}

.cal-item-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item-desc {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--pico-muted-color, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item-meta {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--pico-muted-color, #6b7280);
}

.cal-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cal-confirm-text {
  font-size: 0.8125rem;
  color: var(--pico-del-color, #dc2626);
  font-weight: 500;
}

.cal-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--pico-muted-color, #6b7280);
  font-size: 0.875rem;
  border: 1px dashed var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
}

/* ── Members view additions ───────────────────────────────────── */

/* Calendar list variant that allows block-level drawer children */
.cal-list--members {
  /* Override overflow:hidden so inline drawers are not clipped */
  overflow: visible;
}

/* Accented list item — primary color left-edge indicator.
   flex-wrap: wrap lets the inline drawer sit on its own row below. */
.cal-item--accented {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.875rem 0.75rem;
  border-left: 4px solid var(--pico-primary, #1a56db);
}

/* Meta chips (timezone, location) */
.cal-meta-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--pico-muted-color, #6b7280);
  background: var(--pico-secondary-background, #f3f4f6);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.25rem;
  padding: 0.1rem 0.4rem;
  margin-right: 0.25rem;
}

/* Inline drawer — full width below the row, no float tricks */
.cal-drawer {
  flex-basis: 100%;
  margin: 0.5rem 0 0.25rem;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--pico-card-background-color, #1c2231);
  overflow: hidden;

  /* Subtle entrance */
  animation: cal-drawer-in 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .cal-drawer {
    animation: none;
  }
}

@keyframes cal-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Drawer header */
.cal-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
  background: color-mix(
    in srgb,
    var(--pico-primary, #1a56db) 6%,
    var(--pico-card-background-color, #1c2231)
  );
}

.cal-drawer-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cal-drawer-icon {
  font-size: 1rem;
  line-height: 1;
}

.cal-drawer-title,
.cal-empty-heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pico-color, #111827);
}

.cal-drawer-close {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  min-height: 36px;
  color: var(--pico-muted-color, #6b7280);
}

/* Drawer body — member list */
.cal-drawer-body {
  padding: 0.75rem 1rem;
}

.cal-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cal-member-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.375rem;

  /* NOTE: color-mix keeps this legible in both light and dark card backgrounds */
  background: color-mix(
    in srgb,
    var(--pico-card-background-color, #1c2231) 60%,
    transparent
  );
  min-height: 44px;
}

/* Avatar initials circle */
.cal-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pico-primary, #1a56db);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.cal-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.075rem;
}

.cal-member-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pico-color, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-member-scope {
  font-size: 0.6875rem;
  color: var(--pico-muted-color, #6b7280);
  text-transform: capitalize;
}

/* Role badge pills */
.cal-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-role-badge--owner {
  background: color-mix(in srgb, #1a56db 14%, transparent);
  color: #1a56db;
  border: 1px solid color-mix(in srgb, #1a56db 30%, transparent);
}

.cal-role-badge--writer {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
  border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
}

.cal-role-badge--reader {
  background: color-mix(in srgb, #6b7280 14%, transparent);
  color: #6b7280;
  border: 1px solid color-mix(in srgb, #6b7280 30%, transparent);
}

.cal-role-badge--none {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #dc2626;
  border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
}

.cal-member-remove {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.cal-member-remove:focus-visible {
  opacity: 1;
}

.cal-member-item:hover .cal-member-remove {
  opacity: 1;
}

/* Drawer empty state */
.cal-drawer-empty {
  margin: 0;
  padding: 1rem 0;
  font-size: 0.875rem;
  color: var(--pico-muted-color, #6b7280);
  text-align: center;
}

/* Drawer footer — add member form */
.cal-drawer-footer {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--pico-muted-border-color, #e5e7eb);
}

.cal-drawer-section-label {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pico-muted-color, #6b7280);
}

@media (width <= 540px) {
  .cal-add-member-fields {
    grid-template-columns: 1fr;
  }
}

.cal-add-member-submit {
  align-self: flex-start;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
}

/* Enhanced empty state for members view */
.cal-empty--members {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 3.5rem 1rem;
}

.cal-empty-icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.35;
  margin-bottom: 0.25rem;
}

.cal-empty-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--pico-muted-color, #6b7280);
  max-width: 340px;
  text-align: center;
}

/* ── Calendar view (day / week / month) ───────────────────────── */

.cview-root {
  --cview-hour-height: 60px;
  --cview-gutter-width: 52px;
  --cview-border: var(--pico-muted-border-color, #e5e7eb);
  --cview-bg: var(--pico-card-background-color, #fff);
  --cview-weekend-bg: color-mix(
    in srgb,
    var(--pico-secondary-background, #f3f4f6) 60%,
    var(--cview-bg)
  );
  --cview-today-color: #1a73e8;
  --cview-today-bg: color-mix(in srgb, #1a73e8 12%, var(--cview-bg));
  --cview-out-bg: color-mix(
    in srgb,
    var(--pico-secondary-background, #f3f4f6) 30%,
    var(--cview-bg)
  );
  --cview-now-color: #ea4335;
  --cview-text-muted: var(--pico-muted-color, #6b7280);

  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--top-nav-height, 70px) - 3rem);
  min-height: 500px;
  overflow: hidden;
}

/* ── Toolbar ──────────────────────────────────────────────────── */

.cview-toolbar {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.5rem;
  /* Horizontal padding leaves room for the focus ring on edge controls
     (e.g. .cview-toggle-group) so .cview-root's overflow: hidden doesn't
     clip it. */
  padding: 0.25rem 0.1875rem;
  flex-shrink: 0;
}

.cview-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Below 640px the nav row only has the view switcher left in it (the
   prev/today/next group and period title are hidden), so both rows are
   flattened into the toolbar's own flex row to share one line with search. */
.cview-toolbar-row--top,
.cview-toolbar-row--nav {
  display: contents;
}

@media (min-width: 640px) {
  .cview-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 0.1875rem;
  }

  .cview-toolbar-row--top,
  .cview-toolbar-row--nav {
    display: flex;
  }
}

.cview-toolbar-row--top {
  justify-content: flex-start;
}

.cview-toolbar-row--top .cview-toolbar-right {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.cview-toolbar-row--nav {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.cview-period-label {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.cview-toggle-group {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--cview-border, var(--pico-muted-border-color, #e5e7eb));
  border-radius: 0.375rem;
  margin: 0;
}

.cview-toggle-btn {
  margin: 0;
  flex: 0 0 auto;
  min-width: 52px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  background: none;
  border: none;
  border-right: 1px solid
    var(--cview-border, var(--pico-muted-border-color, #e5e7eb));
  color: var(--pico-color);
  cursor: pointer;
  transition: background var(--pico-transition, 0.12s);
  min-height: 44px;
}

.cview-toggle-btn:first-child {
  border-top-left-radius: calc(0.375rem - 1px);
  border-bottom-left-radius: calc(0.375rem - 1px);
}

.cview-toggle-btn:last-child {
  border-right: none;
  border-top-right-radius: calc(0.375rem - 1px);
  border-bottom-right-radius: calc(0.375rem - 1px);
}

.cview-toggle-btn:hover {
  background: var(--pico-secondary-background);
}

.cview-toggle-btn--active {
  background: var(--pico-primary-background, #1a56db);
  color: var(--pico-secondary-color, #fff);
}

.cview-toggle-btn--active:hover {
  background: var(--pico-primary-hover);
}

/* Below 640px the prev/today/next group and period title crowd out the
   view switcher, so they're hidden and reappear once there's room. */
.cview-toolbar-row--nav > .cview-toggle-group,
.cview-period-label {
  display: none;
}

@media (min-width: 640px) {
  .cview-toolbar-row--nav > .cview-toggle-group {
    display: inline-flex;
  }

  .cview-period-label {
    display: block;
  }
}

/* ── Calendar view switcher ───────────────────────────────────── */

/* Below 640px the 3-way segmented control has no room to stay legible
   at a tappable size, so a single dropdown trigger replaces it; the full
   segmented control returns once there's enough width for it. */

.cview-view-switcher {
  position: relative;
  flex: 0 0 auto;

  /* Keeps it pinned to the row's trailing edge (matching where
     space-between already puts it on one line) even when it wraps onto
     its own line, where a lone flex item would otherwise fall back to
     the start edge — which would misalign the right-anchored dropdown
     menu below. */
  margin-left: auto;
}

.cview-toggle-group--segmented {
  display: none;
}

.cview-view-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 36px;
  min-width: 36px;
  padding: 0 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  background: none;
  border: 1px solid var(--cview-border, var(--pico-muted-border-color, #e5e7eb));
  border-radius: 0.375rem;
  color: var(--pico-color);
  cursor: pointer;
  transition: background var(--pico-transition, 0.12s);
}

.cview-view-dropdown-trigger:hover {
  background: var(--pico-secondary-background);
}

.cview-view-dropdown-caret {
  font-size: 0.5625rem;
  opacity: 0.7;
}

.cview-view-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.125rem);
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 0.125rem;
  list-style: none;
  min-width: 100px;
  background: var(--cview-bg, #fff);
  border: 1px solid var(--cview-border, var(--pico-muted-border-color, #e5e7eb));
  border-radius: 0.375rem;
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
}

/* list-style: none on the ul alone doesn't reliably suppress the marker
   in every browser -- set it on the li itself too. */
.cview-view-dropdown-menu li {
  list-style: none;
}

.cview-view-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0.25rem;
  color: var(--pico-color);
  cursor: pointer;
}

.cview-view-dropdown-item:hover {
  background: var(--pico-secondary-background);
}

.cview-view-dropdown-item--active {
  background: var(--pico-primary-background, #1a56db);
  color: var(--pico-secondary-color, #fff);
}

@media (width >= 640px) {
  .cview-toggle-group--segmented {
    display: inline-flex;
  }

  .cview-view-dropdown {
    display: none;
  }
}

.cview-loading {
  position: absolute;
  top: 0.25rem;
  right: 0;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--cview-text-muted);
  background: var(--cview-bg, var(--pico-card-background-color, #fff));
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 5;
}

/* ── Body ─────────────────────────────────────────────────────── */

.cview-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cview-border);
  border-radius: 0.5rem;

  /* Leaves vertical touch-scroll native; horizontal movement is routed to
     the swipe-to-navigate pointer handler instead of native panning. */
  touch-action: pan-y;
}

/* ── Timed views (day + week) ─────────────────────────────────── */

.cview-timed {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.cview-timed-header {
  display: flex;
  flex-shrink: 0;
  border-bottom: 2px solid var(--cview-border);
  background: var(--cview-bg);
}

.cview-timed-header-gutter {
  width: var(--cv-scroll-gutter, 0px);
  flex-shrink: 0;
}

.cview-gutter-corner,
.cview-gutter {
  width: var(--cview-gutter-width);
  flex-shrink: 0;
  border-right: 1px solid var(--cview-border);
}

.cview-gutter-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
}

.cview-gutter-week-label {
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cview-text-muted);
}

.cview-gutter-week {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--cview-text-muted);
}

.cview-timed-head-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0;
  border-right: 1px solid var(--cview-border);
  gap: 0.0625rem;
}

.cview-timed-head-col:last-child {
  border-right: none;
}

.cview-timed-head-col--weekend {
  background: var(--cview-weekend-bg);
}

.cview-col-dayname {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cview-text-muted);
}

.cview-timed-head-col--today .cview-col-dayname {
  color: var(--cview-today-color);
}

.cview-col-daynum {
  font-size: 1rem;
  font-weight: 400;
  color: var(--pico-color, #111827);
  line-height: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cview-col-daynum--today {
  background: var(--cview-today-color);
  color: #fff;
  font-weight: 600;
}

@media (min-width: 640px) {
  .cview-timed-head-col {
    padding: 0.5rem 0;
    gap: 0.125rem;
  }

  .cview-col-dayname {
    font-size: 0.6875rem;
  }

  .cview-col-daynum {
    font-size: 1.375rem;
    width: 40px;
    height: 40px;
  }

  .cview-gutter-week {
    font-size: 0.6875rem;
  }
}

.cview-timed-scroll {
  flex: 1;
  overflow-y: auto;
}

.cview-timed-body {
  display: flex;
  min-height: max-content;
}

/* ── Time gutter ──────────────────────────────────────────────── */

.cview-gutter-slot {
  height: var(--cview-hour-height);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 6px 0 0;
  font-size: 0.625rem;
  color: var(--cview-text-muted);
  box-sizing: border-box;
  position: relative;
  top: -0.5em;
}

/* ── Day column ───────────────────────────────────────────────── */

.cview-col {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--cview-border);
  background: var(--cview-bg);
}

.cview-col:last-child {
  border-right: none;
}

.cview-col--today {
  background: color-mix(in srgb, var(--cview-today-color) 3%, var(--cview-bg));
}

.cview-col--weekend {
  background: var(--cview-weekend-bg);
}

.cview-col--today.cview-col--weekend {
  background: color-mix(
    in srgb,
    var(--cview-today-color) 5%,
    var(--cview-weekend-bg)
  );
}

.cview-time-slot {
  display: block;
  width: 100%;
  height: var(--cview-hour-height);
  margin: 0;
  border: none;
  border-top: 1px solid var(--cview-border);
  background: none;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  border-radius: 0;
  padding: 0;
}

.cview-time-slot:first-child {
  border-top: none;
}

.cview-time-slot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid color-mix(in srgb, var(--cview-border) 45%, transparent);
  pointer-events: none;
}

.cview-time-slot:hover {
  background: color-mix(in srgb, var(--cview-today-color) 5%, transparent);
}

/* ── Event chip (timed views) ─────────────────────────────────── */

.cview-event-chip {
  position: absolute;
  left: 2px;
  right: 2px;
  background-color: var(--event-color, #4285f4);
  color: #fff;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 3px 6px;
  box-sizing: border-box;
  text-align: left;
  min-height: 18px;
  touch-action: none;
  transition:
    filter 0.1s,
    box-shadow 0.1s;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}

.cview-event-chip:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  z-index: 3;
}

.cview-event-chip:not(.cview-event-chip--dragging) {
  cursor: grab;
}

.cview-event-chip--dragging {
  cursor: grabbing;
  box-shadow: 0 6px 16px rgb(0 0 0 / 35%);
  opacity: 0.9;
}

.cview-event-chip--resizing {
  box-shadow: 0 6px 16px rgb(0 0 0 / 35%);
}

.cview-col--drop-target {
  background: color-mix(in srgb, var(--cview-today-color) 10%, var(--cview-bg));
}

/* ── Resize handles (timed views) ─────────────────────────────── */

.cview-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  cursor: ns-resize;
  opacity: 0;
  touch-action: none;
  transition:
    opacity 0.1s,
    background 0.1s;
}

.cview-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 90%);
}

.cview-resize-handle:hover {
  background: rgb(0 0 0 / 12%);
}

.cview-event-chip--resizing .cview-resize-handle,
.cview-draft-box .cview-resize-handle,
.cview-event-chip:hover .cview-resize-handle {
  opacity: 1;
}

.cview-resize-handle--top {
  top: -10px;
}

.cview-resize-handle--bottom {
  bottom: -10px;
}

.cview-chip-title {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cview-chip-time {
  font-size: 0.5625rem;
  opacity: 0.85;
  line-height: 1.2;
}

/* ── Drag-to-create preview ───────────────────────────────────── */

.cview-drag-preview {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 3;
  box-sizing: border-box;
  border: 1px dashed var(--cview-today-color);
  background: color-mix(in srgb, var(--cview-today-color) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
}

.cview-drag-preview-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cview-today-color);
}

/* ── Quick create (draft event box + floating title popover) ───── */

.cview-draft-box {
  position: fixed;
  z-index: 250;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: var(--event-color, #4285f4);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border: 2px dashed #fff;
  box-shadow: 0 6px 16px rgb(0 0 0 / 35%);
  overflow: hidden;
}

.cview-draft-box--month {
  font-size: 0.6875rem;
}

/* Below 640px the editor drops the JS-computed anchor position (see
   setPosition in event-quick-editor.gjs) and docks as a full-width sheet
   at the bottom of the viewport, Google Calendar-style. */
.cview-quick-editor {
  position: fixed;
  z-index: 260;
  inset: auto 0 0;
  width: auto;
  box-sizing: border-box;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-xs, 8px) var(--radius-xs, 8px) 0 0;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  box-shadow: 0 -6px 16px rgb(0 0 0 / 25%);
}

@media (min-width: 640px) {
  .cview-quick-editor {
    inset: auto;
    width: 240px;
    padding: 0.75rem;
    border-radius: var(--radius-xs, 8px);
    box-shadow: 0 6px 16px rgb(0 0 0 / 25%);
  }
}

.cview-quick-editor-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cview-quick-editor-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--pico-background-color, #fff);
  color: var(--pico-color, #111827);
  font-size: 0.875rem;
  box-sizing: border-box;
  margin-bottom: 0;
}

.cview-quick-editor-input:focus {
  outline: none;
  border-color: var(--pico-primary, #1a56db);
}

.cview-quick-editor-error {
  margin: 0;
  color: var(--color-error-border, #da3e39);
  font-size: 0.75rem;
}

.cview-quick-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ── Current time indicator ───────────────────────────────────── */

.cview-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cview-now-color);
  z-index: 4;
  pointer-events: none;
}

.cview-now-dot {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cview-now-color);
}

/* ── Month grid view ──────────────────────────────────────────── */

.cview-month-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cview-month-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--cview-border);
  background: var(--pico-secondary-background, #f9fafb);
  flex-shrink: 0;
}

.cview-month-grid-th {
  padding: 0.5rem 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cview-text-muted);
}

.cview-month-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  flex: 1;
  overflow: hidden;
}

.cview-month-cell {
  border-right: 1px solid var(--cview-border);
  border-bottom: 1px solid var(--cview-border);
  padding: 0.25rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--cview-bg);
  transition: background 0.08s;
}

.cview-month-cell:nth-child(7n) {
  border-right: none;
}

.cview-month-cell:hover {
  background: color-mix(in srgb, var(--cview-today-color) 4%, var(--cview-bg));
}

.cview-month-cell--out:not(.cview-month-cell--today) {
  background: var(--cview-out-bg);
}

.cview-month-cell--weekend:not(
  .cview-month-cell--today,
  .cview-month-cell--out
) {
  background: var(--cview-weekend-bg);
}

.cview-month-cell--today {
  background: var(--cview-today-bg);
}

.cview-month-cell-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 50%;
  margin-bottom: 2px;
}

.cview-month-cell--today .cview-month-cell-num {
  background: var(--cview-today-color);
  color: #fff;
  font-weight: 700;
}

.cview-month-cell--out .cview-month-cell-num {
  color: var(--cview-text-muted);
}

.cview-month-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.cview-month-event {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 1px 4px;
  background-color: var(--event-color, #4285f4);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  touch-action: none;
  transition: filter 0.1s;
}

.cview-month-event:hover {
  filter: brightness(1.1);
}

.cview-month-event:not(.cview-month-event--dragging) {
  cursor: grab;
}

.cview-month-event--dragging {
  cursor: grabbing;
  box-shadow: 0 6px 16px rgb(0 0 0 / 35%);
  opacity: 0.9;
}

.cview-month-cell--drop-target {
  background: color-mix(in srgb, var(--cview-today-color) 10%, var(--cview-bg));
}

.cview-month-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  flex-shrink: 0;
}

.cview-month-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Event editor (full-page in-place) ────────────────────────── */

.cview-editor-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--pico-card-background-color, #fff);
}

.cview-editor-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e7eb);
  flex-shrink: 0;
}

.cview-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background: none;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--pico-color, #111827);
  transition: background 0.12s ease;
}

.cview-editor-back:hover {
  background: var(--pico-secondary-background, #f3f4f6);
}

.cview-editor-page-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.cview-editor-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: center;
}

.cview-editor-form {
  width: 100%;
  max-width: 520px;
}

.cview-editor-banner {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
  color: #dc2626;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Event search bar ──────────────────────────────────────── */

.csearch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;

  /* override PicoCSS <search> default margin */
  margin-bottom: 0;
}

.csearch-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  margin-bottom: 0;
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: 50%;
  background-color: var(--pico-form-element-background-color);
  background-image: var(--pico-icon-search);
  background-size: 1.125rem 1.125rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color var(--pico-transition);
}

.csearch-toggle:hover {
  background-color: var(--pico-form-element-active-background-color);
}

.csearch-field {
  flex: 1;
  position: relative;
}

/* PicoCSS handles border, focus ring, background, color, and the
   built-in search icon. We only override spacing and size. */
.csearch-field .csearch-input {
  width: 100%;
  min-height: 36px;
  margin-bottom: 0;

  /* Shrink vertical padding to hit 36px without overriding the left
     padding that PicoCSS adds for its built-in search icon */
  --pico-form-element-spacing-vertical: 0.3rem;
}

@media (width <= 640px) {
  .csearch .csearch-toggle {
    display: flex;
  }

  .csearch .csearch-field {
    display: none;
  }

  .csearch--open .csearch-toggle {
    display: none;
  }

  .csearch--open .csearch-field {
    display: block;
    animation: csearch-expand 0.18s ease both;
  }
}

@keyframes csearch-expand {
  from {
    opacity: 0;
    transform: scaleX(0.9);
    transform-origin: left;
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}