/* Market — the front of the shop.
 *
 * The console is an instrument; `industry.css` dresses a customer's own
 * account; this dresses the one page a stranger sees first. Different again:
 * nobody arrives here having been told what this is, so the page has to be
 * legible in a second and has to look like somewhere you would spend money.
 *
 * Everything hangs off `data-skin="market"` on the **root element**, which is
 * also where the theme toggle writes `data-theme` — the whole reason the dark
 * rules below can be guarded against an explicit light choice. The skin only
 * ever redefines app.css's own tokens and adds the few components this page
 * needs; it does not restyle app.css component by component, so a panel, a
 * chip and a button change together.
 *
 * ## The brand colour is provisional
 *
 * A pinkish, purplish plum, asked for as a direction rather than a decision —
 * the name of the product is still being chosen. It is defined once, in the
 * four `--brand*` tokens, and everything else refers to those. Replacing it
 * later is editing four lines here and nothing anywhere else. Semantic colour
 * (good, warning, critical) is deliberately left alone: it means something,
 * and it is not the brand's to borrow.
 */

:root[data-skin="market"] {
  /* ── the brand, provisional ─────────────────────────────────────────── */
  --brand:      #93306f;   /* plum magenta: headings, links, the mark */
  --brand-deep: #6d2152;   /* pressed, and text on a soft tint */
  --brand-soft: #fbf2f8;   /* a wash behind a shelf or a badge */
  --brand-ink:  #ffffff;   /* what sits on the brand itself */

  /* Money going out. Not --neg, which is the ledger's and is used on
     text where this is only ever a fill. */
  --heat:       #a8285c;   /* a full day */
  --heat-ink:   #ffffff;   /* what sits on it */

  /* The ground. app.css's paper is warm and yellowish; this is the same
     lightness nudged towards the brand's hue, so the neutrals read as chosen
     rather than inherited. */
  --plane:     #fcfbfd;
  --surface-1: #ffffff;
  --ink:       #161014;
  --ink-2:     #594f56;
  --muted:     #8a7f86;
  --grid:      #e8dfe5;
  --baseline:  #cfc2ca;
  --border:    color-mix(in srgb, #161014 11%, transparent);
  --track:     #f0e8ed;

  --accent-100: var(--brand-soft);
  --accent-800: var(--brand-deep);

  /* The bar is the brand's one solid statement. Everything in it is light,
     so the tokens for it are separate from the page's. */
  /* #5e1b47 was a quarter-light plum with the blue held down, which reads
     brown against a warm white — "dirty" was the right word for it. Four
     points lighter and the blue let up, so it reads as a chosen plum. */
  --bar-bg:    #6d2259;
  --bar-ink:   #fdf3f9;
  --bar-ink-2: #e7c2d8;
  --bar-edge:  #52183f;
  /* The search button has to read as a button ON the bar. A mid plum with
     white on it only ever managed a 2.5 step against the old bar and 2.1
     against this lighter one — below the 3 that a control needs to be seen
     as a separate shape. So it takes the shape the dark theme already uses:
     a light button with dark ink. 7.0 against the bar, 8.6 for the ink. */
  --bar-btn:     #f3c8e1;
  --bar-btn-ink: #5c1543;

  /* app.css's interactive colour, which is also its first chart series.
     Redefined here because the market's pages carry no charts and this is
     what makes every link, focus ring and hover follow the brand in one
     line — the same move `industry.css` makes for the customer's skin. */
  --series-1: #93306f;

  --radius: 12px;
  --pad: 18px;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="market"]:where(:not([data-theme="light"])) {
    --bar-bg:    #221a2e;
    --bar-ink:   #f6eef3;
    --bar-ink-2: #c79bb6;
    --bar-edge:  #2f2440;
    --bar-btn:     #eaa6d3;
    --bar-btn-ink: #1b0d17;
    --series-1: #eaa6d3;
    --brand:      #eaa6d3;
    --brand-deep: #f6cce7;
    --brand-soft: #241c2f;
    --brand-ink:  #1b0d17;
  --heat:       #f093b4;   /* lifted off the dark ground */
  --heat-ink:   #2a0f1c;
    --plane:      #18181b;
    --surface-1:  #222227;
    --ink:        #f6eef3;
    --ink-2:      #c3bacb;
    --muted:      #9b93a5;
    --grid:       #2c2738;
    --baseline:   #4a4158;
    --border:     color-mix(in srgb, #f6eef3 16%, transparent);
    --track:      #262233;
    --accent-100: var(--brand-soft);
    --accent-800: var(--brand-deep);
  }
}
:root[data-skin="market"][data-theme="dark"] {
  --bar-bg:    #221a2e;
  --bar-ink:   #f6eef3;
  --bar-ink-2: #c79bb6;
  --bar-edge:  #2f2440;
  --bar-btn:     #eaa6d3;
  --bar-btn-ink: #1b0d17;
  --series-1: #eaa6d3;
  --brand:      #eaa6d3;
  --brand-deep: #f6cce7;
  --brand-soft: #241c2f;
  --brand-ink:  #1b0d17;
  --heat:       #f093b4;   /* lifted off the dark ground */
  --heat-ink:   #2a0f1c;
  --plane:      #18181b;
  --surface-1:  #222227;
  --ink:        #f6eef3;
  --ink-2:      #c3bacb;
  --muted:      #9b93a5;
  --grid:       #2c2738;
  --baseline:   #4a4158;
  --border:     color-mix(in srgb, #f6eef3 16%, transparent);
  --track:      #262233;
  --accent-100: var(--brand-soft);
  --accent-800: var(--brand-deep);
}

/* A hint of what the place is for: the ground is ruled like a sheet of
   engineering paper, a fine grid with a heavier line every fifth. It has to
   be nearly nothing — a pattern behind a form competes with the form, and at
   low contrast on a cheap screen anything stronger reads as banding rather
   than as paper. 4% and 7% of the page's own ink, so it follows the theme
   and needs no second set of colours.
   Gradients rather than an image: no request, and it scales with the page.
   Dropped entirely where the reader has asked for more contrast, since a
   texture is the first thing such a reader does not want. */
:root[data-skin="market"] {
  --rule:       color-mix(in srgb, var(--ink) 4%, transparent);
  --rule-major: color-mix(in srgb, var(--ink) 7%, transparent);
}
:root[data-skin="market"] body {
  background-color: var(--plane);
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-major) 1px, transparent 1px);
  /* A real graph sheet: 5 mm squares with a heavier line every fifth, so
     the ground is 25 mm major. Stated in millimetres rather than pixels
     because a graph sheet without a unit is only a texture.

     Honest about what that means: CSS maps 1mm through a fixed 96dpi, so
     this is nominal — true on a 96dpi display and out by whatever a given
     screen's real density differs by. Good enough to read a proportion off,
     not good enough to cut timber by. A per-display calibration would make
     it exact and is a setting, not a stylesheet. */
  background-size: 5mm 5mm, 5mm 5mm, 25mm 25mm, 25mm 25mm;
}
@media (prefers-contrast: more) {
  :root[data-skin="market"] body { background-image: none; }
}

