/* myglaze.ai: a soft charcoal page. Every color on the site comes from the
   values below. Hovering a theme takes them over with the theme's own colors:
   its background bleeds out from the card (.bleed layers), and these fade to
   match (app.js fades them, frame by frame). They're registered as colors, so
   app.js reads them back as rgb(). */
@property --fg { syntax: '<color>'; inherits: true; initial-value: #f2f2f3; }
@property --fg-soft { syntax: '<color>'; inherits: true; initial-value: #a3a3a8; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.12); }
@property --card { syntax: '<color>'; inherits: true; initial-value: #2a2a2d; }
@property --on-fg { syntax: '<color>'; inherits: true; initial-value: #202022; }

:root {
  --page: #202022;        /* the page: light black */
  --error: #ff6b6b;
  --radius: 14px;
  --spread: 1.6s;         /* how long the colors take to bleed across the page */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  background: var(--page);
  /* No CSS transition on the colors above: app.js fades them (and can carry
     on from wherever an interrupted fade had got to). */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: transparent; color: var(--fg); font: 16px/1.5 var(--font); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
strong { font-weight: 600; }
.muted { color: var(--fg-soft); }
.error { color: var(--error); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }

/* --- The bleed: a theme's background, spreading from the hovered card ---
   Only the radius (--r) animates. The center (--x, --y) follows the card as
   the page scrolls (app.js), so the color always grows from, and pulls back
   into, the card itself. */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.bleed {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  --r: 0px;
  clip-path: circle(var(--r) at var(--x) var(--y));
  transition: --r var(--spread) cubic-bezier(0.45, 0, 0.2, 1);
}
.bleed.open { --r: 150vmax; }
@media (prefers-reduced-motion: reduce) {
  /* No spreading: the colors simply fade in. */
  .bleed { clip-path: none; opacity: 0; transition: opacity 0.6s ease; }
  .bleed.open { clip-path: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* --- Navigation --- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(1080px, 100% - 40px); margin: 0 auto; min-height: 56px;
  display: flex; align-items: center; gap: 28px; font-size: 14px;
}
.brand { font-weight: 700; font-size: 18px; text-decoration: none; }
.brand span { font-weight: 400; color: var(--fg-soft); }
.tabs { display: flex; gap: 22px; flex: 1; }
.tabs a { padding: 17px 0 15px; color: var(--fg-soft); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 600; }
.nav-auth { display: flex; align-items: center; gap: 14px; }
.nav-auth .link { text-decoration: none; color: var(--fg); font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.who:hover #who-name { text-decoration: underline; text-underline-offset: 3px; }
.plan { font-size: 12px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-soft); }
.link { border: 0; background: none; padding: 0; color: var(--fg-soft); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--fg); }

/* --- Intro: short, then the marketplace below --- */
.intro .wrap { padding: 96px 0 40px; }
.intro h1 { margin: 0 0 16px; max-width: 760px; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.intro .lede { max-width: 560px; }
.scroll {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 32px;
  padding: 11px 20px; border: 1px solid var(--fg); border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.scroll:hover { background: var(--fg); color: var(--on-fg); }

/* --- Sections --- */
main > section > .wrap { padding: 64px 0 24px; }
#market-section { scroll-margin-top: 56px; }
.section-head { margin-bottom: 32px; }
.section-head h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.lede { margin: 0; font-size: 18px; color: var(--fg-soft); }
.notice { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; background: var(--card); }

/* --- Theme cards --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.grid > p.muted { grid-column: 1 / -1; }
.theme-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease;
  /* Cards off screen are skipped: hovering fades the page's colors every
     frame, and restyling dozens of hidden mini previews made it lag. */
  content-visibility: auto; contain-intrinsic-block-size: auto 300px; /* most cards are 299px */
}
.theme-card:hover, .theme-card:focus-within { transform: translateY(-3px); border-color: var(--fg-soft); }
.theme-info { display: grid; gap: 2px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.theme-info strong { font-size: 17px; }
.theme-info .muted { font-size: 13px; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.actions .muted { font-size: 13px; }
.theme-info .title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-soft); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }

/* --- Buttons --- */
.button, .actions button, .drafts button {
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600;
}
.actions button:hover, .drafts button:hover { border-color: var(--fg); }
.button, button.primary { background: var(--fg) !important; color: var(--on-fg) !important; border-color: var(--fg) !important; }
.button { padding: 11px 22px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.button.small { padding: 7px 16px; font-size: 14px; }
.button.ghost { background: transparent !important; color: var(--fg) !important; border-color: var(--line) !important; }
.button.ghost:hover { border-color: var(--fg) !important; opacity: 1; }
.button.danger { background: var(--error) !important; border-color: var(--error) !important; color: #fff !important; }
.button:hover, button.primary:hover { opacity: 0.88; }
button:disabled { opacity: 0.5; cursor: progress; }

/* --- Creator --- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; background: var(--card); }
.card h3 { font-size: 22px; margin: 0 0 18px; }
.card h4 { font-size: 12px; margin: 26px 0 10px; color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.06em; }
#create { display: grid; gap: 22px; }
#create-button { justify-self: start; }
.drop {
  position: relative; display: grid; place-items: center; gap: 10px; min-height: 190px; padding: 20px;
  border: 1px dashed var(--fg-soft); border-radius: var(--radius); cursor: pointer; text-align: center;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.drop:hover { border-color: var(--fg); }
.drop small { color: var(--fg-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop img { max-height: 220px; max-width: 100%; border-radius: 8px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.fields label .muted { font-weight: 400; font-size: 12px; }
.fields .check { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; font-size: 15px; font-weight: 400; }
.fields input:not([type="checkbox"]), .fields select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; font-size: 15px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.fields select option { background: var(--page); color: #f2f2f3; }
.fields input:focus, .fields select:focus { outline: none; border-color: var(--fg); }
input[type="checkbox"] { accent-color: var(--fg); width: 16px; height: 16px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: grid; justify-items: center; gap: 3px; width: 80px; font-size: 11px; }
.swatch span { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); }
.swatch code, .swatch small { color: var(--fg-soft); text-align: center; }
.report { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }

.drafts { list-style: none; margin: 0; padding: 0; }
.drafts li { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.drafts li:first-child { border-top: 0; }
.drafts .open { flex: 1; text-align: left; border: 0 !important; background: none !important; padding: 0 !important; font-weight: 400 !important; font-size: 16px !important; }
.drafts .open .muted { font-size: 13px; }

/* --- Previews: a miniature chat in the theme's own colors --- */
.preview {
  display: flex; height: 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background-color: var(--bg); color: var(--text);
}
.p-side { width: 22%; background: var(--surface); backdrop-filter: blur(12px); border-right: 1px solid var(--border); padding: 18px 14px; display: grid; align-content: start; gap: 12px; }
.p-item { height: 9px; border-radius: 5px; background: var(--muted); opacity: 0.6; }
.p-item.short { width: 60%; }
.p-main {
  flex: 1; display: flex; flex-direction: column; padding: 22px 8%; gap: 12px; font-family: var(--font-message);
  background-image: var(--art, var(--bg-image)); background-size: cover; background-position: var(--art-position, center);
}
.p-bubble { align-self: flex-end; background: var(--bubble); padding: 8px 14px; border-radius: var(--radius); font-size: 14px; }
.p-reply { margin: 0; font-size: 14px; }
.p-code { margin: 0; background: var(--code); border: 1px solid var(--code-border); border-radius: calc(var(--radius) * 0.6); padding: 10px 12px; font-size: 13px; }
.p-composer {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  background: var(--composer); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--muted); font-size: 14px;
}
.p-send { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); }
.preview.mini { height: 170px; border: 0; border-radius: 0; }
.preview.mini .p-side { padding: 10px 8px; gap: 6px; }
.preview.mini .p-item { height: 6px; }
.preview.mini .p-main { padding: 14px 8%; gap: 7px; }
.preview.mini :is(.p-bubble, .p-reply, .p-composer) { font-size: 10px; }
.preview.mini .p-bubble { padding: 4px 9px; }
.preview.mini .p-composer { padding: 6px 9px; }
.preview.mini .p-send { width: 13px; height: 13px; border-radius: 4px; }

/* The card's miniature opens the full-size preview. */
.thumb { position: relative; }
.thumb .preview { cursor: zoom-in; }
.preview-pill {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: 0.94;
  padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 22, 0.78); color: #f2f2f3; font-size: 14px; font-weight: 600;
  backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease, scale 0.2s ease;
}
.theme-card:hover .preview-pill, .preview-pill:focus-visible { opacity: 1; scale: 1; }
@media (hover: none) {
  .preview-pill { opacity: 1; scale: 1; top: auto; bottom: 10px; left: auto; right: 10px; translate: none; padding: 6px 14px; font-size: 13px; }
}

/* --- Full-size preview: a mock AI workspace in the theme ---
   .ws is the overlay (opening from the card: app.js animates its clip-path);
   .ws-bar is the site's own; everything in .ws-app is the theme's. */
html.ws-open { overflow: hidden; }
.ws { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--page); }
.ws-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 52px;
  background: #18181a; color: #f2f2f3; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px;
}
.ws-bar .muted { color: #a3a3a8; }
.ws-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-actions { display: flex; align-items: center; gap: 10px; }
.ws-bar button { border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.ws-bar button.primary { background: #f2f2f3; color: #18181a; border-color: #f2f2f3; font-weight: 600; }

.ws-app {
  flex: 1; min-height: 0; display: flex; background-color: var(--bg); color: var(--text);
  font-family: var(--font-ui);
}
.ws-app ::selection { background: var(--selection); }
.ws-app * { scrollbar-color: var(--scrollbar) transparent; }
.ws-side {
  width: 260px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  background: var(--surface); backdrop-filter: blur(var(--blur)); border-right: 1px solid var(--border); font-size: 14px;
}
.ws-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 6px 10px 14px; }
.ws-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); }
.ws-new, .ws-chat { padding: 8px 10px; border-radius: calc(var(--radius) * 0.6); }
.ws-new { color: var(--text); }
.ws-label { margin: 14px 10px 4px; font-size: 12px; color: var(--faint); }
.ws-chats { display: flex; flex-direction: column; gap: 2px; }
.ws-chat { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chat.active { background: var(--bubble); color: var(--text); }
.ws-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--border); }
.ws-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; }

.ws-main {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  background-color: var(--bg); background-image: var(--art, var(--bg-image)); background-size: cover; background-position: var(--art-position, center);
}
.ws-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ws-head, .ws-thread, .ws-composer { position: relative; z-index: 1; }
.ws-head { padding: 14px 24px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--blur)); }
.ws-thread {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 22px;
  padding: 32px max(24px, calc((100% - 720px) / 2)); font-family: var(--font-message); font-size: 16px; line-height: 1.65;
}
.ws-msg p { margin: 0 0 12px; }
.ws-msg p:last-child { margin-bottom: 0; }
.ws-msg ul { margin: 0 0 12px; padding-left: 22px; }
.ws-msg a { color: var(--link); }
.ws-msg.user { align-self: flex-end; max-width: 75%; background: var(--bubble); padding: 10px 16px; border-radius: var(--radius); }
.ws-msg code { font-family: var(--font-code); font-size: 0.88em; background: var(--code); border: 1px solid var(--code-border); border-radius: 6px; padding: 1px 5px; }
.ws-msg pre { margin: 0 0 12px; background: var(--code); border: 1px solid var(--code-border); border-radius: calc(var(--radius) * 0.6); padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
.ws-msg pre code { background: none; border: 0; padding: 0; font-size: 14px; }
.ws-composer {
  display: flex; align-items: flex-end; gap: 10px; margin: 0 max(24px, calc((100% - 720px) / 2)) 22px;
  background: var(--composer); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px 16px;
  backdrop-filter: blur(var(--blur));
}
.ws-composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: 16px/1.5 var(--font-message); padding: 6px 0; }
.ws-composer textarea::placeholder { color: var(--faint); }
.ws-send { flex: none; width: 34px; height: 34px; border: 0; border-radius: calc(var(--radius) * 0.6); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.ws-composer:focus-within { border-color: var(--accent); }
@media (max-width: 760px) {
  .ws-side { display: none; }
  .ws-desc { display: none; }
  .ws-bar { flex-wrap: wrap; row-gap: 6px; }
  .ws-title { flex-basis: 100%; }
  .ws-actions { flex: 1; }
}

/* --- Footer --- */
.foot { padding: 32px 0 48px; font-size: 12px; color: var(--fg-soft); }
.foot .wrap { border-top: 1px solid var(--line); padding-top: 16px; }

/* --- Small screens --- */
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; gap: 0 18px; padding-top: 8px; }
  .tabs { order: 3; flex-basis: 100%; }
  .who { margin-left: auto; }
  .intro .wrap { padding: 56px 0 24px; }
  .card { padding: 20px; }
  .grid { grid-template-columns: 1fr; }
  #market-section { scroll-margin-top: 100px; }
}

