/*
 * HAND-WRITTEN, like links.css and not-built.css, and for the same kind of reason: the prototype
 * cannot supply it (Rev 80).
 *
 * The prototype redraws its form on every click, so its renderer marks the choice made with
 * `.check.on` (`rev137:10869`) and draws the sprinkler parts only while sprinkler is chosen
 * (`rev137:10889`). A form drawn once by the server cannot be redrawn, so both are said here, from
 * the inputs themselves: nothing has to run for either to be right, and nothing that runs can let
 * them drift from what is actually checked.
 *
 * It mostly adds. Where a rule here overrides one of platform.css's, its comment names the rule it
 * overrides and says why.
 */

/* `.check.on`'s own look, for the choice that is checked now. */
.check:has(> input:checked) {
  border-color: var(--ink-3);
  background: var(--blue-bg);
}

/* A group of checkboxes, drawn as the prototype's `div.checks`: the browser's own fieldset border,
   padding and minimum width taken off, so it lays out as the div did. `.plain` is the same group
   laid out as one column the full width of its card, where the prototype's list is not a grid —
   the Approval decision's inspections (`rev137:11198`). */
fieldset.checks,
fieldset.plain {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Boxes under one heading, as a fieldset (#144): the browser's own look taken off, and its legend
   the prototype's field label (`.field > label`). */
fieldset.field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

fieldset.field > legend {
  padding: 0;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* What a sprinkler submittal carries, shown once sprinkler is the discipline chosen. */
[data-parts] {
  display: none;
}

.card-bd:has(input[name="discipline"][value="sprinkler"]:checked) [data-parts] {
  display: block;
}

/*
 * *Quantities* (#153): a count for each billable part ticked on a sprinkler submittal, as Rev 137
 * draws one only for those (`rev137:10831`), and the card only while there is one. Said as "hidden
 * unless ticked", so a browser that cannot read `:has()` drops these rules and shows all three; the
 * server reads a count only for a part ticked, and ignores the rest.
 */
[data-submittal]:not(:has(input[name="discipline"][value="sprinkler"]:checked)) [data-quantities] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="sprinkler"]:checked, input[name="parts"][value="standpipe"]:checked, input[name="parts"][value="pump"]:checked)) [data-quantities] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="sprinkler"]:checked)) [data-count="sprinkler"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="standpipe"]:checked)) [data-count="standpipe"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="pump"]:checked)) [data-count="pump"] {
  display: none;
}

/*
 * Rev 137's notification bell (`rev137:8980`), drawn as a `<details>` (`ui/bell.tsx`). The
 * prototype redraws the page with `.bell.on` while its panel is open; a page drawn once opens and
 * closes it with the browser's own element, so the look is said here from the element's own state.
 */

/* The summary is the prototype's `.bell` button, with none of the browser's disclosure marker. */
.bellwrap > summary {
  list-style: none;
}

.bellwrap > summary::-webkit-details-marker {
  display: none;
}

/* `.bell.on`'s own look, for the bell whose panel is open. */
.bellwrap[open] > .bell {
  background: var(--ink);
  border-color: var(--ink);
}

.bellwrap[open] > .bell svg {
  stroke: #fff;
}

/* The prototype's header button sits at the right (`.notif-hd .btn`); here it is in its form. */
.notif-hd form {
  margin-left: auto;
}

/* A row that opens nothing, where every one of the prototype's is a button. */
div.notif-row {
  cursor: default;
}

div.notif-row:hover {
  background: none;
}

/* How many more of a kind there are than the panel lists. */
.notif-more {
  padding: 8px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}

/* What the panel says when *Mark messages read* brings it back (#247): Rev 137 toasts it
   (`rev137:12933`), and here the panel the press came back to says it, at its head. */
.notif-said {
  margin: 0;
  padding: 8px 13px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--blue-bg);
  font-size: 12px;
  color: var(--ink-3);
}

/*
 * A rough inspection's hydrostatic standard (#137), drawn only while the rough inspection is ticked
 * on the Approval decision, as Rev 137 draws it (`rev137:11191`). Said as "hidden unless ticked", so
 * a browser that cannot read `:has()` drops the whole rule and simply leaves the choice in view.
 */
.card-bd:not(:has(input[name="inspection"][value="rough"]:checked)) [data-hydro] {
  display: none;
}

/* So it is on *Add an inspection* (#180), while the rough inspection is the one chosen. */
.card-bd:not(:has(input[name="type"][value="rough"]:checked)) [data-hydro-added] {
  display: none;
}

/*
 * The approval letter's preview, step 3 of the Approval decision (decision 0295): it lists the
 * inspections ticked in step 2, and the rough inspection at the standard chosen there, as the letter
 * will. The server draws it as the form starts, an inspection not ticked `hidden`; these rules keep it
 * to what is ticked from then on, read off the inputs themselves, so nothing has to run for it and
 * nothing that runs can let it drift. A browser that cannot read `:has()` drops them, and shows the
 * list the form started with. The final is always ticked, and has no rule.
 */
[data-approval-steps]:has(input[name="inspection"][value="rough"]:checked) [data-letter-inspection="rough"],
[data-approval-steps]:has(input[name="inspection"][value="alarm_rough"]:checked) [data-letter-inspection="alarm_rough"],
[data-approval-steps]:has(input[name="inspection"][value="device"]:checked) [data-letter-inspection="device"],
[data-approval-steps]:has(input[name="inspection"][value="pump_test"]:checked) [data-letter-inspection="pump_test"],
[data-approval-steps]:has(input[name="inspection"][value="hood_test"]:checked) [data-letter-inspection="hood_test"],
[data-approval-steps]:has(input[name="inspection"][value="clean_test"]:checked) [data-letter-inspection="clean_test"],
[data-approval-steps]:has(input[name="inspection"][value="smoke_test"]:checked) [data-letter-inspection="smoke_test"] {
  display: list-item;
}
[data-approval-steps]:has(input[name="inspection"][value="rough"]:not(:checked)) [data-letter-inspection="rough"],
[data-approval-steps]:has(input[name="inspection"][value="alarm_rough"]:not(:checked)) [data-letter-inspection="alarm_rough"],
[data-approval-steps]:has(input[name="inspection"][value="device"]:not(:checked)) [data-letter-inspection="device"],
[data-approval-steps]:has(input[name="inspection"][value="pump_test"]:not(:checked)) [data-letter-inspection="pump_test"],
[data-approval-steps]:has(input[name="inspection"][value="hood_test"]:not(:checked)) [data-letter-inspection="hood_test"],
[data-approval-steps]:has(input[name="inspection"][value="clean_test"]:not(:checked)) [data-letter-inspection="clean_test"],
[data-approval-steps]:has(input[name="inspection"][value="smoke_test"]:not(:checked)) [data-letter-inspection="smoke_test"] {
  display: none;
}
/*
 * The same, for the rest of the inspection catalogue (decision 0401): an All Trades file's approval offers
 * the inspections of its trades, and its letter's preview keeps to what is ticked as Fire's does.
 */
