/*
 * Genba Nippo v1.7.2 — Hashiguchi Denko bright-light presentation layer.
 *
 * Presentation only. Canonical attendance, site selection, PIN, IndexedDB,
 * offline queue and API behavior remain owned by the earlier approved layers.
 */

:root {
  --dnk-navy: #0a2540;
  --dnk-navy-deep: #061a2c;
  --dnk-ink: #102b44;
  --dnk-muted: #64788b;
  --dnk-faint: #8fa0af;
  --dnk-line: rgb(10 37 64 / 9%);
  --dnk-bg: #f3f6f8;
  --dnk-bg-2: #eaf0f4;
  --dnk-white: #ffffff;
  --dnk-cyan: #80e9ff;
  --dnk-violet: #aaa2ff;
  --dnk-success: #246a59;
  --dnk-warning: #9b6518;
  --dnk-danger: #a74743;
  --dnk-card-radius: 24px;
  --dnk-button-radius: 20px;
  --dnk-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --dnk-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --dnk-atmosphere: url('/assets/pwa/denko-atmosphere-v173.png');
  --dnk-shadow: 0 20px 55px rgb(13 39 63 / 9%);
  --gn-bg: #edf2f7;
  --gn-paper: #edf2f7;
  --gn-surface: #ffffff;
  --gn-surface-soft: #f4f7fa;
  --gn-text: #102b44;
  --gn-text-muted: #64788b;
}

/* v1.7.3 owner review corrections: Claude prototype typography, one static
 * atmosphere, grouped requests and reliable iPhone motion fallback. */

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(h1, h2, h3, h4, h5, h6, p, span, small, b, strong, em, i, button,
  input, textarea, select, option, label, dt, dd, li, th, td, output) {
  font-family: var(--dnk-sans) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.section-head h1, .section-head h2, .pwa-page-header h1, .pwa-page-header h2,
  .pwa-detail-header h1, .pwa-detail-header h2, .pwa-secondary-header h1,
  #pwa-secondary-title, .v153-page-title, .v170-page-title, .gn170-section-heading h2,
  .gn-b1-hero-title h2, .gn170-b3-display-title,
  .hp153-card-head h2, .hp153-site, .hp153-status, #dnk172-state-label,
  .result-title, .sheet-card > h2, .status-label, [data-v170-status],
  #hp153-punch-label) {
  font-family: var(--dnk-mincho) !important;
  font-weight: 500 !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections),
