/* Persistent mobile navigation trigger */
@media(max-width:860px){
  body.shell-app #menuToggle{
    display:grid!important;
    place-items:center;
    position:fixed!important;
    top:max(14px,calc(env(safe-area-inset-top) + 8px))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(25,25,25,.12)!important;
    border-radius:14px!important;
    background:rgba(250,248,243,.94)!important;
    color:#191919!important;
    box-shadow:0 8px 24px rgba(25,25,25,.08)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:65!important;
    line-height:1!important;
    font-size:22px!important;
  }
  body.shell-app .topbar{
    padding-left:52px!important;
  }
  body.shell-app #menuToggle:active{
    transform:scale(.96);
  }
}
@media(max-width:430px){
  body.shell-app #menuToggle{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
  }
  body.shell-app .topbar{
    padding-left:48px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.shell-app #menuToggle{transition:none!important}
}

/* Tap-outside drawer close layer */
.sidebar-scrim{
  display:none;
}
@media(max-width:860px){
  body.shell-app .sidebar-scrim:not([hidden]){
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(25,25,25,.14)!important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
    z-index:39!important;
    cursor:default;
  }
  body.shell-app.sidebar-is-open{
    overflow:hidden;
  }
}

/* Clock-synced 15-minute card palettes */
#todayHeroCard.quarter-color-0{background-color:#FFF0B7}
#todayHeroCard.quarter-color-1{background-color:#DDEBFA}
#todayHeroCard.quarter-color-2{background-color:#F8F5EE}
#todayHeroCard.quarter-color-3{background-color:#E7E5FF}

.trial-card.quarter-color-0{
  background-color:#FFFDF5;
  border-color:#191919;
  box-shadow:0 0 0 rgba(25,25,25,0);
}
.trial-card.quarter-color-1{
  background-color:#EAF4FF;
  border-color:#8DB6DC;
  box-shadow:0 8px 24px rgba(141,182,220,.16);
}
.trial-card.quarter-color-2{
  background-color:#FFF3A8;
  border-color:#D4BC3E;
  box-shadow:0 8px 24px rgba(242,216,91,.18);
}
.trial-card.quarter-color-3{
  background-color:#F2F0FF;
  border-color:#B7B1DE;
  box-shadow:0 8px 24px rgba(183,177,222,.16);
}

[data-page="platform-admin"]>.metric-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.suspected-traffic-row .status{
  white-space:nowrap;
}
@media(max-width:860px){
  [data-page="platform-admin"]>.metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:430px){
  [data-page="platform-admin"]>.metric-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Footer share CTA */
.footer-share-app-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #191919!important;
  border-radius:999px!important;
  background:#191919!important;
  color:#fff!important;
  padding:9px 14px!important;
  margin-left:auto!important;
  min-height:38px!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer;
}
.footer-share-app-btn:hover{
  color:#fff!important;
  text-decoration:none!important;
  transform:translateY(-1px);
}
.footer-share-app-btn span:first-child{
  font-size:14px;
  line-height:1;
}
@media(max-width:680px){
  .footer-share-app-btn{
    width:100%!important;
    margin:8px 0 0!important;
    min-height:42px!important;
  }
}


/* 2026-09-27 — contextual greeting card states */
#todayHeroCard.quarter-color-0{background-color:#F3EBCB}
#todayHeroCard.quarter-color-1{background-color:#E7EEF2}
#todayHeroCard.quarter-color-2{background-color:#F3F0EA}
#todayHeroCard.quarter-color-3{background-color:#ECE9F2}

#todayHeroCard.message-rain{
  background:linear-gradient(135deg,#DCE8EC 0%,#EEF2F1 58%,#E7E1D4 100%)!important;
}
#todayHeroCard.message-jobs{
  background:linear-gradient(135deg,#F2E8C6 0%,#F7F3E8 100%)!important;
}
#todayHeroCard.message-booking{
  background:linear-gradient(135deg,#E3EDF2 0%,#F5F3ED 100%)!important;
}
#todayHeroCard.message-quotes{
  background:linear-gradient(135deg,#E8EAF1 0%,#F4F1EA 100%)!important;
}
#todayHeroCard.message-invoice{
  background:linear-gradient(135deg,#ECE5D9 0%,#F6F2EB 100%)!important;
}
#todayHeroCard.message-hydrate{
  background:linear-gradient(135deg,#E2EDF1 0%,#F5F2E9 100%)!important;
}
#todayHeroCard.message-night{
  background:linear-gradient(135deg,#E8E7F0 0%,#F3F0EA 100%)!important;
}
#todayHeroCard[data-daypart="early"] #todayGreeting,
#todayHeroCard[data-daypart="morning"] #todayGreeting,
#todayHeroCard[data-daypart="midday"] #todayGreeting,
#todayHeroCard[data-daypart="afternoon"] #todayGreeting,
#todayHeroCard[data-daypart="wrap"] #todayGreeting,
#todayHeroCard[data-daypart="evening"] #todayGreeting,
#todayHeroCard[data-daypart="late"] #todayGreeting{
  letter-spacing:-.035em;
}
#todayHeroCard #todayMomentCopy{
  max-width:640px;
  line-height:1.55;
}
@media(max-width:720px){
  #todayHeroCard #todayMomentCopy{font-size:15px;line-height:1.5}
  #todayHeroCard .hero-greeting-zone #todayHeroAction{width:100%;justify-content:center}
}

/* Auth recovery action */
.auth-links .auth-retry{
  border:1px solid var(--ink);
  background:#F4F1EA;
  border-radius:999px;
  padding:8px 12px;
}
.auth-links .auth-retry[hidden]{display:none!important}
@media(max-width:620px){
  .auth-links{flex-wrap:wrap;align-items:center}
  .auth-links .auth-retry{order:-1;width:100%;text-align:center}
}


