/* Re-Bath design system tokens (Brand Guidelines, Nov 2025) */
:root {
  --rebath-red: #a90533;   /* logo only */
  --white: #ffffff;
  --slate: #435465;        /* headlines, buttons */
  --clean-blue: #8cb6c9;   /* the Outline */
  --light-grey: #eeeeee;
  --dark-grey: #6d6e70;    /* body text */
  --maroon: #5e3b3f;       /* callout words, errors */

  --font-sans: Gotham, Montserrat, Arial, sans-serif;
  --font-serif: "FreightBig Pro", "Cormorant Garamond", "Times New Roman", serif;

  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 2px;
  --outline-width: 6px;

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--white);
  color: var(--dark-grey);
  font: 400 16px/24px var(--font-sans);
}

.top {
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--light-grey);
}
.logo { display: block; width: 140px; height: auto; margin: 0 auto; }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

.eyebrow {
  margin: 0;
  font-size: 12px; line-height: 16px; letter-spacing: .12em;
  color: var(--slate);
}
.headline {
  margin: var(--space-2) 0 0;
  font: 300 44px/50px var(--font-serif);
  color: var(--slate);
}
.headline em { font-style: italic; font-weight: 600; color: var(--maroon); }
.lede { margin: var(--space-4) 0 var(--space-8); font-size: 18px; line-height: 28px; font-weight: 300; }

.demo {
  margin: 0 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  background: var(--light-grey);
  color: var(--slate);
  font-size: 14px; line-height: 20px;
}

/* The Outline */
.panel {
  border: var(--outline-width) solid var(--clean-blue);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
.panel h2 {
  margin: 0 0 var(--space-4);
  font: 300 28px/34px var(--font-serif);
  color: var(--slate);
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }

.hint { margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; }
small { font-size: 12px; color: var(--dark-grey); font-weight: 400; }

.field { display: block; margin-bottom: var(--space-4); }
.field > span { display: block; margin-bottom: var(--space-1); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--slate); }
input[type=text], input[type=email], input:not([type]), textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b9bcc0;
  border-radius: var(--radius-sm);
  font: inherit; color: var(--slate);
  background: var(--white);
}
input:focus, textarea:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.invalid { border-color: var(--maroon) !important; outline: 1px solid var(--maroon); }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--slate);
  border-radius: var(--radius-sm);
  background: var(--slate);
  color: var(--white);
  font: 500 14px/20px var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: #36444f; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-secondary { background: var(--white); color: var(--slate); }
.btn-secondary:hover { background: var(--light-grey); }

.link {
  background: none; border: 0; padding: 0;
  color: var(--slate); font: 500 14px/20px var(--font-sans);
  text-decoration: underline; cursor: pointer;
}

.error { color: var(--maroon); font-weight: 500; font-size: 14px; margin: 0 0 var(--space-4); }

/* Acknowledgment */
.ack {
  margin: var(--space-2) 0 var(--space-6);
  padding: var(--space-4);
  background: var(--light-grey);
  color: var(--slate);
  font-size: 14px; line-height: 20px;
}
.ack-title { margin: 0 0 var(--space-2); font-weight: 500; }
.ack ul { margin: 0 0 var(--space-4); padding-left: 20px; }
.ack li { margin-bottom: var(--space-2); }
.ack-agree { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 500; cursor: pointer; }
.ack-agree input { flex: none; margin-top: 1px; }
.ack.invalid { outline: 1px solid var(--maroon); outline-offset: 2px; }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--light-grey);
}
.check:first-child { border-top: 0; padding-top: 0; }
.check-info { display: flex; flex-direction: column; min-width: 0; }
.check-type { font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.check-model { font-weight: 500; color: var(--slate); }
.check-meta { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.check-comment { grid-column: 1 / -1; margin: 0; }
.check.unanswered > .choice { outline: 1px solid var(--maroon); outline-offset: 4px; }
.condition { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); }
.condition-label { font-size: 14px; color: var(--slate); }
.condition-label small { font-weight: 400; }
.check-condition { grid-column: 1 / -1; margin: 0; }
.check-condition[hidden] { display: none; }

.choice { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.choice label, .na { display: inline-flex; gap: var(--space-2); align-items: center; font-size: 14px; cursor: pointer; white-space: nowrap; }
input[type=radio], input[type=checkbox] { accent-color: var(--slate); width: 18px; height: 18px; margin: 0; }

/* New items */
.item {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: var(--space-6) var(--space-4) var(--space-2);
  border: 1px solid #c9cdd1;
  background: #fafafa;
}
.item legend { padding: 0 var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--slate); }
.item .remove { position: absolute; top: var(--space-2); right: var(--space-4); }

.efm { margin-bottom: var(--space-4); padding: var(--space-4); background: var(--light-grey); }
.efm .field { margin-bottom: var(--space-2); }
.efm-example { margin-top: var(--space-4); }
.efm-example summary { cursor: pointer; color: var(--slate); font-size: 14px; font-weight: 500; }
.efm-example figure { margin: var(--space-4) 0 0; }
.efm-example img { display: block; width: 100%; max-width: 320px; height: auto; }
.efm-example figcaption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--slate); }

@media (max-width: 560px) {
  .headline { font-size: 36px; line-height: 42px; }
  .panel { padding: var(--space-4); }
  .check { grid-template-columns: 1fr; }
}