/* Stylesheet ownership (source order is intentional):
 * Base tokens and shared controls; setup/guest/admin foundations;
 * admin editors, access and languages; guest RSVP/food/photo treatments;
 * responsive refinements; shared lifecycle controls; customization and delivery.
 * Later theme/responsive rules may override earlier component defaults.
 * Keep this entry point and rule order when extracting component styles.
 */
:root {
  --ink: #233837;
  --muted: #677b78;
  --line: #dce6e1;
  --paper: #f7f9f5;
  --white: #fff;
  --teal: #176f61;
  --action-text: var(--teal);
  --teal-dark: #115447;
  --light: #eaf3ec;
  --warning: #fff9e9;
  --danger: #962d2f;
  --success: #ecf9ef;
  --shadow: 0 16px 60px rgba(26, 55, 45, 0.075);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: var(--teal);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  line-height: 1.17;
}
h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.035em;
}
h2 {
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}
h3 {
  font-size: 1.08rem;
  margin-top: 1.3rem;
}
p {
  margin-bottom: 1rem;
}
code {
  font-size: 0.85em;
  background: #eef2ef;
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.site-width {
  max-width: 1160px;
  margin: auto;
  padding: 0 28px;
}
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 77px;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.045em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--teal);
  height: 37px;
  width: 37px;
  font-size: 23px;
  border-radius: 11px;
}
.brand-soft {
  font-weight: 500;
  color: var(--muted);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-link {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.nav-link:hover {
  color: var(--teal);
}
.language-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
  background: #fff;
}
.language-switch button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
}
.language-switch button.selected {
  background: var(--teal);
  color: white;
}
.eyebrow {
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--teal);
  display: inline-block;
  margin-bottom: 16px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.86rem;
}
.micro {
  font-size: 0.73rem;
  color: var(--muted);
}
.lede {
  font-size: 1.07rem;
  color: #657b76;
  max-width: 46ch;
  line-height: 1.8;
}
.guest-layout {
  padding-top: 70px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(450px, 1.1fr);
  gap: 8%;
  align-items: start;
}
.hero-panel {
  padding-top: 30px;
  position: sticky;
  top: 40px;
}
.hero-panel h1 {
  font-size: clamp(2.8rem, 4.3vw, 5rem);
  line-height: 1.09;
  margin-bottom: 26px;
}
.hero-panel h1 em {
  font-weight: 500;
  color: var(--teal);
}
.hero-date {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}
.guest-main {
  display: grid;
  gap: 24px;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 33px;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin-bottom: 12px;
}
.panel-heading {
  display: flex;
  gap: 20px;
  align-items: start;
  justify-content: space-between;
}
.notice {
  border: 1px solid #cfe0da;
  background: var(--light);
  padding: 13px 17px;
  border-radius: 12px;
  font-size: 0.88rem;
  margin-bottom: 20px;
  color: #285e4e;
}
.notice.warning {
  border-color: #eee0b7;
  background: var(--warning);
  color: #695828;
}
.notice.success {
  border-color: #d4ead6;
  background: var(--success);
  color: #286c44;
}
.notice.error {
  border-color: #f2d5d5;
  background: #fff0f0;
  color: var(--danger);
}
.hidden {
  display: none !important;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--teal);
  border-radius: 11px;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.btn:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}
.btn.secondary {
  background: #fff;
  color: var(--teal);
  border: 1px solid #a4c7b8;
}
.btn.secondary:hover {
  background: var(--light);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn.danger {
  background: #a4363a;
  border-color: #a4363a;
}
.quiet-link {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.text-button {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 700;
}
.text-button.danger {
  color: var(--danger);
}
.inline-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-form > input {
  flex: 1;
  min-width: 150px;
}
.inline-form label {
  flex: 1;
  min-width: 160px;
}
.inline-form.two-fields label {
  flex: 1 1 200px;
}
.stacked-form {
  display: grid;
  gap: 17px;
}
.stacked-form label,
.inline-form label,
.form-grid label,
.panel > label {
  display: grid;
  gap: 7px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink);
}
input,
select,
textarea {
  border: 1px solid #cddbd5;
  border-radius: 10px;
  background: white;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
  outline-offset: 2px;
  color: var(--ink);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(23, 111, 97, 0.13);
}
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  min-height: 0;
  accent-color: var(--teal);
}
textarea {
  min-height: 90px;
  resize: vertical;
}
.form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 23px;
  flex-wrap: wrap;
}
.rsvp-rows {
  display: grid;
  gap: 15px;
  margin: 24px 0;
}
.guest-response {
  padding: 16px;
  background: #f6faf7;
  border: 1px solid #e1eae5;
  border-radius: 12px;
}
.guest-response h3 {
  margin: 0 0 5px;
}
.response-options {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.radio-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: white;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.86rem;
}
.session-name {
  font-size: 0.77rem;
  color: var(--muted);
}
.food-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.food-item {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.food-item strong {
  display: block;
}
.food-item .food-item-meta {
  color: var(--muted);
  font-size: 0.75rem;
}
.food-item input {
  width: 88px;
  flex: 0 0 88px;
}
.food-item input:disabled {
  background: #eef2ef;
}
.footer {
  padding-top: 24px;
  padding-bottom: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-layout {
  padding-top: 56px;
  padding-bottom: 90px;
}
.login-panel {
  max-width: 490px;
  margin: 12px auto 90px;
}
.login-panel h1 {
  font-size: 3rem;
}
.admin-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}
.admin-heading h1 {
  font-size: 3.05rem;
  margin-bottom: 8px;
}
.tab-bar {
  display: flex;
  gap: 6px;
  overflow: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.tab-bar button {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 13px 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}
.tab-bar button.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.tab-section {
  display: grid;
  gap: 22px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}
.stat-card {
  padding: 22px 19px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 15px;
}
.stat-card b {
  font-size: 2.1rem;
  line-height: 1.25;
  display: block;
  color: var(--teal);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.stat-card span {
  font-size: 0.82rem;
  color: var(--muted);
}
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-list li {
  display: flex;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f0;
  font-size: 0.88rem;
}
.check-list li:last-child {
  border: 0;
}
.check-list .yes {
  color: var(--teal);
  font-weight: bold;
}
.check-list .no {
  color: #bd873e;
}
.table-wrap {
  overflow-x: auto;
}
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}
.data-table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}
.data-table td {
  border-bottom: 1px solid #eaf0eb;
  padding: 12px;
  vertical-align: top;
}
.data-table tbody tr:hover {
  background: #f9fbf8;
}
.tag {
  padding: 3px 8px;
  border-radius: 100px;
  background: #e7f1ed;
  font-size: 0.7rem;
  white-space: nowrap;
  color: #37685d;
  font-weight: 700;
}
.tag.pending {
  background: #f7f0dd;
  color: #866c2f;
}
.inline-muted {
  font-size: 0.73rem;
  color: var(--muted);
}
.search-label {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.73rem;
}
.search-label input {
  min-width: 200px;
  margin-top: 6px;
}
.admin-members {
  display: grid;
  gap: 10px;
  margin-bottom: 29px;
}
.admin-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf8;
}
.admin-member .name {
  font-weight: 700;
}
.admin-member .email {
  font-size: 0.79rem;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.span-2 {
  grid-column: span 2;
}
.separator {
  border-top: 1px solid var(--line);
  margin: 27px 0;
}
.session-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.session-row strong {
  display: block;
}
.session-row small {
  display: block;
  color: var(--muted);
}
.setup-layout {
  max-width: 900px;
  padding-top: 52px;
  padding-bottom: 80px;
}
.setup-heading h1 {
  font-size: 3.5rem;
  margin: 5px 0 16px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 35px 0 24px;
}
.steps button {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 10px;
  background: white;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.77rem;
}
.steps button.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.steps button span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
.wizard-step {
  min-height: 300px;
}
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 28px 0;
}
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  border: 1px solid #d2dfd7;
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
}
.choice input {
  grid-row: span 2;
  align-self: start;
  margin-top: 5px;
}
.choice strong {
  font-size: 1.06rem;
}
.choice span {
  font-size: 0.84rem;
  color: var(--muted);
}
.choice:has(input:checked) {
  background: #f0f8f1;
  border-color: #7da996;
}
.wizard-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 25px;
  flex-wrap: wrap;
}
.code-input {
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
  margin-top: 14px;
}
.login-panel .quiet-link {
  display: inline-block;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .guest-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 30px;
  }
  .hero-panel {
    position: static;
    padding: 5px 0 14px;
  }
  .hero-panel h1 {
    font-size: 3.3rem;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .choice-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .site-width {
    padding-left: 17px;
    padding-right: 17px;
  }
  .topbar-inner {
    min-height: 66px;
  }
  .panel {
    padding: 23px 20px;
    border-radius: 15px;
  }
  .guest-layout {
    padding-bottom: 35px;
  }
  .hero-panel h1 {
    font-size: 2.75rem;
  }
  .admin-heading {
    align-items: start;
    flex-direction: column;
  }
  .admin-heading h1 {
    font-size: 2.5rem;
  }
  .topbar-actions {
    gap: 11px;
  }
  .topbar-actions .micro {
    display: none;
  }
  .panel-heading {
    display: block;
  }
  .search-label input {
    min-width: 0;
  }
  .stats-grid {
    gap: 10px;
  }
  .stat-card {
    padding: 16px 13px;
  }
  .stat-card b {
    font-size: 1.8rem;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .span-2 {
    grid-column: auto;
  }
  .steps {
    gap: 5px;
  }
  .steps button {
    font-size: 0.67rem;
    padding: 9px 2px;
  }
  .setup-heading h1 {
    font-size: 2.65rem;
  }
  .footer {
    display: block;
  }
  .footer span {
    display: block;
  }
  .session-row {
    align-items: start;
    flex-direction: column;
  }
}

.food-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.food-controls input {
  width: 75px;
}
.food-controls .btn {
  min-height: 40px;
  padding: 7px 12px;
}
.admin-layout .notice {
  max-width: 100%;
}

/* Nested household management and sortable food management */
.hierarchy-view {
  display: grid;
  gap: 22px;
}
.hierarchy-section {
  background: #fbfcfa;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
}
.hierarchy-section > h3 {
  margin: 0 0 14px;
}
.hierarchy-group {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  margin-top: 12px;
}
.hierarchy-group > h4 {
  margin: 0 0 11px;
  font-size: 0.9rem;
}
.household-node {
  border-left: 3px solid #accfc0;
  background: #f8faf7;
  border-radius: 0 9px 9px 0;
  padding: 10px 12px;
  margin-top: 7px;
}
.household-node-main,
.food-manage-main {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  align-items: center;
}
.household-node-name {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.household-node-name small {
  width: 100%;
}
.household-guests {
  display: block;
  margin-top: 6px;
}
.household-actions,
.food-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.household-actions button,
.food-item-actions button,
.food-category-heading button {
  min-width: 22px;
}
.parent-picker,
.food-category-picker {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.parent-picker select,
.food-category-picker select {
  width: auto;
  max-width: 205px;
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.78rem;
}
.food-admin-list {
  display: grid;
  gap: 17px;
}
.food-category {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 16px;
  background: #fbfcfb;
}
.food-category-heading {
  display: flex;
  gap: 11px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.food-category-heading h3 {
  margin: 0;
}
.food-manage-item {
  border-bottom: 1px solid #e6eee9;
  padding: 12px 0;
}
.food-manage-item:last-child {
  border-bottom: 0;
}
.food-manage-main strong,
.food-manage-main small {
  display: block;
}
.food-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 15px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: white;
  border: 1px solid var(--line);
}
.food-edit-form label {
  display: grid;
  gap: 4px;
  font-size: 0.77rem;
  font-weight: 700;
}
.food-edit-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.food-edit-buttons {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
}
.food-edit-form textarea {
  min-height: 65px;
}
.food-edit-form input,
.food-edit-form textarea {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.86rem;
}
@media (max-width: 730px) {
  .household-node-main,
  .food-manage-main {
    align-items: flex-start;
    flex-direction: column;
  }
  .household-actions,
  .food-item-actions {
    width: 100%;
  }
  .parent-picker select,
  .food-category-picker select {
    max-width: 170px;
  }
  .food-edit-form {
    grid-template-columns: 1fr;
  }
  .hierarchy-group {
    padding: 9px;
  }
  .hierarchy-section {
    padding: 11px;
  }
  .household-node {
    padding: 9px;
  }
}
/* Settings navigation: keep event configuration and administrator access together. */
.settings-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.settings-tabs button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 16px;
  font-size: 0.85rem;
}
.settings-tabs button.active,
.settings-tabs button[aria-pressed="true"] {
  color: white;
  background: var(--teal);
  border-color: var(--teal);
}
.settings-subsection {
  display: grid;
  gap: 22px;
}
.settings-subsection.hidden {
  display: none !important;
}

/* Compact admin workspace and deliberate View/Edit modes. */
.admin-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mode-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.mode-switch button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}
.mode-switch button.active {
  background: var(--teal);
  color: #fff;
}
.admin-layout {
  padding-top: 30px;
  padding-bottom: 60px;
}
.admin-heading {
  margin-bottom: 14px;
}
.admin-heading h1 {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  margin-bottom: 5px;
}
.admin-heading .eyebrow {
  margin-bottom: 7px;
}
.admin-heading .muted {
  margin-bottom: 0;
  font-size: 0.84rem;
}
.admin-layout .panel {
  padding: 20px 23px;
  border-radius: 13px;
  box-shadow: none;
}
.admin-layout .panel h2 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.admin-layout .panel h3 {
  margin-top: 16px;
}
.admin-layout .tab-bar {
  margin-bottom: 18px;
}
.admin-layout .tab-bar button {
  padding: 10px 15px;
}
.admin-layout .tab-section {
  gap: 15px;
}
.admin-layout .stats-grid {
  gap: 10px;
}
.admin-layout .stat-card {
  padding: 14px 16px;
  border-radius: 10px;
}
.admin-layout .stat-card b {
  font-size: 1.7rem;
}
.admin-layout .hierarchy-section,
.admin-layout .hierarchy-group,
.admin-layout .food-category {
  margin-bottom: 12px;
}
.admin-layout .household-node,
.admin-layout .food-manage-item {
  padding: 9px 10px;
  border-radius: 8px;
}
.admin-layout .household-node-main,
.admin-layout .food-manage-main {
  gap: 10px;
}
.publication-panel {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 17px;
}
.publication-panel .notice {
  margin-bottom: 9px;
}
.publish-ack {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  margin: 12px 0;
}
.publish-ack input {
  width: auto;
  flex: none;
  margin-top: 5px;
}
.publication-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 650px) {
  .admin-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
  .admin-layout .panel {
    padding: 17px 15px;
  }
  .admin-layout .tab-bar button {
    padding: 9px 12px;
  }
}