/* 2026-09-27 — unified app card palette */
.app-shell{--unified-card-bg:#F3F0EA}
.app-shell.quarter-color-0{--unified-card-bg:#F3EBCB}
.app-shell.quarter-color-1{--unified-card-bg:#E7EEF2}
.app-shell.quarter-color-2{--unified-card-bg:#F3F0EA}
.app-shell.quarter-color-3{--unified-card-bg:#ECE9F2}
.app-shell[data-card-mood="rain"]{--unified-card-bg:linear-gradient(135deg,#DCE8EC 0%,#EEF2F1 58%,#E7E1D4 100%)}
.app-shell[data-card-mood="jobs"]{--unified-card-bg:linear-gradient(135deg,#F2E8C6 0%,#F7F3E8 100%)}
.app-shell[data-card-mood="booking"]{--unified-card-bg:linear-gradient(135deg,#E3EDF2 0%,#F5F3ED 100%)}
.app-shell[data-card-mood="quotes"]{--unified-card-bg:linear-gradient(135deg,#E8EAF1 0%,#F4F1EA 100%)}
.app-shell[data-card-mood="invoice"]{--unified-card-bg:linear-gradient(135deg,#ECE5D9 0%,#F6F2EB 100%)}
.app-shell[data-card-mood="hydrate"]{--unified-card-bg:linear-gradient(135deg,#E2EDF1 0%,#F5F2E9 100%)}
.app-shell[data-card-mood="night"]{--unified-card-bg:linear-gradient(135deg,#E8E7F0 0%,#F3F0EA 100%)}

.app-shell .metric-card,
.app-shell .quick-card,
.app-shell .table-card,
.app-shell .client-card,
.app-shell .service-card,
.app-shell .supply-card,
.app-shell .share-access-card,
.app-shell .timer-card,
.app-shell .empty-card,
.app-shell .mobile-record-card,
.app-shell .review-settings-card,
.app-shell .support-contact-card,
.app-shell .worker-job-card,
.app-shell .trial-card,
.app-shell .inquiry-detail-card,
.app-shell .install-card,
.app-shell .onboarding-help-card{
  background:var(--unified-card-bg)!important;
  border-color:rgba(87,81,72,.18)!important;
  box-shadow:none!important;
  transition:background .28s ease,border-color .28s ease!important;
}

/* Compact share action — never blocks primary controls */
.footer-share-app-btn{
  width:auto!important;
  max-width:max-content!important;
  min-height:34px!important;
  padding:7px 10px!important;
  gap:5px!important;
  font-size:10px!important;
  font-weight:800!important;
  margin-left:auto!important;
  align-self:center!important;
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
}
.footer-share-app-btn span:first-child{font-size:12px!important}
@media(max-width:680px){
  .footer-share-app-btn{
    width:auto!important;
    max-width:max-content!important;
    min-height:34px!important;
    margin:7px 0 0!important;
    padding:7px 10px!important;
    align-self:flex-start!important;
  }
}

/* Password visibility toggle — subtle eyelid tab, not a literal eye */
.password-input-wrap{position:relative;display:block}
.password-input-wrap input{width:100%;padding-right:46px}
.password-toggle{
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:24px;
  border:1px solid rgba(39,37,33,.18);
  border-radius:10px;
  background:#F7F4EE;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  line-height:1;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.password-toggle:hover{background:#EFEAE1;border-color:rgba(39,37,33,.28)}
.password-toggle:active{transform:translateY(-50%) scale(.96)}
.password-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.password-tab-icon{
  position:relative;
  display:block;
  width:16px;
  height:9px;
  border-top:2px solid currentColor;
  border-radius:50% 50% 0 0;
  opacity:.78;
}
.password-tab-icon:before,
.password-tab-icon:after{
  content:"";
  position:absolute;
  top:-5px;
  width:2px;
  height:5px;
  border-radius:2px;
  background:currentColor;
  opacity:.72;
}
.password-tab-icon:before{left:3px;transform:rotate(-20deg)}
.password-tab-icon:after{right:3px;transform:rotate(20deg)}
.password-toggle.is-visible .password-tab-icon{
  border-top-color:transparent;
  border-bottom:2px solid currentColor;
  border-radius:0 0 50% 50%;
}
.password-toggle.is-visible .password-tab-icon:before,
.password-toggle.is-visible .password-tab-icon:after{
  top:5px;
  transform:rotate(0deg);
  height:3px;
  opacity:.45;
}

/* Registration welcome */
.onboarding-layer.welcome .onboarding-card{
  border-radius:24px;
  box-shadow:0 24px 70px rgba(39,37,33,.14);
  max-width:520px;
}
.onboarding-layer.welcome .onboarding-topline .pill{
  background:#E7D88A;
  border-color:#C8B873;
  color:#292723;
}
.onboarding-layer.welcome .onboarding-card h3{
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.08;
}
.onboarding-layer.welcome .onboarding-card p{
  line-height:1.6;
}
.onboarding-layer.welcome .onboarding-close{
  width:36px;
  height:36px;
  border-radius:999px;
  background:#F5F1E9;
}
@media(max-width:620px){
  .onboarding-layer.welcome{padding:16px}
  .onboarding-layer.welcome .onboarding-card{border-radius:20px}
}

/* Mileage route note */
.record-primary .record-note{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  font-style:normal;
  line-height:1.4;
}

/* Team message center */
.worker-guest-pill{
  display:inline-flex;
  margin-bottom:12px;
  background:#E7D88A!important;
  border-color:#C5B875!important;
  color:#292723!important;
}
.message-unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  background:#191919;
  color:#fff!important;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.message-unread-badge[hidden]{display:none!important}
.team-message-preview{
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#777169!important;
  line-height:1.4;
}
.team-message-center{
  margin-top:20px;
}
.message-worker-select{
  display:grid;
  gap:7px;
  max-width:360px;
  margin-bottom:14px;
  color:#706D66;
  font-size:11px;
  font-weight:850;
}
.message-worker-select select{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
}
.message-thread{
  min-height:220px;
  max-height:420px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#F8F6F1;
  overscroll-behavior:contain;
}
.message-row{
  display:flex;
  width:100%;
}
.message-row.mine{justify-content:flex-end}
.message-row.theirs{justify-content:flex-start}
.message-bubble{
  max-width:min(78%,520px);
  padding:10px 12px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.message-row.mine .message-bubble{
  background:#191919;
  color:#fff;
  border-color:#191919;
  border-bottom-right-radius:5px;
}
.message-row.theirs .message-bubble{
  border-bottom-left-radius:5px;
}
.message-bubble small{
  display:block;
  margin-bottom:4px;
  color:#8A857D;
  font-size:9px;
  font-weight:800;
}
.message-row.mine .message-bubble small{color:rgba(255,255,255,.64)}
.message-bubble p{
  margin:0;
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.message-compose{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  margin-top:10px;
  align-items:end;
}
.message-compose textarea{
  width:100%;
  min-height:52px;
  max-height:130px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.message-compose button{min-height:48px}
.worker-message-panel .panel-head{align-items:flex-start}
.worker-message-thread{background:#FBFAF7}
@media(max-width:620px){
  .message-thread{min-height:190px;max-height:360px;padding:10px}
  .message-bubble{max-width:88%}
  .message-compose{grid-template-columns:1fr}
  .message-compose button{width:100%}
  .worker-guest-pill{font-size:9px}
}

/* Language picker panel */
.language-menu{
  position:fixed;
  z-index:10020;
  padding:14px;
  border:1px solid rgba(39,37,33,.14);
  border-radius:20px;
  background:#FFFEFB;
  box-shadow:0 22px 60px rgba(39,37,33,.16);
}
.language-menu[hidden]{display:none!important}
.language-menu-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:2px 2px 12px;
}
.language-menu-head div{display:grid;gap:3px}
.language-menu-head small,
.language-more-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  color:#777169;
}
.language-menu-head strong{
  font-size:15px;
  font-weight:650;
  letter-spacing:-.015em;
}
.language-menu-close{
  width:32px;
  height:32px;
  border:1px solid rgba(39,37,33,.12);
  border-radius:999px;
  background:#F5F1E9;
  color:var(--ink);
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.language-featured-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.language-more-label{
  padding:14px 4px 7px;
}
.language-list{
  display:grid;
  gap:7px;
}
.language-choice{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:11px 13px;
  border:1px solid rgba(39,37,33,.12);
  border-radius:13px;
  background:#FAF8F3;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.language-choice.featured{
  min-height:62px;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  background:#fff;
}
.language-choice span{
  font-size:14px;
  font-weight:650;
}
.language-choice small{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  color:#777169;
}
.language-choice:hover{
  border-color:rgba(39,37,33,.28);
  background:#F4F0E7;
}
.language-choice.active{
  border-color:#2A2926;
  box-shadow:inset 0 0 0 1px #2A2926;
}
.language-choice.active:after{
  content:"✓";
  margin-left:auto;
  font-size:13px;
  font-weight:800;
}
.language-choice.featured.active:after{
  position:absolute;
  align-self:flex-end;
}
.language-choice.featured{position:relative}
@media(max-width:520px){
  .language-menu{
    left:12px!important;
    right:12px;
    width:auto!important;
    top:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom));
    border-radius:20px;
  }
}

/* Auth touch reliability */
#authSwitch,#forgotPassword{
  min-height:44px;
  padding:10px 2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  position:relative;
  z-index:3;
}
#authSubmit{
  min-height:48px;
  touch-action:manipulation;
}
@media(max-width:620px){
  .auth-links{gap:6px 14px}
  #authSwitch,#forgotPassword{font-size:13px}
}

/* Time Tracking list-only removal */
.time-hide-btn{
  display:block;
  margin-top:8px;
  padding:0;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.time-hide-btn:hover{color:var(--ink)}

/* 2026-09-27 — stable mobile modal scroll */
body.modal-open{
  position:fixed!important;
  left:0;
  right:0;
  width:100%;
  overflow:hidden!important;
  touch-action:none;
}
.modal-backdrop{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-top:max(18px,env(safe-area-inset-top));
  padding-bottom:max(22px,env(safe-area-inset-bottom));
}
.modal{
  flex:0 0 auto;
  width:min(560px,calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  max-height:none!important;
  overflow:visible!important;
  margin:auto 0;
}
.form-footer{
  position:static!important;
  bottom:auto!important;
  background:transparent;
  padding-bottom:max(4px,env(safe-area-inset-bottom));
  z-index:auto;
}
@media(max-width:620px){
  .modal-backdrop{
    padding-left:12px;
    padding-right:12px;
  }
  .modal{
    width:100%;
    max-width:100%;
    margin:0;
    border-radius:24px;
    padding:26px 22px;
  }
  .modal h2{
    padding-right:48px;
    font-size:clamp(34px,10vw,48px);
    line-height:1.02;
  }
  .modal-close{
    position:sticky;
    float:right;
    top:8px;
    right:auto;
    margin-top:-2px;
    z-index:3;
  }
  .entity-form{
    clear:both;
  }
  .form-footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding-top:18px;
    margin-top:22px;
  }
  .form-footer > button{
    width:100%;
    min-height:48px;
  }
}

/* Mobile auth tap hardening */
[data-auth-touch-hardened="true"] #authSubmit,
[data-auth-touch-hardened="true"] #authSwitch,
[data-auth-touch-hardened="true"] #forgotPassword,
[data-auth-touch-hardened="true"] #authRetryButton{
  position:relative;
  z-index:2;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
[data-auth-touch-hardened="true"] .auth-form,
[data-auth-touch-hardened="true"] .auth-links{
  position:relative;
  z-index:1;
}

/* Compact language switcher */
.compact-header-actions{display:flex;align-items:center;gap:8px}
.language-mini-toggle{
  min-width:42px;
  height:36px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}
.language-mini-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:560px){
  .compact-header-actions{gap:6px}
  .language-mini-toggle{min-width:38px;height:34px;padding:0 8px}
}

/* Auth welcome gate */
.auth-welcome{display:grid;gap:18px;padding:8px 0 4px}
.auth-welcome[hidden]{display:none!important}
.auth-welcome-badge{width:max-content;padding:8px 12px;border:1px solid #CBBE78;border-radius:999px;background:#F1E7A7;color:#292723;font-size:11px;font-weight:800;letter-spacing:.09em}
.auth-welcome h1{max-width:390px;margin:2px 0 0;font-size:clamp(38px,8.5vw,54px);line-height:1.01;letter-spacing:-.045em;font-weight:650}
.auth-welcome-copy{margin:0;max-width:390px;color:#6F6A62;font-size:17px;line-height:1.55}
.auth-welcome-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.auth-welcome-trust span{padding:8px 10px;border:1px solid #DDD6CA;border-radius:999px;background:#FAF8F3;color:#48443F;font-size:11px;font-weight:750}
.auth-welcome-actions{display:grid;gap:10px;margin-top:4px}
.auth-welcome-actions .primary-btn,.auth-welcome-actions .ghost-btn{width:100%;min-height:54px;border-radius:999px;font-size:15px;font-weight:800}
.auth-welcome-signin{border:1px solid #CFC8BD!important;background:#fff!important;color:#292723!important}
.auth-welcome-note{margin:0;color:#777168;font-size:12px;line-height:1.5;text-align:center}
.auth-back-welcome{margin:0 0 18px;padding:0;border:0;background:transparent;color:#5E5952;font-size:12px;font-weight:800;cursor:pointer}
@media(max-width:620px){
  .auth-card{padding:24px 20px}
  .auth-brand{margin-bottom:28px}
  .auth-welcome{gap:16px}
  .auth-welcome h1{font-size:40px}
  .auth-welcome-copy{font-size:16px}
  .auth-welcome-trust{gap:6px}
  .auth-welcome-trust span{font-size:10px}
}

/* 2026-09-27 — single-path welcome + compact client cards */
.auth-welcome{transition:opacity .18s ease,transform .18s ease}
.auth-welcome.is-leaving{opacity:0;transform:translateY(-8px)}
.auth-welcome.is-entering{animation:authSoftEnter .32s ease both}
#authPanel.is-entering{animation:authSoftEnter .32s ease both}
@keyframes authSoftEnter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.auth-welcome-actions{display:block}
.auth-welcome-actions .primary-btn{width:100%}
.auth-welcome-existing{
  margin:0;
  text-align:center;
  color:#777168;
  font-size:12px;
  line-height:1.5;
}
.auth-welcome-existing button{
  border:0;
  background:transparent;
  padding:4px 2px;
  color:#292723;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.client-card-compact{
  gap:9px!important;
  padding:13px 14px!important;
  border-radius:17px!important;
}
.client-card-head{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.client-card-compact .client-avatar{
  width:34px!important;
  height:34px!important;
  min-width:34px;
  margin:0!important;
  border-radius:11px!important;
  font-size:12px;
}
.client-card-identity{
  display:grid;
  gap:2px;
  min-width:0;
}
.client-card-identity strong{
  font-size:16px;
  line-height:1.18;
}
.client-card-identity span,
.client-card-compact .client-location{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
}
.client-card-identity span{white-space:nowrap}
.client-card-compact .client-location{
  display:block;
  white-space:nowrap;
}
.client-card-compact .record-card-actions{
  margin-top:2px!important;
  padding-top:9px!important;
  gap:7px!important;
}
.client-card-compact .safe-actions{
  gap:7px!important;
}
.client-card-compact .safe-actions button,
.client-card-compact .record-delete-btn{
  min-height:40px!important;
  border-radius:12px!important;
  font-size:11px!important;
}
.client-card-compact .record-delete-btn{margin-top:0!important}
@media(max-width:620px){
  .client-grid{gap:9px!important}
  .client-card-compact{padding:12px 13px!important}
}
@media(prefers-reduced-motion:reduce){
  .auth-welcome,#authPanel{animation:none!important;transition:none!important}
}

/* Auth intro → form flow */
.auth-shell{
  align-items:start;
}
.auth-card{
  margin:clamp(22px,6vh,64px) auto;
}
#authPanel{
  scroll-margin-top:24px;
  margin-top:0;
}
.auth-welcome-actions .primary-btn{
  min-height:56px;
  font-weight:750;
  letter-spacing:-.01em;
}
@media(max-width:620px){
  .auth-card{margin:14px auto 36px}
  #authPanel{scroll-margin-top:12px}
}

/* First-visit intro → auth form */
.auth-shell.auth-form-open .auth-card{
  width:min(520px,100%);
}
.auth-shell.auth-form-open #authWelcome{
  padding-bottom:34px;
  margin-bottom:30px;
  border-bottom:1px solid #DED7CC;
}
.auth-shell.auth-form-open #authPanel{
  display:block;
}
.auth-shell.auth-form-open #authPanel[hidden]{
  display:none!important;
}
@media(max-width:620px){
  .auth-shell.auth-form-open #authWelcome{
    padding-bottom:28px;
    margin-bottom:26px;
  }
}

/* Auth marketing-to-form flow */
#authPanel{scroll-margin-top:22px}
.auth-welcome-actions .primary-btn{min-height:52px}
@media(max-width:620px){
  #authPanel{scroll-margin-top:12px}
  .auth-welcome-actions .primary-btn{width:100%}
}


/* 2026-09-27 — compact animated greeting v55 */
#todayHeroCard{
  padding:22px!important;
}
#todayHeroCard .hero-ecosystem{
  gap:14px;
}
#todayHeroCard .hero-greeting-zone{
  padding:2px 0!important;
  justify-content:flex-start!important;
}
#todayHeroCard .hero-card-topline{
  margin-top:-6px!important;
}
#todayHeroCard .today-greeting-first{
  margin-top:-2px!important;
}
#todayHeroCard .hero-greeting-zone #todayGreeting{
  margin:8px 0 7px!important;
  line-height:.96;
}
#todayHeroCard #todayMomentCopy{
  line-height:1.4!important;
}
#todayHeroCard .hero-greeting-zone #todayHeroAction{
  margin-top:12px!important;
}

/* Sun + moving clouds / glowing moon + stars */
.hero-sky-badge{
  position:relative;
  display:inline-block;
  width:78px;
  height:52px;
  flex:0 0 78px;
  overflow:visible;
  pointer-events:none;
}
.hero-sun-orb,
.hero-moon-orb,
.hero-cloud,
.hero-night-star{
  position:absolute;
  display:block;
  line-height:1;
  transform-origin:center;
  will-change:transform,opacity;
}
.hero-sun-orb{
  left:0;
  top:0;
  font-size:43px;
  z-index:1;
  animation:tleHeroSunSpin 28s linear infinite;
}
.hero-cloud{
  z-index:2;
  font-size:27px;
  filter:drop-shadow(0 2px 3px rgba(25,25,25,.08));
}
.hero-cloud-a{
  left:28px;
  top:21px;
  animation:tleHeroCloudA 6.5s ease-in-out infinite alternate;
}
.hero-cloud-b{
  left:45px;
  top:8px;
  font-size:20px;
  opacity:.78;
  animation:tleHeroCloudB 8.2s ease-in-out infinite alternate;
}
.hero-moon-orb{
  left:5px;
  top:1px;
  font-size:44px;
  opacity:0;
  transform:scale(.9);
  filter:drop-shadow(0 0 9px rgba(255,255,245,.8));
}
.hero-night-star{
  opacity:0;
  z-index:2;
  color:#fffdf0;
  text-shadow:0 0 8px rgba(255,255,255,.92);
}
.hero-night-star.star-a{left:51px;top:3px;font-size:16px}
.hero-night-star.star-b{left:58px;top:27px;font-size:12px}
.hero-night-star.star-c{left:31px;top:36px;font-size:10px}

#todayHeroCard[data-celestial="night"] .hero-sun-orb,
#todayHeroCard[data-celestial="night"] .hero-cloud{
  opacity:0;
  pointer-events:none;
}
#todayHeroCard[data-celestial="night"] .hero-moon-orb{
  opacity:1;
  animation:tleHeroMoonGlow 3.6s ease-in-out infinite;
}
#todayHeroCard[data-celestial="night"] .hero-night-star{
  opacity:1;
  animation:tleHeroStarTwinkle 2.6s ease-in-out infinite;
}
#todayHeroCard[data-celestial="night"] .hero-night-star.star-b{animation-delay:.7s}
#todayHeroCard[data-celestial="night"] .hero-night-star.star-c{animation-delay:1.35s}
#todayHeroCard[data-weather="rain"] .hero-sun-orb{opacity:.28}
#todayHeroCard[data-weather="rain"] .hero-cloud{opacity:1}

@keyframes tleHeroSunSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes tleHeroCloudA{
  from{transform:translate3d(-2px,0,0)}
  to{transform:translate3d(7px,-2px,0)}
}
@keyframes tleHeroCloudB{
  from{transform:translate3d(2px,0,0)}
  to{transform:translate3d(-5px,2px,0)}
}
@keyframes tleHeroMoonGlow{
  0%,100%{
    transform:translateY(0) scale(.98);
    filter:drop-shadow(0 0 7px rgba(255,255,245,.68));
  }
  50%{
    transform:translateY(-2px) scale(1.05);
    filter:drop-shadow(0 0 15px rgba(255,255,245,.98));
  }
}
@keyframes tleHeroStarTwinkle{
  0%,100%{opacity:.28;transform:scale(.82) rotate(0)}
  50%{opacity:1;transform:scale(1.18) rotate(18deg)}
}

/* The decorative sky replaces the generic icon when nothing needs action. */
#todayHeroCard.message-calm>.hero-moment-icon,
#todayHeroCard.message-night>.hero-moment-icon,
#todayHeroCard.message-hydrate>.hero-moment-icon{
  display:none;
}

/* A real pending item gets a small, occasional nudge — never the whole card. */
#todayHeroCard.has-pending>.hero-moment-icon{
  display:block;
  animation:tleHeroPendingCue 5.4s ease-in-out infinite!important;
}
.attention-list button.attention-pending{
  transform-origin:center;
  animation:tlePendingAttention 6.2s ease-in-out infinite;
}
.attention-list button.attention-pending:nth-child(2){animation-delay:1.45s}
.attention-list button.attention-pending:nth-child(3){animation-delay:2.9s}
.attention-list button.attention-pending:nth-child(4){animation-delay:4.1s}

@keyframes tleHeroPendingCue{
  0%,76%,100%{transform:translate3d(0,0,0) scale(1)}
  82%{transform:translate3d(0,-3px,0) scale(1.06)}
  88%{transform:translate3d(2px,0,0) scale(1.03)}
  94%{transform:translate3d(-2px,0,0) scale(1.03)}
}
@keyframes tlePendingAttention{
  0%,80%,100%{transform:translate3d(0,0,0)}
  85%{transform:translate3d(0,-2px,0)}
  90%{transform:translate3d(3px,0,0)}
  95%{transform:translate3d(-2px,0,0)}
}

/* Mobile: remove empty vertical space without shrinking readability. */
@media(max-width:720px){
  [data-page="today"] #todayHeroCard{
    padding:15px 16px 14px!important;
    border-radius:25px!important;
    margin-bottom:12px!important;
  }
  [data-page="today"] #todayHeroCard .hero-ecosystem{
    gap:9px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone{
    padding:0!important;
  }
  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    gap:7px;
    min-height:48px;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayGreeting{
    font-size:clamp(31px,9.4vw,42px)!important;
    line-height:.94!important;
    margin:5px 0 6px!important;
    padding-right:0!important;
  }
  [data-page="today"] #todayHeroCard p#todayMomentCopy{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayHeroAction{
    width:100%;
    min-height:47px!important;
    margin-top:10px!important;
    padding:10px 16px!important;
    border-radius:16px!important;
  }
  [data-page="today"] #todayHeroCard .weather-brief{
    padding:10px!important;
    gap:6px!important;
    border-radius:16px!important;
  }
  [data-page="today"] #todayHeroCard .weather-module-top{
    gap:7px;
  }
  [data-page="today"] #todayHeroCard .weather-now{
    gap:8px;
  }
  [data-page="today"] #todayHeroCard .weather-icon{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    border-radius:12px!important;
    font-size:22px!important;
  }
  [data-page="today"] #todayHeroCard .weather-temp-row strong{
    font-size:22px!important;
  }
  [data-page="today"] #todayHeroCard .weather-business-note{
    padding:7px 8px!important;
    border-radius:11px!important;
  }
  [data-page="today"] #todayHeroCard .weather-business-note strong{
    line-height:1.2;
  }
  [data-page="today"] #todayHeroCard .weather-business-note span{
    line-height:1.25;
  }
  [data-page="today"] #todayHeroCard .weather-forecast{
    gap:5px!important;
  }
  [data-page="today"] #todayHeroCard .weather-day{
    padding:6px!important;
    border-radius:10px!important;
  }
  [data-page="today"] #todayHeroCard .weather-updated{
    margin-top:0!important;
  }
  .hero-sky-badge{
    width:72px;
    height:48px;
    flex-basis:72px;
  }
  .hero-sun-orb{font-size:40px}
  .hero-cloud-a{left:26px;top:20px;font-size:25px}
  .hero-cloud-b{left:43px;top:8px;font-size:18px}
  .hero-moon-orb{font-size:41px}
}

