/* Cockpit Marge : la coque de l'app, v2 (07/11/2026, decisions.md « Cockpit v2, cinq espaces, tout le front en anglais US »).
   Barre verticale des espaces à gauche (repliable par le bouton en tête, ⌘⇧), les vues de l'espace en haut dans la navbar collante, barre du bas sur téléphone,
   palette ⌘K, avatar. Tokens et composants partagés : ui.css. Chargé après le <style> de index.html : ses règles gagnent à spécificité égale. Logique dans shell.js. */

/* ---------- Mise en page : la barre latérale pousse la page, le gabarit est le même pour toutes les vues ---------- */
body.rail-fold { --rail: 68px; }
@media (min-width: 721px) {
  body.unlocked { padding-left: calc(var(--rail) + var(--gutter)); transition: padding .2s ease; }
  .topbar .wordmark { display: none; } /* la marque vit dans la barre latérale */
}

/* ---------- Barre latérale des espaces ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 8; /* au-dessus de la navbar (6) et du + de Today (7), sous les fiches (50) */
  display: none; flex-direction: column; gap: 2px; padding: 14px 12px 16px;
  background: var(--off-white); border-right: 1px solid var(--line); transition: width .2s ease;
}
body.unlocked .rail { display: flex; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 36px; margin: 0 0 18px; padding: 0 0 0 12px; }
.rail-mark { font-family: var(--f-serif); font-weight: 700; font-size: 26px; letter-spacing: -.012em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.rail-mark .dot { color: var(--jaune); }
/* Le bouton de repli s'appelle .rail-toggle : « .rail-fold » est l'état du body, et une règle .rail-fold s'appliquait au body replié (page rétrécie à la largeur de la navbar, 07/11, retour de Charles). */
.rail-toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; }
.rail-toggle:hover { background: var(--hover); color: var(--ink); }
.rail-it {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-soft); cursor: pointer; text-align: left; white-space: nowrap;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
}
.rail svg, .dock svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-toggle svg { width: 18px; height: 18px; flex-basis: 18px; }
.rail-it:hover { background: var(--hover); color: var(--ink); }
.rail-it.on { background: var(--ink); color: var(--off-white); }
.rail-it > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-sep { margin: 14px 12px 4px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; min-height: 13px; }
/* Compteur d'un espace : ce qui attend dedans (Inbox de Today, check-in de la semaine, sujets du weekly) */
.rail-n, .dock-n { font: 700 10px var(--f-mono); letter-spacing: 0; text-transform: none; background: var(--jaune); color: var(--ink); border-radius: var(--r-pill); min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 5px; flex: none; }
.rail-n[hidden], .dock-n[hidden] { display: none; }
.rail-n.dot, .dock-n.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.rail-it.on .rail-n { background: var(--jaune); }
/* Replié : icônes seules, le compteur en coin, l'étiquette en infobulle */
body.rail-fold .rail { padding-left: 10px; padding-right: 10px; }
body.rail-fold .rail-top { flex-direction: column; justify-content: flex-start; height: auto; padding: 0; gap: 8px; margin-bottom: 14px; }
body.rail-fold .rail-it > span, body.rail-fold .rail-sep span { display: none; }
body.rail-fold .rail-it { justify-content: center; padding: 0; position: relative; }
body.rail-fold .rail-it .rail-n { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; font-size: 9px; }
body.rail-fold .rail-it .rail-n.dot { width: 8px; height: 8px; min-width: 8px; top: 7px; right: 9px; }
body.rail-fold .rail-mark { font-size: 0; }
body.rail-fold .rail-mark::before { content: 'M'; font-size: 26px; }
body.rail-fold .rail-mark .dot { font-size: 26px; }
/* Infobulle à droite du rail : les étiquettes quand il est replié, et toujours le bouton de repli avec son raccourci */
.rail [data-tip] { position: relative; }
.rail [data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--off-white); font: 500 12px/1 var(--f-sans); padding: 7px 9px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 20; box-shadow: var(--sh-2);
}
.rail [data-tip]::after { visibility: hidden; }
.rail [data-tip]:hover::after, .rail [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition-delay: .25s; }
body:not(.rail-fold) .rail-it::after { display: none; }
.rail [data-tip]::after kbd { font: inherit; }
body.rail-fold .rail-toggle::after { left: calc(100% + 14px); }

