/* ============================================================
   1BB Content Machine — mockup design system
   Tokens lifted verbatim from the live app's src/app/globals.css
   so these mockups read as the real product, not a lookalike.
   ============================================================ */

:root {
  --background: #0a0a0f;
  --foreground: #e8e6e3;
  --primary: #d4a017;
  --primary-foreground: #0a0a0f;
  --secondary: #1e1e24;
  --card: #141419;
  --border: #2a2a32;
  --muted: #1e1e24;
  --muted-foreground: #8a8a96;
  --destructive: #c4534a;
  --destructive-ink: #e5837a;
  --success: #2d8b57;
  --success-ink: #5fbd8a;
  --radius: 0.625rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

.font-display {
  font-family: "Instrument Serif", Georgia, serif;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.stat-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* The signature 1BB elevated surface: top-light gradient + hairline + soft drop */
.surface {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 120px),
    var(--card);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
    0 1px 2px 0 rgba(0, 0, 0, 0.4),
    0 12px 28px -16px rgba(0, 0, 0, 0.7);
}

.surface-hover {
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}
.surface-hover:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
    0 2px 4px 0 rgba(0, 0, 0, 0.4),
    0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .surface-hover:hover {
    transform: translateY(-1px);
  }
}

/* ---------- focus ---------- */
:where(a, button, [tabindex], input, select, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- app chrome ---------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 15, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--foreground);
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary-foreground);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  font-family: "DM Sans", sans-serif;
  flex: none;
}
.brand-sub {
  color: var(--muted-foreground);
  font-size: 13px;
  font-family: "DM Sans", sans-serif;
  border-left: 1px solid var(--border);
  padding-left: 12px;
  margin-left: 2px;
}
/* On phones the tab row needs the width more than the subtitle does. Tabs also
   tighten so a four-item nav still fits — Settings was falling off the end
   with nothing on screen to say it existed. */
@media (max-width: 560px) {
  .brand-sub {
    display: none;
  }
  .topbar-inner {
    gap: 8px;
    padding: 0 12px;
  }
  .page {
    padding: 22px 14px 96px;
  }
  .tab {
    padding: 0 8px;
    gap: 5px;
    font-size: 13px;
  }
  .tab svg {
    width: 15px;
    height: 15px;
  }
}
/* Below this even tightened labels won't fit, so the row becomes an honest
   scroller: icons stay, text drops to the accessible name only. */
@media (max-width: 400px) {
  .tab {
    padding: 0 7px;
    font-size: 12.5px;
  }
}

/* ---------- tab nav ---------- */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.tab:hover {
  color: var(--foreground);
  border-bottom-color: var(--border);
}
.tab[aria-current="page"] {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}
.tab svg {
  width: 16px;
  height: 16px;
}

/* ---------- layout ---------- */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 96px;
  width: 100%;
}
.screen[hidden] {
  display: none;
}

.page-head {
  margin-bottom: 24px;
}
.page-title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 6px;
}
.page-sub {
  color: var(--muted-foreground);
  font-size: 15px;
  margin: 0;
  max-width: 62ch;
}

/* ---------- the two intake zones ---------- */
/* Hard rule from the design review: uploaded media and connected sources live
   on ONE screen but NEVER in one list. Two bounded zones, labelled by role. */
.intake {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) {
  .intake {
    grid-template-columns: minmax(0, 1fr);
  }
}

.zone {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.zone-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.zone-role {
  color: var(--muted-foreground);
  font-size: 13px;
  margin: 0 0 14px;
}
.zone-count {
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* dropzone */
.dropzone {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.014);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
  color: inherit;
  font: inherit;
  width: 100%;
  display: block;
}
.dropzone:hover,
.dropzone.is-over {
  border-color: var(--primary);
  background: rgba(212, 160, 23, 0.06);
}
.dropzone-icon {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--secondary);
  display: grid;
  place-items: center;
  color: var(--primary);
}
.dropzone-icon svg {
  width: 20px;
  height: 20px;
}
.dropzone-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
}
.dropzone-hint {
  display: block;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin: 0;
}

/* The three outcomes stay tight as one group; the DROPZONE absorbs the extra
   height instead. Spacing the bullets apart to fill the card made them read
   as three unrelated lines rather than a list. */
.outcomes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.zone .dropzone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.outcomes li {
  font-size: 12.5px;
  color: var(--muted-foreground);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.45;
}
.outcomes b {
  color: var(--foreground);
  font-weight: 600;
}
.outcomes .arrow {
  color: var(--primary);
  flex: none;
  margin-top: 1px;
}

