/* Genba Nippo v1.7.3 — final owner-review refinement layer. */
:root {
  --dnk-bg: #f3f6f8;
  --dnk-bg-2: #eaf0f4;
  --dnk-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --dnk-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  /* Resolve every legacy component token to Claude's two approved stacks.
     Without these aliases, higher-specificity v153/v170 rules can revive the
     older Kaku Gothic / Yu Gothic / Noto Serif fallbacks inside one screen. */
  --gn-font-sans: var(--dnk-sans);
  --gn-font-mincho: var(--dnk-mincho);
  --hd-sans: var(--dnk-sans);
  --hd-serif: var(--dnk-mincho);
  --v153-font: var(--dnk-sans);
  --v161-sans: var(--dnk-sans);
  --v161-serif: var(--dnk-mincho);
  --hp153-sans: var(--dnk-sans);
  --hp153-serif: var(--dnk-mincho);
  --gn-b2-font-sans: var(--dnk-sans);
  --gn-b2-font-mincho: var(--dnk-mincho);
  --dnk-atmosphere: url('/assets/pwa/denko-atmosphere-v173.png');
}

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

:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal),
:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal) * {
  font-family: var(--dnk-sans) !important;
  font-synthesis: none;
}

: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-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: 400 !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;
}

#pwa-secondary-layer.gn170-b3-layer,
#pwa-secondary-layer.gn-b1-menu-active {
  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;
}

.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; }
}

/* v1.7.7 critical workflow repair: the Application surface stays compact,
   legible and predictable at every supported phone width. */

#tab-corrections .application-network-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgb(10 37 64 / 11%);
  border-radius: 14px;
  background: rgb(255 255 255 / 88%);
  color: var(--dnk-muted) !important;
  font-family: var(--dnk-sans) !important;
  font-size: 12px;
  line-height: 1.7;
}

#tab-corrections .application-network-note[data-online="false"] {
  border-color: rgb(151 105 28 / 24%);
  background: #fff7e7;
  color: #6b4b12 !important;
}

/* A grant date is operational information, not decorative copy.  Keep the
   complete YYYY-MM-DD visible instead of inheriting the legacy ellipsis. */

/* Emergency off-site checkout is a deliberate exception with its own
   confirmation, reason and administrator-review warning. */
#emergency-out-sheet { z-index: 2300 !important; }

#emergency-out-sheet .emergency-out-card {
  width: min(calc(100% - 28px), 430px) !important;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
  padding: 22px clamp(16px, 5vw, 24px) max(22px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0 !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  font-family: var(--dnk-sans) !important;
}

#emergency-out-sheet .sheet-symbol.emergency {
  background: #fff0eb !important;
  color: #8b3526 !important;
  font-family: var(--dnk-mincho) !important;
}

#emergency-out-sheet :is(.result-title, .result-sub, .confirm-row, .field, textarea, button) {
  font-family: var(--dnk-sans) !important;
}

#emergency-out-sheet .result-title {
  margin-bottom: 8px !important;
  font-size: clamp(24px, 7vw, 30px) !important;
  font-weight: 500 !important;
}

#emergency-out-sheet .result-sub { line-height: 1.75 !important; }

#emergency-out-sheet .emergency-out-summary {
  margin: 16px 0 !important;
  overflow: hidden;
  border: 1px solid rgb(10 37 64 / 9%);
  border-radius: 18px;
  background: #f7f9fb;
}

#emergency-out-sheet .emergency-out-summary .confirm-row {
  min-width: 0;
  padding: 12px 14px;
}

#emergency-out-sheet .emergency-out-summary .confirm-row b {
  min-width: 0;
  max-width: 62%;
  overflow-wrap: anywhere;
  text-align: right;
}

#emergency-out-sheet .emergency-out-reason-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--dnk-muted);
  font-size: 12px;
}

#emergency-out-sheet #emergency-out-reason {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid rgb(10 37 64 / 16%);
  border-radius: 16px;
  background: #f7f9fb;
  color: var(--dnk-navy);
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

#emergency-out-sheet .sheet-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#emergency-out-sheet .sheet-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
}

#emergency-out-sheet #btn-confirm-emergency-out {
  border-color: #8b3526 !important;
  background: #8b3526 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 359px) {
  #emergency-out-sheet .sheet-actions { grid-template-columns: 1fr !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: 400; }
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: 400 !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: 400 !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;
  }
}

/* The Application tab owns correction requests. */
#tab-corrections > .section-head {
  display: flex !important;
  order: 0 !important;
  margin: max(22px, env(safe-area-inset-top)) 20px 14px !important;
  padding: 0 !important;
}