@media(prefers-reduced-motion:reduce){
  .hero-sun-orb,
  .hero-cloud,
  .hero-moon-orb,
  .hero-night-star,
  #todayHeroCard.has-pending>.hero-moment-icon,
  .attention-list button.attention-pending{
    animation:none!important;
  }
}


/* 2026-09-27 — iOS auth stability v56 */
body.shell-auth{overflow-anchor:none}
.auth-card,#authPanel,.auth-form{overflow-anchor:none}
@media(max-width:620px){
  /* iOS Safari zooms inputs below 16px, which looks like the login screen is
     jumping. Keep authentication fields at 16px while the keyboard is open. */
  .auth-form input:not([type="checkbox"]){
    font-size:16px!important;
    min-height:48px;
  }
  .auth-shell{
    min-height:100dvh;
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
  .auth-card{
    scroll-margin-top:0;
    transform:none!important;
  }
}


/* Dashboard CTA polish — compact, high-contrast, animated */
.hero-greeting-zone #todayHeroAction{
  width:auto;
  min-width:0;
  min-height:42px;
  align-self:flex-start;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(25,25,25,.22);
  background:#191919;
  color:#fff;
  box-shadow:0 9px 22px rgba(25,25,25,.14);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .2s ease,box-shadow .2s ease,background-color .45s ease,color .45s ease,border-color .45s ease;
  animation:tleHeroCtaFloat 3.8s ease-in-out infinite;
}
.hero-greeting-zone #todayHeroAction::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -36%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  pointer-events:none;
  z-index:-1;
  animation:tleHeroCtaSheen 5.4s ease-in-out infinite;
}
.hero-greeting-zone #todayHeroAction:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(25,25,25,.18);
}
.hero-greeting-zone #todayHeroAction:active{
  transform:translateY(0) scale(.98);
}
.hero-card.message-afternoon #todayHeroAction,
.hero-card.message-rain #todayHeroAction,
.hero-card.message-hydrate #todayHeroAction{
  background:#191919;
  color:#fff;
  border-color:#191919;
}
.hero-card.message-morning #todayHeroAction,
.hero-card.message-jobs #todayHeroAction{
  background:#BFE0FF;
  color:#191919;
  border-color:#8DBDE8;
}
.hero-card.message-calm #todayHeroAction,
.hero-card.message-booking #todayHeroAction{
  background:#F2D85B;
  color:#191919;
  border-color:#CDB63E;
}
.hero-card.message-night #todayHeroAction{
  background:#191919;
  color:#fff;
  border-color:#191919;
}
@keyframes tleHeroCtaFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes tleHeroCtaSheen{
  0%,70%{left:-36%;opacity:0}
  76%{opacity:1}
  94%{left:122%;opacity:0}
  100%{left:122%;opacity:0}
}
@media(max-width:680px){
  .hero-greeting-zone #todayHeroAction{
    width:auto;
    max-width:100%;
    min-height:40px;
    padding:0 16px;
    margin-top:14px;
    font-size:12px;
  }
}

