/* =========================================================
   OT CONNECT v0.4 — Industrial Bold
   Visual source of truth: approved Industrial Bold v1.18
   ========================================================= */

:root {
  --red: #DA291C;
  --red-dark: #CC3333;
  --bg: #080b0d;
  --panel: #151b1f;
  --panel-2: #1a2025;
  --border: #333d43;
  --text: #ffffff;
  --muted: #aeb8c0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

/* ---------- Login ---------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 26px;
  background: radial-gradient(circle at 50% 35%, #1b2024 0, #0c1013 48%, #07090a 100%);
}
.login-card {
  position: relative;
  overflow: hidden;
  width: min(430px, 100%);
  padding: 34px 32px;
  border: 1px solid #343c42;
  border-radius: 22px;
  background: linear-gradient(145deg, #191f23, #12171a);
  box-shadow: 0 30px 70px #0008;
}
.login-stripes::before,
.login-stripes::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 14px;
  right: -25px;
  top: 34px;
  background: var(--red);
  transform: rotate(-35deg);
  opacity: .65;
}
.login-stripes::after { top: 57px; background: #59636a; opacity: .35; }
.login-logo { display: block; width: 145px; height: 118px; object-fit: contain; margin: 0 auto 10px; }
.kicker { color: var(--red); font-weight: 900; letter-spacing: .17em; font-size: 12px; }
.login h1 { font-size: 42px; margin: 7px 0; }
.login h1 span { color: var(--red); }
.login p { color: var(--muted); line-height: 1.55; }
.login label { display: block; color: #e0e4e7; font-size: 13px; font-weight: 800; margin: 18px 0 7px; }
.login input { width: 100%; border: 1px solid #3a444b; background: #090c0e; color: #fff; border-radius: 12px; padding: 13px 14px; outline: none; }
.login input:focus { border-color: var(--red); }
.primary { width: 100%; margin-top: 20px; border: 0; border-radius: 11px; padding: 14px; background: var(--red); color: #fff; font-weight: 900; }
.error { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #3b1714; color: #ffd8d4; font-size: 13px; }
.devnote { display: block; margin-top: 18px; color: #74808a; font-size: 11px; line-height: 1.5; }

/* ---------- App shell ---------- */
.app { min-height: 100vh; background: linear-gradient(135deg, #090c0e, #10151a 52%, #080a0c); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 24px 10px;
  background: #090d10f2;
  border-bottom: 1px solid #272e33;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 72px; height: 58px; object-fit: contain; }
.brand-copy strong { display: block; font-size: 23px; font-style: italic; font-weight: 900; }
.brand-copy strong span { color: var(--red); }
.brand-copy small { display: block; margin-top: 3px; color: #929ca4; }
.signout { border: 1px solid #414b52; background: #1b2227; color: #fff; border-radius: 10px; padding: 9px 13px; }
.content { width: min(1120px, 100%); margin: 0 auto; padding: 28px 24px 112px; }

/* ---------- Home ---------- */
.home-title { margin-bottom: 18px; }
.home-title .home-logo { display: none; }
.home-kicker { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .17em; margin-bottom: 8px; }
.home-title h1 { font-size: 34px; line-height: 1.03; margin: 0 0 8px; }
.home-title p { color: #d1d7db; margin: 0; }
.feature-card { position: relative; overflow: hidden; border-radius: 22px; min-height: 350px; border: 1px solid #323a40; background: #12171a; box-shadow: 0 18px 40px #0005; }
.feature-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #050708f2 0%, #090c0fd6 30%, #090c0f3b 72%, #05070832); }
.feature-copy { position: relative; z-index: 2; width: 50%; padding: 32px; }
.feature-copy span { font-weight: 900; font-size: 13px; }
.feature-copy h2 { font-size: 55px; line-height: .92; margin: 24px 0 18px; }
.feature-copy button { border: 0; border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; padding: 12px 20px; }
.compact-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.compact-card { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; text-align: left; gap: 12px; width: 100%; min-height: 90px; padding: 16px 17px; background: linear-gradient(145deg, #1a2024, #12171a); border: 1px solid #313940; border-radius: 16px; color: #fff; }
.compact-card .emoji { font-size: 28px; }
.compact-card strong, .compact-card small { display: block; }
.compact-card strong { font-size: 18px; }
.compact-card small { margin-top: 4px; color: var(--muted); }
.chev { display: grid; place-items: center; color: #fff; }
.chev .ico { width: 19px; }

/* ---------- Shared page headings ---------- */
.page-heading { height: 58px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; border-bottom: 1px solid #252d32; margin: -28px -24px 18px; padding: 0 24px; }
.page-heading h1 { text-align: center; font-size: 23px; margin: 0; }
.page-heading > .ico { justify-self: end; width: 20px; }
.hamb { font-size: 28px; line-height: 1; }

/* ---------- Ask Owen ---------- */
.owen-intro { text-align: center; }
.owen-intro img { width: 185px; height: 190px; object-fit: contain; display: block; margin: 0 auto 4px; }
.owen-intro h2 { font-size: 30px; margin: 4px 0 8px; }
.owen-intro p { color: #d2d7db; line-height: 1.35; }
.chat { width: min(650px, 100%); margin: 14px auto; }
.bubble { background: #697177; color: #fff; padding: 15px 16px; border-radius: 12px; margin: 12px 0; line-height: 1.35; }
.bubble.me { background: var(--red); margin-left: 24%; border-bottom-right-radius: 4px; }
.message-box { width: min(650px, 100%); margin: 16px auto; border: 1px solid #465159; border-radius: 10px; padding: 13px; color: #9aa4ab; }

/* ---------- People ---------- */
.directory, .updates-list, .resource-list { display: grid; gap: 10px; }
.person-row, .resource-row, .update-row { border: 1px solid var(--border); background: linear-gradient(145deg, #1a2025, #14191d); border-radius: 14px; color: #fff; }
.person-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 11px 13px; }
.avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #dfe5e8; overflow: hidden; }
.avatar::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #8c979e; left: 13px; top: 7px; }
.avatar::after { content: ""; position: absolute; width: 24px; height: 14px; border-radius: 14px 14px 8px 8px; background: #8c979e; left: 7px; top: 21px; }
.person-copy strong, .person-copy small { display: block; }
.person-copy small { font-size: 11px; color: #a9b2b9; margin-top: 2px; }
.person-actions { display: flex; gap: 12px; color: var(--red); }
.person-action { color: inherit; display: inline-flex; }
.person-action.disabled { opacity: .3; }
.person-actions .ico { width: 20px; }
.empty-state { grid-column: 1 / -1; border: 1px dashed #3b454c; border-radius: 14px; padding: 24px; color: #c6cdd2; text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 6px; color: #8f9aa2; font-size: 13px; }

/* ---------- Updates ---------- */
.update-row { display: grid; grid-template-columns: 135px 1fr 26px; align-items: center; overflow: hidden; padding: 0; text-align: left; }
.update-row > img { width: 135px; height: 110px; object-fit: cover; }
.update-row strong { font-size: 18px; padding: 0 17px; }

/* ---------- Resources ---------- */
.resource-row { display: grid; grid-template-columns: 45px 1fr 26px; align-items: center; gap: 10px; text-align: left; padding: 16px 15px; }
.resource-icon { color: var(--red); display: grid; place-items: center; }
.resource-row strong, .resource-row small { display: block; }
.resource-row small { font-size: 11px; color: #abb4bb; margin-top: 3px; }

/* ---------- Bottom navigation ---------- */
.bottom { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; height: 82px; background: #090d10f7; border-top: 1px solid #2a3339; display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.bottom button { width: min(155px, 20%); border: 0; background: transparent; color: #88939b; font-size: 10px; font-weight: 800; }
.bottom button .ico { display: block; margin: 0 auto 5px; width: 20px; height: 20px; }
.bottom button.active { color: #fff; }
.bottom button.active .ico { color: var(--red); stroke-width: 2.2; }

/* ---------- Desktop ---------- */
@media (min-width: 801px) {
  .screen-home { padding-top: 44px; }
  .page-heading { border: 1px solid #2f383e; border-radius: 16px; background: #11161a; margin: 0 0 18px; padding: 0 18px; }
  .directory, .resource-list { grid-template-columns: 1fr 1fr; }
  .updates-list { grid-template-columns: 1fr 1fr; }
  .update-row:last-child { grid-column: span 2; }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  body { background: #080b0d; }
  .app { max-width: 480px; margin: 0 auto; box-shadow: 0 0 70px #000; }
  .topbar { min-height: 78px; padding: calc(9px + env(safe-area-inset-top)) 18px 9px; }
  .brand img { width: 68px; }
  .brand-copy strong { font-size: 22px; }
  .brand-copy small { display: none; }
  .signout { padding: 8px 11px; }
  .content { padding: 26px 20px 100px; }
  .screen-home { padding-top: 30px; }
  .home-title { margin-bottom: 14px; }
  .home-title .home-logo { width: 118px; height: 92px; object-fit: contain; margin: 0 auto 14px; display: block; }
  .home-kicker { display: none; }
  .home-title h1 { font-size: 29px; line-height: .98; margin: 0 0 9px; }
  .home-title p { font-size: 12px; margin: 0; }
  .feature-card { min-height: 246px; border-radius: 14px; }
  .feature-copy { width: 74%; padding: 18px 15px; }
  .feature-copy span { font-size: 10px; }
  .feature-copy h2 { font-size: 34px; margin: 25px 0 12px; }
  .feature-copy button { padding: 9px 16px; font-size: 13px; }
  .compact-stack { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
  .compact-card { min-height: 68px; padding: 10px 12px; border-radius: 12px; grid-template-columns: 42px 1fr 24px; }
  .compact-card .emoji { font-size: 24px; }
  .compact-card strong { font-size: 14px; line-height: 1.05; }
  .compact-card small { font-size: 9px; }
  .page-heading { height: 54px; margin: -26px -20px 10px; padding: 0 20px; }
  .page-heading h1 { font-size: 19px; }
  .owen-intro img { width: 160px; height: 164px; }
  .owen-intro h2 { font-size: 25px; }
  .owen-intro p { font-size: 13px; }
  .bubble { font-size: 13px; }
  .person-row { padding: 9px 10px; }
  .person-copy strong { font-size: 13px; }
  .person-copy small { font-size: 9px; }
  .update-row { grid-template-columns: 102px 1fr 24px; }
  .update-row > img { width: 102px; height: 86px; }
  .update-row strong { font-size: 13px; padding: 0 10px; }
  .resource-row { padding: 13px 11px; grid-template-columns: 40px 1fr 24px; }
  .resource-row strong { font-size: 13px; }
  .resource-row small { font-size: 9px; }
  .bottom { height: 76px; }
  .bottom button { font-size: 8px; }
  .bottom button .ico { width: 18px; height: 18px; }
  .login-card { padding: 28px 24px; }
  .login h1 { font-size: 38px; }
}

@media (max-width: 380px) {
  .brand-copy strong { font-size: 19px; }
  .feature-copy h2 { font-size: 30px; }
  .compact-card strong { font-size: 13px; }
}


/* ---------- People directory tools / grouping (v0.5) ---------- */
.people-tools { position: sticky; top: 78px; z-index: 12; display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 8px 0 10px; background: linear-gradient(180deg, var(--bg) 80%, transparent); }
.people-search { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 9px; border: 1px solid #303941; background: #0e1317; border-radius: 12px; padding: 0 13px; color: #8f9aa2; }
.people-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 2px rgba(218,41,28,.12); }
.people-search .ico { width: 18px; flex: 0 0 auto; }
.people-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.people-search input::placeholder { color: #74808a; }
.people-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.people-filters button { height: 36px; border: 1px solid #303941; background: #11171b; color: #aeb7be; border-radius: 999px; padding: 0 13px; font-weight: 800; font-size: 11px; cursor: pointer; }
.people-filters button.active { background: var(--red); border-color: var(--red); color: #fff; }
.directory { display: block; }
.people-group { margin: 0 0 18px; }
.people-group-title { position: sticky; top: 138px; z-index: 8; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 7px; padding: 4px 7px; background: rgba(8,11,13,.94); backdrop-filter: blur(6px); color: #fff; font-weight: 900; letter-spacing: .04em; }
.people-group-title span { color: var(--red); }
.people-group-title small { min-width: 22px; height: 20px; display: inline-grid; place-items: center; border-radius: 999px; background: #20272c; color: #aab4bb; font-size: 10px; }
.people-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.person-row { min-width: 0; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; padding: 9px 10px; border-radius: 12px; }
.person-copy { min-width: 0; }
.person-copy strong, .person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-copy strong { font-size: 13px; }
.person-copy small { font-size: 9px; }
.person-actions { gap: 9px; }
.person-actions:empty { display:none; }
.person-actions .ico { width: 18px; }
.avatar { width: 34px; height: 34px; }
.avatar::before { width: 11px; height: 11px; left: 12px; top: 6px; }
.avatar::after { width: 22px; height: 13px; left: 6px; top: 19px; }

@media (max-width: 1180px) and (min-width: 801px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .people-tools { top: calc(78px + env(safe-area-inset-top)); display: block; margin: 0 -4px 8px; padding: 7px 4px 9px; }
  .people-search { height: 42px; }
  .people-filters { margin-top: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
  .people-filters::-webkit-scrollbar { display:none; }
  .people-filters button { flex: 0 0 auto; height: 32px; padding: 0 12px; font-size: 10px; }
  .people-group { margin-bottom: 13px; }
  .people-group-title { top: calc(159px + env(safe-area-inset-top)); margin: 0 -4px 5px; padding: 3px 7px; min-height: 26px; }
  .people-grid { grid-template-columns: 1fr; gap: 6px; }
  .person-row { padding: 8px 9px; grid-template-columns: 36px minmax(0,1fr) auto; gap: 8px; }
  .avatar { width: 30px; height: 30px; }
  .avatar::before { width: 10px; height: 10px; left: 10px; top: 5px; }
  .avatar::after { width: 20px; height: 12px; left: 5px; top: 17px; }
  .person-copy strong { font-size: 12px; }
  .person-copy small { font-size: 8px; }
  .person-actions .ico { width: 17px; }
}

/* =========================================================
   v0.6 — OT Connect Brand Refresh + Directory UX
   Canonical OT red: #DA291C
   ========================================================= */

/* ---------- Branded login ---------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 18% 20%, rgba(218,41,28,.11), transparent 29%),
    linear-gradient(135deg, #050708 0%, #0a0e11 55%, #060809 100%);
  overflow: hidden;
}
.login::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg,#000,transparent 88%);
}
.login-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr);
  overflow: hidden;
  border: 1px solid #30383e;
  border-radius: 28px;
  background: #0e1316;
  box-shadow: 0 36px 100px rgba(0,0,0,.52);
}
.login-brand-panel {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,7,8,.97) 0%, rgba(5,7,8,.88) 43%, rgba(5,7,8,.52) 100%),
    linear-gradient(180deg, rgba(218,41,28,.06), transparent 55%),
    url('/track-times-september.webp') center/cover no-repeat;
}
.login-brand-panel::before,
.login-brand-panel::after {
  content:"";
  position:absolute;
  right:-70px;
  width:310px;
  height:20px;
  transform:rotate(-35deg);
  transform-origin:center;
}
.login-brand-panel::before { top:76px; background:var(--red); opacity:.78; }
.login-brand-panel::after { top:112px; background:#4a545b; opacity:.42; }
.login-brand-glow {
  position:absolute;
  inset:auto auto -160px -120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(218,41,28,.18), transparent 68%);
}
.login-brand-content {
  position:relative;
  z-index:2;
  width:min(610px, 86%);
  align-self:center;
  padding:58px 58px 58px 64px;
}
.login-hero-logo { width:128px; height:104px; object-fit:contain; display:block; margin-bottom:16px; }
.login-product-lockup { display:inline-flex; align-items:center; gap:8px; font-size:28px; font-style:italic; font-weight:900; letter-spacing:-.03em; }
.login-product-lockup span { color:var(--red); }
.login-eyebrow { margin-top:46px; color:var(--red); font-size:12px; font-weight:900; letter-spacing:.18em; }
.login-brand-content h1 { margin:10px 0 16px; font-size:64px; line-height:.93; letter-spacing:-.045em; }
.login-brand-content h1 span { color:#fff; }
.login-brand-content p { max-width:520px; color:#c3cbd1; font-size:17px; line-height:1.58; }
.login-feature-grid { margin-top:32px; display:grid; grid-template-columns:1fr; gap:10px; max-width:520px; }
.login-feature-grid > div { position:relative; padding:12px 14px 12px 18px; border-left:3px solid var(--red); background:linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); border-radius:0 10px 10px 0; }
.login-feature-grid strong,.login-feature-grid small { display:block; }
.login-feature-grid strong { font-size:14px; }
.login-feature-grid small { margin-top:3px; color:#9ca7ae; font-size:11px; }
.login-tagline { margin-top:34px; color:#fff; font-size:13px; font-weight:800; }
.login-panel { display:grid; place-items:center; padding:48px 44px; background:linear-gradient(155deg,#151b1f,#0d1215); border-left:1px solid #2d353a; }
.login-card {
  width:100%;
  max-width:420px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.login-card-brand { display:flex; align-items:center; gap:13px; margin-bottom:42px; }
.login-card-brand img { width:58px; height:48px; object-fit:contain; }
.login-card-brand strong,.login-card-brand small { display:block; }
.login-card-brand strong { font-style:italic; font-size:21px; font-weight:900; }
.login-card-brand strong span { color:var(--red); }
.login-card-brand small { margin-top:2px; color:#818d95; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.login .kicker { font-size:11px; }
.login h2 { margin:8px 0 7px; font-size:32px; letter-spacing:-.03em; }
.login-help { margin:0 0 26px !important; color:#8d99a1 !important; font-size:13px; }
.login label { margin-top:15px; }
.login input { min-height:48px; border-radius:10px; background:#070a0c; box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.login input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(218,41,28,.12); }
.primary { min-height:50px; border-radius:10px; transition:transform .15s ease, filter .15s ease; }
.primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.devnote b { color:#9aa4ab; }

/* ---------- Stronger OT Connect app shell ---------- */
.topbar {
  min-height:86px;
  background:linear-gradient(180deg,rgba(10,14,17,.98),rgba(7,10,12,.95));
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.topbar::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--red) 0 92px,#384147 92px 160px,transparent 160px);
  opacity:.95;
}
.brand { gap:13px; }
.brand-logo-wrap { width:72px; height:58px; display:grid; place-items:center; }
.brand-logo-wrap img { width:72px; height:58px; object-fit:contain; }
.brand-rule { width:1px; height:42px; background:linear-gradient(180deg,transparent,var(--red),transparent); opacity:.8; }
.brand-copy strong { letter-spacing:-.045em; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.topbar-badge { color:#7f8a92; font-size:9px; font-weight:900; letter-spacing:.15em; border:1px solid #30383e; background:#11171b; border-radius:999px; padding:6px 9px; }
.signout { border-color:#39444b; background:linear-gradient(180deg,#1b2328,#141b1f); }

/* ---------- Directory emphasis / unmistakable v0.6 layout ---------- */
.screen-people .page-heading { margin-bottom:10px; }
.people-tools {
  border:1px solid #242d32;
  border-radius:14px;
  padding:10px;
  background:linear-gradient(180deg,rgba(17,23,27,.98),rgba(10,14,17,.96));
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.people-search { background:#080c0e; }
.people-group-title { border-bottom:1px solid #20282d; }
.people-grid .person-row { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.people-grid .person-row:hover { border-color:#4a555d; background:linear-gradient(145deg,#20272c,#151b1f); transform:translateY(-1px); }

@media (max-width: 800px) {
  .login { padding:0; place-items:stretch; background:#070a0c; }
  .login-shell { width:100%; min-height:100vh; display:block; border:0; border-radius:0; box-shadow:none; background:#0b0f12; }
  .login-brand-panel { min-height:300px; background:linear-gradient(180deg,rgba(5,7,8,.72),rgba(5,7,8,.98)),url('/track-times-september.webp') center/cover no-repeat; }
  .login-brand-panel::before { width:210px; height:12px; right:-55px; top:40px; }
  .login-brand-panel::after { width:210px; height:12px; right:-55px; top:62px; }
  .login-brand-content { width:100%; padding:calc(28px + env(safe-area-inset-top)) 24px 30px; align-self:end; }
  .login-hero-logo { width:82px; height:67px; margin-bottom:9px; }
  .login-product-lockup { font-size:22px; }
  .login-eyebrow { margin-top:28px; font-size:9px; }
  .login-brand-content h1 { font-size:43px; margin:7px 0 10px; }
  .login-brand-content p { font-size:13px; line-height:1.45; margin:0; max-width:360px; }
  .login-feature-grid { display:none; }
  .login-tagline { margin-top:16px; font-size:11px; }
  .login-panel { border-left:0; border-top:1px solid #2a3237; padding:28px 22px calc(34px + env(safe-area-inset-bottom)); }
  .login-card { max-width:none; }
  .login-card-brand { display:none; }
  .login h2 { font-size:27px; }
  .login-help { margin-bottom:18px !important; }
  .topbar { min-height:72px; padding:calc(7px + env(safe-area-inset-top)) 14px 7px; }
  .brand { gap:9px; }
  .brand-logo-wrap { width:54px; height:46px; }
  .brand-logo-wrap img { width:54px; height:46px; }
  .brand-rule { height:30px; }
  .brand-copy strong { font-size:20px; }
  .topbar-badge { display:none; }
  .signout { padding:7px 9px; font-size:12px; }
  .people-tools { top:calc(72px + env(safe-area-inset-top)); margin:0 -6px 9px; border-radius:10px; padding:7px; }
  .people-group-title { top:calc(151px + env(safe-area-inset-top)); }
}


/* =========================================================
   v0.6.2 UI POLISH
   - Center OT Connect wordmark in app header
   - Sharpen bottom navigation
   - Improve job-title legibility
   - Approved-style Owen robot nav icon
   ========================================================= */

/* Center the product name independently of logo/actions. */
.topbar { position: sticky; }
.brand-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.brand-copy strong {
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.035em;
}
.brand-copy small {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .015em;
}

/* Bottom nav was physically too small, which caused soft/blurry rendering. */
.bottom button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.bottom button .ico {
  width: 23px;
  height: 23px;
  margin-bottom: 6px;
  stroke-width: 2.15;
  shape-rendering: geometricPrecision;
}
.bottom button.active .ico { stroke-width: 2.35; }

/* Employee title / position must remain readable at directory density. */
.person-copy strong { font-size: 14px; line-height: 1.12; }
.person-copy small {
  font-size: 11px;
  line-height: 1.22;
  margin-top: 3px;
  color: #c0c8ce;
}

@media (max-width: 800px) {
  /* Keep OT CONNECT centered even with the logo and sign-out controls. */
  .brand-copy {
    left: 50%;
    max-width: 190px;
  }
  .brand-copy strong { font-size: 18px; }
  .brand-copy small { display: none; }

  .bottom { height: 80px; }
  .bottom button {
    font-size: 10px;
    font-weight: 700;
  }
  .bottom button .ico {
    width: 21px;
    height: 21px;
    margin-bottom: 5px;
  }

  .person-row { padding: 10px 10px; }
  .person-copy strong { font-size: 13px; }
  .person-copy small {
    font-size: 11px;
    line-height: 1.18;
  }
}

@media (max-width: 380px) {
  .brand-copy strong { font-size: 17px; }
  .bottom button { font-size: 9.5px; }
  .person-copy small { font-size: 10.5px; }
}


/* =========================================================
   v0.7 ADMIN FOUNDATION
   ========================================================= */
.admin-launch{display:flex;align-items:center;gap:6px;border:1px solid #39444b;background:#141b1f;color:#c8d0d5;border-radius:9px;padding:8px 11px;font-weight:800;font-size:11px;cursor:pointer}.admin-launch .ico{width:17px;height:17px}.admin-launch:hover,.admin-launch.active{border-color:var(--red);color:#fff}.screen-admin{width:min(1380px,100%);padding-bottom:44px}.admin-page{padding:28px 0}.admin-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.admin-heading h1{margin:4px 0 0;font-size:32px}.admin-back{border:1px solid #39444b;background:#151b1f;color:#fff;padding:9px 13px;border-radius:9px;cursor:pointer}.admin-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}.admin-nav{position:sticky;top:112px;display:grid;gap:6px;padding:8px;border:1px solid #2a3338;border-radius:14px;background:#0f1417}.admin-nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#99a4ab;text-align:left;padding:11px 12px;border-radius:9px;font-weight:800;cursor:pointer}.admin-nav button .ico{width:19px;height:19px}.admin-nav button:hover{background:#171e22;color:#fff}.admin-nav button.active{background:rgba(218,41,28,.14);color:#fff;box-shadow:inset 3px 0 0 var(--red)}.admin-main{min-width:0}.admin-welcome{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px;border:1px solid #30393f;border-radius:16px;background:linear-gradient(135deg,#1a2024,#111619);box-shadow:0 14px 32px rgba(0,0,0,.2)}.admin-welcome h2{margin:6px 0 7px;font-size:28px}.admin-welcome p{margin:0;color:#9eabb2}.admin-version{font-size:12px;font-weight:900;color:var(--red);border:1px solid rgba(218,41,28,.35);padding:8px 10px;border-radius:999px}.admin-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.admin-metric{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #2d373d;background:#151b1f;color:#fff;border-radius:13px;padding:18px;cursor:pointer}.admin-metric:hover{border-color:#515e66}.admin-metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(218,41,28,.12);color:var(--red)}.admin-metric-icon .ico{width:23px;height:23px}.admin-metric strong,.admin-metric small{display:block}.admin-metric strong{font-size:24px}.admin-metric small{margin-top:2px;color:#aab4ba;font-size:11px}.admin-guide{margin-top:12px;padding:15px 17px;border:1px dashed #354148;border-radius:12px;color:#a6b0b6}.admin-guide strong,.admin-guide span{display:block}.admin-guide span{margin-top:4px;font-size:12px}.admin-editor{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);gap:15px;align-items:start}.admin-form,.admin-existing{border:1px solid #303a40;border-radius:15px;background:#151b1f;padding:20px}.admin-form{position:sticky;top:112px}.admin-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.admin-form-head h2,.admin-existing h2{margin:0 0 4px}.admin-form-head p{margin:0;color:#909ca3;font-size:12px}.admin-form-head>.ico{width:26px;height:26px;color:var(--red)}.admin-form label{display:grid;gap:6px;margin-top:12px;color:#d8dee2;font-size:11px;font-weight:800}.admin-form input,.admin-form textarea,.admin-form select{width:100%;box-sizing:border-box;border:1px solid #3a454c;background:#080c0e;color:#fff;border-radius:9px;padding:11px 12px;font:inherit;font-weight:500;outline:none}.admin-form textarea{resize:vertical;min-height:84px}.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(218,41,28,.1)}.admin-fields.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-check-row{display:flex;gap:18px;flex-wrap:wrap}.admin-form .admin-check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-weight:700}.admin-form .admin-check input{width:16px;height:16px;accent-color:var(--red)}.admin-save{margin-top:17px;display:flex;align-items:center;justify-content:center;gap:7px}.admin-save .ico{width:18px;height:18px}.admin-existing h2{margin-bottom:12px}.admin-list{display:grid;gap:8px}.admin-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid #2f383e;background:#101518;border-radius:11px}.admin-item>div:first-child{min-width:0}.admin-item strong,.admin-item small,.admin-item span{display:block}.admin-item strong{font-size:13px}.admin-item small{margin-top:3px;color:#abb5bb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px}.admin-item>div:first-child>span{margin-top:6px;color:#78858d;font-size:10px}.admin-status{display:inline-block!important;margin-left:5px!important;padding:2px 6px;border-radius:999px;border:1px solid #3c454a}.admin-status.on{color:#b9e6c4;border-color:#315b3b;background:#132119}.admin-status.off{color:#b9c0c5}.admin-item-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.admin-item-actions button{border:1px solid #3b464d;background:#192025;color:#cfd6da;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.admin-item-actions button.danger{width:34px;height:32px;padding:6px;color:#ff7f75}.admin-item-actions .ico{width:16px;height:16px}.admin-empty,.admin-loading,.admin-setup,.admin-denied{padding:30px;border:1px dashed #39454c;border-radius:14px;text-align:center;color:#96a2a9}.admin-setup h2,.admin-denied h2{color:#fff;margin:8px 0}.admin-setup p,.admin-denied p{margin:0;color:#96a2a9}.admin-setup code{display:block;margin-top:15px;padding:10px;border-radius:8px;background:#090c0e;color:#ff9e96;font-size:10px;text-align:left;white-space:pre-wrap;word-break:break-word}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-nav{position:static;display:flex;overflow-x:auto;gap:5px}.admin-nav button{flex:0 0 auto}.admin-editor{grid-template-columns:1fr}.admin-form{position:static}.admin-metrics{grid-template-columns:repeat(2,1fr)}.screen-admin{padding-bottom:30px}.admin-launch span{display:none}.admin-launch{padding:8px}.admin-fields.two{grid-template-columns:1fr}.admin-item{align-items:flex-start}.admin-item small{white-space:normal;max-width:none}}
@media(max-width:560px){.screen-admin{padding-left:12px;padding-right:12px}.admin-page{padding-top:14px}.admin-heading{align-items:center}.admin-heading h1{font-size:25px}.admin-back{font-size:11px;padding:8px 10px}.admin-nav{margin:0 -4px}.admin-nav button{padding:9px}.admin-nav button span{font-size:10px}.admin-welcome{padding:18px}.admin-welcome h2{font-size:22px}.admin-version{display:none}.admin-metrics{grid-template-columns:1fr 1fr}.admin-metric{padding:13px;gap:9px}.admin-metric-icon{width:36px;height:36px}.admin-metric strong{font-size:19px}.admin-form,.admin-existing{padding:15px}.admin-item{display:grid}.admin-item-actions{justify-content:flex-end}.topbar-actions .admin-launch{margin-right:0}}

/* v0.7.2 Kudos photo upload */
.field-note{color:#7f8b92;font-weight:500;font-size:10px;margin-left:4px}.kudos-photo-preview{margin-top:10px;border:1px solid #303a40;border-radius:12px;overflow:hidden;background:#0b0f11}.kudos-photo-preview img{display:block;width:100%;max-height:240px;object-fit:cover}.admin-item.has-photo{box-shadow:inset 3px 0 0 rgba(218,41,28,.6)}

/* v0.7.3 Employee editor + linked birthdays */
.admin-form-note{margin:12px 0 0;color:#87949b;font-size:10px;line-height:1.45}
.admin-form select[name="employee_id"],.admin-form select[name="person_id"]{font-weight:700}
.admin-existing .admin-item-actions button[data-edit-employee]{min-width:56px}