/* ───────────────────────────────────────────────────────────── the bar */

/* app.css's `.topbar` wraps, and the market bar asked for the full width —
   so the theme toggle and the bell were pushed onto a second row and the
   header grew to two bars' height. The bar flexes instead and the buttons
   stay on the end of the one row; what wraps on a narrow screen is the
   market bar's own grid, which is built to. */
:root[data-skin="market"] .topbar {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-edge);
  color: var(--bar-ink);
}
:root[data-skin="market"] .market-bar { flex: 1 1 auto; min-width: 0; }

/* The buttons app.css puts after the block: made to belong to this bar
   rather than to sit on it. */
:root[data-skin="market"] .topbar .theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bar-ink-2);
  cursor: pointer;
}
:root[data-skin="market"] .topbar .theme-toggle:hover {
  background: color-mix(in srgb, var(--bar-ink) 14%, transparent);
  color: var(--bar-ink);
}

/* One row on a desktop, two on a phone: the search is the point of the bar
   and gets the whole width rather than being squeezed between a logo and a
   basket. `order` does that without a second copy of the markup. */
.market-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bar-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.mark:hover { color: var(--bar-ink-2); }
/* The mark's own frame keeps air around the drawing, so the box has to be
   bigger than the ink it shows: at 26px only about 19px of mark was
   visible and it read small against a 17px name. */
