/* ===================================================================
   fh-home.css  --  the client home
   ===================================================================
   Lane 4, Phase 4, September 1, 2026. The visual half of the two homes:
   the branded hero card, the four area sections, the module tiles, the
   field tier's task buttons, and the one card that names an area this
   client does not have.

   SCOPE. Everything is under body.fhs-host, the class fh-home.js puts on
   the body when it takes over the client dashboard view. Nothing here can
   reach the operator's own screens, and nothing here loads on a module
   page, where fh-shell.css does this job instead.

   BRANDING IS TOKENS. Not one client color is written down. The hero
   gradient, the tile rings, the section rules and the icons all read
   --fhs-b / --fhs-bb / --fhs-bd / --fhs-brgb, which fh-shell.css maps from
   what brand-apply.js sets, with the F&H palette as the fallback. Load the
   same page as two clients and it wears two brands with no other change.
   The stoplight (red, amber, green) is fixed on every client, because a
   number that means "late" must not change color between clients.

   TAP TARGETS. Every control on this page is at least 44px on its short
   side, the house minimum, and tests/verify_home_dom.js measures the
   rendered boxes rather than trusting these rules.
   =================================================================== */

/* ---------------- the branded hero ---------------- */
/* THE HERO. Same recipe, built with more care.
   The white diagonal stripe that used to sit on top is gone, on Bryant's
   instruction of September 4, 2026, and the visual direction says it comes off
   every hero rather than being refined.

   What is here instead, from the top of the stack down:
     the counter-shade band, behind the words. Its color and its strength are
       --fhs-scrim, worked out per client by brand-apply.js so the ink clears
       4.5:1 on the worst pixel a word can land on. THE .18 AND .26 BELOW ARE
       INPUTS TO THAT ARITHMETIC; tests/verify_td19_brand.js reads them out of
       this file and out of brand-apply.js and fails if the two stop agreeing.
     the lit corner, top right, which is the highlight this hero always had.
     the dark counter-shade in the opposite corner, so the panel has a near and
       a far side instead of reading as printed.
     the brand ramp, unchanged, in the client's own three tones.
   And the shadow gains a lit top edge and a one-pixel inner hairline, which is
   what makes the edge look like an edge rather than a border. */
body.fhs-host .fhh-hero{
  position:relative;
  overflow:hidden;
  color:var(--fhs-b-on);
  border-radius:20px;
  padding:16px 18px 15px;
  margin:0 0 12px;
  background:
    /* ACROSS THE WHOLE PANEL, not fading out at 62%. The first version faded, and the
       sentence under the headline sits below where it had gone, so that one line came
       out at 3.28:1 on a Basin Ridge home while everything above it passed. The
       arithmetic in brand-apply.js models a wash over the panel; the stylesheet now
       paints the one the arithmetic is about. */
    linear-gradient(var(--fhs-scrim),var(--fhs-scrim)),
    radial-gradient(130% 150% at 88% -25%,rgba(255,255,255,.18),transparent 55%),
    radial-gradient(95% 125% at -12% 122%,rgba(0,0,0,.26),transparent 58%),
    linear-gradient(135deg,var(--fhs-bb) 0%,var(--fhs-b) 48%,var(--fhs-bd) 100%);
  box-shadow:
    0 24px 48px -20px rgba(var(--fhs-brgb),.55),
    0 3px 10px rgba(var(--fhs-brgb),.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
/* The client's own logo, washed into the corner. soft-light means it takes
   the hero's color rather than sitting on it as a sticker, so a logo with a
   white plate behind it does not punch a hole in the gradient. */
body.fhs-host .fhh-hero .fhh-mark{
  position:absolute; right:-26px; bottom:-34px;
  width:150px; height:150px;
  /* A logo chip is a rounded square in this product, never a circle. Standing
     house rule, restated in the September 2026 visual direction. */
  border-radius:26px;
  opacity:.38; mix-blend-mode:soft-light;
  object-fit:contain; pointer-events:none;
  transform:rotate(-8deg);
}
body.fhs-host .fhh-hero .fhh-k{
  position:relative;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  /* NOT THINNED WITH TRANSPARENCY. Fading the ink is what put the primary
     button's sub-line under the floor for every client including F&H, and
     tests/verify_theme_contrast.js bans that construction by name. The kicker is
     quieter than the headline because it is smaller and tracked out, which costs
     no contrast at all. */
  color:var(--fhs-b-on);
}
body.fhs-host .fhh-hero .fhh-big{
  position:relative;
  font-size:20px; font-weight:800; line-height:1.2; letter-spacing:-.02em;
  margin-top:6px;
}
body.fhs-host .fhh-hero .fhh-sub{
  position:relative;
  font-size:12.5px; color:var(--fhs-b-on); margin-top:4px;
}
/* THE SUB LINE ON THE FULL AND EXEC HERO CARRIES THE DAY'S WORK NOW. TD-23,
   September 4, 2026. It used to read "Signed in as Dale K." and was sized for a label.
   It now reads "3 items need your attention today", which is the sentence a safety lead
   reads first, so it gets weight and a little more size. It still sits clearly under the
   greeting above it: 14.5px semibold against 20px extra bold.
   NOT THINNED WITH TRANSPARENCY, for the reason the kicker's own note gives, and NOT
   given the amber. The warm treatment belongs on the overdue cell, where the number is;
   a sentence wearing it as well would be two alarms for one fact.
   SCOPED OFF THE SLIM HERO. The field hand's hero uses this same class for "Everything
   you file today is on this screen.", which is a caption and not a status, and that
   screen was not part of this lane. */
body.fhs-host .fhh-hero:not(.fhh-slim) .fhh-sub{
  font-size:14.5px; font-weight:600; line-height:1.3; margin-top:5px;
}
body.fhs-host .fhh-hero .fhh-due{
  position:relative;
  display:flex; gap:8px; margin-top:12px;
}
/* GLASS, PROPERLY. A blur, a white fill that falls off downward, an inset
   highlight along the top edge and a one-pixel inner hairline. The .16 at the top
   of that fill is the third number brand-apply.js reckons with; see the note on
   the hero above. The counter-shade goes under the glass so a cell reads against
   the same surface the words next to it do. */
body.fhs-host .fhh-hero .fhh-due > div{
  flex:1;
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08)),
    linear-gradient(var(--fhs-scrim),var(--fhs-scrim));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:0;
  border-radius:12px;
  padding:9px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 4px 14px -6px rgba(0,0,0,.35);
}
/* The cell that needs somebody. Warm amber, the fixed stoplight amber, on the
   number only: the label stays the panel's own ink so the row still reads as one
   row. fh-home.js puts this class on only when the count is really above zero. */
