/* The portal homescreen.
 *
 * The front door. A tile per section, and above them the two or three things
 * the roster says are actually stopping an estimate reaching somebody. Layout
 * only: the tokens, .card, .btn, .field, .in, .muted, .err and the sign in
 * .gate all come from app.css, so this screen cannot drift from the app the
 * reps already use.
 *
 * Phone first, like the rest of the portal. A rep opens this on an iPhone in a
 * truck; Steve opens it on a laptop. The narrow layout is the real one and the
 * wide one is the variant.
 */

/* app.css locks the map page to the viewport so a drag cannot scroll it. This
   page is a document and scrolls, so that lock has to come off. */
html, body.fc-home { height: auto; min-height: 100%; overflow: visible; }
body.fc-home { background: var(--bg-soft); }

/* Two local inks, copied from the Team page for the same measured reason: the
   brand --red on its own --red-tint is 4.44:1, under AA for normal text, so it
   cannot be the ink on the warning it belongs to. Same hues, darkened until
   they are comfortable rather than borderline. */
body.fc-home {
  --warn-ink: #b42318;            /* on --red-tint */
  --warn-line: rgba(180, 35, 24, 0.30);
}

/* app.css's .pw-toggle is 34px tall, under the 44px this portal holds itself
   to. It is a shared primitive, so it is fixed here rather than there: the
   territory map's gate is in the reps' hands today and this is not the place
   to change how it looks. The .in it sits inside is 48px, so 44 fits. */
body.fc-home .pw-toggle { min-height: 44px; }

.hm {
  max-width: 1180px; margin: 0 auto;
  /* No portal bar on this page, so the safe area is this page's own problem
     rather than something measured into --fshell-top-h by the shell. */
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 28px);
}

/* ----------------------------------------------------------------- head */
.hm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.hm-head img { height: 40px; width: auto; flex: none; }
/* A basis rather than a bare flex: 1, so that on a phone the name chip drops
   to its own row instead of squeezing the title into two words a line. The
   chip is about 200px, so 180 here is the width at which they stop fitting
   side by side. */
.hm-head-t { min-width: 0; flex: 1 1 180px; }
.hm-head h1 { font-size: 21px; }
.hm-head .sub { color: var(--mute); font-size: 13.5px; margin-top: 2px; }
/* 52px tall so the Sign out button inside it can be a real 44px target. */
.hm-who {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 4px 0 12px;
  margin-left: auto; max-width: 100%; min-width: 0;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
}
.hm-who b { font-family: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hm-who button {
  border: 0; background: transparent; color: var(--blue-deep); font-family: var(--head); font-weight: 700;
  font-size: 12.5px; cursor: pointer; padding: 0 12px; min-height: 44px; border-radius: 999px;
}
.hm-who button:hover { background: var(--blue-tint); }

/* ---------------------------------------------------------------- brief */
/* Empty is a legitimate state. Nothing wrong with the roster means nothing is
   printed, and an empty box with a border round it would read as a failure to
   load, so the box only exists when it has a line in it. */
.hm-brief:empty { display: none; }
.hm-brief { display: grid; gap: 8px; margin-bottom: 16px; }
.hm-load { color: var(--mute); font-size: 14px; padding: 2px; }

.hm-note {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px;
  border-radius: 12px; padding: 12px 13px; font-size: 14px; line-height: 1.45;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
}
.hm-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.hm-note .grow { flex: 1 1 220px; min-width: 0; }
.hm-note b { font-family: var(--head); font-weight: 800; display: block; font-size: 14.5px; margin-bottom: 2px; }
/* Loud on purpose. Every one of these means a booking cannot reach somebody,
   and that is invisible everywhere else in the product: the estimate still
   goes through, it just lands on nobody. */
.hm-note.bad { background: var(--red-tint); border-color: var(--warn-line); color: var(--warn-ink); }
.hm-note.good { background: var(--blue-tint); border-color: var(--blue-line); color: #0b4f96; }
/* Not a warning and not an achievement, just a fact with no action on it. */
.hm-note.plain { background: transparent; border-color: transparent; padding: 2px 2px 4px; color: var(--ink-2); }
.hm-note.plain b { font-size: 15px; }
/* app.css's .btn.small is 38px tall, under the 44px this portal holds itself
   to, so an action here is the full primitive with a tighter box rather than
   the small variant. */
.hm-note .btn { padding: 10px 14px; font-size: 14px; flex: none; }
.hm-note.bad .btn.ghost { background: #fff; }

/* ---------------------------------------------------------------- tiles */
.hm-tiles { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

.hm-tile {
  display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); min-width: 0;
  transition: transform 120ms, border-color 120ms;
}
.hm-tile:hover { transform: translateY(-1px); border-color: var(--blue-line); }
.hm-tile:active { transform: translateY(0); }
.hm-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.hm-ico {
  width: 48px; height: 48px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--blue-tint); color: #0b4f96;
}
.hm-ico svg { width: 24px; height: 24px; }

.hm-t { min-width: 0; flex: 1; }
.hm-t b { font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; display: block; }
.hm-t small { display: block; color: var(--mute); font-size: 13.5px; line-height: 1.4; margin-top: 3px; }

.hm-go { flex: none; color: var(--mute); display: grid; place-items: center; }
.hm-go svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- wide */
/* Two columns as soon as a phone is turned sideways or a small tablet opens,
   three once there is room for a third without the description wrapping to
   four lines. Five tiles fill 3 + 2, which is the shape of the thing rather
   than a grid that has to come out even. */
@media (min-width: 560px) {
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 980px) {
  .hm { padding: calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 40px); }
  .hm-head { margin-bottom: 18px; }
  .hm-head h1 { font-size: 24px; }
  .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A tile is a target, not a row, once there is room for it to be one. */
  .hm-tile { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 148px; padding: 18px; }
  .hm-t b { font-size: 17px; }
}

/* The chevron says "this goes somewhere" on a phone, where the tile is a row
   in a list. In the tall wide layout the tile is obviously a card you press
   and the arrow has nothing left to add, so it goes rather than floating in a
   corner. */
@media (min-width: 980px) {
  .hm-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-tile { transition: none; }
  .hm-tile:hover { transform: none; }
}