/* Handtuch Held Hotel Web — operational shell in the family house. Warm paper,
   deep ink, the red-white towel stripe as the structural family marker, calm
   operational green accents. Dense tabular layout, hairline edges, mono
   diagnostic values. No raster assets. */

:root {
  --paper: #faf7f1;
  --card: #fffdf8;
  --ink: #16323a;
  --ink-strong: #0e2229;
  --ink-soft: #4c6a71;
  --line: rgba(22, 50, 58, 0.18);
  --line-strong: rgba(22, 50, 58, 0.42);
  --green: #2e5b44;
  --green-strong: #24493a;
  --denied: #8a2926;
  --state-anonymous: #7a8b8f;
  --state-customer: #b05a00;
  --state-staff: #2e5b44;
  --towel-red: #c8432f;
  --towel-white: #fffdf8;
  --stripe: repeating-linear-gradient(
    90deg,
    var(--towel-red) 0 0.9rem,
    var(--towel-white) 0.9rem 1.8rem
  );
  --turquoise: #178582;
  --turquoise-strong: #0f605d;
  --turquoise-soft: #e4f1ee;
  --sun: #c96f22;
  --sun-strong: #9e5618;
  --sun-soft: #faeedd;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --focus: var(--green);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* One family marker: the towel stripe opens every Handtuch Held page. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--stripe);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--ink-strong);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

/* --- Header (light editorial, one family with Landing and Guest) ----------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 2.1rem;
  height: 0.8rem;
  background: var(--stripe);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* The operational signpost: same house, staff side. */
.brand-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-strong);
  border: 1px solid var(--line-strong);
  padding: 0.18rem 0.5rem;
  margin-left: 0.2rem;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.9rem;
}

.site-header nav a {
  padding: 0.7rem 0.45rem;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-header nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--towel-red);
}

.nav-signin {
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.5rem 0.95rem;
  margin-left: 0.35rem;
}

.nav-signin:hover { background: rgba(22, 50, 58, 0.07); }

/* A clicked login link stays visibly marked until the same-tab navigation
   completes — the departure is intentional, never abrupt. */
.is-departing { opacity: 0.72; }

/* --- Intro ------------------------------------------------------------------ */

.page-intro {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.kicker {
  margin: 0 0 0.8rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-strong);
}

.page-intro h1 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 54rem;
}

/* Entry row: live session status beside the explicit login CTA. */

.entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin: 1.4rem 0 0;
}

.entry-status { margin: 0; }

.entry-status .session-state { margin-bottom: 0.3rem; }

.entry-cta { margin: 0; }

.entry-login-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  border-radius: 2px;
  color: var(--card);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.entry-login-cta:hover {
  background: var(--green);
  border-color: var(--green);
}

/* --- Operational grid --------------------------------------------------------- */

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem 1.5rem;
}

/* The stripe stays the brand mark — a small, structural top edge. */
.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--stripe);
  opacity: 0.9;
}

.panel h2 {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-note {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --- Session states ------------------------------------------------------------- */

.context-region { min-height: 4rem; }

.context-region > p:first-child { margin-top: 0; }
.context-region > p:last-child { margin-bottom: 0; }

.context-loading { color: var(--ink-soft); font-style: italic; }

.session-state {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.session-state::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--state-anonymous);
}

.st-customer::before { background: var(--state-customer); }
.st-staff::before { background: var(--state-staff); }
.st-denied::before,
.st-error::before { background: var(--denied); }

.st-denied,
.st-error { color: var(--denied); }

/* Login-required is an invitation, not an error — the operational green marker. */
.st-login::before { background: var(--green-strong); }

.state-copy { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.state-error { margin: 0.2rem 0 0; color: var(--denied); }

.session-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.2rem;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.session-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.18rem;
}

.session-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.state-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-weight: 700;
  color: var(--green-strong);
  text-underline-offset: 4px;
}

/* --- Membership states and embedded chooser ----------------------------------- */

.st-invite::before { background: var(--state-anonymous); }

.st-unavailable { color: var(--state-customer); }
.st-unavailable::before { background: var(--state-customer); }

.hotel-chooser { margin: 0 0 0.8rem; }