body.fhs-host .fhh-hero .fhh-due > div.fhh-hot{
  background:
    linear-gradient(180deg,rgba(var(--fhs-amb-rgb),.22),rgba(var(--fhs-amb-rgb),.10)),
    linear-gradient(var(--fhs-scrim),var(--fhs-scrim));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(var(--fhs-amb-rgb),.30),
    0 4px 14px -6px rgba(0,0,0,.35);
}
body.fhs-host .fhh-hero .fhh-due > div.fhh-hot .fhh-n{ color:var(--fhs-amb-dk) }
body.fhs-host .fhh-hero .fhh-n{ font-size:20px; font-weight:800; line-height:1 }
body.fhs-host .fhh-hero .fhh-l{ font-size:10.5px; color:var(--fhs-b-on); margin-top:4px; line-height:1.25 }
/* A figure still being read says so rather than showing a zero that is not
   true yet. Same width as a number so nothing moves when it lands. */
body.fhs-host .fhh-hero .fhh-n.fhh-wait{ opacity:.55 }
body.fhs-host .fhh-hero.fhh-slim{ padding:14px 18px 13px; border-radius:16px }
body.fhs-host .fhh-hero.fhh-slim .fhh-big{ font-size:18px }

/* ---------------- section heading ---------------- */
body.fhs-host .fhh-sech{
  display:flex; align-items:center; gap:10px;
  margin:16px 2px 8px;
}
/* THE LONGEST AREA NAME IS "Incidents and Corrective Actions" AND IT DOES NOT FIT
   on a 390px phone at this letter spacing. nowrap pushed the count off the right
   edge, so the number of modules in the area, which is the whole point of the row,
   was the part that fell off. The heading wraps instead, the rule can shrink to
   nothing, and the count never moves. */
body.fhs-host .fhh-sech h2{
  margin:0;
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fhs-ink2);
  line-height:1.3;
  flex:0 1 auto; min-width:0;
}
body.fhs-host .fhh-sech .fhh-rule{ flex:1 1 0; min-width:0; height:1px; background:linear-gradient(90deg,var(--fhs-b),transparent) }
body.fhs-host .fhh-sech .fhh-count{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; color:var(--fhs-ink3); white-space:nowrap;
  flex:0 0 auto;
}

