/* Palette sampled directly from the live Jotform consent form (form.jotform.com/261323584958265)
   via computed styles, so this matches exactly rather than approximately:
   - page background: rgba(143, 171, 122, 0.69) sage green over white
   - card background: rgb(239, 226, 244) lavender  (.form-all)
   - button: rgb(137, 45, 202) purple, white text  (.form-pagebreak-next / purple-400)
   - heading text: rgb(44, 51, 69) dark navy, Inter 600 */
:root {
  --misfit-sage: rgba(143, 171, 122, 0.69);
  --misfit-lavender: rgb(239, 226, 244);
  --misfit-purple: rgb(137, 45, 202);
  --misfit-purple-hover: rgb(117, 32, 177);
  --misfit-navy: rgb(44, 51, 69);
  color-scheme: light;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
}

html {
  background: #fff;
}

body {
  margin: 0;
  padding: 1rem;
  background: var(--misfit-sage);
  color: var(--misfit-navy);
  min-height: 100vh;
  box-sizing: border-box;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.brand-header img {
  height: 56px;
  width: auto;
}

.brand-header .brand-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--misfit-navy);
  letter-spacing: 0.02em;
}

.brand-header .brand-subtitle {
  font-size: 0.8rem;
  color: var(--misfit-navy);
  opacity: 0.75;
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 300px;
  padding: 2.5rem 2rem;
  background: var(--misfit-lavender);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(44, 51, 69, 0.12);
}

.login-card img {
  height: 64px;
  width: auto;
  margin-bottom: 0.5rem;
}

.login-card h1 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--misfit-navy);
}

.login-card .subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--misfit-navy);
  opacity: 0.75;
}

.login-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
}

.login-card button,
button {
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: #fff;
  background: var(--misfit-purple);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-card button {
  width: 100%;
}

button:hover {
  background: var(--misfit-purple-hover);
}

button.danger {
  background: #b3261e;
}

button.danger:hover {
  background: #8c1e18;
}

.error {
  color: #b0264f;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.topbar .brand-header {
  margin-bottom: 0;
}

.topbar-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#whatsapp-setup-link {
  color: #b0264f;
  font-weight: 600;
}

.panel {
  background: var(--misfit-lavender);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(44, 51, 69, 0.08);
}

.panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--misfit-navy);
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.panel-header-row h2 {
  margin-bottom: 0;
}

.panel-header-row a {
  font-size: 0.85rem;
  color: var(--misfit-purple);
}

.panel-header-row button {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(44, 51, 69, 0.15);
}

th {
  color: var(--misfit-navy);
  opacity: 0.75;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.actions button {
  margin-right: 0.25rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
}

.actions .hint {
  color: var(--misfit-navy);
  opacity: 0.6;
  font-style: italic;
  font-size: 0.9em;
}

.health-flag-note {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8em;
  font-weight: 600;
  color: #b3261e;
}

.health-flag-note li::before {
  content: "⚠ ";
}

.artist-picker {
  margin-bottom: 1rem;
}

.artist-box-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.artist-box {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--misfit-navy);
  background: #fff;
  border: 2px solid rgba(44, 51, 69, 0.2);
  border-radius: 8px;
  cursor: pointer;
}

.artist-box:hover {
  border-color: var(--misfit-purple);
  background: #fff;
}

.artist-box.selected {
  color: #fff;
  background: var(--misfit-purple);
  border-color: var(--misfit-purple);
}

.artist-picker-group {
  margin-bottom: 0.75rem;
}

.artist-picker-group:last-child {
  margin-bottom: 0;
}

.artist-picker-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--misfit-navy);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.section-heading {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--misfit-navy);
  opacity: 0.75;
}

.self-pay-note {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--misfit-navy);
  opacity: 0.6;
  font-style: italic;
}

.square-link-status {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--misfit-navy);
  opacity: 0.75;
}

.square-link-status a,
.square-link-status button {
  font-size: 0.8rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--misfit-purple);
  text-decoration: underline;
  cursor: pointer;
}

#open-event-form {
  display: flex;
  gap: 0.5rem;
}

#open-event-form input {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  font-family: inherit;
  background: #fff;
}

.event-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.artist-totals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.artist-total {
  min-width: 90px;
}

.artist-total-name {
  font-size: 0.85rem;
  color: var(--misfit-navy);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.artist-total-amount {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--misfit-navy);
}

.artist-total-count {
  font-size: 0.8rem;
  color: var(--misfit-navy);
  opacity: 0.6;
}

.artist-total-grand {
  border-left: 1px solid rgba(44, 51, 69, 0.2);
  padding-left: 1.5rem;
}

#reports-list details {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(44, 51, 69, 0.15);
}

#reports-list details:last-child {
  border-bottom: none;
}

#reports-list summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--misfit-navy);
}