/* ---------- Navbar collante : les vues de l'espace, capture, ⌘K, avatar. Hauteur fixe : elle ne bouge jamais, quelle que soit la vue ---------- */
body.unlocked { padding-top: 0; }
.topbar {
  position: sticky; top: 0; z-index: 6; /* sous le bouton + et la feuille de capture de Today sur téléphone (7 à 9), sous les fiches (50) */
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: nowrap; min-height: var(--topbar-h); margin: 0 0 var(--sp-5); padding: 10px 0;
  background: rgba(250, 250, 246, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  /* le fond déborde sur toute la largeur de la fenêtre, la barre reste alignée sur la page.
     Ombres et clip-path ne comptent pas dans la mise en page : pas de défilement horizontal sur téléphone. */
  --tb-bg: rgba(250, 250, 246, .88);
  box-shadow: 0 0 0 100vmax var(--tb-bg); clip-path: inset(0 -100vmax -1px);
}
body.scrolled .topbar { box-shadow: 0 0 0 100vmax var(--tb-bg), 0 1px 0 100vmax var(--line); } /* filet bas une fois la page défilée, la hauteur ne change pas */
.topbar > * { flex: 0 0 auto; }
.topbar .tabs { flex: 1 1 auto; min-width: min(100%, 184px); gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* beaucoup de clients dans Operations : la rangée défile, la barre ne passe pas sur deux lignes */
.topbar .tabs::-webkit-scrollbar { display: none; }
.topbar .tabs button {
  position: relative; white-space: nowrap; height: 36px;
  font-family: var(--f-sans); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 0 10px; border: 0; border-radius: var(--r-sm); color: var(--muted); background: transparent;
}
.topbar .tabs button:hover { color: var(--ink); background: var(--hover); }
.topbar .tabs button.on { background: transparent; color: var(--ink); }
.topbar .tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--jaune); }

/* Bouton d'accès à la palette */
.cmdk-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; height: 32px;
  padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font-family: var(--f-sans); font-size: var(--fs-body-sm); color: var(--muted); cursor: pointer;
}
.cmdk-btn:hover { border-color: var(--ink); color: var(--ink); }
.cmdk-btn kbd, .cmdk kbd {
  font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500; color: var(--ink-soft);
  background: var(--line-soft); border-radius: 5px; padding: 2px 6px;
}

/* Avatar du compte connecté (05/11) : la photo du site, ou l'initiale ; un clic ouvre le menu avec l'email et Sign out */
.topbar .who { margin-left: 0; width: auto; position: relative; display: block; }
.topbar .who .avatar-btn { display: block; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--ink); cursor: pointer; overflow: hidden; text-decoration: none; }
.topbar .who .avatar-btn:hover, .topbar .who .avatar-btn[aria-expanded="true"] { border-color: var(--jaune); box-shadow: var(--focus); }
.avatar-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-btn .ini { display: grid; place-items: center; width: 100%; height: 100%; font: 700 14px var(--f-serif); color: var(--off-white); }
.who-menu { position: fixed; /* top et right posés par shell.js sous l'avatar */ min-width: 230px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3); z-index: 45; display: none; }
.who-menu.on { display: block; animation: fade .15s ease; }
.who-menu #who { display: block; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.who-menu button { display: block; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--f-sans); font-size: var(--fs-body); color: var(--ink); text-decoration: none; }
.who-menu button:hover { background: var(--jaune-mid); color: var(--ink); }

/* ---------- Capture partout : champ dans la navbar, ordinateur seulement. « weekly: … » envoie dans le Weekly. ---------- */
.cap-global { flex: 0 4 260px !important; min-width: 100px; margin-left: auto; } /* 07/11 : rétrécit avant les onglets */
.cap-global input { width: 100%; height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-family: var(--f-sans); font-size: var(--fs-body-sm); color: var(--ink); outline: none; }
.cap-global input::placeholder { color: var(--muted); }

/* ---------- Téléphone : la navbar sur deux rangées (marque, ⌘K, avatar ; puis les vues qui défilent au doigt), barre du bas pour les espaces ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: none; justify-content: space-around; gap: 2px;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: rgba(250, 250, 246, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line);
}
.dock button { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.dock button.on { color: var(--ink); }
.dock button.on svg { stroke-width: 2.4; }
.dock .dock-n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 15px; height: 15px; font-size: 9px; }
.dock .dock-n.dot { top: 5px; left: calc(50% + 8px); }
body.locked .rail, body.locked .dock, body.locked .who-menu { display: none !important; }
@media (max-width: 720px) {
  body.unlocked .rail { display: none; }
  body.unlocked .dock { display: flex; }
  body.unlocked { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; gap: 6px var(--sp-3); padding: 10px 0 0; min-height: 0; }
  .topbar .wordmark { display: block; margin: 0; font-size: 22px; }
  .topbar .tabs { order: 10; flex: 1 0 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
  .topbar .tabs button { padding: 0 8px; }
  .topbar .tabs button.on::after { left: 8px; right: 8px; }
  .cmdk-btn { margin-left: auto; padding: 0 8px; }
  .cmdk-btn .lbl, .cmdk-btn kbd { display: none; }
  .cap-global { display: none; }
  body[data-tab="todo"].unlocked #todo-fab { bottom: calc(88px + env(safe-area-inset-bottom)); } /* au-dessus de la barre du bas */
  #todo-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .saving { bottom: 92px; }
}

