/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require_self
 */

:root {
  --hausl-ink: #1d241f;
  --hausl-muted: #697169;
  --hausl-faint: #929991;
  --hausl-canvas: #ebe9e0;
  --hausl-paper: #fbfaf5;
  --hausl-white: #fffef9;
  --hausl-line: rgba(47, 61, 51, 0.13);
  --hausl-accent: #37624c;
  --hausl-accent-deep: #254936;
  --hausl-accent-soft: #dce7de;
  --hausl-pale: #edf3ed;
  --hausl-warm: #f4ead3;
  --hausl-danger: #9c4d43;
  --hausl-success: #37624c;
  --hausl-success-soft: #edf3ed;
  --hausl-warning: #8f5916;
  --hausl-warning-soft: #f4ead3;
  --hausl-info: #37624c;
  --hausl-info-soft: #dce7de;
  --hausl-danger-soft: #fbefec;
  --hausl-calendar-grid: rgba(38, 50, 43, 0.075);
  --hausl-calendar-weekend: #faf9f5;
  --hausl-booking-fill: #eef2ef;
  --hausl-booking-own-fill: #e9f0ea;
  --hausl-withdrawn-soft: #f2f3f1;

  /* Semantic aliases: UI code consumes these roles, never raw palette names. */
  --hausl-text-primary: var(--hausl-ink);
  --hausl-text-secondary: var(--hausl-muted);
  --hausl-text-muted: var(--hausl-muted);
  --hausl-text-faint: var(--hausl-faint);
  --hausl-text-inverse: var(--hausl-white);
  --hausl-surface: var(--hausl-paper);
  --hausl-surface-paper: var(--hausl-paper);
  --hausl-surface-raised: var(--hausl-white);
  --hausl-surface-subtle: var(--hausl-pale);
  --hausl-border-default: var(--hausl-line);
  --hausl-border-strong: rgba(47, 61, 51, 0.24);

  --hausl-radius-control: 0.75rem;
  --hausl-radius-surface: 1rem;
  --hausl-radius-large: 1.5rem;
  --hausl-radius-full: 9999px;

  --hausl-shadow-surface: 0 8px 24px rgba(38, 53, 42, 0.08);
  --hausl-shadow-overlay: 0 16px 40px rgba(38, 53, 42, 0.16);
  --hausl-shadow-focus: 0 0 0 2px var(--hausl-accent);

  --hausl-content-reading: 48rem;
  --hausl-content-feed: 54rem;
  --hausl-content-form: 64rem;
  --hausl-content-workspace: 90rem;
  --hausl-context-column: 19rem;
  --hausl-detail-inspector: 36rem;
  --hausl-page-gutter-mobile: 1rem;
  --hausl-page-gutter-tablet: 1.5rem;
  --hausl-page-gutter-desktop: clamp(2rem, 3vw, 4rem);
  --hausl-page-gutter: var(--hausl-page-gutter-desktop);
  --hausl-mobile-gutter: var(--hausl-page-gutter-mobile);
  --hausl-form-gutter: 1rem;
  --hausl-safe-bottom: max(1rem, env(safe-area-inset-bottom));

  /* Desktop workspaces and inspectors are deliberately fully opaque. */
  --hausl-surface-workspace: #fff;
  /* Neutral flat fill for classic inputs inside inspector/sheet surfaces. */
  --hausl-surface-control: var(--hausl-surface-workspace);
  --hausl-app-background-image: var(--hausl-community-background-desktop, none);
  --hausl-app-background:
    radial-gradient(circle at 8% -12%, color-mix(in srgb, var(--hausl-accent-soft) 84%, transparent), transparent 34rem),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--hausl-warm) 78%, transparent), transparent 31rem),
    linear-gradient(135deg, #e8eee8 0%, var(--hausl-canvas) 52%, #f3ece2 100%);
  --hausl-app-background-attachment: fixed;
  --hausl-shadow-card: var(--hausl-shadow-surface);
  --hausl-shadow-raised: var(--hausl-shadow-overlay);
  --hausl-layer-app-chrome: 1000;
  --hausl-layer-popover: 1200;
  --hausl-layer-sheet-backdrop: 1290;
  --hausl-layer-sheet: 1300;
  --hausl-layer-overlay: 2100;
  --hausl-layer-sheet-raised: 2200;
  --hausl-layer-dropdown: 2250;
  --hausl-layer-share: 2300;
  --hausl-layer-system: 2400;
  --sandbox-banner-height: 0px;
  --app-bottom-nav-height: 5.25rem;
  --app-bottom-nav-clearance: 5.85rem;
}

/* Small semantic utility layer shared by server-rendered views and CSS. */
.ui-text-primary { color: var(--hausl-text-primary); }
.ui-text-secondary { color: var(--hausl-text-secondary); }
.ui-text-muted { color: var(--hausl-text-muted); }
.ui-text-faint { color: var(--hausl-text-faint); }
.ui-text-inverse { color: var(--hausl-text-inverse); }
.ui-text-accent { color: var(--hausl-accent); }
.ui-text-accent-strong { color: var(--hausl-accent-deep); }
.ui-text-success { color: var(--hausl-success); }
.ui-text-warning { color: var(--hausl-warning); }
.ui-text-info { color: var(--hausl-info); }
.ui-text-danger { color: var(--hausl-danger); }

.ui-bg-surface { background-color: var(--hausl-surface); }
.ui-bg-surface-paper { background-color: var(--hausl-surface-paper); }
.ui-bg-surface-raised { background-color: var(--hausl-surface-raised); }
.ui-bg-surface-subtle { background-color: var(--hausl-surface-subtle); }
.ui-bg-surface-control { background-color: var(--hausl-surface-control); }
.ui-bg-accent-soft { background-color: var(--hausl-accent-soft); }
.ui-bg-success-soft { background-color: var(--hausl-success-soft); }
.ui-bg-warning-soft { background-color: var(--hausl-warning-soft); }
.ui-bg-info-soft { background-color: var(--hausl-info-soft); }
.ui-bg-danger-soft { background-color: var(--hausl-danger-soft); }

.ui-border-default { border-color: var(--hausl-border-default); }
.ui-border-strong { border-color: var(--hausl-border-strong); }
.ui-border-danger { border-color: var(--hausl-danger); }
.ui-ring-focus { --tw-ring-color: var(--hausl-accent); box-shadow: var(--hausl-shadow-focus); }

.ui-radius-control { border-radius: var(--hausl-radius-control); }
.ui-radius-surface { border-radius: var(--hausl-radius-surface); }
.ui-radius-large { border-radius: var(--hausl-radius-large); }
.ui-radius-full { border-radius: var(--hausl-radius-full); }
.ui-shadow-surface { box-shadow: var(--hausl-shadow-surface); }
.ui-shadow-overlay { box-shadow: var(--hausl-shadow-overlay); }
.ui-nav-active-inset { box-shadow: inset 0 0 0 1px var(--hausl-accent); }

