/* XER Viewer — the Gantt. Colours from the guide: bars Slate, critical Caution, done Ash, milestones Ivory, the data
   date Intel; gold stays with the brand (focus and the selected row), never with an activity's state. */
.xv{--ash:#6B6558;--intel:#7E9BB4;--labw:300px;--rowh:26px}
.xv .wrap{display:block;width:min(100% - 2.5rem,100rem)}
.xv-load{margin-bottom:1.5rem}
.xv-load .dropzone{padding:1.1rem}
.xv-project{margin-top:1rem}
.xv-linknote{margin:0 0 .9rem;padding:.6rem .8rem;border:1px solid var(--hairline);border-left:2px solid var(--gold);font-size:.9rem}
.xv-warn{margin:.25rem 0 1rem;padding:.6rem .8rem;border:1px solid var(--caution);color:var(--caution);font-size:.9rem}
.xv-fbox{margin-top:1rem}
.xv-fbox summary{cursor:pointer;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:.3rem 0;width:max-content}
.xv-fbox summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.xv-fbox[open] summary{margin-bottom:.4rem}
#fcount{color:var(--ivory);text-transform:none;letter-spacing:0}
.xv-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:0 1rem;margin-top:.4rem}
.xv-filters .xv-wide{grid-column:span 2}
.xv-codes{display:contents}
.xv-filters .field{margin-bottom:.8rem;min-width:0}
.xv-filters select,.xv-filters input{font-size:.9rem;padding:.5rem .6rem}
.xv-quick{margin:0 0 1rem}
.xv-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.75rem;color:var(--slate);margin:0 0 .6rem}
.xv-legend li{display:flex;align-items:center;gap:.45rem}
.sw{display:inline-block;width:1.4rem;height:.6rem;background:var(--slate)}
.sw.crit{background:var(--caution)}.sw.near{box-shadow:inset 0 0 0 2px var(--caution)}.sw.done{background:var(--ash)}
.sw.ms{width:.6rem;height:.6rem;background:var(--ivory);transform:rotate(45deg);margin:0 .4rem}
.sw.loe{height:.35rem;background:transparent;border:1px dashed var(--slate)}.sw.dd{width:2px;height:.9rem;background:var(--intel);margin:0 .6rem}

/* the chart: one scroll box; the time scale sticks to the top, the labels to the left; only rows in view exist */
.xv-gantt{position:relative;overflow:auto;max-height:min(70vh,42rem);border:1px solid var(--hairline);background:var(--void);overscroll-behavior:contain}
.xv-gantt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.xv-canvas{position:relative}
.xv-scale{position:sticky;top:0;z-index:3;height:40px;background:var(--graphite);border-bottom:1px solid var(--hairline);font-size:.7rem;color:var(--slate);font-variant-numeric:tabular-nums}
.xv-corner{position:sticky;left:0;z-index:4;width:var(--labw);height:40px;background:var(--graphite);border-right:1px solid var(--hairline);display:flex;align-items:flex-end;padding:0 .6rem .4rem;letter-spacing:.08em;text-transform:uppercase}
.xv-t1,.xv-t2{position:absolute;white-space:nowrap;padding-left:4px;line-height:1}
.xv-t1{top:6px;color:var(--ivory)}.xv-t2{top:24px}
.xv-t1::before,.xv-t2::before{content:"";position:absolute;left:0;width:1px;background:var(--hairline)}
.xv-t1::before{top:-6px;height:40px}.xv-t2::before{top:-5px;height:21px}
.xv-grid{position:absolute;pointer-events:none}
.xv-gl{position:absolute;top:0;bottom:0;width:1px;background:rgba(43,41,33,.55)}
.xv-gl.major{background:var(--hairline)}
.xv-dd{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--intel);z-index:1}
.xv-rows{position:absolute;left:0;right:0}
.xv-row{position:absolute;left:0;right:0;height:var(--rowh);border-bottom:1px solid rgba(43,41,33,.5);cursor:pointer}
.xv-row:hover{background:rgba(241,237,227,.035)}
.xv-lab{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:.5rem;width:var(--labw);height:100%;padding:0 .6rem;background:var(--surface);border-right:1px solid var(--hairline);font-size:.8rem;white-space:nowrap;overflow:hidden}
.xv-code{flex:0 0 auto;color:var(--slate);font-variant-numeric:tabular-nums}
.xv-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.xv-n{margin-left:auto;padding-left:.4rem;color:var(--slate);font-size:.72rem;font-variant-numeric:tabular-nums}
.xv-row.grp .xv-lab{background:var(--graphite);font-weight:500}
.xv-car{flex:0 0 .8rem;color:var(--slate);font-size:.7rem}
.xv-row.sel{background:rgba(200,169,97,.09)}
.xv-row.sel .xv-lab{box-shadow:inset 3px 0 0 var(--gold)}
.xv-b,.xv-m,.xv-s{position:absolute;display:block}
.xv-b{top:calc(var(--rowh) / 2 - 6px);height:12px;min-width:2px;background:var(--slate)}
.xv-b.crit{background:var(--caution)}.xv-b.near{box-shadow:inset 0 0 0 2px var(--caution)}.xv-b.done{background:var(--ash)}
.xv-b.loe,.xv-b.wbs{top:calc(var(--rowh) / 2 - 3px);height:6px;background:transparent;border:1px dashed var(--slate)}
.xv-s{top:calc(var(--rowh) / 2 - 2px);height:4px;min-width:2px;background:var(--ivory);opacity:.5}
.xv-m{top:calc(var(--rowh) / 2 - 6px);width:12px;height:12px;margin-left:-6px;background:var(--ivory);transform:rotate(45deg)}
.xv-m.crit{background:var(--caution)}.xv-m.near{box-shadow:inset 0 0 0 2px var(--caution)}.xv-m.done{background:var(--ash)}
.xv-count{margin-top:.5rem}

