/* Working hours.
 *
 * Layout only, plus the few pieces app.css does not already own. The tokens,
 * .card, .btn, .field, .in, .muted, .err, .sheet, .scrim, .toast and the sign
 * in .gate all come from app.css, so this page cannot drift from the map the
 * reps already use.
 *
 * Phone first, like the rest of the portal. A rep sets their week on the
 * phone in the truck, so the narrow layout is the real one and the wide
 * layout is the variant.
 */

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

/* Three local inks, each because a brand token measured short on the ground it
   would sit on. Same hues, darkened until they are comfortable rather than
   borderline. Every ratio below was READ OFF THE CHECKER, not worked out by
   hand: two numbers in an earlier version of this file were hand arithmetic
   and both were wrong. */
body.fc-hours {
  --warn-ink: #b42318;          /* 6.05:1 on --red-tint */
  --note-ink: #8a4708;          /* 6.56:1 on --amber-bg */
  --ok-ink: #05603a;            /* 7.66:1 on white, 7.26:1 on --ok-tint */
  --ok-tint: #ecfdf3;
  --ok-line: rgba(5, 96, 58, 0.24);
}

.hr {
  max-width: 1180px; margin: 0 auto;
  /* The shell measures itself into these, so the page clears the bar whether
     it landed on the top or the bottom, safe area included. --hr-save-h is
     the same idea for the save bar: it is measured, never guessed. */
  padding: calc(var(--fshell-top-h, 0px) + 14px) 16px
           calc(var(--fshell-bottom-h, 0px) + var(--hr-save-h, 0px) + 28px);
}

/* ----------------------------------------------------------------- head */
.hr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.hr-head img { height: 38px; width: auto; flex: none; }
/* A real basis, not a bare flex: 1. With basis 0 and min-width 0 the title can
   shrink for ever, so on a phone it never wraps, it collapses to a sliver and
   sets one word per line beside the name chip. 240px is roughly where the two
   stop fitting side by side, so below that the chip drops to its own row. */
