/* Measuring like Dalux and FastView (B21): the tool row, one line of a fixed height for the hint
   or the results, the note editor, the measuring settings, the drawing's notices in one line, and
   the picture for print. The bar keeps one height in every state of Measure, so the drawing does
   not move while measuring; it is top-anchored when the bar grows as Measure starts. */

:root { --measure-wash: #f1e9f9; }
@media screen { :root.dark-chrome { --measure-wash: #2e2640; } } /* the name on it at 4.5:1 or more */

/* In the browse bar the status is the first line of the result row, as wide as the bar. */
.result-row > .status { flex: 1 1 100%; min-width: 0; }

/* One row of big labelled icons. On a wide screen all nine; on a phone (and in the landscape rail)
   five, the kinds of measurement folded into one button that shows the kind in use and opens the
   chooser (measure-bar.js; Raido, 2026-10-25, as AutoCAD's and Autodesk Build's apps: Measure, then
   the kind). */
.measure-row { display: flex; gap: 0; padding: 6px 0 2px; margin: 0 -6px; }
.measure-tool {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 54px;
  padding: 1px 0;
  border-color: transparent;
  background: transparent;
  font: 500 11px/1.1 var(--text);
  letter-spacing: -0.02em;
  position: relative;
}
.measure-tool .icon { width: 24px; height: 24px; flex: none; }
@media (max-width: 380px) { .measure-tool { font-size: 10px; } }
/* A label is one line, or two where it is two words wider than the button, never cut. */
.measure-tool span { display: block; max-width: 100%; overflow: hidden; white-space: normal; line-height: 1.1; max-height: 2.2em; overflow-wrap: normal; }
.measure-kind { display: none; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .measure-row > .kind-inline { display: none; }
  .measure-row > .measure-kind { display: flex; flex-grow: 1.6; }
}
/* The kind button's mark that it opens a chooser: a small triangle in its corner. */
.kind-more { position: absolute; right: 7px; bottom: 7px; width: 0; height: 0; border-left: 7px solid transparent; border-bottom: 7px solid currentColor; opacity: 0.75; }
/* The chooser: one kind a line on a phone held upright, side by side where the sheet is wide; each
   its icon and whole name, 52 px high. */
.measure-kinds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 4px 8px; padding: 8px 0 4px; }
.measure-kinds-list .kind-choice { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; font: 500 17px/1.2 var(--text); text-align: left; }
.measure-kinds-list .kind-choice .icon { width: 26px; height: 26px; flex: none; }
.measure-kinds-list .kind-choice span { display: block; }
.measure-kinds-list .kind-choice[aria-pressed="true"] { border-color: var(--measure); background: var(--measure-wash); color: var(--measure); font-weight: 600; }
/* The tool in use stands out at a glance: tinted in the measurements' colour, its edge and name too. */
.measure-tool[aria-pressed="true"] { border-color: var(--measure); background: var(--measure-wash); color: var(--measure); font-weight: 600; }
.measure-tool[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; background: var(--measure); }

/* The line under the row: the hint, a message or the results, never more than one line. */
.measure-mode .result-row { flex-wrap: nowrap; align-items: center; gap: 0 12px; height: 46px; overflow: hidden; }
.measure-mode .result-row > .status { flex: 1 1 auto; height: 46px; line-height: 46px; font-size: 15px; color: var(--graphite); }
.measure-mode .status.faded { opacity: 1; }
/* Values that do not fit go to a second line, which the bar's one line hides: a value shows whole or not
   at all, never cut (beside the scale button on a phone, ΔY gives way first). */
.measure-mode .measure-results { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: center; align-content: flex-start; height: 40px; gap: 12px 16px; padding: 0; overflow: hidden; }
.measure-mode .measure-results > span { flex: none; }
/* The scale, whole: "1:30, from the viewport" goes on two lines on a narrow phone (W12). */
.measure-mode .result-scale { flex: none; max-width: 38%; overflow: hidden; white-space: normal; line-height: 1.15; margin: 0; }
.result-main strong { font: 700 28px/1.1 var(--text); letter-spacing: -0.01em; }
/* Two words wrap ("Kustuta kõik"), inside the same height. */
.measure-mode .bar-actions button { height: 48px; line-height: 1.05; }
.snap-tag { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; font-size: 17px; color: var(--graphite); white-space: nowrap; }
.snap-mark { color: #0a7d3c; flex: none; }
/* The unit switch beside the reading at the first measurement (D50 G6): three 44 px buttons in the
   bar's one line, which is as tall as they are while it shows; the drawing's own unit marked on its
   button, and named in words after them where the line has room (a value whole or not at all). */
.measure-mode .measure-results:is(.with-units, .with-details, .with-share, .with-trust) { height: 46px; }
.measure-results > .unit-switch { display: inline-flex; flex-direction: row; align-items: stretch; }
/* A value not exact (#165): why, on up to three lines beside it ("Tap on a corner for an exact length"),
   whole or not at all, and Details, its full digits, a 44 px button. */
.measure-mode .measure-results > .result-hint { display: block; flex: 1 1 7em; min-width: 0; max-width: 18em; align-self: center; font-size: 13px; line-height: 1.1;
  color: var(--graphite); white-space: normal; max-height: 3.3em; overflow: hidden; }
.measure-results > .details-toggle { align-self: center; min-height: 44px; min-width: 44px; padding: 0 8px; font: 600 13px/1 var(--text); }
.measure-mode .measure-results.with-details { column-gap: 10px; }
.result-main .about-word { font-size: 0.62em; font-weight: 600; }
/* A snapped measurement's trust line (#165): "Exact: from two corners of the drawing", beside the
   reading as the why is beside a by-eye one, whole or not at all, the first to give way (fitLine). */
.measure-mode .measure-results > .result-trust { display: block; flex: 1 1 7em; min-width: 0; max-width: 18em; align-self: center; font-size: 13px;
  line-height: 1.1; color: var(--graphite); white-space: normal; max-height: 3.3em; overflow: hidden; }
.measure-results > .result-trust strong { font: 700 13px/1.1 var(--text); white-space: normal; }
.measure-results > .details-toggle[aria-pressed="true"] { color: var(--measure); border-color: var(--measure); background: var(--measure-wash); }
/* No room for both even with the reading at its smallest (measure-results.js fitLine, the side rail):
   the switch and Details first, the reading after them where it fits. */
.measure-results.controls-first > :is(.unit-switch, .details-toggle, .share-result) { order: -1; }
/* Share (#165 M-9): the share icon, 44 px, right after the value; beside Delete with its name. A tap
   that copied marks it for two seconds. */
.measure-results > .share-result { align-self: center; min-height: 44px; min-width: 44px; padding: 0; justify-content: center; }
.share-result .icon, .share-selected .icon { width: 22px; height: 22px; }
.share-selected { gap: 6px; }
/* A phone's bar has five buttons beside a chosen measurement: Share there is its icon (named, read out). */
@media (max-width: 600px) { .share-selected { padding: 0 10px; } .share-selected .share-label { display: none; } }
:is(.share-result, .share-selected)[data-done] { color: var(--measure); border-color: var(--measure); background: var(--measure-wash); }
/* Copying blocked: the text to copy by hand, whole, selectable (#205 review). */
.share-text textarea { display: block; width: 100%; box-sizing: border-box; min-height: 88px; margin: 4px 0 8px; font: 400 16px/1.4 var(--text);
  overflow-wrap: anywhere; resize: vertical; -webkit-user-select: text; user-select: text; }
.share-text .sheet-header button { min-height: 44px; min-width: 44px; }
.unit-switch button { min-width: 44px; min-height: 44px; padding: 0 9px; flex-direction: column; justify-content: center; gap: 1px;
  border-radius: 0; color: var(--pencil); font: 600 15px/1.05 var(--text); }
.unit-switch button + button { margin-left: -1px; }
.unit-switch button:first-child { border-radius: 3px 0 0 3px; }
.unit-switch button:last-of-type { border-radius: 0 3px 3px 0; }
.unit-switch button[aria-pressed="true"] { color: var(--measure); border-color: var(--measure); background: var(--measure-wash); position: relative; }
.unit-switch small { font: 500 10px/1 var(--text); letter-spacing: 0; }
/* A drawing unit no button is (cm, km, yd): its symbol over "drawing" after the buttons, as tall as
   they are, in the group, so it shows wherever the switch does. */
.unit-switch .unit-own { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; min-height: 44px;
  padding: 0 2px 0 8px; color: var(--graphite); font: 600 15px/1.05 var(--text); white-space: nowrap; }
.measure-results > .unit-label { display: block; align-self: center; font-size: 13px; color: var(--pencil); }
/* On two lines where it must ("Drawing units: / millimetres"), as narrow as 6.5em, else not at all. */
.measure-mode .measure-results > .unit-named { display: block; flex: 1 1 6.5em; min-width: 0; max-width: 16em; align-self: center; font-size: 12px; line-height: 1.15;
  color: var(--graphite); white-space: normal; max-height: 2.3em; overflow: hidden; }
.dark-chrome .snap-mark { color: #3ddc84; }
@media (min-width: 901px) {
  .measure-row { max-width: 40rem; margin: 0 auto; }
  .measure-mode .result-row { max-width: 40rem; margin: 0 auto; justify-content: center; }
}

/* A note being written takes the bar: the text, then Delete, Cancel and Save. */
.note-editor { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.note-editor textarea { font: inherit; font-size: 16px; min-height: 64px; padding: 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--graphite); resize: none; }
.note-actions { display: flex; gap: 8px; }
.note-actions button { flex: 1; justify-content: center; min-height: 48px; font-size: 17px; }
@media (min-width: 901px) { .note-editor { max-width: 40rem; margin: 0 auto; } }

/* Measuring settings: the units, the decimals, the snaps, one per line within thumb reach. */
.snap-settings { border: 0; margin: 0; padding: 14px 0; display: flex; flex-direction: column; }
.snap-settings legend { padding: 0 0 6px; font-weight: 600; }
.snap-settings .check { min-height: 44px; }
.picture-actions { gap: 8px; justify-content: flex-start; }

/* The drawing's notices in one line under it; a tap lays them all out over the drawing, so the
   drawing keeps its size either way. */
.drawing-notices { position: relative; flex: none; max-height: none; overflow: visible; padding: 0 12px; }
.drawing-notices > details > summary { height: 44px; line-height: 44px; padding: 0; } /* a tap target (W19) */
.drawing-notices > details[open] > summary { white-space: nowrap; }
.notice-list { margin: 0; padding: 8px 12px 10px 28px; list-style: none; }
.drawing-notices details[open] > .notice-list {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 2;
  max-height: 50dvh; overflow: auto; background: var(--paper); border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 18px rgba(38, 42, 46, 0.14);
}
.notice-list li { padding: 4px 0; white-space: normal; }
.notice-list li + li { border-top: 1px solid var(--rule); }
/* The dimensions a notice names (#165 V-2): each a 44 px tap that shows it. */
.notice-items { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; }
.notice-item { min-height: 44px; width: 100%; justify-content: flex-start; text-align: left; white-space: normal; padding: 6px 10px; }
/* A label of one long word ("WWWW…", 40 characters at most) breaks where it must, within the screen (#204 review). */
:is(.notice-text, .notice-item, .notice-nowhere) { overflow-wrap: anywhere; min-width: 0; }

/* Print picture: the picture alone on the page. */
.picture-print { display: none; margin: 0; }
@media print {
  body.print-picture .report { display: none !important; }
  body.print-picture .picture-print { display: block !important; }
  body.print-picture .picture-print img { display: block; width: 100%; height: auto; }
}

/* W12: points not all in one viewport have no scale: the line says so, on two lines inside the bar's
   height where the scale button beside it leaves no room for one, and the button asks for a scale. */
.measure-results > .result-message, .measure-mode .measure-results > .result-message { display: block; flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 1.25; max-height: 2.5em; color: var(--graphite); white-space: normal; overflow: hidden; }
.result-scale.missing { border-color: var(--measure); color: var(--measure); font-weight: 600; }

/* W15: the measurements list. Each row: its name (a field), Delete, and under them what it is and its
   value, the whole line one button that shows it on the drawing. Totals per kind at the end. */
#list-body h3 { margin: 16px 0 4px; font-size: 16px; }
#list-body .list-here { margin: 8px 0 4px; }
#list-body .list-details { min-height: 44px; margin: 4px 0 8px; }
#list-body .list-details[aria-pressed="true"] { color: var(--measure); border-color: var(--measure); background: var(--measure-wash); }
#list-body .list-all { min-height: 44px; margin: 0 0 8px; }
#list-body h4 { margin: 8px 0 2px; font-size: 14px; color: var(--pencil); }
.measure-list { list-style: none; margin: 0; padding: 0; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name delete" "show show"; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.list-row .list-name { grid-area: name; min-height: 44px; min-width: 0; font: inherit; font-size: 16px; padding: 4px 8px; }
.list-row .list-delete { grid-area: delete; min-height: 44px; min-width: 44px; }
.list-row .list-show { grid-area: show; min-width: 0; min-height: 44px; justify-content: flex-start; flex-wrap: wrap; white-space: normal; gap: 0 12px; text-align: left; border-color: transparent; background: transparent; padding: 4px 8px; }
.list-row .list-show:hover, .list-row .list-show:focus-visible { border-color: var(--rule); }
.list-kind { flex: none; min-width: 4.5em; color: var(--pencil); font-size: 14px; }
.list-value { min-width: 0; font: 400 18px/1.3 var(--lettering); overflow-wrap: anywhere; }
.list-totals dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 6px 0 0; }
.list-totals dt { color: var(--pencil); }
.list-totals dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.list-totals dd strong { font: 400 18px/1.3 var(--lettering); }
.list-page-totals { padding: 6px 0 4px; }
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 0 4px; }
.list-actions button { min-height: 48px; }

/* #87: a phone turned sideways measures with a side rail. In a short landscape window, while
   measuring, the tools stand in two columns at the side, the hint or the results under them and
   Undo, Fit, Done and More at the foot; the file's header and the notices line fold away (Done
   brings them back), all but the layers' ☰, which goes to the rail's top, before the kinds' button (#191): the drawing keeps the window's full height and most of its width, all of it
   in reach of a tap. */
@media (orientation: landscape) and (max-height: 500px) {
  body.app.measure-open { --rail: min(36vw, 232px); display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); grid-template-rows: minmax(0, 1fr); }
  body.app.measure-open > .pro-secondary, body.app.measure-open > .toolbar > :not(.layers-open), body.app.measure-open .drawing-notices { display: none; }
  body.app.measure-open > .toolbar { position: fixed; top: max(6px, env(safe-area-inset-top)); left: calc(100% - var(--rail) + 6px); min-height: 0; padding: 0; border: 0; }
  .measure-open .toolbar .layers-open { margin: 0; border-color: var(--rule); }
  body.app.measure-open:has(#layers-open:not([hidden])) .measure-row > .measure-kind { margin-left: 62px; }
  body.app.measure-open > .workspace { grid-column: 1; grid-row: 1; min-height: 0; }
  body.app.measure-open > .viewer-bar {
    grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    border-top: 0; border-left: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; text-align: left;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) 6px;
  }
  /* The tools take the height the rest leaves, 44 px a row at the least: all of it fits 342 px. The
     kinds' button across the top, Calibrate, Note, Delete and Settings two by two under it. */
  .measure-open .measure-row { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(44px, 1fr)); margin: 0; padding: 0; max-width: none; }
  .measure-open .measure-row > .measure-kind { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
  .measure-open .measure-tool { min-height: 44px; padding: 2px; gap: 2px; }
  .measure-open .viewer-bar.measure-mode .result-row { flex: none; height: 44px; max-width: none; margin: 0; justify-content: flex-start; }
  .measure-open .viewer-bar.measure-mode .result-row > .status { height: 44px; }
  .measure-open .viewer-bar.measure-mode .result-row > .status { white-space: normal; line-height: 1.2; font-size: 14px; display: flex; align-items: center; overflow: hidden; }
  .measure-open .result-main strong { font-size: 24px; }
  .measure-open .bar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: none; margin: 0; }
  .measure-open .viewer-bar .bar-actions button { height: 44px; min-height: 44px; font-size: 15px; }
  .measure-open #more { padding-left: 6px; padding-right: 6px; }
  /* The unit switch (D50 G6) comes first in the rail's narrow line, its buttons closer: always
     whole, the reading after it where the line has room, else wrapped out of sight whole (the
     measurement's label on the drawing has it). */
  .measure-open .viewer-bar.measure-mode .measure-results.with-units { height: 44px; column-gap: 8px; }
  .measure-open .viewer-bar.measure-mode .measure-results:is(.with-details, .with-share, .with-trust) { height: 44px; }
  .measure-open .measure-results.with-units > .unit-switch { order: -1; }
  .measure-open .unit-switch button { padding: 0 4px; }
  .measure-open .unit-switch .unit-own { padding: 0 0 0 6px; }
  .measure-open .measure-results.with-units .result-main strong { font-size: 22px; }
}

/* #212: the drawn slope's note with Details, and the levels at a line's ends (levels.js): two fields,
   each with +/− (a phone's decimal pad has no minus) and its unit, the fall as it will read, Save. On a
   phone the fields and buttons are G05's 56 px (gloves); the text in them 18 px (no zoom on focus). */
.measure-mode .measure-results > .result-note { display: block; flex: 1 1 10em; min-width: 0; max-width: 22em; align-self: center; font-size: 12px; line-height: 1.15;
  color: var(--pencil); white-space: normal; }
.list-slope-note { margin: 10px 0 0; }
.levels-sheet .note { margin: 12px 0 4px; }
.levels-field { display: grid; gap: 4px; padding: 10px 0; }
.levels-field label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.levels-name { font-weight: 600; }
.levels-where { color: var(--pencil); font-size: 13px; }
.levels-input { display: flex; align-items: stretch; gap: 8px; }
.levels-input input { flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 10px; font: 400 18px/1.2 var(--text);
  font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text; }
.levels-sign { flex: none; min-width: 44px; min-height: 44px; justify-content: center; font: 600 16px/1 var(--text); }
.levels-unit { flex: none; align-self: center; min-width: 2em; color: var(--graphite); font: 600 16px/1 var(--text); }
.levels-result { min-height: 2.6em; margin: 6px 0; font: 600 16px/1.3 var(--text); color: var(--measure); }
.levels-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.levels-selected { gap: 6px; }
.levels-selected .icon { width: 22px; height: 22px; flex: none; }
/* Beside Share on a phone's bar of six: the level mark alone (named, read out), as Share's icon. */
@media (max-width: 600px) {
  .levels-selected .levels-label { display: none; }
  /* With it the bar has six: the two marks alone take 44 px each and the gaps 6, so Measure, Fit, Delete
     and More keep their words whole on a 360 px phone. */
  .bar-actions:has(> #browse-actions > .levels-selected:not([hidden])) { gap: 6px; }
  #browse-actions:has(> .levels-selected:not([hidden])) > :is(.levels-selected, .share-selected) { flex: 0 0 44px; padding: 0; }
}
@media (pointer: coarse) {
  .levels-input input, .levels-sign, .levels-actions button { min-height: 56px; }
  .levels-sign { min-width: 56px; }
}

/* #213: Total length's sheet (lengths-sheet.js): three lists of ticks, each row its own total at the right;
   a colour's swatch, a line type's sample; the total and Keep, Share, Show at its foot, kept in view while
   the lists scroll. Rows and buttons 44 px, G05's 56 px on a touch screen. */
.lengths-sheet fieldset { margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--rule); }
.lengths-sheet legend { padding: 0; font-weight: 600; }
.lengths-where { display: flex; flex-wrap: wrap; gap: 0 18px; }
.lengths-list ul { margin: 0; padding: 0; list-style: none; }
.lengths-list li { display: flex; align-items: center; gap: 8px; }
.lengths-list .check { flex: 1 1 auto; min-width: 0; gap: 8px; }
.lengths-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lengths-value { flex: none; color: var(--graphite); font-variant-numeric: tabular-nums; }
.lengths-swatch { flex: none; width: 18px; height: 18px; border: 1px solid var(--rule); border-radius: 3px; }
.lengths-sample { flex: none; width: 40px; height: 8px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lengths-foot { --under: max(18px, env(safe-area-inset-bottom)); position: sticky; bottom: calc(-1 * var(--under)); margin: 0 -18px calc(-1 * var(--under));
  padding: 10px 18px var(--under); background: var(--paper); border-top: 1px solid var(--rule); }
.lengths-card p { margin: 0 0 6px; }
#lengths-total { display: grid; gap: 2px; }
#lengths-total strong { font: 700 20px/1.25 var(--text); color: var(--measure); }
.lengths-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 6px 0 0; }
@media (pointer: coarse) {
  .lengths-sheet .check, .lengths-actions button { min-height: 56px; }
}