/* Lunchbox auth (login/signup): the BRAND skin, not the app skin.
   Palette and type from the brand sheet: Paper/Ink neutrals, one green at
   two weights (Forest on light, Sage on dark, never mixed on the same
   background), Inter for text, Fira Code for slips and labels, Peace Sans
   for the wordmark only. */

@font-face {
  font-family: 'Peace Sans';
  src: url('/static/fonts/peace-sans.woff2') format('woff2'),
       url('/static/fonts/peace-sans.woff') format('woff');
  font-display: swap;
}

:root {
  --paper: #F6F1E4;
  --paper-2: #EFE6D3;
  --white: #FFFFFF;
  --ink: #2B2A24;
  --ink-70: #6E6B5C;
  --ink-40: #A39C8A;
  --forest: #3B5C34;
  --forest-deep: #2F4A2A;
  --sage: #7FA06E;
  --line: rgba(43, 42, 36, 0.14);
  --line-dark: rgba(246, 241, 228, 0.16);
  --mono: 'Fira Code', ui-monospace, SFMono-Regular, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

.auth-body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 42%) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Brand panel (dark: Ink + Sage) ---- */
.brand-panel {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 40px 48px;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  width: fit-content;
}
.brand-mark { width: 34px; height: 34px; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-word {
  font-family: 'Peace Sans', 'Inter', sans-serif;
  font-size: 19px;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.panel-body { margin: auto 0; padding: 48px 0; max-width: 380px; }

.panel-line {
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 32px;
}
.panel-line em { font-style: normal; color: var(--sage); }

.panel-foot {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-40);
  line-height: 1.6;
  max-width: 380px;
}

/* ---- The order slip ---- */
.slip {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border-radius: 10px 10px 0 0;
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  max-width: 340px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  animation: slip-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.slip::after {
  /* torn receipt edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background:
    linear-gradient(-45deg, transparent 5.5px, var(--white) 0) 0 0 / 14px 8px repeat-x,
    linear-gradient(45deg, transparent 5.5px, var(--white) 0) 7px 0 / 14px 8px repeat-x;
}
@keyframes slip-in {
  from { opacity: 0; transform: translateY(14px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

.slip-head {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--ink-70);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.slip-steps { list-style: none; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.slip-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  color: var(--ink-70);
}
.slip-steps .idx { color: var(--ink-40); }
.slip-steps .lbl { flex: 1; }
.slip-steps .val { color: var(--ink); }
.slip-steps .is-now,
.slip-steps li.is-now .idx { color: var(--forest); font-weight: 500; }
.slip-steps li.is-now .val {
  color: var(--white);
  background: var(--forest);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
}

.slip-rows { padding-top: 12px; }
.srow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: var(--ink-70);
}
.srow span:last-child { color: var(--ink); }
.srow.is-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.srow.is-note, .srow.is-note span:last-child { color: var(--ink-40); font-size: 11.5px; }

.slip-stub { max-width: 280px; }

/* ---- Form side (light: Paper + Forest) ---- */
.form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.form-col { width: 100%; max-width: 460px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-70);
  margin-bottom: 10px;
}
.form-col h1 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.sub { color: var(--ink-70); font-size: 15px; margin-bottom: 24px; }

.auth-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 2px 6px rgba(43, 42, 36, 0.05), 0 12px 32px rgba(43, 42, 36, 0.07);
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: var(--ink-40); }
.field input:focus,
.field input:focus-visible {
  outline: none;   /* the forest border + ring below IS the focus indicator */
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(59, 92, 52, 0.16);
}
.hint { font-size: 12px; color: var(--ink-40); margin-top: 5px; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--forest);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.pw-toggle:hover { background: rgba(59, 92, 52, 0.08); }

/* Plan picker */
.plan-picker { border: none; margin-bottom: 18px; }
.plan-picker legend {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.plan-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-tile {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.plan-tile:hover { border-color: var(--forest); }
.plan-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plan-tile .tier { display: block; font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.plan-tile .price { display: block; font-family: var(--mono); font-size: 13px; color: var(--ink-70); }
.plan-tile .price small { font-size: 10px; }
.plan-tile:has(input:checked) {
  border-color: var(--forest);
  background: rgba(59, 92, 52, 0.10);
  box-shadow: inset 0 0 0 1px var(--forest);
}
.plan-tile:has(input:checked) .price { color: var(--forest); }
.plan-tile:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }

.plan-note {
  font-size: 14px;
  color: var(--ink-70);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.plan-note strong { color: var(--ink); }
.plan-note a { color: var(--forest); }

/* Actions */
.btn-go {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  background: var(--forest);
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s, transform 0.1s;
}
.btn-go:hover { background: var(--forest-deep); }
.btn-go:active { transform: translateY(1px); }
.btn-go.is-busy { opacity: 0.85; cursor: progress; }
.btn-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.fine {
  font-size: 12.5px;
  color: var(--ink-40);
  text-align: center;
  margin-top: 12px;
}

.alt { margin-top: 22px; font-size: 14px; color: var(--ink-70); }
.alt a, .form-col a { color: var(--forest); font-weight: 600; text-decoration: none; }
.alt a:hover, .form-col a:hover { text-decoration: underline; }

/* Flashes: functional colours, kept muted so they sit on the palette */
.alert {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--white);
}
.alert.error { border-color: rgba(162, 59, 46, 0.4); background: #FBEFEC; color: #7C2D22; }
.alert.success { border-color: rgba(59, 92, 52, 0.4); background: #EFF4EC; color: var(--forest-deep); }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { padding: 24px 24px 30px; }
  .panel-body { margin: 0; padding: 26px 0 4px; max-width: none; }
  .panel-line { font-size: 24px; margin-bottom: 20px; }
  .slip { max-width: 360px; }
  .slip-stub, .brand-panel .panel-foot { display: none; }
  .form-side { padding: 32px 16px 48px; align-items: flex-start; }
  .auth-card { padding: 20px 16px; }
  .plan-tiles { grid-template-columns: 1fr; }
  .plan-tile { display: flex; justify-content: space-between; align-items: baseline; }
  .plan-tile .tier { margin-bottom: 0; }
}
@media (max-width: 920px) {
  /* On login (stub hidden) the panel is just the brand band */
  .brand-panel:has(.slip-stub) .panel-body { padding: 18px 0 0; }
  .brand-panel:has(.slip-stub) .panel-line { margin-bottom: 0; }
}

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