/* ============================================================
   BakeryOS — POLISH · the enforcement + signature layer (v0.75)
   Loaded LAST. This file makes tokens.css TRUE: every dead token
   (--grad-*, --grain, --space-*, --ring, --tap-min, --accent,
   --page-pad*, --rayon-lg, Nuit ramps) is wired HERE, over the
   legacy sheets, in one reviewable place. Character: warm paper,
   gold thread, menu-card serif — a calm tool with a soul.
   ============================================================ */

/* ————————————————— 1 · LAYOUT RHYTHM (page + grid off the scale) ————————————————— */
.page { padding: var(--page-pad-y) var(--page-pad-x); max-width: var(--page-max); }
.grid { gap: var(--grid-gap); }
.sidebar { width: var(--sidebar-w); }
@media (max-width: 760px) {
  .page { padding: var(--space-4) var(--page-pad-x-mobile) calc(var(--space-9) * 2); }
}

/* ————————————————— 2 · BRAND CHROME — gradients + grain, tokenized ————————————————— */
.sidebar {
  background: var(--grad-sidebar);
  color: var(--on-brand);
}
/* (paper-grain dots removed from the drawer — Jesse verdict 2026-07-10: cleaner without) */
.hero, .pz-hero {
  background: var(--grad-hero);
  color: var(--on-brand);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-hero);
  position: relative; overflow: hidden;
}
.hero > *, .pz-hero > * { position: relative; }
.btn.primaire, .pz-btn.primaire { background: var(--grad-crust); }

/* ————————————————— 3 · WHITE-LABEL ACCENT — one variable recolors the app ————————————————— */
.nav a.actif {
  background: rgba(212,169,58,.16);                              /* fallback for engines without color-mix */
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--on-brand);
  box-shadow: inset 2.5px 0 0 var(--accent);
}
.nav a.actif .ic svg { color: var(--accent); stroke: var(--accent); }
.bottomnav a.actif, .bottomnav .more.actif { color: var(--accent-fonce); }
:root[data-theme="nuit"] .bottomnav a.actif, :root[data-theme="nuit"] .bottomnav .more.actif { color: var(--accent); }
.seg button.actif, .seg button.on, .pz-seg button.on, .pz-tab.on {
  background: rgba(212,169,58,.20);                              /* fallback for engines without color-mix */
  border-color: rgba(212,169,58,.55);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--txt);
}
.tag.info { color: var(--bleu); }
a, .lnk { color: var(--accent-fonce); }
:root[data-theme="nuit"] a, :root[data-theme="nuit"] .lnk { color: var(--accent); }

/* ————————————————— 4 · ONE FOCUS LANGUAGE — the gold ring, everywhere ————————————————— */
input:focus, textarea:focus, select:focus,
.bk-in:focus, .acc-input:focus, .gate-input:focus, .ob-input:focus,
.pz-qty:focus, .pz-edg:focus, .pz-ednm:focus, .pz-minput:focus, .pz-search:focus,
.pz-priceinput input:focus, .pz-field input:focus {
  box-shadow: var(--ring) !important;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--ligne-fort)) !important;
  outline: none;
}
.btn:focus-visible, .icon-btn:focus-visible, .nav a:focus-visible, .rec-card:focus-visible,
.seg button:focus-visible, .bottomnav a:focus-visible, .pz-tab:focus-visible, .pz-card:focus-visible,
.pz-btn:focus-visible, .pz-step button:focus-visible, .pz-day:focus-visible, .pz-qopen:focus-visible,
.pz-pick:focus-visible, .pz-inctog:focus-visible, [data-bk]:focus-visible, [data-act]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--ring);
}
h1:focus, h2:focus, .pz-h1:focus { outline: none; }   /* router focuses the heading for a11y — never paint it */