/* ---------------- module tiles ---------------- */
body.fhs-host .fhh-tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 4px;
}
@media (max-width:340px){ body.fhs-host .fhh-tiles{ grid-template-columns:repeat(2,1fr) } }
body.fhs-host .fhh-tile{
  position:relative;
  display:block; width:100%;
  /* 92, measured, not guessed: the ring is 34 with 6 under it, and the longest
     label on the home, "Corrective Actions", takes two lines at 11.5px inside a
     third of a 390px phone. At 84 the second line was cut in half. */
  min-height:92px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
  border-radius:14px;
  padding:10px 6px 9px;
  text-align:center;
  box-shadow:var(--fhs-shadow);
  font:inherit; color:var(--fhs-ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.fhs-host .fhh-tile:active{ transform:translateY(1px) }
/* THE LIFT. Two pixels, a brand-tinted edge and a shadow that moves with it, in
   150ms. It is a hover, so a phone never sees it; a laptop and a touchscreen
   laptop both do, which is why :active above still moves the other way. */
@media (hover:hover){
  body.fhs-host .fhh-tile{ transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
  body.fhs-host .fhh-tile:hover{
    transform:translateY(-2px);
    border-color:rgba(var(--fhs-brgb),.45);
    box-shadow:0 2px 4px rgba(20,22,45,.05),0 16px 34px -16px rgba(var(--fhs-brgb),.40);
  }
}
/* THE ICON RING IS A ROUNDED SQUARE, gradient-tinted, with an inner ring and a
   light along its top edge. Same shape as a logo chip, for the same reason: this
   product does not draw circles around things. */
body.fhs-host .fhh-tile .fhh-ring{
  width:36px; height:36px; border-radius:12px;
  margin:0 auto 6px;
  display:grid; place-items:center;
  background:linear-gradient(155deg,rgba(var(--fhs-brgb),.16),rgba(var(--fhs-brgb),.06));
  box-shadow:
    inset 0 0 0 1px rgba(var(--fhs-brgb),.22),
    inset 0 1px 0 rgba(255,255,255,.80),
    0 3px 8px -3px rgba(var(--fhs-brgb),.35);
}
body.fhs-host .fhh-tile .fhh-ring svg{ width:17px; height:17px; color:var(--fhs-b) }
/* THE DARK PANEL. A tile in the dark is a lit surface rather than a lighter hole: a
   shallow gradient, a hairline edge and a light along the top. The glyph inside the
   ring goes to the brightened tint of the client's color, because the mid tone that
   reads on white is the tone that disappears into a dark panel. */
:root:not([data-theme="light"]) body.fhs-host .fhh-tile,
:root:not([data-theme="light"]) body.fhs-host .fhh-task,
:root:not([data-theme="light"]) body.fhs-host .fhh-offer{
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.14)),var(--fhs-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--fhs-shadow);
}
:root:not([data-theme="light"]) body.fhs-host .fhh-tile .fhh-ring svg,
:root:not([data-theme="light"]) body.fhs-host .fhh-offer .fhh-ring svg{ color:var(--fhs-bb) }
:root:not([data-theme="light"]) body.fhs-host .fhh-tile .fhh-ring,
:root:not([data-theme="light"]) body.fhs-host .fhh-offer .fhh-ring{
  background:linear-gradient(155deg,rgba(var(--fhs-brgb),.30),rgba(var(--fhs-brgb),.12));
  box-shadow:
    inset 0 0 0 1px rgba(var(--fhs-brgb),.45),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 3px 10px -3px rgba(0,0,0,.6);
}
/* The chevron and the brand-colored text on a dark panel take the same brighter tone. */
:root:not([data-theme="light"]) body.fhs-host .fhh-task .fhh-go{ color:var(--fhs-bb) }
body.fhs-host .fhh-tile .fhh-lb{ display:block; font-weight:700; font-size:11.5px; line-height:1.22; letter-spacing:.01em }
/* ONE LIVE FACT, under the name. It is empty until the records land, so a tile
   never states something about a client's records before they have been read.
   Where it says a number, that number came from the Expiry Radar's own pass. */
body.fhs-host .fhh-tile .fhh-fact{
  display:block;
  margin-top:3px;
  font-size:10.5px; line-height:1.25; font-weight:600;
  color:var(--fhs-ink3);
}
body.fhs-host .fhh-tile .fhh-fact:empty{ display:none }
body.fhs-host .fhh-tile .fhh-fact.fhh-late{ color:var(--fhs-amb-ink) }
/* The count badge, where there is a count. Top right, out of the way of the
   label, and hidden outright rather than sitting there as a zero. */
body.fhs-host .fhh-tile .fhh-badge{
  position:absolute; top:7px; right:7px;
  min-width:18px;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; font-weight:700; line-height:1;
  color:var(--fhs-b-on);
  background:linear-gradient(180deg,var(--fhs-b),var(--fhs-bd));
  border-radius:999px;
  padding:3px 6px;
  box-shadow:0 2px 6px -2px rgba(var(--fhs-brgb),.60),inset 0 1px 0 rgba(255,255,255,.30);
}
body.fhs-host .fhh-tile .fhh-badge[hidden]{ display:none !important }

/* ---------------- the field tier's task buttons ---------------- */
body.fhs-host .fhh-task{
  display:flex; align-items:center; gap:12px;
  width:100%;
  min-height:64px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
  border-radius:16px;
  padding:13px 14px;
  margin:0 0 9px;
  box-shadow:var(--fhs-shadow);
  font:inherit; color:var(--fhs-ink); text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.fhs-host .fhh-task:active{ transform:translateY(1px) }
body.fhs-host .fhh-task .fhh-ring{
  width:44px; height:44px; border-radius:14px;
  flex:0 0 auto;
  display:grid; place-items:center;
  /* The icon sits ON the client's color, so it reads the ink token rather than
     being white. A safety-yellow client would get a white icon on a yellow fill
     at 1.9:1, which is the whole reason --brand-on exists. */
  color:var(--fhs-b-on);
  /* THE COUNTER-SHADE GOES UNDER THIS GLYPH TOO, and it is not decoration here.
     Measured September 4, 2026: the glyph is painted in the ink worked out for the
     middle of the ramp, and this fill runs from the light end to the dark end, so at
     one end or the other it fell under the 3:1 icon floor. Basin Ridge came out at
     2.25:1 and a deep navy client at 2.47:1. The same wash the hero uses closes it,
     because it was worked out for exactly this: the ink over the ends of this
     client's own ramp. tests/verify_td19_brand.js scores both ends for ten brands. */
  background:
    linear-gradient(var(--fhs-scrim),var(--fhs-scrim)),
    linear-gradient(135deg,var(--fhs-bb),var(--fhs-b) 60%,var(--fhs-bd));
  box-shadow:0 8px 16px -8px rgba(var(--fhs-brgb),.8),inset 0 1px 0 rgba(255,255,255,.25);
}
body.fhs-host .fhh-task .fhh-ring svg{ width:22px; height:22px }
/* Reporting an incident is the one button that is not the brand. It is the
   fixed stoplight red, on every client, because the thing it starts is the
   thing a hand needs to find without reading. */
body.fhs-host .fhh-task.fhh-urgent .fhh-ring{
  background:linear-gradient(135deg,#FF5D68,var(--fhs-red) 60%,#9D1523);
  box-shadow:0 8px 16px -8px rgba(225,45,61,.8);
}
body.fhs-host .fhh-task .fhh-t{ flex:1; min-width:0 }
body.fhs-host .fhh-task .fhh-t b{ display:block; font-size:15.5px; letter-spacing:-.01em }
body.fhs-host .fhh-task .fhh-t span{ display:block; font-size:11.5px; color:var(--fhs-ink3); margin-top:2px }
body.fhs-host .fhh-task .fhh-go{ margin-left:auto; color:var(--fhs-b); font-size:20px; line-height:1; flex:0 0 auto }

/* ---------------- the card for an area this client does not have ---------------- */
body.fhs-host .fhh-offer{
  display:flex; align-items:center; gap:11px;
  margin:14px 0 4px;
  padding:13px 14px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
  border-radius:16px;
  box-shadow:var(--fhs-shadow);
  text-align:left;
}
body.fhs-host .fhh-offer .fhh-ring{
  width:38px; height:38px; border-radius:13px;
  flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(155deg,rgba(var(--fhs-brgb),.18),rgba(var(--fhs-brgb),.06));
  box-shadow:
    inset 0 0 0 1px rgba(var(--fhs-brgb),.22),
    inset 0 1px 0 rgba(255,255,255,.80),
    0 3px 8px -3px rgba(var(--fhs-brgb),.35);
}
body.fhs-host .fhh-offer .fhh-ring svg{ width:18px; height:18px; color:var(--fhs-b) }
body.fhs-host .fhh-offer b{ display:block; font-size:13px }
body.fhs-host .fhh-offer p{ margin:3px 0 0; font-size:11.5px; color:var(--fhs-ink3); line-height:1.4 }

/* ---------------- room for the bottom nav ---------------- */
/* The nav is fixed, so the last tile would sit under it without this. The
   height comes from the same token the module pages use. */
body.fhs-host.fhs-has-nav .fhh-home{ padding-bottom:calc(18px + var(--fhs-nav-h)) }
body.fhs-host .fhh-home{ padding-bottom:18px }

/* A line that explains how a list was matched, under the list. Small, quiet,
   and present because a hand who cannot find their own certificate needs to
   know it was looked for by name. */
body.fhs-host .fhh-note{
  margin:6px 2px 0;
  font-size:11.5px; line-height:1.45;
  color:var(--fhs-ink3);
}

/* [hidden] LOSES TO A CLASS SELECTOR. The section headings are display:flex under
   body.fhs-host .fhh-sech, which outranks the browser's [hidden]{display:none},
   so the "Your Own Forms" heading sat on the page over an empty grid until this
   rule put it back. Same for the grid itself: dashboard.css gives .cd-grid a
   display, and an empty one leaves a hole the height of a tile. */
body.fhs-host .fhh-sech[hidden]{ display:none !important }
body.fhs-host .cd-grid#fhhCustom:empty{ display:none !important }