#tab-corrections > .section-head h2 {
  margin: 2px 0 0 !important;
  color: var(--dnk-navy) !important;
  font-family: var(--dnk-mincho) !important;
  font-size: clamp(28px, 8vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

#tab-corrections .application-switcher {
  position: relative;
  z-index: 3;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 20px 18px !important;
  padding: 4px !important;
  border: 1px solid rgb(10 37 64 / 9%) !important;
  border-radius: 20px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: 0 10px 30px rgb(10 37 64 / 5%) !important;
}

#tab-corrections .application-switcher > button {
  min-width: 0 !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--dnk-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#tab-corrections .application-switcher > button[aria-selected="true"] {
  background: var(--dnk-navy) !important;
  color: #fff !important;
}

#tab-corrections .application-panel[hidden] { display: none !important; }

#tab-corrections #application-correction-panel {
  min-width: 0 !important;
  padding: 0 20px max(116px, calc(92px + env(safe-area-inset-bottom))) !important;
}

#tab-corrections #application-correction-content {
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#tab-corrections #application-correction-panel .application-intro {
  margin: 0 2px 14px !important;
  color: var(--dnk-muted) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}

#tab-corrections #application-correction-panel details.apply-card,
#tab-corrections #application-correction-panel details.apply-card > summary {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

#tab-corrections #application-correction-panel details.apply-card {
  overflow: hidden !important;
  border: 1px solid rgb(10 37 64 / 9%) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgb(10 37 64 / 6%) !important;
}

#tab-corrections #application-correction-panel details.apply-card > summary {
  isolation: auto !important;
  min-height: 64px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--dnk-navy) !important;
  font-size: 15px !important;
}

/* Batch 1 gives its old full-screen CTA an absolutely positioned navy
   pseudo-layer.  This summary now lives inside the Application card, so the
   legacy layer must not escape and repaint the whole screen. */
#tab-corrections #application-correction-panel details.apply-card > summary {
  display: none !important;
  content: none !important;
}

#tab-corrections #application-correction-panel #correction-form {
  padding: 4px 18px 20px !important;
}

#tab-corrections #application-correction-panel .section-head.minor {
  margin: 24px 0 10px !important;
  padding: 0 2px !important;
}

#tab-history :is(.gn-b1-attendance-primary, .gn-b1-request-primary, .gn-b1-request-hero),
#pwa-secondary-content.gn-b1-menu-page :is(.dnk173-request-correction) {
  display: none !important;
}

/* v1.7.5 Claude typography lock: identical operational weight on every app
   surface.  Older high-specificity v153/v170 rules otherwise make the same
   navigation or segmented control look like a different font. */
html body .app-view .bottom-nav > button span,
html body .pwa-secondary-layer .bottom-nav > button span,
html.gn-v170-batch1 body .gn-b1-menu-page .gn-b1-menu-ledger-item,
html.gn-v170-batch1 body .gn-b1-menu-page .gn-b1-menu-ledger-item > b,
html body .app-view #tab-corrections .application-switcher > button {
  font-family: var(--dnk-sans) !important;
  font-weight: 400 !important;
}

html body .app-view #tab-corrections > .section-head h2 {
  font-family: var(--dnk-mincho) !important;
  font-weight: 400 !important;
}

/* Keep the existing history-photo picker available without the legacy
   full-height rail shape. */
#tab-history #pwa-history-hero #v153-history-photo {
  position: absolute !important;
  inset: 18px 18px auto auto !important;
  z-index: 5 !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 88px !important;
  height: 40px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border: 1px solid rgb(10 37 64 / 10%) !important;
  border-radius: 20px !important;
  background: rgb(255 255 255 / 94%) !important;
  color: var(--dnk-navy) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  box-shadow: none !important;
}

#tab-history #pwa-history-hero #v153-history-photo-message {
  position: absolute !important;
  inset: 66px 18px auto auto !important;
  z-index: 5 !important;
  width: auto !important;
  max-width: 180px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 94%) !important;
  color: var(--dnk-muted) !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

#tab-history #pwa-history-hero #v153-history-photo-message:empty {
  display: none !important;
}

/* The menu header is an overlay.  Keep the identity row fully below it while
   preserving the same compact hero height on browsers without a safe area. */
html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active
  #pwa-secondary-content.gn-b1-menu-page .pwa-menu-hero {
  padding-top: max(112px, calc(88px + env(safe-area-inset-top))) !important;
  padding-bottom: 38px !important;
}

/* Give the notification title its own row below the 44px back control. */
html.gn-v170-batch1 .app-view
  #tab-history[data-gn-b1-history-mode="notifications"] #v153-notification-intro {
  min-height: 240px !important;
}

/* Issue reporting is a closeable full-screen sheet, not a sixth tab.  Keep the
   underlying fixed navigation completely outside its visual/hit-test plane. */
body > .v15-modal.gn170-b3-modal:not([hidden]) {
  position: fixed !important;
  z-index: 2000 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  isolation: isolate;
}

@media (max-width: 359px) {
  #tab-corrections .application-switcher { margin-right: 14px !important; margin-left: 14px !important; }
  #tab-corrections #application-correction-panel { padding-right: 14px !important; padding-left: 14px !important; }
}

