/* =====================================================================
   css/brandv2.workspace.css -- BRAND SYSTEM V2, wave 1.
   ASSET DETAIL (workspace .cc2 / aw-*), shared modal shell, and the
   Today's Brief guidance card. Flag-gated presentation layer.

   LAW
   - EVERY selector is scoped under html.brand-v2: zero rules match when
     the flag is off. No behavior, no markup, no data change.
   - Tokens only. No raw hex (brand ramp lives in css/brandv2.tokens.css);
     rgba() is used exclusively for neutral shadow/scrim alpha, per the
     spec elevation recipe (rgba(6,42,44,...) = brand ink at alpha).
   - PHOTOGRAPHY LAW: this file never touches .aw-hero-scrim,
     .aw-hero-scrim--bare, or the inline overlay/crop styles emitted from
     balenAssetHero.heroCssVars. The workspace hero stays bottom-band
     only; 44%/76% cutoffs and 0.48/0.55 floors are test-pinned.
   - CASCADE: dashboard.js injects <style id="aw-style"> INSIDE the body,
     so it always follows this sheet in document order. Every override
     here therefore out-ranks aw-style by SPECIFICITY (html.brand-v2
     descendant = +1 type +1 class), never by order. Rules that must beat
     css/premium.css (equal-or-higher specificity, e.g. html .cc2 .card)
     carry the .cc2 hop so they win on specificity alone; load order
     after premium.css is still the recommended wiring.
   - !important appears ONLY where an inline style attribute (brief cards,
     which are authored inline in app.js) cannot be beaten any other way.
   ===================================================================== */

/* ---- scoped primitives (inert when the flag is off) ------------------ */
html.brand-v2 {
  --bv2-elev: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
  --bv2-elev-hover: 0 2px 4px rgba(6, 42, 44, .06), 0 14px 32px rgba(6, 42, 44, .10);
  --bv2-ease: cubic-bezier(.2, .7, .3, 1);
  --bv2-t-micro: 160ms;
  --bv2-t-sheet: 240ms;
}
html.brand-v2[data-theme="dark"] {
  --bv2-elev: none;
  --bv2-elev-hover: none;
}

/* =====================================================================
   1. CARD FAMILY -- one chrome for every workspace card
   ===================================================================== */
html.brand-v2 .cc2 .card,
html.brand-v2 .cc2 .cc2-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--bv2-elev);
  transition: transform var(--bv2-t-micro) var(--bv2-ease),
              box-shadow var(--bv2-t-micro) var(--bv2-ease),
              border-color var(--bv2-t-micro) var(--bv2-ease),
              background-color var(--bv2-t-micro) var(--bv2-ease);
}
@media (hover: hover) {
  html.brand-v2 .cc2 .card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--bv2-elev-hover);
  }
}
html.brand-v2 .cc2 .card.clickable:active {
  transform: translateY(0) scale(.99);
}
/* Dark: shadows off; the 1px line + slightly lighter surface carry the
   elevation story (spec section 5). Out-ranks premium.css's dark rule
   (0,2,1) at (0,3,1). */
html.brand-v2[data-theme="dark"] .cc2 .card,
html.brand-v2[data-theme="dark"] .cc2 .cc2-card {
  box-shadow: none;
  border-color: var(--line);
  background: var(--surface);
}

/* In-card serif titles (balances / exchange / recent activity parity):
   editorial weight per spec type scale (Newsreader 500-600). */
html.brand-v2 .cc2 .aw-card-title,
html.brand-v2 .cc2 .cc2-exch-card > .cc2-section-eyebrow > span:first-child {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* =====================================================================
   2. HERO CARD -- taller presence via card chrome only.
   The media node, its inline crop/overlay styles and both scrim layers
   are NOT touched (photography law).
   ===================================================================== */
html.brand-v2 .cc2 .card:has(.aw-hero-photo) {
  border-radius: 20px;             /* hero media radius per spec */
}
html.brand-v2 .cc2 .aw-hero-photo {
  height: 248px;
  border-radius: 20px 20px 0 0;
}
/* Serif identity: Newsreader 600, spec editorial range (24-34px). */
html.brand-v2 .cc2 .aw-hero-name {
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.015em;
}
html.brand-v2 .cc2 .aw-hero-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}
html.brand-v2 .cc2 .aw-hero-id {
  left: 22px;
  right: 22px;
  bottom: 18px;
}

/* Status pills: tinted --accent-tint chips, no saturated fills. The
   tint is OPAQUE, so readability never depends on what the photo shows
   underneath and the scrim math stays untouched. */