.pwa-secondary-layer,
.pwa-confirm-layer,
.gn170-b3-modal {
  background-color: var(--dnk-bg) !important;
  background-image:
    linear-gradient(rgb(247 249 251 / 88%), rgb(240 245 248 / 92%)),
    var(--dnk-atmosphere) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.gn170-b3-layer #pwa-secondary-content,
html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active #pwa-secondary-content.gn-b1-menu-page,
html.gn-v170-batch1 .app-view #tab-history :is(#history-content, #v153-history-tools, #v153-notification-controls),
html.gn-v170-batch1 .app-view #tab-corrections ,
html.v170-batch2-enabled .app-view :is(.gn170-b2-content, .gn170-b2-paper) {
  background: transparent !important;
}

.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero,
html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.v170-batch2-enabled .app-view .gn170-b2-hero,
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero,
.gn170-b3-modal .gn170-b3-modal-hero {
  background-color: rgb(247 249 251 / 92%) !important;
  background-image:
    linear-gradient(rgb(250 252 253 / 86%), rgb(237 243 247 / 88%)),
    var(--dnk-atmosphere) !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.dnk173-video-play {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  min-width: 104px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 20px;
  background: rgb(6 26 44 / 76%);
  color: #fff;
  font-family: var(--dnk-sans) !important;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  pointer-events: auto;
}

.dnk173-video-play[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.dnk173-motion-opt-in .dnk172-light-media video { display: block !important; }
}

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-grid {
  display: flex !important;
  flex-direction: column !important;
}

html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title {
  order: 0;
  display: flex;
  min-height: 54px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--dnk-line);
  color: var(--dnk-navy);
}

html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title small {
  color: var(--dnk-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title b {
  font-family: var(--dnk-mincho) !important;
  font-size: 22px;
  font-weight: 500;
}

html.gn-v170-batch1 .gn-b1-menu-page .dnk173-request-correction { order: 1; }
html.gn-v170-batch1 .gn-b1-menu-page [data-existing-history="attendance"] { order: 3; }
html.gn-v170-batch1 .gn-b1-menu-page a[href*="personal-schedule"] { order: 4; }
html.gn-v170-batch1 .gn-b1-menu-page [data-existing-history="notifications"] { order: 5; }
html.gn-v170-batch1 .gn-b1-menu-page a[href*="calendar/company"] { order: 6; }
html.gn-v170-batch1 .gn-b1-menu-page [data-foreman-section="attendance"] { order: 7; }
html.gn-v170-batch1 .gn-b1-menu-page [data-foreman-section="sites"] { order: 8; }

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item {
  grid-template-columns: 40px minmax(0, 1fr) 18px !important;
  gap: 10px !important;
  min-height: 76px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-list > .gn-b1-menu-ledger-item {
  grid-template-columns: 40px minmax(0, 1fr) 18px !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 13px 16px !important;
  overflow: hidden !important;
}

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item::before,
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-list > .gn-b1-menu-ledger-item::before {
  width: 40px;
  color: var(--dnk-muted) !important;
  content: attr(data-dnk173-index) !important;
  font-family: var(--dnk-sans) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-align: left;
}

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item > b {
  font-family: var(--dnk-sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

.gn170-b3-settings-ledger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
}

.gn170-b3-settings-row {
  grid-template-columns: 40px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 12px 2px !important;
  overflow: hidden !important;
}

.gn170-b3-settings-row::before {
  width: 38px !important;
  height: 38px !important;
  font-family: var(--dnk-sans) !important;
}

.gn170-b3-settings-row b {
  overflow-wrap: anywhere;
  font-family: var(--dnk-sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.gn170-b3-settings-row small {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

@media (max-width: 359px) {
  html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item,
  html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-list > .gn-b1-menu-ledger-item {
    grid-template-columns: 34px minmax(0, 1fr) 16px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* v1.7.3 compatibility declarations. The final cascade guard is loaded from
 * pwa-denko-refine-v173.css after this historical v1.7.2 layer. */
:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(h1, h2, h3, h4, h5, h6, p, span, small, b, strong, em, i, button,
  input, textarea, select, option, label, dt, dd, li, th, td, output) {
  font-family: var(--dnk-sans) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.section-head h1, .section-head h2, .pwa-page-header h1, .pwa-page-header h2,
  .pwa-detail-header h1, .pwa-detail-header h2, .pwa-secondary-header h1,
  #pwa-secondary-title, .v153-page-title, .v170-page-title, .gn170-section-heading h2,
  .gn-b1-hero-title h2, .gn170-b3-display-title,
  .hp153-card-head h2, .hp153-site, .hp153-status, #dnk172-state-label,
  .result-title, .sheet-card > h2, .status-label, [data-v170-status], #hp153-punch-label) {
  font-family: var(--dnk-mincho) !important;
  font-weight: 500 !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections),
.pwa-secondary-layer,
.pwa-confirm-layer,
.gn170-b3-modal {
  background-color: var(--dnk-bg) !important;
  background-image: linear-gradient(rgb(247 249 251 / 88%), rgb(240 245 248 / 92%)), var(--dnk-atmosphere) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero,
html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.v170-batch2-enabled .app-view .gn170-b2-hero,
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero,
.gn170-b3-modal .gn170-b3-modal-hero {
  background-color: rgb(247 249 251 / 92%) !important;
  background-image: linear-gradient(rgb(250 252 253 / 86%), rgb(237 243 247 / 88%)), var(--dnk-atmosphere) !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.gn170-b3-layer #pwa-secondary-content,
html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active #pwa-secondary-content.gn-b1-menu-page,
html.gn-v170-batch1 .app-view #tab-history :is(#history-content, #v153-history-tools, #v153-notification-controls),
html.gn-v170-batch1 .app-view #tab-corrections ,
html.v170-batch2-enabled .app-view :is(.gn170-b2-content, .gn170-b2-paper) {
  background: transparent !important;
}

.dnk173-video-play {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  min-width: 104px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 20px;
  background: rgb(6 26 44 / 76%);
  color: #fff;
  font-family: var(--dnk-sans) !important;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  pointer-events: auto;
}
.dnk173-video-play[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.dnk173-motion-opt-in .dnk172-light-media video { display: block !important; }
}

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-grid { display: flex !important; flex-direction: column !important; }
html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title {
  order: 0;
  display: flex;
  min-height: 54px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--dnk-line);
  color: var(--dnk-navy);
}
html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title small { color: var(--dnk-muted); font-size: 9px; font-weight: 700; letter-spacing: .22em; }
html.gn-v170-batch1 .gn-b1-menu-page .dnk173-menu-section-title b { font-family: var(--dnk-mincho) !important; font-size: 22px; font-weight: 500; }
html.gn-v170-batch1 .gn-b1-menu-page .dnk173-request-correction { order: 1; }
html.gn-v170-batch1 .gn-b1-menu-page [data-existing-history="attendance"] { order: 3; }
html.gn-v170-batch1 .gn-b1-menu-page a[href*="personal-schedule"] { order: 4; }
html.gn-v170-batch1 .gn-b1-menu-page [data-existing-history="notifications"] { order: 5; }
html.gn-v170-batch1 .gn-b1-menu-page a[href*="calendar/company"] { order: 6; }
html.gn-v170-batch1 .gn-b1-menu-page [data-foreman-section="attendance"] { order: 7; }
html.gn-v170-batch1 .gn-b1-menu-page [data-foreman-section="sites"] { order: 8; }

html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item,
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-list > .gn-b1-menu-ledger-item {
  grid-template-columns: 40px minmax(0, 1fr) 18px !important;
  gap: 10px !important;
  min-height: 72px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item::before,
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-list > .gn-b1-menu-ledger-item::before {
  width: 40px;
  color: var(--dnk-muted) !important;
  content: attr(data-dnk173-index) !important;
  font-family: var(--dnk-sans) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-align: left;
}
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-card.gn-b1-menu-ledger-item > b { font-family: var(--dnk-sans) !important; font-size: 17px !important; font-weight: 500 !important; }

.gn170-b3-settings-ledger { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; width: 100% !important; }
.gn170-b3-settings-row {
  grid-template-columns: 40px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 12px 2px !important;
  overflow: hidden !important;
}
.gn170-b3-settings-row::before { width: 38px !important; height: 38px !important; font-family: var(--dnk-sans) !important; }
.gn170-b3-settings-row b { overflow-wrap: anywhere; font-family: var(--dnk-sans) !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.45 !important; }
.gn170-b3-settings-row small { font-size: 11px !important; line-height: 1.55 !important; }

html,
body {
  background: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
  font-family: var(--dnk-sans) !important;
}

body {
  background-image: linear-gradient(155deg, #f8fafc 0%, var(--dnk-bg) 54%, var(--dnk-bg-2) 100%) !important;
}

/* The selected prototype's motion rule: opacity only, never blur or travel. */
.app-view,
.app-view *,
.app-view *::before,
.app-view *::after,
.pwa-secondary-layer,
.pwa-secondary-layer *,
.pwa-secondary-layer *::before,
.pwa-secondary-layer *::after,
.pwa-confirm-layer,
.pwa-confirm-layer *,
.v15-modal,
.v15-modal * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.app-view *::before,
.app-view *::after,
.pwa-secondary-layer *::before,
.pwa-secondary-layer *::after {
  filter: none !important;
}

@keyframes dnk172-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-view .tab-panel:not([hidden]),
.pwa-secondary-layer:not([hidden]),
.pwa-confirm-layer:not([hidden]) {
  animation: dnk172-fade 160ms ease-out both !important;
  transform: none !important;
}

.app-view .tab-panel,
.pwa-secondary-layer,
.pwa-confirm-layer,
.app-view .tab-panel *,
.pwa-secondary-layer * {
  transition-duration: 160ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-view .tab-panel:not([hidden]),
  .pwa-secondary-layer:not([hidden]),
  .pwa-confirm-layer:not([hidden]) { animation: none !important; }
}

/* Screen names, state words and editorial headings are the only Mincho use. */
:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.section-head h1, .section-head h2, .pwa-page-header h1, .pwa-page-header h2,
  .pwa-detail-header h1, .pwa-detail-header h2, .pwa-secondary-header h1,
  .v153-page-title, .v170-page-title, .gn170-section-heading h2,
  .hp153-card-head h2, .hp153-site, .hp153-status, .result-title,
  .sheet-card > h2, .status-label, [data-v170-status]) {
  font-family: var(--dnk-mincho) !important;
  font-weight: 500 !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(p, span, small, button, input, textarea, select, label, dt, dd, li, th, td) {
  font-family: var(--dnk-sans);
}

/* Shared bright surfaces. */
.app-view {
  background: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
}

.app-view main,
.app-view .app-main {
  background: transparent !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections),
.pwa-secondary-layer,
.pwa-confirm-layer {
  min-height: 100dvh;
  background: linear-gradient(155deg, #fbfcfe 0%, var(--dnk-bg) 58%, #e7edf4 100%) !important;
  color: var(--dnk-ink) !important;
}

/* Every non-Home hero is static and bright. Site photographs remain inside
 * selectable site cards, where they carry information rather than atmosphere. */
.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero,
html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.v170-batch2-enabled .app-view .gn170-b2-hero,
html.v170-batch2-enabled .app-view .gn170-b2-session-hero,
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero,
.gn170-b3-modal .gn170-b3-modal-hero {
  background-color: #e8eef5 !important;
  background-image: linear-gradient(145deg, #fbfdff 0%, #e1eaf3 62%, #d7e2ed 100%) !important;
  color: var(--dnk-navy) !important;
  box-shadow: none !important;
}

.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero {
  min-height: 286px !important;
  height: auto !important;
}

html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero {
  min-height: 176px !important;
  height: auto !important;
}

.app-view #tab-punch .gn170-punch-hero,
.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero,
html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.v170-batch2-enabled .app-view .gn170-b2-hero,
html.v170-batch2-enabled .app-view .gn170-b2-hero,
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero,
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero,
.gn170-b3-modal .gn170-b3-modal-hero,
.gn170-b3-modal .gn170-b3-modal-hero {
  display: none !important;
  content: none !important;
}

html[data-v170-shell="ready"] .app-view #tab-punch.gn170-punch .gn170-punch-photo,
html[data-v170-shell="ready"] .app-view #tab-punch.gn170-punch .gn170-punch-shade {
  display: none !important;
}

html[data-v170-shell="ready"] .app-view #tab-punch.gn170-punch :is(#gn170-punch-title,
  .gn170-punch-brand-lockup b, .gn170-punch-brand-lockup small, .gn170-punch-meta,
  .gn170-punch-meta span) {
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  text-shadow: none !important;
}

html[data-v170-shell="ready"] .app-view #tab-punch.gn170-punch #gn170-punch-notifications,
html[data-v170-shell="ready"] .app-view #tab-punch.gn170-punch .gn170-punch-network {
  border-color: var(--dnk-line) !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  box-shadow: 0 8px 24px rgb(10 37 64 / 6%) !important;
}

html.gn-v170-batch1 .app-view #tab-history[data-gn-b1-history-mode="notifications"] #v153-notification-intro {
  min-height: 250px !important;
  background-color: #e8eef5 !important;
  background-image: linear-gradient(145deg, #fbfdff 0%, #e1eaf3 62%, #d7e2ed 100%) !important;
  color: var(--dnk-navy) !important;
}

html.gn-v170-batch1 .app-view #tab-history #v153-notification-intro :is(h1, h2, h3, b, small, span, p) {
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  text-shadow: none !important;
}

html.gn-v170-batch1 .app-view #tab-history #v153-notification-intro :is(button, a) {
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
}

.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero {
  display: flex !important;
  min-height: 112px !important;
  align-items: center !important;
  padding: max(18px, env(safe-area-inset-top)) 20px 16px !important;
}

.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero > div {
  position: static !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 54px !important;
  transform: none !important;
}

.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero #pwa-secondary-title {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  font-family: var(--dnk-mincho) !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero :is(.pwa-secondary-back, button) {
  position: absolute !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  left: 18px !important;
}

.gn170-b3-issue #v15-issue-submit {
  border-color: var(--dnk-navy) !important;
  background: var(--dnk-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.app-view #tab-punch .gn170-punch-hero :is(h1, h2, b, small, span, p),
html.gn-v170-batch1 .app-view #tab-history :is(#pwa-history-hero, .gn-b1-request-hero) :is(h1, h2, h3, b, small, span, p),
html.v170-batch2-enabled .app-view .gn170-b2-hero :is(h1, h2, h3, b, small, span, p),
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero :is(h1, h2, h3, b, small, span, p),
.gn170-b3-modal .gn170-b3-modal-hero :is(h1, h2, h3, b, small, span, p) {
  color: var(--dnk-navy) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
}

.app-view #tab-punch .gn170-punch-hero :is(.gn170-punch-brand, .gn170-punch-network),
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero :is(.gn-b1-hero-action, .hp153-photo-edit),
.gn170-b3-modal .gn170-b3-modal-hero [data-v15-close],
.gn170-b3-layer .pwa-secondary-header.gn170-b3-active-hero :is(button, .pwa-secondary-back) {
  border: 1px solid var(--dnk-line) !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  box-shadow: 0 8px 24px rgb(10 37 64 / 6%) !important;
}

html.gn-v170-batch1 .app-view #tab-history :is(#history-content, #v153-history-tools, #v153-notification-controls),
html.gn-v170-batch1 .app-view #tab-corrections ,
html.v170-batch2-enabled .app-view :is(.gn170-b2-content, .gn170-b2-paper),
.gn170-b3-layer #pwa-secondary-content,
.gn170-b3-modal .gn170-b3-modal-body {
  background-color: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
}

.gn170-b3-modal {
  background: #edf2f7 !important;
}

html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active #pwa-secondary-content.gn-b1-menu-page {
  background: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
}

html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active .gn-b1-menu-current {
  border: 1px solid var(--dnk-line) !important;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  box-shadow: 0 14px 38px rgb(10 37 64 / 7%) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.card, .list-card, .sheet-card, .confirm-card, .history-card, .pwa-page-card, .pwa-menu-card, .v153-card, .v170-card,
  .feature-card, .calendar-card, .settings-card, .issue-card,
  .hp153-card, .gn170-editorial-section:not(.gn170-site-rail),
  [data-v170-card], [data-v170-surface]) {
  border: 1px solid var(--dnk-line) !important;
  border-radius: var(--dnk-card-radius) !important;
  background: var(--dnk-white) !important;
  box-shadow: 0 13px 38px rgb(12 39 65 / 6%) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.btn, .hp153-punch, .pwa-page-primary, .v153-primary-action,
  .v170-primary-action, button[data-primary], .primary-action) {
  min-height: 54px;
  border-radius: var(--dnk-button-radius) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.btn-primary, .hp153-punch, .pwa-page-primary, .v153-primary-action,
  .v170-primary-action, button[data-primary], .primary-action) {
  border-color: var(--dnk-navy) !important;
  background: var(--dnk-navy) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgb(10 37 64 / 18%) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.btn-secondary, .btn-quiet, .text-button, .pwa-page-secondary) {
  border-color: var(--dnk-line) !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  box-shadow: none !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(input, textarea, select) {
  border: 1px solid rgb(10 37 64 / 12%) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  box-shadow: inset 0 1px 0 rgb(10 37 64 / 2%) !important;
}

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(input, textarea, select):focus {
  border-color: rgb(10 37 64 / 38%) !important;
  outline: 3px solid rgb(128 233 255 / 25%) !important;
  outline-offset: 1px;
}

.app-view .card-kicker,
.app-view .gn170-section-heading > p,
.app-view .hp153-card-head > p,
.pwa-secondary-layer :is(.eyebrow, .page-kicker, .card-kicker) {
  color: var(--dnk-muted) !important;
  font-family: var(--dnk-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
}

/* Home — the only moving background in the application. */
.app-view #tab-home {
  overflow-x: hidden;
  background: var(--dnk-bg) !important;
}

.app-view #pwa-home-v153 {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  min-height: calc(100dvh - 82px);
  padding: 0 0 112px !important;
  background: linear-gradient(180deg, #d8e5f0 0, var(--dnk-bg) 445px) !important;
}

.app-view #pwa-home-v153 .gn170-home-sheet {
  display: contents !important;
}

.app-view #pwa-home-v153 .hp153-hero {
  position: relative;
  order: 1;
  min-height: 412px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 38px 38px !important;
  overflow: hidden;
  background: var(--dnk-navy-deep) !important;
  box-shadow: none !important;
}

.dnk172-light-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #cdd9e7 url('/assets/pwa/denko-light-poster.jpg') 50% 50% / cover no-repeat;
  pointer-events: none;
}

.dnk172-light-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 24 42 / 58%) 0%, rgb(7 30 52 / 18%) 45%, rgb(237 242 247 / 9%) 73%, var(--dnk-bg) 100%),
    linear-gradient(100deg, rgb(10 37 64 / 30%), transparent 55%);
}

.dnk172-light-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dnk172-static-surface .dnk172-light-media { display: none !important; }

.app-view #pwa-home-v153 .hp153-photo-frame {
  z-index: 1 !important;
  background: transparent !important;
}

.app-view #pwa-home-v153 .hp153-hero-photo {
  opacity: .13 !important;
  mix-blend-mode: luminosity;
}

.app-view #pwa-home-v153 .gn170-hero-shade {
  background: transparent !important;
}

.app-view #pwa-home-v153 .gn170-hero-content {
  z-index: 3 !important;
  min-height: 412px;
  padding: max(24px, env(safe-area-inset-top)) 20px 44px !important;
  color: #fff !important;
}