#reports-list .report-detail {
  margin-top: 0.5rem;
  margin-left: 1rem;
  font-size: 0.85rem;
  color: var(--misfit-navy);
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.topbar-actions a {
  color: var(--misfit-purple);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
}

.subtitle {
  font-size: 0.85rem;
  color: var(--misfit-navy);
  opacity: 0.75;
  margin: 0 0 1rem;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--misfit-navy);
}

.settings-field input {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.inline-form input {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  font-family: inherit;
  background: #fff;
}

.qr-image {
  max-width: 300px;
}

.manual-tag {
  font-size: 0.75em;
  font-weight: 600;
  color: #b3261e;
  border: 1px solid #b3261e;
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

/* Distinguishes a tooth-gems entry inside a piercer's otherwise all-piercing panel
   (Maisha's line mixes both — see offers_tooth_gems in schema.sql). */
.tooth-gems-tag {
  font-size: 0.75em;
  font-weight: 600;
  color: #6750a4;
  border: 1px solid #6750a4;
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

/* A custom tattoo can't be worked in as a same-day walk-in — flags it so front desk
   tells the client up front that it needs a scheduled appointment instead. */
.custom-tattoo-tag {
  font-size: 0.75em;
  font-weight: 600;
  color: #b3261e;
  border: 1px solid #b3261e;
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

#manual-contact-banner h2 {
  color: #b3261e;
}

.manual-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.manual-contact-list li {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-radius: 4px;
  background: rgba(179, 38, 30, 0.05);
}

.manual-contact-note {
  font-size: 0.85rem;
  color: var(--misfit-navy);
  opacity: 0.8;
  margin: 0.15rem 0 0.4rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 51, 69, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(44, 51, 69, 0.3);
}

/* Belt-and-suspenders for every element inside any modal (not just the wizard
   input/select below): without this, a plain content-box <input> with width:100% adds
   its padding and border ON TOP of that 100%, overflowing past the modal's own padding
   and right up against — or past — its rounded edge, instead of lining up flush with
   the buttons below it. */
.modal * {
  box-sizing: border-box;
}

.modal p {
  color: var(--misfit-navy);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

.modal img.consent-qr {
  width: 220px;
  height: 220px;
  margin: 0 auto 1rem;
  display: block;
}

.modal a.consent-link-fallback {
  display: block;
  font-size: 0.8rem;
  color: var(--misfit-purple);
  margin-bottom: 1rem;
  word-break: break-all;
}

.modal button {
  width: 100%;
}

/* Wizard popups (New Client + Open a queue — see openNewClientWizard/openNewQueueWizard
   in app.js) — their own text input/select plus a Back/Next (or Back/Add-to-queue,
   Back/Open walk-in queue) row of two side-by-side buttons, instead of the single
   full-width OK/Done button every other modal screen uses. */
#new-client-modal-body select,
#new-client-modal-body input,
#new-queue-modal-body select,
#new-queue-modal-body input {
  width: 100%;
  /* Without this, width:100% only sets the CONTENT box — the padding and border below
     get added ON TOP of that, so the field renders wider than the modal's other rows
     (Back/Next, the label text) instead of lining up flush with them. Same fix
     .login-card input already has; this rule just missed it. */
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  /* Replaces the browser's own (Chrome: thick blue) default ring with one that actually
     matches the brand, on both the select and the text inputs. */
  outline: none;
}

#new-client-modal-body select:focus,
#new-client-modal-body input:focus,
#new-queue-modal-body select:focus,
#new-queue-modal-body input:focus {
  border-color: var(--misfit-purple);
  box-shadow: 0 0 0 3px rgba(137, 45, 202, 0.15);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
}

.modal-actions button {
  flex: 1;
  width: auto;
  /* Same padding as the solid Next/submit button (overrides .link-btn's smaller one
     below) so Back reads as an equal-weight button, not a stray line of text crammed
     beside a much bigger one. */
  padding: 0.65rem 1rem;
}

.modal-actions button:disabled {
  opacity: 0.5;
}

/* Back needs to look like a real (if secondary) button here, not the bare-text link it
   is everywhere else (◀ All queues, + Start a new queue) — an outline in the same
   purple reads as "equally a button" next to solid-fill Next/Add-to-queue, at matching
   size, rather than the plain unstyled text that made the row look lopsided. */
.modal-actions .link-btn {
  background: #fff;
  border: 1.5px solid var(--misfit-purple);
  color: var(--misfit-purple);
}

.modal-actions .link-btn:hover {
  background: var(--misfit-lavender);
}

.wizard-empty-note {
  color: #b3261e;
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

/* Applied on a failed Next click (see validateRequiredField in app.js) — an empty
   required field reads as "you missed this" instead of Next just silently refusing to
   advance with no explanation. Cleared the moment they start typing again. */
.wizard-field-invalid {
  border-color: #b3261e !important;
}

/* Plain-text-styled button for secondary actions inline with .event-summary — "◀ All
   queues", "+ Open another queue", "‹ Cancel" — that shouldn't compete visually with the
   primary purple "Close queue" button. */
.link-btn {
  background: none;
  color: var(--misfit-purple);
  padding: 0.4rem 0.5rem;
  font-weight: 500;
}

.link-btn:hover {
  background: rgba(44, 51, 69, 0.06);
}

.event-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.event-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
}

.event-picker-location {
  font-weight: 400;
  opacity: 0.85;
}

.event-picker-count {
  font-size: 0.85rem;
  opacity: 0.85;
}

.day-of-week-best {
  font-weight: 600;
  background: rgba(44, 51, 69, 0.06);
}

/* ---------- Built-in consent form (/f/:slug), styled after the Jotform forms it replaces ---------- */
.cf-body {
  padding: 2rem 1rem 3rem;
}

.cf-card {
  max-width: 752px;
  margin: 0 auto;
  background: var(--misfit-lavender);
  border-radius: 8px;
  padding: 1.5rem 2.25rem 2rem;
  box-shadow: 0 4px 24px rgba(44, 51, 69, 0.12);
  box-sizing: border-box;
}

.cf-loading,
.cf-message {
  font-size: 1.05rem;
}

.cf-message p:first-child {
  font-size: 1.4rem;
  font-weight: 600;
}

.cf-header img {
  width: 170px;
  height: auto;
  display: block;
}

.cf-heading {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(44, 51, 69, 0.15);
}

.cf-heading h1 {
  margin: 0.75rem 0 0.2rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.cf-subheading {
  font-size: 0.95rem;
  opacity: 0.8;
}

.cf-paragraph,
.cf-inline {
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.cf-center {
  text-align: center;
}

.cf-field {
  margin-bottom: 1.4rem;
  padding: 0.25rem 0;
}

.cf-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.45;
}

.cf-req {
  color: #f23a3c;
}

.cf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--misfit-navy);
  background: #fff;
  border: 1px solid #c3cad8;
  border-radius: 4px;
}

.cf-input:focus {
  outline: none;
  border-color: var(--misfit-purple);
  box-shadow: 0 0 0 3px rgba(137, 45, 202, 0.2);
}

.cf-textarea {
  min-height: 7rem;
  resize: vertical;
}

.cf-row,
.cf-address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cf-address .cf-sub:nth-child(1),
.cf-address .cf-sub:nth-child(2) {
  grid-column: 1 / -1;
}

.cf-sub {
  display: flex;
  flex-direction: column;
}

.cf-sublabel {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-top: 0.3rem;
}

.cf-choices {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cf-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.cf-choice input[type="checkbox"],
.cf-choice input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--misfit-purple);
  flex-shrink: 0;
}

