@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cinzel-decorative-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cinzel-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cinzel-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Cloister Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/LTC_Clstr-RomBld.ttf") format("truetype");
}

@font-face {
  font-family: "Cloister Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/LTC_ClstrPro-RomMed.otf") format("opentype");
}

@font-face {
  font-family: "Cloister Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/LTC_ClstrPro-RomBld.otf") format("opentype");
}

:root {
  --eba-dark-blue: #160e49;
  --eba-light-blue: #778a9e;
  --eba-orange: #eb723d;
  --eba-cream: #f4efd9;
  --eba-yellow: #f1ef9b;
  --eba-page-canvas: #d4ae6f;
  --eba-sidebar-background:
    linear-gradient(rgba(244, 221, 169, 0.93), rgba(230, 194, 125, 0.94)),
    repeating-linear-gradient(4deg, rgba(92, 54, 24, 0.05) 0 1px, transparent 1px 7px),
    #ecd09a;
  --eba-parchment-panel-background:
    radial-gradient(circle at 15% 10%, rgba(255, 247, 216, 0.55), transparent 18rem),
    repeating-linear-gradient(5deg, rgba(91, 53, 24, 0.025) 0 1px, transparent 1px 8px),
    #ecd09a;
  --eba-parchment-chrome-background:
    linear-gradient(rgba(244, 220, 168, 0.96), rgba(224, 185, 111, 0.94)),
    #e8c486;
  --eba-modal-backdrop-background: rgba(35, 20, 12, 0.68);
  --navy-950: #092630;
  --navy-900: #103745;
  --navy-800: #174957;
  --navy-700: #245b68;
  --emerald-700: #237d4d;
  --emerald-600: #2f965d;
  --emerald-500: #43ab6d;
  --emerald-100: #dff4e7;
  --emerald-50: #eef9f2;
  --ocean-600: #168db5;
  --ocean-500: #27a9d3;
  --ocean-100: #dff5fb;
  --sand-50: #fbfaf5;
  --sand-100: #f4f0e3;
  --amber-500: #e6a92d;
  --amber-100: #fff0c9;
  --coral-600: #c84e49;
  --coral-100: #fde6e3;
  --ink-900: #172a31;
  --ink-700: #425a62;
  --ink-500: #6f8288;
  --ink-300: #b8c5c8;
  --line: #dce5e4;
  --surface: #ffffff;
  --background: #edf3f1;
  --shadow-sm: 0 1px 2px rgba(10, 41, 48, 0.07), 0 3px 12px rgba(10, 41, 48, 0.04);
  --shadow-md: 0 14px 35px rgba(8, 39, 49, 0.14);
  --shadow-lg: 0 25px 65px rgba(5, 29, 37, 0.25);
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --sidebar-width: 280px;
  --topbar-height: 72px;
}

.runtime-warning {
  position: relative;
  z-index: 1000;
  padding: 10px 18px;
  border-bottom: 2px solid #8d4f00;
  background: #ffe18a;
  color: #2c1900;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}

.runtime-warning code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--background);
  color: var(--ink-900);
  font-family:
    "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 78% -20%, rgba(39, 169, 211, 0.1), transparent 32rem),
    var(--background);
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
[data-nav],
.unit-card,
.bed-card {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.bed-card:focus-visible,
.unit-card:focus-visible {
  outline: 3px solid rgba(39, 169, 211, 0.28);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: clamp(1.75rem, 2vw, 2.2rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

h2 {
  margin-bottom: 0;
  font-size: 1.18rem;
  letter-spacing: -0.015em;
}

h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: center;
  height: var(--topbar-height);
  padding: 0 24px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--navy-950);
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: #fff;
}

.brand-island {
  position: absolute;
  top: 8px;
  left: 9px;
  width: 20px;
  height: 11px;
  transform: rotate(-5deg);
  border-radius: 65% 40% 55% 30%;
  background: var(--emerald-500);
}

.brand-wave,
.brand-wave::after {
  position: absolute;
  display: block;
  height: 6px;
  border-top: 3px solid var(--ocean-500);
  border-radius: 50%;
  content: "";
}

.brand-wave {
  top: 22px;
  left: 5px;
  width: 27px;
  transform: rotate(-5deg);
}

.brand-wave::after {
  top: -1px;
  left: 7px;
  width: 22px;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.brand small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px;
}

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  background: var(--emerald-500);
  color: #fff;
  box-shadow: 0 5px 14px rgba(36, 137, 82, 0.25);
}

.button-primary:hover {
  background: var(--emerald-600);
}

.button-secondary {
  border-color: rgba(35, 125, 77, 0.18);
  background: var(--emerald-50);
  color: var(--emerald-700);
}

.button-secondary:hover {
  border-color: rgba(35, 125, 77, 0.32);
  background: var(--emerald-100);
}

.button-ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--ink-700);
}

.topbar .button-ghost,
.topbar .button-secondary {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}

.topbar .button-secondary {
  color: #9ee5f6;
}

.button-light {
  background: #fff;
  color: var(--navy-900);
}

.button-small {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.button-danger {
  border-color: #edcbc7;
  background: #fff4f3;
  color: var(--coral-600);
}

.button-danger:hover {
  background: var(--coral-100);
}

.button[disabled],
button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.icon-button,
.avatar-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  color: var(--ink-700);
  font-size: 1.25rem;
}

.topbar .icon-button,
.avatar-button {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.avatar-button {
  margin-left: 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ocean-500), var(--emerald-500));
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mobile-menu-button {
  display: none;
}

.workspace {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  padding-top: var(--topbar-height);
}

.sidebar {
  position: fixed;
  z-index: 35;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  border-right: 1px solid #d6e0df;
  background: #f8faf8;
}

.sidebar-resize-handle {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: -9px;
  display: grid;
  width: 18px;
  height: 76px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(22, 14, 73, 0.38);
  border-radius: 9px;
  cursor: col-resize;
  background: rgba(244, 239, 217, 0.98);
  box-shadow: 0 2px 7px rgba(22, 14, 73, 0.16);
  color: var(--eba-dark-blue, #160e49);
  touch-action: none;
}

.sidebar-resize-handle::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 9px);
  visibility: hidden;
  min-width: max-content;
  padding: 5px 8px;
  transform: translateY(-50%);
  border: 1px solid rgba(22, 14, 73, 0.24);
  border-radius: 6px;
  background: rgba(244, 239, 217, 0.98);
  box-shadow: var(--shadow-sm);
  color: #160e49;
  content: "Drag to resize";
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:focus-visible::after {
  visibility: visible;
  opacity: 1;
}

.sidebar-resize-handle > span,
.sidebar-resize-handle > span::before,
.sidebar-resize-handle > span::after {
  display: block;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.sidebar-resize-handle > span {
  position: relative;
  opacity: 0.72;
}

.sidebar-resize-handle > span::before,
.sidebar-resize-handle > span::after {
  position: absolute;
  top: 0;
}

.sidebar-resize-handle > span::before {
  left: -4px;
}

.sidebar-resize-handle > span::after {
  right: -4px;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle:focus-visible,
body.is-resizing-sidebar .sidebar-resize-handle {
  border-color: #160e49;
  background: #f1ef9b;
  box-shadow: 0 3px 10px rgba(22, 14, 73, 0.22);
}

body.is-resizing-sidebar,
body.is-resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none !important;
}

.sidebar-scroll {
  padding: 23px 15px 18px;
  overflow-y: auto;
}

.nav-label {
  margin: 0 9px 9px;
  color: #829295;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-label:not(:first-child) {
  margin-top: 21px;
}

.nav-item {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  color: #52666b;
  text-align: left;
}

.nav-item > span:nth-child(2) {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.nav-item:hover {
  background: #ebf1ef;
  color: var(--ink-900);
}

.nav-item.is-active {
  background: var(--genre-soft, #dff0e5);
  color: var(--genre-color, var(--emerald-700));
  font-weight: 800;
}

.nav-item.is-future {
  color: #7e8b8e;
}

.nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: transparent;
  color: currentColor;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.92rem;
}

.nav-count {
  min-width: 23px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(16, 55, 69, 0.06);
  color: #728387;
  font-size: 0.69rem;
  font-weight: 700;
  text-align: center;
}

.nav-item.is-active .nav-count {
  background: rgba(255, 255, 255, 0.7);
  color: var(--genre-color, var(--emerald-700));
}

.future-badge {
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 5px;
  background: #e9edec;
  color: #7b898c;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-divider {
  height: 1px;
  margin: 20px 8px;
  background: var(--line);
}

.sidebar-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-section-heading .nav-label {
  margin-bottom: 0;
}

.text-button {
  padding: 3px;
  cursor: pointer;
  background: transparent;
  color: var(--ocean-600);
  font-size: 0.76rem;
  font-weight: 750;
}

.status-filter-list {
  display: grid;
  gap: 3px;
}

.status-filter {
  display: grid;
  min-height: 34px;
  grid-template-columns: 15px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: #5d7075;
  font-size: 0.82rem;
  text-align: left;
}

.status-filter:hover,
.status-filter.is-active {
  background: #ebf1ef;
  color: var(--ink-900);
}

.status-filter strong {
  color: #829094;
  font-size: 0.72rem;
}

.status-dot,
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
}

.dot-all {
  background: var(--ocean-500);
}

.dot-open,
.legend-open {
  background: var(--emerald-500);
}

.dot-partial,
.legend-partial {
  background: var(--amber-500);
}

.dot-full,
.legend-full {
  background: var(--coral-600);
}

.sidebar-setup-card {
  margin: 20px 2px 0;
  padding: 15px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(39, 169, 211, 0.25), transparent 8rem),
    var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.sidebar-setup-card .eyebrow {
  color: #8fdcf2;
}

.sidebar-setup-card strong {
  display: block;
  margin: 6px 0;
  font-size: 0.88rem;
}

.sidebar-setup-card p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  line-height: 1.45;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 13px 15px;
  border-top: 1px solid var(--line);
}

.sidebar-footer .icon-button {
  width: 32px;
  height: 32px;
  font-size: 0.92rem;
}

.save-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7a898d;
  font-size: 0.6875rem;
  font-weight: 650;
}

.save-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(67, 171, 109, 0.12);
}

.main-content {
  min-width: 0;
  grid-column: 2;
  padding: 30px clamp(20px, 2.6vw, 42px) 70px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 24px;
}

.page-heading > div:first-child {
  min-width: 260px;
}

.page-heading p {
  margin-bottom: 0;
  color: var(--ink-500);
}

.breadcrumb {
  display: flex;
  gap: 7px;
  margin-bottom: 9px;
  color: #849296;
  font-size: 0.75rem;
  font-weight: 650;
}

.date-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}

.date-controls .icon-button {
  width: 32px;
  height: 36px;
  border: 0;
  background: transparent;
}

.date-display {
  display: flex;
  min-width: 230px;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  cursor: pointer;
  background: transparent;
  text-align: left;
}

.date-display small,
.date-display strong {
  display: block;
}

.date-display small {
  margin-bottom: 1px;
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 650;
}

.date-display strong {
  font-size: 0.82rem;
}

.calendar-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: var(--ocean-100);
  color: var(--ocean-600);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.9rem;
}

.visually-hidden-date {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented-control {
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: #eaf0ee;
}

.segmented-control button {
  min-width: 49px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 750;
}

.segmented-control button.is-active {
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 1px 5px rgba(9, 42, 51, 0.12);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}

.summary-card {
  position: relative;
  display: grid;
  min-height: 126px;
  grid-template-columns: 1fr auto;
  padding: 18px 18px 15px;
  overflow: hidden;
  border: 1px solid rgba(209, 222, 219, 0.85);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.89);
  box-shadow: var(--shadow-sm);
}

.summary-card::after {
  position: absolute;
  right: -26px;
  bottom: -44px;
  width: 100px;
  height: 100px;
  border: 14px solid rgba(39, 169, 211, 0.04);
  border-radius: 50%;
  content: "";
}

.summary-card strong {
  display: block;
  margin-top: 4px;
  font-size: 2rem;
  letter-spacing: -0.045em;
  line-height: 1;
}

.summary-label {
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 700;
}

.summary-card p {
  z-index: 1;
  grid-column: 1;
  align-self: end;
  margin-bottom: 0;
  color: #7d8e92;
  font-size: 0.71rem;
}

.summary-icon {
  display: grid;
  width: 35px;
  height: 35px;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  place-items: center;
  border-radius: 10px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
}

.summary-icon-glyph {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
}

.summary-icon-open {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.summary-icon-occupied {
  background: var(--ocean-100);
  color: var(--ocean-600);
}

.summary-icon-arrival {
  background: var(--amber-100);
  color: #a66e00;
}

.summary-icon-departure {
  background: #e8ecf8;
  color: #5368a2;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 52px;
  margin-bottom: 18px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}


.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-right {
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 650;
}

.filter-chip {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-500);
  font-size: 0.76rem;
  font-weight: 700;
}

.filter-chip:hover,
.filter-chip.is-active {
  background: var(--navy-900);
  color: #fff;
}

.tag-filter {
  position: relative;
}

.tag-filter summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-left: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink-500);
  font-size: 0.76rem;
  font-weight: 700;
  list-style: none;
}

.tag-filter summary::-webkit-details-marker {
  display: none;
}

.tag-filter summary::after {
  content: "⌄";
}

.tag-filter[open] summary {
  color: var(--ink-900);
}

.tag-filter-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 10px);
  left: 0;
  width: 270px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.tag-filter-popover #unit-tag-filter-options {
  display: grid;
  max-height: 250px;
  gap: 3px;
  margin-bottom: 8px;
  overflow: auto;
}

.check-row {
  display: flex;
  min-height: 33px;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  color: var(--ink-700);
  font-size: 0.78rem;
}

.check-row input {
  accent-color: var(--emerald-600);
}

.dashboard-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  align-items: start;
  gap: 16px;
  margin-bottom: 27px;
}

.dashboard-grid:not(:has(.movement-panel[open])) {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 19px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: block;
  color: var(--ocean-600);
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.panel-heading h2 {
  margin-top: 3px;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 650;
}

.legend-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.category-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px 10px;
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 700;
}

.category-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.category-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--genre-color);
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.map-viewport {
  --map-scale: 1;
  --map-translate-x: 0%;
  --map-translate-y: 0%;
  position: relative;
  width: 100%;
  aspect-ratio: 792 / 612;
  overflow: hidden;
  isolation: isolate;
  background: #3d281b;
}

.map-viewport img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate(var(--map-translate-x), var(--map-translate-y))
    scale(var(--map-scale));
  transform-origin: 0 0;
  user-select: none;
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.25, 1);
}

.map-viewport::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(7, 38, 45, 0.09);
  content: "";
  pointer-events: none;
}

.map-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: rgba(4, 37, 43, 0.24);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.map-viewport.is-focused .map-shade {
  opacity: 0.06;
}

.water-tank-hotspot {
  position: absolute;
  z-index: 4;
  top: 73.6%;
  left: 26.45%;
  width: max(44px, 5.2%);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.map-viewport.is-focused .water-tank-hotspot,
.map-viewport.is-layout-editing .water-tank-hotspot {
  display: none;
}

.water-splash-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.water-splash-emoji {
  position: absolute;
  top: var(--water-origin-y);
  left: var(--water-origin-x);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: water-tank-spit 900ms cubic-bezier(0.17, 0.76, 0.31, 1) both;
  animation-delay: var(--water-delay);
}

.water-tank-explosion,
.water-flood-wave {
  position: absolute;
  z-index: 1;
  top: var(--water-origin-y);
  left: var(--water-origin-x);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.water-tank-explosion {
  z-index: 2;
  font-size: clamp(1.55rem, 3.4vw, 3rem);
  animation: water-tank-explosion 920ms cubic-bezier(0.17, 0.8, 0.28, 1) both;
  animation-delay: var(--water-explosion-delay);
}

.water-flood-wave {
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  animation: water-tank-flood 5600ms cubic-bezier(0.32, 0.08, 0.4, 1) both;
  animation-delay: var(--water-delay);
}

@keyframes water-tank-spit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--water-dx)),
        calc(-50% + var(--water-dy))
      )
      scale(var(--water-scale))
      rotate(var(--water-rotate));
  }
}

@keyframes water-tank-explosion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(-18deg);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78) rotate(3deg);
  }
  68% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--water-explosion-x)),
        calc(-50% + var(--water-explosion-y))
      )
      scale(var(--water-explosion-scale))
      rotate(var(--water-explosion-rotate));
  }
}

@keyframes water-tank-flood {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(0deg);
  }
  7% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform:
      translate(
        calc(-50% + var(--water-garden-x)),
        calc(-50% + var(--water-garden-y))
      )
      scale(var(--water-scale-tight))
      rotate(var(--water-rotate));
  }
  53% {
    opacity: 1;
    transform:
      translate(
        calc(-50% + var(--water-lower-scout-x)),
        calc(-50% + var(--water-lower-scout-y))
      )
      scale(var(--water-scale-wide))
      rotate(var(--water-rotate-reverse));
  }
  73% {
    opacity: 1;
    transform:
      translate(
        calc(-50% + var(--water-bend-x)),
        calc(-50% + var(--water-bend-y))
      )
      scale(var(--water-scale-tight))
      rotate(var(--water-rotate));
  }
  93% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--water-piers-x)),
        calc(-50% + var(--water-piers-y))
      )
      scale(var(--water-scale))
      rotate(var(--water-rotate));
  }
}

@media (prefers-reduced-motion: reduce) {
  .water-splash-emoji {
    animation-name: water-tank-splash-fade;
    animation-duration: 420ms;
  }

  .water-tank-explosion {
    animation-name: water-tank-splash-fade;
    animation-duration: 420ms;
  }

  .water-flood-wave {
    animation-name: water-tank-flood-fade;
    animation-duration: 620ms;
  }
}

@keyframes water-tank-splash-fade {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }
  35%,
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes water-tank-flood-fade {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  30%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.map-marker {
  --marker-color: var(--emerald-500);
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(5, 31, 36, 0.24));
  background: transparent;
  color: var(--ink-900);
  transition:
    transform 120ms ease,
    opacity 150ms ease,
    filter 120ms ease;
}

.map-marker:hover,
.map-marker:focus-visible {
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 7px 10px rgba(5, 31, 36, 0.3));
}

.map-marker.is-dimmed {
  opacity: 0.28;
}

.map-marker.is-hidden {
  display: none;
}

.map-marker-status {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--marker-color);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(8, 36, 41, 0.15);
  font-size: 0.6875rem;
  font-weight: 900;
}

.map-marker-label {
  display: grid;
  min-width: 74px;
  max-width: 145px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--genre-color, #355f78) 42%, white);
  border-left: 4px solid var(--genre-color, #355f78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 9px rgba(9, 42, 51, 0.15);
  font-size: 0.6875rem;
  line-height: 1.16;
  text-align: left;
}

.map-marker-label strong,
.map-marker-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-marker-label small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 700;
}

