/* ==========================================================================
   澳搭搭 guide chrome — shared by the three static guide books
   (/life-guide, /business-guide, /school-guide).

   Mirrors app/design-system.css: warm paper, eucalyptus ink, Uluru
   terracotta for emphasis, wattle only for money. Serif headlines, sans
   body, small radii, hairline rules. The header, the sticky book bar, the
   footer and the shared share controls live here; each guide keeps its own
   stylesheet for its content. Fonts: /fonts/audada/typography.css.
   ========================================================================== */

:root {
  --ds-paper: #f7f5ef;
  --ds-paper-raised: #fffdf8;
  --ds-paper-sunk: #efebe1;
  --ds-paper-deep: #e6e1d4;
  --ds-ink: #182c29;
  --ds-ink-2: #34433f;
  --ds-muted: #5f6d67;
  --ds-faint: #8b968f;
  --ds-on-ink: #fffdf8;
  --ds-rule: #d9d8cc;
  --ds-hairline: #e7e4d9;
  --ds-accent: #c45132;
  --ds-accent-strong: #a6401f;
  --ds-accent-wash: #f4e5dc;
  --ds-eucalypt: #2f5d50;
  --ds-eucalypt-wash: #e3ece5;
  --ds-wattle: #d9a521;
  --ds-wattle-ink: #7a5a00;
  --ds-wattle-wash: #f9efcf;
  --ds-danger: #b3261e;
  --ds-danger-wash: #fbe9e7;
  --ds-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --ds-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --ds-r-xs: 2px;
  --ds-r-sm: 4px;
  --ds-r-md: 8px;
  --ds-sh-1: 0 1px 2px rgb(24 44 41 / 0.05);
  --ds-sh-2: 0 10px 28px rgb(24 44 41 / 0.1);
  --ds-sh-3: 0 22px 60px rgb(24 44 41 / 0.16);
  --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ds-fast: 140ms;
  --ds-med: 240ms;
  /* Guide layout */
  --ag-max: 1360px;
  --ag-gutter: 32px;
  --ag-bar-h: 50px;
  --ag-measure: 680px;
  /* The footer stays ink in every theme (the business reader has a dark mode). */
  --ag-footer-bg: #182c29;
  --ag-footer-fg: #f7f5ef;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ag-bar-h) + 18px);
}
body {
  margin: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font: 400 16px/1.7 var(--ds-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
img,
svg {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--ds-accent-wash);
  color: var(--ds-ink);
}
:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--ds-serif);
  font-weight: 700;
  font-feature-settings: 'palt' 1, 'kern' 1;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ds-ink);
}
h1,
h2 {
  text-wrap: balance;
}
p,
li,
dd,
figcaption,
blockquote {
  text-wrap: pretty;
}
input::placeholder,
textarea::placeholder {
  color: var(--ds-faint);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Page width: the same wrap as the main site. */
.ag-wrap {
  width: calc(100% - var(--ag-gutter) * 2);
  max-width: var(--ag-max);
  margin-inline: auto;
}

/* Kicker: the small uppercase label above headlines. */
.ag-kicker,
.eyebrow {
  display: block;
  margin: 0;
  font: 600 11px/1.4 var(--ds-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-accent);
}

/* Buttons */
.ag-btn,
.ag-btn-outline,
.ag-btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--ds-ink);
  border-radius: var(--ds-r-sm);
  background: var(--ds-ink);
  color: var(--ds-on-ink);
  font: 600 14px/1.2 var(--ds-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ds-fast) var(--ds-ease),
    color var(--ds-fast) var(--ds-ease),
    border-color var(--ds-fast) var(--ds-ease);
}
.ag-btn:hover {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-on-ink);
}
.ag-btn-outline {
  background: transparent;
  color: var(--ds-ink);
}
.ag-btn-outline:hover {
  background: var(--ds-ink);
  color: var(--ds-on-ink);
}
.ag-btn-quiet {
  min-height: 34px;
  padding: 6px 12px;
  border-color: var(--ds-rule);
  background: var(--ds-paper-raised);
  color: var(--ds-ink-2);
  font: 500 13px/1.2 var(--ds-sans);
}
.ag-btn-quiet:hover {
  border-color: var(--ds-ink);
  color: var(--ds-ink);
}
.ag-btn-quiet[aria-pressed='true'] {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: var(--ds-on-ink);
}
:is(.ag-btn, .ag-btn-outline, .ag-btn-quiet):active {
  transform: translateY(1px);
}
:is(.ag-btn, .ag-btn-outline, .ag-btn-quiet):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Skip link */
.skip,
.ag-skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-ink);
  color: var(--ds-on-ink);
  font-size: 14px;
  text-decoration: none;
}
.skip:focus,
.ag-skip:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   Header: brand row + the main site's navigation. Not sticky, like the
   main site; the book bar below it is.
   -------------------------------------------------------------------------- */
