/* ============================================================
   MOMENTLY — Foundation displays, components, accent showcase
   ============================================================ */

/* ---------- Two-layer diagram ------------------------------ */
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.layer-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; background: var(--surface);
}
.layer-card .tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  margin-bottom: 14px;
}
.layer-card h3 { font-size: 20px; margin-bottom: 10px; }
.layer-card p { color: var(--text-2); font-size: 15px; }
.layer-swatches { display: flex; gap: 6px; margin-top: 20px; }
.layer-swatches span { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); }

/* ---------- Color swatches --------------------------------- */
.scale {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.swatch {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; background: var(--surface);
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.swatch .chip { height: 72px; }
.swatch .meta { padding: 10px 12px; }
.swatch .meta .name { font-size: 13px; font-weight: 600; }
.swatch .meta .hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-top: 2px; }

.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
.state-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; background: var(--surface); display: flex; gap: 12px; align-items: center;
  cursor: pointer;
}
.state-card:hover { box-shadow: var(--shadow-sm); }
.state-dot { width: 36px; height: 36px; border-radius: var(--radius-full); flex: none; }
.state-card .name { font-size: 14px; font-weight: 600; }
.state-card .hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* accent pair cards */
.accents { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px,1fr)); gap: 16px; }
.accent-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.accent-bar { height: 80px; display: flex; }
.accent-bar > div { flex: 1; }
.accent-body { padding: 16px 18px; }
.accent-body .aname { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.accent-body .amood { font-size: 13px; color: var(--text-2); margin: 4px 0 12px; }
.accent-hexes { display: flex; flex-direction: column; gap: 4px; }
.accent-hexes span { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); cursor: pointer; }
.accent-hexes span:hover { color: var(--text); }

/* ---------- Type specimens --------------------------------- */
.type-row {
  display: grid; grid-template-columns: 168px 1fr; gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline;
}
.type-row:last-child { border-bottom: 1px solid var(--border); }
.type-meta .tname { font-family: var(--font-mono); font-size: 13px; }
.type-meta .tspec { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.type-sample { color: var(--text); overflow: hidden; }
.fr { font-family: var(--font-display); }
.in { font-family: var(--font-ui); }
.mo { font-family: var(--font-mono); }

.font-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 8px; }
.font-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: var(--surface); }
.font-card .big { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.font-card .role { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.font-card .fam { font-size: 17px; font-weight: 600; margin: 6px 0 4px; }
.font-card .desc { font-size: 13px; color: var(--text-2); }

/* ---------- Spacing / radius / elevation ------------------- */
.space-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; }
.space-row .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); width: 116px; flex: none; }
.space-bar { height: 18px; background: var(--ink-950); border-radius: 3px; }
[data-theme="dark"] .space-bar { background: var(--white); }

.radius-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 14px; }
.radius-card { text-align: center; }
.radius-box {
  height: 88px; background: var(--surface-2);
  border: 1px solid var(--border-strong); margin-bottom: 10px;
}
.radius-card .lbl { font-family: var(--font-mono); font-size: 12px; }
.radius-card .val { font-size: 12px; color: var(--text-3); }