.map-marker.status-partial {
  --marker-color: var(--amber-500);
}

.map-marker.status-full {
  --marker-color: var(--coral-600);
}

.map-marker.status-unconfigured,
.map-marker.status-closed {
  --marker-color: #7c8b8e;
}

.map-group-marker .map-marker-status {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: var(--genre-color);
}

.map-group-marker .map-marker-label {
  min-width: 135px;
  background: color-mix(in srgb, var(--genre-soft) 55%, white);
}

.map-marker.is-compact {
  gap: 0;
}

.map-marker.is-compact .map-marker-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 7px);
  visibility: hidden;
  opacity: 0;
  transform: translate(-5px, -50%);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
}

.map-marker.is-compact:hover .map-marker-label,
.map-marker.is-compact:focus-visible .map-marker-label {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -50%);
}

.map-reset-dock {
  position: absolute;
  z-index: 8;
  right: 13px;
  bottom: 12px;
}

.map-reset-button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(13, 54, 64, 0.17);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--navy-800);
  font-size: 0.69rem;
  font-weight: 750;
}

.holiday-bottle {
  position: absolute;
  z-index: 9;
  bottom: 14px;
  left: 14px;
  display: grid;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  place-items: center;
  padding: 0;
  border: 2px solid #6f4927;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(249, 226, 171, 0.96);
  box-shadow: 0 7px 16px rgba(44, 25, 13, 0.34);
  color: #382217;
  touch-action: manipulation;
}

.holiday-bottle[hidden] {
  display: none;
}

.holiday-bottle:hover,
.holiday-bottle:focus-visible {
  border-color: #160e49;
  background: #fff0c7;
  box-shadow: 0 8px 19px rgba(44, 25, 13, 0.42);
}

.holiday-bottle:focus-visible {
  outline: 3px solid rgba(255, 250, 231, 0.95);
  outline-offset: 2px;
}

.holiday-bottle-art {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  pointer-events: none;
  animation: holiday-bottle-float 3.4s ease-in-out infinite;
}

.holiday-bottle-art > span:first-child {
  position: absolute;
  inset: 4px 2px 0 1px;
  font-size: 34px;
  line-height: 1;
  transform: rotate(-28deg);
}

.holiday-bottle-art > span:last-child {
  position: absolute;
  top: 15px;
  left: 18px;
  font-size: 17px;
  line-height: 1;
  transform: rotate(-9deg);
}

@keyframes holiday-bottle-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}

.holiday-message-modal {
  width: min(500px, calc(100vw - 26px));
}

.holiday-message-body {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding-block: 31px;
  text-align: center;
}

.holiday-message-emoji {
  display: grid;
  min-width: 82px;
  min-height: 82px;
  place-items: center;
  border: 2px solid #694524;
  border-radius: 50%;
  background: rgba(255, 240, 199, 0.88);
  box-shadow: 0 5px 13px rgba(56, 34, 23, 0.18);
  font-size: 40px;
  line-height: 1;
}

.holiday-message-body p {
  margin: 0;
  color: #382217;
  font-family: "Pirata One", "IM FELL English", Georgia, serif;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.15;
}

.holiday-message-body small {
  color: #765735;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .holiday-bottle-art {
    animation: none;
  }
}

.map-caption {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 18px;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.map-source {
  flex: 0 0 auto;
  color: #9aa6a8;
}

.movement-panel {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.movement-panel:not([open]) {
  position: absolute;
  z-index: 8;
  top: 92px;
  right: -3px;
  width: 47px;
  box-shadow: var(--shadow-md);
}

.movement-panel:not([open]) .movement-summary {
  width: 47px;
  min-height: 194px;
  flex-direction: column;
  gap: 9px;
  padding: 11px 7px;
}

.movement-panel:not([open]) .movement-summary > div {
  display: grid;
  flex: 1;
  place-items: center;
}

.movement-panel:not([open]) .movement-summary .eyebrow {
  display: none;
}

.movement-panel:not([open]) .movement-summary h2 {
  margin: 0;
  font-size: 0.77rem;
  letter-spacing: 0.04em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.movement-panel:not([open]) .movement-summary-meta {
  flex-direction: column;
  gap: 5px;
}

.movement-panel:not([open]) .movement-summary-meta > span {
  transform: rotate(90deg);
}

.movement-summary {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}

.movement-summary::-webkit-details-marker {
  display: none;
}

.movement-summary h2 {
  margin-top: 3px;
}

.movement-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-500);
}

.movement-summary-meta strong {
  min-width: 27px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--ocean-100);
  color: var(--ocean-600);
  font-size: 0.6875rem;
  text-align: center;
}

.movement-summary-meta > span {
  transition: transform 160ms ease;
}

.movement-panel[open] .movement-summary {
  border-bottom: 1px solid var(--line);
}

.movement-panel[open] .movement-summary-meta > span {
  transform: rotate(180deg);
}

.movement-actions {
  display: flex;
  justify-content: flex-end;
  padding: 9px 18px 0;
}

.movement-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 15px;
  align-content: start;
  padding: 7px 14px 15px;
}

.movement-campsite .movement-symbol {
  background: #f1eadc;
  color: #765f35;
}

.movement-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  padding: 9px 5px;
  border-bottom: 1px solid #edf1f0;
}

.movement-item:last-child {
  border-bottom: 0;
}

.movement-symbol {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
}

.movement-arrival .movement-symbol {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.movement-departure .movement-symbol {
  background: #e8ecf8;
  color: #5368a2;
}

.movement-person {
  min-width: 0;
}

.movement-person strong,
.movement-person span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movement-person strong {
  font-size: 0.78rem;
}

.movement-person span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.movement-date {
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 700;
}

.movement-empty {
  display: grid;
  min-height: 270px;
  place-items: center;
  padding: 30px;
  color: var(--ink-500);
  text-align: center;
}

.movement-empty span {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--emerald-50);
  color: var(--emerald-600);
  font-size: 1.15rem;
}

.movement-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-900);
}

.movement-empty p {
  margin: 0;
  font-size: 0.75rem;
}

.units-section {
  margin-top: 5px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 14px;
}

.section-heading h2 {
  margin-top: 3px;
  font-size: 1.24rem;
}

.section-heading p {
  max-width: 460px;
  margin-bottom: 1px;
  color: var(--ink-500);
  font-size: 0.72rem;
  text-align: right;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}

.unit-card {
  position: relative;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--genre-soft, transparent), transparent 42%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition:
    transform 130ms ease,
    box-shadow 130ms ease,
    border-color 130ms ease;
}

.unit-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--genre-color, var(--navy-700));
  content: "";
}

.unit-card:hover {
  transform: translateY(-2px);
  border-color: #bfd2ce;
  box-shadow: 0 8px 24px rgba(9, 46, 55, 0.09);
}

.unit-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.unit-card-title {
  display: block;
  overflow: hidden;
  margin: 1px 0 4px;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-genre {
  color: var(--genre-color, var(--ink-500));
  font-size: 0.6875rem;
  font-weight: 750;
}

.unit-status-badge {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--emerald-100);
  color: var(--emerald-700);
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
}

.unit-status-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.unit-status-badge.status-partial {
  background: var(--amber-100);
  color: #9d6800;
}

.unit-status-badge.status-full {
  background: var(--coral-100);
  color: var(--coral-600);
}

.unit-status-badge.status-unconfigured,
.unit-status-badge.status-closed {
  background: #e9edec;
  color: #6f7e81;
}

.capacity-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
}

.capacity-line strong {
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.capacity-line span {
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 650;
}

.tag {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #dce5e3;
  border-radius: 99px;
  background: #f7f9f8;
  color: #6b7c80;
  font-size: 0.6875rem;
  font-weight: 700;
}

.tag-more {
  color: var(--ocean-600);
}

.week-tag {
  display: inline-flex !important;
  min-height: 21px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #cfd8f4;
  border-radius: 99px;
  background: #eef1ff;
  color: #4f61a2 !important;
  font-size: 0.6875rem !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.placeholder-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: #9b7b2b;
  font-size: 0.6875rem;
  font-weight: 650;
}

.empty-state {
  padding: 55px 20px;
  border: 1px dashed #c9d6d3;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink-500);
  text-align: center;
}

.empty-state > span {
  display: grid;
  width: 55px;
  height: 55px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--ocean-100);
  color: var(--ocean-600);
  font-size: 1.5rem;
}

.empty-state h3 {
  color: var(--ink-900);
  font-size: 1.1rem;
}

.empty-state p {
  margin-bottom: 15px;
}

.sidebar-scrim,
.drawer-scrim {
  position: fixed;
  z-index: 70;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(4, 27, 34, 0.48);
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.unit-drawer {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 94vw);
  overflow-y: auto;
  transform: translateX(105%);
  background: #f9fbfa;
  box-shadow: var(--shadow-lg);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.unit-drawer.is-open {
  transform: translateX(0);
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .drawer-scrim {
  visibility: visible;
  opacity: 1;
}

.drawer-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 21px;
  border-bottom: 3px solid var(--genre-color, var(--line));
  background:
    linear-gradient(110deg, var(--genre-soft, transparent), transparent 55%),
    rgba(249, 251, 250, 0.96);
  backdrop-filter: blur(12px);
}

.drawer-header h2 {
  margin-top: 4px;
  font-size: 1.48rem;
}

.drawer-header .icon-button {
  border: 0;
  background: #eef2f1;
}

.drawer-content {
  padding: 19px 21px 45px;
}

.drawer-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.drawer-status-card strong,
.drawer-status-card p {
  display: block;
}

.campsite-capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.campsite-capacity-grid > span {
  display: grid;
  min-height: 82px;
  align-content: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre-color) 24%, white);
  border-radius: 12px;
  background: var(--genre-soft);
  text-align: center;
}

.campsite-capacity-grid strong {
  color: var(--genre-color);
  font-size: 1.45rem;
}

.campsite-capacity-grid small {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 0.6875rem;
  font-weight: 700;
}

.campsite-capacity-note {
  margin: 10px 2px 0;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.drawer-status-card strong {
  margin-top: 7px;
  font-size: 1rem;
}

.drawer-status-card p {
  margin: 2px 0 0;
  color: var(--ink-500);
  font-size: 0.69rem;
}

.status-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--emerald-100);
  color: var(--emerald-700);
  font-size: 0.6875rem;
  font-weight: 800;
}

.status-pill.status-partial {
  background: var(--amber-100);
  color: #9d6800;
}

.status-pill.status-full {
  background: var(--coral-100);
  color: var(--coral-600);
}

.tag-row {
  display: flex;
  min-height: 25px;
  flex-wrap: wrap;
  gap: 5px;
}

.drawer-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 24px 1px 11px;
}

.drawer-section-heading h3 {
  margin: 3px 0 0;
  font-size: 1.05rem;
}

.rooms-list {
  display: grid;
  gap: 12px;
}

.room-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.room-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.room-card-heading strong {
  font-size: 0.82rem;
}

.room-card-heading span {
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.bed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bed-card {
  position: relative;
  display: grid;
  min-height: 68px;
  align-content: center;
  padding: 9px 10px 9px 34px;
  border: 1px solid #cde5d6;
  border-radius: 10px;
  cursor: pointer;
  background: var(--emerald-50);
  color: var(--emerald-700);
  text-align: left;
}

.bed-card::before {
  position: absolute;
  top: 21px;
  left: 10px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 4px 4px 2px 2px;
  content: "";
  opacity: 0.7;
}

.bed-card:hover {
  border-color: #93cfaa;
  background: #e4f7ea;
}

.bed-card strong,
.bed-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bed-card strong {
  font-size: 0.72rem;
}

.bed-card span {
  margin-top: 2px;
  color: #6e8b77;
  font-size: 0.6875rem;
}

.bed-card.is-occupied {
  border-color: #f0cf84;
  background: #fff7df;
  color: #8c5e05;
}

.bed-card.is-full {
  border-color: #efc6c2;
  background: #fff0ee;
  color: var(--coral-600);
}

.drawer-schedule-heading {
  margin-top: 28px;
}

.drawer-stays {
  display: grid;
  gap: 7px;
}

.stay-row {
  display: grid;
  min-height: 64px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.person-initials {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--ocean-100);
  color: var(--ocean-600);
  font-size: 0.6875rem;
  font-weight: 850;
}

.stay-person {
  min-width: 0;
}

.stay-person strong,
.stay-person span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-person .stay-week-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  overflow: visible;
  white-space: normal;
}

.stay-person strong {
  font-size: 0.76rem;
}