.app-view #pwa-home-v153 .hp153-hero-top {
  margin-top: 72px !important;
}

.app-view #pwa-home-v153 .hp153-date {
  color: rgb(255 255 255 / 70%) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

.app-view #pwa-home-v153 .hp153-clock {
  margin-top: 4px;
  color: #fff !important;
  font-family: var(--dnk-mincho) !important;
  font-size: clamp(42px, 13vw, 58px) !important;
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  text-shadow: 0 8px 30px rgb(6 26 44 / 28%);
}

.app-view #pwa-home-v153 .gn170-hero-metrics {
  display: none !important;
}

.app-view #pwa-home-v153 .hp153-site-panel {
  position: absolute !important;
  right: 20px;
  bottom: 48px;
  left: 20px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .hp153-site {
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  color: #fff !important;
  font-size: clamp(23px, 7vw, 31px) !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis;
  text-shadow: 0 4px 22px rgb(6 26 44 / 28%);
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-site-address {
  margin-top: 7px !important;
  overflow: hidden;
  color: rgb(255 255 255 / 72%) !important;
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-site-meta {
  display: flex !important;
  gap: 7px !important;
  margin-top: 12px !important;
}

.app-view #pwa-home-v153 .hp153-site-meta > span {
  min-height: 26px;
  padding: 6px 10px !important;
  border: 1px solid rgb(255 255 255 / 22%) !important;
  border-radius: 999px !important;
  background: rgb(6 26 44 / 36%) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

.app-view #pwa-home-v153 #hp153-site-context-label,
.app-view #pwa-home-v153 #hp153-status-note {
  display: none !important;
}

.app-view #pwa-home-v153 .hp153-photo-edit,
.app-view #pwa-home-v153 .hp153-bell {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgb(255 255 255 / 22%) !important;
  border-radius: 50% !important;
  background: rgb(6 26 44 / 38%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .gn170-site-rail {
  position: relative;
  z-index: 7;
  order: 2;
  margin: -26px 0 0 !important;
  padding: 22px 0 12px !important;
  border: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: var(--dnk-bg) !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .gn170-site-rail-heading {
  min-height: 28px;
  padding: 0 20px !important;
}

.app-view #pwa-home-v153 .gn170-site-rail-heading > p {
  display: none !important;
}

.app-view #pwa-home-v153 .hp153-site-change {
  color: var(--dnk-navy) !important;
  font-family: var(--dnk-mincho) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.app-view #pwa-home-v153 .gn170-section-count {
  color: var(--dnk-muted) !important;
  font-size: 10px !important;
}

.app-view #pwa-home-v153 .gn170-site-rail-list {
  display: flex !important;
  gap: 12px !important;
  padding: 10px 20px 8px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.app-view #pwa-home-v153 .gn170-site-rail-list::-webkit-scrollbar { display: none; }

.app-view #pwa-home-v153 .gn170-site-option {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  grid-template-rows: 94px !important;
  flex: 0 0 min(250px, calc(100vw - 60px)) !important;
  height: 94px !important;
  min-height: 94px !important;
  max-height: 94px !important;
  padding: 0 !important;
  border: 1px solid rgb(10 37 64 / 8%) !important;
  border-radius: var(--dnk-card-radius) !important;
  overflow: hidden;
  scroll-snap-align: start;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  box-shadow: 0 12px 32px rgb(10 37 64 / 7%) !important;
}

