/* app.css -- the V1026 look (Billy-approved 260929: "subtle gradient" finish,
   "soft fade" background). One kit for every page, loaded AFTER
   /bmsr-frame/bmsr-tokens.css and built on its --bmsr-* variables.
   bmsr-frame/* is vendored from bmsr-clock-tools and is never edited here;
   this sheet only restyles around <bmsr-header> (see .app-top).

   Pieces (use the class names; no page should re-declare these):
     body.app            soft-fade page background, Manrope, type scale
     .app-top            navy band: <bmsr-header> + .app-hero continue as one surface
     .app-hero           page hero: .app-back ("< Home"), .app-kicker, .app-title
     .app-main           content column, pulled up over the hero's bottom edge
     .card               white card; .card-hero = the clock-card finish
     .btn                ONE button system: .primary .go .stop .soft .quiet .danger
                         (+ .big, .sm, .inline); >=48px tall except .sm
     .field              label + input/select/textarea + .hint / .err
     .notice             .notice-info / .notice-error / .notice-ok
     .pill               status pill: .pill-in .pill-late .pill-done .pill-muted
     .tiles / .tile      home tiles, .tile-ic tints (.ic-o .ic-g)
     .grp-h              small caps group heading ("My stuff", "Manage")
     .cards-table        table that becomes one card per row under 700px
     .two-col            desktop two-column helper (>=900px)
*/

/* Manrope, self-hosted (SIL OFL 1.1, fonts/OFL.txt): one static file per weight
   (a single variable file rendered at its thinnest instance in WebKit). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/manrope-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/manrope-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/manrope-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/manrope-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/manrope-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Additions the frame tokens do not carry (colours the approved mocks use). */
  --app-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-green-700: #15803D;
  --app-green-600: #16A34A;
  --app-green-100: #DCFCE7;
  --app-red-700: #B42318;
  --app-red-200: #F2C4BF;
  --app-red-50: #FDECEA;
  --app-line: #E3EAF2;
  --app-radius-btn: 14px;
  --app-radius-field: 12px;
  --app-radius-card: var(--bmsr-radius-card-brand); /* 20px */
  --app-radius-tile: 16px;
  --app-shadow-card: 0 6px 18px rgba(13, 31, 56, .10);
  --app-shadow-hero: 0 10px 26px rgba(13, 31, 56, .12);
  --app-focus: 0 0 0 3px var(--bmsr-navy-100);
  /* Type scale */
  --app-fs-xs: 12px;
  --app-fs-sm: 14px;
  --app-fs-md: 16px;
  --app-fs-lg: 18px;
  --app-fs-xl: 24px;
  --app-fs-2xl: 30px;
}