.stay-person span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.ships-manifest {
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--genre-color, #237b5d) 38%, #c9b584);
  border-radius: 8px;
  background: color-mix(in srgb, var(--genre-soft, #dcefe7) 74%, #fff8e4);
}

.mooring-reservation-row {
  align-items: start;
}

.mooring-reservation-row > .person-initials,
.mooring-reservation-row > .stay-row-actions {
  margin-top: 0.1rem;
}

.stay-person .ships-manifest > strong {
  overflow: visible;
  color: var(--genre-color, #1f7659);
  font-size: 0.73rem;
  letter-spacing: 0.035em;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: normal;
}

.ships-manifest ul {
  display: grid;
  gap: 0.32rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.ships-manifest li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.55rem;
}

.stay-person .ships-manifest li > span {
  display: block;
  margin: 0;
  overflow: visible;
  color: var(--ink-900);
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ships-manifest li small {
  color: var(--ink-500);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

.manifest-owner-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  background: var(--genre-color, #237b5d);
  color: var(--genre-on, #fffaf0);
  font-family: inherit;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ships-manifest p {
  margin: 0.4rem 0 0;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.stay-row-actions {
  display: flex;
  gap: 3px;
}

.mini-action {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-500);
  font-size: 0.85rem;
}

.mini-action:hover {
  background: #edf2f1;
  color: var(--ink-900);
}

.mini-action.is-danger:hover {
  background: var(--coral-100);
  color: var(--coral-600);
}

/* v0.64 standardizes record-level Edit and Delete controls across directories. */
.mini-action.record-edit-action,
.mini-action.record-delete-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}

.mini-action.record-edit-action {
  border-color: #160e49;
  background: #f4efd9;
  color: #160e49;
}

.mini-action.record-delete-action {
  border-color: #9f3e37;
  background: #fff0eb;
  color: #8f332e;
}

.record-action-label {
  display: none;
}

.drawer-empty {
  padding: 22px;
  border: 1px dashed #cfd9d7;
  border-radius: 11px;
  color: var(--ink-500);
  font-size: 0.74rem;
  text-align: center;
}

.modal {
  width: min(560px, calc(100vw - 26px));
  max-height: min(860px, calc(100vh - 30px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  color: var(--ink-900);
}

.modal-wide {
  width: min(760px, calc(100vw - 26px));
}

.modal::backdrop {
  background: rgba(4, 27, 34, 0.58);
  backdrop-filter: blur(2px);
}

/* Keep modal actions visible when an expanded form needs to scroll. */
.modal > form {
  display: flex;
  max-height: min(850px, calc(100vh - 40px));
  flex-direction: column;
  overflow: hidden;
}

.modal > form > .modal-header,
.modal > form > .modal-footer {
  flex: 0 0 auto;
}

.modal > form > .modal-body {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
}

.modal-header {
  display: flex;
  min-height: 81px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 21px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin-top: 3px;
  font-size: 1.35rem;
}

.modal-header .icon-button {
  border: 0;
  background: #eef2f1;
}

.modal-body {
  max-height: calc(100vh - 180px);
  padding: 20px 21px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 69px;
  padding: 13px 21px;
  border-top: 1px solid var(--line);
  background: #fbfcfb;
}

.form-grid {
  display: grid;
  gap: 13px;
}

.form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.inline-create-row .button {
  min-height: 41px;
  white-space: nowrap;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.guest-sponsor-field[hidden] {
  display: none !important;
}

.field > span,
.person-choice legend {
  color: #53666a;
  font-size: 0.72rem;
  font-weight: 750;
}

.field em {
  color: #9aa6a8;
  font-style: normal;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 41px;
  padding: 8px 10px;
  border: 1px solid #cedad8;
  border-radius: 9px;
  outline: none;
  background: #fff;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ocean-500);
  box-shadow: 0 0 0 3px rgba(39, 169, 211, 0.11);
}

.field small {
  color: #8a989b;
  font-size: 0.6875rem;
}

.calendar-structure-note {
  margin: 2px 0 17px;
  padding: 10px 12px;
  border-left: 3px solid #9b6a35;
  background: rgba(232, 205, 150, 0.22);
  color: #65452b;
  font-size: 0.73rem;
}

.person-choice {
  margin: 3px 0 17px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.annual-person-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #c98c35;
  border-radius: 10px;
  background: #fff5dc;
  color: #674111;
}

.annual-person-review[hidden] {
  display: none;
}

.annual-person-review strong,
.annual-person-review p {
  display: block;
}

.annual-person-review p {
  margin-top: 3px;
  font-size: 0.69rem;
}

.assignment-week-preview {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin: -3px 0 15px;
  padding: 8px 10px;
  border: 1px solid #dfe5f4;
  border-radius: 9px;
  background: #f8f9ff;
}

.assignment-week-preview > span {
  flex: 0 0 auto;
  color: #68738d;
  font-size: 0.6875rem;
  font-weight: 750;
}

.assignment-week-preview > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.assignment-week-preview em {
  color: #8b9699;
  font-size: 0.6875rem;
}

.person-choice legend {
  padding: 0 4px;
}

.segmented-wide {
  display: flex;
  margin-bottom: 13px;
}

.segmented-wide button {
  flex: 1;
}

.choice-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choice-chip {
  position: relative;
}

.choice-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-chip span {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #d3dddb;
  border-radius: 99px;
  cursor: pointer;
  background: #f8faf9;
  color: #64777b;
  font-size: 0.6875rem;
  font-weight: 700;
}

.choice-chip input:checked + span {
  border-color: #9bcfb0;
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.tag-choice-stack {
  display: grid;
  gap: 13px;
}

.tag-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tag-choice-group legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  padding: 0;
}

.tag-choice-group legend strong {
  color: var(--ink-700);
  font-size: 0.72rem;
}

.tag-choice-group legend small {
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: right;
}

.drawer-bed-panel,
.assignment-bed-details {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.35);
}

.drawer-bed-panel summary,
.assignment-bed-details summary {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.drawer-bed-panel summary::-webkit-details-marker,
.assignment-bed-details summary::-webkit-details-marker {
  display: none;
}

.drawer-bed-panel[open] summary,
.assignment-bed-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.drawer-bed-panel > p,
.assignment-bed-help {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.drawer-bed-panel > p {
  padding: 12px 14px 0;
}

.drawer-bed-panel .rooms-list {
  padding: 12px 14px 14px;
}

.drawer-bed-panel-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-500);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.drawer-bed-panel-meta > span {
  transition: transform 160ms ease;
}

.drawer-bed-panel[open] .drawer-bed-panel-meta > span {
  transform: rotate(180deg);
}

.drawer-campsite-capacity {
  margin-top: 18px;
}

.assignment-bed-details {
  margin: 2px 0 15px;
}

.assignment-bed-details summary > span:first-child {
  display: grid;
}

.assignment-bed-details summary strong {
  color: var(--ink-900);
  font-size: 0.78rem;
}

.assignment-bed-details summary small {
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.assignment-bed-summary {
  color: var(--emerald-700);
  font-size: 0.7rem;
  font-weight: 750;
  text-align: right;
}

.assignment-bed-details-body {
  padding: 13px 14px 14px;
}

.specific-bed-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: var(--ink-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.specific-bed-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--emerald-700);
}

.stay-bed-note {
  color: var(--ink-500) !important;
  font-size: 0.6875rem !important;
}

.form-message {
  padding: 10px 12px;
  border: 1px solid #efc8c4;
  border-radius: 9px;
  background: #fff2f0;
  color: #a53d39;
  font-size: 0.72rem;
  font-weight: 650;
}

.layout-editor-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin: 23px 0 11px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.layout-editor-heading h3 {
  margin: 3px 0;
}

.layout-editor-heading p {
  margin-bottom: 0;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.tent-capacity-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: end;
  gap: 20px;
  margin-top: 22px;
  padding: 17px;
  border: 1px solid #d9c9a9;
  border-radius: 13px;
  background: #fbf7ef;
}

.tent-capacity-editor[hidden] {
  display: none;
}

.tent-capacity-editor h3 {
  margin: 3px 0;
}

.tent-capacity-editor p {
  margin-bottom: 0;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.tent-capacity-editor .field {
  margin: 0;
}

.room-editor-list {
  display: grid;
  gap: 8px;
}

.room-editor-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafcfb;
}

.room-editor-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: end;
  gap: 8px;
}

.room-meta-grid {
  grid-template-columns: minmax(150px, 1.25fr) minmax(100px, 0.75fr) minmax(150px, 1fr);
}

.room-editor-card-head .field {
  margin-bottom: 9px;
}

.room-editor-card-head > .mini-action {
  width: 36px;
  height: 41px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  background: #fff;
}

.bed-editor-list {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #e6ecea;
}

.bed-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 115px 36px;
  align-items: end;
  gap: 8px;
}

.fixed-bed-capacity {
  display: grid;
  height: 41px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #edf4f2;
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 750;
}

.bed-editor-row .field {
  margin: 0;
}

.bed-editor-row .mini-action {
  width: 36px;
  height: 41px;
  border: 1px solid var(--line);
  background: #fff;
}

.add-bed-button {
  margin-top: 9px;
}

.room-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 120px 36px;
  align-items: end;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafcfb;
}

.room-editor-row .field {
  margin: 0;
}

.room-editor-row .mini-action {
  width: 36px;
  height: 41px;
  border: 1px solid var(--line);
  background: #fff;
}

.directory-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.directory-search {
  flex: 1;
  margin: 0;
}

.form-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.person-name-grid {
  grid-template-columns: minmax(105px, 0.55fr) minmax(0, 1fr) minmax(0, 1fr);
}

.import-drop-zone {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  padding: 35px;
  border: 2px dashed #b9ceca;
  border-radius: 15px;
  background: #f6faf8;
  text-align: center;
}

.import-drop-zone strong {
  font-size: 1.15rem;
}

.import-drop-zone p {
  max-width: 520px;
  margin: 7px 0 18px;
  color: var(--ink-500);
  font-size: 0.76rem;
}

.import-file-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7faf9;
}

.import-file-bar strong,
.import-file-bar span {
  display: block;
}

.import-file-bar span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.import-mapping-grid {
  gap: 8px 12px;
}

.import-default-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
  color: var(--ink-700);
  font-size: 0.72rem;
}

.import-default-tag input {
  accent-color: var(--emerald-600);
}

.import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}

.import-summary span {
  padding: 5px 9px;
  border-radius: 99px;
  background: var(--emerald-100);
  color: var(--emerald-700);
  font-size: 0.6875rem;
  font-weight: 700;
}

.import-summary span.has-errors {
  background: var(--coral-100);
  color: var(--coral-600);
}

.import-preview-wrap {
  max-height: 330px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.import-preview-table {
  min-width: 760px;
}

.import-preview-table thead {
  position: sticky;
  z-index: 1;
  top: 0;
}

.import-preview-table td small {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
}

.import-preview-table .import-warning {
  color: #986100;
}

.import-row-error {
  background: #fff7f6;
}

.import-result {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 800;
}

.import-result.is-valid {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.import-result.is-error {
  background: var(--coral-100);
  color: var(--coral-600);
}

.people-list {
  display: grid;
  gap: 7px;
}

.person-row {
  display: grid;
  min-height: 67px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.person-row .person-initials {
  width: 38px;
  height: 38px;
}

.person-row-main {
  min-width: 0;
}

.person-row-main strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.79rem;
}

.person-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.person-stay-count {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.schedule-table-wrap {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.schedule-table th,
.schedule-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.schedule-table th {
  color: var(--ink-500);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schedule-table td strong {
  display: block;
  font-size: 0.75rem;
}

.schedule-table td small {
  color: var(--ink-500);
}

.settings-stack {
  display: grid;
  gap: 12px;
}

.settings-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfb;
}

.settings-section p {
  margin-bottom: 13px;
  color: var(--ink-500);
  font-size: 0.72rem;
}

.danger-section {
  border-color: #efd4d1;
  background: #fff9f8;
}

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

.file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.version-line {
  margin: 6px 0 0;
  color: #9ba6a8;
  font-size: 0.6875rem;
  text-align: center;
}

.toast-region {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(390px, calc(100vw - 36px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: var(--navy-900);
  box-shadow: var(--shadow-md);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 650;
  pointer-events: auto;
  animation: toast-in 180ms ease-out;
}

.toast button {
  padding: 4px;
  cursor: pointer;
  background: transparent;
  color: #8fdef3;
  font-size: 0.69rem;
  font-weight: 800;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 1280px) {
  .topbar {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .unit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-grid:has(.movement-panel[open]) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 1060px) {
  .topbar {
    grid-template-columns: 190px minmax(0, 1fr);
    padding-right: 12px;
  }

  .brand small {
    display: none;
  }

  .topbar-actions {
    gap: 4px;
  }

  .topbar-actions .button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.8rem;
  }

  .topbar-actions .beta-badge {
    display: none;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .dashboard-grid:has(.movement-panel[open]) {
    grid-template-columns: 1fr;
  }

  .movement-panel[open] {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: min(360px, calc(100% - 28px));
    max-height: 100%;
    overflow: auto;
    box-shadow: var(--shadow-lg);
  }

  .movement-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .unit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-heading {
    align-items: start;
    flex-direction: column;
  }

  .date-controls {
    align-self: stretch;
  }
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  :root {
    --topbar-height: 64px;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 0 12px;
  }

  .mobile-menu-button {
    display: grid;
  }

  .brand {
    display: none;
  }

  .topbar-actions .button:not(.button-primary) {
    display: none;
  }

  .topbar-actions .button-primary {
    min-width: 40px;
    padding: 0 10px;
  }

  .topbar-actions .button-primary .button-icon {
    font-size: 1rem;
  }

  .topbar-actions .button-primary .button-label {
    display: none;
  }

  .avatar-button {
    display: none;
  }

  .workspace {
    display: block;
  }

  .sidebar {
    z-index: 90;
    top: 0;
    width: min(290px, 88vw);
    transform: translateX(-105%);
    box-shadow: var(--shadow-lg);
    transition: transform 200ms ease;
  }

  .sidebar-resize-handle {
    display: none;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-scrim {
    z-index: 85;
    visibility: visible;
    opacity: 1;
  }

  .main-content {
    padding: 23px 14px 55px;
  }

  .summary-grid {
    gap: 9px;
  }

  .summary-card {
    min-height: 114px;
    padding: 14px;
  }

  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-left {
    width: 100%;
    overflow-x: auto;
  }

  .toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .map-legend {
    display: none;
  }

  .map-marker-label {
    display: none;
  }

  .map-marker-status {
    width: 29px;
    height: 29px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .section-heading p {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .date-controls {
    flex-wrap: wrap;
  }

  .date-display {
    flex: 1;
    min-width: 140px;
  }

  .date-controls .button-small {
    order: 5;
  }

  .date-controls .segmented-control {
    order: 6;
    margin-left: auto;
  }

  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .summary-card strong {
    font-size: 1.7rem;
  }

  .unit-grid {
    grid-template-columns: 1fr;
  }

  .movement-list {
    grid-template-columns: 1fr;
  }

  .map-caption {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-source {
    display: none;
  }

  .bed-grid,
  .form-grid-two {
    grid-template-columns: 1fr;
  }

  .room-editor-row {
    grid-template-columns: minmax(0, 1fr) 90px 36px;
  }

  .room-meta-grid {
    grid-template-columns: 1fr;
  }

  .room-editor-card-head {
    align-items: start;
  }

  .bed-editor-row {
    grid-template-columns: minmax(0, 1fr) 85px 36px;
  }

  .modal-body {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* Emerald Bay quartermaster ledger theme */
:root {
  --navy-950: #26170f;
  --navy-900: #352118;
  --navy-800: #4d3121;
  --navy-700: #684a30;
  --emerald-700: #35613f;
  --emerald-600: #477a4f;
  --emerald-500: #5a8b59;
  --emerald-100: #dbe5bd;
  --emerald-50: #edf0d5;
  --ocean-600: #2d6870;
  --ocean-500: #3e7e82;
  --ocean-100: #d5e4d9;
  --sand-50: #fbefcf;
  --sand-100: #efd7a0;
  --amber-500: #bd7a25;
  --amber-100: #f3dda8;
  --coral-600: #a44335;
  --coral-100: #efd0b8;
  --ink-900: #352218;
  --ink-700: #5e4632;
  --ink-500: #80684f;
  --ink-300: #b89a6b;
  --line: #b98f55;
  --surface: #f7e3b4;
  --background: #d0aa69;
  --shadow-sm: 0 2px 2px rgba(55, 33, 18, 0.16), 0 5px 14px rgba(55, 33, 18, 0.09);
  --shadow-md: 0 16px 38px rgba(49, 28, 15, 0.24);
  --shadow-lg: 0 27px 72px rgba(35, 20, 12, 0.38);
}

html {
  background: #bb8c4f;
  color: var(--ink-900);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 18% 13%, rgba(255, 244, 205, 0.38), transparent 24rem),
    radial-gradient(circle at 82% 72%, rgba(101, 62, 30, 0.15), transparent 32rem),
    repeating-linear-gradient(7deg, rgba(83, 49, 24, 0.025) 0 1px, transparent 1px 7px),
    #d4ae6f;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 0.27;
  background:
    radial-gradient(circle at 20% 35%, rgba(82, 46, 19, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 24%, rgba(255, 249, 221, 0.45) 0 1px, transparent 2px);
  background-size: 47px 39px, 61px 53px;
  content: "";
  pointer-events: none;
}

.app-shell {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
.brand strong,
.modal-header h2 {
  font-family: "Cloister Display", "Cinzel Decorative", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.008em;
}

.button,
.nav-item,
.map-marker-label,
.unit-card-title,
.tag,
.week-tag,
.status-pill,
.unit-status-badge {
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow,
.nav-label {
  font-family: "Cloister Pro", "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

h1 {
  color: #3f2718;
  text-shadow: 0 1px rgba(255, 246, 214, 0.7);
}

.topbar {
  border-bottom: 4px solid #9b6a35;
  background:
    linear-gradient(rgba(40, 23, 14, 0.9), rgba(40, 23, 14, 0.96)),
    repeating-linear-gradient(90deg, #4d2e1c 0 26px, #3d2518 26px 29px);
  box-shadow: 0 5px 16px rgba(42, 23, 12, 0.3);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: repeating-linear-gradient(
    45deg,
    #d1a154 0 4px,
    #76502b 4px 8px
  );
  content: "";
  pointer-events: none;
}

.brand-mark {
  display: grid;
  overflow: visible;
  place-items: center;
  border: 2px solid #d8aa58;
  outline: 1px solid rgba(255, 231, 175, 0.35);
  background: #3b2619;
  color: #e6bd6a;
  box-shadow: inset 0 0 0 3px #2a1911;
}

.brand-mark::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  text-align: center;
  content: "✦";
}

.brand-island,
.brand-wave {
  display: none;
}

.brand strong {
  color: #f4d99d;
  font-size: 1.12rem;
  letter-spacing: 0.025em;
}

.brand small {
  max-width: 165px;
  color: #cdae74;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.055em;
  line-height: 1.05;
}

.button,
.icon-button,
.avatar-button,
.filter-chip,
.status-filter,
.nav-item {
  border-radius: 6px;
}

.button-primary {
  border-color: #274d37;
  background: linear-gradient(#527d50, #3e6542);
  box-shadow: 0 4px 0 #29462f, 0 7px 13px rgba(48, 30, 16, 0.18);
  color: #fff8df;
}

.button-primary:hover {
  background: linear-gradient(#638e5e, #47744a);
}

.button-secondary,
.button-ghost,
.button-light {
  border-color: #aa7e43;
  background:
    linear-gradient(rgba(255, 248, 220, 0.72), rgba(231, 201, 139, 0.74)),
    #efd9a5;
  color: #57391f;
}

.topbar .button-ghost,
.topbar .button-secondary,
.topbar .icon-button,
.avatar-button {
  border-color: #8f6437;
  background: rgba(246, 218, 159, 0.08);
  color: #efd6a0;
}

.avatar-button {
  border-radius: 50%;
  background: #5a3923;
  box-shadow: inset 0 0 0 2px #2b1a12;
}

.workspace {
  background: transparent;
}

.sidebar {
  border-right: 4px double #8f6335;
  background: var(--eba-sidebar-background);
  box-shadow: 4px 0 13px rgba(67, 38, 17, 0.13);
}

.nav-label {
  color: #7b5732;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.nav-item {
  color: #63472e;
}

.nav-item:hover {
  background: rgba(255, 246, 215, 0.45);
}

.nav-item.is-active {
  border: 1px solid color-mix(in srgb, var(--genre-color, #77522e) 48%, #c9a76a);
  background:
    linear-gradient(90deg, var(--genre-soft, #ead6a9), rgba(255, 243, 207, 0.48));
  color: var(--genre-color, #4f3420);
  box-shadow: inset 3px 0 0 var(--genre-color, #6c4829);
}

.nav-count,
.status-filter strong {
  border: 1px solid rgba(96, 58, 28, 0.18);
  background: rgba(255, 241, 204, 0.48);
  color: #6b4e35;
}

.sidebar-divider {
  height: 4px;
  background: repeating-linear-gradient(45deg, #8f6738 0 3px, #d4ae69 3px 6px);
}

.sidebar-setup-card {
  border-color: #9e743e;
  background:
    linear-gradient(rgba(255, 239, 196, 0.72), rgba(224, 188, 115, 0.66)),
    #edd29a;
  box-shadow: inset 0 0 0 2px rgba(91, 55, 29, 0.08);
}

.sidebar-footer {
  border-top-color: #a47a43;
  background: rgba(224, 190, 125, 0.88);
}

.main-content {
  background: transparent;
}

.breadcrumb,
.page-subtitle,
.summary-label,
.section-heading p {
  color: #72583d;
}

.eyebrow {
  color: #6e4b28;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 700;
}

.summary-card,
.toolbar,
.panel,
.unit-card,
.drawer-status-card,
.room-card,
.room-editor-card,
.person-row,
.settings-section {
  border-color: #b08349;
  background:
    linear-gradient(135deg, rgba(255, 246, 213, 0.84), rgba(231, 198, 133, 0.68)),
    #f2dba5;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 222, 0.5),
    var(--shadow-sm);
}

.summary-card::after {
  color: rgba(83, 49, 25, 0.16);
  content: "✦";
}

.summary-primary {
  border-color: #6c7e4b;
  background:
    linear-gradient(135deg, rgba(226, 232, 185, 0.92), rgba(199, 210, 153, 0.75)),
    #dbe3bd;
}

.toolbar {
  border-style: double;
  border-width: 3px;
}

.filter-chip.is-active {
  border-color: #76502d;
  background: #5e4028;
  color: #f6dfaa;
}

.panel {
  overflow: hidden;
  border-width: 2px;
  border-radius: 9px;
}

.panel-heading,
.movement-summary {
  border-bottom-color: #b08349;
  background:
    linear-gradient(rgba(250, 232, 189, 0.96), rgba(231, 197, 130, 0.92)),
    #efd49c;
}

.map-panel {
  position: relative;
  border: 7px solid #3d281b;
  outline: 2px solid #9c6a36;
  background: #332117;
  box-shadow: 0 13px 28px rgba(54, 31, 16, 0.28);
}

.map-panel .panel-heading,
.map-panel .map-caption {
  background:
    linear-gradient(rgba(245, 224, 174, 0.97), rgba(227, 190, 118, 0.94)),
    #efd29a;
}

.map-viewport {
  background: #3d281b;
}

.map-viewport::after {
  box-shadow:
    inset 0 0 0 3px rgba(43, 25, 15, 0.72),
    inset 0 0 22px rgba(38, 21, 12, 0.28);
}

.map-marker-label {
  border-color: #7d5b37;
  background:
    linear-gradient(rgba(255, 244, 210, 0.98), rgba(234, 203, 143, 0.97)),
    #f0d8a5;
  color: #38261a;
  box-shadow: 0 4px 10px rgba(43, 24, 12, 0.3);
}

.map-group-marker .map-marker-label {
  background:
    linear-gradient(rgba(255, 243, 207, 0.97), rgba(225, 190, 121, 0.95)),
    #eed39b;
}

.map-reset-button {
  border-color: #75512e;
  border-radius: 5px;
  background: #f0d79f;
  color: #4b301e;
}

.movement-panel {
  border-style: double;
  border-width: 3px;
}

.movement-summary-meta strong {
  border: 1px solid #a87d45;
  background: #ead09a;
  color: #5f4228;
}

.movement-item {
  border-bottom-color: rgba(132, 94, 48, 0.28);
}

.unit-card {
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--genre-soft, rgba(239, 214, 162, 0.8)), rgba(255, 240, 201, 0.72) 46%),
    #efd49c;
}

.unit-card:hover {
  border-color: var(--genre-color, #76502d);
  box-shadow: 0 10px 24px rgba(65, 37, 18, 0.2);
}

.unit-card::before {
  height: 5px;
}

.tag,
.week-tag {
  border: 1px solid rgba(115, 78, 39, 0.24);
  background: rgba(255, 240, 199, 0.76);
  color: #67462a;
}

.unit-drawer,
.modal {
  background: var(--eba-parchment-panel-background);
}

.drawer-header,
.modal-header,
.modal-footer {
  border-color: #9e703b;
  background: var(--eba-parchment-chrome-background);
}

.drawer-header {
  border-bottom-color: var(--genre-color, #8f6335);
}

.modal {
  border: 5px double #694524;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.modal::backdrop {
  background: var(--eba-modal-backdrop-background);
  backdrop-filter: blur(2px);
}

.field input,
.field select,
.field textarea,
select,
input,
textarea {
  border-color: #ad824a;
  border-radius: 5px;
  background: rgba(255, 241, 204, 0.88);
  color: #40291a;
  box-shadow: inset 0 1px 2px rgba(82, 48, 23, 0.08);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #6d5134;
  background: #fff0c4;
  box-shadow: 0 0 0 3px rgba(109, 81, 52, 0.14);
}

.choice-chip span,
.fixed-bed-capacity {
  border-color: #ad824a;
  background: #ead09a;
  color: #65462d;
}

.choice-chip input:checked + span {
  border-color: #4f7651;
  background: #d3dfb4;
  color: #345c3c;
}

.tag-choice-group {
  padding: 10px 11px;
  border: 1px solid rgba(157, 113, 60, 0.58);
  border-radius: 6px;
  background: rgba(255, 239, 196, 0.28);
}

.tag-choice-group legend {
  margin: 0;
  padding: 0 2px;
}

.tag-choice-group legend + .choice-chip-grid {
  margin-top: 7px;
}

.drawer-bed-panel,
.assignment-bed-details {
  border-color: #9d713c;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 240, 199, 0.68), rgba(229, 193, 124, 0.54)),
    #ecd09a;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 222, 0.34);
}

.drawer-bed-panel summary,
.assignment-bed-details summary {
  background: rgba(231, 197, 130, 0.34);
}

.schedule-table th {
  background: #d7b372;
  color: #49301e;
}

.schedule-table td {
  border-bottom-color: rgba(118, 78, 38, 0.24);
}

.tent-capacity-editor,
.import-drop-zone,
.import-file-bar,
.import-preview-wrap {
  border-color: #9d713c;
  background:
    linear-gradient(rgba(255, 240, 199, 0.75), rgba(229, 193, 124, 0.65)),
    #ecd09a;
}

.campsite-capacity-grid > span {
  border-color: #a77a41;
  background: #ead09a;
}

.build-stamp {
  position: fixed;
  z-index: 44;
  right: 13px;
  bottom: 7px;
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(89, 55, 28, 0.42);
  border-radius: 4px;
  background: rgba(238, 209, 153, 0.88);
  box-shadow: 0 2px 7px rgba(56, 32, 16, 0.12);
  color: #65472d;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.6875rem;
  pointer-events: none;
}

.build-stamp span + span::before {
  margin-right: 8px;
  content: "•";
}

.toast-region {
  bottom: 38px;
}

.toast {
  border-color: #9a6c38;
  background: #3c271a;
  color: #f3dcaa;
}

#map-markers {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

#map-markers .map-marker {
  pointer-events: auto;
}

.map-marker.label-left {
  flex-direction: row-reverse;
}

.map-marker.label-left .map-marker-label {
  border-right: 4px solid var(--genre-color, #355f78);
  border-left-width: 1px;
  text-align: right;
}

.map-marker.is-compact.label-left .map-marker-label {
  right: calc(100% + 7px);
  left: auto;
  transform: translate(5px, -50%);
}

.map-marker.is-compact.label-left:hover .map-marker-label,
.map-marker.is-compact.label-left:focus-visible .map-marker-label {
  transform: translate(0, -50%);
}

.unit-facility-note {
  margin: -1px 0 15px;
  padding: 9px 11px;
  border: 1px solid rgba(130, 88, 42, 0.25);
  border-radius: 6px;
  background: rgba(255, 241, 204, 0.42);
  color: var(--ink-700);
  font-size: 0.79rem;
}

.temporary-bed-card {
  cursor: default;
  text-align: left;
}

.temporary-bed-card::before {
  content: "✦";
}

.temporary-space-notice {
  padding: 12px 14px;
  border: 1px solid #8d6a3c;
  border-radius: 7px;
  background: rgba(224, 206, 146, 0.62);
}

.temporary-space-notice strong,
.temporary-space-notice p {
  display: block;
}

.temporary-space-notice p {
  margin: 3px 0 0;
  color: var(--ink-700);
  font-size: 0.82rem;
}

.mooring-date-match-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(29, 126, 92, 0.46);
  border-radius: 12px;
  background: rgba(224, 244, 235, 0.82);
  color: #173f32;
}

.mooring-date-match-notice[hidden] {
  display: none;
}

.mooring-date-match-notice > span {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(17, 24, 39, 0.72);
  border-radius: 9px;
  background: #f9f2dd;
}

.mooring-date-match-notice strong,
.mooring-date-match-notice p {
  display: block;
  margin: 0;
}

.mooring-date-match-notice p {
  margin-top: 0.15rem;
  color: #426458;
  font-size: 0.86rem;
  line-height: 1.35;
}

#assignment-start:read-only,
#assignment-end:read-only {
  opacity: 1;
  color: var(--ink-900);
  -webkit-text-fill-color: var(--ink-900);
  cursor: not-allowed;
}

.overwrite-stay-modal {
  width: min(620px, calc(100vw - 24px));
}

.overwrite-stay-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.overwrite-stay-card {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(82, 60, 34, 0.34);
  border-radius: 10px;
  background: rgba(255, 248, 226, 0.72);
}

.overwrite-stay-card:last-child {
  border-color: rgba(173, 55, 48, 0.52);
  background: rgba(255, 232, 225, 0.76);
}

.overwrite-stay-card > span,
.overwrite-stay-card strong,
.overwrite-stay-card p,
.overwrite-stay-card small {
  display: block;
}

.overwrite-stay-card > span {
  margin-bottom: 0.3rem;
  color: var(--ink-500);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overwrite-stay-card p {
  margin: 0.35rem 0;
  color: var(--ink-700);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.overwrite-stay-card small {
  color: var(--ink-700);
  font-weight: 700;
}

.overwrite-stay-warning {
  padding: 0.8rem 0.9rem;
  border: 2px solid #b83a32;
  border-radius: 10px;
  background: rgba(255, 224, 218, 0.9);
  color: #6f1f1a;
}

.overwrite-stay-warning[hidden] {
  display: none;
}

.overwrite-stay-warning p {
  margin: 0.2rem 0 0;
}

@media (max-width: 620px) {
  .overwrite-stay-comparison {
    grid-template-columns: 1fr;
  }

  .overwrite-stay-modal .modal-footer .button {
    min-height: 48px;
  }

  .ships-manifest li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .ships-manifest li small {
    text-align: left;
  }
}

.locked-unit-summary {
  padding: 14px 16px;
  border: 2px solid #986d3b;
  border-radius: 7px;
  background: rgba(255, 240, 197, 0.48);
}

.locked-unit-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink-900);
  font-family: "Cloister Display", "Cinzel Decorative", Georgia, serif;
  font-size: 1.2rem;
}

.locked-unit-summary p {
  margin: 5px 0 0;
  color: var(--ink-700);
  font-size: 0.8rem;
}

.locked-room-card .room-editor-card-head {
  align-items: center;
}

.locked-room-card h4 {
  margin: 3px 0 0;
  font-size: 1rem;
}

.inventory-lock {
  padding: 4px 7px;
  border: 1px solid rgba(113, 77, 39, 0.28);
  border-radius: 99px;
  background: rgba(255, 240, 199, 0.7);
  color: var(--ink-700);
  font-size: 0.6875rem;
  font-weight: 700;
}

.sleeping-space-row {
  display: flex;
  min-height: 55px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(118, 78, 38, 0.2);
}

.sleeping-space-row:last-child {
  border-bottom: 0;
}

.sleeping-space-row > span:first-child {
  min-width: 0;
}

.sleeping-space-row strong,
.sleeping-space-row small {
  display: block;
}

.sleeping-space-row small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.72rem;
}

.temporary-space-button {
  margin-top: 8px;
}

.custom-tag-adder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(125, 83, 40, 0.3);
}

.custom-tag-adder .field {
  gap: 3px;
}

.custom-tag-adder .field > span {
  font-size: 0.6875rem;
}

.person-group-line {
  display: block;
  margin-top: 2px;
  color: var(--ink-700);
  font-size: 0.76rem;
}

.quartermaster-note-empty {
  min-height: 66px;
  margin-top: 10px;
  border-top: 1px solid rgba(103, 68, 34, 0.2);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 21px,
    rgba(103, 68, 34, 0.13) 21px 22px
  );
}

.sidebar-footer {
  justify-content: flex-start;
}

.person-combobox-field {
  position: relative;
}

.person-combobox {
  position: relative;
}

.person-combobox-options {
  position: absolute;
  z-index: 25;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 230px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #9f7442;
  border-radius: 10px;
  background: #fff8e5;
  box-shadow: 0 14px 34px rgba(65, 39, 22, 0.24);
}

.person-combobox-options[hidden] {
  display: none;
}

.person-combobox-option {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-900);
  text-align: left;
}

.person-combobox-option:hover,
.person-combobox-option:focus,
.person-combobox-option[aria-selected="true"] {
  outline: none;
  background: rgba(191, 147, 78, 0.2);
}

.person-combobox-option strong,
.person-combobox-option small {
  display: block;
}

.person-combobox-option strong {
  font-size: 0.78rem;
}

.person-combobox-option small,
.person-combobox-empty {
  color: var(--ink-500);
  font-size: 0.6875rem;
}

.person-combobox-empty {
  padding: 14px 10px;
}

.assignment-tag-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: -4px 0 17px;
  padding: 12px;
  border: 2px solid #8d4f00;
  border-radius: 10px;
  background: #fff2cf;
  color: #63400f;
}

.assignment-tag-warning[hidden] {
  display: none;
}

.assignment-tag-warning strong {
  display: block;
  font-size: 0.78rem;
}

.assignment-tag-warning ul {
  margin: 4px 0 0 17px;
  padding: 0;
  font-size: 0.69rem;
  line-height: 1.45;
}

.hazard-symbol {
  color: #21160a;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  filter: drop-shadow(0 1px 0 #fff1b2);
}

.tag-mismatch-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 1px 7px 1px 5px;
  border: 2px solid #6f3900;
  border-radius: 5px;
  background: #ffc928;
  color: #2f1b00;
  font-family: Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

.tag-mismatch-icon {
  font-size: 1rem;
  line-height: 1;
}

.tag-mismatch-text {
  white-space: nowrap;
}

.map-hazard-symbol {
  display: block;
  color: #221500;
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  filter: drop-shadow(0 1px 0 #fff2ae);
}

.stay-person .stay-tag-warning,
.schedule-tag-warning,
.person-mismatch-count {
  color: #8a5100;
}

.person-family-line,
.stay-family-override {
  display: block;
  margin-top: 4px;
  color: #35613f;
  font-size: 0.6875rem;
  font-weight: 700;
}

.stay-person .stay-tag-warning {
  margin-top: 5px;
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
}

.schedule-tag-warning {
  display: block;
  max-width: 260px;
  margin-top: 4px;
  white-space: normal;
}

.person-mismatch-count {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
}

.person-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-card.has-tag-mismatch {
  box-shadow:
    inset 0 0 0 2px rgba(183, 119, 32, 0.48),
    var(--shadow-sm);
}

.map-marker.has-tag-mismatch .map-marker-status {
  border: 3px solid #5e3000;
  background: #ffc928;
  color: #241500;
  box-shadow: 0 0 0 3px rgba(255, 245, 194, 0.86), 0 4px 12px rgba(73, 38, 0, 0.35);
}

/* Compact, category-led unit cards beneath the map. */
.unit-grid {
  gap: 9px;
}

.unit-card {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  padding: 0 12px 13px;
  border-radius: 8px;
}

.unit-card::before {
  display: none;
}

.unit-card-titlebar {
  display: grid;
  min-height: 70px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 -12px 10px;
  padding: 10px 11px;
  align-items: start;
  border-bottom: 2px solid rgba(47, 27, 11, 0.34);
  background: var(--genre-color, #675345);
  color: #fffaf0;
}

.unit-card-titlebar > span:first-child {
  min-width: 0;
}

.unit-card-titlebar .unit-card-title {
  margin: 0 0 1px;
  color: #fffaf0;
  font-size: 0.86rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 1px rgba(31, 17, 8, 0.45);
  white-space: normal;
}

.unit-card-titlebar .unit-genre {
  display: block;
  margin-top: 4px;
  color: rgba(255, 250, 235, 0.82);
  font-size: 0.6875rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.unit-card-titlebar .unit-status-badge {
  min-height: 21px;
  padding: 0 7px;
  border: 1px solid rgba(41, 25, 12, 0.35);
  box-shadow: 0 1px 2px rgba(38, 21, 9, 0.2);
  font-size: 0.6875rem;
}

.unit-card-title .tag-mismatch-badge {
  min-width: 23px;
  min-height: 22px;
  padding: 0 3px;
  justify-content: center;
}

.unit-card-title .tag-mismatch-text {
  display: none;
}

.capacity-line {
  margin-top: auto;
  padding-top: 5px;
}

.capacity-line strong {
  font-size: 1.08rem;
}

.capacity-line span {
  font-size: 0.6875rem;
}

.placeholder-note {
  margin-top: 5px;
  font-size: 0.6875rem;
}

.mini-action.is-warning {
  border-color: #754000;
  background: #ffc928;
  color: #2c1900;
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.mini-action.fit-tags-action {
  width: auto;
  min-width: 54px;
  padding: 0 7px;
  border-color: #477a4f;
  background: #e7edcf;
  color: #2f5a39;
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
}

.family-relationship-editor,
.mismatch-person-summary,
.mismatch-tag-editor,
.family-override-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #a97b41;
  border-radius: 10px;
  background: rgba(255, 246, 217, 0.74);
}

.family-relationship-editor > div:first-child,
.mismatch-person-summary > strong {
  display: grid;
  gap: 3px;
}

.family-relationship-editor small,
.mismatch-tag-editor p,
.family-override-panel p,
.mismatch-gate-warning p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 0.69rem;
  line-height: 1.45;
}

.family-relationship-editor em {
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
}

.family-relationship-editor[hidden],
.family-override-panel[hidden] {
  display: none;
}

.mismatch-modal-header {
  border-bottom-color: #8d4f00;
  background: linear-gradient(90deg, #ffc928, #ffe58b);
  color: #2c1900;
}

.mismatch-modal-header .eyebrow,
.mismatch-modal-header h2,
.mismatch-modal-header .icon-button {
  color: #2c1900;
}

.mismatch-gate-warning {
  margin: 0;
  background: #ffe18a;
}

.mismatch-person-summary .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mismatch-tag-editor h3 {
  margin: 2px 0 0;
}

.family-override-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-width: 2px;
  border-color: #477a4f;
  background: #e7edcf;
}

.mismatch-modal-footer {
  flex-wrap: wrap;
}

.tag-muted {
  opacity: 0.75;
}

.reset-password-field {
  max-width: 360px;
}

.settings-note {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--eba-light-blue) 60%, var(--eba-dark-blue));
  border-radius: 8px;
  background: color-mix(in srgb, var(--eba-cream) 84%, white);
}

.recovery-modal {
  border-color: #8d4f00;
}

.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.recovery-start-clean {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--coral-600) 60%, var(--eba-dark-blue));
  border-radius: 10px;
}

.recovery-start-clean h3,
.recovery-start-clean p {
  margin: 0;
}

.recovery-start-clean .field {
  max-width: 300px;
}

/* Official EBA palette and high-priority Cloister typography. */
.unit-card-titlebar {
  color: var(--genre-on, var(--eba-cream));
}

.unit-card-titlebar .unit-card-title,
.unit-card-titlebar .unit-genre {
  color: var(--genre-on, var(--eba-cream));
  text-shadow: none;
}

.unit-card-titlebar .unit-genre {
  opacity: 0.82;
}

.map-group-marker .map-marker-status {
  border-color: var(--eba-dark-blue);
  color: var(--genre-on, var(--eba-dark-blue));
}

.category-legend-item i {
  border: 1px solid color-mix(in srgb, var(--genre-color) 58%, var(--eba-dark-blue));
}

.drawer-tag-panel {
  display: grid;
  gap: 11px;
  margin-top: 13px;
  padding: 13px 14px 14px;
  border: 2px solid var(--genre-color, var(--eba-dark-blue));
  border-radius: 9px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--genre-soft) 82%, white), rgba(255, 246, 215, 0.72)),
    var(--eba-cream);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 3px 10px rgba(47, 27, 13, 0.1);
}

.drawer-tag-panel-heading {
  display: grid;
  gap: 1px;
}

.drawer-tag-panel-heading strong {
  color: var(--eba-dark-blue);
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.drawer-tag-panel .tag-row {
  min-height: 30px;
  gap: 7px;
}

.drawer-tag-panel .tag {
  min-height: 30px;
  padding: 2px 11px;
  border: 2px solid color-mix(in srgb, var(--genre-color) 55%, var(--eba-dark-blue));
  background: var(--genre-color, var(--eba-dark-blue));
  color: var(--genre-on, var(--eba-cream));
  box-shadow: 0 2px 4px rgba(43, 25, 12, 0.18);
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.drawer-tag-panel .tag-muted {
  border-color: #806b55;
  background: rgba(255, 248, 226, 0.82);
  color: #59432d;
}

/* Groups interface. */
.groups-modal-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.beta-badge {
  display: inline-grid;
  min-height: 22px;
  place-items: center;
  padding: 1px 8px 0;
  border: 1px solid var(--eba-dark-blue);
  border-radius: 99px;
  background: var(--eba-yellow);
  color: var(--eba-dark-blue);
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.groups-beta-body {
  display: grid;
  gap: 18px;
}

.groups-beta-intro {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 2px solid var(--eba-dark-blue);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--eba-cream), #fff9e8);
}

.groups-beta-intro h3 {
  margin: 2px 0 4px;
  color: var(--eba-dark-blue);
  font-size: 1.35rem;
}

.groups-beta-intro p,
.groups-beta-roadmap p,
.groups-beta-note {
  margin: 0;
  color: #60472f;
}

.groups-beta-compass {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 3px double var(--eba-dark-blue);
  border-radius: 50%;
  background: var(--eba-yellow);
  color: var(--eba-dark-blue);
  font-size: 1.7rem;
}

.groups-beta-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.groups-beta-types span {
  min-height: 34px;
  padding: 6px 13px;
  border: 2px solid var(--eba-dark-blue);
  border-radius: 99px;
  background: var(--eba-light-blue);
  color: var(--eba-dark-blue);
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.84rem;
  font-weight: 700;
}

.groups-beta-types span:nth-child(2),
.groups-beta-types span:nth-child(5) {
  background: var(--eba-yellow);
}

.groups-beta-types span:nth-child(3) {
  background: var(--eba-orange);
}

.groups-beta-types span:nth-child(4),
.groups-beta-types span:nth-child(6) {
  background: var(--eba-cream);
}

.groups-beta-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.groups-beta-roadmap article {
  padding: 14px;
  border: 1px solid #9f7442;
  border-top: 5px solid var(--eba-dark-blue);
  border-radius: 8px;
  background: rgba(255, 245, 213, 0.78);
}

.groups-beta-roadmap article:nth-child(2) {
  border-top-color: var(--eba-orange);
}

.groups-beta-roadmap article:nth-child(3) {
  border-top-color: var(--eba-light-blue);
}

.groups-beta-roadmap strong {
  display: block;
  margin-bottom: 5px;
  color: var(--eba-dark-blue);
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.9rem;
}

.groups-beta-note {
  padding: 11px 13px;
  border-left: 5px solid var(--eba-orange);
  background: rgba(244, 239, 217, 0.74);
  font-size: 0.76rem;
}

/* Chris “From Work” easter egg. */
.chris-from-work-name,
.chris-from-work-field,
.chris-from-work-option {
  color: #147a47 !important;
  font-weight: 900 !important;
}

.chris-from-work-name {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.chris-from-work-field {
  border-color: #147a47 !important;
  background: #e4f2df !important;
  -webkit-text-fill-color: #147a47;
  opacity: 1 !important;
}

.chris-name-lock-note {
  margin: -2px 0 12px;
  padding: 9px 11px;
  border: 1px solid #147a47;
  border-radius: 6px;
  background: #e4f2df;
  color: #14643e;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.chris-easter-egg[hidden] {
  display: none;
}

.chris-easter-egg {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, rgba(241, 239, 155, 0.42), transparent 46%);
  pointer-events: none;
}

.chris-easter-egg img {
  width: min(48vw, 480px);
  max-height: 72vh;
  object-fit: contain;
  opacity: 0;
  filter: blur(14px) saturate(0.72);
  transform: scale(0.12) rotate(-14deg);
  clip-path: circle(0% at 50% 50%);
  will-change: transform, opacity, filter, clip-path;
}

.chris-easter-egg.is-playing img {
  animation: chris-pirate-morph 3s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes chris-pirate-morph {
  0% {
    opacity: 0;
    filter: blur(14px) saturate(0.72);
    transform: scale(0.12) rotate(-14deg);
    clip-path: circle(0% at 50% 50%);
  }
  22% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1.06) rotate(1deg);
    clip-path: circle(72% at 50% 50%);
  }
  66% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1) rotate(0);
    clip-path: circle(72% at 50% 50%);
  }
  100% {
    opacity: 0;
    filter: blur(3px) saturate(1.08);
    transform: scale(1.26) rotate(4deg);
    clip-path: circle(76% at 50% 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chris-easter-egg.is-playing img {
    animation-name: chris-pirate-fade;
  }
}

@keyframes chris-pirate-fade {
  0%, 100% { opacity: 0; }
  18%, 72% { opacity: 1; }
}

/* v0.13 profile, Groups, and high-contrast icon polish. */
.nav-item {
  min-height: 51px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
}

.nav-item.is-active,
.nav-item.is-active .nav-count {
  color: var(--eba-dark-blue, #160e49);
}

.map-group-marker .map-marker-label,
.map-group-marker .map-marker-label strong,
.map-group-marker .map-marker-label small {
  color: #160e49 !important;
  opacity: 1;
}

.nav-icon,
.calendar-icon,
.movement-symbol,
.current-housing-icon {
  display: grid;
  place-items: center;
  border: 3px solid #111;
  background: var(--genre-soft, #f4efd9);
  box-shadow: 0 3px 0 #111, 0 5px 10px rgba(17, 17, 17, 0.28);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}

.nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 22px;
}

.calendar-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 23px;
}

.summary-icon {
  width: 54px;
  height: 54px;
  border: 3px solid #111;
  border-radius: 14px;
  box-shadow: 0 4px 0 #111, 0 7px 13px rgba(17, 17, 17, 0.3);
  font-size: 29px;
  line-height: 1;
}

.movement-symbol {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 23px;
}

.sidebar-setup-card .eyebrow {
  color: #160e49;
  font-weight: 900;
}

.room-editor-card-head,
.locked-room-card .room-editor-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: start;
}

.inventory-lock {
  max-width: 220px;
  padding: 6px 10px;
  border: 2px solid #76502b;
  border-radius: 7px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.profile-section {
  margin: 0 0 16px;
  padding: 15px;
  border: 2px solid #a97b41;
  border-radius: 10px;
  background: rgba(255, 246, 217, 0.66);
}

.profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.profile-section-heading h3 {
  margin: 3px 0 0;
  color: #160e49;
  font-size: 18px;
}

.profile-help,
.profile-count,
.profile-empty-inline {
  color: var(--ink-500);
  font-size: 12px;
}

.profile-empty {
  padding: 13px;
  border: 1px dashed #a97b41;
  border-radius: 7px;
  color: var(--ink-500);
  font-size: 12px;
  text-align: center;
}

.current-housing-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 11px;
  border: 1px solid rgba(22, 14, 73, 0.36);
  border-radius: 9px;
  background: #f4efd9;
}

.current-housing-card + .current-housing-card {
  margin-top: 8px;
}

.current-housing-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 25px;
}

.current-housing-card strong,
.current-housing-card small {
  display: block;
}

.current-housing-card strong {
  color: #160e49;
  font-size: 15px;
}

.current-housing-card small {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 12px;
}

.selected-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.selected-group-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 3px 5px 3px 11px;
  border: 2px solid #160e49;
  border-radius: 99px;
  background: #f1ef9b;
  color: #160e49;
  font-size: 12px;
  font-weight: 800;
}

.selected-group-chip button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #160e49;
  color: #f4efd9;
  font-size: 16px;
}

.family-relationship-editor {
  display: block;
  overflow: hidden;
  padding: 0;
}

.family-relationship-editor summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.family-relationship-editor summary::-webkit-details-marker {
  display: none;
}

.family-relationship-editor summary > span:first-child,
.family-relationship-editor summary strong,
.family-relationship-editor summary small {
  display: block;
}

.family-relationship-editor summary small {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 12px;
}

.family-relationship-editor > .form-grid {
  padding: 13px 14px 0;
  border-top: 1px solid #a97b41;
}

.details-chevron {
  color: #160e49;
  font-size: 20px;
  transition: transform 160ms ease;
}

.family-relationship-editor[open] .details-chevron {
  transform: rotate(180deg);
}

.person-profile-stays,
.group-stays-list,
.group-members-list,
.groups-list {
  display: grid;
  gap: 9px;
}

.profile-stay-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #b48a52;
  border-radius: 9px;
  background: rgba(255, 252, 239, 0.82);
}

.profile-stay-card.is-current {
  border: 3px solid #147a47;
  background: #e4f2df;
}

.profile-stay-status,
.group-stay-status {
  color: #160e49;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.group-stay-status.is-current {
  color: #147a47;
}

.profile-stay-main strong,
.profile-stay-main span {
  display: block;
}

.profile-stay-main strong {
  color: #160e49;
  font-size: 14px;
}

.profile-stay-main span {
  margin-top: 2px;
  color: var(--ink-700);
  font-size: 12px;
}

.profile-stay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.extend-stay-inline {
  display: flex;
  grid-column: 1 / -1;
  align-items: end;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px dashed #a97b41;
}

.extend-stay-inline[hidden] {
  display: none;
}

.extend-stay-inline .field {
  width: min(260px, 100%);
  margin: 0;
}

.stay-person-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  overflow: visible !important;
  white-space: normal !important;
}

.stay-person-tags .tag {
  color: #160e49;
}

.mini-action.profile-action {
  width: auto;
  min-width: 58px;
  padding: 0 8px;
  border-color: #160e49;
  background: #f4efd9;
  color: #160e49;
  font-size: 11px;
  font-weight: 900;
}

.mismatch-person-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.groups-directory-body,
.group-profile-body {
  display: grid;
  gap: 14px;
}

.groups-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.groups-summary > span {
  padding: 10px 12px;
  border: 2px solid #160e49;
  border-radius: 8px;
  background: #f1ef9b;
  color: #160e49;
  font-size: 12px;
}

.groups-summary strong {
  margin-right: 4px;
  font-size: 20px;
}

.group-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 2px solid #a97b41;
  border-radius: 10px;
  background: rgba(255, 246, 217, 0.72);
}

.group-type-badge {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 5px 8px;
  border: 2px solid #160e49;
  border-radius: 7px;
  background: #778a9e;
  color: #160e49;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.group-row-main strong,
.group-row-main > span {
  display: block;
}

.group-row-main strong {
  color: #160e49;
  font-size: 16px;
}

.group-row-main > span {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 12px;
}

.group-row-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}

.group-affiliations {
  display: grid;
  gap: 8px;
}

.group-affiliation-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr) 36px;
  align-items: end;
  gap: 9px;
  padding: 10px;
  border: 1px solid #b48a52;
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.72);
}

.group-affiliation-row .field {
  margin: 0;
}

.profile-combobox-row {
  max-width: 600px;
}

.group-member-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #b48a52;
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.72);
}

.group-member-row strong,
.group-member-row small {
  display: block;
}

.group-member-row strong {
  color: #160e49;
  font-size: 13px;
}

.group-member-row small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 11px;
}

.group-stay-editor {
  margin-bottom: 11px;
  padding: 13px;
  border: 2px dashed #a97b41;
  border-radius: 9px;
  background: rgba(244, 239, 217, 0.78);
}

.group-stay-editor[hidden],
.group-campsite-counts[hidden] {
  display: none;
}

.archive-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 700;
}

.archive-toggle input {
  width: 18px;
  height: 18px;
}

@media (max-width: 1060px) {
  .movement-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .brand small {
    max-width: none;
  }

  .legend-stack {
    display: none;
  }

  .build-stamp {
    right: 8px;
    left: 8px;
    justify-content: center;
  }

  .form-grid-three {
    grid-template-columns: 1fr;
  }

  .groups-beta-roadmap {
    grid-template-columns: 1fr;
  }

  .groups-summary,
  .group-row,
  .profile-stay-card,
  .group-affiliation-row {
    grid-template-columns: 1fr;
  }

  .group-row .person-row-actions,
  .profile-stay-actions {
    justify-content: flex-start;
  }

  .group-affiliation-row .mini-action {
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .campsite-capacity-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tent-capacity-editor {
    grid-template-columns: 1fr;
  }

  .directory-toolbar,
  .import-file-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .build-stamp {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .build-stamp span + span::before {
    display: none;
  }

  .person-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .person-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .groups-beta-intro {
    grid-template-columns: 1fr;
  }

  .groups-beta-compass {
    width: 48px;
    height: 48px;
  }
}

/* Record lifecycle, exports, and corrected outer-map presentation. */
#page-subtitle > span {
  display: block;
}

.sidebar-setup-card {
  min-height: 250px;
}

.quartermaster-note-empty {
  min-height: 188px;
}

.nav-icon,
.calendar-icon,
.movement-symbol,
.current-housing-icon,
.summary-icon {
  border: 2px solid #111;
  background: rgba(244, 239, 217, 0.96);
  box-shadow: none;
}

.nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 25px;
}

.nav-item {
  min-height: 55px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 21px;
}

.calendar-icon,
.movement-symbol,
.current-housing-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 21px;
}

.summary-icon-open,
.summary-icon-occupied,
.summary-icon-arrival,
.summary-icon-departure {
  background: rgba(244, 239, 217, 0.96);
  color: #160e49;
}

html {
  background-color: var(--eba-page-canvas);
}

body {
  background:
    linear-gradient(rgba(212, 174, 111, 0.2), rgba(212, 174, 111, 0.2)),
    url("assets/map-parchment.png") center top / cover fixed no-repeat,
    var(--eba-page-canvas);
}

.map-viewport {
  background: #3d281b;
}

.map-viewport > img {
  opacity: 1;
  mix-blend-mode: normal;
}

.selected-group-chip em {
  margin-left: 5px;
  color: #7b5732;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.add-stay-after-save {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  cursor: pointer;
}

.add-stay-after-save[hidden] {
  display: none;
}

.add-stay-after-save input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.add-stay-after-save strong,
.add-stay-after-save small {
  display: block;
}

.add-stay-after-save strong {
  color: #160e49;
  font-size: 14px;
}

.add-stay-after-save small {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 12px;
}

.export-format-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.export-format-choice {
  display: grid;
  min-height: 132px;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 2px solid #8f6335;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255, 246, 217, 0.82);
  color: var(--ink-700);
  text-align: left;
}

.export-format-choice:hover,
.export-format-choice:focus-visible {
  border-color: #160e49;
  outline: 2px solid rgba(22, 14, 73, 0.2);
}

.export-format-choice strong {
  color: #160e49;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
  font-size: 23px;
}

.export-format-choice span {
  font-size: 13px;
  line-height: 1.4;
}

.modal-footer > .button[hidden],
.groups-summary[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .export-format-options {
    grid-template-columns: 1fr;
  }

  .sidebar-setup-card {
    min-height: 210px;
  }
}

/* v0.17 focused-map fit and category-branded unit labels. */
.map-marker-label {
  min-width: 150px;
  max-width: 220px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--genre-color, #355f78);
  border-radius: 8px;
  background: #ededed;
  color: #303030;
}

.map-marker.label-left .map-marker-label {
  border: 2px solid var(--genre-color, #355f78);
  text-align: left;
}

.map-marker-label strong,
.map-marker-label small {
  display: block;
  overflow: visible;
  text-overflow: clip;
}

.map-marker-label strong {
  padding: 7px 9px;
  background: var(--genre-color, #355f78);
  color: var(--genre-on, #fffaf0);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: break-word;
  white-space: normal;
}

.map-marker-label small {
  margin: 0;
  padding: 5px 9px 6px;
  background: #ededed;
  color: #505050;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.map-group-marker .map-marker-label {
  background: #ededed;
}

.map-group-marker .map-marker-label strong {
  color: var(--genre-on, #fffaf0) !important;
}

.map-group-marker .map-marker-label small {
  color: #505050 !important;
  white-space: normal;
}

.map-marker.is-compact.label-below .map-marker-label {
  top: calc(100% + 7px);
  left: 50%;
  right: auto;
  transform: translate(-50%, -5px);
}

.map-marker.is-compact.label-below:hover .map-marker-label,
.map-marker.is-compact.label-below:focus-visible .map-marker-label {
  transform: translate(-50%, 0);
}

.map-marker.is-compact.label-above .map-marker-label {
  top: auto;
  bottom: calc(100% + 7px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 5px);
}

.map-marker.is-compact.label-above:hover .map-marker-label,
.map-marker.is-compact.label-above:focus-visible .map-marker-label {
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .map-marker.is-compact:hover .map-marker-label,
  .map-marker.is-compact:focus-visible .map-marker-label {
    display: grid;
  }
}

@media print {
  .topbar,
  .sidebar,
  .sidebar-resize-handle,
  .toolbar,
  .movement-panel,
  .map-reset-button,
  .button,
  .icon-button {
    display: none !important;
  }

  .workspace {
    display: block;
    padding: 0;
  }

  .main-content {
    padding: 0;
  }

  .summary-grid,
  .dashboard-grid,
  .unit-grid {
    break-inside: avoid;
  }
}

/* v0.19 Clerk controls, Ship's Log, Sync Beta, and admin map placement. */
.beta-badge {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.sidebar-resize-handle {
  right: -6px;
  width: 12px;
  height: 50px;
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(22, 14, 73, 0.14);
}

.sidebar-resize-handle::after {
  left: calc(100% + 7px);
}

.sidebar-resize-handle > span,
.sidebar-resize-handle > span::before,
.sidebar-resize-handle > span::after {
  width: 1px;
  height: 14px;
}

.sidebar-resize-handle > span::before {
  left: -3px;
}

.sidebar-resize-handle > span::after {
  right: -3px;
}

.sidebar-scroll {
  scrollbar-color: rgba(87, 57, 31, 0.52) transparent;
  scrollbar-width: thin;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(87, 57, 31, 0.52);
}

.sidebar-setup-card {
  display: flex;
  flex-direction: column;
}

.quartermaster-note-empty {
  min-height: 138px;
  flex: 1 1 auto;
}

.ships-log-button {
  width: 100%;
  flex: 0 0 auto;
}

.page-controls-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.clerk-identity {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #160e49;
  font-size: 12px;
  font-weight: 700;
}

.clerk-email {
  color: #160e49;
  font-size: 12px;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.clerk-display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.clerk-display[hidden] {
  display: none;
}

.clerk-display strong {
  color: #147a47;
}

.map-layout-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-top: 1px solid #aa7e43;
  background: rgba(244, 239, 217, 0.96);
  color: #160e49;
}

.map-layout-controls[hidden] {
  display: none;
}

.map-layout-controls > div:first-child {
  display: grid;
  gap: 2px;
}

.map-layout-controls strong,
.map-layout-controls span {
  font-size: 12px;
}

.map-viewport.is-layout-editing {
  outline: 4px solid rgba(22, 14, 73, 0.78);
  outline-offset: -4px;
}

.map-viewport.is-layout-editing .map-marker[data-map-unit] {
  cursor: grab;
  touch-action: none;
}

.map-viewport.is-layout-editing .map-marker[data-map-unit]:active,
body.is-dragging-map-marker .map-marker[data-map-unit] {
  cursor: grabbing;
}

.map-viewport.is-layout-editing .map-marker[data-map-unit]:focus-visible {
  outline: 3px solid #160e49;
  outline-offset: 4px;
}

.map-board-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 12px 11px;
  border-top: 1px solid rgba(143, 99, 53, 0.45);
  background: rgba(244, 239, 217, 0.92);
}

.map-board-controls[hidden] {
  display: none;
}

.board-modal-body {
  padding: 16px;
  background: #f4efd9;
}

.clerk-board {
  position: relative;
  width: 100%;
  aspect-ratio: 863 / 235;
  overflow: hidden;
  border-radius: 18px;
  background: #c38b55;
  box-shadow: 0 8px 24px rgba(49, 28, 15, 0.28);
}

.clerk-board > img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
}

.clerk-board-writing {
  position: absolute;
  inset: 13% 11%;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  color: #382217;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.18;
  text-shadow: 0 1px rgba(255, 241, 199, 0.34);
}

.clerk-board-entry {
  min-width: min(300px, 37vw);
  padding: 3px 5px;
  white-space: nowrap;
}

.clerk-board-empty {
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  min-width: 0;
  color: rgba(56, 34, 23, 0.76);
  font-style: italic;
  text-align: center;
  white-space: normal;
}

.board-entry-preview {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px dashed #8f6335;
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.82);
  color: #382217;
  font-family: "Cloister Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
}

.sync-beta-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.sync-beta-panel p {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
}

.sync-beta-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid #160e49;
  border-radius: 50%;
  background: #f1ef9b;
  color: #160e49;
  font-size: 29px;
  font-weight: 900;
}

.ships-log-filters {
  display: grid;
  grid-template-columns: minmax(170px, 0.6fr) minmax(260px, 1.4fr) auto;
  align-items: end;
  gap: 10px;
}

.ships-log-summary {
  margin: 12px 0 8px;
  color: #160e49;
  font-size: 12px;
  font-weight: 800;
}

.ships-log-list {
  display: grid;
  max-height: min(56vh, 560px);
  gap: 7px;
  overflow-y: auto;
}

.ships-log-entry {
  display: grid;
  grid-template-columns: minmax(130px, 0.4fr) minmax(0, 1.6fr);
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(143, 99, 53, 0.38);
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.72);
}

.ships-log-entry time,
.ships-log-entry small,
.ships-log-entry strong,
.ships-log-entry span {
  display: block;
  font-size: 12px;
}

.ships-log-entry time,
.ships-log-entry small {
  color: #6d5944;
}

.ships-log-entry strong {
  color: #160e49;
  font-size: 13px;
}

.ships-log-entry span {
  margin-top: 3px;
  color: var(--ink-700);
  line-height: 1.4;
}

.ships-log-empty {
  padding: 28px 16px;
  border: 1px dashed #aa7e43;
  border-radius: 8px;
  color: #6d5944;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 1060px) {
  .page-controls-stack {
    width: 100%;
    justify-items: stretch;
  }

  .clerk-identity {
    justify-items: start;
  }

  .clerk-display {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .clerk-display,
  .map-layout-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .ships-log-filters,
  .ships-log-entry {
    grid-template-columns: 1fr;
  }

  .clerk-board {
    min-height: 250px;
    aspect-ratio: auto;
  }

  .clerk-board > img {
    width: auto;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .clerk-board-writing {
    inset: 12% 12%;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 15px;
  }

  .clerk-board-entry {
    min-width: 0;
    white-space: normal;
  }
}

/* v0.20 high-contrast masthead, sidebar Board controls, and Master Map editing. */
.page-heading {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(143, 99, 53, 0.58);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 250, 232, 0.94), rgba(244, 239, 217, 0.9)),
    #f4efd9;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.54),
    0 7px 18px rgba(67, 38, 17, 0.18);
}

.page-heading h1,
.page-heading .breadcrumb,
.page-heading #page-subtitle,
.page-heading .clerk-identity,
.page-heading .clerk-email {
  text-shadow: none;
}

.page-heading .breadcrumb,
.page-heading #page-subtitle {
  color: #5d452f;
}

.sidebar-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.sidebar-scroll > nav,
.sidebar-scroll > .sidebar-divider {
  flex: 0 0 auto;
}

.sidebar-scroll > .sidebar-setup-card {
  min-height: 170px;
  flex: 0 0 auto;
}

.sidebar-ships-log-button {
  position: relative;
  z-index: 2;
  width: calc(100% - 4px);
  min-height: 40px;
  flex: 0 0 auto;
  margin: 12px 2px 0;
}

.sidebar-board-controls {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 2px 0;
  padding: 11px;
  border: 1px solid rgba(143, 99, 53, 0.56);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 248, 220, 0.88), rgba(231, 201, 139, 0.82)),
    #efd9a5;
  box-shadow: inset 0 0 0 1px rgba(255, 252, 236, 0.52);
}

