/* Demos page: hero, chooser grid, demo stage. Relies on tokens in styles.css. */

.dm-hero { padding-block: clamp(40px, 6vw, 76px) clamp(28px, 4vw, 44px); }
.dm-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 16em; margin-bottom: 14px; }
.dm-hero .lede { margin-bottom: 18px; }
.dm-hero-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.dm-hero-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--halo); }
.dm-hero-links a:hover { text-decoration-color: var(--navy); }

.dm-choose { padding-block: 0 clamp(28px, 4vw, 44px); }
.dm-grid { display: grid; gap: 14px; }
.dm-group { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.dm-group h2 { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-3); margin: 0 4px 10px; }
.dm-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dm-card { position: relative; display: grid; align-content: start; gap: 2px; height: 100%; min-height: 44px; padding: 12px 70px 12px 14px; background: var(--paper); border-radius: 12px; border: 1.5px solid transparent; text-decoration: none; color: var(--ink); transition: background .15s, border-color .15s; }
.dm-card b { font-weight: 600; font-size: .95rem; }
.dm-card span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.dm-card em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .72rem; font-weight: 600; color: var(--navy-3); background: var(--halo-soft); padding: 3px 9px; border-radius: 99px; }
.dm-card:hover { background: #fff; border-color: var(--line); }
.dm-card[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.dm-card[aria-current="true"] span { color: #c9d4e6; }
.dm-card[aria-current="true"] em { display: none; }

.dm-stage { border-top: 1px solid var(--line-soft); background: var(--paper); }
.dm-stagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding-block: 16px 0; }
.dm-back, .dm-next { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: .9rem; color: var(--navy); text-decoration: none; }
.dm-back:hover, .dm-next:hover { text-decoration: underline; text-underline-offset: 4px; }
.dm-now { margin: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .9rem; color: var(--muted); }
.dm-now b { color: var(--ink); font-weight: 600; }
.dm-next { margin-left: auto; }
.dm-stage .section { padding-block: 16px clamp(56px, 7vw, 88px); }
.dm-stage .ex-nav, .dm-stage .wd-tabs-wrap { display: none; }

/* Link from the artist template to the real project on /work */
.wd-real { margin: 12px 0 0; }
.wd-real a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: .9rem; color: var(--navy); text-underline-offset: 4px; }

/* Appointment booking: pick a time, then confirm */
.bk-slot[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.bk-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--halo-soft); }
.bk-pick span { display: grid; font-size: .8rem; color: var(--body); }
.bk-pick b { font-size: .86rem; color: var(--ink); }

/* Document generator: letter thumbnail in place of the old note lane */
.lt-page { position: relative; height: 150px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(5, 25, 50, .18); padding: 12px 9px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.lt-page i { display: block; height: 4px; border-radius: 2px; background: #d9dee8; }
.lt-page i.short { width: 60%; }
.lt-head { display: block; height: 14px; margin-bottom: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--navy) 0 30%, var(--halo-soft) 30%); }
.lt-sign { display: block; width: 55%; height: 12px; margin-top: auto; border-bottom: 2px solid var(--navy-3); border-radius: 0 0 40% 10%; }

@media (max-width: 900px) {
  .dm-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dm-group ul { grid-template-columns: 1fr; }
  .dm-stagebar { gap: 0 14px; }
  .dm-now { order: -1; flex-basis: 100%; }
  .dm-next { margin-left: 0; }

  /* Tap targets inside demos */
  .seg button, .bk-chip, .bk-slot, .wd-seg button, .wd-view button, .wd-chips button, .wd-links button,
  .wd-win, .wd-qty button, .gen-file, .cash-toggle, .copy-toggle, .rv-match select, .dm-stage .btn-sm,
  .wd-field input:not([type="checkbox"]), .wd-check, .wd-mini { min-height: 44px; }
  .wd-swatch, .wd-editor .wd-swatch { width: 44px; height: 44px; }
  .wd-qty button { min-width: 44px; }

  /* Rows that used to scroll sideways now wrap, so no label is cut off */
  .seg { display: flex; flex-wrap: wrap; border-radius: 18px; }
  .seg button { flex: 1 1 auto; }
  .wd-seg, .wd-seg.wd-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; border-radius: 18px; }
}