/* ============================================================
   MODAL
   Not part of the mockup: the footer buttons (!commands, feedback, about)
   open panels rather than navigating, matching the live site's behaviour.
   Kept in its own file so juq.css stays a byte-for-byte copy of the approved
   mockup stylesheet.
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; padding: var(--s-7); background: color-mix(in srgb, var(--bg) 78%, transparent); }
.modal.open { display: flex; }
.modal-card {
  width: 620px; max-width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 9px 9px 0 var(--accent); padding: var(--s-7) var(--s-8);
}
[data-skin="sweet"] .modal-card { border-color: transparent; box-shadow: 0 22px 60px var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-5); }
.modal-title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h2); letter-spacing: -0.02em; }
.modal-x { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); font-size: var(--t-lg); }
.modal-x:hover { border-color: var(--accent); color: var(--accent); }
.modal-lead { color: var(--muted); font-size: var(--t-body); line-height: 1.55; margin-bottom: var(--s-6); }
.modal-sub { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: var(--s-6) 0 var(--s-3); }

.modal-field { width: 100%; background: var(--surface-2); color: var(--ink); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); padding: var(--s-4) var(--s-5); font: inherit; font-size: var(--t-md); }
.modal-field:focus { outline: none; border-color: var(--accent); }
textarea.modal-field { min-height: 120px; resize: vertical; }
.modal-actions { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.modal-note { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }

/* ============================================================ FOOTER PANELS

   THE FORECAST DROPDOWN, UPSIDE DOWN. Every value below is the navbar's own,
   from juq.css: the same absolute full-width layer inside its bar, the same
   card (surface, ink border, 9px offset accent shadow), the same 0.22s fade
   with the 0.24s cubic-bezier slide, the same `.fc-h` column headings. What
   differs is the edge it hangs off and the direction it travels.

   No title bar and no close button, because the navbar's dropdowns have
   neither: the button you pressed is the title, and pressing it again or
   clicking away is how it shuts. */
.footer { position: relative; }

.ftpop {
  position: absolute; bottom: 100%; left: 0; right: 0; z-index: 45;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.ftpop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ft-card {
  margin: var(--s-5) 0 calc(var(--s-1) * -1);
  background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 9px 9px 0 var(--accent);
  overflow-y: auto;   /* max-height is measured per open: see toggleFootPanel */
}
[data-skin="sweet"] .ft-card { border-color: transparent; box-shadow: 0 24px 60px var(--shadow); }

/* Columns with dividers, exactly like .fc-col. auto-fit rather than a fixed
   four, because these panels carry between two and six groups. */
.ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ft-col { padding: var(--s-7); min-width: 0; border-left: var(--bw) solid var(--line-strong); }
.ft-col:first-child { border-left: 0; }
.ft-col-wide { grid-column: span 2; }
.ft-col-full { grid-column: 1 / -1; border-left: 0; border-top: var(--bw) solid var(--line-strong); }
@media (max-width: 900px) {
  .ft-cols { grid-template-columns: 1fr; }
  .ft-col { border-left: 0; border-top: var(--bw) solid var(--line-strong); }
  .ft-col:first-child { border-top: 0; }
  .ft-col-wide { grid-column: auto; }
}

.ft-lead { padding: var(--s-7) var(--s-7) 0; color: var(--muted); font-size: var(--t-body); line-height: 1.6; }
.ft-lead b { color: var(--ink); }
.ft-lead-in { padding: 0; }

/* The footer link that opened it reads as pressed, the way the live chip does. */
.foot-links [data-open].on { color: var(--accent); }

/* ---------- commands ---------- */
.cmd-row { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: var(--bw) solid var(--line); }
.cmd-row:first-of-type { border-top: 0; }
.cmd-row code { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; color: var(--ink); background: var(--surface-2); border-radius: var(--radius); padding: 2px var(--s-2); white-space: nowrap; }
.cmd-row span { color: var(--muted); font-size: var(--t-sm); line-height: 1.4; }

/* ---------- About ---------- */
.ab-steps {
  margin: 0; padding-left: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-3);
  color: var(--muted); font-size: var(--t-sm); line-height: 1.55;
}
.ab-steps li::marker { color: var(--accent); font-weight: 700; }
.ab-hint { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-bottom: var(--s-4); }

/* A scale drawn as a scale. Five names in a list do not say "fifths of one
   line"; five coloured rows in order do. The flavour tokens only exist where
   the Taste Tester stylesheet is loaded, so each row falls back to accent. */