.cf-choice-other .cf-input {
  max-width: 320px;
}

.cf-inline-input {
  display: inline-block;
  width: auto;
  min-width: 9rem;
  margin: 0.2rem 0.25rem;
}

.cf-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.cf-signature-pad {
  width: 100%;
  max-width: 420px;
  height: 150px;
  background: #fff;
  border: 1px solid #c3cad8;
  border-radius: 4px;
  touch-action: none;
  cursor: crosshair;
}

button.cf-link-btn {
  background: none;
  color: var(--misfit-purple);
  padding: 0;
  font-size: 0.85rem;
  text-decoration: underline;
}

button.cf-link-btn:hover {
  background: none;
}

.cf-error {
  color: #b0264f;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.cf-error:empty {
  display: none;
}

.cf-invalid {
  background: rgba(242, 58, 60, 0.06);
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.cf-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.cf-nav .cf-btn:only-child {
  margin-left: auto;
}

.cf-btn {
  min-width: 140px;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
}

button.cf-btn-secondary {
  background: #fff;
  color: var(--misfit-navy);
  border: 1px solid #c3cad8;
}

button.cf-btn-secondary:hover {
  background: #f3f0f6;
}

.cf-form-error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border-left: 4px solid #b0264f;
  border-radius: 4px;
  color: #b0264f;
}

.cf-preview-banner {
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background: #fff4c2;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 560px) {
  .cf-card {
    padding: 1.25rem 1rem 1.5rem;
  }
  .cf-row,
  .cf-address {
    grid-template-columns: 1fr;
  }
  .cf-inline-input {
    min-width: 0;
    width: 100%;
    margin: 0.3rem 0;
  }
}

/* ---------- Forms page, editor and submission viewer ---------- */
.settings-field textarea,
.settings-field select {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(44, 51, 69, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--misfit-navy);
}

.inline-form {
  flex-wrap: wrap;
  align-items: flex-end;
}

.inline-form .settings-field {
  margin-bottom: 0;
}

