/*
 * PWA visual redesign v1.6.1 candidate (staging only).
 *
 * A field control deck, not another soft card dashboard:
 * - opaque cream / white / navy surfaces only
 * - coral reserved for the primary punch and selected state
 * - Mincho for time and headings, sans-serif for every control
 * - direct Home punch, selected site identity, photo-backed site selection,
 *   shortcut preferences and the persistent five-item nav remain intact
 */

:root {
  --v161-cream: #ede4d5;
  --v161-cream-deep: #d5c4aa;
  --v161-paper: #fffdf7;
  --v161-paper-warm: #f4e8d6;
  --v161-navy: #082c40;
  --v161-navy-mid: #294b5c;
  --v161-navy-soft: #dfe6e3;
  --v161-ink: #173445;
  --v161-muted: #5d6a6b;
  --v161-line: #c9b48f;
  --v161-line-dark: #957a53;
  --v161-coral: #bd4d37;
  --v161-coral-dark: #873221;
  --v161-coral-soft: #f3d4c8;
  --v161-ok: #2f634a;
  --v161-ok-soft: #dce9df;
  --v161-bronze: #9c7948;
  --v161-bronze-soft: #ead9ba;
  --v161-sage: #6e7d5d;
  --v161-shadow: 0 14px 34px rgb(68 45 22 / 14%);
  --v161-nav-height: 68px;
  --v161-serif: var(--hd-serif, "Yu Mincho", "Hiragino Mincho ProN", serif);
  --v161-sans: var(--hd-sans, "Noto Sans JP", "Yu Gothic UI", sans-serif);
}

/* ---------- Shared field shell ---------- */

html,
body,
.app-view.hp153-installed,
.pwa-secondary-layer {
  background: var(--v161-cream);
  color: var(--v161-ink);
}

.app-view.hp153-installed,
.app-view.hp153-installed button,
.app-view.hp153-installed input,
.app-view.hp153-installed select,
.app-view.hp153-installed textarea,
.pwa-secondary-layer,
.pwa-secondary-layer button,
.pwa-secondary-layer input,
.pwa-secondary-layer select,
.pwa-secondary-layer textarea {
  font-family: var(--v161-sans);
}

.app-view.hp153-installed .tab-stage {
  width: min(100%, 680px);
  padding: 10px 12px calc(22px + env(safe-area-inset-bottom));
}

.app-view.hp153-installed.hp153-home-active .app-header {
  min-height: calc(72px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  border-bottom: 3px solid var(--v161-navy);
  background: var(--v161-paper);
}

#pwa-home-brand-v153 {
  min-height: 52px;
}

.hp153-brand-logo {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 2px solid var(--v161-navy);
  border-radius: 8px;
  background-color: var(--v161-paper);
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
}

.hp153-brand-copy b {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: clamp(19px, 5vw, 23px);
  letter-spacing: .04em;
}

.hp153-brand-copy small {
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
}

.hp153-bell {
  min-width: 46px;
  min-height: 46px;
  border: 2px solid var(--v161-navy);
  border-radius: 8px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
  touch-action: manipulation;
}

#pwa-home-v153 {
  gap: 16px;
}

/* ---------- Home: attendance control deck ---------- */

.app-view #pwa-home-v153 .hp153-hero {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: var(--v161-cream);
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-hero::before {
  display: none;
}

.app-view #pwa-home-v153 .hp153-hero-top {
  min-height: 126px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 14px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--v161-line-dark);
  border-top: 5px solid var(--v161-navy);
  border-radius: 10px;
  background: var(--v161-paper);
  box-shadow: 0 3px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-hero-main {
  align-content: center;
}

.app-view #pwa-home-v153 .hp153-date {
  margin: 0;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-family: var(--v161-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.app-view #pwa-home-v153 .hp153-clock {
  margin: 2px 0 6px;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: clamp(46px, 13vw, 58px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
}

.app-view #pwa-home-v153 .hp153-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.app-view #pwa-home-v153 .hp153-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #a8c6b8;
  border-radius: 4px;
  background: var(--v161-ok-soft);
  color: var(--v161-ok);
  -webkit-text-fill-color: var(--v161-ok);
  font-size: 12px;
  font-weight: 850;
}

.app-view #pwa-home-v153 .hp153-status.is-working {
  border-color: #8eb8a5;
  background: #dbece3;
}

.app-view #pwa-home-v153 .hp153-status-note {
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 750;
}

.app-view #pwa-home-v153 .hp153-photo-frame {
  width: 108px;
  min-height: 96px;
  align-self: stretch;
  justify-self: end;
  overflow: hidden;
  border: 2px solid var(--v161-navy);
  border-radius: 6px;
  background: var(--v161-cream-deep);
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-hero-photo {
  border-radius: 2px;
}

.app-view #pwa-home-v153 .hp153-photo-edit {
  top: 5px;
  right: 5px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 2px solid var(--v161-navy);
  border-radius: 6px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  box-shadow: none;
  touch-action: manipulation;
}

.app-view #pwa-home-v153 .hp153-site-panel {
  position: relative;
  padding: 14px 15px 15px 19px;
  border: 2px solid var(--v161-navy);
  border-left: 7px solid var(--v161-navy-mid);
  border-radius: 10px;
  background: var(--v161-paper);
  box-shadow: 5px 5px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-site-heading {
  align-items: center;
  gap: 10px;
}

.app-view #pwa-home-v153 .hp153-site-label {
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
}

.app-view #pwa-home-v153 .hp153-site-label svg {
  color: var(--v161-navy-mid);
}

.app-view #pwa-home-v153 .hp153-target-state {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--v161-line);
  border-radius: 4px;
  background: var(--v161-paper-warm);
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 800;
}

.app-view #pwa-home-v153 .hp153-target-state.is-selected,
.app-view #pwa-home-v153 .hp153-target-state.is-working {
  border-color: #9ebbac;
  background: var(--v161-ok-soft);
  color: var(--v161-ok);
  -webkit-text-fill-color: var(--v161-ok);
}

/* The current-site heading already says that the worker is on site. Avoid a
   second, competing "入場済み" label in the same information block. */
.app-view #pwa-home-v153 .hp153-target-state.is-working {
  display: none;
}

.app-view #pwa-home-v153 .hp153-site {
  display: -webkit-box;
  margin: 7px 0 5px;
  overflow: hidden;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: clamp(23px, 6.4vw, 28px);
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-view #pwa-home-v153 .hp153-site-meta {
  align-items: end;
  gap: 12px;
}

.app-view #pwa-home-v153 .hp153-site-address {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-view #pwa-home-v153 .hp153-site-change {
  min-width: 122px;
  min-height: 48px;
  padding: 8px 11px;
  border: 2px solid var(--v161-navy);
  border-radius: 6px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
  touch-action: manipulation;
}

.app-view #pwa-home-v153 .hp153-site-change::after {
  margin-left: 6px;
  content: "\203A";
  font-size: 19px;
  line-height: 1;
}

.app-view #pwa-home-v153 .hp153-site-change:active {
  background: var(--v161-navy-soft);
  box-shadow: 1px 1px 0 var(--v161-cream-deep);
  transform: translate(2px, 2px);
}

.app-view #pwa-home-v153 .hp153-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
  border: 2px solid var(--v161-navy);
  border-radius: 10px;
  background: var(--v161-paper-warm);
  box-shadow: 5px 5px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-punch {
  order: 1;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 11px 15px;
  border: 2px solid var(--v161-coral-dark);
  border-radius: 7px;
  background: var(--v161-coral);
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 4px 4px 0 #dcc8bd;
  touch-action: manipulation;
}

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

.app-view #pwa-home-v153 .hp153-punch b {
  font-family: var(--v161-sans);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .03em;
}

.app-view #pwa-home-v153 .hp153-punch-site {
  font-size: 12px;
  font-weight: 750;
}

.app-view #pwa-home-v153 .hp153-punch:active {
  background: var(--v161-coral-dark);
  box-shadow: 1px 1px 0 #dcc8bd;
  transform: translate(3px, 3px);
}

.app-view #pwa-home-v153 .hp153-signals {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.app-view #pwa-home-v153 .hp153-signal {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 6px 7px;
  border: 1px solid var(--v161-line-dark);
  border-radius: 5px;
  background: var(--v161-paper);
  color: var(--v161-ink);
  -webkit-text-fill-color: var(--v161-ink);
  font-size: 12px;
  font-weight: 800;
}

.app-view #pwa-home-v153 .hp153-signal svg {
  color: var(--v161-navy-mid);
}

/* Quick operations are a physical key bank, not decorative cards. */
.app-view #pwa-home-v153 .hp153-shortcuts {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--v161-line-dark);
  border-top: 5px solid var(--v161-navy);
  border-radius: 10px;
  background: var(--v161-paper);
  box-shadow: 0 3px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-shortcuts-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.app-view #pwa-home-v153 .hp153-shortcuts-head h2 {
  margin: 0;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 21px;
  font-weight: 750;
  letter-spacing: .04em;
}

.app-view #pwa-home-v153 .hp153-shortcut-settings {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #d3dee4;
  border-radius: 5px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-size: 12px;
  font-weight: 850;
  touch-action: manipulation;
}

.app-view #pwa-home-v153 .hp153-shortcut-settings::after {
  margin-left: 4px;
  content: "\203A";
}

.app-view #pwa-home-v153 .hp153-shortcut-grid,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 0;
  border-bottom: 5px solid #93a8b6;
  border-radius: 6px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  box-shadow: none;
  text-align: left;
  touch-action: manipulation;
}

.app-view #pwa-home-v153 .hp153-shortcut:active,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:active {
  border-bottom-width: 2px;
  background: var(--v161-cream);
  transform: translateY(3px);
}

.app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--v161-navy);
  border-radius: 4px;
  background: var(--v161-navy);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.app-view #pwa-home-v153 .hp153-shortcut b,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card b {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.app-view #pwa-home-v153 .hp153-shortcut small,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-shortcut > i,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card > i {
  color: var(--v161-navy-mid);
  -webkit-text-fill-color: var(--v161-navy-mid);
  font-size: 19px;
  font-style: normal;
}