/* v1.7.6 owner-review integrity corrections.
   This layer is deliberately limited to presentation and hit areas.  It does
   not alter attendance, PIN, UUID, offline queue, site or application data. */
:root {
  --dnk-muted: #405a70;
  --dnk-faint: #52697d;
  --gn-text-muted: #405a70;
  --gn-text-quiet: #405a70;
  --v153-muted: #405a70;
}

/* Operational chips and statuses use the approved Sans stack.  Mincho remains
   reserved for page titles, presentation headings, clocks and state words. */
:is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal)
  :is(.status-label, [data-v170-status], .segments button, .bottom-nav button) {
  font-family: var(--dnk-sans) !important;
  font-weight: 400 !important;
}

/* Home summary cards previously had a visible border but no inner padding,
   leaving every label and action only one pixel from the edge. */
.app-view #pwa-home-v153 :is(.hp153-summary-grid, .hp153-lower-grid) .hp153-card {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(16px, 4.5vw, 20px) !important;
  overflow: hidden !important;
}

.app-view #pwa-home-v153 .hp153-summary-grid .hp153-card + .hp153-card {
  margin-top: 12px !important;
}

.app-view #pwa-home-v153 .hp153-card-head {
  width: 100%;
  min-width: 0;
  column-gap: 12px;
}

.app-view #pwa-home-v153 .hp153-card-head h2,
.app-view #pwa-home-v153 .hp153-card-body,
.app-view #pwa-home-v153 .hp153-personal-entry,
.app-view #pwa-home-v153 .hp153-record-list,
.app-view #pwa-home-v153 .hp153-record-list li,
.app-view #pwa-home-v153 .hp153-record-text {
  min-width: 0;
  max-width: 100%;
}

.app-view #pwa-home-v153 .hp153-card-head h2,
.app-view #pwa-home-v153 .hp153-empty {
  overflow-wrap: anywhere;
}

.app-view #pwa-home-v153 :is(.hp153-card-link, .hp153-add) {
  min-width: 44px;
  min-height: 44px;
  padding-right: 8px !important;
  padding-left: 8px !important;
  font-size: 12px !important;
}

.app-view #pwa-home-v153 .hp153-record-list li {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}

.app-view #pwa-home-v153 .hp153-record-list time {
  font-size: clamp(18px, 5.6vw, 22px) !important;
}

.app-view #pwa-home-v153 .hp153-record-text {
  display: block;
  overflow: hidden;
  font-size: clamp(16px, 4.8vw, 19px) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The site change action is a real control, not a 24 x 22px caption. */
.app-view #pwa-home-v153 .gn170-site-rail-heading {
  min-height: 44px !important;
  align-items: center !important;
}

.app-view #pwa-home-v153 .hp153-site-change {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
}

.app-view #pwa-home-v153 #gn170-site-count {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  opacity: 1 !important;
}

/* Restore information that became white-on-light after the notification hero
   was changed from a photograph to the approved light atmosphere. */
html.gn-v170-batch1 .app-view
  #tab-history[data-gn-b1-history-mode="notifications"] .gn-b1-round-action {
  background: var(--dnk-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.gn-v170-batch1 body[data-pwa-history-mode="notifications"] .app-view
  #tab-history button.gn-b1-hero-action.gn-b1-round-action {
  background: var(--dnk-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.gn-v170-batch1 .app-view
  #tab-history[data-gn-b1-history-mode="notifications"] :is(.gn-b1-notification-meta, .v153-notification-copy > small) {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

html.gn-v170-batch1 .app-view
  #tab-history[data-gn-b1-history-mode="notifications"] .v153-notification-card p {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 12px !important;
}

html.gn-v170-batch1 .app-view
  #tab-history[data-gn-b1-history-mode="notifications"] .v153-notification-card time {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 11px !important;
}

/* Minimum mobile hit areas. */
#tab-history #pwa-history-hero #v153-history-photo {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 22px !important;
}

.app-view .segments button {
  min-height: 44px !important;
}

.gn170-b3-shortcut-row [data-shortcut-move] {
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 12px !important;
}

/* Remove the off-screen paint placeholder from the three read-only worker
   rows.  The list is short, and retaining real content is more important than
   the generic long-list optimization here. */
.app-view #tab-sites.gn170-foreman-root #foreman-attendance-list .list-card {
  min-height: 0 !important;
  padding: 20px 0 !important;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dnk-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-view #tab-sites.gn170-foreman-root #foreman-attendance-list .list-card:last-child {
  border-bottom: 0 !important;
}