.app-view #pwa-home-v153 .gn170-site-option-photo {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 92px !important;
  height: 94px !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: cover !important;
}

.app-view #pwa-home-v153 .gn170-site-option-copy {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 14px 13px !important;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  text-align: left !important;
}

.app-view #pwa-home-v153 .gn170-site-option-copy b,
.app-view #pwa-home-v153 .gn170-site-option-copy small {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-site-option-copy b {
  color: var(--dnk-navy) !important;
  font-family: var(--dnk-mincho) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.app-view #pwa-home-v153 .gn170-site-option-copy small {
  margin-top: 7px;
  color: var(--dnk-muted) !important;
  font-size: 9px !important;
}

.app-view #pwa-home-v153 .gn170-site-option-selected {
  top: 8px !important;
  right: 8px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background: var(--dnk-navy) !important;
  color: #fff !important;
  font-size: 7px !important;
}

.app-view #pwa-home-v153 .gn170-site-option[aria-selected="true"],
.app-view #pwa-home-v153 .gn170-site-option.is-selected {
  border-color: rgb(10 37 64 / 35%) !important;
  box-shadow: 0 14px 34px rgb(10 37 64 / 12%) !important;
}

.app-view #pwa-home-v153 .gn170-site-option :is(img, .gn170-site-option-photo) {
  filter: none !important;
}

