/* RAED V2 in the RAED design system — design pass step 3, 2026-10-16.
   v2.css :root points V2's colour names at the tokens (r-tokens.css), so every screen
   already wears Papier or Graphite. This file adds what a colour alone cannot: the fonts,
   one card language, press feedback, the one-row composer, the four-tab phone bar with
   its More sheet, and the motion rules. Rachid's own finish is in v2-rachid.css.
   The logo is never restyled. Hover effects only where there is a mouse. */

@font-face{font-family:"Hanken Grotesk";src:url("/v2/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("/v2/fonts/spline-sans-mono.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}

/* ── frame ─────────────────────────────────────────────────────────────── */
html{background:var(--r-bg)}
body,.frame{background:var(--r-bg);color:var(--r-text-1);font-family:var(--r-sans)}
::selection{background:var(--r-accent-soft)}
:where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}

.rail{background:var(--r-surface);border-color:var(--r-line)}
.nav-i{transition:background-color var(--r-d-fast) ease,color var(--r-d-fast) ease,transform var(--r-d-press) var(--r-ease-out)}
.nav-i:active{transform:scale(.98)}
.nav-i.is-active{color:var(--r-text-1);background:var(--r-accent-soft)}
.nav-i.is-active svg{color:var(--r-accent)}
.rail-foot{border-color:var(--r-line)}
.avatar{background:var(--r-bg-sunk);color:var(--r-text-2)}

