/* UI and screen flow: this page's own pieces, on console.css's tokens only (so light and dark both follow the switch).
   The site map, the screen strips, the decision trees and the state gallery are HTML boxes with CSS lines; each turns
   into one column on a phone. */

/* On this page */
.uf-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); }
.uf-toc li { margin: 0; }
.uf-toc a {
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); font-weight: 500;
}
.uf-toc a:hover { border-color: var(--accent); text-decoration: none; }
.uf-toc b { color: var(--accent); }
.uf-section { scroll-margin-top: var(--space-4); }
.uf-section > h2 { font-size: var(--text-xl); margin-top: var(--space-10); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.uf-section h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.panel > h3:first-child { margin-top: 0; }
.uf-note { color: var(--muted); font-size: var(--text-sm); }

/* Links that stand alone (a picture, the next document): a full tap target on a phone */
.uf-see { display: inline-flex; align-items: center; }
.uf-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-3) 0; }
.uf-links li { margin: 0; }
.uf-links a { display: inline-flex; align-items: center; min-height: 32px; }

/* 1. The site map: tiers of groups; in a group, pages joined by arrows down a line, side pages on a branch */
.uf-figure { margin: var(--space-4) 0 var(--space-3); }
.uf-figure > figcaption { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.uf-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.uf-tier { background: var(--canvas); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-4); }
.uf-tier-label { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.uf-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); align-items: start; }
.uf-group { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.uf-group-title { margin: 0 0 var(--space-2); color: var(--accent); font-weight: 600; }
.uf-node {
  position: relative; display: block; min-width: 0; margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow-wrap: anywhere;
}
.uf-node b { display: block; }
.uf-node code { display: inline-block; margin-top: 2px; }
.uf-node span { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }
.uf-node.uf-main { background: var(--accent-soft); border-color: var(--accent); }
.uf-node.uf-side { border-style: dashed; }
.uf-node.uf-away { background: var(--idle-soft); border-style: dashed; border-color: var(--line-strong); }
.uf-node.uf-end { background: var(--raised); color: var(--muted); border-color: var(--line); font-size: var(--text-sm); }
.uf-stack { display: grid; gap: var(--space-2); }
/* An arrow down the group's line, with what moves the person on */
.uf-edge { position: relative; margin: 0; padding: 6px 0 14px 36px; min-height: 36px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.uf-edge::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 6px; border-left: 2px solid var(--line-strong); }
.uf-edge::after {
  content: ""; position: absolute; left: 12px; bottom: 0; width: 0; height: 0;
  border: 6px solid transparent; border-top: 8px solid var(--line-strong); border-bottom: 0;
}
/* A side page: the line goes on past it, a turn leads to it */
.uf-branch { position: relative; margin: 0; padding: 8px 0 8px 36px; }
.uf-branch::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; border-left: 2px solid var(--line-strong); }
.uf-turn { position: relative; margin: 0 0 6px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.uf-turn::before { content: ""; position: absolute; left: -17px; top: 0.65em; width: 10px; border-top: 2px dashed var(--line-strong); }
.uf-turn::after {
  content: ""; position: absolute; left: -8px; top: calc(0.65em - 5px); width: 0; height: 0;
  border: 6px solid transparent; border-left: 7px solid var(--line-strong); border-right: 0;
}
.uf-then { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }
/* The hub: the dashboard and the frame around every signed-in page */
.uf-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); align-items: start; }
.uf-frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.uf-frame li { margin: 0; }
/* Between tiers: one arrow down, its words in a pill */
.uf-down { position: relative; display: flex; justify-content: center; margin: 0; padding: 22px 0 26px; }
.uf-down::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 6px; border-left: 2px solid var(--line-strong); }
.uf-down::after {
  content: ""; position: absolute; left: calc(50% - 6px); bottom: 0; width: 0; height: 0;
  border: 6px solid transparent; border-top: 8px solid var(--line-strong); border-bottom: 0;
}
.uf-down span {
  position: relative; max-width: 90%; padding: 4px var(--space-3); text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--text-sm); font-weight: 500;
}
/* The text version of the map */
.uf-tree-list { margin: var(--space-2) 0 0; }
.uf-tree-list ul { margin-top: var(--space-1); }