.app-view #tab-sites.gn170-foreman-root
  :is(.gn170-site-breakdown-row p, #foreman-attendance-list .list-card p, .gn170-helper,
  #gn170-attendance-readonly-note, #foreman-attendance-list::before,
  .gn170-attendance-counts > .summary-card > span) {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

/* Supporting text remains quiet, but never faint enough to disappear. */
.app-view :is(.card-kicker, .gn170-section-heading > p, .hp153-card-head > p),
.app-view :is(.hp153-shortcuts-head > p, .gn170-eyebrow, .gn170-foreman-hero-meta),
.pwa-secondary-layer :is(.eyebrow, .page-kicker, .card-kicker, .gn170-b3-section-label, .gn170-b3-eyebrow) {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

.app-view #pwa-home-v153 :is(#hp153-date, #gn170-site-count, #dnk172-state-meta) {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

.app-view #pwa-home-v153 #hp153-date {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 5px rgb(6 26 44 / 72%) !important;
}

html.gn-v170-batch1 body .app-view
  #tab-history #pwa-history-hero button.gn-b1-hero-action.gn-b1-round-action {
  background: var(--dnk-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.gn-v170-batch1 body .app-view
  #tab-history#tab-history#tab-history button.gn-b1-hero-action.gn-b1-round-action {
  background: var(--dnk-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.gn170-b3-settings-row small,
.gn170-b3-settings-page > p,
.pwa-page-note.gn170-b3-note {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

.app-view .bottom-nav > button > span,
.pwa-secondary-bottom-nav > button > span {
  font-size: 11px !important;
}

/* v1.7.6 integrity fixes: all text inside bordered surfaces keeps a real
   mobile-safe inset instead of touching a 1px border. */
.app-view #tab-punch .pwa-site-choice > span:nth-child(2) {
  padding: 15px 16px 16px !important;
}

html.gn-v170-batch1 .app-view #tab-corrections details.apply-card[open] {
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 20px !important;
}

.gn170-b3-shortcut-row {
  box-sizing: border-box !important;
  padding: 12px !important;
}

/* A sticky save action covered the third visibility switch at the initial
   iPhone fold.  Keep it in the modal's scroll flow so every switch remains
   reachable and unobscured. */
.gn170-b3-shortcuts #v15-shortcut-save {
  position: relative !important;
  bottom: auto !important;
}

/* The reference menu profile action was 10px.  Controls never use microcopy. */
html.gn-v170-batch1 .gn-b1-menu-page .pwa-menu-hero > button {
  font-size: 11px !important;
}

/* The Denko surface is intentionally light, so the former photo-white logout
   copy must use the approved navy hierarchy. */
.gn170-b3-logout .gn170-b3-logout-card .gn170-b3-eyebrow,
.gn170-b3-logout .gn170-b3-logout-card #pwa-logout-title {
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
}

.gn170-b3-logout .gn170-b3-logout-card #pwa-logout-description {
  color: var(--dnk-muted) !important;
  -webkit-text-fill-color: var(--dnk-muted) !important;
}

/* History metadata must clear WCAG AA on every alternating paper surface. */
html.gn-v170-batch1 .app-view #tab-history
  .gn-b1-ledger-row :is(.timeline-meta) {
  color: #38536a !important;
  -webkit-text-fill-color: #38536a !important;
  opacity: 1 !important;
}

html.gn-v170-batch1 .app-view #tab-history .timeline-date {
  gap: 8px !important;
}

/* Third-party map attribution remains readable without overpowering the map. */
.app-view #tab-sites .leaflet-control-attribution a {
  font-size: 11px !important;
}

/* Readability floor for non-interactive metadata.  These selectors cover the
   9px/10px reference microcopy without changing display titles or controls. */
.app-view :is(small, dt),
.pwa-secondary-layer :is(small, dt),
.gn170-b3-modal :is(small, dt),
.gn170-b3-logout :is(small, dt) {
  font-size: 11px !important;
}

.app-view :is(
  [class*="kicker"],
  [class*="eyebrow"],
  [class*="section-label"],
  .gn170-b3-row-number,
  .gn-b1-history-period,
  .gn-b1-history-count,
  .weekday
),
.pwa-secondary-layer :is([class*="kicker"], [class*="eyebrow"], [class*="section-label"]),
.gn170-b3-modal :is([class*="kicker"], [class*="eyebrow"], [class*="section-label"]),
.gn170-b3-logout :is([class*="kicker"], [class*="eyebrow"], [class*="section-label"]) {
  font-size: 11px !important;
}

.app-view :is(
  #gn170-punch-site-count,
  #gn170-punch-gps,
  #gn170-punch-queue,
  #gn170-punch-network,
  #gn170-punch-visible-count,
  #pwa-site-reveal-status,
  #gn170-foreman-meta,
  #gn170-delete-address
) {
  font-size: 11px !important;
}

.app-view :is(
  .gn170-clockout-step-list > p,
  .gn170-clockout-session > p,
  .gn170-clockout-summary > p,
  .gn170-clockout-steps span,
  .gn170-punch-sites-head > span,
  .gn170-punch-sites-head > small,
  .confirm-row > span,
  .range-labels > span
) {
  font-size: 11px !important;
}

