/* ============================================================================
   THE MARANI, member cellar and fulfilment dashboard
   Self contained: reads only /assets/tokens.css. No other stylesheet.

   Built as the prototype of a future standalone application, so this file
   carries its own reset and primitives rather than depending on the site's
   base.css. If /club is lifted into its own repo later, only tokens.css needs
   to travel with it.

   Floor rule, and it is the whole reason this file looks the way it does:
   this screen goes on a television from three metres. --text-sm is the
   smallest size used anywhere on this page. Nothing smaller, ever.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Reset and shell
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win. The browser's own [hidden] { display: none } is a single
   attribute selector, so any class rule that sets display beats it. This bug
   shipped two modals onto screens on page load elsewhere in this build, both
   of them the first thing visible. base.css carries the same rule, but this
   file is deliberately standalone, so it needs its own copy. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-sm); }

a { color: var(--saperavi); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { color: var(--saperavi-deep); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

button, input, select, textarea { font: inherit; color: inherit; }

.page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.stack > * + * { margin-top: var(--space-sm); }

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

.skip-link {
  position: absolute; left: var(--space-sm); top: -10rem;
  z-index: var(--z-toast);
  background: var(--ink); color: var(--paper);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   Type helpers. Floor is --text-sm across this entire surface.
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--bus-ink);
  margin: 0 0 var(--space-2xs);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
  max-width: var(--measure-tight);
  margin: 0 0 var(--space-md);
}

.meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.ui { font-family: var(--font-ui); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background: var(--brand-fill);
  color: var(--brand-on-fill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--brand-fill-hover); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn--lg { min-height: 4.25rem; font-size: var(--text-md); padding-inline: var(--space-lg); }

.btn--ghost {
  background: transparent;
  color: var(--saperavi);
  border-color: var(--saperavi);
}
.btn--ghost:hover { background: var(--saperavi-wash); color: var(--saperavi-deep); box-shadow: none; }

.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper-raised);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.rule { border: 0; border-top: var(--border-hair); margin-block: var(--space-lg); }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.club-header {
  background: var(--paper);
  color: var(--ink);
}
.club-header .page { padding-block: var(--space-lg) var(--space-md); }

.back-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  opacity: 0.75;
  margin-bottom: var(--space-sm);
  text-decoration: none;
}
.back-link:hover { opacity: 1; color: var(--ink); }

.club-header .eyebrow { color: var(--bus); }
.club-header h1 { color: var(--ink); font-size: var(--text-2xl); margin-bottom: var(--space-md); }

.view-toggle {
  display: inline-flex;
  gap: var(--space-2xs);
  background: var(--paper-raised);
  border: 2px solid var(--ink-hairline);
  border-radius: var(--radius-full);
  padding: var(--space-3xs);
  flex-wrap: wrap;
}

.toggle-btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--ink);
  opacity: 0.8;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.toggle-btn:hover { opacity: 1; }
.toggle-btn[aria-pressed="true"] {
  background: var(--brand-fill);
  color: var(--brand-on-fill);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Join card
   -------------------------------------------------------------------------- */

.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 22rem), 0.9fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 860px) {
  .join-grid { grid-template-columns: 1fr; }
}

.benefit-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-xs); }
.benefit-list li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.6em; height: 0.6em;
  border-radius: var(--radius-full);
  background: var(--saperavi);
}

.price-note {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--saperavi);
  font-weight: var(--weight-medium);
}

.join-form { display: grid; gap: var(--space-sm); }
.field { display: grid; gap: var(--space-3xs); }
.field label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-soft); }
.field input {
  min-height: var(--tap);
  padding: 0 var(--space-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--paper);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.field input:focus-visible { border-color: var(--bus-ink); }

.member-card {
  background: var(--saperavi-wash);
  border: 2px solid var(--saperavi);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  animation: settle-in var(--dur-slow) var(--ease-pour) both;
}
.member-card .welcome { font-family: var(--font-display); font-size: var(--text-lg); color: var(--saperavi-deep); margin-bottom: var(--space-2xs); }
.member-card .since { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-sm); }
.member-card .perk { font-size: var(--text-sm); margin-bottom: var(--space-md); }
.again-link { font-family: var(--font-ui); font-size: var(--text-sm); background: none; border: none; color: var(--saperavi); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; }

