/* tracking page styles. Tokens live in tokens.css. */
#ft {font-family:Inter,ui-sans-serif,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--nuit);
    background:var(--givre);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased}
  #ft *{box-sizing:border-box}
  #ft .logo{position:relative;display:inline-block;font-weight:700;letter-spacing:-.05em;text-decoration:none;color:inherit}
  #ft .logo .dot{position:absolute;background:var(--stable);border-radius:1px;width:.115em;height:.115em;left:.268em;top:.055em}
  /* position+z-index here are belt-and-suspenders: nothing on this page
     currently uses position:fixed/sticky or a z-index above this, so
     nothing can actually cover the header today. Set explicitly anyway so
     it stays true as the page grows (a future modal, toast, or the map's
     own content) rather than relying on source order alone. */
  #ft .top{background:var(--papier);border-bottom:1px solid var(--ligne);position:relative;z-index:30}
  #ft .top-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* the "<- Back" line above the page body -- plain document flow (not
     fixed/absolute), inside .body's own max-width/padding already, so it
     always sits below the header and can never overlap it, and never needs
     its own z-index tuning against anything else on the page. */
  /* Designed back control, not a bare link. A bordered pill in the app's own
     button language (same radius, border and lift-on-hover as the header
     buttons), so it reads as part of Frimas rather than a default anchor. */
  #ft .backline{margin-bottom:16px}
  #ft .backline a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
    color:var(--nuit);background:var(--papier);border:1px solid var(--ligne);border-radius:9px;
    padding:8px 14px;text-decoration:none;line-height:1;
    transition:border-color 140ms ease-out,background 140ms ease-out,box-shadow 140ms ease-out,transform 140ms ease-out}
  #ft .backline a:hover{border-color:var(--nuit);background:#F5F8F8;transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(14,31,41,.08);text-decoration:none}
  #ft .backline a:active{transform:translateY(0);box-shadow:none}
  #ft .backline a:focus-visible{outline:2px solid var(--stable);outline-offset:2px}
  #ft .top .logo{font-size:19px}
  #ft .ref{font-size:13px;color:var(--acier)}
  #ft .top .right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  #ft .body{max-width:1120px;margin:0 auto;padding:18px 16px 60px}
  #ft h3{margin:0 0 10px;font-size:13px;font-weight:620}
  #ft p{margin:0}
  #ft .small{font-size:12.5px;color:var(--acier)}
  #ft .panel{background:var(--papier);border:1px solid var(--ligne);border-radius:4px;padding:16px}
  #ft .btn{appearance:none;border:1px solid transparent;font:inherit;font-size:12.5px;font-weight:600;
    padding:7px 12px;border-radius:4px;cursor:pointer;background:var(--nuit);color:var(--givre);
    transition:background 140ms ease-out,border-color 140ms ease-out}
  #ft .btn.sec{background:transparent;color:var(--nuit);border-color:var(--ligne)}
  #ft .btn.sec:hover{border-color:var(--nuit)}
  #ft .btn.warn{background:var(--ecart);color:#fff}
  #ft .btn:disabled{opacity:.4;cursor:not-allowed}
  #ft .btn:focus-visible{outline:2px solid var(--stable);outline-offset:2px}
  #ft .docs-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  #ft .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;padding:3px 9px;border-radius:20px}
  #ft .badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
  #ft .b-ok{background:#E8F2EE;color:var(--stable)}
  #ft .b-wait{background:#F8F1DF;color:var(--attente)}
  #ft .b-bad{background:#F9EBE7;color:var(--ecart)}
  #ft .b-n{background:#EDF1F2;color:var(--acier)}

  #ft .lay{display:grid;gap:16px}
  @media(min-width:960px){#ft .lay{grid-template-columns:1.25fr 1fr;align-items:start}}

  /* map */
  #ft .map{background:var(--nuit);border:1px solid var(--ligne);border-radius:4px;overflow:hidden}
  #ft .maphead{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 14px;border-bottom:1px solid #24404C;color:var(--givre);font-size:12.5px}
  #ft .mapfoot{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#24404C}
  @media(min-width:560px){#ft .mapfoot{grid-template-columns:repeat(4,1fr)}}
  #ft .mf{background:var(--nuit);padding:11px 14px}
  #ft .mf .l{font-size:10.5px;color:#93AAB2}
  #ft .mf .v{font-size:16px;font-weight:640;color:var(--givre);font-variant-numeric:tabular-nums}

  /* reading */
  #ft .reading{border-left:3px solid var(--stable);background:#F0F6F4;padding:13px 14px;border-radius:0 3px 3px 0;
    transition:border-color 300ms ease-out,background 300ms ease-out}
  #ft .reading.bad{border-left-color:var(--ecart);background:#F9EBE7}
  #ft .reading .n{font-size:34px;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05;
    display:inline-block;transition:color 300ms ease-out}
  #ft .reading.bad .n{color:var(--ecart)}
  #ft .reading .n.tick{animation:ft-tick 420ms ease-out}
  @keyframes ft-tick{0%{transform:translateY(-3px);opacity:.72}100%{transform:none;opacity:1}}
  #ft .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne-2);margin-top:12px;border:1px solid var(--ligne-2)}
  #ft .st{background:var(--papier);padding:9px 10px}
  #ft .st .l{font-size:10.5px;color:var(--acier)}
  #ft .st .v{font-size:15px;font-weight:620;font-variant-numeric:tabular-nums}

  /* timeline */
  #ft .tl{margin:0;padding:0;list-style:none}
  #ft .tl li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:8px 0;align-items:start}
  #ft .tl .m{width:9px;height:9px;border-radius:50%;background:var(--ligne);margin-top:6px;
    box-shadow:0 0 0 3px var(--papier);position:relative;transition:background 260ms ease-out}
  #ft .tl li.done .m{background:var(--stable)}
  #ft .tl li.now .m{background:var(--nuit)}
  #ft .tl li.now .m::before{content:"";position:absolute;inset:-4px;border-radius:50%;
    border:1.5px solid var(--nuit);animation:ft-pulse 1.8s ease-out infinite}
  #ft .tl li:not(:last-child) .m::after{content:"";position:absolute;left:4px;top:11px;width:1px;
    height:26px;background:var(--ligne-2);transition:background 400ms ease-out}
  #ft .tl li.done:not(:last-child) .m::after{background:#BFDCD1}
  #ft .tl .t{font-size:13.5px;color:var(--acier);transition:color 220ms ease-out}
  #ft .tl li.done .t,#ft .tl li.now .t{color:var(--nuit)}
  #ft .tl li.now .t{font-weight:620}
  #ft .tl .ts{font-size:11.5px;color:var(--acier);font-variant-numeric:tabular-nums}
  @keyframes ft-pulse{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}

  /* alert */
  #ft .alert{border-left:3px solid var(--ecart);background:#F9EBE7;padding:12px 14px;margin-bottom:14px;border-radius:0 3px 3px 0;
    animation:frimas-rise 380ms var(--ease)}
  #ft .alert b{color:var(--ecart);display:block;font-size:13px;margin-bottom:3px}
  #ft .alert p{font-size:13px}
  #ft .resolved{border-left-color:var(--stable);background:#F0F6F4}
  #ft .resolved b{color:var(--stable)}

  /* van glides between ticks instead of jumping; #route's dash-offset
     redraw is the one thing left instant, since animating that smoothly
     needs a rAF loop for one demo screen's sake, not worth the cost */
  #ft #van{transition:transform 850ms linear}
  #ft #docPanel{animation:frimas-rise 420ms var(--ease)}

  /* tables */
  #ft table{width:100%;border-collapse:collapse;font-size:12.5px}
  #ft th{text-align:left;font-size:11px;color:var(--acier);font-weight:600;padding:6px 8px 6px 0;
    border-bottom:1px solid var(--ligne)}
  #ft td{padding:6px 8px 6px 0;border-bottom:1px solid var(--ligne-2);font-variant-numeric:tabular-nums}
  #ft td.ev{font-variant-numeric:normal;color:var(--acier)}
  #ft tr.br td{color:var(--ecart)}
  #ft .scroll{max-height:230px;overflow-y:auto}
  #ft .docs{display:grid;gap:8px;margin-top:12px}
  @media(min-width:560px){#ft .docs{grid-template-columns:repeat(3,1fr)}}
  #ft .doc{background:#FBFDFD;border:1px solid var(--ligne);border-radius:4px;padding:11px 12px;
    font-size:12.5px;cursor:pointer;text-align:left;font-family:inherit;
    transition:border-color 140ms ease-out}
  #ft .doc:hover{border-color:var(--nuit)}
  #ft .doc b{display:block;font-size:13px;font-weight:620;margin-bottom:2px}
  #ft .note{background:#F8F1DF;border-left:3px solid var(--attente);padding:10px 13px;font-size:12.5px;margin-top:16px}
  #ft .note b{color:#8A6414}

  /* reference search -- the real entry point now, replacing the old
     auto-run demo scenario */
  #ft .searchbar{display:flex;gap:8px;flex:1;min-width:220px;max-width:420px}
  #ft .searchbar input{flex:1;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--ligne);
    border-radius:4px;background:var(--papier);color:var(--nuit);text-transform:uppercase;
    transition:border-color 140ms ease-out,box-shadow 140ms ease-out}
  #ft .searchbar input::placeholder{text-transform:none;color:#9BABB1}
  #ft .searchbar input:focus{outline:none;border-color:var(--nuit);box-shadow:0 0 0 3px rgba(30,127,99,.14)}
  #ft .searchbar input.err{border-color:var(--ecart)}
  #ft .searcherr{font-size:12px;color:var(--ecart);margin-top:6px}

  #ft .empty{padding:48px 20px;text-align:center;color:var(--acier)}
  #ft .empty h2{font-size:17px;font-weight:640;color:var(--nuit);margin-bottom:6px}
  #ft .empty p{font-size:13.5px;max-width:40ch;margin:0 auto}
  #ft .skel{min-height:60px;position:relative;overflow:hidden;background:var(--ligne-2);border-radius:4px}
  #ft .skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation:frimas-shimmer 1.3s ease-in-out infinite}

  @media(prefers-reduced-motion:reduce){#ft *{transition:none!important;animation:none!important}}

  /* ============================================================
     Workflow stage strip + Delivery Progress bar, 2026-09-15
     (Backend Guide Sec. 12 "Customer Workflow" and Sec. 13
     "In Transit Experience"). Both panels span the full width of the
     two-column .lay grid on desktop; on narrow screens .lay is already a
     single column so no override is needed there. Visual language matches
     the operations console's own stage strip (assets/css/admin-ops.css)
     so a customer and an operator read the same states the same way.
     ============================================================ */
  @media(min-width:960px){#ft .wf-full{grid-column:1 / -1}}
  #ft .wf-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  #ft .wf-item{display:flex;align-items:center;gap:8px}
  #ft .wf-dot{width:11px;height:11px;border-radius:50%;background:var(--ligne);flex:none;box-shadow:0 0 0 3px transparent}
  #ft .wf-item.done .wf-dot{background:var(--stable)}
  #ft .wf-item.current .wf-dot{background:var(--stable);box-shadow:0 0 0 3px rgba(30,127,99,.2)}
  #ft .wf-label{font-size:12.5px;font-weight:600;color:var(--acier);white-space:nowrap}
  #ft .wf-item.done .wf-label,#ft .wf-item.current .wf-label{color:var(--nuit)}
  #ft .wf-item.current .wf-label{font-weight:700}
  #ft .wf-line{flex:1 1 18px;min-width:14px;height:2px;background:var(--ligne);border-radius:2px}
  #ft .wf-line.done{background:var(--stable)}
  #ft .wf-terminal{display:flex;align-items:center;gap:10px}
  #ft .wf-terminal .wf-dot.bad{background:var(--ecart)}
  #ft .wf-terminal b{font-size:13px}
  /* Delivery Progress reads slightly denser and uppercase, matching the
     chip-row treatment it has in the product spec, to visually separate it
     from the coarser workflow strip above it. */
  #ft .wf-strip.dprog .wf-label{text-transform:uppercase;font-size:11px;letter-spacing:.04em}
  @media(max-width:560px){#ft .wf-label{font-size:11.5px}#ft .wf-strip.dprog .wf-label{font-size:10px}#ft .wf-line{flex-basis:10px}}