.sidebar-board-controls .button {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  white-space: normal;
}

/* v0.21 keeps the Ship's Log in its own visible row above the Board controls. */
.sidebar-scroll {
  overflow-x: hidden;
  align-content: flex-start;
}

.map-viewport.is-layout-editing .map-marker[data-map-genre] {
  cursor: grab;
  touch-action: none;
}

.map-viewport.is-layout-editing .map-marker[data-map-genre]:active,
body.is-dragging-map-marker .map-marker[data-map-genre] {
  cursor: grabbing;
}

.map-viewport.is-layout-editing .map-marker[data-map-genre]:focus-visible {
  outline: 3px solid #160e49;
  outline-offset: 4px;
}

@media (max-width: 1060px) {
  .page-heading {
    padding: 16px;
  }
}

/* v0.22 uses one consistent, outlined emoji treatment for every hazard indicator. */
.hazard-symbol,
.tag-mismatch-icon,
.map-hazard-symbol,
.mini-action.is-warning,
.person-hazard-symbol {
  color: initial;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  filter: none;
}

.hazard-symbol,
.person-hazard-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #111;
  background: rgba(244, 239, 217, 0.96);
  box-shadow: none;
}

.hazard-symbol {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 25px;
}

.person-hazard-symbol {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 15px;
  vertical-align: middle;
}