.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) {
  min-height: 60px;
  grid-template-columns: 32px minmax(0, 1fr) 9px;
  padding: 8px 9px;
  border-bottom-width: 3px;
  background: var(--v161-paper-warm);
}

.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) .v15-action-icon {
  width: 32px;
  height: 32px;
  border-color: var(--v161-line-dark);
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-size: 12px;
}

.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) b {
  font-size: 13px;
}

.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) small {
  display: none;
}

/* Supporting information becomes a ledger below the control deck. */
.app-view #pwa-home-v153 .hp153-summary-grid,
.app-view #pwa-home-v153 .hp153-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 2px solid var(--v161-line-dark);
  border-radius: 8px;
  background: var(--v161-paper);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-card {
  border: 0;
  border-radius: 0;
  background: var(--v161-paper);
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-card + .hp153-card {
  border-top: 2px solid var(--v161-line);
}

.app-view #pwa-home-v153 .hp153-card-head {
  min-height: 50px;
  padding: 11px 13px 5px;
  border-left: 5px solid var(--v161-navy-mid);
}

.app-view #pwa-home-v153 .hp153-card-head h2 {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 17px;
  font-weight: 750;
}

.app-view #pwa-home-v153 .hp153-card-icon {
  border: 1px solid var(--v161-line);
  border-radius: 4px;
  background: var(--v161-navy-soft);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.app-view #pwa-home-v153 .hp153-card-body,
.app-view #pwa-home-v153 .hp153-duration {
  min-height: 64px;
  padding: 8px 14px 12px 18px;
}

.app-view #pwa-home-v153 .hp153-duration {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 14px;
}

.app-view #pwa-home-v153 .hp153-duration b {
  grid-row: 1 / span 2;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: clamp(25px, 7vw, 32px);
  font-variant-numeric: tabular-nums;
}

.app-view #pwa-home-v153 .hp153-progress {
  overflow: hidden;
  border-radius: 2px;
  background: var(--v161-cream-deep);
}

.app-view #pwa-home-v153 .hp153-progress i {
  border-radius: 0;
  background: var(--v161-navy-mid);
}

.app-view #pwa-home-v153 .hp153-duration-status {
  grid-column: 1 / -1;
}

.app-view #pwa-home-v153 .hp153-card-link,
.app-view #pwa-home-v153 .hp153-add {
  min-height: 44px;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 13px;
  font-weight: 850;
}

.app-view #pwa-home-v153 .hp153-personal-entry {
  min-height: 64px;
  margin: 4px 13px 11px;
  border: 1px solid var(--v161-line);
  border-radius: 5px;
  background: var(--v161-paper-warm);
}

/* ---------- Site selector: four photo-backed field tags ---------- */

.app-view #tab-punch {
  background: var(--v161-cream);
  color: var(--v161-ink);
}

.app-view #tab-punch .v153-site-head {
  min-height: calc(62px + env(safe-area-inset-top));
  padding: max(10px, env(safe-area-inset-top)) 2px 7px;
  border-bottom: 3px solid var(--v161-navy);
}

.app-view #tab-punch .v153-site-head h1 {
  margin: 0;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: clamp(25px, 7vw, 30px);
  font-weight: 750;
  letter-spacing: .02em;
}

.app-view #tab-punch .v153-site-head button {
  min-width: 56px;
  min-height: 44px;
  padding: 6px 8px;
  border: 2px solid var(--v161-navy);
  border-radius: 5px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 13px;
  font-weight: 850;
  touch-action: manipulation;
}

.app-view #tab-punch .v153-site-search {
  position: relative;
  z-index: 2;
  min-height: 54px;
  margin: 12px 0 14px;
  padding: 0 13px;
  border: 2px solid var(--v161-line-dark);
  border-radius: 6px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
}

.app-view #tab-punch .v153-site-search input {
  min-height: 50px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 16px;
}

.app-view #tab-punch .v153-site-search:focus-within {
  border-color: var(--v161-navy);
  outline: 3px solid var(--v161-navy-soft);
  outline-offset: 2px;
}

.app-view #tab-punch .pwa-site-choice-list.pwa-site-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0;
  overflow: visible;
  counter-reset: site-choice;
  touch-action: pan-y pinch-zoom;
}

.app-view #tab-punch .pwa-site-choice-grid > .empty-state,
.app-view #tab-punch .pwa-site-reveal-controls,
.app-view #tab-punch .pwa-site-selection-note {
  grid-column: 1 / -1;
}

.app-view #tab-punch .pwa-site-choice-row {
  position: relative;
  min-width: 0;
  min-height: 104px;
  counter-increment: site-choice;
}

.app-view #tab-punch .pwa-site-choice-row[hidden] {
  display: none !important;
}

.app-view #tab-punch .pwa-site-choice-row::before {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--v161-paper);
  border-radius: 3px;
  background: var(--v161-navy);
  color: #fff;
  content: counter(site-choice, decimal-leading-zero);
  font-family: var(--v161-sans);
  font-size: 12px;
  font-weight: 900;
}

.app-view #tab-punch .pwa-site-choice {
  position: relative;
  width: 100%;
  min-height: 104px;
  height: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: minmax(100px, auto);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--v161-navy);
  border-bottom-width: 6px;
  border-radius: 7px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
  text-align: left;
  touch-action: manipulation;
}

.app-view #tab-punch .pwa-site-choice:active {
  border-bottom-width: 3px;
  background: var(--v161-paper-warm);
  box-shadow: 1px 1px 0 var(--v161-cream-deep);
  transform: translate(3px, 3px);
}

.app-view #tab-punch .pwa-site-choice[aria-pressed="true"],
.app-view #tab-punch .pwa-site-choice[aria-selected="true"] {
  border-color: var(--v161-coral);
  background: var(--v161-coral-soft);
  box-shadow: 4px 4px 0 #d8c4ba;
}

.app-view #tab-punch .pwa-site-choice-image {
  display: block;
  width: 96px;
  height: 100%;
  min-height: 100px;
  overflow: hidden;
  border: 0;
  border-right: 2px solid var(--v161-navy);
  border-bottom: 0;
  border-radius: 0;
  background-color: var(--v161-cream-deep);
  background-position: center;
  background-size: cover;
}

.app-view #tab-punch .pwa-site-choice > span:nth-child(2) {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 13px 58px 11px 12px;
}

.app-view #tab-punch .pwa-site-choice b {
  display: -webkit-box;
  min-height: 22px;
  overflow: hidden;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-view #tab-punch .pwa-site-choice small {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-family: var(--v161-sans);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-view #tab-punch .pwa-site-choice > i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--v161-line);
  border-radius: 3px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 18px;
  font-style: normal;
}

.app-view #tab-punch .pwa-site-choice:not([aria-selected="true"]):not([aria-pressed="true"]) > i::before {
  content: "\203A";
}

.app-view #tab-punch .pwa-site-choice[aria-selected="true"] > i,
.app-view #tab-punch .pwa-site-choice[aria-pressed="true"] > i {
  border-color: var(--v161-coral);
  background: var(--v161-coral);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.app-view #tab-punch .pwa-site-selected-badge {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 2px solid var(--v161-paper);
  border-radius: 3px;
  background: var(--v161-coral);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.app-view #tab-punch .pwa-site-selected-badge::before {
  margin-right: 3px;
  content: "\2713";
}

.app-view #tab-punch .pwa-site-photo-edit {
  top: auto;
  right: 8px;
  bottom: 8px;
  left: auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--v161-navy);
  border-radius: 50%;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-size: 12px;
  font-weight: 850;
  box-shadow: none;
  touch-action: manipulation;
}

.app-view #tab-punch .pwa-site-photo-message {
  position: absolute;
  z-index: 4;
  right: 58px;
  bottom: 5px;
  left: 102px;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid var(--v161-line);
  border-radius: 3px;
  background: var(--v161-paper);
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
}

.app-view #tab-punch .pwa-site-selection-note {
  min-height: 44px;
  margin: 2px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--v161-line-dark);
  border-left: 6px solid var(--v161-navy-mid);
  border-radius: 4px;
  background: var(--v161-paper);
  color: var(--v161-ink);
  -webkit-text-fill-color: var(--v161-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.app-view #tab-punch .pwa-site-reveal-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border: 2px solid var(--v161-navy);
  border-radius: 6px;
  background: var(--v161-paper-warm);
}

.app-view #tab-punch .pwa-site-reveal-controls button {
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  border: 2px solid var(--v161-navy);
  border-radius: 4px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 13px;
  font-weight: 900;
  touch-action: manipulation;
}

.app-view #tab-punch #pwa-site-show-next {
  border-color: var(--v161-navy);
  background: var(--v161-navy);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.app-view #tab-punch #pwa-site-reveal-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.app-view #tab-punch .v153-site-add,
.app-view #tab-punch .punch-correction-entry,
.app-view #tab-punch .location-card,
.app-view #tab-punch .help-card {
  border: 2px solid var(--v161-line-dark);
  border-radius: 6px;
  background: var(--v161-paper);
  box-shadow: 3px 3px 0 var(--v161-cream-deep);
}

.app-view #tab-punch .punch-actions {
  border: 2px solid var(--v161-navy);
  border-radius: 7px;
  background: var(--v161-paper-warm);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
}

.app-view #tab-punch .punch-actions .btn-in,
.app-view #tab-punch .punch-actions .btn-out {
  min-height: 58px;
  border: 2px solid var(--v161-coral-dark);
  border-radius: 5px;
  background: var(--v161-coral);
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: none;
}

.app-view #tab-punch .punch-correction-entry button {
  min-height: 44px;
  border: 2px solid var(--v161-navy);
  border-radius: 4px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-weight: 850;
}

/* ---------- Menu: operator console ---------- */

.pwa-secondary-layer {
  color-scheme: light;
}

.pwa-secondary-header {
  min-height: calc(72px + env(safe-area-inset-top));
  padding: calc(9px + env(safe-area-inset-top)) 12px 9px;
  border-bottom: 4px solid var(--v161-navy);
  background: var(--v161-paper);
}

.pwa-secondary-back {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border: 2px solid var(--v161-paper);
  border-radius: 5px;
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  box-shadow: none;
  touch-action: manipulation;
}

