/* ===================================================================
   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);
}
/* Use the saved artwork at its original aspect ratio. Keep the whole mark inside
   the card, including wide wordmarks; transparency provides the watermark effect. */
body.fhs-host .fhh-hero .fhh-mark{
  position:absolute; right:12px; bottom:12px;
  width:150px; height:150px;
  max-width:42%; max-height:calc(100% - 24px);
  border-radius:0;
  opacity:.12; mix-blend-mode:normal;
  object-fit:contain; pointer-events:none;
  transform:none;
}
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 }
/* SUITE-FIX-1: a figure whose read ran out of time is a question mark, and one plain line under
   the three says what the mark means. It goes as soon as all three are in. */
body.fhs-host .fhh-hero .fhh-late-line{ margin-top:10px; font-size:12px; line-height:1.4; color:var(--fhs-b-on) }
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 }

/* ==========================================================================================
   SEARCH (TD-2, Lane 05). One box under the hero that reaches the database. The results panel
   replaces the home body while a query is showing, so the four ink tones and the surface are the
   shell's own, and it inherits dark mode with everything else. */
.fhh-search{
  position:relative; display:flex; align-items:center; gap:10px;
  margin:14px 0 4px; padding:0 14px;
  min-height:48px; border-radius:14px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
  box-shadow:var(--fhs-shadow,0 10px 26px -18px rgba(91,43,214,.35));
}
.fhh-search-ic{ display:flex; width:20px; height:20px; color:var(--fhs-b); flex:0 0 auto }
.fhh-search-ic svg{ width:20px; height:20px }
.fhh-search input{
  flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:15px; color:var(--fhs-ink); padding:12px 8px 12px 10px;
  border-radius:10px;
}
/* SUITE-FIX-1, October 1, 2026: THE PILL IS WHITE, because the box inside it already is. The
   fh-white-fields block on every page forces a text field white with dark text and !important, in
   every theme, and that rule is not weakened here. So the field was a white slab inside a pill of
   the theme surface: a seam in light mode and a white block in a navy pill in dark mode, with the
   typed text hard against the slab's left edge. The pill now takes the same white, so field and
   pill read as one control, and the field has room on its left. The border stays the theme line:
   white is the one color this file may write down (the stoplight rule in verify_home.js), and on a
   dark page a white pill needs no border to be seen. */
body.fhs-host .fhh-search{ background:#fff }
.fhh-search input::placeholder{ color:var(--fhs-ink); opacity:.55 }

.fhh-sresults{ margin:6px 0 10px }
.fhh-ssource{ font-size:12.5px; color:var(--fhs-ink); opacity:.7; margin:8px 2px 12px }
.fhh-sgroup{ margin-bottom:16px }
.fhh-sgh{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fhs-b); margin:0 2px 8px;
}
.fhh-shit{
  display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center;
  text-decoration:none; color:inherit;
  padding:12px 14px; margin-bottom:8px; border-radius:12px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
}
.fhh-shit:active{ transform:translateY(1px) }
.fhh-shm{ grid-column:2; display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fhs-b); margin-bottom:2px }
.fhh-sht{ grid-column:2; display:block; font-size:15px; font-weight:700; color:var(--fhs-ink) }
.fhh-shs{ grid-column:2; display:block; font-size:12.5px; color:var(--fhs-ink); opacity:.7; margin-top:2px }
.fhh-sempty{ padding:22px 6px; font-size:14px; color:var(--fhs-ink); opacity:.85; line-height:1.5 }
.fhh-sempty b{ display:block; margin-bottom:2px }

/* MY RECORDS THIS WEEK (TD-3, Lane 06). Field-tier list of what this person filed. Same ink and
   surface tokens as everything else on the home, so it follows the theme. */
