/* 8 October (Andrea, 9 h 47): loads after ux-refinement.css. */

/* The side menu sits in front of the page: a cast shadow and a paper grain. */
.rail{border-right:0;box-shadow:10px 0 34px -16px rgba(12,22,25,.32),1px 0 0 rgba(12,22,25,.07);
  background-color:var(--side);
  background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Hero: the figures card is glass, pinned top right at the same margin as the title.
   One left edge for everything: the week's total on top, the three movements in columns under it. */
.cover-in{max-width:none}
.kpi{top:var(--gap);right:var(--gap);width:auto;padding:24px 30px 26px;border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 26px 50px -26px rgba(0,0,0,.6);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}
.kpi .eyebrow{color:rgba(255,255,255,.72)}
.kpi-line{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:36px;row-gap:0;align-items:start;margin-top:24px}
.kpi-line>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.kpi-line b,.kpi-line span{align-self:flex-start}
.kpi-line b{font:300 36px/1 var(--serif);color:#fff;letter-spacing:-.01em}
.kpi-line span{font:400 12.5px/1.25 var(--sans);color:rgba(255,255,255,.76);white-space:nowrap}
.kpi-line .kpi-total{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:14px;margin-bottom:22px}
.kpi-line .kpi-total b{font-size:92px;line-height:.86;letter-spacing:-.04em;align-self:baseline}
.kpi-line .kpi-total span{font-size:15px;color:rgba(255,255,255,.88);align-self:baseline}

/* « À surveiller »: the hover box leaves room above the date. */
.ax-m{isolation:isolate;overflow:visible}
.ax-m,.ax-m:hover,.ax-m:focus-visible,.ax-m.open{background:none!important}
.ax-m:before{content:"";position:absolute;inset:-14px -4px -10px;border-radius:10px;z-index:-1;transition:background .15s}
.ax-m:hover:before,.ax-m.open:before,.ax-m:focus-visible:before{background:rgba(18,125,148,.08)}

/* Focus rings are for keyboard navigation only. */
html:not(.kbd) :focus,html:not(.kbd) :focus-visible{outline:none!important}

/* The project brief: a colour band at the drawer's edge marks each section; rows keep a light rule. */
.project-brief .dsec{border-top:0;padding:52px 0 6px}
.project-brief .dsec:first-child{padding-top:12px}
.project-brief .dsec>h3{position:relative;font-size:30px;line-height:1.15;margin-bottom:22px}
.project-brief .dsec>h3:before{content:"";position:absolute;left:-40px;top:-7px;bottom:-7px;width:9px;border-radius:0 4px 4px 0;background:var(--teal)}
.project-brief #sec-apercu .dr-track{margin:24px 0 8px}
.project-brief .brief-next{margin-top:30px;padding:16px 20px;border-radius:10px;background:var(--teal-wash)}
.project-brief h4.brief-label{margin-top:32px}
.project-brief .brief-facts{border-top:1px solid var(--rule-2);margin-top:22px}
.project-brief .brief-fact{border-bottom:1px solid var(--rule-2);padding:15px 0}
.project-brief .dr-foot{margin-top:34px}

/* Company profile */
.about{font:italic 400 19px/1.5 var(--serif);color:var(--ink);border-left:3px solid var(--teal);padding-left:18px;margin:0}
.about cite{display:block;margin-top:10px;font:normal 400 12.5px/1.3 var(--sans);color:var(--ink-3)}

/* Competitor installations in columns */
.venue-cols{list-style:none;columns:3 190px;column-gap:28px;margin:10px 0 24px;padding:0}
.venue-cols li{break-inside:avoid;font:400 15px/1.35 var(--serif);color:var(--ink-2);padding:5px 0 5px 12px;position:relative}
.venue-cols li:before{content:"";position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:var(--teal)}

/* A delivered document: what it holds */
.doc-h{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:end;padding:30px 40px 6px}
.doc-h img{width:150px;border-radius:2px;box-shadow:0 18px 32px -14px rgba(12,22,25,.5)}
.doc-h h2{font:400 34px/1.1 var(--serif);margin-top:8px}
.doc-h p{font-size:14px;color:var(--ink-3);margin:6px 0 16px}
.doc-figs{margin-top:22px}
.toc{list-style:none;margin:0;padding:0}
.toc a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule-2);color:inherit;text-decoration:none}
.toc li:first-child a{border-top:0}
.toc b{display:block;font:400 18px/1.3 var(--serif);color:var(--ink)}
.toc small{display:block;font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:4px}
.toc em{font:500 12.5px/1 var(--sans);font-style:normal;color:var(--teal-2);white-space:nowrap}
.toc a:hover b{color:var(--teal-2)}