/* New-notification motion: ring only when unread count increases */
.notification-bell-btn.notification-arrived .notification-bell-icon{
  animation:tleNotificationRing .72s cubic-bezier(.36,.07,.19,.97) 2;
}
.notification-bell-btn.notification-arrived .notification-badge{
  animation:tleNotificationBadgePop .58s cubic-bezier(.2,.9,.25,1.35) 1;
}
@keyframes tleNotificationRing{
  0%,100%{transform:rotate(0)}
  18%{transform:rotate(14deg)}
  36%{transform:rotate(-12deg)}
  54%{transform:rotate(9deg)}
  72%{transform:rotate(-6deg)}
  86%{transform:rotate(3deg)}
}
@keyframes tleNotificationBadgePop{
  0%{transform:scale(.72)}
  55%{transform:scale(1.28)}
  100%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .hero-greeting-zone #todayHeroAction,
  .hero-greeting-zone #todayHeroAction::after,
  .notification-bell-btn.notification-arrived .notification-bell-icon,
  .notification-bell-btn.notification-arrived .notification-badge{
    animation:none!important;
  }
}


/* Interactive calendar day details */
.two-week-calendar>[data-calendar-day]{
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.two-week-calendar>[data-calendar-day].calendar-active{
  border-color:var(--ink)!important;
  box-shadow:inset 0 0 0 1px var(--ink);
}
@media(hover:hover) and (pointer:fine){
  .two-week-calendar>[data-calendar-day]:hover{transform:translateY(-1px);border-color:#9B958B}
  .job-block[data-calendar-job]:hover{border-color:#9B958B;background:#FCFBF8}
}
.two-week-calendar>[data-calendar-day]:focus-visible,
.job-block[data-calendar-job]:focus-visible{
  outline:3px solid rgba(25,25,25,.18);
  outline-offset:2px;
}
.job-block[data-calendar-job]{cursor:pointer;touch-action:manipulation}
.calendar-day-details{
  margin:-6px 0 18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#F8F5EE;
}
.calendar-day-details[hidden]{display:none}
.calendar-day-details-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}
.calendar-day-details-head h3{margin:3px 0 4px;font-size:20px;letter-spacing:-.025em;text-transform:capitalize}
.calendar-day-details-head>div>span{font-size:11px;color:var(--muted)}
.calendar-day-close{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:22px;
  line-height:1;
  padding:0;
}
.calendar-day-job-list{display:grid;gap:10px}
.calendar-day-job{
  display:grid;
  gap:12px;
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}
.calendar-day-job.is-focus{border-color:var(--ink)}
.calendar-day-job-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.calendar-day-job-top>div{display:grid;gap:3px;min-width:0}
.calendar-day-job-top strong{font-size:14px;line-height:1.35}
.calendar-day-job-top span:not(.status){font-size:12px;color:var(--muted)}
.calendar-day-job-grid{display:grid;grid-template-columns:.6fr 1fr 2fr;gap:8px}
.calendar-day-job-grid>span{display:grid;gap:3px;min-width:0;padding:9px 10px;border-radius:11px;background:#F8F6F1}
.calendar-day-job-grid small,.calendar-day-notes small{font-size:9px;font-weight:900;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.calendar-day-job-grid b{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.calendar-day-notes{margin:0;padding:10px 11px;border-left:3px solid var(--yellow);background:#FFFCED;border-radius:0 10px 10px 0;font-size:12px;line-height:1.5}
.calendar-day-notes small{display:block;margin-bottom:4px}
.calendar-day-actions{display:flex;justify-content:flex-end}
.calendar-day-actions button{min-height:40px}
@media(max-width:620px){
  .calendar-day-details{margin:-7px 0 16px;padding:13px;border-radius:14px}
  .calendar-day-details-head h3{font-size:18px}
  .calendar-day-job-top{align-items:flex-start}
  .calendar-day-job-grid{grid-template-columns:1fr 1fr}
  .calendar-day-address{grid-column:1/-1}
  .calendar-day-actions{display:grid}
  .calendar-day-actions button{width:100%;min-height:44px}
}


/* Recurring job controls */
.recurrence-options{
  display:grid;
  gap:8px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#F8F5EE;
}
.recurrence-options[hidden]{display:none}
.recurrence-options p{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.field-optional{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}
.recurrence-existing-note{
  display:grid;
  gap:4px;
  padding:12px 13px;
  border:1px solid #D7D1C5;
  border-radius:14px;
  background:#FCFBF8;
}
.recurrence-existing-note strong{font-size:12px}
.recurrence-existing-note span{font-size:11px;color:var(--muted);line-height:1.45}
.recurring-item[data-calendar-job]{cursor:pointer;border-radius:10px;padding-inline:8px}
@media(hover:hover) and (pointer:fine){
  .recurring-item[data-calendar-job]:hover{background:#F8F5EE}
}


/* Client history */
.client-history-profile{display:grid;gap:16px}
.client-history-contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.client-history-contact>div{
  min-width:0;
  display:grid;
  gap:4px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.client-history-contact>div.full{grid-column:1/-1}
.client-history-contact small,
.client-history-stats small{
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.client-history-contact strong{
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.client-history-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.client-history-stats>span{
  display:grid;
  gap:4px;
  padding:10px;
  border-radius:12px;
  background:#F5F2EB;
  min-width:0;
}
.client-history-stats b{font-size:16px;overflow-wrap:anywhere}
.client-history-section{display:grid;gap:9px}
.client-history-title{display:flex;justify-content:space-between;align-items:center}
.client-history-title>span{font-size:10px;color:var(--muted);font-weight:900}
.client-history-list{display:grid;gap:7px;max-height:310px;overflow:auto;padding-right:2px}
.client-history-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.client-history-icon{
  width:34px;height:34px;border-radius:10px;background:#F2EFE8;
  display:grid;place-items:center;font-size:16px
}
.client-history-item>div{display:grid;gap:3px;min-width:0}
.client-history-item strong{font-size:12px}
.client-history-item small{font-size:10px;color:var(--muted);line-height:1.35}
.client-history-footer{margin-top:0}
.recurrence-options{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#F8F6F1;
}
.recurrence-options[hidden]{display:none}
.recurrence-options p,
.recurrence-existing-note span{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.recurrence-existing-note{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#F8F6F1;
}
@media(max-width:620px){
  .client-history-contact{grid-template-columns:1fr}
  .client-history-contact>div.full{grid-column:auto}
  .client-history-stats{grid-template-columns:1fr 1fr}
  .client-history-footer{display:grid;grid-template-columns:1fr 1fr}
  .client-history-footer button{width:100%}
}


/* 2026-09-28 — compact Today weather beside sun/moon */
#todayHeroCard .hero-ecosystem{
  display:block!important;
}
#todayHeroCard .hero-greeting-zone{
  width:100%;
  padding:4px 0 6px!important;
}
#todayHeroCard .hero-assistant-meta{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:nowrap!important;
  width:100%;
}
#todayHeroCard .hero-weather-compact{
  display:flex;
  align-items:center;
  width:auto!important;
  max-width:230px;
  min-width:0;
  flex:0 1 auto;
  margin:0!important;
  padding:7px 8px 7px 10px!important;
  gap:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.58)!important;
  box-shadow:none!important;
}
#todayHeroCard .hero-weather-compact .weather-module-top{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
}
#todayHeroCard .hero-weather-compact .weather-now{
  min-width:0;
  flex:1 1 auto;
  gap:0!important;
}
#todayHeroCard .hero-weather-compact .weather-icon,
#todayHeroCard .hero-weather-compact #weatherLocation,
#todayHeroCard .hero-weather-compact #weatherFeels,
#todayHeroCard .hero-weather-compact .weather-business-note,
#todayHeroCard .hero-weather-compact .weather-forecast,
#todayHeroCard .hero-weather-compact .weather-updated{
  display:none!important;
}
#todayHeroCard .hero-weather-compact .weather-now-copy{
  min-width:0;
  display:block;
}
#todayHeroCard .hero-weather-compact .weather-temp-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:5px;
  min-width:0;
}
#todayHeroCard .hero-weather-compact .weather-temp-row strong{
  font-size:17px!important;
  line-height:1;
  flex:0 0 auto;
}
#todayHeroCard .hero-weather-compact .weather-temp-row span{
  display:block;
  min-width:0;
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px!important;
  font-weight:800;
  color:#5F5A53;
}
#todayHeroCard .hero-weather-compact .weather-open-hint{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  font-size:11px!important;
  border:0!important;
  background:rgba(255,255,255,.68)!important;
}
#todayHeroCard .hero-greeting-zone #todayGreeting{
  margin:20px 0 7px!important;
}
#todayHeroCard .hero-assistant-meta #todayDatePill{
  margin-left:auto;
  flex:0 0 auto;
}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    gap:6px!important;
    min-height:48px;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    max-width:145px!important;
    padding:6px 7px 6px 9px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row strong{
    font-size:16px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row span{
    max-width:70px;
    font-size:9px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-open-hint{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayGreeting{
    margin:17px 0 6px!important;
  }
}
@media(max-width:390px){
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    max-width:126px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row span{
    max-width:54px;
  }
}


/* 2026-09-28 — route + live traffic markers */
.hero-route-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(25,25,25,.12);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#191919;
  font:900 10px/1 Futura,"Avenir Next",Arial,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.hero-route-chip[hidden]{display:none!important}
.hero-route-chip-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#67A56E;
  box-shadow:0 0 0 4px rgba(103,165,110,.12);
}
.hero-route-chip:active{transform:scale(.98)}

.route-command-summary{
  display:grid;
  justify-items:center;
  gap:7px;
  width:min(100%,300px);
}
.route-command-summary strong{
  color:#191919;
  font-size:14px;
}
.route-command-summary span{
  color:var(--muted);
  font-size:10px;
}
.route-best-btn,
.route-gps-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:#191919;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.route-best-btn{
  min-height:40px;
  padding:10px 16px;
  font-size:11px;
}
.route-gps-btn{
  justify-self:start;
  width:max-content;
  min-height:31px;
  margin-top:5px;
  padding:7px 11px;
  font-size:10px;
}
.route-best-btn:active,
.route-gps-btn:active{transform:scale(.98)}
.route-stop>div{min-width:0}
.route-stop small{overflow-wrap:anywhere}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard .hero-route-chip{
    min-height:29px;
    padding:6px 8px;
    gap:5px;
    font-size:9px;
  }
  [data-page="today"] #todayHeroCard .hero-route-chip-dot{
    width:6px;
    height:6px;
  }
  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    overflow-x:auto;
    scrollbar-width:none;
  }
  [data-page="today"] #todayHeroCard .hero-assistant-meta::-webkit-scrollbar{display:none}
  .route-stop{
    grid-template-columns:32px minmax(0,1fr) auto;
    gap:9px;
    align-items:start;
  }
  .route-stop>b{
    width:32px;
    height:32px;
  }
  .route-gps-btn{
    min-height:34px;
    padding:8px 12px;
  }
}


