/* Maestro Concierge — shared primitives.
   Every preview in this project loads the four token files plus this one, so a
   card looks the same whether it is shown alone or composed into a screen. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-primary-600); }

button { font-family: inherit; }

/* Phones hide their scrollbars; so do the previews, so a 390px frame
   measures 390px and not 375 plus a gutter. */
::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }


/* ══ Preview page chrome ═══════════════════════════════════════════════
   Not part of the design system — the frame the specimens sit in. */

.sheet { padding: 40px 40px 72px; display: flex; flex-direction: column; gap: 34px; max-width: 1240px; margin: 0 auto; }
.sheet--dark { background: #1b1b1e; max-width: none; }

.sheet-head { display: flex; flex-direction: column; gap: 9px; }
.sheet-kicker { font: 600 11px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--color-accent-300); }
.sheet-title { font: 400 34px/1.05 var(--font-serif); letter-spacing: -.5px; color: var(--text-primary); }
.sheet-note { font: 400 14px/1.5 var(--font-sans); color: var(--text-metadata); max-width: 720px; text-wrap: pretty; }
.sheet--dark .sheet-title { color: #f6f4f0; }
.sheet--dark .sheet-note { color: rgba(246, 244, 240, .6); }

.group { display: flex; flex-direction: column; gap: 14px; }
.group-label { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--text-accent); }
.group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }
.sheet--dark .group-label { color: var(--color-accent-300); }
.sheet--dark .group-label::after { background: rgba(246, 244, 240, .14); }

.specimens { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.specimen { display: flex; flex-direction: column; gap: 9px; }
.specimen-label { font: 500 11px/1.3 var(--font-sans); color: var(--text-metadata); }
.specimen-label code { font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-accent-600); }
.sheet--dark .specimen-label { color: rgba(246, 244, 240, .45); }

/* A neutral plate so white-on-white components stay visible. */
.plate { padding: 20px; border-radius: var(--radius-row); background: var(--surface-canvas); border: 1px solid var(--border-default); }
.plate--dark { background: var(--surface-dark); border-color: transparent; }
.plate--photo { background: linear-gradient(135deg, #6a5a4a, #3a3230); border-color: transparent; }


/* ══ Phone frame ═══════════════════════════════════════════════════════ */

.phone { flex: none; padding: 11px; border-radius: 56px; background: #0d0d0f; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone-screen { position: relative; width: 390px; height: 844px; border-radius: 46px; overflow: hidden; background: var(--surface-canvas); display: flex; flex-direction: column; }

.status-bar { position: absolute; left: 0; right: 0; top: 0; height: 52px; padding: 0 26px; display: flex; align-items: flex-end; justify-content: space-between; z-index: 50; pointer-events: none; }
.status-time { font: 600 15px/1 var(--font-sans); padding-bottom: 9px; }
.status-notch { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 112px; height: 32px; border-radius: var(--radius-pill); background: #0d0d0f; }
.status-icons { display: flex; align-items: center; gap: 5px; padding-bottom: 11px; }

/* A static preview shows one frame of a scrolling screen, so content would
   otherwise be sliced mid-word at the bottom edge. This veils the cut without
   hiding that the feed continues — the tab bar sits above it. Only for screens
   whose content scrolls under a floating tab bar; a screen with a solid fixed
   footer must not get it, or the footer reads as faded out. */
.phone-screen--fade::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 104px; z-index: 31;
  background: linear-gradient(180deg, rgba(246,244,240,0) 0%, var(--surface-canvas) 66%);
  pointer-events: none;
}

.tab-bar { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 32; height: 66px; border-radius: var(--radius-pill); background: rgba(255,255,255,.97); box-shadow: var(--shadow-tabbar); display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 10px/1 var(--font-sans); color: var(--text-metadata); }
.tab.is-active { color: var(--color-primary-500); font-weight: 600; }

/* min-height:0 is what stops a tall scroll region from pushing a fixed footer
   off the bottom of the frame — without it, flex:1 refuses to shrink below
   its content and the footer is clipped away. */
.scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }


/* ══ Buttons ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-sans); letter-spacing: -.2px; cursor: pointer;
  transition: background var(--dur-press) var(--ease-standard), transform var(--dur-press) var(--ease-standard);
}
.btn:active { transform: scale(.97); }
.btn--lg { height: 56px; font-size: 15.5px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn--full { width: 100%; }

.btn--primary  { background: var(--color-primary-500); color: #fff; }
.btn--primary:hover  { background: var(--color-primary-600); }
.btn--contrast { background: var(--surface-dark); color: #fff; }
.btn--contrast:hover { background: #000; }
.btn--ghost    { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.btn--ghost:hover    { background: var(--surface-subtle); }
.btn--outline  { background: transparent; color: var(--color-tertiary-900); border-color: var(--color-accent-300); }
.btn--outline:hover  { background: rgba(255,255,255,.5); }
.btn--quiet    { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }
.btn--quiet:hover    { background: var(--surface-subtle); }

.btn-link { border: none; background: transparent; padding: 6px 0; font: 500 12.5px/1 var(--font-sans); color: var(--text-metadata); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-inline { border: none; background: transparent; padding: 6px 0; font: 600 12.5px/1 var(--font-sans); color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }


/* ══ Segmented control ═════════════════════════════════════════════════ */

.seg { display: flex; align-items: center; gap: 3px; height: 44px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sandal); }
.seg--fill { width: 100%; }
.seg-opt {
  flex: 1; height: 38px; border: none; border-radius: var(--radius-pill); background: transparent;
  font: 500 13px/1 var(--font-sans); letter-spacing: -.2px; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-press) var(--ease-standard);
}
.seg-opt.is-active { background: var(--surface-default); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-card); }