/* Approved compact admin design: text tabs and icon-only top toolbar */
#adminApp .admin-heading {
  align-items: center;
  margin-bottom: 10px;
}
#adminApp .admin-heading .eyebrow {
  font-size: 0.65rem;
  margin-bottom: 4px;
}
#adminApp .admin-heading h1 {
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  margin-bottom: 3px;
}
#adminApp .admin-heading .muted {
  font-size: 0.76rem;
}
#adminApp .admin-heading-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: auto;
}
#adminApp .admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  padding: 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
#adminApp .admin-icon-btn:hover {
  background: #edf5ef;
  border-color: #b2cbbd;
}
#adminApp .admin-icon-btn.active,
#adminApp .admin-icon-btn[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}
#adminApp .admin-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#adminApp .admin-icon-btn:disabled {
  cursor: progress;
  opacity: 0.62;
}
#adminApp .admin-icon-btn.is-refreshing svg {
  animation: admin-refresh-spin 0.8s linear infinite;
}
@keyframes admin-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
#adminApp .admin-icon-btn:focus-visible,
#adminApp .admin-main-tabs button:focus-visible,
#adminApp .tree-disclosure > summary:focus-visible,
#adminApp .admin-row-icon:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
#adminApp .admin-main-tabs {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 4.2vw, 52px);
  overflow-x: auto;
  padding: 0 8px;
  margin: 3px 0 17px;
  border-bottom: 2px solid #dce5de;
  scrollbar-width: thin;
}
#adminApp .admin-main-tabs button {
  position: relative;
  flex: none;
  background: transparent;
  border: 0;
  padding: 13px 6px 16px;
  font-size: clamp(1.05rem, 2vw, 1.65rem);
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
  color: #677b78;
}
#adminApp .admin-main-tabs button.active {
  color: #126f5e;
  border: 0;
}
#adminApp .admin-main-tabs button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: #126f5e;
}
/* Settings is a toolbar drawer, not a fourth navigation tab */
#adminApp .settings-drawer {
  background: #f0f5ef;
  border: 1px solid #d5e2d8;
  border-radius: 13px;
  padding: 14px 16px;
  margin-bottom: 15px;
  max-height: 76vh;
  overflow: auto;
}
#adminApp .settings-drawer-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
#adminApp .settings-drawer-heading h2 {
  margin: 0;
  font-size: 1.1rem;
}
#adminApp .settings-drawer-heading .admin-icon-btn {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  font-size: 1.25rem;
}
#adminApp .settings-tabs {
  padding-bottom: 10px;
  margin-bottom: 14px;
}
#adminApp .settings-tabs button {
  font-size: 0.77rem;
  padding: 8px 12px;
}
#adminApp .settings-subsection {
  gap: 11px;
}
#adminApp .settings-drawer .panel {
  padding: 15px;
  box-shadow: none;
  border-radius: 11px;
}
#adminApp .settings-drawer .panel h2 {
  font-size: 1.03rem;
}
#adminApp .settings-management > .panel {
  margin-top: 9px;
}
#adminApp .admin-management {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
}
#adminApp .admin-management > summary {
  padding: 10px 13px;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
#adminApp .admin-management > summary::before {
  content: "▸";
  color: var(--teal);
  margin-right: 8px;
}
#adminApp .admin-management[open] > summary::before {
  content: "▾";
}
#adminApp .admin-management > summary::-webkit-details-marker {
  display: none;
}
#adminApp .admin-management > form {
  margin: 2px 13px 14px;
}
#adminApp .admin-management > .panel {
  border: 0;
  margin: 0;
}
#adminApp .household-toolbar {
  display: flex;
  gap: 8px;
  margin: 5px 0 11px;
  flex-wrap: wrap;
}
#adminApp .small-tool {
  background: white;
  border: 1px solid var(--line);
  padding: 6px 11px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.76rem;
}
#adminApp .small-tool:hover {
  background: var(--light);
}
#adminApp .hierarchy-view {
  display: grid;
  gap: 8px;
}
#adminApp .tree-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
#adminApp .tree-disclosure > summary::-webkit-details-marker {
  display: none;
}
#adminApp .hierarchy-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
#adminApp .tree-planning-group,
#adminApp .tree-group {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}
#adminApp .tree-planning-group {
  background: var(--ink);
  color: white;
}
#adminApp .tree-group {
  background: #e9eee7;
  color: var(--ink);
}
#adminApp .tree-planning-group::before,
#adminApp .tree-group::before {
  content: "⌄";
  font-size: 1.05rem;
  line-height: 1;
}
#adminApp details:not([open]) > .tree-planning-group::before,
#adminApp details:not([open]) > .tree-group::before {
  content: "›";
}
#adminApp .tree-count {
  margin-left: auto;
  font-size: 0.67rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
#adminApp .tree-planning-group .tree-count {
  color: #d8e3df;
}
#adminApp .tree-children {
  margin-left: 17px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
#adminApp .hierarchy-group {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 7px 0;
}
#adminApp .household-tree-node {
  margin-top: 6px;
}
#adminApp .household-tree-node[open] > .household-node {
  border-color: #bdd2c4;
}
#adminApp .household-node {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: white;
  border-left-width: 1px;
}
#adminApp .household-tree-node > summary.household-node {
  cursor: pointer;
}
#adminApp
  .household-tree-node
  > summary.household-node
  .household-node-name
  strong::before {
  content: "⌄ ";
  color: var(--teal);
}
#adminApp
  .household-tree-node:not([open])
  > summary.household-node
  .household-node-name
  strong::before {
  content: "› ";
}
#adminApp .household-node-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
}
#adminApp .household-node-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
#adminApp .household-node-name strong {
  font-size: 0.81rem;
  line-height: 1.4;
}
#adminApp .household-node-name small {
  width: auto;
  font-size: 0.7rem;
}
#adminApp .household-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  margin-left: auto;
}
#adminApp .household-guests {
  font-size: 0.68rem;
  margin: 3px 7px 7px;
}
#adminApp .household-inline-editor {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 8px;
  margin: 6px 0;
  background: #f3f7f4;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#adminApp .admin-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  min-width: 29px;
  padding: 2px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}
#adminApp .admin-row-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#adminApp .admin-row-icon:hover:not(:disabled) {
  background: var(--light);
  border-color: #aecabd;
}
#adminApp .admin-row-icon.danger,
#adminApp .admin-row-icon[title*="Deletion"] {
  color: var(--danger);
}
#adminApp .admin-row-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#adminApp .household-inline-editor .parent-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#adminApp .household-inline-editor .parent-picker select {
  max-width: 220px;
  min-height: 32px;
}
#adminApp .food-category {
  padding: 0;
  margin: 0 0 9px;
  background: white;
  overflow: hidden;
  border-radius: 10px;
}
#adminApp .food-category-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #e9eee7;
  border: 0;
}
#adminApp .food-category-heading::before {
  content: "⌄";
  color: var(--teal);
  font-weight: 700;
}
#adminApp .food-category:not([open]) > .food-category-heading::before {
  content: "›";
}
#adminApp .food-category-title {
  font-size: 0.83rem;
  font-weight: 700;
}
#adminApp .food-heading-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
#adminApp .food-category-items {
  padding: 0 11px;
}
#adminApp .food-manage-item {
  padding: 9px 3px;
  border-radius: 0;
  border-bottom: 1px solid #e7eee9;
}
#adminApp .food-manage-item:last-child {
  border-bottom: 0;
}
#adminApp .food-manage-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#adminApp .food-item-info strong {
  font-size: 0.82rem;
}
#adminApp .food-item-info small {
  font-size: 0.7rem;
}
#adminApp .food-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
#adminApp .food-item-actions .food-category-picker {
  margin-left: 7px;
}
#adminApp .food-edit-form {
  margin-top: 8px;
}
@media (max-width: 700px) {
  #adminApp .admin-heading {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  #adminApp .admin-heading-actions {
    width: auto;
    margin-left: auto;
  }
  #adminApp .admin-main-tabs {
    gap: clamp(11px, 4vw, 25px);
    padding: 0 4px;
  }
  #adminApp .admin-main-tabs button {
    font-size: clamp(1rem, 4.8vw, 1.25rem);
    padding: 10px 5px 12px;
  }
  #adminApp .settings-drawer {
    padding: 12px;
    max-height: 75vh;
  }
  #adminApp .household-node-main,
  #adminApp .food-manage-main {
    flex-direction: row;
    align-items: center;
  }
  #adminApp .household-actions,
  #adminApp .food-item-actions {
    width: auto;
  }
  #adminApp .household-node-name {
    flex: 1;
    min-width: 110px;
  }
  #adminApp .food-item-info {
    min-width: 0;
  }
  #adminApp .food-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #adminApp .tree-children {
    margin-left: 10px;
    padding-left: 7px;
  }
}
@media (max-width: 430px) {
  #adminApp .admin-icon-btn {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }
  #adminApp .admin-heading-actions {
    gap: 5px;
  }
  #adminApp .tree-planning-group,
  #adminApp .tree-group {
    padding: 8px 9px;
  }
  #adminApp .household-node {
    padding: 7px;
  }
  #adminApp .household-node-name small {
    font-size: 0.64rem;
  }
  #adminApp .admin-row-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
  #adminApp .tree-count {
    font-size: 0.6rem;
  }
}

/* Expanded household guest list, restored after the compact tree redesign. */
#adminApp .household-expanded {
  margin: 3px 0 9px 11px;
  padding: 1px 0 1px 12px;
  border-left: 1px solid var(--line);
}
#adminApp .guest-list-heading {
  color: var(--muted);
  font-size: 0.67rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 9px 0 5px;
}
#adminApp .household-guest-list {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}
#adminApp .household-guest-entry {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
#adminApp .household-guest-row {
  min-height: 41px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
}
#adminApp .household-guest-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
  min-width: 0;
}
#adminApp .household-guest-info strong {
  font-size: 0.78rem;
  line-height: 1.35;
}
#adminApp .household-guest-info small {
  font-size: 0.67rem;
}
#adminApp .household-guest-row .admin-row-icon {
  flex: none;
}
#adminApp .guest-edit-form {
  margin: 0 10px 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7faf7;
}
#adminApp .guest-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#adminApp .guest-edit-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
}
#adminApp .guest-edit-field input,
#adminApp .guest-edit-field select,
#adminApp .guest-edit-field textarea {
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  font-size: 0.78rem;
}
#adminApp .guest-edit-field textarea {
  min-height: 64px;
  resize: vertical;
}
#adminApp .guest-child-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  align-self: end;
  min-height: 36px;
}
#adminApp .guest-child-field input {
  width: auto;
  min-height: 0;
}
#adminApp .guest-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 10px;
}
#adminApp .guest-edit-actions button {
  min-height: 35px;
  padding: 7px 13px;
  font-size: 0.76rem;
}
@media (max-width: 600px) {
  #adminApp .household-expanded {
    margin-left: 4px;
    padding-left: 7px;
  }
  #adminApp .guest-edit-fields {
    grid-template-columns: 1fr;
  }
  #adminApp .household-guest-info {
    display: block;
  }
  #adminApp .household-guest-info strong,
  #adminApp .household-guest-info small {
    display: block;
  }
}

/* Unified top navigation and a full, navigable Settings page. */
.topbar .admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.topbar .admin-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbar .admin-top-actions.hidden {
  display: none !important;
}
.topbar .admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  height: 36px;
  width: 36px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.topbar .admin-icon-btn:hover {
  background: var(--light);
  border-color: var(--teal);
}
.topbar .admin-icon-btn.active,
.topbar .admin-icon-btn[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.topbar .admin-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.topbar .admin-icon-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.topbar .admin-icon-btn:focus-visible,
.settings-back:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.topbar .admin-icon-btn.is-refreshing svg {
  animation: admin-refresh-spin 0.8s linear infinite;
}
.topbar .admin-icon-btn .theme-sun {
  display: none;
}
html[data-theme="dark"] .topbar .admin-icon-btn .theme-sun {
  display: block;
}
html[data-theme="dark"] .topbar .admin-icon-btn .theme-moon {
  display: none;
}
.topbar .admin-identity {
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#adminApp.showing-settings .admin-main-tabs {
  display: none;
}
#adminApp .settings-page {
  max-width: 100%;
  padding: 0;
  margin-bottom: 16px;
  gap: 12px;
}
#adminApp .settings-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0 6px;
}
#adminApp .settings-page-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 500;
  margin: 4px 0;
}
#adminApp .settings-page-heading .muted {
  margin: 0;
}
#adminApp .settings-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.83rem;
  font-weight: 650;
}
#adminApp .settings-back:hover {
  background: var(--light);
}
#adminApp .settings-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#adminApp .settings-page .settings-tabs {
  margin: 3px 0 10px;
  border-bottom: 1px solid var(--line);
}
#adminApp .settings-page .settings-subsection {
  display: grid;
  gap: 15px;
}
#adminApp .settings-page .settings-subsection.hidden {
  display: none !important;
}
#adminApp .settings-page .panel {
  max-width: 100%;
  background: var(--white);
}
#adminApp .settings-page .settings-management {
  background: var(--white);
}
@media (max-width: 700px) {
  .topbar .admin-topbar-actions {
    gap: 6px;
  }
  .topbar .admin-top-actions {
    gap: 4px;
  }
  .topbar .admin-identity {
    display: none;
  }
}
@media (max-width: 430px) {
  .topbar-inner {
    min-height: 61px;
    gap: 7px;
    padding: 0 10px;
  }
  .topbar .brand {
    font-size: 0.93rem;
    gap: 6px;
  }
  .topbar .brand-symbol {
    width: 28px;
    height: 28px;
    font-size: 18px;
    border-radius: 8px;
  }
  .topbar .brand-soft {
    display: none;
  }
  .topbar .admin-icon-btn {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    padding: 5px;
    border-radius: 7px;
  }
  .topbar .admin-icon-btn svg {
    width: 17px;
    height: 17px;
  }
  .topbar .admin-top-actions {
    gap: 3px;
  }
  #adminApp .settings-page-heading h2 {
    font-size: 1.6rem;
  }
}
/* System-following dark mode shared by every page. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101a18;
  --white: #1b2925;
  --ink: #ecf3ef;
  --muted: #a9bfb6;
  --line: #344b41;
  --teal: #3b9377;
  --teal-dark: #6fc4a6;
  --action-text: var(--teal-dark);
  --light: #253b32;
  --warning: #3c301f;
  --danger: #ff9b94;
  --success: #1e4430;
  --shadow: 0 14px 45px rgba(0, 0, 0, 0.26);
}
html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="dark"] .topbar {
  background: #17251f;
  border-color: var(--line);
}
html[data-theme="dark"] .brand {
  color: var(--ink);
}
html[data-theme="dark"] .brand-soft {
  color: var(--muted);
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] #adminApp .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] #adminApp .settings-page .panel,
html[data-theme="dark"] .login-panel {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .muted,
html[data-theme="dark"] .micro,
html[data-theme="dark"] .small {
  color: var(--muted);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #13231e;
  color: var(--ink);
  border-color: var(--line);
  color-scheme: dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #91a89d;
}
html[data-theme="dark"] button:not(.btn),
html[data-theme="dark"] .quiet-link {
  color: inherit;
}
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .small-tool,
html[data-theme="dark"] .admin-row-icon,
html[data-theme="dark"] #adminApp .settings-back {
  background: #23352e;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] #adminApp .admin-main-tabs {
  border-color: var(--line);
}
html[data-theme="dark"] #adminApp .admin-main-tabs button {
  color: #a2b9ac;
}
html[data-theme="dark"] #adminApp .admin-main-tabs button.active {
  color: #8bdfba;
}
html[data-theme="dark"] #adminApp .admin-main-tabs button.active::after {
  background: #8bdfba;
}
html[data-theme="dark"] #adminApp .tree-planning-group {
  background: #24443a;
  color: var(--ink);
}
html[data-theme="dark"] #adminApp .tree-group,
html[data-theme="dark"] #adminApp .food-category-heading {
  background: #2a4037;
  color: var(--ink);
}
html[data-theme="dark"] #adminApp .tree-planning-group .tree-count,
html[data-theme="dark"] #adminApp .tree-count {
  color: #c5d6cc;
}
html[data-theme="dark"] #adminApp .household-node,
html[data-theme="dark"] #adminApp .household-guest-entry,
html[data-theme="dark"] #adminApp .food-category,
html[data-theme="dark"] #adminApp .food-manage-item,
html[data-theme="dark"] #adminApp .admin-management,
html[data-theme="dark"] #adminApp .guest-edit-form,
html[data-theme="dark"] #adminApp .food-edit-form,
html[data-theme="dark"] #adminApp .household-inline-editor {
  background: #1d2d27;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] #adminApp .household-tree-node[open] > .household-node {
  border-color: #4e7765;
}
html[data-theme="dark"] #adminApp .household-guest-row {
  background: transparent;
}
html[data-theme="dark"] #adminApp .settings-tabs {
  border-color: var(--line);
}
html[data-theme="dark"] #adminApp .settings-tabs button {
  background: #22362d;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] #adminApp .settings-tabs button.active {
  background: var(--teal);
  color: white;
}
html[data-theme="dark"] #adminApp .admin-management > summary {
  color: var(--ink);
}
html[data-theme="dark"] #adminApp .check-list li,
html[data-theme="dark"] .admin-member,
html[data-theme="dark"] #adminApp .food-manage-item {
  border-color: var(--line);
}
html[data-theme="dark"] .notice {
  background: #263f32;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .notice.warning {
  background: #3b3320;
}
html[data-theme="dark"] .notice.error {
  background: #4a2928;
}
html[data-theme="dark"] .notice.success {
  background: #1e4430;
}
html[data-theme="dark"] .tag {
  background: #293e34;
  color: #cae5d7;
}
html[data-theme="dark"] .eyebrow {
  color: #8cd5b2;
}

/* Native summary marker must not duplicate the custom household disclosure chevron. */
#adminApp .household-tree-node > summary.household-node {
  list-style: none;
  display: block;
}
#adminApp
  .household-tree-node
  > summary.household-node::-webkit-details-marker {
  display: none;
}
#adminApp .household-tree-node > summary.household-node::marker {
  content: "";
}