[data-approval-steps]:has(input[name="inspection"][value="footing"]:checked) [data-letter-inspection="footing"],
[data-approval-steps]:has(input[name="inspection"][value="foundation"]:checked) [data-letter-inspection="foundation"],
[data-approval-steps]:has(input[name="inspection"][value="framing"]:checked) [data-letter-inspection="framing"],
[data-approval-steps]:has(input[name="inspection"][value="insulation"]:checked) [data-letter-inspection="insulation"],
[data-approval-steps]:has(input[name="inspection"][value="fireassy"]:checked) [data-letter-inspection="fireassy"],
[data-approval-steps]:has(input[name="inspection"][value="facade_insp"]:checked) [data-letter-inspection="facade_insp"],
[data-approval-steps]:has(input[name="inspection"][value="access_insp"]:checked) [data-letter-inspection="access_insp"],
[data-approval-steps]:has(input[name="inspection"][value="elec_ug"]:checked) [data-letter-inspection="elec_ug"],
[data-approval-steps]:has(input[name="inspection"][value="elec_rough"]:checked) [data-letter-inspection="elec_rough"],
[data-approval-steps]:has(input[name="inspection"][value="elec_service"]:checked) [data-letter-inspection="elec_service"],
[data-approval-steps]:has(input[name="inspection"][value="gen_test"]:checked) [data-letter-inspection="gen_test"],
[data-approval-steps]:has(input[name="inspection"][value="pv_insp"]:checked) [data-letter-inspection="pv_insp"],
[data-approval-steps]:has(input[name="inspection"][value="mech_rough"]:checked) [data-letter-inspection="mech_rough"],
[data-approval-steps]:has(input[name="inspection"][value="duct_leak"]:checked) [data-letter-inspection="duct_leak"],
[data-approval-steps]:has(input[name="inspection"][value="refrig_test"]:checked) [data-letter-inspection="refrig_test"],
[data-approval-steps]:has(input[name="inspection"][value="boiler_test"]:checked) [data-letter-inspection="boiler_test"],
[data-approval-steps]:has(input[name="inspection"][value="vent_bal"]:checked) [data-letter-inspection="vent_bal"],
[data-approval-steps]:has(input[name="inspection"][value="plumb_ug"]:checked) [data-letter-inspection="plumb_ug"],
[data-approval-steps]:has(input[name="inspection"][value="plumb_rough"]:checked) [data-letter-inspection="plumb_rough"],
[data-approval-steps]:has(input[name="inspection"][value="gas_test"]:checked) [data-letter-inspection="gas_test"],
[data-approval-steps]:has(input[name="inspection"][value="backflow_test"]:checked) [data-letter-inspection="backflow_test"],
[data-approval-steps]:has(input[name="inspection"][value="erosion_insp"]:checked) [data-letter-inspection="erosion_insp"],
[data-approval-steps]:has(input[name="inspection"][value="shoring_insp"]:checked) [data-letter-inspection="shoring_insp"],
[data-approval-steps]:has(input[name="inspection"][value="grade_insp"]:checked) [data-letter-inspection="grade_insp"],
[data-approval-steps]:has(input[name="inspection"][value="util_insp"]:checked) [data-letter-inspection="util_insp"],
[data-approval-steps]:has(input[name="inspection"][value="detent_insp"]:checked) [data-letter-inspection="detent_insp"],
[data-approval-steps]:has(input[name="inspection"][value="paving_insp"]:checked) [data-letter-inspection="paving_insp"],
[data-approval-steps]:has(input[name="inspection"][value="row_insp"]:checked) [data-letter-inspection="row_insp"],
[data-approval-steps]:has(input[name="inspection"][value="demo_pre"]:checked) [data-letter-inspection="demo_pre"],
[data-approval-steps]:has(input[name="inspection"][value="demo_final"]:checked) [data-letter-inspection="demo_final"],
[data-approval-steps]:has(input[name="inspection"][value="elev_pit"]:checked) [data-letter-inspection="elev_pit"],
[data-approval-steps]:has(input[name="inspection"][value="elev_test"]:checked) [data-letter-inspection="elev_test"],
[data-approval-steps]:has(input[name="inspection"][value="fence_final"]:checked) [data-letter-inspection="fence_final"],
[data-approval-steps]:has(input[name="inspection"][value="sign_insp"]:checked) [data-letter-inspection="sign_insp"],
[data-approval-steps]:has(input[name="inspection"][value="pool_shell"]:checked) [data-letter-inspection="pool_shell"],
[data-approval-steps]:has(input[name="inspection"][value="pool_final"]:checked) [data-letter-inspection="pool_final"] {
  display: list-item;
}
[data-approval-steps]:has(input[name="inspection"][value="footing"]:not(:checked)) [data-letter-inspection="footing"],
[data-approval-steps]:has(input[name="inspection"][value="foundation"]:not(:checked)) [data-letter-inspection="foundation"],
[data-approval-steps]:has(input[name="inspection"][value="framing"]:not(:checked)) [data-letter-inspection="framing"],
[data-approval-steps]:has(input[name="inspection"][value="insulation"]:not(:checked)) [data-letter-inspection="insulation"],
[data-approval-steps]:has(input[name="inspection"][value="fireassy"]:not(:checked)) [data-letter-inspection="fireassy"],
[data-approval-steps]:has(input[name="inspection"][value="facade_insp"]:not(:checked)) [data-letter-inspection="facade_insp"],
[data-approval-steps]:has(input[name="inspection"][value="access_insp"]:not(:checked)) [data-letter-inspection="access_insp"],
[data-approval-steps]:has(input[name="inspection"][value="elec_ug"]:not(:checked)) [data-letter-inspection="elec_ug"],
[data-approval-steps]:has(input[name="inspection"][value="elec_rough"]:not(:checked)) [data-letter-inspection="elec_rough"],
[data-approval-steps]:has(input[name="inspection"][value="elec_service"]:not(:checked)) [data-letter-inspection="elec_service"],
[data-approval-steps]:has(input[name="inspection"][value="gen_test"]:not(:checked)) [data-letter-inspection="gen_test"],
[data-approval-steps]:has(input[name="inspection"][value="pv_insp"]:not(:checked)) [data-letter-inspection="pv_insp"],
[data-approval-steps]:has(input[name="inspection"][value="mech_rough"]:not(:checked)) [data-letter-inspection="mech_rough"],
[data-approval-steps]:has(input[name="inspection"][value="duct_leak"]:not(:checked)) [data-letter-inspection="duct_leak"],
[data-approval-steps]:has(input[name="inspection"][value="refrig_test"]:not(:checked)) [data-letter-inspection="refrig_test"],
[data-approval-steps]:has(input[name="inspection"][value="boiler_test"]:not(:checked)) [data-letter-inspection="boiler_test"],
[data-approval-steps]:has(input[name="inspection"][value="vent_bal"]:not(:checked)) [data-letter-inspection="vent_bal"],
[data-approval-steps]:has(input[name="inspection"][value="plumb_ug"]:not(:checked)) [data-letter-inspection="plumb_ug"],
[data-approval-steps]:has(input[name="inspection"][value="plumb_rough"]:not(:checked)) [data-letter-inspection="plumb_rough"],
[data-approval-steps]:has(input[name="inspection"][value="gas_test"]:not(:checked)) [data-letter-inspection="gas_test"],
[data-approval-steps]:has(input[name="inspection"][value="backflow_test"]:not(:checked)) [data-letter-inspection="backflow_test"],
[data-approval-steps]:has(input[name="inspection"][value="erosion_insp"]:not(:checked)) [data-letter-inspection="erosion_insp"],
[data-approval-steps]:has(input[name="inspection"][value="shoring_insp"]:not(:checked)) [data-letter-inspection="shoring_insp"],
[data-approval-steps]:has(input[name="inspection"][value="grade_insp"]:not(:checked)) [data-letter-inspection="grade_insp"],
[data-approval-steps]:has(input[name="inspection"][value="util_insp"]:not(:checked)) [data-letter-inspection="util_insp"],
[data-approval-steps]:has(input[name="inspection"][value="detent_insp"]:not(:checked)) [data-letter-inspection="detent_insp"],
[data-approval-steps]:has(input[name="inspection"][value="paving_insp"]:not(:checked)) [data-letter-inspection="paving_insp"],
[data-approval-steps]:has(input[name="inspection"][value="row_insp"]:not(:checked)) [data-letter-inspection="row_insp"],
[data-approval-steps]:has(input[name="inspection"][value="demo_pre"]:not(:checked)) [data-letter-inspection="demo_pre"],
[data-approval-steps]:has(input[name="inspection"][value="demo_final"]:not(:checked)) [data-letter-inspection="demo_final"],
[data-approval-steps]:has(input[name="inspection"][value="elev_pit"]:not(:checked)) [data-letter-inspection="elev_pit"],
[data-approval-steps]:has(input[name="inspection"][value="elev_test"]:not(:checked)) [data-letter-inspection="elev_test"],
[data-approval-steps]:has(input[name="inspection"][value="fence_final"]:not(:checked)) [data-letter-inspection="fence_final"],
[data-approval-steps]:has(input[name="inspection"][value="sign_insp"]:not(:checked)) [data-letter-inspection="sign_insp"],
[data-approval-steps]:has(input[name="inspection"][value="pool_shell"]:not(:checked)) [data-letter-inspection="pool_shell"],
[data-approval-steps]:has(input[name="inspection"][value="pool_final"]:not(:checked)) [data-letter-inspection="pool_final"] {
  display: none;
}
[data-approval-steps]:has(input[name="hydro"][value="psi200"]:checked) [data-letter-hydro="psi200"],
[data-approval-steps]:has(input[name="hydro"][value="working"]:checked) [data-letter-hydro="working"],
[data-approval-steps]:not(:has(input[name="hydro"]:checked)) [data-letter-hydro="none"] {
  display: inline;
}
[data-approval-steps]:has(input[name="hydro"][value="psi200"]:not(:checked)) [data-letter-hydro="psi200"],
[data-approval-steps]:has(input[name="hydro"][value="working"]:not(:checked)) [data-letter-hydro="working"],
[data-approval-steps]:has(input[name="hydro"]:checked) [data-letter-hydro="none"] {
  display: none;
}
/*
 * Where the bureau works on certificates (the product owner's Q1 on decision 0295), the letter lists
 * only the tests a certificate completes (`CERTIFIED_TYPES`: the rough inspection, and All Trades' nine
 * further certified tests, decisions/0406-inspections-catalogue-3.md), and says what the company does of
 * them only while it lists one: the preview draws that sentence and the list `data-letter-listed`, shown
 * while such a test is ticked, as the letter will print them, and hidden while none is.
 */