.pwa-secondary-header small {
  color: var(--v161-coral-dark);
  -webkit-text-fill-color: var(--v161-coral-dark);
  font-family: var(--v161-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.pwa-secondary-header h1 {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: .04em;
}

.pwa-secondary-content {
  width: min(100%, 560px);
  min-height: calc(100dvh - 72px - env(safe-area-inset-top));
  padding: 14px 12px calc(26px + var(--v161-nav-height) + env(safe-area-inset-bottom));
  background: var(--v161-cream);
}

.pwa-menu-hero {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 13px;
  border: 2px solid var(--v161-navy);
  border-left-width: 7px;
  border-radius: 7px;
  background: var(--v161-paper);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
}

.pwa-menu-avatar {
  width: 54px;
  height: 54px;
  border: 2px solid var(--v161-navy);
  border-radius: 5px;
  background: var(--v161-navy);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: var(--v161-serif);
  font-size: 22px;
  font-weight: 800;
}

.pwa-menu-hero small {
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 800;
}

.pwa-menu-hero h2 {
  margin-top: 2px;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 19px;
  font-weight: 800;
}

.pwa-menu-hero button {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--v161-line-dark);
  border-radius: 4px;
  background: var(--v161-paper-warm);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-size: 12px;
  font-weight: 850;
  touch-action: manipulation;
}

.pwa-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--v161-navy);
  border-radius: 8px;
  background: var(--v161-paper);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
}

.pwa-menu-card {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--v161-line);
  border-radius: 0;
  background: var(--v161-paper);
  color: var(--v161-ink);
  -webkit-text-fill-color: var(--v161-ink);
  box-shadow: none;
  text-decoration: none;
  text-align: left;
  touch-action: manipulation;
}

.pwa-menu-card:first-child {
  grid-column: 1;
  min-height: 82px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  border: 0;
  border-bottom: 1px solid var(--v161-line);
  border-left: 6px solid var(--v161-coral);
  background: var(--v161-coral-soft);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.pwa-menu-card:active {
  background: var(--v161-cream-deep);
  transform: translateX(2px);
}

.pwa-menu-card:first-child:active {
  background: #f8ddd4;
}

.pwa-menu-card:last-child {
  border-bottom: 0;
}

.pwa-menu-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--v161-navy);
  border-radius: 4px;
  background: var(--v161-navy-soft);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-size: 13px;
  font-weight: 900;
}

.pwa-menu-card:first-child > span {
  width: 46px;
  height: 46px;
  border-color: var(--v161-coral);
  background: var(--v161-coral);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 15px;
}

.pwa-menu-card b {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
}

.pwa-menu-card:first-child b {
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-serif);
  font-size: 19px;
}

.pwa-menu-card small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-menu-card:first-child small {
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-size: 12px;
}

.pwa-menu-card i {
  color: var(--v161-navy-mid);
  -webkit-text-fill-color: var(--v161-navy-mid);
  font-size: 20px;
  font-style: normal;
}

.pwa-menu-card:first-child i {
  color: var(--v161-coral-dark);
  -webkit-text-fill-color: var(--v161-coral-dark);
  font-size: 25px;
}

.pwa-menu-list {
  margin-top: 14px;
  overflow: hidden;
  border: 2px solid var(--v161-line-dark);
  border-left: 7px solid var(--v161-navy-mid);
  border-radius: 7px;
  background: var(--v161-paper);
  box-shadow: 4px 4px 0 var(--v161-cream-deep);
}

.pwa-menu-list > button {
  min-height: 52px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--v161-line);
  background: var(--v161-paper);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
  font-family: var(--v161-sans);
  font-size: 14px;
  font-weight: 800;
  touch-action: manipulation;
}

.pwa-menu-list > button:last-child {
  border-bottom: 0;
}

.pwa-menu-list > button.is-danger {
  background: #fff7f4;
  color: #85382d;
  -webkit-text-fill-color: #85382d;
}

/* ---------- Opaque persistent five-item navigation ---------- */

.app-view.hp153-installed .bottom-nav,
.pwa-secondary-bottom-nav {
  min-height: calc(var(--v161-nav-height) + env(safe-area-inset-bottom));
  padding: 5px max(5px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(5px, env(safe-area-inset-right));
  border: 0;
  border-top: 3px solid var(--v161-navy);
  border-radius: 0;
  background: var(--v161-paper);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-view.hp153-installed .bottom-nav button,
.pwa-secondary-bottom-nav button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px;
  border: 0;
  border-radius: 4px;
  background: var(--v161-paper);
  color: var(--v161-muted);
  -webkit-text-fill-color: var(--v161-muted);
  font-family: var(--v161-sans);
  font-size: 12px;
  font-weight: 850;
  touch-action: manipulation;
}

.app-view.hp153-installed .bottom-nav button svg,
.pwa-secondary-bottom-nav button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.app-view.hp153-installed .bottom-nav button[aria-selected="true"],
.pwa-secondary-bottom-nav button[aria-current="page"] {
  background: var(--v161-paper-warm);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.app-view.hp153-installed .bottom-nav button[aria-selected="true"]::after,
.pwa-secondary-bottom-nav button[aria-current="page"]::after {
  position: absolute;
  right: 22%;
  bottom: 1px;
  left: 22%;
  height: 4px;
  border-radius: 0;
  background: var(--v161-coral);
  content: "";
}

.app-view.hp153-installed .bottom-nav button:active,
.pwa-secondary-bottom-nav button:active {
  background: var(--v161-cream-deep);
  transform: translateY(1px);
}

/* ---------- Compact iPhones ---------- */

@media (max-width: 360px) {
  .app-view.hp153-installed .tab-stage {
    padding-inline: 9px;
  }

  .app-view #pwa-home-v153 .hp153-hero-top {
    min-height: 116px;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 9px;
    padding: 12px;
  }

  .app-view #pwa-home-v153 .hp153-clock {
    font-size: 40px;
  }

  .app-view #pwa-home-v153 .hp153-photo-frame {
    width: 88px;
    min-height: 90px;
  }

  .app-view #pwa-home-v153 .hp153-status-note:not(:empty) {
    display: inline;
  }

  .app-view #pwa-home-v153 .hp153-status-note:empty {
    display: none;
  }

  .app-view #pwa-home-v153 .hp153-site-panel {
    padding: 12px 11px 13px 14px;
  }

  .app-view #pwa-home-v153 .hp153-site-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .app-view #pwa-home-v153 .hp153-site-change {
    width: 100%;
  }

  .app-view #pwa-home-v153 .hp153-hero-actions {
    padding-inline: 10px;
  }

  .app-view #pwa-home-v153 .hp153-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-view #pwa-home-v153 .hp153-signals .hp153-signal:last-child {
    grid-column: 1 / -1;
  }

  .app-view #pwa-home-v153 .hp153-shortcuts {
    padding: 11px;
  }

  .app-view #pwa-home-v153 .hp153-shortcuts-head {
    align-items: start;
  }

  .app-view #pwa-home-v153 .hp153-shortcuts-head h2 {
    font-size: 18px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card {
    min-height: 72px;
    grid-template-columns: 33px minmax(0, 1fr) 8px;
    gap: 6px;
    padding: 8px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon {
    width: 33px;
    height: 33px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut b,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card b {
    font-size: 13px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut small,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card small {
    font-size: 12px;
  }

  .app-view #pwa-home-v153 .hp153-duration {
    grid-template-columns: 1fr;
  }

  .app-view #pwa-home-v153 .hp153-duration b,
  .app-view #pwa-home-v153 .hp153-duration-status {
    grid-column: 1;
    grid-row: auto;
  }

  .app-view #tab-punch .pwa-site-choice-list.pwa-site-choice-grid {
    gap: 8px;
  }

  .app-view #tab-punch .pwa-site-choice-row,
  .app-view #tab-punch .pwa-site-choice {
    min-height: 100px;
  }

  .app-view #tab-punch .pwa-site-choice {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: minmax(96px, auto);
  }

  .app-view #tab-punch .pwa-site-choice-image {
    width: 88px;
    height: 100%;
    min-height: 96px;
  }

  .app-view #tab-punch .pwa-site-choice b {
    min-height: 35px;
    font-size: 14px;
  }

  .app-view #tab-punch .pwa-site-choice small {
    font-size: 12px;
  }

  .app-view #tab-punch .pwa-site-photo-edit {
    top: auto;
    right: 7px;
    bottom: 7px;
    left: auto;
  }

  .app-view #tab-punch .pwa-site-reveal-controls {
    grid-template-columns: 1fr;
  }

  .pwa-secondary-content {
    padding-inline: 9px;
  }

  .pwa-menu-card {
    min-height: 62px;
    grid-template-columns: 36px minmax(0, 1fr) 11px;
    padding: 8px 9px;
  }

  .pwa-menu-card > span {
    width: 36px;
    height: 36px;
  }

  .pwa-menu-card:first-child {
    min-height: 74px;
  }
}

@media (min-width: 361px) and (max-width: 430px) {
  .app-view #pwa-home-v153 .hp153-hero-top {
    grid-template-columns: minmax(0, 1fr) 102px;
  }

  .app-view #pwa-home-v153 .hp153-photo-frame {
    width: 102px;
  }
}

@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  .app-view.hp153-installed,
  .app-view #pwa-home-v153,
  .app-view #tab-punch,
  .pwa-secondary-layer {
    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-view #pwa-home-v153 *,
  .app-view #tab-punch *,
  .pwa-secondary-layer * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Final refinement: keep the new information architecture, but remove the
   heavy outlined-card look.  The result stays opaque and field-readable while
   using thin rules and restrained elevation like a modern operations app. */
.app-view.hp153-installed.hp153-home-active .app-header {
  border-bottom-width: 1px;
  box-shadow: 0 2px 10px rgb(8 43 74 / 5%);
}

.hp153-brand-logo,
.hp153-bell {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-hero-top {
  border-color: var(--v161-line);
  border-top: 4px solid var(--v161-navy);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgb(8 43 74 / 6%);
}

.app-view #pwa-home-v153 .hp153-photo-frame {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-photo-edit {
  border-width: 1px;
  border-radius: 10px;
}

.app-view #pwa-home-v153 .hp153-site-panel {
  border: 1px solid var(--v161-line);
  border-left: 4px solid var(--v161-navy-mid);
  border-radius: 14px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-site-change {
  border-width: 1px;
  border-radius: 10px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-hero-actions {
  border: 1px solid var(--v161-line);
  border-radius: 14px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-punch {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(150 54 36 / 16%);
}

.app-view #pwa-home-v153 .hp153-signals {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--v161-line);
  border-radius: 10px;
  background: var(--v161-paper);
}

.app-view #pwa-home-v153 .hp153-signal {
  border: 0;
  border-right: 1px solid var(--v161-line);
  border-radius: 0;
}

.app-view #pwa-home-v153 .hp153-signal:last-child {
  border-right: 0;
}