@media(max-width:760px){
  .project-brief .dsec>h3:before{left:-22px}
  .project-brief .dsec>h3{font-size:25px}
  .kpi-line .kpi-total b{font-size:64px}
  .doc-h{grid-template-columns:96px minmax(0,1fr);gap:18px;padding:24px 20px 4px}
  .doc-h img{width:96px}.doc-h h2{font-size:26px}
  .kpi-line{column-gap:22px}.kpi-line b{font-size:28px}
}
@media print{.project-brief .dsec>h3:before{display:none}}

/* The signed-in viewer and the logout, in the side menu footer (live site only). */
.rail-foot .who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot .logout{justify-self:start;font:500 12.5px/1.2 var(--sans);color:var(--teal-2);padding:2px 0}
.rail-foot .logout:hover{color:var(--ink)}

/* Sam, live: the answer as it is written, what Sam is checking, and an error line. */
.live-list{margin:8px 0 12px 1.1em;padding:0}
.live-list li{margin:4px 0}
.live-typing{display:flex;align-items:center;gap:10px;font:400 13.5px/1.4 var(--sans);color:var(--ink-3)}
.live-typing .dots{display:inline-flex;gap:4px}
.live-typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.35;animation:samdot 1.2s infinite ease-in-out}
.live-typing .dots i:nth-child(2){animation-delay:.2s}.live-typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes samdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.live-error{font:400 14px/1.5 var(--sans);color:#a5401f}

/* Sam, live: name, research log, footer, retry */
.live-name{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.live-name b{font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--ink)}
.live-name span{font:400 12.5px/1 var(--sans);color:var(--teal-2)}
.live-notes{margin:2px 0 12px;border:1px solid var(--rule-2);border-radius:8px;background:var(--paper-3,#faf7f0)}
.live-notes summary{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;list-style:none;font:500 13px/1.3 var(--sans);color:var(--ink-2)}
.live-notes summary::-webkit-details-marker{display:none}
.live-notes summary small{color:var(--ink-3);font-weight:400}
.live-notes summary svg.i{width:14px;height:14px;color:var(--teal)}
.live-notes summary svg.i:last-child{margin-left:auto;color:var(--ink-3);transition:transform .15s}
.live-notes[open] summary svg.i:last-child{transform:rotate(180deg)}
.live-log{padding:2px 12px 10px;display:grid;gap:5px}
.live-log p{display:flex;gap:8px;align-items:baseline;margin:0;font:400 12.5px/1.45 var(--sans);color:var(--ink-3)}
.live-log p b{font-weight:500;color:var(--ink-2)}
.live-log p svg.i{width:12px;height:12px;color:var(--teal);flex:0 0 auto;transform:translateY(1px)}
.live-log .dots,.live-notes summary .dots{display:inline-flex;gap:3px}
.live-log .dots i,.live-notes summary .dots i{width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.35;animation:samdot 1.2s infinite ease-in-out}
.live-log .dots i:nth-child(2),.live-notes summary .dots i:nth-child(2){animation-delay:.2s}
.live-log .dots i:nth-child(3),.live-notes summary .dots i:nth-child(3){animation-delay:.4s}
.live-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule-2);font:400 12.5px/1.3 var(--sans);color:var(--ink-3)}
.live-foot .link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.live-foot .link svg.i{width:13px;height:13px}
.live-error small{display:block;margin-top:4px;font:400 11.5px/1.3 var(--sans);color:var(--ink-3)}
.live-retry{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px}

/* A source number's info bubble (hover or focus); a click opens the passage. */
.cite-tip{position:fixed;z-index:120;width:min(340px,calc(100vw - 24px));padding:12px 14px;border-radius:10px;background:var(--ink);color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.cite-tip.on{opacity:1;transform:none}
.cite-tip small{display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light)}
.cite-tip b{display:block;margin-top:5px;font:400 15px/1.3 var(--serif)}
.cite-tip em{display:block;margin-top:6px;font:italic 400 13px/1.45 var(--serif);color:rgba(255,255,255,.82)}
.cite-tip span{display:block;margin-top:8px;font:400 11.5px/1 var(--sans);color:rgba(255,255,255,.6)}
.answer .cite{cursor:pointer}

/* Conversation list: delete and restore */
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid var(--rule-2)}
.history-row:last-child{border-bottom:0}
.history-list .history-row>button:first-child{border-bottom:0}
.history-row>span{padding:13px 12px}
.history-row>span b{display:block;font:500 14px/1.4 var(--sans)}
.history-row>span small{display:block;font-size:11px;color:var(--ink-3);margin-top:5px}
.history-del{display:grid;place-items:center;width:40px;color:var(--ink-3);border-radius:4px}
.history-del:hover{color:var(--ink);background:var(--teal-wash)}
.history-del svg.i{width:15px;height:15px}
.history-deleted{border-top:1px solid var(--rule);margin-top:4px}
.history-deleted summary{padding:10px 12px;cursor:pointer;font:500 12.5px/1 var(--sans);color:var(--ink-3)}