.tag-mismatch-badge,
.map-marker.has-tag-mismatch .map-marker-status,
.mini-action.is-warning {
  border: 2px solid #111;
  background: rgba(244, 239, 217, 0.96);
  box-shadow: none;
}

.tag-mismatch-icon {
  font-size: 16px;
}

.map-hazard-symbol {
  font-size: 16px;
}

.mini-action.is-warning {
  font-size: 18px;
}

.person-mismatch-count {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Editable ledger note, mooring roster, and fixed Silver Mine entry. */
.sidebar-setup-card {
  min-height: 0;
  gap: 8px;
}

.quartermaster-note-input {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgba(103, 68, 34, 0.38);
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--ink-900);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 250, 231, 0.92) 0 25px,
      rgba(103, 68, 34, 0.13) 25px 26px
    );
  font: inherit;
  line-height: 26px;
}

.quartermaster-note-input:focus-visible {
  outline: 3px solid rgba(22, 14, 73, 0.25);
  outline-offset: 2px;
}

.quartermaster-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quartermaster-note-actions [role="status"] {
  color: var(--ink-500);
  font-size: 0.72rem;
}

.mooring-people-section,
.mooring-quick-add {
  margin-top: 16px;
  border: 1px solid rgba(30, 118, 87, 0.3);
  border-radius: 12px;
  padding: 14px;
  background: rgba(217, 238, 228, 0.45);
}