.mark svg { display: block; flex: none; }
.mark-name { font-size: 18px; }
/* A stand-in name, said quietly, so nobody mistakes it for a decision. */
.mark-note {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ── the search ─────────────────────────────────────────────────────── */

/* The select, the field and the button are one object with one border, the
   way a search bar is read. Each keeps its own focus ring, because three
   controls that look like one still have to be operable like three. */
.hunt {
  display: flex;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: hidden;
}
.hunt:focus-within { border-color: var(--bar-ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-ink) 28%, transparent); }
/* `color: inherit` here took the bar's ink — #fdf3f9, made to sit on the
   pinkish ground — and put it on a box whose own background is the page
   surface. Near-white on near-white: the typing was all but invisible, and
   it became so the moment light stopped being the exception. A control
   takes its ink from the surface behind it, not from its container. */
.hunt select,
.hunt input,
.hunt button { border: 0; background: none; font: inherit; min-width: 0; }
.hunt input { color: var(--ink); }
.hunt select {
  padding: 10px 10px 10px 12px;
  color: var(--ink-2);
  border-right: 1px solid var(--grid);
  max-width: 10.5rem;
  cursor: pointer;
}
.hunt input { flex: 1 1 auto; padding: 10px 12px; }
.hunt input::placeholder { color: var(--muted); }
.hunt button {
  flex: none;
  padding: 10px 18px;
  background: var(--bar-btn);
  color: var(--bar-btn-ink);
  font-weight: 650;
  cursor: pointer;
}
/* Both themes give the button a light face now, so hover darkens it. A
   brightening hover on a near-white button goes to white and looks broken. */
.hunt button:hover { filter: brightness(0.95); }

/* ── basket and account ─────────────────────────────────────────────── */

.bar-acts { display: flex; align-items: center; gap: 6px; }

.basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--bar-ink);
  text-decoration: none;
  font-weight: 600;
}
.basket:hover { background: color-mix(in srgb, var(--bar-ink) 14%, transparent); color: var(--bar-ink); }
.basket-count {
  min-width: 1.35rem;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--bar-ink);
  color: var(--bar-bg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* An empty basket still shows its nought: a count that appears only when
   non-zero makes somebody wonder whether it is counting. */
.basket-count.none { background: color-mix(in srgb, var(--bar-ink) 20%, transparent); color: var(--bar-ink-2); }

/* The account menu is a `details`, so it opens with no script and closes on
   Escape by the browser's own doing. */
.who { position: relative; }
.who > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  color: var(--bar-ink);
  list-style: none;
}
.who > summary::-webkit-details-marker { display: none; }
.who > summary:hover { background: color-mix(in srgb, var(--bar-ink) 14%, transparent); }
.who[open] > summary { background: color-mix(in srgb, var(--bar-ink) 18%, transparent); }
.who .caret { font-size: 10px; color: var(--bar-ink-2); }
.who-menu {
  position: absolute;
  right: 0;
  z-index: 40;
  min-width: 15rem;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 16%, transparent);
}
.who-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.who-menu a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.who-menu .who-sep { height: 1px; margin: 5px 4px; background: var(--grid); }
.who-menu .who-label {
  padding: 7px 11px 3px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────── the shelves */

.shelf { margin: 0 0 30px; }
.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.shelf-head h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.shelf-head .shelf-sub { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; }
.shelf-head a { color: var(--brand); font-weight: 600; white-space: nowrap; }

/* A grid that fills whatever width it is given. On a phone it becomes one
   row that scrolls sideways, which is how a shelf is read on a phone — and
   `scroll-snap` makes it stop on a card rather than between two. */
.shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.goods {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.goods:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.goods-shot,
.goods .thumb-none {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--track);
}
/* The stand-in tile app.css draws for a thing with no photograph, centred
   here because on this page it is a whole card and not a line's thumbnail. */
.goods .thumb-none {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 26px;
}
.goods-name {
  font-weight: 600;
  line-height: 1.3;
  /* Two lines, then stop: a long name must not make one card taller than
     its neighbours and leave a hole in the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.goods-price {
  margin-top: auto;
  padding-top: 3px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.goods-shop { font-size: 12px; color: var(--muted); }
.goods-out { color: var(--status-critical); font-size: 12px; font-weight: 600; }

/* ──────────────────────────────────────────────────────────── the foot */

.market-foot {
  margin-top: 40px;
  padding: 26px var(--pad);
  border-top: 1px solid var(--grid);
  color: var(--ink-2);
  font-size: 14px;
}
.market-foot-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
}
.market-foot a { color: var(--ink-2); }
.market-foot a:hover { color: var(--brand); }
.market-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.market-foot .foot-note { color: var(--muted); font-size: 13px; }

/* ───────────────────────────────────────────────────────────── narrow */

@media (max-width: 760px) {
  /* One row, and it stays one row: the mark, the search beside it, the
     basket hard right. It used to fold into two — the bar asked for a
     logo, a full search, a basket AND an account menu, which is more than
     a phone has width for. The account moves to the tab bar at the foot,
     where a phone expects it; `.bar-acts` keeps only the basket. */
  .market-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 0;
  }
  /* The name is the first thing to go: the mark alone is the logo at this
     width, and it still links home. */
  .mark-name { display: none; }
  .mark { gap: 0; }

  .hunt { border-radius: 10px; }
  /* The categories are in the dropdown on the results page; here the field
     and the button are what matter. */
  .hunt select { display: none; }
  .hunt input { padding: 9px 10px; font-size: 15px; }
  /* On one row the mark gives way first: the search box is what the page is
     for, and the name is already in the title. */
  .mark svg { width: 30px; height: 30px; }
  .mark-name { display: none; }
  .hunt button { padding: 9px 12px; }

  .basket { padding: 8px 6px; }
  .basket span.basket-word { display: none; }
  /* Signing in lives at the foot of the screen on a phone. */
  .bar-acts > .who { display: none; }

  .shelf-head h2 { font-size: 20px; }
  /* One sideways row, snapping on a card. */
  .shelf-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin: 0 calc(var(--pad) * -1);
    padding: 2px var(--pad) 8px;
    -webkit-overflow-scrolling: touch;
  }
  .shelf-row > .goods {
    flex: 0 0 46%;
    min-width: 150px;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goods { transition: none; }
  .goods:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────── the buttons */

/* app.css paints a primary button `--series-1` with `color: #fff` written
   in. The colour follows the brand from the token above, but the white does
   not: in dark the brand is a pale pink and white on it cannot be read. So
   the ink is stated here, from `--brand-ink`, which is white in light and
   near-black in dark.
 *
 * Both selectors, because a `<button class="primary">` and an
 * `<a class="button primary">` are the same thing to a reader and app.css
 * styles them separately. */
:root[data-skin="market"] button.primary,
:root[data-skin="market"] .button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
:root[data-skin="market"] button.primary:hover,
:root[data-skin="market"] .button.primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  /* app.css brightens instead; on a colour this saturated that washes it
     out rather than darkening it. */
  filter: none;
}

/* A secondary button borrows the brand for its edge only, so the pair reads
   as one family with one of them clearly the action. */
:root[data-skin="market"] .button:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand-deep);
}

/* The ring that says where the keyboard is, in the brand rather than the
   browser's blue. */