@keyframes settle-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Build your own six
   -------------------------------------------------------------------------- */

.box-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(min(100%, 20rem), 0.9fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .box-grid { grid-template-columns: 1fr; }
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.bottle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-sm);
  background: var(--paper-raised);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  cursor: grab;
  text-align: left;
  font-family: var(--font-ui);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bottle:hover { border-color: var(--ink-hairline); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bottle:active { cursor: grabbing; }
.bottle.is-dragging { opacity: 0.4; }

.bottle-icon-wrap { width: 1.6rem; height: 4.2rem; }
.bottle-icon { width: 100%; height: 100%; }

.bottle .name { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); line-height: var(--leading-snug); }
.bottle .sub { font-size: var(--text-sm); color: var(--ink-faint); }
.bottle .price { font-size: var(--text-sm); color: var(--saperavi); font-weight: var(--weight-medium); }
.bottle .badge {
  font-size: var(--text-sm);
  color: var(--bus-ink);
  font-weight: var(--weight-medium);
}
.bottle .add-hint { margin-top: auto; font-size: var(--text-sm); color: var(--ink-faint); }

.slots-shell {
  background: var(--paper-sunk);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.slots-shell.drag-over { background: var(--saperavi-wash); }

.slots-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: var(--space-sm);
}

.slot {
  aspect-ratio: 1 / 1.35;
  border-radius: var(--radius-md);
  /* --ink-hairline on --paper-sunk measures 1.27:1, against the 3:1 that
     WCAG 1.4.11 requires for a UI component boundary. These six drop zones
     are the identity interaction of the whole beat, and in an empty state on
     a dimmed television the outline simply vanished, leaving floating text
     with no container. --ink-faint measures 4.14:1 here, which clears the
     3:1 boundary bar without the heaviness of --ink-soft on six shapes. */
  border: 2px dashed var(--ink-faint);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  cursor: default;
  padding: var(--space-2xs);
  font-family: var(--font-ui);
}
/* --ink-faint on --paper-sunk is 4.14:1. That clears the 3:1 bar for a
   boundary but NOT the 4.5:1 bar for text, and --text-sm renders under 24px
   on any viewport below about 845px, which includes every phone. --ink-soft
   is 8.66:1 on the same background. */
.slot--empty .slot-num { font-size: var(--text-sm); color: var(--ink-soft); }

.slot--filled {
  position: relative;
  border-style: solid;
  border-color: var(--saperavi);
  background: var(--paper-raised);
  cursor: pointer;
}
.slot--filled:hover { background: var(--saperavi-wash); }
.slot--filled:hover .slot-remove,
.slot--filled:focus-visible .slot-remove { opacity: 1; }
.slot-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); }
.slot .slot-icon-wrap { width: 1rem; height: 2.6rem; }
.slot .slot-name { font-size: var(--text-sm); text-align: center; color: var(--ink); }
.slot .slot-remove {
  position: absolute;
  top: 0.25rem; right: 0.4rem;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--saperavi);
  opacity: 0.7;
}

.slot--filled.just-added .slot-inner { animation: bottle-land var(--dur-base) var(--ease-pour) both; }
@keyframes bottle-land {
  0%   { transform: translateY(-14px) scale(0.9); opacity: 0; }
  55%  { transform: translateY(3px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.price-panel { position: sticky; top: var(--space-sm); }
.price-panel .count { font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: var(--space-sm); }
.price-lines { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-2xs); }
.price-lines li { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-soft); }
.price-totals { border-top: var(--border-hair); padding-top: var(--space-sm); display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.price-totals .row { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-sm); }
.price-totals .row.total { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--saperavi); }
.price-totals .row.save { color: var(--ok); }