/* Classic text/select/date fields live inside a surface; border defines them. */
.ui-form-control {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hausl-border-default);
  border-radius: var(--hausl-radius-control);
  background-color: var(--hausl-surface-control);
  color: var(--hausl-text-primary);
  box-shadow: none;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ui-form-control::placeholder {
  color: var(--hausl-text-faint);
}

.ui-form-control:hover:not(:disabled):not([readonly]):not([aria-disabled="true"]) {
  border-color: var(--hausl-border-strong);
}

.ui-form-control:focus,
.ui-form-control:focus-visible {
  border-color: var(--hausl-accent);
  outline: none;
  box-shadow: var(--hausl-shadow-focus);
}

.ui-form-control:disabled,
.ui-form-control[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
  background-color: var(--hausl-surface-subtle);
}

.ui-form-control[readonly],
.ui-form-control:read-only {
  background-color: var(--hausl-surface-subtle);
  cursor: default;
}

.ui-form-control.is-invalid,
.ui-form-control.border-hausl-danger {
  border-color: var(--hausl-danger);
}

.ui-form-control.is-invalid:focus,
.ui-form-control.is-invalid:focus-visible,
.ui-form-control.border-hausl-danger:focus,
.ui-form-control.border-hausl-danger:focus-visible {
  border-color: var(--hausl-danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hausl-danger) 28%, transparent);
}

textarea.ui-form-control {
  min-height: 5rem;
  resize: vertical;
  line-height: var(--hausl-leading-body);
}

select.ui-form-control {
  cursor: pointer;
}

.ui-layer-app-chrome { z-index: var(--hausl-layer-app-chrome); }
.ui-layer-popover { z-index: var(--hausl-layer-popover); }
.ui-layer-sheet-backdrop { z-index: var(--hausl-layer-overlay); }
.ui-layer-sheet { z-index: var(--hausl-layer-sheet-raised); }
.ui-layer-share { z-index: var(--hausl-layer-share); }

@media (min-width: 768px) {
  .ui-layer-share.is-anchored {
    overflow: visible;
  }

  .ui-layer-share.is-anchored [data-share-target="backdrop"] {
    background: transparent;
  }

  .ui-layer-share.is-anchored [data-share-target="panel"] {
    overflow: hidden;
    border: 1px solid var(--hausl-line);
    border-radius: var(--hausl-radius-surface);
    box-shadow: var(--hausl-shadow-overlay);
  }
}
.ui-layer-system { z-index: var(--hausl-layer-system); }
.ui-safe-bottom-actions { padding-bottom: var(--hausl-safe-bottom); }

.ui-surface {
  border: 1px solid var(--hausl-border-default);
  border-radius: var(--hausl-radius-surface);
  box-shadow: var(--hausl-shadow-surface);
}

.ui-surface--raised { background: var(--hausl-surface-raised); }
.ui-surface--paper { background: var(--hausl-surface-paper); }
.ui-surface--subtle { background: var(--hausl-surface-subtle); }

.ui-toolbar {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .5rem;
  color: var(--hausl-text-secondary);
}

.ui-popover {
  overflow: hidden;
  border: 1px solid var(--hausl-border-default);
  border-radius: var(--hausl-radius-control);
  background: var(--hausl-surface-raised);
  box-shadow: var(--hausl-shadow-overlay);
}

.ui-menu {
  display: grid;
  gap: .15rem;
  padding: .35rem;
}

.ui-menu-item {
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  gap: .55rem;
  padding: .45rem .55rem;
  border: 0;
  border-radius: var(--hausl-radius-control);
  color: var(--hausl-text-secondary);
  background: transparent;
  font-size: var(--hausl-text-meta);
  text-align: left;
}

.ui-menu-item:hover,
.ui-menu-item.is-selected {
  color: var(--hausl-accent-deep);
  background: var(--hausl-accent-soft);
}

.ui-menu-item:focus-visible {
  outline: 2px solid var(--hausl-accent);
  outline-offset: -2px;
}

.ui-status-badge,
.ui-notice {
  border: 1px solid transparent;
  border-radius: var(--hausl-radius-control);
}

.ui-status-badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: .4rem;
  padding: .25rem .65rem;
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-bold);
}

.ui-status-badge--compact {
  min-height: 1.5rem;
  padding-inline: .5rem;
}

.ui-status-badge--neutral { border-color: var(--hausl-border-default); background: var(--hausl-surface-subtle); color: var(--hausl-text-secondary); }
.ui-status-badge--active,
.ui-status-badge--success { border-color: color-mix(in srgb, var(--hausl-success) 28%, transparent); background: var(--hausl-success-soft); color: var(--hausl-success); }
.ui-status-badge--info { border-color: color-mix(in srgb, var(--hausl-info) 28%, transparent); background: var(--hausl-info-soft); color: var(--hausl-info); }
.ui-status-badge--warning,
.ui-status-badge--pending { border-color: color-mix(in srgb, var(--hausl-warning) 28%, transparent); background: var(--hausl-warning-soft); color: var(--hausl-warning); }
.ui-status-badge--danger,
.ui-status-badge--error { border-color: color-mix(in srgb, var(--hausl-danger) 28%, transparent); background: var(--hausl-danger-soft); color: var(--hausl-danger); }

.ui-notice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  font-size: var(--hausl-text-ui);
  line-height: var(--hausl-leading-body);
}

.ui-notice--info { border-color: color-mix(in srgb, var(--hausl-accent) 24%, transparent); background: var(--hausl-info-soft); color: var(--hausl-accent-deep); }
.ui-notice--success { border-color: color-mix(in srgb, var(--hausl-success) 24%, transparent); background: var(--hausl-success-soft); color: var(--hausl-success); }
.ui-notice--warning { border-color: color-mix(in srgb, var(--hausl-warning) 24%, transparent); background: var(--hausl-warning-soft); color: var(--hausl-warning); }
.ui-notice--danger { border-color: color-mix(in srgb, var(--hausl-danger) 24%, transparent); background: var(--hausl-danger-soft); color: var(--hausl-danger); }

.skip-link {
  position: fixed;
  top: .75rem;
  left: 1rem;
  z-index: var(--hausl-layer-overlay);
  transform: translateY(-160%);
  border-radius: var(--hausl-radius-control);
  background: var(--hausl-surface-raised);
  color: var(--hausl-text-primary);
  padding: .75rem 1rem;
  box-shadow: var(--hausl-shadow-overlay);
  transition: transform 120ms ease;
}

.skip-link:focus-visible { transform: translateY(0); }
.help-caret { transition: transform 180ms ease; }
details[open] > summary .help-caret { transform: rotate(180deg); }

