/* Toumi's dashboard, look A in a soft dark (P1, P2, P3, P5, U6): the frame, the sign-in, the setup page, the
   Invites page, the change history, the seven looking pages with the photos' outlines, and Settings, each
   piece's "Measured with" and the overview's settings warning, as in
   product-planning/prototypes/dashboard-direction-a.html and dashboard-direction-a-changes.html; and the
   testers' feedback (U6), as in dashboard-feedback.html.
   Every colour is set once, here: greys plus one accent (a calm blue: focus rings), red only for
   problems. Contrast, worked out on what each sits on: main text 11:1 or more on panels; second
   text 7.8:1 or more; calm grey 5.3:1 or more on panels and table heads; red 4.9:1 or more.
   Fonts: Geist first, then the device's own; nothing is fetched from anywhere (P6 serves Geist from
   the app's own font files on the server). */

:root {
  color-scheme: dark;
  --bg: #1f2023;      /* the dashboard's page */
  --side: #1c1d20;    /* side menu */
  --pn: #26272b;      /* panels and cards */
  --pn2: #2c2d32;     /* table head and foot, row hover, sunken boxes */
  --soft: #34353b;    /* grey fills */
  --ln: #36373d;      /* lines */
  --ln2: #47484f;     /* strong lines, hover borders */
  --fg: #ededef;      /* main text */
  --fg2: #cfcfd4;     /* second text */
  --mu: #a1a1aa;      /* calm grey: labels and small text */
  --mu2: #7c7c85;     /* decoration only, never text */
  --pri: #e4e4e7; --on-pri: #18181b;
  --acc: #8ab4f8; --acc-ring: rgba(138, 180, 248, .3);
  --red: #ff6b6b; --on-red: #1f2023; --redln: rgba(255, 107, 107, .5);
  --on-pri-mu: #52525b; --raise: #45464d; --on-acc: #17181b;
  /* the photos: the room behind a photo still coming, the outlines' halo, the number tags */
  --ph-wall: #393a40; --ph-halo: #18191c; --ph-tag: rgba(24, 25, 28, .86);
  --r: 8px; --rs: 6px;
  --sh1: 0 1px 2px rgba(0, 0, 0, .28);
  --sh2: 0 14px 32px -10px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; text-align: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.i { width: 16px; height: 16px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.s { width: 13px; height: 13px; } .i.l { width: 22px; height: 22px; }

/* ---------- Look A · Desk: the frame ---------- */
.LA { --pad: 24px; font-size: 14px; line-height: 1.45; color: var(--fg); background: var(--bg); min-height: 100vh; min-height: 100dvh;
  container-type: inline-size; }  /* its width is the page's room, read by the closer cells' rule below */
.LA .app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.LA .side { display: grid; grid-template-areas: "brand" "nav" "foot"; grid-template-rows: auto auto 1fr; gap: 18px; padding: 18px 12px 14px; background: var(--side); border-right: 1px solid var(--ln); min-width: 0; }
.LA .brand { grid-area: brand; padding: 0 8px; min-width: 0; }
.LA .brand b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.LA .brand span { display: block; margin-top: 1px; font-size: 13px; color: var(--mu); }
.LA .nav { grid-area: nav; display: grid; gap: 2px; align-content: start; min-width: 0; }
.LA .nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--rs); color: var(--fg2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.LA .nav a:hover { background: var(--pn); }
.LA .nav a.on { background: var(--pn2); color: var(--fg); box-shadow: var(--sh1), inset 0 0 0 1px var(--ln2); }
.LA .sfoot { grid-area: foot; align-self: end; display: grid; gap: 10px; min-width: 0; }
.LA .ro { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); font-size: 12.5px; line-height: 1.35; color: var(--mu); }
.LA .ro .i { margin-top: 2px; color: var(--fg); }
.LA .ro b { display: block; color: var(--fg); font-size: 13px; font-weight: 600; }
.LA .who { display: flex; align-items: center; gap: 7px; padding: 0 6px; font-size: 13px; color: var(--fg2); }
.LA .who .out { margin-left: auto; color: var(--mu); font-size: 12.5px; text-decoration: underline; }
.LA .who .out:hover { color: var(--fg); }
.LA .main { min-width: 0; display: flex; flex-direction: column; }
.LA .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 64px; padding: 14px var(--pad); border-bottom: 1px solid var(--ln); }
.LA .bar h1 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
.LA .bar .r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.LA .looked { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mu); white-space: nowrap; }
.LA .btn { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ln); border-radius: var(--rs); background: var(--pn); box-shadow: var(--sh1); font-size: 13.5px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.LA .btn:hover { border-color: var(--ln2); }
.LA .btn.pri { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.LA .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.LA .body { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 20px var(--pad) 32px; }
.LA .card { min-width: 0; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); box-shadow: var(--sh1); }
.LA .cb { padding: 12px 14px; }
.LA .note { font-size: 12.5px; line-height: 1.45; color: var(--mu); }
.LA .kv { margin-top: 6px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; }
.LA .kv.flat { margin-top: 0; }
.LA .kv dt { color: var(--mu); }
.LA .kv dd { color: var(--fg); overflow-wrap: anywhere; }
.LA .al { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); }
.LA .al > .i { margin-top: 2px; color: var(--mu); }
.LA .al.att { border-color: var(--redln); }
.LA .al.att > .i { color: var(--red); }
.LA .al.ok > .i { color: var(--fg); }
.LA .al.sm { padding: 9px 12px; }
.LA .al .m { flex: 1; min-width: 0; }
.LA .al b { display: block; font-weight: 600; }
.LA .cant { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px dashed var(--ln2); border-radius: var(--rs); background: var(--pn2); }
.LA .cant .i { margin-top: 2px; color: var(--mu); }
.LA .cant b { display: block; font-weight: 600; }
.LA .cant p { font-size: 13px; color: var(--fg2); }