[data-approval-steps]:has(input[name="inspection"][value="elec_service"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="gen_test"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="duct_leak"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="boiler_test"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="vent_bal"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="plumb_rough"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="gas_test"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="backflow_test"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="rough"]:checked) span[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="elev_test"]:checked) span[data-letter-listed] {
  display: inline;
}
[data-approval-steps]:has(input[name="inspection"][value="elec_service"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="gen_test"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="duct_leak"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="boiler_test"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="vent_bal"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="plumb_rough"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="gas_test"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="backflow_test"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="rough"]:checked) div[data-letter-listed],
[data-approval-steps]:has(input[name="inspection"][value="elev_test"]:checked) div[data-letter-listed] {
  display: block;
}
[data-approval-steps]:not(:has(input[name="inspection"][value="elec_service"]:checked, input[name="inspection"][value="gen_test"]:checked, input[name="inspection"][value="duct_leak"]:checked, input[name="inspection"][value="boiler_test"]:checked, input[name="inspection"][value="vent_bal"]:checked, input[name="inspection"][value="plumb_rough"]:checked, input[name="inspection"][value="gas_test"]:checked, input[name="inspection"][value="backflow_test"]:checked, input[name="inspection"][value="rough"]:checked, input[name="inspection"][value="elev_test"]:checked)) [data-letter-listed] {
  display: none;
}

/*
 * *Block dates or times* (#143): the times are drawn only for part of a day, and the button says
 * which it blocks, as Rev 137's does (`rev137:11707`, `rev137:11725`). Said as "hidden unless
 * ticked", so a browser that cannot read `:has()` drops those rules, shows the times all the time,
 * and says "Block these dates"; the server ignores the times unless the box is ticked.
 */
[data-closure-form] [data-says="times"] {
  display: none;
}

