/* ==========================================================================
   MODSCALE HR · Base — reset, typography, forms, layout shell
   Depends on tokens.css. Load order: tokens → base → components.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ms-paper);
  color: var(--ms-body);
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-base);
  line-height: var(--ms-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ms-ink);
  font-weight: 400;
  line-height: var(--ms-leading-tight);
  text-wrap: balance;
}
h1 { font-family: var(--ms-font-display); font-size: var(--ms-text-2xl); }
h2 { font-family: var(--ms-font-display); font-size: var(--ms-text-xl); }
h3 { font-family: var(--ms-font-display); font-size: var(--ms-text-lg); }
h4 { font-size: var(--ms-text-md); font-weight: 600; }

p { margin: 0 0 var(--ms-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--ms-brass-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

strong, b { font-weight: 600; color: var(--ms-ink); }
small { font-size: var(--ms-text-sm); }
code, kbd, pre { font-family: var(--ms-font-mono); font-size: .88em; }

.ms-eyebrow {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ms-muted);
}
.ms-muted  { color: var(--ms-muted); }
.ms-faint  { color: var(--ms-faint); }
.ms-num    { font-variant-numeric: tabular-nums; }
.ms-mono   { font-family: var(--ms-font-mono); }
.ms-right  { text-align: right; }
.ms-center { text-align: center; }
.ms-nowrap { white-space: nowrap; }
.ms-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Screen-reader only, but still focusable for skip links. */
.ms-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ms-skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: var(--ms-z-toast);
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 18px; background: var(--ms-brass); color: var(--ms-brass-ink);
  border-radius: var(--ms-radius-sm);
}

/* ---- Focus ------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ms-brass);
  outline-offset: 2px;
  border-radius: 2px;
}
.ms-shell :focus-visible { outline-color: var(--ms-brass-lit); }

/* ==========================================================================
   APP SHELL — sidebar + topbar + content
   ========================================================================== */

.ms-app {
  display: grid;
  grid-template-columns: var(--ms-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Sidebar ----------------------------------------------------------- */
.ms-shell {
  grid-row: 1 / -1;
  background: var(--ms-shell);
  color: var(--ms-shell-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--ms-z-sidebar);
  box-shadow: var(--ms-shadow-shell);
}

.ms-brand {
  display: flex;
  align-items: center;
  gap: var(--ms-3);
  padding: var(--ms-5) var(--ms-5) var(--ms-4);
  border-bottom: 1px solid var(--ms-shell-line);
  text-decoration: none;
  color: inherit;
  flex: none;
}
.ms-brand:hover { text-decoration: none; }
.ms-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.ms-brand__logo {
  width: 150px; height: auto; display: block;
  /* The wordmark ships in the logo's own sand, which is exactly right on
     the dark shell — no filter, no recolouring. */
}
.ms-brand__sub {
  display: block;
  font-family: var(--ms-font-body);
  font-size: 9.5px;
  letter-spacing: .34em;
  color: var(--ms-brass-lit);
  padding-left: 2px;
}
.ms-brand__mark { width: 32px; height: 32px; flex: none; }

.ms-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ms-4) var(--ms-3) var(--ms-6);
  scrollbar-width: thin;
  scrollbar-color: var(--ms-shell-line) transparent;
}
.ms-nav::-webkit-scrollbar { width: 6px; }
.ms-nav::-webkit-scrollbar-thumb { background: var(--ms-shell-line); border-radius: 3px; }

.ms-nav__group { margin-bottom: var(--ms-5); }
.ms-nav__label {
  font-family: var(--ms-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ms-shell-muted);
  padding: 0 var(--ms-3) var(--ms-2);
}

.ms-nav__link {
  display: flex;
  align-items: center;
  gap: var(--ms-3);
  padding: 9px var(--ms-3);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-shell-text);
  font-size: var(--ms-text-base);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--ms-fast), color var(--ms-fast), border-color var(--ms-fast);
}
.ms-nav__link:hover {
  background: var(--ms-shell-deep);
  text-decoration: none;
}
.ms-nav__link.is-active {
  background: var(--ms-shell-deep);
  border-left-color: var(--ms-brass);
  color: #fff;
}
.ms-nav__link.is-active .ms-nav__icon { color: var(--ms-brass-lit); }
.ms-nav__icon { width: 17px; height: 17px; flex: none; color: var(--ms-shell-muted); }
.ms-nav__count {
  margin-left: auto;
  font-family: var(--ms-font-mono);
  font-size: 10.5px;
  background: var(--ms-brass);
  color: var(--ms-brass-ink);
  padding: 1px 6px;
  border-radius: var(--ms-radius-pill);
  font-weight: 500;
}

