/*
 * 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-shadow-card: 0 8px 24px rgba(38, 53, 42, 0.08);
  --hausl-shadow-raised: 0 16px 40px rgba(38, 53, 42, 0.16);
  --hausl-font-ui: "Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", sans-serif;
  --hausl-font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --hausl-font-meta: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --hausl-layer-app-chrome: 1000;
  --hausl-layer-sheet-backdrop: 1290;
  --hausl-layer-sheet: 1300;
  --app-bottom-nav-height: 5.25rem;
  --app-bottom-nav-clearance: 5.85rem;
}

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

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--hausl-ink);
  background-color: var(--hausl-canvas);
  background-image: var(--hausl-community-background-desktop);
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--hausl-font-ui);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.content-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 4rem;
  padding-bottom: 5rem;
  background:
    linear-gradient(180deg, rgba(251, 250, 245, 0.24) 0, rgba(251, 250, 245, 0.72) 13rem, rgba(251, 250, 245, 0.94) 29rem, rgba(251, 250, 245, 0.97) 100%);
}

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

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

.sandbox-banner {
  position: relative;
  z-index: 35;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem clamp(0.85rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(130, 88, 35, 0.22);
  background: #f3e7cd;
  color: #503b21;
}

.app-shell--dashboard .sandbox-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1050;
}

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

.sandbox-banner__copy > .ui-icon {
  flex: none;
  color: #9c6429;
}

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

.sandbox-banner__copy strong {
  font-size: 0.82rem;
}

.sandbox-banner__copy small {
  margin-top: 0.05rem;
  color: #775d3b;
  font-size: 0.7rem;
}

.sandbox-banner__exit {
  flex: none;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(80, 59, 33, 0.28);
  border-radius: 0.55rem;
  background: rgba(255, 254, 249, 0.64);
  color: #503b21;
  font-size: 0.75rem;
  font-weight: 750;
}

.sandbox-banner__release {
  flex: none;
  color: #6e4c26;
  font-size: 0.75rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

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

  .sandbox-banner__release {
    margin-left: auto;
    font-size: 0.68rem;
    text-align: right;
  }

  .app-header {
    backdrop-filter: none;
    background: rgba(255, 254, 249, 0.97);
  }

  .app-bottom-navigation {
    backdrop-filter: none;
    background: rgba(255, 254, 249, 0.97);
  }
}

.app-header {
  min-height: 4.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hausl-line) 80%, transparent);
  background: rgba(255, 254, 249, 0.82);
  box-shadow: 0 6px 22px rgba(38, 53, 42, 0.05);
  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__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 rgba(255, 254, 249, 0.95);
}

.app-header__task-filter.is-filtered .app-header__task-filter-dot {
  background: #fff;
  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: 0.86rem;
  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: 700;
}

.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: rgba(255, 254, 249, 0.93);
  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: 0.69rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  touch-action: manipulation;
  transition: color 160ms ease, background-color 160ms ease, transform 100ms ease;
}

.app-bottom-navigation__item .ui-icon { font-size: 1.15rem; }
.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: 700;
}
@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: rgba(29, 36, 31, 0.28); 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 rgba(38, 53, 42, 0.2); }
.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: 1.08rem; font-weight: 750; 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: 0.72rem; font-weight: 700; 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 { color: var(--hausl-faint); font-size: 0.75rem; }
.more-sheet__link strong, .more-sheet__link small { display: block; }
.more-sheet__link strong { font-size: 0.9rem; }
.more-sheet__link small { margin-top: 0.12rem; color: var(--hausl-muted); font-size: 0.75rem; }
.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:.9rem; }
.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:.79rem; 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:rgba(255,255,255,.14); 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: white;
  box-shadow: 0 0.65rem 1.3rem rgba(31, 74, 54, 0.25);
  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 rgba(31, 74, 54, 0.3);
}

.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) {
  body {
    background-image: var(--hausl-community-background-mobile);
    background-attachment: scroll;
  }

  .content-wrapper {
    background:
      linear-gradient(180deg, rgba(251,250,245,.08) 0, rgba(251,250,245,.38) 12rem, rgba(251,250,245,.88) 28rem, rgba(251,250,245,.96) 100%);
  }

  .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; }
  .app-header { min-height:6.8rem; border:0; background:linear-gradient(180deg,rgba(20,29,23,.25),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,rgba(27,39,32,.46) 0%,rgba(38,53,43,.3) 62%,rgba(38,53,43,.08) 86%,transparent 100%); -webkit-backdrop-filter:blur(4px) saturate(.96); backdrop-filter:blur(4px) saturate(.96); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.55) 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.55) 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:rgba(255,255,255,.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
  .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:#fff; font-size:1rem; font-weight:750; }
  .app-header__community summary > .ui-icon:first-child { display:none; }
  .app-header__community summary .ui-icon { color:#fff; font-size:.72rem; }
  .app-header .ui-btn, .app-header > .max-w-7xl .sm\:hidden > a, .app-header > .max-w-7xl .sm\:hidden > button { width:3rem; height:3rem; border:1px solid rgba(255,255,255,.6)!important; border-radius:.9rem!important; background:rgba(255,254,249,.9)!important; color:var(--hausl-ink)!important; box-shadow:0 .35rem .85rem rgba(24,35,28,.12)!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; }
}

@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 #d1d5db;
  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: #f9fafb;
  font-weight: 600;
}

.editor-drop-indicator {
  height: 4px;
  border-radius: 9999px;
  background: #2563eb;
  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 #2563eb;
}

.editor-drop-target {
  outline: 2px dashed #93c5fd;
  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 #d1d5db;
  background-color: #ffffff;
  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: 0.75rem;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  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: 9999px;
  gap: 0;
}

input[type="submit"].ui-btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 9999px;
  font-size: 0;
  line-height: 0;
  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: #fffef9;
  background: var(--hausl-accent-deep);
}

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

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

.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));
}

/* 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: 0.95rem;
    font-weight: 500;
    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 #93c5fd;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

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

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

.hausl-flash-stack {
  position: fixed;
  left: 1rem;
  right: 1rem;
  /* Sit clearly above FAB + bottom nav, not on top of either. */
  bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 2400;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

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

.hausl-flash {
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 0.75rem 1.75rem rgba(29, 36, 31, 0.22);
}

.hausl-flash--notice {
  background: #37624c;
}

.hausl-flash--alert {
  background: #9c4d43;
}

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

.hausl-flash__action {
  margin-left: auto;
  padding: 0.35rem 0.7rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  font-weight: 600;
}

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

.unsaved-guard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}

.unsaved-guard-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem 1rem 0 0;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
}

@media (min-width: 640px) {
  .unsaved-guard-panel {
    left: 50%;
    right: auto;
    bottom: 1rem;
    width: min(30rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
  }
}

.unsaved-guard-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.unsaved-guard-message {
  margin-top: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
}

.unsaved-guard-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

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;
}