/* Home: the header carries the week alone; the calendar's content sits in the middle of its band
   (equal space above the dates and below the names), the line still through the dots. */
.band-row{min-height:0}
.band-row .axis{height:auto;padding:30px 28px 30px}
.ax-line{top:99px}
.history-list .history-del{display:grid;width:40px;padding:0;border-bottom:0}

/* Project brief: an immersive header (the dossier's city on a darkened map), from the top bar to the menu. */
.project-brief .dr-id.brief-hero{position:relative;overflow:hidden;padding:0;background:var(--ink);color:#fff;min-height:290px;isolation:isolate}
.brief-hero .brief-map,.brief-hero .brief-map.maplibregl-map{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-2;opacity:0;transition:opacity .7s}
.brief-hero .brief-map.on{opacity:.62}
.brief-map canvas{filter:grayscale(1) contrast(1.15) brightness(.92);mix-blend-mode:luminosity}
.brief-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,16,18,.98) 0%,rgba(8,16,18,.9) 32%,rgba(8,16,18,.5) 62%,rgba(12,40,48,.35) 100%),linear-gradient(0deg,rgba(8,16,18,.8),rgba(8,16,18,0) 55%)}
.brief-hero-in{position:relative;padding:46px 40px 32px}
.project-brief .brief-hero .eyebrow{color:var(--teal-light)}
.project-brief .brief-hero h2{color:#fff;font-size:42px;max-width:680px}
.brief-hero .brief-meta{color:rgba(255,255,255,.78)}
.brief-hero .brief-stage{color:var(--teal-light)}
.brief-hero .brief-stage:before{background:var(--teal-light)}
.brief-keys{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.brief-keys>div{padding:11px 15px 10px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brief-keys b{display:block;font:400 20px/1.1 var(--serif);color:#fff}
.brief-keys span{display:block;margin-top:5px;font:400 11.5px/1.3 var(--sans);color:rgba(255,255,255,.72)}
.brief-map-credit{position:absolute;right:12px;bottom:8px;font:400 9.5px/1 var(--sans);color:rgba(255,255,255,.42)}

/* The project's actors in two columns. */
.project-brief #sec-acteurs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.project-brief #sec-acteurs>h3{grid-column:1/-1}
.project-brief #sec-acteurs .rel{border-top:1px solid var(--rule-2)}
.project-brief #sec-acteurs .rel:nth-of-type(-n+2){border-top:0}

/* The questions put to the sources, a step larger than their passages' captions. */
.project-brief #sec-sources .pair>p{font:500 16.5px/1.45 var(--sans);color:var(--ink)}

@media(max-width:760px){
  .project-brief .dr-id.brief-hero{min-height:0}
  .brief-hero .brief-map,.brief-hero .brief-map.maplibregl-map{left:0}
  .brief-hero-in{padding:30px 22px 24px}
  .project-brief .brief-hero h2{font-size:29px}
  .project-brief #sec-acteurs{grid-template-columns:1fr}
  .project-brief #sec-acteurs .rel:nth-of-type(2){border-top:1px solid var(--rule-2)}
}
@media print{
  .project-brief .dr-id.brief-hero{background:none;color:var(--ink);min-height:0}
  .brief-map,.brief-map-credit,.brief-hero:after{display:none}
  .project-brief .brief-hero h2{color:var(--ink)}
  .brief-hero .brief-meta,.brief-keys span{color:var(--ink-3)}
  .brief-keys>div{background:none;border-color:var(--rule)}
  .brief-keys b{color:var(--ink)}
}