.calendar-export a { color: inherit; text-decoration: none; }
.calendar-export #calendar-fab,
.calendar-export a[data-new-reservation-link] { display: none !important; }
.calendar-export [id^="calendar-"] { break-inside: avoid; page-break-inside: avoid; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  .calendar-export,
  .calendar-export * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .calendar-export .no-print { display: none !important; }
  .calendar-export { max-width: none !important; padding: 0 !important; }
  .calendar-export .sticky { position: static !important; top: auto !important; }
  .calendar-export .shadow-hausl-surface,
  .calendar-export .shadow-hausl-overlay { box-shadow: none !important; }
}

html {
  min-height: 100%;
  background: var(--hausl-canvas);
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--hausl-ink);
  background: var(--hausl-app-background);
  background-attachment: var(--hausl-app-background-attachment);
  /* Typography tokens and font faces are supplied by typography.css. */
  font-family: var(--hausl-font-ui, system-ui);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.content-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: var(--hausl-app-background);
}

.app-shell {
  min-height: 100dvh;
}

.app-shell--dashboard {
  padding-top: 0;
  padding-bottom: 0;
}

.sandbox-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1050;
  display: flex;
  min-height: var(--sandbox-banner-height, 3.5rem);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem clamp(0.85rem, 3vw, 2rem);
  border-bottom: 1px solid color-mix(in srgb, var(--hausl-warning) 22%, transparent);
  background: var(--hausl-warm);
  color: var(--hausl-border-strong);
}

body:has(.sandbox-banner) {
  --sandbox-banner-height: 3.5rem;
}

body:has(.sandbox-banner) .app-header {
  top: var(--sandbox-banner-height);
}

body:has(.sandbox-banner) .app-header.app-chrome-hidden {
  transform: translateY(calc(-100% - var(--sandbox-banner-height)));
}

@media (max-width: 1199px) {
  body:has(.sandbox-banner) .content-wrapper {
    padding-top: calc(4rem + var(--sandbox-banner-height));
  }

  body:has(.sandbox-banner) .app-shell--dashboard {
    padding-top: calc(4rem + var(--sandbox-banner-height));
  }
}

.sandbox-banner__copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}

.sandbox-banner__copy > .ui-icon {
  flex: none;
  color: var(--hausl-warning);
}

.sandbox-banner__copy strong,
.sandbox-banner__copy small {
  display: block;
}

.sandbox-banner__copy strong {
  font-size: var(--hausl-text-meta);
}

.sandbox-banner__copy small {
  margin-top: 0.05rem;
  color: var(--hausl-danger);
  font-size: var(--hausl-text-micro);
}

.sandbox-banner__exit {
  flex: none;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--hausl-border-strong) 28%, transparent);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--hausl-surface-raised) 64%, transparent);
  color: var(--hausl-border-strong);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-bold);
}

.sandbox-banner__release {
  flex: none;
  color: var(--hausl-warning);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

button.sandbox-banner__release {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.sandbox-waitlist-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-height: min(90dvh, 36rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--hausl-line);
  border-radius: 1.15rem;
  background: var(--hausl-white);
  color: var(--hausl-ink);
  box-shadow: var(--hausl-shadow-raised);
}

.sandbox-waitlist-dialog::backdrop {
  background: color-mix(in srgb, var(--hausl-text-primary) 32%, transparent);
}

.sandbox-waitlist-dialog__panel {
  padding: 1.15rem 1.2rem 1.25rem;
}

.sandbox-waitlist-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.sandbox-waitlist-dialog__header h2 {
  margin: 0;
  font-family: var(--hausl-font-editorial);
  font-size: var(--hausl-text-section);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-heading);
}

.sandbox-waitlist-dialog__panel > p {
  margin: 0.45rem 0 1rem;
  color: var(--hausl-muted);
  font-size: var(--hausl-text-meta);
  line-height: var(--hausl-leading-ui);
}

.sandbox-waitlist-dialog .landing-waitlist__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sandbox-waitlist-dialog .landing-waitlist__status {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  color: var(--hausl-danger);
  font-size: var(--hausl-text-meta);
}

.sandbox-waitlist-dialog .landing-waitlist__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-bold);
}

.sandbox-waitlist-dialog .landing-waitlist__field > div {
  display: grid;
  gap: 0.55rem;
}

.sandbox-waitlist-dialog .landing-waitlist__field input[type="email"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hausl-line);
  border-radius: 0.75rem;
  background: var(--hausl-white);
}

.sandbox-waitlist-dialog .landing-waitlist__field button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--hausl-accent-deep);
  color: var(--hausl-surface-raised);
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-bold);
}

.sandbox-waitlist-dialog .landing-waitlist__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  color: var(--hausl-muted);
  font-size: var(--hausl-text-meta);
  line-height: var(--hausl-leading-ui);
}

.sandbox-waitlist-dialog .landing-waitlist__consent input {
  margin-top: 0.2rem;
}

.sandbox-waitlist-dialog .landing-waitlist__consent a {
  color: var(--hausl-accent-deep);
  text-decoration: underline;
}

@media (max-width: 639px) {
  .sandbox-banner__copy small {
    display: none;
  }

  .sandbox-banner__release {
    margin-left: auto;
    font-size: var(--hausl-text-micro);
    text-align: right;
  }

  .app-header {
    backdrop-filter: none;
    background: color-mix(in srgb, var(--hausl-surface-raised) 97%, transparent);
  }

  .app-bottom-navigation {
    backdrop-filter: none;
    background: color-mix(in srgb, var(--hausl-surface-raised) 97%, transparent);
  }
}

.app-header {
  min-height: 4.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hausl-line) 80%, transparent);
  background: color-mix(in srgb, var(--hausl-surface-raised) 82%, transparent);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--hausl-border-strong) 5%, transparent);
  backdrop-filter: blur(18px);
  transition: transform 180ms ease, background-color 180ms ease;
}

.app-header__brand-name { color: var(--hausl-ink); }

.app-header__community summary {
  min-height: 2.75rem;
  background: color-mix(in srgb, var(--hausl-white) 80%, transparent);
  color: var(--hausl-accent-deep);
  box-shadow: inset 0 0 0 1px var(--hausl-line);
}

.app-header__utility-link {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hausl-line);
  border-radius: .75rem;
  background: var(--hausl-white);
  color: var(--hausl-muted);
  box-shadow: 0 .25rem .7rem color-mix(in srgb, var(--hausl-text-primary) 6%, transparent);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease;
}

.app-header__utility-link:hover,
.app-header__utility-link.is-active {
  border-color: color-mix(in srgb, var(--hausl-accent) 35%, var(--hausl-line));
  background: var(--hausl-accent-soft);
  color: var(--hausl-accent-deep);
}

.app-header__utility-link:active {
  transform: scale(.97);
}

.app-header__utility-link:focus-visible,
.app-header__profile-menu > summary:focus-visible {
  outline: 2px solid var(--hausl-accent);
  outline-offset: 2px;
}

