/* The phone layer for the field screens — Home, Daily Footage, Weekly Attendance, Job Photos
 * and Sent. Linked AFTER tokens.css and app.css, before each page's own <style>.
 *
 * WHY A SIXTH STYLESHEET AND NOT MORE RULES IN app.css. app.css dresses forms for a screen
 * that might be a laptop; these are the parts that only make sense under a thumb — a sheet
 * that slides up from the bottom, a keypad, a 68px code tile, a bar pinned above the tabs.
 * The office screens never load this file, so none of it can reach them by accident.
 *
 * IT DEFINES NO COLOURS. Every value here is a token from tokens.css, which is also why the
 * redesign needed no new palette: the browns, the amber and the warm paper the mockup is
 * drawn in are the ones the site already had. If something here looks wrong, the token is
 * wrong, and fixing it there fixes it on the office screens too.
 *
 * THE TAP TARGET FLOOR IS 44px and it is not negotiable — see the note on .fx-code. These
 * screens are used standing up, outdoors, in gloves, by people who are not looking at the
 * phone as carefully as the person who designed it.
 */

/* ---------------------------------------------------------------- the page ----- */

:root {
  --fx-gap: 12px;
  --fx-pad: 16px;
  --fx-r: 20px;          /* a card */
  --fx-r-sm: 14px;       /* a control inside a card */
}

/* The field pages are a column: header, one scrolling middle, then whatever is pinned.
   Height rather than min-height, so the middle scrolls and the pinned bar never travels
   with it — a bar that scrolls away is a bar you cannot find with the keyboard up. */