.app-view #pwa-home-v153 .gn170-primary-note {
  order: 3;
  margin: 4px 20px 10px !important;
  color: var(--dnk-muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  text-align: center;
}

.app-view #pwa-home-v153 .gn170-primary-wrap {
  order: 4;
  margin: 0 !important;
  padding: 0 16px !important;
}

.app-view #pwa-home-v153 .hp153-punch {
  width: 100% !important;
  min-height: 88px !important;
  padding: 0 22px !important;
  border: 1px solid rgb(255 255 255 / 10%) !important;
  border-radius: var(--dnk-button-radius) !important;
  background: linear-gradient(145deg, #0c2c49 0%, var(--dnk-navy-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgb(10 37 64 / 20%) !important;
}

.app-view #pwa-home-v153 .hp153-punch > svg {
  width: 25px !important;
  height: 25px !important;
}

.app-view #pwa-home-v153 .hp153-punch-copy {
  align-items: flex-start !important;
}

.app-view #pwa-home-v153 .hp153-punch-site {
  color: rgb(255 255 255 / 62%) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
}

.app-view #pwa-home-v153 .hp153-punch-label {
  color: #fff !important;
  font-family: var(--dnk-mincho) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
}

.app-view #pwa-home-v153 .gn170-connection-row {
  order: 5;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  margin: 12px 20px 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dnk-line) !important;
  border-bottom: 1px solid var(--dnk-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .hp153-signal {
  justify-content: center;
  min-width: 0;
  color: var(--dnk-muted) !important;
  font-size: 9px !important;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-signal + .hp153-signal {
  border-left: 1px solid var(--dnk-line);
}

.app-view #pwa-home-v153 :is(.gn170-foreman-summary, .gn170-session-section,
  .gn170-today, .hp153-shortcuts, .hp153-summary-grid, .hp153-lower-grid) {
  order: 10;
  margin-right: 16px !important;
  margin-left: 16px !important;
}

.app-view #pwa-home-v153 .gn170-foreman-summary { order: 6; }
.app-view #pwa-home-v153 .gn170-session-section { order: 7; }
.app-view #pwa-home-v153 .gn170-today { order: 8; }
.app-view #pwa-home-v153 .hp153-shortcuts { order: 9; }

.app-view #pwa-home-v153 .gn170-editorial-section:not(.gn170-site-rail) {
  padding: 20px !important;
}

.app-view #pwa-home-v153 .gn170-foreman-grid {
  gap: 8px !important;
}

.app-view #pwa-home-v153 .gn170-foreman-stat {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
}

/* Static top-level tabs. */
.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections) {
  padding: max(28px, env(safe-area-inset-top)) 16px 112px !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections) > .section-head {
  margin: 10px 4px 26px !important;
  padding: 0 !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections) > .section-head h2 {
  color: var(--dnk-navy) !important;
  font-size: clamp(30px, 9vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

.app-view .segments {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--dnk-line) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: none !important;
}

.app-view .segments button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--dnk-muted) !important;
}

