/*
 * Genba Nippo v171 — Quiet Premium cohesion layer.
 *
 * Load after every v170 presentation module. This file owns visual cohesion
 * only: canonical IDs, routes, state, persistence, authentication and PIN
 * geometry remain untouched.
 */

:root {
  /* Approved warm paper / readable navy / restrained coral system. */
  --gn-bg: var(--v161-cream, #ede4d5);
  --gn-bg-soft: var(--v161-paper-warm, #f4e8d6);
  --gn-surface: var(--v161-paper, #fffdf7);
  --gn-surface-soft: #f6efe4;
  --gn-text: var(--v161-ink, #173445);
  --gn-text-muted: #52636b;
  --gn-text-quiet: #566465;
  --gn-number: var(--v161-navy, #082c40);
  --gn-navy: var(--v161-navy, #082c40);
  --gn-tone-quiet: #778183;
  --gn-accent: var(--v161-coral, #bd4d37);
  --gn-accent-text: var(--v161-coral-dark, #873221);
  --gn-warning: var(--v161-bronze, #9c7948);
  --gn-warning-text: #755326;
  --gn-hairline: rgb(83 63 40 / 16%);
  --gn-primary-bg: var(--v161-navy, #082c40);
  --gn-primary-fg: var(--v161-paper, #fffdf7);
  --gn-on-photo: #fffdf7;
  --gn-chip-base: #173b50;
  --gn-chip-tint: transparent;
  --gn-chip-border: rgb(255 253 247 / 42%);
  --gn-shadow-surface: 0 12px 28px rgb(68 45 22 / 10%), 0 2px 7px rgb(68 45 22 / 5%);
  --gn-photo-filter: saturate(.66) contrast(.94) brightness(.98);
  --gn-photo-overlay: rgb(8 44 64 / 7%);
  --gn-shell-nav-height: 68px;
  --gn-v171-nav-height: 68px;
}

/* Keep every opt-in v170 surface explicitly light and opaque. */
html[data-v170-shell="ready"] body,
html[data-v170-shell="ready"] :is(.app-view, .pwa-secondary-layer),
html.v170-batch2-enabled body[data-v170-batch2-screen],
html.v170-batch2-enabled body[data-v170-batch2-screen] .calendar-page,
html.gn170-b3-calendar-root body.gn170-b3-calendar,
html.gn170-b3-calendar-root body.gn170-b3-calendar .calendar-page {
  background: var(--gn-bg) !important;
  color: var(--gn-text);
  color-scheme: light;
}

/* Operational typography is always the system sans. PIN is intentionally not
 * in these scopes, so its approved rounded numeric face and layout are intact. */
html[data-v170-shell="ready"] :is(.app-view, .pwa-secondary-layer, .pwa-confirm-layer, .v15-modal) :is(button, input, select, textarea),
html.v170-batch2-enabled body[data-v170-batch2-screen] :is(button, input, select, textarea),
html.gn170-b3-calendar-root body.gn170-b3-calendar :is(button, input, select, textarea),
.gn170-b3-modal :is(button, input, select, textarea),
.gn170-b3-logout :is(button, input, select, textarea) {
  font-family: var(--gn-font-sans) !important;
}

/* Restore Mincho only to presentation-scale headings in Batch 1, whose broad
 * universal reset otherwise forces every descendant to the same sans weight. */
html.gn-v170-batch1 :is(
  .gn-b1-hero-title h2,
  #v153-notification-intro .v153-notification-copy h2,
  .gn-b1-menu-page .pwa-menu-hero h2
) {
  font-family: var(--gn-font-mincho) !important;
  font-weight: 400 !important;
}

/* Operational labels and ledger values stay sans even where older page layers
 * assigned Mincho to card labels or action copy. Site names are not included. */
.app-view #pwa-home-v153 :is(
  .hp153-shortcut b,
  #v15-launcher.hp153-shortcut-grid .v15-action-card b,
  .hp153-schedule-list span,
  .hp153-personal-entry b,
  .hp153-record-text
),
.app-view #tab-punch :is(
  .location-card b,
  .help-card b,
  .punch-correction-entry b,
  .punch-actions .btn-in span,
  .punch-actions .btn-out span,
  #gn170-site-move-confirm
),
.app-view #tab-sites.gn170-foreman-root :is(
  .gn170-foreman-features b,
  .gn170-editor-row b,
  .gn170-primary,
  .wizard-actions .btn-primary
),
.gn170-b3-layer :is(
  .gn170-b3-ledger-row dd,
  .gn170-b3-settings-row b,
  .gn170-b3-shortcut-row .list-card-head h3,
  .gn170-b3-primary-action
),
.gn170-b3-modal .gn170-b3-primary-action,
.gn170-b3-logout :is(.gn170-b3-logout-row dd, .gn170-b3-logout-actions button),
.gn170-b3-calendar :is(.primary, .secondary, .danger) {
  font-family: var(--gn-font-sans) !important;
}

/* ---------- Home: keep the photograph, remove the navy wash ---------- */

.app-view #pwa-home-v153 .gn170-hero-shade {
  background:
    linear-gradient(to bottom, rgb(8 44 64 / 38%) 0%, rgb(8 44 64 / 7%) 29%, rgb(8 44 64 / 42%) 70%, rgb(8 44 64 / 78%) 100%),
    linear-gradient(var(--gn-photo-overlay), var(--gn-photo-overlay));
}

.app-view #pwa-home-v153 .gn170-site-option-photo::after {
  background:
    linear-gradient(to bottom, transparent 48%, rgb(8 44 64 / 56%) 100%),
    linear-gradient(var(--gn-photo-overlay), var(--gn-photo-overlay));
}

/* Site data now commits atomically. Do not dim the old, still-valid identity
 * while its replacement photograph is being prepared. */
.app-view #pwa-home-v153.is-site-transitioning .gn170-hero-photo,
.app-view #pwa-home-v153.is-site-transitioning .gn170-site-identity {
  opacity: 1;
  transform: none;
}

.app-view #pwa-home-v153 :is(.hp153-photo-edit, .hp153-bell, .gn170-metric) {
  background: var(--gn-chip-base);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-view #pwa-home-v153 .hp153-punch,
.app-view #tab-punch .punch-actions :is(.btn-in, .btn-out),
.app-view #tab-sites.gn170-foreman-root :is(.gn170-primary, .wizard-actions .btn-primary),
html.v170-batch2-enabled .gn170-b2-primary-action,
.gn170-b3-primary-action {
  box-shadow: var(--gn-shadow-surface) !important;
}

.app-view #pwa-home-v153 :is(
  .hp153-brand-copy small,
  .hp153-date,
  .gn170-metric dt,
  .gn170-site-option-copy small
) {
  opacity: 1;
}

/* Outdoor legibility: English kickers keep their compact editorial scale;
 * Japanese state, address and action copy gets a bounded readable floor. */
.app-view #pwa-home-v153 .hp153-date,
.app-view #pwa-home-v153 .hp153-site-address,
.app-view #pwa-home-v153 .gn170-site-meta,
.app-view #pwa-home-v153 .gn170-primary-note,
.app-view #pwa-home-v153 .gn170-connection-row .hp153-signal,
.app-view #pwa-home-v153 .gn170-foreman-stat span,
.app-view #pwa-home-v153 .gn170-today-list dt,
.app-view #pwa-home-v153 .hp153-site-change,
.app-view #pwa-home-v153 .gn170-site-option-copy small,
.app-view #pwa-home-v153 :is(.hp153-duration small, .hp153-duration-status),
.app-view #pwa-home-v153 .hp153-shortcut-settings,
.app-view #pwa-home-v153 :is(.hp153-card-link, .hp153-add),
.app-view #pwa-home-v153 .hp153-empty {
  font-size: 13px !important;
  letter-spacing: .04em !important;
  opacity: 1;
}

.app-view #pwa-home-v153 :is(.gn170-session-item small, .hp153-personal-entry small) {
  font-size: 12px !important;
  letter-spacing: .03em !important;
  opacity: 1;
}

/* Ordinary cards sit in the paper plane. Depth is reserved for photographs
 * and the single main CTA on each screen. */
.app-view :is(.card, .list-card, .timeline-card, .mini-card, .summary-card, .hp153-card),
.pwa-secondary-layer :is(.pwa-menu-card, .pwa-menu-list > button, .pwa-menu-list > a),
:is(.calendar-page, .gn170-b3-calendar) :is(.calendar-shell, .detail-card, .form-card, .plan-card),
.app-view #pwa-home-v153 .gn170-site-option-photo,
.app-view #tab-punch .pwa-site-choice-image,
html.v170-batch2-enabled body[data-v170-batch2-screen="site-move"] .gn170-b2-site-move-list .pwa-site-choice-image,
.app-view #tab-sites.gn170-foreman-root .gn170-site-photo-preview {
  box-shadow: none !important;
}

/* ---------- One bottom navigation language on every route ---------- */

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) {
  min-height: calc(var(--gn-v171-nav-height) + var(--gn-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
  margin: 0 !important;
  padding: 0 max(2px, env(safe-area-inset-right, 0px)) var(--gn-safe-bottom, env(safe-area-inset-bottom, 0px)) max(2px, env(safe-area-inset-left, 0px)) !important;
  border: 0 !important;
  border-top: 1px solid var(--gn-hairline) !important;
  border-radius: 0 !important;
  background: var(--gn-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
)::before {
  display: none !important;
  content: none !important;
}

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) > :is(button, a) {
  min-width: 0 !important;
  min-height: var(--gn-v171-nav-height) !important;
  gap: 3px !important;
  padding: 6px 1px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gn-text-muted) !important;
  -webkit-text-fill-color: var(--gn-text-muted) !important;
  box-shadow: none !important;
  font-family: var(--gn-font-sans) !important;
  font-size: clamp(11.5px, 3.1vw, 12px) !important;
  font-weight: 500 !important;
  font-feature-settings: "palt" 1;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  white-space: nowrap;
}

/* One quiet line-icon treatment; the standalone raised record capsule is
 * flattened into the same visual plane. */
:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) > :is(button, a) svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
}

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) .record-action span {
  margin: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) > :is(button[aria-selected="true"], button[aria-current="page"], a.is-current) {
  color: var(--gn-text) !important;
  -webkit-text-fill-color: var(--gn-text) !important;
  font-weight: 600 !important;
}