.app-view #pwa-home-v153 .hp153-shortcuts {
  border-color: var(--v161-line);
  border-top: 4px solid var(--v161-navy);
  border-radius: 14px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card {
  border: 1px solid var(--v161-line);
  border-radius: 10px;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon {
  border: 0;
  border-radius: 8px;
  background: var(--v161-navy-soft);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.app-view #pwa-home-v153 .hp153-summary-grid,
.app-view #pwa-home-v153 .hp153-lower-grid {
  border: 1px solid var(--v161-line);
  border-radius: 14px;
  box-shadow: none;
}

.app-view #tab-punch .pwa-site-choice {
  border: 1px solid var(--v161-line-dark);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(8 43 74 / 5%);
}

.app-view #tab-punch .pwa-site-choice[aria-pressed="true"],
.app-view #tab-punch .pwa-site-choice[aria-selected="true"] {
  border: 1px solid var(--v161-coral);
  border-left: 4px solid var(--v161-coral);
  box-shadow: 0 2px 10px rgb(185 71 50 / 10%);
}

.app-view #tab-punch .pwa-site-choice-image {
  border-right: 1px solid var(--v161-line);
}

.app-view #tab-punch .pwa-site-reveal-controls {
  border: 1px solid var(--v161-line);
  border-radius: 12px;
  background: var(--v161-paper);
}

.app-view #tab-punch .pwa-site-reveal-controls button {
  border-width: 1px;
  border-radius: 10px;
}

.app-view #tab-punch #pwa-site-show-next {
  border-color: var(--v161-coral-dark);
  background: var(--v161-coral);
}

.pwa-secondary-header {
  border-bottom-width: 1px;
  box-shadow: 0 2px 10px rgb(8 43 74 / 5%);
}

.pwa-secondary-back,
.pwa-menu-hero,
.pwa-menu-grid,
.pwa-menu-list {
  box-shadow: none;
}

.pwa-menu-hero {
  border: 1px solid var(--v161-line);
  border-left: 4px solid var(--v161-navy);
  border-radius: 14px;
}

.pwa-menu-grid {
  border: 1px solid var(--v161-line);
  border-radius: 14px;
}

.pwa-menu-card {
  border-bottom-color: var(--v161-line);
}

.pwa-menu-card:first-child {
  border-left-width: 4px;
}

.pwa-menu-card > span,
.pwa-menu-card:first-child > span {
  border-width: 0;
  border-radius: 8px;
}

.pwa-menu-list {
  border: 1px solid var(--v161-line);
  border-left: 4px solid var(--v161-navy-mid);
  border-radius: 14px;
}

.app-view.hp153-installed .bottom-nav,
.pwa-secondary-bottom-nav {
  border-top: 1px solid var(--v161-line);
  box-shadow: 0 -3px 14px rgb(8 43 74 / 6%);
}

/* ---------- Selected seven-reference finish (layout locked) ----------
 * #018 travel: image-led warmth
 * #037 HR: calm information hierarchy
 * #057/#058/#059: stone, bronze, ivory and sage material palette
 * #068 museum: restrained editorial rules
 * #098 construction: field clarity remains the governing interaction rule
 *
 * Only palette, surface, image treatment and elevation change below. No grid,
 * size, order, visibility, route or attendance behavior is changed here.
 */

:root {
  --hd-paper: var(--v161-cream);
  --hd-paper-strong: var(--v161-paper);
  --hd-paper-muted: var(--v161-paper-warm);
  --hd-navy: var(--v161-navy);
  --hd-navy-soft: var(--v161-muted);
  --hd-coral: var(--v161-coral);
  --hd-coral-hover: var(--v161-coral-dark);
  --hd-coral-soft: var(--v161-coral-soft);
  --hd-green: var(--v161-ok);
  --hd-border: var(--v161-line);
  --hd-shadow: var(--v161-shadow);

  --pwa-canvas: var(--v161-cream);
  --pwa-surface: var(--v161-paper);
  --pwa-surface-muted: var(--v161-paper-warm);
  --pwa-navy: var(--v161-navy);
  --pwa-navy-soft: var(--v161-muted);
  --pwa-ink: var(--v161-ink);
  --pwa-muted: var(--v161-muted);
  --pwa-border: var(--v161-line);
  --pwa-coral: var(--v161-coral);
  --pwa-coral-deep: var(--v161-coral-dark);
  --pwa-coral-soft: var(--v161-coral-soft);
  --pwa-sage: var(--v161-sage);
  --pwa-sage-soft: var(--v161-ok-soft);
  --pwa-danger: #8b3f35;
  --pwa-danger-soft: #f5e4df;
  --pwa-shadow-soft: var(--v161-shadow);
  --pwa-shadow-card: 0 8px 22px rgb(79 56 39 / 7%);

  --v153-paper: var(--v161-cream);
  --v153-surface: var(--v161-paper);
  --v153-surface-soft: var(--v161-paper-warm);
  --v153-navy: var(--v161-navy);
  --v153-ink: var(--v161-ink);
  --v153-muted: var(--v161-muted);
  --v153-border: var(--v161-line);
  --v153-control-border: var(--v161-line-dark);
  --v153-coral: var(--v161-coral);
  --v153-coral-deep: var(--v161-coral-dark);
  --v153-coral-soft: var(--v161-coral-soft);
  --v153-blue-soft: var(--v161-navy-soft);
  --v153-green: var(--v161-ok);
  --v153-shadow: var(--v161-shadow);

  --bg: var(--v161-cream);
  --surface: var(--v161-paper);
  --surface-2: var(--v161-paper-warm);
  --ink: var(--v161-ink);
  --sub: var(--v161-muted);
  --line: var(--v161-line);
  --brand: var(--v161-navy);
  --accent: var(--v161-coral);
  --accent-soft: var(--v161-coral-soft);
  --success: var(--v161-ok);
  --success-soft: var(--v161-ok-soft);
  --amber: #6f512b;
  --amber-soft: #f6ead6;
  --warning: #6f512b;
  --danger: #8b3f35;
  --danger-soft: #f5e4df;

  --v15-navy: var(--v161-navy);
  --v15-text: var(--v161-ink);
  --v15-sub: var(--v161-muted);
  --v15-line: var(--v161-line);
  --v15-card: var(--v161-paper);
  --v15-blue: var(--v161-navy-mid);
  --v15-teal: var(--v161-ok);
}

.app-view.hp153-installed {
  --hp153-paper: var(--v161-cream);
  --hp153-surface: var(--v161-paper);
  --hp153-surface-soft: var(--v161-paper-warm);
  --hp153-navy: var(--v161-navy);
  --hp153-ink: var(--v161-ink);
  --hp153-muted: var(--v161-muted);
  --hp153-line: var(--v161-line);
  --hp153-coral: var(--v161-coral);
  --hp153-coral-deep: var(--v161-coral-dark);
  --hp153-coral-soft: var(--v161-coral-soft);
  --hp153-blue: var(--v161-navy-mid);
  --hp153-green: var(--v161-ok);
  --hp153-green-soft: var(--v161-ok-soft);
  --hp153-shadow: var(--v161-shadow);
}

.app-view #tab-sites,
.app-view #tab-sites button,
.app-view #tab-sites input,
.app-view #tab-sites select,
.app-view #tab-sites textarea {
  --foreman-paper: var(--v161-cream);
  --foreman-surface: var(--v161-paper);
  --foreman-soft: var(--v161-paper-warm);
  --foreman-navy: var(--v161-navy);
  --foreman-ink: var(--v161-ink);
  --foreman-muted: var(--v161-muted);
  --foreman-coral: var(--v161-coral);
  --foreman-coral-deep: var(--v161-coral-dark);
  --foreman-coral-soft: var(--v161-coral-soft);
  --foreman-green: var(--v161-ok);
  --foreman-green-soft: var(--v161-ok-soft);
  --foreman-border: var(--v161-line);
  --foreman-control-border: var(--v161-line-dark);
  --foreman-shadow: var(--v161-shadow);
}

html,
body,
.app-view.hp153-installed,
.pwa-secondary-layer,
.pwa-secondary-content,
.app-view #tab-punch {
  background-color: var(--v161-cream);
  background-image:
    radial-gradient(circle at 92% 3%, rgb(207 186 146 / 16%), transparent 26rem),
    linear-gradient(180deg, #f7f2e9 0%, var(--v161-cream) 34%, #eee8df 100%);
  background-attachment: fixed;
}

.app-view.hp153-installed.hp153-home-active .app-header,
.pwa-secondary-header,
.app-view.hp153-installed .bottom-nav,
.pwa-secondary-bottom-nav {
  background-color: var(--v161-paper);
  background-image: linear-gradient(180deg, #fffefb, #fbf6ed);
  box-shadow: 0 8px 24px rgb(79 56 39 / 7%);
}

.hp153-brand-logo,
.hp153-bell,
.app-view #pwa-home-v153 .hp153-photo-frame,
.app-view #pwa-home-v153 .hp153-photo-edit {
  border-color: var(--v161-line-dark);
}

.app-view #pwa-home-v153 .hp153-hero-top,
.app-view #pwa-home-v153 .hp153-shortcuts {
  border-color: var(--v161-line);
  border-top-color: var(--v161-bronze);
  background-color: var(--v161-paper);
  background-image: linear-gradient(145deg, #fffefb 0%, var(--v161-paper) 62%, #f8f1e5 100%);
  box-shadow: var(--v161-shadow);
}

