/* Leaderboard components: insight panels, quotes, rate bars, run list, search,
   calls to action, the run panel, and the embed, phone and standalone frames.
   Loaded by every board page. */
/* repository x tool matrix */
.mxgrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1050px) { .mxgrid { grid-template-columns: 1fr; } }
.takeaways h4 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brick); font-weight: 500; }
.takeaways p { position: relative; margin: 0 0 10px; padding-left: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.takeaways p::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--brick); }
.takeaways b { font-weight: 700; color: var(--ink); }
.mxr { min-width: 0; }
.mx2wrap { max-width: 100%; overflow: hidden; }
.mx2 { border-collapse: collapse; font-size: 11px; min-width: 0; width: 100%; table-layout: fixed; }
.mx2 th.rnh { width: 21%; }
.mx2 th.tcol { width: calc(79% / var(--mxcols, 6)); vertical-align: bottom; padding: 4px 1px 6px; }
.mx2 th .thp { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--ink-2); margin: 0 auto; }
.mx2 th .thp .vname { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 0.02em; max-height: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx2 th img { width: 15px; height: 15px; object-fit: contain; }
.mx2 th .tlogo { width: 20px; height: 20px; }
.mx2 td { border-top: 1px solid var(--bg-2); padding: 7px 2px; text-align: center; }
.mx2 td.rn { text-align: left; white-space: nowrap; width: 21%; overflow: hidden; text-overflow: ellipsis; }
.mx2 td.rn .rr2 { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11.5px; }
.mx2 td.rn small { display: block; margin-left: 24px; font-weight: 400; font-size: 9.5px; color: var(--ink-4); }
.mx2 .cell { display: inline-block; width: 12px; height: 12px; }
.mx2 .cell.c { background: var(--brick); }
.mx2 .cell.m { background: none; border: 1.5px solid var(--brick); box-sizing: border-box; opacity: 0.55; }
.mx2 .cell.x { background: var(--bg-2); width: 6px; height: 6px; }
.mx2 th.diycol .thp { width: 30px; padding: 5px 2px; border: 1px solid rgba(200, 65, 13, .55); background: repeating-linear-gradient(135deg, rgba(200,65,13,.10) 0, rgba(200,65,13,.10) 4px, transparent 4px, transparent 8px); }
.mx2 th.diycol .tlogo { background: #fff; border-color: var(--brick); }
.mx2 th.diycol .tlogo svg { stroke: var(--brick); }
.mx2 .cell.c.diy { box-sizing: border-box; border: 1px solid rgba(200, 65, 13, .72); background: repeating-linear-gradient(135deg, rgba(200,65,13,.62) 0, rgba(200,65,13,.62) 3px, rgba(200,65,13,.12) 3px, rgba(200,65,13,.12) 6px); }
.mx2 th.morecol { padding-inline: 4px; }
.mx-more-head { display: flex; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink-3); font-family: var(--font-mono); }
.mx-more-head b { color: var(--brick); font-size: 12px; }
.mx-more-head small { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.mx2 td.morecol { border-left: 1px dashed var(--bg-3); }
@media (max-width: 600px) {
  .mx2 th.rnh, .mx2 td.rn { width: 36%; }
  .mx2 th.tcol { width: calc(64% / var(--mxcols, 4)); }
  .mx2 td.rn small { display: none; }
}
.mx-leg { display: flex; gap: 18px; margin-top: 10px; font-size: 10px; color: var(--ink-4); align-items: center; }
.mx-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }

/* insight modules */
.insgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 12px; padding: 12px 22px 6px; }
@media (max-width: 1000px) { .insgrid { grid-template-columns: 1fr; } }
.icard { border: 0; border-top: 1px solid var(--bg-2); background: none; padding: 12px 2px 0; min-width: 0; }
.icard.wide { grid-column: 1 / -1; }
.icard h4 { margin: 0 0 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.icard .mex { margin: 0 0 10px; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
.trsvg { width: 100%; height: auto; display: block; }
.nchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nchip .tlogo { width: 17px; height: 17px; }
.nchip .tlogo img { width: 12px; height: 12px; }
.nchip b { font-size: 11.5px; font-weight: 650; }
.nchip:hover b { color: var(--brick); }
.fn2 { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2hrow em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); text-align: right; }
.h2hq { margin: 2px 4px 10px 33px; padding: 7px 11px; background: var(--bg); border-left: 2px solid var(--bg-2); font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.h2hq .qfoot { display: block; margin-top: 5px; }
.displ { display: flex; align-items: center; gap: 7px; min-width: 0; }
.displ b { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.displ .di { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); }
.dispbar { position: relative; display: block; height: 8px; background: var(--bg-2); margin: 6px 0 4px; }
.dispbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brick); }
.dispr { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 10px; color: var(--ink-4); }
.dispr.ok { color: var(--brick); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
.dispr .rx { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
/* a quote: the mark in the display face, brick when it argued for the
   product and grey when it argued against */
.qcard { position: relative; background: var(--bg); padding: 11px 14px 10px 36px; margin-top: 8px; }
.qcard::before { content: "\201C"; position: absolute; left: 12px; top: 5px; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--brick); }
.qcard:first-of-type { margin-top: 0; }
.qcard.lose::before { color: var(--ink-4); }
.qcard p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.qfoot { display: flex; align-items: center; gap: 12px; margin-top: 7px; flex-wrap: wrap; }
.qlink { margin-left: auto; cursor: pointer; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brick); }
.qlink:hover { text-decoration: underline; }
.qsrc { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin-right: auto; }
.lostto { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); }
.pairs { display: flex; flex-wrap: wrap; gap: 7px; }
.pairchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bg-2); background: #fff; padding: 5px 9px; font-size: 11px; font-weight: 600; }
.pairchip .tlogo { width: 17px; height: 17px; }
.pairchip .tlogo img { width: 12px; height: 12px; }
.pairchip .tlogo + .tlogo { margin-left: -9px; }
.pairchip em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
.h2hrow { display: grid; grid-template-columns: 20px minmax(96px, 200px) minmax(64px, 1fr) 52px 52px; gap: 9px; align-items: center; padding: 4px; cursor: pointer; transition: background 120ms ease; }
.h2hrow:hover { background: var(--bg); }
.h2hrow .tlogo { width: 19px; height: 19px; }
.h2hrow .tlogo img { width: 13px; height: 13px; }
.h2hbar { position: relative; height: 9px; background: var(--bg-2); overflow: hidden; }
.h2hbar .w { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brick); }
.h2hbar .l { position: absolute; right: 0; top: 0; bottom: 0; background: var(--ink); }
.h2hrow b { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-align: right; }
.incstats { display: flex; gap: 12px; }
.incstat { flex: 1; border: 1px solid var(--bg-2); background: var(--bg); padding: 9px 12px; }
.incstat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.incstat span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); }
.chiprack { display: flex; flex-direction: column; gap: 6px; }
.ratechip + .ratechip { border-top: 1px solid #F7F2EC; padding-top: 6px; }
.ratechip { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 92px; gap: 10px; align-items: center; font-size: 11px; font-weight: 600; }
.chiprack.agents .ratechip { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 92px; }
.chiprack.agents .rc-l { white-space: nowrap; }
.chiprack.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
@media (max-width: 1050px) { .chiprack.two { grid-template-columns: 1fr; } }
.rc-l { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.rc-l img { width: 14px; height: 14px; object-fit: contain; }
.rc-l small { font-family: var(--font-mono); font-size: 8.5px; font-weight: 400; color: var(--ink-4); white-space: nowrap; }
.ratechip i { position: relative; display: block; height: 8px; background: var(--bg-2); }
.ratechip i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brick); }
.ratechip em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); text-align: right; }
/* searched queries */
.q-list { display: flex; flex-direction: column; gap: 7px; }
.q-list p { margin: 0; display: flex; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; color: var(--ink-2); border: 1px solid var(--bg-2); background: #fff; padding: 7px 10px; }
.q-text { flex: 1 1 auto; min-width: 0; }
.q-site { display: inline-block; margin-right: 7px; font-size: 8.5px; letter-spacing: 0.03em; line-height: 1.3; color: var(--ink-3); border: 1px solid var(--bg-3); background: var(--bg); padding: 1px 5px; vertical-align: 1px; }
.q-list p b { margin-left: auto; font-weight: 500; color: var(--ink-4); font-size: 9.5px; flex: none; }
/* codebases + mentions */
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 1050px) { .cb-grid { grid-template-columns: 1fr; } }
.cbrow { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-top: 1px solid #F7F2EC; min-width: 0; }
.cb-grid .cbrow:nth-child(-n+2) { border-top: 0; }
@media (max-width: 1050px) { .cb-grid .cbrow:nth-child(2) { border-top: 1px solid #F7F2EC; } }
.cbtx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cbtx b { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbtx small { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbtop { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.cbtop i { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbtx { min-width: 0; }
.cbtop .tlogo { width: 18px; height: 18px; }
.cbtop .tlogo img { width: 12px; height: 12px; }
.cbtop i { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-2); }
.cbtop em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
.pcls { font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--bg-3); padding: 1px 5px; margin-left: 7px; white-space: nowrap; vertical-align: 1.5px; font-weight: 400; }
h2 .pcls { font-size: 9px; vertical-align: 4px; }
.nvr { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brick); border: 1px solid rgba(200, 65, 13, 0.45); padding: 1px 5px; margin-left: 4px; white-space: nowrap; vertical-align: 0.5px; }
.mx-notes { margin-top: 12px; border-top: 1px solid #F7F2EC; padding-top: 4px; }
.mx-notes .takeaways p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2); }
.qwide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 28px; align-items: start; }
.qwide .domhead:first-child, .qwide > div > .domhead { margin-top: 0; }
@media (max-width: 900px) { .qwide { grid-template-columns: 1fr; } }
.domhead { margin: 16px 0 7px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.domhead em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0.02em; color: var(--ink-4); margin-left: 4px; }
.domrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 2px; border-top: 1px solid #F7F2EC; }
.domrow span { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; }
.domrow em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); white-space: nowrap; }

