/* ============================================================================
   field.css — the maintenance phone
   One fixed light design, painted explicitly rather than inherited. This screen
   is read in direct sunlight on a roof and in a dark basement on the same
   afternoon, so it does not follow a theme: it commits to high contrast and
   stays there.

   The numbers that are not arbitrary:
     16px   the smallest text anywhere. Below that Safari zooms the page in on
            focus and never zooms back out, which reads as the app jumping about.
     56px   the tap targets. 44 is the documented minimum; 44 is also the size
            at which a cold hand in a glove misses, and this is a work app.
     the bottom  is where the one big action lives, because that is where a
            thumb reaches on a phone held in one hand.
   ========================================================================== */

/* THE COLOURS LIVE ON :root, NOT ON .field-face, AND THAT IS THE WHOLE POINT.
   They used to be defined here on `.field-face` — a class this app only puts on
   the page when the person SIGNED IN is a maintenance or vendor login. So an
   administrator opening Field View or Discover got every one of these
   undefined: no background, no borders, no button fills, no chips. White on
   white, with the buttons invisible.

   Nobody on the maintenance side ever saw it, because they always had the
   class. The only people who saw it were the ones who could not have known
   what it was supposed to look like. Colours belong to the SCREEN, not to who
   is looking at it. */
:root {
  --f-ink:    #101B2B;
  --f-sub:    #5C6A7C;
  --f-paper:  #FFFFFF;
  --f-sunk:   #F1F4F8;
  --f-line:   #DBE1EA;
  --f-go:     #0E7A52;
  --f-late:   #B3261E;
  --f-hold:   #8A5A00;
  --f-navy:   #12213B;
  --f-new:    #7A4F9E;
}

/* The full-bleed phone treatment stays keyed to the login, because THAT part
   genuinely is about who is looking: a maintenance phone has no office chrome
   around it, and an administrator looking at the same screen keeps their
   sidebar. */
.field-face {
  background: var(--f-sunk);
  color: var(--f-ink);
}

/* An administrator opening Field View is looking at the same screen inside the
   office layout, so it paints its own ground rather than inheriting whatever
   the page behind it happens to be. */
.fw {
  background: var(--f-sunk);
  color: var(--f-ink);
}

/* The back office chrome has no business here. */
.field-face .setup-panel,
.field-face .hub-heading,
.field-face .whoami { display: none !important; }

.field-face .app-body { display: block; padding: 0; max-width: 100%; }
.field-face main#mainContent { padding: 0; max-width: 100%; margin: 0; }

.fw {
  /* Room for whatever is pinned over the bottom. On the list that is the nav
     alone; on a task it is the nav AND the finish bar sitting on top of it, so
     the nav's own height is added rather than assumed to be nothing. */
  padding: 14px 14px calc(var(--f-navbar, 0px) + 132px);
  max-width: 640px; margin: 0 auto;
  font-size: 16px; line-height: 1.45;
}
.fw.task { padding-top: 4px; }

.fmuted { color: var(--f-sub); }
.fnote { font-size: .85em; color: var(--f-sub); margin: 9px 0 0; line-height: 1.45; }
.fempty { color: var(--f-sub); text-align: center; padding: 32px 12px; }

/* --------------------------------------------------------------- the list -- */
.fcount {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 13px;
}
.fsegs { display: flex; gap: 7px; margin-bottom: 14px; }
.fseg {
  flex: 1 1 0; min-height: 52px; font: inherit; font-size: .95rem; font-weight: 700;
  border: 1px solid var(--f-line); background: var(--f-paper); color: var(--f-sub);
  border-radius: 12px; cursor: pointer; padding: 0 4px;
}
.fseg[aria-pressed="true"] { background: var(--f-navy); border-color: var(--f-navy); color: #fff; }
.fseg:focus-visible { outline: 3px solid var(--f-go); outline-offset: 2px; }

.fnotice {
  background: #FBF1DC; color: var(--f-hold); border-radius: 11px;
  padding: 11px 13px; font-size: .92rem; font-weight: 600; margin-bottom: 12px;
}

.flist { display: grid; gap: 11px; }
.fcard {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--f-paper); border: 1px solid var(--f-line);
  border-left: 5px solid var(--f-go);
  border-radius: 13px; padding: 14px 14px 12px 15px;
  display: grid; gap: 5px; min-height: 100px;
}
.fcard.late { border-left-color: var(--f-late); }
.fcard:focus-visible { outline: 3px solid var(--f-go); outline-offset: 2px; }
.fcard:active { background: var(--f-sunk); }

