/* ============ Linko minimal — app-like, no cards ============ */

.min-bg { min-height: 100vh; }
.min-stage {
  min-height: 100vh; display: flex; flex-direction: column;
  max-width: 780px; margin: 0 auto; padding: 22px 22px 26px; position: relative;
}
/* interactive content stays comfortable inside the wider stage */
.min-list, .min-form, .min-form-head, .min-namebar, .min-urlcopy, .min-submit { margin-left: auto; margin-right: auto; }
.min-list, .min-form, .min-form-head { width: 100%; max-width: 600px; }
.min-submit { max-width: 600px; }
.min-urlcopy { max-width: 560px; }

/* top bar */
.min-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.min-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.min-brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
.min-brand .brand-mark::after { display: none; }
.min-theme, .min-back {
  height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-dim); font-size: 14px; font-weight: 600; transition: all .15s var(--ease);
}
.min-theme { width: 38px; padding: 0; justify-content: center; }
.min-theme:hover, .min-back:hover { color: var(--text); border-color: var(--border-strong); }

/* centered content */
/* safe center: centers when content fits, aligns to top (scrollable) when it overflows */
.min-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; padding: 24px 0; }
.min-center.narrow, .min-center.form { justify-content: flex-start; padding-top: 36px; }

.min-essentials { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.min-essentials span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.min-essentials svg { color: var(--accent); }

/* RSVP kicker */
.mr-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill); padding: 7px 14px;
}

/* ---- home refinements ---- */
.min-stage.home { max-width: 780px; }
.home .min-center { padding: 12px 0 24px; }
.home-h1 { max-width: none; text-wrap: balance; }
.home .min-sub { max-width: 58ch; }

/* name bar: wider, thinner, inline submit on the right */
.home .min-namebar, .min-namebar.wide {
  max-width: 600px;
}
.min-namebar {
  width: 100%; max-width: 540px; display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.min-namebar:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 5px var(--accent-soft); }
.min-pfx { color: var(--text-faint); font-size: 15px; flex: none; }
.min-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--text); font-size: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; padding: 11px 6px; }
.min-input::placeholder { color: var(--text-faint); }
.min-namego {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 20px; border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 6px 16px -6px rgba(234,88,12,.6); transition: background .15s, transform .12s, opacity .15s;
}
.min-namego:hover:not(:disabled) { background: var(--accent-hover); }
.min-namego:active:not(:disabled) { transform: scale(.97); }
.min-namego:disabled { background: var(--surface-3); color: var(--text-faint); box-shadow: none; cursor: not-allowed; }

.min-slug-hint { font-size: 12.5px; color: var(--text-faint); margin: 12px 0 18px; min-height: 16px; letter-spacing: .01em; }


/* essentials as one tidy inline row */
.home .min-essentials { gap: 12px; margin: 0 0 6px; align-items: center; }
.home .min-essentials .sep { color: var(--border-strong); font-weight: 700; }
.home .min-essentials span:not(.sep) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }

.home .min-skip { margin-top: 28px; }

/* ---- upgraded home footer ---- */
.home-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.mf-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--text-dim); }
.mf-brand .brand-mark { width: 18px; height: 18px; border-radius: 5px; }
.mf-brand .brand-mark::after { display: none; }
.mf-mid { font-size: 11.5px; color: var(--text-faint); }
.mf-example { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--text); padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.mf-example:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }
.mf-example svg { transition: transform .15s var(--ease); }
.mf-example:hover svg { transform: translateX(3px); }
@media (max-width: 480px) {
  .home-foot { justify-content: center; }
  .mf-mid { display: none; }
  .min-namego { padding: 0 14px; }
  .min-namego .ng-text { display: none; }
  .min-namebar { padding: 5px 5px 5px 14px; }
  .min-pfx { font-size: 13.5px; }
}

.min-h1 { font-size: clamp(30px, 7vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin: 0 0 14px; }
.min-h1.sm { font-size: clamp(24px, 5vw, 30px); }
.min-sub { font-size: 16px; color: var(--text-dim); line-height: 1.55; margin: 0 0 30px; max-width: 38ch; }

/* the name bar — the hero input */
.min-namebar {
  width: 100%; max-width: 420px; display: flex; align-items: center;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 4px 6px 4px 16px; transition: border-color .15s, box-shadow .15s;
}
.min-namebar:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 5px var(--accent-soft); }
.min-pfx { color: var(--text-faint); font-size: 16px; flex: none; }
.min-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--text); font-size: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; padding: 12px 8px; }
.min-input::placeholder { color: var(--text-faint); }
.min-slug-hint { font-size: 12.5px; color: var(--text-faint); margin: 10px 0 22px; min-height: 16px; }

.min-go { min-width: 200px; justify-content: center; }
.min-go:disabled { opacity: .45; }
.min-skip { margin-top: 20px; font-size: 14px; color: var(--text-faint); }
.min-link { background: none; border: none; color: var(--accent); font-weight: 650; font-size: inherit; cursor: pointer; padding: 0; }
.min-link:hover { text-decoration: underline; }

.min-foot { text-align: center; font-size: 11.5px; color: var(--text-faint); letter-spacing: .02em; padding-top: 16px; }