.app-view :is(.field, .gn170-b3-field, .gn170-b2-field, .gn170-clockout-field) > span,
.pwa-secondary-layer :is(.field, .gn170-b3-field, .gn170-b2-field) > span,
.gn170-b3-modal .gn170-b3-field > span,
.app-view .wizard-step label,
.app-view #site-confirm .confirm-row > span {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.app-view #tab-sites .leaflet-control-attribution {
  font-size: 11px !important;
}

/* Higher-specificity readability floor for legacy selectors that also use
   !important. */
.app-view #tab-punch .gn170-punch-sites-head :is(span, small),
.app-view #tab-punch #gn170-punch-visible-count,
.app-view #tab-punch #pwa-site-reveal-status {
  font-size: 11px !important;
}

.app-view #work-sheet :is(.gn170-clockout-session p, .work-counter span) {
  font-size: 11px !important;
}

.app-view #work-sheet [data-gn170-clockout-site] {
  font-size: 11px !important;
}

.app-view #tab-sites.gn170-foreman-root .gn170-radius-scale,
.app-view #tab-sites.gn170-foreman-root #gn170-calendar-weekdays > span {
  font-size: 11px !important;
}

.app-view #tab-sites.gn170-foreman-root
  #site-wizard[data-gn170-wizard-step="2"] .leaflet-control-attribution,
.app-view #tab-sites.gn170-foreman-root
  #site-wizard[data-gn170-wizard-step="2"] .leaflet-control-attribution :is(a, span) {
  font-size: 11px !important;
}

/* v1.7.6 narrow-phone integrity pass.
   Actions remain in the scroll flow so they can never cover the field that
   the owner is editing.  The underlying click handlers and state contract are
   unchanged. */
.app-view #work-sheet .gn170-clockout-pane .sheet-actions,
.gn170-b3-issue #v15-issue-submit {
  position: relative !important;
  z-index: auto !important;
  bottom: auto !important;
}

/* The compact secondary column inherited 25px inline padding from the legacy
   pill button, leaving only 54px for a four-character label at 375/390px. */
.app-view #work-sheet .gn170-clockout-pane #btn-edit-work {
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-size: 17px !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

/* content-visibility's 110px intrinsic placeholder was shorter than the
   rendered attendance rows on a 320px WebKit viewport, so later rows painted
   over their predecessors.  This fixture contains a short operational list;
   use its real measured height. */
.app-view #tab-history .history-content > .timeline-card {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* Site deletion copy is the flexible column.  Without min-width:0 the Japanese
   site name forced the row several pixels beyond the iPhone SE viewport. */
.app-view #tab-sites.gn170-foreman-root .gn170-delete-site > div:last-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.app-view #tab-sites.gn170-foreman-root
  .gn170-delete-site :is(#gn170-delete-name, #gn170-delete-address) {
  width: 100% !important;
  max-width: 100% !important;
}

/* High-specificity legacy declarations still left visible 9px labels behind.
   Keep every user-facing navigation/status/support label at the 11px floor. */
html.gn-v170-batch1 .gn-b1-menu-page
  .pwa-menu-card.gn-b1-menu-ledger-item::before,
.app-view :is(.card-kicker, .gn170-section-heading > p, .hp153-card-head > p),
.pwa-secondary-layer :is(.eyebrow, .page-kicker, .card-kicker),
.app-view #pwa-home-v153 :is(
  #hp153-site-context-label,
  .gn170-section-count,
  .gn170-site-option-copy small,
  .hp153-punch-site,
  .hp153-signal,
  .dnk172-punch-hint
),
.app-view .bottom-nav > button > span,
.pwa-secondary-bottom-nav > button > span,
#tab-history #pwa-history-hero #v153-history-photo-message {
  font-size: 11px !important;
}

.app-view #pwa-home-v153 :is(.hp153-punch-site, .dnk172-punch-hint) {
  color: rgb(255 255 255 / 82%) !important;
  -webkit-text-fill-color: rgb(255 255 255 / 82%) !important;
}

@media (max-width: 350px) {
  /* Three independently sized flex children previously totalled more than the
     276px heading rail.  An explicit grid keeps the count inside both edges. */
  .app-view #pwa-home-v153 .gn170-site-rail-heading {
    display: grid !important;
    grid-template-columns: auto minmax(44px, 1fr) auto !important;
    gap: 8px !important;
  }

  .app-view #pwa-home-v153 .hp153-site-change {
    width: auto !important;
    min-width: 44px !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  .app-view #pwa-home-v153 #gn170-site-count {
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-self: end !important;
  }
}