/* --- Accounts: forms and the account page --- */
.wrap.auth { max-width: 440px; }
.wrap.narrow { max-width: 720px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.form small { font-weight: 400; font-size: 12px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; font-weight: 400;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--fg); }
.form select option { background: var(--page); color: #f2f2f3; }
.form label .muted { font-weight: 400; }
.form .button { justify-self: start; }
.form .error, .form .status { margin: 0; font-size: 14px; }
.form.inline { grid-template-columns: 1fr auto; align-items: end; }
.form.inline .error, .form.inline .status { grid-column: 1 / -1; }
.form input.code { font-size: 28px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; max-width: 260px; }
.notice p { margin: 0 0 6px; }
.notice p:last-child { margin: 0; }
.notice.outbox-note { margin: 0 0 20px; font-size: 14px; }
a { text-underline-offset: 3px; }
.plan.large { font-size: 14px; padding: 3px 12px; }
.steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 6px; color: var(--fg-soft); }
.steps code, .new-token code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); word-break: break-all; }
.new-token { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--fg-soft); border-radius: var(--radius); }
.new-token p { margin: 0 0 10px; }
.tokens { list-style: none; margin: 18px 0 0; padding: 0; }
.tokens li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tokens li.muted { border: 0; }
.tokens button { border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.tokens button:hover { border-color: var(--error); color: var(--error); }
.card.danger { border-color: color-mix(in srgb, var(--error) 45%, transparent); }
@media (max-width: 760px) {
  .nav-auth .link { display: none; }
  .form.inline { grid-template-columns: 1fr; }
}

/* --- Sign in with another account --- */
.providers { display: grid; gap: 10px; margin-bottom: 18px; }
.providers .provider { width: 100%; }
.or { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--fg-soft); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.methods { list-style: none; margin: 0; padding: 0; }
.methods li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.methods li:first-child { border-top: 0; padding-top: 0; }
.methods button { border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.methods button:hover { border-color: var(--fg); }

/* Provider buttons with their marks, and the password show/hide. */
.providers .provider { gap: 10px; font-weight: 600; }
.providers .provider svg { width: 18px; height: 18px; flex: none; }
.button.wide { justify-self: stretch !important; width: 100%; }
.password { position: relative; display: block; }
.password input { padding-right: 46px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--fg-soft);
}
.reveal:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.reveal svg { width: 18px; height: 18px; }

/* --- Legal pages (terms.html, privacy.html) --- */
.legal { padding: 48px 0 24px; }
.legal h1 { font-size: 36px; margin: 0 0 6px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--fg-soft); max-width: 68ch; }
.legal strong { color: var(--fg); }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.small { font-size: 13px; }