/* Admin-specific dark controls override the original ID-scoped light button styles. */
html[data-theme="dark"] #adminApp .admin-row-icon,
html[data-theme="dark"] #adminApp .small-tool,
html[data-theme="dark"] #adminApp .tool-btn,
html[data-theme="dark"] #adminApp .text-button {
  background: #253c32;
  color: #e3f2e8;
  border-color: #486357;
}
html[data-theme="dark"] #adminApp .admin-row-icon:disabled {
  background: #24312b;
  color: #aebcb0;
  opacity: 0.5;
}
html[data-theme="dark"] #adminApp .admin-row-icon.danger {
  color: #ff9b94;
}
html[data-theme="dark"] #adminApp .admin-row-icon:hover:not(:disabled),
html[data-theme="dark"] #adminApp .small-tool:hover {
  background: #345043;
  border-color: #5d947a;
}

/* Household lifecycle editors retain compact, theme-aware native controls. */
.management-form {
  padding: 12px 0;
  max-width: 760px;
}
.management-form input,
.management-form select,
.management-form textarea {
  min-width: 0;
  width: 100%;
}
.management-form input[type="checkbox"] {
  width: auto;
}
.management-form > button {
  justify-self: start;
  align-self: end;
}
.guest-management {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 4px 0 10px;
}
.guest-management > details {
  flex: 1;
}
.management-history {
  max-width: 100%;
  overflow: auto;
}
.management-history td {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 240px;
}
.household-expanded > .admin-management {
  margin: 8px 0;
}
.management-form .micro {
  margin: 0;
}
.household-inline-editor:has(.management-form) {
  flex-wrap: wrap;
}
.household-inline-editor > .management-form {
  flex-basis: 100%;
}
@media (max-width: 600px) {
  .management-form {
    grid-template-columns: 1fr;
  }
  .management-form .span-2 {
    grid-column: auto;
  }
  .guest-management {
    flex-wrap: wrap;
  }
}

#adminApp .archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 6px 0 12px;
  font-size: 0.8rem;
  color: var(--muted);
}
#adminApp .archive-toggle input {
  width: auto;
  margin: 0;
}
.guest-management > .admin-management {
  margin: 0;
}

html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] .language-switch,
html[data-theme="dark"] .guest-response,
html[data-theme="dark"] .radio-pill,
html[data-theme="dark"] .choice,
html[data-theme="dark"] .steps button,
html[data-theme="dark"] .food-item,
html[data-theme="dark"] .admin-member {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .language-switch button.selected,
html[data-theme="dark"] .steps button.active {
  background: var(--teal);
  color: white;
}
html[data-theme="dark"] .lede {
  color: var(--muted);
}
html[data-theme="dark"] .food-item input:disabled,
html[data-theme="dark"] .choice:has(input:checked),
html[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--light);
}
#adminApp details.household-inline-editor {
  display: block;
  padding: 8px;
  margin: 8px 0;
}
.household-profile-summary {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
  gap: 6px 12px;
  font-size: 0.82rem;
}
.household-profile-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.household-profile-summary dt {
  color: var(--muted);
}
.invite-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.invite-row code {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 4px;
}
.invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .invite-row {
    align-items: start;
    flex-direction: column;
  }
  .topbar-inner {
    gap: 8px;
  }
  .topbar .brand {
    font-size: 0.8rem;
  }
  .topbar-actions {
    gap: 8px;
  }
  .admin-main-tabs button {
    font-size: 0.9rem !important;
  }
}

.invite-item {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.invite-item > .admin-management {
  margin-top: 4px;
}
.session-venue {
  white-space: normal;
  overflow-wrap: anywhere;
}
#venueList > .admin-management,
#sessionsList > .admin-management {
  margin: 8px 0;
}

/* Appearance choice and compact household actions. */
.theme-control {
  position: relative;
  flex-shrink: 0;
}
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 100;
  width: 205px;
  padding: 16px;
  background: var(--white, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.theme-menu label {
  display: grid;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}
.theme-menu select {
  font-size: 0.85rem;
}
#adminApp .admin-main-tabs [data-tab="invites"] {
  margin-left: 0;
}
#adminApp .household-guest-row > .guest-management {
  margin: 0;
  gap: 6px;
  flex-shrink: 0;
}
#adminApp .household-guest-row {
  gap: 6px;
}
#adminApp .household-guest-info {
  flex: 1;
}
.guest-move-panel {
  padding: 0 12px;
}
.guest-move-panel form {
  margin: 0;
}
#adminApp #inviteRows .invite-item {
  border: 0;
  padding: 8px 0;
}
html[data-theme="dark"] code {
  background: #253b32;
  color: var(--ink);
}
@media (max-width: 600px) {
  .topbar .admin-topbar-actions {
    gap: 5px;
  }
  .topbar .admin-top-actions {
    gap: 5px;
  }
  .topbar .admin-icon-btn {
    width: 29px;
    height: 29px;
    min-width: 29px;
  }
  .topbar .brand-symbol {
    width: 28px;
    height: 28px;
  }
  .topbar .brand {
    gap: 5px;
  }
  .theme-menu {
    right: auto;
    left: 0;
  }
  #adminApp .admin-main-tabs {
    gap: 5px;
  }
}

.rsvp-current-responses {
  margin: 12px 0;
}
.household-expanded .management-history p {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

#adminApp .admin-main-tabs button {
  font-size: clamp(1rem, 1.75vw, 1.4rem);
}
@media (max-width: 700px) {
  #adminApp .admin-main-tabs button {
    font-size: 1rem;
  }
}
.venue-welcome {
  font-size: 0.9rem;
  margin: 8px 0;
  white-space: pre-wrap;
}

.venue-welcome-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.venue-welcome-editor legend {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 6px;
}
.venue-welcome-editor textarea {
  width: 100%;
}

.management-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  align-self: center;
  justify-self: start;
  margin: 0;
}
.feature-section {
  padding: 0 12px 12px;
}
.feature-section > summary {
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 10px;
}

.status-time {
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  white-space: nowrap;
}

.log-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.log-filters label {
  display: grid;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
}
.log-filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}
.log-entry {
  border-bottom: 1px solid var(--line);
}
.log-entry > summary {
  display: grid;
  grid-template-columns: 165px minmax(160px, 1.5fr) minmax(140px, 1fr) minmax(
      110px,
      1fr
    );
  gap: 14px;
  align-items: center;
  padding: 13px 8px;
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
}
.log-entry time {
  font-variant-numeric: tabular-nums;
  font-size: 0.73rem;
}
.log-entry small,
.log-subject strong {
  display: block;
}
.log-subject,
.log-actor {
  overflow-wrap: anywhere;
}
.log-details {
  padding: 12px;
  background: var(--light);
  border-radius: 8px;
  overflow: auto;
}
.log-details td {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 320px;
}
.log-details pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.8rem;
}
.log-detail-value {
  margin: 10px 0;
}
.log-detail-value strong {
  text-transform: capitalize;
  font-size: 0.8rem;
}
#logMore {
  margin-top: 20px;
}
@media (max-width: 700px) {
  .log-filters {
    grid-template-columns: 1fr 1fr;
  }
  .log-filters > label:first-child {
    grid-column: 1/-1;
  }
  .log-entry > summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .log-filter-actions {
    flex-wrap: wrap;
  }
  .log-filters input,
  .log-filters select {
    min-width: 0;
  }
}

.log-entry > summary time::before {
  content: "› ";
  color: var(--teal);
}
.log-entry[open] > summary time::before {
  content: "⌄ ";
}

#adminApp .contact-list {
  display: grid;
  gap: 10px;
  padding: 8px 12px 12px;
}
.contact-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white, #fff);
  min-width: 0;
}
.contact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 14px;
}
.contact-card-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.contact-card-info > strong {
  font-size: 0.88rem;
}
.contact-card-value {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.contact-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.73rem;
  color: var(--muted);
}
.contact-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.contact-editor {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}
#adminApp .contact-form {
  max-width: none;
  margin: 0;
  padding: 16px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
#adminApp .contact-form input:not([type="checkbox"]),
#adminApp .contact-form select {
  min-height: 44px;
  height: 44px;
  padding: 10px 12px;
  width: 100%;
  font-size: 0.86rem;
}
.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  #adminApp .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form .span-2 {
    grid-column: auto;
  }
  .contact-card-header {
    gap: 8px;
    padding: 12px;
  }
  .contact-editor {
    padding: 0 12px 12px;
  }
  #adminApp .contact-list {
    padding: 8px;
    gap: 8px;
  }
}

.contact-guest-search {
  margin: 0 !important;
  padding: 0;
}
.contact-guest-search > label,
.contact-guest-search > p,
.contact-guest-results {
  margin: 10px 12px;
}
.contact-guest-results {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}
.contact-guest-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--light);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
}
.contact-guest-option:hover {
  border-color: var(--teal);
}
.contact-guest-option small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.contact-guest-option strong {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .contact-guest-search > label,
  .contact-guest-search > p,
  .contact-guest-results {
    margin: 8px;
  }
}

/* Administrator invitations retain the member-card hierarchy at narrow widths. */
.admin-invite-form {
  padding: 18px 14px;
}
.admin-invite-form p {
  margin: 0;
}
.admin-invitation-details {
  min-width: 0;
  flex: 1 1 240px;
}
.admin-invitation-details .email {
  overflow-wrap: anywhere;
}
.admin-invitation-details p {
  margin: 5px 0 0;
}
.admin-invitation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-invitation-status {
  flex-basis: 100%;
  margin: 0;
}
.admin-invitation-status:empty {
  display: none;
}
#invitationPasswordFields {
  display: grid;
  gap: 16px;
}
#acceptInvitationStatus:empty,
#adminInviteStatus:empty {
  display: none;
}

/* Interface preferences stay compact in the desktop and mobile toolbars. */
.interface-language {
  width: auto;
  min-width: 3.75rem;
  max-width: 5rem;
  padding: 0.45rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}
#interfaceWordingForm select {
  max-width: 100%;
  min-width: 0;
}
.wording-preview {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}
/* Long translated phrases must not set a grid column's minimum width. */
#adminApp .settings-page .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#adminApp .settings-page .form-grid > label {
  min-width: 0;
}
#adminApp .settings-page input,
#adminApp .settings-page select,
#adminApp .settings-page textarea {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 600px) {
  #adminApp .settings-page .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar:has(.admin-topbar-actions) .topbar-inner {
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 7px;
  }
  .topbar .admin-topbar-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* Closed disclosures occupy only their summary, including in Safari. */
#adminApp details:not([open]) > :not(summary) {
  display: none !important;
}
#adminApp .admin-management:not([open]) {
  padding: 0;
}
#adminApp .admin-management:not([open]) > summary {
  margin: 0;
}
#adminApp .hierarchy-view,
#adminApp .food-admin-list {
  align-content: start;
  align-items: start;
}

.language-rows {
  display: grid;
  gap: 0;
  padding: 0 10px 6px;
}
.language-row {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.language-enabled,
.restore-ack {
  display: flex !important;
  align-items: center;
  gap: 9px;
}
.language-enabled input,
.restore-ack input {
  width: auto;
  min-height: 0;
}
.backup-preview {
  margin: 16px 0;
  overflow-wrap: anywhere;
}
#previewBackup {
  margin-top: 12px;
}
#restoreBackupForm {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.language-switch {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .language-switch button {
    padding: 4px 7px;
  }
}

/* Compact invitation rows with inline details. */
#adminApp [data-panel="invites"] {
  grid-template-columns: minmax(0, 1fr);
}
.invite-compact-list {
  margin-top: 8px;
}
.invite-compact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  padding: 3px 2px;
  border-bottom: 1px solid var(--line);
}
.invite-compact-name {
  flex: 1 1 110px;
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.invite-rsvp-state {
  font-size: 0.7rem;
  font-weight: 400;
  margin-inline-start: 8px;
}
#adminApp .invite-household > summary {
  list-style: none;
  cursor: pointer;
}
#adminApp .invite-household > summary::-webkit-details-marker {
  display: none;
}
.invite-household .invite-compact-name::before {
  content: "›";
  color: var(--action-text);
  margin-inline-end: 6px;
}
.invite-household[open] .invite-compact-name::before {
  content: "⌄";
}
#adminApp .invite-household > summary:focus-visible {
  outline: 2px solid var(--action-text);
  outline-offset: -2px;
}
.invite-household-content {
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}
#adminApp .invite-household-content > .admin-management {
  margin: 6px 0;
}
.invite-household-content .rsvp-current-responses {
  table-layout: fixed;
  overflow-wrap: anywhere;
}