/* 2. Screen by screen: thumbnails joined by labelled arrows */
.uf-path { margin-top: var(--space-5); }
.uf-strip { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; align-items: start; }
.uf-strip-3 { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr); }
.uf-strip-4 { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) 112px minmax(0, 1fr) 112px minmax(0, 1fr); }
.uf-strip > li { margin: 0; min-width: 0; }
.uf-step figure { margin: 0; }
.uf-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.uf-thumb.uf-bottom { object-position: bottom; }
.uf-step figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.uf-step figcaption b { display: block; color: var(--ink); }
.uf-go {
  position: relative; align-self: center; display: flex; flex-direction: column; justify-content: center;
  margin-top: -32px; padding: 0 14px 20px 10px; color: var(--accent); font-size: var(--text-sm); font-weight: 600; line-height: 1.35;
  text-align: center; overflow-wrap: anywhere;
}
.uf-go::before { content: ""; position: absolute; left: 10px; right: 14px; bottom: 7px; border-top: 2px solid var(--accent); }
.uf-go::after {
  content: ""; position: absolute; right: 6px; bottom: 2px; width: 0; height: 0;
  border: 6px solid transparent; border-left: 8px solid var(--accent); border-right: 0;
}
/* A screen with no picture of its own, drawn in the console's look */
/* At least a picture's shape, taller when its words need it (overflow stays visible, so the box grows). */
.uf-drawn {
  min-width: 0; aspect-ratio: 16 / 10; background: var(--canvas);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.uf-drawn-bar { height: 14px; background: var(--bar-bg); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.uf-drawn-page { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: 1.4; }
.uf-drawn-page p { margin: 0 0 6px; }
.uf-drawn-page .lead { font-size: var(--text-sm); }
.uf-drawn-rows { display: grid; gap: 2px; margin: 0 0 6px; padding: 0; list-style: none; }
.uf-drawn-rows li { margin: 0; display: flex; gap: var(--space-2); justify-content: space-between; padding: 2px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.uf-drawn-steps { display: flex; flex-wrap: wrap; gap: 2px 6px; list-style: none; margin: 0 0 6px; padding: 0; color: var(--muted); }
.uf-drawn-steps li { margin: 0; }
.uf-drawn-steps .on { color: var(--ink); font-weight: 600; }
.uf-drawn-notice { padding: 2px 6px; border: 1px solid var(--ok); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.uf-drawn-file { display: flex; gap: 6px; align-items: center; min-width: 0; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.uf-drawn-file span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-btn {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--accent); font-weight: 500; white-space: nowrap;
}
.uf-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* 3. Decision points: a question, its branches, where each ends */
.uf-decide { margin: var(--space-4) 0; }
.uf-q {
  position: relative; max-width: 520px; margin: 0 auto 24px; padding: var(--space-3) var(--space-4); text-align: center;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-lg);
}
.uf-q b { display: block; }
.uf-q span { display: block; color: var(--muted); font-size: var(--text-sm); }
.uf-q::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; height: 24px; border-left: 2px solid var(--line-strong); }
.uf-ways { list-style: none; display: flex; margin: 0; padding: 0; }
.uf-ways > li { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 24px var(--space-2) 0; }
.uf-ways > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--line-strong); }
.uf-ways > li:first-child::before { left: 50%; }
.uf-ways > li:last-child::before { right: 50%; }
.uf-ways > li:only-child::before { content: none; }
.uf-ways > li::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px); height: 16px; border-left: 2px solid var(--line-strong); }
.uf-if { position: relative; margin: 0 0 var(--space-2); text-align: center; font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.uf-if::before {
  content: ""; position: absolute; left: calc(50% - 6px); top: -9px; width: 0; height: 0;
  border: 6px solid transparent; border-top: 8px solid var(--line-strong); border-bottom: 0;
}
.uf-out {
  margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface); font-size: var(--text-sm); overflow-wrap: anywhere;
}
.uf-out > b:first-child { display: block; margin-bottom: 2px; }
.uf-out.good { border-color: var(--ok); background: var(--ok-soft); }
.uf-out.good > b:first-child { color: var(--ok); }
.uf-out.stop { border-color: var(--bad); border-style: dashed; border-left-style: solid; background: var(--bad-soft); }
.uf-out.stop > b:first-child { color: var(--bad); }
.uf-out.part { border-color: var(--warn); background: var(--warn-soft); }
.uf-out.part > b:first-child { color: var(--warn); }
.uf-out p { margin: 4px 0 0; }
.uf-msg { font-weight: 500; }
.uf-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; }
.uf-pics .shot { margin: 0; }
.uf-pics .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* 4. Component states: each picture a detail at full size, the part that shows the state */
.uf-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); grid-auto-flow: row dense;
  gap: var(--space-3); margin: var(--space-4) 0 var(--space-6);
}
.uf-state { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; scroll-margin-top: var(--space-4); }
.uf-state:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* The detail is the picture at its own size, a window of at most 400px (700px on a wide card) onto it. */
.uf-media { display: flex; justify-content: center; background: var(--raised); border-bottom: 1px solid var(--line); }
.uf-detail { display: block; width: min(100%, 400px); height: 240px; max-width: none; object-fit: none; }
.uf-wide .uf-detail { width: min(100%, 700px); }
.uf-detail.uf-strip-shot { height: 86px; }
.uf-detail.uf-thin { height: 46px; }
.uf-state figcaption { padding: var(--space-3) var(--space-4) var(--space-4); }
.uf-state figcaption b { display: block; margin-bottom: 2px; }
.uf-state figcaption span { display: block; color: var(--muted); font-size: var(--text-sm); }
/* Where each window sits on its picture (1280 x 800; the strips 968 wide, the phone's 780 x 1688): 50% plus half the
   picture less the point to centre on. */