/* --- Getting the extension (the intro) --- */
.install { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.install .scroll { margin-top: 0; }
.installed { color: var(--fg-soft); font-size: 15px; }
.installed span { color: var(--fg); font-weight: 700; margin-right: 4px; }

/* A theme opened from a share link. */
.theme-card.featured { outline: 2px solid var(--fg); outline-offset: 3px; }

.form textarea { font: inherit; font-size: 16px; color: inherit; resize: vertical; }

/* --- Home: a row per collection, scrolling sideways --- */
#shelves { padding-bottom: 24px; }
.shelf { margin: 0 0 56px; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shelf-head h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.01em; }
.shelf-head p { margin: 0; }
.shelf-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.arrow {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 16px; line-height: 1;
}
.arrow:hover:not(:disabled) { border-color: var(--fg); }
.arrow:disabled { opacity: 0.35; cursor: default; }
.view-all { margin-left: 6px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.view-all:hover { text-decoration: underline; }
.shelf-row {
  /* Three cards to a view (two on mid-size screens), the rest a scroll away. */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 6px 4px 14px; margin: -6px -4px 0;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.shelf-row > * { scroll-snap-align: start; }
@media (max-width: 900px) {
  .shelf-row { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .shelf-head { flex-direction: column; align-items: flex-start; }
  .arrow { display: none; }
  .view-all { margin-left: 0; }
  .shelf-row { grid-auto-columns: 82%; }
}

/* --- Marketplace: filters --- */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.chip small { color: var(--fg-soft); font-weight: 500; margin-left: 2px; }
.chip:hover { border-color: var(--fg); }
.chip[aria-current] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.chip[aria-current] small { color: inherit; opacity: 0.7; }
.chip[aria-disabled] { opacity: 0.4; }
.chip[aria-disabled]:hover { border-color: var(--line); }
/* The look filters: their own row, smaller, Light/Dark set apart from the rest. */
.looks { flex-basis: 100%; order: 3; gap: 6px; }
.looks .chip { padding: 5px 12px; font-size: 13px; }
.looks .group-start { margin-left: 14px; }
/* With no collections to pick between, the looks lead the row, the search beside them. */
#market-filters[hidden] ~ .looks { flex-basis: auto; order: -1; }
.search {
  width: min(280px, 100%); padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.search:focus { outline: none; border-color: var(--fg); }
.actions-inner { display: contents; }

/* --- What's new --- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: 13px; }
.new-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--fg); vertical-align: 2px; }
.site-notice { --warning: #fab219; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: center; padding: 10px 20px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--line); background: var(--card); }
.site-notice::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-soft); align-self: center; }
.site-notice[data-level='warning'] { border-bottom-color: color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 12%, var(--card)); }
.site-notice[data-level='warning']::before { background: var(--warning); }
.site-notice-link { font-weight: 600; }

.working-on { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 40px; background: var(--card); }
.working-on .eyebrow { margin-bottom: 6px; }
.working-on ul { margin: 0 0 8px; padding-left: 20px; }
.working-on li { margin: 4px 0; }
.working-on .muted { margin: 0; }

.releases { list-style: none; margin: 0; padding: 0; }
.release { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.release:first-child { border-top: 0; padding-top: 0; }
.release-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--fg-soft); font-size: 14px; padding-top: 4px; }
.release-body h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.release-summary { margin: 0 0 14px; color: var(--fg-soft); }
.release-group { margin-top: 16px; }
.release-label { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.release-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.release-group ul { margin: 0; padding-left: 20px; }
.release-group li { margin: 5px 0; }
.release.focus .release-body h3::after { content: 'Your update'; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-soft); vertical-align: 4px; }
@media (max-width: 640px) {
  .release { grid-template-columns: 1fr; gap: 8px; }
  .release-meta { flex-direction: row; align-items: center; padding-top: 0; }
}