.app-view .segments button[aria-selected="true"] {
  background: var(--dnk-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Foreman is intentionally a read-only awareness surface. */
.app-view #tab-sites :is(.foreman-tabs, [data-v170-foreman-tabs]) {
  border: 1px solid var(--dnk-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.app-view #tab-sites :is(.foreman-stat, .foreman-attention-card,
  .site-card, .member-card, [data-v170-foreman-card]) {
  border: 1px solid var(--dnk-line) !important;
  border-radius: var(--dnk-card-radius) !important;
  background: #fff !important;
  box-shadow: 0 13px 38px rgb(12 39 65 / 6%) !important;
}

.app-view #tab-sites .gn170-foreman-view {
  background: linear-gradient(155deg, #fbfcfe 0%, var(--dnk-bg) 100%) !important;
}

.app-view #tab-sites :is(.gn170-foreman-landing-hero, .gn170-foreman-hero) {
  min-height: 246px !important;
  background-color: #e8eef5 !important;
  background-image: linear-gradient(145deg, #fbfdff 0%, #e1eaf3 62%, #d7e2ed 100%) !important;
  color: var(--dnk-navy) !important;
  box-shadow: none !important;
}

.app-view #tab-sites :is(.gn170-foreman-hero-shade) { display: none !important; }

.app-view #tab-sites :is(.gn170-foreman-landing-content, .gn170-foreman-hero-content,
  .gn170-foreman-identity, .gn170-foreman-identity span, .gn170-foreman-identity small,
  .gn170-foreman-meta, .gn170-foreman-hero-meta, .gn170-foreman-landing-content h1,
  .gn170-foreman-hero-content h1) {
  color: var(--dnk-navy) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
}

.app-view #tab-sites .gn170-foreman-identity img {
  border-color: rgb(10 37 64 / 10%) !important;
  background: #fff !important;
}

.app-view #tab-sites .gn170-foreman-paper {
  position: relative;
  z-index: 2;
  margin-top: -28px !important;
  border-radius: 30px 30px 0 0 !important;
  background: var(--dnk-bg) !important;
  color: var(--dnk-ink) !important;
}

.app-view #tab-sites .gn170-foreman-sticky-action {
  border: 1px solid var(--dnk-line) !important;
  border-radius: var(--dnk-card-radius) !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgb(10 37 64 / 7%) !important;
}

/* The Menu keeps its index layout but loses the inherited dark photo stage. */
.pwa-secondary-layer.gn-b1-menu-active {
  background: linear-gradient(155deg, #fbfcfe 0%, var(--dnk-bg) 100%) !important;
}

.pwa-secondary-layer.gn-b1-menu-active .pwa-secondary-header {
  background: #f5f8fb !important;
  color: var(--dnk-navy) !important;
}

.pwa-secondary-layer.gn-b1-menu-active .pwa-menu-hero {
  min-height: 232px !important;
  border: 0 !important;
  border-radius: 0 0 34px 34px !important;
  background-color: #e8eef5 !important;
  background-image: linear-gradient(145deg, #fbfdff 0%, #e1eaf3 62%, #d7e2ed 100%) !important;
  color: var(--dnk-navy) !important;
  box-shadow: none !important;
}

.pwa-secondary-layer.gn-b1-menu-active .pwa-menu-hero :is(h2, small, button, .gn-b1-menu-kicker) {
  color: var(--dnk-navy) !important;
  text-shadow: none !important;
}

.pwa-secondary-layer.gn-b1-menu-active .pwa-menu-avatar {
  border-color: rgb(10 37 64 / 16%) !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
}

.pwa-secondary-layer.gn-b1-menu-active .gn-b1-menu-current {
  border: 1px solid var(--dnk-line) !important;
  border-radius: var(--dnk-card-radius) !important;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  box-shadow: 0 14px 38px rgb(10 37 64 / 7%) !important;
}

/* Secondary screens: one consistent title plane, then quiet white cards. */
.pwa-secondary-layer {
  padding-bottom: max(104px, calc(84px + env(safe-area-inset-bottom))) !important;
}

.pwa-secondary-layer :is(.pwa-page-header, .pwa-detail-header,
  .pwa-secondary-header, [data-v170-page-header]) {
  min-height: 104px !important;
  padding: max(22px, env(safe-area-inset-top)) 18px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dnk-line) !important;
  background: transparent !important;
  color: var(--dnk-navy) !important;
  box-shadow: none !important;
}

.pwa-secondary-layer :is(.pwa-page-header, .pwa-detail-header,
  .pwa-secondary-header) :is(h1, h2) {
  color: var(--dnk-navy) !important;
  font-size: 28px !important;
  letter-spacing: .03em !important;
}

.pwa-secondary-layer :is(.pwa-page-back, .pwa-page-close,
  [data-pwa-back], [data-v170-back]) {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--dnk-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  box-shadow: 0 8px 24px rgb(10 37 64 / 6%) !important;
}

.pwa-secondary-layer :is(.pwa-page-body, .pwa-detail-body,
  .pwa-secondary-body, [data-v170-page-body]) {
  padding: 20px 16px 32px !important;
}

/* Menu is a quiet index, not a dashboard of competing cards. */
.pwa-secondary-layer[data-pwa-layer="menu"] :is(.pwa-menu-grid, .menu-grid),
.pwa-secondary-layer :is([data-pwa-menu-list], .v153-menu-list) {
  gap: 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--dnk-line) !important;
  border-radius: var(--dnk-card-radius) !important;
  background: #fff !important;
  box-shadow: var(--dnk-shadow) !important;
}

.pwa-secondary-layer :is(.pwa-menu-item, .menu-item, [data-pwa-page]) {
  border-radius: 0 !important;
}