/* step 2 — pick list */
.min-list { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.min-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 15px 16px; color: var(--text); transition: all .15s var(--ease);
}
.min-row:hover { border-color: var(--accent-line); transform: translateX(3px); }
.min-row-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.min-row-body { flex: 1; display: flex; flex-direction: column; }
.min-row-t { font-weight: 700; font-size: 15.5px; }
.min-row-d { font-size: 13px; color: var(--text-dim); }
.min-row > svg { color: var(--text-faint); flex: none; }
.min-row:hover > svg { color: var(--accent); }

/* step 3 — form */
.min-form-head { display: flex; align-items: center; gap: 13px; width: 100%; margin-bottom: 22px; text-align: left; }
.min-form-head .min-link.sample { margin-left: auto; font-size: 13.5px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.min-form-head .min-link.sample:hover { text-decoration: none; border-color: var(--accent-line); }
.min-form { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.min-field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.min-label { font-size: 13.5px; font-weight: 650; color: var(--text); }
.min-opt { color: var(--text-faint); font-weight: 500; }
.min-field-input {
  width: 100%; background: transparent; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--border-strong); border-radius: 0;
  padding: 9px 2px; font-size: 16px; transition: border-color .15s;
}
.min-field-input:focus { outline: none; border-bottom-color: var(--accent); }
.min-field-input::placeholder { color: var(--text-faint); }
textarea.min-field-input { resize: vertical; line-height: 1.5; }
.min-submit { margin-top: 30px; }
.min-miss { font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: 12px; }

/* step 4 — done */
.min-done-ic { color: var(--good); margin-bottom: 18px; }
.min-urlcopy {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 14px 16px; color: var(--text); font-size: 14px; margin: 6px 0 26px; transition: border-color .15s;
}
.min-urlcopy:hover { border-color: var(--accent-line); }
.min-urlcopy .u-trunc { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-urlcopy svg { color: var(--accent); flex: none; }
.min-done-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.min-done-actions .btn { min-width: 210px; justify-content: center; }
@media (max-width: 480px) { .min-done-actions { flex-direction: column; } .min-done-actions .btn { width: 100%; } }

/* anim — entrance animation disabled: the transform promoted a GPU layer that
   left rendering artifacts ("static") on some mobile GPUs */

@media (max-width: 480px) {
  .min-stage { padding: 16px 16px 22px; }
  .min-essentials { gap: 12px; }
  .min-namebar { padding: 4px 6px 4px 12px; }
  .min-pfx { font-size: 14px; }
  .min-go, .min-done-actions .btn { width: 100%; }
  .min-h1 { font-size: clamp(27px, 8.5vw, 36px); }
  .min-sub { font-size: 15px; }
  .min-field-input { font-size: 16px; }   /* no iOS zoom */
  .btn { min-height: 48px; }
  .min-theme, .min-back { height: 40px; }
  .min-urlcopy { font-size: 13px; }
}

/* ======================================================================
   Apantia project additions (not in the handoff)
   ====================================================================== */

/* kicker + "see an example" on one row at the top of the home */
.kicker-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.kicker-row .mr-kicker { margin-bottom: 0; }

/* home footer legal/about links */
.mf-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mf-links a { font-size: 13px; font-weight: 600; color: var(--text-dim); transition: color .15s; }
.mf-links a:hover { color: var(--accent); }

/* theme button: render both sun+moon, show one per theme (no JS swap needed) */
.min-theme .theme-moon { display: none; }
.min-theme .theme-sun { display: inline-block; }
[data-theme="light"] .min-theme .theme-sun { display: none; }
[data-theme="light"] .min-theme .theme-moon { display: inline-block; }

/* native date/time picker indicator — invisible (dark icon) on dark themes */
.min-stage input[type="date"]::-webkit-calendar-picker-indicator,
.min-stage input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
[data-theme="dark"] .min-stage input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .min-stage input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="blue"] .min-stage input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="blue"] .min-stage input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* uniformity: render Django's .input/.textarea widgets card-less inside .min-stage
   so the rsvp/stay/order create forms all match the minimal style */
.min-stage form { width: 100%; }
.min-stage .create-shell { max-width: 600px; margin: 0 auto; padding: 0; }
.min-stage .form-grid { display: flex; flex-direction: column; gap: 18px; }
.min-stage .field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.min-stage .field.full { grid-column: auto; }
.min-stage .label { font-size: 13.5px; font-weight: 650; color: var(--text); }
.min-stage .opt { color: var(--text-faint); font-weight: 500; }
.min-stage .input, .min-stage .textarea {
  width: 100%; background: transparent; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--border-strong); border-radius: 0;
  padding: 9px 2px; font-size: 16px; transition: border-color .15s;
}
.min-stage .input:focus, .min-stage .textarea:focus { outline: none; border-bottom-color: var(--accent); }
.min-stage .textarea { resize: vertical; line-height: 1.5; }
.min-stage .form-section-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 26px 0 4px; }
.min-stage .checkbox-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.min-stage .check-item { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 13px; font-size: 13.5px; cursor: pointer; }
.min-stage .form-foot { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 30px; }
.min-stage .form-foot .btn { width: 100%; justify-content: center; }