.hr-head-t { min-width: 0; flex: 1 1 240px; }
.hr-head h1 { font-size: 21px; }
.hr-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. */
.hr-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);
}
.hr-who b { font-family: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hr-who button {
  border: 0; background: transparent; color: #0b4f96; font-family: var(--head); font-weight: 700;
  font-size: 12.5px; cursor: pointer; padding: 0 12px; min-height: 44px; border-radius: 999px;
}
.hr-who button:hover { background: var(--blue-tint); }

.hr-load { color: var(--mute); font-size: 14px; padding: 24px 2px; }

/* ----------------------------------------------------------------- grid */
.hr-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.hr-grid > .card { padding: 16px; min-width: 0; }
.hr-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.hr-step h2 { font-size: 16px; }
.hr-count { color: var(--mute); font-size: 13px; margin-left: auto; }
.hr-lede { margin-bottom: 12px; }

/* .hr-sel is this page's own class and app.css knows nothing about it, so its
   size is declared here. .in is named alongside it as a belt: app.css used to
   drop it to 15px at 900px and up, which zooms an iPad in landscape the moment
   a field is focused, and that has since been fixed centrally at 16px. This
   line is now agreement rather than a correction. */
body.fc-hours .in, body.fc-hours .hr-sel { font-size: 16px; }

/* This page's own select. app.css has no .sel: the calendar declares its own,
   and reaching into another page's stylesheet for it is how two pages end up
   sharing a rule neither of them owns. */
.hr-sel {
  width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 12px 34px 12px 11px; background-color: #fff; color: var(--ink); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 18px;
  font-family: var(--body);
}
.hr-sel:focus { border-color: var(--blue); outline: none; }
.hr-sel:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* -------------------------------------------------------------- whose */
.hr-pick { display: grid; gap: 6px; }
.hr-opt {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left;
  font-size: 14px; color: var(--ink);
}
.hr-opt b { font-family: var(--head); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-opt:hover { border-color: var(--blue-line); background: var(--blue-tint); }
.hr-opt[aria-checked="true"] { border-color: #0b4f96; background: var(--blue-tint); box-shadow: inset 0 0 0 1px #0b4f96; }
.hr-opt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hr-opt .tick { width: 18px; height: 18px; flex: none; color: #0b4f96; opacity: 0; }
.hr-opt[aria-checked="true"] .tick { opacity: 1; }
/* The same colour the rep paints with on the map, so the roster, the map and
   this page are one identity. The inset ring keeps the lighter colours off
   white. */
.hr-dot { width: 14px; height: 14px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.22); }
.hr-tag {
  flex: none; font-family: var(--head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
  background: var(--amber-bg); color: var(--note-ink); border: 1px solid rgba(181, 71, 8, 0.28);
}
.hr-tag.stop { background: var(--red-tint); color: var(--warn-ink); border-color: rgba(180, 35, 24, 0.30); }

/* ---------------------------------------------------------- state banner */
.hr-banner {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 12px; padding: 12px 13px; font-size: 14px; line-height: 1.45;
}
.hr-banner svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.hr-banner b { font-family: var(--head); font-weight: 800; display: block; font-size: 14.5px; margin-bottom: 2px; }
.hr-banner .grow { min-width: 0; flex: 1; }
.hr-banner.warn { background: var(--amber-bg); border: 1px solid rgba(181, 71, 8, 0.28); color: var(--note-ink); }
.hr-banner.bad { background: var(--red-tint); border: 1px solid rgba(180, 35, 24, 0.30); color: var(--warn-ink); }
.hr-banner.good { background: var(--ok-tint); border: 1px solid var(--ok-line); color: var(--ok-ink); }
.hr-banner.focus { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.hr-banner .btn { flex: none; }
.hr-banner-go { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ------------------------------------------------------------- the week */
.hr-days { display: grid; gap: 8px; }
.hr-day {
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; background: #fff; min-width: 0;
}
.hr-day.on { border-color: var(--blue-line); background: #fcfeff; }
/* The name over its summary rather than beside it. Side by side, the name
   was a flex child with min-width 0, so its BOX shrank to 19px while the word
   Wednesday kept painting at its full 95px, straight across the summary. Every
   rectangle was tidy and the screen was not. A grid gives each of them a row
   and the collision cannot be drawn. */
.hr-day-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: center; min-width: 0; }
.hr-day-name { font-family: var(--head); font-weight: 800; font-size: 15px; min-width: 0; grid-column: 2; }
.hr-day-sum { font-size: 12.5px; color: #4a5567; min-width: 0; grid-column: 2; }

/* The day switch. app.css's .switch input is 50 by 30, under the 44px this
   page holds itself to, so the control here is a real button at 44px with the
   track drawn inside it. Nothing in app.css changes: the map and the calendar
   are its users too. */
.hr-toggle {
  grid-row: 1 / span 2; width: 62px; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; border-radius: 12px;
}
.hr-toggle i {
  display: block; width: 50px; height: 30px; border-radius: 999px; background: #c4ccd8; position: relative;
  transition: background 140ms;
}
.hr-toggle i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3); transition: transform 140ms;
}
.hr-toggle[aria-checked="true"] i { background: var(--blue-deep); }
.hr-toggle[aria-checked="true"] i::after { transform: translateX(20px); }
.hr-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.hr-wins { display: grid; gap: 8px; margin-top: 10px; }
/* A fixed grid rather than a flex row. At 390px a flex row with a free
   floating word in it left about 54px of usable width per select, which is
   not enough for 10:30 AM, so the word went and the columns are declared. */
.hr-win { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: end; min-width: 0; }
.hr-win.solo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hr-win .field { min-width: 0; }
.hr-win .field + .field { margin-top: 0; }
.hr-rm {
  flex: none; width: 44px; height: 48px; border: 1.5px solid var(--line); border-radius: 11px;
  background: #fff; color: #4a5567; cursor: pointer; display: grid; place-items: center;
}
.hr-rm:hover { background: var(--red-tint); border-color: rgba(180, 35, 24, 0.30); color: var(--warn-ink); }
.hr-rm svg { width: 18px; height: 18px; }
/* #0b4f96 rather than --blue-deep, for margin and not for a failure. Measured
   through the canvas: --blue-deep is 5.40:1 on white and 4.86:1 on
   --blue-tint, which is this button's own hover ground, so both pass AA.
   #0b4f96 is 7.33:1 on that tint. An earlier comment here claimed the hover
   measured 4.31 and failed; that number came from arithmetic done by hand
   rather than from the checker, and it was wrong. */
.hr-add {
  border: 0; background: transparent; color: #0b4f96; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 13px;
  min-height: 44px; padding: 0 10px; border-radius: 10px; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
}
.hr-add:hover { background: var(--blue-tint); }
.hr-add svg { width: 16px; height: 16px; }
.hr-off { font-size: 13px; color: var(--mute); margin-top: 8px; }
.hr-daybad {
  margin-top: 8px; background: var(--red-tint); border: 1px solid rgba(180, 35, 24, 0.30); color: var(--warn-ink);
  border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
}

/* ---------------------------------------------------------- the numbers */
.hr-num-list { display: grid; gap: 12px; }
.hr-num {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; min-width: 0;
}
.hr-num .lab { margin-bottom: 6px; }
.hr-num p { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.hr-num p b { font-family: var(--head); font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------- the preview */
.hr-daytabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hr-daytab {
  min-height: 44px; padding: 0 14px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff;
  font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.hr-daytab:hover { background: var(--blue-tint); border-color: var(--blue-line); }
.hr-daytab[aria-selected="true"] { background: var(--blue-tint); border-color: #0b4f96; color: #0b4f96; box-shadow: inset 0 0 0 1px #0b4f96; }
.hr-daytab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.hr-two { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.hr-big {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg-soft); min-width: 0;
}
.hr-big b { display: block; font-family: var(--head); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.hr-big span { display: block; font-size: 12.5px; color: #4a5567; margin-top: 4px; line-height: 1.4; }
.hr-because { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.hr-because b { font-family: var(--head); font-weight: 700; color: var(--ink); }
.hr-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hr-time {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px;
  background: var(--blue-tint); border: 1px solid var(--blue-line); color: #0b4f96;
  font-family: var(--head); font-weight: 700; font-size: 12.5px;
}
.hr-time.past { background: var(--bg-soft); border-color: var(--line); color: #4a5567; }
.hr-timekey { margin-top: 8px; font-size: 12.5px; color: var(--mute); line-height: 1.5; }

/* --------------------------------------------------------- consequences */
.hr-stop {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--red-tint); border: 1px solid rgba(180, 35, 24, 0.30); color: var(--warn-ink);
  border-radius: 12px; padding: 11px 12px; font-size: 13.5px; line-height: 1.45;
}
.hr-stop.soft { background: var(--amber-bg); border-color: rgba(181, 71, 8, 0.28); color: var(--note-ink); }
.hr-stop + .hr-stop { margin-top: 8px; }
.hr-stop svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.hr-stop b { font-family: var(--head); font-weight: 800; display: block; margin-bottom: 1px; }
.hr-stop .grow { min-width: 0; flex: 1; }

.hr-foot-go { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-foot-go .btn { flex: 1 1 200px; }

/* ------------------------------------------------------------ save bar */
/* Only on screen when something is unsaved, so the resting page is not
   carrying a permanent bar on a phone that already has the portal bar. */
.hr-savebar {
  position: fixed; left: 0; right: 0; bottom: var(--fshell-bottom-h, 0px); z-index: 36;
  background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.12);
  padding-bottom: 0;
}
.hr-savebar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hr-savebar-t {
  font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--ink);
  flex: 1 1 100%; min-width: 0;
}
.hr-savebar .btn { flex: 1 1 150px; }

/* app.css's .btn.ghost is --blue-deep on white at 5.40:1, and its hover paints
   --blue-tint under the same ink at 4.86:1. BOTH PASS AA. This line is a
   margin choice on this page only, not a correction, and app.css needs no
   change on its account. */
body.fc-hours .btn.ghost:hover { color: #0b4f96; }

/* ---------------------------------------------------------------- gate */
.hr-denied-h { font-size: 18px; }
.hr-denied-p { margin-top: 8px; font-size: 14px; }
.hr-denied-go { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hr-denied-go .btn { flex: 1 1 150px; }
/* A plain text button. Used where a link would be wrong because it does not
   navigate, and it still has to be a 44px target. */
.hr-link {
  border: 0; background: transparent; color: #0b4f96; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 13.5px;
  min-height: 44px; padding: 0 10px; border-radius: 10px; margin-top: 8px;
}
.hr-link:hover { background: var(--blue-tint); }
/* app.css sizes the passcode toggle at 34px, under the 44px this page holds
   itself to. Scoped here rather than changed in app.css because app.css is
   the map's, the booker's and the calendar's too, and one page is not the
   place to move a shared primitive out from under three others. */
body.fc-hours .pw-toggle { min-height: 44px; right: 3px; }
/* Below the shell rather than above it, so a rep who lands on the stranger
   screen can still tap another tab. The sign in gate stays above it: that one
   is a wall. */
#stranger { z-index: 30; }
#stranger .gate-in {
  padding-top: calc(var(--safe-t) + var(--fshell-top-h, 0px) + 20px);
  padding-bottom: calc(var(--safe-b) + var(--fshell-bottom-h, 0px) + 24px);
}

/* ---------------------------------------------------------------- sheet */
/* app.css has a .close at 32px square, which is a real primitive with real
   users, so this page brings its own 44px one rather than restyling theirs
   out from under the map. */
.hr-x {
  margin-left: auto; width: 44px; height: 44px; border: 0; background: var(--bg-soft);
  border-radius: 11px; cursor: pointer; color: #4a5567; font-size: 20px; line-height: 1; flex: none;
}
.hr-x:hover { background: var(--line); color: var(--ink); }
.hr-sheet-p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.hr-sheet-go { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hr-sheet-go .btn { flex: 1 1 150px; }
.sheet-body .hr-stop { margin-top: 12px; }

/* ---------------------------------------------------------------- toast */
body.fc-hours #toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  bottom: calc(var(--fshell-bottom-h, 0px) + var(--hr-save-h, 0px) + 14px);
}

/* -------------------------------------------------------------- desktop */
@media (min-width: 760px) {
  .hr-head h1 { font-size: 24px; }
  .hr-grid > .card { padding: 20px; }
  /* 300px, not 250. At 250 the column was about 215px of usable width and a
     name beside a NOT CONFIRMED pill ellipsised down to David and nothing
     else, which is worse than a shorter row. */
  .hr-pick { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  /* A day is one row on a laptop: the name and switch on the left, the hours
     beside them, so a week reads as a week instead of seven stacked cards. */
  .hr-day { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
  .hr-day-top { grid-column: 1; }
  .hr-wins, .hr-off, .hr-daybad, .hr-add { grid-column: 2; }
  .hr-wins { margin-top: 0; }
  .hr-off { margin-top: 4px; }
  .hr-num-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
  .hr-two { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 900px) {
  /* Above 900px the portal bar moves to the top, so nothing is sitting under
     this one holding the safe area for it any more. */
  .hr-savebar { padding-bottom: var(--safe-b); }
  .hr-savebar-t { flex: 1 1 auto; }
  .hr-savebar .btn { flex: 0 0 auto; }
  body.fc-hours #toast { left: auto; right: 24px; transform: none; bottom: calc(var(--hr-save-h, 0px) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .hr *, .hr *::before, .hr *::after, .hr-toggle i, .hr-toggle i::after {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
  }
}

/* --- phone header ---------------------------------------------------------
   Below 600px the logo, the title and the name chip cannot share a row without
   the title losing. Put the logo and the chip together on the top row and give
   the title its own full width row underneath, which also lines its left edge
   up with the cards below it instead of indenting it past the logo. */
@media (max-width: 600px) {
  .hr-head { align-items: center; }
  .hr-head img { order: 1; }
  .hr-who { order: 2; margin-left: auto; }
  .hr-head-t { order: 3; flex: 1 1 100%; }
}
/* The status chip held its full width while the name ellipsised, so a picker
   at 390px read "Hunter Schuc..." beside a chip with room to spare. The name
   is the thing being chosen, so it wraps and keeps its line; the chip shrinks. */
@media (max-width: 600px) {
  .hr-opt { flex-wrap: wrap; }
  /* auto, not 100%: the name keeps the dot's line and wraps only if it has to,
     so a row stays two lines instead of stacking dot, name and chip into three. */
  .hr-opt b { flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip; }
}