/* Panels and cards, Arc-style (2026-10-29).
 *
 * Loaded after desk.css and flat.css, which flattened cards to a tint with
 * no edge, no shadow and no lift. Arc keeps a quiet surface and lets the
 * cards you can open answer the pointer:
 *
 * - Every panel: a firmer 1px hairline and no shadow (Arc: cards rest on
 *   a border; shadows belong to floating layers). Cairn's radii stay.
 * - Cards that open something: pointed at, they float 2px while the shadow
 *   deepens and the edge firms up; pressed, they settle back. The lift runs
 *   on a smooth ease without overshoot, the shadow a little slower than the
 *   edge. Touch and pen never lift.
 * - Selectors carry :is(body, #oc-arc):is(body, #oc-arc-2), which scores
 *   as two ids: the flat layer's card rules score one id (their
 *   :not(#th-chat-panel)), so this layer wins without more !important.
 *   No element has either id.
 * - Analyst persona cards are list rows on a transparent ground: they keep
 *   their own row tint and do not lift.
 * - Borders that carry meaning (a shared note's purple edge, a promoted
 *   scout card's dashed edge) keep it.
 */

html body {
  --card-line: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --card-line-strong: color-mix(in srgb, var(--text-primary) 17%, transparent);
  --card-rest: 0 1px 2px rgb(0 0 0 / .18);
  --card-raised: 0 8px 22px rgb(0 0 0 / .22), 0 1px 3px rgb(0 0 0 / .12);
  --card-ease: cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="light"] body {
  --card-line: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --card-line-strong: color-mix(in srgb, var(--text-primary) 20%, transparent);
  --card-rest: 0 1px 2px rgb(0 0 0 / .035);
  --card-raised: 0 6px 18px rgb(0 0 0 / .065), 0 1px 3px rgb(0 0 0 / .035);
}

/* ---- Panels ------------------------------------------------------------ */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.dash-card, .dash-strip, .mkt-card, .mkt-header, .wl-header, .wl-table-wrap,
  .pf2-card, .mc-kpi, .mc-plate, .an-sessions, .an-coverage) {
  border: 1px solid var(--card-line) !important;
  box-shadow: none !important;      /* C1: cards rest on a border; shadows float */
}

/* Markets → Dashboard only. Same hairline as the other panels (--card-line,
   1px, no shadow). The corner is the continuous one at 16px. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .dash.dash--studio :is(.dash-card, .dash-strip) {
  border: 1px solid var(--card-line) !important;
  overflow: visible !important;
  border-radius: 16px !important;
  corner-shape: squircle;
  box-shadow: none !important;
}

/* ---- Cards that open something ------------------------------------------ */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
  .ind-sector-card, .th-cov-card, .st-pick__card) {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--card-line) !important;
  box-shadow: var(--card-rest) !important;
  transform: translateY(0) !important;
  transition:
    border-color 160ms var(--card-ease),
    box-shadow 240ms var(--card-ease),
    background-color 160ms var(--card-ease),
    transform 360ms var(--card-ease) !important;
  will-change: auto;
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
    .ind-sector-card, .th-cov-card, .st-pick__card):hover {
    border-color: var(--card-line-strong) !important;
    box-shadow: var(--card-raised) !important;
    transform: translateY(-2px) !important;
    background-color: var(--bg-elevated) !important;   /* the lift is the answer; no tint */
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
    .ind-sector-card, .th-cov-card, .st-pick__card):active {
    transform: translateY(0) !important;
    box-shadow: var(--card-rest) !important;
    transition-duration: 120ms !important;
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
  .ind-sector-card, .th-cov-card, .st-pick__card):focus-within {
  border-color: var(--card-line-strong) !important;
}

/* Meaning stays in the edge. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .note-card.is-shared { border-left: 3px solid var(--clr-purple) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sc-card.sc-status-promoted { border: 1px dashed var(--border-default) !important; }

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
    .ind-sector-card, .th-cov-card, .st-pick__card) { transition: none !important; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.note-card, .pp-card, .board-card, .vtl-card, .sc-card, .pw-note,
    .ind-sector-card, .th-cov-card, .st-pick__card):is(:hover, :active) { transform: none !important; }
}