.app-header__notification-badge {
  position: absolute;
  top: .16rem;
  right: .16rem;
  display: inline-flex;
  min-width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  padding-inline: .2rem;
  border: 2px solid var(--hausl-white);
  border-radius: 999px;
  background: var(--hausl-danger);
  color: var(--hausl-white);
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-bold);
  line-height: var(--hausl-leading-compact);
  font-variant-numeric: tabular-nums;
}

.app-header__profile-menu {
  position: relative;
}

.app-header__profile-menu > summary {
  cursor: pointer;
  list-style: none;
}

.app-header__profile-menu > summary::-webkit-details-marker {
  display: none;
}

.app-header__profile-menu[open] > summary {
  border-color: color-mix(in srgb, var(--hausl-accent) 35%, var(--hausl-line));
  background: var(--hausl-accent-soft);
  color: var(--hausl-accent-deep);
}

.app-header__profile-popover {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  z-index: 1200;
  width: 14rem;
  padding: .45rem;
  border: 1px solid var(--hausl-line);
  border-radius: 1rem;
  background: var(--hausl-white);
  box-shadow: var(--hausl-shadow-raised);
}

.app-header__profile-name {
  margin: .45rem .65rem .35rem;
  overflow: hidden;
  color: var(--hausl-ink);
  font-size: var(--hausl-text-ui);
  font-weight: var(--hausl-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__profile-action {
  display: flex;
  min-height: 2.6rem;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: var(--hausl-muted);
  font: inherit;
  font-size: var(--hausl-text-ui);
  text-decoration: none;
}

.app-header__profile-action:hover,
.app-header__profile-action.is-active {
  background: var(--hausl-pale);
  color: var(--hausl-ink);
}

.app-header__profile-action .ui-icon {
  width: 1rem;
  color: var(--hausl-accent-deep);
}

.app-header__profile-divider {
  height: 1px;
  margin: .35rem .45rem;
  background: var(--hausl-line);
}

.app-header__task-filter {
  position: relative;
}

.app-header__task-filter > summary::-webkit-details-marker {
  display: none;
}

.app-header__task-filter summary {
  position: relative;
  display: grid;
  place-items: center;
}

.app-header__task-filter-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--hausl-accent-deep);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hausl-surface-raised) 95%, transparent);
}

.app-header__task-filter.is-filtered .app-header__task-filter-dot {
  background: var(--hausl-surface-raised);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hausl-accent-deep) 80%, transparent);
}

.app-header__filter-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1100;
  width: 12rem;
  overflow: hidden;
  border: 1px solid var(--hausl-line);
  border-radius: 1rem;
  background: var(--hausl-white);
  box-shadow: var(--hausl-shadow-raised);
}

.app-header__filter-menu a {
  display: block;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--hausl-line);
  color: var(--hausl-ink);
  font-size: var(--hausl-text-meta);
  text-decoration: none;
}

.app-header__filter-menu a:last-child {
  border: 0;
}

.app-header__filter-menu a.is-active {
  background: var(--hausl-accent-soft);
  color: var(--hausl-accent-deep);
  font-weight: var(--hausl-weight-bold);
}

.app-bottom-navigation {
  position: fixed;
  right: 0.5rem;
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  left: 0.5rem;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 4.625rem;
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--hausl-line) 88%, transparent);
  border-radius: 1.35rem;
  background: color-mix(in srgb, var(--hausl-surface-raised) 93%, transparent);
  box-shadow: var(--hausl-shadow-raised);
  backdrop-filter: blur(18px);
  transition: transform 180ms ease;
}

.app-bottom-navigation__item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.9rem;
  place-items: center;
  align-content: center;
  gap: 0.22rem;
  border: 0;
  border-radius: 1.05rem;
  background: transparent;
  color: var(--hausl-muted);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-heading);
  text-decoration: none;
  touch-action: manipulation;
  transition: color 160ms ease, background-color 160ms ease, transform 100ms ease;
}

.app-bottom-navigation__item .ui-icon { width: var(--hausl-icon-md); height: var(--hausl-icon-md); }
.app-bottom-navigation__item span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.app-bottom-navigation__item:active { transform: scale(0.97); }
.app-bottom-navigation__item:focus-visible {
  outline: 2px solid var(--hausl-accent);
  outline-offset: -2px;
}
.app-bottom-navigation__item.is-active {
  background: var(--hausl-accent);
  color: var(--hausl-white);
  font-weight: var(--hausl-weight-bold);
}
@media (hover: hover) {
  .app-bottom-navigation__item:hover { background: var(--hausl-pale); color: var(--hausl-ink); }
  .app-bottom-navigation__item.is-active:hover {
    background: var(--hausl-accent-deep);
    color: var(--hausl-white);
  }
}

.app-chrome-hidden { transform: translateY(-125%); }
.app-bottom-navigation.app-chrome-hidden { transform: translateY(calc(100% + 1.5rem)); }
.app-fab.app-chrome-hidden {
  animation: none;
  transform: translateY(calc(100% + 7rem));
}

