/* icons.qnaputilities.com (site decision S89): the browser of Rtorrent 16's icons, on the site's own tokens (site.css:
   --rack, --panel, --ink, --dim, --led, IBM Plex). The page chrome stays dark like every page of the site; the
   Background switch changes only the ground the icons are drawn on (the tiles and the detail's stage), with the
   panel's own colours for that ground (the per-ground values come in the page's <style>, from the catalogue). */

.ic{
  --px:24px;--tile:96px;--ic-top:67px;--ic-stick:200px;
  max-width:var(--page);margin:0 auto;padding:0 var(--gut) 0;
}
.ic[data-px="16"]{--px:16px;--tile:84px}
.ic[data-px="20"]{--px:20px;--tile:88px}
.ic[data-px="32"]{--px:32px;--tile:104px}
.ic[data-px="48"]{--px:48px;--tile:124px}
.ic[data-ground="dark"]{--g-tile:#151c21;--g-tile-hi:#1d272e;--g-ink:#d8e0e4;--g-sub:#8b99a0;--color-bg:#151c21;--band-ink:#151c21}
.ic[data-ground="light"]{--g-tile:#ffffff;--g-tile-hi:#eef2f4;--g-ink:#1a2329;--g-sub:#56636b;--color-bg:#ffffff;--band-ink:#ffffff}
.ic ::selection{background:rgba(255,176,32,.34);color:#fff}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── title ─────────────────────────────────────────────────────────────── */
.ic-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:20px 56px;align-items:end;padding:48px 0 28px}
.ic-head h1{margin:0;font:700 clamp(36px,3.6vw,56px)/1 var(--cond);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.ic-lead p{margin:0;font-size:19px;line-height:1.5;color:var(--ink);max-width:46ch}
.ic-lead .ic-src{margin-top:12px;font-size:15px;color:var(--dim)}

/* ── the bar: search, where, size, stroke, background, the sets ────────── */
.ic-bar{position:sticky;top:var(--ic-top);z-index:30;background:var(--rack);border-bottom:1px solid var(--rule);
  margin:0 calc(var(--gut) * -1);padding:12px var(--gut) 0}
.ic-bar-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.ic-ctls{display:contents}
.ic-btn.ic-view{display:none}
.ic-search{flex:1 1 340px;position:relative;display:flex;align-items:center;height:46px;background:var(--panel);
  border:1px solid var(--rule-hi);border-radius:6px;padding:0 10px 0 12px;gap:10px;color:var(--dim);transition:border-color .15s}
.ic-search:focus-within{border-color:var(--led);color:var(--ink)}
.ic-search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:500 16px var(--sans);outline:0;caret-color:var(--led)}
.ic-search input::placeholder{color:#8a979e}
.ic-search input::-webkit-search-cancel-button{display:none}
.ic-search kbd{font:500 12px var(--mono);color:var(--dim);border:1px solid var(--rule-hi);border-radius:4px;padding:1px 7px}
.ic-search:focus-within kbd{display:none}
.ic-clear[hidden]{display:none}
.ic-clear{display:grid;place-items:center;width:32px;height:32px;margin-right:-4px;border:0;border-radius:4px;background:none;color:var(--dim);cursor:pointer}
.ic-ctl{display:flex;flex-direction:column;gap:5px;flex:none}
.ic-ctl>span,.ic-ctl>label>span{font:600 13px var(--cond);color:var(--dim);letter-spacing:.01em}
.ic-ctl output{color:var(--ink);font:500 13px var(--sans);font-variant-numeric:tabular-nums}
.ic-area select{height:46px;min-width:190px;background:var(--panel);color:var(--ink);border:1px solid var(--rule-hi);border-radius:6px;
  padding:0 34px 0 12px;font:500 16px var(--sans);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b99a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.ic-area select:focus-visible{outline:2px solid var(--led);outline-offset:1px}
.ic-seg{display:flex;height:46px;border:1px solid var(--rule-hi);border-radius:6px;overflow:hidden;background:var(--panel)}
.ic-seg button{border:0;background:none;color:var(--dim);font:600 15px var(--sans);padding:0 12px;min-width:44px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.ic-seg button+button{border-left:1px solid var(--rule)}
.ic-seg button[aria-pressed="true"]{color:#14100a;background:var(--led)}
.ic-seg button:focus-visible{outline:2px solid var(--led);outline-offset:-3px}
.ic-stroke input{width:150px;height:46px;margin:0;accent-color:var(--led);cursor:pointer;background:none}
.ic-stroke input:disabled{cursor:not-allowed;opacity:.45}
.ic-stroke small:not(.vh){font-size:12.5px;color:var(--dim);max-width:200px;line-height:1.35}
.ic-tabs{display:flex;gap:4px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.ic-tabs::-webkit-scrollbar{display:none}
.ic-tab{flex:none;border:0;background:none;color:var(--dim);font:600 16px var(--cond);padding:10px 12px 12px;cursor:pointer;
  border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.ic-tab b{font:500 13px var(--sans);color:var(--dim);margin-left:4px;font-variant-numeric:tabular-nums}
.ic-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--led)}
.ic-tab[aria-selected="true"] b{color:var(--led)}
.ic-tab:focus-visible{outline:2px solid var(--led);outline-offset:-4px}

/* ── the list and the detail ───────────────────────────────────────────── */
.ic-body{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start;padding-top:8px}
.ic-count{margin:18px 0 0;font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.ic-nojs,.ic-empty{margin:24px 0;padding:18px 20px;background:var(--panel);border-radius:8px;font-size:16px;color:var(--ink);max-width:60ch}
.ic-set{margin-top:36px}
.ic-set[hidden]{display:none}
.ic-set-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:end;margin-bottom:16px}
.ic-set-head h2{margin:0;font:700 28px/1.1 var(--cond);letter-spacing:-.01em;color:var(--ink)}
.ic-set-n{font:500 16px var(--sans);color:var(--dim);margin-left:6px;font-variant-numeric:tabular-nums}
.ic-set-head p{grid-column:1;margin:0;font-size:15px;line-height:1.5;color:#b9c4c9;max-width:72ch}
.ic-set-lic{display:block;color:var(--dim);font-size:14px;margin-top:2px}
.ic-zip{grid-column:2;grid-row:1 / span 2;align-self:end;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--led);
  text-decoration:none;font:600 15px var(--sans);padding:8px 0}
.ic-zip small{flex-basis:100%;padding-left:24px;margin-top:-4px;font:400 13px var(--sans);color:var(--dim)}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:8px}
.ic-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:calc(var(--tile) + 6px);
  padding:0 6px 10px;border:0;border-radius:8px;background:var(--g-tile);color:var(--g-ink);cursor:pointer;
  transition:background .12s,box-shadow .12s}
.ic-t[hidden]{display:none}
.ic-wide{grid-column:span 2}
.ic-t[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--led)}
.ic-t:focus-visible{outline:2px solid var(--led);outline-offset:2px}
.ic-g{flex:1;display:grid;place-items:center;width:100%}
.ic-g svg{display:block;width:var(--px);height:var(--px);overflow:visible}
.ic-wide .ic-g svg{width:auto;height:var(--px)}
.ic-n{max-width:100%;font:500 12px/1.25 var(--sans);color:var(--g-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic[data-sw] [data-paint="stroke"] svg{stroke-width:var(--sw)}
.ic [data-tint] .ic-g,.ic .ic-d-stage[data-tint] .ic-sz{color:var(--tint)}

.ic-d{position:sticky;top:var(--ic-stick);max-height:calc(100vh - var(--ic-stick) - 16px);overflow:auto;overscroll-behavior:contain;margin-top:18px;
  background:var(--panel-2);border-radius:10px;padding:22px 22px 26px;scrollbar-width:thin;scrollbar-color:var(--rule-hi) transparent}
.ic-d-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start}
.ic-d-head h2{margin:0;font:700 26px/1.12 var(--cond);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.ic-d-sub{grid-column:1;margin:4px 0 0;font-size:14px;color:var(--dim)}
.ic-d-sub code{font:500 13px var(--mono);color:#b9c4c9;overflow-wrap:anywhere}
.ic-d-x{grid-column:2;grid-row:1 / span 2;display:none;place-items:center;width:44px;height:44px;margin:-8px -10px 0 0;border:0;border-radius:6px;
  background:none;color:var(--ink);cursor:pointer}
.ic-d-stage{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:18px;padding:22px 20px 14px;border-radius:8px;
  background:var(--g-tile);color:var(--g-ink)}
.ic-sz{display:flex;flex-direction:column;align-items:center;gap:8px}
.ic-sz svg{display:block;width:var(--px);height:var(--px)}
.ic-d-stage.ic-wide-stage .ic-sz svg{width:auto}
.ic-sz i{font:500 11.5px var(--sans);font-style:normal;color:var(--g-sub);font-variant-numeric:tabular-nums}
.ic-pix{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.ic-pix canvas{display:block;width:160px;height:160px;border-radius:6px;image-rendering:pixelated;flex:none}
.ic-pix p{margin:0;font-size:14px;line-height:1.45;color:var(--dim)}
.ic-pix strong{display:block;font:700 15px var(--cond);color:var(--ink);margin-bottom:4px}
.ic-d-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ic-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:6px;border:1px solid var(--rule-hi);
  background:none;color:var(--ink);font:600 14.5px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,transform .12s var(--ease-seat)}
.ic-btn svg{flex:none}
.ic-btn:active{transform:translateY(1px)}
.ic-btn.pri{background:var(--led);border-color:var(--led);color:#14100a}
.ic-btn.sm{height:32px;padding:0 10px;font-size:13.5px}
.ic-d-sec{margin-top:22px}
.ic-d-sec h3{margin:0 0 8px;font:700 16px var(--cond);color:var(--ink);letter-spacing:.005em}
.ic-d-sec p{margin:0;font-size:14.5px;line-height:1.5;color:#c3cdd1}
.ic-note{margin-top:10px!important;color:var(--dim)!important;font-size:13.5px!important}
.ic-line{display:flex;gap:8px;align-items:center}
.ic-line code{flex:1;min-width:0;font:500 13px var(--mono);color:var(--ink);background:#0c1114;border-radius:6px;padding:9px 10px;overflow-x:auto;white-space:nowrap}
.ic-code{margin:0;max-height:230px;overflow:auto;background:#0c1114;border-radius:6px;padding:12px 12px;font:400 12px/1.55 var(--mono);
  color:#c9d3d7;white-space:pre-wrap;word-break:break-all;scrollbar-width:thin;scrollbar-color:var(--rule-hi) transparent}
.ic-code .t{color:#7fb3e6}.ic-code .k{color:#e6c07b}.ic-code .v{color:#9ccc65}
.ic-lic a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--rule-hi)}
.ic-used{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px}
.ic-used li{display:flex;gap:10px;align-items:baseline;font-size:13px}
.ic-used code{font:400 12.5px var(--mono);color:#c3cdd1;overflow-wrap:anywhere}
.ic-used span{flex:none;min-width:96px;color:var(--dim);font-size:12.5px}
.ic-tags{display:flex;flex-wrap:wrap;gap:6px}
.ic-tags button{border:1px solid var(--rule-hi);background:none;color:#c3cdd1;border-radius:999px;font:500 13px var(--sans);padding:4px 10px;cursor:pointer}
.ic-scrim{display:none}

/* hover only where a pointer can hover (a phone keeps a tapped tile "hovered" otherwise) */
@media (hover:hover) and (pointer:fine){
  .ic-clear:hover{color:var(--ink);background:var(--panel-2)}
  .ic-seg button:hover{color:var(--ink);background:var(--panel-2)}
  .ic-tab:hover{color:var(--ink)}
  .ic-zip:hover{text-decoration:underline;text-underline-offset:3px}
  .ic-t:hover{background:var(--g-tile-hi)}
  .ic-d-x:hover{background:var(--panel-2)}
  .ic-btn:hover{border-color:var(--led);background:var(--led-soft)}
  .ic-btn.pri:hover{background:#ffc04d}
  .ic-lic a:hover{text-decoration-color:var(--led)}
  .ic-tags button:hover{border-color:var(--led);color:var(--ink)}
}

/* press feedback on every input, and controls that a long press does not select */
.ic-t:active{background:var(--g-tile-hi);transform:scale(.97)}
.ic-btn:active,.ic-seg button:active,.ic-tab:active,.ic-tags button:active{transform:scale(.97)}
.ic-t,.ic-btn,.ic-seg button,.ic-tab,.ic-tags button,.ic-clear,.ic-d-x,.ic-zip{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ic-t{transition:background .12s,box-shadow .12s,transform .1s ease-out}

/* ── where the icons come from ─────────────────────────────────────────── */
.ic-about{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px 56px;margin-top:120px;padding:48px 0 96px;border-top:1px solid var(--rule)}
.ic-about h2{margin:0;font:700 30px/1.1 var(--cond);letter-spacing:-.01em}
.ic-about p{margin:0 0 14px;font-size:16.5px;line-height:1.6;max-width:68ch}

.ic-toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#232e35;color:var(--ink);border-radius:8px;padding:11px 18px;font:500 15px var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:opacity .2s,transform .3s var(--ease-seat)}
.ic-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── narrower screens: the detail is a sheet from the bottom ───────────── */
@media (max-width:1099px){
  .ic-body{grid-template-columns:minmax(0,1fr)}
  .ic-d{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;margin:0;max-height:88vh;max-height:88dvh;border-radius:14px 14px 0 0;
    padding:18px max(18px,var(--gut)) calc(26px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.5);
    transform:translateY(105%);visibility:hidden;transition:transform .32s var(--ease-seat),visibility 0s .32s}
  .ic-d.open{transform:none;visibility:visible;transition:transform .32s var(--ease-seat),visibility 0s}
  .ic-d-x{display:grid}
  .ic-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(5,8,10,.6);opacity:0;pointer-events:none;transition:opacity .25s}
  .ic-scrim.on{opacity:1;pointer-events:auto}
}
@media (max-width:899px){
  .ic-head{grid-template-columns:minmax(0,1fr);padding:36px 0 22px;gap:14px}
  .ic-lead p{font-size:17px}
  .ic-set-head{grid-template-columns:minmax(0,1fr)}
  .ic-zip{grid-column:1;grid-row:auto}
  .ic-about{grid-template-columns:minmax(0,1fr);margin-top:80px}
}
/* a phone: the bar keeps the search, View and the sets; View opens the other controls under them */
@media (max-width:640px){
  .ic{--tile:80px}
  .ic[data-px="32"]{--tile:92px}.ic[data-px="48"]{--tile:112px}.ic[data-px="16"],.ic[data-px="20"]{--tile:76px}
  .ic-bar{padding-top:10px}
  .ic-bar-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .ic-search{flex:none}
  .ic-btn.ic-view{display:inline-flex;height:46px}
  .ic-search kbd{display:none}
  .ic-view[aria-expanded="true"]{border-color:var(--led);color:var(--led)}
  .ic-ctls{display:none;grid-column:1 / -1;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:4px 0 6px}
  .ic-bar.show .ic-ctls{display:grid}
  .ic-area{grid-column:1 / -1}
  .ic-area select{min-width:0;width:100%}
  .ic-stroke{grid-column:1 / -1;order:2}
  .ic-stroke input{width:100%}
  .ic-seg button{padding:0 10px;min-width:40px;font-size:14px}
  .ic-grid{gap:6px}
  .ic-head h1{font-size:36px}
  .ic-tab{padding:10px 10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .ic *,.ic-d,.ic-toast,.ic-scrim{transition:none!important}
}

.ic-more{margin:4px 0 8px}
.ic-more:disabled{opacity:.6;cursor:progress}