/* integration rows */
.svc-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Grid items default to min-width:auto, which stops the row shrinking and
   makes it overflow a narrow rail. Without this the status pill gets pushed
   outside the container entirely. */
.svc-list > li {
  min-width: 0;
}
.svc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.svc:hover {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border));
  background: rgba(255, 255, 255, 0.03);
}
.svc-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--secondary);
}
.svc-logo svg {
  width: 19px;
  height: 19px;
}
.svc-body {
  min-width: 0;
  flex: 1;
}
.svc-name {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  line-height: 1.3;
}
.svc-meta {
  font-size: 12px;
  color: var(--muted-foreground);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Which folder, and how long ago, are the entire reason the row exists — so
   at narrow widths the status wraps to a second line rather than ellipsing
   the fact away. Same treatment the rail gets, applied wherever it's tight. */
@media (max-width: 700px) {
  .svc {
    align-items: flex-start;
  }
  .svc-logo {
    margin-top: 1px;
  }
  .svc-meta {
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
  }
  .svc .pill {
    margin-top: 2px;
  }
}

/* ---------- pills / badges ---------- */
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex: none;
}
.pill-on {
  background: rgba(45, 139, 87, 0.16);
  color: var(--success-ink);
}
/* "Connect" is the one ACTION on the sources card, so it carries the accent.
   It previously sat grey next to solid "Connected" and "Syncing" states —
   the only clickable thing on the card was the quietest. */
.pill-off {
  background: rgba(212, 160, 23, 0.12);
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 45%, transparent);
  font-weight: 700;
}
/* Steady state is information, not an alert — it recedes. */
.pill-on {
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--success) 45%, transparent);
}
/* The muted variant, for labels that are facts rather than controls. */
.pill-quiet {
  background: var(--secondary);
  color: var(--muted-foreground);
}
.pill-sync {
  background: rgba(212, 160, 23, 0.16);
  color: var(--primary);
}
.pill-err {
  background: rgba(196, 83, 74, 0.16);
  color: var(--destructive-ink);
}
.pill-amber {
  background: rgba(212, 160, 23, 0.14);
  color: var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  .pill-sync .dot {
    animation: pulse 1.6s ease-in-out infinite;
  }
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 5px;
  vertical-align: 1px;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- horizontal scroll affordance ----------
   A row that just stops at the screen edge reads as a bug. These fades appear
   only while there is more content in that direction, so the cut always looks
   deliberate. JS toggles .at-start / .at-end. */
.scroller {
  position: relative;
  min-width: 0;
}
.scroller::before,
.scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 10px;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 2;
}
.scroller::before {
  left: 0;
  background: linear-gradient(90deg, var(--background), transparent);
}
.scroller::after {
  right: 0;
  background: linear-gradient(270deg, var(--background), transparent);
}
.scroller.can-left::before,
.scroller.can-right::after {
  opacity: 1;
}
/* The tab row is the flex child that pushes right, so its wrapper inherits
   that job. Its fade matches the translucent topbar, not the page. */