/* ---------- Cards, tables, badges and the invite box (P2: Invites and the change history) ---------- */
.LA .ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 46px; padding: 10px 14px; border-bottom: 1px solid var(--ln); }
.LA .ch h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }
.LA .ch .r { margin-left: auto; font-size: 12.5px; color: var(--mu); }
.LA .cb.foot { border-top: 1px solid var(--ln); }
.LA .mu { color: var(--mu); }
.LA .code { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
.LA .tw { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.LA table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.LA th { padding: 8px 14px; background: var(--pn2); border-bottom: 1px solid var(--ln); color: var(--mu); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.LA td { padding: 9px 14px; border-top: 1px solid var(--ln); white-space: nowrap; vertical-align: top; }
.LA tbody tr:first-child td { border-top: 0; }
.LA .num { text-align: right; font-variant-numeric: tabular-nums; }
.LA .bg { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--rs); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.LA .bg.mut { background: transparent; border-color: var(--ln); color: var(--mu); }
.LA .btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.LA .al.go { border-color: var(--fg2); }
.LA .al p { color: var(--fg2); }
.LA .al .bt { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.LA .wait { display: inline-flex; align-items: center; gap: 7px; height: 34px; font-size: 13px; color: var(--mu); }
.LA .frm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.LA .mk { display: grid; gap: 12px; }
.LA .mk .frm { align-items: flex-end; }
.LA .fld { flex: 1 1 220px; max-width: 360px; min-width: 0; display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--mu); }
.LA .fld input { width: 100%; height: 36px; min-width: 0; padding: 0 10px; border: 1px solid var(--ln2); border-radius: var(--rs); background: var(--bg); font-size: 14px; color: var(--fg); }
.LA .fld input:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
.LA .fld input[readonly] { color: var(--fg2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sign-in and setting up a device ---------- */
.LA .sign { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 16px; background: var(--bg); }
.LA .sign .box { width: 100%; max-width: 380px; display: grid; gap: 14px; padding: 26px 24px 22px; border: 1px solid var(--ln); border-radius: 10px; background: var(--pn); box-shadow: var(--sh2); }
.LA .sign h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
.LA .sign .btn { height: auto; min-height: 44px; padding: 8px 14px; font-size: 15px; white-space: normal; text-align: center; }
.LA .sign .brand { grid-area: auto; padding: 0; }
.LA .sign .step { display: grid; gap: 14px; }


/* ---------- The looking pages (P3): Overview, Pieces, one piece, Costs, GPU, Health, Logs ---------- */
/* the counts' words for screen readers sit inside their link, so the folded menu never widens the page */
.LA .nav a { position: relative; }
.LA .nav a .ct { margin-left: auto; font: 500 12px var(--mono); color: var(--mu); }
.LA .nav a .ct.warn { color: var(--red); }
.LA .bar h1 a { color: var(--mu); font-weight: 500; text-decoration: none; }
.LA .bar h1 a:hover { color: var(--fg); }
.LA .bar h1 .i { color: var(--mu2); }
.LA .bar h1 .code { min-width: 0; overflow-wrap: anywhere; }
.LA .ch a.r { color: var(--fg2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.LA .ch a.r:hover { color: var(--fg); text-decoration: underline; }
.LA .red { color: var(--red); }
.LA .strong { font-weight: 600; }
.LA .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.LA .stat { display: block; min-width: 0; padding: 12px 14px 13px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); box-shadow: var(--sh1); text-decoration: none; }
.LA a.stat:hover { border-color: var(--ln2); }
.LA .stat > span { font-size: 12.5px; font-weight: 500; color: var(--mu); }
.LA .stat b { display: block; margin-top: 2px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.LA .stat small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--fg2); }
.LA .stat.warn { border-color: var(--redln); }
.LA .cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.LA .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.LA tr[data-go] { cursor: pointer; }
.LA tr[data-go]:hover td { background: var(--pn2); }
.LA td a { text-decoration: none; }
.LA td a:hover { text-decoration: underline; }
.LA tfoot td { border-top: 1px solid var(--ln2); background: var(--pn2); font-weight: 600; }
.LA td.wr { white-space: normal; min-width: 240px; }
.LA td.empty { padding: 22px 14px; white-space: normal; }
.LA td.sz { white-space: normal; min-width: 150px; }
.LA .bg.dk { background: var(--pri); color: var(--on-pri); }
.LA .bg.sec { background: var(--soft); color: var(--fg2); }
.LA .bg.out { background: transparent; border-color: var(--ln2); color: var(--fg2); }
.LA .bg.att { background: transparent; border-color: var(--redln); color: var(--red); }
.LA .bg.attf { background: var(--red); color: var(--on-red); }
.LA .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.LA .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.LA .search { flex: 1 1 260px; max-width: 380px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--ln); border-radius: var(--rs); background: var(--pn); color: var(--mu); }
.LA .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; color: var(--fg); }
.LA .search input::placeholder { color: var(--mu); opacity: 1; }
.LA .search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
.LA select { height: 36px; max-width: 100%; padding: 0 8px; border: 1px solid var(--ln); border-radius: var(--rs); background: var(--pn); color: var(--fg); font-size: 13.5px; }
.LA select option { background: var(--pn); color: var(--fg); }
.LA .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.LA .chip { height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ln); border-radius: 15px; background: var(--pn); color: var(--fg2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.LA .chip:hover { border-color: var(--ln2); }
.LA .chip .n { font: 500 11.5px var(--mono); color: var(--mu); }
.LA .chip.on { background: var(--fg); border-color: var(--fg); color: var(--on-pri); }
.LA .chip.on .n { color: var(--on-pri-mu); }
.LA .seg { display: inline-grid; grid-auto-flow: column; justify-self: start; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--soft); max-width: 100%; }
.LA .seg a { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--rs); color: var(--mu); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.LA .seg a:hover { color: var(--fg); }
.LA .seg a.on { background: var(--raise); color: var(--fg); box-shadow: var(--sh1); }
.LA .list { display: grid; }
.LA .li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--ln); text-decoration: none; }
.LA .li:first-child { border-top: 0; }
.LA a.li:hover { background: var(--pn2); }
.LA .li > .i { margin-top: 2px; color: var(--red); }
.LA .li .m { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.LA .li .m b { font-weight: 600; }
.LA .li .m small { display: block; font-size: 12.5px; color: var(--mu); }
.LA .li .t { flex: none; padding-top: 1px; font: 500 12.5px var(--mono); color: var(--mu); }
.LA .now { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.LA .now > div { min-width: 0; padding: 12px 14px; border-left: 1px solid var(--ln); }
.LA .now > div:first-child { border-left: 0; }
.LA .now span { display: block; font-size: 12.5px; color: var(--mu); }
.LA .now b { display: block; margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }
.LA .now small { display: block; font-size: 12.5px; color: var(--fg2); }
.LA .cb b.big { display: block; font-size: 20px; font-weight: 600; }
.LA .cb b.mid { display: block; font-size: 16px; font-weight: 600; }
.LA .gstate { display: grid; gap: 6px; }
.LA .gstate .big { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.LA .gstate .big > span:first-child { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.LA .hid { padding: 0 3px; border-radius: 3px; background: var(--soft); color: var(--fg2); font-family: var(--mono); font-size: .92em; white-space: nowrap; }
/* One piece */
.LA .phd { display: grid; gap: 6px; min-width: 0; }
.LA .phd h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.LA .phd p { color: var(--fg2); overflow-wrap: anywhere; }
.LA .pg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.LA .pg > div { display: grid; gap: 16px; min-width: 0; }
.LA .tg { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; color: var(--fg2); font-size: 13px; font-weight: 500; }
.LA .tg .sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--ln2); transition: background .15s; }
.LA .tg .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg2); box-shadow: var(--sh1); transition: transform .15s, background .15s; }
.LA .tg[aria-pressed="true"] .sw { background: var(--acc); }
.LA .tg[aria-pressed="true"] .sw::after { transform: translateX(12px); background: var(--on-acc); }
.LA .phbox { display: grid; gap: 8px; min-width: 0; }
.LA .shown { display: grid; gap: 8px; min-width: 0; }
.LA .shown:focus { outline: 0; }
.LA .ask { aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; border: 1.5px dashed var(--ln2); border-radius: 6px; background: var(--pn2); text-align: center; }
.LA .ask > .i { color: var(--mu); }
.LA .ask p { max-width: 32ch; font-size: 12.5px; line-height: 1.4; color: var(--mu); }
.LA .ph { position: relative; border-radius: 6px; overflow: hidden; background: var(--ph-wall); }
.LA .ph canvas { display: none; width: 100%; height: auto; }
.LA .ph.drawn canvas { display: block; }
.LA .ph .ol { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.LA .ph.drawn .ol { display: block; }
.LA .ph.misfit .ol, .LA .phbox.no-ol .ol { display: none; }
.LA .ph .halo polygon { fill: none; stroke: var(--ph-halo); stroke-width: 4.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.LA .ph .line polygon { fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.LA .ph .lb circle { fill: var(--acc); stroke: var(--ph-halo); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.LA .ph .lb text { fill: var(--on-acc); font-family: var(--sans); font-weight: 600; text-anchor: middle; }
.LA .ph-state { display: none; }
.LA .ph:not(.drawn) { aspect-ratio: 4 / 3; display: grid; place-content: center; padding: 16px; text-align: center; }
.LA .ph:not(.drawn) .ph-state { display: block; max-width: 34ch; font-size: 12.5px; line-height: 1.4; color: var(--fg2); }
.LA .ph.failed { background: var(--pn2); border: 1.5px dashed var(--ln2); }
.LA .ph.gone { aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; background: var(--pn2); border: 1.5px dashed var(--ln2); color: var(--mu); }
.LA .ph.gone b { color: var(--fg); font-size: 15px; font-weight: 600; }
.LA .ph.gone small { max-width: 34ch; font-size: 12.5px; line-height: 1.4; }
.LA .thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; }
.LA .thumbs button { position: relative; flex: 0 0 64px; padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; background: var(--ph-wall); }
.LA .thumbs button.on { border-color: var(--fg); }
.LA .thumbs canvas { display: block; width: 60px; height: 45px; }
.LA .thumbs .n { position: absolute; left: 3px; top: 3px; padding: 0 4px; border-radius: 3px; background: var(--ph-tag); color: var(--fg); font: 600 10px/14px var(--mono); }
.LA .story { list-style: none; }
.LA .story li { display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 7px 14px; border-top: 1px solid var(--ln); }
.LA .story li:first-child { border-top: 0; }
.LA .story .t { font: 500 12.5px/20px var(--mono); color: var(--mu); }
.LA .story .k { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--mu2); background: var(--pn); }
.LA .story li.ok .k { background: var(--fg); border-color: var(--fg); }
.LA .story li.now .k { border-color: var(--fg); }
.LA .story li.stop .k { background: var(--red); border-color: var(--red); }
.LA .story li.stop b { color: var(--red); }
.LA .story b { font-weight: 600; }
.LA .story small { color: var(--mu); font-size: 13px; overflow-wrap: anywhere; }
.LA .cmp { display: flex; align-items: baseline; gap: 8px; }
.LA .cmp + .cmp { margin-top: 2px; }
.LA .cmp .code { font-size: 12.5px; }
.LA .cmp small { font-size: 12px; color: var(--mu); }
.LA .glued { display: inline-flex; align-items: center; gap: 6px; color: var(--fg2); }
.LA .ans { display: grid; }
.LA .ans > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 14px; border-top: 1px solid var(--ln); }
.LA .ans > div:first-child { border-top: 0; }
.LA .ans b { font-weight: 500; }
.LA .kv dd.words { white-space: pre-line; }
/* Health */
.LA .svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.LA .sv { min-width: 0; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); box-shadow: var(--sh1); }
.LA .sv.down { border-color: var(--redln); }
.LA .sv .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.LA .sv p { margin-top: 2px; font-size: 12.5px; color: var(--mu); }
.LA .sv .up { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--fg2); }
.LA .sv .up.red { color: var(--red); }
.LA .meter { display: block; width: 100%; height: 8px; margin: 8px 0 6px; border-radius: 4px; overflow: hidden; }
.LA .meter .track { fill: var(--soft); }
.LA .meter .fill { fill: var(--fg2); }
.LA .meter.warn .fill { fill: var(--red); }
.LA .card.warn { border-color: var(--redln); }
/* On a laptop, a table's longer words wrap so every column shows; a phone scrolls inside the table instead. */
@media (min-width: 761px) {
  .LA td.fit { white-space: normal; min-width: 7em; }
  .LA td.sz { min-width: 7em; }
  .LA .cmp { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .LA .cmp .code { white-space: nowrap; }  /* a component's code stays whole */
}
/* Below 1360 px of room a laptop's cells sit a little closer and a long heading may take two lines, so the Pieces table and Parts found
   still fit. The page's room, not the window's: a classic scrollbar (Windows, Linux) takes 15 px of it. */
@container (min-width: 761px) and (max-width: 1359px) {
  .LA th, .LA td { padding-left: 10px; padding-right: 10px; }
  .LA th { white-space: normal; }
}
/* The overview's "Today's pieces" beside "Latest problems": below 1280 px of room (a 1280 px laptop with a classic scrollbar)
   its cells sit closer again, so its six columns still fit. The overview only: `.cols` is its two-column row. */
@container (min-width: 1101px) and (max-width: 1279px) {
  .LA .cols th, .LA .cols td { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Settings, each piece's "Measured with" and the overview's warning (P5) ---------- */
.LA .sets { display: grid; gap: 16px; align-content: start; min-width: 0; }
.LA a.al { color: inherit; text-decoration: none; border-color: var(--ln2); }
.LA a.al:hover { background: var(--pn2); }
.LA a.al > .i { color: var(--fg); }
.LA .al .go-r { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--fg2); }
.LA .inp { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--ln2); border-radius: var(--rs); background: var(--bg); }
.LA .inp:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
.LA .inp input { width: 64px; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px var(--mono); color: var(--fg); }
.LA .inp input[readonly] { color: var(--fg2); }
.LA .inp span { font-size: 13px; color: var(--mu); }
.LA .tg[role="switch"] { min-width: 62px; }
.LA .tg[aria-checked="true"] .sw { background: var(--acc); }
.LA .tg[aria-checked="true"] .sw::after { transform: translateX(12px); background: var(--on-acc); }
.LA .tg[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* one row per setting */
.LA .set { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, 1.35fr) auto; grid-template-areas: "nm val kv act" "sn sn sn sn" "ed ed ed ed"; gap: 0 18px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--ln); }
.LA .set:first-child { border-top: 0; }
.LA .set.open { background: var(--pn2); }
.LA .set .nm { grid-area: nm; min-width: 0; }
.LA .set .nm b { font-weight: 600; }
.LA .set .nm small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--mu); }
.LA .set .nm small.ap { margin-top: 3px; color: var(--fg2); }
.LA .set .val { grid-area: val; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 8px; }
.LA .set .val > b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.LA .set .kv { grid-area: kv; margin-top: 0; font-size: 13px; gap: 2px 12px; }
.LA .set .act { grid-area: act; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.LA .set .sn { grid-area: sn; margin-top: 10px; display: grid; gap: 8px; min-width: 0; }
.LA .set .sn p { overflow-wrap: anywhere; }
.LA .set .ed { grid-area: ed; margin-top: 12px; display: grid; gap: 10px; min-width: 0; }
.LA .set .chg { color: var(--fg2); }
.LA .set .chg b { color: var(--fg); font-weight: 600; }
/* one piece: "Measured with" */
.LA .mw { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--pn); box-shadow: var(--sh1); }
.LA .mw > .i { margin-top: 2px; color: var(--mu); }
.LA .mw .m { flex: 1; min-width: 0; }
.LA .mw .hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.LA .mw .hd b { font-weight: 600; }
.LA .mw .hd small { font-size: 12.5px; color: var(--mu); }
.LA .mw p { margin-top: 3px; color: var(--fg2); overflow-wrap: anywhere; }
.LA .mw .df { color: var(--fg); font-weight: 600; }
.LA .mw .cant { margin-top: 6px; }
/* A row's columns by the page's room, not the window's (a classic scrollbar takes 15 px of it; P3's lesson). */
@container (max-width: 1100px) {
  .LA .set { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; grid-template-areas: "nm val act" "kv kv act" "sn sn sn" "ed ed ed"; }
  .LA .set .kv { margin-top: 8px; }
}
@container (max-width: 760px) {
  .LA .set { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nm" "val" "kv" "act" "sn" "ed"; }
  .LA .set .val { margin-top: 8px; }
  .LA .set .act { margin-top: 10px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}

/* ---------- The testers' feedback (UX for Imad, U6), as product-planning/prototypes/dashboard-feedback.html draws it:
   Pieces' Rating column, one piece's feedback (look B) and the Feedback page (look A). No new colour: the stars
   filled in the main text colour, empty ones in the decoration grey (3:1 or more on panels, as a graphic). ---------- */
.LA .stars { display: inline-flex; align-items: center; gap: 1px; flex: none; color: var(--fg); vertical-align: -1px; }
.LA .stars .i { width: 11px; height: 11px; }
.LA .stars .i.on { fill: currentColor; }
.LA .stars .i.off { color: var(--mu2); }
.LA .stars.md { gap: 2px; }
.LA .stars.md .i { width: 15px; height: 15px; }
.LA td .stars { height: 19.5px; }  /* sits on the row's first line of text */
.LA .tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.LA .cm { display: block; white-space: pre-line; overflow-wrap: anywhere; color: var(--fg); }
.LA .from b { font-weight: 600; }
.LA .from small { font-size: 12.5px; color: var(--mu); }
.LA td.from small, .LA td .sub { display: block; font-size: 12.5px; color: var(--mu); }
.LA td.tgs { white-space: normal; min-width: 9.5em; }
/* the Feedback page: a long comment shows its first 3 lines; all of it on its piece */
.LA .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* the components shown, as Saved listed them: count, size, then the code and the part; two lines in a narrow place,
   one row where there's room (the list's own room, not the window's) */
.LA .clw { container-type: inline-size; min-width: 0; }
.LA .cl { list-style: none; display: grid; gap: 7px; }
.LA .cl li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 8px; font-size: 13.5px; line-height: 1.4; }
.LA .cl .n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.LA .cl .sz { min-width: 0; overflow-wrap: anywhere; }
.LA .cl .cx { grid-column: 2; min-width: 0; font-size: 12.5px; color: var(--mu); overflow-wrap: anywhere; }
.LA .cl .cx .code { color: var(--fg2); }
.LA .cl li.nm .sz, .LA .cl li.gl .sz, .LA .cl li.nm .cx { grid-column: 2 / -1; }
.LA .cl li.nm .sz { color: var(--fg2); }
@container (min-width: 460px) {
  .LA .cl li { grid-template-columns: 2.2em minmax(11em, 1fr) minmax(0, 1.15fr); }
  .LA .cl .cx { grid-column: 3; font-size: 13px; }
}
/* one feedback on its piece: what was said on the left, the components shown on the right */
.LA .fb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 24px; min-width: 0; padding: 14px; }
.LA .fbs > article + article { border-top: 1px solid var(--ln); }
.LA .fb .fl { display: grid; gap: 8px; align-content: start; min-width: 0; }
.LA .fb .fm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.LA .fb .fm .t { margin-left: auto; font: 500 12.5px var(--mono); color: var(--mu); }
.LA .fb .cm { font-size: 14.5px; line-height: 1.5; }
.LA .fb .fc { min-width: 0; }
.LA .fb .lbl { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--mu); }
@media (max-width: 1100px) {
  .LA .fb { grid-template-columns: minmax(0, 1fr); }
}
/* Pieces with its Rating column: Started and Way may take two lines too, only when short of room (a laptop) */
@media (min-width: 761px) {
  .LA td.fit2 { white-space: normal; min-width: 4em; }
}