/* 2026-09-28 — Weather-style Today header v68 */
#todayHeroCard .hero-assistant-meta{
  position:relative;
  align-items:flex-start!important;
  gap:10px!important;
  overflow:visible!important;
}
#todayHeroCard .hero-weather-compact{
  display:grid!important;
  grid-template-columns:1fr;
  flex:0 1 250px;
  width:min(250px,100%)!important;
  max-width:250px!important;
  min-width:190px;
  padding:11px 12px!important;
  border-radius:22px!important;
  border:1px solid rgba(25,25,25,.10)!important;
  background:rgba(255,255,255,.52)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(25,25,25,.045)!important;
}
#todayHeroCard .hero-weather-compact .weather-module-top{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center!important;
  gap:8px!important;
  width:100%;
}
#todayHeroCard .hero-weather-compact .weather-icon{
  display:grid!important;
  place-items:center;
  width:42px!important;
  height:42px!important;
  flex-basis:42px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:31px!important;
  filter:drop-shadow(0 4px 8px rgba(25,25,25,.08));
}
#todayHeroCard .hero-weather-compact .weather-now-copy{
  display:grid!important;
  gap:2px!important;
  min-width:0;
}
#todayHeroCard .hero-weather-compact #weatherLocation{
  display:block!important;
  color:#777169!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase;
}
#todayHeroCard .hero-weather-compact .weather-temp-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0;
}
#todayHeroCard .hero-weather-compact .weather-temp-row>strong{
  font-size:31px!important;
  line-height:.95!important;
  letter-spacing:-.055em!important;
  color:#191919;
}
#todayHeroCard .weather-condition-stack{
  display:grid;
  gap:1px;
  min-width:0;
}
#todayHeroCard .hero-weather-compact .weather-condition-stack>span{
  display:block!important;
  max-width:104px!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#4E4943!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#todayHeroCard .hero-weather-compact .weather-condition-stack>small{
  color:#706A63;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
#todayHeroCard .hero-weather-compact .weather-open-hint{
  width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
  align-self:start;
  margin-top:1px;
  font-size:11px!important;
  border:0!important;
  background:rgba(255,255,255,.72)!important;
}
#todayHeroCard .hero-weather-compact .weather-business-note{
  display:block!important;
  margin-top:7px;
  padding:7px 8px!important;
  border-radius:11px!important;
  border:0!important;
  background:rgba(255,255,255,.44)!important;
  color:#514C46;
}
#todayHeroCard .hero-weather-compact .weather-business-note[hidden]{
  display:none!important;
}
#todayHeroCard .hero-weather-compact .weather-business-note span{
  display:block!important;
  color:#514C46!important;
  font-size:9px!important;
  line-height:1.28!important;
  font-weight:800;
}
#todayHeroCard .hero-weather-compact #weatherFeels,
#todayHeroCard .hero-weather-compact .weather-forecast,
#todayHeroCard .hero-weather-compact .weather-updated{
  display:none!important;
}

#todayHeroCard .today-clock{
  flex:0 0 auto;
  min-width:106px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  margin-top:-7px;
  padding:8px 10px;
  border:1px solid rgba(25,25,25,.11);
  border-radius:18px;
  background:rgba(255,255,255,.44);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#191919;
  box-shadow:0 6px 18px rgba(25,25,25,.035);
}
#todayHeroCard .today-clock-mark{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  flex:0 0 27px;
  border-radius:50%;
  border:1px solid rgba(25,25,25,.12);
  background:rgba(255,255,255,.62);
  font-size:15px;
  font-weight:900;
}
#todayHeroCard .today-clock-copy{
  display:grid;
  gap:1px;
  min-width:0;
}
#todayHeroCard #todayClockTime{
  font-size:12px;
  line-height:1.05;
  font-weight:900;
  white-space:nowrap;
}
#todayHeroCard #todayDatePill{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#6E6961!important;
  font-size:8px!important;
  font-weight:800!important;
  line-height:1.15;
  white-space:nowrap;
}
#todayHeroCard .hero-greeting-zone #todayGreeting{
  margin-top:22px!important;
}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr) auto;
    gap:7px!important;
    align-items:start!important;
    min-height:86px;
  }
  [data-page="today"] #todayHeroCard .hero-sky-badge{
    width:60px;
    height:48px;
    flex-basis:60px;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:9px 10px!important;
    border-radius:18px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-module-top{
    grid-template-columns:35px minmax(0,1fr) 20px;
    gap:6px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-icon{
    width:35px!important;
    height:35px!important;
    flex-basis:35px!important;
    font-size:26px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row{
    gap:6px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong{
    font-size:27px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    max-width:72px!important;
    font-size:9px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>small{
    font-size:8px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact #weatherLocation{
    font-size:7px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-business-note{
    margin-top:6px;
    padding:6px 7px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-business-note span{
    font-size:8px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock{
    min-width:88px;
    margin-top:-10px;
    padding:7px 8px;
    gap:5px;
    border-radius:16px;
  }
  [data-page="today"] #todayHeroCard .today-clock-mark{
    width:24px;
    height:24px;
    flex-basis:24px;
    font-size:13px;
  }
  [data-page="today"] #todayHeroCard #todayClockTime{
    font-size:10px;
  }
  [data-page="today"] #todayHeroCard #todayDatePill{
    font-size:7px!important;
  }
  [data-page="today"] #todayHeroCard .hero-route-chip{
    grid-column:2/4;
    justify-self:start;
    margin-top:0;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayGreeting{
    margin-top:13px!important;
  }
}
@media(max-width:390px){
  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    grid-template-columns:55px minmax(0,1fr) 82px;
    gap:5px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock{
    min-width:82px;
    padding:6px 7px;
  }
  [data-page="today"] #todayHeroCard .today-clock-mark{
    display:none;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    max-width:58px!important;
  }
}


/* 2026-09-28 — final Safari mobile drawer positioning v69 */
@media(max-width:860px){
  body.shell-app #appShell>.sidebar{
    left:0!important;
    right:auto!important;
    transform:translate3d(-110%,0,0)!important;
    -webkit-transform:translate3d(-110%,0,0)!important;
    translate:0 0!important;
    transition:transform .24s ease!important;
    will-change:transform;
  }
  body.shell-app #appShell>.sidebar.open{
    left:0!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    translate:0 0!important;
  }
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){
  body.shell-app #appShell>.sidebar{transition:none!important}
}


/* 2026-09-28 — modern separated weather alert v70 */
#todayHeroCard .hero-weather-alert{
  position:relative;
  width:100%;
  max-width:none;
  margin:14px 0 20px;
  padding:12px 14px 12px 38px;
  border:1px solid rgba(25,25,25,.10);
  border-radius:16px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#4F4A44;
  box-shadow:0 7px 20px rgba(25,25,25,.035);
}
#todayHeroCard .hero-weather-alert[hidden]{
  display:none!important;
}
#todayHeroCard .hero-weather-alert::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#191919;
  box-shadow:0 0 0 5px rgba(25,25,25,.07);
}
#todayHeroCard .hero-weather-alert.rain::before{
  background:#6D91BA;
  box-shadow:0 0 0 5px rgba(109,145,186,.12);
}
#todayHeroCard .hero-weather-alert span{
  display:block;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:850;
  letter-spacing:-.005em;
  color:#4F4A44!important;
}
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
  grid-template-columns:minmax(0,1fr) 24px!important;
}
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
  font-size:34px!important;
}
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-now-copy{
  padding-left:2px;
}
#todayHeroCard .hero-greeting-zone #todayGreeting{
  margin-top:0!important;
}
#todayHeroCard #todayMomentCopy{
  margin-top:4px;
  max-width:590px;
}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard .hero-weather-alert{
    margin:13px 0 18px;
    padding:11px 12px 11px 34px;
    border-radius:14px;
  }
  [data-page="today"] #todayHeroCard .hero-weather-alert::before{
    left:12px;
    width:9px;
    height:9px;
  }
  [data-page="today"] #todayHeroCard .hero-weather-alert span{
    font-size:10px!important;
    line-height:1.38!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
    grid-template-columns:minmax(0,1fr) 20px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:30px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayGreeting{
    margin-top:0!important;
  }
}


/* 2026-09-28 — deterministic Safari drawer v71 */
@media(max-width:860px){
  body.shell-app #appShell>.sidebar{
    left:0!important;
    right:auto!important;
    transform:none!important;
    -webkit-transform:none!important;
    translate:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .18s ease,visibility 0s linear .18s!important;
    will-change:opacity;
  }
  body.shell-app #appShell>.sidebar.open{
    left:0!important;
    transform:none!important;
    -webkit-transform:none!important;
    translate:none!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transition:opacity .18s ease!important;
  }
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){
  body.shell-app #appShell>.sidebar{transition:none!important}
}


/* 2026-09-28 — Today mobile composition v72 */
@media(max-width:720px){
  [data-page="today"] #todayHeroCard{
    padding:24px 22px 26px!important;
  }

  [data-page="today"] #todayHeroCard .hero-greeting-zone{
    width:100%!important;
    padding:0!important;
  }

  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-auto-rows:auto;
    gap:12px 12px!important;
    align-items:start!important;
    width:100%!important;
    min-height:0!important;
  }

  [data-page="today"] #todayHeroCard .hero-sky-badge{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    width:78px!important;
    height:62px!important;
    min-width:78px!important;
    margin:2px 0 0!important;
  }

  [data-page="today"] #todayHeroCard .today-clock{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:start!important;
    min-width:112px!important;
    margin:0!important;
    padding:9px 11px!important;
    border-radius:18px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:14px 15px!important;
    border-radius:20px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-module-top{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 26px!important;
    gap:10px!important;
    align-items:center!important;
    width:100%!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
    grid-template-columns:minmax(0,1fr) 26px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-now-copy{
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact #weatherLocation{
    display:block!important;
    max-width:none!important;
    margin:0 0 5px!important;
    font-size:8px!important;
    letter-spacing:.12em!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:42px!important;
    line-height:.9!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
  }

  [data-page="today"] #todayHeroCard .weather-condition-stack{
    min-width:0!important;
    gap:3px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    max-width:none!important;
    width:100%!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>small{
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-open-hint{
    align-self:center!important;
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    margin:0!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-alert{
    grid-column:1/-1!important;
    grid-row:3!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:2px 0 8px!important;
    padding:13px 15px 13px 40px!important;
    border-radius:16px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-alert span{
    width:100%!important;
    max-width:none!important;
    font-size:11px!important;
    line-height:1.42!important;
    white-space:normal!important;
  }

  [data-page="today"] #todayHeroCard .hero-route-chip{
    grid-column:1/-1!important;
    grid-row:4!important;
    justify-self:start!important;
    margin:0!important;
  }

  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayGreeting{
    margin:10px 0 6px!important;
  }

  [data-page="today"] #todayHeroCard #todayMomentCopy{
    margin:0 0 2px!important;
    max-width:none!important;
  }
}

@media(max-width:390px){
  [data-page="today"] #todayHeroCard{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    grid-template-columns:minmax(0,1fr) 104px!important;
    gap:10px!important;
  }

  [data-page="today"] #todayHeroCard .hero-sky-badge{
    width:70px!important;
    height:58px!important;
    min-width:70px!important;
  }

  [data-page="today"] #todayHeroCard .today-clock{
    min-width:104px!important;
    padding:8px 10px!important;
  }

  [data-page="today"] #todayHeroCard .today-clock-mark{
    display:grid!important;
    width:23px!important;
    height:23px!important;
    flex-basis:23px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:39px!important;
  }
}