/* ---------- Finance : quatre vues, un bloc chacune (data-fgrp posé par shell.js) ---------- */
#tab-fin[data-fview="0"] > [data-fgrp]:not([data-fgrp="0"]), #tab-fin[data-fview="1"] > [data-fgrp]:not([data-fgrp="1"]),
#tab-fin[data-fview="2"] > [data-fgrp]:not([data-fgrp="2"]), #tab-fin[data-fview="3"] > [data-fgrp]:not([data-fgrp="3"]) { display: none; }
#tab-fin[data-fview] > .f-sec { margin-top: 0; }

/* ---------- Operations : la liste des clients (secours de shell.js tant qu'ops.js n'a pas rendu) ---------- */
.ops-n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.ops-row {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) 72px minmax(160px, 1.6fr) auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: pointer;
  font: inherit; color: var(--ink); transition: border-color .15s;
}
.ops-row:hover { border-color: var(--ink); }
.ops-co { font-weight: 600; font-size: var(--fs-body-lg); }
.ops-what, .ops-next { font-size: var(--fs-body-sm); color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-next i { color: var(--muted); font-style: normal; }
.ops-go { font-family: var(--f-mono); font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { .ops-row { grid-template-columns: 1fr auto; } .ops-what, .ops-next { grid-column: 1 / -1; white-space: normal; } .ops-go { display: none; } }

/* ---------- Check-in : le gabarit autour de la vue (l'intérieur vit dans checkins.css, fil cockpit-checkins) ---------- */
#tab-checkins .subnav { min-height: 40px; margin-bottom: var(--sp-5); gap: var(--sp-3) var(--sp-4); }
#tab-checkins .subnav h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.012em; }
@media (max-width: 720px) { #tab-checkins .subnav h1 { font-size: 24px; } }

/* ---------- Leads › Cold : mode compact par défaut (07/11, Charles : « Cibles, vraiment horrible ») ----------
   24 colonnes, c'est une feuille de calcul. Par défaut on garde ce qui sert à décider : statut, boîte, dirigeant, email vérifié, taille, ask, prêt, prochaine action, envoyé, répondu, deal.
   Le reste vit dans la fiche (clic sur la ligne) et revient avec le bouton « All columns ». Ordre des colonnes : C_FIELDS dans index.html. */
#c-table.compact th:nth-child(4), #c-table.compact td:nth-child(4), #c-table.compact th:nth-child(5), #c-table.compact td:nth-child(5),
#c-table.compact th:nth-child(7), #c-table.compact td:nth-child(7), #c-table.compact th:nth-child(8), #c-table.compact td:nth-child(8),
#c-table.compact th:nth-child(10), #c-table.compact td:nth-child(10), #c-table.compact th:nth-child(12), #c-table.compact td:nth-child(12),
#c-table.compact th:nth-child(13), #c-table.compact td:nth-child(13), #c-table.compact th:nth-child(17), #c-table.compact td:nth-child(17),
#c-table.compact th:nth-child(18), #c-table.compact td:nth-child(18), #c-table.compact th:nth-child(20), #c-table.compact td:nth-child(20),
#c-table.compact th:nth-child(21), #c-table.compact td:nth-child(21), #c-table.compact th:nth-child(22), #c-table.compact td:nth-child(22),
#c-table.compact th:nth-child(24), #c-table.compact td:nth-child(24) { display: none; }

/* ---------- Palette ⌘K ---------- */
.cmdk-ov { padding-top: 12vh; z-index: 160; }
.cmdk {
  width: 100%; max-width: 620px; background: var(--off-white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-4); display: flex; flex-direction: column; max-height: 70vh;
}
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-in svg { flex: 0 0 18px; color: var(--muted); }
.cmdk-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 17px; color: var(--ink); }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-group { font-family: var(--f-mono); font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; color: var(--ink); font-size: var(--fs-body-lg); }
.cmdk-item .ic { flex: 0 0 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--line-soft); font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 700; color: var(--ink-soft); }
.cmdk-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .t small { color: var(--muted); font-size: var(--fs-body-sm); margin-left: 8px; }
.cmdk-item .k { font-family: var(--f-mono); font-size: var(--fs-label); color: var(--muted); }
.cmdk-item.sel { background: var(--jaune-mid); }
.cmdk-item.sel .ic { background: var(--ink); color: var(--off-white); }
.cmdk-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: var(--fs-body); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .cmdk-ov { padding: 10px; } .cmdk { max-height: 80vh; } .cmdk-foot { display: none; } }