/* ── type: one family, weight instead of a serif ─────────────────────────── */
.display{font:650 36px/42px var(--r-sans);letter-spacing:-.026em}
.title{font:650 26px/32px var(--r-sans);letter-spacing:-.02em}
.heading{font-weight:650;letter-spacing:-.012em}
.metric .v,.stat .n{font-family:var(--r-sans);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xp-playbook h2{font:650 22px/28px var(--r-sans);letter-spacing:-.016em}
.prof-t h1{letter-spacing:-.022em}
/* the nameplate's double rule is ink, not gold: gold belongs to the logo */
.plate-r{border-top-color:var(--r-text-1)}
@media (max-width:900px){.display{font-size:30px;line-height:36px}.title{font-size:23px;line-height:29px}}

/* ── one card language ─────────────────────────────────────────────────── */
.card,.suggest,.obj,.ag,.chief,.panel,.cmp-c,.conflict,.answer-view,.artifact-card,.home-context,.chal,
.answer-view .md-table-wrap{
  border-color:var(--r-line);border-radius:var(--r-rad-lg);box-shadow:var(--r-shadow-1),var(--r-highlight)}
.working-turn .card{box-shadow:none}
.answer-view .md-table-wrap{box-shadow:none}
.conflict{border-color:var(--r-warn-line)}
.obj,.ag,.mission-card{transition:background-color var(--r-d-fast) ease,border-color var(--r-d-fast) ease,transform var(--r-d-press) var(--r-ease-out)}
.obj:active,.ag:active{transform:scale(.985)}
.xp-card:active{transform:none}
.obj:hover,.ag:hover{background:var(--r-surface)}
.bub{background:var(--r-bg-sunk);border:0;border-radius:16px 16px 4px 16px}
.callout{background:var(--r-text-1);color:var(--r-text-inverse);box-shadow:var(--r-shadow-2)}
.chip,.conf,.gap,.unavailable{border-color:var(--r-line)}
.chain span{background:var(--r-surface);border-color:var(--r-line)}
.errbar{border-color:var(--r-bad-line);border-radius:var(--r-rad-lg)}
.prose-a code{background:var(--r-bg-sunk);border-color:var(--r-line)}
.prose-a a{color:var(--r-accent)}

/* ── controls: press feedback everywhere, hover only with a mouse ───────── */
.btn,.pill,.today,.ask,.iconbtn,.disc,.cbtn,.csend,.stop,.m-nav a,.m-more,.m-sheet-row{
  transition:background-color var(--r-d-fast) ease,border-color var(--r-d-fast) ease,color var(--r-d-fast) ease,
    transform var(--r-d-press) var(--r-ease-out)}
.btn:active,.pill:active,.today:active,.ask:active,.stop:active{transform:scale(.97)}
.iconbtn:active,.cbtn:active{transform:scale(.92)}
.btn{font-family:var(--r-sans);font-weight:550}
.btn--sec{background:var(--r-surface);border-color:var(--r-line-strong);color:var(--r-text-1);box-shadow:var(--r-shadow-1)}
.btn--ghost{color:var(--r-text-2)}
.pill{font:550 12px/16px var(--r-sans);letter-spacing:.04em;border-color:var(--r-line-strong);color:var(--r-text-2)}
.pill[aria-pressed="true"]{color:var(--r-accent);border-color:var(--r-accent-line);background:var(--r-accent-soft)}
.today,.ask{border-color:var(--r-line-strong);color:var(--r-text-2)}
.btn--sec:hover,.pill:hover,.today:hover,.ask:hover,.iconbtn:hover,.cbtn:hover{background:inherit}
@media (hover:hover) and (pointer:fine){
  .nav-i:hover{background:var(--r-bg-sunk);color:var(--r-text-1)}
  .nav-i.is-active:hover{background:var(--r-accent-soft)}
  .obj:hover,.ag:hover{background:var(--r-surface-2);border-color:var(--r-line-strong)}
  .xp-card:hover{background:var(--r-surface);border-color:var(--r-line)}
  .btn--sec:hover{background:var(--r-surface-2);border-color:var(--r-text-3)}
  .btn--ghost:hover{background:var(--r-bg-sunk);color:var(--r-text-1)}
  .pill:hover,.today:hover,.ask:hover{background:var(--r-bg-sunk);color:var(--r-text-1)}
  .pill[aria-pressed="true"]:hover{background:var(--r-accent-soft);color:var(--r-accent)}
  .iconbtn:hover,.cbtn:hover{background:var(--r-bg-sunk);color:var(--r-text-1)}
}
.ask kbd{border-color:var(--r-line);font-family:var(--r-mono)}
.xp-input{background:var(--r-surface);border-color:var(--r-line-strong);transition:border-color var(--r-d-fast) ease,box-shadow var(--r-d-fast) ease}
.xp-input:focus{outline:0;border-color:var(--r-accent);box-shadow:var(--r-focus)}

/* ── the one-row composer ──────────────────────────────────────────────── */
.composer{background:var(--r-surface);border:1px solid var(--r-line-strong);border-radius:24px;
  box-shadow:var(--r-shadow-2),var(--r-highlight);transition:border-color var(--r-d-fast) ease,box-shadow var(--r-d-fast) ease}
.composer:focus-within{border-color:var(--r-accent);box-shadow:var(--r-shadow-2),var(--r-focus)}
.c-1{gap:2px;min-height:56px;padding:6px 6px 6px 12px}
.c-field{color:var(--r-text-1);font-family:var(--r-sans)}
.c-bar{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;flex:none}
.c-bar .cbtn{width:44px;height:44px}
.cbtn{color:var(--r-text-3)}
.csend{background:var(--r-accent);color:var(--r-accent-ink)}
.csend:not([disabled]):active{transform:scale(.92)}
.csend[disabled]{background:var(--r-bg-sunk);color:var(--r-text-3)}
@media (hover:hover) and (pointer:fine){.csend:not([disabled]):hover{background:var(--r-accent-hover)}}
.cbtn--listening,.cbtn[aria-pressed="true"]{color:var(--r-accent);background:var(--r-accent-soft)}

/* options: a small menu that grows from its button, above the composer */
.c-opts{position:relative;flex:none}
.c-opts-btn{position:relative}
.c-opts.is-open .c-opts-btn{background:var(--r-bg-sunk);color:var(--r-text-1)}
/* a dot on the button while research or a chosen expert is on, so the state stays visible */
.c-opts:has(#research[aria-pressed="true"],#expert-pick[aria-pressed="true"]) .c-opts-btn::after{
  content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--r-accent);box-shadow:0 0 0 2px var(--r-surface)}
.c-opts-menu{position:absolute;right:-6px;bottom:calc(100% + 14px);z-index:20;width:268px;padding:6px;display:grid;gap:2px;
  background:var(--r-raised);border:1px solid var(--r-line);border-radius:var(--r-rad-lg);box-shadow:var(--r-shadow-3);
  transform-origin:bottom right;opacity:0;transform:translateY(4px) scale(.97);visibility:hidden;pointer-events:none;
  transition:opacity var(--r-d-fast) ease,transform var(--r-d-base) var(--r-ease-out),visibility 0s linear var(--r-d-base)}