/* Five fixed tabs. Opaque and readable; no glass blur. */
.app-view .bottom-nav,
.pwa-secondary-bottom-nav {
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  min-height: 82px !important;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid var(--dnk-line) !important;
  border-radius: 0 !important;
  background: rgb(255 255 255 / 98%) !important;
  box-shadow: 0 -14px 38px rgb(10 37 64 / 6%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.app-view .bottom-nav > button,
.pwa-secondary-bottom-nav > button {
  position: relative;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 8px 2px 5px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--dnk-faint) !important;
  box-shadow: none !important;
}

.app-view .bottom-nav > button :is(svg, .pwa-nav-icon),
.pwa-secondary-bottom-nav > button :is(svg, .pwa-nav-icon) {
  width: 21px !important;
  height: 21px !important;
  color: currentColor !important;
  stroke-width: 1.6 !important;
}

.app-view .bottom-nav > button > span,
.pwa-secondary-bottom-nav > button > span {
  color: currentColor !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.app-view .bottom-nav > button[aria-selected="true"],
.app-view .bottom-nav > button[aria-current="page"],
.pwa-secondary-bottom-nav > button[aria-selected="true"],
.pwa-secondary-bottom-nav > button[aria-current="page"] {
  background: rgb(10 37 64 / 6%) !important;
  color: var(--dnk-navy) !important;
}

.app-view .bottom-nav > button[aria-selected="true"]::before,
.app-view .bottom-nav > button[aria-current="page"]::before,
.pwa-secondary-bottom-nav > button[aria-selected="true"]::before,
.pwa-secondary-bottom-nav > button[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--dnk-navy);
  transform: translateX(-50%);
}

.app-view .bottom-nav > button[hidden],
.pwa-secondary-bottom-nav > button[hidden] { display: none !important; }

html[data-v170-shell="ready"] :is(.app-view .bottom-nav, .pwa-secondary-bottom-nav)[data-design-generation="v172-denko-light"] > button {
  color: var(--dnk-faint) !important;
  -webkit-text-fill-color: var(--dnk-faint) !important;
}

html[data-v170-shell="ready"] :is(.app-view .bottom-nav, .pwa-secondary-bottom-nav)[data-design-generation="v172-denko-light"] > button[aria-selected="true"],
html[data-v170-shell="ready"] :is(.app-view .bottom-nav, .pwa-secondary-bottom-nav)[data-design-generation="v172-denko-light"] > button[aria-current="page"] {
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
}

html[data-v170-shell="ready"] :is(.app-view .bottom-nav, .pwa-secondary-bottom-nav)[data-design-generation="v172-denko-light"] > button svg {
  display: block !important;
}

/* Sheets and dialogs inherit the same material language. */
.sheet,
.v15-modal,
.pwa-confirm-layer {
  background: rgb(6 26 44 / 50%) !important;
}

.sheet .sheet-card,
.v15-modal > :first-child,
.pwa-confirm-layer > :first-child {
  border-radius: 30px 30px 0 0 !important;
  background: #fff !important;
  color: var(--dnk-ink) !important;
  box-shadow: 0 -22px 60px rgb(6 26 44 / 18%) !important;
}

.sheet .sheet-handle { background: rgb(10 37 64 / 16%) !important; }

@media (min-width: 600px) {
  .app-view,
  .pwa-secondary-layer,
  .pwa-confirm-layer {
    max-width: 430px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-shadow: 0 0 80px rgb(10 37 64 / 10%);
  }

  .app-view .bottom-nav,
  .pwa-secondary-bottom-nav { width: 430px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dnk172-light-media video { display: none; }
}

/* Prototype parity correction.
 * The reference keeps Home cinematic and compresses every work control into the
 * lower 382px.  This block only changes presentation; the approved click,
 * selection, offline and persistence handlers remain the canonical ones. */
.app-view #pwa-home-v153 {
  min-height: calc(100dvh - 82px) !important;
  padding-bottom: 96px !important;
  background: var(--dnk-bg) !important;
}

.app-view #pwa-home-v153 .hp153-hero {
  width: 100% !important;
  height: 470px !important;
  min-height: 470px !important;
  border-radius: 0 !important;
}

.dnk172-static-surface .dnk172-light-media {
  display: block !important;
}

.dnk172-static-surface .dnk172-light-media video {
  display: none !important;
}

.app-view #pwa-home-v153 .hp153-photo-frame {
  display: none !important;
}

.app-view #pwa-home-v153 .gn170-hero-content {
  position: relative !important;
  min-height: 470px !important;
  padding: 0 !important;
}

.app-view #pwa-home-v153 .gn170-home-brand {
  position: absolute !important;
  z-index: 8 !important;
  top: max(22px, env(safe-area-inset-top)) !important;
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .gn170-home-brand-lockup {
  display: none !important;
}

.app-view #pwa-home-v153 .gn170-home-tools {
  display: flex !important;
  gap: 8px !important;
}

.app-view #pwa-home-v153 .hp153-photo-edit,
.app-view #pwa-home-v153 .hp153-bell {
  background: rgb(6 26 44 / 32%) !important;
}

.app-view #pwa-home-v153 .hp153-hero-top,
.app-view #pwa-home-v153 .hp153-hero-main {
  position: static !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-view #pwa-home-v153 .hp153-date {
  position: absolute !important;
  top: max(51px, calc(env(safe-area-inset-top) + 22px)) !important;
  left: 24px !important;
  margin: 0 !important;
  color: rgb(255 255 255 / 72%) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}

.app-view #pwa-home-v153 .hp153-clock {
  position: absolute !important;
  top: max(122px, calc(env(safe-area-inset-top) + 92px)) !important;
  left: 24px !important;
  margin: 0 !important;
  font-size: clamp(56px, 17vw, 70px) !important;
  line-height: .95 !important;
}

.app-view #pwa-home-v153 .hp153-site-panel {
  top: max(77px, calc(env(safe-area-inset-top) + 48px)) !important;
  right: 92px !important;
  bottom: auto !important;
  left: 24px !important;
  margin: 0 !important;
}

.app-view #pwa-home-v153 .hp153-site {
  font-size: clamp(21px, 6vw, 27px) !important;
  letter-spacing: .05em !important;
  line-height: 1.2 !important;
}

.app-view #pwa-home-v153 .hp153-site-address,
.app-view #pwa-home-v153 .hp153-site-meta {
  display: none !important;
}

.app-view #pwa-home-v153 .gn170-site-rail {
  order: 2;
  margin: 0 !important;
  padding: 12px 0 8px !important;
  border-radius: 0 !important;
  background: var(--dnk-bg) !important;
}