/* ————————————————— 5 · TYPE — the menu-card voice, enforced & fluid ————————————————— */
.hero h1, .hero .title, .pz-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 6.2vw, var(--fs-hero));
  line-height: var(--lh-tight); letter-spacing: -.5px; font-weight: var(--fw-bold);
}
.pz-date, .eyebrow {
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); font-weight: var(--fw-semibold);
  color: var(--on-brand-dim);
}
.kpi b, .kpi .num, [data-countup], .pz-val, .pz-tot b {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.pz-val { font-size: clamp(19px, 4.6vw, var(--fs-kpi)); line-height: var(--lh-tight); }
.card > h3, .card .card-h, .ing-sec-h, .pz-sect {
  font-family: var(--font-display); font-size: var(--fs-card); font-weight: var(--fw-bold);
}
.tab, td.num, .money { font-variant-numeric: tabular-nums; }

/* ————————————————— 6 · GEOMETRY — one radius family ————————————————— */
.gate-card, .ob-card, .ig-card, .bk-modal, .pz-modal-card, #install-modal .ig-card { border-radius: var(--rayon-lg); }
.bub-panel, .asst-wrap .bubble { border-radius: var(--rayon); }
.card, .pz-panel, .pz-pese, .pz-tile { border-radius: var(--rayon); }

/* ————————————————— 7 · TOUCH FLOOR — 44px for floury thumbs ————————————————— */
.icon-btn, .btn, .pz-btn, .seg button, .pz-seg button, .pz-tab, .pz-day,
.pz-step button, .pz-qopen, .pz-inctog, .pz-edadd, .pz-addbtn, .pz-back,
.bottomnav a, .bottomnav .more, .gate-btn, .acc-btn, .ob-go {
  min-height: var(--tap-min);
}
.pz-step button, .pz-qopen { min-width: var(--tap-min); }
.pz-step { align-items: stretch; }
.pz-edx, .pz-addx { min-height: 40px; min-width: 40px; }   /* destructive minis: large but visually quiet */
.topbar .icon-btn { min-width: var(--tap-min); }            /* hamburger + theme: full 44px square, not a 36px-wide ellipse */
/* dense secondary controls (reorder arrows, row ✎/🗑, modal ✕) keep their compact look but
   gain an invisible expanded hit-area — floury thumbs land, the visual density stays */
.pl-ord-b, .pr-rowctl .icon-btn, .ing-addc, .bk-x, .conv-tools .icon-btn, .pr-secctl .icon-btn { position: relative; }
.pl-ord-b::after, .pr-rowctl .icon-btn::after, .ing-addc::after, .bk-x::after,
.conv-tools .icon-btn::after, .pr-secctl .icon-btn::after {
  content: ""; position: absolute; inset: -6px;
}

/* ————————————————— 8 · NUIT — status inks that survive the dark ————————————————— */
:root[data-theme="nuit"] .pg-kind-pastry { color: #d98aa5; }
:root[data-theme="nuit"] .pl-hol-left b { color: var(--vert); }
:root[data-theme="nuit"] .neg b, :root[data-theme="nuit"] .neg { color: var(--rouge); }
:root[data-theme="nuit"] .pz-mg.ok { color: var(--vert); }
:root[data-theme="nuit"] .pz-mg.warn { color: var(--ambre); }
:root[data-theme="nuit"] .pz-mg.bad { color: var(--rouge); }

/* ————————————————— 9 · MOTION — tactile, calm, reduced-motion-safe ————————————————— */
.btn, .pz-btn, .icon-btn, .pz-card, .pz-tab, .pz-day, .pz-step button, .rec-card, .seg button, .pz-qopen {
  transition: transform var(--t-rapide), box-shadow var(--t-rapide), background var(--t-rapide), border-color var(--t-rapide);
}
.btn:active, .pz-btn:active, .icon-btn:active, .pz-step button:active, .pz-tab:active, .pz-day:active, .pz-qopen:active {
  transform: scale(.965);
}
.pz-card:hover, .rec-card:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.pz-card:active { transform: translateY(0) scale(.98); }
.pz-tiles .pz-tile { animation: fadeUp .5s cubic-bezier(.34,1.1,.34,1) both; }
.pz-tiles .pz-tile:nth-child(1) { animation-delay: .03s; }
.pz-tiles .pz-tile:nth-child(2) { animation-delay: .08s; }
.pz-tiles .pz-tile:nth-child(3) { animation-delay: .13s; }
.pz-tiles .pz-tile:nth-child(4) { animation-delay: .18s; }
.pz-tiles .pz-tile:nth-child(5) { animation-delay: .23s; }
.pz-tiles .pz-tile:nth-child(6) { animation-delay: .28s; }
.pz-quick .pz-qhead, .pz-quick .pz-qshape { animation: fadeUp .45s ease both; }
.pz-day.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
@keyframes pzGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(212,169,58,0); } 50% { box-shadow: 0 0 0 6px rgba(212,169,58,.12); } }
.pz-tile.accent { animation: fadeUp .5s cubic-bezier(.34,1.1,.34,1) both .03s; }