#inviteRows .invite-compact-list .tree-children {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-top: 0;
  padding-bottom: 0;
}
#inviteRows .invite-compact-list .hierarchy-section,
#inviteRows .invite-compact-list .hierarchy-group {
  margin-bottom: 6px;
}

/* Dense navigation and single-line food disclosures. */
#adminApp .admin-main-tabs button {
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  min-height: 38px;
}
#adminApp .admin-main-tabs {
  gap: 4px;
}
.food-compact-item {
  border-bottom: 1px solid var(--line);
  padding: 0 !important;
}
#adminApp .food-compact-item > summary.food-manage-main {
  display: list-item;
  list-style-position: inside;
  cursor: pointer;
  padding: 9px 4px;
  min-height: 42px;
}
.food-compact-item .food-item-info {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - 25px);
  vertical-align: middle;
  flex-direction: row;
}
.food-compact-item .food-item-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.food-compact-item .food-item-info small {
  white-space: nowrap;
  font-size: 0.72rem;
}
.food-expanded {
  padding: 8px 12px;
}
.food-expanded .food-item-actions {
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.food-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.language-row {
  display: grid;
  grid-template-columns: 38px minmax(100px, 1fr) 62px 90px auto;
  gap: 8px;
  padding: 6px 0;
  align-items: center;
}
.language-row input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  min-height: 34px;
}
.language-row .btn {
  font-size: 0.76rem;
  padding: 7px 10px;
  min-height: 34px;
}
.language-enabled {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
}
.language-enabled input {
  width: auto;
}
@media (max-width: 600px) {
  .language-row {
    grid-template-columns: 32px minmax(80px, 1fr) 48px 70px;
  }
  .language-row button {
    grid-column: 2/-1;
    justify-self: end;
  }
  .food-compact-item .food-item-info {
    gap: 8px;
  }
  .food-compact-item .food-item-info small {
    font-size: 0.65rem;
  }
}

.guest-food-disclosure {
  display: block !important;
  padding: 0 !important;
}
.guest-food-disclosure > summary {
  padding: 12px;
  cursor: pointer;
}
.guest-food-disclosure > summary .tag {
  margin-left: 12px;
}
.guest-food-details {
  padding: 0 12px 12px;
}

.task-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tasks-sheet-scroll {
  overflow-x: auto;
}
.tasks-sheet {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.tasks-sheet th,
.tasks-sheet td {
  border: 1px solid var(--line);
  padding: 0;
  text-align: left;
}
.tasks-sheet th {
  padding: 8px 10px;
  font-size: 0.8rem;
  background: var(--light);
}
.tasks-sheet th:first-child {
  width: 50%;
}
.tasks-sheet th:nth-child(2) {
  width: 28%;
}
.tasks-sheet th:last-child {
  width: 22%;
}
.tasks-sheet input,
.tasks-sheet select {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 10px;
  min-height: 42px;
}
.tasks-sheet input:disabled,
.tasks-sheet select:disabled {
  opacity: 1;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.food-compact-item > summary.food-manage-main {
  list-style: none;
}
.food-compact-item > summary.food-manage-main::-webkit-details-marker {
  display: none;
}
.food-compact-item > summary.food-manage-main::before {
  content: "›";
  display: inline-block;
  width: 20px;
  color: var(--teal);
  font-weight: 700;
}
.food-compact-item[open] > summary.food-manage-main::before {
  content: "⌄";
}

.tasks-sheet th:first-child {
  width: 28%;
}
.tasks-sheet th:nth-child(2) {
  width: 34%;
}
.tasks-sheet th:nth-child(3) {
  width: 22%;
}
.tasks-sheet th:last-child {
  width: 16%;
}

.recipe-existing {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.recipe-existing label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin: 6px 0;
}
.recipe-existing input {
  width: auto;
}
.recipe-new-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 8px 0;
}
.food-recipe {
  margin: 6px 0;
}
.food-recipe-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.guest-food-disclosure > summary strong {
  display: inline;
}

.icon-popup-control {
  display: inline-flex;
  flex-shrink: 0;
}
.icon-popup-menu {
  position: fixed;
  z-index: 2000;
  width: 230px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.icon-popup-menu label {
  display: grid;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}
.icon-popup-menu select {
  width: 100%;
  max-width: none;
  font-size: 0.85rem;
}
.icon-popup-menu .interface-language {
  max-width: none;
  width: 100%;
}

.food-comment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.food-comment-grid p {
  overflow-wrap: anywhere;
}
.other-add-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
}
.other-add-controls label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
}
.other-category {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.other-category > summary {
  padding: 8px 12px;
  cursor: pointer;
  background: var(--light);
  font-weight: 700;
}
.other-category-body {
  padding: 8px;
}
.other-line {
  display: grid;
  grid-template-columns:
    minmax(100px, 1.2fr) minmax(100px, 1.3fr) minmax(90px, 1fr)
    minmax(90px, 0.75fr) 34px;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
}
.other-line input,
.other-line select {
  width: 100%;
  padding: 8px;
  min-height: 40px;
}
.other-line input:disabled,
.other-line select:disabled {
  opacity: 1;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.other-line button {
  margin-top: 3px;
}
.other-line label {
  display: grid;
  font-size: 0.68rem;
  gap: 3px;
}
.other-line .other-row-status {
  grid-column: 1/-1;
  color: var(--danger);
  font-size: 0.75rem;
}
@media (max-width: 600px) {
  .food-comment-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .other-category-body {
    overflow-x: auto;
  }
  .other-line {
    min-width: 600px;
  }
}

.food-comment-grid p:only-child {
  grid-column: 1/-1;
}
.other-line > button {
  margin-top: 20px;
}
.other-line-category {
  grid-column: 1/-1;
  max-width: 260px;
}
#otherRows {
  min-width: 0;
  max-width: 100%;
}
.other-category {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.other-category-body {
  min-width: 0;
  max-width: 100%;
}
.other-line label,
.other-line input,
.other-line select {
  min-width: 0;
}
[data-panel="other"] > .panel {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

#adminApp .other-line input,
#adminApp .other-line select {
  height: 40px;
  min-height: 40px;
  font-size: 0.8rem;
}
#adminApp .other-line select {
  appearance: none;
  -webkit-appearance: none;
  line-height: normal;
  padding: 8px 24px 8px 8px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 17px,
    calc(100% - 10px) 17px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

.food-item-recipe {
  margin: 0.5rem 0;
  min-width: 0;
}
.food-item-recipe > summary {
  cursor: pointer;
  font-weight: 700;
}
.food-item-recipe .recipe-content {
  margin: 0.6rem 0;
  overflow-wrap: anywhere;
}
.recipe-content h4,
.recipe-content p,
.recipe-content ul {
  margin: 0 0 0.3em;
}
.recipe-content ul {
  padding-inline-start: 1.4em;
}
.recipe-break {
  height: 0.7em;
}

.food-claim-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 3px 0 0 20px;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}
.food-selections:not(:empty) {
  margin: 0 0 10px;
}
.food-selection-actions {
  display: flex;
  gap: 4px;
}
.food-selection-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: end;
  margin: 4px 0;
}
.food-selection-form label {
  display: grid;
  gap: 2px;
  font-size: 0.72rem;
}
.food-selection-form input {
  width: 5em;
}
.food-selection-form .btn {
  padding: 0.35rem 0.6rem;
}
.food-selection-editor > summary {
  cursor: pointer;
  width: max-content;
  padding: 4px 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.food-recipe-dialog {
  width: min(36rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
}
.food-recipe-dialog::backdrop {
  background: #0008;
}
.food-recipe-dialog label {
  grid-column: 1/-1;
}
.food-recipe-dialog textarea {
  width: 100%;
  resize: vertical;
}
.food-selections .data-table {
  width: 100%;
  margin: 0;
}
.food-selections .data-table th,
.food-selections .data-table td {
  padding: 4px 8px;
}
.food-selections .data-table th:nth-child(2) {
  width: 25%;
}
.food-selections .data-table th:last-child {
  width: 6rem;
}
.food-selections .food-selection-editor {
  border: 0;
  padding: 0;
  margin: 4px 8px;
  background: transparent;
}
.food-selections .food-selection-editor:not([open]) {
  width: max-content;
}

#adminApp .food-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#adminApp .food-edit-form > label {
  grid-column: auto;
}

#adminApp .food-edit-form > .span-2,
#adminApp .food-edit-form > .food-edit-buttons {
  grid-column: 1/-1;
}
.food-venue-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px 10px;
  min-width: 0;
}
.food-venue-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.food-venue-options input[type="checkbox"] {
  width: auto;
}

#translationForm.food-matrix-active > :nth-child(n + 3) {
  display: none !important;
}
.food-translation-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.food-translation-picker label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.food-translation-picker select {
  width: 100%;
}
[data-panel="language"] > .panel {
  min-width: 0;
}
.food-translation-grid {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.food-translation-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.65fr) repeat(
      var(--translation-columns, 3),
      minmax(120px, 1fr)
    );
  gap: 8px;
  align-items: start;
  min-width: 485px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.food-translation-row label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  gap: 3px;
  font-size: 0.75rem;
  min-width: 0;
}
.food-translation-row input {
  width: 100%;
  min-width: 0;
}
.food-translation-grid > button {
  margin-top: 10px;
}

.food-type-translation-row {
  grid-template-columns: minmax(85px, 0.65fr) minmax(0, 1fr);
  min-width: 0;
  max-width: 35rem;
}

#translationForm.settings-matrix-active > :nth-child(n + 4) {
  display: none !important;
}
.food-translation-row textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}
.venue-summary-layout {
  display: inline-flex;
  width: calc(100% - 24px);
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
}
.venue-summary-details {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.venue-summary-details small {
  font-size: 0.75rem;
  font-weight: 400;
}
.venue-map-link {
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  text-underline-offset: 2px;
}

.venue-form-actions,
.venue-assignment-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}
.venue-assignment-footer {
  justify-content: flex-end;
}
.venue-assignment-list {
  max-height: 38vh;
  overflow: auto;
  margin: 6px 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.venue-assignment-dialog label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.venue-assignment-dialog input[type="checkbox"] {
  width: auto;
}

#languagePreferences {
  max-width: 38rem;
}
#languagePreferences select {
  width: 100%;
  min-height: 34px;
}

.language-row {
  grid-template-columns: 38px minmax(80px, 1fr) auto 78px auto;
}
.language-order {
  display: flex;
  gap: 4px;
}
@media (max-width: 600px) {
  .language-row {
    grid-template-columns: 28px minmax(55px, 1fr) auto auto;
  }
  .language-row > button {
    grid-column: 2/-1;
  }
}

.admin-member > div:first-child {
  min-width: 0;
  flex: 1;
}
.admin-member-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.admin-member-rename {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.admin-member-rename label {
  display: grid;
  gap: 3px;
  flex: 0 1 18rem;
  min-width: 0;
  font-size: 0.8rem;
}
.admin-member-rename input {
  width: 100%;
  min-width: 0;
}

.venue-form-actions,
.venue-summary-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.venue-summary-links {
  justify-content: flex-end;
  flex-shrink: 0;
}
.venue-form-actions .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.venue-form-actions input[type="checkbox"] {
  width: auto;
}

.session-order-actions {
  display: inline-flex;
  gap: 4px;
  align-self: flex-start;
}

.venue-assignment-category {
  min-width: 0;
  margin: 0 0 8px;
  padding: 4px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.venue-assignment-category:last-child {
  margin-bottom: 0;
}
.venue-assignment-category legend {
  padding: 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
}
.venue-assignment-category .checkbox-label {
  margin-inline-start: 6px;
}

.venue-assignment-list .hierarchy-section,
.venue-assignment-list .hierarchy-group {
  padding: 4px 8px;
  margin: 4px 0;
}
.venue-assignment-list .tree-children {
  min-width: 0;
}
.venue-assignment-list label small {
  margin-inline-start: auto;
  text-align: end;
}

.food-language-dialog {
  width: min(64rem, calc(100vw - 32px));
}
.food-language-dialog .food-translation-row label {
  grid-column: auto;
}
.food-language-dialog form > button ~ button {
  margin-inline-start: 8px;
}
#adminApp .food-language-dialog .btn.secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Shared navigation and compact, explicit-edit lists. */
.translation-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin: 0 0 14px;
}
.translation-tabs button,
html[data-theme] #adminApp .settings-page .settings-tabs button {
  position: relative;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 8px;
  font-weight: 650;
  white-space: nowrap;
}
.translation-tabs button.active,
html[data-theme] #adminApp .settings-page .settings-tabs button.active {
  background: transparent;
  color: var(--teal);
}
.translation-tabs button.active::after,
#adminApp .settings-page .settings-tabs button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
}
.translation-tabs button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.translation-search {
  display: grid;
  gap: 4px;
  max-width: 28rem;
  margin-bottom: 12px;
}
.wording-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.wording-pagination label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.wording-pagination select {
  width: 5rem;
}
.wording-row {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.wording-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
  gap: 14px;
  align-items: start;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.wording-edit-form {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
  background: var(--white);
}
.wording-edit-form label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
}
.wording-edit-form textarea {
  width: 100%;
  min-width: 0;
}
.wording-edit-form button {
  margin-top: 8px;
}
.wording-edit-form button + button {
  margin-inline-start: 8px;
}
.wording-edit-form [role="alert"] {
  margin: 8px 0 0;
}
.language-row {
  grid-template-columns: 36px minmax(100px, 1fr) auto auto;
  align-items: center;
}
.language-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.language-row-actions .language-order {
  display: flex;
  gap: 5px;
}
.other-line {
  display: block;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.other-line-summary {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr)
    minmax(0, 0.75fr) 32px;
  gap: 12px;
  align-items: start;
}
.other-line-value {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}
.other-line-value small {
  font-size: 0.68rem;
}
.other-line-summary > button {
  margin: 0;
}
.other-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
  background: var(--white);
}
.other-edit-form label {
  min-width: 0;
}
.other-edit-form textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}
.other-edit-actions {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
}
.other-edit-actions button {
  margin: 0;
}
#adminApp .food-compact-item .food-item-info {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#adminApp .food-compact-item .food-item-info > strong {
  flex: 1 1 140px;
  min-width: 0;
}
.food-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-inline-start: auto;
}
#adminApp .food-header-actions .food-item-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  gap: 5px;
}
@media (max-width: 600px) {
  .language-row {
    grid-template-columns: 30px minmax(80px, 1fr) auto;
    gap: 7px;
  }
  .language-row-actions {
    grid-column: 2/-1;
  }
  .language-row button {
    grid-column: auto;
    justify-self: auto;
  }
  .other-line {
    min-width: 0;
  }
  .other-line-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
  }
  .other-line-summary > .other-line-value:nth-child(3) {
    grid-column: 1;
  }
  .other-line-summary > .other-line-value:nth-child(4) {
    grid-column: 2;
  }
  .other-line-summary > button {
    grid-column: 3;
    grid-row: 1/3;
  }
  .other-edit-form {
    grid-template-columns: 1fr;
  }
  .wording-summary {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  }
  .food-header-actions {
    width: 100%;
  }
}
.content-translation-editor > h2 {
  display: none;
}
.wording-summary > span,
.other-line-value > span {
  white-space: pre-wrap;
}
/* Consistent reading rows, roomy welcome text, and tablet tap targets. */
.wording-heading {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.other-column-heading {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 651px) {
  .other-line-value > small {
    display: none;
  }
}
@media (max-width: 650px) {
  .other-column-heading {
    display: none;
  }
}
.content-translation-editor .food-type-translation-row {
  max-width: none;
}
@media (pointer: coarse) {
  #adminApp .admin-row-icon,
  #adminApp .small-tool,
  #adminApp .language-row-actions button {
    min-width: 44px;
    min-height: 44px;
  }
  #adminApp .food-item-actions,
  #adminApp .language-row-actions {
    gap: 6px;
  }
  .wording-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
  .other-line-summary {
    grid-template-columns:
      minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr)
      minmax(0, 0.75fr) 44px;
  }
}
@media (pointer: coarse) and (max-width: 650px) {
  .other-line-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
}
#adminApp #addFoodForm {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
#adminApp #addFoodForm > label {
  grid-column: span 2;
}
#adminApp #addFoodForm > label:nth-child(4),
#adminApp #addFoodForm > label:nth-child(5) {
  grid-column: span 3;
}
#adminApp #addFoodForm > .span-2 {
  grid-column: 1/-1;
}
@media (max-width: 600px) {
  #adminApp #addFoodForm > label {
    grid-column: span 3;
  }
}