.ms-shell__foot {
  flex: none;
  padding: var(--ms-3) var(--ms-5) var(--ms-5);
  border-top: 1px solid var(--ms-shell-line);
  font-size: var(--ms-text-xs);
  color: var(--ms-shell-muted);
}

/* ---- Topbar ------------------------------------------------------------ */
.ms-topbar {
  position: sticky;
  top: 0;
  z-index: var(--ms-z-topbar);
  height: var(--ms-topbar);
  display: flex;
  align-items: center;
  gap: var(--ms-4);
  padding: 0 var(--ms-6);
  background: var(--ms-card);
  border-bottom: 1px solid var(--ms-line);
}
.ms-topbar__title { font-family: var(--ms-font-display); font-size: var(--ms-text-lg); }
.ms-topbar__crumb { font-size: var(--ms-text-xs); color: var(--ms-muted); margin-top: 1px; }
.ms-topbar__spacer { margin-left: auto; }

.ms-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-sm); color: var(--ms-body);
}

/* ---- Content ----------------------------------------------------------- */
.ms-main { min-width: 0; display: flex; flex-direction: column; }
.ms-content {
  padding: var(--ms-6);
  max-width: var(--ms-content-max);
  width: 100%;
  flex: 1 0 auto;
}
.ms-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ms-4);
  margin-bottom: var(--ms-6);
}
.ms-page-head h1 { font-size: var(--ms-text-xl); }
.ms-page-head__actions { margin-left: auto; display: flex; gap: var(--ms-2); flex-wrap: wrap; }

.ms-footer {
  padding: var(--ms-5) var(--ms-6);
  border-top: 1px solid var(--ms-line);
  color: var(--ms-muted);
  font-size: var(--ms-text-xs);
  display: flex;
  gap: var(--ms-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.ms-field { margin-bottom: var(--ms-4); }
.ms-field:last-child { margin-bottom: 0; }

.ms-label {
  display: block;
  font-size: var(--ms-text-sm);
  font-weight: 500;
  color: var(--ms-ink);
  margin-bottom: 5px;
}
.ms-label .req { color: var(--ms-stop); margin-left: 2px; }
.ms-hint { font-size: var(--ms-text-xs); color: var(--ms-muted); margin-top: 5px; }
.ms-error {
  font-size: var(--ms-text-xs);
  color: var(--ms-stop);
  margin-top: 5px;
  display: flex; gap: 5px; align-items: flex-start;
}

.ms-input, .ms-select, .ms-textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--ms-card);
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-ink);
  font-size: var(--ms-text-base);
  transition: border-color var(--ms-fast), box-shadow var(--ms-fast);
  -webkit-appearance: none;
  appearance: none;
}
.ms-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.ms-input:hover, .ms-select:hover, .ms-textarea:hover { border-color: var(--ms-faint); }
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
  outline: none;
  border-color: var(--ms-brass);
  box-shadow: 0 0 0 3px rgba(240, 185, 82, .22);
}
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-faint); }

.ms-input:disabled, .ms-select:disabled, .ms-textarea:disabled,
.ms-input[readonly] {
  background: var(--ms-sunken);
  color: var(--ms-muted);
  cursor: not-allowed;
}

.ms-input.is-invalid, .ms-select.is-invalid, .ms-textarea.is-invalid {
  border-color: var(--ms-stop);
  background: var(--ms-stop-bg);
}
.ms-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(140, 58, 46, .14); }

.ms-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237C6F5F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* Password field with a reveal button. */
.ms-input-group { position: relative; display: flex; }
.ms-input-group .ms-input { padding-right: 42px; }
.ms-input-group__btn {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  width: 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ms-muted);
  border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
}
.ms-input-group__btn:hover { color: var(--ms-ink); }

/* Checkbox / radio */
.ms-check {
  display: flex; align-items: flex-start; gap: var(--ms-2);
  font-size: var(--ms-text-base); cursor: pointer; line-height: 1.45;
}
.ms-check input {
  width: 16px; height: 16px; margin: 2px 0 0; flex: none;
  accent-color: var(--ms-brass-deep); cursor: pointer;
}
.ms-check--card {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: var(--ms-3) var(--ms-4);
  background: var(--ms-card);
}
.ms-check--card:hover { border-color: var(--ms-brass-line); background: var(--ms-brass-wash); }

/* Several checkboxes read as one set: a list of approved work locations, say.
   auto-fill rather than a fixed count, so four sites do not stretch into four
   columns of mostly whitespace and twenty do not spill off a phone. */