.topbar-inner > .scroller {
  margin-left: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.topbar-inner > .scroller::before,
.topbar-inner > .scroller::after {
  bottom: 0;
  width: 30px;
}
.topbar-inner > .scroller::before {
  background: linear-gradient(90deg, #0a0a0f, transparent);
}
.topbar-inner > .scroller::after {
  background: linear-gradient(270deg, #0a0a0f, transparent);
}

/* ---------- divider ---------- */
.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 28px 0 20px;
}

/* ---------- shelf chips ---------- */
.shelf-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar {
  height: 6px;
}
.chips::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}
.chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 0 13px;
  min-height: 34px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease;
}
.chip:hover {
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
}
.chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}
.chip .n {
  opacity: 0.62;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

.search {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.search svg {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.search input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 12px 8px 32px;
  min-height: 36px;
  width: 210px;
  max-width: 46vw;
}
.search input::placeholder {
  color: var(--muted-foreground);
}
.search input:focus {
  border-color: var(--primary);
  outline: none;
}

/* ---------- media grid ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
}
.m-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.m-card:hover {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .m-card:hover {
    transform: translateY(-2px);
  }
}
.m-card[aria-pressed="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.m-thumb {
  aspect-ratio: 1 / 1;
  background: var(--secondary);
  position: relative;
  overflow: hidden;
  display: block;
}
.m-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.m-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(4px);
  color: var(--foreground);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.02em;
}
.m-badge svg {
  width: 11px;
  height: 11px;
}
.m-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(10, 10, 15, 0.85);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* A usage COUNT is the least actionable thing on a card, so it gets the
   quietest treatment. Solid amber here out-shouted every real control. */
.m-used {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(4px);
  color: var(--primary);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 600;
}

/* Video needs a glance-level affordance on the art itself — a play glyph
   inside a 10px type chip did no work, so photo and video read identically. */
.m-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.m-play svg {
  width: 42px;
  height: 42px;
  padding: 12px;
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(3px);
  border: 1.5px solid rgba(232, 230, 227, 0.75);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.m-check {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(232, 230, 227, 0.55);
  background: rgba(10, 10, 15, 0.6);
  display: none;
  place-items: center;
}
.m-card[aria-pressed="true"] .m-check {
  display: grid;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.m-check svg {
  width: 13px;
  height: 13px;
}
.m-meta {
  display: block;
  padding: 9px 10px 11px;
}
.m-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sub {
  display: block;
  font-size: 11.5px;
  color: var(--muted-foreground);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* audio waveform thumb — recordings have no image */
.wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 160, 23, 0.13), transparent 62%),
    var(--secondary);
}
.wave i {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 62%, transparent);
}

/* file thumb */
.filethumb {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--secondary);
  color: var(--muted-foreground);
}
.filethumb svg {
  width: 34px;
  height: 34px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease;
  text-decoration: none;
}
.btn:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover {
  background: color-mix(in oklch, var(--primary) 88%, white);
}
.btn-ghost {
  background: transparent;
}
/* Amber OUTLINE — for an action that repeats many times on one screen. Twelve
   solid amber buttons in a grid means none of them is the primary. */
.btn-accent {
  background: rgba(212, 160, 23, 0.1);
  border-color: color-mix(in oklch, var(--primary) 45%, transparent);
  color: var(--primary);
}
.btn-accent:hover {
  background: rgba(212, 160, 23, 0.18);
  border-color: var(--primary);
}
.btn-sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
}
/* On touch, the small button is still a real target. "Make into…" is the
   primary action on every Library card and was shipping at 32px. */
/* Touch-target sizing lives at the END of this file — see the last block. */
.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------- library ---------- */
.lib-row {
  margin-bottom: 30px;
}
.lib-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
/* Below this the inline caption squeezes the heading into an orphaned
   two-word break ("Just" / "made"), so it stacks instead. */
@media (max-width: 700px) {
  .lib-row-head {
    display: block;
  }
  .lib-row-head .lib-row-sub {
    margin-top: 2px;
  }
}
.lib-row-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.lib-row-sub {
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin: 0;
}

/* A filmstrip only earns its keep when there is more than a screenful. With
   2-3 pieces it left a quarter of the canvas dead and stretched short text
   cards to the height of tall image ones. On desktop it wraps as a grid that
   fills the width and lets each card take its natural height; it becomes a
   real scroller only on phones, where the width genuinely runs out. */
.filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
  align-items: start;
  padding-bottom: 4px;
}
@media (max-width: 700px) {
  .filmstrip {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .filmstrip > .c-card {
    flex: none;
    width: 252px;
    scroll-snap-align: start;
  }
}
.filmstrip::-webkit-scrollbar {
  height: 8px;
}
.filmstrip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}
.filmstrip::-webkit-scrollbar-track {
  background: transparent;
}

.c-card {
  min-width: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 90px),
    var(--card);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.c-card:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .c-card:hover {
    transform: translateY(-2px);
  }
}
.c-card.is-pending {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--primary) 50%, var(--border));
}
.c-top {
  padding: 12px 13px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
}
/* The accent marks what you should CLICK. A format label is a fact about the
   card, so it reads muted and the action beside it keeps the amber. */
