/* Wallpaper Lab, Glyph Forge, Make it real, and the save sheet. */
.link { color: var(--a3); text-decoration: underline; text-underline-offset: 3px; }
.seg.tight { margin-top: 6px; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.pill {
  flex: none; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid rgb(170 200 255 / .24); background: rgb(var(--bg-rgb) / .6); color: var(--ink-dim);
  font: 700 15px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
  transition: color .25s, border-color .25s, box-shadow .25s, background .25s;
}
.pill i { display: block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(120deg, var(--c3), var(--c1)); box-shadow: 0 0 8px var(--c1); }
.pill[aria-checked="true"], .pill[aria-pressed="true"] { color: var(--a3); border-color: var(--a3); background: rgb(var(--a3-rgb) / .1); box-shadow: 0 0 18px -4px var(--a3); }
.btn-pair { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; margin-top: 22px; }
.btn-pair .btn { padding: 0 12px; gap: 8px; letter-spacing: .1em; }
@media (max-width: 350px) { .btn-pair { grid-template-columns: 1fr; } }
.btn-row.center-row { justify-content: center; margin-top: 14px; }

/* ---------- Wallpaper Lab ---------- */
.phone-wrap { display: flex; justify-content: center; margin-top: 10px; }
.phone {
  position: relative; width: min(62vw, 250px); aspect-ratio: 1170 / 2532; padding: 5px; border-radius: 36px;
  background: linear-gradient(160deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04));
  box-shadow: 0 0 0 1px rgb(var(--a3-rgb) / .35), 0 26px 60px -18px rgb(var(--a1-rgb) / .6), 0 0 40px -10px rgb(var(--a3-rgb) / .35);
}
.phone-slot { position: absolute; inset: 5px; border-radius: 31px; overflow: hidden; background: rgb(var(--bg-rgb)); }
.cv { display: block; width: 100%; height: 100%; transition: opacity .25s; }
.busy .cv { opacity: .45; }

.guides { position: absolute; inset: 5px; border-radius: 31px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.show-guides .guides { opacity: 1; }
.g { position: absolute; left: 8%; right: 8%; border: 1.5px dashed rgb(var(--a3-rgb) / .9); border-radius: 12px; background: rgb(var(--a3-rgb) / .08); }
.g span { position: absolute; left: 8px; top: 6px; font: 600 9.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a3); text-shadow: 0 1px 4px #000; }
.g-clock { top: 9%; height: 19%; }
.g-wid { top: 29.5%; height: 12%; border-color: rgb(var(--a1-rgb) / .95); background: rgb(var(--a1-rgb) / .1); }
.g-wid span { color: var(--ink); }
.g-btn { left: 9%; right: auto; bottom: 6.5%; width: 15%; aspect-ratio: 1; border-radius: 50%; }
.g-btn.r { left: auto; right: 9%; }
.g-grid { top: 7%; height: 66%; }
.g-dock { top: 80%; height: 11%; border-color: rgb(var(--a1-rgb) / .95); background: rgb(var(--a1-rgb) / .1); }
.g-dock span { color: var(--ink); }
.g-note { position: absolute; left: 6%; right: 6%; top: 2.2%; text-align: center; font: 600 8px/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 6px #000, 0 0 3px #000; }

.widgets { display: grid; gap: 24px; margin-top: 16px; justify-items: center; }
.wid { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 0; }
.wid-slot { overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px rgb(var(--a3-rgb) / .35), 0 18px 40px -16px rgb(var(--a1-rgb) / .55); }
.wid-slot.small { width: 158px; aspect-ratio: 1; }
.wid-slot.medium { width: min(338px, 100%); aspect-ratio: 338 / 158; }
.wid-slot.large { width: min(338px, 100%); aspect-ratio: 338 / 354; }
.wid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 338px); color: var(--ink-dim); font-size: 14px; }
.wid figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- Glyph Forge ---------- */
.forge { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px; }
.forge-prev { flex: none; width: 138px; height: 138px; overflow: hidden; border-radius: 31px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 16px 36px -12px rgb(var(--a1-rgb) / .7); }
.forge-prev canvas { display: block; width: 100%; height: 100%; }
.forge-side { display: flex; flex-direction: column; flex: 1; gap: 10px; min-width: 0; }
.forge-side small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.3; }
.forge-name { font: 700 28px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.glyph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gcell {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 9px; border-radius: 18px; border: 1px solid transparent;
  color: var(--ink-dim); font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s, box-shadow .25s, background .25s;
}
.gcell canvas { display: block; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 22.4%; }
.gcell[aria-checked="true"] { color: var(--a3); border-color: var(--a3); background: rgb(var(--a3-rgb) / .08); box-shadow: 0 0 24px -6px var(--a3); }

@media (max-width: 350px) { /* small phones: stack instead of squeezing */
  .forge { flex-direction: column; text-align: center; }
  .forge-side { width: 100%; }
  .tile h3 { font-size: 18px; letter-spacing: .04em; }
}

/* ---------- Make it real ---------- */
.split { display: grid; gap: 12px; margin-top: 18px; }
.cap { padding: 16px; }
.cap h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--a3); }
.cap h3 .ico { width: 16px; height: 16px; }
.cap.cant h3 { color: var(--a1); }
.cap ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.cap li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-dim); font-size: 15px; line-height: 1.4; }
.cap li .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--a3); }
.cap.cant li .ico { color: var(--a1); }
.never { margin-top: 14px; padding: 14px 16px; border-radius: 0 12px 12px 0; border-left: 3px solid var(--hot); background: rgb(var(--hot-rgb) / .08); color: var(--ink-dim); font-size: 14.5px; line-height: 1.45; }
.never b { color: var(--ink); font-weight: 600; }

.acc { margin-bottom: 10px; }
.acc summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; list-style: none; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc .num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgb(var(--a3-rgb) / .6); color: var(--a3); font: 700 17px/1 var(--f-display); }
.acc summary b { flex: 1; font: 700 20px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.acc .chev { width: 20px; height: 20px; color: var(--ink-faint); transition: transform .3s var(--ease); }
.acc[open] .chev { transform: rotate(90deg); }
.acc-body { padding: 0 16px 16px 60px; color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.acc-body p + p { margin-top: 8px; }
.acc-body b { color: var(--ink); font-weight: 600; }

/* ---------- Save sheet (share fallback) ---------- */
.save-grid { display: grid; gap: 12px; margin: 14px 0; }
.save-grid img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; }