.more-navigation-backdrop { position: fixed; inset: 0; z-index: var(--hausl-layer-sheet-backdrop); background: color-mix(in srgb, var(--hausl-text-primary) 28%, transparent); backdrop-filter: blur(2px); }
.more-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--hausl-layer-sheet); display:flex; max-height: min(78dvh, 44rem); flex-direction:column; border-radius: 1.75rem 1.75rem 0 0; background: var(--hausl-paper); box-shadow: 0 -18px 48px color-mix(in srgb, var(--hausl-border-strong) 20%, transparent); }
.more-sheet.is-searching { height:calc(var(--more-sheet-visible-height, 100dvh) - .5rem); max-height:calc(var(--more-sheet-visible-height, 100dvh) - .5rem); border-radius:1.35rem 1.35rem 0 0; }
.more-sheet[hidden], .more-navigation-backdrop[hidden] { display: none; }
.more-sheet__handle { width: 3.2rem; height: 0.28rem; margin: 0.75rem auto 0; border-radius: 999px; background: color-mix(in srgb, var(--hausl-muted) 25%, transparent); }
.more-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 1rem 0.8rem; border-bottom: 1px solid var(--hausl-line); }
.more-sheet__header h2 { margin: 0; font-size: var(--hausl-text-card-title); font-weight: var(--hausl-weight-bold); letter-spacing: -0.025em; }
.more-sheet__body { display:flex; min-height:0; flex:1; flex-direction:column; padding:.9rem 1rem max(1rem,env(safe-area-inset-bottom)); }
.more-sheet__search { display: flex; align-items: center; gap: 0.65rem; min-height: 3rem; padding: 0 0.85rem; border-radius: 0.95rem; background: var(--hausl-white); box-shadow: inset 0 0 0 1px var(--hausl-line); color: var(--hausl-muted); }
.more-sheet__search input { width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--hausl-ink); }
.more-sheet__search:focus-within { box-shadow: inset 0 0 0 2px var(--hausl-accent); }
.more-sheet__search-close { display:none; width:2rem; height:2rem; flex:none; place-items:center; border:0; border-radius:.55rem; background:var(--hausl-pale); color:var(--hausl-accent-deep); }
.more-sheet.is-searching .more-sheet__search-close { display:grid; }
.more-sheet__results { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:.5rem; }
.more-sheet__section { margin-top: 1.35rem; }
.more-sheet__label { margin: 0 0 0.5rem 0.15rem; color: var(--hausl-muted); font-size: var(--hausl-text-micro); font-weight: var(--hausl-weight-bold); letter-spacing: 0.01em; }
.more-sheet__group { overflow: hidden; border-radius: 1rem; background: var(--hausl-white); box-shadow: inset 0 0 0 1px var(--hausl-line); }
.more-sheet__link { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 4.25rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--hausl-line); color: var(--hausl-ink); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 100ms ease; }
.more-sheet__link:last-child { border-bottom: 0; }
.more-sheet__link > .ui-icon:first-child { width: 1.15rem; height: 1.15rem; color: var(--hausl-accent-deep); }
.more-sheet__link > .ui-icon:last-child { width: var(--hausl-icon-sm); height: var(--hausl-icon-sm); color: var(--hausl-faint); }
.more-sheet__link strong, .more-sheet__link small { display: block; }
.more-sheet__link strong { font-size: var(--hausl-text-ui); }
.more-sheet__link small { margin-top: 0.12rem; color: var(--hausl-muted); font-size: var(--hausl-text-micro); }
.more-sheet__link.is-active { background: var(--hausl-accent-soft); }
.more-sheet__link:active { transform: scale(.98); }
.more-sheet__link:focus-visible { outline:2px solid var(--hausl-accent); outline-offset:2px; }
.more-sheet__empty { margin: 1.5rem 0; color: var(--hausl-muted); text-align: center; }
.more-sheet-open { overflow: hidden; }

.swipe-sheet-panel {
  will-change: transform;
  overscroll-behavior-y: contain;
  animation: swipe-sheet-in 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.swipe-sheet-handle { cursor: grab; touch-action: none; }
.swipe-sheet-panel.is-swipe-dragging { animation: none !important; transition: none !important; }
.swipe-sheet-panel.is-swipe-settling,
.swipe-sheet-panel.is-swipe-dismissing { animation: none !important; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1) !important; }
.swipe-sheet-backdrop {
  animation: swipe-sheet-backdrop-in 200ms ease-out;
  transition: opacity 200ms ease;
}
@keyframes swipe-sheet-in {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

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

.more-sheet:not(.is-searching) .more-sheet__results { overflow:visible; }
.more-sheet:not(.is-searching) .more-sheet__section { margin-top:.75rem; }
.more-sheet:not(.is-searching) .more-sheet__group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; overflow:visible; background:transparent; box-shadow:none; }
.more-sheet:not(.is-searching) .more-sheet__link { grid-template-columns:2.35rem minmax(0,1fr); min-height:3.6rem; gap:.55rem; padding:.5rem .6rem; border:0; border-radius:.9rem; background:var(--hausl-white); box-shadow:inset 0 0 0 1px var(--hausl-line); }
.more-sheet:not(.is-searching) .more-sheet__link > .ui-icon:first-child { width:2.35rem; height:2.35rem; padding:.62rem; border-radius:.72rem; background:var(--hausl-pale); color:var(--hausl-accent-deep); }
.more-sheet:not(.is-searching) .more-sheet__link > .ui-icon:last-child,.more-sheet:not(.is-searching) .more-sheet__link small { display:none; }
.more-sheet:not(.is-searching) .more-sheet__link strong { overflow:hidden; font-size:var(--hausl-text-ui); text-overflow:ellipsis; white-space:nowrap; }
.more-sheet:not(.is-searching) .more-sheet__link.is-active { background:var(--hausl-accent); color:var(--hausl-white); box-shadow:none; }
.more-sheet:not(.is-searching) .more-sheet__link.is-active > .ui-icon:first-child { background:color-mix(in srgb, var(--hausl-surface-raised) 14%, transparent); color:var(--hausl-white); }

@media (hover:hover) {
  .more-sheet__link:hover { background:var(--hausl-pale); }
  .more-sheet:not(.is-searching) .more-sheet__link.is-active:hover { background:var(--hausl-accent-deep); }
}

/* Compatibility surface for the small number of pre-redesign screens that
 * still use `.card`. New work uses the semantic helper instead. */
.card {
  border-radius: 1rem;
  background: var(--hausl-white);
  box-shadow: var(--hausl-shadow-card);
}

.app-fab {
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 3.5rem;
  height: 3.5rem;
  border-color: var(--hausl-accent-deep);
  border-radius: 50%;
  background: var(--hausl-accent-deep);
  color: var(--hausl-text-inverse);
  box-shadow: 0 0.65rem 1.3rem color-mix(in srgb, var(--hausl-accent-deep) 25%, transparent);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.app-fab:hover {
  border-color: var(--hausl-accent);
  background: var(--hausl-accent);
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--hausl-accent-deep) 30%, transparent);
}

.app-fab-pulse {
  animation: hausl-fab-pulse 2s ease-in-out infinite;
}

@keyframes hausl-fab-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.app-fab-pulse:hover {
  animation: none;
  transform: scale(1.04);
}