[data-closure-form]:not(:has(#cl_partial:checked)) [data-part-of-day] {
  display: none;
}

[data-closure-form]:has(#cl_partial:checked) [data-says="dates"] {
  display: none;
}

[data-closure-form]:has(#cl_partial:checked) [data-says="times"] {
  display: inline;
}

/*
 * A slot on the schedule that cannot be pressed (#143, #144): every slot for the Bureau's examiners
 * and inspectors, and a closed one for a supervisor. It keeps Rev 137's chip without the hand and
 * the hover that say it can be pressed (`.sl`, `rev137:222-229`). A closed chip already has neither,
 * and a slot a supervisor can book from is a link, which keeps both.
 */
span.sl {
  cursor: default;
}

span.sl:not(.shut):not(.part):not(.full):not(.pick):hover {
  border-color: var(--line);
}

/*
 * An inspection's slot is a radio in the booking form (#144), drawn as Rev 137's slot button
 * (`slotPicker`, `rev137:10445`), whose renderer marks the slot picked with `.sl.pick`. A form drawn
 * once cannot be redrawn, so the pick is said here from the radio itself. The radio covers its
 * slot and is not seen, so pressing anywhere on the slot picks it, and the keyboard reaches it.
 */
label.sl {
  display: inline-block;
  position: relative;
}

label.sl > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* `.sl.pick`'s own look, for the slot that is picked now. */
label.sl:has(> input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

label.sl:has(> input:checked) .sln {
  color: #9fc8e6;
}

label.sl:has(> input:focus-visible) {
  outline: 2px solid var(--flag-blue);
  outline-offset: 1px;
}

/* What the company said of a deficiency item keeps the lines it was written in (#172). Rev 137 runs
   them together (`.def .dr`, `rev137:793`); a note of two lines is two lines. */
.def .dr {
  white-space: pre-line;
}

/* A test's items are jumped to after a press on one (#172): clear of the top bar that stays above
   the page, so their heading and counts are not under it. */
.defs {
  scroll-margin-top: 72px;
}

/* On a phone, an inspection's row gives what it says the whole width, and its badge and buttons
   the line under it (#172). Rev 137's row never wraps (`.insp`, `rev137:765`), so a row with a
   button left its deficiency items a column a word wide. The body's own width is inline, so it is
   overridden here. */
@media (max-width: 640px) {
  .insp {
    flex-wrap: wrap;
  }
  .insp > .ibody {
    flex: 1 1 calc(100% - 14px) !important;
  }
}

/* *Block dates or times* is landed on at `#block` from the closures' heading and a day's *Block a
   time* (#173): clear of the top bar that stays above the page, so its heading is not under it. */
#block {
  scroll-margin-top: 72px;
}

/* The calendar's days as boxes a person ticks (#174), drawn as the prototype's chips
   (`rev137:5614`): a chip whose box is ticked is `.fchip.on`. */
.fchip:has(> input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.fchip > input {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* Settings' inspection calendar is landed on after a save (#174), at `#calendar`: clear of the top
   bar that stays above the page, so its heading and what the save said are not under it. */
#calendar {
  scroll-margin-top: 72px;
}

/* On a phone a month of the Inspector app's round (#175) leaves each day a box a few characters wide:
   its dots say how many calls, and the words under them, which would run over its edge, are left
   to the day's own page. Rev 137's month never narrows (`.iamon`, `rev137:944`). */
@media (max-width: 640px) {
  .iacell .ian {
    display: none;
  }
}

/* The Inspector app is worked on a tablet or a phone at the site (#175): nothing it offers a finger
   is under 40px there. The application's own rules hold it so on a phone (640px and below), and a
   tablet held upright is wider than that. */
@media (max-width: 1024px), (pointer: coarse) {
  [data-inspector-app] .btn,
  [data-inspector-app] .seg button,
  [data-inspector-app] .sel {
    min-height: 40px;
  }
}

/* So is what a call opens to record its result (#176): the result card, where every item and condition
   is ruled on with a finger and the result pressed. It was 28px a radio and 36px a button on a tablet.
   And the reports its results issued, drawn above it (#177), which were 28px there, and what is marked
   on the drawings for it (#178). */
@media (max-width: 1024px), (pointer: coarse) {
  #result .btn,
  #reports .btn,
  #marks .btn {
    min-height: 40px;
  }
}

/* What is marked on the drawings is landed on at `#marks` (#178), from the viewer's *Done* and after
   a withdrawal: clear of the top bar that stays above the page, so its heading and what the press
   said are not under it. */
#marks {
  scroll-margin-top: 72px;
}

/* The approved drawings opened to mark them (#178) are worked with a finger at the site: nothing the
   viewer offers there is under 40px on a tablet or a phone. A button and a page's tab were 28px, a
   zoom button 32px tall and 27px wide, and the dialog's close 23px. */
@media (max-width: 1024px), (pointer: coarse) {
  [data-field] .tkfull-hd .btn,
  [data-field] .stab,
  [data-field] .zoomgrp button,
  [data-field] .modal .btn,
  [data-field] .modal .sel {
    min-height: 40px;
  }
  [data-field] .modal .x,
  [data-field] .zoomgrp button:not(.lvl) {
    min-width: 40px;
    min-height: 40px;
  }
}

/* The picked pin's card has a close (decision 0268), Rev 137's `.x`, 23px across: under a finger it is
   40px, as the close of the dialog on the drawings opened to mark them is, above. */
