/* Chapter 11, How the auction spends your money. Site tokens only, over /style.css and /playbook/kit/kit.css. Panel
   fills sit on the SVG elements themselves (fill="#1c1a17"); this file sets text and marks only. */

/* the stills */
.auction .pb-still text,.learn .pb-still text{font-family:var(--font)}
.aa-search{stroke:var(--faint);stroke-width:1.5}
.aa-query{fill:var(--ink);font-size:22px}
.aa-key{fill:var(--muted);font-size:18px}
.aa-name{fill:var(--ink);font-size:24px}
.aa-meta{fill:var(--muted);font-size:18px}
.aa-val{fill:var(--ink);font-size:24px}
.aa-bar{stroke:var(--faint);stroke-width:2.4}
.aa-tick{stroke:var(--halo-lamp);stroke-width:2}
.aa-dots circle{fill:var(--faint)}
.aa-buyers circle{fill:var(--spark);stroke:var(--halo-lamp);stroke-width:1}
.aa-wide{fill:none;stroke:var(--faint);stroke-width:1}
.aa-narrow{fill:none;stroke:var(--trail);stroke-width:1.4}

/* the live auction: lanes of light that re-sort; the layer takes its own height */
.js .auction .pb-stage > .pb-still{display:none}
.js .auction .pb-stage > .pb-layer{display:block}
.auction .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
/* the column's left edge inside the wide stage, and the room left to the stage's right edge */
.auction,.learn{--aa-in:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift));--aa-room:calc(var(--pb-stage-w) - var(--aa-in))}
.aa-layer{max-width:min(62rem,var(--aa-room));margin-left:var(--aa-in)}
.aa-live-query{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;border:1px solid var(--faint);background:var(--ground-raised);padding:.6rem 1rem;max-width:34rem;font-size:1.0625rem}
.aa-lanes{margin-top:1.25rem}
.aa-lane{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) minmax(0,8.5rem);gap:.4rem 1.5rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--rule)}
.aa-lane:last-child{border-bottom:1px solid var(--rule)}
.aa-who{display:flex;flex-direction:column;min-width:0}
.aa-n{font-size:1.125rem;line-height:1.3;color:var(--ink)}
.aa-m{font-size:.875rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.aa-track{position:relative;height:1.75rem}
.aa-bar-live{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:calc(var(--w,0) * 100%);background:var(--faint)}
.aa-lane.is-you .aa-bar-live{background:var(--trail)}
.aa-lane.is-you .aa-bar-live::after{content:"";position:absolute;right:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,230,.95) 0,rgba(217,178,122,.4) 35%,rgba(217,178,122,0) 70%)}
.aa-beat{position:absolute;top:.1rem;bottom:.1rem;left:calc(var(--x,0) * 100%);width:2px;background:var(--halo-lamp)}
.aa-beat[hidden]{display:none}
.aa-out{display:flex;flex-direction:column;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.aa-r{font-size:1.25rem;color:var(--ink)}
.aa-p{font-size:.875rem;color:var(--muted)}
.aa-lane.is-out .aa-n,.aa-lane.is-out .aa-r{color:var(--muted)}
@media (max-width:40rem){
  .aa-lane{grid-template-columns:minmax(0,1fr) auto}
  .aa-track{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:no-preference){
  .pb-live .aa-bar-live{transition:width .6s var(--ease-draw)}
  .pb-live .aa-beat{transition:left .6s var(--ease-draw)}
}
[data-pb-tier="still"] .aa-bar-live,[data-pb-tier="still"] .aa-beat{transition:none!important}

/* the advertisers' dials */
.aa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.5rem 2.25rem;margin-top:1.75rem;max-width:min(62rem,var(--aa-room));margin-left:var(--aa-in)}
html:not(.js) .aa-cards,html:not(.js) .aa-actions{display:none}
.aa-card{border-top:1px solid var(--faint);padding-top:.75rem;min-width:0}
.aa-card-name{font-size:1.125rem;color:var(--ink)}
.aa-card-qs{font-size:.875rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.aa-set{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 .75rem;margin-top:.55rem}
.aa-set span{font-size:.9375rem;color:var(--ink)}
.aa-set output{font-size:.875rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.aa-set .pb-dial{grid-column:1 / -1;width:100%}
.aa-set .pb-dial-line{width:100%}
.aa-table-wrap{overflow-x:auto;max-width:min(44rem,var(--aa-room));margin-top:1.75rem;margin-left:var(--aa-in)}
.aa-table{border-collapse:collapse;font-size:var(--t-meta);line-height:1.4;width:100%}
.aa-table caption{text-align:left;color:var(--muted);caption-side:top;padding-bottom:.5rem}
.aa-table th,.aa-table td{text-align:left;font-weight:400;padding:.4rem .9rem .4rem 0;border-top:1px solid var(--rule);font-variant-numeric:lining-nums tabular-nums}
.aa-table thead th{color:var(--muted)}
.aa-table tr.is-you th,.aa-table tr.is-you td{color:var(--ink)}
.aa-formula{font-variant-numeric:lining-nums tabular-nums;padding-left:1.25rem;border-left:1px solid var(--rule)}

/* the learning phase: a canvas fan with its read-out */
.js .learn .pb-stage > .pb-still{display:none}
.js .learn .pb-stage > .pb-layer{display:block}
.learn .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.learn-layer canvas{display:block;position:relative;width:100%;aspect-ratio:1200 / 560;height:auto}
@media (max-width:40rem){.learn-layer canvas{aspect-ratio:4 / 3}}
.learn-read{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin-top:.75rem;margin-left:var(--aa-in)}
.learn-read p{display:flex;flex-direction:column;margin:0}
.learn-num{font-size:1.25rem;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.learn-num.is-done{color:var(--halo-lamp)}
.learn-assumptions > div{max-width:24rem}
.learn-assumptions output{color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.learn-assumptions .pb-dial{grid-column:1 / -1;width:min(100%,22rem)}
html:not(.js) .learn-controls,html:not(.js) .learn-assumptions{display:none}

/* what I'd do now */
.aa-open li{padding:.6rem 0;border-top:1px solid var(--rule);line-height:1.5}