/* Tools page and the tools themselves */
.tool-card { position: relative; padding: 0; transition: border-color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-spring); }
.tool-card:hover { border-color: var(--line-strong); }
.tool-card:active { scale: 0.98; }
.tool-card { text-align: center; }
.tool-link { display: block; padding: var(--s-5) 3rem; color: inherit; text-decoration: none; border-radius: inherit; }
.tool-link .card-title { margin-bottom: var(--s-2); }

/* Favorite star: outlined when off, filled yellow when on */
:root { --star: #facc15; }
.fav { cursor: pointer; }
.fav-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); transition: color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-spring); }
.fav-icon:hover { color: var(--white); }
.fav-icon:active { scale: 0.85; }
.fav-icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.fav-icon[aria-pressed="true"] { color: var(--star); }
.fav-icon[aria-pressed="true"] svg { fill: currentColor; }
.tool-card .fav-icon, .app-card .fav-icon { z-index: 3; position: absolute; top: var(--s-3); right: var(--s-3); width: 2.25rem; height: 2.25rem; }

/* Back on the left, favorite on the right, the name truly centered between them */
.tool-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.tool-head > :first-child { justify-self: start; }
.tool-head > :last-child { justify-self: end; }
.tool-title { font-size: clamp(1.5rem, 5vw, 2.75rem); text-align: center; }
.tool-body { max-width: 34rem; margin-inline: auto; }
.tool-body .tabs { display: flex; width: fit-content; margin-inline: auto; }
.out-center { text-align: center; }
.typing-text { margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 1.125rem; line-height: 1.7; }
.typing-text .ok { color: var(--white); }
.typing-text .bad { color: var(--white); text-decoration: underline wavy; }
.typing-text .cur { background: var(--white); color: var(--black); border-radius: 3px; }
.typing-text span:not(.ok):not(.bad):not(.cur) { color: var(--muted); }
.fill { position: fixed; inset: 0; z-index: 200; cursor: pointer; }
.img-preview { max-width: 100%; max-height: 18rem; border-radius: var(--r-sm); }
.tool-row { display: flex; align-items: center; gap: var(--s-3); }
.tool-row .field { flex: 1; min-width: 0; }
.out { color: var(--white); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-row > .out { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); }
.row > .out { flex: none; }
.out-big { font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 600; text-align: center; }
.field-tall { min-height: 16rem; }
.laps { display: grid; gap: var(--s-1); margin: 0; padding-left: 0; list-style-position: inside; color: var(--muted); font-variant-numeric: tabular-nums; }

.calc { display: grid; gap: var(--s-3); }
.calc-screen { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--bg-2); text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; }
.calc-expr { min-height: 1.5em; color: var(--muted); font-size: 1.125rem; overflow-wrap: anywhere; }
.calc-result { font-size: 2.25rem; overflow-wrap: anywhere; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.calc-key { padding: var(--s-3) 0; font-size: 1rem; }
.calc-wide { grid-column: span 3; }
.calc-num { background: var(--bg-2); }
.calc-fn, .calc-ctl { color: var(--muted); font-size: 0.9rem; }
.calc-op, .calc-eq { background: var(--white); border-color: var(--white); color: var(--black); }
.calc-op:hover:not(:disabled), .calc-eq:hover:not(:disabled) { background: var(--white-2); }

.todo-item { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.todo-item.is-done span { color: var(--muted); text-decoration: line-through; }

/* Color picker: a saturation/brightness pad over the chosen hue, and a hue slider */
.sv { --hue: red; position: relative; height: 12rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)); }
.sv-thumb { position: absolute; width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border: 3px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.5); pointer-events: none; }
.hue { -webkit-appearance: none; appearance: none; height: 0.875rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.hue::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border: 3px solid var(--white); border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.5); }
.hue::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border: 3px solid var(--white); border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.5); }
.swatch-sm { flex: none; width: 3rem; height: 3rem; border-radius: 50%; }
.swatch { border: 1px solid var(--line-strong); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The custom cursor hides the real one on elements, but not on these built-in parts */
[data-cursor] ::file-selector-button, [data-cursor] ::-webkit-slider-thumb, [data-cursor] ::-webkit-slider-runnable-track { cursor: none !important; }
[data-cursor] ::-moz-range-thumb, [data-cursor] ::-moz-range-track { cursor: none !important; }

.page-sub[data-empty] { text-align: center; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875rem; }
.field-flags { flex: none; width: 5rem; }
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.stat { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); }
.stat strong { font-size: 1.25rem; font-weight: 600; }
.out-pass { padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.125rem; word-break: break-all; }
.chip-check { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.4rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 0.9rem; text-transform: capitalize; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--white); }
.qr { display: grid; place-items: center; }
.qr svg { width: min(100%, 16rem); height: auto; border-radius: var(--r-sm); }
.row-label.mono { overflow-wrap: anywhere; }

/* A card whose clickable area is a button (Apps) instead of a link */
button.tool-link { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }

/* App cards: a big blurred letter (a logo later) fills the card, the name sits at the bottom */
.app-card { position: relative; padding: 0; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-spring); }
.app-card:hover { border-color: var(--line-strong); }
.app-card:active { scale: 0.98; }
.app-link { position: relative; display: grid; align-content: end; justify-items: center; width: 100%; min-height: 10rem; padding: var(--s-4); border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; border-radius: inherit; }
.app-logo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6.5rem; font-weight: 700; color: var(--white); opacity: 0.28; filter: blur(7px); pointer-events: none; transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.app-card:hover .app-logo { filter: blur(3px); opacity: 0.32; }
.app-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; pointer-events: none; transition: filter var(--dur) var(--ease-out); }
.has-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / 0.45); pointer-events: none; transition: background var(--dur) var(--ease-out); }
.app-card:hover .has-art::before { background: rgb(0 0 0 / 0.25); }
.has-art .app-name { position: relative; z-index: 2; }
.has-art .app-name { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.8); }
.app-name { position: relative; font-weight: 600; overflow-wrap: anywhere; }
.card-sm .app-link { min-height: 6.5rem; padding: var(--s-3); }
.card-sm .app-logo { font-size: 3.75rem; filter: blur(5px); }
.card-sm .app-name { font-size: 0.875rem; }

/* Home: recents or community favorites under the search bar */
.picks { display: grid; gap: var(--s-3); width: min(100%, 40rem); animation: fade-in var(--dur-slow) var(--ease-out) 1400ms both; }
.picks-title { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; }
.mini-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }

/* An image fades in over its card when it arrives; a small ring spins until then (see watchArt in cards.js) */
.app-art { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.is-loading .app-art { opacity: 0; }
.art-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; margin: -1.25rem 0 0 -0.75rem; border: 2px solid var(--line-strong); border-top-color: var(--white); border-radius: 50%; animation: art-spin 800ms linear infinite; }
.is-loading > .art-spinner, .is-loading .art-spinner { display: block; }
@keyframes art-spin { to { rotate: 360deg; } }