/* ========================================================================== OhmCalc — shared stylesheet Design tokens inherited from the resistor calculator widget. ========================================================================== */ /* -------------------------------------------------------------------------- Theming Dark is the default. Light mode is applied by , set before first paint by the inline script in each page's . Every colour below is a token — no rule in this file hard-codes a colour that differs between themes. -------------------------------------------------------------------------- */ :root{ --panel:#161e29; --panel-2:#1e2937; --panel-3:#26333f; --edge:#33414f; --edge-soft:#22303d; --ink:#e9eef4; --muted:#8aa0b4; --muted-2:#5f7488; --amber:#ffbf47; --amber-dim:#7a5c22; --teal:#4fd1c5; --teal-dim:#1f5a54; --bad:#ff6b6b; --good:#2fa84f; --bg:#0f151d; /* component colours are never realistic-colour items — those stay fixed */ --body-tan-1:#e3d3ac; --body-tan-2:#cbb488; --lead:#c3c8cf; --on-accent:#08222a; --bg-glow:#223142; --shell-glow:#223142; --panel-grad-end:#141c26; --header-bg:rgba(15,21,29,.86); --footer-bg:rgba(22,30,41,.55); --prose-ink:#c9d6e2; --meter-1:#12303a; --meter-2:#0c1a22; --meter-edge:#1c3b45; --meter-accent:#e0a93a; --meter-glow:rgba(255,191,71,.35); --badge-ok-bg:#0f2b29; --badge-warn-bg:#2a2210; --badge-bad-bg:#2a1414; --badge-bad-edge:#6b2626; --featured-1:#1b2b33; --featured-2:#1a2430; --sw-edge:rgba(255,255,255,.14); --select-arrow:%238aa0b4; --shadow:0 18px 40px -18px rgba(0,0,0,.7); --radius:14px; --radius-lg:22px; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif; --wrap:1180px; } :root[data-theme="light"]{ --panel:#ffffff; --panel-2:#ffffff; --panel-3:#eef2f7; --edge:#d5dde6; --edge-soft:#e6ebf1; --ink:#131c26; --muted:#52657a; --muted-2:#78899b; --amber:#a3670a; --amber-dim:#e2c48e; --teal:#0d7d73; --teal-dim:#9ed6cf; --bad:#c0392b; --good:#1f7a3d; --bg:#f2f5f9; --lead:#6d7885; --on-accent:#ffffff; --bg-glow:#e8eef7; --shell-glow:#eaf0f8; --panel-grad-end:#f7f9fc; --header-bg:rgba(255,255,255,.88); --footer-bg:rgba(255,255,255,.66); --prose-ink:#2c3b4b; --meter-1:#f2f9f8; --meter-2:#e9f3f2; --meter-edge:#cde2df; --meter-accent:#a3670a; --meter-glow:rgba(0,0,0,0); --badge-ok-bg:#e3f5f2; --badge-warn-bg:#fdf4e0; --badge-bad-bg:#fdecea; --badge-bad-edge:#f0c2bd; --featured-1:#f0fbf9; --featured-2:#f7fafc; --sw-edge:rgba(0,0,0,.2); --select-arrow:%2352657a; --shadow:0 10px 28px -20px rgba(15,30,50,.45); } /* colour-scheme drives native form controls, scrollbars and the caret */ :root{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important;animation:none !important} } body{ margin:0; font-family:var(--sans); color:var(--ink); background: radial-gradient(1200px 620px at 78% -12%, var(--bg-glow) 0%, transparent 62%), var(--bg); background-attachment:fixed; line-height:1.6; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,32px)} a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:var(--on-accent);padding:10px 16px;font-weight:600;z-index:200;border-radius:0 0 8px 0} .skip:focus{left:0} /* ---------- header / nav ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--edge-soft); } .site-header__inner{display:flex;align-items:center;gap:18px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .brand:hover{text-decoration:none;color:var(--ink)} .brand svg{width:26px;height:26px;flex:0 0 26px} .brand span b{color:var(--teal);font-weight:700} .nav{margin-left:auto;display:flex;align-items:center;gap:4px} .nav a{ font-size:14px;font-weight:500;color:var(--muted); padding:8px 12px;border-radius:8px;transition:background .15s,color .15s; } .nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none} .nav a[aria-current="page"]{color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--edge)} .nav-toggle{ display:none;background:var(--panel-2);border:1px solid var(--edge); color:var(--ink);border-radius:9px;padding:9px 11px;cursor:pointer;line-height:0; } .nav-toggle svg{width:20px;height:20px} /* theme switch */ .theme-toggle{ margin-left:8px;background:var(--panel-2);border:1px solid var(--edge); color:var(--muted);border-radius:9px;padding:8px 10px;cursor:pointer;line-height:0; transition:color .15s,background .15s;flex:0 0 auto; } .theme-toggle:hover{color:var(--ink);background:var(--panel-3)} .theme-toggle svg{width:18px;height:18px;display:block} .theme-toggle .icon-sun{display:none} :root[data-theme="light"] .theme-toggle .icon-sun{display:block} :root[data-theme="light"] .theme-toggle .icon-moon{display:none} @media (max-width:900px){ .theme-toggle{margin-left:auto} .nav-toggle{margin-left:6px} } @media (max-width:900px){ .nav-toggle{display:block} .nav{ position:absolute;top:64px;left:0;right:0;margin:0; flex-direction:column;align-items:stretch;gap:2px; background:var(--panel);border-bottom:1px solid var(--edge); padding:10px clamp(16px,4vw,32px) 18px; box-shadow:var(--shadow); display:none; } .nav.open{display:flex} .nav a{padding:12px 14px;font-size:15px} } /* ---------- typography ---------- */ .eyebrow{ font-family:var(--mono);font-size:12px;letter-spacing:.28em; text-transform:uppercase;color:var(--teal);margin:0 0 10px; } h1{font-size:clamp(28px,5vw,44px);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.14} h2{font-size:clamp(21px,3vw,28px);font-weight:600;letter-spacing:-.02em;margin:0 0 14px;line-height:1.25} h3{font-size:18px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em} .lede{color:var(--muted);font-size:clamp(15px,2vw,17px);max-width:64ch;margin:12px 0 0} .page-head{padding:clamp(28px,5vw,52px) 0 6px} /* ---------- prose ---------- */ .prose{max-width:72ch;color:var(--prose-ink);font-size:15.5px} .prose h2{margin-top:38px;color:var(--ink)} .prose h3{margin-top:26px;color:var(--ink)} .prose p{margin:0 0 14px} .prose a,.prose code,.prose li{overflow-wrap:anywhere} .prose ul,.prose ol{margin:0 0 16px;padding-left:22px} .prose li{margin-bottom:7px} .prose code{ font-family:var(--mono);font-size:.88em;background:var(--panel-2); border:1px solid var(--edge);border-radius:5px;padding:1px 6px;color:var(--amber); } .prose strong{color:var(--ink);font-weight:600} .prose blockquote{ margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--teal); background:var(--panel-2);border-radius:0 8px 8px 0;color:var(--muted); } .prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px} .prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--edge-soft)} .prose th{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:500} .prose td{color:var(--prose-ink)} .prose tbody tr:hover{background:var(--panel-2)} /* ---------- cards / panels ---------- */ .card{ background:var(--panel-2);border:1px solid var(--edge); border-radius:var(--radius);padding:clamp(16px,2.4vw,22px); } .card__h{ font-family:var(--mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted-2);margin:0 0 16px; } .panel{ background:linear-gradient(180deg,var(--panel-2),var(--panel-grad-end)); border:1px solid var(--edge);border-radius:var(--radius); padding:clamp(16px,3vw,28px);box-shadow:var(--shadow); } .tool-shell{ background:radial-gradient(1200px 500px at 70% -10%, var(--shell-glow) 0%, transparent 60%),var(--panel); border:1px solid var(--edge);border-radius:var(--radius-lg); padding:clamp(18px,3.4vw,34px);box-shadow:var(--shadow); } /* ---------- layout with sidebar ---------- */ .with-aside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;padding:26px 0 10px} .aside{position:sticky;top:88px;flex-direction:column;gap:20px;display:none} @media (min-width:1021px){ .aside{display:flex} } @media (max-width:1020px){ .with-aside{grid-template-columns:minmax(0,1fr);padding-top:14px} } /* ---------- forms ---------- */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:13px;color:var(--muted);font-weight:500} .field .hint{font-size:12px;color:var(--muted-2);font-family:var(--mono)} .inrow{display:flex;gap:10px} .inrow > *{min-width:0} input[type="number"],input[type="text"],input[type="email"],select,textarea{ font-family:var(--mono);font-size:15px;color:var(--ink); background:var(--panel);border:1px solid var(--edge);border-radius:9px; padding:11px 12px;width:100%; } textarea{font-family:var(--sans);resize:vertical;min-height:120px} input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent} select{cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aa0b4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px; } select.unit{max-width:118px;flex:0 0 118px} :root[data-theme="light"] select{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--edge);border-radius:10px;padding:4px;gap:4px;flex-wrap:wrap} .seg button{ font-family:inherit;font-size:14px;font-weight:600;color:var(--muted); background:transparent;border:0;padding:9px 16px;border-radius:7px;cursor:pointer; transition:background .15s,color .15s; } .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{background:var(--panel-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)} .seg--accent button[aria-pressed="true"]{background:var(--teal);color:var(--on-accent);box-shadow:none} .seg__label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);align-self:center;margin:0 2px 0 8px} .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 22px} .btn{ font-family:inherit;font-size:14px;font-weight:600;cursor:pointer; background:var(--teal);color:var(--on-accent);border:0;border-radius:9px;padding:11px 20px; transition:filter .15s;display:inline-block;text-align:center; } .btn:hover{filter:brightness(1.08);text-decoration:none;color:var(--on-accent)} .btn--ghost{background:var(--panel-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)} .btn--ghost:hover{color:var(--ink);background:var(--edge)} /* ---------- readout meter ---------- */ .meter{ background:radial-gradient(120% 140% at 50% 0%, var(--meter-1) 0%, var(--meter-2) 70%); border:1px solid var(--meter-edge);border-radius:var(--radius); padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow); } .meter__value{ font-family:var(--mono);font-weight:600;font-size:clamp(32px,6.5vw,50px); letter-spacing:.02em;color:var(--amber);text-shadow:0 0 18px var(--meter-glow);line-height:1.05; overflow-wrap:anywhere; } .meter__value small{font-size:.5em;color:var(--meter-accent);margin-left:4px} .meter__tol{font-family:var(--mono);font-size:16px;color:var(--meter-accent);margin:2px 0 0} .meter__range{ display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--meter-edge); font-family:var(--mono);font-size:13px;color:var(--muted); } .meter__range b{color:var(--ink);font-weight:600;display:block;font-size:14px} .meter__range span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .badge{ font-family:var(--mono);font-size:11px;letter-spacing:.06em; padding:6px 10px;border-radius:999px;border:1px solid var(--edge); background:var(--panel-3);color:var(--muted); } .badge--ok{color:var(--teal);border-color:var(--teal-dim);background:var(--badge-ok-bg)} .badge--warn{color:var(--amber);border-color:var(--amber-dim);background:var(--badge-warn-bg)} .badge--bad{color:var(--bad);border-color:var(--badge-bad-edge);background:var(--badge-bad-bg)} .note{margin:14px 0 0;font-size:13px;color:var(--muted)} .note--warn{color:var(--amber)} .note--bad{color:var(--bad)} .note--ok{color:var(--teal)} .hidden{display:none !important} /* ---------- tool grid (home) ---------- */ .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin:0} .tool-card{ display:flex;flex-direction:column;gap:9px; background:var(--panel-2);border:1px solid var(--edge);border-radius:var(--radius); padding:22px;color:var(--ink);transition:transform .15s,border-color .15s,background .15s; } .tool-card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--teal-dim);background:var(--panel-3)} .tool-card__icon{width:34px;height:34px;color:var(--teal)} .tool-card__title{font-size:17px;font-weight:600;letter-spacing:-.01em} .tool-card__desc{font-size:14px;color:var(--muted);line-height:1.5} .tool-card__tag{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted-2);margin-top:auto;padding-top:6px; } .tool-card--featured{border-color:var(--teal-dim);background:linear-gradient(180deg,var(--featured-1),var(--featured-2))} /* ---------- related links ---------- */ .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px} .related a{ display:block;padding:14px 16px;border:1px solid var(--edge);border-radius:10px; background:var(--panel-2);color:var(--ink);font-size:14px;font-weight:500;transition:background .15s; } .related a:hover{background:var(--panel-3);text-decoration:none} .related a em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px} /* ---------- reference tables ---------- */ .table-scroll{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel-2)} table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:520px} table.data th,table.data td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--edge-soft)} table.data thead th{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);font-weight:500;background:var(--panel-3);position:sticky;top:0; } table.data tbody tr:last-child td{border-bottom:0} table.data tbody tr:hover{background:var(--panel-3)} table.data td.num{font-family:var(--mono);color:var(--ink)} .chip{display:inline-flex;align-items:center;gap:8px} .chip i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.18);display:inline-block;flex:0 0 16px} /* ---------- ads ---------- */ .ad-slot{margin:26px 0;text-align:center;min-height:0;overflow:hidden} .ad-slot--side{margin:0} .ad-slot__label{ font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--muted-2);margin:0 0 6px; } .ad-placeholder{ border:1px dashed var(--edge);border-radius:10px;background:var(--panel-2); color:var(--muted-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em; display:flex;align-items:center;justify-content:center;text-align:center;padding:14px; } .ad-placeholder--leaderboard{min-height:96px} .ad-placeholder--rect{min-height:260px} .ad-placeholder--side{min-height:600px} .adsbygoogle{display:block} /* ---------- footer ---------- */ .site-footer{ margin-top:56px;border-top:1px solid var(--edge-soft); background:var(--footer-bg);padding:40px 0 28px; } .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px} @media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr} } .footer-grid h4{ font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--muted-2);margin:0 0 12px;font-weight:500; } .footer-grid ul{list-style:none;margin:0;padding:0} .footer-grid li{margin-bottom:8px} .footer-grid a{font-size:14px;color:var(--muted)} .footer-grid a:hover{color:var(--ink)} .footer-blurb{font-size:14px;color:var(--muted);max-width:34ch;margin:12px 0 0} .footer-bottom{ margin-top:32px;padding-top:20px;border-top:1px solid var(--edge-soft); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; font-family:var(--mono);font-size:11.5px;color:var(--muted-2); } /* ---------- misc ---------- */ .breadcrumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding-top:22px} .breadcrumb a{color:var(--muted-2)} .breadcrumb a:hover{color:var(--teal)} .section{padding:34px 0} .section--tight{padding:20px 0} .disclaimer{ margin-top:30px;padding:14px 16px;border:1px solid var(--edge);border-radius:10px; background:var(--panel-2);font-size:13px;color:var(--muted); } .copy-btn{ font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; background:var(--panel-3);border:1px solid var(--edge);color:var(--muted); border-radius:7px;padding:7px 12px;cursor:pointer;transition:color .15s,background .15s; } .copy-btn:hover{color:var(--ink);background:var(--edge)} /* ========================================================================== Resistor colour code widget ========================================================================== */ .stage{ background:linear-gradient(180deg,var(--panel-2),var(--panel-grad-end)); border:1px solid var(--edge);border-radius:var(--radius); padding:clamp(10px,3vw,30px);box-shadow:var(--shadow); } .stage svg{width:100%;height:auto;max-width:560px;display:block;margin:0 auto} .band{transition:fill .18s ease} /* shared styling for the live SVG diagram on every calculator */ .stage svg .wire{stroke:var(--lead);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round} .stage svg .comp{fill:none;stroke:var(--lead);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .stage svg .comp-fill{fill:var(--panel);stroke:var(--lead);stroke-width:3} .stage svg .lbl{font-family:var(--mono);font-size:12px;fill:var(--muted-2);letter-spacing:.1em;text-transform:uppercase} .stage svg .val{font-family:var(--mono);font-size:15px;fill:var(--amber);font-weight:600} .stage svg .val--teal{fill:var(--teal)} .stage svg .val--muted{fill:var(--muted);font-size:13px;font-weight:400} .stage svg .val--bad{fill:var(--bad)} .stage svg .node{fill:var(--teal);stroke:none} .stage svg .dim{stroke:var(--teal);stroke-width:1.4;fill:none} .stage svg .dim-txt{font-family:var(--mono);font-size:12px;fill:var(--teal)} .stage svg .flow{stroke:var(--teal);stroke-width:3;fill:none;stroke-linecap:round} .stage svg .ghost{stroke:var(--edge);stroke-width:2;fill:none;stroke-dasharray:5 5} .stage svg text{dominant-baseline:middle} .stage svg .anim-flow{stroke-dasharray:9 13;animation:flowdash 1.1s linear infinite} /* LED symbols, drawn by script */ .stage svg .led-sym{stroke:var(--muted-2);stroke-width:3;stroke-linejoin:round;fill:rgba(127,127,127,.16)} .stage svg .led-sym--lit{stroke:var(--teal);fill:rgba(79,209,197,.22)} .stage svg .led-bar{stroke:var(--muted-2);stroke-width:3;stroke-linecap:round;fill:none} .stage svg .led-bar--lit{stroke:var(--teal)} .stage svg .led-ray{stroke:var(--muted-2);stroke-width:2;stroke-linecap:round;fill:none;opacity:.35} .stage svg .led-ray--lit{stroke:var(--teal);opacity:1} /* E-series number line, drawn by script */ .stage svg .es-tick{stroke:var(--edge);stroke-width:1.5} .stage svg .es-tick--e24{stroke:var(--muted-2)} .stage svg .es-tick--hit96{stroke:var(--teal);stroke-width:3} .stage svg .es-tick--hit24{stroke:var(--amber);stroke-width:3} .stage svg .es-lbl{font-family:var(--mono);font-size:10px;fill:var(--muted-2)} .stage svg .es-lbl--hit{font-size:13px;fill:var(--amber)} .stage svg .es-marker-arrow{fill:var(--amber);stroke:none} @keyframes flowdash{to{stroke-dashoffset:-22}} @media (prefers-reduced-motion:reduce){ .stage svg .anim-flow{animation:none} } .calc-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:20px;margin-top:20px} @media (max-width:820px){ .calc-grid{grid-template-columns:1fr} } .bandrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--edge-soft)} .bandrow:first-of-type{border-top:0} .bandrow__meta{width:108px;flex:0 0 108px} .bandrow__name{font-size:13px;font-weight:600;line-height:1.3} .bandrow__val{font-family:var(--mono);font-size:12px;color:var(--muted)} .swatches{display:flex;flex-wrap:wrap;gap:6px} .sw{ width:26px;height:26px;border-radius:6px;cursor:pointer;position:relative; border:1px solid var(--sw-edge);padding:0;transition:transform .12s; } .sw:hover{transform:translateY(-2px)} .sw[aria-pressed="true"]{outline:2px solid var(--teal);outline-offset:2px} .sw:focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* generic two-column calculator layout used by the other tools */ .io-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} @media (max-width:820px){ .io-grid{grid-template-columns:1fr} } .result-rows{display:flex;flex-direction:column;gap:2px;margin-top:6px} .result-row{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:10px 0;border-top:1px solid var(--edge-soft);font-size:14px; } .result-row:first-child{border-top:0} .result-row span{color:var(--muted)} .result-row b{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:15px;text-align:right} .result-row b.accent{color:var(--teal)} /* echo of how a typed number was interpreted */ .hint--echo{color:var(--teal);font-family:var(--mono);font-size:12px;min-height:1em} .hint--echo.hint--bad{color:var(--bad)} .stage svg .lbl--bad{fill:var(--bad)} /* ========================================================================== Mobile Three things matter on a phone and none of them are handled by the desktop rules: iOS zooms the whole page when you focus an input smaller than 16px, touch targets need to be finger-sized, and the diagrams are drawn in a 560-unit viewBox that scales down to roughly half size on a 390px screen — so their labels need to be proportionally larger to stay readable. ========================================================================== */ @media (max-width:900px){ /* --- claw back horizontal space for the diagrams --- */ .wrap{padding:0 14px} .tool-shell{padding:14px 12px} .stage{padding:12px 8px} .card{padding:16px 14px} .meter{padding:18px 16px} /* --- iOS zooms the page on focus if a field is under 16px --- */ input[type="number"],input[type="text"],input[type="email"],select,textarea{ font-size:16px; padding:12px 12px; } select.unit{max-width:104px;flex:0 0 104px} /* --- finger-sized targets --- */ .theme-toggle,.nav-toggle{padding:11px 12px} .theme-toggle svg,.nav-toggle svg{width:20px;height:20px} .seg button{padding:12px 16px;min-height:44px} .seg{width:100%;justify-content:flex-start} .btn,.copy-btn{min-height:44px;padding:12px 20px} .sw{width:34px;height:34px;border-radius:8px} .swatches{gap:8px} .bandrow{padding:13px 0;flex-wrap:wrap} .bandrow__meta{width:100%;flex:1 0 100%;margin-bottom:2px} /* --- diagram text: the SVG renders at ~0.55 scale, so scale the type up --- */ .stage svg .lbl{font-size:17px;letter-spacing:.06em} .stage svg .val{font-size:21px} .stage svg .val--muted{font-size:18px} .stage svg .dim-txt{font-size:17px} .stage svg .es-lbl{font-size:14px} .stage svg .es-lbl--hit{font-size:18px} /* --- readouts --- */ .meter__range{gap:14px 20px} .result-row{padding:12px 0} .result-row b{font-size:14.5px} .related{grid-template-columns:1fr} .breadcrumb{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch} .footer-bottom{gap:8px} } /* very narrow phones */ @media (max-width:380px){ .wrap{padding:0 11px} .tool-shell{padding:12px 9px} .stage{padding:10px 6px} .seg button{padding:11px 12px;font-size:13.5px} .seg__label{margin-left:4px} } /* caption under a diagram — HTML rather than SVG text so it can wrap */ .stage-caption{ margin:12px 0 0;text-align:center; font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2);line-height:1.55; } .stage-caption--bad{color:var(--bad)} @media (max-width:900px){ .stage-caption{font-size:11px;letter-spacing:.07em;margin-top:10px} } /* [hidden] must beat any display rule we set elsewhere */ [hidden]{display:none !important}