@media (min-width: 351px) and (max-width: 374px) {
  .app-view #pwa-home-v153 .gn170-site-rail-heading {
    display: grid !important;
    grid-template-columns: auto minmax(44px, 1fr) auto !important;
    gap: 8px !important;
  }

  .app-view #pwa-home-v153 .hp153-site-change {
    width: auto !important;
    min-width: 44px !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  .app-view #pwa-home-v153 #gn170-site-count {
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-self: end !important;
  }
}

/* A 470px hero leaves the 88px attendance action underneath the persistent
   navigation on compact-height 360px devices.  The artwork and all hero copy
   remain intact at a 390px presentation height. */
@media (min-width: 351px) and (max-width: 374px) and (max-height: 800px) {
  .app-view #pwa-home-v153 .hp153-hero {
    height: 390px !important;
    min-height: 390px !important;
  }

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

@media (max-width: 360px) {
  /* Compact the whitespace, never the 60px inputs or 62px actions. */
  .app-view #tab-sites.gn170-foreman-root #site-wizard .field {
    margin-bottom: 24px !important;
  }

  .app-view #tab-sites.gn170-foreman-root #site-wizard .wizard-actions {
    margin-top: 12px !important;
  }

  .app-view #tab-sites.gn170-foreman-root .gn170-delete-label {
    margin-top: 14px !important;
  }

  /* Destructive-state copy must stay legible as one control label even when
     iOS text enlargement is set to 120%. */
  .app-view #tab-sites.gn170-foreman-root
    .gn170-delete-actions #gn170-delete-confirm {
    font-size: 15px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* The correction form must fit above the persistent navigation on the largest
   iPhone profile as well as the compact profiles.  The source fields request
   two rows, so 84px keeps a comfortable writing area while preventing the
   submit action from being painted underneath the navigation. */
html.gn-v170-batch1 body .app-view #tab-corrections
  #application-correction-panel #correction-form .field {
  margin-bottom: 10px !important;
}

html.gn-v170-batch1 body .app-view #tab-corrections
  #application-correction-panel #correction-form .field > span {
  margin-bottom: 8px !important;
}

html.gn-v170-batch1 body .app-view #tab-corrections
  #application-correction-panel #correction-form textarea {
  height: 84px !important;
  min-height: 84px !important;
}

/* A closed request card must remove its form from both layout and the focus
   tree.  Older card styling overrode the user-agent details rule, leaving the
   invisible submit underneath the bottom navigation. */
html.gn-v170-batch1 body .app-view #tab-corrections
  #application-correction-panel details.apply-card:not([open]) #correction-form {
  display: none !important;
}

@media (min-width: 376px) and (max-width: 393px) and (max-height: 852px) {
  /* Keep all five labels, full-size inputs and a two-line writing area above
     the persistent navigation on 390/393px iPhones. */
  html.gn-v170-batch1 body .app-view #tab-corrections
    #application-correction-panel #correction-form .field {
    margin-bottom: 4px !important;
  }

  html.gn-v170-batch1 body .app-view #tab-corrections
    #application-correction-panel #correction-form .field > span {
    margin-bottom: 4px !important;
  }

  html.gn-v170-batch1 body .app-view #tab-corrections
    #application-correction-panel #correction-form textarea {
    height: 72px !important;
    min-height: 72px !important;
  }

  html.gn-v170-batch1 body .app-view #tab-corrections > .section-head {
    margin-top: max(12px, env(safe-area-inset-top)) !important;
    margin-bottom: 10px !important;
  }

  html.gn-v170-batch1 body .app-view #tab-corrections .application-switcher {
    margin-bottom: 10px !important;
  }

  html.gn-v170-batch1 body .app-view #tab-corrections
    #application-correction-panel .application-intro {
    margin-bottom: 8px !important;
  }
}

/* v1.7.8 — no translucent tab reveal.  The legacy v172 fade starts every
   newly selected panel at opacity 0, exposing the old cream shell for 160ms
   and making a synchronous tab change feel delayed.  Navigation and panels
   now paint their final state in the same frame. */
html body .app-view .tab-panel:not([hidden]),
html body .pwa-secondary-layer:not([hidden]),
html body .pwa-confirm-layer:not([hidden]) {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

html body .app-view .tab-panel,
html body .app-view .tab-panel *,
html body .pwa-secondary-layer,
html body .pwa-secondary-layer *,
html body .pwa-confirm-layer,
html body .pwa-confirm-layer *,
html body .app-view .bottom-nav > button {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

/* v179 PIN atelier glass.  The previous pale sheet flattened both the motion
   and the glass into one milky surface.  This keeps one blur layer, moves the
   optical depth into the background plate, and lets restrained motion travel
   behind the controls without multiplying GPU effects on every key. */
html[data-v170-shell="ready"] #view-pin.auth-view {
  --gn170-pin-key-size: clamp(68px, 18.2vw, 72px);
  background:
    radial-gradient(circle at 12% 4%, rgb(98 184 230 / 13%), transparent 34%),
    radial-gradient(circle at 92% 88%, rgb(210 137 66 / 10%), transparent 28%),
    linear-gradient(180deg, rgb(1 13 23 / 12%), rgb(1 10 18 / 38%)),
    url('/assets/pwa/denko-pin-atelier-v179.jpg') 50% 50% / cover no-repeat !important;
  color: #f2f7fa;
  color-scheme: dark;
}

html[data-v170-shell="ready"] #view-pin.auth-view::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 11 20 / 18%), transparent 34%, rgb(0 9 16 / 28%)),
    radial-gradient(ellipse at 50% 48%, rgb(11 42 59 / 5%) 0 24%, rgb(0 9 17 / 32%) 82%);
  content: "";
  pointer-events: none;
}

