/* Model directory and model pages (/models, /models/{provider}, /models/{provider}/{api_id}). */

/* status words: colour only reinforces the word */
.lc-deprecated{color:var(--hdu)}
.lc-retired{color:var(--ink-3)}
.statusline dd.lc-deprecated{color:var(--brk)}
.status-note{margin-top:10px}

/* model page grid: the countdown, then the email box, sit at the top of the side column, and first on narrow screens */
.m-grid{grid-template-rows:auto auto 1fr}
.m-grid > .m-main{grid-column:1;grid-row:1 / span 3}
.m-grid > .m-clock{grid-column:2;grid-row:1;margin-bottom:30px;align-self:start}
.m-grid > .m-watch{grid-column:2;grid-row:2;margin-bottom:30px;align-self:start}
.m-grid > .m-side{grid-column:2;grid-row:3;align-self:start}
@media (max-width:1020px){
  .m-grid{grid-template-rows:none}
  .m-grid > .m-main,.m-grid > .m-clock,.m-grid > .m-watch,.m-grid > .m-side{grid-column:1;grid-row:auto}
  .m-grid > .m-clock,.m-grid > .m-watch{order:-1;margin-bottom:28px}
}

/* directory */
.dir-filter{gap:8px 22px;font-weight:600}
.dir-filter a{color:var(--ink-3);padding-bottom:3px;border-bottom:2px solid transparent}
.dir-filter a:hover{color:var(--ink)}
.dir-filter a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
small.band{display:block;font:400 11.5px var(--sans);color:var(--ink-3);margin-top:2px}
table.dir td.lc-active{color:var(--ink-2)}
/* release order: a heading row per release month */
table.dir tr.mon th{font:600 15px/1.3 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink);text-align:left;padding:18px 0 6px;border-bottom:1px solid var(--rule-2)}
table.dir tbody:first-of-type tr.mon th{padding-top:10px}
table.dir small.sd{display:block;font:400 12px var(--mono);color:var(--ink-3);margin-top:2px;white-space:normal;min-width:18ch}
/* Spec C 6.4: a plain label, not the accent; the text carries the meaning. */
table.dir .t-free{font:600 10.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-left:8px;white-space:nowrap}
.dir-more{margin:18px 0 0}
.dir-more a[aria-busy]{opacity:.6;cursor:progress}

/* price-history chart (server-rendered SVG; see src/web/components/price-chart.tsx) */
.legend .key{width:22px;height:10px;overflow:visible}
.legend .key line{stroke-width:2}
.legend .key-in{stroke:var(--s-in)} .legend circle.key-in{fill:var(--s-in)}
.legend .key-out{stroke:var(--s-out)} .legend rect.key-out{fill:var(--s-out)}
.chart-wrap svg.price-chart{max-width:820px}
.pc-narrow{display:none}
@media (max-width:600px){.pc-wide{display:none}.pc-narrow{display:block}}
.price-chart text{font:400 12px var(--mono);fill:var(--ink-3)}
.price-chart .grid line{stroke:var(--rule);stroke-width:1}
.price-chart .base{stroke:var(--rule-2);stroke-width:1}
.price-chart .tick{stroke:var(--rule-2);stroke-width:1}
.price-chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.price-chart .mk{stroke:var(--bg);stroke-width:2}
.price-chart .input .line{stroke:var(--s-in)} .price-chart .input .mk{fill:var(--s-in)}
.price-chart .output .line{stroke:var(--s-out)} .price-chart .output .mk{fill:var(--s-out)}
.price-chart .endlab text{fill:var(--ink);font-weight:600}
.price-chart .leader{stroke:var(--rule-2);stroke-width:1}
.price-chart .hit rect{fill:transparent}
.price-chart .hit rect:hover{fill:var(--ink);fill-opacity:.04}
@media (forced-colors:active){
  .price-chart .input .line,.price-chart .output .line{stroke:CanvasText}
  .price-chart .input .mk,.price-chart .output .mk{fill:CanvasText}
}

/* price table: one tbody per tier. With the script on, the switch shows one tier and replaces the tier headings. */
table.m-prices td:nth-child(2){color:var(--ink-2)}
table.m-prices tr.mon th{font:600 15px/1.3 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink);text-align:left;padding:18px 0 6px;border-bottom:1px solid var(--rule-2)}
table.m-prices tbody:first-of-type tr.mon th{padding-top:10px}
.tier-seg{margin:0 0 10px}
html:not(.js) .tier-seg,.js table.m-prices.tiered tr.mon,.js table.m-prices tbody.off{display:none}

/* changelog: neutral nodes; severity is shown by SeverityMark (colour plus shape) */
.tl .sev-line{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-top:3px}

/* related news */
.m-news{list-style:none;margin:0;padding:0}
.m-news li{padding:10px 0;border-top:1px solid var(--rule)}
.m-news li:first-child{border-top:0;padding-top:0}
.m-news .kick{margin-bottom:4px}
.m-news a{font:600 17px/1.3 var(--serif)}
.m-news a:hover{text-decoration:underline;text-underline-offset:3px}

/* side list */
.side-list .lc{font-size:12.5px;color:var(--ink-3)}
.side-list .lc-deprecated{color:var(--hdu)}