.hotel-chooser label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hotel-chooser select {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.4rem 0.6rem;
  max-width: 100%;
}

.hotel-chooser select:disabled { opacity: 0.6; }

.state-button {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--card);
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  border-radius: 2px;
  cursor: pointer;
}

.state-button:hover { background: var(--green); border-color: var(--green); }

/* --- Access list ------------------------------------------------------------------ */

.panel-access { padding: 0; }

.panel-access h2 { padding: 1.3rem 1.4rem 0.9rem; margin: 0; }

.access-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.access-row {
  border-top: 1px solid var(--line);
  padding: 0.95rem 1.4rem;
}

.access-row a {
  font-weight: 700;
  color: var(--green-strong);
  text-decoration: none;
}

.access-row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.access-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- Footer ---------------------------------------------------------------------- */

.site-footer {
  max-width: 74rem;
  margin: clamp(2.4rem, 5vw, 4rem) auto 0;
  padding: 1.3rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer p { margin: 0 0 0.5rem; }

.site-footer a { color: var(--green-strong); font-weight: 600; }

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.footer-links a { color: var(--ink); font-weight: 600; }

/* --- Responsive -------------------------------------------------------------------- */

@media (max-width: 48em) {
  .ops-grid { grid-template-columns: 1fr; }
}

@media (max-width: 30em) {
  .site-header { flex-direction: column; align-items: stretch; }
  .site-header nav { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Hotel setup surface -------------------------------------------------------
   Dense operational area in the same house: cards with hairline edges, one
   accent color per section (green details, turquoise water/layout, green
   groups, sun slots, towel-red offers), towel stripe only in the setup head.
   No raster assets, no inline styles — every decoration lives here. */

/* Attribute-driven hiding must always win over layout display. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
}

.lang-picker {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--card);
  padding: 0.14rem;
  gap: 0.14rem;
}

.lang-option {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 2px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

.lang-option:hover { color: var(--ink); background: rgba(22, 50, 58, 0.06); }

.lang-option[aria-pressed="true"] {
  color: var(--towel-white);
  background: var(--green-strong);
}

/* --- Setup shell --------------------------------------------------------------- */

.setup-shell {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.setup-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 2.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.3rem 1.5rem 1.2rem;
  position: relative;
}

.setup-head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--stripe);
  opacity: 0.9;
}

.setup-head-copy { max-width: 40rem; }

.setup-head .kicker { margin-bottom: 0.5rem; }

.setup-title {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.setup-lede { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.setup-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.setup-badge {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.setup-badge-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

.setup-badge strong { color: var(--ink); font-size: 0.95rem; }

.setup-role {
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--green-strong);
  background: var(--card);
}

.setup-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem 0.75rem;
  max-width: 24rem;
}

.setup-nav a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.25rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.setup-nav a:hover { color: var(--turquoise-strong); border-bottom-color: var(--turquoise); }

.setup-readonly-note {
  margin: 0.9rem 0 0;
  padding: 0.7rem 1rem;
  background: var(--sun-soft);
  border: 1px solid var(--sun);
  border-left-width: 4px;
  color: var(--sun-strong);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Sticky save toolbar keeps the explicit save always in reach. */
.setup-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.7rem clamp(0.2rem, 1vw, 0.6rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.setup-dirty {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sun-strong);
}

.setup-dirty::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  background: var(--sun);
}

.btn {
  font: inherit;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  padding: 0.55rem 1.4rem;
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  color: var(--card);
}

.btn-primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); }

.btn-outline {
  padding: 0.55rem 1.4rem;
  background: transparent;
  border: 1px solid var(--green-strong);
  color: var(--green-strong);
  text-decoration: none;
  display: inline-block;
}

.btn-outline:hover:not(:disabled) { background: var(--turquoise-soft); }

.btn-add {
  margin-top: 0.7rem;
  padding: 0.45rem 0.95rem;
  background: transparent;
  border: 1.5px dashed var(--turquoise-strong);
  color: var(--turquoise-strong);
}

.btn-add:hover:not(:disabled) { background: var(--turquoise-soft); border-style: solid; }