/* ------------------------------------------------------------ page */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app {
  margin: 0;
  min-height: 100vh;
  font: 500 var(--app-fs-md)/1.5 var(--app-font);
  color: var(--bmsr-navy-900);
  background:
    radial-gradient(140% 55% at 50% 0%, #DDE9F5 0%, rgba(221, 233, 245, 0) 70%),
    linear-gradient(180deg, #EEF3FA 0%, #F8FAFD 55%, #FFFFFF 100%);
  background-color: #FFFFFF;
  overflow-x: hidden;
}
/* Every control uses the app font (browsers default buttons/inputs to their own). */
body.app button, body.app input, body.app select, body.app textarea { font-family: inherit; }
body.app h1, body.app h2, body.app h3 { margin: 0; letter-spacing: -.01em; text-wrap: balance; color: var(--bmsr-navy-900); }
body.app h1 { font-size: var(--app-fs-xl); font-weight: 800; line-height: 1.2; }
body.app h2 { font-size: var(--app-fs-lg); font-weight: 800; line-height: 1.3; }
body.app h3 { font-size: var(--app-fs-md); font-weight: 700; }
body.app p { margin: 0; }
/* Content links only: the header's brand link keeps the frame's own colours. */
.app-main a { color: var(--bmsr-navy-600); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ navy band (header + hero) */
/* The header keeps its logo, wordmark and menu; only its bar colour goes
   transparent so the band behind it (header + hero) reads as one surface. */
.app-top {
  color: #FFFFFF;
  background:
    radial-gradient(120% 90% at 100% 0%, #2D6291 0%, rgba(45, 98, 145, 0) 60%),
    linear-gradient(160deg, #1B3A6B 0%, #122A4A 100%);
}
.app-top .bmsr-header { background: transparent; box-shadow: none; }
.app-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 4px 18px 40px;
  display: grid;
  gap: 4px;
}
.app-hero:empty, .app-hero.app-hero-slim { padding-bottom: 28px; }
.app-kicker { font-size: 13px; font-weight: 600; color: var(--bmsr-navy-200); }
.app-title, body.app .app-title { font-size: var(--app-fs-xl); font-weight: 800; line-height: 1.15; color: #FFFFFF; }
/* The one "< Home" back control, same place on every page. */
.app-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px 0 6px; margin: 0 0 6px -6px;
  border-radius: 10px;
  font-size: var(--app-fs-sm); font-weight: 700;
  color: #FFFFFF !important; text-decoration: none;
}
.app-back::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.app-back:hover { background: rgba(255, 255, 255, .10); }
.app-back:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ------------------------------------------------------------ content column */
.app-main {
  max-width: 1240px;
  margin: -24px auto 0;
  padding: 0 14px 40px;
  display: grid;
  gap: 14px;
  position: relative;
}
.app-narrow { max-width: 460px; }

/* ------------------------------------------------------------ cards */
.card {
  background: var(--bmsr-card);
  border: 1px solid var(--app-line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(13, 31, 56, .07);
  padding: 20px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.card-hero {
  border: 0;
  border-radius: var(--app-radius-card);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 100%);
  box-shadow: var(--app-shadow-card);
}

/* ------------------------------------------------------------ buttons */
.btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: 0; padding: 10px 18px;
  border: 0; border-radius: var(--app-radius-btn);
  font: 700 15px/1.2 var(--app-font);
  text-align: center; text-decoration: none;
  cursor: pointer;
  background: var(--bmsr-navy-50); color: var(--bmsr-navy-800);
}
.btn:focus-visible { outline: 3px solid var(--bmsr-orange-400); outline-offset: 2px; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn.primary {
  background: linear-gradient(180deg, #24507E 0%, #1B3A6B 100%); color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(27, 58, 107, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn.go {
  background: linear-gradient(180deg, #1C9A4B 0%, #15803D 100%); color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(21, 128, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* White on the approved orange measures about 3:1, which passes only as WCAG
   large text (>=18.66px bold): the stop label is 19px/700 at every size. */
.btn.stop {
  background: linear-gradient(180deg, #F08450 0%, #E0672F 100%); color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(232, 114, 58, .30), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: 19px;
}
.btn.soft { background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); }
.btn.soft:hover { background: var(--bmsr-navy-100); }
.btn.quiet { background: none; color: var(--bmsr-navy-600); font-size: var(--app-fs-sm); box-shadow: none; }
.btn.quiet:hover { text-decoration: underline; }
/* Destructive (Deny, Remove): outlined red, never the same look as Approve. */
.btn.danger { background: #FFFFFF; color: var(--app-red-700); border: 1.5px solid var(--app-red-200); }
.btn.danger:hover { background: var(--app-red-50); }
.btn.big { min-height: 56px; font-size: 17px; }
.btn.stop.big { font-size: 19px; }
.btn.sm { width: auto; min-height: 38px; padding: 0 14px; font-size: var(--app-fs-sm); border-radius: 10px; }
.btn.inline { width: auto; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------ fields */
.field { display: grid; gap: 6px; }
.field > label, label.field-label { font-size: 13px; font-weight: 700; color: var(--bmsr-navy-800); }
body.app input[type=text], body.app input[type=password], body.app input[type=email], body.app input[type=tel],
body.app input[type=number], body.app input[type=date], body.app input[type=time], body.app input:not([type]),
body.app select, body.app textarea {
  width: 100%; min-height: 48px;
  font: 600 16px/1.3 var(--app-font); /* 16px: iOS does not zoom the page on focus */
  color: var(--bmsr-navy-900);
  background: #FFFFFF;
  border: 1.5px solid var(--bmsr-navy-200);
  border-radius: var(--app-radius-field);
  padding: 12px 14px;
}
body.app textarea { min-height: 88px; resize: vertical; }
/* Selects: no native bevel (Safari draws a grey one over the white field); a navy chevron instead. */
body.app select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
body.app select:disabled { opacity: .6; }
body.app input:focus, body.app select:focus, body.app textarea:focus { outline: none; border-color: var(--bmsr-navy-600); box-shadow: var(--app-focus); }
body.app input::placeholder, body.app textarea::placeholder { color: var(--bmsr-navy-400); font-weight: 500; }
body.app input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--bmsr-navy-700); margin: 0; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: var(--app-fs-sm); font-weight: 600; color: var(--bmsr-navy-800); }
.hint { font-size: 13px; color: var(--bmsr-navy-500); }
.err { font-size: 13px; font-weight: 700; color: var(--app-red-700); }
.opt { font-weight: 500; color: var(--bmsr-navy-500); }

/* ------------------------------------------------------------ notices */
.notice { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); }
.notice-error { background: #FDE3D2; color: var(--bmsr-navy-900); border-left: 4px solid #E8723A; }
.notice-ok { background: var(--app-green-100); color: var(--app-green-700); }

/* ------------------------------------------------------------ pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--bmsr-radius-pill);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  background: var(--bmsr-navy-50); color: var(--bmsr-navy-700);
}
.pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-in { background: var(--app-green-100); color: var(--app-green-700); }
.pill-late { background: var(--bmsr-orange-100); color: #B4501F; }
.pill-done { background: var(--bmsr-navy-100); color: var(--bmsr-navy-800); }
.pill-bad { background: var(--app-red-50); color: var(--app-red-700); }

/* ------------------------------------------------------------ tiles */
.grp-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bmsr-navy-500); padding: 4px 4px 0; margin: 0; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles > li { display: grid; min-width: 0; }
/* A tile is one <a>: its label is the link's own text; the icon and the
   short hint are child elements placed around it with `order`. */
.tile {
  position: relative;
  display: grid; align-content: start; gap: 8px;
  min-height: 104px; padding: 14px;
  background: var(--bmsr-card);
  border: 1px solid var(--app-line); border-radius: var(--app-radius-tile);
  box-shadow: 0 2px 6px rgba(13, 31, 56, .04);
  font-size: var(--app-fs-sm); font-weight: 700; line-height: 1.3;
  color: var(--bmsr-navy-900) !important; text-decoration: none;
  overflow-wrap: anywhere;
}
.tile:hover { border-color: var(--bmsr-navy-200); box-shadow: 0 4px 12px rgba(13, 31, 56, .08); }
.tile:focus-visible { outline: 3px solid var(--bmsr-navy-600); outline-offset: 2px; }
.tile-ic {
  order: -1;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--bmsr-navy-700);
  background: linear-gradient(145deg, #F4F8FD 0%, #DAE8F2 100%);
}
.tile-ic svg { width: 20px; height: 20px; }
.tile-ic-emoji { font-size: 22px; line-height: 1; }
.tile-ic.ic-o { color: var(--bmsr-orange-600); background: linear-gradient(145deg, #FFF8F3 0%, #FDE3D2 100%); }
.tile-ic.ic-g { color: var(--app-green-700); background: linear-gradient(145deg, #F0FDF4 0%, #CFF5DC 100%); }
.tile-sub { order: 1; display: block; margin-top: -4px; font-size: 12px; font-weight: 600; color: var(--bmsr-navy-500); }
.tile-badge { position: absolute; top: 12px; right: 12px; border-radius: 999px; padding: 3px 7px; background: var(--bmsr-navy-900); color: #fff; font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------------ table -> cards on a phone */
.cards-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--app-fs-sm); }
.cards-table th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bmsr-navy-500); padding: 10px 12px; border-bottom: 1px solid var(--app-line); }
.cards-table td { padding: 12px; border-bottom: 1px solid var(--app-line); vertical-align: top; }
@media (max-width: 699px) {
  .cards-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cards-table, .cards-table tbody, .cards-table tr, .cards-table td { display: block; width: 100%; }
  .cards-table tr { background: var(--bmsr-card); border: 1px solid var(--app-line); border-radius: var(--app-radius-tile); padding: 6px 14px; margin-bottom: 10px; }
  .cards-table td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  /* <td data-label="Status"> prints its column name on the left. */
  .cards-table td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 800; color: var(--bmsr-navy-500); text-align: left; }
}

/* ------------------------------------------------------------ desktop */
/* No clock card (e.g. GPC support): nothing overlaps the navy band, so the first group heading clears it.
   Declared before the laptop block so its 56px wins there at any width, with no gap between breakpoints. */
.home-layout:has(> #clock-home[hidden]), .home-layout:has(> #clock-home > #clock-card[hidden]) { padding-top: 40px; }

@media (min-width: 900px) {
  body.app {
    background:
      radial-gradient(90% 40% at 50% 0%, #DDE9F5 0%, rgba(221, 233, 245, 0) 70%),
      linear-gradient(180deg, #EEF3FA 0%, #F8FAFD 45%, #FFFFFF 100%);
    background-color: #FFFFFF;
  }
  .app-top .bmsr-header { padding-left: max(16px, calc((100% - 1240px) / 2)); padding-right: max(16px, calc((100% - 1240px) / 2)); }
  .app-hero { padding: 14px 40px 64px; }
  .app-hero.app-hero-slim { padding-bottom: 48px; }
  .app-title, body.app .app-title { font-size: var(--app-fs-2xl); }
  .app-main { margin-top: -40px; padding: 0 40px 40px; gap: 20px; }
  .home-layout:has(> #clock-home[hidden]), .home-layout:has(> #clock-home > #clock-card[hidden]) { padding-top: 56px; }
  .app-narrow { max-width: 460px; }
  .two-col { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
  .card { padding: 22px; }
}

/* ============================================================ sign-in + home (index.html) */
/* Sign-in, setup, forgot/reset and code screens: one narrow card over the band. */
.auth-card { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-card > p { color: var(--bmsr-navy-700); font-size: 15px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.auth-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--app-fs-sm); font-weight: 700; color: var(--bmsr-navy-600); }
#msg:empty { display: none; }
#msg { max-width: 440px; width: 100%; margin: 0 auto; }

/* Home: the clock card is the hero; tiles below it (phone) or beside it (laptop). */
.home-layout { display: grid; gap: 14px; }
.home-groups { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .home-layout:has(> #home:not([hidden])) { grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
  .home-layout > #late-notice { grid-column: 1 / -1; max-width: 460px; }
  .home-groups { background: var(--bmsr-card); border: 1px solid var(--app-line); border-radius: 18px; box-shadow: 0 6px 18px rgba(13, 31, 56, .07); padding: 22px; gap: 10px; }
  .home-groups .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .home-groups .grp-h + .tiles { margin-bottom: 8px; }
  .tile { padding: 16px; }
}
/* A tap-link visit (no session) shows the card alone: keep it phone-width. */
.home-layout > #clock-home { display: grid; gap: 14px; width: 100%; max-width: 460px; margin: 0 auto; }
.home-layout:has(> #home:not([hidden])) > #clock-home { max-width: none; }

/* ---------------- the clock card (ids and ck-* hooks are clock.js's; look only) */
.ck-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 100%);
  border-radius: var(--app-radius-card);
  box-shadow: var(--app-shadow-card);
  padding: 18px;
  display: grid; gap: 12px;
}
@media (min-width: 900px) { .ck-card { padding: 24px; box-shadow: var(--app-shadow-hero); } }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ck-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--bmsr-radius-pill);
  font-size: 13px; font-weight: 700; line-height: 1.3;
  background: var(--bmsr-navy-50); color: var(--bmsr-navy-700);
}
.ck-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ck-badge.ck-in { background: var(--app-green-100); color: var(--app-green-700); }
.ck-badge.ck-break { background: var(--bmsr-orange-100); color: #B4501F; }
.ck-badge.ck-done { background: var(--bmsr-navy-100); color: var(--bmsr-navy-800); }
.ck-ack { font-size: 12px; font-weight: 700; color: var(--bmsr-navy-500); background: var(--bmsr-navy-50); padding: 4px 10px; border-radius: var(--bmsr-radius-pill); }
.ck-name { font-size: var(--app-fs-xl); font-weight: 800; line-height: 1.15; color: var(--bmsr-navy-900); }
.ck-name:empty { display: none; }
/* Signed in, the page hero already greets the person: one greeting, not two. */
.is-home .ck-name { display: none; }
.ck-shift { font-size: 15px; font-weight: 700; color: var(--bmsr-navy-600); }
.ck-shift:empty { display: none; }
.ck-banner { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.ck-banner.ck-error { background: var(--app-red-50); color: var(--app-red-700); }
.ck-banner.ck-info, .ck-info { background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; }
#clock-card [data-clock] { display: grid; gap: 10px; }
#clock-card label { font-size: 13px; font-weight: 700; color: var(--bmsr-navy-800); }
/* Buttons: the kit's .btn look, applied to clock.js's existing classes. */
#clock-card button, #late-notice button {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: 0; padding: 10px 16px;
  border: 0; border-radius: var(--app-radius-btn);
  font: 700 15px/1.2 var(--app-font);
  cursor: pointer; color: var(--bmsr-navy-800); background: var(--bmsr-navy-50);
}
#clock-card button:focus-visible, #late-notice button:focus-visible, #clock-card .ck-ghost:focus-visible { outline: 3px solid var(--bmsr-orange-400); outline-offset: 2px; }
#clock-card button[disabled], #late-notice button[disabled] { opacity: .6; cursor: default; }
#clock-card button.ck-big, #late-notice #ln-send, .home-chat {
  min-height: 56px; font-size: 17px; color: #FFFFFF;
  background: linear-gradient(180deg, #24507E 0%, #1B3A6B 100%);
  box-shadow: 0 6px 14px rgba(27, 58, 107, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}
#clock-card button.ck-go {
  background: linear-gradient(180deg, #1C9A4B 0%, #15803D 100%);
  box-shadow: 0 6px 14px rgba(21, 128, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
#clock-card button.ck-go::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
#clock-card button.ck-stop {
  font-size: 19px; /* large text: white on orange is about 3:1 */
  background: linear-gradient(180deg, #F08450 0%, #E0672F 100%);
  box-shadow: 0 6px 14px rgba(232, 114, 58, .30), inset 0 1px 0 rgba(255, 255, 255, .2);
}
#clock-card button.ck-second { background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); }
#clock-card button.ck-second:hover, #clock-card button.ck-rem:hover { background: var(--bmsr-navy-100); }
#clock-card .ck-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: none; box-shadow: none;
  font-size: var(--app-fs-sm); font-weight: 700; color: var(--bmsr-navy-600); text-decoration: none;
}
#clock-card button.ck-ghost { background: none; color: var(--bmsr-navy-600); font-size: var(--app-fs-sm); }
#clock-card .ck-ghost:hover { text-decoration: underline; }
/* Clocked in: Clock Out is the one big orange action; break and staying late
   sit side by side beneath it as equals. */
#clock-card [data-clock="in"] { grid-template-columns: 1fr 1fr; }
#clock-card [data-clock="in"] > #ck-out { grid-column: 1 / -1; }
#clock-card [data-clock="in"] > #ck-stay { background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); font-size: 15px; min-height: 48px; text-decoration: none; }
#clock-card textarea, #late-notice textarea { min-height: 88px; }
.ck-opt { font-weight: 500; color: var(--bmsr-navy-500); }
.ck-q { font-size: 15px; font-weight: 700; color: var(--bmsr-navy-900); }
.ck-rems { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#clock-card button.ck-rem { border: 2px solid transparent; }
#clock-card button.ck-rem.ck-sel { border-color: var(--bmsr-navy-700); background: #FFFFFF; color: var(--bmsr-navy-900); }
.ck-center { text-align: center; font-size: var(--app-fs-lg); font-weight: 800; color: var(--bmsr-navy-900); }
.ck-hours { text-align: center; font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bmsr-navy-900); }
.ck-hours:empty { display: none; }
#clock-card [data-clock="done"] .ck-shift, #clock-card [data-clock="inter"] .ck-shift { text-align: center; }
@media (min-width: 900px) {
  #clock-card button.ck-big, .home-chat { min-height: 60px; font-size: 18px; }
  #clock-card button.ck-stop { font-size: 19px; }
}
#late-notice { display: grid; gap: 12px; }
#late-notice form { display: grid; gap: 10px; }
#late-notice label { font-size: 13px; font-weight: 700; color: var(--bmsr-navy-800); }
#ln-msg:empty { display: none; }
#ln-msg { font-weight: 600; color: var(--bmsr-navy-800); }
#channel-msg { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .tile, #clock-card button { transition: background-color .15s, box-shadow .15s, border-color .15s; }
}

/* PR 1 -- Directory: compact Everyone view; Who's in and Punch review keep their table. */
@media (min-width: 900px) {
  .directory-page .directory-everyone { display: block; }
  .directory-page .directory-everyone thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .directory-page .directory-everyone tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
  .directory-page .directory-everyone tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--app-line); }
  .directory-page .directory-everyone td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .directory-page .directory-everyone td:nth-child(2) { color: var(--bmsr-navy-500); font-size: var(--app-fs-xs); }
  .directory-page .directory-everyone .pill { margin: 0; white-space: nowrap; }
  .directory-page .directory-everyone tr:has(.empty) { grid-column: 1 / -1; grid-template-columns: 1fr; }
}

/* PR 3 -- Purchasing request and approvers-only queue split. */
.purchasing-page .purchase-form { width: 100%; max-width: 620px; cursor: default; }
.purchasing-queue-page #workspace { cursor: default; }
.purchasing-queue-page .section-bar { padding-bottom: 12px; border-bottom: 1px solid var(--app-line); }
.purchasing-queue-page #requests-heading { color: var(--bmsr-navy-900); }
.purchasing-queue-page #refresh { background: var(--bmsr-navy-50); color: var(--bmsr-navy-800); border: 1px solid var(--bmsr-navy-200); }
.purchasing-queue-page .purchase-columns { display: none; }
.purchasing-queue-page #requests { grid-template-columns: minmax(0, 1fr); }
.purchasing-queue-page .purchase-card { cursor: default; }
.purchasing-queue-page .purchase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; min-width: 0; }
.purchasing-queue-page .purchase-row > * { min-width: 0; overflow-wrap: anywhere; }
.purchasing-queue-page .purchase-row > [data-label]::before {
  content: attr(data-label); display: block; margin-bottom: 3px;
  font-size: 12px; font-weight: 800; color: var(--bmsr-navy-500);
}
.purchasing-queue-page .purchase-item { grid-column: 1 / -1; grid-row: 1; }
.purchasing-queue-page .purchase-row > .purchase-item::before { display: none; }
.purchasing-queue-page .purchase-item-toggle {
  display: block; width: 100%; min-height: 44px; padding: 0; border: 0;
  background: none; color: var(--bmsr-navy-700); font: inherit; font-weight: 800;
  text-align: left; text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere; cursor: pointer;
}
.purchasing-queue-page .purchase-item-toggle:focus-visible { outline: 2px solid var(--bmsr-navy-500); outline-offset: 2px; border-radius: 4px; }
.purchasing-queue-page .purchase-row .request-actions { grid-column: 1 / -1; margin: 4px 0 0; }
.purchasing-queue-page .purchase-row .request-actions::before { display: none; }
.purchasing-queue-page .purchase-detail { padding-top: 14px; border-top: 1px solid var(--app-line); }
.purchasing-queue-page .request-details { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.purchasing-queue-page .request-details dd { margin: 0 0 8px; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (min-width: 900px) {
  .purchasing-queue-page { --purchase-columns: 82px minmax(70px, 1fr) minmax(100px, 1.6fr) minmax(90px, 1.1fr) 80px 122px 214px; }
  .purchasing-queue-page .app-main { padding: 0 20px 40px; }
  .purchasing-queue-page #workspace { padding: 16px 12px; }
  .purchasing-queue-page .purchase-columns,
  .purchasing-queue-page .purchase-row { display: grid; grid-template-columns: var(--purchase-columns); gap: 8px; align-items: center; }
  .purchasing-queue-page .purchase-columns { padding: 0 8px; font-size: 11px; font-weight: 800; color: var(--bmsr-navy-500); }
  .purchasing-queue-page #requests { gap: 0; }
  .purchasing-queue-page .purchase-card { padding: 8px; border: 0; border-top: 1px solid var(--app-line); border-radius: 0; box-shadow: none; }
  .purchasing-queue-page .purchase-card:hover { background: var(--bmsr-navy-50); }
  .purchasing-queue-page .purchase-row { font-size: 13px; }
  .purchasing-queue-page .purchase-row > [data-label]::before { display: none; }
  .purchasing-queue-page .purchase-item { grid-column: auto; grid-row: auto; font-size: 13px; text-wrap: nowrap; }
  .purchasing-queue-page .purchase-item-toggle { min-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .purchasing-queue-page .purchase-date { white-space: nowrap; }
  .purchasing-queue-page .purchase-requester,
  .purchasing-queue-page .purchase-vendor,
  .purchasing-queue-page .purchase-quantity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .purchasing-queue-page .purchase-status .pill { white-space: nowrap; font-size: 11px; padding: 5px 8px; }
  .purchasing-queue-page .purchase-row .request-actions { grid-column: auto; flex-wrap: nowrap; gap: 6px; margin: 0; }
  .purchasing-queue-page .purchase-row .btn { min-height: 36px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
  .purchasing-queue-page .request-details { grid-template-columns: 160px minmax(0, 1fr); gap: 7px 16px; }
  .purchasing-queue-page .request-details dd { margin: 0; }
  .purchasing-queue-page .purchase-editor { max-width: 620px; margin-top: 12px; }
}

/* PR 4 -- Wide-screen density pass: staff access columns and compact rows. */
.staff-page .staff-access-role { display: none; }
@media (min-width: 900px) {
  .staff-page .app-main { max-width: none; }
  .schedule-page .app-main { max-width: none; }
  .staff-page .staff-access-pills { display: none; }
  .staff-page .staff-access-role { display: table-cell; text-align: center; width: 44px; }
  .staff-page .staff-alerts { text-align: center; width: 44px; }
  .staff-page .staff-table { font-size: 12px; }
  .staff-page .staff-table th { padding: 8px 6px; font-size: 10px; letter-spacing: 0; }
  .staff-page .staff-table td { padding: 8px 6px; vertical-align: middle; white-space: nowrap; }
  .staff-page .row-actions { flex-wrap: nowrap; gap: 4px; }
  .staff-page .row-actions .btn { min-height: 32px; padding: 5px 7px; font-size: 12px; }
}
/* PR 5 -- Home sections, account Settings and Advanced settings */
.chat-text-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:700; }
.chat-text-options { display:flex; flex:none; border:1px solid var(--app-line); border-radius:8px; overflow:hidden; }
.chat-text-options button { min-height:44px; padding:0 10px; border:0; background:var(--bmsr-card); color:var(--bmsr-navy-700); font-size:13px; font-weight:700; cursor:pointer; }
.chat-text-options button[aria-pressed=true] { background:var(--bmsr-navy-700); color:white; }
.chat-text-options button:focus-visible { outline:2px solid var(--bmsr-orange-500); outline-offset:-3px; }
.settings-advanced { padding: 12px 16px; border: 1px solid var(--app-line); border-radius: var(--app-radius-tile); color: var(--bmsr-navy-700); }
.settings-advanced > summary { cursor: pointer; font-size: var(--app-fs-sm); font-weight: 700; }
.settings-advanced > summary:focus-visible { outline: 2px solid var(--bmsr-navy-600); outline-offset: 4px; }
.settings-advanced[open] #probe-link { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 8px; }