.shadow-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 22px; }
.shadow-card { background: var(--surface); border-radius: var(--radius-lg); height: 96px; display: grid; place-items: center; }
.shadow-card .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* ---------- Logo demos ------------------------------------- */
.logo-demos { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 16px; }
.logo-tile { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: grid; place-items: center; min-height: 120px; }
.logo-tile.dark { background: var(--ink-950); }
.logo-tile.paper { background: var(--paper-50); }
.lw { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.04em; }
.lw.on-dark { color: #fff; }
.lw.on-light { color: var(--ink-950); }
.mono-tile { width: 56px; height: 56px; border-radius: var(--radius-lg); display:grid; place-items:center; font-family: var(--font-display); font-weight: 600; font-size: 34px; }

/* ---------- Demo container --------------------------------- */
.demo {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; background: var(--surface); margin-bottom: 8px;
}
.demo-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Buttons ---------------------------------------- */
.btn {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .05s;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink-950); color: var(--white); }
.btn-primary:hover { background: var(--ink-800); }
[data-theme="dark"] .btn-primary { background: var(--white); color: var(--ink-950); }
[data-theme="dark"] .btn-primary:hover { background: var(--ink-200); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-sm { font-size: 13px; padding: 7px 14px; }

/* ---------- Inputs ----------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; max-width: 320px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.input {
  font-family: var(--font-ui); font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 11px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--ink-950); box-shadow: 0 0 0 3px var(--shadow-tint); }
[data-theme="dark"] .input:focus { border-color: var(--white); }
.input.err { border-color: var(--color-danger); }
.hint { font-size: 12px; color: var(--text-3); }
.hint.err { color: var(--color-danger); }

/* ---------- Badges ----------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--radius-full); line-height: 1.4;
}
.badge-neutral { background: var(--surface-2); color: var(--text-2); }
.badge-success { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.badge-warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.badge-danger  { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.badge-info    { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Product card ----------------------------------- */
.cards-demo { display: grid; grid-template-columns: repeat(auto-fill,minmax(248px,1fr)); gap: 16px; }
.pcard {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pcard .thumb { height: 132px; background: var(--surface-2); position: relative; display:grid; place-items:center; }
.pcard .thumb .ph { color: var(--text-3); font-size: 28px; font-family: var(--font-display); }
.pcard .pbody { padding: 16px 18px; }
.pcard .ptitle { font-size: 16px; font-weight: 600; }
.pcard .pmeta { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.pcard .prow { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* ---------- Mini dashboard nav demo ------------------------ */
.navdemo {
  display: flex; gap: 4px; flex-direction: column; width: 220px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px; background: var(--surface);
}
.navdemo .ni {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--radius-md); font-size: 14px; color: var(--text-2); cursor: pointer;
}
.navdemo .ni:hover { background: var(--surface-2); color: var(--text); }
.navdemo .ni.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.navdemo .ni .ico { width: 16px; height: 16px; border-radius: 4px; background: var(--text-3); flex:none; }
.navdemo .ni.active .ico { background: var(--text); }

/* ---------- Accent showcase -------------------------------- */
.accent-switch { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.accent-tab {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: var(--radius-full); padding: 8px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: border-color .15s, color .15s;
}
.accent-tab .sw { width: 14px; height: 14px; border-radius: 50%; }
.accent-tab[aria-pressed="true"] { border-color: var(--text); color: var(--text); }

.showcase-stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
}
.showcase-context {
  padding: 36px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 16px;
}
.showcase-context .ctx-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.showcase-context .ctx-domain { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.showcase-context .ctx-tokens { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.showcase-context .ctx-tokens .tk { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.showcase-context .ctx-tokens .tk .sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); }

/* the guest capture card — consumes --accent / --accent-2 */
.guest {
  --accent: var(--aurum); --accent-2: var(--aurum-2); --accent-contrast: #0A0A0A;
  background: var(--white); color: var(--ink-950);
  padding: 40px 36px; display: flex; flex-direction: column; gap: 18px;
  transition: --accent .3s;
}
.guest .g-mono { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--accent); display:grid; place-items:center; color: var(--accent-contrast); font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.guest h3 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--ink-950); }
.guest .g-sub { font-size: 15px; color: var(--ink-700); line-height: 1.55; }
.guest .g-drop {
  border: 1.5px dashed var(--accent); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  padding: 26px; text-align: center; font-size: 14px; color: var(--ink-700);
}
.guest .g-voice { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-800); }
.guest .g-voice .vbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display:grid; place-items:center; flex:none; }
.guest .g-voice .vbtn::after { content:""; width: 0; height: 0; border-left: 11px solid var(--accent-contrast); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.guest .g-submit {
  background: var(--accent); color: var(--accent-contrast); border: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 16px;
  padding: 13px; border-radius: var(--radius-md); cursor: pointer; margin-top: 4px;
}
.guest .g-chip { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-full); background: var(--accent-2); color: var(--ink-950); }

/* ---------- Responsive ----------------------------------------------------
   Collapse the multi-column component grids on mobile. These live here (not
   only in base.css) so they win the cascade over the desktop defaults above,
   which load after base.css. ------------------------------------------------ */
@media (max-width: 880px) {
  .layers,
  .font-cards,
  .showcase-stage { grid-template-columns: 1fr; }
}