.mooring-people-section-head,
.mooring-group-picker,
.mooring-quick-add-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.mooring-person-options {
  display: grid;
  max-height: 210px;
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid rgba(30, 118, 87, 0.24);
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.9);
}

.mooring-person-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(30, 118, 87, 0.15);
}

.mooring-person-option:last-child {
  border-bottom: 0;
}

.mooring-selected-people {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.mooring-selected-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px) 40px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid rgba(30, 118, 87, 0.25);
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.92);
}

.mooring-selected-person-row strong,
.mooring-selected-person-row small {
  display: block;
}

.mooring-selected-person-row small {
  margin-top: 2px;
  color: var(--ink-500);
}

.mooring-selected-person-row select {
  width: 100%;
}

.mooring-camp-plan {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  border-top: 1px solid rgba(30, 118, 87, 0.22);
  padding-top: 10px;
}

.mooring-camp-plan > strong {
  color: #175a46;
  font-size: 0.78rem;
}

.mooring-camp-plan > p {
  margin: 0;
  color: #8b3c32;
  font-size: 0.78rem;
  font-weight: 700;
}

.mooring-camp-plan .field {
  margin-bottom: 0;
}

.mooring-camp-plan-actions {
  justify-content: flex-start;
}

.mooring-camp-plan-actions .button {
  min-height: 40px;
}

.vessel-owner-line {
  display: block;
  color: var(--ink-500);
  font-size: 0.72rem;
}

.silver-mine-ledger {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #8b9198;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #f2f3f4, #d7dade);
}

.silver-mine-ledger > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #6f747a;
  border-radius: 10px;
  background: #fff;
  font-size: 24px;
}

.silver-mine-ledger strong,
.silver-mine-ledger small {
  display: block;
}

@media (max-width: 620px) {
  .mooring-people-section-head,
  .mooring-group-picker,
  .mooring-quick-add-row {
    align-items: stretch;
    flex-direction: column;
  }

  .mooring-selected-person-row {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .mooring-selected-person-row select {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mooring-camp-plan {
    grid-row: auto;
  }

  .mooring-camp-plan-actions .button {
    min-height: 48px;
    flex: 1 1 100%;
  }
}

/* v0.28 phone and tablet support. Desktop rules remain unchanged above. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

.mobile-app-title,
.mobile-sidebar-header,
.mobile-tools,
.mobile-action-strip {
  display: none;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.schedule-table-wrap,
.import-preview-wrap,
.toolbar-left,
.person-combobox-options,
.group-combobox-options {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (pointer: coarse) {
  button,
  summary,
  [role="button"] {
    min-height: 44px;
  }

  .button,
  .icon-button,
  .avatar-button,
  .filter-chip,
  .nav-item,
  .mini-action,
  .status-filter,
  .segmented-control > button,
  .tag-filter > summary {
    min-height: 44px;
  }

  .icon-button,
  .avatar-button,
  .mini-action {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  .map-marker {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    touch-action: manipulation;
  }

  .map-viewport.is-layout-editing .map-marker {
    min-width: 48px;
    min-height: 48px;
    touch-action: none;
  }
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  :root {
    --topbar-height: calc(60px + var(--safe-top));
    --mobile-action-strip-height: 70px;
  }

  html {
    min-width: 0;
  }

  body {
    min-height: 100dvh;
  }

  .button,
  .icon-button,
  .avatar-button,
  .mini-action,
  .filter-chip,
  .nav-item,
  .status-filter,
  .segmented-control > button,
  .tag-filter > summary {
    min-height: 44px;
  }

  .icon-button,
  .avatar-button,
  .mini-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

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

  .topbar {
    height: var(--topbar-height);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    padding: var(--safe-top) max(10px, var(--safe-right)) 0 max(10px, var(--safe-left));
  }

  .mobile-app-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f4d99d;
    font-family: "Cloister Display", "Cinzel Decorative", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    gap: 6px;
  }

  .mobile-menu-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .topbar-actions .button-primary {
    display: none;
  }

  .mobile-action-strip {
    position: fixed;
    z-index: 48;
    top: var(--topbar-height);
    right: 0;
    left: 0;
    display: grid;
    min-height: var(--mobile-action-strip-height);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 5px max(6px, var(--safe-right)) 5px max(6px, var(--safe-left));
    border-bottom: 1px solid rgba(22, 14, 73, 0.24);
    background: rgba(255, 245, 213, 0.97);
    box-shadow: 0 3px 12px rgba(48, 30, 17, 0.15);
    backdrop-filter: blur(10px);
  }

  .mobile-action-strip > button {
    display: flex;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 3px 2px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #160e49;
    font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.05;
    touch-action: manipulation;
  }

  .mobile-action-strip > button > span:first-child {
    box-sizing: border-box;
    display: grid;
    width: 40px;
    height: 40px;
    min-height: 40px;
    place-items: center;
    border: 2px solid #111;
    border-radius: 10px;
    background: rgba(244, 239, 217, 0.96);
    color: #160e49;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 21px;
    line-height: 1;
  }

  .mobile-action-strip > button:active,
  .mobile-action-strip > button[aria-expanded="true"] {
    border-color: rgba(22, 14, 73, 0.28);
    background: rgba(255, 255, 255, 0.68);
  }

  .workspace {
    padding-top: calc(var(--topbar-height) + var(--mobile-action-strip-height));
  }

  .sidebar {
    z-index: 160;
    top: 0;
    bottom: auto;
    width: min(340px, calc(100vw - 32px));
    max-width: 100%;
    height: 100dvh;
    overflow: hidden;
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    transform: translate3d(-110%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
  }

  body.sidebar-open .sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }

  body.sidebar-open .sidebar-scrim {
    z-index: 150;
  }

  body.sidebar-open .mobile-action-strip {
    pointer-events: none;
  }

  .mobile-sidebar-header {
    display: flex;
    min-height: 64px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(103, 68, 34, 0.35);
    background: rgba(255, 239, 196, 0.76);
  }

  #mobile-menu-close-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .mobile-sidebar-header strong,
  .mobile-sidebar-header small {
    display: block;
  }

  .mobile-sidebar-header strong {
    color: #3f2718;
    font-family: "Cloister Display", "Cinzel Decorative", Georgia, serif;
  }

  .mobile-sidebar-header small {
    color: #72583d;
    font-size: 0.78rem;
  }

  .mobile-tools {
    display: block;
    margin-bottom: 18px;
  }

  .mobile-tools .nav-label {
    display: block;
    margin-left: 2px;
  }

  .mobile-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-tools-grid > button {
    display: inline-flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid #aa7e43;
    border-radius: 7px;
    background: linear-gradient(rgba(255, 248, 220, 0.82), rgba(231, 201, 139, 0.76));
    color: #57391f;
    font-family: "Cloister Pro", "Source Serif 4", Georgia, serif;
    font-weight: 700;
  }

  .sidebar-scroll {
    min-height: 0;
    flex: 1 1 auto;
    padding: 16px 14px calc(24px + var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar .nav-item {
    min-height: 54px;
    gap: 9px;
  }

  .sidebar .nav-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .sidebar-footer {
    padding-bottom: calc(13px + var(--safe-bottom));
  }

  .sidebar-scrim,
  .drawer-scrim {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
  }

  .main-content {
    padding: 18px max(12px, var(--safe-right)) calc(84px + var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .page-heading {
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
  }

  .page-heading > div:first-child {
    min-width: 0;
  }

  .page-heading h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .page-controls-stack,
  .clerk-identity,
  .clerk-display {
    width: 100%;
    min-width: 0;
  }

  .clerk-email {
    overflow-wrap: anywhere;
  }

  .summary-grid,
  .dashboard-grid,
  .unit-grid {
    min-width: 0;
  }

  .toolbar-left {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
  }

  .toolbar-left > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .filter-chip,
  .tag-filter > summary {
    min-height: 44px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .tag-filter-popover {
    position: fixed;
    z-index: 120;
    top: auto;
    right: max(12px, var(--safe-right));
    bottom: calc(12px + var(--safe-bottom));
    left: max(12px, var(--safe-left));
    width: auto;
    max-height: min(66dvh, 520px);
    overflow: auto;
  }

  .panel-heading {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding: 13px 14px;
  }

  .map-panel {
    border-width: 4px;
    outline-width: 1px;
  }

  .map-viewport {
    min-height: 0;
    touch-action: pan-y;
  }

  .map-viewport.is-layout-editing {
    touch-action: none;
  }

  .map-marker-status,
  .map-group-marker .map-marker-status {
    width: 34px;
    height: 34px;
    font-size: 0.78rem;
  }

  .map-caption {
    min-height: 0;
    padding: 10px 12px;
  }

  .map-reset-button {
    min-width: 44px;
    min-height: 44px;
  }

  .movement-panel,
  .movement-panel[open],
  .movement-panel:not([open]) {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
  }

  .movement-panel:not([open]) .movement-summary {
    width: 100%;
    min-height: 52px;
    flex-direction: row;
  }

  .section-heading {
    gap: 8px;
  }

  .unit-card {
    min-height: 116px;
  }

  .unit-drawer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
  }

  .drawer-header {
    min-height: calc(72px + var(--safe-top));
    padding-top: calc(14px + var(--safe-top));
  }

  .drawer-content {
    padding-bottom: calc(28px + var(--safe-bottom));
  }

  .drawer-status-card,
  .drawer-section-heading,
  .drawer-schedule-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .drawer-status-card .button,
  .drawer-section-heading .button {
    width: 100%;
  }

  .modal {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .modal[open] {
    display: flex;
    flex-direction: column;
  }

  .modal > form {
    width: 100%;
    height: 100dvh;
    max-height: none;
  }

  .modal > .modal-header,
  .modal > .modal-footer {
    flex: 0 0 auto;
  }

  .modal-header {
    min-height: calc(68px + var(--safe-top));
    padding: calc(12px + var(--safe-top)) max(14px, var(--safe-right)) 12px max(14px, var(--safe-left));
  }

  .modal-header h2 {
    font-size: 1.2rem;
  }

  .modal-body,
  .modal > form > .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    padding: 16px max(14px, var(--safe-right)) 20px max(14px, var(--safe-left));
    overscroll-behavior: contain;
  }

  .modal-footer {
    min-height: 0;
    flex-wrap: wrap;
    padding: 12px max(14px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(14px, var(--safe-left));
  }

  .modal-footer > .button,
  .modal-footer > label.button,
  .button-row > .button {
    min-height: 48px;
    flex: 1 1 180px;
  }

  .form-grid-two,
  .form-grid-three {
    grid-template-columns: 1fr;
  }

  .inline-create-row {
    grid-template-columns: 1fr;
  }

  .inline-create-row .button {
    min-height: 48px;
    width: 100%;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .modal .field input,
  .modal .field select,
  .modal .field textarea,
  .unit-drawer .field input,
  .unit-drawer .field select,
  .unit-drawer .field textarea {
    min-height: 44px;
  }

  textarea {
    min-height: 96px;
  }

  .schedule-table,
  .import-preview-table {
    min-width: 680px;
  }

  .schedule-table-wrap,
  .import-preview-wrap {
    margin-right: -8px;
    margin-left: -8px;
    padding-right: 8px;
    padding-left: 8px;
    scroll-snap-type: x proximity;
  }

  .toast-region {
    right: max(12px, var(--safe-right));
    bottom: calc(12px + var(--safe-bottom));
    left: max(12px, var(--safe-left));
  }

  .toast {
    width: 100%;
    max-width: none;
  }

  .build-stamp {
    position: relative;
    z-index: 1;
    inset: auto;
    width: auto;
    max-width: calc(100% - max(20px, var(--safe-left)) - max(20px, var(--safe-right)));
    flex-wrap: wrap;
    justify-content: center;
    margin: 18px max(10px, var(--safe-right)) calc(14px + var(--safe-bottom)) max(10px, var(--safe-left));
    pointer-events: none;
  }

  .chris-easter-egg {
    width: 100vw;
    height: 100dvh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }

  .chris-easter-egg img {
    width: min(82vw, 480px);
    max-height: 78dvh;
  }
}

@media (max-width: 560px) {
  .main-content {
    padding-right: max(10px, var(--safe-right));
    padding-left: max(10px, var(--safe-left));
  }

  .date-controls {
    display: grid;
    width: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  #previous-date-button {
    grid-column: 1;
    grid-row: 1;
  }

  .date-display {
    width: 100%;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }

  #next-date-button {
    grid-column: 3;
    grid-row: 1;
  }

  #today-button {
    grid-column: 1;
    grid-row: 2;
    order: initial;
  }

  .date-controls .segmented-control {
    display: grid;
    width: 100%;
    grid-column: 2 / 4;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
    order: initial;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-card {
    min-height: 108px;
    padding: 12px;
  }

  .summary-card strong {
    font-size: 1.55rem;
  }

  .summary-card p {
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .map-layout-controls .button-row,
  .quartermaster-note-actions,
  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .map-layout-controls .button,
  .quartermaster-note-actions .button,
  .button-row .button {
    width: 100%;
  }

  .room-editor-row,
  .bed-editor-row {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .room-editor-row > :nth-child(2),
  .bed-editor-row > :nth-child(2) {
    grid-column: 1;
  }

  .room-editor-row > :last-child,
  .bed-editor-row > :last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modal-footer > .button,
  .modal-footer > label.button {
    width: 100%;
  }

  .clerk-board {
    min-height: 58dvh;
  }
}

@media (max-width: 380px) {
  .mobile-app-title {
    font-size: 0.94rem;
  }

  .summary-card {
    min-height: 102px;
  }

  .summary-icon {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  :root {
    --topbar-height: calc(54px + var(--safe-top));
    --mobile-action-strip-height: 50px;
  }

  .mobile-menu-button {
    height: 40px;
    min-height: 40px;
  }

  .mobile-action-strip {
    min-height: var(--mobile-action-strip-height);
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .mobile-action-strip > button {
    min-height: 44px;
    flex-direction: row;
    gap: 4px;
  }

  .mobile-action-strip > button > span:first-child {
    min-height: 0;
    font-size: 0.95rem;
  }

  .workspace {
    padding-top: calc(var(--topbar-height) + var(--mobile-action-strip-height));
  }

  .sidebar {
    width: min(390px, 58vw);
  }

  .mobile-sidebar-header {
    min-height: 54px;
  }

  .modal-header {
    min-height: calc(56px + var(--safe-top));
  }

  .drawer-header {
    min-height: calc(60px + var(--safe-top));
  }
}

/* v0.30 read-only Query workspace and inventory filter placement. */
.inventory-toolbar {
  margin-top: -9px;
  margin-bottom: 16px;
}

.query-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 8px;
}

.query-search-field {
  min-width: 0;
  margin: 0;
}

.query-search-field input {
  width: 100%;
  min-height: 50px;
  padding-right: 16px;
  padding-left: 16px;
  font-size: 1rem;
}

.query-toolbar #download-query-button {
  min-height: 50px;
  white-space: nowrap;
}