:root[data-skin="market"] :is(input, select, textarea, button, a, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── the customer's sign-in ──────────────────────────────────
   A narrow column drawn in towards the middle, taller than it is wide, with
   the portrait on top of the fields rather than beside them.

   Beside them was right for a wide box and is wrong for a narrow one: at
   22rem a column of avatar plus inputs leaves nothing to type a phone
   number into. Narrow and tall means stacked.

   Rounded hard rather than actually circular. A true circle only holds an
   inscribed square of 0.707 of its width, so a form 22rem across would need
   a 31rem circle and would still clip its own corners at phone width — the
   radius here reads as round without costing the inputs their room. */
.signin {
  width: 100%;
  max-width: 23rem;
  margin-inline: auto;
  padding: clamp(1.8rem, 6vw, 2.9rem) clamp(1.4rem, 5vw, 2.1rem);
  border-radius: 2.4rem;
  /* Translucent on purpose: the ruled ground is the point, and an opaque
     white card sitting on it hides exactly the thing worth seeing. Alpha
     and no blur — a blur behind the panel would soften the ruling into a
     smear, which is the opposite of a graph sheet. */
  background: color-mix(in srgb, var(--surface-1) 62%, transparent);
  border: 1px solid var(--border);
}
.signin-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
/* Bigger now that it stands alone at the top: it is the first thing on the
   card and has to hold the width by itself. */
.signin-who {
  flex: none;
  width: 6.4rem;
  height: 6.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 80%, transparent);
  border: 1px solid var(--border);
}
.signin-who svg { width: 3.4rem; height: 3.4rem; }
.signin-fields {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: 100%;
  min-width: 0;
}
.signin-fields .field { margin: 0; }
.signin-fields input { width: 100%; max-width: none; }
/* Full width inside a narrow card: a button that stops short of the inputs
   above it leaves the column looking unfinished. */
.signin-go { flex-direction: column; align-items: stretch; gap: .8rem; }
.signin-go .primary { width: 100%; min-width: 0; }
.signin-forgot { text-align: center; }

@media (max-width: 560px) {
  /* The radius comes down with the card: 2.4rem on a card barely wider than
     that reads as a lozenge rather than a rounded box. */
  .signin { border-radius: 1.6rem; max-width: none; }
  .signin-who { width: 5rem; height: 5rem; }
  .signin-who svg { width: 2.7rem; height: 2.7rem; }
}

/* ── the faces ───────────────────────────────────────────────────────────
   The same three industry.css uses for the customer's own rooms, so the
   door is set in the typeface of the room behind it. Barlow is a little
   narrow and low-contrast — it suits a product about measured work and
   sits well on a ruled ground — and because it is narrow, every size
   below is a shade larger than the system-font values it replaces.

   Noto Sans Devanagari is in every stack rather than only the Devanagari
   one: a bilingual line should not change typeface halfway through. */
:root[data-skin="market"] {
  --font-body:    "Barlow", system-ui, -apple-system, "Noto Sans Devanagari", sans-serif;
  --font-heading: "Barlow Condensed", "Barlow", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
}
:root[data-skin="market"] body { font-family: var(--font-body); font-size: 15.5px; }
:root[data-skin="market"] h1,
:root[data-skin="market"] h2,
:root[data-skin="market"] h3 { font-family: var(--font-heading); }
:root[data-skin="market"] .mono,
:root[data-skin="market"] code { font-family: var(--font-mono); }
/* Figures line up in a column wherever they are counted. */
:root[data-skin="market"] .num,
:root[data-skin="market"] .mono { font-variant-numeric: tabular-nums; }

/* Barlow Condensed is narrow, so the heading can be larger at the same
   measure, and it wants the tracking opened rather than closed. */
:root[data-skin="market"] .page-head h1 {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
}
/* The line under it was --ink-2 at 14px: too faint and too small to be the
   one sentence that says what this is for. */
:root[data-skin="market"] .page-head .sub {
  font-size: 1rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
:root[data-skin="market"] .brand-line {
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand);
}

/* A label was 12.5px at weight 600 in grey: small, heavy and dim all at
   once, which is why it read as crowding the field rather than naming it.
   Larger, lighter, and darker. */