html[data-v170-shell="ready"] #view-pin.auth-view::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 5%);
  background: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / 3%) 47%, transparent 72%);
  content: "";
  pointer-events: none;
}

html[data-v170-shell="ready"] #view-pin .dnk178-pin-atmosphere {
  position: absolute;
  z-index: 0;
  inset: -6%;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}

html[data-v170-shell="ready"] #view-pin .dnk178-pin-atmosphere video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .24;
  filter: hue-rotate(-55deg) saturate(.62) brightness(.72) contrast(1.22);
  mix-blend-mode: screen;
  transform: scale(1.08);
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 24%) 48%, rgb(0 0 0 / 68%));
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 24%) 48%, rgb(0 0 0 / 68%));
}

html[data-v170-shell="ready"] #view-pin .pin-wrap {
  position: relative;
  z-index: 2;
  width: min(100%, 352px);
  padding: clamp(22px, 3.2dvh, 28px) clamp(18px, 4.8vw, 24px) clamp(18px, 2.8dvh, 24px) !important;
  overflow: hidden;
  border: 1px solid rgb(231 245 252 / 23%) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgb(12 38 53 / 46%), rgb(4 20 31 / 30%)) !important;
  box-shadow:
    0 34px 86px rgb(0 7 14 / 54%),
    inset 0 1px 0 rgb(255 255 255 / 27%),
    inset 0 -1px 0 rgb(255 255 255 / 5%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(128%);
  backdrop-filter: blur(12px) saturate(128%);
}

html[data-v170-shell="ready"] #view-pin .pin-wrap::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 62%), transparent);
  content: "";
  pointer-events: none;
}

html[data-v170-shell="ready"] #view-pin .brand.compact {
  margin-bottom: clamp(22px, 4dvh, 32px);
}

html[data-v170-shell="ready"] #view-pin .brand.compact h1 {
  color: #f4f8fb;
  font-family: var(--dnk-mincho) !important;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .09em;
  text-shadow: 0 1px 18px rgb(0 0 0 / 28%);
}

html[data-v170-shell="ready"] #view-pin .brand.compact small {
  color: rgb(224 237 245 / 62%);
  font-family: var(--dnk-sans) !important;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
}

html[data-v170-shell="ready"] #view-pin .brand.compact .brand-mark {
  box-shadow: 0 0 18px rgb(74 169 222 / 16%);
}

html[data-v170-shell="ready"] #view-pin .pin-title {
  color: rgb(241 247 250 / 92%);
  font-family: var(--dnk-sans) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .045em;
  text-shadow: 0 1px 18px rgb(0 0 0 / 32%);
}

html[data-v170-shell="ready"] #view-pin .pin-dots {
  gap: 15px;
  margin-block: clamp(18px, 3dvh, 24px) clamp(22px, 3.6dvh, 29px);
}

html[data-v170-shell="ready"] #view-pin .pin-dots > i {
  width: 10px;
  height: 10px;
  flex-basis: 10px;
  border-color: rgb(222 240 249 / 56%);
  box-shadow: 0 0 0 1px rgb(0 8 14 / 28%);
}

html[data-v170-shell="ready"] #view-pin .pin-dots > i.on {
  border-color: rgb(234 247 253 / 96%);
  background: rgb(234 247 253 / 96%);
  box-shadow: 0 0 14px rgb(111 197 238 / 38%);
}

html[data-v170-shell="ready"] #view-pin .pin-pad {
  row-gap: 13px;
  column-gap: clamp(20px, 6vw, 24px);
}

html[data-v170-shell="ready"] #view-pin .pin-pad > button {
  border-color: rgb(230 245 252 / 19%) !important;
  background: linear-gradient(145deg, rgb(241 249 253 / 9%), rgb(194 226 240 / 4%)) !important;
  color: rgb(243 249 252 / 94%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 12px 26px rgb(0 8 15 / 12%) !important;
  font-family: "Helvetica Neue", var(--dnk-sans) !important;
  font-size: clamp(30px, 8.2vw, 33px);
  font-weight: 300;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-shadow: 0 1px 14px rgb(0 0 0 / 30%);
}