.fhh-mine{ margin:2px 0 8px }
.fhh-mine-empty{ font-size:13px; color:var(--fhs-ink); opacity:.7; line-height:1.5; padding:2px 2px 10px }
.fhh-mrow{
  display:grid; grid-template-columns:34px 1fr auto; grid-auto-rows:auto; column-gap:10px;
  text-decoration:none; color:inherit;
  padding:11px 14px; margin-bottom:8px; border-radius:12px;
  background:var(--fhs-surface); border:1px solid var(--fhs-line);
}
.fhh-mrow:active{ transform:translateY(1px) }
.fhh-mm{ grid-column:2; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fhs-b) }
.fhh-md{ grid-column:3; grid-row:1 / span 2; align-self:center; font-size:12px; color:var(--fhs-ink); opacity:.6; white-space:nowrap }
.fhh-mt{ grid-column:2; font-size:15px; font-weight:700; color:var(--fhs-ink); margin-top:1px }

/* Compact module identity beside record/search labels. The line drawing remains
   underneath until the same earned class used by tiles confirms the PNG loaded. */
.fhh-list-icon{
  grid-column:1; grid-row:1 / span 3; align-self:center;
  width:34px; height:34px; display:grid; place-items:center; position:relative;
}
.fhh-list-icon svg{width:22px;height:22px;color:var(--fhs-b)}
.fhh-list-icon img{display:none;width:34px;height:34px;object-fit:contain}
.fhh-list-icon.fhh-custom-icon svg{display:none}
.fhh-list-icon.fhh-custom-icon img{
  display:block;filter:drop-shadow(0 1px 1px rgba(15,20,40,.22));
}
:root:not([data-theme="light"]) .fhh-list-icon.fhh-custom-icon img{
  filter:drop-shadow(0 0 1px rgba(235,240,255,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.3));
}

/* The field home's four task tiles lost their section heading on September 7, 2026
   (Bryant asked for the "Today's Tasks" label off). The heading also provided the
   breathing room under the search box, so the first tile carries it now. */
body.fhs-host #fhhBody > .fhh-task:first-child{ margin-top:14px }

/* ==========================================================================
   THE VISUAL HANDOFF, September 11, 2026. Full-color tile icons, the
   compliance shelves, the area jumps, and the spacing pass the design review
   settled. Everything below OVERRIDES the base rules above on purpose, so the
   whole look can be reverted by deleting this one section. */

/* ---- the full-color icon inside the ring. The ring keeps its SVG under the
   image; fhh-custom-icon is added by fh-home.js ONLY once the image has
   loaded, so an offline or failed fetch shows the line icon, never a hole. */
body.fhs-host .fhh-tile .fhh-ring img{ display:none }
body.fhs-host .fhh-tile .fhh-ring.fhh-custom-icon{
  width:52px; height:52px;
  background:transparent; border:0; box-shadow:none;
}
body.fhs-host .fhh-tile .fhh-ring.fhh-custom-icon svg{ display:none }
body.fhs-host .fhh-tile .fhh-ring.fhh-custom-icon img{
  display:block; width:52px; height:52px; object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(15,20,40,.22));
}
:root:not([data-theme="light"]) body.fhs-host .fhh-tile .fhh-ring.fhh-custom-icon{
  background:transparent; box-shadow:none;
}
:root:not([data-theme="light"]) body.fhs-host .fhh-tile .fhh-ring.fhh-custom-icon img{
  filter:drop-shadow(0 0 1px rgba(235,240,255,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.3));
}

/* ---- tiles grow to hold the 52px art: phone 108, desktop 112, labels 12/13. */
body.fhs-host .fhh-tile{ min-height:108px; padding:12px 6px }
body.fhs-host .fhh-tile .fhh-lb{ font-size:12px; line-height:1.35 }
body.fhs-host .fhh-tile .fhh-fact{ font-size:11px; line-height:1.35; margin-top:5px }
body.fhs-host .fhh-sech h2{ letter-spacing:.08em }
@media (min-width:1024px){
  body.fhs-host .fhh-tile{ min-height:112px; padding:15px 10px; border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 9px -6px rgba(var(--fhs-brgb),.28) }
  body.fhs-host .fhh-tile .fhh-lb{ font-size:13px }
  body.fhs-host .fhh-sech h2{ font-size:14px }
}