@media (pointer: coarse) {
  [data-pin-readout-close] {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Nothing is measured on the drawings opened to mark them (#178), as nothing is in Rev 137's field
   workspace (`rev137:6127-6147`): the scale and its units are not shown there. */
[data-field] .tkscale,
[data-field] [data-tk-unit] {
  display: none;
}

/* *Esc closes* names a key a screen worked by a finger has not got. */
@media (pointer: coarse) {
  .esc-chip {
    display: none;
  }
}

/* On a phone, the drawings opened to mark them still say what a mark is: a draft until the result
   (#178), which the platform's rule hides with the rest of the header's line at this width. And
   what the sheet answers a press with, *Marked: mark 2*, is read on a line of its own, two lines
   tall whatever it says, so the sheet below never moves under the next press; in the one scrolling
   row it was cut to three letters. A picked mark is read out whole on its own card under the bar
   (`[data-pin-readout]`, decision 0268), not here. The hint's own width is inline, so it is
   overridden here. */
@media (max-width: 640px) {
  [data-field] .tkfull-hd .sub {
    display: block;
  }
  [data-field] .tkbar {
    flex-wrap: wrap;
  }
  [data-field] .tkhint {
    flex: 1 0 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.4;
    height: 2.8em;
  }
}

/* On a phone a call's words take the width under its time and its badge, as an inspection's row
   does since #172; beside them they were a column a word or two wide. Its body's width is inline,
   so it is overridden here. */
@media (max-width: 640px) {
  [data-inspector-app] [data-call] {
    flex-wrap: wrap;
  }
  [data-inspector-app] [data-call] > span:nth-child(2) {
    flex: 1 1 100% !important;
    order: 3;
  }
  [data-inspector-app] [data-call] > .badge {
    margin-left: auto;
  }
}

/* The day picker's weekday columns (#183, P59). Rev 137 pins each day to its weekday's column inline
   (`grid-column`, `rev137:10423-10424`), and on a phone its week is two columns (`rev137:328`), so a
   day pinned to column three, four or five opens columns the grid does not have, and they take their
   width first: the week stays five across, and Monday and Tuesday are crushed to slivers that cut
   off their own dates. Here the column is a variable, said only where the week is five wide; on a
   phone the days flow two to a row in their order. */
.weekrow > .dayc {
  grid-column: var(--col, auto);
}
@media (max-width: 720px) {
  .weekrow > .dayc {
    grid-column: auto;
  }
}

/* A status a screen reader announces and the eye does not need (#183): the counter's search says
   what it found here, in one element kept on the page, since its list says it visibly. */
.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* What a person wrote, on the activity log (#186): a return's reason, a filing's note, or anything
   else a press logs with its words. The prototype's `.tl-note` keeps a long unbroken run, a link
   pasted in, on one line, and on a phone it pushes the page sideways; here it breaks anywhere. */
.tl-note {
  overflow-wrap: anywhere;
}

/* The Permit card is landed on at `#permit` from the head's *Issue permit* (#191): clear of the top
   bar that stays above the page, so its heading is not under it. */
#permit {
  scroll-margin-top: 72px;
}

/* A finger is not a cursor at any width (`rev137:1260`). On a touch screen every button is the height
   the platform's phone rule gives it (`rev137:1265-1266`): 40px, and a small one 38px. That rule
   reaches only as wide as a phone, so on a tablet a small button was 28px and a button 35.5px, except
   where #175-#178 raised them one page at a time. Said by the pointer alone, so a desk keeps Rev 137's
   compact buttons at any width, and a height alone, so none of the platform's padding is overridden. */
@media (pointer: coarse) {
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 38px;
  }
}

/* A select draws the option chosen on one line, and at a phone's width a citation, a comment's type,
   a reviewer with their load, or the set a response was checked against is longer than its box: it
   was cut mid-word. Here the option chosen wraps and the select grows to hold it, as wide as the
   platform makes it. Only where a browser can grow a select to what it holds: one that wraps without
   growing cuts the second line through the middle. Not where a box gives a select its own width
   rather than the field's: in a row (`.row`), as wide as its longest option, or in the time-in-phase
   bar (`.tfbar`), which says `width: auto` (`rev137:326`; no select is in one today). Sized to the
   option chosen, it would change width, and move what is beside it, with every choice. A box added
   later that gives a select its own width is to be named here too. */
@media (max-width: 640px) {
  @supports (field-sizing: content) {
    select.sel:not(.row *, .tfbar *) {
      white-space: normal;
      field-sizing: content;
    }
  }
}

/* A day chip that cannot be pressed (#200): a day closed whole, or one with nothing left. Rev 137's
   hover border (`.dayc:hover`, `rev137:242`) says a chip can be pressed, and its faded `none` chip
   (`rev137:249`) cannot, so it keeps its own border under the pointer. */
.dayc.none:hover {
  border-color: var(--line);
}

/* The rail as a strip (#202). Below 900 pixels Rev 137 lays the rail out as one row that scrolls
   sideways (`rev137:1288-1301`), and nothing said it had more: a walk at 390 read the company's strip,
   cut at *Start a subm…*, as the whole menu. `rail.js` says which ends have more (`strip.ts`), and the
   strip fades there, as far as one entry's edge, so the cut reads as more to come. Without the script
   neither is said, and the strip is Rev 137's. */
@media (max-width: 900px) {
  .nav[data-more-after] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  .nav[data-more-before] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  }
  .nav[data-more-before][data-more-after] {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 40px,
      #000 calc(100% - 40px),
      transparent
    );
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
}

/* The rail's brand on a line of its own on a phone (#202). Rev 137 sets the brand beside the strip
   at every width up to 900 pixels (`rev137:1288-1301`), which at 390 leaves the strip 259 pixels, and
   its longest entries (*Approved — awaiting payment*, 225) wider than the room between its fades.
   Below 480 the brand takes the row's width and the strip the line under it, the screen's width,
   where every entry is read whole. Put to the product owner, and agreed. */
@media (max-width: 480px) {
  .rail {
    flex-wrap: wrap;
  }
  .brand {
    flex-basis: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .nav {
    flex-basis: 100%;
  }
}

/* The rail at its own height up to 900 pixels (#202). Below 900 Rev 137 sets the rail above the page
   in the shell's one column (`rev137:1288-1301`), and the shell is at least the window's height, so
   on a short page the rail took a share of what was left: 216 to 257 pixels on a phone, where its
   rows need 97. The rail takes its own height and the page the rest. */
@media (max-width: 900px) {
  .shell {
    grid-template-rows: auto 1fr;
  }
}

/*
 * The top bar at a desk (decisions/0226-top-bar-width.md). Rev 137 never lets the bar's right-hand
 * group give up its width (`.top-right{flex:none}`, `rev137:112`), so the page's title gives up its
 * own. Here the group is the bell, the department's name, the person and *Sign out*, and with
 * Chicago's department and a supervisor it is 631 pixels wide. Once the rail becomes a column, past
 * 900 pixels (`rev137:1288-1301`), that left a supervisor's title no room at all up to about 945
 * pixels, cut it to about 1100, and from 901 to 916 ran past the window, so the page scrolled
 * sideways. Rev 137 says of the department's chip that it *"repeats what the rail already says"*
 * (`rev137:1244-1246`), and hides it on a phone. So at a desk the chip takes only the room left once
 * the title has its own: it is drawn as wide as its name where there is room, and cut with an
 * ellipsis where there is not. Its own width is nothing (`width: 0`), so the group never asks for it.
 *
 * This overrides `.top-right{flex:none}`: the group grows into the room the title leaves, to the
 * right as before (`rev137:118`), and, as Rev 137's rule says, never shrinks, so the person and
 * *Sign out* keep their width and the avatar stays round. The query is the platform's rail query
 * turned round, so no width falls between the two.
 */
@media not all and (max-width: 900px) {
  .top > .top-right {
    flex: 1 0 auto;
    justify-content: flex-end;
  }
  .top > .top-right > .tag {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    max-width: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/*
 * The line under the person's name (decisions/0610-role-line-organisation.md) is their role and their
 * organisation, which can be long (*Supervising Plan Examiner · Fire Department, Bureau of Fire Prevention*).
 * The bar's right-hand group never gives up its width, so the line is held to a width of its own and ends
 * in "…" where it is longer; the whole line is its `title`. The person's name above it is not touched.
 */
.who-role {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A button the file's state holds (`decisions/0205-disabled-reasons.md`) is `aria-disabled`, not
   `disabled`, so the keyboard still reaches it and a screen reader says why with it. It is drawn as
   Rev 137 draws a disabled one (`.btn[disabled]`): faded, with the cursor that says it will not go. */
.btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

/* A held button is a Tab stop, which a `disabled` one never was, and faded with it its focus ring
   (`rev137:54`) was faded too: about 1.4:1 on white. While the keyboard is on it, it is drawn at full
   strength, so its ring reads as any button's does. Its reason is still under it, and a press still
   does nothing. */
.btn[aria-disabled="true"]:focus-visible {
  opacity: 1;
}

/* A held button's reason, under it (`HeldBelow`) or under the file's head (`HeldNote`), is small text
   in the hint a field has under it (`.field .hint`, `rev137:386`): Rev 137 sizes and colours `.hint`
   only in a field, and these stand in none, so they were drawn at the body's 14px and in its ink. */
[data-held-note],
[data-held] > .hint {
  font-size: 11.5px;
  color: var(--muted);
}

/* On a phone the viewer's takeoff bar is one row that scrolls (`rev137:602`), and its scale chip,
   which says why the measuring tools are greyed (`decisions/0205-disabled-reasons.md`), stood after
   them, out of view at 390 until the row was scrolled to it. There it comes first. It is not a
   control, so the Tab key goes through the bar in the order it is written. The drawings opened to
   mark them hide the chip (`[data-field] .tkscale`, above), so their bar is as it was. */
@media (max-width: 640px) {
  .tkbar .tkscale {
    order: -1;
  }
}

/* The scale chip says whether the scale on show is saved (`decisions/0243-scale-saved-label.md`):
   *kept*, *saving…* or *not saved*, on a second line under the reading, smaller, inside the chip's
   own 32px, so the chip is no wider than its reading. Rev 137's chip is one line, the reading alone,
   since Rev 137 keeps every scale it is given. Said after the reading on that line, the words made
   the chip 80px wider, and the bar, which wraps rather than hide a tool, took a second row at every
   width from 1024 to 1105 on a page with a scale and not on one without, so the sheet moved down
   whenever such a page was turned to. Measured in Chromium: 32px tall either way, at 1280 and 390. */
.tkscale.stated {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.2;
}
.tkscale-state {
  font-size: 10px;
}
/* *Not saved* is a warning, drawn in the amber the chip's *not set* is (`.tkscale.unset b`), not the
   muted blue of *kept*: 12.4 to 1 on the bar’s navy, where 4.5 is enough. */
.tkscale-state.tkscale-unsaved {
  color: #ffd98a;
}

/* Overrides platform.css's `.acct .t` and `.acct .d` (`rev153:1272-1273`). Rev 153 makes both
   inline again, under Rev 137's own comment that *"these were inline, so name, role and credentials
   ran together as prose"* (`rev153:1271`). Each detail is a line of its own beneath its title, as
   Rev 137 drew them (`rev137:1161-1162`) and as master plan §10 P68 and P88 hold every row to
   (`decisions/0440-rev153-build-source.md`). Rev 153's sizes are kept. */
.acct .t,
.acct .d {
  display: block;
}
.acct .d {
  margin-left: 0;
  margin-top: 3px;
}

/* Related submittals (`decisions/0210-related-submittals.md`): each row's title and the file's name
   are what a company typed, and Rev 153's `.acct` never breaks a long unbroken word in either, which
   at 390 pushes the page sideways. Here they break anywhere, as `.tl-note` does (#186). */
[data-related] .acct .t,
[data-related] .acct .d {
  overflow-wrap: anywhere;
}

/* On a phone the review's header holds *Mark up sheet*, *Download marked*, *Original* and *Done*
   (`rev137:4062-4067`), which ran 4px past a 390px window and cut *Done*. They wrap under one
   another, to the right, as the header's own row already wraps the sheet's name above them. */
@media (max-width: 640px) {
  .tkfull-hd .right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
}

/* What *Download marked* says is Rev 137's toast (`rev137:3193`), which Rev 137 shows at the foot of
   the window (`.toast`), and the review's hint had no room for it. On a phone it was nowhere to be
   read: for somebody who measures, the takeoff bar is one row of tools that scrolls (`rev137:602`),
   and the hint at its far end was no wider than nothing; for the company it was 38px. The drawings
   opened to mark them give the hint a line of its own by wrapping the bar (#178), whose bar has no
   tools; wrapping a reviewer's, measured at 390, took it from one row to three, cut its second tool
   group at the window's edge, and moved the sheet 115px. At 1280 a reviewer's hint is 311px, which
   cut *Original saves it as filed* off the end of a sentence. So while the press says something,
   the hint is Rev 137's toast: at the foot of the window, over the sheet, which does not move, as
   wide as its sentence up to the window's width, as many lines tall as it needs. The hint's own
   width is inline, so it is overridden here.
   A scale the platform did not keep is said the same way (`decisions/0243-scale-saved-label.md`):
   its sentence runs past a hundred characters, which the hint cuts at a desk, and on a phone the
   chip says *not saved* and nothing else could say why, its title being out of a finger's reach.
   A press that wrote several sets says each on a line of its own (decision 0259), so the toast
   keeps the lines its sentence has, and wraps each as before.
   A measurement the platform did not keep, or a change to one it refused, is said the same way
   (decision 0264): on a phone nothing else in view could say why. */
.tkhint[data-said="marked"],
.tkhint[data-said="scale"],
.tkhint[data-said="measure"] {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 22px;
  margin: 0 auto;
  z-index: 2;
  display: block !important;
  width: fit-content;
  white-space: pre-line !important;
  overflow: visible !important;
  text-align: left !important;
  line-height: 1.4;
  padding: 10px 14px;
  background: #081e36;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.7);
}

/*
 * A sheet ticked for removal on the resubmittal card (decision 0224) asks why: the reason's field is
 * shown only once its box is ticked, from the input itself, so nothing has to run. A browser that
 * cannot read `:has()` shows every reason's field; the server reads a reason only for a sheet ticked.
 */
[data-removal]:not(:has(input[name="remove"]:checked)) [data-removal-reason] {
  display: none;
}

/*
 * The sheet on show's revisions (decision 0224), each a link to open it, in the review's header, whose
 * every line the platform's rule hides on a phone. On a phone too they are how a sheet's other
 * revisions are opened, so this line is shown, broken anywhere, and hidden as the script hides it on a
 * page not numbered.
 */
@media (max-width: 640px) {
  .tkfull-hd [data-sheet-revisions]:not([hidden]) {
    display: block;
    overflow-wrap: anywhere;
  }
}

/*
 * The inspector a supervisor chooses beside a contractor's booking request, on the inspection
 * schedule (decisions/0225-inspector-picker.md). Rev 137's *Accept* names whoever presses it, unless
 * one is named already (`rev137:13224`), and its row holds three buttons (`rev137:5776-5780`). Here
 * *Accept* takes an inspector from a select, and the platform makes every select as wide as its box
 * (`select.sel`, `rev137:387-388`): in the request's form, a row, that put *Accept* under the select
 * at every width, and on a phone the row's presses had a column 105px wide beside the request, where
 * the select showed *S. Supervi* for *S. Supervisor*.
 *
 * The select is as wide as its longest option, as a select is when nothing sizes it, so it does not
 * change width with each choice; this overrides the platform's `width: 100%`. It is never wider than
 * its row: the presses and their form may be narrower than the select would be, so a name longer
 * than the row is cut at its edge, and opens whole. At a desk the presses keep their width beside the
 * request, which `.todo .go` (`rev137:895`) lets them give up, to at most 60% of the row. On a phone,
 * at the platform's width (`rev137:1223`), the presses take the line under the request, as an
 * inspection's row gives its buttons on a phone (#172), in line with the request's words: past the
 * mark's 7px and the row's 12px gap (`rev137:890`, `:892`). The phone's rules come after the desk's,
 * which weigh the same.
 */
.todo[data-pending] > .go select.sel {
  width: auto;
  max-width: 100%;
}

.todo[data-pending] > .go {
  flex-shrink: 0;
  min-width: 0;
  max-width: 60%;
}

.todo[data-pending] > .go > form {
  min-width: 0;
}

@media (max-width: 640px) {
  .todo[data-pending] {
    flex-wrap: wrap;
  }
  .todo[data-pending] > .mark + span {
    flex: 1 1 calc(100% - 19px);
  }
  .todo[data-pending] > .go {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
    padding-left: 19px;
  }
}

/* An inspection's booking page is landed on at one of its cards (#244): `#accept`, `#move` and
   `#cancel` from the schedule's and the Inspections tab's *Accept*, *Modify*, *Move* and *Cancel*;
   `#result` and `#paper` from the tab's *Record the result* and *Paperwork*, and `#paper` once a page
   of a certificate is sent; and `#request`, `#counter` and `#move` once a day is picked in the form's
   slot picker. Each clear of the top bar that stays above the page, so its heading is not under it,
   as `#marks` is (#178). */
#accept,
#move,
#cancel,
#result,
#paper,
#request,
#counter {
  scroll-margin-top: 72px;
}

/* The counter's inspector and who to ask for on site, on one row at a desk (#244), as Rev 137's
   counter draws them (`grid-3`, `rev137:11629-11639`): the inspector a third, beside the site's two
   boxes under their heading, its box level with theirs. Narrower, one under another, as Rev 137's
   `grid-3` goes (`rev137:1304`). */
.counter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px;
  align-items: end;
}

@media (max-width: 900px) {
  .counter-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * A booking under *Booked into a closure*, on a phone (#248): its *Move* and *Cancel* take the line
 * under it, as a request's presses do above (decisions/0225-inspector-picker.md), in line with its
 * words, past the mark's 7px and the row's 12px gap (`rev137:890`, `:892`). Rev 137's row keeps them
 * in a column beside the words (`.todo .go`, `rev137:895`), which squeezed the booking to a column
 * about 200px wide at 390.
 */
@media (max-width: 640px) {
  .todo[data-stranded] {
    flex-wrap: wrap;
  }
  .todo[data-stranded] > .mark + span {
    flex: 1 1 calc(100% - 19px);
  }
  .todo[data-stranded] > .go {
    flex: 1 1 100%;
    margin-left: 0;
    padding-left: 19px;
  }
}

/*
 * *Block dates or times* opens on demand (#248), as Rev 137 opens it as a dialog from the closures'
 * heading and a day's *Block a time* (`rev137:5805`, `:5696`): each is a link to `#block`, and the
 * card is drawn where the address names it. Without it the form stood open between the closures and
 * the calendar for every supervisor, and on a phone pushed the calendar a screen further down. The
 * page draws it open (no `data-closed`) wherever the person is working on it: a slot drafted, a press
 * refused or warned. Said as "hidden unless named", so nothing has to run.
 */
#block[data-closed]:not(:target) {
  display: none;
}

/* The calendar, reached from the top of the schedule (#248): clear of the top bar, as `#block` is. */
#calendar-view {
  scroll-margin-top: 72px;
}

/*
 * A view's button is one line, so *2 weeks* (decision 0290) is never broken over two in a toggle a
 * phone squeezes; the toggle wraps under the card's heading instead (`.card-hd`).
 */
.seg button {
  white-space: nowrap;
}

/*
 * A slot gone (#248): a day before today, or a slot today that has begun. It is past, not open, and
 * no link; drawn faded, so the slots still to come stand out. A slot today not yet begun is drawn the
 * same way (decision 0290): nothing books into it, so it is not open either, and no link.
 */
.sl.past,
.sl.unbookable {
  background: var(--grey-bg);
  border-color: var(--line-soft);
  color: var(--muted);
}

/* A day gone in the month (#248), drawn as a closed day is, since nothing is open on it. */
.mcell.past {
  background: #f4f6f9;
}

/*
 * A closed day's reason in the month is drawn whole (#248), and cut at the cell's edge with an
 * ellipsis, where Rev 137 cuts it at fourteen characters with no mark (`rev137:5742`); the day it
 * opens says it whole. A cell may be narrower than its reason, so the grid's column gives way to the
 * cell's width rather than to the reason's (`.mcell`, `rev137:754`).
 */
.mcell {
  min-width: 0;
}

.mfree {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The month on a phone keeps its card's gutter (#248). Rev 137's phone rule gives each day at least
 * 46px (`rev137:768`), seven of which and their gaps are 358px, more than a 390px screen's card
 * holds, so the grid ran past the card to the screen's edge. Here the seven share the card's width,
 * and a cell's count is cut at its edge, as its chips already are.
 */
@media (max-width: 760px) {
  .mgrid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  .mcell {
    padding: 5px 3px;
    overflow: hidden;
  }
  .mcap {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 3px;
  }
}

/*
 * *Where the fix is* on *Respond* and *Record the company's response* (decisions 0231, 0304): a plain
 * select, always drawn, each option saying what it is, so the longest says a sheet's number, its
 * revision, the drawings it is in and *— this comment's sheet*. Held to its field's width, so no
 * option pushes the card past its column or a phone's width; on a phone it wraps whole, as every
 * chosen option does (above).
 */
[data-fix-field] select.sel {
  max-width: 100%;
}

/*
 * The stamp's two buttons in the review's header (decisions 0328 and 0372), which the script shows on its
 * page alone: *Place stamp* on a page the stamp is not on, *Remove stamp* on a page it is. It hides the
 * other with `hidden`, which the platform's `.btn { display: inline-flex }` outweighs, so both stood in the
 * header on every page until this said hidden means hidden.
 */
.tkfull-hd [data-stamp-place-start][hidden],
.tkfull-hd [data-stamp-reset][hidden] {
  display: none;
}

/*
 * The stamp on the sheet before the approval, a control of its own for the keyboard (decision 0380): its
 * ring is drawn where the focus is, and where the keys moved it and it is not yet placed. The browser's
 * own outline would be a box round the stamp's unturned bounds, so the ring, turned with the stamp, stands
 * in for it.
 */
.tkfull [data-stamp-key] {
  outline: none;
}
.tkfull [data-stamp-ring] {
  fill: none;
  stroke: none;
}
.tkfull [data-stamp-key]:focus-visible [data-stamp-ring],
.tkfull [data-stamp-key][data-stamp-moving] [data-stamp-ring] {
  stroke: #1f6b3a;
}

/*
 * An All Trades package (decision 0400): a trade's scopes shown while the trade is on the package, as the
 * prototype draws them (AT:14194-14205); the building permit's other trades, and Rev 153's word for it over
 * the card, shown only while the building trade is chosen, since a trade permit carries one trade (decision
 * 0523-one-trade-per-permit; `rev153:13564`, `rev153:13579-13591`); and a quantity's box shown while the
 * package carries what it counts (`qtyFields`, AT:3490). Said as "hidden unless", so a browser that cannot
 * read `:has()` shows them all; the route refuses what a trade permit cannot carry, in a sentence.
 */
[data-submittal]:not(:has(input[name="lead"]:checked)) [data-package-quantities] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="building"]:checked, input[name="trades"][value="building"]:checked)) [data-parts-of="building"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="electrical"]:checked, input[name="trades"][value="electrical"]:checked)) [data-parts-of="electrical"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="mechanical"]:checked, input[name="trades"][value="mechanical"]:checked)) [data-parts-of="mechanical"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="plumbing"]:checked, input[name="trades"][value="plumbing"]:checked)) [data-parts-of="plumbing"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="sprinkler"]:checked, input[name="trades"][value="sprinkler"]:checked)) [data-parts-of="sprinkler"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="civil"]:checked, input[name="trades"][value="civil"]:checked)) [data-parts-of="civil"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="building"]:checked)) [data-building-trades],
[data-submittal]:not(:has(input[name="lead"][value="building"]:checked)) [data-building-permit],
[data-submittal]:has(input[name="lead"][value="building"]:checked) [data-one-discipline] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="building"]:checked, input[name="trades"][value="building"]:checked)) [data-qty-of="building"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="electrical/power"]:checked)) [data-qty-of="electrical/power"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="electrical/service"]:checked)) [data-qty-of="electrical/service"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="solar"]:checked, input[name="trades"][value="solar"]:checked)) [data-qty-of="solar"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="mechanical"]:checked, input[name="trades"][value="mechanical"]:checked)) [data-qty-of="mechanical"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="mechanical/refrig"]:checked)) [data-qty-of="mechanical/refrig"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="mechanical/boiler"]:checked)) [data-qty-of="mechanical/boiler"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="plumbing"]:checked, input[name="trades"][value="plumbing"]:checked)) [data-qty-of="plumbing"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="plumbing/gas"]:checked)) [data-qty-of="plumbing/gas"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="sprinkler/sprinkler"]:checked)) [data-qty-of="sprinkler/sprinkler"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="sprinkler/standpipe"]:checked)) [data-qty-of="sprinkler/standpipe"] {
  display: none;
}

