/* Hand-written glue for the app side of the main-site chrome (`#siteChrome`).
 *
 * `site_chrome.css` is generated from the replica by site/tools/extract_chrome.py and must
 * not be edited; this file is the app's own small layer on top of it: spacing around the
 * app card, and the status line that replaced the app's old dark footer.
 * [INVARIANT: KAT-SITE-CHROME]
 */

/* The app card and its status line fill the site panel between header and footer.
 * 6px of top padding: the legacy header is a fixed 175px box and its navigation bar sits
 * at 145px, so the bar overhangs its parent by ~3px on the replica too. */
#siteChrome .siteChromeApp {
  padding: 8px 14px 12px;
  box-sizing: border-box;
}

#siteChrome .siteChromeApp > #blossomAppRoot,
#siteChrome .siteChromeApp > .max-w-4xl {
  width: 100%;
  max-width: none;
  background-color: #FFFEF8;
  border: 1.5px solid #D4A373;
  box-shadow: 0 4px 16px rgba(138, 90, 0, 0.08);
}

#siteChrome .siteChromeStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  max-width: none;
  margin: 8px 0 4px;
  padding: 6px 10px;
  font-size: 11px;
  color: #6b5a25;
  background: #fff9dd;
  border: 1px solid #e6d68a;
  border-radius: 8px;
}

/* On a phone the site header shrinks to 110px (media.css). The module bar is sticky, so
   it must not slide under the header while the page is at the top. */
@media (max-width: 740px) {
  #siteChrome .siteChromeApp { padding-top: 2px; }
}

/* Tailwind's preflight sets `box-sizing: border-box` on everything, but the replica's
 * chrome was authored for **content-box**: `.nav a{height:21px;padding:6px 5px}` means a
 * 33px link on the site and a 21px link here with 9px left for the text — the menu looked
 * clipped, and most of its height was no longer part of the link, so clicks fell through.
 * Restored for the chrome only: the app card lives outside `.header`/`.footer` and keeps
 * border-box, which its Tailwind layout depends on. `[INVARIANT: KAT-SITE-CHROME]` */
#siteChrome .header,
#siteChrome .header *,
#siteChrome .footer,
#siteChrome .footer * {
  box-sizing: content-box;
}

/* The navigation bar is positioned 145px down a 175px header and hangs 5px below it on
 * the replica, where the hero image absorbs the overhang. Here the app card follows
 * immediately, so the box grows to contain its own menu instead of spilling onto it. */
#siteChrome .header {
  height: 180px;
}

/* One row of module tabs, scrollable if a fourth tab ever arrives: wrapping them made the
   tab band fill the dark bar with a green block and pushed the status pill away. */
#siteChrome #mainTabBar {
  flex-wrap: nowrap;
}

@media (max-width: 740px) {
  /* Same story on a phone: the collapsed menu ("選項") sits at 80px and is 46px tall. */
  #siteChrome .header {
    height: 130px;
  }
}

/* The staff login sits at the end of the site menu as an ordinary item — the same height,
 * padding and colour as the links beside it. It carried a red "button" style for one
 * release; on the main site it is plain, and the app must match.
 * Only what the button added is cancelled: `color` and `padding` must keep coming from the
 * legacy `.nav a` rule, or the item stops matching its neighbours. `[INVARIANT: KAT-SITE-CHROME]`
 * The class stays because the extraction tools find and count it by name. */
#siteChrome .nav_zh-tw a.site-nav-staff,
#siteChrome .nav_en a.site-nav-staff {
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: inherit;
}

/* A printed registration form is a document, not a web page: the site's header,
 * navigation and footer have no place on paper (the rail already hides itself). */
@media print {
  #siteChrome .header,
  #siteChrome .footer,
  #siteChrome .siteChromeStatus { display: none !important; }
  #siteChrome > .layout { width: 100% !important; min-width: 0 !important; background: #fff !important; }
  body.site-chrome-on { background: #fff !important; }
}