/* 2026-09-28 — greeting-first Today layout v73 */
#todayHeroCard .hero-greeting-zone{
  width:100%;
  padding:0!important;
}

#todayHeroCard .today-greeting-first{
  display:grid;
  gap:4px;
  margin:0 0 18px;
}

#todayHeroCard .today-greeting-first #todayGreeting{
  margin:0!important;
}

#todayHeroCard .today-greeting-first #todayMomentCopy{
  margin:0!important;
  max-width:620px!important;
}

#todayHeroCard .hero-assistant-meta{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:0!important;
  overflow:visible!important;
}

#todayHeroCard .hero-sky-badge{
  grid-column:1!important;
  width:56px!important;
  height:50px!important;
  min-width:56px!important;
  margin:0!important;
}

#todayHeroCard .hero-weather-compact{
  grid-column:2!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:17px!important;
}

#todayHeroCard .hero-weather-compact .weather-module-top{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 22px!important;
  gap:7px!important;
  align-items:center!important;
  width:100%!important;
}

#todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
  grid-template-columns:minmax(0,1fr) 22px!important;
}

#todayHeroCard .hero-weather-compact .weather-icon{
  width:34px!important;
  height:34px!important;
  flex-basis:34px!important;
  font-size:24px!important;
}

#todayHeroCard .hero-weather-compact .weather-now-copy{
  min-width:0!important;
  padding:0!important;
}

#todayHeroCard .hero-weather-compact #weatherLocation{
  display:block!important;
  margin:0 0 2px!important;
  font-size:7px!important;
  letter-spacing:.1em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#todayHeroCard .hero-weather-compact .weather-temp-row{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}

#todayHeroCard .hero-weather-compact .weather-temp-row>strong,
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
  font-size:29px!important;
  line-height:.95!important;
  letter-spacing:-.05em!important;
  white-space:nowrap!important;
}

#todayHeroCard .hero-weather-compact .weather-condition-stack{
  display:grid!important;
  gap:1px!important;
  min-width:0!important;
}

#todayHeroCard .hero-weather-compact .weather-condition-stack>span{
  display:block!important;
  max-width:none!important;
  font-size:10px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#todayHeroCard .hero-weather-compact .weather-condition-stack>small{
  font-size:8px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}

#todayHeroCard .hero-weather-compact .weather-open-hint{
  width:22px!important;
  height:22px!important;
  flex-basis:22px!important;
  margin:0!important;
  align-self:center!important;
  font-size:10px!important;
}

#todayHeroCard .today-clock{
  grid-column:3!important;
  min-width:92px!important;
  margin:0!important;
  padding:7px 9px!important;
  border-radius:16px!important;
  align-self:center!important;
}

#todayHeroCard .today-clock-mark{
  width:22px!important;
  height:22px!important;
  flex-basis:22px!important;
  font-size:12px!important;
}

#todayHeroCard #todayClockTime{
  font-size:10px!important;
}

#todayHeroCard #todayDatePill{
  font-size:7px!important;
}

#todayHeroCard .hero-weather-alert{
  width:100%!important;
  max-width:none!important;
  margin:12px 0 0!important;
  padding:10px 12px 10px 34px!important;
  border-radius:14px!important;
}

#todayHeroCard .hero-weather-alert span{
  font-size:10px!important;
  line-height:1.35!important;
}

#todayHeroCard .hero-route-chip{
  margin:10px 0 0!important;
}

#todayHeroCard #todayHeroAction{
  margin-top:16px!important;
}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard{
    padding:24px 22px 26px!important;
  }

  [data-page="today"] #todayHeroCard .today-greeting-first{
    margin-bottom:16px!important;
  }

  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    grid-template-columns:48px minmax(0,1fr) 88px!important;
    gap:8px!important;
  }

  [data-page="today"] #todayHeroCard .hero-sky-badge{
    width:48px!important;
    height:44px!important;
    min-width:48px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact{
    padding:8px 9px!important;
    border-radius:16px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-module-top{
    grid-template-columns:30px minmax(0,1fr) 20px!important;
    gap:6px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
    grid-template-columns:minmax(0,1fr) 20px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-icon{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    font-size:21px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:27px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    font-size:9px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>small{
    font-size:7px!important;
  }

  [data-page="today"] #todayHeroCard .today-clock{
    min-width:88px!important;
    padding:7px 8px!important;
  }

  [data-page="today"] #todayHeroCard .today-clock-mark{
    display:none!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-alert{
    margin-top:10px!important;
  }

  [data-page="today"] #todayHeroCard #todayHeroAction{
    margin-top:14px!important;
  }
}

@media(max-width:390px){
  [data-page="today"] #todayHeroCard{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  [data-page="today"] #todayHeroCard .hero-assistant-meta{
    grid-template-columns:42px minmax(0,1fr) 82px!important;
    gap:7px!important;
  }

  [data-page="today"] #todayHeroCard .hero-sky-badge{
    width:42px!important;
    height:40px!important;
    min-width:42px!important;
  }

  [data-page="today"] #todayHeroCard .today-clock{
    min-width:82px!important;
    padding:6px 7px!important;
  }

  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:25px!important;
  }
}

/* 2026-09-28 — Today hero rebuilt v75 */
#todayHeroCard{
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#todayHeroCard .hero-ecosystem,
#todayHeroCard .hero-greeting-zone{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#todayHeroCard .hero-card-topline{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  width:100%!important;
  gap:18px!important;
  margin:0 0 24px!important;
}
#todayHeroCard .today-clock{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  min-width:124px!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:18px!important;
}
#todayHeroCard .today-clock-mark{
  display:grid!important;
}
#todayHeroCard .hero-sky-badge{
  position:relative!important;
  flex:0 0 78px!important;
  width:78px!important;
  min-width:78px!important;
  height:60px!important;
  margin:0 6px 0 0!important;
}
#todayHeroCard .today-greeting-first{
  display:grid!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 16px!important;
}
#todayHeroCard .today-greeting-first #todayGreeting{
  margin:0!important;
}
#todayHeroCard .today-greeting-first #todayMomentCopy{
  margin:0!important;
  max-width:620px!important;
}

/* Large primary CTA directly below the greeting */
#todayHeroCard .hero-greeting-zone #todayHeroAction{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:none!important;
  min-height:56px!important;
  margin:0 0 18px!important;
  padding:0 22px!important;
  border-radius:18px!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  align-self:stretch!important;
}

/* Compact weather card: full width, no overflow, no duplicate celestial icon */
#todayHeroCard .hero-weather-compact{
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:14px 15px!important;
  border-radius:19px!important;
  overflow:hidden!important;
}
#todayHeroCard .hero-weather-compact .weather-module-top,
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 30px!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#todayHeroCard .hero-weather-compact .weather-icon{
  display:none!important;
}
#todayHeroCard .hero-weather-compact .weather-now-copy{
  display:grid!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  overflow:hidden!important;
}
#todayHeroCard .hero-weather-compact #weatherLocation{
  display:block!important;
  width:100%!important;
  margin:0!important;
  color:#706A63!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.13em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#todayHeroCard .hero-weather-compact .weather-temp-row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#todayHeroCard .hero-weather-compact .weather-temp-row>strong,
#todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
  display:block!important;
  flex:none!important;
  margin:0!important;
  color:#191919!important;
  font-size:42px!important;
  line-height:.88!important;
  letter-spacing:-.07em!important;
  white-space:nowrap!important;
}
#todayHeroCard .hero-weather-compact .weather-condition-stack{
  display:grid!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
#todayHeroCard .hero-weather-compact .weather-condition-stack>span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  color:#47433E!important;
  font-size:12px!important;
  line-height:1.16!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#todayHeroCard .hero-weather-compact .weather-condition-stack>small{
  display:block!important;
  color:#706A63!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#todayHeroCard .hero-weather-compact .weather-open-hint{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  align-self:center!important;
}
#todayHeroCard .hero-weather-compact #weatherFeels,
#todayHeroCard .hero-weather-compact .weather-forecast,
#todayHeroCard .hero-weather-compact .weather-updated{
  display:none!important;
}

/* Alert remains a separate compact strip beneath weather */
#todayHeroCard .hero-weather-alert{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:10px 0 0!important;
  padding:11px 13px 11px 38px!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
#todayHeroCard .hero-weather-alert span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:11px!important;
  line-height:1.38!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#todayHeroCard .hero-route-chip{
  margin:10px 0 0!important;
}

@media(max-width:720px){
  [data-page="today"] #todayHeroCard{
    padding:22px 20px 24px!important;
  }
  [data-page="today"] #todayHeroCard .hero-card-topline{
    gap:14px!important;
    margin-bottom:23px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock{
    min-width:116px!important;
    padding:9px 10px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock-mark{
    width:25px!important;
    height:25px!important;
    flex-basis:25px!important;
  }
  [data-page="today"] #todayHeroCard #todayClockTime{
    font-size:11px!important;
  }
  [data-page="today"] #todayHeroCard #todayDatePill{
    font-size:8px!important;
  }
  [data-page="today"] #todayHeroCard .hero-sky-badge{
    flex-basis:72px!important;
    width:72px!important;
    min-width:72px!important;
    height:58px!important;
    margin-right:3px!important;
  }
  [data-page="today"] #todayHeroCard .today-greeting-first{
    margin-bottom:15px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayHeroAction{
    width:100%!important;
    min-height:55px!important;
    margin:0 0 17px!important;
    border-radius:17px!important;
    font-size:15px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:13px 14px!important;
    border-radius:18px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-module-top,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-module-top{
    grid-template-columns:minmax(0,1fr) 28px!important;
    gap:10px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:12px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:40px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    font-size:11px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>small{
    font-size:9px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-open-hint{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-alert{
    margin-top:9px!important;
    padding:11px 12px 11px 36px!important;
  }
}

@media(max-width:390px){
  [data-page="today"] #todayHeroCard{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  [data-page="today"] #todayHeroCard .hero-card-topline{
    gap:10px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock{
    min-width:108px!important;
  }
  [data-page="today"] #todayHeroCard .hero-sky-badge{
    flex-basis:66px!important;
    width:66px!important;
    min-width:66px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row{
    gap:10px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:37px!important;
  }
}


/* 2026-09-28 — Today clock legibility v80 */
#todayHeroCard #todayClockTime{
  font-size:14px!important;
  line-height:1.05!important;
}
#todayHeroCard #todayDatePill{
  font-size:9px!important;
  line-height:1.2!important;
}
#todayHeroCard .today-clock{
  min-width:132px!important;
  padding:10px 12px!important;
}
#todayHeroCard .today-clock-mark{
  width:27px!important;
  height:27px!important;
  flex-basis:27px!important;
}
@media(max-width:720px){
  [data-page="today"] #todayHeroCard #todayClockTime{
    font-size:13px!important;
  }
  [data-page="today"] #todayHeroCard #todayDatePill{
    font-size:9px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock{
    min-width:122px!important;
    padding:9px 10px!important;
  }
  [data-page="today"] #todayHeroCard .today-clock-mark{
    width:25px!important;
    height:25px!important;
    flex-basis:25px!important;
  }
}