[data-submittal]:not(:has(input[name="parts"][value="sprinkler/pump"]:checked)) [data-qty-of="sprinkler/pump"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="alarm"]:checked, input[name="trades"][value="alarm"]:checked)) [data-qty-of="alarm"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="civil"]:checked, input[name="trades"][value="civil"]:checked)) [data-qty-of="civil"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="excavation"]:checked, input[name="trades"][value="excavation"]:checked)) [data-qty-of="excavation"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="demolition"]:checked, input[name="trades"][value="demolition"]:checked)) [data-qty-of="demolition"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="row"]:checked, input[name="trades"][value="row"]:checked)) [data-qty-of="row"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="fence"]:checked, input[name="trades"][value="fence"]:checked)) [data-qty-of="fence"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="sign"]:checked, input[name="trades"][value="sign"]:checked)) [data-qty-of="sign"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="elevator"]:checked, input[name="trades"][value="elevator"]:checked)) [data-qty-of="elevator"] {
  display: none;
}

[data-submittal]:not(:has(input[name="lead"][value="pool"]:checked, input[name="trades"][value="pool"]:checked)) [data-qty-of="pool"] {
  display: none;
}

/* The rail's logo (decisions/0408-rail-logo.md): the product's white mark over the bureau's department,
   in place of the city's name and its four stars. 170 pixels in the 226-pixel rail; its width and height
   attributes hold the room before this applies. */