@media (max-width: 767px) {
  :root {
    --hausl-app-background-image: var(--hausl-community-background-mobile, none);
    --hausl-app-background: var(--hausl-canvas) var(--hausl-app-background-image) top center / cover no-repeat;
    --hausl-app-background-attachment: scroll;
  }

  .content-wrapper {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--hausl-surface-paper) 8%, transparent) 0, color-mix(in srgb, var(--hausl-surface-paper) 38%, transparent) 12rem, color-mix(in srgb, var(--hausl-surface-paper) 88%, transparent) 28rem, color-mix(in srgb, var(--hausl-surface-paper) 96%, transparent) 100%),
      var(--hausl-community-background-mobile, none) center top / 100% auto no-repeat,
      var(--hausl-canvas);
  }

  .app-fab {
    bottom: calc(6rem + env(safe-area-inset-bottom));
    right: 1rem;
  }

  .content-wrapper { padding-top: 4.5rem; padding-bottom: 6.25rem; }
  .app-shell--dashboard { padding-top: 4.5rem; padding-bottom: 6.25rem; }
  .content-wrapper { padding-top: 6.8rem; }
  .app-shell--dashboard { padding-top: 6.8rem; }
  body:has(.sandbox-banner) .content-wrapper { padding-top: calc(6.8rem + var(--sandbox-banner-height)); }
  body:has(.sandbox-banner) .app-shell--dashboard { padding-top: calc(6.8rem + var(--sandbox-banner-height)); }
  .app-header { min-height:6.8rem; border:0; background:linear-gradient(180deg,color-mix(in srgb, var(--hausl-text-primary) 25%, transparent),transparent); box-shadow:none; backdrop-filter:none; }
  .app-header::before { position:absolute; z-index:0; top:0; right:0; bottom:-.75rem; left:0; opacity:0; background:linear-gradient(180deg,color-mix(in srgb, var(--hausl-text-primary) 46%, transparent) 0%,color-mix(in srgb, var(--hausl-border-strong) 30%, transparent) 62%,color-mix(in srgb, var(--hausl-border-strong) 8%, transparent) 86%,transparent 100%); -webkit-backdrop-filter:blur(4px) saturate(.96); backdrop-filter:blur(4px) saturate(.96); -webkit-mask-image:linear-gradient(180deg,var(--hausl-text-primary) 0%,var(--hausl-text-primary) 68%,color-mix(in srgb, var(--hausl-text-primary) 55%, transparent) 84%,transparent 100%); mask-image:linear-gradient(180deg,var(--hausl-text-primary) 0%,var(--hausl-text-primary) 68%,color-mix(in srgb, var(--hausl-text-primary) 55%, transparent) 84%,transparent 100%); content:""; pointer-events:none; transition:opacity 180ms ease; }
  .app-header.is-scrolled::before { opacity:1; }
  .app-header > .max-w-7xl { position:relative; z-index:1; }
  .app-header .max-w-7xl { padding:1.65rem 1rem .9rem; }
  .app-header .h-16 { height:4.2rem; }
  .app-header .sm\:flex, .desktop-sidebar { display:none!important; }
  .app-header > .max-w-7xl .sm\:hidden { display:flex!important; }
  .app-header [data-navigation-target="menu"].hidden { display:none!important; }
  .app-header [data-navigation-target="menu"]:not(.hidden) { display:block!important; }
  .app-bottom-navigation.sm\:hidden { display:grid!important; }
  .with-desktop-sidebar { margin-left:0!important; }
  .app-header__brand { padding:0; gap:0.6rem; }
  .app-header__brand > span { width:3rem; height:3rem; border-radius:.9rem .9rem .9rem .35rem; background:color-mix(in srgb, var(--hausl-surface-raised) 86%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hausl-surface-raised) 55%, transparent); }
  .app-header__brand > span img { width:2.55rem; height:2.55rem; }
  .app-header__brand-name { display:none; }
  .app-header__community { margin-left:0; }
  .app-header__row > div:first-child { overflow:hidden; }
  .app-header__community summary { max-width:calc(100vw - 11.75rem); }
  .app-header__community summary > span { min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-header__community summary { min-height:3rem; padding:0 .85rem; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--hausl-surface-raised); font-size:var(--hausl-text-ui); font-weight:var(--hausl-weight-bold); }
  .app-header__community summary > .ui-icon:first-child { display:none; }
  .app-header__community summary .ui-icon { width: var(--hausl-icon-md); height: var(--hausl-icon-md); color:var(--hausl-surface-raised); }
  .app-header .ui-btn,
  .app-header__utility-link,
  .app-header > .max-w-7xl .sm\:hidden > a,
  .app-header > .max-w-7xl .sm\:hidden > button { width:3rem; height:3rem; border:1px solid color-mix(in srgb, var(--hausl-surface-raised) 60%, transparent)!important; border-radius:.9rem!important; background:color-mix(in srgb, var(--hausl-surface-raised) 90%, transparent)!important; color:var(--hausl-ink)!important; box-shadow:0 .35rem .85rem color-mix(in srgb, var(--hausl-text-primary) 12%, transparent)!important; }
}

@media (prefers-reduced-motion: reduce) {
  .app-header, .app-bottom-navigation { transition: none; }
  .app-header::before { transition:none; }
  .swipe-sheet-panel,
  .swipe-sheet-backdrop { transition:none!important; }
  .ui-action-icon > .ui-icon,
  .ui-action-success-root { transition: none; }
}

@media (min-width: 768px) {
  .app-bottom-navigation { display: none !important; }
}

/* Lexxy fallback styles that work even without a fresh Tailwind build. */
.lexxy-content ul,
.manual-content ul,
.content-prose ul,
.comment-content ul {
  list-style: disc outside;
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 0.5rem;
}

.lexxy-content ol,
.manual-content ol,
.content-prose ol,
.comment-content ol {
  list-style: decimal outside;
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 0.5rem;
}

.lexxy-content li,
.manual-content li,
.content-prose li,
.comment-content li {
  display: list-item;
  margin: 0.25rem 0;
}

/* Editor fallback styles for browsers where Lexxy nested CSS is not applied. */
.lexxy-editor__content ul {
  list-style: disc outside;
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 0.5rem;
}

.lexxy-editor__content ol {
  list-style: decimal outside;
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 0.5rem;
}

.lexxy-editor__content li {
  display: list-item;
  margin: 0.25rem 0;
}

.lexxy-content__strikethrough {
  text-decoration: line-through;
}

.lexxy-content__table-wrapper {
  overflow-x: auto;
}

.lexxy-editor__content table,
.lexxy-content table,
.manual-content table,
.content-prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.lexxy-editor__content th,
.lexxy-editor__content td,
.lexxy-content th,
.lexxy-content td,
.manual-content th,
.manual-content td,
.content-prose th,
.content-prose td {
  border: 1px solid var(--hausl-accent-soft);
  padding: 0.5rem 0.625rem;
  vertical-align: top;
  text-align: left;
}

.lexxy-editor__content th,
.lexxy-content th,
.manual-content th,
.content-prose th {
  background: var(--hausl-surface-paper);
  font-weight: var(--hausl-weight-semibold);
}

.editor-drop-indicator {
  height: 4px;
  border-radius: 9999px;
  background: var(--hausl-text-secondary);
  margin: 6px 0;
  position: relative;
}

.editor-drop-indicator::after {
  content: "";
  position: absolute;
  left: 10px;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--hausl-text-secondary);
}

.editor-drop-target {
  outline: 2px dashed var(--hausl-accent-soft);
  outline-offset: 4px;
}

/* Hausl form controls (checkbox/radio use brand blue, not browser default). */
.hausl-checkbox,
.hausl-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 1px solid var(--hausl-accent-soft);
  background-color: var(--hausl-surface-raised);
  cursor: pointer;
}

.hausl-checkbox {
  border-radius: 0.25rem;
}

.hausl-radio {
  border-radius: 9999px;
}

.hausl-checkbox:checked,
.hausl-radio:checked {
  background-color: var(--hausl-accent);
  border-color: var(--hausl-accent);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.hausl-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 0.5rem 0.5rem;
}