html.fx body {
  background: var(--paper, #F6F3EF);
  color: var(--ink, #1F1A17);
}

.fx-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 2px var(--fx-pad) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
}

/* ---------------------------------------------------------------- header ----- */

/* The date above the screen name. It is the one piece of context that is true on every
   field screen and costs a line nobody has to read — a foreman filling Friday's sheet on
   Monday morning sees the date before they see the form. */
.fx-head {
  padding: 6px var(--fx-pad) 14px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.fx-head-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-date {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint, #8A7F76);
}
/* IT SHRINKS BEFORE IT TRUNCATES. At a flat 26px "Weekly Attendance" came out as
   "Weekly Attenda…" on a 390px phone — the longest screen name on the site, cut in half, as
   the heading of its own page. clamp() lets it give up a few pixels on a narrow screen and
   keep the whole word; the ellipsis is still there for a name longer than any we have. */
.fx-title {
  font-size: clamp(21px, 6.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-head-act { display: flex; gap: 8px; align-items: center; flex: none; }

/* EN / ES. The track is the deeper paper so the chosen side can be white and still read as
   lifted; on a white card a white pill would have nothing to lift off. */
/* THE TRACK IS THE SAME HEIGHT AS THE INITIALS BESIDE IT, 40px, and the two halves are the
   same width as each other. It used to be a 36px pill inside a 3px track — 42px tall next to
   a 40px circle, and wider than it was tall by an odd margin — which is what made the switch
   read as a lopsided blob rather than as a pair of buttons. */
.fx-lang { display: flex; background: var(--paper-2, #EFEAE4); border-radius: 999px; padding: 4px; gap: 2px; }
.fx-lang button {
  height: 32px; min-width: 40px; padding: 0 4px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 13px/1 inherit; background: transparent; color: var(--ink-soft, #6E645C);
  display: flex; align-items: center; justify-content: center;
}
.fx-lang button.on { background: var(--card, #fff); color: var(--ink, #1F1A17); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.08)); }

/* The initials button. It replaced the name-and-sign-out strip that used to sit above the
   tabs: that strip spent a full row of a 390px screen on something you touch once a month,
   and the tabs are where the thumb lives. */
/* CENTRED BY FLEX, not by hoping. A button centres its text horizontally on its own but
   leaves the vertical to the line box, and with line-height:1 and the browser's own button
   padding the initials sat high and slightly left of the middle of the circle. */
.fx-me {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--accent, #6B4130); color: #fff; font: 700 15px/1 inherit;
  display: flex; align-items: center; justify-content: center; text-align: center;
  letter-spacing: .02em; flex: none;
}

/* ---------------------------------------------------------------- cards ----- */

.fx-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #E2DAD1);
  border-radius: var(--fx-r);
  padding: var(--fx-pad);
  display: flex; flex-direction: column; gap: 14px;
}
.fx-card.tight { padding: 8px; gap: 6px; }
.fx-card.flush { padding: 0; gap: 0; overflow: hidden; }

.fx-lbl {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint, #8A7F76);
}
.fx-fld { display: flex; flex-direction: column; gap: 6px; }
.fx-hint { font-size: 15px; color: var(--ink-soft, #6E645C); text-wrap: pretty; }
.fx-sec-h { display: flex; flex-direction: column; gap: 3px; padding: 4px 4px 0; }
.fx-sec-t { font-size: 14.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* A value the person cannot change — their own name on the footage sheet. Flat and inset
   rather than bordered, because a box with a border is a promise that you can type in it. */
.fx-fixed {
  min-height: 52px; border-radius: var(--fx-r-sm); background: var(--paper-2, #EFEAE4);
  padding: 0 14px; display: flex; align-items: center; font-size: 17px; font-weight: 700;
}

/* 16px is the floor on every input on this site: iOS zooms the whole page in on focus
   below it, and a page that has zoomed itself is a page the foreman now has to pan. */
.fx-in, .fx-ta {
  border: 1.5px solid var(--line, #E2DAD1); border-radius: var(--fx-r-sm);
  background: var(--card, #fff); font: inherit; font-size: 17px; color: var(--ink, #1F1A17);
  width: 100%;
}
.fx-in { height: 52px; padding: 0 14px; }
.fx-ta { min-height: 96px; padding: 12px 14px; resize: none; }
.fx-in:focus-visible, .fx-ta:focus-visible {
  outline: 2px solid var(--accent, #6B4130); outline-offset: 1px; border-color: transparent;
}

/* ---------------------------------------------------------------- pickers ----- */

/* WHAT REPLACED THE NATIVE DROPDOWN. A <select> of forty jobs on a phone is a wheel the
   width of the screen showing six rows of truncated text, and a job code truncates to
   nothing useful. These open a bottom sheet instead, where a row can carry the code AND the
   street and still be 62px tall.
   Empty reads amber on the warm tint — "you still owe me this"; filled goes quiet. */
/* IT LOOKS LIKE A FIELD, because it is one. This used to be a 56px amber panel with the
   words at 16px bold and "Choose" in gold beside them — a block of colour three times the
   weight of the real inputs above it, on a screen where the job picker is simply one more
   thing to fill in. An unfilled field is now said the way every other unfilled field on the
   site says it: grey placeholder text. The ✱ on the label is what marks it as required, and
   the form will not move to the next step without it either way. */
.fx-pick {
  min-height: 52px; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line, #E2DAD1); border-radius: var(--fx-r-sm);
  background: var(--card, #fff); padding: 6px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit;
}
.fx-pick-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-pick-main { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pick.fx-pick-empty .fx-pick-main { color: var(--ink-faint, #8A7F76); font-weight: 400; }

/* WHY THE MODIFIER IS NAMESPACED. It used to be a bare `empty`, which every screen on the
   site also uses for its "nothing here yet" panel — `.empty { padding: 40px 16px; ... }` in
   theme.css and again in half the page styles, loaded AFTER this file. So an unfilled picker
   quietly picked up that panel's 40px of padding and its font size: the Job / LCP and
   subcontractor boxes stood at twice the height of a filled one and went back to normal the
   moment something was chosen (Nury, 2026-10-06). Nothing matches `.fx-pick-empty` but this. */
.fx-pick-sub { font-size: 14px; color: var(--ink-soft, #6E645C); }
.fx-pick-act { font-size: 15px; font-weight: 600; color: var(--accent-ink, #5A3424); flex: none; }

/* ---------------------------------------------------------------- segmented ----- */

.fx-seg { display: flex; background: var(--paper-2, #EFEAE4); border-radius: var(--fx-r-sm); padding: 4px; gap: 4px; }
.fx-seg button {
  flex: 1; min-height: 42px; border: 0; border-radius: 11px; cursor: pointer;
  font: 700 16px/1.2 inherit; background: transparent; color: var(--ink-soft, #6E645C);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.fx-seg button.on { background: var(--dark, #251C18); color: #fff; }
.fx-seg button small { font-size: 13px; font-weight: 600; opacity: .75; }

/* ---------------------------------------------------------------- steps ----- */

/* Four bars rather than "Step 2 of 4" alone, because the bars say how much is left without
   being read. The words stay underneath for the person who wants them. */
.fx-steps { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 0; }
.fx-steps-bars { display: flex; gap: 5px; }
.fx-steps-bars i { flex: 1; height: 5px; border-radius: 3px; background: var(--line, #E2DAD1); }
.fx-steps-bars i.done { background: var(--accent, #6B4130); }
.fx-steps-t { font-size: 14.5px; font-weight: 700; color: var(--ink-soft, #6E645C); }

/* ---------------------------------------------------------------- code tiles ----- */

/* THE FOOTAGE KEYPAD'S FRONT DOOR. These were number inputs with a + beside them: on a
   phone that is a 16px field and a 24px button, and the keyboard that comes up covers the
   row you are typing into. A tile is 68px of target that opens a keypad built for the job.
   Three to a row is what fits at 390px while leaving the code readable above the number. */
.fx-codes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-code {
  min-height: 68px; cursor: pointer; font: inherit; padding: 8px 10px;
  border: 1.5px solid var(--line, #E2DAD1); border-radius: var(--fx-r-sm);
  background: var(--card, #fff);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.fx-code:active { transform: scale(.97); }
.fx-code .c { font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-faint, #8A7F76); }
.fx-code .n { font-size: 24px; font-weight: 800; color: var(--ink-faint, #8A7F76); }
/* A tile with footage on it is the only thing on the card that is filled, so the eye finds
   what was entered without reading six numbers. */
.fx-code.has { background: var(--accent-tint, #F7ECE4); border-color: var(--accent, #6B4130); }
.fx-code.has .n { color: var(--accent-ink, #5A3424); }

.fx-tot { display: flex; gap: 16px; justify-content: flex-end; padding: 0 4px; font-size: 14.5px; color: var(--ink-soft, #6E645C); }
.fx-tot b { color: var(--ink, #1F1A17); }
.fx-tot b.paid { color: var(--paid, #1F7A55); }

/* ---------------------------------------------------------------- day tiles ----- */

/* Seven across at 390px is 48px a tile, which is under the 44px floor only in the gaps.
   The letters are the day, the mark underneath is what was entered — one glyph, because
   "0.5" at this width wraps and a wrapped number in a grid of seven looks like damage. */
.fx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.fx-day {
  min-height: 52px; cursor: pointer; font: inherit; padding: 0;
  border: 1.5px solid var(--line, #E2DAD1); border-radius: 12px;
  background: var(--card, #fff); color: var(--ink-soft, #6E645C);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.fx-day .d { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.fx-day .m { font-size: 17px; font-weight: 800; line-height: 1; min-height: 16px; }
.fx-day.full { background: var(--accent-soft, #EDD8C9); border-color: var(--accent, #6B4130); color: var(--accent-ink, #5A3424); }
.fx-day.half { background: var(--accent-tint, #F7ECE4); border-color: var(--accent, #6B4130); color: var(--accent-ink, #5A3424); }
/* The weekend is drawn quieter rather than hidden: Saturday work happens, it is just not
   the thing the eye should land on first. */
.fx-day.wknd { opacity: .55; }

/* ---------------------------------------------------------------- tag tiles ----- */

/* What a photo is. Chips became tiles with a real checkbox because "pick at least one, more
   than one is fine" is not a thing a row of pills says — a pill that is on and a pill that
   is off differ by a fill, and in daylight that is not a difference. */
.fx-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* A SHADE SMALLER THAN THE REST. Seven of these stack up to most of a phone screen before
   the camera button, and unlike a job or a footage number they are a glance-and-tap: the
   words are two short ones and the state is a filled box. 48px is still well past the tap
   floor. */
.fx-tag {
  min-height: 48px; cursor: pointer; font: inherit; text-align: left; padding: 6px 11px;
  border: 1.5px solid var(--line, #E2DAD1); border-radius: var(--fx-r-sm);
  background: var(--card, #fff);
  display: flex; align-items: center; gap: 9px;
}
.fx-tag .box {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line-strong, #CDBFB2); background: transparent;
  color: #fff; font: 800 13px/1 inherit;
  display: flex; align-items: center; justify-content: center;
}
.fx-tag .lb { font-size: 15px; font-weight: 700; line-height: 1.2; }
.fx-tag.on { background: var(--accent-tint, #F7ECE4); border-color: var(--accent, #6B4130); }
.fx-tag.on .box { background: var(--accent, #6B4130); border-color: var(--accent, #6B4130); }

/* ---------------------------------------------------------------- buttons ----- */

.fx-btn {
  min-height: 54px; border-radius: 16px; cursor: pointer; font: 700 17px/1.2 inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
}
.fx-btn.ghost { border: 1px solid var(--line-strong, #CDBFB2); background: var(--card, #fff); color: var(--ink, #1F1A17); }
.fx-btn.solid { border: 0; background: var(--accent, #6B4130); color: #fff; font-weight: 800; }
.fx-btn.solid:active { background: var(--accent-press, #58341F); }
/* The camera is amber, not brown, and it is the only amber button on the site. It is the
   one action on these screens that is taken fifty times a day with the phone held at
   arm's length over a trench. */
.fx-btn.shoot { border: 0; background: var(--warn, #8F5600); color: #fff; font-weight: 800; }
.fx-btn.dashed { border: 1.5px dashed var(--line-strong, #CDBFB2); background: transparent; color: var(--ink-soft, #6E645C); min-height: 50px; }
.fx-btn[disabled] { opacity: .5; cursor: default; }
.fx-btn:focus-visible { outline: 2px solid var(--accent, #6B4130); outline-offset: 2px; }

/* ---------------------------------------------------------------- pinned bar ----- */

/* AT THE FOOT OF THE FORM, NOT PINNED OVER IT.
 *
 * This bar used to be fixed above the tab bar, on the reasoning that a submit row at the
 * end of a long form is itself a scroll to find. What that actually produced was a strip
 * of furniture covering the bottom 78px of every field screen at all times — on a 390px
 * phone, with the TEST SITE band and the tab bar also taking their cut, the form was down
 * to about half the glass, and on the production step the buttons sat on top of the very
 * codes they were asking you to fill in.
 *
 * So it flows with the page now: fill the step in, scroll to the end, and the buttons are
 * there waiting. It lines up with the form column rather than running the full width,
 * because a full-width bar inside a 560px column still looks like furniture. */
.fx-bar {
  max-width: 560px;
  margin: 6px auto 0;
  padding: 4px var(--fx-pad) 0;
  display: flex; gap: 10px;
  background: transparent;
}
.fx-bar > * { flex: 1; }
/* The committing half is wider. Which button is the one you meant should be answerable
   without reading either of them. */
.fx-bar > .fx-btn.solid, .fx-bar > .fx-btn.shoot { flex: 1.6; }
/* Enough room under the last button that the tab bar is not resting on it. */
html.fx body.has-bar { padding-bottom: calc(var(--jpnav-h, 58px) + 28px + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------- bottom sheet ----- */

/* ABOVE THE TAB BAR, which is z-index 100 in nav.css. At 60 the sheet opened UNDER the
   tabs: the keypad's last row — the Done button the keypad exists to reach — came up behind
   them and could not be tapped at all. A sheet is a modal; the
   whole screen belongs to it while it is open, tab bar included. */
.fx-sheet { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: flex-end; }
.fx-sheet[hidden] { display: none; }
.fx-sheet-scrim { position: absolute; inset: 0; background: rgba(25, 15, 10, .45); border: 0; padding: 0; }
.fx-sheet-body {
  position: relative; background: var(--card, #fff);
  border-radius: 28px 28px 0 0; padding: 10px 18px calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
  /* 82% of the sheet, not of the screen: the sheet is sized to the part of the screen the
     keyboard leaves visible (fit() in field.js), so this is the room above the keys. */
  max-height: 82%; overflow-y: auto;
  animation: fx-up .18s ease-out;
}
.fx-sheet-body.fx-tall { height: 82%; }
.fx-kb .fx-sheet-body { max-height: calc(100% - 10px); padding-bottom: 12px; border-radius: 22px 22px 0 0; }
.fx-kb .fx-sheet-body.fx-tall { height: calc(100% - 10px); }
@keyframes fx-up { from { transform: translateY(14px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .fx-sheet-body { animation: none; } }
.fx-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong, #CDBFB2); flex: none; }
.fx-sheet-t { font-size: 22px; font-weight: 800; }
/* The list starts clear of whatever is above it — the search box, usually. At the sheet's
   own 14px gap the first name sat right under the box and read as part of it. */
.fx-sheet-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fx-sheet-body > .fx-in + .fx-sheet-list,
.fx-sheet-body > .fx-sheet-search + .fx-sheet-list { margin-top: 8px; }
.fx-sheet-row {
  min-height: 62px; cursor: pointer; font: inherit; text-align: left; padding: 10px 14px;
  border: 1.5px solid var(--line, #E2DAD1); border-radius: 16px; background: var(--card, #fff);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fx-sheet-row.on { background: var(--accent-tint, #F7ECE4); border-color: var(--accent, #6B4130); }
/* The label over a section of the list. Quiet — it is a signpost, not an entry — and it gets
   air above it so the section reads as a group rather than as a row that lost its border. */
.fx-sheet-head {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint, #8A7F76); padding: 10px 4px 2px;
}
.fx-sheet-list > .fx-sheet-head:first-child { padding-top: 2px; }
.fx-sheet-row .id { font: 600 16.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fx-sheet-row .nm { font-size: 15px; color: var(--ink-soft, #6E645C); }
.fx-sheet-row .ck { font-size: 18px; font-weight: 800; color: var(--accent, #6B4130); }

/* ---------------------------------------------------------------- keypad ----- */

/* "Several spots in one day" is the case this exists for. A foreman lays 120ft at one
   address and 240ft at the next under the same code, and before this they had to add the
   two in their head and type the sum — which is where transposed footage came from. Type
   120, tap +, type 240, and the sheet gets 360 with both still on screen. */
.fx-pad-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fx-pad-code { font: 600 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fx-pad-sub { font-size: 14.5px; color: var(--ink-soft, #6E645C); text-align: right; }
/* THE RUNNING TOTAL, SET APART FROM THE KEYS. It used to sit one 14px gap above the first
   row of digits, which put a wide pale box and a wide pale 1-2-3 directly against each other
   and made the display read as a fourth row of the pad. It is a readout, not a key. */
.fx-pad-disp {
  background: var(--paper-2, #EFEAE4); border-radius: 16px; padding: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 10px;
}
.fx-pad-tot { flex: none; display: flex; flex-direction: column; gap: 2px; }
.fx-pad-tot b { font-size: 22px; font-weight: 800; }
.fx-pad-entry { flex: 1; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.fx-pad-entry .e { font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--accent, #6B4130); text-align: right; overflow-wrap: anywhere; }
.fx-pad-entry .e.long { font-size: 22px; }
.fx-pad-entry .s { font-size: 14px; font-weight: 700; color: var(--ink-faint, #8A7F76); min-height: 16px; }
.fx-pad-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-pad-keys button {
  min-height: 58px; border: 0; border-radius: var(--fx-r-sm); cursor: pointer;
  background: var(--paper-2, #EFEAE4); color: var(--ink, #1F1A17); font: 800 24px/1 inherit;
}
.fx-pad-keys button:active { opacity: .7; }
.fx-pad-keys button.fn { background: var(--card, #fff); border: 1px solid var(--line, #E2DAD1); font-size: 20px; }
/* + banks the number and leaves the pad open for the next spot. Drawn in the accent because
   it is the only key that does anything to the total, and a foreman adding a second address
   has to find it without being told it is there. */
.fx-pad-keys button.add {
  background: var(--accent-tint, #F7ECE4); border-color: var(--accent, #6B4130);
  color: var(--accent-ink, #5A3424); font-size: 26px;
}
.fx-pad-keys button.add[disabled] { background: var(--card, #fff); border-color: var(--line, #E2DAD1);
  color: var(--ink-faint, #8A7F76); }
.fx-pad-keys button.wide { grid-column: span 2; }

/* ---------------------------------------------------------------- toast ----- */

.fx-toast {
  position: fixed; left: 20px; right: 20px;
  bottom: calc(var(--jpnav-h, 58px) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 70; margin: 0 auto; max-width: 420px;
  background: var(--dark, #251C18); color: var(--dark-ink, #E4DAD0);
  border-radius: var(--fx-r-sm); padding: 14px 16px;
  font-size: 16px; font-weight: 600; box-shadow: var(--shadow-3, 0 8px 20px rgba(0,0,0,.2));
}
.fx-toast[hidden] { display: none; }

/* ---------------------------------------------------------------- empty ----- */

.fx-empty {
  background: var(--card, #fff); border: 1px solid var(--line, #E2DAD1);
  border-radius: var(--fx-r); padding: 32px 20px; text-align: center;
  font-size: 16.5px; color: var(--ink-soft, #6E645C);
}

/* ---------------------------------------------------------------- wide ----- */

/* The office laptop opening a field page. Nothing here becomes a desktop layout — a
   foreman's sheet is a phone form and Nury checking it on the laptop should see the same
   thing they do. It only stops the column running the width of a 27in monitor, and it
   unpins the action bar, which has nothing to hug on a tall window. */
@media (min-width: 900px) {
  /* The bar is in the flow on the phone too now, so there is nothing left to unpin here. */
  html.view-laptop body.has-bar { padding-bottom: 32px; }
  html.view-laptop .fx-toast { bottom: 24px; }
}

/* THE JOB LIST ON SCREEN MAY BE OLD. One line under the job box on Attendance, shown only
   when /api/options could not be reached at all and the screen is running on the list this
   phone remembered. It is a warning about the data, not an instruction, so it sits with the
   control it is about and disappears the moment a retry succeeds. See JP.options in
   shared.js and the MISW028 entry in ISSUES.md. */
.jobs-stale {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--warn, #8F5600);
}