/* Settings v2 Brand page (js/brand-v2.js). Only .brand-v2 / .v2-* rules: today's Brand page is untouched by this file.
   Tiles reuse the Captions tile (.be-cap, css/brand-editors.css) so every Basic card reads the same. */
.brand-v2 .v2-cards { display: grid; gap: var(--gap-card); min-width: 0; }
.brand-v2 .v2-card { margin: 0; min-width: 0; }
.v2-card-plain { margin: 2px 0 var(--s3); color: var(--muted); font: var(--type-meta); max-width: 60ch; }
.v2-card-foot { margin: var(--s3) 0 0; font: var(--type-meta); color: var(--muted); }
.v2-card-from { margin: 0 0 var(--s2); font: var(--type-meta); color: var(--ink); }
.v2-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s3); min-width: 0; max-width: calc(var(--cols, 3) * 17rem); }
.v2-tiles.is-loading { min-height: 9rem; border-radius: var(--r-sm); background: var(--soft); }
.v2-tile { position: relative; }
.v2-tile.is-on::after {
  content: ''; position: absolute; top: calc(var(--s2) + 8px); right: calc(var(--s2) + 8px); width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue, #2f6fed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px var(--tile, var(--dk-paper, #fff));
}
.v2-tile:focus-visible { outline: 2px solid var(--dk-tx-blue, var(--blue, #2f6fed)); outline-offset: 2px; }
.v2-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a value with no picture yet: a neutral frame that says what it looks like */
.v2-frame.v2-ph {
  display: flex; align-items: center; justify-content: center; padding: var(--s3); text-align: center;
  background: repeating-linear-gradient(135deg, var(--soft, var(--dk-b-f2f2f0, #f2f2f0)) 0 10px, color-mix(in srgb, var(--soft, var(--dk-b-f2f2f0, #f2f2f0)) 80%, var(--line, var(--dk-b-dddddd, #ddd))) 10px 20px);
  color: var(--muted); font: var(--type-meta);
}
.v2-frame.v2-ph > span:first-child { max-width: 26ch; }
/* numbered callouts drawn over the picture: x/y are % of the frame, so they scale with it */
.v2-pin {
  position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 600 12px/1 var(--font-ui, system-ui); color: #fff; background: #111;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35);
}
.v2-callouts { display: grid; gap: 2px; margin: 4px 0 2px; }
.v2-callout { display: flex; gap: 6px; align-items: baseline; font: var(--type-meta); color: var(--ink); }
.v2-num {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 600 10px/1 var(--font-ui, system-ui); color: #fff; background: #111; transform: translateY(2px);
}
.v2-tile .be-cap-text .v2-best { color: var(--ink); margin-top: 2px; }
.v2-tile .be-cap-text .v2-best b { font-weight: 600; }
.v2-tile .be-cap-text .v2-motion { font-style: italic; }
.v2-captions .v2-capon { margin-top: var(--s3); }

/* Your channel: the profile card and the Pace line */
.v2-group { display: grid; gap: var(--gap-card); min-width: 0; }
.v2-group-title { margin: var(--s4) 0 0; font-size: 1.25rem; }
.v2-group > .card { margin: 0; }
.v2-pace-line { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; margin: 0 0 4px; }
.v2-pace .seg { margin-top: var(--s2); }

/* Advanced */
.brand-v2 .brand-fine-body { display: grid; gap: var(--s6, 32px); }
.brand-v2 .brand-fine-body[hidden] { display: none; }
.brand-v2 .v2-panel > .card, .brand-v2 .v2-panel .be-look > .card { margin: 0; }
.v2-components-body .pref { display: grid; gap: var(--s2); min-width: 0; }
.v2-components-body .pref > .pace-plain { margin: var(--s2) 0 0; font: var(--type-body-strong); color: var(--ink-strong); }
.brand-v2 .v2-components, .brand-v2 .v2-components > *, .v2-components-body .pref, .v2-components-body .pref > * { min-width: 0; max-width: 100%; }
.v2-components-body .seg { display: flex; flex-wrap: wrap; width: auto; height: auto; }
.v2-logo-video { margin-top: var(--s3); }

/* Parker's own workspaces: the preview / switch-back line */
.v2-parker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--blue-line, var(--dk-l-c9d8fb, #c9d8fb)); border-radius: var(--r-sm); background: var(--blue-soft, var(--dk-b-eef3fe, #eef3fe));
}
.v2-parker p { margin: 0; }
.v2-parker-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* a phone: each card is one row of tiles that scrolls sideways (snapping), so six cards stay short */
@media (max-width: 680px) {
  .v2-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; padding-bottom: var(--s2); gap: var(--s2); }
  .v2-tile { scroll-snap-align: start; }
}