/* ══ Chips, tags, badges ═══════════════════════════════════════════════ */

.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.chip--photo   { height: 28px; background: var(--photo-chip); color: var(--text-primary); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.chip--warning { height: 28px; background: var(--color-warning-bg); color: var(--color-primary-700); }
.chip--dark    { height: 26px; padding: 0 10px; gap: 5px; background: var(--photo-chip-dark); color: #fff; font-size: 11.5px; }
.chip--gallery { height: 26px; padding: 0 10px; background: var(--gallery-chip); color: #fff; backdrop-filter: blur(6px); }
.chip--meta    { height: 28px; background: var(--surface-subtle); color: var(--text-secondary); font-weight: 500; font-size: 12.5px; }

/* Filter chips — the feed's category row and the preferences sheet. */
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-default);
  font: 600 13px/1 var(--font-sans); letter-spacing: -.2px; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-press) var(--ease-standard), transform var(--dur-press) var(--ease-standard);
}
.chip-filter:active { transform: scale(.95); }
.chip-filter.is-on { background: var(--surface-dark); border-color: var(--surface-dark); color: #fff; }
.chip-filter--lg { height: 38px; }
.chip-filter .count { opacity: .5; font-weight: 500; }

.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--surface-sandal); color: var(--color-tertiary-900); font: 500 12px/1 var(--font-sans); }

.badge-tier { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-primary-50); color: var(--color-primary-700); font: 600 12px/1 var(--font-sans); }
.badge-tier .dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-primary-500); }
.badge-tier--dark { height: 26px; padding: 0 11px; gap: 6px; background: var(--on-dark-chip); color: #fff; }
.badge-tier--dark .dot { background: var(--color-primary-400); }

.chip-savings { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--color-success-bg); color: var(--color-positive-500); font: 600 12px/1 var(--font-sans); }
.chip-savings--solid { height: 25px; padding: 0 10px; background: var(--color-savings-green); color: #fff; }

.chip-sent   { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--color-booked-green); color: var(--color-positive-500); font: 600 11px/1 var(--font-sans); }
.chip-closed { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-subtle); color: var(--text-metadata); font: 600 11px/1 var(--font-sans); }

.count-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary-500); color: #fff; font: 600 11px/19px var(--font-sans); text-align: center; border: 2px solid var(--surface-canvas); }


/* ══ Heat meter ════════════════════════════════════════════════════════
   Five segments. Demand, not a rating — it fills as the window closes. */

.heat { display: flex; align-items: center; gap: 3px; }
.heat span { width: 13px; height: 5px; border-radius: var(--radius-pill); background: var(--border-default); }
.heat span.is-on { background: var(--color-primary-500); }
.heat--bar { flex: 1; gap: 4px; }
.heat--bar span { flex: 1; width: auto; height: 6px; }


/* ══ Section heading ═══════════════════════════════════════════════════ */

.section-head { display: flex; align-items: center; gap: 10px; }
.section-head .rule { flex: 1; height: 1px; background: var(--border-default); }
.live-dot { position: relative; display: inline-flex; width: 7px; height: 7px; flex: none; }
.live-dot span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-primary-500); }
.live-dot span:last-child { animation: pulseRing 2s var(--ease-standard) infinite; }