.other-category > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.other-category > summary::-webkit-details-marker {
  display: none;
}
.other-category > summary::before {
  content: "›";
  color: var(--teal);
}
.other-category[open] > summary::before {
  content: "⌄";
}
.other-category-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.other-category-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.other-category-name-form {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.other-category-name-form label {
  display: grid;
  gap: 4px;
}
.other-category-name-form .other-edit-actions {
  margin-top: 10px;
}
.food-type-manager .type-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.food-type-manager .type-manager-add {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.food-type-manager .type-manager-add label {
  display: grid;
  gap: 4px;
}
.food-type-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .other-category-actions {
    gap: 3px;
  }
  .food-type-manager .type-manager-add {
    grid-template-columns: 1fr;
  }
}
.food-compact-item > summary .food-comment-grid {
  margin: 4px 0 0 20px;
  gap: 4px 16px;
  white-space: pre-wrap;
  color: var(--muted);
  text-align: start;
}
.food-compact-item > summary .food-comment-grid > .small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.food-compact-item > summary .food-comment-grid > .small:only-child {
  grid-column: 1/-1;
}
/* Shared touch targets, category editing and compact visible comment previews. */
@media (pointer: coarse) {
  .topbar .admin-icon-btn,
  #adminApp .admin-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}
@media (pointer: coarse) and (max-width: 600px) {
  .topbar-inner {
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .topbar .admin-topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .topbar .admin-icon-btn {
    padding: 8px;
  }
  .topbar .admin-identity {
    display: none;
  }
}
.food-category-name-form {
  margin: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.food-category-name-form label {
  display: grid;
  gap: 4px;
}
.food-category-name-form .other-edit-actions {
  margin-top: 10px;
}
.category-feedback {
  margin: 8px 12px;
}
.food-comment-grid.comment-preview > .small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.comment-more {
  margin-left: 20px;
  font-size: 0.72rem;
  min-height: 32px;
}
#adminApp .admin-main-tabs {
  scroll-behavior: smooth;
  scroll-padding-inline: 12px;
  background:
    linear-gradient(to right, var(--paper), transparent 16px),
    linear-gradient(to left, var(--paper), transparent 16px);
  background-attachment: local;
}
.wording-category-tabs {
  gap: 5px;
  flex-wrap: wrap;
  overflow-x: visible;
  margin-top: -4px;
}
.wording-category-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  padding: 8px 10px;
}
.wording-category-count {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--light);
  border-radius: 8px;
  padding: 0 5px;
}
@media (pointer: coarse) {
  .wording-category-tabs button {
    min-height: 44px;
  }
}
/* Main / content Languages / Settings share the event header. */
.admin-section-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 8px;
}
.topbar .admin-section-menu .admin-icon-btn {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px;
}
.topbar .admin-section-menu .admin-icon-btn[aria-pressed="true"] {
  border-bottom-color: var(--teal);
  background: var(--light);
  color: var(--teal);
}
.admin-section-description {
  font-size: 0.82rem;
  margin-bottom: 14px;
}
#adminApp.showing-language .admin-main-tabs {
  display: none;
}
#interfaceLanguageHost label,
#interfaceAppearanceHost label {
  display: grid;
  gap: 5px;
}
.other-line[data-new-item="true"] > .other-line-summary {
  display: none;
}
.other-line[data-new-item="true"] {
  border: 0;
  padding: 0;
  margin-bottom: 12px;
}
.food-inline-create {
  margin: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.food-inline-create .btn {
  margin-right: 6px;
}
@media (max-width: 600px) {
  .food-inline-create {
    margin: 8px;
    padding: 10px;
  }
}

.topbar .admin-section-menu {
  margin: 0;
  flex-shrink: 0;
}

/* Shared editor/read states and navigation rhythm. */
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1/-1;
  margin-top: 10px;
}
.form-actions > .btn {
  margin: 0;
}
.form-actions > .form-feedback {
  flex-basis: 100%;
  margin: 0;
}
.form-feedback[data-state="saving"] {
  color: var(--muted);
}
.form-feedback[data-state="saved"] {
  color: var(--teal);
}
.form-feedback[data-state="error"] {
  color: var(--danger, #b85248);
}
.record-read-grid {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 5px 16px;
  margin: 8px 0 14px;
  font-size: 0.82rem;
}
.record-read-grid dt {
  color: var(--muted);
}
.record-read-grid dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#adminApp .reading-editor {
  display: none !important;
}
#adminApp .reading-editor.record-open {
  display: grid !important;
}
#adminApp .form-reading.editing-open {
  display: none;
}
.record-pencil {
  margin: 8px 0;
}
#adminApp .translation-field + .translation-reading {
  display: none !important;
}
.translation-reading {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  padding: 5px 0;
}
.topbar .section-icon-label {
  display: none;
  font-size: 0.78rem;
  font-weight: 650;
}
.topbar .admin-section-menu .admin-icon-btn.section-current {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  flex-basis: auto;
  min-width: 44px;
}
.topbar .section-current .section-icon-label {
  display: inline;
}
.topbar .section-current svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .record-read-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .record-read-grid dd {
    margin-bottom: 8px;
  }
}

/* Action symbols belong to the interface, outside translated wording. */

/* Administrator access editors and server-backed section visibility. */
.permission-summary {
  margin-top: 5px !important;
  color: var(--muted);
}
.access-pencil {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.access-pencil svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.permission-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin: 0 0 16px;
  background: var(--panel);
}
.permission-editor h3 {
  margin: 0;
  font-size: 1rem;
}
.permission-presets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 15px 0;
}
#adminApp .permission-presets button[aria-pressed="true"] {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
}
.permission-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, 76px);
  align-items: center;
}
.permission-grid > * {
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.permission-grid .permission-cell {
  justify-content: center;
}
.permission-grid input {
  margin: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}
.permission-grid .permission-head {
  font-size: 0.73rem;
  color: var(--muted);
  justify-content: center;
  font-weight: 600;
}
.permission-group {
  grid-column: 1/-1;
  min-height: 32px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
}
.permission-label {
  font-size: 0.84rem;
}
.permission-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  padding: 16px 0;
}
.permission-extras label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.83rem;
}
.permission-extras input {
  margin-top: 3px;
  accent-color: var(--teal);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.permission-help {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 12px;
}
.permission-editor .form-actions {
  margin-top: 18px;
}
.permission-editor fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.permission-editor legend {
  font-weight: 600;
  font-size: 0.83rem;
  padding-top: 16px;
}
.permission-message {
  font-size: 0.8rem;
  color: var(--teal);
}
.permission-message:empty {
  display: none;
}
.access-simulator .demo-selectors {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.demo-selectors label {
  min-width: 180px;
  flex: 1;
}
.demo-selectors select {
  width: 100%;
  margin-top: 6px;
}
.demo-summary {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.demo-summary .form-actions {
  margin-top: 12px;
}
.permission-warning {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 12px;
}
.permission-editor [data-preset],
.permission-editor .btn {
  min-height: 44px;
}
@media (max-width: 650px) {
  .permission-editor {
    padding: 12px;
  }
  .permission-grid {
    grid-template-columns: minmax(120px, 1fr) repeat(3, 48px);
  }
  .permission-extras {
    grid-template-columns: 1fr;
  }
  .permission-presets {
    gap: 5px;
  }
  .permission-presets button {
    font-size: 0.75rem;
    padding: 7px 9px;
  }
  .permission-grid .permission-head {
    font-size: 0.67rem;
  }
  .permission-label {
    font-size: 0.79rem;
  }
  .demo-selectors label {
    min-width: 130px;
  }
}

.permission-hidden {
  display: none !important;
}
#adminApp [data-permission-edit="false"] .edit-only {
  display: none !important;
}
#adminApp [data-permission-edit="false"] form.reading-editor.record-open,
#adminApp [data-permission-edit="false"] .translation-field {
  display: none !important;
}
#adminApp [data-permission-edit="false"] .translation-reading,
#adminApp [data-permission-edit="false"] .view-only {
  display: revert !important;
}
#adminApp [data-permission-edit="false"] .form-reading.editing-open {
  display: block !important;
}
.admin-sessions-panel {
  margin-top: 20px;
}
#adminSessions .admin-member {
  align-items: center;
}
.permission-editor > label {
  display: grid;
  gap: 6px;
  font-size: 0.83rem;
  margin-top: 12px;
}

.admin-invitation-card {
  flex-wrap: wrap;
}
.admin-invitation-card > .permission-editor {
  flex-basis: 100%;
  width: 100%;
}

#adminApp .permission-editor .btn.secondary {
  background: var(--light);
  color: var(--ink);
  border-color: var(--line);
}
.permission-grid > .permission-head:first-child {
  justify-content: flex-start;
}

.admin-access-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.admin-access-two > .panel {
  margin: 0;
  min-width: 0;
}
.admin-access-two:has(> .permission-hidden) {
  grid-template-columns: 1fr;
}
@media (max-width: 700px) {
  .admin-access-two {
    grid-template-columns: 1fr;
  }
}

/* Record links stay available outside the editing toolbar. */
.food-item-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
html[data-theme] #adminApp .food-item-links button.food-inline-link,
html[data-theme] #adminApp button.household-contact-link {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--action-text);
}
#adminApp .food-item-links .food-inline-link:focus-visible,
#adminApp .household-contact-link:focus-visible,
#adminApp .invite-text-action:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
/* Invitation actions own their final sizes; touch targets are extended below. */
html[data-theme] #adminApp .invite-text-action {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--action-text);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 4px 0;
  margin: 0;
  white-space: normal;
  text-align: start;
  overflow-wrap: anywhere;
}
html[data-theme] #adminApp .invite-text-action:hover {
  color: var(--ink);
}
#adminApp .invite-text-action + a.invite-text-action {
  margin-inline-start: 8px;
}
@media (pointer: coarse) {
  html[data-theme] #adminApp .invite-text-action {
    min-height: 44px;
  }
}
#adminApp .food-recipe-dialog .btn.secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.recipe-reading {
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 60vh;
  overflow: auto;
  padding: 4px 0 12px;
}
.food-language-dialog .translation-reading {
  white-space: pre-wrap;
}

html[data-theme] #adminApp .food-item-links button.food-inline-link:hover {
  background: transparent;
  color: var(--ink);
}

#adminApp .household-inline-editor > summary .household-contact-summary {
  display: block;
  margin: 3px 0 0 14px;
  overflow-wrap: anywhere;
  font-size: 0.7rem;
  font-weight: 400;
}
#adminApp .household-inline-editor > summary .primary-contact-summary {
  display: inline;
  margin-inline-start: 8px;
  font-size: 0.7rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
#adminApp
  .household-inline-editor:has(.reading-editor.record-open)
  > summary
  .household-contact-summary {
  display: none;
}

.permission-grid .permission-manage-members {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.permission-manage-members small {
  font-size: 0.65rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.language-row > .form-feedback {
  grid-column: 1/-1;
  margin: 0;
}

.food-header-actions {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.food-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  max-width: 100%;
  min-width: 0;
}
#adminApp .food-header-meta > small {
  white-space: normal;
  text-align: end;
}

/* Align Food titles and actions on one row, with details directly below. */
#adminApp .food-compact-item > summary.food-manage-main {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 4px;
  row-gap: 0;
  align-items: center;
}
#adminApp .food-compact-item > summary.food-manage-main::before {
  grid-column: 1;
  grid-row: 1;
}
#adminApp .food-compact-item .food-item-info,
#adminApp .food-compact-item .food-header-actions {
  display: contents;
}
#adminApp .food-compact-item .food-item-info > strong {
  grid-column: 2;
  grid-row: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-right: 12px;
}
#adminApp .food-compact-item .food-header-actions > .food-item-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
#adminApp .food-compact-item .food-header-meta {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}
#adminApp .food-compact-item > summary > .food-claim-summary {
  grid-column: 2;
  grid-row: 2;
  margin: 0 12px 0 0;
}
#adminApp .food-compact-item > summary > .food-comment-grid {
  grid-column: 2/-1;
  grid-row: 3;
  margin: 2px 0 0;
}
#adminApp .food-compact-item > summary > .comment-more {
  grid-column: 2/-1;
  grid-row: 4;
  justify-self: start;
}
@media (max-width: 600px) {
  #adminApp .food-compact-item > summary.food-manage-main {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  #adminApp .food-compact-item .food-header-actions > .food-item-actions {
    grid-column: 2;
    grid-row: 2;
  }
  #adminApp .food-compact-item .food-header-meta {
    grid-column: 2;
    grid-row: 3;
  }
  #adminApp .food-compact-item > summary > .food-claim-summary {
    grid-column: 2;
    grid-row: 4;
  }
  #adminApp .food-compact-item > summary > .food-comment-grid {
    grid-column: 2;
    grid-row: 5;
  }
  #adminApp .food-compact-item > summary > .comment-more {
    grid-column: 2;
    grid-row: 6;
  }
}
@media (min-width: 601px) {
  #adminApp
    .food-compact-item
    > summary:not(:has(> .food-claim-summary))
    > .food-comment-grid {
    grid-column: 2;
    grid-row: 2;
    margin: 0 12px 0 0;
  }
}

#adminApp .compact-household-profile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 8px 0 12px;
  padding: 0 8px;
}
.household-profile-field {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 2px 7px;
  min-width: 0;
}
.household-profile-field dt {
  font-size: 0.72rem;
}
.household-profile-field dd {
  font-size: 0.78rem;
  font-weight: 600;
}
.household-profile-field.profile-wide {
  grid-column: 1/-1;
}
.household-profile-field.profile-wide dd {
  font-weight: 400;
}
@media (max-width: 650px) {
  #adminApp .compact-household-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }
}
@media (max-width: 380px) {
  #adminApp .compact-household-profile {
    grid-template-columns: minmax(0, 1fr);
  }
}