.ag-header {
  background: var(--ds-paper);
  color: var(--ds-ink);
  border-bottom: 1px solid var(--ds-ink);
}
.ag-row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 102px;
  padding: 22px 0;
}
.ag-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--ds-ink);
  text-decoration: none;
}
.ag-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  background: var(--ds-accent);
  color: var(--ds-paper);
  transform: rotate(-4deg);
}
.ag-mark svg {
  width: 29px;
  height: 29px;
}
.ag-name {
  display: block;
  font: 900 36px/1.15 var(--ds-serif);
  font-feature-settings: 'palt' 1;
  letter-spacing: -0.075em;
}
.ag-brand small {
  display: block;
  margin-top: 5px;
  font: 600 9px/1.5 var(--ds-sans);
  letter-spacing: 0.31em;
  color: var(--ds-muted);
}
.ag-title {
  flex: 1;
  min-width: 0;
  display: block;
  padding-left: 27px;
  border-left: 1px solid var(--ds-rule);
  color: var(--ds-ink);
  font: 500 15px/1.5 var(--ds-sans);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.ag-title:hover {
  color: var(--ds-accent);
}
.ag-title small {
  display: block;
  margin-top: 8px;
  font: 500 9px/1.4 var(--ds-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-muted);
}
.ag-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-left: auto;
}
.ag-actions .ag-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ds-ink);
  font-size: 13px;
  text-decoration: none;
}
.ag-actions .ag-link:hover {
  color: var(--ds-accent);
}
.ag-actions .ag-link svg {
  width: 18px;
  height: 18px;
}
.ag-actions .ag-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--ds-r-xs);
  font-size: 13px;
}
.ag-actions .ag-btn svg {
  width: 18px;
  height: 18px;
}
.ag-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 53px;
  border-top: 1px solid var(--ds-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.ag-nav::-webkit-scrollbar {
  display: none;
}
.ag-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 53px;
  padding: 14px 0 13px;
  border-bottom: 2px solid transparent;
  color: var(--ds-muted);
  font: 500 14px/1.5 var(--ds-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-fast) var(--ds-ease);
}
.ag-nav a:hover {
  color: var(--ds-accent);
}
.ag-nav a[aria-current],
.ag-nav a.active {
  color: var(--ds-ink);
  font-weight: 700;
  border-bottom-color: var(--ds-accent);
}
.ag-nav .ag-short {
  display: none;
}
.ag-nav .ag-nav-all {
  margin-left: auto;
  color: var(--ds-ink);
  font-size: 13px;
  font-weight: 600;
}
.ag-nav .ag-nav-all svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Book bar: the guide's own navigation, sticky while reading.
   -------------------------------------------------------------------------- */
