/* brandportal1027-vp · brand site visual pass (local preview only). Havbris tokens from portal.css, system font, no dark mode.
   portal.css is unlayered, so every rule here carries !important to win from inside the layer. */
@layer spk-st2-bp {
  /* taps ≥48px: language switch and the logo link on /apply */
  .lang button { min-height: 48px !important; }
  .l .row > a[data-i="title"] { min-height: 48px !important; display: inline-flex !important; align-items: center !important; }
  /* page head breathing room (title was glued to the first card) */
  #page > .top { margin-bottom: 16px !important; align-items: flex-start !important; }
  /* numbers line up */
  .num, .mg, table.mt td.num, .kpi b, .stat b { font-variant-numeric: tabular-nums !important; }
  /* photos: rights checkbox sits beside its text, not above it */
  .card > label.row:has(#ph-rights) { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 12px !important; cursor: pointer !important; }
  .card > label.row:has(#ph-rights) > input { flex: none !important; margin: 2px 0 0 !important; }
  /* photos: empty state tile, fixed 4:3, same footprint as a real photo tile */
  .bpvp-noph { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 220px !important; max-width: 100% !important; aspect-ratio: 4 / 3 !important; border: 1px dashed var(--bs) !important; border-radius: 12px !important;
    background: var(--card) !important; color: var(--deep) !important; text-align: center !important; }
  .bpvp-noph svg { width: 96px !important; height: 60px !important; }
  .bpvp-noph small { color: var(--muted) !important; font-size: 13px !important; }
  /* models: small bike placeholder in front of the model name (no brand photo yet) */
  .bpvp-th { flex: none !important; width: 56px !important; aspect-ratio: 4 / 3 !important; border-radius: 8px !important; background: var(--card) !important; border: 1px solid var(--border) !important;
    display: inline-grid !important; place-items: center !important; color: var(--deep) !important; margin-right: 12px !important; vertical-align: middle !important; }
  .bpvp-th svg { width: 38px !important; height: 24px !important; }
  table.mt td:nth-child(2) .bpvp-mn { display: flex !important; align-items: center !important; }

  @media (max-width: 820px) {
    /* bottom nav: six items fit evenly at 390 with inline-SVG icons; nothing scrolls or clips; safe-area aware */
    .mnav { overflow: hidden !important; justify-content: stretch !important; height: calc(64px + env(safe-area-inset-bottom, 0px)) !important; padding: 0 2px env(safe-area-inset-bottom, 0px) !important; z-index: 20 !important; }
    .mnav a { flex: 1 1 0 !important; min-width: 0 !important; padding: 6px 1px 4px !important; gap: 3px !important; font-size: 10.5px !important; line-height: 1.15 !important;
      text-align: center !important; white-space: normal !important; min-height: 56px !important; border-radius: 10px !important; }
    .mnav a .bpvp-ic { display: block !important; width: 22px !important; height: 22px !important; flex: none !important; }
    .mnav a .bpvp-lb { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100% !important; overflow: hidden !important; white-space: normal !important; overflow-wrap: normal !important; font-size: 10px !important; line-height: 12px !important; }
    .mnav a.on { color: var(--deep) !important; background: var(--seat) !important; }
    main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    #page > .top { padding-top: 6px !important; }
    #sheet-host .sheet, #sheet-host [class*="sheet"] { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
    /* models card: [select] [name/meta] on top, figures, then toggle (left, labelled) and Edit (right) on one line */
    #m-table tr { grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; }
    #m-table td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; }
    #m-table td:nth-child(2) { grid-column: 2 / -1 !important; grid-row: 1 !important; }
    #m-table td.num { grid-column: 2 / -1 !important; }
    #m-table td:nth-child(6) { grid-column: 2 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
    #m-table td:nth-child(6)[data-l]:after { content: attr(data-l); color: var(--muted); font-size: 13px; }
    #m-table td:nth-child(7) { grid-column: 3 !important; justify-self: end !important; }
    #m-table td[colspan] { grid-column: 1 / -1 !important; }
    /* social: [toggle] [model] on top, then the two captions full width with visible labels, then Save */
    table.mt:has(.so-m) td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
    table.mt:has(.so-m) td:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }
    table.mt:has(.so-m) td:nth-child(3), table.mt:has(.so-m) td:nth-child(4), table.mt:has(.so-m) td:nth-child(5) { grid-column: 1 / -1 !important; }
    table.mt:has(.so-m) td[data-l]:before { content: attr(data-l); display: block; color: var(--muted); font-size: 13px; margin: 4px 0 4px; }
    .bpvp-th { width: 48px !important; margin-right: 10px !important; }
    .bpvp-noph { width: calc(50% - 6px) !important; }
  }
}