.app-view #pwa-home-v153 .hp153-site-panel,
.pwa-menu-hero,
.pwa-menu-list {
  border-color: var(--v161-line);
  border-left-color: var(--v161-bronze);
  background-color: var(--v161-paper);
  background-image: linear-gradient(135deg, #fffefb, var(--v161-paper-warm));
  box-shadow: 0 10px 26px rgb(79 56 39 / 7%);
}

.app-view #pwa-home-v153 .hp153-hero-actions,
.app-view #pwa-home-v153 .hp153-summary-grid,
.app-view #pwa-home-v153 .hp153-lower-grid,
.pwa-menu-grid,
.app-view #tab-punch .pwa-site-reveal-controls {
  border-color: var(--v161-line);
  background-color: var(--v161-paper);
  background-image: linear-gradient(145deg, #fffefb, var(--v161-paper-warm));
  box-shadow: var(--v161-shadow);
}

.app-view #pwa-home-v153 .hp153-punch,
.app-view #tab-punch .punch-actions .btn-in,
.app-view #tab-punch .punch-actions .btn-out,
.app-view #tab-punch #pwa-site-show-next {
  border-color: var(--v161-coral-dark);
  background-color: var(--v161-coral);
  background-image: linear-gradient(135deg, #c35b43 0%, var(--v161-coral) 48%, #963b2b 100%);
  box-shadow: 0 10px 24px rgb(143 54 39 / 18%);
}

.app-view #pwa-home-v153 .hp153-photo-frame,
.app-view #tab-punch .pwa-site-choice-image {
  background-color: var(--v161-bronze-soft);
}

.app-view #pwa-home-v153 .hp153-hero-photo,
.app-view #tab-punch .pwa-site-choice-image {
  filter: saturate(.88) contrast(1.04) sepia(.045);
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card,
.app-view #pwa-home-v153 .hp153-card,
.pwa-menu-card,
.app-view #tab-punch .pwa-site-choice {
  border-color: var(--v161-line);
  background-color: var(--v161-paper);
  background-image: linear-gradient(145deg, #fffefb, var(--v161-paper));
}

.app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon,
.pwa-menu-card > span {
  background-color: var(--v161-bronze-soft);
  background-image: linear-gradient(145deg, #f4ead9, #e7dccb);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.app-view #pwa-home-v153 .hp153-card-icon,
.app-view #pwa-home-v153 .hp153-target-state,
.app-view #pwa-home-v153 .hp153-signal {
  background-color: var(--v161-paper-warm);
}

.app-view #pwa-home-v153 .hp153-status,
.app-view #pwa-home-v153 .hp153-target-state.is-selected,
.app-view #pwa-home-v153 .hp153-target-state.is-working {
  border-color: #9aae9d;
  background-color: var(--v161-ok-soft);
  color: var(--v161-ok);
  -webkit-text-fill-color: var(--v161-ok);
}

.app-view #tab-punch .pwa-site-choice[aria-pressed="true"],
.app-view #tab-punch .pwa-site-choice[aria-selected="true"],
.pwa-menu-card:first-child {
  border-color: var(--v161-coral);
  background-color: var(--v161-coral-soft);
  background-image: linear-gradient(135deg, #fff8f4, var(--v161-coral-soft));
}

.pwa-menu-avatar {
  border-color: var(--v161-navy);
  background-color: var(--v161-navy);
  background-image: linear-gradient(145deg, var(--v161-navy-mid), var(--v161-navy) 62%, #1f1b18);
}

.app-view.hp153-installed .bottom-nav button[aria-selected="true"],
.pwa-secondary-bottom-nav button[aria-current="page"] {
  background-color: var(--v161-paper-warm);
  background-image: linear-gradient(180deg, #fffefb, #f5eee2);
}

/* ---------- Owner-review direction B: visibly premium, same UI ----------
 * The first pass was intentionally conservative and read too close to the
 * approved cream baseline. This pass increases material contrast: champagne
 * hero surfaces, walnut-bronze rules, a deep editorial menu hero and a dark
 * selected-site state. Geometry and interaction contracts stay unchanged.
 */

html,
body,
.app-view.hp153-installed,
.pwa-secondary-layer,
.pwa-secondary-content,
.app-view #tab-punch {
  background-color: var(--v161-cream);
  background-image: linear-gradient(180deg, #f7eddd 0%, var(--v161-cream) 44%, #e7dccb 100%);
  background-attachment: scroll;
}

.app-view.hp153-installed.hp153-home-active .app-header,
.pwa-secondary-header,
.app-view.hp153-installed .bottom-nav,
.pwa-secondary-bottom-nav {
  border-color: var(--v161-bronze);
  background-color: var(--v161-paper);
  background-image: linear-gradient(105deg, #fffdf7 0%, #f8ead2 100%);
  box-shadow: 0 8px 26px rgb(68 45 22 / 13%);
}

.app-view #pwa-home-v153 .hp153-hero-top {
  border-color: var(--v161-line-dark);
  border-top-color: var(--v161-bronze);
  background-color: #f8ead2;
  background-image: linear-gradient(125deg, #fffdf7 0%, #f4dfbf 100%);
  box-shadow: 0 16px 36px rgb(68 45 22 / 16%);
}

.app-view #pwa-home-v153 .hp153-site-panel {
  border-color: var(--v161-line-dark);
  border-left-color: var(--v161-bronze);
  background-color: #f2dfc3;
  background-image: linear-gradient(120deg, #f0d9b7 0%, #fff8eb 100%);
  box-shadow: 0 12px 28px rgb(68 45 22 / 13%);
}

.app-view #pwa-home-v153 .hp153-hero-actions,
.app-view #pwa-home-v153 .hp153-summary-grid,
.app-view #pwa-home-v153 .hp153-lower-grid,
.app-view #pwa-home-v153 .hp153-shortcuts,
.app-view #tab-punch .pwa-site-reveal-controls {
  border-color: var(--v161-line-dark);
  background-color: var(--v161-paper);
  background-image: linear-gradient(145deg, #fffdf7 0%, #f2e2c9 100%);
  box-shadow: 0 12px 30px rgb(68 45 22 / 13%);
}

.app-view #pwa-home-v153 .hp153-punch,
.app-view #tab-punch .punch-actions .btn-in,
.app-view #tab-punch .punch-actions .btn-out,
.app-view #tab-punch #pwa-site-show-next {
  border-color: var(--v161-coral-dark);
  background-color: #a9402c;
  background-image: linear-gradient(135deg, #c65b42 0%, #a9412e 58%, #7f2d20 100%);
  box-shadow: 0 12px 26px rgb(109 42 29 / 25%);
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card,
.app-view #pwa-home-v153 .hp153-card,
.timeline-card,
.pwa-menu-list,
.app-view #tab-punch .site-picker {
  border-color: var(--v161-line);
  background-color: var(--v161-paper);
  background-image: linear-gradient(145deg, #fffdf7 0%, #f8eddb 100%);
  box-shadow: 0 9px 24px rgb(68 45 22 / 10%);
}

.app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon,
.app-view #pwa-home-v153 .hp153-card-icon,
.pwa-menu-card > span {
  border-color: #c9ad7b;
  background-color: var(--v161-bronze-soft);
  background-image: linear-gradient(145deg, #f5e5c8, #dcc49c);
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.pwa-menu-hero {
  border-color: var(--v161-bronze);
  border-left-color: #d5b77c;
  background-color: var(--v161-navy);
  background-image: linear-gradient(135deg, #153f50 0%, var(--v161-navy) 68%, #041c29 100%);
  box-shadow: 0 16px 34px rgb(4 28 41 / 24%);
}

.pwa-menu-hero small,
.pwa-menu-hero h2 {
  color: #fff9ee;
  -webkit-text-fill-color: #fff9ee;
}

.pwa-menu-hero > button {
  border-color: #e3cba2;
  background-color: #fff8eb;
  color: var(--v161-navy);
  -webkit-text-fill-color: var(--v161-navy);
}

.pwa-menu-card:first-child {
  border-color: #873221;
  background-color: #a9402c;
  background-image: linear-gradient(135deg, #bd5138 0%, #963622 100%);
  box-shadow: 0 10px 24px rgb(109 42 29 / 22%);
}

.pwa-menu-card:first-child > b,
.pwa-menu-card:first-child > small,
.pwa-menu-card:first-child > i {
  color: #fffaf2;
  -webkit-text-fill-color: #fffaf2;
}

.pwa-menu-card:first-child > span {
  border-color: #fff1dc;
  background: #fff6e8;
  color: #7c2c20;
  -webkit-text-fill-color: #7c2c20;
}

.app-view #tab-punch .pwa-site-choice {
  border-color: var(--v161-line);
  background-color: var(--v161-paper);
  background-image: linear-gradient(120deg, #fffdf7 0%, #f4e4cc 100%);
  box-shadow: 0 8px 20px rgb(68 45 22 / 10%);
}

.app-view #tab-punch .pwa-site-choice[aria-pressed="true"],
.app-view #tab-punch .pwa-site-choice[aria-selected="true"] {
  border-color: #c7a56c;
  background-color: var(--v161-navy);
  background-image: linear-gradient(125deg, #173f50 0%, var(--v161-navy) 72%, #041d2a 100%);
  box-shadow: 0 14px 30px rgb(4 28 41 / 24%);
}

.app-view #tab-punch .pwa-site-choice[aria-pressed="true"] > span:not(.pwa-site-choice-image) > b,
.app-view #tab-punch .pwa-site-choice[aria-pressed="true"] > span:not(.pwa-site-choice-image) > small,
.app-view #tab-punch .pwa-site-choice[aria-selected="true"] > span:not(.pwa-site-choice-image) > b,
.app-view #tab-punch .pwa-site-choice[aria-selected="true"] > span:not(.pwa-site-choice-image) > small {
  color: #fff9ee;
  -webkit-text-fill-color: #fff9ee;
}

.app-view #pwa-home-v153 .hp153-hero-photo,
.app-view #tab-punch .pwa-site-choice-image {
  filter: saturate(.78) contrast(1.08) sepia(.09);
}

.app-view.hp153-installed .bottom-nav button[aria-selected="true"],
.pwa-secondary-bottom-nav button[aria-current="page"] {
  background-color: #ead8b8;
  background-image: linear-gradient(180deg, #f8ead0 0%, #e1c79d 100%);
}

/* ---------- Owner-review direction C: selected-reference redesign ----------
 * Explicit 2026-08-08 owner instruction: preserve the work flows, not the old
 * card composition. The photo-led hero comes from #018/#057, the two-column
 * action dashboard from #037, the material palette from #058/#059, editorial
 * hierarchy from #068, and field clarity from #098.
 */

.app-view #pwa-home-v153 .hp153-hero {
  gap: 0;
}

.app-view #pwa-home-v153 .hp153-hero-top {
  position: relative;
  min-height: 244px;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid #b99b6b;
  border-radius: 24px;
  background: var(--v161-navy);
  box-shadow: 0 18px 38px rgb(30 38 38 / 20%);
}

.app-view #pwa-home-v153 .hp153-photo-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: #899a98;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-hero-photo {
  border-radius: inherit;
  filter: saturate(.8) contrast(1.08) sepia(.08);
}

.app-view #pwa-home-v153 .hp153-hero-photo::after {
  background:
    linear-gradient(90deg, rgb(4 28 41 / 82%) 0%, rgb(4 28 41 / 52%) 48%, rgb(4 28 41 / 8%) 78%),
    linear-gradient(0deg, rgb(4 28 41 / 58%) 0%, transparent 55%);
}

.app-view #pwa-home-v153 .hp153-hero-main {
  position: absolute;
  z-index: 2;
  top: 22px;
  bottom: 24px;
  left: 22px;
  width: min(61%, 248px);
  align-content: end;
}

.app-view #pwa-home-v153 .hp153-date,
.app-view #pwa-home-v153 .hp153-clock,
.app-view #pwa-home-v153 .hp153-status-note {
  color: #fff9ef;
  -webkit-text-fill-color: #fff9ef;
  text-shadow: 0 2px 12px rgb(0 0 0 / 28%);
}

.app-view #pwa-home-v153 .hp153-date {
  font-size: 13px;
  letter-spacing: .12em;
}

.app-view #pwa-home-v153 .hp153-clock {
  margin: 4px 0 10px;
  font-size: clamp(54px, 16vw, 68px);
  font-weight: 500;
  letter-spacing: -.065em;
}