/* 2026-09-28 — Tablet + desktop dashboard density v95 */
@media (min-width:861px) and (max-width:1199px){
  body.shell-app #appShell{
    grid-template-columns:220px minmax(0,1fr)!important;
  }
  body.shell-app #appShell>.sidebar{
    padding:22px 15px!important;
  }
  body.shell-app #appShell>.main{
    width:100%!important;
    max-width:none!important;
    padding:0 24px 56px!important;
  }
  [data-page="today"]{
    width:100%!important;
    max-width:none!important;
  }
  [data-page="today"] #todayHeroCard{
    padding:30px 28px!important;
    border-radius:30px!important;
  }
  [data-page="today"] #todayHeroCard #todayGreeting{
    font-size:clamp(40px,5vw,58px)!important;
    line-height:.96!important;
    letter-spacing:-.055em!important;
  }
  [data-page="today"] #todayHeroCard #todayMomentCopy{
    font-size:17px!important;
    max-width:720px!important;
  }
  [data-page="today"] .metric-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:14px!important;
    margin-bottom:22px!important;
  }
  [data-page="today"] .metric-card{
    grid-column:span 2;
    min-height:142px!important;
    padding:20px!important;
    border-radius:22px!important;
  }
  [data-page="today"] .metric-card:nth-child(4),
  [data-page="today"] .metric-card:nth-child(5){
    grid-column:span 3;
  }
  [data-page="today"] .metric-card span{
    font-size:11px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase;
  }
  [data-page="today"] .metric-card strong{
    font-size:42px!important;
    line-height:.95!important;
    margin:14px 0 8px!important;
    letter-spacing:-.055em!important;
  }
  [data-page="today"] .metric-card small{
    font-size:12px!important;
  }
  [data-page="today"] .dashboard-grid,
  [data-page="today"] .dashboard-grid.lower{
    gap:16px!important;
  }
  [data-page="today"] .panel{
    padding:22px!important;
  }
  [data-page="today"] .quick-card{
    min-height:104px!important;
  }
  [data-page="reports"] .report-grid .panel>strong{
    font-size:46px!important;
    line-height:.95!important;
  }
}

@media (min-width:1200px){
  body.shell-app #appShell{
    grid-template-columns:280px minmax(0,1fr)!important;
  }
  body.shell-app #appShell>.main{
    width:100%!important;
    max-width:none!important;
    padding:0 44px 76px!important;
  }
  body.shell-app .topbar{
    padding-top:26px!important;
    margin-bottom:28px!important;
  }
  [data-page="today"]{
    width:100%!important;
    max-width:1680px!important;
    margin:0 auto!important;
  }

  /* Use desktop width horizontally instead of stretching the mobile stack */
  [data-page="today"] #todayHeroCard{
    padding:34px 36px!important;
    border-radius:32px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone{
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)!important;
    grid-template-areas:
      "top top"
      "greeting weather"
      "action weather"
      "route alert"!important;
    column-gap:34px!important;
    row-gap:12px!important;
    align-items:start!important;
  }
  [data-page="today"] #todayHeroCard .hero-card-topline{
    grid-area:top!important;
    margin-bottom:6px!important;
  }
  [data-page="today"] #todayHeroCard .today-greeting-first{
    grid-area:greeting!important;
    margin:0!important;
    align-self:end!important;
  }
  [data-page="today"] #todayHeroCard #todayGreeting{
    font-size:clamp(48px,4.5vw,72px)!important;
    line-height:.93!important;
    letter-spacing:-.06em!important;
    max-width:900px!important;
  }
  [data-page="today"] #todayHeroCard #todayMomentCopy{
    font-size:18px!important;
    line-height:1.4!important;
    max-width:760px!important;
  }
  [data-page="today"] #todayHeroCard .hero-greeting-zone #todayHeroAction{
    grid-area:action!important;
    width:min(420px,100%)!important;
    min-height:54px!important;
    margin:4px 0 0!important;
    justify-self:start!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    grid-area:weather!important;
    align-self:stretch!important;
    min-height:168px!important;
    padding:22px 22px!important;
    border-radius:22px!important;
    display:flex!important;
    align-items:center!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-module-top{
    width:100%!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-temp-row>strong,
  [data-page="today"] #todayHeroCard .hero-weather-compact.weather-no-icon .weather-temp-row>strong{
    font-size:58px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>span{
    font-size:14px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact .weather-condition-stack>small{
    font-size:11px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-alert{
    grid-area:alert!important;
    margin:0!important;
    align-self:start!important;
  }
  [data-page="today"] #todayHeroCard .hero-route-chip{
    grid-area:route!important;
    margin:2px 0 0!important;
    justify-self:start!important;
  }

  [data-page="today"] .metric-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:16px!important;
    margin-bottom:24px!important;
  }
  [data-page="today"] .metric-card,
  [data-page="today"] .metric-card:last-child{
    grid-column:auto!important;
    min-height:154px!important;
    padding:22px 24px!important;
    border-radius:24px!important;
  }
  [data-page="today"] .metric-card span{
    font-size:11px!important;
    letter-spacing:.09em!important;
    text-transform:uppercase;
  }
  [data-page="today"] .metric-card strong{
    font-size:48px!important;
    line-height:.92!important;
    margin:16px 0 9px!important;
    letter-spacing:-.06em!important;
  }
  [data-page="today"] .metric-card small{
    font-size:12px!important;
    line-height:1.35!important;
  }

  [data-page="today"] .dashboard-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)!important;
    gap:22px!important;
  }
  [data-page="today"] .dashboard-grid.lower{
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
    gap:22px!important;
  }
  [data-page="today"] .panel{
    padding:26px!important;
    border-radius:26px!important;
  }
  [data-page="today"] .panel h3{
    font-size:24px!important;
  }
  [data-page="today"] .quick-card{
    min-height:112px!important;
    padding:18px!important;
  }
  [data-page="today"] .quick-card span{
    font-size:12px!important;
  }
  [data-page="today"] .presence-panel{
    padding:26px!important;
  }
  [data-page="reports"] .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }
  [data-page="reports"] .report-grid .panel>strong{
    font-size:54px!important;
    line-height:.92!important;
    letter-spacing:-.055em!important;
  }
}

@media (min-width:1500px){
  body.shell-app #appShell>.main{
    padding-left:56px!important;
    padding-right:56px!important;
  }
  [data-page="today"] .metric-card strong{
    font-size:52px!important;
  }
  [data-page="today"] #todayHeroCard .hero-weather-compact{
    min-height:180px!important;
  }
}

/* 2026-09-30 — Booking + Quote Center visual hierarchy v215
   Keep the existing data flow intact; make both workspaces read like a clear guided system. */
[data-page="booking"],
[data-page="quotes"]{
  --center-ink:#191919;
  --center-muted:#6E726F;
  --center-line:#E7E3DA;
  --center-paper:#FFFDF9;
  --center-ivory:#FAF8F3;
  --center-soft:#EAF2EF;
  --center-accent:#294640;
  --center-blue:#EAF1F5;
  --center-yellow:#F2D85B;
}

