/* App frame, Direction 3 ("Today first, then tables"), with the top menu bar
   kept (Kevin turned down the left rail): a white paper page, content on softly tinted panels with no
   shadows, sharp 2px corners and hairlines. Scoped to .hj-app so the public
   landing page (soft shapes, pill buttons) keeps its own look.
   Loaded after styles.css and before the per-page CSS files. */

.hj-app{
  --hj-radius:2px;--hj-radius-lg:2px;
  background:var(--hj-card);
}

/* ---- Surfaces: panels instead of floating cards ---- */
.hj-app .hj-card{background:var(--hj-hover);border:1px solid var(--hj-hair);border-radius:2px;box-shadow:none}
.hj-app .hj-input,.hj-app .hj-select,.hj-app .hj-textarea{background:var(--hj-card);border-radius:2px}

/* ---- Shapes: square buttons, toggles and chips; avatars and badges stay round ---- */
.hj-app .hj-btn,.hj-app .hj-btn--round,.hj-app .hj-pill,.hj-app .hj-chip{border-radius:2px}
.hj-app .hj-pill[aria-pressed="true"]{background:var(--hj-fg);border-color:var(--hj-fg);color:var(--hj-card)}
.hj-app .hj-menu{border-radius:2px}
.hj-app .hj-menu__item{border-radius:2px}

/* ---- Type ---- */
.hj-app .hj-h1{font-size:40px;line-height:1.1}

/* ---- No colour bands in this direction ---- */
.hj-app .hj-page-head--stage::before{display:none}
.hj-app .hj-page-head--stage{padding-bottom:0}

/* ---- Page frame: centred under the top bar ---- */
.hj-app .hj-page{max-width:1240px;margin:0 auto;padding:40px 56px 72px}
.hj-app .hj-main > :not(.hj-page){max-width:1240px;margin:0 auto;padding:40px 56px 72px}

/* ---- Top bar (as before), lined up with the page and drawn with a hairline ---- */
.hj-app .hj-header{border-bottom:1px solid var(--hj-hair)}
.hj-app .hj-header__inner{max-width:1240px}
.hj-app .hj-nav__icon{display:none}

/* ---- Phones: slim top bar + bottom tab bar (Today first) ---- */
@media (max-width:760px){
  .hj-app .hj-nav__icon{display:none}
  .hj-app .hj-page,.hj-app .hj-main > :not(.hj-page){padding:24px 16px 32px}
  .hj-app .hj-h1{font-size:32px}
  .hj-app .hj-tabbar__link[aria-current="page"]{color:var(--hj-gold)}
}