.app-view #pwa-home-v153 .hp153-status {
  border-color: rgb(255 255 255 / 54%);
  background: rgb(255 249 239 / 93%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 16%);
}

.app-view #pwa-home-v153 .hp153-photo-edit {
  top: 14px;
  right: 14px;
  border-color: #e7cfaa;
  border-radius: 50%;
  background: rgb(255 253 247 / 94%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
}

.app-view #pwa-home-v153 .hp153-site-panel {
  z-index: 4;
  margin: -34px 13px 0;
  padding: 17px 17px 16px;
  border: 1px solid #c5a875;
  border-top: 4px solid var(--v161-bronze);
  border-radius: 18px;
  background: rgb(255 253 247 / 98%);
  box-shadow: 0 16px 30px rgb(68 45 22 / 17%);
}

.app-view #pwa-home-v153 .hp153-site {
  margin-top: 9px;
  font-size: clamp(25px, 7vw, 31px);
}

.app-view #pwa-home-v153 .hp153-site-change {
  border: 1px solid var(--v161-navy);
  border-radius: 999px;
  background: var(--v161-navy);
  color: #fff9ef;
  -webkit-text-fill-color: #fff9ef;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-hero-actions {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-punch {
  min-height: 82px;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgb(109 42 29 / 25%);
}

.app-view #pwa-home-v153 .hp153-signals {
  padding: 9px;
  border: 1px solid var(--v161-line);
  border-radius: 16px;
  background: #f6e8d1;
}

.app-view #pwa-home-v153 .hp153-signal {
  border: 0;
  border-right: 1px solid var(--v161-line);
  border-radius: 0;
  background: transparent;
}

.app-view #pwa-home-v153 .hp153-signal:last-child {
  border-right: 0;
}

.app-view #pwa-home-v153 .hp153-shortcuts {
  border: 0;
  border-radius: 22px;
  background: #fffaf0;
  box-shadow: 0 14px 32px rgb(68 45 22 / 13%);
}

.app-view #pwa-home-v153 .hp153-shortcuts-head {
  padding-left: 12px;
  border-left: 4px solid var(--v161-bronze);
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card {
  border: 1px solid var(--v161-line);
  border-radius: 16px;
  background: #fffdf7;
  box-shadow: 0 7px 18px rgb(68 45 22 / 9%);
}

.pwa-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pwa-menu-card {
  min-height: 116px;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 13px;
  border: 1px solid var(--v161-line);
  border-radius: 17px;
  background: #fffdf7;
  box-shadow: 0 9px 22px rgb(68 45 22 / 11%);
}

.pwa-menu-card > span {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

.pwa-menu-card > b {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.pwa-menu-card > small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  white-space: normal;
}

.pwa-menu-card > i {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

.pwa-menu-card:first-child {
  grid-column: 1 / -1;
  min-height: 94px;
  grid-template-columns: 54px minmax(0, 1fr) 18px;
  border: 1px solid #7f2d20;
  border-radius: 18px;
}

.app-view #tab-punch .pwa-site-choice-list.pwa-site-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}

.app-view #tab-punch .pwa-site-choice-row,
.app-view #tab-punch .pwa-site-choice {
  min-height: 236px;
}

.app-view #tab-punch .pwa-site-choice {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 126px minmax(108px, auto);
  border: 1px solid var(--v161-line-dark);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgb(68 45 22 / 13%);
}

.app-view #tab-punch .pwa-site-choice-image {
  width: 100%;
  height: 126px;
  min-height: 126px;
  border-right: 0;
  border-bottom: 1px solid var(--v161-line);
}

.app-view #tab-punch .pwa-site-choice > span:nth-child(2) {
  align-content: start;
  padding: 12px 10px 14px;
}

.app-view #tab-punch .pwa-site-choice b {
  min-height: 39px;
  font-size: 15px;
  line-height: 1.3;
}

.app-view #tab-punch .pwa-site-choice small {
  min-height: 47px;
  font-size: 11px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
}

.app-view #tab-punch .pwa-site-photo-edit {
  top: 76px;
  right: 8px;
  bottom: auto;
  border-color: #d8bf91;
  background: rgb(255 253 247 / 95%);
  box-shadow: 0 6px 14px rgb(0 0 0 / 16%);
}

.app-view #tab-punch .pwa-site-photo-message {
  right: 7px;
  bottom: 7px;
  left: 7px;
}

@media (max-width: 350px) {
  .app-view #pwa-home-v153 .hp153-hero-top { min-height: 226px; }
  .app-view #pwa-home-v153 .hp153-hero-main { left: 17px; bottom: 20px; width: 65%; }
  .app-view #pwa-home-v153 .hp153-clock { font-size: 51px; }
  .app-view #pwa-home-v153 .hp153-site-panel { margin-inline: 9px; }
  .pwa-menu-card { min-height: 112px; padding: 10px; }
  .app-view #tab-punch .pwa-site-choice-row,
  .app-view #tab-punch .pwa-site-choice { min-height: 226px; }
  .app-view #tab-punch .pwa-site-choice { grid-template-rows: 112px minmax(112px, auto); }
  .app-view #tab-punch .pwa-site-choice-image { height: 112px; min-height: 112px; }
  .app-view #tab-punch .pwa-site-photo-edit { top: 62px; }
}

/* ========================================================================== */
/* v170 / Stage 2: Claude Design approved Home                                */
/* Presentation-only. Canonical punch controls, routes and persistence stay   */
/* mounted in their existing files.                                            */
/* ========================================================================== */

.app-view.hp153-installed.hp153-home-active {
  position: relative;
  overflow-x: clip;
  background: var(--gn-bg);
  color: var(--gn-text);
}

.app-view.hp153-installed.hp153-home-active .tab-stage {
  width: min(100%, 560px);
  padding: 0;
  background: var(--gn-bg);
}

.app-view #pwa-home-v153.gn170-home {
  display: block;
  min-width: 0;
  overflow-x: clip;
  padding: 0 0 calc(92px + var(--gn-safe-bottom));
  background: var(--gn-bg);
  color: var(--gn-text);
  font-family: var(--gn-font-sans);
}

.app-view #pwa-home-v153.gn170-home :is(button, input, select, textarea) {
  font-family: var(--gn-font-sans);
}

/* The real application header is retained and visually placed over the hero. */
.app-view.hp153-installed.hp153-home-active .app-header {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 50%;
  width: min(100%, 560px);
  min-height: calc(76px + env(safe-area-inset-top));
  margin: 0;
  padding: calc(13px + env(safe-area-inset-top)) 22px 9px;
  border: 0 !important;
  transform: translateX(-50%);
  background: transparent;
  color: var(--gn-on-photo);
  box-shadow: none !important;
}

.app-view.hp153-installed.hp153-home-active #pwa-home-brand-v153 {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.app-view.hp153-installed.hp153-home-active .hp153-brand-logo {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent url('/assets/pwa/hashiguchi-denko-icon-master.png') center / contain no-repeat;
  box-shadow: none;
}

.app-view.hp153-installed.hp153-home-active .hp153-brand-copy {
  min-width: 0;
  color: var(--gn-on-photo);
  text-shadow: 0 2px 14px rgb(0 0 0 / 36%);
}

.app-view.hp153-installed.hp153-home-active .hp153-brand-copy b {
  display: block;
  overflow: hidden;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view.hp153-installed.hp153-home-active .hp153-brand-copy small {
  display: block;
  margin-top: 4px;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--gn-label-tracking);
  line-height: 1;
}