/* The address is the biggest thing on the screen. It is what he navigates by
   and what he reads out on the phone; it used to be the same size as
   everything else. */
.faddr { font-size: 1.2rem; font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
.faddr.big { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.fwhat { font-size: 1rem; color: var(--f-sub); line-height: 1.35; }
.frow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

.fchip {
  font-size: .82rem; font-weight: 700; padding: 5px 10px; border-radius: 8px;
  background: var(--f-sunk); color: var(--f-sub);
}
.fchip.when { background: #E6F2EC; color: #0B5D3F; }
.fchip.late { background: #FBE9E7; color: var(--f-late); }
.fchip.hold { background: #FBF1DC; color: var(--f-hold); }
/* Whose job it is. Only drawn in the team view, and deliberately quieter than
   the timing chips beside it: in that list the name is how you scan, but the
   thing that still decides what to do first is whether a job is late. */
.fchip.who  { background: var(--f-sunk); color: var(--f-sub); }

/* --------------------------------------------------------------- one task -- */
.fback {
  font: inherit; font-size: 1rem; font-weight: 700; background: none; border: 0;
  color: var(--f-go); cursor: pointer; padding: 12px 0 4px; min-height: 52px; text-align: left;
}
.fhead { margin-bottom: 2px; }
.fsub { font-size: 1rem; color: var(--f-sub); font-weight: 600; margin-top: 2px; }

/* The appointment gets its own band because it is the first thing anybody asks. */
.fslot {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--f-navy); color: #fff;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fslot.open { background: #E9EDF3; color: var(--f-ink); }
.flab { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
.fval { font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.facts { display: flex; gap: 8px; margin: 12px 0 4px; }
.fact {
  flex: 1 1 0; min-height: 60px; font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  border-radius: 12px; border: 1.5px solid var(--f-go);
  background: var(--f-paper); color: var(--f-go);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.fact.fill { background: var(--f-go); color: #fff; }
.fact svg { width: 21px; height: 21px; }
.fact:focus-visible { outline: 3px solid var(--f-navy); outline-offset: 2px; }

.fbody { margin-top: 12px; }
.fblock {
  background: var(--f-paper); border: 1px solid var(--f-line);
  border-radius: 13px; padding: 15px;
}
.fblock + .fblock { margin-top: 11px; }
.fblock h3 {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--f-sub); margin: 0 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fblock p { margin: 0; font-size: 1rem; line-height: 1.5; }
.fblock.pulled { border-color: #D8CDE8; background: #FBF9FE; }

/* Every section says so. Nothing on this screen is required, and a person who
   believes otherwise leaves a task open rather than closing it half-filled. */
.fopt { font-size: .82rem; font-weight: 600; color: var(--f-sub); text-transform: none; letter-spacing: 0; }
.ffrom { font-size: .82rem; font-weight: 700; color: var(--f-new); text-transform: none; letter-spacing: 0; }

/* getting in */
.fkey {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 10px; background: var(--f-sunk); margin-bottom: 7px;
}
.fkeywhat { font-size: .98rem; font-weight: 600; }
.fkeyval { font-size: 1.16rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.faccess { margin: 10px 0 0; font-size: .98rem; line-height: 1.5; }
.faccess b { color: var(--f-late); }

/* photographs */
.fthumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.fthumb {
  width: 92px; height: 92px; border-radius: 10px; position: relative; overflow: hidden;
  background: var(--f-sunk) center/cover no-repeat; border: 1px solid var(--f-line);
  display: block; text-decoration: none;
}
.fthumb .ftag {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 13px is the floor everywhere on this screen. A badge saying a photograph is
     still on the phone is exactly the sort of thing that must not be squinted at,
     and "En el teléfono" is longer than "On phone" — so it wraps rather than
     being cut off. */
  font-size: 13px; line-height: 1.15; font-weight: 700; text-align: center; padding: 4px 3px;
  background: rgba(16,27,43,.8); color: #fff;
}
.fthumb.waiting .ftag { background: var(--f-hold); }

.fshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fshots.two { grid-template-columns: repeat(2, 1fr); }
.fshot {
  min-height: 68px; cursor: pointer;
  border: 1.5px dashed var(--f-line); background: var(--f-sunk); color: var(--f-ink);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: .85rem; font-weight: 700;
}
.fshot.big { min-height: 104px; font-size: .95rem; }
.fshot svg { width: 22px; height: 22px; stroke: var(--f-go); }
.fshot:active { background: #E6EBF2; }
.fshot:focus-within { outline: 3px solid var(--f-go); outline-offset: 2px; }

/* inputs */
.fblock input[type="text"], .fblock input:not([type]), .fblock textarea {
  width: 100%; font: inherit; font-size: 16px;      /* 16 exactly: see the header */
  border: 1px solid var(--f-line); border-radius: 11px;
  padding: 12px 13px; min-height: 56px; background: var(--f-paper); color: var(--f-ink);
}
.fblock textarea { min-height: 92px; resize: vertical; }

.frow2 { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.fmic {
  flex: 1 1 auto; min-height: 56px; font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--f-go); background: var(--f-paper); color: var(--f-go);
  border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.fmic.on { background: #E6F2EC; }
.fmic svg { width: 22px; height: 22px; }
.flangchip {
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  background: var(--f-go); color: #fff; border-radius: 6px; padding: 3px 7px;
}

.fsecond {
  min-height: 56px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--f-line); background: var(--f-paper); color: var(--f-ink);
  border-radius: 12px; padding: 0 16px; margin-top: 9px;
}
.fsecond.wide { width: 100%; margin-top: 0; color: var(--f-sub); min-height: 50px; font-size: .95rem; }
.fsecond:focus-visible { outline: 3px solid var(--f-go); outline-offset: 2px; }

.fnotes { margin-top: 12px; display: grid; gap: 10px; }
.fnoteitem { border-top: 1px solid var(--f-line); padding-top: 10px; font-size: .98rem; }
.fnoteitem .fmuted { font-size: .82rem; margin-bottom: 3px; }
/* The English sits under a person's own words rather than over them. */
.fen { margin-top: 6px; padding: 8px 10px; background: var(--f-sunk); border-radius: 9px; font-size: .94rem; }
.flab2 {
  display: block; font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--f-sub); margin-bottom: 3px;
}

/* ------------------------------------------------------- the bar at the foot */
.fbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--f-paper); border-top: 1px solid var(--f-line);
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid; gap: 8px;
  max-width: 640px; margin: 0 auto;
}
/* The field view has its own nav; when one is present the bar sits above it. */
.field-face .fbar { bottom: var(--f-navbar, 0px); }

.fdone {
  width: 100%; min-height: 62px; font: inherit; font-size: 1.08rem; font-weight: 800;
  border: 0; border-radius: 13px; background: var(--f-go); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.fdone svg { width: 22px; height: 22px; }
.fdone[disabled] { opacity: .6; }
.fdone:focus-visible { outline: 3px solid var(--f-navy); outline-offset: 2px; }

/* ---------------------------------------------------------------- finished -- */
.fdoneview { text-align: center; padding: 34px 8px; }
.ftick {
  width: 78px; height: 78px; border-radius: 50%; background: #E6F2EC;
  display: grid; place-items: center; margin: 0 auto 16px;
}
.ftick svg { width: 40px; height: 40px; stroke: var(--f-go); }
.fdoneview h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
.ffiled {
  text-align: left; background: var(--f-paper); border: 1px solid var(--f-line);
  border-radius: 12px; padding: 13px 15px; font-size: .95rem; margin-top: 16px;
}
.ffiled div { display: flex; gap: 9px; padding: 5px 0; color: var(--f-sub); line-height: 1.45; }
.ffiled div::before { content: "✓"; color: var(--f-go); font-weight: 800; flex: 0 0 auto; }

/* ------------------------------------------------------------------ sheets -- */
.fscrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(16,27,43,.5);
  display: flex; align-items: flex-end;
}
.fsheet {
  width: 100%; max-width: 640px; margin: 0 auto;
  background: var(--f-paper); border-radius: 18px 18px 0 0;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  max-height: 84vh; overflow-y: auto;
  animation: fRise .18s ease-out;
}
@keyframes fRise { from { transform: translateY(16px); opacity: .7; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fsheet { animation: none; } }
.fsheet h4 { font-size: 1.05rem; font-weight: 700; margin: 2px 0 13px; text-align: center; }

.fsheetbtn {
  width: 100%; min-height: 62px; font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; color: var(--f-ink);
  border: 1px solid var(--f-line); background: var(--f-paper);
  border-radius: 12px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; padding: 11px 15px; text-align: left;
}
.fsheetbtn svg { width: 23px; height: 23px; stroke: var(--f-go); fill: none; flex: 0 0 auto; }
.fsheetbtn small { display: block; font-size: .8rem; font-weight: 500; color: var(--f-sub); line-height: 1.4; }
.fsheetbtn.cancel { justify-content: center; border: 0; background: var(--f-sunk); color: var(--f-sub); }

/* ---------------------------------------------------------------- discover -- */
.fdtitle { font-size: 1.4rem; font-weight: 800; margin: 6px 0 4px; letter-spacing: -.02em; }
.fdshot {
  width: 100%; max-height: 240px; object-fit: cover;
  border-radius: 12px; margin: 13px 0; display: block; background: var(--f-sunk);
}
.fthinking { text-align: center; color: var(--f-sub); padding: 26px 0; font-size: 1rem; }
.fanswer {
  background: var(--f-paper); border: 1px solid var(--f-line); border-radius: 13px;
  padding: 15px; font-size: 1rem; line-height: 1.55; white-space: pre-wrap;
}
.fups { display: grid; gap: 8px; margin-top: 11px; }
.fup {
  width: 100%; min-height: 56px; font: inherit; font-size: .96rem; font-weight: 600;
  text-align: left; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--f-line); background: var(--f-paper); color: var(--f-go);
  border-radius: 12px;
}
.fup.go { border-color: var(--f-go); font-weight: 700; }
.fup:focus-visible { outline: 3px solid var(--f-go); outline-offset: 2px; }

/* ------------------------------------------------- the bar along the bottom */
/* Four buttons, chosen per person. Fixed rather than sticky because the task
   screen scrolls a long way and the way out should never scroll away. */
.fnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; background: var(--f-paper); border-top: 1px solid var(--f-line);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 640px; margin: 0 auto;
}
body:not(.field-face) .fnav { display: none; }

.fnav button {
  flex: 1 1 0; min-height: 62px; font: inherit; font-size: .82rem; font-weight: 700;
  background: none; border: 0; color: var(--f-sub); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.fnav button[aria-current="page"] { color: var(--f-go); }
.fnav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9;
            stroke-linecap: round; stroke-linejoin: round; }
.fnav button:focus-visible { outline: 3px solid var(--f-go); outline-offset: -3px; }

/* The menu, top right.

   Written for a WHITE top bar. It was first styled white-on-white — present,
   clickable, passing its test, and completely invisible on the screen. A menu
   nobody can see is a menu that does not exist. */
.fmenubtn {
  width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 11px;
  border: 1px solid var(--f-line); background: var(--f-paper); color: var(--f-ink);
  cursor: pointer; display: grid; place-items: center;
}
body:not(.field-face) .fmenubtn { display: none; }
.fmenubtn svg { width: 23px; height: 23px; }
.fmenubtn:focus-visible { outline: 3px solid var(--f-go); outline-offset: 2px; }

/* One menu, not two. The sidebar toggle on the left opens the same list of
   areas this button holds, and two hamburgers on one bar is a puzzle rather
   than a navigation.

   Hiding the left one leaves a hole in the top bar's grid, which the name then
   wraps into three lines to fill — so the columns are restated here rather than
   left to fall where they may. */
.field-face .hamb,
.field-face .sidebar { display: none !important; }
.field-face .topbar { grid-template-columns: 1fr auto; }
.field-face .top-actions { grid-column: 2; gap: 10px; padding-right: 10px; }
.field-face .brandwrap { grid-column: 1; }

/* The one offer this screen makes. Full width and thumb-height like everything
   else here, but in the quiet secondary style — it is worth taking and it is
   not the job he opened the app to do. */
.fnotify {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  background: var(--f-paper);
  color: var(--f-navy);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fnotify:active { background: var(--f-sunk); }