/* The file map down the left of a file page, and Focus (core/filemap.py; Senyo's UI feedback item 2).
   The map is an index of the whole file: stages, the areas under fieldwork and each area's steps,
   then the file's own pages. One row per item; the state word is always written beside the dot.
   Focus (the person's saved choice) hides the map, the file row and the journey strip. The Next step
   band is never hidden. */

.t2:has(> .t2-map) {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  align-items: start;
}
.t2:has(> .t2-map) > .t2-page { min-width: 0; width: 100%; grid-column: 2; grid-row: 2; }
/* Focus sits after the page in the markup, outside <main> (a read-only page's main holds no form), and is
   drawn above it: the first row of the page's column, with the page's own width and gutters. */
.t2:has(> .t2-map) > .t2-focus { grid-column: 2; grid-row: 1; }
.t2 > .t2-map { grid-column: 1; grid-row: 1 / span 2; }  /* after the page in the markup, so the page reads first */
.t2 > .t2-map {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s5) var(--s4) var(--s7);
  border-right: 1px solid var(--border);
  font-size: var(--fs-small);
  min-width: 0;
}
.t2 .t2-map__title { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 var(--s3); }
.t2 .t2-map__wait { color: var(--text-secondary); margin: 0; }

.t2 .t2-map ol, .t2 .t2-map ul { list-style: none; margin: 0; padding: 0; }
.t2 .fm-stage + .fm-stage { margin-top: 2px; }
.t2 .fm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; min-width: 0; padding: 0.3rem 0.4rem;
  border-radius: var(--r-ctl); color: var(--text); }
.t2 .fm-row > a, .t2 .fm-row > span:first-child { display: flex; align-items: baseline; gap: 0.5rem; flex: 1 1 auto;
  min-width: 0; color: inherit; text-decoration: none; flex-wrap: wrap; }
.t2 .fm-row a:hover .fm-name { text-decoration: underline; }
.t2 .fm-row a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-ctl); }
.t2 .fm-row:has(> a[aria-current="page"]), .t2 .fm-row:has(a[aria-current="page"]) { background: var(--surface-sunk); }
.t2 .fm-row a[aria-current="page"] .fm-name { font-weight: 600; }
.t2 .fm-name { flex: 1 1 8rem; min-width: 0; overflow-wrap: break-word; }
.t2 .fm-num { flex: none; width: 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; align-self: center;
  border-radius: 50%; border: 1px solid var(--border-strong); font-size: var(--fs-chip); color: var(--text-secondary); }
.t2 .fm-stage.is-met .fm-num { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.t2 .fm-stage.is-current .fm-num { background: var(--action); border-color: var(--action); color: var(--on-action); }
.t2 .fm-row--stage .fm-name { font-weight: 600; }
.t2 .fm-state { flex: none; font-size: var(--fs-chip); color: var(--text-secondary); white-space: nowrap; }
.t2 .fm-state[data-status]::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  margin-right: 0.3rem; vertical-align: 0.05em; background: var(--border-strong); }
.t2 .fm-state[data-status="in_progress"]::before { background: var(--action); }
.t2 .fm-state[data-status="pending"]::before { background: var(--caution); }
.t2 .fm-state[data-status="returned"]::before, .t2 .fm-state[data-status="stale"]::before { background: var(--problem); }
.t2 .fm-state[data-status="approved"]::before { background: var(--good); }
.t2 .fm-state[data-status=""]::before { display: none; }

.t2 .t2-map details > summary { cursor: pointer; list-style: none; }
.t2 .t2-map details > summary::-webkit-details-marker { display: none; }
.t2 .t2-map summary:hover .fm-name { text-decoration: underline; }
.t2 .t2-map summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t2 .fm-fold { flex: none; align-self: flex-start; margin-top: 0.15em; color: var(--text-secondary); transition: transform var(--dur, 0.15s) ease; }
.t2 .t2-map details[open] > summary .fm-fold { transform: rotate(90deg); }
.t2 .fm-papers { margin: 2px 0 var(--s2) 0.6rem; padding-left: 0.4rem; border-left: 1px solid var(--border); }
.t2 .fm-ref { flex: none; min-width: 2.6rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.t2 .fm-steps .fm-ref { min-width: 3.4rem; }
.t2 .fm-row--paper .fm-name { color: inherit; }
.t2 .fm-stage.is-locked .fm-row--paper > span { color: var(--text-secondary); }
.t2 .fm-row--area > a, .t2 .fm-row--area > span:first-child { padding-left: calc(16px + 0.5rem); }
.t2 .fm-code { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.t2 .fm-steps { margin: 0 0 var(--s2) 1.1rem; }
.t2 .fm-row--step { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.t2 .fm-subhead { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); margin: var(--s5) 0 var(--s2); }
.t2 .fm-row--page .t2-ico { flex: none; align-self: center; color: var(--text-secondary); }

/* Focus: one button at the top of the page, on every file page. */
.t2 .t2-focus { display: flex; justify-content: flex-end; gap: var(--s2); margin: var(--s4) 0 0; }
.t2 .t2-focus[hidden] { display: none; }
.t2 > .t2-focus { box-sizing: border-box; width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: var(--s4) auto 0; padding: 0 var(--gutter); }
/* Where the page is one column (Focus on, or a narrower screen), the column is a flex column and Focus comes first. */
.t2[data-focus="on"]:has(> .t2-map), .t2:has(> .t2-focus):not(:has(> .t2-map)) { display: flex; flex-direction: column; }
.t2 > .t2-focus { order: -1; }
.t2[data-focus="on"]:has(> .t2-map) > .t2-page { width: 100%; }
.t2[data-focus="on"] > .t2-map,
.t2[data-focus="on"] .t2-file,
.t2[data-focus="on"] .t2-journey { display: none; }
.t2[data-focus="on"] .t2-focus .t2-btn { background: var(--surface-sunk); }

/* Below 1180px the map is not a column (the page needs the width): the File map button beside Focus
   opens it as a panel from the left, over the page. Phones get the same panel. */
.t2 .t2-focus__map { display: none; }
@media (max-width: 1179px) {
  .t2:has(> .t2-map) { display: flex; flex-direction: column; }
  .t2:has(> .t2-map) > .t2-page { width: 100%; }
  .t2 .t2-focus__map:not([hidden]) { display: inline-flex; }
  .t2 > .t2-map { display: none; position: fixed; z-index: 60; inset: 0 auto 0 0; top: 0; width: min(22rem, 88vw);
    max-height: none; height: 100vh; background: var(--ground); box-shadow: var(--shadow-panel); border-right: 1px solid var(--border); }
  .t2 > .t2-map.t2-map--open { display: block; }
  .t2[data-focus="on"] > .t2-map.t2-map--open { display: none; }
  .t2[data-focus="on"] .t2-focus__map { display: none; }
}
.t2 .t2-map__close { display: none; }
.t2 .t2-map__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.t2 .t2-map__head .t2-map__title { margin: 0; }
.t2 .t2-map--open .t2-map__close { display: inline-flex; }
@media print {
  .t2 > .t2-map, .t2 .t2-focus { display: none; }
  .t2:has(> .t2-map) { display: block; }
}