.query-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 700;
}

.query-person-row .person-row-actions {
  align-self: center;
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .inventory-toolbar {
    margin-top: -7px;
  }

  .query-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .query-toolbar #download-query-button {
    width: 100%;
  }

  .query-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* v0.33 mobile interaction, readable records, and exact desktop-tool parity. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.sidebar-open .sidebar-scrim {
    right: 0;
    left: min(340px, calc(100vw - 32px));
    width: auto;
  }

  .mobile-action-strip > button > span,
  .mobile-tools-grid > button > span,
  .sidebar .nav-item > span,
  .sidebar .nav-icon {
    pointer-events: none;
  }

  .mobile-action-strip > button,
  .mobile-tools-grid > button,
  .sidebar .nav-item,
  .movement-summary {
    box-sizing: border-box;
    touch-action: manipulation;
  }

  .mobile-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-tools-grid > button {
    width: 100%;
    min-height: 48px;
    padding: 7px 5px;
    line-height: 1.15;
    white-space: normal;
  }

  .sidebar-ships-log-button,
  .sidebar-board-controls .button,
  .quartermaster-note-actions .button {
    min-height: 48px;
  }

  .movement-panel:not([open]) .movement-summary {
    min-height: 64px;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 11px 14px;
  }

  .movement-panel:not([open]) .movement-summary > div {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
  }

  .movement-panel:not([open]) .movement-summary .eyebrow {
    display: block;
  }

  .movement-panel:not([open]) .movement-summary h2 {
    margin-top: 2px;
    font-size: 1rem;
    letter-spacing: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .movement-panel:not([open]) .movement-summary-meta {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
  }

  .movement-panel:not([open]) .movement-summary-meta > span {
    transform: none;
  }

  .person-row,
  .stay-row,
  .movement-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .person-row-actions,
  .stay-row-actions {
    width: 100%;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .movement-date {
    grid-column: 2;
  }

  .person-row-main,
  .group-row-main,
  .profile-stay-main,
  .group-member-row > span,
  .stay-person,
  .movement-person {
    min-width: 0;
  }

  .person-row-main strong,
  .group-row-main strong,
  .group-row-main > span,
  .profile-stay-main strong,
  .profile-stay-main span,
  .group-member-row strong,
  .group-member-row small,
  .stay-person strong,
  .stay-person > span,
  .movement-person strong,
  .movement-person span,
  .bed-card strong,
  .bed-card span {
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .unit-card-titlebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .unit-card-titlebar .unit-status-badge {
    justify-self: start;
  }

  .query-person-row .person-row-actions {
    align-self: auto;
  }
}

@media (max-width: 560px) {
  .group-member-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .group-member-row .mini-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.sidebar-open .sidebar-scrim {
    left: min(390px, 58vw);
  }
}

/* v0.44 mobile integration hardening. Desktop presentation remains unchanged. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  html {
    --mobile-viewport-height: 100dvh;
    scroll-padding-top: calc(var(--topbar-height) + var(--mobile-action-strip-height));
  }

  body.sidebar-open,
  body:has(dialog[open]) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  button,
  summary,
  [role="button"],
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  button > span,
  button > strong,
  button > small,
  .nav-item > span,
  .filter-chip > span {
    pointer-events: none;
  }

  .mobile-action-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
  }

  .mobile-action-strip > button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    overflow: hidden;
  }

  .mobile-action-strip > button > span:last-child {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.61rem, 2.7vw, 0.68rem);
    text-overflow: clip;
    white-space: nowrap;
  }

  .sidebar {
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    overscroll-behavior: contain;
  }

  .sidebar-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .nav-item,
  .mobile-tools-grid > button,
  .sidebar-ships-log-button,
  .sidebar-board-controls .button,
  .quartermaster-note-actions .button {
    width: 100%;
    touch-action: manipulation;
  }

  .sidebar .nav-item > span:not(.nav-icon):not(.nav-count) {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .unit-drawer {
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(84px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .drawer-content {
    min-width: 0;
    overflow-x: hidden;
  }

  .modal {
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    overscroll-behavior: none;
  }

  .modal[open],
  .modal > form {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .modal > form {
    display: flex;
    height: 100%;
    max-height: 100%;
    flex-direction: column;
  }

  .modal > .modal-header,
  .modal > form > .modal-header,
  .modal > .modal-footer,
  .modal > form > .modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
  }

  .modal > .modal-body,
  .modal > form > .modal-body {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 12px;
    scroll-padding-bottom: calc(96px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding-bottom: max(12px, calc(12px + var(--safe-bottom)));
  }

  .modal .field,
  .modal .field input,
  .modal .field select,
  .modal .field textarea,
  .unit-drawer .field,
  .unit-drawer .field input,
  .unit-drawer .field select,
  .unit-drawer .field textarea {
    min-width: 0;
    max-width: 100%;
  }

  .modal .field input,
  .modal .field select,
  .modal .field textarea,
  .unit-drawer .field input,
  .unit-drawer .field select,
  .unit-drawer .field textarea {
    width: 100%;
    font-size: 16px;
  }

  .directory-toolbar,
  .directory-toolbar .button-row,
  .query-toolbar,
  .profile-section-heading,
  .drawer-section-heading,
  .drawer-schedule-heading {
    min-width: 0;
  }

  .directory-toolbar .button-row {
    flex-wrap: wrap;
  }

  .directory-toolbar .button,
  .query-toolbar .button,
  .profile-section-heading .button,
  .drawer-section-heading .button,
  .drawer-schedule-heading .button {
    min-height: 48px;
    white-space: normal;
  }

  .unit-card-title,
  .unit-card-titlebar .unit-card-title,
  .unit-card-titlebar .unit-genre,
  .unit-card-heading strong,
  .drawer-header h2,
  .modal-header h2,
  .ships-manifest li > span,
  .ships-manifest li small {
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .unit-card-heading,
  .unit-card-titlebar {
    min-width: 0;
  }

  .unit-card-title {
    line-height: 1.2;
  }

  .person-row,
  .group-row,
  .profile-stay-card,
  .stay-row,
  .movement-item,
  .group-member-row,
  .mooring-selected-person-row {
    min-width: 0;
    overflow: visible;
  }

  .person-row-actions,
  .stay-row-actions,
  .profile-stay-actions {
    gap: 7px;
  }

  .person-row-actions .mini-action,
  .stay-row-actions .mini-action,
  .profile-stay-actions .mini-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .mini-action.profile-action,
  .mini-action.fit-tags-action {
    width: auto;
    min-width: 64px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .movement-summary {
    min-height: 56px;
  }

  .build-stamp {
    align-self: stretch;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .directory-toolbar .button-row {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .directory-toolbar .button-row .button,
  .directory-toolbar > .button,
  .query-toolbar .button {
    width: 100%;
  }

  .ships-manifest li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .ships-manifest li small {
    text-align: left;
  }

  .modal-footer .button {
    min-height: 48px;
  }
}

@media (max-width: 360px) {
  .mobile-action-strip {
    gap: 1px;
    padding-right: max(2px, var(--safe-right));
    padding-left: max(2px, var(--safe-left));
  }

  .mobile-action-strip > button {
    padding-right: 1px;
    padding-left: 1px;
  }

  .mobile-action-strip > button > span:first-child {
    font-size: 0.92rem;
  }

  .mobile-app-title {
    font-size: 0.88rem;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}

/* v0.45 optical centering for mobile labels, tags, and settings controls. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .tag-row,
  .person-row-tags,
  .group-row-tags,
  .stay-person-tags,
  .stay-person .stay-week-tags,
  .assignment-week-preview,
  .choice-chip-grid {
    align-items: center;
  }

  .tag,
  .week-tag,
  .status-pill,
  .unit-status-badge,
  .nav-count,
  .future-badge,
  .beta-badge,
  .manifest-owner-badge,
  .tag-mismatch-badge,
  .group-type-badge {
    box-sizing: border-box;
    display: inline-grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    line-height: 1.1;
    text-align: center;
    vertical-align: middle;
  }

  .tag,
  .week-tag {
    min-height: 30px;
    padding: 4px 9px;
    white-space: normal;
  }

  .drawer-tag-panel .tag {
    min-height: 34px;
    padding: 5px 11px;
  }

  .status-pill,
  .unit-status-badge {
    min-height: 32px;
    padding: 5px 10px;
    white-space: normal;
  }

  .unit-status-badge {
    grid-auto-flow: column;
  }

  .nav-count,
  .future-badge,
  .beta-badge {
    min-height: 28px;
    padding: 4px 8px;
  }

  .manifest-owner-badge {
    min-height: 24px;
    margin-top: 1px;
    padding: 3px 7px;
  }

  .tag-mismatch-badge {
    min-height: 34px;
    grid-auto-flow: column;
    padding: 5px 8px;
  }

  .tag-mismatch-icon,
  .tag-mismatch-text,
  .tag-filter summary::after {
    align-self: center;
    line-height: 1;
  }

  .group-type-badge {
    min-height: 44px;
    padding: 7px 10px;
  }

  .choice-chip span {
    box-sizing: border-box;
    display: grid;
    min-height: 44px;
    place-items: center;
    padding: 7px 12px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .check-row {
    min-height: 44px;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.2;
    white-space: normal;
  }

  .filter-chip,
  .tag-filter > summary,
  .status-filter,
  .segmented-control > button,
  .mobile-tools-grid > button,
  .settings-section .button,
  .settings-section label.button {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    text-align: center;
  }

  .filter-chip,
  .tag-filter > summary,
  .status-filter,
  .segmented-control > button {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .mobile-action-strip > button {
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    align-content: center;
    line-height: 1.05;
  }

  .mobile-action-strip > button > span:first-child,
  .mobile-action-strip > button > span:last-child {
    align-self: center;
    line-height: 1.05;
  }

  .settings-stack,
  .settings-section,
  .settings-section .form-grid,
  .settings-section .button-row {
    min-width: 0;
  }

  .settings-section {
    box-sizing: border-box;
    display: grid;
    align-items: start;
    gap: 12px;
    padding: 15px;
  }

  .settings-section > h3,
  .settings-section > h4,
  .settings-section > p,
  .settings-section > .field,
  .settings-section > .form-grid,
  .settings-section > .form-message,
  .settings-section > .button-row {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .settings-section .form-grid-two > span[aria-hidden="true"] {
    display: none;
  }

  .settings-section .button,
  .settings-section label.button {
    width: 100%;
    min-height: 48px;
    padding: 9px 14px;
    white-space: normal;
  }

  .settings-section .button-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
  }

  .settings-section .file-button {
    position: relative;
    overflow: hidden;
  }

  .settings-section .file-button input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  .settings-section .field input,
  .settings-section .field select,
  .settings-section .field textarea {
    box-sizing: border-box;
    min-height: 48px;
    line-height: 1.2;
  }

  .settings-section .field > span,
  .settings-section .field > small {
    line-height: 1.2;
  }
}

/* v0.46 mobile map controls, reliable touch targets, and labeled stay actions. */
.stay-row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* v0.48 keeps native Add Stay date controls inside narrow iOS viewports. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  #assignment-modal .assignment-date-grid,
  #assignment-modal .assignment-date-grid .field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  #assignment-modal .assignment-date-grid {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  #assignment-modal input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: 9px 12px;
    overflow: hidden;
    border-radius: 5px;
    line-height: 1.2;
    color-scheme: light;
    -webkit-appearance: none;
    appearance: none;
  }

  #assignment-modal input[type="date"]::-webkit-date-and-time-value,
  #assignment-modal input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
  }

  #assignment-modal button,
  #assignment-modal .button {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    touch-action: manipulation;
  }
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  button {
    box-sizing: border-box;
    touch-action: manipulation;
  }

  button > * {
    pointer-events: none;
  }

  .map-reset-dock {
    position: static;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 9px 12px;
    border-top: 1px solid #9c6a36;
    background:
      linear-gradient(rgba(245, 224, 174, 0.97), rgba(227, 190, 118, 0.94)),
      #efd29a;
  }

  .map-reset-dock[hidden] {
    display: none;
  }

  .map-reset-button {
    position: static;
    min-width: 148px;
    min-height: 48px;
    padding: 8px 14px;
    line-height: 1.15;
  }

  .mooring-camp-plan,
  .mooring-camp-plan-actions {
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  .mooring-camp-plan-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .mooring-camp-plan-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    pointer-events: auto;
  }

  body.dialog-open .sidebar,
  body.dialog-open .unit-drawer,
  dialog.is-background-dialog {
    overflow: hidden;
    overscroll-behavior: none;
    pointer-events: none;
    touch-action: none;
  }

  .modal[open]:not(.is-background-dialog) {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
  }

  .modal[open]:not(.is-background-dialog) > .modal-body,
  .modal[open]:not(.is-background-dialog) > form > .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* v0.49 constrains every Data & Settings control to its visible mobile hitbox. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  #settings-modal .settings-stack,
  #settings-modal .settings-section,
  #settings-modal .settings-section > *,
  #settings-modal .settings-section .form-grid,
  #settings-modal .settings-section .field,
  #settings-modal .settings-section .button-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  #settings-modal .settings-stack {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  #settings-modal .settings-section .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  #settings-modal .settings-section .button,
  #settings-modal .settings-section label.button {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    margin: 0;
    padding: 9px 14px;
    overflow: hidden;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    touch-action: manipulation;
  }

  #settings-modal .settings-section .file-button input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  #settings-modal .settings-section input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: 9px 12px;
    overflow: hidden;
    border-radius: 5px;
    line-height: 1.2;
    color-scheme: light;
    -webkit-appearance: none;
    appearance: none;
  }

  #settings-modal .settings-section input[type="date"]::-webkit-date-and-time-value,
  #settings-modal .settings-section input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
  }

  #settings-modal .modal-header .icon-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    flex: 0 0 48px;
    padding: 0;
  }
}

