/* ==========================================================================
   E-23 — the mark and the home screen.  2026-09-25, builder A.
   IMPORTS web/tokens.css (Rev 1.1).  DECLARES NO COLOUR VALUE.
   tokens rule 1: "No per-screen colour, ever. A screen uses these names or
   nothing."  Every colour below is a var(--c-*) from that file, so this
   sheet cannot drift from the design lane's contrast bar and cannot be the
   thing that re-introduces an amber.

   THE MARK IS A PHOTOGRAPH ON PURE BLACK.
   web/assets/bacco-mark.jpg is derived by crop-and-scale ONLY from
   playbooks/marketing/brand/concepts/2026-09-21_concept-B_app-splash.png —
   Bacco's approved house look (BRAND.md).  Nothing was redrawn, recoloured
   or invented.  Its ground is #000000, the same value as --c-bg in the dark
   default, so the image has no visible edge: it sits ON the screen rather
   than in a box.  BRAND.md's rule "do not letterbox the mark on any
   non-black ground" is why there is no border, no radius, no card and no
   background on the figure, and why nothing here centres it inside a panel.

   LIGHT THEME.  tokens rule 5 makes light an explicit per-user choice.  A
   black-ground photo on a white page WOULD be a letterbox, so in light the
   mark keeps its own black plate (.mark is given --c-bg from the dark set by
   painting the plate black under it) — see the [data-theme="light"] block at
   the bottom.  The mark is artwork, not UI; it does not invert.

   tokens rule 6: the full look (serif wordmark, metallic gradient, tagline,
   the motif) belongs to the splash / home header ONLY.  That is exactly and
   only where this file puts it.  Nothing below sets a serif, a gradient or a
   tagline anywhere else, and no data screen imports this sheet.
   ========================================================================== */

/* --------------------------------------------------------------- the mark */
.mark {
  display: block;
  width: 100%;
  object-fit: contain;          /* never crop the wordmark or the tagline    */
  object-position: center top;
  background: #000;             /* the artwork's own ground, not a UI colour */
  margin: 0 auto var(--sp-3);
}

/* LOGIN.  34vh is a CAP, not a height — object-fit:contain means the picture
   shrinks to fit and the element never grows past it.  The arithmetic that
   matters is what is left for the two fields on the shortest phone in the
   pilot.  At 667 px (the smallest current iPhone viewport):
     body padding            16
     mark cap        0.34*667 227
     margin under mark       24
     h1 (24px/1.15)          28
     language row (tap)      56
     language notice         25
     B-number label+margin   46
     B-number input          56   -> B-number field bottom  ~478 of 667
     hint + clear + PIN pair ~180  -> PIN field bottom      ~658 of 667
   The B-number and the PIN are both above the fold with the picture at full
   cap, and the picture is the first thing that gives when the phone is
   shorter.  On JD's iPhone (844) there is ~180 px of slack.  Checked by
   hand, not asserted by a test — a viewport is not a static fact. */
#screen-login .mark { max-height: 34vh; }

