/* Home + shared shell. Sign-in stays on body.signin. Other screens keep their own content.
   The shell (header + nav) is a neutral light frame so it stays readable over Home and over
   the unchanged dark screens. Home content is scoped to body.home. */

body:not(.signin) .app-header,
body:not(.signin) #bottom-nav,
body.home #screen-home {
  font-family: "FT Signin", system-ui, sans-serif;
}

/* ----- Shell: light frame on every signed-in screen ----- */
body:not(.signin) .app-header {
  background: #fff;
  color: #111;
  border-bottom: 1px solid #e4e1da;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body:not(.signin) .brand h1 {
  color: #111;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 16px;
}
body:not(.signin) .brand .sub {
  color: #5c564c;
  font-size: 13px;
  line-height: 1.25;
}
body:not(.signin) .brand-mark {
  background: #111;
  color: #fff;
  box-shadow: none;
  border-radius: 8px;
}
body:not(.signin) .pill,
body:not(.signin) .pill.role-supervisor,
body:not(.signin) .pill.role-operator,
body:not(.signin) .pill.role-maintenance,
body:not(.signin) .pill.role-sanitation {
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
}

/* Phone bottom bar: light, active tab near-black, small indicator, no teal fill. */
body:not(.signin) #bottom-nav.nav-v2 {
  background: #fff;
  color: #5c564c;
  border-top: 1px solid #e4e1da;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body:not(.signin) #bottom-nav.nav-v2 .nav-item {
  color: #5c564c;
  background: transparent;
  border-radius: 0;
}
body:not(.signin) #bottom-nav.nav-v2 .nav-item.active {
  color: #111;
  background: transparent;
  font-weight: 650;
}
body:not(.signin) #bottom-nav.nav-v2 .nav-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #111;
  transform: translateX(-50%);
}
body:not(.signin) #bottom-nav .nav-item {
  transition: transform 100ms ease-out, color 100ms ease-out;
}
body:not(.signin) #bottom-nav .nav-item:hover { transform: none; }
body:not(.signin) #bottom-nav .nav-item:active { transform: scale(0.98); }

/* Page changes: 12px over 180ms. Replaces the 4px fade on signed-in screens. */
@keyframes ft-page {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
html.ftf-ux_polish body:not(.signin) .screen.active,
body:not(.signin) .screen.active {
  animation: ft-page 180ms ease-out both;
}

/* ----- Home content ----- */
html:has(body.home) { background: #faf9f6; }
body.home {
  background: #faf9f6;
  color: #111;
}
body.home #screen-home {
  color: #111;
  font-size: 16px;
  max-width: 720px;
}
body.home #screen-home h2,
body.home #hub-hello {
  color: #111;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body.home #hub-hello { font-size: 28px; margin: 0 0 4px; }
body.home #hub-sub,
body.home #screen-home .muted,
body.home .hc-w-sub,
body.home .hc-empty {
  color: #5c564c;
  font-size: 16px;
}
body.home #screen-home .hub-section-title {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 13px;
  font-weight: 650;
  color: #5c564c;
}
body.home .hc-edit-btn {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
  box-shadow: none;
}
body.home .hc-edit-btn:hover,
body.home .hc-edit-btn:focus-visible {
  border-color: #111;
  color: #111;
  background: #f3f1ec;
}

/* Greeting, the Ask action, quick actions, then cards. Welcome stays, below that stack. */
body.home #screen-home.active {
  display: flex;
  flex-direction: column;
}
body.home #screen-home > .hub-greet { order: 1; }
body.home #asst-home { order: 2; }
body.home #hc-root { order: 3; }
body.home #v1-welcome { order: 4; }
body.home #ux-home { order: 5; }
body.home #hc-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.home #hc-actions-sec { order: -1; margin-top: 8px; }
body.home #hc-widgets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* Equal neutral tiles. Accent and SOS fills stay off; SOS keeps a small red dot. */
body.home #hc-actions.hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
body.home #screen-home .hub-card,
body.home #hc-actions .hub-card,
body.home #hc-actions .hub-card.accent,
body.home #hc-actions .hub-card.danger,
body.home #hc-actions .hub-card.hc-sos,
body.home #hc-actions .hub-card.primary-sos {
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
  min-height: 96px;
  height: 100%;
}
body.home #hc-actions .hub-card strong,
body.home #screen-home .hub-card strong,
body.home #hc-actions .hub-card.hc-sos strong,
body.home #screen-home .hub-card.primary-sos strong {
  color: #111;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