#adminApp .stat-card .stat-detail {
  display: block;
  font-size: 0.72rem;
  margin-top: 4px;
}
#adminApp .food-compact-item .food-item-status {
  font-weight: 400;
  font-size: 0.72rem;
  white-space: normal;
}
#adminApp .food-compact-item .food-quantity-summary {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  text-align: start;
  white-space: normal;
}
#adminApp .food-compact-item > summary > .food-claim-summary {
  grid-row: 3;
}
#adminApp .food-compact-item > summary > .food-comment-grid {
  grid-row: 4;
}
#adminApp .food-compact-item > summary > .comment-more {
  grid-row: 5;
}
@media (min-width: 601px) {
  #adminApp
    .food-compact-item
    > summary:not(:has(> .food-claim-summary))
    > .food-comment-grid {
    grid-row: 3;
  }
}
@media (max-width: 600px) {
  #adminApp .food-compact-item .food-header-actions > .food-item-actions {
    grid-row: 3;
  }
  #adminApp .food-compact-item .food-header-meta {
    grid-row: 4;
  }
  #adminApp .food-compact-item > summary > .food-claim-summary {
    grid-row: 5;
  }
  #adminApp .food-compact-item > summary > .food-comment-grid {
    grid-row: 6;
  }
  #adminApp .food-compact-item > summary > .comment-more {
    grid-row: 7;
  }
}
#adminApp .food-compact-item .food-item-status {
  display: inline;
}

#adminApp .household-guest-info .guest-contact-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 0.7rem;
  font-weight: 400;
}
.guest-contact-summary > span {
  min-width: 0;
  max-width: 100%;
}

#adminApp .household-guest-row {
  flex-wrap: wrap;
}
.guest-order-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
#adminApp .household-guest-info {
  flex: 1 1 160px;
  min-width: 0;
}
.guest-order-actions button {
  margin: 0;
}
#adminApp .food-compact-item > summary .food-quantity-summary,
#adminApp .food-compact-item > summary .food-claim-summary,
#adminApp .food-compact-item > summary .food-comment-grid > .small {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
}

@media (max-width: 600px) {
  #adminApp .household-node-main {
    flex-wrap: wrap;
  }
  #adminApp .household-actions {
    margin-inline-start: auto;
    justify-content: flex-end;
    max-width: 100%;
    gap: 4px;
  }
  #adminApp .household-node-name {
    min-width: 0;
    flex-basis: 100%;
  }
}

#adminApp .food-compact-item .food-item-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding-right: 12px;
}
#adminApp .food-compact-item .food-item-title > strong {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
#adminApp .food-compact-item .food-item-title > .food-quantity-summary {
  display: block;
  margin-top: 1px;
}
#adminApp .food-compact-item > summary > .food-claim-summary {
  grid-row: 2;
}
#adminApp .food-compact-item > summary > .food-comment-grid {
  grid-row: 3;
}
#adminApp .food-compact-item > summary > .comment-more {
  grid-row: 4;
}
@media (min-width: 601px) {
  #adminApp
    .food-compact-item
    > summary:not(:has(> .food-claim-summary))
    > .food-comment-grid {
    grid-row: 2;
  }
}
@media (max-width: 600px) {
  #adminApp .food-compact-item .food-header-actions > .food-item-actions {
    grid-row: 2;
  }
  #adminApp .food-compact-item .food-header-meta {
    grid-row: 3;
  }
  #adminApp .food-compact-item > summary > .food-claim-summary {
    grid-row: 4;
  }
  #adminApp .food-compact-item > summary > .food-comment-grid {
    grid-row: 5;
  }
  #adminApp .food-compact-item > summary > .comment-more {
    grid-row: 6;
  }
}

#adminApp .household-primary-contact {
  margin: 0 12px 10px;
}
#adminApp .household-primary-contact > small,
#adminApp .household-primary-contact > strong {
  display: block;
  font-size: 0.78rem;
}
#adminApp .household-primary-contact > .compact-household-profile {
  padding: 0;
  margin-bottom: 0;
}
#adminApp .household-primary-contact > dl:empty {
  display: none;
}
#adminApp .household-contact-row {
  grid-column: 1/-1;
}
#adminApp .household-contact-row > strong {
  font-size: 0.82rem;
}
#adminApp .household-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
}
#adminApp .household-primary-actions > span {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
}
#adminApp .household-contact-link {
  margin: 0;
}
#adminApp .management-form > .household-food-toggle {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}
#adminApp .household-food-toggle input {
  margin: 0;
}
#adminApp .household-form-footer {
  margin: 10px 13px 12px;
}

#adminApp .household-primary-actions > .btn {
  margin: 0;
}
#adminApp
  .household-inline-editor:has(> .household-primary-picker:not(.hidden))
  > form {
  margin-bottom: 4px;
  padding-bottom: 0;
}
#adminApp .household-primary-picker {
  margin: 0 13px 12px;
}
#adminApp .household-primary-picker > .primary-picker-section {
  margin: 4px 0 !important;
}
#adminApp .household-primary-picker .contact-form {
  padding: 8px 12px 12px;
}
#adminApp .household-primary-picker .contact-guest-option:disabled {
  opacity: 0.65;
  cursor: default;
}

#guestPreviewLabel {
  font-size: 0.78em;
  font-weight: 400;
}
.invite-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
}
.backup-template-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 8px 16px;
  margin: 10px 0;
}
.backup-template-sections p {
  flex-basis: 100%;
  margin: 0;
}
.backup-template-sections label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 36px;
}

#adminApp .admin-row-icon.session-revoke-action {
  width: auto;
  padding-inline: 9px;
  gap: 5px;
  white-space: nowrap;
}
#adminApp .household-contact-link:has(svg),
.food-guest-visibility > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.household-contact-link svg,
.food-guest-visibility svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rsvp-session h3,
.rsvp-review-session h4 {
  margin: 0 0 5px;
}
.rsvp-bulk {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rsvp-bulk p,
.rsvp-bulk .response-options {
  margin: 4px 0 0;
}
.rsvp-guest {
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}
.rsvp-guest legend {
  padding: 0;
  font-weight: 600;
}
.rsvp-guest .response-options {
  margin-top: 4px;
}
.rsvp-review-session ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.rsvp-review-session li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 5px 0;
}
.rsvp-review-session li + li {
  border-top: 1px solid var(--line);
}

/* Shared category-panel help; empty status regions consume no space. */
#adminApp .admin-section-hint {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
#otherStatus:empty {
  display: none;
}

/* Food category branches follow the existing household tree treatment. */
.food-subcategories:not(:empty) {
  margin: 12px 0 0 14px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
/* Category metadata and editors follow the household row arrangement. */
#adminApp .food-category-heading > .tree-count {
  margin-left: 0;
  white-space: normal;
}
#adminApp .food-heading-actions {
  margin-inline-start: auto;
  flex-shrink: 0;
}
.food-category-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.food-category-fields > label {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.food-category-create {
  display: grid;
  gap: 12px;
}
.food-category-create > button {
  justify-self: start;
}
.food-category-add-options {
  display: grid;
  gap: 8px;
}
.food-category-add-options button {
  width: 100%;
  text-align: start;
}
@media (max-width: 600px) {
  .food-category-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .food-subcategories:not(:empty) {
    margin-inline-start: 6px;
    padding-inline-start: 6px;
  }
}

/* Backup choices use the same inline checkbox alignment as other settings. */
.backup-log-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.backup-log-option input {
  width: auto;
  margin: 0;
}
.backup-selection-help {
  margin-block: 0.65rem;
}

@media (max-width: 700px) {
  .backup-template-sections {
    grid-template-columns: 1fr;
  }
}

/* Backup/restore modes are mutually exclusive checkmark choices. */
.backup-mode-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.backup-mode-choices legend {
  margin-bottom: 8px;
  padding: 0;
}
.backup-mode-choices label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 8px;
  margin: 0;
}
.backup-mode-choices input {
  width: auto;
  margin: 0;
}
@media (pointer: coarse) {
  .backup-mode-choices label {
    min-height: 44px;
  }
}
/* Guest food categories, bundled choices and add-person forms. */
.guest-food-category {
  min-width: 0;
}
.guest-food-category > h3 {
  margin: 1rem 0 0.6rem;
}
.guest-food-group > .guest-food-details {
  padding: 0.8rem;
}
.guest-food-group .food-item {
  margin: 0.5rem 0;
}
.guest-add-person {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.guest-add-person > summary {
  cursor: pointer;
  font-weight: 600;
}
.guest-add-person form {
  margin-top: 0.8rem;
}
.food-group-options {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.food-group-options .checkbox-label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.food-group-options input[type="checkbox"] {
  width: auto;
  min-height: 24px;
}
.food-group-admin {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.guest-add-person .checkbox-label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.guest-add-person input[type="checkbox"] {
  width: auto;
  min-height: 24px;
}
.guest-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.guest-map-link svg {
  flex: none;
}
.guest-food-group > summary {
  overflow-wrap: anywhere;
}

/* Food creation and consistent category/group panels. */
.food-management-box {
  margin-top: 12px;
}
.food-management-box > h3 {
  margin-top: 0;
}
.food-language-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.food-language-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.food-name-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.food-category-name-form .other-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

@media (max-width: 600px) {
  #adminApp .food-edit-form {
    grid-template-columns: minmax(0, 1fr);
  }
  #adminApp .food-edit-form > label {
    grid-column: 1/-1;
  }
  .food-name-field > span {
    flex-wrap: wrap;
  }
}

/* Aligned icon controls and staged food coordination. */
.food-name-field > .food-name-control,
.food-unit-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.food-name-control input,
.food-unit-control select {
  min-width: 0;
  width: 100%;
}
.food-unit-control .food-type-tools {
  position: static;
  margin: 0;
}
.food-interest-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}
.food-interest-form legend {
  font-weight: 600;
  margin-bottom: 10px;
}
.food-interest-form .radio-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.food-interest-form input {
  width: auto;
  min-height: 24px;
}
.food-language-action {
  min-width: 32px;
  min-height: 32px;
  padding: 5px;
}
.food-interest-form {
  margin-bottom: 20px;
}
#foodGroupsSection,
#foodCategoriesSection {
  margin-top: 14px;
}

#adminApp .food-edit-form input:not([type="checkbox"]),
#adminApp .food-edit-form select {
  height: 44px;
  min-height: 44px;
  padding: 9px 12px;
  box-sizing: border-box;
}
#adminApp .food-edit-form textarea {
  height: 94px;
  min-height: 94px;
}
#adminApp .food-edit-form .food-unit-control {
  width: 308px;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  box-sizing: border-box;
}
#adminApp .food-edit-form select[name="category"] {
  width: 260px;
  max-width: 100%;
}
#adminApp .food-edit-buttons {
  align-items: center;
  flex-wrap: wrap;
}
#adminApp .food-edit-buttons .food-guest-visibility {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  margin: 0 0 0 8px;
  white-space: nowrap;
}
#adminApp .food-edit-buttons .food-guest-visibility input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}
#foodCard > p {
  white-space: pre-line;
}
@media (max-width: 600px) {
  #adminApp .food-edit-buttons .food-guest-visibility {
    margin-left: 0;
  }
}

/* Keep icon columns inside the item editor, including touch-sized controls. */
#adminApp .food-edit-form > label {
  min-width: 0;
}
#adminApp .food-edit-form .food-name-control {
  grid-template-columns: minmax(0, 1fr) 44px;
}
#adminApp .food-edit-form .food-name-control > .admin-row-icon,
#adminApp .food-edit-form .food-type-tools > .admin-row-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}
#adminApp .food-edit-form .food-type-tools {
  min-width: 0;
}
@media (max-width: 600px) {
  #adminApp .food-edit-form .food-unit-control {
    width: 100%;
  }
}

/* Compact per-person attendance choices; native radio behavior is retained. */
.rsvp-inline {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.rsvp-person-row {
  display: grid;
  grid-template-columns: minmax(64px, 0.85fr) minmax(0, 2.15fr);
  gap: 12px;
  align-items: center;
}
.rsvp-person-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
.rsvp-inline .response-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  min-width: 0;
  max-width: 340px;
  justify-self: end;
  width: 100%;
}
.rsvp-inline .radio-pill {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 7px 4px;
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  cursor: pointer;
  margin: 0;
}
.rsvp-inline .radio-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}
.rsvp-inline .radio-pill:has(input:checked) {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  font-weight: 600;
}
.rsvp-inline .radio-pill:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.rsvp-inline .radio-pill:has(input:disabled) {
  cursor: default;
  opacity: 0.7;
}
/* Approved compact phone layout; desktop attendance remains inline as before. */
@media (max-width: 600px) {
  .rsvp-person-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 8px;
  }
  .rsvp-person-name {
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .rsvp-inline .response-options {
    gap: 5px;
  }
  .rsvp-inline .radio-pill {
    font-size: 11px;
    line-height: 1.25;
    padding: 6px 3px;
    min-height: 40px;
  }
}
@media (max-width: 350px) {
  .rsvp-person-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .rsvp-inline .response-options {
    max-width: none;
  }
}

