/* ==========================================================================
   TRACÉ — design tokens
   A working tool: light, dense, hairline rules, tabular figures. No hero type,
   no gradients, no glow. Colour carries meaning only.
   ========================================================================== */
:root{
  /* surfaces */
  --paper:#FFFFFF;
  --canvas:#F3F5F7;
  --sunk:#EAEEF1;
  --raised:#FFFFFF;

  /* ink */
  --ink:#0F1519;
  --ink-2:#3D4B56;
  --ink-3:#69777F;      /* 4.6:1 on --paper */
  --ink-4:#8C99A2;      /* decorative only */

  /* rules */
  --rule:#DFE5EA;
  --rule-2:#C6D0D8;
  --rule-3:#A9B6C0;

  /* meaning */
  --brand:#C81E2B;      /* mark, and time lost */
  --action:#14232D;     /* primary buttons */
  --gain:#0B7A4B;
  --loss:#C81E2B;
  --blue:#1E63B8;       /* gate blue, secondary series */
  --amber:#A96C08;
  --violet:#5B4BC4;

  /* gate colours, from the course set */
  --gate-red:#D0202E;
  --gate-blue:#1D62BE;

  --r:4px; --r-lg:6px; --r-pill:999px;
  --ease:cubic-bezier(.2,.6,.35,1);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;

  --z-rail:10; --z-bar:20; --z-pop:30; --z-modal:50;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.gain{color:var(--gain)} .loss{color:var(--loss)}
.muted{color:var(--ink-3)}
.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ---------- app frame ---------------------------------------------------- */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.rail{background:var(--paper);border-right:1px solid var(--rule);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:var(--z-rail)}
.rail-top{padding:14px 14px 12px;border-bottom:1px solid var(--rule)}
.brandline{display:flex;align-items:center;gap:9px}
.mark{width:26px;height:26px;border-radius:var(--r);background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.02em;flex-shrink:0}
.brandline b{font-size:15px;font-weight:600;letter-spacing:.09em}
.rail-scope{margin-top:11px}
.rail nav{padding:10px 8px;flex:1}
.nav-h{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:700;padding:11px 8px 5px}
.nav-i{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:background .15s var(--ease),color .15s}
.nav-i:hover{background:var(--sunk);color:var(--ink)}
.nav-i.on{background:var(--sunk);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
.nav-i .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.rail-foot{padding:11px 14px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:9px}
.avatar{width:26px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:52px;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:var(--z-bar)}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);min-width:0}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .sep{color:var(--rule-3)}
.spacer{flex:1}
.page{padding:20px;max-width:1360px;width:100%}

/* ---------- segmented control (role, mode, tabs) ------------------------- */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r);padding:2px;gap:2px}
.seg button{padding:5px 11px;border-radius:3px;font-size:12.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:background .15s var(--ease),color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,21,25,.08)}
.seg.brand button.on{color:var(--brand)}

/* ---------- surfaces ----------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.card-h h3{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.card-h .sub{font-size:11.5px;color:var(--ink-3)}
.card-b{padding:14px}
.card-b.flush{padding:0}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- stats -------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--rule)}
.stats>div{background:var(--paper);padding:11px 13px}
.stat-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.stat-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:4px}
.stat-s{font-size:11px;color:var(--ink-3);margin-top:3px}

/* ---------- tables ------------------------------------------------------- */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:8px 12px;background:var(--sunk);border-bottom:1px solid var(--rule);white-space:nowrap;position:sticky;top:0}
table.t td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr{transition:background .12s var(--ease)}
table.t tbody tr:hover{background:var(--sunk)}
table.t tbody tr.clickable{cursor:pointer}
table.t td.n,table.t th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}

/* ---------- buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;border-radius:var(--r);font-size:13px;font-weight:500;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);min-height:34px;transition:background .15s var(--ease),border-color .15s}
.btn:hover{background:var(--sunk);border-color:var(--rule-3)}
.btn.primary{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}
.btn.primary:hover{background:#1E3140}
.btn.danger{color:var(--brand);border-color:var(--rule-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:5px 10px;min-height:28px;font-size:12px}

/* ---------- chips / badges ---------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r);border:1px solid var(--rule-2);font-size:11.5px;color:var(--ink-2);background:var(--paper);white-space:nowrap}
.chip.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:3px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--rule)}
.tag-epingle{color:var(--violet)} .tag-verticale{color:var(--blue)}
.tag-decalee{color:var(--amber)} .tag-ouverte{color:var(--ink-3)}

/* ---------- forms -------------------------------------------------------- */
.field{display:block;margin-bottom:12px}
.field>label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper);font-size:13.5px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field .hint{font-size:11px;color:var(--ink-3);margin-top:4px}
.row{display:flex;gap:12px}
.row>*{flex:1}

/* ---------- empty / notice ---------------------------------------------- */
.empty{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.empty b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:5px}
.notice{display:flex;gap:10px;padding:11px 13px;border:1px solid var(--rule);border-left:2px solid var(--rule-3);border-radius:0 var(--r) var(--r) 0;background:var(--paper);font-size:12.5px;color:var(--ink-2);line-height:1.6}
.notice.warn{border-left-color:var(--amber)}
.notice.info{border-left-color:var(--blue)}
.notice b{color:var(--ink)}

/* ---------- modal -------------------------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(15,21,25,.42);display:grid;place-items:center;padding:20px;z-index:var(--z-modal)}
.modal{background:var(--paper);border-radius:var(--r-lg);width:100%;max-width:520px;max-height:88vh;overflow:auto;box-shadow:0 16px 48px rgba(15,21,25,.22)}
.modal-h{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.modal-h h3{font-size:15px;font-weight:600}
.modal-b{padding:16px}
.modal-f{display:flex;gap:9px;justify-content:flex-end;padding:13px 16px;border-top:1px solid var(--rule);background:var(--sunk);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- voice -------------------------------------------------------- */
.vx{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);overflow:hidden}
.vx-h{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--rule);background:var(--sunk)}
.vx-b{padding:13px}
.vx-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;border:1px dashed var(--rule-2);border-radius:var(--r);color:var(--ink-2);font-size:13px;transition:border-color .15s var(--ease),background .15s}
.vx-btn:hover{border-color:var(--brand);background:#FDF5F5;color:var(--ink)}
.vx-btn.rec{border-style:solid;border-color:var(--brand);background:#FDF2F2;color:var(--brand);font-weight:600}
.vx-mic{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex-shrink:0}
.vx-mic.rec{animation:vxpulse 1.4s ease-in-out infinite}
@keyframes vxpulse{0%,100%{opacity:1}50%{opacity:.55}}
.vx-quote{font-size:13px;line-height:1.65;color:var(--ink-2);padding:11px 13px;background:var(--sunk);border-radius:var(--r);border-left:2px solid var(--brand)}
.vx-read{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px}
.vx-read .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.vx-read .v{font-family:var(--mono);font-size:17px;font-weight:500}
.wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.wave i{flex:1;min-width:2px;background:var(--brand);border-radius:1px;opacity:.75}

/* ---------- upload ------------------------------------------------------- */
.drop{border:1px dashed var(--rule-2);border-radius:var(--r-lg);background:var(--paper);padding:24px 18px;text-align:center;transition:border-color .18s var(--ease),background .18s}
.drop.over{border-color:var(--blue);background:#F2F7FD}
.drop b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.drop span{font-size:12px;color:var(--ink-3)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:none;border-bottom:1px solid var(--rule)}
  .rail nav{display:flex;flex-wrap:wrap;gap:4px}
  .nav-h{display:none}
  .page{padding:14px}
}