.brand-logo {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
}

.brand-logo + .brand-unit {
  margin-top: 9px;
}

/* The gate's dark panel wears the same logo where it wore four stars, over the tagline. */
.gate-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  margin-bottom: 22px;
}

/* In the masthead (`decisions/0505-sign-in-rev153.md`) the logo sits beside the product line, not over a tagline. */
.gate-mast .gate-logo {
  margin-bottom: 0;
}

.gate-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* On the rail's strip (up to 900 pixels) the brand sits beside the navigation: the logo is smaller, and
   the department, which Rev 137 hides there, stays hidden. On a phone, where the brand has a row of its
   own (above), the department has the room and is drawn. */
@media (max-width: 900px) {
  .brand-logo {
    width: 128px;
  }
}

@media (max-width: 860px) {
  .gate-logo {
    width: 150px;
    margin-bottom: 14px;
  }
}

@media (max-width: 480px) {
  .brand-unit {
    display: block;
    font-size: 9.5px;
  }
  .brand-logo {
    width: 150px;
  }
  .brand-logo + .brand-unit {
    margin-top: 6px;
  }
}

/*
 * The Disciplines card's dropdown (`client/disciplines.ts`, `decisions/0532-one-discipline-registration.md`):
 * one discipline an application, chosen from radios. Without the script none of this shows but the list
 * itself: `.disc.on` is set by the script, and the box and the search are `hidden` until then. Same tokens
 * as the inputs and `.check` around it.
 */