.ag-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ds-paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ds-hairline);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ag-bar {
    background: var(--ds-paper);
  }
}
.ag-bar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--ag-bar-h);
}
.ag-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--ds-ink);
  font: 700 15px/1.2 var(--ds-serif);
  font-feature-settings: 'palt' 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.ag-bar-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ds-accent);
  border-radius: 1px;
  transform: rotate(-4deg);
}
.ag-bar-title:hover {
  color: var(--ds-accent);
}
.ag-bar-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}
.ag-bar-links::-webkit-scrollbar {
  display: none;
}
.ag-bar-links a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-bar-h);
  color: var(--ds-muted);
  font: 500 13px/1.2 var(--ds-sans);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--ds-fast) var(--ds-ease);
}
.ag-bar-links a:hover {
  color: var(--ds-accent);
}
.ag-bar-links a[aria-current] {
  color: var(--ds-ink);
  font-weight: 700;
  border-bottom-color: var(--ds-accent);
}
.ag-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}
.ag-bar-actions .ag-btn-quiet {
  min-height: 34px;
}
.ag-bar-actions .ag-icon {
  width: 36px;
  min-width: 36px;
  min-height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.ag-bar-actions kbd {
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid var(--ds-rule);
  border-radius: 3px;
  font: 500 11px/1.4 var(--ds-sans);
  color: var(--ds-muted);
}

/* --------------------------------------------------------------------------
   Share controls (markup from /audada-share.js). The guide-share module
   mounts a row right after the header.
   -------------------------------------------------------------------------- */
:root .audada-guide-share {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  width: calc(100% - var(--ag-gutter) * 2);
  max-width: var(--ag-max);
  margin: 14px auto 0;
  overflow-x: auto;
  scrollbar-width: none;
}
:root .audada-guide-share::-webkit-scrollbar {
  display: none;
}
:root .audada-share-controls button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-r-sm);
  background: var(--ds-paper-raised);
  color: var(--ds-ink-2);
  font: 500 13px/1 var(--ds-sans);
  white-space: nowrap;
  box-shadow: none;
  transition:
    border-color var(--ds-fast) var(--ds-ease),
    color var(--ds-fast) var(--ds-ease);
}
:root .audada-share-controls button:hover {
  background: var(--ds-paper-raised);
  border-color: var(--ds-ink);
  color: var(--ds-ink);
}
:root .audada-share-controls button:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}
:root dialog.audada-share-dialog {
  border: 1px solid var(--ds-hairline);
  border-top: 3px solid var(--ds-ink);
  border-radius: var(--ds-r-sm);
  background: var(--ds-paper-raised);
  color: var(--ds-ink);
  box-shadow: var(--ds-sh-3);
  font-family: var(--ds-sans);
}
:root dialog.audada-share-dialog::backdrop {
  background: rgb(24 44 41 / 0.55);
  backdrop-filter: blur(2px);
}
:root .audada-share-dialog h2 {
  font-family: var(--ds-serif);
  font-feature-settings: 'palt' 1;
}
:root .audada-share-dialog button {
  border-color: var(--ds-rule);
  border-radius: var(--ds-r-sm);
  background: var(--ds-paper-raised);
  color: var(--ds-ink);
  font-family: var(--ds-sans);
}
:root .audada-share-dialog button:hover {
  background: var(--ds-paper);
  border-color: var(--ds-ink);
}
:root .audada-share-dialog input {
  border-color: var(--ds-rule);
  border-radius: var(--ds-r-sm);
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-sans);
}
:root .audada-share-dialog :focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer: the main site's quiet ink directory.
   -------------------------------------------------------------------------- */