/* details of the selected activity */
.xv-detail{margin-top:1rem;padding:1rem 1.1rem;border:1px solid var(--hairline);border-left:2px solid var(--gold);background:var(--graphite)}
.xv-detail h3{font-family:var(--serif);font-weight:500;font-size:1.05rem;letter-spacing:.03em;margin-bottom:.7rem;text-wrap:balance}
.xv-detail h4{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500;margin:1rem 0 .3rem}
.xv-detail dl{font-size:.85rem}
.xv-rel{list-style:none;font-size:.85rem}
.xv-rel li{padding:.15rem 0}
.xv-rel button,.xv-detail .xv-close{background:transparent;border:0;padding:0;color:var(--ivory);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.xv-rel button:focus-visible,.xv-detail .xv-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.xv-rel .hint{display:inline}
.xv-detail .xv-close{float:right;margin-left:1rem;font-size:.8rem;color:var(--slate)}
.xv-share{margin-top:1.25rem}
#sharelink{margin-top:.5rem;font-size:.85rem}

@media (max-width:600px){
  .xv{--labw:150px;--rowh:30px}
  .xv-filters{grid-template-columns:1fr 1fr}
  .xv-filters .xv-wide{grid-column:1 / -1}
  .xv-lab{font-size:.75rem;gap:.35rem;padding:0 .4rem}
}

/* print: the Gantt drawn again to fit a landscape page, on Parchment (the guide's print surface) */
.xv-print{display:none}
@media print{
  @page{size:landscape;margin:10mm}
  body.xv-printing main > :not(.xv-print),body.xv-printing .feedback,body.xv-printing main::after{display:none !important}
  body.xv-printing .xv-print{display:block;color:#0A0A0A;background:#F7F5EF}
  .xv-print h1{font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em;color:#0A0A0A;margin:0 0 .2rem}
  .xv-print .xp-meta{font-size:.72rem;color:#1C1B18;margin-bottom:.4rem}
  .xv-print .xp-chart{position:relative;border-top:1px solid #0A0A0A;border-bottom:1px solid #0A0A0A}
  .xv-print .xp-scale{position:relative;height:16px;border-bottom:1px solid #A79F90;font-size:.6rem;color:#1C1B18}
  .xv-print .xp-t{position:absolute;top:2px;padding-left:2px;border-left:1px solid #A79F90;white-space:nowrap}
  .xv-print .xp-row{position:relative;height:14px;border-bottom:1px solid #F1EDE3;font-size:.58rem;break-inside:avoid}
  .xv-print .xp-lab{position:absolute;left:0;top:0;height:14px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0A0A0A}
  .xv-print .xp-row.grp{background:#F1EDE3;font-weight:600}
  .xv-print .xp-b{position:absolute;top:3px;height:8px;background:#A79F90}
  .xv-print .xp-b.crit{background:#C67B4F}.xv-print .xp-b.done{background:#6B6558}.xv-print .xp-b.near{box-shadow:inset 0 0 0 1.5px #C67B4F}
  .xv-print .xp-b.loe{height:4px;top:5px;background:transparent;border:1px dashed #6B6558}
  .xv-print .xp-s{position:absolute;top:5px;height:3px;background:#0A0A0A}
  .xv-print .xp-m{position:absolute;top:3px;width:8px;height:8px;margin-left:-4px;transform:rotate(45deg);background:#0A0A0A}
  .xv-print .xp-m.crit{background:#C67B4F}
  .xv-print .xp-dd{position:absolute;top:0;bottom:0;width:1.5px;background:#7E9BB4;z-index:2}
  .xv-print .xp-foot{font-size:.62rem;color:#6B6558;margin-top:.4rem}
  .xv-print *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}