.box-complete { font-size: var(--text-sm); color: var(--ok); font-weight: var(--weight-medium); margin-bottom: var(--space-sm); }

.panel-actions { display: grid; gap: var(--space-2xs); }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: var(--space-lg); transform: translate(-50%, 1.5rem);
  background: var(--qvevri); color: var(--ink-inverse);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-ui); font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: var(--z-toast);
  max-width: min(90vw, 30rem);
  text-align: center;
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Fulfilment side
   -------------------------------------------------------------------------- */

.loop-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  background: var(--paper-sunk);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}
.loop-step { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-soft); }
.loop-arrow { color: var(--bus-ink); font-size: var(--text-sm); }

.shipment-banner {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: var(--space-lg);
}

.fulfil-grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 19rem), 20rem) 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 860px) {
  .fulfil-grid { grid-template-columns: 1fr; }
}

.member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }

.member-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper-raised);
  border: 2px solid var(--ink-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.member-item:hover { box-shadow: var(--shadow-sm); }
.member-item[aria-pressed="true"] { border-color: var(--saperavi); background: var(--saperavi-wash); }

.member-item .name { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); margin-bottom: var(--space-3xs); }
.member-item .suburb { font-size: var(--text-sm); color: var(--ink-faint); margin-bottom: var(--space-2xs); }
.member-item .row-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.member-item .shipments { font-size: var(--text-sm); color: var(--ink-soft); }

.pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 0.15em 0.75em;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
}
.pill--ok { color: var(--ok); }
.pill--warn { color: var(--warn); }
.pill--muted { color: var(--ink-faint); }

.detail-panel { min-height: 20rem; }
.detail-placeholder { color: var(--ink-faint); font-size: var(--text-md); }

.detail-head { margin-bottom: var(--space-md); }
.detail-head .name { margin-bottom: var(--space-2xs); }
.detail-head .meta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.detail-note { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-2xs); }

.detail-section { margin-top: var(--space-lg); }
.detail-section h3 { margin-bottom: var(--space-sm); }

.box-lines, .pick-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.box-lines li, .pick-row {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--paper-sunk);
  border-radius: var(--radius-sm);
}
.pick-row .bin { font-family: var(--font-mono); color: var(--bus-ink); font-weight: var(--weight-medium); }

.docket-card {
  background: var(--paper-sunk);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.docket-card .row { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-3xs); }
.docket-card .row + .row { border-top: 1px dashed var(--ink-hairline); }
.docket-card .ref { font-weight: var(--weight-bold); color: var(--saperavi); }

.email-card {
  background: var(--paper-raised);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.email-meta { padding: var(--space-sm) var(--space-md); border-bottom: var(--border-hair); background: var(--paper-sunk); }
.email-meta p { margin: 0 0 0.2em; font-size: var(--text-sm); font-family: var(--font-ui); }
/* Same paper-sunk pairing as .slot-num above: 4.14:1 fails AA for text. */
.email-meta .label { color: var(--ink-soft); display: inline-block; width: 4.5em; }
.email-body { padding: var(--space-md); }
.email-body p { font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.email-foot { padding: 0 var(--space-md) var(--space-md); font-size: var(--text-sm); color: var(--ink-faint); font-family: var(--font-ui); margin: 0; }

.chat-bubble {
  display: inline-block;
  max-width: 26rem;
  background: var(--qvevri);
  color: var(--ink-inverse);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  font-size: var(--text-sm);
}
.follow-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--ink-soft); }

.empty-state {
  background: var(--paper-sunk);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

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

footer.on-dark { background: var(--paper); color: var(--ink); }
footer .page { padding-block: var(--space-lg); }
footer p { color: var(--ink-soft); font-family: var(--font-ui); font-size: var(--text-sm); max-width: var(--measure); margin: 0; }