.c-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.c-body {
  padding: 9px 13px 13px;
  flex: 1;
  min-height: 0;
}
.c-text {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  overflow: hidden;
}
/* Written pieces read as pull-quotes — the member's own best line, set large. */
.c-quote {
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: -0.005em;
  -webkit-line-clamp: 7;
  line-clamp: 7;
}
.c-from {
  font-size: 11.5px;
  color: var(--muted-foreground);
  margin: 10px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-body {
  display: flex;
  flex-direction: column;
}
.c-body .c-from {
  margin-top: auto;
  padding-top: 10px;
}

.c-preview {
  aspect-ratio: 4 / 5;
  background: var(--secondary);
  position: relative;
  overflow: hidden;
  margin: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.c-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-slide-txt {
  position: absolute;
  inset: auto 0 0;
  padding: 12px 11px;
  background: linear-gradient(0deg, rgba(10, 10, 15, 0.94), rgba(10, 10, 15, 0));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.c-stack {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(10, 10, 15, 0.82);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 600;
}
.c-foot {
  padding: 0 13px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-top: auto;
}
.c-date {
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* ---------- "Make into…" popover ---------- */
.pop {
  position: fixed;
  z-index: 90;
  width: 250px;
  padding: 7px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #17171d;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.95);
}
.pop[hidden] {
  display: none;
}
.pop-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: 7px 9px 6px;
  font-weight: 600;
}
.pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  min-height: 40px;
}
.pop-item:hover,
.pop-item:focus-visible {
  background: var(--secondary);
}
.pop-item svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex: none;
}
.pop-item small {
  display: block;
  color: var(--muted-foreground);
  font-size: 11.5px;
  line-height: 1.3;
}

/* ---------- detail sheet (the picker experience) ---------- */
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  z-index: 80;
  opacity: 0;
  transition: opacity 220ms ease;
}
.sheet-scrim[hidden] {
  display: none;
}
.sheet-scrim.is-open {
  opacity: 1;
}
.sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 81;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.sheet.is-open {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet-scrim {
    transition: none;
  }
}
.sheet-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sheet-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: all 160ms ease;
}
.icon-btn:hover {
  color: var(--foreground);
  border-color: var(--primary);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.sheet-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.sheet-preview {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--secondary);
  margin-bottom: 18px;
}
.sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kv {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 9px 12px;
  font-size: 13px;
  margin-bottom: 20px;
}
.kv dt {
  color: var(--muted-foreground);
}
.kv dd {
  margin: 0;
  font-weight: 500;
}
.sect-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin: 0 0 10px;
}
.trail {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.trail li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.014);
}
.trail .c-type {
  font-size: 10px;
}
.tag {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 0 5px 5px 0;
}

/* ---------- bulk dock ---------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 130%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: #17171d;
  box-shadow: 0 26px 60px -16px rgba(0, 0, 0, 0.95);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  max-width: calc(100vw - 28px);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar {
  display: none;
}
.dock.is-open {
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dock {
    transition: none;
  }
}
.dock-count {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 3px;
}
.dock-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex: none;
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: grid;
  gap: 9px;
  max-width: min(360px, calc(100vw - 36px));
}
.toast {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #17171d;
  padding: 12px 14px;
  font-size: 13.5px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: toast-in 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.toast svg {
  width: 17px;
  height: 17px;
  color: var(--primary);
  flex: none;
  margin-top: 1px;
}
.toast b {
  display: block;
  font-weight: 600;
}
.toast small {
  color: var(--muted-foreground);
  font-size: 12.5px;
}

/* ---------- misc ---------- */
.empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.note {
  border-left: 2px solid var(--primary);
  padding: 3px 0 3px 13px;
  color: var(--muted-foreground);
  font-size: 13px;
  margin: 0 0 18px;
  max-width: 70ch;
}
/* Pointer-specific help (⌘-click) must not be shown on a touch device. */
@media (max-width: 700px), (pointer: coarse) {
  .desk-only {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip:focus {
  top: 12px;
}

/* ---------- mockup switcher bar ---------- */
.switcher {
  background: #08080c;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.switcher-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.switcher-label {
  color: var(--muted-foreground);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.switcher a {
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  transition: all 160ms ease;
}
.switcher a:hover {
  color: var(--foreground);
  border-color: var(--border);
}
.switcher a[aria-current="page"] {
  color: var(--primary);
  border-color: color-mix(in oklch, var(--primary) 45%, transparent);
  background: rgba(212, 160, 23, 0.08);
  font-weight: 600;
}
.switcher .home {
  margin-left: auto;
}

/* ============================================================
   TOUCH TARGETS — last block on purpose.
   These have the same specificity as the base rules they raise, so they must
   come after every one of them or source order silently wins. "Make into…"
   was shipping at 32px, and the mockup switcher links at 33px.
   ============================================================ */
@media (pointer: coarse), (max-width: 700px) {
  .btn-sm {
    min-height: 44px;
    padding: 0 15px;
  }
  .switcher a {
    min-height: 44px;
    padding: 6px 13px;
  }
  .chip,
  .icon-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .search input {
    min-height: 44px;
  }
  .skip {
    min-height: 44px;
  }
  .brand {
    min-height: 44px;
  }
}