html.brand-v2 .cc2 .aw-hero-pill,
html.brand-v2 .cc2 .aw-hero-chip {
  background: var(--accent-tint);
  color: var(--accent-text);
  border: 1px solid rgba(6, 42, 44, .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-weight: 600;
  letter-spacing: .01em;
}
html.brand-v2 .cc2 .aw-pill-dot { background: var(--accent); }
html.brand-v2 .cc2 .aw-hero-pill.is-ok .aw-pill-dot { background: var(--pos-text); }
html.brand-v2[data-theme="dark"] .cc2 .aw-hero-pill,
html.brand-v2[data-theme="dark"] .cc2 .aw-hero-chip {
  border-color: rgba(255, 255, 255, .10);
}

/* Settings gear: quiet glass control, brand focus ring. */
html.brand-v2 .cc2 .aw-hero-gear {
  transition: background-color var(--bv2-t-micro) var(--bv2-ease),
              transform var(--bv2-t-micro) var(--bv2-ease);
}
html.brand-v2 .cc2 .aw-hero-gear:active { transform: scale(.94); }

/* Metric strip: mono numerals, hairline dividers, calm caps labels. */
html.brand-v2 .cc2 .aw-metric-strip { padding: 20px 24px 22px; }
html.brand-v2 .cc2 .aw-metric-cell + .aw-metric-cell { border-left: 1px solid var(--line); }
html.brand-v2 .cc2 .aw-metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}
html.brand-v2 .cc2 .aw-metric-value {
  font-family: var(--font-mono);
  font-weight: 700;                 /* money law: mono + bold + tabular */
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
html.brand-v2 .cc2 .aw-metric-sub { color: var(--text-tertiary); }
html.brand-v2 .cc2 .aw-metric-cell {
  border-radius: 10px;
  transition: background-color var(--bv2-t-micro) var(--bv2-ease);
}
@media (hover: hover) {
  html.brand-v2 .cc2 .aw-metric-cell:hover { background: var(--surface-2); }
}

/* Taller hero on wider canvases (specificity (0,2,2) beats premium's
   (0,2,1) regardless of load order). */
@media (min-width: 1024px) {
  html.brand-v2 .cc2 .aw-hero-photo { height: 300px; }
  html.brand-v2 .cc2 .aw-hero-name { font-size: 34px; }
  html.brand-v2 .cc2 .aw-hero-id { left: 26px; right: 26px; bottom: 22px; }
}
@media (min-width: 1120px) {
  html.brand-v2 .cc2 .aw-hero-photo { height: 320px; }
  html.brand-v2 .cc2 .aw-metric-value { font-size: 23px; }
}
@media (min-width: 1440px) {
  html.brand-v2 .cc2 .aw-hero-photo { height: 344px; }
  html.brand-v2 .cc2 .aw-hero-name { font-size: 34px; }  /* spec cap */
}

/* Month navigator: tinted hover, mono label. */
html.brand-v2 .cc2 .aw-nav-btn {
  border: 1px solid var(--line);
  color: var(--text-primary);
  transition: background-color var(--bv2-t-micro) var(--bv2-ease),
              border-color var(--bv2-t-micro) var(--bv2-ease);
}
@media (hover: hover) {
  html.brand-v2 .cc2 .aw-nav-btn:hover:not(:disabled) {
    background: var(--accent-tint);
    border-color: var(--accent-tint);
  }
}
html.brand-v2 .cc2 .aw-nav-label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* =====================================================================
   3. OWNER IMPACT -- one headline number, supporting rows quieter
   ===================================================================== */
html.brand-v2 .cc2 .aw-oi-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  color: var(--text-primary);
}
/* The FIRST tile is the headline; siblings support it. Positive business
   figures keep their canonical money-direction token (never re-colored). */
html.brand-v2 .cc2 .aw-oi-tiles > div:first-child .aw-oi-value { font-size: 30px; }
html.brand-v2 .cc2 .aw-oi-value.is-pos { color: var(--pos-text); }
@media (min-width: 1120px) {
  html.brand-v2 .cc2 .aw-oi-value { font-size: 23px; }
  html.brand-v2 .cc2 .aw-oi-tiles > div:first-child .aw-oi-value { font-size: 32px; }
}

/* By-partner supporting cards: quieter wash, chip radius family. */
html.brand-v2 .cc2 .aw-partner-card {
  background: var(--surface-2);
  border-radius: 12px;
  transition: background-color var(--bv2-t-micro) var(--bv2-ease);
}
@media (hover: hover) {
  html.brand-v2 .cc2 .aw-partner-card:hover { background: var(--accent-tint); }
}
html.brand-v2 .cc2 .aw-partner-name { font-weight: 600; }
html.brand-v2 .cc2 .aw-partner-mlabel { color: var(--text-tertiary); }

