/* The designer's screen. One application: a phone shows one pane and a bar at the bottom, a tablet
   the drawing beside the lists, a desktop three panes. Colours and wordmark are tofi.'s own.
   A pane never sets its own display by id alone: the rules by tab decide what is shown. */
:root {
  --ground: #F7F1E8; --panel: #FFFDF9; --sunk: #F1E8DC;
  --ink: #2C1810; --ink-2: #6E5447;
  --line: #E4D6C5; --line-strong: #CDB8A1;
  --accent: #BF8C60; --accent-ink: #8A5A30; --accent-soft: #F3E4D3; --on-accent: #FFFFFF;
  --dot: #A77854; --warn: #A8431F; --warn-soft: #F8E2D8; --focus: #2F6FB3;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-label: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --f-num: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1B1512; --panel: #251D18; --sunk: #2F2620;
    --ink: #F3E9DC; --ink-2: #BBA795;
    --line: #3D3129; --line-strong: #5A493C;
    --accent: #D29C6C; --accent-ink: #E8BC92; --accent-soft: #3A2B1F; --on-accent: #1B1512;
    --dot: #D29C6C; --warn: #F0906A; --warn-soft: #42241A; --focus: #7FB2EA;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: 15px; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.bar { grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--panel); border-bottom: 1px solid var(--line); }
.wordmark { font-family: Georgia, serif; font-size: 30px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.wordmark span { color: var(--dot); }
.project { min-width: 0; flex: 1; }
.project b, .project small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project b { font-weight: 600; }
.project small { font-family: var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-size: 12px; min-height: 1em; }
.icon { flex: none; width: 44px; height: 44px; font-size: 22px; line-height: 1; border: 1px solid var(--line-strong); border-radius: 8px; }
/* What stands above the panes: why the project is not shown as it is, or a question waiting for an answer. */
.notices { grid-row: 2; min-width: 0; }
/* What the device does without a connection, always in sight: calm when ready, in the warning colour when it cannot. */
.netline { margin: 0; padding: 5px 16px; background: var(--sunk); border-bottom: 1px solid var(--line); font-family: var(--f-label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }
.netline[data-offline="ready"] { color: var(--accent-ink); }
.netline[data-offline="insecure"], .netline[data-offline="unsupported"], .netline[data-offline="failed"] { color: var(--warn); }
.accountline, .accounttrouble { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; padding: 4px 16px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.accountline .where { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.accountline[data-sync="saved"] .where { color: var(--accent-ink); }
.accountline[data-sync="changed"] .where, .accountline[data-sync="trouble"] .where, .accountline[data-sync="offline"] .where, .accountline[data-sync="gone"] .where, .accounttrouble { color: var(--warn); }
.accountline a, .accountline button, .accounttrouble a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--accent-ink); font-weight: 600; text-decoration: underline; background: none; border: 0; font-size: 13px; cursor: pointer; }
.accountline .mark { padding: 1px 8px; border: 1px solid currentColor; border-radius: 10px; font-size: 12px; color: var(--warn); }
.accountline .pending, .accountline .others { color: var(--ink-2); }
.shelf { margin: 0; padding: 0 16px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.shelf summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.shelf summary::after { content: "▸"; margin-left: 8px; color: var(--ink-2); }
.shelf[open] summary::after { content: "▾"; }
.shelf ul { list-style: none; margin: 0; padding: 0 0 6px; }
.shelf .shelf-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; width: 100%; min-height: 44px; padding: 4px 6px; text-align: left; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.shelf .shelf-item:disabled { opacity: .6; cursor: default; }
.shelf .shelf-item .mark { color: var(--ink-2); }
.shelf .shelf-item[data-mark="asks"] .mark, .shelf .shelf-item[data-mark="gone"] .mark { color: var(--warn); }
.failure, .asking { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.failure { background: var(--warn-soft); color: var(--warn); }
.asking { background: var(--accent-soft); }
.failure p, .asking p { margin: 0; flex: 1 1 100%; min-width: 0; }
.failure .mend { color: var(--ink); font-size: 13px; }
.failure button, .asking button { min-height: 44px; padding: 0 14px; border: 1px solid currentColor; border-radius: 8px; font-weight: 600; background: var(--panel); }

main { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }
.pane { min-height: 0; min-width: 0; overflow: auto; padding: 14px 16px; }
h2 { font-family: var(--f-label); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin: 0 0 10px; }
.hint, .note { color: var(--ink-2); font-size: 13px; margin: 10px 0 0; }
.assumed, .blocked { color: var(--warn); font-size: 13px; margin: 8px 0 0; }
.blocked { font-weight: 600; margin: 0 0 10px; }

/* The project and its cabinets */
.pick { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font-size: 13px; }
.pick select, .pick input { min-height: 44px; min-width: 0; width: 100%; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.files button, .files select, .open { min-height: 44px; min-width: 0; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--accent-ink); font-weight: 600; }
.files select { grid-column: 1 / -1; width: 100%; }
.open { display: flex; align-items: center; justify-content: center; text-align: center; border-style: dashed; cursor: pointer; }
.open input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.open:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
#cabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cab { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.cab[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cab b { display: block; font-weight: 600; }
.cab span { font-family: var(--f-num); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cab i { font-style: normal; font-family: var(--f-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-left: auto; white-space: nowrap; }

.addrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.add { min-height: 44px; min-width: 0; padding: 0 4px; border: 1px dashed var(--accent); border-radius: 8px; color: var(--accent-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#add-view { margin-top: 0; }
.editlink { display: block; width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-ink); font-weight: 600; }

/* The editor of one cabinet */
.back { min-height: 44px; padding: 0 12px 0 0; color: var(--accent-ink); font-weight: 600; }
.edithead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.edithead h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--f-body); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h2.section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--panel); white-space: nowrap; }
.chip.small { padding: 0 12px; font-size: 13px; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin: 8px 0; }
.field label, .field .name { color: var(--ink-2); font-size: 14px; }
.step { display: flex; align-items: center; gap: 6px; }
.step button { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font-size: 20px; line-height: 1; }
.step input { width: 92px; min-height: 44px; padding: 0 8px; text-align: right; font-family: var(--f-num); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); }
.step input[aria-invalid="true"] { border-color: var(--warn); }
.step output { min-width: 44px; text-align: center; font-family: var(--f-num); font-size: 16px; }
.unit { color: var(--ink-2); font-size: 13px; }
.error { grid-column: 1 / -1; margin: 0; color: var(--warn); font-size: 13px; text-align: right; }
#refusal { text-align: left; margin-bottom: 8px; }
.sketch { display: block; height: 220px; max-width: 100%; margin: 4px 0; fill: var(--ink); font-family: var(--f-body); user-select: none; -webkit-user-select: none; }
.sketch .cell { cursor: pointer; }
.sketch .cell rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sketch .cell.sel rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.sketch .cell line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sketch .cell text { pointer-events: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.crumbs .chip + .chip::before { content: '›'; margin-right: 8px; color: var(--ink-2); }
.pick.wide { grid-template-columns: minmax(0, 1fr); }
.split { border-left: 3px solid var(--line-strong); padding-left: 10px; margin: 8px 0; }
.splithead { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }
.child { padding: 8px 0; border-top: 1px dashed var(--line); }
.childhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leaf .pick { grid-template-columns: minmax(0, 1fr); }

/* The wall with all its cabinets */
.wallbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wallbar .grow { flex: 1; }
.wallbar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The wall fits its frame: as wide as the frame, no taller than most of the screen, and centred when the frame is
   wider than the wall needs. Zoomed in, it is larger than the frame and is panned. */
.wallscroll { overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 72vh; }
.wallscroll svg { display: block; height: auto; max-height: calc(var(--zoom, 1) * 68vh); fill: var(--ink); font-family: var(--f-num); user-select: none; -webkit-user-select: none; }
.wallscroll .ground { stroke: var(--line-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wallscroll .body { fill: var(--sunk); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wallscroll .face { fill: var(--panel); stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallscroll .name { font-family: var(--f-body); font-weight: 600; pointer-events: none; }
.wallscroll .hit { fill: transparent; cursor: grab; touch-action: pan-x pan-y; }
.wallscroll .sel .hit { touch-action: none; }
.wallscroll .sel .body { stroke: var(--accent); stroke-width: 3; }
.wallscroll .sel .face { fill: var(--accent-soft); }
.wallscroll .bad .body { stroke: var(--warn); stroke-width: 3; fill: var(--warn-soft); }
.wallscroll .dragging { opacity: .8; }
.wallscroll .cannot .body { stroke: var(--warn); stroke-width: 3; fill: var(--warn-soft); }
.wallscroll .cannot .face { fill: var(--warn-soft); stroke: var(--warn); }
.wallscroll .moving .body { stroke: var(--accent); stroke-dasharray: 6 4; }
.wallscroll .land { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.wallscroll .land.narrow { fill: var(--warn-soft); stroke: var(--warn); }
.wallsay { min-height: 4.4em; margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--accent-ink); font-weight: 600; }
.wallsay.idle { color: var(--ink-2); font-weight: 400; }
.wallsay.warns { color: var(--warn); }
.wallscroll .dragging .hit { cursor: grabbing; }
.wallscroll .filler { cursor: pointer; }
.wallscroll .filler rect { fill: var(--accent-soft); stroke: var(--accent-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallscroll .filler.sel rect { stroke: var(--accent); stroke-width: 3; }
.wallscroll .filler.bad rect { stroke: var(--warn); stroke-width: 3; fill: var(--warn-soft); }
.wallscroll .fold line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.wallscroll .fold text { fill: var(--ink-2); font-family: var(--f-label); }
.onwall { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.wallscroll .corner rect { fill: var(--sunk); stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.wallscroll .corner text { fill: var(--ink-2); font-family: var(--f-label); }
.wallscroll .corner.swing rect { fill: var(--warn-soft); fill-opacity: .45; stroke: var(--warn); stroke-dasharray: 10 6; }
.wallscroll .corner.swing text { fill: var(--warn); }
.wallscroll .solid { fill: var(--line-strong); }
.wallscroll .room { fill: var(--panel); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallscroll .depth line { stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallscroll .depth text { fill: var(--ink-2); font-family: var(--f-label); }
/* The furniture keeps its own colours in the light and the dark theme: a white board is white in both. */
#stage3d, .compare3d { --board: #F6F1E7; --board-back: #D6C4AB; --board-front: #BF8C60; --board-chosen: #F0D9BC; --board-edge: #2C1810; display: block; width: 100%; height: min(50vh, 120vw); border: 1px solid var(--line); border-radius: 8px; background: var(--ground); touch-action: none; cursor: grab; }
#stage3d[hidden] { display: none; }
.compare3d { display: block; width: 100%; height: min(40vh, 90vw); border: 1px solid var(--line); border-radius: 8px; background: var(--ground); touch-action: none; cursor: grab; }
.compare3d[hidden] { display: none; }
/* The comparison of the two versions of a project: over the designer, the two sides one over the other, and side by side where there is room. */
.compare { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); }
.compare header, .compare footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.compare header p { margin: 0; flex: 1 1 100%; color: var(--ink-2); font-size: 13px; }
.compare h2 { margin: 0; }
.compare footer { gap: 8px 12px; border-top: 1px solid var(--line); border-bottom: 0; }
.compare footer button { flex: 1 1 140px; min-height: 44px; padding: 4px 14px; border: 1px solid currentColor; border-radius: 8px; font-weight: 600; background: var(--panel); color: var(--ink); cursor: pointer; }
.compare .sides { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 12px 16px; }
@media (min-width: 900px) { .compare .sides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare .version { min-width: 0; overflow-wrap: anywhere; }
.compare .version h3 { margin: 0 0 2px; }
.compare .version h4 { margin: 12px 0 4px; font-size: 13px; }
.compare .version h4 small { font-weight: 400; color: var(--ink-2); }
.compare .when, .compare .none, .compare .legend { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }
.compare ul { margin: 0; padding-left: 18px; font-size: 13px; }
.compare .changes li[data-kind="added"] { color: var(--accent-ink); }
.compare .changes li[data-kind="removed"] { color: var(--warn); }
.compare .numbers { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
.compare .numbers dt { color: var(--ink-2); }
.compare .numbers dd { margin: 0; font-weight: 600; }
.compare .sketch { display: block; width: 100%; height: auto; max-height: 34vh; margin-bottom: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; }
.compare .sketch .floor { stroke: var(--ink-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.compare .sketch rect { fill: var(--panel); stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.compare .sketch rect[data-mark="added"] { fill: var(--accent-soft); stroke: var(--accent-ink); stroke-width: 2; }
.compare .sketch rect[data-mark="changed"] { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2; }
.compare .sketch rect.sk-ghost { fill: none; stroke: var(--warn); stroke-dasharray: 6 4; }
.compare .sketch text { font-size: 90px; fill: var(--ink); pointer-events: none; }
.compare .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border: 1px solid var(--ink-2); vertical-align: -1px; }
.compare .legend span[data-mark="added"]::before { background: var(--accent-soft); border-color: var(--accent-ink); }
.compare .legend span[data-mark="changed"]::before { background: var(--warn-soft); border-color: var(--warn); }
.compare .legend span[data-mark="removed"]::before { border-style: dashed; border-color: var(--warn); }
.compare .show3d { min-height: 44px; margin-top: 8px; }
.chipsname { align-self: center; font-family: var(--f-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* The chosen part is explained over the foot of the picture: on a phone it is in sight without scrolling past the view. */
.stage { position: relative; }
.partcard { position: absolute; left: 8px; right: 8px; bottom: 8px; max-width: 420px; max-height: 70%; overflow: auto; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); }
.partcard.top { top: 8px; bottom: auto; }
.partcard .cardhead { display: flex; align-items: center; gap: 10px; }
.partcard .cardhead b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.partcard .material { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.partcard ul { margin: 8px 0; padding: 0; list-style: none; font-family: var(--f-num); font-size: 13px; }
.partcard summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.partcard pre { margin: 0; font-family: var(--f-num); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.swatch { display: inline-block; width: 18px; height: 12px; border: 1.5px solid var(--ink); background: var(--sunk); vertical-align: middle; }
.swatch.hung { background: transparent; border-style: dashed; }
.swatch.solid { background: var(--line-strong); border-color: var(--line-strong); }
.wallscroll .print { cursor: pointer; }
.wallscroll .print rect { fill: var(--sunk); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wallscroll .print.hung rect { fill: transparent; stroke-dasharray: 5 4; }
.wallscroll .print.sel rect { stroke: var(--accent); stroke-width: 3; fill: var(--accent-soft); }
.wallscroll .print.bad rect { stroke: var(--warn); stroke-width: 3; fill: var(--warn-soft); }
.wallscroll .print text { font-family: var(--f-body); font-weight: 600; pointer-events: none; }
.wallscroll .swing { fill: var(--warn-soft); fill-opacity: .35; stroke: var(--warn); stroke-width: 1; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.wallscroll .swing.shut { fill-opacity: .7; stroke-width: 2.5; }
.wallscroll .gap rect { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.wallscroll .gap text { fill: var(--ink-2); }
.wallscroll .plus { cursor: pointer; }
.wallscroll .plus circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wallscroll .plus text { fill: var(--accent-ink); font-family: var(--f-body); }
.offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.offer b { font-family: var(--f-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.offer.ask { border-color: var(--warn); }
.offer.ask b { color: var(--warn); }
.offer[data-kind="shut"] b, .offer[data-kind="shut"] span { grid-column: 1 / -1; }
.offer button { grid-column: 1 / -1; min-height: 44px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-ink); font-weight: 600; text-align: left; }
#wall-note { text-align: left; margin-top: 10px; }

/* The drawing lies on paper, in ink, whatever the theme: it is the same drawing that gets printed. */
.paper { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.paper .views { display: block; }
.paper svg { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.paper .outline { fill: none; stroke: #999; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.paper .part { fill: #fff; stroke: #111; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.paper .part.door, .paper .part.drawer-front, .paper .part.flap { fill: #e9e4dc; }
.paper .part.back { fill: #bbb; }
.paper .part.dashed { fill: none; stroke-dasharray: 6 4; }
.paper .dim { stroke: #555; stroke-width: .8; vector-effect: non-scaling-stroke; }
.paper .lead { stroke: #555; stroke-width: .6; vector-effect: non-scaling-stroke; }
.paper text { fill: #111; }
.paper .title { font-weight: bold; }

/* Parts and issues */
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th { font-family: var(--f-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: left; font-weight: 600; }
th, td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.n { text-align: right; }
td.n { font-family: var(--f-num); }
.issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: 8px; }
.issue p { margin: 0; overflow-wrap: anywhere; }
.tag { font-family: var(--f-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; align-self: start; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.tag.blocking { background: var(--warn-soft); color: var(--warn); }
.needs h3 { margin: 18px 0 6px; font-family: var(--f-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.needs table + .scroll, .needs .scroll + .scroll { margin-top: 10px; }
/* The reminder about a project kept only in this browser, and what this device does with the app. */
.keeping { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); }
.keeping p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.keeping .last { color: var(--ink-2); }
.keeping .acts, .about .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.keeping button, .about button { min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--accent-ink); font-weight: 600; }
.about { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.about summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink-2); }
.about dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 10px; margin: 6px 0 0; }
.about dt { color: var(--ink-2); }
.about dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* The documents: a card each, and the viewer that covers the app while a document is open. */
.doc { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.doc b { display: block; font-size: 16px; }
.doc p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.doc .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.doc button, .docbar button { min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--accent-ink); font-weight: 600; }
.doc .refused { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); }
.doc .refused p { margin: 0; color: var(--warn); }
.doc .refused button { margin-top: 8px; border-color: currentColor; color: var(--warn); }
/* The files an order was sent with, under the documents: what is kept for the order and a set written again. Every class here starts with "sent-": the layout's own names are global. */
.sent { margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sent h3 { margin: 0 0 6px; font-family: var(--f-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sent p { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.sent a { color: var(--accent-ink); }
.sent button, .sent .sent-download { min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--accent-ink); font-weight: 600; }
.sent .sent-download { display: inline-flex; align-items: center; text-decoration: none; }
.sent .sent-open { display: inline-flex; align-items: center; min-height: 44px; }
.sent-keep { margin-top: 10px; }
.sent-done { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.sent-done p { margin: 0; }
.sent .failure { margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 8px; }
/* What a customer would be shown (P5.8): a card like the one above, with the way to the account's page where the links are made. */
.share { margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.share h3 { margin: 0 0 6px; font-family: var(--f-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.share p { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.share #share-pending { color: var(--warn); }
.share .share-open { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--accent-ink); font-weight: 600; }
.sent-sets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.sent-set { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--ground); display: grid; gap: 6px; }
.sent-set small { color: var(--ink-2); overflow-wrap: anywhere; }
.sent-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sent-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sent-files span { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; font-family: var(--f-num); font-size: 12px; }
.sent-verdict { padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); }
.sent-verdict[data-same="false"] { background: var(--warn-soft); color: var(--warn); }
.sent-verdict p { margin: 0; }
.sent-verdict ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.lead { margin: 0 0 10px; }
.docview { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--ground); }
.docbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: var(--panel); border-bottom: 1px solid var(--line); }
.docbar b { flex: 1 1 8em; min-width: 0; font-size: 16px; }
.docbar .pick { margin: 0; }
.docpage { min-width: 0; overflow: auto; background: #fff; }
.docpage.sheets { padding: 4px 16px 16px; background: var(--panel); }
.docpage h3 { margin: 14px 0 6px; font-family: var(--f-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* Printing while a document is open prints the document alone: the app is put away, the viewer flows over as many pages as it needs. */
@media print {
  html.viewing, html.viewing body { height: auto; background: #fff; }
  html.viewing .app, html.viewing .docbar { display: none; }
  html.viewing .docview { position: static; display: block; }
  html.viewing .docpage { overflow: visible; }
}
.count { font-family: var(--f-num); font-size: 12px; background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }

/* Phone: one pane at a time, chosen from the bar at the bottom. The table is set tighter, so that all its columns fit. */
@media (max-width: 699px), (max-height: 499px) { table { font-size: 14px; } th, td { padding: 8px 6px 8px 0; } th { letter-spacing: .04em; } }
.side { display: contents; }
.tabs { display: none; }
.pane { grid-area: 1 / 1; display: none; }
.app[data-tab="cabinets"] #list, .app[data-tab="cabinet"] #edit, .app[data-tab="view"] #view, .app[data-tab="parts"] #parts, .app[data-tab="issues"] #issues, .app[data-tab="docs"] #docs { display: block; }
/* Five sections on a phone's bar: each button is as wide as its word needs, and the words shrink with a narrow screen, whatever the font. */
nav { grid-row: 4; display: flex; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
nav button { flex: 1 1 auto; font-size: min(14px, 3.3vw); letter-spacing: .02em; white-space: nowrap; }
nav button, .tabs button { min-height: 56px; min-width: 0; padding: 0 2px; font-family: var(--f-label); text-transform: uppercase; color: var(--ink-2); font-weight: 600; border-top: 3px solid transparent; }
.tabs button { font-size: 14px; letter-spacing: .04em; }
nav button[aria-pressed="true"] { color: var(--ink); border-top-color: var(--accent); }
#add-list { margin-bottom: 0; }

/* Tablet: the project and the drawing on the left, the lists on the right. */
/* A phone held sideways is wide but not tall: it keeps the phone's layout, one pane at a time. */
@media (min-width: 700px) and (min-height: 500px) {
  nav { display: none; }
  main { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app #list { display: block; grid-area: 1 / 1; background: var(--sunk); padding-bottom: 8px; max-height: 46vh; }
  #list h2 { display: none; }
  #cabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .cab { width: auto; flex: none; }
  .files { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
  .files select { grid-column: auto; }
  .app #view { display: block; grid-area: 2 / 1; }
  .side { display: grid; grid-area: 1 / 2 / 3 / 3; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid var(--line); min-height: 0; }
  .tabs { display: flex; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
  .tabs button { flex: 1 1 auto; min-height: 48px; padding: 0 6px; border-top: 0; border-bottom: 3px solid transparent; font-size: min(14px, 1.7vw); white-space: nowrap; }
  .tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
  .side > .pane { grid-area: 2 / 1; }
  /* Until the lists are asked for, the editor of the chosen cabinet stands beside the drawing. */
  .app #edit { display: block; }
  .app[data-tab="parts"] #edit, .app[data-tab="issues"] #edit, .app[data-tab="docs"] #edit { display: none; }
  .back, #add-view { display: none; }
  .app:not([data-tab="parts"]):not([data-tab="issues"]):not([data-tab="docs"]) #edit-here { display: none; }
}

/* Desktop: the project and its cabinets | the drawing | the lists. */
@media (min-width: 1100px) and (min-height: 500px) {
  main { grid-template-columns: 300px minmax(0, 1fr) 440px; grid-template-rows: minmax(0, 1fr); }
  .app #list { grid-area: 1 / 1; background: var(--ground); border-right: 1px solid var(--line); max-height: none; padding-bottom: 14px; }
  #list h2 { display: block; }
  #cabs { flex-direction: column; overflow: visible; }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
  .files select { grid-column: 1 / -1; }
  #add-list { grid-template-columns: minmax(0, 1fr); }
  .cab { width: 100%; }
  .app #view { grid-area: 1 / 2; }
  .side { grid-area: 1 / 3; }
  .paper .views { display: flex; align-items: flex-start; }
  .paper .views svg { flex-basis: 0; min-width: 0; }
}