.app-view.hp153-installed.hp153-home-active .hp153-bell {
  width: var(--gn-control-height);
  height: var(--gn-control-height);
  min-width: var(--gn-control-height);
  margin: 0;
  padding: 0;
  border: 1px solid var(--gn-chip-border);
  border-radius: 50%;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  box-shadow: 0 10px 28px rgb(0 0 0 / 20%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-view.hp153-installed.hp153-home-active .hp153-bell-dot {
  border-color: var(--gn-chip-base);
  background: var(--gn-warning);
}

/* One photo, one information path, one primary action. */
.app-view #pwa-home-v153 .gn170-home-hero {
  position: relative;
  display: block;
  min-height: 640px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--gn-chip-base);
  box-shadow: none;
  color: var(--gn-on-photo);
}

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

.app-view #pwa-home-v153 .gn170-hero-photo-frame {
  position: absolute;
  z-index: 0;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  min-height: 0;
  margin: 0;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--gn-chip-base);
  box-shadow: none;
}

.app-view #pwa-home-v153 .gn170-hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-position: center;
  background-size: cover;
  filter: var(--gn-photo-filter);
  transform: scale(1.015);
}

.app-view #pwa-home-v153 .gn170-hero-photo::after {
  display: none;
}

.app-view #pwa-home-v153 .gn170-hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(10 37 64 / 66%) 0%, rgb(10 37 64 / 22%) 24%, rgb(10 37 64 / 12%) 42%, rgb(10 37 64 / 68%) 78%, rgb(10 37 64 / 96%) 100%),
    linear-gradient(90deg, rgb(10 37 64 / 38%) 0%, transparent 72%);
  pointer-events: none;
}

.app-view #pwa-home-v153 .gn170-hero-content {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(145px + env(safe-area-inset-top)) 24px 54px;
}

.app-view #pwa-home-v153 .gn170-home-hero .hp153-hero-top {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .gn170-home-hero .hp153-hero-main {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
}

.app-view #pwa-home-v153 .hp153-date {
  margin: 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-shadow: 0 2px 14px rgb(0 0 0 / 42%);
}

.app-view #pwa-home-v153 .hp153-clock {
  margin: 8px 0 10px;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: clamp(98px, 28vw, 116px);
  font-weight: 500;
  font-variant-numeric: var(--gn-number-variant);
  letter-spacing: -.065em;
  line-height: .82;
  text-shadow: 0 3px 18px rgb(0 0 0 / 40%);
}

.app-view #pwa-home-v153 .hp153-status-row {
  display: flex;
  min-height: var(--gn-control-height);
  align-items: center;
  gap: 9px;
}

.app-view #pwa-home-v153 .hp153-status,
.app-view #pwa-home-v153 .hp153-status.is-working,
.app-view #pwa-home-v153 .hp153-status-note {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--gn-chip-border);
  border-radius: 16px;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-status-note:empty {
  display: none;
}

.app-view #pwa-home-v153 .gn170-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 17px 0 0;
  padding: 0;
  border: 1px solid var(--gn-chip-border);
  border-radius: 20px;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-view #pwa-home-v153 .gn170-metric {
  min-width: 0;
  padding: 9px 7px 10px;
  text-align: center;
}

.app-view #pwa-home-v153 .gn170-metric + .gn170-metric {
  border-left: 1px solid var(--gn-chip-border);
}

.app-view #pwa-home-v153 .gn170-metric dt {
  overflow: hidden;
  margin: 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-metric dd {
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: var(--gn-number-variant);
  letter-spacing: -.025em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-site-identity {
  position: static;
  z-index: auto;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gn-on-photo);
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-site-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.app-view #pwa-home-v153 .hp153-site-label {
  min-width: 0;
  margin: 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--gn-label-tracking);
  line-height: 1.25;
  text-transform: uppercase;
}

.app-view #pwa-home-v153 .hp153-site-label svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.app-view #pwa-home-v153 .hp153-target-state,
.app-view #pwa-home-v153 .hp153-target-state.is-selected,
.app-view #pwa-home-v153 .hp153-target-state.is-working {
  min-height: 30px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--gn-chip-border);
  border-radius: 15px;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.app-view #pwa-home-v153 .hp153-site {
  display: block;
  overflow: hidden;
  margin: 11px 0 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: clamp(25px, 7.1vw, 32px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-shadow: 0 3px 16px rgb(0 0 0 / 38%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-site-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 9px;
  align-items: center;
}

.app-view #pwa-home-v153 .hp153-site-address {
  overflow: hidden;
  margin: 0;
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  text-shadow: 0 2px 12px rgb(0 0 0 / 44%);
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-site-change {
  min-width: 108px;
  min-height: var(--gn-control-height);
  padding: 0 14px;
  border: 1px solid var(--gn-chip-border);
  border-radius: 22px;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  -webkit-text-fill-color: currentColor;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-site-change::after {
  display: none;
}

.app-view #pwa-home-v153 .hp153-photo-edit {
  top: calc(82px + env(safe-area-inset-top));
  right: 22px;
  width: var(--gn-control-height);
  height: var(--gn-control-height);
  min-width: var(--gn-control-height);
  border: 1px solid var(--gn-chip-border);
  border-radius: 50%;
  background: var(--gn-chip-base);
  color: var(--gn-on-photo);
  box-shadow: 0 10px 28px rgb(0 0 0 / 20%);
}

.app-view #pwa-home-v153 .hp153-photo-message {
  z-index: 5;
  top: calc(132px + env(safe-area-inset-top));
  right: 22px;
  bottom: auto;
  left: 22px;
  color: var(--gn-on-photo);
  font-size: 11px;
  text-align: right;
}

/* The CTA overlaps the photo edge and remains in normal document flow. */
.app-view #pwa-home-v153 .gn170-primary-wrap {
  position: relative;
  z-index: 8;
  display: block;
  margin: -63px 24px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-punch {
  position: relative;
  width: 100%;
  min-height: var(--gn-main-action-height);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 8px 20px;
  border: 0 !important;
  border-radius: var(--gn-main-action-radius);
  background: var(--gn-primary-bg) !important;
  color: var(--gn-primary-fg) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: 0 20px 46px rgb(10 37 64 / 30%), 0 4px 14px rgb(10 37 64 / 18%);
}

.app-view #pwa-home-v153 .hp153-punch :is(b, span, svg) {
  color: var(--gn-primary-fg) !important;
  -webkit-text-fill-color: var(--gn-primary-fg) !important;
}

.app-view #pwa-home-v153 .hp153-punch > svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.app-view #pwa-home-v153 .hp153-punch-copy {
  min-width: 0;
  text-align: left;
}

.app-view #pwa-home-v153 .hp153-punch-site {
  display: block;
  overflow: hidden;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-punch b {
  display: block;
  margin-top: 4px;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}

.app-view #pwa-home-v153 .hp153-punch-arrow {
  color: inherit;
  font-family: var(--gn-font-sans);
  font-size: 25px;
  font-weight: 400;
}

.app-view #pwa-home-v153 .gn170-primary-note {
  min-height: 20px;
  margin: 7px 10px 0;
  color: var(--gn-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.app-view #pwa-home-v153 .gn170-home-sheet {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 30px;
  margin-top: -54px;
  padding: 72px 20px 34px;
  border-radius: 34px 34px 0 0;
  background: var(--gn-surface);
  color: var(--gn-text);
  box-shadow: 0 -12px 38px rgb(10 37 64 / 9%);
}

.app-view #pwa-home-v153 .gn170-connection-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gn-hairline);
  border-radius: 20px;
  background: var(--gn-surface-soft);
  box-shadow: none;
}

.app-view #pwa-home-v153 .gn170-connection-row .hp153-signal {
  min-width: 0;
  min-height: var(--gn-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gn-text-muted);
  -webkit-text-fill-color: currentColor !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-connection-row .hp153-signal :is(span, svg) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.app-view #pwa-home-v153 .gn170-connection-row .hp153-signal + .hp153-signal {
  border-left: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-connection-row .hp153-signal svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
}

.app-view #pwa-home-v153 .gn170-editorial-section {
  min-width: 0;
  margin: 0;
}

.app-view #pwa-home-v153 .gn170-section-heading,
.app-view #pwa-home-v153 .hp153-shortcuts-head {
  display: flex;
  min-height: var(--gn-control-height);
  align-items: end;
  gap: 12px;
  margin: 0 0 15px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-section-heading p,
.app-view #pwa-home-v153 .hp153-shortcuts-head::before {
  margin: 0;
  color: var(--gn-text-quiet);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--gn-label-tracking);
  line-height: 1.2;
}

.app-view #pwa-home-v153 .hp153-shortcuts-head::before {
  content: "FREQUENT";
}

.app-view #pwa-home-v153 .gn170-section-heading h2,
.app-view #pwa-home-v153 .hp153-shortcuts-head h2,
.app-view #pwa-home-v153 .hp153-card-head h2 {
  margin: 0;
  color: var(--gn-text);
  -webkit-text-fill-color: currentColor;
  font-family: var(--gn-font-mincho);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
}

.app-view #pwa-home-v153 .hp153-shortcuts-head h2 {
  order: 2;
}

.app-view #pwa-home-v153 .hp153-shortcuts-head::before {
  order: 1;
}

.app-view #pwa-home-v153 #hp153-shortcut-controls {
  order: 3;
  margin-left: auto;
}

.app-view #pwa-home-v153 .gn170-foreman-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-foreman-stat {
  min-width: 0;
  padding: 15px 7px 16px;
  text-align: center;
}

.app-view #pwa-home-v153 .gn170-foreman-stat + .gn170-foreman-stat {
  border-left: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-foreman-stat span {
  display: block;
  color: var(--gn-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.app-view #pwa-home-v153 .gn170-foreman-stat b {
  display: block;
  margin-top: 8px;
  color: var(--gn-number);
  font-family: var(--gn-font-mincho);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: var(--gn-number-variant);
  line-height: 1;
}

.app-view #pwa-home-v153 .gn170-session-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-session-item {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
}

.app-view #pwa-home-v153 .gn170-session-item + .gn170-session-item {
  border-top: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .gn170-session-item span {
  min-width: 0;
}

.app-view #pwa-home-v153 .gn170-session-item b,
.app-view #pwa-home-v153 .gn170-session-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-session-item b {
  color: var(--gn-text);
  font-size: 15px;
  font-weight: 500;
}