.btn-add-sub { margin-top: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.btn-remove {
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.btn-remove:hover:not(:disabled) { border-color: var(--denied); color: var(--denied); }

/* --- Status and alerts ----------------------------------------------------------- */

.setup-status { min-height: 1.4rem; margin-top: 0.9rem; }

.setup-status-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.setup-status-line::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--state-anonymous);
}

.setup-loading { color: var(--ink-soft); font-style: italic; }
.setup-loading::before { background: var(--turquoise); }

.setup-saving { color: var(--turquoise-strong); }
.setup-saving::before { background: var(--turquoise); }

.setup-saved { color: var(--green-strong); }
.setup-saved::before { background: var(--green-strong); }

.setup-dirtyline { color: var(--sun-strong); }
.setup-dirtyline::before { background: var(--sun); }

.setup-empty-note-banner { color: var(--ink-soft); }
.setup-empty-note-banner::before { background: var(--state-anonymous); }

.setup-alert {
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: #fdf2f0;
  border: 1px solid var(--denied);
  border-left-width: 4px;
}

.setup-alert-title {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: var(--denied);
}

.setup-alert p { margin: 0.2rem 0; font-size: 0.92rem; }

.setup-alert .btn { margin-top: 0.55rem; }

.setup-login-link {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.45rem 0.9rem;
  color: var(--card);
  text-decoration: none;
}

.setup-issues { margin: 0.5rem 0 0; padding-left: 1.1rem; }

.setup-issues li { margin: 0.15rem 0; font-size: 0.88rem; }

.setup-issues-title { list-style: none; margin-left: -1.1rem; font-weight: 700; }

/* --- Setup cards ------------------------------------------------------------------- */

.setup-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: 1.2rem 0 0;
}

.setup-card {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.25rem 1.4rem 1.4rem;
  min-inline-size: 0;
}

.setup-card legend {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.setup-card legend span:first-child {
  border-bottom: 3px solid var(--green-strong);
  padding-bottom: 0.15rem;
}

.card-layout legend span:first-child { border-bottom-color: var(--turquoise); }
.card-groups legend span:first-child { border-bottom-color: var(--green); }
.card-slots legend span:first-child { border-bottom-color: var(--sun); }
.card-offers legend span:first-child { border-bottom-color: var(--towel-red); }
.card-authiane legend span:first-child,
.card-authiane h3 { border-bottom-color: var(--ink); }

.count-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}

.setup-card-desc {
  margin: 0.35rem 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  max-width: 52rem;
}

.setup-subhead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.4rem 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-strong);
}

/* --- Hotel details form ---------------------------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.4rem;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.field-wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input[type="text"],
.field textarea,
.setup-row input,
.setup-row select {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.45rem 0.6rem;
  width: 100%;
}

.field textarea { resize: vertical; }

.field input:disabled,
.field textarea:disabled,
.setup-row input:disabled,
.setup-row select:disabled,
.slot-row input:disabled {
  opacity: 0.72;
  background: var(--paper);
}

.field-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

#su-publicSlug,
#su-accentHex,
#su-timezone { font-family: var(--mono); }

.color-pair { display: flex; align-items: stretch; gap: 0.5rem; }

.color-pair input[type="color"] {
  inline-size: 3.2rem;
  block-size: 2.4rem;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
}

.color-pair input[type="text"] { flex: 1; }

.field-switch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  align-items: center;
}

.field-switch .field-hint { grid-column: 1 / -1; }

/* Switch control shared by booking flag and slot toggles. */
.switch {
  appearance: none;
  inline-size: 2.6rem;
  block-size: 1.45rem;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  flex: none;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--ink-soft);
  transition: transform 120ms ease, background-color 120ms ease;
}

.switch:checked { background: var(--turquoise-soft); border-color: var(--turquoise-strong); }

.switch:checked::after {
  transform: translateX(1.15rem);
  background: var(--turquoise-strong);
}

.field-switch .switch:checked { background: var(--green); border-color: var(--green-strong); }
.field-switch .switch:checked::after { background: var(--towel-white); }

/* --- Pools / layout ----------------------------------------------------------------- */

.pool-stack { display: grid; gap: 1rem; }

.setup-pool,
.setup-group {
  border: 1px solid var(--line);
  border-left: 4px solid var(--turquoise);
  background: var(--card);
  padding: 0.95rem 1.1rem 1.05rem;
}