.hausl-checkbox:focus-visible,
.hausl-radio:focus-visible {
  outline: 2px solid var(--hausl-accent);
  outline-offset: 2px;
}

/* Shared icon/button system for consistent action controls across the app. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-radius: var(--hausl-radius-control);
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-medium);
  line-height: var(--hausl-leading-compact);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ui-btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--hausl-radius-full);
  gap: 0;
}

input[type="submit"].ui-btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--hausl-radius-full);
  font-size: var(--hausl-text-none);
  line-height: var(--hausl-leading-none);
  overflow: hidden;
}

.app-fab.ui-btn-icon {
  width: 3rem;
  height: 3rem;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--hausl-accent);
  outline-offset: 2px;
}

.ui-btn-secondary {
  border-color: var(--hausl-line);
  color: var(--hausl-ink);
  background: color-mix(in srgb, var(--hausl-white) 91%, transparent);
}

.ui-btn-secondary:hover {
  background: var(--hausl-pale);
}

.ui-btn-primary {
  border-color: var(--hausl-accent-deep);
  color: var(--hausl-text-inverse);
  background: var(--hausl-accent-deep);
}

.ui-btn-primary:hover {
  background: var(--hausl-accent);
}

.ui-btn-ghost {
  border-color: transparent;
  color: var(--hausl-accent-deep);
  background: transparent;
}

.ui-btn-ghost:hover {
  background: var(--hausl-accent-soft);
}

.ui-btn:active { transform: scale(0.98); }

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
}

.ui-btn-danger {
  border-color: color-mix(in srgb, var(--hausl-danger) 38%, transparent);
  color: var(--hausl-danger);
  background: var(--hausl-white);
}

.ui-btn-danger:hover {
  background: color-mix(in srgb, var(--hausl-danger) 9%, var(--hausl-white));
}

.ui-btn-compact {
  min-height: 2.25rem;
  padding: .35rem .65rem;
}

.ui-btn-large {
  min-height: 3.25rem;
  padding: .7rem 1rem;
}

.ui-btn-square {
  width: 2.75rem;
  padding: 0;
}

.ui-btn-circle {
  border-radius: var(--hausl-radius-full);
}

.ui-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  border-bottom: 1px solid var(--hausl-border-default);
}

.ui-tab {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--hausl-text-secondary);
  background: transparent;
  font-size: var(--hausl-text-ui);
  font-weight: var(--hausl-weight-medium);
}

.ui-tab:hover,
.ui-tab.is-active {
  color: var(--hausl-accent-deep);
}

.ui-tab.is-active {
  border-bottom-color: var(--hausl-accent);
}

.ui-segmented {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem;
  border: 1px solid var(--hausl-border-default);
  border-radius: var(--hausl-radius-control);
  background: var(--hausl-surface-subtle);
}

.ui-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .35rem .7rem;
  border: 0;
  border-radius: calc(var(--hausl-radius-control) - .2rem);
  color: var(--hausl-text-secondary);
  background: transparent;
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-medium);
  text-decoration: none;
}

.ui-segmented__item.is-active {
  color: var(--hausl-text-primary);
  background: var(--hausl-surface-raised);
  box-shadow: var(--hausl-shadow-surface);
}

.ui-btn.is-loading {
  cursor: wait;
  opacity: .72;
}

/* Reusable mobile layout helpers (reduce duplicated per-view spacing classes). */
@media (max-width: 639px) {
  .mobile-page-soft {
    padding-inline: 0.5rem;
  }

  .mobile-gutter-soft {
    padding-inline: 0.5rem;
  }

  .mobile-card-soft {
    margin-inline: 0.25rem;
    border-radius: 0.75rem;
  }
}

@media (min-width: 640px) {
  .with-desktop-sidebar {
    padding-left: 16rem;
    transition: padding-left 0.2s ease;
  }

  html.desktop-sidebar-collapsed .with-desktop-sidebar,
  body.desktop-sidebar-collapsed .with-desktop-sidebar {
    padding-left: 4.75rem;
  }

  .desktop-sidebar {
    width: 16rem;
    transition: width 0.2s ease;
  }

  html.desktop-sidebar-collapsed .desktop-sidebar,
  .desktop-sidebar.is-collapsed {
    width: 4.75rem;
  }

  .desktop-sidebar .sidebar-label {
    white-space: nowrap;
    transition: opacity 0.12s ease, max-width 0.12s ease, margin 0.12s ease;
    max-width: 220px;
  }

  html.desktop-sidebar-collapsed .desktop-sidebar .sidebar-label,
  .desktop-sidebar.is-collapsed .sidebar-label {
    opacity: 0;
    max-width: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .desktop-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    padding: 0.55rem 0.75rem;
    color: var(--hausl-muted);
    font-size: var(--hausl-text-ui);
    font-weight: var(--hausl-weight-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .desktop-sidebar-link:hover {
    background: var(--hausl-pale);
    color: var(--hausl-ink);
  }

  .desktop-sidebar-link.is-active {
    background: var(--hausl-accent-soft);
    color: var(--hausl-accent-deep);
  }

  html.desktop-sidebar-collapsed .desktop-sidebar .desktop-sidebar-link,
  .desktop-sidebar.is-collapsed .desktop-sidebar-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .desktop-sidebar-icon {
    display: inline-flex;
    width: 1.25rem;
    justify-content: center;
    flex-shrink: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .with-desktop-sidebar {
    padding-left: 13rem;
  }

  html.desktop-sidebar-collapsed .with-desktop-sidebar,
  body.desktop-sidebar-collapsed .with-desktop-sidebar {
    padding-left: 4rem;
  }

  .desktop-sidebar {
    width: 13rem;
  }

  html.desktop-sidebar-collapsed .desktop-sidebar,
  .desktop-sidebar.is-collapsed {
    width: 4rem;
  }
}

.editor-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 88px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--hausl-accent-soft);
  background: color-mix(in srgb, var(--hausl-surface-raised) 92%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--hausl-text-primary) 18%, transparent);
  overflow: hidden;
}

.editor-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unsaved-guard-sheet {
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;
}

.unsaved-guard-sheet:not(.hidden) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: auto;
}

.hausl-flash-stack {
  position: fixed;
  left: 1rem;
  right: 1rem;
  top: calc(6.8rem + env(safe-area-inset-top, 0px));
  bottom: auto;
  z-index: 2400;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

body:has(.sandbox-banner) .hausl-flash-stack {
  top: calc(6.8rem + var(--sandbox-banner-height, 3.5rem) + env(safe-area-inset-top, 0px));
}

.hausl-flash-stack > * {
  pointer-events: auto;
}

.hausl-flash {
  padding: 0.8rem 0.75rem 0.8rem 1rem;
  border-radius: 1rem;
  color: var(--hausl-surface-raised);
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--hausl-text-primary) 22%, transparent);
  touch-action: pan-y;
}