.app-view #pwa-home-v153 .gn170-session-item small {
  margin-top: 4px;
  color: var(--gn-text-muted);
  font-size: 11px;
}

.app-view #pwa-home-v153 .gn170-session-item time {
  color: var(--gn-number);
  font-family: var(--gn-font-mincho);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: var(--gn-number-variant);
  white-space: nowrap;
}

.app-view #pwa-home-v153 .gn170-site-rail-list {
  display: grid;
  grid-auto-columns: minmax(232px, 78%);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding: 0 1px 8px;
  scroll-padding-inline: 1px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

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

.app-view #pwa-home-v153 .gn170-site-option {
  min-height: 104px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--gn-hairline);
  border-radius: 20px;
  background: var(--gn-surface-soft);
  color: var(--gn-text);
  text-align: left;
  scroll-snap-align: start;
  box-shadow: none;
}

.app-view #pwa-home-v153 .gn170-site-option-photo {
  min-height: 102px;
  background-color: var(--gn-navy);
  background-position: center;
  background-size: cover;
  filter: var(--gn-photo-filter);
}

.app-view #pwa-home-v153 .gn170-site-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
}

.app-view #pwa-home-v153 .gn170-site-option-copy b,
.app-view #pwa-home-v153 .gn170-site-option-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.app-view #pwa-home-v153 .gn170-site-option-copy b {
  color: var(--gn-text);
  font-family: var(--gn-font-mincho);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  -webkit-line-clamp: 2;
}

.app-view #pwa-home-v153 .gn170-site-option-copy small {
  margin-top: 7px;
  color: var(--gn-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-line-clamp: 2;
}

/* Existing launcher and lower summaries remain complete below the first fold. */
.app-view #pwa-home-v153 .hp153-shortcuts {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-shortcut-settings {
  min-width: var(--gn-control-height);
  min-height: var(--gn-control-height);
  padding: 0 12px;
  border: 1px solid var(--gn-hairline);
  border-radius: 22px;
  background: var(--gn-surface-soft);
  color: var(--gn-text);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-shortcut-settings::after {
  display: none;
}

.app-view #pwa-home-v153 .hp153-shortcut-grid,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-view #pwa-home-v153 .hp153-shortcut,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--gn-hairline);
  border-radius: 20px;
  background: var(--gn-surface-soft);
  color: var(--gn-text);
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-shortcut .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card .v15-action-icon,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) .v15-action-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gn-accent-text);
  font-size: 20px;
  font-weight: 500;
}

.app-view #pwa-home-v153 .hp153-shortcut b,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card b,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) b {
  color: var(--gn-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.app-view #pwa-home-v153 .hp153-shortcut small,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card small,
.app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--gn-text-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view #pwa-home-v153 .hp153-summary-grid,
.app-view #pwa-home-v153 .hp153-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-block: 1px solid var(--gn-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-card,
.app-view #pwa-home-v153 .hp153-card + .hp153-card {
  min-width: 0;
  min-height: 132px;
  margin: 0;
  padding: 18px 2px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-view #pwa-home-v153 .hp153-card + .hp153-card {
  border-top: 1px solid var(--gn-hairline);
}

.app-view #pwa-home-v153 .hp153-card-head {
  min-height: var(--gn-control-height);
  padding: 0;
}

.app-view #pwa-home-v153 .hp153-card-head h2 {
  font-size: 23px;
}

.app-view #pwa-home-v153 .hp153-card-icon {
  width: var(--gn-control-height);
  height: var(--gn-control-height);
  border: 0;
  border-radius: 50%;
  background: var(--gn-surface-soft);
  color: var(--gn-accent-text);
}

.app-view #pwa-home-v153 .hp153-card-body,
.app-view #pwa-home-v153 .hp153-duration,
.app-view #pwa-home-v153 .hp153-personal-entry,
.app-view #pwa-home-v153 .hp153-record-list {
  color: var(--gn-text-muted);
  font-size: 13px;
  font-weight: 400;
}

.app-view #pwa-home-v153 .hp153-duration b {
  color: var(--gn-number);
  font-family: var(--gn-font-mincho);
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: var(--gn-number-variant);
}

.app-view #pwa-home-v153 .hp153-card-link,
.app-view #pwa-home-v153 .hp153-add {
  min-height: var(--gn-control-height);
  color: var(--gn-accent-text);
  -webkit-text-fill-color: currentColor;
  font-size: 12px;
  font-weight: 500;
}

.app-view #pwa-home-v153 .hp153-progress {
  background: var(--gn-surface-soft);
}

.app-view #pwa-home-v153 .hp153-progress i {
  background: var(--gn-accent);
}

/* Bottom navigation remains the existing five-tab contract for both roles. */
.app-view.hp153-installed.hp153-home-active .bottom-nav,
.app-view.hp153-installed.hp153-home-active .bottom-nav::before {
  border-color: var(--gn-hairline);
  background: var(--gn-surface);
  box-shadow: 0 -8px 28px rgb(10 37 64 / 8%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-view.hp153-installed.hp153-home-active .bottom-nav button {
  min-width: 54px;
  min-height: 60px;
  gap: 5px;
  border-radius: 0;
  background: transparent;
  color: var(--gn-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 11px;
  font-weight: 500;
}

.app-view.hp153-installed.hp153-home-active .bottom-nav button :is(span, svg) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.app-view.hp153-installed.hp153-home-active .bottom-nav button svg {
  stroke: currentColor !important;
}

.app-view.hp153-installed.hp153-home-active .bottom-nav button[aria-selected="true"] {
  background: transparent;
  color: var(--gn-accent-text) !important;
}

.app-view.hp153-installed.hp153-home-active .bottom-nav button[aria-selected="true"]::after {
  right: 30%;
  bottom: 1px;
  left: 30%;
  height: 2px;
  border-radius: 1px;
  background: var(--gn-accent);
}

@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  .app-view.hp153-installed.hp153-home-active,
  .app-view.hp153-installed.hp153-home-active .tab-stage,
  .app-view #pwa-home-v153.gn170-home {
    background: var(--gn-bg);
    color: var(--gn-text);
  }

  .app-view #pwa-home-v153 .gn170-hero-shade {
    background:
      linear-gradient(180deg, rgb(6 23 42 / 78%) 0%, rgb(6 23 42 / 34%) 24%, rgb(6 23 42 / 22%) 42%, rgb(6 23 42 / 82%) 78%, rgb(6 23 42 / 98%) 100%),
      linear-gradient(90deg, rgb(6 23 42 / 48%) 0%, transparent 72%);
  }

  .app-view #pwa-home-v153 .gn170-home-sheet {
    background: var(--gn-surface);
    box-shadow: 0 -12px 38px rgb(0 0 0 / 22%);
  }

  .app-view #pwa-home-v153 .hp153-punch {
    box-shadow: 0 20px 46px rgb(0 0 0 / 34%), 0 4px 14px rgb(0 0 0 / 22%);
  }

  .app-view.hp153-installed.hp153-home-active .bottom-nav,
  .app-view.hp153-installed.hp153-home-active .bottom-nav::before {
    background: var(--gn-surface);
    box-shadow: 0 -8px 28px rgb(0 0 0 / 22%);
  }
}

@media (max-width: 390px) {
  .app-view.hp153-installed.hp153-home-active .app-header {
    padding-inline: 18px;
  }

  .app-view #pwa-home-v153 .gn170-hero-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .app-view #pwa-home-v153 .gn170-primary-wrap {
    margin-right: 20px;
    margin-left: 20px;
  }

  .app-view #pwa-home-v153 .gn170-home-sheet {
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 360px) {
  .app-view.hp153-installed.hp153-home-active .app-header {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    padding-inline: 16px;
  }

  .app-view.hp153-installed.hp153-home-active #pwa-home-brand-v153 {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    gap: 10px;
  }

  .app-view.hp153-installed.hp153-home-active .hp153-brand-logo {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .app-view.hp153-installed.hp153-home-active .hp153-brand-copy b {
    font-size: 18px;
  }

  .app-view #pwa-home-v153 .gn170-home-hero {
    min-height: 628px;
  }

  .app-view #pwa-home-v153 .gn170-hero-content {
    padding: calc(142px + env(safe-area-inset-top)) 17px 52px;
  }

  .app-view #pwa-home-v153 .hp153-clock {
    font-size: 98px;
  }

  .app-view #pwa-home-v153 .gn170-metric {
    padding-inline: 4px;
  }

  .app-view #pwa-home-v153 .gn170-metric dt {
    font-size: 7px;
  }

  .app-view #pwa-home-v153 .gn170-metric dd {
    font-size: 16px;
  }

  .app-view #pwa-home-v153 .hp153-site {
    font-size: 31px;
  }

  .app-view #pwa-home-v153 .gn170-site-meta {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px;
  }

  .app-view #pwa-home-v153 .hp153-site-change {
    min-width: 104px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .app-view #pwa-home-v153 .gn170-primary-wrap {
    margin-right: 17px;
    margin-left: 17px;
  }

  .app-view #pwa-home-v153 .gn170-home-sheet {
    gap: 26px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .app-view #pwa-home-v153 .gn170-connection-row .hp153-signal {
    gap: 3px;
    padding-inline: 3px;
    font-size: 9px;
  }

  .app-view #pwa-home-v153 .gn170-foreman-stat {
    padding-inline: 4px;
  }

  .app-view #pwa-home-v153 .gn170-foreman-stat span {
    font-size: 10px;
  }

  .app-view #pwa-home-v153 .gn170-foreman-stat b {
    font-size: 21px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut-grid,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid {
    gap: 8px;
  }

  .app-view #pwa-home-v153 .hp153-shortcut,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card,
  .app-view #pwa-home-v153 #v15-launcher.hp153-shortcut-grid .v15-action-card:nth-child(n + 5):not([hidden]) {
    grid-template-columns: 30px minmax(0, 1fr) 10px;
    gap: 8px;
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-view #pwa-home-v153 *,
  .app-view.hp153-home-active #pwa-home-brand-v153 *,
  .app-view.hp153-home-active .bottom-nav * {
    scroll-behavior: auto;
    transition-duration: .001ms;
    animation-duration: .001ms;
    animation-iteration-count: 1;
  }
}