.setup-group { border-left-color: var(--green); }

.setup-pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.setup-pool-title {
  margin: 0;
  font-size: 1rem;
  font-family: var(--display);
}

.row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.sublist { margin-top: 0.9rem; }

.sublist-title {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sublist-empty,
.setup-empty-note {
  margin: 0.3rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.setup-row {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}

.row-sector { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) auto; }

.row-unit {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) 5rem minmax(0, 1.3fr) 5.4rem 5.4rem auto;
}

.row-offer {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.6fr) auto;
}

.row-addon { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.5fr) auto; }

.row-field { display: flex; min-width: 0; }

.row-field input,
.row-field select { min-width: 0; }

.mono-input { font-family: var(--mono); font-size: 0.88rem; }

/* --- Layout preview (pure SVG, no raster) --------------------------------------------- */

.pool-preview { margin: 0.9rem 0 0; }

.pool-preview-title {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pv-plot {
  display: block;
  width: 100%;
  max-height: 11rem;
  background: linear-gradient(180deg, var(--turquoise-soft), var(--card));
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pv-frame { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }

.pv-dot { fill: var(--turquoise-strong); stroke: var(--towel-white); stroke-width: 0.7; }

.pool-preview-empty { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }

/* --- Groups ------------------------------------------------------------------------------ */

.group-stack { display: grid; gap: 1rem; margin-bottom: 0.4rem; }

.member-box {
  margin: 0.8rem 0 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.6rem 0.8rem 0.8rem;
  min-inline-size: 0;
  columns: 14rem;
  column-gap: 1.4rem;
}

.member-box legend {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0.35rem;
}

.member-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  break-inside: avoid;
}

.member-option input { flex: none; width: 1rem; height: 1rem; accent-color: var(--green-strong); }

/* --- Time slots --------------------------------------------------------------------------- */

.slot-stack { display: grid; gap: 0.7rem; }

.slot-row {
  display: grid;
  grid-template-columns: 0.45rem minmax(0, 1fr) auto;
  gap: 0.3rem 0.9rem;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.7rem 0.9rem;
}

.slot-row[data-slot-code="am"] .slot-mark { background: var(--turquoise); }
.slot-row[data-slot-code="pm"] .slot-mark { background: var(--sun); }
.slot-row[data-slot-code="full_day"] .slot-mark { background: var(--stripe); }

.slot-mark { align-self: stretch; width: 0.45rem; border-radius: 1px; }

.slot-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
}

.slot-name { font-size: 0.95rem; }

.slot-times { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

.slot-time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.slot-time input[type="time"] {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
}

/* --- Offers ---------------------------------------------------------------------------------- */

.offer-stack { margin-bottom: 0.4rem; }

/* --- Authiane links ---------------------------------------------------------------------------- */

.authiane-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.authiane-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--green-strong);
  background: var(--card);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.authiane-link:hover {
  border-bottom-color: var(--turquoise);
  background: var(--turquoise-soft);
}

.authiane-link strong { font-size: 0.95rem; }

.authiane-path {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* --- Responsive setup ---------------------------------------------------------------------------- */

@media (max-width: 56em) {
  .field-grid { grid-template-columns: 1fr; }
  .row-grid { grid-template-columns: 1fr; }
  .authiane-links { grid-template-columns: 1fr; }
  .row-unit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .row-sector,
  .row-offer,
  .row-addon {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .setup-nav { justify-content: flex-start; max-width: none; }
  .setup-head-meta { align-items: flex-start; }
}

@media (max-width: 30em) {
  .slot-row { grid-template-columns: 0.45rem 1fr; }
  .slot-times { grid-column: 1 / -1; }
  .setup-toolbar { flex-direction: column; align-items: stretch; }
  .setup-save-stretch { width: 100%; }
}

/* --- Task areas: Anlage bauen → Angebote verknüpfen → Prüfen & speichern ---- */

.setup-task {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.6);
  padding: 1.1rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.task-step {
  margin: 0;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--green-strong);
  background: var(--card);
  color: var(--green-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 999px;
}

.task-build .task-step { border-color: var(--turquoise-strong); color: var(--turquoise-strong); }
.task-offers .task-step { border-color: var(--sun-strong); color: var(--sun-strong); }

.task-head-copy { min-width: 0; }

.task-title {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink-strong);
}

.task-desc { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

.task-body {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Advanced coordinate disclosure -------------------------------------------------------------- */

.unit-advanced { margin-top: 0.35rem; border: 1px dashed var(--line); padding: 0.35rem 0.6rem; }

.unit-advanced summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink-soft);
  list-style-position: inside;
}

.unit-advanced summary:hover { color: var(--turquoise-strong); }

.unit-advanced[open] summary { color: var(--turquoise-strong); }

.unit-advanced .row-grid { margin-top: 0.5rem; }

/* --- Bulk unit creation ---------------------------------------------------------------------------- */

.tool-box {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--turquoise-soft);
  padding: 0.7rem 0.9rem;
}