html[data-v170-shell="ready"] #view-pin .pin-pad > button:is(:active, .is-key-pressed) {
  border-color: rgb(225 243 252 / 34%) !important;
  background: rgb(226 243 251 / 15%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 0 24px rgb(75 168 216 / 10%) !important;
}

html[data-v170-shell="ready"] #view-pin .pin-pad > button:focus-visible {
  outline: 2px solid rgb(150 214 244 / 74%);
  outline-offset: 3px;
}

html[data-v170-shell="ready"] #view-pin .pin-pad > button:nth-child(10),
html[data-v170-shell="ready"] #view-pin .pin-pad > button:nth-child(12) {
  border-color: transparent !important;
  background: transparent !important;
  color: rgb(224 238 245 / 74%) !important;
  box-shadow: none !important;
  font-family: var(--dnk-sans) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .08em;
}

html[data-v170-shell="ready"] #view-pin #pin-msg {
  color: #ffd4ca;
  font-family: var(--dnk-sans) !important;
  font-weight: 500;
}

@media (max-width: 360px) {
  html[data-v170-shell="ready"] #view-pin.auth-view {
    --gn170-pin-key-size: 64px;
    padding-inline: 14px;
  }

  html[data-v170-shell="ready"] #view-pin .pin-wrap {
    padding-inline: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-v170-shell="ready"] #view-pin .dnk178-pin-atmosphere video {
    opacity: .22;
  }
}

/* v182: resilient Home refresh and compact iPhone header. */
.app-view .app-header > div:first-child { min-width: 0; }
.app-view .app-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.app-view #btn-home-refresh {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-color: rgb(10 37 64 / 12%) !important;
  background: rgb(255 255 255 / 82%) !important;
  color: var(--dnk-navy) !important;
  -webkit-text-fill-color: var(--dnk-navy) !important;
  box-shadow: 0 8px 24px rgb(10 37 64 / 7%) !important;
}
.app-view #btn-home-refresh svg { width: 22px; height: 22px; }
.app-view #btn-home-refresh.is-refreshing svg { animation: dnk182-refresh-spin .8s linear infinite; }
.app-view #btn-home-refresh:disabled { opacity: .62; }
@keyframes dnk182-refresh-spin { to { transform: rotate(360deg); } }

.app-view .home-refresh-notice {
  border: 1px solid rgb(10 37 64 / 10%);
  background: rgb(245 249 252 / 94%);
  color: var(--dnk-navy);
  font-family: var(--dnk-sans);
  font-weight: 500;
}
.app-view .home-refresh-notice[data-tone="offline"],
.app-view .home-refresh-notice[data-tone="warning"] {
  border-color: rgb(151 105 28 / 22%);
  background: #fff8e9;
  color: #6b4b12;
}

@media (max-width: 359px) {
  .app-view .app-header { gap: 8px; }
  .app-view .app-header-actions { gap: 6px; }
  .app-view #btn-home-refresh,
  .app-view #btn-profile { width: 44px; min-width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-view #btn-home-refresh.is-refreshing svg { animation: none !important; }
}

.app-view.hp153-installed.hp153-home-active #pwa-home-v153 #pwa-home-brand-v153 .gn170-home-tools {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
  flex-basis: 148px;
}
.app-view.hp153-installed.hp153-home-active #pwa-home-v153 #btn-home-refresh {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--gn-chip-border) !important;
  border-radius: 50%;
  background: var(--gn-chip-base) !important;
  color: var(--gn-on-photo) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 0 0 1px var(--gn-chip-tint) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  appearance: none;
}
.app-view.hp153-installed.hp153-home-active #pwa-home-v153 #btn-home-refresh svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}
.app-view.hp153-installed.hp153-home-active #pwa-home-v153 > .home-refresh-notice {
  width: min(calc(100% - 28px), 532px);
  margin: 10px auto 0;
}
@media (max-width: 359px) {
  .app-view.hp153-installed.hp153-home-active #pwa-home-v153 #pwa-home-brand-v153 .gn170-home-tools {
    width: 144px;
    min-width: 144px;
    max-width: 144px;
    flex-basis: 144px;
    gap: 6px;
  }
}

@media (max-width: 359px) and (max-height: 620px) {
  #tab-corrections .application-switcher {
    margin-bottom: 12px !important;
  }
  #tab-corrections .application-switcher > button {
    min-height: 44px !important;
  }
}

/* v184: company holidays use the same unfilled shu outline on every PWA calendar. */
.app-view .calendar-day.company-holiday,
.app-view .v15-calendar-day.company-holiday,
.app-view #tab-sites.gn170-foreman-root #foreman-calendar-grid .calendar-readonly-day.company-holiday {
  border-color: var(--shu) !important;
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.app-view #tab-sites.gn170-foreman-root #foreman-calendar-grid .calendar-readonly-day {
  display: flex;
  width: 100%;
  min-width: 44px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}