.ab-scale { display: flex; flex-direction: column; gap: var(--s-2); }
.ab-band {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--radius);
}
.ab-band b { color: var(--ink); font-size: var(--t-sm); min-width: 118px; }
.ab-band i { font-family: var(--f-mono); font-size: var(--t-micro); font-style: normal; color: var(--muted); min-width: 74px; }
.ab-band span { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.ab-band[data-band="bitter"] { border-left-color: var(--f-bitter, var(--accent)); }
.ab-band[data-band="sour"]   { border-left-color: var(--f-sour, var(--accent)); }
.ab-band[data-band="mild"]   { border-left-color: var(--f-mild, var(--accent)); }
.ab-band[data-band="sweet"]  { border-left-color: var(--f-sweet, var(--accent)); }
.ab-band[data-band="glazed"] { border-left-color: var(--f-glazed, var(--accent)); }

.ab-pairs { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.ab-pair {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--surface-2); border-left: 3px solid var(--line-strong);
}
.ab-pair b { color: var(--ink); font-size: var(--t-sm); }
.ab-pair span { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.ab-pair[data-side="bitter"] { border-left-color: var(--f-bitter, var(--accent)); }
.ab-pair[data-side="glazed"] { border-left-color: var(--f-glazed, var(--accent)); }

/* ---------- feedback ----------

   A tag per page, with the one you are on already picked. Describing where you
   were is the one part of the job the site can do perfectly, and a line of
   small print saying "attached" was both easy to miss and impossible to
   correct when it guessed wrong. */
.fb-cols .ft-col { display: flex; flex-direction: column; }
.fb-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fb-tag {
  cursor: pointer;
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--s-2) var(--s-4);
  color: var(--muted); background: var(--surface-2);
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.fb-tag:hover { color: var(--ink); border-color: var(--accent); }
.fb-tag.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.fb-here { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.fb-here b { color: var(--ink); }

.fb-h2 { margin-top: var(--s-7); }
.fb-kinds { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.fb-kind {
  flex: 1 1 auto; cursor: pointer;
  /* Readable, not a caption. These were micro-size uppercase and the three
     options were the smallest text in the panel. */
  font-size: var(--t-sm); font-weight: 700;
  padding: var(--s-4) var(--s-5); text-align: center;
  color: var(--muted); background: var(--surface-2);
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
}
.fb-kind:hover { color: var(--ink); border-color: var(--accent); }
.fb-kind.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.fb-text {
  width: 100%; flex: 1 1 auto; min-height: 118px; resize: vertical;
  background: var(--surface-2); color: var(--ink);
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); font: inherit; font-size: var(--t-md);
}
.fb-text:focus { outline: none; border-color: var(--accent); }
.fb-foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }
.fb-foot .btn { margin-left: auto; }
.fb-count, .fb-as { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-count.full { color: var(--accent); }
.fb-done { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-9) 0; text-align: center; }
.fb-done b { font-size: var(--t-h3); font-style: italic; font-weight: 900; text-transform: uppercase; color: var(--accent); }
.fb-done span { color: var(--muted); font-family: var(--f-mono); font-size: var(--t-mono); }

@media (max-width: 560px) {
  .ft-card { max-height: 80vh; }
  .ft-col { padding: var(--s-5); }
  .ft-lead { padding: var(--s-5) var(--s-5) 0; }
}

/* ---------- packed flows ----------

   COLUMNS, NOT A GRID, for both the commands and the homepage tour. Both hold
   blocks of wildly different length: the command groups run from one line to
   five, and the tour cards from two lines to seven. In a grid every row is as
   tall as its tallest cell, so a row holding Taste Tester left the Pantry and
   the Census sitting over four lines of nothing, and the short tour cards were
   stretched to match the Forecast one.

   Column flow packs them instead. break-inside keeps a group whole, and the
   panel comes out roughly half the height for the same content. */
.cmd-flow {
  columns: 4 210px;
  column-gap: var(--s-8);
  padding: var(--s-7);
}
.cmd-group {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  /* Inline-block is what actually stops Chrome breaking a block across a
     column; break-inside alone is unreliable inside a scrolling box. */
  display: inline-block; width: 100%;
  margin-bottom: var(--s-7);
}
.cmd-group .fc-h { margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--line-strong); }

.ab-tour {
  columns: 3 250px;
  column-gap: var(--s-4);
}
.ab-tour .ab-pair {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%;
  margin-bottom: var(--s-3);
}

/* ---------- the sign-in notes ----------
   Under the step that asks for it, because that is where the question occurs.
   A privacy page nobody opens is not an answer. */
.ab-notes { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.ab-notes .ab-note {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--surface-2); border-left: 3px solid var(--ok);
}
.ab-notes .ab-note b { color: var(--ink); font-size: var(--t-sm); }
.ab-notes .ab-note span { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.ab-notes .ab-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ab-notes .ab-note a:hover { color: var(--ink); }