.c-opts.is-open .c-opts-menu{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.c-opt{width:100%;height:44px;border-radius:var(--r-rad);display:flex;align-items:center;justify-content:flex-start;gap:11px;
  padding:0 10px;color:var(--r-text-1);font:500 14px/1 var(--r-sans)}
.c-opt svg{color:var(--r-text-2);flex:none}
.c-opt:active{transform:scale(.98)}
#new-chat::after{content:"New conversation"}
#mute::after{content:"Raed's voice: on"}
#mute[aria-pressed="true"]{opacity:1;background:transparent}
#mute[aria-pressed="true"]::after{content:"Raed's voice: off"}
.c-opts-menu .c-2{display:grid;gap:2px;margin-top:4px;padding-top:6px;border-top:1px solid var(--r-line);justify-content:stretch}
.c-opts-menu .pill{width:100%;height:44px;min-width:0;padding:0 10px;border:0;border-radius:var(--r-rad);background:transparent;
  justify-content:space-between;gap:9px}
.c-opts-menu .pill:active{transform:scale(.98)}
.c-opts-menu .pill[aria-pressed="true"]{background:var(--r-accent-soft)}
#research{justify-content:flex-start}
#research::after{content:"OFF";margin-inline-start:auto}
#research[aria-pressed="true"]::after{content:"ON"}
#lang::before{content:"Language";margin-inline-end:auto}
/* The accountant's link reads French (v2-fr.js does the rest of the shell). */
body[data-role="accountant"] #new-chat::after{content:"Nouvelle conversation"}
body[data-role="accountant"] #mute::after{content:"Voix de RAED : activée"}
body[data-role="accountant"] #mute[aria-pressed="true"]::after{content:"Voix de RAED : coupée"}
body[data-role="accountant"] #research::after{content:"NON"}
body[data-role="accountant"] #research[aria-pressed="true"]::after{content:"OUI"}
body[data-role="accountant"] #lang::before{content:"Langue"}
@media (hover:hover) and (pointer:fine){
  .c-opt:hover,.c-opts-menu .pill:hover{background:var(--r-bg-sunk);color:var(--r-text-1)}
  .c-opts-menu .pill[aria-pressed="true"]:hover{background:var(--r-accent-soft);color:var(--r-accent)}
}
@media (max-width:900px){
  .c-mark{display:none}
  .c-1{padding:4px 4px 4px 14px}
  .c-field{font-size:16px}
  .dock{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
}

/* ── skeletons on the token shimmer ────────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--r-skeleton) 30%,var(--r-skeleton-shine) 50%,var(--r-skeleton) 70%);background-size:300% 100%}

/* ── phone: four tabs and the More sheet ───────────────────────────────── */
.m-nav{height:auto;min-height:64px;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--r-surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--r-line)}
.m-nav a,.m-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;
  border:0;border-radius:var(--r-rad);background:none;cursor:pointer;color:var(--r-text-3);
  font:560 11px/14px var(--r-sans);text-decoration:none;-webkit-tap-highlight-color:transparent}
.m-nav a svg,.m-more svg{width:22px;height:22px;opacity:1}
.m-nav a.is-active,.m-more.is-active{color:var(--r-accent)}
.m-nav a:active,.m-more:active{transform:scale(.92)}

.m-sheet{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end}
.m-sheet[hidden]{display:none!important}
.m-sheet-scrim{position:absolute;inset:0;background:var(--r-scrim);animation:sheet-fade var(--r-d-base) ease}
.m-sheet-panel{position:relative;display:grid;gap:2px;padding:8px 10px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--r-raised);border-top:1px solid var(--r-line);border-radius:20px 20px 0 0;box-shadow:var(--r-shadow-3);
  animation:sheet-up var(--r-d-slow) var(--r-ease-drawer)}
