/* The panel shop's stylesheet.
 *
 * The grid's geometry is NOT here: it arrives as custom properties from
 * /assets/layout.css, which is generated from src/panelshop/layout.py so the
 * published contract and the rendered page cannot disagree. Everything here is
 * colour, type and spacing — the parts nobody else's model depends on.
 *
 * The look is deliberately ordinary. A participant should feel they are in a small
 * online shop, not in a research instrument, because the whole measurement is about
 * how a person browses a store. Cleanliness over cleverness: one accent colour, one
 * typeface stack, generous white space, and nothing that moves unless a person
 * moved it.
 */

* { box-sizing: border-box; }

:root {
  --ink: #16181d;
  --ink-soft: #5b6270;
  --line: #e3e6ec;
  --page: #ffffff;
  --panel: #f7f8fa;
  --accent: #1a4fd6;
  --accent-ink: #ffffff;
  --price: #16181d;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- header --- */
.masthead {
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--page);
  z-index: 20;
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.brand span { color: var(--accent); }
.basket-button {
  border: 1px solid var(--line);
  background: var(--page);
  border-radius: var(--radius);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.basket-button:hover { border-color: var(--ink-soft); }
.basket-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.8rem;
  text-align: center;
}

/* -------------------------------------------------------------- the task --- */
/* Fixed heights, not padding-driven: these are declared in layout.py and the
   agent lane fits its viewport model to the declared numbers, so the page has to
   render exactly what the contract says rather than approximately. */
.task-strip {
  height: var(--task-strip-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  overflow: hidden;
}
.task-strip .wrap { width: 100%; }
.task-strip strong { color: var(--ink); }

.draft-banner {
  background: #7a1020;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 0;
  text-align: center;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------- controls --- */
.controls {
  height: var(--controls-height);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 0;
}
.controls input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
}
.controls select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
  font: inherit;
  max-width: 100%;
}
.controls input:focus, .controls select:focus,
button:focus, a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.result-count {
  height: var(--result-count-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- the grid --- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  padding-bottom: 48px;
}
.card {
  height: var(--card-height);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--page);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.card:hover { border-color: var(--ink-soft); }
.card .tile {
  height: var(--card-image-height);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
}

/* The photograph sits over the generated tile. If it fails to load it hides
   itself and the tile shows through, so a shelf without images is degraded rather
   than broken. `contain`, not `cover`: a product photo cropped through its own
   subject is worse than one with white space around it, and these are catalogue
   shots on white anyway. */
.tile .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.tile-initials { position: absolute; }
.card .body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.card .name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card .meta { font-size: 0.8rem; color: var(--ink-soft); }
.card .price { font-weight: 700; margin-top: auto; }

.empty {
  padding: 48px 0;
  color: var(--ink-soft);
  text-align: center;
}

/* ------------------------------------------------------------ the detail --- */
.detail-back {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 16px 0;
}
.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 48px;
}
@media (min-width: 900px) { .detail { grid-template-columns: 1.2fr 1fr; } }
.detail .tile {
  position: relative;
  overflow: hidden;
  height: 320px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.92);
}
.detail h1 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 8px; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0; }
.detail dt { color: var(--ink-soft); font-size: 0.9rem; }
.detail dd { margin: 0; font-size: 0.9rem; }
.detail .price { font-size: 1.8rem; font-weight: 700; margin: 8px 0 16px; }

/* ------------------------------------------------------------- buttons ---- */
.primary, .secondary {
  font: inherit;
  padding: 12px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.primary:hover { filter: brightness(1.08); }
.primary[disabled] { opacity: 0.45; cursor: default; filter: none; }
.secondary { background: var(--page); color: var(--ink); border-color: var(--line); }
.secondary:hover { border-color: var(--ink-soft); }
.wide { width: 100%; }

/* -------------------------------------------------------------- basket ---- */
.basket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.basket-row .name { flex: 1; font-size: 0.95rem; }
.basket-total { display: flex; justify-content: space-between; padding: 16px 0; font-weight: 700; }

/* ------------------------------------------------------- the entry flow --- */
.sheet { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; }
.sheet h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 16px; }
.sheet h2 { font-size: 1.05rem; margin: 28px 0 8px; }
.sheet p { margin: 0 0 14px; }
.sheet ul { margin: 0 0 14px; padding-left: 20px; }
.sheet li { margin-bottom: 6px; }
.sheet .note {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.sheet .fineprint { color: var(--ink-soft); font-size: 0.85rem; }
.two-col { display: grid; gap: 0 32px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .two-col { grid-template-columns: 1fr 1fr; } }

.agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.agree input { margin-top: 4px; width: 18px; height: 18px; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------- the questionnaire ------ */
.question { padding: 22px 0; border-bottom: 1px solid var(--line); }
.question legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.question .help { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 10px; }
.question fieldset { border: 0; margin: 0; padding: 0; }
.option {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  cursor: pointer;
}
.option input { width: 18px; height: 18px; }
.problem { color: #7a1020; font-weight: 600; }
.problem-list { background: #fdf2f4; border-radius: var(--radius); padding: 14px 16px; }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------- attribution ------ */
/* Not decoration: CC BY 4.0 requires the credit, the licence link, a statement
   that changes were made, and no implication of endorsement. It sits on the shop
   because that is the surface the photographs are on. */
.attribution {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.6;
}
.attribution a { color: var(--ink-soft); }

/* --------------------------------------------------- the checkout step ----- */
/* One block per basket item: the item and price on top, the buy / leave-for-now
 * choice below. Reuses .option (the questionnaire's radio-label style) so the
 * two choices look and behave like every other choice in the study. */
.checkout-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.checkout-item .price { color: var(--ink-soft); white-space: nowrap; }
.checkout-options { display: flex; flex-direction: column; gap: 4px; }