/* ══ Circular controls ═════════════════════════════════════════════════ */

.circle-btn {
  position: relative; width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-default);
  cursor: pointer; box-shadow: var(--shadow-card); transition: transform var(--dur-press) var(--ease-standard);
}
.circle-btn:active { transform: scale(.94); }
.circle-btn--photo { border: none; background: rgba(255,255,255,.9); box-shadow: var(--shadow-hard-5); }
.circle-btn--sandal { border: none; width: 34px; height: 34px; background: var(--surface-sandal); box-shadow: none; }

/* The save heart. Three sizes, three surfaces, two states. */
.heart { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: none; border-radius: var(--radius-pill); background: var(--surface-subtle); cursor: pointer; transition: transform var(--dur-press) var(--ease-standard), background var(--dur-press) var(--ease-standard); }
.heart:active { transform: scale(.88); }
.heart--card  { width: 48px; height: 48px; background: var(--surface-default); border: 1px solid var(--border-default); }
.heart--photo { width: 40px; height: 40px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-hard-5); }
.heart.is-saved { background: var(--color-primary-50); }
/* Over a photograph the plate stays white — the fill alone carries the state,
   and a tinted circle would fight the image behind it. */
.heart--photo.is-saved { background: rgba(255, 255, 255, .9); }


/* ══ Surfaces ══════════════════════════════════════════════════════════ */

.card { background: var(--surface-default); border-radius: var(--radius-row); box-shadow: var(--shadow-card); }
.card--hero { border-radius: var(--radius-hero); overflow: hidden; }
.card--rail { border-radius: var(--radius-card); overflow: hidden; width: 242px; flex: none; }
.card--slab { background: var(--surface-dark); border-radius: var(--radius-card); box-shadow: var(--shadow-hard-2); color: #fff; }
.card--sandal { background: var(--surface-sandal); box-shadow: none; }
.card-pad { padding: 15px; display: flex; flex-direction: column; gap: 12px; }

.row { display: flex; gap: 12px; padding: 10px; background: var(--surface-default); border-radius: var(--radius-row); box-shadow: var(--shadow-card); cursor: pointer; transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard); }
.row:hover { box-shadow: var(--shadow-row-hover); transform: translateY(-2px); }
.row:active { transform: scale(.99); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.row-trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 2px 2px 2px 0; }

.reason-box { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: var(--radius-inner); background: var(--surface-sandal); }
.divider { height: 1px; background: var(--border-default); }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* ══ Photo plates ══════════════════════════════════════════════════════
   The design's image-slot placeholder: a warm plate with the category glyph
   behind it. Kept as CSS so no preview ever requests a remote image. */

.photo { position: relative; overflow: hidden; background: var(--surface-sandal); display: flex; align-items: center; justify-content: center; }
.photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--plate-a, #b9a68d) 0%, var(--plate-b, #6f5f4e) 100%); }
.photo > * { position: relative; }
.photo-glyph { opacity: .34; color: #fff; }
.photo--warm::before  { background: linear-gradient(135deg, #c9a982 0%, #6d4f38 100%); }
.photo--cool::before  { background: linear-gradient(135deg, #8fa2a8 0%, #3c4b52 100%); }
.photo--dusk::before  { background: linear-gradient(135deg, #ab8f9c 0%, #4a3944 100%); }
.photo--olive::before { background: linear-gradient(135deg, #a8ab8a 0%, #4b4f38 100%); }

.scrim-hero   { position: absolute; inset: 0; background: var(--scrim-hero); pointer-events: none; }
.scrim-detail { position: absolute; left: 0; right: 0; top: 0; height: 132px; background: var(--scrim-detail); pointer-events: none; }

.thumb { position: relative; width: 92px; height: 92px; flex: none; border-radius: var(--radius-thumb); overflow: hidden; }
.thumb--sm { width: 76px; height: 76px; border-radius: var(--radius-thumb-sm); }
.thumb--xs { width: 56px; height: 56px; border-radius: var(--radius-thumb-sm); }


/* ══ Sheets ════════════════════════════════════════════════════════════ */

.backdrop { position: absolute; inset: 0; background: var(--scrim-backdrop); z-index: 40; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surface-canvas); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; }
.grab { width: 44px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 2px auto 16px; }
.sheet-footer { flex: none; padding: 12px 16px 24px; background: rgba(246,244,240,.97); border-top: 1px solid var(--border-default); }