:is(
  html[data-v170-shell="ready"] .app-view .bottom-nav,
  html[data-v170-shell="ready"] .pwa-secondary-bottom-nav,
  html.v170-batch2-enabled .calendar-bottom-nav,
  html.gn170-b3-calendar-root .calendar-bottom-nav
) > :is(button[aria-selected="true"], button[aria-current="page"], a.is-current)::after {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 24px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--gn-accent) !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

/* Punch and Menu shipped higher-specificity page rules. Repeat their stable
 * route scopes so the common navigation typography wins without touching DOM. */
html[data-v170-shell="ready"] body[data-pwa-fixed-page="punch"] .app-view.hp153-installed .bottom-nav > button,
html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active .pwa-secondary-bottom-nav > button {
  color: var(--gn-text-muted) !important;
  -webkit-text-fill-color: var(--gn-text-muted) !important;
  font-family: var(--gn-font-sans) !important;
  font-size: clamp(11.5px, 3.1vw, 12px) !important;
  font-weight: 500 !important;
}

html[data-v170-shell="ready"] body[data-pwa-fixed-page="punch"] .app-view.hp153-installed .bottom-nav > button[aria-selected="true"],
html.gn-v170-batch1 #pwa-secondary-layer.gn-b1-menu-active .pwa-secondary-bottom-nav > button[aria-current="page"],
html[data-v170-shell="ready"] .app-view.hp153-installed.hp153-home-active .bottom-nav > button[aria-selected="true"] {
  color: var(--gn-text) !important;
  -webkit-text-fill-color: var(--gn-text) !important;
  font-weight: 600 !important;
}