/* ---- wide desktop: the column count matches the area's own count. */
@media (min-width:1200px){
  body.fhs-host .fhh-tiles[data-area="field"]{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  body.fhs-host .fhh-tiles[data-area="incidents"]{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  body.fhs-host .fhh-tiles[data-area="people"]{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ---- the compliance shelves. Three labeled subgroups on a desktop, stacked
   with their labels on a phone; the unlabeled fourth grid is the landing spot
   for area-assigned custom forms and any future compliance tile, and it keeps
   the data-area hook the Suite Designer appends into. */
body.fhs-host .fhh-subtitle{ font:600 12px Inter,Arial,sans-serif; color:var(--fhs-ink3); margin:12px 0 9px }
body.fhs-host .fhh-sub-rest .fhh-tiles{ margin-top:9px }
body.fhs-host .fhh-sub-rest .fhh-tiles:empty{ display:none }
@media (min-width:1024px){
  body.fhs-host .fhh-comp{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px }
  body.fhs-host .fhh-comp .fhh-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  body.fhs-host .fhh-comp .fhh-sub{ border-left:1px solid var(--fhs-line); padding-left:14px }
  body.fhs-host .fhh-comp .fhh-subtitle{ margin:0 0 10px }
  body.fhs-host .fhh-comp .fhh-sub-rest{ grid-column:1 / -1; border-left:0; padding-left:0 }
}

/* ---- the four area jumps. */
body.fhs-host .fhh-jumps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
  margin:8px 0 20px; border-bottom:1px solid var(--fhs-line); padding-bottom:12px }
body.fhs-host .fhh-jumps button{ font:600 11px Inter,Arial,sans-serif; color:var(--fhs-ink);
  background:var(--fhs-surface); border:1px solid var(--fhs-line); padding:8px 10px;
  min-height:44px; border-radius:8px; cursor:pointer; -webkit-tap-highlight-color:transparent }
@media (min-width:1024px){
  body.fhs-host .fhh-jumps{ display:flex; gap:8px; flex-wrap:wrap }
  body.fhs-host .fhh-jumps button{ font-size:12px; padding:10px 14px }
}
body.fhs-host .fhh-sech{ scroll-margin-top:64px }

/* ---- the compact hero and Reports strip from the review. */
body.fhs-host .fhh-hero{ padding:18px 20px; margin-bottom:14px }
body.fhs-host .fhh-hero .fhh-big{ font-size:24px; line-height:1.25 }
body.fhs-host .fhh-hero .fhh-sub{ font-size:14px }
/* SUITE-FIX-1: the work sentence is empty until both counts are in (fh-home.js headline), and an
   empty line keeps no space. */
body.fhs-host #fhhHead:empty{ display:none }
/* PERF-2, October 1, 2026: WHILE THE COUNTS ARE OUT, THE LINE KEEPS ITS PLACE, EMPTY. The figures
   often take longer than the home's 400 ms hold, and the sentence then arrived after the home was
   on screen and pushed every tile below it down a line. While fh-home.js says the counts are still
   being read (.fhh-counting), the empty line holds exactly one line of height and shows nothing: no
   placeholder text, which is the thing SUITE-FIX-1 took away. The answered sentence lands in the
   space it already had. A count that comes back late gives up the space, as before. */
body.fhs-host .fhh-home.fhh-counting #fhhHead:empty{ display:block; visibility:hidden }
body.fhs-host .fhh-home.fhh-counting #fhhHead:empty::before{ content:'\200b' }
/* THE COMPACT STRIP, AND IT IS A CLASS. (SUITE-1 item 4, September 17, 2026.)
   These two rules read `#fhhExec` until today, so Reports was 48 pixels tall with a
   30-pixel ring and no shadow while Reminders, built from the same markup on the same
   morning, kept the full .fhh-task size directly underneath it. An id cannot describe a
   pair. Every card in this strip wears .fhh-strip; nothing here names a card. */
body.fhs-host .fhh-strip{ min-height:48px; padding:8px 14px; margin:0 0 12px; box-shadow:none }
body.fhs-host .fhh-strip .fhh-ring{ width:30px; height:30px; border-radius:9px }

/* ---- reduced motion: the jump lands without the glide (the JS also asks). */
@media (prefers-reduced-motion:reduce){
  body.fhs-host{ scroll-behavior:auto }
}

/* Universal icons (Bryant, 11 Sep 2026): the field task cards. A loaded image
   earns fhh-custom-icon the same way a tile's does; the plain task ring goes
   transparent under it, and the URGENT card keeps its red chip because that
   color is a safety affordance a hand looks for without reading. */
body.fhs-host .fhh-task .fhh-ring img{ display:none }
body.fhs-host .fhh-task .fhh-ring.fhh-custom-icon{ background:transparent; box-shadow:none }
body.fhs-host .fhh-task .fhh-ring.fhh-custom-icon svg{ display:none }
body.fhs-host .fhh-task .fhh-ring.fhh-custom-icon img{
  display:block; width:44px; height:44px; object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(15,20,40,.22));
}
:root:not([data-theme="light"]) body.fhs-host .fhh-task .fhh-ring.fhh-custom-icon img{
  filter:drop-shadow(0 0 1px rgba(235,240,255,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
body.fhs-host .fhh-task.fhh-urgent .fhh-ring.fhh-custom-icon{
  background:linear-gradient(135deg,#FF5D68,var(--fhs-red) 60%,#9D1523);
  box-shadow:0 8px 16px -8px rgba(225,45,61,.8);
  border-radius:14px;
}
body.fhs-host .fhh-task.fhh-urgent .fhh-ring.fhh-custom-icon img{ width:34px; height:34px }

/* ICON-WIRE-2 (September 29, 2026): the painted art on the home's non-module cards.
   The compact strip (Executive Dashboard, Reminders, WSI) keeps its 30-pixel ring, so the
   image is 30 pixels and the strip stays 48 tall. An EXPIRED certificate keeps its red chip,
   the same safety affordance the urgent card keeps, with the art sitting on it. The offer
   card's 38-pixel ring earns the image the same way a tile's ring does. */
body.fhs-host .fhh-strip .fhh-ring.fhh-custom-icon img{ width:30px; height:30px }
body.fhs-host .fhh-task .fhh-ring.fhh-late.fhh-custom-icon{
  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-ring.fhh-late.fhh-custom-icon img{ width:34px; height:34px }
body.fhs-host .fhh-offer .fhh-ring img{ display:none }
body.fhs-host .fhh-offer .fhh-ring.fhh-custom-icon{ background:transparent; box-shadow:none }
body.fhs-host .fhh-offer .fhh-ring.fhh-custom-icon svg{ display:none }
body.fhs-host .fhh-offer .fhh-ring.fhh-custom-icon img{
  display:block; width:38px; height:38px; object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(15,20,40,.22));
}
:root:not([data-theme="light"]) body.fhs-host .fhh-offer .fhh-ring.fhh-custom-icon{ background:transparent; box-shadow:none }
:root:not([data-theme="light"]) body.fhs-host .fhh-offer .fhh-ring.fhh-custom-icon img{
  filter:drop-shadow(0 0 1px rgba(235,240,255,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.3));
}

/* DESKTOP-1, October 7, 2026 (DEMO-1 finding 7): THE AREA HEADINGS GET THEIR OWN GROUND IN LIGHT
   MODE. The home is painted over the client's brand washes (dashboard.js applyRamp: the primary at
   56 percent top left, the bright at 50 top right, the client's navy under all of it), and those
   washes are not lighter in light mode. The headings are dark gray text sitting straight on them,
   so where a wash is strongest they measured 1.19 to 1 and 1.39 to 1 in the DEMO-1 walk
   ("Incidents and Corrective Actions" and "Documents & reference", gray on the wash).
   Darker text cannot fix that, because the same heading sits on near-white a hundred pixels lower,
   and white text fails there instead. So each heading row is set on the same surface the tiles
   under it already use, and the text is read against that surface whatever the brand is. The
   shelf labels inside the compliance area get the same, sized to their words.
   Light mode only. Dark mode was measured fine and is left exactly as it was. */
:root[data-theme="light"] body.fhs-host .fhh-sech{
  padding:7px 12px;
  border-radius:10px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
  box-shadow:0 1px 2px rgba(20,22,45,.05);
}
:root[data-theme="light"] body.fhs-host .fhh-subtitle{
  width:fit-content; max-width:100%;
  padding:4px 10px;
  border-radius:8px;
  background:var(--fhs-surface);
  border:1px solid var(--fhs-line);
}