/* ————————————————— 10 · PESÉE HOME — the daily cover page ————————————————— */
.pz-hero { padding: var(--space-6) var(--space-6) var(--space-5); margin-bottom: var(--space-4); }
.pz-hero .pz-h1 { color: var(--on-brand); margin: 2px 0 4px; }
.pz-hero .pz-sub { color: var(--on-brand-dim); font-size: var(--fs-body-sm); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pz-hero::after {                                   /* gold thread — the signature hairline */
  content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: 0;
  height: 2.5px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .8;
}
.pz-sync { font-size: var(--fs-micro); padding: 3px 10px; border-radius: var(--rayon-pill);
  background: var(--brand-overlay-soft); color: var(--on-brand-dim); white-space: nowrap; }
.pz-sync.s-syncing { color: var(--on-brand); }
.pz-sync.s-offline { background: rgba(224,166,61,.18); color: #f0cf8a; }
.pz-sync.s-localfail { background: rgba(231,135,135,.2); color: #f3b9b9; font-weight: 700; }
.pz-copyrow { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.pz-copyrow .pz-btn { flex: 1 1 auto; margin: 0; }
.pz-copyrow .pz-btn i { font-style: normal; opacity: .65; font-size: .85em; margin-left: 4px; }
.pz-quick { padding-top: 2px; }
.pz-qhead { display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) 2px var(--space-1); border-bottom: 1px solid var(--ligne);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-card); }
.pz-qhead:first-child { padding-top: var(--space-1); }
.pz-qhead.on .pz-qnm { color: var(--accent-fonce); }
:root[data-theme="nuit"] .pz-qhead.on .pz-qnm { color: var(--accent); }
.pz-qmeta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); }
.pz-qopen { border: 1px solid var(--ligne); background: var(--surface); border-radius: var(--rayon-sm);
  font-size: 19px; line-height: 1; color: var(--txt-2); cursor: pointer; }
.pz-qshape { border-bottom: 1px dashed var(--ligne); }
.pz-qshape:last-of-type { border-bottom: 0; }
.pz-tile.inc .pz-lab i { font-style: normal; opacity: .6; font-size: .85em; }
.pz-valhint { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 500; color: var(--txt-3); cursor: pointer; }
.pz-valhint:hover { color: var(--accent-fonce); }
#pz-toast { position: fixed; z-index: 320; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px);
  background: var(--croute-fonce); color: var(--on-brand); padding: 11px 20px; border-radius: var(--rayon-pill);
  font-weight: 600; font-size: var(--fs-body-sm); box-shadow: var(--ombre-2); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; }
#pz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ————————————————— 11 · QUIET CRAFT — hairlines, cards, chips ————————————————— */
.card { box-shadow: var(--ombre-1); border: 1px solid var(--ligne); }
.card:hover { box-shadow: var(--ombre-2); }
.pz-chip { border-radius: var(--rayon-pill); }
/* the gold thread signs the dashboard hero too — same signature as the Pesée cover */
.hero::after {
  content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: 0;
  height: 2.5px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .8;
}
/* scrollable chip strips: no scrollbar, a soft fade at the cut edge says "there's more" */
.pz-tabs, .pz-days, .conv-chips { scrollbar-width: none; }
.pz-tabs::-webkit-scrollbar, .pz-days::-webkit-scrollbar, .conv-chips::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .pz-tabs, .pz-days {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
/* desktop tables breathe on hover — a whisper of wheat under the pointer */
@media (hover: hover) {
  .tbl-wrap tbody tr { transition: background var(--t-rapide); }
  .tbl-wrap tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
}
/* the bottom-nav "Plus" button earns the same active pill as the tabs */
.bottomnav .more.actif .bic { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.bottomnav a, .bottomnav .more { transition: color var(--t-rapide); }
.pz-incmissnote, .ing-csub2 { color: var(--txt-3); font-size: var(--fs-micro); }
.rec-cost { display: block; font-size: 11px; font-weight: 500; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.rec-cost-miss { color: var(--ambre); font-style: italic; }
.pl-arrow { color: var(--txt-3); padding: 0 3px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ————————————————— 12 · DANGER — destructive account actions (Apple 5.1.1v delete flow) ————————————————— */
/* Ghost danger = red TEXT via --rouge (theme-tuned for contrast on each surface). Solid danger = a FIXED deep
   red so white text stays AA in BOTH themes — the Nuit --rouge (#e78787) is a light ink, wrong as a button fill. */
.btn.danger { color: var(--rouge); }
.btn.ghost.danger:hover { background: var(--rouge-bg); }
.btn.primaire.danger { background: #b23b3b; border-color: #b23b3b; color: #fff; }
.btn.primaire.danger:hover { filter: brightness(1.06); }
.bk-hint.danger { background: var(--rouge-bg); color: var(--rouge); }
.bk-hint.danger svg { color: var(--rouge); }