.fe-grow {
  flex: 1 1 280px;
}

a.button-link {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  margin-right: 0.25rem;
  font-size: 0.85rem;
  color: #fff;
  background: var(--misfit-purple);
  border-radius: 4px;
  text-decoration: none;
}

.hint {
  font-size: 0.8rem;
  opacity: 0.7;
}

.draft-tag,
.fe-flag-tag,
.flag-count {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background: #fff4c2;
  color: #6b5200;
}

.flag-count {
  background: #fde2e7;
  color: #8c1e3c;
}

.archived-row {
  opacity: 0.55;
}

.fe-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--misfit-lavender);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(44, 51, 69, 0.12);
}

.fe-status {
  font-weight: 600;
}

.fe-toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fe-problems {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border-left: 4px solid #b0264f;
  border-radius: 4px;
  color: #b0264f;
}

.fe-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 1rem;
}

.fe-field {
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid rgba(44, 51, 69, 0.12);
  border-radius: 8px;
}

.fe-type-pagebreak {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.5);
}

.fe-type-heading {
  border-left: 4px solid var(--misfit-purple);
}

.fe-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
}

.fe-type {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4px;
  background: var(--misfit-lavender);
}

.fe-summary {
  flex: 1 1 240px;
  font-size: 0.9rem;
}

.fe-field-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}

.fe-field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

.fe-field-buttons button:disabled {
  opacity: 0.35;
  cursor: default;
}

.fe-props {
  padding: 0.75rem 1rem 0.25rem;
  border-top: 1px solid rgba(44, 51, 69, 0.1);
}

.fe-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.fe-subhead {
  margin: 0.25rem 0 0.6rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.fe-flag,
.fe-parts {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.75rem 0.25rem;
  background: var(--misfit-lavender);
  border-radius: 6px;
}

.fe-part-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 0.75rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

.fe-json-text {
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
}

.sub-card {
  max-width: 820px;
}

.sub-meta {
  font-size: 0.9rem;
  line-height: 1.5;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(44, 51, 69, 0.15);
}

.sub-muted {
  opacity: 0.65;
  font-weight: 400;
  font-size: 0.85rem;
}

.sub-flags {
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  background: #fde2e7;
  border-radius: 6px;
  color: #8c1e3c;
}

.sub-flags ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.sub-heading {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.15rem;
}

.sub-field {
  margin-bottom: 0.9rem;
  page-break-inside: avoid;
}

.sub-answer {
  padding: 0.35rem 0.6rem;
  background: #fff;
  border-radius: 4px;
}

.sub-signature {
  max-width: 320px;
  max-height: 140px;
  display: block;
}

.sub-blank {
  font-weight: 600;
  text-decoration: underline;
}

@media print {
  body {
    background: #fff;
    padding: 0;
  }
  .no-print {
    display: none;
  }
  .cf-card {
    box-shadow: none;
    background: #fff;
    max-width: none;
    padding: 0;
  }
  .sub-answer {
    border: 1px solid #ccc;
  }
}
.consent-view-link { font-size: 0.8rem; margin-left: 0.25rem; color: var(--misfit-purple); }
.submission-tools { margin-top: 0; }

/* Forms site home page (choose.html) */
.cf-choose {
  max-width: 560px;
  text-align: center;
}

.cf-choose .cf-header img {
  margin: 0 auto;
  width: 200px;
}

.cf-choose h1 {
  margin: 1rem 0 0.5rem;
  font-size: 1.6rem;
}

.cf-choose-intro {
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.cf-choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cf-choose-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.6rem 1rem;
  border-radius: 10px;
  background: var(--misfit-purple);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(137, 45, 202, 0.25);
  transition: transform 0.1s ease, background 0.1s ease;
}

.cf-choose-option:hover,
.cf-choose-option:focus-visible {
  background: var(--misfit-purple-hover);
  transform: translateY(-1px);
}

.cf-choose-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.cf-choose-sub {
  font-size: 0.9rem;
  opacity: 0.9;
}

.cf-choose-foot {
  margin: 1.75rem 0 0;
  font-size: 0.8rem;
  opacity: 0.65;
}

@media (max-width: 480px) {
  .cf-choose-grid {
    grid-template-columns: 1fr;
  }
}
.topbar-actions #signed-in-as { align-self: center; }
select[data-action="artist"] { margin-left: 0.4rem; }
.users-must-change { align-self: center; margin: 0; }

/* Signed-forms filter bar */
.sub-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.75rem;
  margin-bottom: 0.25rem;
}

.sub-filters .settings-field {
  margin-bottom: 0.75rem;
}

.sub-filters .settings-field input,
.sub-filters .settings-field select {
  min-width: 9rem;
}

.sub-filters .fe-check,
.sub-filters .link-btn {
  margin-bottom: 0.85rem;
}