.guest-session-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.guest-session-heading h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.guest-mini-map {
  width: 112px;
  flex-shrink: 0;
  text-align: center;
}
.guest-map-thumbnail {
  display: block;
  height: 76px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.guest-map-thumbnail iframe {
  border: 0;
  width: 280px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
}
.guest-mini-map .guest-map-link {
  display: block;
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 5px;
  text-decoration: underline;
}
.guest-map-thumbnail:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Approved photo treatment applies only after private invitation/preview access. */
body.guest-photo {
  --ink: #eef1e7;
  --muted: #bdcbbf;
  --white: #163327;
  --line: #587663;
  --teal: #3d806b;
  --light: #264a3c;
  isolation: isolate;
  background: #10231b;
  color: var(--ink);
}
#guestPhotoBackdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
#guestPhotoBackdrop:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 24, 17, 0.3),
    rgba(5, 24, 17, 0.38) 55%,
    rgba(5, 24, 17, 0.55)
  );
}
body.guest-photo .topbar {
  background: rgba(13, 38, 25, 0.86);
  border-color: rgba(199, 218, 195, 0.2);
}
body.guest-photo .brand,
body.guest-photo .nav-link {
  color: var(--ink);
}
body.guest-photo .guest-layout {
  display: block;
  max-width: 1000px;
  padding-top: 30px;
}
body.guest-photo .hero-panel {
  position: static;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 20px 0 20px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
body.guest-photo .hero-panel h1 {
  font-size: clamp(2.7rem, 6vw, 5rem);
  color: #f1eedc;
  margin-bottom: 12px;
}
body.guest-photo .hero-date {
  color: #f1eedc;
  font-size: clamp(1.15rem, 3vw, 1.8rem);
}
body.guest-photo .hero-panel .lede {
  color: #e0e8dc;
  max-width: 45ch;
}
body.guest-photo .hero-panel .micro {
  color: #d6e0d4;
}
body.guest-photo .guest-main {
  max-width: 760px;
  margin: 0 auto;
}
body.guest-photo .panel {
  background: #143021;
  border-color: #6a8b6d;
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body.guest-photo .guest-response,
body.guest-photo .radio-pill,
body.guest-photo .language-switch {
  background: #183a2b;
  color: var(--ink);
  border-color: var(--line);
}
body.guest-photo .language-switch button {
  color: #dbe8d8;
}
body.guest-photo .footer,
body.guest-photo .footer a {
  color: #e1e9db;
}
@media (max-width: 600px) {
  body.guest-photo .guest-layout {
    padding-top: 10px;
  }
  body.guest-photo .hero-panel {
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 16px;
  }
  body.guest-photo .hero-panel h1 {
    font-size: 2.7rem;
  }
  body.guest-photo .panel {
    padding: 20px 16px;
  }
}

body.guest-photo .eyebrow,
body.guest-photo .quiet-link,
body.guest-photo .guest-map-link,
body.guest-photo .text-button {
  color: #b4dcc7;
}

.food-interest-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.food-interest-choice {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 12px;
  min-height: 52px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.food-interest-choice[aria-pressed="true"] {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
  font-weight: 600;
}
.food-interest-choice[aria-pressed="true"]:before {
  content: "✓ ";
  color: var(--teal);
}
.food-interest-choice:disabled {
  cursor: wait;
  opacity: 0.7;
}
.food-selection-prompt {
  margin: 20px 0 12px;
  font-weight: 600;
}
.guest-food-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.guest-food-heading > strong {
  flex: 1;
  min-width: 70px;
  overflow-wrap: anywhere;
}
.guest-food-heading > button {
  flex: none;
  min-height: 44px;
  padding: 7px 12px;
  margin: 0;
}
.guest-food-heading .tag {
  font-size: 0.72rem;
}
body.guest-photo .food-interest-choice[aria-pressed="true"] {
  border-color: #b4dcc7;
  box-shadow: inset 0 0 0 1px #b4dcc7;
}
body.guest-photo .food-interest-choice[aria-pressed="true"]:before {
  color: #b4dcc7;
}

/* Two food cards per row when the guest panel has room for inline actions. */
.guest-food-category {
  container-type: inline-size;
}
.guest-food-category > .food-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.guest-food-category > .food-list > .food-item {
  min-width: 0;
  margin: 0;
}
.food-interest-choice {
  min-width: 0;
  overflow-wrap: break-word;
}
@container (min-width:240px) {
  .guest-food-category > .food-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guest-food-choice {
  display: block !important;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
  min-width: 0;
}
.guest-food-choice > .food-interest-choice {
  margin: 0;
  min-height: 64px;
  height: 100%;
  line-height: 1.4;
}
.guest-food-choice > .food-interest-choice:disabled {
  cursor: default;
}
.guest-food-information {
  margin-top: 6px;
  min-width: 0;
}
.guest-food-information > summary {
  padding: 8px 4px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--muted);
}
.guest-food-information > .guest-food-details {
  padding: 8px 4px;
}
.guest-food-group .guest-food-information .food-item {
  margin: 6px 0;
}
.guest-food-choice .food-interest-choice[aria-pressed="true"] {
  font-weight: 600;
}

.food-review-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}
.food-review-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.food-review-list > li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.food-review-list .icon-popup-control {
  flex: none;
}
.food-review-recipe {
  max-height: 65vh;
  overflow-y: auto;
}
#foodReview h3 {
  margin-top: 18px;
}
.food-review-list .text-button {
  min-height: 44px;
}
#foodReview .form-actions {
  margin-top: 18px;
}

#foodCard.food-reviewing > p:not(#foodFollowup) {
  display: none;
}
.guest-brand {
  white-space: normal;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  line-height: 1.25;
}
.guest-brand #guestEventName {
  overflow-wrap: anywhere;
}
.guest-footnote {
  text-align: center;
  padding-top: 18px;
  padding-bottom: 28px;
}
.guest-footnote p {
  margin: 0;
}
body.guest-photo .guest-footnote .micro {
  color: #d6e0d4;
}
body.guest-photo .hero-panel h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  max-width: 26ch;
}
@media (max-width: 600px) {
  .guest-brand {
    font-size: 0.95rem;
  }
  .guest-brand ~ .topbar-actions {
    flex-shrink: 0;
  }
  .guest-brand ~ .topbar-actions .language-switch button {
    padding: 4px 8px;
  }
  body.guest-photo .hero-panel h1 {
    font-size: 2rem;
  }
}

.guest-session-details {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
}
.guest-session-details > .session-venue {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.guest-session-details > .guest-mini-map {
  flex: none;
}
@media (max-width: 600px) {
  .guest-session-details {
    gap: 12px;
  }
  .guest-session-details > .guest-mini-map {
    width: 96px;
  }
}

.session-venue-lines > span {
  display: block;
}
.session-venue-lines > span:last-child {
  margin-top: 5px;
}

body.guest-photo .topbar-inner {
  max-width: 816px;
  padding-left: 28px;
  padding-right: 28px;
}

@media (max-width: 600px) {
  body.guest-photo .topbar-inner {
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* The approved photo remains visible in both guest appearances. */
html[data-theme="light"] body.guest-photo {
  --ink: #203c32;
  --muted: #506b5b;
  --white: #f7faf5;
  --line: #b5cbbb;
  --teal: #286e56;
  --light: #e5f0e5;
  color: var(--ink);
}
html[data-theme="light"] body.guest-photo .panel {
  background: #f5f8ef;
  border-color: #abc4a8;
  color: var(--ink);
}
html[data-theme="light"] body.guest-photo .guest-response,
html[data-theme="light"] body.guest-photo .radio-pill {
  background: #f8fbf4;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="light"]
  body.guest-photo
  .food-interest-choice[aria-pressed="true"] {
  border-color: #286e56;
  box-shadow: inset 0 0 0 1px #286e56;
}
html[data-theme="light"]
  body.guest-photo
  .food-interest-choice[aria-pressed="true"]:before,
html[data-theme="light"] body.guest-photo .eyebrow,
html[data-theme="light"] body.guest-photo .quiet-link,
html[data-theme="light"] body.guest-photo .guest-map-link,
html[data-theme="light"] body.guest-photo .text-button {
  color: #286e56;
}
html[data-theme="light"] body.guest-photo .brand,
html[data-theme="light"] body.guest-photo .nav-link {
  color: #eef1e7;
}
.food-followup {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-venue-map {
  display: inline-grid;
  flex: none;
  vertical-align: middle;
}
.admin-venue-map .venue-map-link {
  white-space: normal;
  line-height: 1.3;
  font-size: 0.7rem;
  margin-top: 5px;
  text-align: center;
}
.venue-summary-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.venue-summary-details {
  flex: 1;
}
.admin-venue-map .guest-map-thumbnail {
  min-width: 0;
}
@media (max-width: 600px) {
  .admin-venue-map {
    width: 96px;
  }
  .venue-summary-links {
    gap: 6px;
  }
}

#foodReview .food-review-summary > h3 {
  margin: 0 0 10px;
}
.food-review-summary .food-review-list {
  margin: 0;
}
.food-review-summary .food-review-list > li:last-child {
  border-bottom: 0;
}
.food-review-summary {
  margin-top: 14px;
}

/* Bring the invitation closer to the date and let the photo show through. */
body.guest-photo .hero-date {
  margin-bottom: 0;
}
body.guest-photo .panel {
  background: rgba(20, 48, 33, 0.82);
}
body.guest-photo .guest-response,
body.guest-photo .radio-pill {
  background: rgba(24, 58, 43, 0.25);
}
body.guest-photo .rsvp-inline .radio-pill:has(input:checked) {
  background: var(--teal);
  color: #fff;
}
html[data-theme="light"] body.guest-photo .panel {
  background: rgba(245, 248, 239, 0.9);
}
html[data-theme="light"] body.guest-photo .guest-response,
html[data-theme="light"] body.guest-photo .radio-pill {
  background: rgba(248, 251, 244, 0.35);
}
html[data-theme="light"]
  body.guest-photo
  .rsvp-inline
  .radio-pill:has(input:checked) {
  background: #286e56;
  color: #fff;
}

body.guest-photo .guest-layout {
  padding-bottom: 0;
}
.guest-footnote {
  padding-top: 20px;
}
.guest-brand #guestEventName {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .guest-footnote {
    padding-top: 16px;
  }
}

@media (max-width: 600px) {
  .guest-food-category > .food-list {
    gap: 8px;
  }
  .guest-food-choice > .food-interest-choice {
    min-height: 52px;
    height: auto;
    padding: 10px 8px;
    font-size: 0.82rem;
    line-height: 1.3;
  }
  .guest-food-choice > .food-interest-choice {
    overflow-wrap: anywhere;
  }
}

/* RSVP household comments remain with the reviewed and confirmed response. */
.rsvp-comment-field {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}
.rsvp-comment-field textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}
.rsvp-comment-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-top: 14px;
}
.rsvp-comment-preview p {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Category paths nest without reducing phone food cards to narrow columns. */
.guest-food-category > .guest-food-category {
  margin-top: 16px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}
.guest-food-category > .guest-food-category > h3 {
  margin-top: 0;
  font-size: 1rem;
}
.guest-food-quantity {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-top: 8px;
}
.guest-food-quantity input {
  width: 70px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
}
.food-availability,
.guest-food-choice > .guest-food-note {
  margin: 8px 0 0;
}
.guest-food-choice > .guest-food-note {
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.food-quantity-feedback {
  margin: 6px 0;
  color: var(--danger);
}
.guest-food-choice > .food-interest-choice {
  height: auto;
  width: 100%;
}
@media (max-width: 600px) {
  .guest-food-quantity {
    flex-wrap: wrap;
    gap: 4px;
  }
  .guest-food-quantity input {
    width: 100%;
  }
  .guest-food-category > .guest-food-category {
    padding-inline-start: 8px;
  }
  .guest-food-category > .food-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Local preview: shared inline checks, compact summaries and aligned maps. */
#adminApp label:has(> input[type="checkbox"]),
#adminApp label:has(> input[type="radio"]),
.guest-add-person label:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#adminApp label > input[type="checkbox"],
#adminApp label > input[type="radio"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  align-self: center;
}
.stat-detail {
  display: block;
  white-space: pre-line;
  line-height: 1.65;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.rsvp-submit-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.rsvp-submit-row #rsvpHint {
  flex: none;
  min-width: 0;
}
.rsvp-submit-row #saveRsvp {
  margin-left: 0;
  flex: none;
}
.rsvp-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 25%, 140px);
  column-gap: 16px;
  align-items: start;
}
.rsvp-session > .guest-session-heading,
.rsvp-session > .venue-welcome,
.rsvp-session > .guest-session-details {
  grid-column: 1;
}
.rsvp-session > .guest-mini-map {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  justify-self: end;
  margin-bottom: 12px;
}
.rsvp-session > .rsvp-guest,
.rsvp-session > p.micro {
  grid-column: 1/-1;
}
.guest-map-thumbnail {
  height: auto;
  aspect-ratio: 4/3;
}
.guest-map-thumbnail iframe {
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  transform: scale(0.5);
  transform-origin: top left;
}
.venue-summary-content {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
#venueList > details > summary.venue-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  list-style: none;
}
#venueList > details > summary.venue-summary::-webkit-details-marker {
  display: none;
}
#venueList > details > summary.venue-summary::before {
  content: "▸";
  width: 16px;
  flex: 0 0 16px;
  margin: 0;
  color: var(--teal);
}
#venueList > details[open] > summary.venue-summary::before {
  content: "▾";
}
#venueList .venue-summary-layout {
  display: flex;
  flex: 1;
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#venueList .venue-summary-content {
  flex: 1 1 736px;
  max-width: 736px;
  align-items: center;
}
#venueList .venue-summary-links {
  margin-left: auto;
}
#venueList .admin-venue-map {
  width: clamp(88px, 16vw, 112px);
}
@media (max-width: 600px) {
  .rsvp-session {
    column-gap: 12px;
  }
  .rsvp-submit-row #saveRsvp {
    max-width: 100%;
    white-space: normal;
  }
  .venue-summary-content {
    gap: 10px;
  }
}

.venue-form-actions > .form-actions {
  margin-top: 0;
}
#adminApp label:has(> input[type="checkbox"]),
#adminApp label:has(> input[type="radio"]) {
  min-height: 44px;
}

/* Tighter attendance rhythm; prompt above its left-aligned action. */
.rsvp-session > .guest-session-heading {
  margin-bottom: 4px;
}
.rsvp-session > .guest-session-heading h3 {
  margin-bottom: 0;
}
.rsvp-session > .venue-welcome {
  margin-top: 0;
  margin-bottom: 8px;
}
#rsvpEditor > .rsvp-rows {
  margin-bottom: 8px;
}

.rsvp-session > #householdGuestHost {
  grid-column: 1/-1;
  min-width: 0;
}
.rsvp-session > #householdGuestHost .guest-add-person {
  margin-top: 10px;
  padding-top: 10px;
}

.category-name-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.category-name-control > input {
  height: 44px;
  min-width: 0;
}
.category-name-control > .food-language-action {
  width: 44px;
  height: 44px;
  min-height: 44px;
}
.item-lifecycle-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.food-edit-buttons .item-lifecycle-actions {
  margin-left: auto;
}

/* Matching Food/Other editors and hierarchy controls. */
.hierarchy-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.tree-planning-group,
.tree-group {
  flex-wrap: wrap;
  gap: 8px;
}
.hierarchy-inline-editor,
.hierarchy-create-household {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 10px 0;
}
.household-toolbar {
  flex-wrap: wrap;
  align-items: center;
}
#adminApp .household-toolbar .archive-toggle {
  margin: 0 0 0 8px;
  min-height: 40px;
}
.other-edit-actions {
  flex-wrap: wrap;
  align-items: center;
}
.other-edit-actions .item-lifecycle-actions {
  margin-left: auto;
}
.other-edit-form .other-field-item {
  order: 0;
}
.other-edit-form .other-field-category {
  order: 1;
}
.other-edit-form .other-field-notes {
  order: 2;
}
.other-edit-form .other-field-assigned_to {
  order: 3;
}
.other-edit-form .other-field-status {
  order: 4;
}
.other-edit-form .other-edit-actions {
  order: 5;
}
.other-category-name-form {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.other-edit-form label {
  font-size: 0.8rem;
}
.other-edit-form .other-field-item input {
  height: 44px;
  min-height: 44px;
}
@media (max-width: 650px) {
  .hierarchy-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .hierarchy-inline-editor,
  .hierarchy-create-household {
    padding: 10px;
  }
  .household-toolbar .archive-toggle {
    flex-basis: auto;
  }
}

/* Compact guest Add person editor; retain comfortable touch targets. */
#householdGuestHost .guest-add-person {
  padding: 10px 12px;
  margin-bottom: 0;
}
#householdGuestHost .guest-add-person > summary {
  padding: 0;
  margin: 0;
}
#householdGuestHost .guest-add-person form {
  margin: 10px 0 0;
  gap: 10px 14px;
}
#householdGuestHost .guest-add-person form > label {
  margin: 0;
  gap: 4px;
  min-width: 0;
}
#householdGuestHost .guest-add-person .checkbox-label {
  grid-column: 1/-1;
  min-height: 32px;
}
#householdGuestHost .guest-add-person .form-actions {
  margin: 0;
  gap: 8px;
}
#householdGuestHost .guest-add-person form > p {
  margin: 0;
}
#householdGuestHost .guest-add-person form > p:empty {
  display: none;
}