.disc-box {
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.disc-box[hidden],
.disc-search[hidden],
.disc-panel[hidden],
[data-disc-none][hidden],
[data-disc-option][hidden] {
  display: none;
}
.disc-box.open,
.disc-box:focus-within {
  border-color: var(--ink-3);
}
.disc-toggle {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.disc-toggle.empty {
  color: var(--ink-3);
}
.disc-toggle::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.disc-box.open .disc-toggle::after {
  transform: rotate(-135deg);
}
.disc-panel {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.disc:not(.on) .disc-panel {
  margin: 0;
  padding: 0;
  border: 0;
}
.disc-search {
  margin-bottom: 6px;
}
.disc-search label {
  display: block;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.disc-search input {
  width: 100%;
  box-sizing: border-box;
}

/* The rail's groups open and close (decisions/0586-rail-collapse.md). Each group is a native <details> whose
   <summary> is the heading Rev 153 draws as a label (`.nav-label`, `rev153:10932-11024`, not collapsible there;
   the owner's answer, 28 Oct 2026). A closed group shows its count on the heading, so something waiting is never
   hidden; an open one shows its entries' own. Without a script the page's own group is open and the rest closed. */
.nav-group > summary.nav-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-group > summary.nav-label::-webkit-details-marker {
  display: none;
}
.nav-group > summary.nav-label::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentcolor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.12s ease;
}
.nav-group[open] > summary.nav-label::before {
  transform: rotate(90deg);
}
.nav-group > summary.nav-label:hover {
  color: #c9d8e8;
}
.nav-group > summary.nav-label:focus-visible {
  outline: 2px solid var(--flag-blue);
  outline-offset: -2px;
  border-radius: var(--radius);
}
.nav-group > summary .group-ct {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0;
  color: #8fa8c4;
}
.nav-group[open] > summary .group-ct {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-group > summary.nav-label::before {
    transition: none;
  }
}

/* A hairline between two entries of a group (decisions/0721-closed-stages-off-strip.md): the same faint line the
   rail draws under the bureau's name (`.brand`, `platform.css`), the width of the menu, a little air above and below,
   no text. Not drawn in the strip below, where the entries run in a row. */
.nav-group > .nav-rule {
  height: 0;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* As a strip (below 900 pixels) the groups dissolve into it (`display: contents`) and `rail.js` opens them all, so
   every entry is a stop along the strip. The headings are hidden only where `::details-content` keeps a closed
   group's entries visible (a browser without it could not show them, and its headings stay as working
   headings). The rule is stated here because the heading's own `display: flex` above outranks Rev 153's
   `.nav-label { display: none }` in this width. */
@media (max-width: 900px) {
  .nav-group {
    display: contents;
  }
  .nav-group > .nav-rule {
    display: none;
  }
  .nav-group::details-content {
    content-visibility: visible;
    display: contents;
  }
  @supports selector(::details-content) {
    .nav-group > summary.nav-label {
      display: none;
    }
  }
}