.ag-footer {
  margin-top: 80px;
  padding: 54px 0 25px;
  background: var(--ag-footer-bg);
  color: #c2cbc2;
  font-size: 12px;
  line-height: 1.6;
}
.ag-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 45px;
  align-items: start;
  padding-bottom: 45px;
  margin-bottom: 23px;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.ag-footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ag-footer-grid h2 {
  margin: 0 0 14px;
  font: 600 17px/1.5 var(--ds-serif);
  letter-spacing: 0.02em;
  color: var(--ag-footer-fg);
}
.ag-footer-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #c6d0c7;
  font-size: 13px;
  text-decoration: none;
}
.ag-footer-grid a:hover {
  color: #e8ae86;
}
.ag-footer-wordmark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 0;
  color: var(--ag-footer-fg) !important;
  font: 700 42px/1.2 var(--ds-serif);
  font-feature-settings: 'palt' 1;
  letter-spacing: -0.07em;
}
.ag-footer-wordmark span {
  font: 500 10px/1.5 var(--ds-sans);
  letter-spacing: 0.21em;
  color: #a3b6a8;
}
.ag-footer-intro p {
  max-width: 290px;
  margin: 13px 0;
  font-size: 14px;
  line-height: 1.9;
  color: #a3b6a8;
}
.ag-footer-intro .ag-footer-cta {
  gap: 8px;
  color: #e8ae86;
  font-size: 13px;
  margin-top: 5px;
}
.ag-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
  font-size: 11px;
  color: #a3b6a8;
}
.ag-footer-bottom > * {
  margin: 0;
}
.ag-footer-bottom p {
  max-width: 760px;
  line-height: 1.8;
}
.ag-footer-bottom a {
  color: #c6d0c7;
}
.ag-footer-bottom a:hover {
  color: #e8ae86;
}
.ag-footer-legal {
  display: grid;
  gap: 6px;
  flex-basis: 100%;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

/* --------------------------------------------------------------------------
   Responsive chrome
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .ag-nav {
    gap: 26px;
  }
  .ag-footer-grid {
    gap: 28px;
  }
}
@media (max-width: 800px) {
  .ag-row {
    min-height: 86px;
    padding: 18px 0;
    gap: 15px;
  }
  .ag-title {
    display: none;
  }
  .ag-name {
    font-size: 31px;
  }
  .ag-mark {
    width: 38px;
    height: 40px;
  }
  .ag-nav {
    gap: 0;
    justify-content: space-between;
  }
  .ag-nav a {
    font-size: 13px;
  }
  .ag-nav .ag-long {
    display: none;
  }
  .ag-nav .ag-short {
    display: inline;
  }
  .ag-nav .ag-nav-all span {
    display: none;
  }
  .ag-footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  .ag-footer-grid .ag-footer-intro {
    grid-column: 1 / -1;
  }
  .ag-footer-intro p {
    max-width: none;
  }
  .ag-footer-grid h2 {
    font-size: 16px;
  }
}
@media (max-width: 560px) {
  :root {
    --ag-gutter: 20px;
    --ag-bar-h: 48px;
  }
  .ag-row {
    min-height: 77px;
    padding: 15px 0;
    gap: 12px;
  }
  .ag-name {
    font-size: 30px;
  }
  .ag-brand small {
    font-size: 8px;
    letter-spacing: 0.25em;
  }
  .ag-mark {
    width: 33px;
    height: 39px;
  }
  .ag-mark svg {
    width: 25px;
    height: 25px;
  }
  .ag-brand {
    gap: 9px;
  }
  .ag-actions {
    gap: 12px;
  }
  .ag-actions .ag-link {
    display: none;
  }
  .ag-actions .ag-btn {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 12px;
    gap: 3px;
  }
  .ag-actions .ag-btn svg {
    width: 15px;
    height: 15px;
  }
  .ag-nav {
    gap: 15px;
    justify-content: flex-start;
    min-height: 46px;
  }
  .ag-nav a {
    min-height: 46px;
    padding: 12px 0;
  }
  .ag-nav .ag-nav-all {
    margin-left: auto;
    padding-left: 10px;
  }
  .ag-bar-inner {
    gap: 14px;
  }
  .ag-bar-title {
    font-size: 14px;
  }
  .ag-bar-links {
    gap: 16px;
  }
  .ag-bar-links a {
    font-size: 12px;
  }
  .ag-bar-actions {
    gap: 6px;
  }
  .ag-bar-actions kbd {
    display: none;
  }
  .ag-bar-compact .ag-bar-links {
    display: none;
  }
  :root .audada-guide-share {
    margin-top: 12px;
  }
  :root .audada-share-controls button {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .ag-footer {
    margin-top: 56px;
    padding: 40px 0 22px;
  }
  .ag-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 28px;
  }
  .ag-footer-wordmark {
    font-size: 34px;
  }
  .ag-footer-grid a {
    min-height: 30px;
  }
}

/* --------------------------------------------------------------------------
   Print: the chrome stays out of the way.
   -------------------------------------------------------------------------- */
@media print {
  .ag-header,
  .ag-bar,
  .ag-footer,
  .audada-guide-share,
  .audada-share-dialog,
  .skip,
  .ag-skip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #111;
  }
}