.tool-box summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-strong);
  list-style-position: inside;
}

.tool-box summary:hover { color: var(--turquoise-strong); }

.tool-box[open] summary { margin-bottom: 0.6rem; }

.tool-box .setup-card-desc { margin-top: 0.2rem; }

.bulk-panel,
.import-panel { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.6rem; }

.bulk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
}

.bulk-grid .row-field,
.import-controls .row-field { display: flex; flex-direction: column; gap: 0.3rem; }

.bulk-preview,
.import-preview {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bulk-summary-title { margin: 0; font-weight: 700; }

.bulk-summary-list,
.import-rows {
  margin: 0;
  padding-left: 1.1rem;
  max-height: 14rem;
  overflow-y: auto;
}

.bulk-summary-list li,
.import-rows li { margin: 0.15rem 0; font-size: 0.88rem; font-family: var(--mono); }

.import-rows li { font-family: inherit; }

.panel-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* --- Table-paste (TSV) import --------------------------------------------------------------------- */

.import-controls { display: flex; flex-direction: column; gap: 0.7rem; }

.import-mode-box {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.6rem 0.8rem;
  margin: 0;
}

.import-mode-box legend { font-size: 0.85rem; color: var(--ink-soft); padding: 0 0.3rem; }

.import-mode-option {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.9rem;
  margin: 0.25rem 0;
  cursor: pointer;
}

.import-mode-option input { margin-top: 0.2rem; }

.import-replace-warn {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 4px solid var(--denied);
  background: rgba(138, 41, 38, 0.08);
  color: var(--denied);
  font-size: 0.88rem;
  font-weight: 600;
}

.import-text {
  width: 100%;
  min-height: 7rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}

.import-preview-title { margin: 0; font-weight: 700; }

.import-totals { margin: 0; font-size: 0.9rem; font-weight: 600; }

.import-row-new { color: var(--green-strong); }
.import-row-update { color: var(--turquoise-strong); }
.import-row-skip { color: var(--ink-soft); }
.import-row-error { color: var(--denied); }

/* --- Offer matrix (resource × slot) --------------------------------------------------------------- */

.catalog-status-host { margin: 0 0 0.8rem; }
.catalog-status { margin: 0; padding: 0.55rem 0.7rem; border-radius: 0.45rem; font-size: 0.87rem; }
.catalog-status-loading { background: var(--turquoise-soft); }
.catalog-status-ready { background: #e7f0eb; color: var(--green-strong); }
.catalog-status-unavailable { background: var(--sun-soft); color: var(--sun-strong); }

.catalog-choice { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; width: 100%; }
.catalog-select { width: 100%; min-width: 12rem; }
.catalog-facts, .catalog-warning { margin: 0; font-size: 0.76rem; line-height: 1.35; }
.catalog-facts { color: var(--ink-soft); }
.catalog-warning { color: var(--denied); font-weight: 650; }

.offer-matrix-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.offer-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.88rem;
}

.offer-matrix th,
.offer-matrix td {
  border: 1px solid var(--line);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.offer-matrix thead th {
  background: var(--turquoise-soft);
  color: var(--ink-strong);
  font-size: 0.82rem;
}

.offer-matrix tbody th {
  font-weight: 600;
  background: var(--card);
  min-width: 11rem;
}

.matrix-cell { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; min-width: 9rem; }

.matrix-toggle { width: 1.15rem; height: 1.15rem; accent-color: var(--green-strong); }

.matrix-sku { width: 100%; }

.matrix-mapping-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.matrix-mapping-list-compat {
  border-left: 3px solid var(--sun-strong);
  padding-left: 0.45rem;
}

.matrix-compat-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.matrix-mapping {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}

.matrix-remove-mapping {
  flex: 0 0 auto;
  padding-inline: 0.45rem;
}

.offer-dangling {
  margin-top: 0.8rem;
  border: 1px dashed var(--sun-strong);
  background: var(--sun-soft);
  padding: 0.7rem 0.9rem;
}

.dangling-title { margin: 0 0 0.2rem; font-weight: 700; color: var(--sun-strong); }

.dangling-desc { margin: 0 0 0.5rem; font-size: 0.87rem; color: var(--ink-soft); }

.dangling-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }

.dangling-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
}