@media (max-width: 1100px) {
  .LA .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .LA .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .LA .pg, .LA .cols { grid-template-columns: minmax(0, 1fr); }
  .LA .now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .LA .now > div:nth-child(3) { border-left: 0; }
  .LA .now > div:nth-child(n+3) { border-top: 1px solid var(--ln); }
}

@media (max-width: 760px) {
  .LA { --pad: 16px; }
  .LA .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .LA .side { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand foot" "nav nav"; grid-template-rows: auto auto; gap: 10px 8px; padding: 12px 0 0; border-right: 0; border-bottom: 1px solid var(--ln); }
  .LA .brand { padding: 0 0 0 16px; display: flex; align-items: baseline; gap: 8px; }
  .LA .sign .brand { padding: 0; }
  .LA .nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
  .LA .nav a { flex: none; height: 32px; }
  .LA .sfoot { display: flex; align-items: center; gap: 6px; padding-right: 16px; align-self: center; }
  /* the foot's "Changes here" box doesn't fit the folded menu; Sign out shows instead */
  .LA .sfoot .ro { display: none; }
  .LA .who { padding: 0; }
  .LA .who span { display: none; }
  .LA .who .out { margin-left: 0; }
  .LA .bar { min-height: 0; padding: 12px var(--pad); }
  .LA .bar .r { margin-left: 0; width: 100%; justify-content: space-between; }
  .LA .body { padding: 16px var(--pad) 28px; }
  .LA .nav a .ct { margin-left: 2px; }
  .LA .stat b { font-size: 20px; }
  .LA .grid2 { grid-template-columns: minmax(0, 1fr); }
  .LA .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .LA .search { max-width: none; }
}
@media (max-width: 400px) {
  .LA .stats, .LA .now { grid-template-columns: minmax(0, 1fr); }
  .LA .now > div { border-left: 0; border-top: 1px solid var(--ln); }
  .LA .now > div:first-child { border-top: 0; }
}