/* run list */
.rlh, .rlr { display: grid; grid-template-columns: 66px minmax(150px, 1.2fr) 96px 20px 96px minmax(150px, 1.15fr) 44px 78px; gap: 10px; align-items: center; padding: 8px 6px; }
.rlh.rl-nopick, .rlr.rl-nopick { grid-template-columns: 66px minmax(150px, 1.2fr) 96px 20px 96px 44px 78px; }
.rlh.rl-nodate, .rlr.rl-nodate { grid-template-columns: minmax(150px, 1.2fr) 96px 20px 96px minmax(150px, 1.15fr) 44px 78px; }
.rlh.rl-nodate.rl-nopick, .rlr.rl-nodate.rl-nopick { grid-template-columns: minmax(150px, 1.2fr) 96px 20px 96px 44px 78px; }
.rlh { padding-bottom: 6px; }
.rlh span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.rlr { border-top: 1px solid var(--bg-2); cursor: pointer; transition: background 120ms ease; font-size: 11.5px; }
.rlr:hover { background: var(--bg); }
.rlr .dt { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.rlr .rp { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; }
.rlr .rp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlr .hlogo { width: 16px; height: 16px; object-fit: contain; display: block; }
.rlr .pk .advch { font-style: normal; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); border: 1px solid var(--bg-3); padding: 1px 4px; margin-left: 6px; }
.rlr .pk { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 650; }
.rlr .pk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlr .pk .tlogo { width: 19px; height: 19px; }
.rlr .pk .tlogo img { width: 13px; height: 13px; }
.rlr .ev2 { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); text-align: right; }
.rwatch { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--bg-3); background: #fff; padding: 3px 7px; text-align: center; white-space: nowrap; transition: all 120ms ease; }
.rlr:hover .rwatch { color: #FEFCFB; background: var(--brick); border-color: var(--brick); }
.chip2 { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; border: 1px solid var(--bg-2); background: #fff; color: var(--ink-3); padding: 2px 7px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  /* by position this hid the watch button on the rows that carry no date */
  .rlh > .mdl, .rlh > .ev2, .rlr > .mdl, .rlr > .ev2 { display: none; }
  .rlh, .rlr { grid-template-columns: 62px minmax(120px, 1.2fr) 74px 20px minmax(110px, 1fr) 78px; }
  .rlh.rl-nodate, .rlr.rl-nodate { grid-template-columns: minmax(120px, 1.2fr) 74px 20px minmax(110px, 1fr) 78px; }
  .rlh.rl-nopick, .rlr.rl-nopick { grid-template-columns: 62px minmax(120px, 1.2fr) 74px 20px 78px; }
  .rlh.rl-nodate.rl-nopick, .rlr.rl-nodate.rl-nopick { grid-template-columns: minmax(120px, 1.2fr) 74px 20px 78px; }
}

/* command palette: sectors and players, reachable from every board */
.cmdk { position: absolute; inset: 0; z-index: 30; display: grid; place-items: start center; padding: min(12vh, 82px) 18px 18px; background: rgba(9, 8, 8, .48); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cmdk-card { width: min(650px, 100%); max-height: min(650px, 76vh); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ink); box-shadow: 7px 7px 0 rgba(9, 8, 8, .9); }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--ink); }
.cmdk-input svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--brick); stroke-width: 1.7; }
.cmdk-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: 500 16px/1.3 var(--font-sans); color: var(--ink); }
.cmdk-input input::placeholder { color: var(--ink-4); }
.cmdk-input kbd { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); border: 1px solid var(--bg-3); padding: 2px 6px; }
.cmdk-clear { appearance: none; cursor: pointer; flex: none; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 0; background: none; color: var(--ink-4); transition: color 130ms ease; }
.cmdk-clear svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.8; }
.cmdk-clear:hover { color: var(--ink); }
.cmdk-results { overflow-y: auto; padding: 8px; }
.cmdk-group { padding: 7px 9px 5px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.cmdk-option { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; color: var(--ink); padding: 9px; text-align: left; font: inherit; }
.cmdk-option:hover, .cmdk-option.on { background: var(--bg); }
.cmdk-option.on { box-shadow: inset 2px 0 var(--brick); }
.cmdk-option .cmdk-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmdk-option b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-option small { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-option .cmdk-go { margin-left: auto; color: var(--ink-4); }
.cmdk-empty { padding: 32px 18px; text-align: center; color: var(--ink-4); font-size: 12px; }
.cmdk-cta { display: block; margin: 12px auto 0; max-width: 44ch; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.cmdk-call { color: var(--brick); font-weight: 650; cursor: pointer; }
.cmdk-call:hover { text-decoration: underline; }
.cmdk-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--bg-2); font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); }
.cmdk-foot kbd { color: var(--ink-2); }