/* --- Review summary -------------------------------------------------------------------------------- */

.review-summary { min-height: 1rem; }

.review-summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
}

.review-summary-list dt { font-size: 0.8rem; color: var(--ink-soft); }

.review-summary-list dd { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink-strong); }

.card-review .setup-toolbar { margin-top: 1rem; }

@media (max-width: 56em) {
  .bulk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .task-head { gap: 0.6rem; }
}

@media (max-width: 30em) {
  .bulk-grid { grid-template-columns: 1fr; }
  .matrix-cell { min-width: 8rem; }
}

/* --- Commercial follow-up: period, fixed payout table, refund states --------------------
    Restrained operational styling on the existing catalog/matrix vocabulary;
    the wide fixed report stays scrollable instead of squeezing the shell. */

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

.followup-member-note {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.45rem;
  background: var(--sun-soft);
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.followup-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.followup-field { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.followup-field input { min-width: 10rem; }

.followup-status-line { margin: 0 0 0.8rem; padding: 0.55rem 0.7rem; border-radius: 0.45rem; font-size: 0.87rem; }

.followup-status-line:empty { margin: 0; padding: 0; }

.followup-status-loading { background: var(--turquoise-soft); }

.followup-status-error { background: var(--sun-soft); color: var(--sun-strong); }

.followup-status-ok { background: #e7f0eb; color: var(--green-strong); }

.followup-table-wrap { max-width: 100%; overflow-x: auto; }

.followup-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; white-space: nowrap; }

.followup-table th,
.followup-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(22, 50, 58, 0.12);
}

.followup-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.followup-number { text-align: right; }

.followup-action { min-width: 14rem; }

.followup-cancel { margin-right: 0.4rem; }

.followup-badge {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.1rem 0.5rem;
  border-radius: 0.85rem;
  font-size: 0.72rem;
  background: var(--turquoise-soft);
  color: var(--ink-strong);
}

.followup-badge-completed,
.followup-badge-succeeded,
.followup-badge-cancelled { background: #e7f0eb; color: var(--green-strong); }

.followup-badge-exception,
.followup-badge-failed { background: var(--sun-soft); color: var(--sun-strong); }

.followup-demo-note { margin-top: 0.9rem; }

/* --- Hotel day operations: plan + list from one projection, booking detail ------
    Restrained operational styling on the existing catalog/follow-up vocabulary.
    Statuses always carry text labels — colour is never the only signal. */

.operations-member-note {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.45rem;
  background: var(--turquoise-soft);
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.operations-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.operations-field { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.operations-field input,
.operations-field select { min-width: 10rem; }

.operations-status-line { margin: 0 0 0.8rem; padding: 0.55rem 0.7rem; border-radius: 0.45rem; font-size: 0.87rem; }

.operations-status-line:empty { margin: 0; padding: 0; }

.operations-status-loading { background: var(--turquoise-soft); }

.operations-status-error { background: var(--sun-soft); color: var(--sun-strong); }

.operations-status-ok { background: #e7f0eb; color: var(--green-strong); }

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.2rem;
  align-items: start;
  margin: 0 0 1.2rem;
}

.operations-plan-panel h3,
.operations-list-panel h3,
.operations-exceptions-wrap h3 { margin: 0 0 0.6rem; }

.operations-plan-wrap,
.operations-list-wrap { max-width: 100%; overflow-x: auto; }

.operations-plan { border-collapse: collapse; font-size: 0.78rem; }

.operations-plan td {
  padding: 0.2rem;
  border: 1px dashed rgba(22, 50, 58, 0.14);
  vertical-align: top;
}

.operations-plan-gap { min-width: 1.1rem; min-height: 1.1rem; background: transparent; }

.operations-plan-tile {
  display: grid;
  gap: 0.25rem;
  min-width: 7rem;
  min-height: 2.8rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.4rem;
  align-content: start;
}

.operations-plan-code { font-family: var(--mono); font-size: 0.75rem; }

.operations-plan-tile-free { background: #e7f0eb; }

.operations-plan-tile-held { background: var(--turquoise-soft); }

.operations-plan-tile-booked { background: var(--sun-soft); }

.operations-plan-tile-blocked { background: rgba(200, 67, 47, 0.14); }

.operations-plan-empty,
.operations-exceptions-empty,
.operations-history-empty { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.operations-list { border-collapse: collapse; width: 100%; font-size: 0.85rem; }

.operations-list th,
.operations-list td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(22, 50, 58, 0.12);
}

.operations-list thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.operations-resource-name { display: block; font-weight: 600; }

.operations-resource-kind,
.operations-resource-code { display: block; font-size: 0.78rem; color: var(--ink-soft); }

.operations-mono { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

.operations-badge {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.5rem;
  border-radius: 0.85rem;
  font-size: 0.72rem;
  background: var(--turquoise-soft);
  color: var(--ink-strong);
}

.operations-badge-free { background: #e7f0eb; color: var(--green-strong); }

.operations-badge-held { background: var(--turquoise-soft); color: var(--turquoise-strong); }

.operations-badge-booked { background: var(--sun-soft); color: var(--sun-strong); }

.operations-badge-blocked { background: rgba(200, 67, 47, 0.14); color: var(--denied); }

.operations-badge-addon-open { background: var(--turquoise-soft); }

.operations-badge-addon-fulfilled { background: #e7f0eb; color: var(--green-strong); }

.operations-badge-addon-cancelled { background: rgba(200, 67, 47, 0.14); color: var(--denied); }

.operations-actions button,
.operations-plan-action { min-height: 2.4rem; }

.operations-detail {
  margin: 0 0 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card);
  display: grid;
  gap: 0.9rem;
}

.operations-detail-title { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }

.operations-detail h4 { margin: 0 0 0.4rem; }

.operations-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-size: 0.88rem;
}

.operations-facts dt { color: var(--ink-soft); }

.operations-facts dd { margin: 0; }

.operations-moved-note {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background: var(--sun-soft);
  color: var(--sun-strong);
  font-size: 0.87rem;
}

.operations-note-label,
.operations-move-label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.operations-note-input { min-height: 4rem; min-width: 16rem; }

.operations-note-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; }

.operations-addon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(22, 50, 58, 0.08);
}

.operations-addon-label { font-weight: 600; }

.operations-addon-controls { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.operations-move-row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.4rem 0 0; }

.operations-links {
  padding: 0.8rem;
  border-radius: 0.5rem;
  background: var(--turquoise-soft);
}

.operations-links-once { margin: 0 0 0.6rem; font-weight: 600; }

.operations-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0.3rem 0 0;
}

.operations-links-label { min-width: 8rem; font-size: 0.85rem; color: var(--ink-strong); }

.operations-links-value { flex: 1 1 14rem; }

.operations-history-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

.operations-history-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; font-size: 0.85rem; }

.operations-history-action { font-weight: 600; }

.operations-history-actor,
.operations-history-time { color: var(--ink-soft); }

.operations-exception-group { margin: 0 0 0.9rem; }

.operations-exception-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

.operations-exception-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.85rem; }

.operations-exception-error { color: var(--sun-strong); }

@media (max-width: 56em) {
  .operations-grid { grid-template-columns: 1fr; }
}

@media (max-width: 30em) {
  .operations-controls { flex-direction: column; align-items: stretch; }
  .operations-field input,
  .operations-field select { min-width: 0; width: 100%; }
  .operations-facts { grid-template-columns: 1fr; gap: 0.1rem; }
}