/* RAM calculator page (/calculator/): cobalt glass slab with the question, white card with the tool */
.calc{padding-block:8px 40px;display:flex;flex-direction:column;gap:24px}
.calc-slab{position:relative;overflow:hidden;isolation:isolate;padding:48px 48px 40px;border-radius:var(--r-slab);color:var(--on-cobalt);
  background:radial-gradient(120% 90% at 85% 15%,var(--cobalt-2) 0,var(--cobalt) 55%,#131f66 100%)}
.calc-slab .facets{position:absolute;z-index:-1;inset-inline-end:-160px;top:-200px;width:560px;height:560px;color:#fff;opacity:.12;pointer-events:none}
.calc-slab h1{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;max-width:20ch}
.calc-slab p{margin:14px 0 0;color:var(--on-cobalt-dim);max-width:52ch;font-size:1.05rem}
.calc-tabs{display:inline-flex;gap:4px;margin-top:28px;padding:4px;border-radius:999px;background:rgba(8,14,52,.45)}
.calc-tabs button{font:600 1rem/1.2 var(--f-body);border:0;background:none;color:var(--on-cobalt-dim);padding:10px 20px;border-radius:999px;cursor:pointer}
.calc-tabs button[aria-selected=true]{background:var(--on-cobalt);color:var(--cobalt)}
.calc-tabs button:focus-visible{outline-color:#fff}
.calc-tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:24px}
.calc-tool .label{margin:0}
.calc-tool .label label{font:inherit;color:inherit}
/* memory slider: snaps to the usual Mac sizes; thumb 26px, ticks placed on the same scale */
.calc-slider{--t:26px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.calc-ramval{font:600 1.6rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--accent)}
.calc-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--t);margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.calc-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--line) var(--p,50%))}
.calc-slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--line)}
.calc-slider input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--accent)}
.calc-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--t);height:var(--t);margin-top:calc((8px - var(--t)) / 2);border-radius:50%;background:var(--surface);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(15,26,58,.25)}
.calc-slider input[type=range]::-moz-range-thumb{width:calc(var(--t) - 6px);height:calc(var(--t) - 6px);border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.calc-slider input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:999px}
[dir=rtl] .calc-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to left,var(--accent) var(--p,50%),var(--line) var(--p,50%))}
/* labels: zero-width flex items spread from the first to the last thumb centre, each label centred on its point
   (no absolute positioning, so Safari places the last label at the end like other browsers) */
.calc-ticks{display:flex;justify-content:space-between;margin-inline:calc(var(--t) / 2);height:1.4em;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.calc-ticks span{position:relative;flex:0 0 0;width:0;display:flex;justify-content:center;white-space:nowrap}
.calc-ticks span.on{color:var(--ink);font-weight:600}
/* phones: all ten values stay visible, every second one on a lower line */
@media (max-width:620px){.calc-ticks{height:2.8em;font-size:.8rem}.calc-ticks span:nth-child(even){top:1.4em}}
.calc-answer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.calc-answer span:not(.calc-big){color:var(--muted)}
.calc-big{font:600 clamp(2.2rem,5vw,3.2rem)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.calc-models li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-models .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.calc-models b{font-weight:600;overflow-wrap:anywhere}
.calc-models .gb{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-models small{color:var(--muted);font-size:.84rem}
.calc-meter{height:6px;border-radius:3px;background:var(--bg);overflow:hidden}
.calc-meter i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.calc-more{align-self:flex-start;font:600 1rem/1.2 var(--f-body);color:var(--ink);border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:11px 22px;cursor:pointer}
.calc-more:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.calc-tool select{max-width:520px}
.calc-result{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
.calc-facts{margin:10px 0 0;color:var(--muted);font-size:.95rem}
.calc-verdicts{display:flex;flex-direction:column;gap:8px}
.calc-vrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
.calc-vrow b{font-weight:600}
.calc-vrow small{color:var(--muted);display:block;font-size:.82rem}
.calc .pill.no{color:var(--soon);background:var(--soon-bg)}
.calc-note{color:var(--muted);font-size:.92rem;margin:0;max-width:62ch}
.calc-cta{border-top:1px solid var(--line);padding-top:22px}
.calc-method{color:var(--muted);font-size:.86rem;display:flex;flex-direction:column;gap:8px}
.calc-method p{margin:0;max-width:90ch}
.calc-method a{color:var(--muted)}
@media (max-width:760px){
  .calc-slab{padding:32px 22px 26px}
  .calc-tool{padding:22px 18px}
  .calc-result{grid-template-columns:1fr;gap:20px}
  .calc-tabs{display:flex}
  .calc-tabs button{flex:1;padding:10px 12px}
}
.head-link[aria-current=page]{opacity:1;font-weight:600}
.calc-guide{margin-top:40px;max-width:78ch}
.calc-guide h2{margin:0 0 12px}
.calc-guide h3{margin:24px 0 8px;font-size:1.05rem}
.calc-guide p{margin:0 0 12px;line-height:1.6}
.calc-guide .bench-wrap{margin:8px 0 4px}