/* Strong page-level hierarchy: one clear hero, then the work. */
[data-page="booking"]>.section-intro,
[data-page="quotes"]>.section-intro{
  position:relative;
  overflow:hidden;
  align-items:center!important;
  padding:24px 26px!important;
  margin:8px 0 18px!important;
  border:1px solid #DDE7E2!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 88% 18%,rgba(207,226,221,.72),transparent 30%),
    linear-gradient(135deg,#FFFDF9 0%,#F5F8F5 56%,#EEF5F2 100%)!important;
  box-shadow:0 16px 38px rgba(41,70,64,.07)!important;
}
[data-page="quotes"]>.section-intro{
  border-color:#DDE7EB!important;
  background:
    radial-gradient(circle at 88% 18%,rgba(220,233,240,.78),transparent 30%),
    linear-gradient(135deg,#FFFDF9 0%,#F6F8F8 56%,#EEF3F6 100%)!important;
}
[data-page="booking"]>.section-intro>div,
[data-page="quotes"]>.section-intro>div{
  min-width:0;
  max-width:760px;
}
[data-page="booking"]>.section-intro .eyebrow,
[data-page="quotes"]>.section-intro .eyebrow{
  display:inline-flex!important;
  width:max-content;
  margin:0 0 8px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.76)!important;
  border:1px solid rgba(41,70,64,.12)!important;
  color:var(--center-accent)!important;
  font-size:10px!important;
  letter-spacing:.09em!important;
}
[data-page="booking"]>.section-intro h2,
[data-page="quotes"]>.section-intro h2{
  margin:0 0 8px!important;
  font-size:clamp(34px,4.5vw,52px)!important;
  line-height:.98!important;
  letter-spacing:-.05em!important;
  color:var(--center-ink)!important;
}
[data-page="booking"]>.section-intro p:not(.eyebrow),
[data-page="quotes"]>.section-intro p:not(.eyebrow){
  max-width:650px!important;
  margin:0!important;
  color:#5F6561!important;
  font-size:14px!important;
  line-height:1.55!important;
}
[data-page="booking"]>.section-intro>.primary-btn,
[data-page="quotes"]>.section-intro>.primary-btn{
  flex:0 0 auto;
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:var(--center-ink)!important;
  color:#fff!important;
  border-color:var(--center-ink)!important;
  box-shadow:0 9px 20px rgba(25,25,25,.12)!important;
}

/* Booking Center = guided sequence, not a pile of equal cards. */
[data-page="booking"] .progressive-booking{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  counter-reset:booking-step;
}
[data-page="booking"] .booking-step-panel{
  position:relative!important;
  display:block;
  grid-column:1/-1!important;
  margin:0!important;
  padding:22px 22px 20px 72px!important;
  border:1px solid var(--center-line)!important;
  border-radius:22px!important;
  background:var(--center-paper)!important;
  box-shadow:0 8px 24px rgba(39,49,46,.045)!important;
  overflow:visible!important;
  counter-increment:booking-step;
}
[data-page="booking"] .booking-step-panel::before{
  content:"0" counter(booking-step);
  position:absolute;
  left:20px;
  top:20px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--center-soft);
  border:1px solid #D5E5E0;
  color:var(--center-accent);
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
}
[data-page="booking"] .booking-step-panel[data-booking-panel="requests"]::before{
  background:var(--center-yellow);
  border-color:#E2CA58;
  color:#2B2818;
}
[data-page="booking"] .booking-step-panel[data-booking-panel="availability"]::before{
  background:var(--center-blue);
  border-color:#D6E3EA;
  color:#365466;
}
[data-page="booking"] .booking-step-panel .panel-head{
  min-height:38px!important;
  margin:0 0 14px!important;
  align-items:flex-start!important;
}
[data-page="booking"] .booking-step-panel .panel-head .eyebrow{
  margin:0 0 3px!important;
  color:var(--center-accent)!important;
  font-size:9px!important;
  letter-spacing:.09em!important;
}
[data-page="booking"] .booking-step-panel .panel-head h3{
  margin:0!important;
  font-size:22px!important;
  line-height:1.05!important;
  letter-spacing:-.03em!important;
}
[data-page="booking"] .booking-step-panel .panel-head .pill{
  margin-top:1px!important;
}
[data-page="booking"] .booking-step-panel[data-booking-panel="requests"]{
  border-color:#E8DEAF!important;
  background:linear-gradient(180deg,#FFFDF9 0%,#FFFCF0 100%)!important;
}
[data-page="booking"] .booking-step-panel[data-booking-panel="availability"]{
  background:linear-gradient(180deg,#FFFDF9 0%,#F8FBFC 100%)!important;
}

/* Public links feel like tools, not raw text fields. */
[data-page="booking"] .link-box{
  min-height:50px!important;
  padding:8px 9px 8px 14px!important;
  border-radius:14px!important;
  border-color:var(--center-line)!important;
  background:#FBFAF6!important;
}
[data-page="booking"] .link-box a,
[data-page="booking"] .link-box span{
  color:#3F4542!important;
  font-size:12px!important;
  font-weight:750!important;
}
[data-page="booking"] .link-copy-btn{
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  background:#fff!important;
  border:1px solid var(--center-line)!important;
  color:var(--center-ink)!important;
}

/* Incoming bookings read like compact decision cards. */
[data-page="booking"] .booking-requests-list{
  display:grid!important;
  gap:9px!important;
}
[data-page="booking"] .booking-request-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:16px!important;
  align-items:center!important;
  padding:14px 14px 14px 16px!important;
  border:1px solid #E9E4D8!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:none!important;
}
[data-page="booking"] .booking-request-copy{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}
[data-page="booking"] .booking-request-copy>strong{
  font-size:15px!important;
  line-height:1.2!important;
}
[data-page="booking"] .booking-request-copy>small{
  color:var(--center-muted)!important;
  font-size:10px!important;
  line-height:1.4!important;
}
[data-page="booking"] .booking-property-summary{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:var(--center-soft)!important;
  color:#426158!important;
  font-weight:800!important;
}
[data-page="booking"] .booking-request-actions{
  justify-content:flex-end!important;
  gap:6px!important;
  max-width:360px!important;
}
[data-page="booking"] .booking-action{
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:10px!important;
}
[data-page="booking"] .booking-action-primary{
  background:var(--center-accent)!important;
  color:#fff!important;
  border-color:var(--center-accent)!important;
}

/* Services mirror the customer-facing demo: clean, readable service cards. */
[data-page="booking"] .booking-services-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
[data-page="booking"] .booking-service-row{
  min-width:0!important;
  min-height:118px!important;
  padding:15px!important;
  border:1px solid var(--center-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  align-content:start!important;
  gap:9px!important;
}
[data-page="booking"] .booking-service-row>span:first-child{
  display:grid!important;
  gap:5px!important;
  min-width:0!important;
}
[data-page="booking"] .booking-service-row>span:first-child>strong{
  font-size:15px!important;
  line-height:1.2!important;
}
[data-page="booking"] .booking-service-row>span:first-child>small{
  color:var(--center-muted)!important;
  font-size:10px!important;
  line-height:1.4!important;
}
[data-page="booking"] .booking-addon-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  align-self:end!important;
}
[data-page="booking"] .booking-addon-chips i{
  margin:0!important;
  padding:5px 7px!important;
  border-radius:999px!important;
  background:var(--center-soft)!important;
  color:#46645C!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:800!important;
}

/* Customer-experience flow becomes the visual bridge between setup and results. */
[data-page="booking"] .booking-experience-compact .compact-flow{
  gap:7px!important;
  margin:2px 0 10px!important;
}
[data-page="booking"] .booking-experience-compact .compact-flow span{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:8px 11px!important;
  border-radius:11px!important;
  background:#FBFAF6!important;
  font-size:10px!important;
}
[data-page="booking"] .booking-experience-compact .compact-flow b{
  color:#9B9B94!important;
  font-size:11px!important;
}
[data-page="booking"] .booking-experience-note{
  margin:0!important;
  color:var(--center-muted)!important;
  font-size:10px!important;
  line-height:1.55!important;
}

/* Availability stays operational, but no longer visually dominates the page. */
[data-page="booking"] .availability-settings{
  gap:10px!important;
  margin-bottom:12px!important;
}
[data-page="booking"] .availability-settings label{
  padding:12px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid var(--center-line)!important;
}
[data-page="booking"] .availability-week{
  gap:7px!important;
}
[data-page="booking"] .availability-day{
  min-height:48px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:#fff!important;
}
[data-page="booking"] .availability-day input[type="time"]{
  min-height:34px!important;
  padding:6px 8px!important;
  font-size:10px!important;
}

/* Quote Center = a left-to-right pipeline with obvious stage hierarchy. */
[data-page="quotes"] .kanban{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(210px,1fr))!important;
  gap:10px!important;
  align-items:start!important;
  overflow-x:auto!important;
  padding:2px 1px 10px!important;
  counter-reset:quote-stage;
  scroll-snap-type:x proximity;
}
[data-page="quotes"] .quote-growth-col{
  position:relative!important;
  min-width:210px!important;
  padding:12px!important;
  border:1px solid var(--center-line)!important;
  border-radius:18px!important;
  background:#F8F7F3!important;
  box-shadow:none!important;
  counter-increment:quote-stage;
  scroll-snap-align:start;
}
[data-page="quotes"] .quote-growth-col:nth-child(3){
  background:#F7FAFB!important;
  border-color:#DCE7EC!important;
}
[data-page="quotes"] .quote-growth-col:nth-child(4){
  background:#F5FAF7!important;
  border-color:#D9E8DF!important;
}
[data-page="quotes"] .quote-growth-col>h3{
  display:flex!important;
  align-items:center!important;
  min-height:34px!important;
  margin:0 0 10px!important;
  padding:0 2px!important;
  color:var(--center-ink)!important;
  font-size:12px!important;
  line-height:1.1!important;
  letter-spacing:-.01em!important;
}
[data-page="quotes"] .quote-growth-col>h3::before{
  content:"0" counter(quote-stage);
  width:27px;
  height:27px;
  margin-right:8px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  border:1px solid var(--center-line);
  color:var(--center-accent);
  font-size:9px;
  font-weight:950;
  letter-spacing:.03em;
}
[data-page="quotes"] .quote-growth-col>h3>span{
  margin-left:auto!important;
  min-width:23px!important;
  height:23px!important;
  padding:0 7px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid var(--center-line)!important;
  color:var(--center-muted)!important;
  font-size:9px!important;
}
[data-page="quotes"] .quote-growth-card{
  margin-top:8px!important;
  padding:13px!important;
  border:1px solid #E4E0D7!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(39,49,46,.035)!important;
}
[data-page="quotes"] .quote-growth-card.accepted{
  border-color:#D4E5DA!important;
  background:#FBFEFC!important;
}
[data-page="quotes"] .quote-growth-top{
  align-items:center!important;
  margin-bottom:10px!important;
}
[data-page="quotes"] .quote-status-pill{
  padding:5px 7px!important;
  border-radius:999px!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}
[data-page="quotes"] .quote-amount{
  font-size:17px!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
[data-page="quotes"] .quote-growth-customer{
  display:grid!important;
  gap:3px!important;
}
[data-page="quotes"] .quote-growth-customer>strong{
  font-size:13px!important;
  line-height:1.2!important;
}
[data-page="quotes"] .quote-growth-customer>small{
  color:var(--center-muted)!important;
  font-size:9px!important;
  line-height:1.35!important;
}
[data-page="quotes"] .quote-property-summary{
  margin-top:3px!important;
  padding:5px 7px!important;
  border-radius:9px!important;
  background:var(--center-soft)!important;
  color:#45645B!important;
}
[data-page="quotes"] .quote-next-step{
  margin:9px 0 7px!important;
  padding:9px!important;
  border:0!important;
  border-radius:11px!important;
  background:#FAF8F3!important;
}
[data-page="quotes"] .quote-next-step span,
[data-page="quotes"] .quote-next-step b{
  font-size:9px!important;
  line-height:1.35!important;
}
[data-page="quotes"] .quote-next-step b{
  color:var(--center-accent)!important;
}
[data-page="quotes"] .record-card-actions{
  gap:5px!important;
  margin-top:9px!important;
  padding-top:9px!important;
  border-top:1px solid #EEEAE2!important;
}
[data-page="quotes"] .record-card-actions button{
  min-height:30px!important;
  padding:0 8px!important;
  border-radius:8px!important;
  font-size:9px!important;
}
[data-page="quotes"] .kanban-empty{
  min-height:84px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  text-align:center!important;
  color:#8A8780!important;
  font-size:10px!important;
  line-height:1.4!important;
  border:1px dashed #DED9D0!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.55)!important;
}

@media(max-width:780px){
  [data-page="booking"]>.section-intro,
  [data-page="quotes"]>.section-intro{
    align-items:flex-start!important;
    padding:20px!important;
    border-radius:22px!important;
  }
  [data-page="booking"]>.section-intro h2,
  [data-page="quotes"]>.section-intro h2{
    font-size:36px!important;
  }
  [data-page="booking"]>.section-intro>.primary-btn,
  [data-page="quotes"]>.section-intro>.primary-btn{
    width:100%!important;
    justify-content:center!important;
  }
  [data-page="booking"] .booking-step-panel{
    padding:18px 16px 18px 58px!important;
    border-radius:18px!important;
  }
  [data-page="booking"] .booking-step-panel::before{
    left:14px;
    top:17px;
    width:32px;
    height:32px;
    border-radius:10px;
  }
  [data-page="booking"] .booking-services-list{
    grid-template-columns:1fr!important;
  }
  [data-page="booking"] .booking-service-row{
    min-height:0!important;
  }
  [data-page="booking"] .booking-request-row{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  [data-page="booking"] .booking-request-actions{
    justify-content:flex-start!important;
    max-width:none!important;
  }
  [data-page="quotes"] .kanban{
    grid-template-columns:1fr!important;
    overflow-x:visible!important;
    gap:9px!important;
    scroll-snap-type:none;
  }
  [data-page="quotes"] .quote-growth-col{
    min-width:0!important;
    width:100%!important;
    border-radius:16px!important;
  }
}

@media(max-width:520px){
  [data-page="booking"]>.section-intro,
  [data-page="quotes"]>.section-intro{
    margin-top:10px!important;
  }
  [data-page="booking"]>.section-intro h2,
  [data-page="quotes"]>.section-intro h2{
    font-size:32px!important;
  }
  [data-page="booking"] .booking-step-panel{
    padding:16px 13px 16px 52px!important;
  }
  [data-page="booking"] .booking-step-panel::before{
    left:12px;
    top:15px;
    width:29px;
    height:29px;
    font-size:9px;
  }
  [data-page="booking"] .booking-step-panel .panel-head{
    gap:8px!important;
  }
  [data-page="booking"] .booking-step-panel .panel-head h3{
    font-size:19px!important;
  }
  [data-page="booking"] .booking-request-actions{
    display:flex!important;
    flex-wrap:wrap!important;
  }
  [data-page="booking"] .booking-action{
    flex:1 1 auto!important;
  }
}