/* The market board and model pages. Built on brass.css and guides.css tokens. */
.market{max-width:1180px;padding-top:56px;padding-bottom:96px}
.market h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,var(--h2));line-height:1.08;letter-spacing:-.01em;margin:0 0 24px;max-width:860px;text-wrap:balance}
.market h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,32px);line-height:1.15;margin:56px 0 16px}
.market p,.market li{font-size:var(--body);line-height:1.6;max-width:760px}
.market .lede{font-size:var(--lede);line-height:1.5}
.market .small{font-size:var(--small);color:var(--soft)}
.market a{color:var(--ink);text-decoration-color:var(--strong);text-underline-offset:3px}
.market a:hover{text-decoration-color:var(--ink)}
.market p.market-facts{font-family:var(--mono);font-size:var(--small);color:var(--soft);margin:0 0 32px}
.app .market-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 20px;max-width:none;margin:0 0 16px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.market-filter label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
/* Beats app.css's generic field rule (50px tall, full width) for this one compact row. */
.app form.market-filter input[type=search][name=q],.app form.market-filter select{box-sizing:border-box;height:44px;min-height:44px;width:auto;font-family:var(--text);font-size:var(--small);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper-light);border:1px solid var(--field-border);border-radius:0;padding:0 12px;margin:0;min-width:200px}
.market-filter .check{flex-direction:row;align-items:center;gap:10px;min-height:44px}
.market-filter .check input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.app form.market-filter button{height:44px;min-height:44px;padding:0 22px;margin:0}
.market-filter .clear{font-family:var(--text);font-size:var(--small);align-self:flex-end;display:inline-flex;align-items:center;min-height:44px}
.market .table-scroll{overflow-x:auto;margin:0 0 16px;border-top:1px solid var(--rule)}
.market .table-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.market-table{border-collapse:collapse;width:100%;font-size:var(--small)}
.market-table th,.market-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.market-table thead th{font-family:var(--mono);font-weight:400;font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.market-table tbody th{font-family:var(--text);font-weight:400;min-width:220px}
.market-table tbody th>a:first-child{font-size:var(--body);text-decoration:none}
.market-table tbody th>a:first-child:hover{text-decoration:underline}
.market-table .num{font-family:var(--mono);text-align:right;white-space:nowrap}
.market-table .words{font-size:var(--body);color:var(--ink)}
.market-table .maker{display:block;font-family:var(--mono);font-size:var(--caption);letter-spacing:.04em;color:var(--soft);margin-top:6px}
.market-table .maker a{color:var(--soft)}
.market-table .sched{display:block;font-size:var(--caption);color:var(--soft);margin-top:4px}
.market-table td{white-space:nowrap}
/* At every width the figures and their headers wrap, so no price is cut at 200% zoom or on a phone. */
.market-table .num,.market-table thead th,.market-table td.num{white-space:normal}
/* A message row (no search match) is a sentence: it wraps, so it never needs sideways scrolling (WCAG 1.4.10). */
.market-table td[colspan]{white-space:normal}
.market .swipe{display:none}
.market-table .in-brass{margin:-3px 0}
.in-brass{display:inline-block;margin:0;vertical-align:baseline;font-family:var(--mono);font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink);border:1px solid var(--strong);padding:2px 6px}
.market .crumbs{font-family:var(--mono);font-size:var(--small);color:var(--soft);margin:0 0 18px}
.market .facts{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:0;margin:32px 0;max-width:760px;border-top:1px solid var(--rule)}
.market .facts div{display:contents}
.market .facts dt,.market .facts dd{margin:0;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);font-size:var(--small)}
.market .facts dt{font-family:var(--mono);font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding-top:15px}
.market .actions{margin:32px 0 8px}
.market .actions .button{text-wrap:balance;text-align:center}
.market .chart{margin:24px 0 24px}
.market .history-table{max-width:760px}
.market .chart svg{width:100%;height:auto;display:block;max-width:760px}
/* Two drawings of the history: the narrow one keeps its labels 12px on a phone. These selectors outrank the rule above. */
.market .chart svg.chart-narrow{display:none}
@media (max-width:599px){.market .chart svg.chart-wide{display:none}.market .chart svg.chart-narrow{display:block}}
.market .chart .axis{stroke:var(--rule);stroke-width:1}
.market .chart .line{fill:none;stroke:var(--brass-ink);stroke-width:2}
.market .chart .tick{font-family:var(--mono);font-size:12px;fill:var(--soft)}
.market .chart .tick.end{fill:var(--ink)}
.market .chart figcaption{font-size:var(--small);color:var(--soft);margin-top:8px}
.top nav a[aria-current=page],.top nav a[aria-current=true]{text-decoration:underline;text-decoration-color:var(--strong);text-underline-offset:6px}
/* While sales are off, the board's closing note takes an email; b.js sends it. */
.market .board-waitlist{display:grid;gap:10px;max-width:480px;margin:20px 0 0}
.market .board-waitlist label{font-family:var(--mono);font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.market .board-waitlist button{justify-self:start;margin:6px 0 0}
.market .board-waitlist p{margin:0}
.market .board-waitlist .status:empty{position:absolute}
.market .board-waitlist .status[data-state=error]{color:var(--error)}
/* The success line sits in the form's own column on the board (the homepage's grid places it otherwise). */
.market .board-waitlist .done{grid-column:auto;grid-row:auto;margin-top:8px}
@media (max-width:600px){
  .market{padding-top:36px}
  .market-filter{gap:14px}
  .market-filter label{width:100%}
  .app form.market-filter input[type=search][name=q],.app form.market-filter select{width:100%;min-width:0}
  .market-filter .check{width:auto}
  .market-table th,.market-table td{padding-right:12px}
  .market-table tbody th{min-width:170px;position:sticky;left:0;background:var(--paper)}
  .market .facts{grid-template-columns:1fr}
  .market .facts dt{padding-bottom:0;border-bottom:0}
  .market .swipe{display:block;margin:0 0 8px}
  /* b.js marks a hint whose table fits the screen, so the hint shows only while there is something to swipe to. */
  .market .swipe[data-fits]{display:none}
  .market-table tbody th{min-width:140px}
  .market-table td.words{padding-right:28px}
  /* The tag gets its own line under "pricing page", clear of the link's underline; notes balance their lines. */
  .market-table .in-brass{display:table;margin:8px 0 0}
  .market-table .sched{text-wrap:balance}
}