.ms-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ms-2) var(--ms-4);
  margin-top: var(--ms-2);
}

/* Grid for form layouts */
.ms-grid { display: grid; gap: var(--ms-4); }
.ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ms-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ms-span-2 { grid-column: span 2; }
.ms-span-full { grid-column: 1 / -1; }

/* ==========================================================================
   RESPONSIVE — sidebar becomes an off-canvas drawer
   ========================================================================== */

@media (max-width: 1024px) {
  .ms-content { padding: var(--ms-5); }
  .ms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ms-app { grid-template-columns: minmax(0, 1fr); }

  .ms-shell {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform var(--ms-normal);
  }
  .ms-shell.is-open { transform: none; }

  .ms-burger { display: inline-flex; }

  .ms-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 17, 16, .5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--ms-normal);
    z-index: calc(var(--ms-z-sidebar) - 1);
  }
  .ms-scrim.is-open { opacity: 1; pointer-events: auto; }

  .ms-grid--2, .ms-grid--3, .ms-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ms-span-2 { grid-column: span 1; }
}

/* ---- Phones -------------------------------------------------------------
   The top bar is where this fell apart. On a desktop it carries a burger, a
   title, a crumb, a live clock, a date, a punch button and a named user menu.
   All seven still fit at 1200px. At 390px they collide: the title wraps into
   the clock and the punch button — the one control that matters — gets pushed
   to a second line or off the edge entirely.

   So on a phone the bar keeps only what a phone cannot already tell you: the
   menu, where you are, whether you are checked in, and who you are. The clock
   and the date go, because the phone has both in its own status bar two
   centimetres above. */
@media (max-width: 560px) {
  .ms-content { padding: var(--ms-4); }
  .ms-topbar {
    padding: 0 var(--ms-3);
    gap: var(--ms-2);
    /* The bar is sticky; on a phone with a notch that means the safe area. */
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--ms-topbar) + env(safe-area-inset-top, 0px));
  }
  .ms-topbar__title {
    font-size: var(--ms-text-md);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 44vw;
  }
  .ms-topbar__crumb { display: none; }

  /* The clock and date block in the punch widget. */
  .ms-punch-clock { display: none; }

  /* The user menu keeps its avatar and drops the name — the name is the first
     line inside the menu anyway, so nothing is lost by opening it. */
  .ms-topbar .ms-dropdown > .ms-btn { padding: 6px; gap: 0; }
  .ms-topbar .ms-dropdown > .ms-btn .ms-truncate,
  .ms-topbar .ms-dropdown > .ms-btn svg { display: none; }

  .ms-page-head__actions { margin-left: 0; width: 100%; }
  .ms-page-head__actions .ms-btn { flex: 1 1 auto; justify-content: center; }
  .ms-page-head h1 { font-size: var(--ms-text-xl); }

  /* Nothing tappable smaller than a fingertip. */
  .ms-btn { min-height: 42px; }
  .ms-btn--sm { min-height: 38px; }

  /* Stat cards go two-up on a phone — the grid override itself lives in
     components.css, next to the auto-fit rule it has to beat. */
  .ms-stat { padding: var(--ms-4) var(--ms-4) var(--ms-4); }
  .ms-stat__value { font-size: var(--ms-text-2xl); }
  .ms-stat__label { font-size: 9.5px; }
  .ms-stat__meta { font-size: var(--ms-text-xs); }

  /* The punch button is the one control on this bar somebody actually presses,
     and it presses it in a hurry. */
  #ms-punch { min-height: 42px; padding-inline: var(--ms-4); }

  /* Filter toolbars stack instead of squeezing into unusable slivers. */
  .ms-toolbar { flex-direction: column; align-items: stretch; }
  .ms-toolbar__end { width: 100%; }
  .ms-toolbar__end .ms-btn { flex: 1 1 auto; justify-content: center; }

  /* Two-up definition lists become one-up; side-by-side reads as broken. */
  .ms-dl { grid-template-columns: minmax(0, 1fr); }
}

/* Very narrow — a small phone, or a phone with display zoom turned up. */
@media (max-width: 380px) {
  .ms-topbar__title { max-width: 34vw; }
  .ms-content { padding: var(--ms-3); }
}

/* ---- Print: hide the chrome entirely ----------------------------------- */
@media print {
  .ms-shell, .ms-topbar, .ms-footer, .ms-scrim,
  .ms-no-print, .ms-page-head__actions { display: none !important; }
  .ms-app { display: block; }
  .ms-content { padding: 0; max-width: none; }
  body { background: #fff; }
}