/* =====================================================================
   4. BALANCES + RECENT ACTIVITY -- quieter secondary rows
   ===================================================================== */
html.brand-v2 .cc2 .aw-bal-row + .aw-bal-row::before,
html.brand-v2 .cc2 .aw-act-row + .aw-act-row::before {
  border-top: 1px solid var(--line);
}
html.brand-v2 .cc2 .aw-bal-name {
  font-weight: 500;
  color: var(--text-primary);
}
html.brand-v2 .cc2 .aw-bal-amt,
html.brand-v2 .cc2 .aw-bal-total {
  font-family: var(--font-mono);
  font-weight: 700;                 /* money law */
  font-variant-numeric: tabular-nums;
}
html.brand-v2 .cc2 .aw-bal-total { font-size: 18px; }
html.brand-v2 .cc2 .aw-bal-sec {
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}
html.brand-v2 .cc2 .aw-bal-avatar {
  background: var(--accent-tint);
  color: var(--accent-text);
}
html.brand-v2 .cc2 .aw-act-ico { border-radius: 10px; }
html.brand-v2 .cc2 .aw-act-ico.is-res {
  background: var(--accent-tint);
  color: var(--accent-text);
}
html.brand-v2 .cc2 .aw-act-title { font-weight: 600; }
html.brand-v2 .cc2 .aw-act-meta,
html.brand-v2 .cc2 .aw-act-when {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Exchange inner tiles: same quiet-wash family as partner cards. */
html.brand-v2 .cc2 .cc2-exch-tile {
  background: var(--surface-2);
  border-color: transparent;
  border-radius: 12px;
}
html.brand-v2 .cc2 .cc2-exch-tile-sub { color: var(--text-tertiary); }
html.brand-v2 .cc2 .cc2-exch-tile-net {
  border-top: 1px solid var(--line);
  color: var(--text-secondary);
}

/* =====================================================================
   5. TODAY'S BRIEF (#cc-today-brief > .card.cc-brief) -- calm guidance
   card. Inner content is inline-styled in app.js; only the surfaces the
   cascade can reach are restyled. !important is used ONLY against
   inline style attributes.
   ===================================================================== */
html.brand-v2 .cc-brief {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--bv2-elev);
  padding: 20px !important;         /* inline padding:16px on the card */
}
html.brand-v2[data-theme="dark"] .cc-brief {
  box-shadow: none;
}
/* Balo law: the brief still embeds the v1 cartoon mascot, which the V2
   character bible declares off-brand (never cartoon style). Presentation
   only: hidden under the flag; classic UI keeps it. */
html.brand-v2 .cc-brief .cc-brief-balo { display: none; }
/* Action button: chip radius family + tinted hover (inline-styled). */
html.brand-v2 .cc-brief .cc-brief-act-btn {
  border-radius: 10px !important;
  transition: background-color var(--bv2-t-micro) var(--bv2-ease);
}
@media (hover: hover) {
  html.brand-v2 .cc-brief .cc-brief-act-btn:hover {
    background: var(--accent-tint) !important;
  }
}
/* Scope chips read as pills; active/inactive colors stay inline (state
   is encoded there) -- shape only. */
html.brand-v2 .cc-brief .cc-brief-scope-chip {
  border-radius: 999px !important;
}
html.brand-v2 .cc-brief .cc-brief-toggle,
html.brand-v2 .cc-brief .cc-brief-oo-toggle,
html.brand-v2 .cc-brief .cc-brief-relay-toggle {
  border-radius: 8px;
}

/* =====================================================================
   6. MODAL SHELL (#modal .modal + asset detail/settings content hooks)
   ===================================================================== */
html.brand-v2 .modal-overlay {
  background: rgba(6, 42, 44, .48);  /* brand ink veil, neutral alpha */
}
html.brand-v2 .modal {
  background: var(--surface);
  border-top-left-radius: 24px;      /* sheets/modals: 24px top (spec) */
  border-top-right-radius: 24px;
  box-shadow: 0 -8px 40px rgba(6, 42, 44, .18);
  padding-left: 20px;
  padding-right: 20px;
}
html.brand-v2 .modal::before {
  background: var(--line);           /* grab handle, token-driven */
}
html.brand-v2 .modal-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
html.brand-v2 .modal-close {
  color: var(--text-tertiary);
  transition: background-color var(--bv2-t-micro) var(--bv2-ease),
              color var(--bv2-t-micro) var(--bv2-ease);
}
html.brand-v2 .modal-close:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
@media (min-width: 600px) {
  html.brand-v2 .modal { border-radius: 24px; }
}
html.brand-v2[data-theme="dark"] .modal {
  border: 1px solid var(--line);
  box-shadow: none;
}