/* ---------- Foreman counts: stable-ID frame reset ---------- */

.app-view #tab-sites #foreman-attendance-counts {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-view #tab-sites #foreman-attendance-counts > .summary-card[hidden] {
  display: none !important;
}

.app-view #tab-sites #foreman-attendance-counts > .summary-card:not([hidden]) {
  display: flex !important;
  width: 100% !important;
  min-height: 82px !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gn-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gn-text) !important;
  text-align: left !important;
}

.app-view #tab-sites #foreman-attendance-counts > .summary-card:not([hidden]):not(:has(~ .summary-card:not([hidden]))) {
  border-bottom: 0 !important;
}

.app-view #tab-sites #foreman-attendance-counts > .summary-card:not([hidden]) > span {
  order: 0;
  color: var(--gn-text-muted) !important;
  -webkit-text-fill-color: var(--gn-text-muted) !important;
  font-family: var(--gn-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
}

.app-view #tab-sites #foreman-attendance-counts > .summary-card:not([hidden]) > b {
  order: 1;
  color: var(--gn-number) !important;
  -webkit-text-fill-color: var(--gn-number) !important;
  font-family: var(--gn-font-sans) !important;
  font-size: clamp(40px, 14vw, 58px) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
}

/* ---------- PIN: iPhone-style local auto-unlock ----------
 *
 * Existing PINs remain 4–6 digits.  On a device that already owns the local
 * hash, the JS compares locally and forwards the canonical OK action only
 * after an exact match.  Keep the final grid cell so zero stays centred, but
 * remove the visible confirmation affordance.  Setup/first-device verification
 * keeps the same cell visible as “完了” because its length is not yet known.
 */
html[data-v170-shell="ready"] #view-pin .pin-pad > button.is-v171-pin-auto-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-v170-shell="ready"] #view-pin .pin-pad.is-v171-pin-busy > button:not(.is-v171-pin-auto-hidden) {
  opacity: .58;
  pointer-events: none !important;
  transform: translateZ(0) scale(.98);
}

@media (prefers-reduced-motion: reduce) {
  .app-view #pwa-home-v153 .gn170-hero-photo,
  .app-view #pwa-home-v153 .gn170-site-identity {
    transition: none !important;
  }
}