.m-sheet-grip{justify-self:center;width:36px;height:4px;border-radius:4px;background:var(--r-line-strong);margin:2px 0 8px}
.m-sheet-list{display:grid;gap:2px}
.m-sheet-row{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 14px;border:0;border-radius:var(--r-rad);
  background:none;color:var(--r-text-1);font:500 16px/1 var(--r-sans);text-decoration:none;cursor:pointer;text-align:start;width:100%}
.m-sheet-row svg{color:var(--r-text-2);flex:none}
.m-sheet-row.is-active{background:var(--r-accent-soft);color:var(--r-text-1)}
.m-sheet-row.is-active svg{color:var(--r-accent)}
.m-sheet-row:active{transform:scale(.98)}
#theme3{margin-top:6px;border-top:1px solid var(--r-line);border-radius:0 0 var(--r-rad) var(--r-rad);padding-top:2px}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}
@media (min-width:901px){.m-sheet{display:none!important}}

/* ── motion: a screen settles in, quickly; nothing moves for those who asked ── */
.view.is-on>.scroll>.spine,.view.is-on>.scroll>.wide{animation:view-in var(--r-d-base) var(--r-ease-out)}
@keyframes view-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
  .view.is-on>.scroll>.spine,.view.is-on>.scroll>.wide,.m-sheet-scrim,.m-sheet-panel{animation:none}
  .c-opts-menu{transition:opacity var(--r-d-fast) ease,visibility 0s linear var(--r-d-fast);transform:none}
  .btn:active,.pill:active,.today:active,.ask:active,.stop:active,.iconbtn:active,.cbtn:active,.csend:active,
  .obj:active,.ag:active,.nav-i:active,.m-nav a:active,.m-more:active,.m-sheet-row:active,.c-opt:active{transform:none}
}

/* ── small type: sentences in the sans, the mono keeps labels, dates and references ── */
.micro{font-family:var(--r-sans);letter-spacing:.005em}
.head-sub{color:var(--r-text-2)}

/* ── Take call fields, same as Rachid's ───────────────────────────────── */
#view-call select,#view-call textarea,#view-call input:not([type=checkbox]){background:var(--r-surface);color:var(--r-text-1);
  border:1px solid var(--r-line-strong);border-radius:var(--r-rad-sm);font-family:var(--r-sans);
  transition:border-color var(--r-d-fast) ease,box-shadow var(--r-d-fast) ease}
#view-call select:focus,#view-call textarea:focus,#view-call input:focus{outline:0;border-color:var(--r-accent);box-shadow:var(--r-focus)}

/* ── small type: sentences in the sans, the mono keeps labels, dates and references ── */
.micro{font-family:var(--r-sans);letter-spacing:.005em}
.head-sub{color:var(--r-text-2)}

/* ── Take call fields, same as Rachid's ───────────────────────────────── */
#view-call select,#view-call textarea,#view-call input:not([type=checkbox]){background:var(--r-surface);color:var(--r-text-1);
  border:1px solid var(--r-line-strong);border-radius:var(--r-rad-sm);font-family:var(--r-sans);
  transition:border-color var(--r-d-fast) ease,box-shadow var(--r-d-fast) ease}
#view-call select:focus,#view-call textarea:focus,#view-call input:focus{outline:0;border-color:var(--r-accent);box-shadow:var(--r-focus)}

/* ── options menu rows read as words: the label on the left, the setting on the right ── */
.c-opts-menu .pill{text-transform:none;font:500 14px/1 var(--r-sans);letter-spacing:0;color:var(--r-text-1)}
.c-opts-menu .pill svg{color:var(--r-text-2)}
#research::after,#lang,.c-opt-v{font:500 12px/1 var(--r-mono);letter-spacing:.04em;color:var(--r-text-3)}
#lang{justify-content:space-between}
#lang::before{font:500 14px/1 var(--r-sans);letter-spacing:0;color:var(--r-text-1)}
.c-opt-k{margin-inline-end:auto}
.c-opts-menu .pill[aria-pressed="true"],.c-opts-menu .pill[aria-pressed="true"] svg,
#research[aria-pressed="true"]::after,#expert-pick[aria-pressed="true"] .c-opt-v{color:var(--r-accent)}
/* a section head keeps a gap between its label and its note when they share a line */
.sec-h{gap:6px 16px;flex-wrap:wrap}