/* Modal buttons: accent fill, 12px radius, press = accent-press (no
   opacity fades). Semantic variants re-pinned because the base override
   out-ranks .btn.danger and friends. */
html.brand-v2 .modal .btn {
  background: var(--accent);
  color: var(--accent-on);
  border-radius: 12px;
  transition: background-color var(--bv2-t-micro) var(--bv2-ease),
              transform var(--bv2-t-micro) var(--bv2-ease),
              opacity var(--bv2-t-micro) var(--bv2-ease);
}
html.brand-v2 .modal .btn:hover { background: var(--accent-press); opacity: 1; }
html.brand-v2 .modal .btn:active { transform: scale(.98); }
html.brand-v2 .modal .btn.danger { background: var(--red); }
html.brand-v2 .modal .btn.gr { background: var(--green); }
html.brand-v2 .modal .btn.gold { background: var(--amber); }
html.brand-v2 .modal .btn-out {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--line);
  border-radius: 12px;
}
html.brand-v2 .modal .btn-out:hover { background: var(--surface-2); }
html.brand-v2 .modal .btn-sm { border-radius: 10px; }

/* Modal form fields: label rhythm per spec (12/500, +0.02em). */
html.brand-v2 .modal label.fl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-secondary);
}
html.brand-v2 .modal input,
html.brand-v2 .modal select,
html.brand-v2 .modal textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--bv2-t-micro) var(--bv2-ease),
              box-shadow var(--bv2-t-micro) var(--bv2-ease);
}
html.brand-v2 .modal input:focus,
html.brand-v2 .modal select:focus,
html.brand-v2 .modal textarea:focus {
  border-color: var(--accent);
}

/* =====================================================================
   7. FOCUS-VISIBLE -- 2px accent ring, 2px offset, both themes
   ===================================================================== */
html.brand-v2 .cc2 .aw-metric-cell:focus-visible,
html.brand-v2 .cc2 .aw-nav-btn:focus-visible,
html.brand-v2 .cc2 .aw-hero-gear:focus-visible,
html.brand-v2 .cc2 .aw-partner-card:focus-visible,
html.brand-v2 .cc2 button:focus-visible,
html.brand-v2 .cc-brief button:focus-visible,
html.brand-v2 .modal button:focus-visible,
html.brand-v2 .modal input:focus-visible,
html.brand-v2 .modal select:focus-visible,
html.brand-v2 .modal textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =====================================================================
   8. REDUCED MOTION -- every transition authored above goes still
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.brand-v2 .cc2 .card,
  html.brand-v2 .cc2 .cc2-card,
  html.brand-v2 .cc2 .aw-hero-gear,
  html.brand-v2 .cc2 .aw-metric-cell,
  html.brand-v2 .cc2 .aw-nav-btn,
  html.brand-v2 .cc2 .aw-partner-card,
  html.brand-v2 .cc-brief .cc-brief-act-btn,
  html.brand-v2 .modal-close,
  html.brand-v2 .modal .btn,
  html.brand-v2 .modal input,
  html.brand-v2 .modal select,
  html.brand-v2 .modal textarea {
    transition: none;
  }
  html.brand-v2 .cc2 .card.clickable:hover,
  html.brand-v2 .cc2 .card.clickable:active,
  html.brand-v2 .cc2 .aw-hero-gear:active,
  html.brand-v2 .modal .btn:active {
    transform: none;
  }
}

/* ---- Critique round 1 fixes (panel consensus) -------------------------- */

/* P1 (Apple/Linear/Porsche): the hero subtitle (and title over bright
   photo regions) sat white-on-ivory where the bottom band is weakest.
   TEXT-LOCAL protection only: layered text-shadow -- the image is never
   filtered and the test-pinned band geometry is untouched. */
html.brand-v2 .aw-hero-name,
html.brand-v2 .aw-hero-sub {
  text-shadow: 0 1px 2px rgba(4, 16, 16, .55), 0 0 14px rgba(4, 16, 16, .35);
}

/* P1/P2 (Stripe/Apple/Pixar): the exchanges empty-state sentence wrapped
   AROUND the float:right "See all exchanges" link ("No active exchanges
   right [link] now."). Stack the link above the sentence; the inline
   float needs !important to displace. */
html.brand-v2 #tab-content .cmp-card > button.cmp-link:first-child {
  float: none !important;
  display: block;
  margin: 0 0 8px auto;
}

/* P2/P3 (Linear/Porsche): desktop workspace sprawled to ~1550px with
   ragged card widths. One centered editorial column. */
@media (min-width: 1024px) {
  html.brand-v2 .main--myasset #tab-content {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
  }
}