:root[data-skin="market"] .field label {
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
:root[data-skin="market"] .field input,
:root[data-skin="market"] .field select {
  font-size: 1rem;
  padding: .62rem .8rem;
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
}
:root[data-skin="market"] .field input::placeholder { color: var(--muted); }
/* A hint is 12.5px, which WCAG counts as normal text and so wants 4.5.
   `--muted` (#8a7f86) gives 3.79 on this card — and "the short name your
   organisation was registered under" is a sentence somebody has to read,
   not decoration. 62% of the ink clears it at 5.25. */
:root[data-skin="market"] .field .hint,
:root[data-skin="market"] .hint {
  font-size: .78rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
:root[data-skin="market"] button.primary,
:root[data-skin="market"] .button.primary {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: .66rem 1.1rem;
}

/* ── a page that stands on something else ────────────────────────────────
   The skin rules the ground by default. A page that has its own — the
   application form stands on the shloka — says so on the root rather than
   undoing it rule by rule. */
:root[data-skin="market"][data-ground="verse"] body { background-image: none; }

/* ── the application's card ──────────────────────────────────────────────
   The same card as the sign-in doors, widened for a form with seven fields
   rather than two. 23rem holds a phone number; it does not hold "Permanent
   account number" beside a label. */
:root[data-skin="market"] .apply-page > .panel,
:root[data-skin="market"] .apply-page > form > .panel {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 2.3rem);
  border-radius: 2.2rem;
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  border: 1px solid var(--border);
}
/* The heading, the notice and the last line are drawn to the card's width,
   so the column reads as one object rather than three of different sizes. */
:root[data-skin="market"] .apply-page > .page-head,
:root[data-skin="market"] .apply-page > .brand-line,
:root[data-skin="market"] .apply-page > .notice,
:root[data-skin="market"] .apply-page > .sub,
:root[data-skin="market"] .apply-page > .login-foot {
  max-width: 34rem;
  margin-inline: auto;
}
/* A seven-field form in a narrow card wants its submit across the foot of
   it, as the doors have. */
:root[data-skin="market"] .apply-page button.primary { width: 100%; }
@media (max-width: 560px) {
  :root[data-skin="market"] .apply-page > .panel,
  :root[data-skin="market"] .apply-page > form > .panel { border-radius: 1.5rem; max-width: none; }
}

/* ── a page that keeps its own header ────────────────────────────────────
   The skin paints the top bar as the market's own: a solid plum band sized
   to carry a logo, a search and a basket. A page that borrows the skin for
   its type and its card but fits its own nav gets a thick empty stripe
   instead, so it says `data-bar="plain"` and keeps the app's header. */
:root[data-skin="market"][data-bar="plain"] .topbar {
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
:root[data-skin="market"][data-bar="plain"] .topbar .theme-toggle {
  color: var(--ink-2);
  background: transparent;
}

/* ── one field to a row ─────────────────────────────────────────────────
   `.row2` pairs fields two across, which suits a wide panel. In a card
   drawn to the middle it halves an already narrow measure, and a label
   like "Permanent account number" then wraps over its own input. One to a
   row: taller, and every field gets the whole width to say its name in. */
:root[data-skin="market"] .apply-page .row2 {
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

/* ── the merchant map ──────────────────────────────────────────────────────
   A map on the marketplace: who is near, and who takes Loop. Drawn by
   /static/shopmap.js from this platform's own endpoints, so the tile
   provider is a console choice and never a thing this file knows. */
.shopmap {
  position: relative;
  border: 1px solid var(--grid, #e1e5ea);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.shopmap-canvas { height: 360px; width: 100%; }
/* Said instead of the map when there is nothing to draw. Hidden until then,
   so an empty box never flashes while the shops are being fetched. */
.shopmap-said { display: none; padding: 28px; text-align: center; color: var(--muted, #4f5661); font-size: .95rem; }
.shopmap-empty .shopmap-canvas { display: none; }
.shopmap-empty .shopmap-said { display: block; }

/* A pin is the shop's own mark, with its initials underneath for the moment
   before the image arrives and for ever if it never does. */
.shopmap-pin {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--grid, #e1e5ea);
  box-shadow: 0 2px 5px rgba(6, 13, 26, .18);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The one thing the map is for, on a Loop-branded deployment. */
.shopmap-pin.is-loop { border-color: var(--primary, #2351de); }
.shopmap-pin span {
  position: absolute;
  font-size: .78rem; font-weight: 800;
  color: var(--ink, #060d1a);
}
.shopmap-pin img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) { .shopmap-canvas { height: 280px; } }