.hausl-flash--notice {
  background: var(--hausl-accent);
}

.hausl-flash--alert {
  background: var(--hausl-danger);
}

.hausl-flash__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hausl-flash__icon {
  flex: none;
  font-size: var(--hausl-text-card-title);
}

.hausl-flash__message {
  flex: 1;
  min-width: 0;
  font-size: var(--hausl-text-meta);
  line-height: var(--hausl-leading-ui);
}

.hausl-flash__dismiss {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  margin: -0.35rem -0.15rem -0.35rem 0;
  border: 0;
  border-radius: 0.65rem;
  color: inherit;
  background: transparent;
  opacity: 0.86;
  cursor: pointer;
}

.hausl-flash__dismiss:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--hausl-surface-raised) 14%, transparent);
}

.hausl-flash__dismiss .ui-icon {
  width: 1rem;
  height: 1rem;
}

.hausl-flash__action {
  flex: none;
  margin-left: 0.15rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--hausl-surface-raised) 18%, transparent);
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-semibold);
}

@media (min-width: 768px) {
  .hausl-flash-stack {
    top: auto;
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: min(24rem, calc(100vw - 3rem));
  }

  body:has(.sandbox-banner) .hausl-flash-stack {
    top: auto;
  }
}

.unsaved-guard-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hausl-text-primary) 45%, transparent);
  pointer-events: auto;
}

.unsaved-guard-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  border-top: 1px solid var(--hausl-surface-subtle);
  background: var(--hausl-surface-raised);
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--hausl-text-primary) 18%, transparent);
}

.unsaved-guard-header {
  padding: 1rem 1rem 0;
}

.unsaved-guard-body {
  padding: 0.5rem 1rem 0;
}

.unsaved-guard-footer {
  margin-top: 1rem;
  border-top: 1px solid var(--hausl-border-default);
  background: color-mix(in srgb, var(--hausl-surface-raised) 95%, transparent);
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.unsaved-guard-title {
  margin: 0;
  font-size: var(--hausl-text-ui);
  font-weight: var(--hausl-weight-semibold);
  color: var(--hausl-text-primary);
}

.unsaved-guard-message {
  margin: 0;
  color: var(--hausl-text-secondary);
  font-size: var(--hausl-text-meta);
  line-height: var(--hausl-leading-ui);
}

.unsaved-guard-actions {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.unsaved-guard-actions .ui-btn {
  flex: 1;
  min-width: 0;
}

/* Programmatic focus on open does not match :focus-visible; show the same ring
   for any focused action inside the guard dialog only. */
.unsaved-guard-panel .ui-btn:focus {
  outline: 2px solid var(--hausl-accent);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .unsaved-guard-sheet:not(.hidden) {
    justify-content: center;
    align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .unsaved-guard-panel {
    width: min(30rem, 100%);
    border-radius: 0.75rem;
    border: 1px solid var(--hausl-surface-subtle);
    box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--hausl-text-primary) 22%, transparent);
  }

  .unsaved-guard-header {
    padding: 1.25rem 1.5rem 0;
  }

  .unsaved-guard-body {
    padding: 0.5rem 1.5rem 0;
  }

  .unsaved-guard-footer {
    padding: 1rem 1.5rem 1.25rem;
  }
}

lexxy-editor img {
  touch-action: none;
}

/* Ensure manual editor attachments stay visible in edit mode across breakpoints. */
lexxy-editor figure.attachment,
lexxy-editor action-text-attachment {
  display: block;
  max-width: 100%;
}

lexxy-editor figure.attachment img,
lexxy-editor action-text-attachment img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Hide image captions/placeholders for cleaner manual content and editor view. */
lexxy-editor figure.attachment--preview .attachment__caption,
.lexxy-content figure.attachment--preview .attachment__caption,
.manual-content figure.attachment--preview .attachment__caption {
  display: none;
}

/* Persistent attachment sizing classes (used by editor image tools). */
lexxy-editor figure.attachment.attachment--size-100,
.manual-content figure.attachment.attachment--size-100,
.lexxy-content figure.attachment.attachment--size-100 {
  width: 100%;
  max-width: 100%;
}

lexxy-editor figure.attachment.attachment--size-75,
.manual-content figure.attachment.attachment--size-75,
.lexxy-content figure.attachment.attachment--size-75 {
  width: 75%;
  max-width: 100%;
}

lexxy-editor figure.attachment.attachment--size-50,
.manual-content figure.attachment.attachment--size-50,
.lexxy-content figure.attachment.attachment--size-50 {
  width: 50%;
  max-width: 100%;
}
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

.ui-action-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

.ui-action-icon > .ui-icon {
  grid-area: 1 / 1;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1), color 220ms ease;
}

.ui-action-icon__success {
  opacity: 0;
  transform: scale(0.5);
  color: var(--hausl-success);
  pointer-events: none;
}

.ui-action-icon.is-success .ui-action-icon__idle {
  opacity: 0;
  transform: scale(0.5);
}

.ui-action-icon.is-success .ui-action-icon__success {
  opacity: 1;
  transform: scale(1);
  color: var(--hausl-success);
}

.ui-action-success-root {
  transition: color 220ms ease;
}

.ui-action-success-root.is-action-success {
  color: var(--hausl-success);
}

.ui-action-success-root.is-action-success .ui-icon {
  color: var(--hausl-success);
}

.ui-empty-state {
  display: grid;
  justify-items: center;
  max-width: 28rem;
  margin-inline: auto;
  padding: 3.5rem 1.5rem 4rem;
  color: var(--hausl-text-primary);
  text-align: center;
}

.ui-empty-state--operational {
  max-width: 36rem;
  padding-block: 2.25rem;
}

.ui-empty-state__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin-bottom: .85rem;
  border-radius: var(--hausl-radius-control);
  background: var(--hausl-surface-subtle);
  color: var(--hausl-accent-deep);
}

.ui-empty-state h2 {
  margin: 0;
  font-size: var(--hausl-text-card-title);
  font-weight: var(--hausl-weight-bold);
}

.ui-empty-state p {
  max-width: 28rem;
  margin: .45rem auto 0;
  color: var(--hausl-text-secondary);
  font-size: var(--hausl-text-ui);
  line-height: var(--hausl-leading-body);
}

.ui-empty-state .ui-btn {
  margin-top: 1.25rem;
}
/* Shared rich-content media and caption presentation. */
.manual-content img { border-radius: .75rem; max-width: 100%; height: auto; margin: 1.25rem 0; }
.manual-content figure { margin: 1.5rem 0; text-align: center; }
.manual-content figcaption { margin-top: .35rem; color: var(--hausl-text-secondary); font-size: var(--hausl-text-meta); font-style: italic; }

@media (max-width: 767px) {
  .swipe-sheet-panel {
    max-height: min(calc(100svh - 2rem), calc(100dvh - 2rem));
  }
}