/* HOME — E-75. JD by phone, 01:51 CDT: "I like the layout of the profit app
   better than the field app. Is that a super simple change and does it
   matter at what stage we make the change"; narrowed 01:56: "Ok on layout
   good point about computer vs phone so we will leave it. I do like the
   home picture being full width better on profit app vs field app." ONLY
   the picture changes — the phone-vs-desk layout split JD chose to keep
   stays exactly as it is, and the LOGIN screen's mark two rules up is not
   touched at all (still 34vh, still what keeps the PIN above the fold).

   Job Profit's own home band, read for reference: `.band{position:relative;
   overflow:hidden} .band img{display:block; width:100%; max-width:100%;
   height:auto}` — edge to edge, natural aspect, never cropped. This is that
   same shape for #screen-home only: no cap, no object-fit needed (with no
   max-height forcing the box smaller than the artwork's own ratio — the
   width/height attributes on the <img> in index.html — there is nothing
   left to fit, so the wordmark and tagline can never be cropped).

   THE BREAKOUT is a negative margin sized off the token that pads the body
   (--sp-2, 16px each side), not a bare 100vw: it tracks the real gutter if
   that token ever changes, and it never opens a horizontal scrollbar the
   way 100vw can on an engine that includes the scrollbar in that unit. The
   env() terms add the notch / Dynamic-Island safe-area inset for a phone
   turned sideways (checked: MDN CSS_environment_variables — env(name,
   fallback) is valid, and index.html's viewport meta already carries
   viewport-fit=cover so the value resolves) — 0 in the portrait pilot use,
   non-zero if a GF ever rotates the phone. Only left/right are touched:
   margin-top and the vertical padding are left alone on purpose, so the
   light-theme rule at the foot of this file,
   `[data-theme="light"] .mark { padding: var(--sp-1) 0; }`, keeps both its
   top and bottom exactly as before, undisturbed by this rule's margins.

   THE DESK CAP. Edge-to-edge on a 1440px office monitor would print the
   picture at roughly 1440 * 608/900 ≈ 973px tall — JD did not ask for that,
   and on a shorter desk screen it would push every row below the fold,
   which is the opposite of what this same release's E-82 needs on the
   owner/office view. Above 44rem (704px — office.css's and owners.css's own
   desk breakpoint) the picture is capped to that same 44rem and centred:
   704 * 608/900 ≈ 476px tall, the same column width those two screens
   already use for a comfortable desk read, so the picture stops growing
   exactly where the rest of the office look already does. */
#screen-home .mark {
  width: calc(100% + (var(--sp-2) * 2) + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: auto;
  max-height: none;
  margin-bottom: var(--sp-2);
  margin-left: calc((var(--sp-2) * -1) - env(safe-area-inset-left, 0px));
  margin-right: calc((var(--sp-2) * -1) - env(safe-area-inset-right, 0px));
}
@media (min-width: 44rem) {
  #screen-home .mark {
    width: 44rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------- who is signed in on this
   phone.  The B-number and NOTHING ELSE.  No name, no crew, no role, no
   unit.  The app does not hold a name against a B-number on the device and
   this line will not be the place that starts (SEC-62).  It is the answer to
   the only question a man asks at a shared truck phone at 6 AM: is this me?
   --c-text-2 is the silver, 12.42:1 on black. */
#home-who {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
}

/* ---------------------------------------------------------------- the menu
   Full-width rows, --tap (56px) floor on height, --tap-gap between them in
   both axes, and nothing smaller than --fs-min (18px) anywhere. */
.home-menu {
  display: flex;
  flex-direction: column;
  gap: var(--tap-gap);
  margin: 0 0 var(--sp-4);
}

.home-row {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 14px var(--sp-2);
  text-align: left;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-body);
  /* EVERY WORK ROW IS AN <a>, so this line is load-bearing: without it the
     four work rows and the two role rows render underlined, and an anchor
     also ignores the `button {}` rule in index.html - which is why .home-row
     sets its own font, min-height, border and colour rather than inheriting
     them. Change PIN and Sign out are still <button>. */
  text-decoration: none;
}

/* The LIVE rows carry the blue rule down their leading edge.  --c-rule is
   #007CFD, 5.30:1, and tokens.css restricts it to "rules, dividers only
   (non-text)" — this is a 4px non-text bar, which is that use exactly.  It
   is never the row's text colour and never its fill. */
.home-row--live { border-left: 4px solid var(--c-rule); }

