/* Rachid in the RAED design system — design pass step 2, 2026-10-16.
   The colours, fonts and frame now come from the whole-app layer (v2.css :root points at
   r-tokens.css, v2-look.css finishes the shared parts). This file keeps what is Rachid's
   own: the workspace type, its cards, fields, tabs, filters, table and the client menu.
   The logo is not touched. */

/* ── type ─────────────────────────────────────────────────────────────── */
#view-recon .rw-workspace{font-family:var(--r-sans);color:var(--r-text-1)}
#view-recon .rw-workspace h1{font-size:30px;line-height:36px;font-weight:650;letter-spacing:-.022em}
#view-recon .rw-workspace h2{letter-spacing:-.016em}
#view-recon .rw-subtitle{font-size:17px;line-height:26px}
#view-recon .rw-section-heading h2{font-size:24px;line-height:30px}
#view-recon .rw-section-heading p{font-size:15px}
#view-recon .rc-money,#view-recon .rw-impact dd,#view-recon .rw-filters span{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
#view-recon code,#view-recon .ref,#view-recon .rw-account:not(.rw-firm-context) strong{font-family:var(--r-mono)}
#view-recon .rw-account strong{font-size:14px;font-weight:600;color:var(--r-text-1)}

/* ── surfaces: one card language ──────────────────────────────────────── */
#view-recon .rw-context,#view-recon .rw-document,#view-recon .rw-upload,#view-recon .rw-disclosure,
#view-recon .rw-match-list,#view-recon .rw-download,#view-recon .rc-card{
  background:var(--r-surface);border:1px solid var(--r-line);border-radius:var(--r-rad-lg);
  box-shadow:var(--r-shadow-1),var(--r-highlight)}
#view-recon .rw-context{padding:14px 16px}
#view-recon .rw-document{padding:22px 22px 18px}
#view-recon .rw-document.is-over{outline:2px solid var(--r-accent);outline-offset:-2px;background:var(--r-accent-soft)}
#view-recon .rw-file-icon{border-radius:var(--r-rad-xs);background:var(--r-bg-sunk);border-color:var(--r-line);color:var(--r-text-2);
  font:600 11px/1 var(--r-mono);letter-spacing:.04em}
#view-recon .rw-document-empty{border:1.5px dashed var(--r-line-strong);border-radius:var(--r-rad);background:var(--r-surface-2)}
#view-recon .rw-converted{background:var(--r-accent-soft);border-color:var(--r-accent-line)}
#view-recon .rw-progress{background:var(--r-surface-2);border:1px solid var(--r-line)}
#view-recon .rw-caution{color:var(--r-warn);border-left-color:var(--r-warn);background:var(--r-warn-soft)}

/* ── buttons: press feedback, one primary colour ──────────────────────── */
#view-recon .rw-button{min-height:40px;padding:8px 14px;border-radius:var(--r-rad-sm);border:1px solid var(--r-line-strong);
  background:var(--r-surface);color:var(--r-text-1);font:550 14px/20px var(--r-sans);box-shadow:var(--r-shadow-1);
  transition:background-color var(--r-d-fast) ease,border-color var(--r-d-fast) ease,transform var(--r-d-press) var(--r-ease-out)}
#view-recon .rw-button:active{transform:scale(.97)}
#view-recon .rw-button--primary{background:var(--r-accent);border-color:var(--r-accent);color:var(--r-accent-ink)}
#view-recon .rw-button--erase{color:var(--r-bad);border-color:var(--r-bad-line);background:var(--r-surface)}
@media (hover:hover) and (pointer:fine){
  #view-recon .rw-button:hover{background:var(--r-surface-2);border-color:var(--r-text-3)}
  #view-recon .rw-button--primary:hover{background:var(--r-accent-hover);border-color:var(--r-accent-hover)}
  #view-recon .rw-button--erase:hover{background:var(--r-bad-soft);border-color:var(--r-bad)}
}
#view-recon .rw-workspace button:disabled{opacity:.45}
#view-recon .rw-text-button{color:var(--r-accent);font-weight:550}

/* ── fields ───────────────────────────────────────────────────────────── */
#view-recon .rw-workspace select,#view-recon .rw-workspace input:not([type=checkbox]):not([type=file]){
  background:var(--r-surface);color:var(--r-text-1);border:1px solid var(--r-line-strong);border-radius:var(--r-rad-sm);
  min-height:40px;padding:9px 12px;transition:border-color var(--r-d-fast) ease,box-shadow var(--r-d-fast) ease}
#view-recon .rw-workspace select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--r-text-3) 50%),linear-gradient(135deg,var(--r-text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat}
#view-recon .rw-workspace select:focus,#view-recon .rw-workspace input:focus{outline:none;border-color:var(--r-accent);box-shadow:var(--r-focus)}
#view-recon .rw-workspace input[type=checkbox]{accent-color:var(--r-accent)}
#view-recon .rw-workspace :focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
#view-recon .rw-context label,#view-recon .rw-file-choice{font-size:12px;font-weight:550;color:var(--r-text-3);letter-spacing:.01em}

/* ── tabs and filters: a sliding underline, a quiet pill ──────────────── */
#view-recon .rw-toolbar{border-color:var(--r-line)}
#view-recon .rw-sections button{position:relative;color:var(--r-text-2);border-bottom:0;transition:color var(--r-d-fast) ease}
#view-recon .rw-sections button::after{content:"";position:absolute;left:12px;right:12px;bottom:-9px;height:2px;border-radius:2px;
  background:var(--r-accent);transform:scaleX(0);transition:transform var(--r-d-base) var(--r-ease-out)}