.app-view #pwa-home-v153 .gn170-site-rail-heading {
  min-height: 22px !important;
  padding: 0 24px !important;
}

.app-view #pwa-home-v153 .hp153-site-change {
  min-height: 22px !important;
  padding: 0 !important;
  font-family: var(--dnk-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
}

.app-view #pwa-home-v153 .gn170-site-rail-list {
  gap: 12px !important;
  padding: 8px 24px 4px !important;
}

.app-view #pwa-home-v153 .gn170-site-option {
  flex-basis: min(250px, calc(100vw - 72px)) !important;
  box-shadow: none !important;
}

.app-view #pwa-home-v153 .dnk172-home-state {
  order: 3;
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 7px 24px 6px;
  border-top: 1px solid var(--dnk-line);
  color: var(--dnk-ink);
}

.app-view #pwa-home-v153 .dnk172-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9db4c8;
}

.app-view #pwa-home-v153 .dnk172-home-state[data-state="working"] .dnk172-state-dot {
  background: #2f78bb;
  box-shadow: 0 0 0 4px rgb(47 120 187 / 9%);
}

.app-view #pwa-home-v153 .dnk172-home-state[data-state="completed"] .dnk172-state-dot {
  background: var(--dnk-success);
}

.app-view #pwa-home-v153 #dnk172-state-label {
  color: var(--dnk-navy);
  font-family: var(--dnk-mincho) !important;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.app-view #pwa-home-v153 #dnk172-state-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--dnk-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-primary-note {
  display: none !important;
}

.app-view #pwa-home-v153 .gn170-primary-wrap {
  order: 4;
  padding: 0 16px 8px !important;
}

.app-view #pwa-home-v153 .hp153-punch {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  min-height: 88px !important;
  padding: 12px 18px 24px !important;
  box-shadow: 0 12px 28px rgb(10 37 64 / 17%) !important;
}

.app-view #pwa-home-v153 .hp153-punch > svg,
.app-view #pwa-home-v153 .hp153-punch-arrow {
  display: none !important;
}

.app-view #pwa-home-v153 .hp153-punch-copy {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: center !important;
}

.app-view #pwa-home-v153 .hp153-punch-site,
.app-view #pwa-home-v153 .hp153-punch-label {
  display: inline !important;
  width: auto !important;
  overflow: hidden;
  color: #fff !important;
  font-family: var(--dnk-mincho) !important;
  font-size: clamp(18px, 5.6vw, 22px) !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-punch-site {
  display: none !important;
}

.app-view #pwa-home-v153[data-home-state="working"] .hp153-punch-site::after {
  content: "から";
}

.app-view #pwa-home-v153[data-home-state="not-entered"]:not(:has(#hp153-selected-site-summary[data-site-state="unselected"])) .hp153-punch-site::after {
  content: "へ";
}

.app-view #pwa-home-v153:has(#hp153-selected-site-summary[data-site-state="unselected"]) .hp153-punch-site {
  display: none !important;
}

.app-view #pwa-home-v153 .dnk172-punch-hint {
  position: absolute;
  right: 18px;
  bottom: 10px;
  left: 18px;
  color: rgb(255 255 255 / 58%) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-align: center;
}

.app-view #pwa-home-v153 .gn170-connection-row {
  order: 5;
  min-height: 42px;
  margin: 0 20px !important;
  padding: 8px 0 !important;
}

.app-view #pwa-home-v153 .gn170-foreman-summary { order: 6; }
.app-view #pwa-home-v153 .gn170-session-section { order: 7; }
.app-view #pwa-home-v153 .gn170-today { order: 8; }
.app-view #pwa-home-v153 .hp153-shortcuts { order: 9; }

/* Compact static screens from the same reference: small page caption and
 * working cards, instead of a second cinematic hero. */
.app-view #tab-punch .gn170-punch-hero,
html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero {
  min-height: 138px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero .gn-b1-brand {
  display: none !important;
}

html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero .gn-b1-hero-topline {
  min-height: 44px !important;
  justify-content: flex-end !important;
}

html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero .gn-b1-history-overlay {
  padding: max(16px, env(safe-area-inset-top)) 20px 16px !important;
}

html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero .gn-b1-hero-title {
  margin-top: -32px !important;
  padding-right: 74px !important;
}

html.gn-v170-batch1 .app-view #tab-history #pwa-history-hero .gn-b1-hero-title h2 {
  font-size: 29px !important;
}

html.gn-v170-batch1 .app-view #tab-history .gn-b1-request-hero,
html.gn-v170-batch1 .app-view #tab-history[data-gn-b1-history-mode="notifications"] #v153-notification-intro {
  min-height: 132px !important;
}

.app-view #tab-sites :is(.gn170-foreman-landing-hero, .gn170-foreman-hero) {
  min-height: 138px !important;
  background: transparent !important;
}

.app-view #tab-sites :is(.gn170-foreman-identity, .gn170-foreman-landing-brand) {
  display: none !important;
}

.app-view #tab-sites .gn170-foreman-paper {
  margin-top: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.pwa-secondary-layer.gn-b1-menu-active .pwa-menu-hero {
  min-height: 150px !important;
  border-radius: 0 0 24px 24px !important;
  background: transparent !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections) > .section-head {
  margin-bottom: 16px !important;
}

.app-view :is(#tab-punch, #tab-history, #tab-sites, #tab-corrections) > .section-head h2 {
  font-size: clamp(27px, 8vw, 34px) !important;
}

@media (max-width: 359px) {
  .app-view #pwa-home-v153 .hp153-hero {
    height: 450px !important;
    min-height: 450px !important;
  }

  .app-view #pwa-home-v153 .gn170-hero-content {
    min-height: 450px !important;
  }

  .app-view #pwa-home-v153 .hp153-site,
  .app-view #pwa-home-v153 .hp153-punch-site,
  .app-view #pwa-home-v153 .hp153-punch-label {
    font-size: 18px !important;
  }
}