/* ----- lead prompt: "before you continue, tell us who you are" ----- */
.lead-pop { position: absolute; inset: 0; z-index: 28; display: grid; place-items: center; padding: 18px; box-sizing: border-box; background: rgba(9, 8, 8, 0.48); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: fsgIn 130ms ease-out; }
.lead-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; background: #fff; border: 1px solid var(--ink); box-shadow: 7px 7px 0 rgba(9, 8, 8, 0.9); padding: 22px 24px 14px; }
.lead-card h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.lead-card .sub { margin: 8px 0 2px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.lead-field { margin-top: 11px; }
.lead-field label { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4); }
.lead-field input, .lead-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--bg-3); background: #fff; color: var(--ink); padding: 9px 11px; font: inherit; font-size: 13px; }
.lead-field textarea { min-height: 56px; resize: vertical; }
.lead-field input:focus-visible, .lead-field textarea:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 -2px var(--brick); }
/* the identity search: the app's own search pattern, companies only */
.lead-combo { position: relative; }
.lead-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; max-height: 216px; overflow-y: auto; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(9, 8, 8, 0.85); }
.lead-opt { display: flex; align-items: center; gap: 9px; width: 100%; appearance: none; border: 0; background: none; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.lead-opt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-opt small { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); }
.lead-opt:hover, .lead-opt.on { background: var(--bg); box-shadow: inset 2px 0 var(--brick); }
.lead-opt.alt b { color: var(--brick); }
.lead-opt .tlogo { width: 22px; height: 22px; }
.lead-int { margin-top: 13px; }
.lead-int > span { display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
/* interests as real tiles: icon, readable label, a tactile checked state */
.lead-tiles { display: grid; gap: 7px; }
.lead-tile { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; appearance: none; border: 1px solid var(--bg-3); background: #fff; color: var(--ink-2); padding: 11px 38px 11px 12px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color 130ms ease, background 130ms ease, color 130ms ease; }
.lead-tile svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.5; transition: stroke 130ms ease; }
.lead-tile .tick { position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; display: grid; place-items: center; background: var(--brick); color: #FEFCFB; font-size: 11px; line-height: 1; opacity: 0; transform: translateY(-50%) scale(0.55); transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease; }
.lead-tile:hover { border-color: var(--ink); }
.lead-tile.on { border-color: var(--brick); background: rgba(200, 65, 13, 0.06); color: var(--ink); }
.lead-tile.on svg { stroke: var(--brick); }
.lead-tile.on .tick { opacity: 1; transform: translateY(-50%) scale(1); }
.lead-sector-details { margin-top: 7px; }
.lead-send { margin-top: 14px; appearance: none; cursor: pointer; width: 100%; border: 1px solid var(--brick); background: var(--brick); color: #FEFCFB; padding: 10px 12px; font: inherit; font-size: 12.5px; font-weight: 650; }
.lead-send:hover { background: #A93409; border-color: #A93409; }
.lead-later { display: block; margin: 4px auto 0; appearance: none; cursor: pointer; border: 0; background: none; color: var(--ink-3); padding: 8px 6px 4px; font: inherit; font-size: 11.5px; font-weight: 600; }
.lead-later:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lead-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 29; background: var(--ink); color: #FEFCFB; font-size: 12.5px; font-weight: 600; padding: 10px 16px; box-shadow: 4px 4px 0 rgba(9, 8, 8, 0.4); animation: fsgIn 140ms ease-out; }

/* ----- contact CTAs (flat surfaces only: no gradients, ever) ----- */
/* the all-sectors grid slot: reads instantly as an ask, never as a board
   that has not loaded */
.panel.ccard.reqcard { border: 2px solid var(--brick); background: rgba(200, 65, 13, 0.05); box-shadow: 4px 4px 0 rgba(200, 65, 13, 0.35); cursor: pointer; }
.panel.ccard.reqcard:hover { box-shadow: 5px 5px 0 var(--brick); border-color: var(--brick); }
.reqcard > header h3 { color: var(--brick); }
.reqcard .reqp { margin: 2px 0 12px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.reqcard .reqbtn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--brick); background: var(--brick); color: #FEFCFB; padding: 9px 14px; font-size: 12.5px; font-weight: 650; }
.reqcard .reqbtn i { font-style: normal; transition: transform 140ms ease; }
.reqcard:hover .reqbtn { background: #A93409; border-color: #A93409; }
.reqcard:hover .reqbtn i { transform: translateX(3px); }
.cmdk-minor { display: block; margin-top: 11px; font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-3); }
.cmdk-minor .cmdk-call { font-weight: 650; }
.lead-alt { margin: 10px 0 0; text-align: center; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
.lead-alt a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.lead-alt a:hover { color: var(--brick); }
/* the closing band on every board and player page */
.panel.ctaband { border-left: 3px solid var(--brick); background: #fff; }
.ctaband-in { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
.ctaband-in .k2 { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brick); }
.ctaband-in h3 { margin: 5px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.ctaband-in p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 58ch; }
.ctarow-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.soon-cta { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* floating contact: centered at the bottom of the app, under overlays; folds
   away while a page CTA section is on screen */
.contact-fab { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 5px; padding: 4px 4px 4px 12px; background: #fff; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform 220ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease; }
.contact-fab.folded { transform: translate(-50%, calc(100% + 20px)); opacity: 0; pointer-events: none; }
/* saturated brick reads as bright even through the onboarding scrims: gone
   entirely while the intro or the tour is on */
.app:has(.guide-panel:not([hidden])) .contact-fab,
.app:has(.tour-pop:not([hidden])) .contact-fab,
.app:has(.fs-suggest:not([hidden])) .contact-fab { display: none; }
.contact-fab :is(a, button) { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 11.5px; font-weight: 650; text-decoration: none; border: 1px solid var(--ink); background: #fff; color: var(--ink); transition: background 130ms ease, color 130ms ease; }
.contact-fab .fab-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; white-space: nowrap; }
.contact-fab :is(a, button):hover { background: var(--ink); color: #FEFCFB; }
.contact-fab .fab-call { font-family: inherit; cursor: pointer; background: var(--brick); border-color: var(--brick); color: #FEFCFB; }
.contact-fab .fab-call:hover { background: #A93409; border-color: #A93409; }
@media (max-width: 640px) { .contact-fab { bottom: 10px; } .contact-fab .fab-mail { display: none; } }
/* the search empty state: a real card, not a text link */
.cmdk-ctacard { margin: 16px auto 4px; max-width: 380px; text-align: left; border: 1px solid var(--ink); border-left: 3px solid var(--brick); background: #fff; padding: 15px 16px 14px; box-shadow: 4px 4px 0 rgba(9, 8, 8, 0.12); }
.cmdk-ctacard b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.cmdk-ctacard span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }
.cmdk-ctacard .btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cmdk-ctacard .cta { padding: 8px 14px; font-size: 12px; }
/* a request row closes each search group, sized like a real result */
.cmdk-option.cmdk-req b { color: var(--brick); }
.cmdk-option.cmdk-req .tlogo { border-style: dashed; }
.cmdk-option.cmdk-req .tlogo svg { stroke: var(--brick); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.combo-logos { display: inline-flex; align-items: center; min-width: 32px; }
.combo-logos .tlogo + .tlogo { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
.prow.combo-row { cursor: default; }
.prow.combo-row .goview, .prow.combo-row .go2 { visibility: hidden; }
.prow.diyrow { background: transparent; }
.prow.diyrow .pbar { box-sizing: border-box; border: 1px solid rgba(200, 65, 13, .55); background: repeating-linear-gradient(135deg, rgba(200,65,13,.11) 0, rgba(200,65,13,.11) 5px, rgba(200,65,13,.025) 5px, rgba(200,65,13,.025) 10px) !important; box-shadow: inset 2px 0 0 var(--brick); }
.prow.diyrow .tlogo { color: var(--brick); border-color: var(--brick); background: #fff; }
.prow.diyrow .tlogo svg { stroke: var(--brick); }
.showmore { margin: 12px 0 0; appearance: none; cursor: pointer; font: inherit; border: 1px dashed var(--bg-3); background: none; color: var(--ink-3); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 14px; }
.showmore:hover { border-color: var(--ink); color: var(--ink); }
.nopick { margin: 6px 22px 0; padding: 10px 14px; border: 1px dashed var(--bg-3); font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }

/* tool view extras */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo-tile { border: 1px solid var(--bg-2); background: var(--bg); padding: 14px 16px; }
.duo-tile .dl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.duo-tile .dl img { width: 16px; height: 16px; object-fit: contain; }
.duo-tile .dl span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.duo-tile b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.duo-tile .sb { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-3); }
.dots { display: flex; gap: 3px; }
.dots i { width: 8px; height: 8px; background: var(--bg-2); }
.dots i.on { background: var(--brick); }
.hchart { display: grid; grid-template-columns: 130px minmax(0, 1fr) 46px; gap: 10px; align-items: center; margin: 8px 0; font-size: 11px; }
.hchart .hl { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hchart .hl img { width: 13px; height: 13px; object-fit: contain; }
.hchart .hl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hchart .tr { position: relative; height: 7px; background: #fff; border: 1px solid var(--bg-2); }
.hchart .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brick); }
.hchart b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-align: right; }
.heat { display: flex; flex-wrap: wrap; gap: 6px; }
.heat span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--bg-2); padding: 6px 9px; font-size: 10.5px; color: var(--ink-2); background: #fff; }
.chiprack.repos .ratechip { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 92px; }
.soonbox { padding: 80px 24px; text-align: center; }
.soonbox .big { font-family: var(--font-display); font-weight: 500; font-size: 21px; }
.soonbox p { margin: 10px auto 0; font-size: 13px; color: var(--ink-3); max-width: 44ch; }
.soonbox .tag { display: inline-flex; margin-top: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--bg-3); color: var(--ink-4); padding: 5px 11px; }

/* ----- run panel ----- */
.run-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(9, 8, 8, 0.28); animation: fsgIn 140ms ease; }
.run-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(760px, 84%); background: #fff; overflow-y: auto; border-left: 1px solid var(--ink); box-shadow: -10px 0 26px rgba(9, 8, 8, 0.22); animation: rpIn 190ms ease; }
@keyframes rpIn { from { transform: translateX(60px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.rp-back { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; border: 1px solid var(--ink); background: #fff; padding: 5px 11px; }
.rp-back:hover { background: var(--ink); color: #FEFCFB; }
.rp-head { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--ink); padding: 12px 20px; }
.rp-row1 { display: flex; align-items: center; gap: 10px; }
.rp-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rp-row2 { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 10px; }
.rp-head .rmod { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.rp-head .rmod i { width: 7px; height: 7px; background: var(--brick); }
.rp-head .rrepo { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--bg-3); color: var(--ink-3); background: #fff; }
.badge img { width: 12px; height: 12px; object-fit: contain; }
.badge.inkb { background: var(--ink); border-color: var(--ink); color: #FEFCFB; }
.rp-body { padding: 18px 20px 28px; }
.meters { display: flex; gap: 26px; flex-wrap: wrap; padding: 4px 0 6px; }
.meter2 b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 17px; }
.meter2 span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.prompt-box2 { border: 1px solid var(--bg-2); background: var(--bg); padding: 12px 14px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.vd-chosen { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(200, 65, 13, 0.4); background: rgba(200, 65, 13, 0.05); padding: 12px 14px; }
.vd-chosen .tlogo { width: 30px; height: 30px; }
.vd-chosen .tlogo img { width: 20px; height: 20px; }
.vd-chosen b { font-size: 14.5px; font-weight: 650; }
.vd-chosen em { font-style: normal; margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brick); }
.vd-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid var(--bg-2); font-size: 12.5px; }
.vd-row:first-of-type { border-top: 0; }
.vd-row .role { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); }
.vd-row { cursor: pointer; }
.vd-row:hover span:first-of-type { color: var(--brick); }
.vd-list { margin-top: 10px; }
.pclass { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px dashed var(--bg-3); color: var(--ink-4); padding: 1px 6px; }
.pev { margin: 0 0 4px 31px; }
.pev .evr { padding: 2px 0; font-size: 10.5px; color: var(--ink-3); }
.pev[data-pw-primary] { margin-left: 0; }
.pwhy { margin: 6px 0 4px; font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.pev[data-pw-primary] .pwhy { border-left: 2px solid var(--bg-2); padding: 6px 12px; background: #fff; margin: 8px 0 0; }
.vd-weighed { margin-top: 10px; border: 1px solid var(--bg-2); background: #fff; padding: 10px 12px; }
.vd-weighed > b { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 6px; font-weight: 500; }
.vd-weighed .vd-row:first-of-type { border-top: 0; }
.vd-rationale { margin-top: 10px; border-left: 2px solid var(--brick); padding: 8px 12px; background: var(--bg); font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }
.vd-rationale b { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 4px; font-weight: 500; }
.vd-evid { margin-top: 10px; border: 1px solid var(--bg-2); background: #fff; padding: 10px 12px; }
.vd-evid > b { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 6px; font-weight: 500; }
.evr { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.evr .evk { flex: none; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--bg-3); padding: 1px 6px; color: var(--ink-4); }

.pairnote { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #6b6560); }
.pairnote a { color: var(--brick, #C8410D); }
.thhead, .throw { display: grid; grid-template-columns: 3fr 1fr 1fr 2fr; gap: 12px; padding: 6px 0; font-size: 13px; align-items: baseline; }
.thhead { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted,#6b6560); border-bottom: 1px solid rgba(0,0,0,.12); }
.throw { border-bottom: 1px solid rgba(0,0,0,.06); }
.throw .thw, .throw .thc { font-variant-numeric: tabular-nums; }
.qfoot .qpick { font-size: 10px; color: var(--ink-4); margin-right: 6px; }
.seamwrap { display: flex; gap: 32px; flex-wrap: wrap; }
.seamcol { flex: 1 1 240px; }
.seamcol h4 { margin: 0 0 2px; font-size: 14px; }
.seamn { margin: 0 0 10px; font-size: 12px; color: var(--muted, #6b6560); }
.seamrow { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 13px; }
.cbnote { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b6560); }
/* Carded container for profile-level caveat notes (single-repo wins, panel
   notes, seam-contest notes). Same card family as .keyl, neutral accent. */
.pnotes { margin: 0 24px 16px; padding: 12px 18px 14px; background: #fff; border: 1px solid #E9E2DB; border-left: 3px solid #A8A29B; }
.pnotes .cbnote:first-child { margin-top: 0; }
.srcnote { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b6560); }
.pbm { color: var(--brick, #C8410D); font-style: normal; margin-left: 5px; }
.dfview { margin: 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.dfview span { display: block; padding: 0 8px; }
.dfview .df-file { background: var(--bg); color: var(--ink); font-weight: 600; margin-top: 6px; }
.dfview .df-hunk { color: var(--ink-4); background: var(--bg); }
.dfview .df-add { background: rgba(22, 101, 52, 0.07); color: #14532D; }
.dfview .df-del { background: rgba(153, 27, 27, 0.06); color: #7F1D1D; }
.dfview .df-ctx { color: var(--ink-3); }
.prow:focus-visible, .tcard:focus-visible, .ccard:focus-visible, .fopt:focus-visible, .schip:focus-visible,
.tb-filters:focus-visible, .tb-runs:focus-visible, .fsbtn:focus-visible, .pmore:focus-visible, .seewin:focus-visible,
.rlr:focus-visible, .dt-back:focus-visible, .rp-back:focus-visible { outline: 2px solid var(--brick); outline-offset: 1px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .mi-sbx .dot, .app-bar .hint i, .app-bar .live i { animation: none; } }
/* ===== Homepage embed mode: keep the full app, remove duplicate page chrome ===== */
html.is-embed,
html.is-embed body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
html.is-embed .nav,
html.is-embed .lhero,
html.is-embed .devcta,
html.is-embed .method,
html.is-embed .footer,
html.is-embed .announce-bar,
html.is-embed .cookie-toast {
  display: none !important;
}
html.is-embed body.has-announce { padding-top: 0; }
html.is-embed .appwrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}
html.is-embed .appwrap > .lines { display: none; }
html.is-embed .desk {
  width: 100%;
  height: 100vh;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
html.is-embed .desk::before { display: none; }
html.is-embed .app-rail {
  width: 100%;
  height: 100%;
}
html.is-embed .app {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Embed fullscreen matches the leaderboards page: the same almost-full-screen
   app with its border and radius back, standing on the same dark desk. The
   parent page makes the iframe cover the viewport; everything visual happens
   in here. The backdrop bakes the desk color, the arch pattern and the scrim
   into one layer, since the embed page has no .desk behind the app. */
html.is-embed .app.fs {
  /* height must re-win over the embed's own .app { height: 100% } */
  height: auto;
  min-height: 0;
  border: 1px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
}
html.is-embed .fs-back {
  background:
    linear-gradient(rgba(9, 8, 8, 0.82), rgba(9, 8, 8, 0.82)),
    url(/assets/patterns/pattern-arch.png) center / cover no-repeat,
    #2B2724;
}
/* ============================================================
   PHONES
   Every rule above measures the browser window, but the app used to sit in a
   300px box inside a 390px window, so each small-screen rule fired against the
   wrong width and the app content was simply cut off. Here the app first takes
   the whole viewport, then each part that still assumes a desktop column gets
   its own phone layout. Nothing below changes the desktop.
   ============================================================ */

/* ----- the frame: in the page a preview, fullscreen a screen -----
   A board with its own scroll inside a scrolling page traps the finger: to
   reach the page again you have to scroll the whole board first. So on a phone
   the board in the page is a still preview with no scroll of its own, and the
   offer on top of it is the only way in. Fullscreen is where it is a real app,
   with the page locked behind it. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  html:not(.is-embed) .appwrap > .lines { display: none; }
  html:not(.is-embed) .desk { padding: 0; min-height: 0; border-left: 0; border-right: 0; align-items: stretch; }
  html:not(.is-embed) .desk::before { display: none; }
  html:not(.is-embed) .app-rail { width: 100%; }
  html:not(.is-embed) .app { height: 76vh; height: min(76dvh, 620px); min-height: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  /* no scroll of its own: a swipe over the preview scrolls the page */
  .app:not(.fs) .main { overflow: hidden; }
  /* fullscreen: the whole screen, and the only place the board answers a tap */
  .app.fs { inset: 0; border: 0; border-radius: 0; }
  html:not(.is-embed) .app.fs { height: auto; }
  .app:not(.fs) #fsBtn { display: none; }
  /* the offer keeps its desktop look. Only the second answer goes, because a
     preview that answers nothing cannot be kept here. It lives in this block,
     not in the layout tier: the layout tier stops at 760px and a landscape
     phone would have kept a button that leaves a dead preview. */
  .fs-suggest { padding: 24px; text-align: center; }
  [data-fsg-keep] { display: none; }
}

@media (max-width: 760px) {
  /* ----- the page around the app ----- */
  .rail { padding: 0 18px; }
  .lhero { padding: 104px 0 40px; }
  .lhero h1 { font-size: 28px; }
  .lhero .lede { font-size: 13.5px; }
  .param-list li { font-size: 12.5px; }
  .devcta { padding: 28px 0; }
  .devcta-card { padding: 18px 18px 20px; box-shadow: 4px 4px 0 var(--ink); }
  .devcta-card h2 { font-size: 18px; }
  .method { padding: 44px 0 52px; }
  .method h2 { font-size: 21px; }
  .mgrid { margin-top: 24px; gap: 18px; }

  /* ----- the app bar ----- */
  .app-bar { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px; padding: 6px 10px; min-height: 50px; }
  .app-bar .guide-link { display: none; }
  /* a shared board is the reason most phones open this page, so Share stays,
     as an icon */
  .app-bar [data-share] { display: inline-flex; font-size: 0; gap: 0; padding-inline: 9px; }
  .app-bar [data-share] svg { width: 15px; height: 15px; }
  /* in the embed the board still sits in a window, so it keeps its fullscreen
     button; the lockup goes back to the mark to leave the search its width */
  .app.fs .app-ttl .brand { width: 19px; }
  #fsBtn { padding-inline: 10px; }
  .tb-discover { gap: 6px; }
  .tb-search, .tb-filters { min-height: 36px; }

  /* the sector strip keeps its side scroll; the fade says there is more */
  .topcats { padding: 0 10px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  .tcard { padding: 11px 9px 10px; }
  .tcard::after { left: 9px; right: 9px; }

  /* ----- board head and page gutters ----- */
  .crumbs { padding: 10px 14px 0; }
  .mtoolbar { padding: 10px 14px 0; gap: 8px 10px; }
  .cat-head { padding: 10px 14px 6px; gap: 8px 10px; }
  .cat-head h2 { font-size: 18px; }
  .cat-head .tb-runs, .cat-head .open-d, .hstats { margin-left: 0; }
  .hstats { gap: 18px; }
  .lede2 { padding: 0 14px 12px; font-size: 12.5px; }
  .kpis, .kstrip, .minis, .insgrid { padding-inline: 14px; }
  .band { padding: 14px 14px 18px; }
  .pgrid { padding: 2px 14px 22px; gap: 10px; }
  .panel { padding: 13px 13px 15px; }
  .minis { grid-template-columns: 1fr; }
  .insgrid { grid-template-columns: 1fr; }
  .kpi { min-width: 44%; }
  /* a long panel meta reads under its title instead of fighting it for the
     row; the sector cards keep their short run count beside the title */
  .panel:not(.ccard) > header { flex-wrap: wrap; }
  .panel:not(.ccard) .pmeta { margin-left: 0; flex-basis: 100%; text-align: left; }
  /* room under the last row for the floating call to action */
  .main { padding-bottom: 52px; }

  /* ----- the leaderboard rows -----
     The name used to vanish and the meta line used to paint over the
     percentage: the invisible hover label ("open the profile") is nowrap and
     still takes about 110px of the row, which pushed the name box to nothing.
     On a phone the label goes, the name wraps and the meta line sits under it. */
  .prow:not(.flat) { align-items: flex-start; gap: 9px; padding: 9px 10px; }
  .prow:not(.flat) .pl { align-items: flex-start; gap: 9px; }
  .prow:not(.flat) .rk { margin-top: 3px; }
  .prow:not(.flat) .ptx > b { white-space: normal; overflow: visible; text-overflow: clip; }
  .prow:not(.flat) .ptx > small { line-height: 1.5; margin-top: 1px; }
  .prow:not(.flat) .pr { align-self: center; }
  .prow:not(.flat) .goview { display: none; }
  .prow.big { padding: 11px 10px; }
  .prow.flat { grid-template-columns: 1fr; gap: 4px; }
  .prow.flat .pr { justify-self: start; }

  /* ----- key learnings and the model digest ----- */
  .keyl { margin: 0 14px 14px; padding: 13px 14px 11px; }
  .keyl.dg { margin: 10px 14px 18px; padding: 16px 15px 15px; box-shadow: 3px 3px 0 var(--ink); }
  .dg-lead h3 { font-size: 17px; }
  .dg-head { align-items: flex-start; }
  .dg-key { padding: 13px 13px 12px; }
  .dg-keys { margin-top: 14px; }
  .keyl li, .dg-notes li { font-size: 12px; }

  /* ----- charts and dense panels ----- */
  .ratechip, .chiprack.agents .ratechip, .chiprack.repos .ratechip { grid-template-columns: minmax(0, 1fr) 74px; grid-template-areas: "label value" "bar bar"; gap: 4px 10px; }
  .ratechip .rc-l { grid-area: label; }
  .ratechip i { grid-area: bar; }
  .ratechip em { grid-area: value; }
  .hchart { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "label value" "bar bar"; gap: 4px 8px; }
  .hchart .hl { grid-area: label; }
  .hchart .tr { grid-area: bar; }
  .hchart b { grid-area: value; }
  .dnt { width: min(230px, 100%); height: auto; aspect-ratio: 1; }
  /* the repository matrix stays a table: it scrolls inside its own panel */
  .mx2wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mx2 { min-width: 520px; }
  .mx2 th.rnh, .mx2 td.rn { width: 44%; }
  .mx2 th.tcol { width: calc(56% / var(--mxcols, 4)); }
  .mx2 th .thp .vname { max-height: 92px; }

  /* ----- the run list: two lines for each run ----- */
  .rlh { display: none; }
  .rlr, .rlr.rl-nodate, .rlr.rl-nopick, .rlr.rl-nodate.rl-nopick { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "agent repo watch" "agent pick pick"; column-gap: 8px; row-gap: 3px; padding: 10px 6px; }
  .rlr > .dt, .rlr > .mdl, .rlr > .ev2, .rlr > .chip2:not(.mdl) { display: none; }
  .rlr > .hlogo { grid-area: agent; align-self: start; margin-top: 2px; }
  .rlr > .rp { grid-area: repo; }
  .rlr > .pk { grid-area: pick; font-size: 11px; }
  .rlr > .rwatch { grid-area: watch; align-self: start; }

  /* ----- the run panel: a full screen sheet ----- */
  .run-panel { width: 100%; border-left: 0; }
  .rp-head { padding: 10px 14px; }
  .rp-body { padding: 14px 14px 26px; }
  .rp-row1 { flex-wrap: wrap; }
  .rp-tools { margin-left: auto; }

  /* ----- the filters: a bottom sheet ----- */
  .fpanel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: min(76%, 540px); transform: none; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -10px 26px rgba(9, 8, 8, 0.3); }
  .app.fclosed .fpanel { transform: translateY(10px); opacity: 0; }
  .side-f { padding: 12px 14px 18px; }
  .fp-tab { left: 10px; }

  /* ----- search ----- */
  .cmdk { padding: 10px; place-items: stretch; }
  .cmdk-card { width: 100%; max-height: 100%; }

  /* ----- the closing call to action ----- */
  .ctaband-in h3 { font-size: 17px; }
  .ctarow-btns .cta { padding: 10px 16px; font-size: 12.5px; }

  /* ----- the floating call to action: one bar at the bottom ----- */
  .contact-fab { left: 0; right: 0; bottom: 0; width: 100%; box-sizing: border-box; transform: none; justify-content: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -3px 0 rgba(9, 8, 8, 0.08); }
  .contact-fab.folded { transform: translateY(calc(100% + 10px)); }
  .contact-fab .fab-k { margin-right: 0; }
  .contact-fab :is(a, button) { padding: 8px 15px; white-space: nowrap; }
}

/* very small phones: the meta line and the rank need the last of the room */
@media (max-width: 360px) {
  .prow:not(.flat) { gap: 7px; padding-inline: 8px; }
  .prow:not(.flat) .pl { gap: 7px; }
  .prow.big .pct { font-size: 20px; }
  .contact-fab .fab-k { display: none; }
  .cat-head h2 { font-size: 17px; }
}

/* ===== Standalone mode (leaderboards.armature.tech): the app is the page =====
   Same app, same design. What goes is the frame around it: the site chrome,
   the desk the window stands on, and the fullscreen button, since the app
   already fills the screen. This is not the embed: there is no parent page
   here, so the app keeps its own history, its own share links and its own
   Cal.com modal. */
html.is-standalone,
html.is-standalone body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #FEFCFB;
}
html.is-standalone .nav,
html.is-standalone .lhero,
html.is-standalone .devcta,
html.is-standalone .method,
html.is-standalone .footer,
html.is-standalone .announce-bar {
  display: none !important;
}
html.is-standalone body.has-announce { padding-top: 0; }
html.is-standalone .appwrap {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
}
html.is-standalone .appwrap > .lines { display: none; }
html.is-standalone .desk {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
html.is-standalone .desk::before { display: none; }
html.is-standalone .app-rail {
  width: 100%;
  height: 100%;
}
html.is-standalone .app {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* No site nav above it, so the bar carries the whole lockup, as it does in
   fullscreen, and the lockup is the way back to the site. */
html.is-standalone .app-ttl .brand { height: 17px; width: auto; }
html.is-standalone .app-ttl .brand-img { height: 17px; }
html.is-standalone .app-home { display: block; line-height: 0; }
html.is-standalone #fsBtn { display: none; }