/* The COMING rows.  NO ROW USES THESE TONIGHT — every row became a real door
   on 2026-09-25 — and they are KEPT ON PURPOSE, unlike the crew-day panel
   which was deleted the same hour.  The difference is that the panel had
   nothing left to come back to, and a labelled row does: DECISIONS-REGISTER
   A9 goes to JD at 06:00, and if he rules that the briefing stays off the app
   the Briefing Record row flips back to a label in one line.  The rule that
   keeps this honest is a test, not a comment — home.soon exists in the string
   file if and only if a labelled row exists, asserted in both directions.

   tokens rule 2 — colour never carries meaning alone — so
   "not yet" is said FOUR ways and only one of them is colour:
     1. the words "Coming soon" under the label (.home-soon),
     2. aria-disabled="true" plus disabled, so VoiceOver says it too,
     3. a DASHED border instead of a solid one — shape, not hue,
     4. the silver rather than the white.
   The silver is --c-text-2 at 12.42:1, so the greyed rows still clear AA
   (4.5:1) and this seat's own 7:1 bar with room to spare.  A greyed row a
   man cannot read is not a disabled control, it is a broken one. */
.home-row--soon {
  border-style: dashed;
  color: var(--c-text-2);
}
.home-row--soon:hover { cursor: not-allowed; }

.home-label { display: block; }

.home-soon {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-min);     /* 18px — the floor, never below it          */
  font-weight: var(--fw-body);
  color: var(--c-text-2);
}

/* THE ACCOUNT ROWS sit apart from the work rows so a wet glove reaching for
   Crew Day does not find one by accident.  Change PIN (AC-32) and Sign out
   (AC-14) are one group: the gap goes ABOVE the first of them, and the
   adjacent rule below removes the second gap when they are neighbours, so
   the pair reads as one block rather than as two lone buttons.  Inside the
   pair the ordinary --tap-gap still separates them, which is the CD-64 / D-07
   floor between adjacent targets. */
/* THE FILED NOTICE.  JD 2026-09-25 ~06:2x CDT: "Once I complete a dvir or my
   da it should take me to Home Screen once filed."  One line, at the top,
   shown once and gone.  It is GOOD NEWS, not a warning, so it does NOT wear
   the inverse alert block — that treatment belongs to things that are wrong.
   The blue rule down its leading edge is the same --c-rule the live rows
   carry (5.30:1, non-text, which is the only use tokens.css permits), and the
   words themselves are --c-text at 21:1.  tokens rule 2 still holds: the
   colour is not carrying the meaning, the sentence is. */
.filed-notice {
  margin: 0 0 var(--sp-3);
  padding: 12px var(--sp-2);
  border-left: 4px solid var(--c-rule);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-body);
}

/* THE WAY OUT, ABOVE THE FOLD.  JD on his phone 2026-09-25 ~06:1x CDT: "there
   needs to be a way to go back to the page before or a way to go back to home
   page. Now I have to save my input to go back."  The control existed and sat
   below the form, which on a phone is below the fold — a way out a man cannot
   see is not a way out.  Two full-width-ish targets at the top of the screen,
   --tap-gap apart in both axes (CD-64 / D-07), nothing smaller than --tap. */
.screen-nav {
  margin: 0 0 var(--sp-3);
}
.screen-nav button {
  flex: 1 1 auto;
  min-height: var(--tap);
}

.home-row--account { margin-top: var(--sp-3); }
.home-row--signout { margin-top: var(--sp-3); }
.home-row--account + .home-row--signout { margin-top: 0; }

/* A ROLE-GATED ROW IS HIDDEN, NOT GREYED.  [hidden] is honoured by the
   inline sheet in index.html with display:none !important; this rule is here
   so a row that carries data-role but never reaches applyRoleGate() - a boot
   that died, a role the server did not name - stays off the glass rather
   than flashing on it.  Default deny, in CSS as well as in script. */
.home-row[data-role] { display: none; }
.home-row[data-role][data-role-granted="true"] { display: block; }

/* Focus comes from tokens.css :focus-visible; it is not redeclared here. */