body.home #hc-actions .hub-card span,
body.home #screen-home .hub-card span,
body.home #screen-home .hub-card.primary-sos span:not(.hub-ico) {
  color: #5c564c;
  font-size: 14px;
}
body.home #hc-actions .hub-card.hc-sos { position: relative; }
body.home #hc-actions .hub-card.hc-sos::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b91c1c;
}

/* Dashboard cards */
body.home .hc-widget,
body.home .hc-widget.alert-strip,
body.home .home-strip,
body.home .home-strip.urgent {
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
  text-align: left;
  width: 100%;
}
body.home .hc-widget h3 { color: #5c564c; font-size: 13px; letter-spacing: -0.01em; }
body.home .hc-w-value {
  color: #111;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body.home .hc-widget .link,
body.home .hc-widget button.link { color: #111; font-weight: 650; }
body.home .hc-alert-row { border-top-color: #e4e1da; }
body.home .hc-line { font-size: 16px; color: #111; }
body.home .hc-tag { color: #5c564c; background: #f3f1ec; }
body.home .hc-tag.green { color: #166534; background: #dcfce7; }
body.home .hc-tag.red { color: #991b1b; background: #fee2e2; }
body.home .hc-tag.amber { color: #92400e; background: #fef3c7; }
body.home .hc-tag.gray { color: #5c564c; background: #f3f1ec; }

/* Single primary action: Ask FloorTalk. Notes and quick actions stay neutral. */
body.home .asst-home-mic {
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #fff;
  border-radius: 12px;
  box-shadow: none;
}
body.home .asst-home-text strong { color: #fff; font-size: 16px; letter-spacing: -0.02em; }
body.home .asst-home-text span { color: rgba(255, 255, 255, 0.88); font-size: 14px; }
body.home .asst-home-notes {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
body.home .asst-home-mic,
body.home .asst-home-notes,
body.home #screen-home .hub-card,
body.home .hc-widget,
body.home .hc-edit-btn,
body.home #hc-save,
body.home #hc-reset {
  transition: transform 100ms ease-out, background 100ms ease-out, border-color 100ms ease-out;
}
body.home .asst-home-mic:hover { background: #0c655e; transform: none; filter: none; }
body.home .asst-home-notes:hover,
body.home #screen-home .hub-card:hover,
body.home .hc-widget.tap:hover {
  transform: none;
  border-color: #cfcabd;
  background: #fff;
  filter: none;
}
body.home .asst-home-mic:active,
body.home .asst-home-notes:active,
body.home #screen-home .hub-card:active,
body.home .hc-widget:active,
body.home .hc-edit-btn:active,
body.home #hc-save:active {
  transform: scale(0.98);
}
body.home :focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Customize sheet stays on Home, so it uses the same light surfaces. Save is the sheet's primary. */
body.home .hc-editor { background: rgba(17, 17, 17, 0.4); }
body.home .hc-editor-card {
  background: #faf9f6;
  color: #111;
  border: 1px solid #e4e1da;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
body.home .hc-editor-head h2 { letter-spacing: -0.02em; line-height: 1.1; color: #111; }
body.home .hc-tabs { background: #f3f1ec; }
body.home .hc-tab { color: #5c564c; }
body.home .hc-tab.active {
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 1px #e4e1da;
}
body.home .hc-edit-row,
body.home .hc-add-btn,
body.home #hc-reset {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
}
body.home #hc-save {
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #fff;
  filter: none;
}
body.home #hc-save:hover { background: #0c655e; filter: none; transform: none; }

/* First-run welcome is Home content, so it uses the same light card. Teal stays on Ask. */
body.home .v1-welcome {
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
body.home .v1-welcome h3 { color: #111; letter-spacing: -0.02em; line-height: 1.1; }
body.home .v1-welcome .v1-muted,
body.home .v1-steps li span:not(.v1-step-n) { color: #5c564c; }
body.home .v1-steps li {
  background: #faf9f6;
  border: 1px solid #e4e1da;
  color: #111;
}
body.home .v1-step-n { color: #111; border-color: #e4e1da; background: #fff; }
body.home .v1-steps li.done .v1-step-n,
body.home .v1-seg button.on {
  background: #111;
  color: #fff;
  border-color: #111;
}
body.home .v1-seg { border-color: #e4e1da; }
body.home .v1-seg button { color: #111; }
body.home .v1-x { color: #111; }
body.home #v1-wel-done {
  background: #111;
  color: #fff;
  border: none;
  filter: none;
}
body.home #v1-wel-done:hover { background: #333; filter: none; transform: none; }
body.home #v1-wel-done:active { transform: scale(0.98); }
body.home #ux-home,
body.home #ux-home .ux-banner {
  background: #fff;
  color: #111;
  border-color: #e4e1da;
}

/* ----- Desktop: sidebar replaces the bottom bar ----- */
@media (min-width: 900px) {
  html.ftf-ipad_layout body:not(.signin):has(#bottom-nav.nav-v2:not(.hidden)),
  body:not(.signin):has(#bottom-nav.nav-v2:not(.hidden)) {
    padding-left: 240px;
    padding-bottom: 24px;
  }
  html.ftf-ipad_layout body:not(.signin):has(#bottom-nav.nav-v2:not(.hidden)) .app-header,
  body:not(.signin):has(#bottom-nav.nav-v2:not(.hidden)) .app-header {
    position: sticky;
    top: 0;
    z-index: 45;
    height: 56px;
    min-height: 56px;
    margin-left: 0;
    width: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #e4e1da;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Plant and user sit in the sidebar. The bar itself stays over the content column. */
  body:not(.signin) .app-header .brand {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 46;
    flex: none;
    width: 240px;
    height: 92px;
    margin: 0;
    padding: 16px 16px 12px;
    box-sizing: border-box;
    background: #faf9f6;
    border-right: 1px solid #e4e1da;
    border-bottom: 1px solid #e4e1da;
    align-items: flex-start;
  }
  body:not(.signin) .app-header .brand .sub {
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body:not(.signin) #role-pill { margin-left: auto; }
  body:not(.signin) .app-header::after {
    content: "";
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #111;
  }
  body:not(.signin):has(#screen-home.active) .app-header::after { content: "Home"; }
  body:not(.signin):has(#screen-talk.active) .app-header::after { content: "Talk"; }
  body:not(.signin):has(#screen-walkie.active) .app-header::after { content: "Walkie"; }
  body:not(.signin):has(#screen-channels.active) .app-header::after { content: "Channels"; }
  body:not(.signin):has(#screen-translate.active) .app-header::after { content: "Translator"; }
  body:not(.signin):has(#screen-maintain.active) .app-header::after { content: "Maintain"; }
  body:not(.signin):has(#screen-cmms.active) .app-header::after { content: "Maintain"; }
  body:not(.signin):has(#screen-lines.active) .app-header::after { content: "Lines"; }
  body:not(.signin):has(#screen-machinedata.active) .app-header::after { content: "Lines"; }
  body:not(.signin):has(#screen-library.active) .app-header::after { content: "Library"; }
  body:not(.signin):has(#screen-fixlib.active) .app-header::after { content: "Library"; }
  body:not(.signin):has(#screen-more.active) .app-header::after { content: "More"; }
  body:not(.signin):has(#screen-me.active) .app-header::after { content: "Profile"; }
  body:not(.signin):has(#screen-alerts.active) .app-header::after { content: "Alerts"; }
  body:not(.signin):has(#screen-dashboard.active) .app-header::after { content: "Dashboard"; }
  body:not(.signin):has(#screen-announcements.active) .app-header::after { content: "Announcements"; }
  body:not(.signin):has(#screen-schedule.active) .app-header::after { content: "Schedule"; }

  html.ftf-ipad_layout body:not(.signin) #bottom-nav.nav-v2,
  body:not(.signin) #bottom-nav.nav-v2 {
    position: fixed;
    top: 92px;
    left: 0;
    right: auto;
    bottom: 0;
    width: 240px;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 12px 10px 16px;
    border-top: 0;
    border-right: 1px solid #e4e1da;
    background: #faf9f6;
    z-index: 40;
  }
  html.ftf-ipad_layout body:not(.signin) #bottom-nav.nav-v2 .nav-item,
  body:not(.signin) #bottom-nav.nav-v2 .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 15px;
    text-align: left;
    border-radius: 10px;
    color: #5c564c;
    background: transparent;
  }
  body:not(.signin) #bottom-nav.nav-v2 .nav-item .ico {
    font-size: 18px;
    width: 22px;
    text-align: center;
  }
  body:not(.signin) #bottom-nav.nav-v2 .nav-item .nav-label {
    display: block;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
  }
  html.ftf-ipad_layout body:not(.signin) #bottom-nav.nav-v2 .nav-item.active,
  body:not(.signin) #bottom-nav.nav-v2 .nav-item.active {
    color: #111;
    background: transparent;
    font-weight: 650;
  }
  body:not(.signin) #bottom-nav.nav-v2 .nav-item.active::after { content: none; }
  body:not(.signin) #bottom-nav.nav-v2 .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: #111;
  }
  body:not(.signin) #bottom-nav.nav-v2 .nav-item .nav-badge {
    position: static;
    margin-left: auto;
  }
  html.ftf-ipad_layout body:not(.signin) .toast {
    left: calc(50% + 120px);
    bottom: 24px;
  }

  body.home #screen-home {
    max-width: 1200px;
    width: 100%;
  }
  body.home #hub-hello { font-size: 32px; }
  body.home #hc-actions.hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
  }
  body.home #hc-widgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  body.home #asst-home { align-items: stretch; }
  body.home .asst-home-notes { max-width: 280px; }
}

/* Right rail only when Home already has clock / alerts widgets. */
@media (min-width: 1280px) {
  body.home #screen-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }
  body.home #screen-home > .hub-greet { grid-column: 1 / 3; grid-row: 1; margin-bottom: 0; }
  body.home #asst-home {
    position: static;
    grid-column: 1 / 3;
    grid-row: 2;
    width: auto;
    max-width: none;
    margin: 0;
    top: auto;
    right: auto;
  }
  body.home #hc-root,
  body.home #hc-widgets { display: contents; }
  body.home #hc-actions-sec { grid-column: 1 / 3; grid-row: 3; margin: 0; }
  body.home .hc-widget { align-self: start; }
  body.home .hc-widget[data-hub-action="clock"] { grid-column: 3; grid-row: 1; }
  body.home .hc-widget[data-goto="alerts"] { grid-column: 3; grid-row: 2 / span 2; }
  body.home .hc-widget[data-cmms-tab="wo"] { grid-column: 1; grid-row: 4; }
  body.home .hc-widget[data-goto="lines"] { grid-column: 2; grid-row: 4; }
  body.home #v1-welcome { grid-column: 1 / 3; grid-row: 5; align-self: start; }
  body.home #ux-home { grid-column: 1 / 3; grid-row: 6; align-self: start; }
  body.home #hc-editor { position: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  html.ftf-ux_polish body:not(.signin) .screen.active,
  body:not(.signin) .screen.active {
    animation: none !important;
  }
  body:not(.signin) #bottom-nav .nav-item,
  body.home .asst-home-mic,
  body.home .asst-home-notes,
  body.home #screen-home .hub-card,
  body.home .hc-widget,
  body.home .hc-edit-btn,
  body.home #hc-save {
    transition: none !important;
  }
  body:not(.signin) #bottom-nav .nav-item:active,
  body.home .asst-home-mic:active,
  body.home #screen-home .hub-card:active,
  body.home .hc-widget:active {
    transform: none;
  }
}