/* v0.50 gives the on-screen keyboard a compact, opaque, scroll-first mobile layout. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.mobile-keyboard-open .mobile-action-strip,
  body.mobile-keyboard-open .build-stamp {
    display: none;
  }

  body.mobile-keyboard-open .modal[open]::backdrop {
    background: #3b291e;
    backdrop-filter: none;
  }

  body.mobile-keyboard-open dialog.is-background-dialog {
    visibility: hidden;
    opacity: 0;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) {
    inset: var(--mobile-viewport-offset-top, 0px) 0 auto;
    width: 100vw;
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    background: #fff;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > form {
    height: 100%;
    max-height: 100%;
    background: #fff;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header {
    min-height: 50px;
    gap: 8px;
    padding: 5px max(9px, var(--safe-right)) 5px max(9px, var(--safe-left));
    background: #fff;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header > div {
    min-width: 0;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header .eyebrow {
    display: none;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header h2 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.15;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > .modal-body,
  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > form > .modal-body {
    min-height: 0;
    padding: 10px max(10px, var(--safe-right)) 12px max(10px, var(--safe-left));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-top: 8px;
    scroll-padding-bottom: calc(54px + var(--safe-bottom));
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-footer {
    min-height: 50px;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 5px max(8px, var(--safe-right)) max(5px, var(--safe-bottom)) max(8px, var(--safe-left));
    background: #fbfcfb;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-footer > :not(:last-child) {
    display: none;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-footer > .button:last-child,
  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-footer > label.button:last-child {
    min-height: 40px;
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 0.82rem;
    line-height: 1.1;
  }

  body.mobile-keyboard-open.sidebar-open .sidebar,
  body.mobile-keyboard-open .unit-drawer.is-open {
    top: var(--mobile-viewport-offset-top, 0px);
    bottom: auto;
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    background-color: #f8faf8;
  }

  body.mobile-keyboard-open.sidebar-open .mobile-sidebar-header,
  body.mobile-keyboard-open .unit-drawer.is-open .drawer-header {
    min-height: 50px;
    padding: 5px 9px;
  }

  body.mobile-keyboard-open.sidebar-open .mobile-sidebar-header small,
  body.mobile-keyboard-open .unit-drawer.is-open .drawer-header .eyebrow {
    display: none;
  }

  body.mobile-keyboard-open .unit-drawer.is-open .drawer-header h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
  }

  body.mobile-keyboard-open.sidebar-open #mobile-menu-close-button,
  body.mobile-keyboard-open .unit-drawer.is-open .drawer-header .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/* v0.56 preserves EBA surfaces and the complete Clerk's Board during mobile text entry. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  html,
  body,
  body.mobile-keyboard-open {
    background-color: var(--eba-page-canvas);
  }

  body {
    background: var(--eba-page-canvas);
  }

  body::before {
    inset: 0 0 auto;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    opacity: 1;
    background:
      linear-gradient(rgba(212, 174, 111, 0.08), rgba(212, 174, 111, 0.08)),
      url("assets/mobile-pirate-map-background.webp") center top / cover no-repeat,
      var(--eba-page-canvas);
  }

  body.mobile-keyboard-open .modal[open]::backdrop {
    background: var(--eba-modal-backdrop-background);
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog),
  body.mobile-keyboard-open .unit-drawer.is-open {
    background: var(--eba-parchment-panel-background);
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > form {
    background: transparent;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-header,
  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) .modal-footer {
    background: var(--eba-parchment-chrome-background);
  }

  body.mobile-keyboard-open.sidebar-open .sidebar {
    background: var(--eba-sidebar-background);
  }

  body.mobile-keyboard-open.sidebar-open .sidebar-footer {
    display: none;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="hidden"]):not(.visually-hidden-date),
    select,
    textarea,
    [contenteditable="true"]
  ) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
    color-scheme: light;
    scroll-margin-top: 64px;
    scroll-margin-bottom: calc(72px + var(--safe-bottom));
  }

  body.mobile-keyboard-open :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="hidden"]):not(.visually-hidden-date),
    select,
    textarea,
    [contenteditable="true"]
  ) {
    background-color: #fff0c4;
    color: #40291a;
    caret-color: #40291a;
    -webkit-text-fill-color: #40291a;
    opacity: 1;
  }

  body.mobile-keyboard-open :where(input, textarea)::placeholder {
    color: #80654c;
    -webkit-text-fill-color: #80654c;
    opacity: 1;
  }

  body.mobile-keyboard-open #settings-modal .settings-section {
    background: #f8e4b5;
  }

  .board-modal-body {
    padding: 10px;
    overflow-x: hidden;
  }

  .clerk-board {
    min-height: 0;
    height: auto;
    aspect-ratio: 863 / 235;
  }

  .clerk-board > img {
    top: 50%;
    left: 0;
    width: 100%;
    min-width: 0;
    height: auto;
    transform: translateY(-50%);
    object-fit: contain;
  }

  .clerk-board-writing {
    inset: 13% 8%;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: clamp(11px, 2.8vw, 15px);
    line-height: 1.05;
  }

  .clerk-board-entry {
    min-width: min(210px, 55vw);
    padding: 1px 2px;
    white-space: nowrap;
  }

  .clerk-board-empty {
    min-width: 0;
    white-space: normal;
  }
}

/* v0.57 isolates the active task and follows delayed iOS keyboard viewport changes. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.mobile-keyboard-open .modal[open]::backdrop {
    background: #2b1a10;
    backdrop-filter: none;
  }

  body.mobile-keyboard-open.dialog-open .app-shell {
    visibility: hidden;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) {
    inset: 0 0 auto;
    box-sizing: border-box;
    width: 100vw;
    height: var(--mobile-layout-height, 100dvh);
    max-height: var(--mobile-layout-height, 100dvh);
    padding-top: var(--mobile-viewport-offset-top, 0px);
    padding-bottom: var(--mobile-keyboard-inset, 0px);
    background: var(--eba-parchment-panel-background);
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > form {
    height: 100%;
    max-height: 100%;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > .modal-body,
  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) > form > .modal-body {
    scroll-padding-top: 12px;
    scroll-padding-bottom: 88px;
  }

  body.mobile-keyboard-open.sidebar-open .main-content,
  body.mobile-keyboard-open.drawer-open .main-content {
    visibility: hidden;
  }

  body.mobile-keyboard-open.sidebar-open .sidebar-scrim,
  body.mobile-keyboard-open.drawer-open .drawer-scrim {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-keyboard-open.sidebar-open .sidebar,
  body.mobile-keyboard-open .unit-drawer.is-open {
    top: 0;
    bottom: auto;
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    height: var(--mobile-layout-height, 100dvh);
    max-height: var(--mobile-layout-height, 100dvh);
    padding-top: var(--mobile-viewport-offset-top, 0px);
    padding-bottom: var(--mobile-keyboard-inset, 0px);
  }

  body.mobile-keyboard-open:not(.dialog-open):not(.sidebar-open):not(.drawer-open)
    .main-content > :not(.page-heading),
  body.mobile-keyboard-open:not(.dialog-open):not(.sidebar-open):not(.drawer-open)
    .page-heading > :first-child,
  body.mobile-keyboard-open:not(.dialog-open):not(.sidebar-open):not(.drawer-open)
    .date-controls {
    visibility: hidden;
  }
}

/* v0.60 uses one measured scroll owner for keyboard visibility and consistent mobile motion. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  html {
    --mobile-motion-fast: 140ms;
    --mobile-motion-panel: 220ms;
    --mobile-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mobile-keyboard-scroll-buffer: 96px;
  }

  .sidebar {
    transition:
      transform var(--mobile-motion-panel) var(--mobile-motion-ease),
      visibility 0s linear var(--mobile-motion-panel);
  }

  body.sidebar-open .sidebar {
    transition:
      transform var(--mobile-motion-panel) var(--mobile-motion-ease),
      visibility 0s linear 0s;
  }

  .unit-drawer {
    transition: transform var(--mobile-motion-panel) var(--mobile-motion-ease);
  }

  .sidebar-scrim,
  .drawer-scrim {
    transition:
      opacity var(--mobile-motion-fast) ease-out,
      visibility 0s linear var(--mobile-motion-fast);
  }

  body.sidebar-open .sidebar-scrim,
  body.drawer-open .drawer-scrim {
    transition:
      opacity var(--mobile-motion-fast) ease-out,
      visibility 0s linear 0s;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog),
  body.mobile-keyboard-open.sidebar-open .sidebar,
  body.mobile-keyboard-open .unit-drawer.is-open {
    transition: none;
  }

  body.mobile-keyboard-open .mobile-keyboard-scroll-owner {
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
    scroll-padding-top: 12px;
    scroll-padding-bottom: var(--mobile-keyboard-scroll-buffer);
  }

  body.mobile-keyboard-open .modal-body.mobile-keyboard-scroll-owner,
  body.mobile-keyboard-open .sidebar-scroll.mobile-keyboard-scroll-owner {
    padding-bottom: calc(
      var(--mobile-keyboard-scroll-buffer) + var(--safe-bottom)
    ) !important;
  }

  html.mobile-keyboard-scroll-owner body.mobile-keyboard-open {
    padding-bottom: calc(
      var(--mobile-keyboard-inset, 0px) +
      var(--mobile-keyboard-scroll-buffer) +
      var(--safe-bottom)
    );
  }

  body.mobile-keyboard-open .unit-drawer.is-open.mobile-keyboard-scroll-owner {
    padding-bottom: calc(
      var(--mobile-keyboard-inset, 0px) +
      var(--mobile-keyboard-scroll-buffer) +
      var(--safe-bottom)
    );
    scroll-padding-bottom: var(--mobile-keyboard-scroll-buffer);
  }

  .mobile-keyboard-active-entry {
    scroll-margin-top: 12px;
    scroll-margin-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 800px), (prefers-reduced-motion: reduce) and (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  html {
    scroll-behavior: auto !important;
  }

  .sidebar,
  .unit-drawer,
  .sidebar-scrim,
  .drawer-scrim,
  .mobile-action-strip,
  .toast,
  .button,
  .unit-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* v0.61 protects focused fields when an embedded iOS browser overlays its keyboard. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.mobile-keyboard-open .modal[open]::backdrop {
    background: var(--eba-parchment-panel-background);
    backdrop-filter: none;
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog),
  body.mobile-keyboard-open.sidebar-open .sidebar,
  body.mobile-keyboard-open .unit-drawer.is-open {
    isolation: isolate;
    background-clip: border-box;
  }

  .mini-action.record-edit-action,
  .mini-action.record-delete-action {
    display: inline-flex;
    width: auto;
    min-width: 64px;
    height: 44px;
    min-height: 44px;
    gap: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border-width: 1px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .mini-action.record-edit-action {
    border-color: #160e49;
    background: #f4efd9;
    color: #160e49;
  }

  .mini-action.record-delete-action {
    border-color: #9f3e37;
    background: #fff0eb;
    color: #8f332e;
  }

  .record-action-label {
    display: inline;
  }
}

/* v0.62 keeps no-resize WebKit dialogs full-height and moves only their scroll content. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  body.mobile-keyboard-fallback .modal-body.mobile-keyboard-scroll-owner,
  body.mobile-keyboard-fallback .sidebar-scroll.mobile-keyboard-scroll-owner {
    padding-bottom: calc(
      var(--mobile-keyboard-focus-space, 0px) +
      var(--mobile-keyboard-scroll-buffer) +
      var(--safe-bottom)
    ) !important;
  }

  html.mobile-keyboard-scroll-owner body.mobile-keyboard-fallback {
    padding-bottom: calc(
      var(--mobile-keyboard-focus-space, 0px) +
      var(--mobile-keyboard-scroll-buffer) +
      var(--safe-bottom)
    );
  }

  body.mobile-keyboard-fallback .unit-drawer.is-open.mobile-keyboard-scroll-owner {
    padding-bottom: calc(
      var(--mobile-keyboard-focus-space, 0px) +
      var(--mobile-keyboard-scroll-buffer) +
      var(--safe-bottom)
    );
  }
}

/* v0.63 keeps mobile motion, scroll boundaries, and parchment surfaces continuous. */
@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  html {
    min-height: 100%;
    background:
      repeating-linear-gradient(
        6deg,
        rgba(89, 53, 25, 0.035) 0 1px,
        transparent 1px 8px
      ),
      var(--eba-page-canvas);
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }

  body {
    min-height: 100dvh;
    background-color: var(--eba-page-canvas);
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }

  body::before {
    min-height: 100lvh;
    background-color: var(--eba-page-canvas);
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .app-shell,
  .workspace,
  .main-content {
    min-height: 100dvh;
  }

  .sidebar,
  .unit-drawer,
  .modal[open],
  .modal[open] > form {
    isolation: isolate;
    background-clip: border-box;
  }

  .sidebar {
    background: var(--eba-sidebar-background);
  }

  .unit-drawer,
  .modal[open],
  .modal[open] > form {
    background: var(--eba-parchment-panel-background);
  }

  .sidebar-scroll,
  .unit-drawer,
  .modal > .modal-body,
  .modal > form > .modal-body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
  }

  .sidebar-scrim,
  .drawer-scrim {
    background-color: var(--eba-modal-backdrop-background);
    transition:
      opacity var(--mobile-motion-panel) var(--mobile-motion-ease),
      visibility 0s linear var(--mobile-motion-panel);
  }

  body.sidebar-open .sidebar-scrim,
  body.drawer-open .drawer-scrim {
    transition:
      opacity var(--mobile-motion-fast) ease-out,
      visibility 0s linear 0s;
  }

  :where(
    .button,
    .icon-button,
    .avatar-button,
    .mini-action,
    .nav-item,
    .status-filter,
    .filter-chip,
    .mobile-action-strip > button,
    details > summary
  ) {
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
  }

  :where(
    .button,
    .icon-button,
    .avatar-button,
    .mini-action,
    .nav-item,
    .status-filter,
    .filter-chip,
    .mobile-action-strip > button,
    details > summary
  ):active {
    transform: scale(0.985);
  }

  @supports (transition-behavior: allow-discrete) {
    .modal {
      opacity: 0;
      transform: translate3d(0, 10px, 0) scale(0.995);
      transition:
        opacity var(--mobile-motion-fast) ease-out,
        transform var(--mobile-motion-fast) var(--mobile-motion-ease),
        display var(--mobile-motion-fast) allow-discrete,
        overlay var(--mobile-motion-fast) allow-discrete;
    }

    .modal[open] {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .modal::backdrop {
      opacity: 0;
      transition:
        opacity var(--mobile-motion-fast) ease-out,
        display var(--mobile-motion-fast) allow-discrete,
        overlay var(--mobile-motion-fast) allow-discrete;
    }

    .modal[open]::backdrop {
      opacity: 1;
    }

    @starting-style {
      .modal[open] {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.995);
      }

      .modal[open]::backdrop {
        opacity: 0;
      }
    }
  }

  body.mobile-keyboard-open .modal[open]:not(.is-background-dialog) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 800px), (prefers-reduced-motion: reduce) and (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .modal,
  .modal::backdrop,
  details > summary {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  :where(
    .button,
    .icon-button,
    .avatar-button,
    .mini-action,
    .nav-item,
    .status-filter,
    .filter-chip,
    .mobile-action-strip > button,
    details > summary
  ):active {
    transform: none;
  }
}

/* v0.70 Product Design audit corrections: compact landscape, legible helper text, and clearer actions. */
:root {
  --eba-secondary-ink: #5f4228;
}

.summary-label,
.summary-card p,
.settings-section p,
.field small,
.profile-help,
.profile-count,
.profile-empty-inline,
.profile-empty {
  color: var(--eba-secondary-ink);
}

input::placeholder,
textarea::placeholder {
  color: #80654c;
  opacity: 1;
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .mobile-action-strip > button > span:last-child {
    font-size: clamp(0.72rem, 3vw, 0.78rem);
    line-height: 1.15;
  }
}

/* v0.81 local access gate, self-service profiles, guest entry, and profile administration. */
body.access-pending,
body.access-locked {
  min-height: 100dvh;
  overflow: hidden;
  background: #d4ae6f;
}

body.access-pending > :not(#local-access-gate):not(script),
body.access-locked > :not(#local-access-gate):not(script) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.local-access-gate[hidden] {
  display: none;
}

[data-access-permission][hidden] {
  display: none !important;
}

.local-access-gate {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  min-width: 320px;
  min-height: 100dvh;
  padding:
    max(28px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: none;
  background:
    linear-gradient(rgba(26, 14, 6, 0.42), rgba(26, 14, 6, 0.55)),
    url("assets/map-parchment.png") center / cover no-repeat,
    #6a4023;
  color: #3c2617;
  place-items: center;
}

.local-access-card {
  width: min(100%, 540px);
  padding: clamp(26px, 5vw, 42px);
  border: 2px solid #8e5a2e;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 249, 220, 0.72), transparent 16rem),
    repeating-linear-gradient(5deg, rgba(91, 53, 24, 0.025) 0 1px, transparent 1px 8px),
    #efd59e;
  box-shadow: 0 30px 90px rgba(24, 13, 6, 0.48);
}

.local-access-card h1 {
  margin: 0 0 8px;
  color: #392116;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.65rem, 5vw, 2.25rem);
  line-height: 1.12;
}

#local-access-login-title > span {
  display: block;
}

.local-access-card > .eyebrow,
.local-access-card section > p {
  margin-top: 0;
}

.local-access-brand {
  display: flex;
  margin-bottom: 12px;
}

.local-access-brand .brand-mark {
  width: 54px;
  height: 54px;
}

.local-access-card .form-stack {
  margin-top: 22px;
}

.local-access-form-actions {
  display: grid;
  gap: 10px;
}

.local-access-guest {
  margin-top: 24px;
}

.local-access-guest h2 {
  margin: 16px 0 5px;
  color: #392116;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.12rem;
}

.local-access-guest p {
  margin: 0;
}

.local-access-guest small {
  display: block;
  margin-top: 10px;
  color: #72583d;
  line-height: 1.4;
}

.access-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #72583d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-section-divider::before,
.access-section-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(90, 54, 26, 0.35);
  content: "";
}

.guest-access-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.access-remember-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 600;
}

.access-remember-choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--eba-dark-blue);
}

.local-access-notice {
  display: grid;
  gap: 4px;
  margin-top: 24px;
  padding: 13px 15px;
  border: 1px solid rgba(90, 54, 26, 0.4);
  border-radius: 12px;
  background: rgba(255, 246, 207, 0.48);
  font-size: 0.86rem;
  line-height: 1.4;
}

.local-access-settings-heading,
.local-access-current-user,
.access-profile-heading {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.local-access-settings-heading h3,
.local-access-settings-heading p {
  margin-top: 0;
}

.local-access-mode-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #8e5a2e;
  border-radius: 999px;
  background: rgba(255, 240, 188, 0.7);
  color: #5b351d;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.access-owner-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(35, 125, 77, 0.32);
  border-radius: 999px;
  background: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.local-access-current-user {
  padding: 14px;
  border: 1px solid rgba(91, 53, 24, 0.3);
  border-radius: 12px;
  background: rgba(255, 250, 224, 0.45);
}

.local-access-current-user .button[hidden] {
  display: none !important;
}

.local-access-current-user > div:first-child,
.access-profile-heading > div {
  display: grid;
  gap: 2px;
}

.local-access-current-user span,
.access-profile-heading span,
.access-profile-heading small {
  color: var(--eba-secondary-ink);
}

.local-access-modal {
  width: min(900px, calc(100vw - 32px));
}

.access-management-stack,
.access-profile-list {
  display: grid;
  gap: 16px;
}

.access-profile-card {
  padding: 15px;
  border: 1px solid rgba(91, 53, 24, 0.3);
  border-radius: 12px;
  background: rgba(255, 250, 224, 0.48);
}

.access-profile-card.is-disabled {
  opacity: 0.7;
}

.access-password-reset {
  margin-top: 12px;
}

.access-password-reset summary {
  color: var(--eba-dark-blue);
  font-weight: 700;
}

.access-password-reset form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}

.access-activity-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-activity-list li {
  display: grid;
  gap: 1px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(91, 53, 24, 0.18);
}

.access-activity-list small,
.access-installation-line {
  color: var(--eba-secondary-ink);
}

.access-installation-line code {
  overflow-wrap: anywhere;
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .local-access-gate {
    align-items: start;
    background:
      linear-gradient(rgba(55, 31, 12, 0.26), rgba(55, 31, 12, 0.45)),
      url("assets/mobile-pirate-map-background.webp") center top / cover no-repeat,
      #a66d38;
  }

  .local-access-card {
    margin: auto 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .local-access-card input,
  .local-access-card select,
  .local-access-modal input,
  .local-access-modal select {
    min-height: 48px;
    font-size: 16px;
  }

  .local-access-settings-heading,
  .local-access-current-user,
  .access-profile-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .local-access-mode-badge {
    align-self: flex-start;
  }

  .local-access-current-user .button-row,
  .access-profile-heading .button {
    width: 100%;
  }

  .access-password-reset form {
    grid-template-columns: 1fr;
  }

  .guest-access-actions {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .mobile-action-strip {
    height: var(--mobile-action-strip-height);
    min-height: var(--mobile-action-strip-height);
  }

  .mobile-action-strip > button > span:first-child {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-width: 1px;
    font-size: 1rem;
  }
}