/* ==========================================================================
   THE HOUSE LOOK, CONSUMED.  Added 2026-09-25 00:15 CDT on app-lead's
   finding that a headless render of the served build showed "plain black
   background, white-outlined boxes, default browser text".

   THE DIAGNOSIS IS NOT THAT THE TOKENS ARE UNCONSUMED.  index.html's inline
   style already spends them: the ground is --c-bg, the type is --c-text, the
   field borders are --c-border (#C7C7C7, which is what reads as "white
   outlined boxes" in a screenshot).  Two other things were true instead:

   1. THAT RENDER PREDATES THE MARK.  It was taken on 37bf861.  The serif
      wordmark, the metallic gradient, the blue rule and the tagline are the
      splash header, and tokens rule 6 deliberately BANS them from a data
      screen - "The full look belongs to the splash / home header only".  The
      mark this release adds IS that header.  Most of "it doesn't look like
      the card" was the card not being on the screen yet.

   2. NOT ONE ELECTRIC BLUE ANYWHERE.  --c-rule (#007CFD, the card's rule and
      divider) was defined and never spent, so the screen had a black ground
      and a silver outline and no accent at all.  That part is real and is
      what the rules below fix.

   BOUNDARIES HELD: web/tokens.css is NOT edited (c675f13 pins it by digest
   and a test asserts that digest - and that test RUNS in this checkout, it
   does not skip).  Nothing below declares a colour value; every one is a
   var(--c-*), so the light ground inverts correctly and the contrast bar
   travels with the token rather than with this file.

   NO BLUE-FILLED BUTTON WITH WHITE TEXT, anywhere, on either screen.  White
   on #007CFD is 3.96:1 and fails AA outright; index.html says so at length
   and this file does not quietly undo it.  Blue appears ONLY as a rule, a
   border and a divider - never as a fill under type and never as type on
   white - which is exactly the use tokens.css permits for --c-rule.
   ========================================================================== */

/* THE CARD'S SIGNATURE: spaced silver capitals over a Bacco Blue rule.  That
   is the "TREE SERVICE" line on Kainan's card, and it is the one gesture
   that makes a screen read as Bacco.  The heading also SHRINKS here, from
   --fs-head to --fs-label: with the wordmark in the picture above it, a
   second large "Bacco Tree" in Arial was competing with the mark rather than
   supporting it - and the pixels it gives back go to the fold. */
#screen-login h1,
#screen-home h2 {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);                       /* 12.42 : 1 */
  text-transform: uppercase;                    /* presentation only - the  */
  letter-spacing: var(--ls-caps);               /* string file is untouched */
  border-bottom: var(--bw-rule) solid var(--c-rule);   /* 5.30 : 1, non-text */
}

/* THE ONE PRIMARY ACTION PER SCREEN wears the blue, as a BORDER.  tokens.css
   already gives these --tap-primary and --fw-head; what they lacked was any
   way to tell them from the four secondary buttons around them, all of which
   carry the same silver outline.  Text stays --c-text on --c-bg: 21:1. */
#submit,
#enrol-submit,
#enrol-pin-submit,
#pin-change-submit {
  border-color: var(--c-rule);
  border-width: var(--bw-focus);                /* 3px - heavier, not filled */
}

/* Field labels in the silver, tracked like the card's capitals.  Size is NOT
   reduced: --fs-label stays 20px.  A 6 AM glove needs the word more than the
   design needs the refinement. */
#screen-login label,
#screen-enrol label,
#screen-enrol-pin label,
#screen-pin-change label {
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* The selected language. E-67 (2026-09-27): the toggle's aria-pressed look
   moved to the app-wide chosen block in tokens.css (accent fill, on-accent
   text, 8.51:1 dark / 7.95:1 light). The old accent-text rule here would have
   painted accent text ON that accent fill, so it is gone, not kept. */

/* ------------------------------------------------------------- light theme
   See the header note.  The artwork keeps its black plate; the chrome
   wordmark and the blue-lit canopy do not exist on white.  Everything else
   on the screen follows the tokens' light set automatically because nothing
   above hard-codes a colour. */
:root[data-theme="light"] .mark,
[data-theme="light"] .mark {
  background: #000;
  padding: var(--sp-1) 0;
}