#view-recon .rw-sections button.is-on{color:var(--r-text-1)}
#view-recon .rw-sections button.is-on::after{transform:scaleX(1)}
#view-recon .rw-filters button{border-radius:var(--r-rad-pill);border-color:var(--r-line);background:var(--r-surface);
  transition:background-color var(--r-d-fast) ease,border-color var(--r-d-fast) ease,transform var(--r-d-press) var(--r-ease-out)}
#view-recon .rw-filters button:active{transform:scale(.97)}
#view-recon .rw-filters button.is-on{background:var(--r-text-1);border-color:var(--r-text-1);color:var(--r-bg)}
#view-recon .rw-filters button.is-on span{color:inherit;opacity:.7}

/* ── the reconciliation itself ────────────────────────────────────────── */
#view-recon .rw-match-list{overflow:hidden}
#view-recon .rw-match{border-color:var(--r-line)}
#view-recon .rw-match>summary{transition:background-color var(--r-d-fast) ease}
@media (hover:hover) and (pointer:fine){#view-recon .rw-match>summary:hover{background:var(--r-surface-2)}}
#view-recon .rw-validation{color:var(--r-accent);font-weight:550}
#view-recon .rw-validation.is-auto{color:var(--r-warn)}
#view-recon .rc-table th{background:var(--r-bg-sunk);color:var(--r-text-3);font-weight:600}
#view-recon .rc-table td{border-color:var(--r-line)}
#view-recon .rc-table--rows tbody tr:hover td{background:var(--r-surface-2)}
#view-recon .rc-month.is-on{box-shadow:inset 0 0 0 1px var(--r-accent-line)}
#view-recon .rc-line--total td{border-top-color:var(--r-text-1);background:none}
#view-recon .rc-residual.is-gap{border-color:var(--r-bad-line)}
#view-recon .rc-tag--bank{border-color:color-mix(in srgb,var(--r-info) 40%,transparent)}
#view-recon .rc-tag--ledger{color:var(--r-text-2);border-color:var(--r-line-strong)}
#view-recon .rc-tab-n--warn{background:var(--r-warn-soft)} #view-recon .rc-tab-n--good{background:var(--r-accent-soft)}
#view-recon .rc-tab-n--info{background:var(--r-info-soft)}
#view-recon .rc-kind{color:var(--r-text-2);border-color:var(--r-line-strong)}
#view-recon .rc-kind--ambiguous{color:var(--r-bad);border-color:var(--r-bad-line)}
#view-recon .rc-kind--accepted{color:var(--r-accent);border-color:var(--r-accent-line)}
#view-recon .rc-analysis{border-color:var(--r-line);background:var(--r-surface)}
#view-recon .rc-writing{border-color:var(--r-line-strong)}
#view-recon .rc-group-totals{background:var(--r-bg-sunk)}
#view-recon .rc > .errbar[role=alert],#view-recon .rc > .rc-notice,#view-recon .rc > .rc-busy{box-shadow:var(--r-shadow-2)}

/* ── owner panel: cabinets, client cards and their "…" menu ───────────── */
#view-recon .rw-owner{background:var(--r-surface-2);color:var(--r-text-1);border:1px solid var(--r-line);border-radius:var(--r-rad-lg)}
#view-recon .rw-owner-card{background:var(--r-surface);border-color:var(--r-line);border-radius:var(--r-rad);box-shadow:var(--r-shadow-1),var(--r-highlight);transition:background-color var(--r-d-fast) ease,border-color var(--r-d-fast) ease}
#view-recon .rw-owner-head p{color:var(--r-text-2)}
#view-recon .rw-owner-card span{color:var(--r-text-3)}
#view-recon .rw-owner-open{transition:background-color var(--r-d-fast) ease,transform var(--r-d-press) var(--r-ease-out)}
#view-recon .rw-owner-open:active{transform:scale(.985)}
#view-recon .rw-owner-open:focus-visible{outline-color:var(--r-accent)}
#view-recon .rw-more-btn{color:var(--r-text-3)}
@media (hover:hover) and (pointer:fine){
  #view-recon .rw-owner-open:hover{background:none}#view-recon .rw-owner-card:has(.rw-owner-open:hover){background:var(--r-surface-2);border-color:var(--r-line-strong)}
  #view-recon .rw-more-btn:hover{background:var(--r-surface-2);color:var(--r-text-1)}
}
#view-recon .rw-more[open]>.rw-more-btn{background:var(--r-surface-2);color:var(--r-text-1)}
#view-recon .rw-more-menu{background:var(--r-raised);border-color:var(--r-line);box-shadow:var(--r-shadow-3),var(--r-highlight)}
#view-recon .rw-menu-item:hover{background:var(--r-surface-2)}
#view-recon .rw-menu-item--erase{color:var(--r-bad)}
#view-recon .rw-owner .rw-button--erase{color:var(--r-bad);border-color:var(--r-bad-line)}
#view-recon .rw-workspace .rw-owner input:not([type=checkbox]):not([type=file]){background:var(--r-surface);color:var(--r-text-1);border-color:var(--r-line-strong)}
#view-recon .rw-erasure-banner{border-color:var(--r-bad-line);background:var(--r-bad-soft);color:var(--r-text-1)}

/* ── dialogs and enter motion ─────────────────────────────────────────── */
#view-recon .rw-history-dialog,.rw-history-dialog{background:var(--r-raised);border-color:var(--r-line);box-shadow:var(--r-shadow-3)}
.rw-history-dialog::backdrop{background:var(--r-scrim)}
#view-recon.is-on .rw-workspace{animation:r-enter var(--r-d-slow) var(--r-ease-out)}
@keyframes r-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #view-recon.is-on .rw-workspace{animation:none}
  #view-recon .rw-sections button::after{transition:none}
  #view-recon .rw-button:active,#view-recon .rw-filters button:active,#view-recon .rw-owner-open:active{transform:none}
}