/* Keep group metadata beside its name and actions at the trailing edge. */
#householdRows .tree-planning-group > .tree-count,
#householdRows .tree-group > .tree-count {
  margin-left: 0;
  white-space: normal;
}
#householdRows .tree-planning-group > .hierarchy-actions,
#householdRows .tree-group > .hierarchy-actions {
  margin-left: auto;
  flex-shrink: 0;
}

/* Save/Cancel stay at the start; guarded lifecycle actions finish the editor. */
#adminApp .editor-lifecycle-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}
#adminApp .guest-edit-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
#adminApp .other-edit-actions,
#adminApp .household-form-footer {
  flex-wrap: wrap;
  align-items: center;
}
#adminApp .editor-lifecycle-actions .btn {
  margin: 0;
}

/* Each settings/translation box owns its edit state. Permission gates remain separate. */
#adminApp .local-editor-box > .local-editor-form {
  display: none !important;
}
#adminApp .local-editor-box.local-editor-open > .local-editor-form {
  display: grid !important;
}
#adminApp .local-editor-box.local-editor-open > .local-editor-summary,
#adminApp .local-editor-box.local-editor-open > .local-editor-pencil {
  display: none;
}
#adminApp .local-editor-box {
  min-width: 0;
  position: relative;
}

#adminApp .local-editor-feedback:empty {
  display: none;
}
#adminApp .local-editor-box.local-editor-open > .local-editor-feedback {
  display: none;
}

#adminApp .local-editor-summary {
  padding-inline-end: 44px;
}
#adminApp .local-editor-pencil {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0;
}

/* Consistent settings cards and header pencils, including legacy record read views. */
#adminApp [data-settings-panel="event"]:not(.hidden),
#adminApp [data-settings-panel="languages"]:not(.hidden),
#adminApp [data-settings-panel="interface"]:not(.hidden) {
  display: grid;
  gap: 16px;
}
#adminApp .settings-card {
  margin: 0;
  padding: 20px;
  min-width: 0;
  position: relative;
  border-radius: 14px;
}
#adminApp .settings-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  min-height: 34px;
}
#adminApp .settings-card-heading h2,
#adminApp .settings-card-heading h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
#adminApp .settings-card-heading .settings-card-pencil {
  position: static;
  inset: auto;
  margin: 0;
  flex: 0 0 auto;
}
#adminApp
  .settings-card-editing
  > .settings-card-heading
  > .settings-card-pencil {
  display: none;
}
#adminApp .settings-card > .muted {
  margin: 0 0 16px;
}
#adminApp .settings-card .local-editor-summary {
  padding: 0;
}
#adminApp .settings-card .record-read-grid {
  margin: 0;
  gap: 8px 18px;
}
#adminApp .settings-card form {
  width: 100%;
  max-width: none;
}
#adminApp .settings-card .management-form {
  padding: 0;
}
#adminApp .settings-card .form-actions {
  margin-top: 12px;
  gap: 8px;
}
#adminApp .settings-card .planning-groups .form-actions {
  margin-top: 0;
}
#adminApp .settings-card .publication-panel {
  margin: 0;
  padding: 0;
  border: 0;
}
#adminApp .settings-card .customization-layout {
  margin: 0;
  align-items: start;
}
#adminApp .settings-card .customization-preview-header h4 {
  margin-top: 0;
}
#adminApp .settings-card .notification-settings > .micro {
  margin-top: 0;
}
#adminApp .settings-card .local-editor-summary .customization-photo-meta {
  margin: 0 0 14px;
}
#adminApp .settings-language-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--light);
}
#adminApp .settings-language-card > .settings-card-heading {
  margin-bottom: 10px;
}
#adminApp .settings-language-card .language-row-actions {
  grid-column: 1/-1;
}
@media (max-width: 700px) {
  #adminApp .settings-card {
    padding: 16px;
  }
  #adminApp .settings-card-heading {
    gap: 10px;
  }
}
/* Event planning and feature settings. Shared card geometry lives in shared-editor refinements. */
.planning-summary .record-read-grid {
  margin: 0;
}
.planning-summary h4 {
  font-size: 0.87rem;
  margin: 18px 0 10px;
}
.planning-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.planning-summary li {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--light);
}
#adminApp .planning-editor {
  gap: 14px;
}
#adminApp .planning-editor > .planning-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
#adminApp .planning-editor .planning-fields > legend {
  padding: 0 6px;
  font-size: 0.88rem;
  margin: 0;
  font-weight: 600;
}
#adminApp .planning-editor .planning-fields > .planning-fields {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
#adminApp .planning-editor .planning-groups {
  display: grid;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
#adminApp .planning-editor .planning-groups > .planning-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
}
#adminApp .planning-editor .planning-groups .form-actions {
  grid-column: 1/-1;
  margin: 0;
  justify-content: flex-end;
}
#adminApp .planning-editor label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 0.84rem;
  min-width: 0;
}
#adminApp .planning-editor > .small-tool {
  justify-self: start;
}
@media (min-width: 1000px) {
  #adminApp .planning-editor > .planning-fields > .planning-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  #adminApp .planning-editor > .planning-fields,
  #adminApp .planning-editor .planning-groups > .planning-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Choose one food stage; the full card is its native radio label. */
.feature-stage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 0;
  margin: 12px 0 0;
}
.feature-stage-options > legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 700;
}
#adminApp .feature-stage-options > .feature-stage-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  min-width: 0;
  margin: 0;
}
#adminApp .feature-stage-card > input[type="radio"] {
  margin-top: 3px;
  align-self: flex-start;
}
.feature-stage-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.feature-stage-copy strong {
  font-weight: 700;
}
.feature-stage-copy > span {
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 400;
}
#adminApp .feature-stage-options > .feature-stage-card:has(input:checked) {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, var(--panel));
}
.feature-stage-options:disabled .feature-stage-card {
  opacity: 0.65;
}
@media (max-width: 600px) {
  .feature-stage-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.feature-stage-options input[type="radio"] {
  appearance: none;
  width: 19px;
  height: 19px;
  min-height: 19px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: grid;
  place-content: center;
  padding: 0;
  flex-shrink: 0;
}
.feature-stage-options input[type="radio"]:checked:after {
  content: "✓";
  font-weight: bold;
  color: var(--accent);
}
/* Temporary status-message preferences use the existing access preset rhythm. */
.notification-scopes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.notification-scopes fieldset {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.notification-settings .permission-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notification-settings .radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.notification-types {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  .notification-scopes {
    grid-template-columns: 1fr;
  }
  /* Phone presets share one column within each independent scope. */
  .notification-settings .permission-presets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .notification-settings .radio-pill {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
  }
}
/* Private invitation customization; null design retains the approved legacy treatment. */
html[data-theme] body.guest-customized {
  --ink: var(--guest-text);
  --muted: color-mix(in srgb, var(--guest-text) 75%, var(--guest-box));
  --white: var(--guest-box);
  --line: color-mix(in srgb, var(--guest-text) 35%, var(--guest-box));
  --teal: var(--guest-button);
  --light: color-mix(in srgb, var(--guest-button) 25%, var(--guest-box));
  background: var(--guest-box);
  color: var(--guest-text);
}
html[data-theme] body.guest-customized #guestPhotoBackdrop {
  background-position: var(--guest-position);
}
html[data-theme] body.guest-customized #guestPhotoBackdrop:after {
  background: rgba(0, 0, 0, var(--guest-darken));
}
html[data-theme] body.guest-customized .panel {
  background: color-mix(
    in srgb,
    var(--guest-box) calc(var(--guest-opacity) * 100%),
    transparent
  );
  color: var(--guest-text);
  border-color: var(--line);
}
html[data-theme]
  body.guest-customized
  :is(
    .guest-response,
    .radio-pill,
    .food-interest-choice,
    .language-switch,
    .topbar
  ) {
  background: color-mix(
    in srgb,
    var(--guest-box) calc(var(--guest-opacity) * 100%),
    transparent
  );
  color: var(--guest-text);
  border-color: var(--line);
}
html[data-theme]
  body.guest-customized
  :is(
    .hero-panel h1,
    .hero-date,
    .lede,
    .brand,
    .nav-link,
    .eyebrow,
    .quiet-link,
    .guest-map-link,
    .text-button,
    .guest-footnote .micro,
    .language-switch button,
    .footer,
    .footer a
  ) {
  color: var(--guest-text);
}
html[data-theme]
  body.guest-customized
  :is(
    .btn:not(.secondary),
    .rsvp-inline .radio-pill:has(input:checked),
    .language-switch button.selected
  ) {
  background: var(--guest-button);
  border-color: var(--guest-button);
  color: #fff;
}
html[data-theme] body.guest-customized .btn.secondary {
  background: var(--guest-box);
  border-color: var(--line);
  color: var(--guest-text);
}
html[data-theme]
  body.guest-customized
  .food-interest-choice[aria-pressed="true"] {
  border-color: var(--guest-text);
  box-shadow: inset 0 0 0 1px var(--guest-text);
}
html[data-theme]
  body.guest-customized
  .food-interest-choice[aria-pressed="true"]:before {
  color: var(--guest-text);
}
.customization-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.customization-form,
.customization-preview {
  min-width: 0;
}
.customization-section {
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.customization-form h4 {
  margin: 0 0 10px;
}
.customization-form label {
  display: grid;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 10px 0;
}
.customization-form input,
.customization-form select {
  min-width: 0;
}
.customization-form input[type="range"] {
  padding: 0;
  min-height: 32px;
  accent-color: var(--teal);
}
.customization-form input[type="color"] {
  height: 44px;
  padding: 4px;
}
.customization-form input[type="file"] {
  font-size: 16px;
}
.customization-form .checkbox-label {
  display: flex;
}
.customization-form .form-actions {
  margin-top: 0;
}
.customization-photo-meta {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.customization-photo-meta span {
  color: var(--muted);
}
.customization-crop summary {
  font-size: 0.8rem;
  cursor: pointer;
}
.customization-crop .form-grid {
  gap: 8px;
}
.customization-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.customization-palette {
  display: flex;
  gap: 8px;
}
.customization-palette [aria-pressed="true"] {
  outline: 1px solid var(--teal);
}
.customization-actions {
  flex-wrap: wrap;
}
.customization-reset {
  margin-left: auto;
}
.customization-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.customization-preview-header h4 {
  margin: 0;
}
.customization-preview-header .form-actions {
  margin: 0;
}
.customization-sample {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--guest-box);
  color: var(--guest-text);
  margin: auto;
  width: 100%;
  min-width: 0;
}
.customization-sample-backdrop,
.customization-sample-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  pointer-events: none;
}
.customization-sample-shade {
  z-index: -1;
  background: rgba(0, 0, 0, var(--guest-darken));
}
.customization-sample header {
  font-size: 1.2rem;
  font-weight: 650;
  text-align: center;
  margin-bottom: 15px;
  overflow-wrap: anywhere;
}
.customization-sample-box {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--guest-text) 35%, transparent);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--guest-box) calc(var(--guest-opacity) * 100%),
    transparent
  );
  margin-bottom: 12px;
}
.customization-sample h4 {
  margin: 0 0 8px;
  color: var(--guest-text);
}
.customization-sample p {
  font-size: 0.85rem;
  margin: 8px 0;
  line-height: 1.5;
}
.customization-sample .btn {
  background: var(--guest-button);
  border-color: var(--guest-button);
  color: #fff;
}
.customization-sample .btn.secondary {
  background: transparent;
  color: var(--guest-text);
  border-color: var(--guest-text);
}
.customization-sample-choices {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.customization-sample-choices > span {
  flex-basis: 100%;
}
.customization-sample footer {
  font-size: 0.7rem;
  text-align: center;
}
.customization-status {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}
@media (max-width: 850px) {
  .customization-layout {
    grid-template-columns: 1fr;
  }
  .customization-preview {
    max-width: 100%;
  }
  .customization-form input,
  .customization-form select {
    font-size: 16px;
  }
}

/* Household delivery overview; status and RSVP remain independent. */
.invite-overview-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}
.invite-overview-counts button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex: 1 1 120px;
  min-height: 44px;
}
.invite-overview-counts b {
  font-size: 1rem;
}
.invite-overview-counts [aria-pressed="true"] {
  background: var(--light);
  outline: 1px solid var(--teal);
}
.invite-overview-filters {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) repeat(3, minmax(100px, 1fr));
  gap: 10px;
}
.invite-overview-filters label {
  display: grid;
  gap: 5px;
  font-size: 0.75rem;
  min-width: 0;
}
.invite-overview-filters input,
.invite-overview-filters select {
  min-width: 0;
}
.invite-overview-viewbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.invite-overview-viewbar label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  min-height: 36px;
}
.invite-overview-viewbar input {
  width: auto;
}
.invite-overview-viewbar > span {
  margin-left: auto;
}
.invite-overview-heading,
#adminApp .invite-overview-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(
      115px,
      1fr
    ) minmax(95px, 0.8fr) minmax(140px, auto);
  gap: 12px;
  align-items: center;
}
.invite-overview-heading {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 8px 10px;
}
.invite-overview-row > .invite-overview-identity,
.invite-overview-row > .invite-overview-recipient,
.invite-overview-row > .invite-overview-delivery,
.invite-overview-row > .invite-overview-reply {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.invite-overview-row .invite-row-actions {
  justify-content: flex-end;
  margin-left: 0;
  flex-wrap: wrap;
}
.invite-overview-row .btn {
  font-size: 0.72rem;
  padding: 7px 10px;
  min-height: 40px;
}
.invite-overview-row .tag {
  white-space: normal;
  justify-self: start;
}
.invite-overview-row small {
  font-size: 0.7rem;
}
.invite-overview-group h3 {
  font-size: 0.85rem;
  margin: 20px 0 10px;
}
.invite-overview-row:before {
  display: none !important;
}
.invite-overview-identity:before {
  content: "›";
  float: left;
}
.invite-household[open]
  > .invite-overview-row
  .invite-overview-identity:before {
  content: "⌄";
}
@media (max-width: 1000px) {
  .invite-overview-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .invite-overview-heading {
    display: none;
  }
  #adminApp .invite-overview-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .invite-overview-identity {
    grid-column: 1/-1;
  }
  .invite-overview-row .invite-row-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .invite-overview-recipient {
    grid-column: 1;
    grid-row: 3;
  }
  .invite-overview-reply {
    grid-column: 2;
    grid-row: 2;
  }
  .invite-overview-delivery {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (max-width: 500px) {
  .invite-overview-filters {
    grid-template-columns: 1fr;
  }
  .invite-overview-filters input,
  .invite-overview-filters select {
    font-size: 16px;
  }
  .invite-overview-counts button {
    flex-basis: 110px;
  }
}

/* Delivery messages, send controls and invitation-template editors. */
.delivery-message {
  font: inherit;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px;
  background: var(--light);
  border-radius: 8px;
}
.delivery-log-section {
  margin-top: 24px;
}
#adminApp .invitation-send-form .btn {
  justify-self: start;
}
#invitationTemplatesList .admin-management-body {
  padding: 0 13px 12px;
}
.invitation-template {
  padding: 10px 0;
}
.invitation-template + .invitation-template {
  border-top: 1px solid var(--line);
}
.invitation-template h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
}
.invitation-template .management-form {
  padding: 6px 0 0;
}