/* sources line */
.src-line{margin-top:36px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3)}
.src-line time{font-family:var(--mono)}
.src-line a{color:var(--accent)}
.src-line a:hover{text-decoration:underline}
/* The model page's launch line */
.launch a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.launch{margin-top:8px;font-size:14px;color:var(--ink-3)}
/* the summary from our own facts, then the company's own description, quoted and credited */
.m-sum{font-size:17px}
.m-desc{margin:14px 0 0;max-width:62ch;padding-left:14px;border-left:2px solid var(--rule-2)}
.m-desc p{font:400 16px/1.5 var(--serif);color:var(--ink-2)}
.m-desc footer{font:500 12.5px var(--sans);color:var(--ink-3);margin-top:4px}
/* Long model IDs wrap at their hyphens so the price columns stay on screen. */
.dir td.mid{white-space:normal;min-width:20ch}

/* Plan 13: the email box. Its field is 16px everywhere, so no browser zooms into it. */
.watch .watch-lead{font:600 17px/1.3 var(--serif);margin-bottom:6px}
.watch p{margin-bottom:8px}
.watch .nl-box input{font-size:16px}
.watch .watch-msg{border-left:3px solid var(--accent);padding:8px 12px;background:var(--fill)}
.watch .watch-err{border-left:3px solid var(--brk);padding:8px 12px;background:var(--fill)}

/* announced models: the block above the /models table, and the status on their own page */
.statusline dd.lc-announced{color:var(--accent)}
.ann-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--rule)}
.ann-list li{padding:10px 0;border-bottom:1px solid var(--rule)}
.ann-list a{font:600 15px var(--sans);color:var(--accent)}
.ann-list small{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}
.ann-page section{margin-top:32px}
.ann-page .ann-story{font:600 17px/1.35 var(--serif);margin-bottom:8px}
.ann-page .ann-story a{color:var(--ink)}

/* The model's API ID under its name (src/names.ts): what developers paste into code. */
.m-apiid{margin-top:6px;font-size:14px;color:var(--ink-2)}
.m-apiid .lbl{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
/* Plan 14: migration pages (/migrate and /migrate/{provider}/{from}/{to}). Direction is carried by the sign and the
   words ("+25%", "rejects"), never by colour. */
.mg-page .m{font-family:var(--mono)}
.m-main .statusline.mg-status{grid-template-columns:repeat(4,minmax(0,1fr))}
.statusline.mg-status + .statusline.mg-status{border-top:0}
@media (max-width:700px){.m-main .statusline.mg-status{grid-template-columns:1fr 1fr}}
th.mg-id{font:600 12px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
td.mg-cell{white-space:normal;min-width:16ch}
td.mg-change{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.mg-monthly{margin-top:12px}
.mg-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mg-lines li{padding:10px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.mg-lines small.sub{display:block;font:400 12px/1.4 var(--sans);color:var(--ink-3);margin-top:3px}
.mg-lines small.sub a,.mg-check a{color:var(--accent)}
.mg-sub{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:20px 0 6px}
.mg-check{margin:0;padding-left:1.5em}
.mg-check li{padding:5px 0;max-width:70ch;overflow-wrap:anywhere}
.mg-lines code,.mg-check code{font:500 .92em var(--mono)}
.mg-group{margin-top:32px}
details.mg-retired{margin-top:12px}
details.mg-retired summary{cursor:pointer;font:600 13px var(--sans);color:var(--ink-3);padding:6px 0}
details.mg-retired summary:hover{color:var(--ink)}
/* Phones: a From or To price takes its own line, left-aligned with its since line. */
@media (max-width:600px){table.cards td.mg-cell{flex-basis:100%;text-align:left}}
/* /migrate index: secondary links to the two model pages, in mono like every model ID */
td.mg-pages{font:400 12.5px var(--mono);color:var(--ink-3)}
td.mg-pages a:hover{color:var(--ink);text-decoration:underline}
/* Plan 15: the Benchmarks section (model and announced pages) and block (/migrate). Differences carry a sign and the
   words "within range", never colour. */
.bm-sub{display:flex;align-items:center;gap:6px;font:600 14px/1.3 var(--sans);margin:18px 0 6px}
.bm-sub:first-of-type{margin-top:4px}
.bm-more{margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.bm-more summary{cursor:pointer;color:var(--accent)}
.bm-more ul{list-style:none;padding:4px 0 0;margin:0;display:grid;gap:2px}
.bm-more .m{font-family:var(--mono)}
.bm-more .dim{color:var(--ink-3);font-size:12px}
small.pm{color:var(--ink-3);font-size:11.5px}
.bm-vs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 2px;font:13px var(--sans)}
.bm-vs label{font-weight:600;color:var(--ink-2)}
.bm-vs select,.bm-vs input{font:13.5px var(--sans);padding:6px 8px;border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);border-radius:0}
.bm-vs select{max-width:100%}
.bm-vs .bm-go{font:600 13px var(--sans);padding:6px 12px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:0;cursor:pointer}
.bm-or{color:var(--ink-3)}
.bm-search{position:relative;flex:1 1 200px;max-width:300px}
.bm-search input{width:100%;box-sizing:border-box}
/* The list spans the field, never wider: the 400px header list overflowed the page from a field near the right edge. */
.bm-search .bm-list{left:-1px;right:-1px;width:auto}
.bm-vsnote{margin-top:4px}
.bm-vsnote a{color:var(--accent)}
.bm .fine a{color:var(--accent)}
/* Phones: 16px fields, so no browser zooms into them. */
@media (max-width:600px){.bm-vs select,.bm-vs input{font-size:16px}.bm-search{max-width:none}}
/* Model names head the score columns; long ones wrap so the table stays on screen. */
table.bm-table th.r{white-space:normal;min-width:8ch}
/* The /migrate block's note is longer than a phone is wide: it wraps (other .sect-h notes stay on one line). */
.sect-h span.bm-hnote{white-space:normal}