.uf-at-loading { object-position: calc(50% + 190px) calc(50% + 140px); }
.uf-at-empty-jobs { object-position: calc(50% - 60px) calc(50% + 160px); }
.uf-at-empty-tasks { object-position: calc(50% - 124px) calc(50% - 140px); }
.uf-at-load-error { object-position: calc(50% - 125px) calc(50% + 132px); }
.uf-at-busy { object-position: calc(50% + 24px) 50%; }
.uf-at-hover { object-position: 0 50%; }
.uf-at-focus { object-position: calc(50% + 181px) calc(50% + 250px); }
.uf-at-notice-ok { object-position: calc(50% + 170px) calc(50% + 240px); }
.uf-at-notice-bad { object-position: calc(50% + 170px) calc(50% + 240px); }
.uf-at-field-error { object-position: calc(50% + 165px) calc(50% + 100px); }
.uf-at-row-menu { object-position: calc(50% - 382px) calc(50% - 10px); }
.uf-at-dialog { object-position: 50% 50%; }
.uf-at-create-refused { object-position: calc(50% + 190px) calc(50% - 60px); }
.uf-at-create-done { object-position: calc(50% + 190px) calc(50% + 220px); }
.uf-at-signin-refused { object-position: 50% calc(50% + 70px); }
.uf-at-phone-menu { object-position: calc(50% + 190px) calc(50% + 694px); }
@media (min-width: 760px) { .uf-wide { grid-column: span 2; } }

/* The tables of states: eight columns, sideways inside their frame on a tablet, a card on a phone */
.uf-states-table { min-width: 1040px; }
.uf-states-table td { font-size: var(--text-sm); }
.uf-states-table th { white-space: normal; }

/* Tablets: the strips go down the page, each arrow pointing down */
@media (max-width: 1100px) {
  .uf-strip-3, .uf-strip-4 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .uf-strip > li { width: 100%; max-width: 460px; }
  .uf-go { align-self: auto; margin-top: 0; min-height: 60px; padding: 12px 0 14px 40px; text-align: left; }
  .uf-go::before { left: 19px; right: auto; top: 0; bottom: 8px; border-top: 0; border-left: 2px solid var(--accent); }
  .uf-go::after { left: 14px; right: auto; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; }
  .uf-hub { grid-template-columns: minmax(0, 1fr); }
}
/* Narrower: each decision's branches go down a line too */
@media (max-width: 860px) {
  .uf-q { margin: 0 0 0; text-align: left; }
  .uf-q::after { left: 18px; height: 12px; }
  .uf-ways { flex-direction: column; margin: 12px 0 0 18px; border-left: 2px solid var(--line-strong); }
  .uf-ways > li { padding: var(--space-2) 0 var(--space-2) 28px; }
  .uf-ways > li::before, .uf-ways > li:first-child::before, .uf-ways > li:last-child::before { content: ""; left: 0; right: auto; top: 1.3em; width: 18px; }
  .uf-ways > li::after { content: none; }
  .uf-if { text-align: left; }
  .uf-if::before { left: -10px; top: calc(0.7em - 6px); border: 6px solid transparent; border-left: 8px solid var(--line-strong); border-right: 0; }
}
/* Phones: one column everywhere, taps of 44px */
@media (max-width: 640px) {
  .uf-map { padding: var(--space-3); }
  .uf-tier { padding: var(--space-3); }
  .uf-states-table { min-width: 0; }
  .uf-at-dialog { object-position: calc(50% + 51px) 50%; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .uf-see, .uf-links a { min-height: 44px; }
  .uf-section > h2 { margin-top: var(--space-8); }
}