/* ==========================================================================
 * Sunrise Bullions - app.css
 * Palette and proportions follow tasks.txt sections 27-30 and homepage.jpeg.
 * ========================================================================== */

/* ------------------------------------------------------------- 1. tokens - */
:root {
  /* Golds - deliberately several shades to fake metallic depth (tasks.txt 28) */
  --gold:            #D9A83E;
  --gold-bright:     #F4C653;
  --gold-antique:    #8F6724;
  --gold-heading:    #E2B75B;
  --gold-ticker:     #D6A93C;

  /* Neutrals */
  --bg:              #000000;
  --card-bg:         #050402;
  --price:           #F0F0F0;
  --text-secondary:  #D8D4CA;
  --text-muted:      #8A8478;

  /* Signals */
  --up:              #20C653;
  --down:            #F13D48;

  /* Structure */
  --card-radius:     14px;
  --card-border:     1px solid rgba(143, 103, 36, 0.85);
  --card-glow:       inset 0 0 18px rgba(217, 168, 62, 0.06);
  --page-pad:        13px;

  /* Bottom furniture heights - the FABs key off these */
  --ticker-h:        42px;
  --nav-h:           62px;
  --footer-h:        24px;
  --safe-bottom:     env(safe-area-inset-bottom, 0px);
  --bottom-stack:    calc(var(--ticker-h) + var(--nav-h) + var(--footer-h) + var(--safe-bottom));

  /* Type */
  --serif: 'Cinzel', 'Trajan Pro', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}

/* Light theme (side-menu toggle). The reference design is dark. */
[data-theme='light'] {
  --bg:             #FFFFFF;
  --card-bg:        #FFFDF7;
  --price:          #101010;
  --text-secondary: #4A4438;
  --text-muted:     #7C7568;
  --gold-heading:   #9A7526;
  --card-glow:      inset 0 0 18px rgba(217, 168, 62, 0.05);
}

/* --------------------------------------------------------------- 2. base - */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: var(--sans);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* Long-form content pages get text selection back. */
body.is-readable { -webkit-user-select: text; user-select: text; }

a { color: var(--gold); text-decoration: none; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Tabular figures keep prices from jittering as they tick. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Home screen: lets .breathing-room absorb the leftover height so the ticker,
   nav and footer stay anchored to the bottom (tasks.txt 15 / 31). */
.app-main--flex {
  display: flex;
  flex-direction: column;
  /* auto rather than hidden so the cards stay reachable if a very short
     viewport cannot fit them */
  overflow-y: auto;
}

.app-bottom { flex: 0 0 auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- 3. hero - */
.hero {
  position: relative;
  overflow: hidden;
  height: 23dvh;
  min-height: 186px;
  max-height: 244px;
  background: #000;
  flex: 0 0 auto;
}

/* Warm atmospheric glow behind the right-hand sunrise. */
.hero__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 72% at 80% 78%,
      rgba(255, 196, 77, 0.45) 0%,
      rgba(203, 138, 30, 0.20) 32%,
      rgba(90, 58, 10, 0.10) 58%,
      rgba(0, 0, 0, 0) 78%);
}

/* Thin radial rays, built from a repeating conic gradient and faded out. */
.hero__rays {
  position: absolute;
  left: 80%;
  top: 78%;
  width: 150vw;
  height: 150vw;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 206, 100, 0.50) 0deg 0.75deg,
    rgba(255, 206, 100, 0) 0.75deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, 0.75) 16%, transparent 40%);
  mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, 0.75) 16%, transparent 40%);
  pointer-events: none;
}

.hero__mountains {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  text-align: center;
}

.hero__logo {
  width: clamp(72px, 21vw, 96px);
  height: clamp(72px, 21vw, 96px);
  border-radius: 50%;
  object-fit: cover;
  /* The supplied logo art is already black-backed, so it blends into the sky. */
  filter: drop-shadow(0 0 10px rgba(217, 168, 62, 0.35));
}

.hero__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 4.9vw, 25px);
  letter-spacing: 0.055em;
  line-height: 1.05;
  margin: 2px 0 0;
  color: var(--gold-bright);
  background: linear-gradient(180deg, #F7DC93 0%, #D9A83E 55%, #A97C22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* 'PVT. LTD.' flanked by thin ornamental gold rules (tasks.txt 6). */
.hero__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(74%, 300px);
  margin-top: 3px;
}

.hero__sub span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(10px, 2.9vw, 14px);
  letter-spacing: 0.16em;
  color: var(--gold-heading);
  white-space: nowrap;
}

.hero__sub i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-antique), transparent);
}

.hero__flourish {
  margin-top: 5px;
  width: min(58%, 230px);
  height: 7px;
  opacity: 0.9;
}

/* Compact header used by every page other than the home screen. */
.subheader {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--page-pad);
  background: linear-gradient(180deg, #0B0906 0%, #000 100%);
  border-bottom: 1px solid rgba(143, 103, 36, 0.5);
}

.subheader__logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.subheader__titles { min-width: 0; }

.subheader__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  line-height: 1.1;
}

.subheader__sub {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.subheader__back {
  margin-left: auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 103, 36, 0.6);
  border-radius: 9px;
  color: var(--gold);
}

/* Gold gradient page title banner used by the information pages. */
.page-title {
  margin: var(--page-pad) var(--page-pad) 0;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F4C653 0%, #D9A83E 48%, #A97C22 100%);
  color: #1A1204;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(217, 168, 62, 0.18);
}

/* --------------------------------------------------------------- 4. cards */
.rates {
  padding: 12px var(--page-pad) 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-glow);
}

/* --- 4a. global three-column card (GOLD / SILVER / USDINR) -------------- */
.card--global {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: stretch;
  padding: 11px 4px 12px;
}

.card--global .divider {
  /* Dividers stop short of the card edge (tasks.txt 29). */
  width: 1px;
  margin: 4px 0;
  background: linear-gradient(180deg, transparent, rgba(143, 103, 36, 0.9) 22%,
                              rgba(143, 103, 36, 0.9) 78%, transparent);
}

.gcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 3px;
  min-width: 0;
}

.gcol__head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.03em;
  color: var(--gold-heading);
  /* Scrip names come from the feed, so clip an unexpectedly long one rather
     than letting it stretch the grid column. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gcol__head small {
  font-size: 0.72em;
  letter-spacing: 0;
}

.gcol__price {
  font-size: clamp(19px, 5.5vw, 27px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--price);
  white-space: nowrap;
}

.gcol__hl {
  font-size: clamp(10px, 3vw, 13px);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.gcol__hl .sep { color: var(--gold-antique); margin: 0 3px; }
.hi { color: var(--up); }
.lo { color: var(--down); }

/* --- 4b. costing cards (GOLD COSTING / SILVER COSTING) ------------------ */
.card--costing {
  display: grid;
  /* icon | label | buy | divider | sell - home.js overrides this per card so a
     scrip with a single price, or none of the bullion icons, still balances. */
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
  padding: 11px 11px 12px;
}

.costing__iconwrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.costing__icon {
  width: 46px;
  height: 40px;
  flex: 0 0 auto;
}

.costing__label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(13px, 3.9vw, 17px);
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--gold-heading);
  text-transform: uppercase;
  padding-left: 2px;
  min-width: 0;
  /* Feed names such as 'GOLD 999 WITH GST' wrap instead of squeezing the
     price columns. */
  overflow-wrap: break-word;
}

/* Unit hint under the scrip name, e.g. (Rs/10g). */
.costing__unit {
  display: block;
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-antique);
}

.costing__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.costing__price {
  font-size: clamp(19px, 5.6vw, 27px);
  line-height: 1.1;
  color: var(--price);
  white-space: nowrap;
}

.costing__hl {
  font-size: clamp(10px, 3vw, 13px);
  white-space: nowrap;
}

.card--costing .divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: linear-gradient(180deg, transparent, rgba(143, 103, 36, 0.9) 20%,
                              rgba(143, 103, 36, 0.9) 80%, transparent);
}

/* Price change flash (green up / red down). */
@keyframes flashUp {
  0%   { color: var(--up); }
  70%  { color: var(--up); }
  100% { color: var(--price); }
}
@keyframes flashDown {
  0%   { color: var(--down); }
  70%  { color: var(--down); }
  100% { color: var(--price); }
}
.flash-up   { animation: flashUp   var(--flash-ms, 900ms) ease-out 1; }
.flash-down { animation: flashDown var(--flash-ms, 900ms) ease-out 1; }

/* Shown when the feed responds but publishes no scrips. */
.rates__empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- 4c. dense mode ------------------------------------------------------
   The number of scrips is decided by the broadcast template, so once the feed
   returns enough cards (AppConfig.rateDisplay.denseFrom) the whole block
   tightens up to keep as many as possible above the fold. */
.rates--dense { gap: 8px; padding-top: 9px; }

.rates--dense .card--global  { padding: 8px 4px 9px; }
.rates--dense .card--costing { padding: 7px 10px 8px; }

.rates--dense .gcol__price,
.rates--dense .costing__price { font-size: clamp(17px, 4.9vw, 23px); }

.rates--dense .gcol__head     { font-size: clamp(10px, 2.9vw, 13px); }
.rates--dense .costing__label { font-size: clamp(11.5px, 3.4vw, 15px); }

.rates--dense .gcol__hl,
.rates--dense .costing__hl { font-size: clamp(9.5px, 2.7vw, 12px); }

.rates--dense .costing__icon { width: 36px; height: 31px; }

/* The intentional empty black region (tasks.txt 15). */
.breathing-room {
  flex: 1 1 auto;
  min-height: 40px;
}

/* A long scrip list needs the height more than the negative space does. */
.rates--dense ~ .breathing-room { min-height: 12px; }

/* --------------------------------------------------------- 5. FAB buttons */
.fab {
  position: fixed;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #F7DC93 0%, #E0AE44 45%, #B4831F 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(217, 168, 62, 0.30);
  bottom: calc(var(--bottom-stack) + 16px);
}

.fab:active { transform: scale(0.94); }
.fab--call { left: 8%; }
.fab--whatsapp { right: 8%; }
.fab svg { width: 26px; height: 26px; display: block; }

/* ------------------------------------------------------------- 6. ticker  */
.ticker {
  height: var(--ticker-h);
  background: linear-gradient(180deg, #E4B84A 0%, #D6A93C 52%, #BE9330 100%);
  color: #120C02;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.ticker__text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 100%;
  animation: tickerScroll 26s linear infinite;
}

/* Short announcements are not worth scrolling - centre them like the
   reference screenshot does. */
.ticker--static .ticker__text {
  padding-left: 0;
  animation: none;
  width: 100%;
  text-align: center;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__text { animation: none; padding-left: 0; text-align: center; width: 100%; }
  .hero__rays { display: none; }
}

/* ------------------------------------------------------- 7. bottom navbar */
.navbar {
  height: var(--nav-h);
  background: #000;
  border-top: 1px solid rgba(143, 103, 36, 0.35);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.navbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 1px;
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.1;
  text-align: center;
}

.navbar__item svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.navbar__item span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active tab: a restrained warm highlight, not a bright one (tasks.txt 21). */
.navbar__item.is-active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(217, 168, 62, 0.16) 0%, rgba(217, 168, 62, 0.05) 100%);
  border-radius: 8px;
}
.navbar__item.is-active svg { color: var(--gold-bright); }

/* ----------------------------------------------------------- 8. footer    */
.brandfoot {
  height: var(--footer-h);
  padding: 0 var(--page-pad) var(--safe-bottom);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  color: #E6D9B8;
  opacity: 0.85;
}

.brandfoot span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------- 9. side menu  */
.sidenav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.97);
  transform: translateX(-100%);
  transition: transform 260ms ease;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  visibility: hidden;
}

.sidenav.is-open { transform: translateX(0); visibility: visible; }

.sidenav__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--page-pad);
  border-bottom: 1px solid rgba(143, 103, 36, 0.5);
}

.sidenav__top img { width: 36px; height: 36px; border-radius: 50%; }

.sidenav__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
}

.sidenav__close {
  margin-left: auto;
  width: 34px; height: 34px;
  border: 1px solid rgba(143, 103, 36, 0.6);
  border-radius: 9px;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.sidenav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px var(--page-pad) calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.navgroup {
  border: 1px solid rgba(143, 103, 36, 0.7);
  border-radius: 12px;
  padding: 8px 6px 10px;
  background: var(--card-bg);
}

.navgroup__title {
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-heading);
  text-align: center;
  margin-bottom: 6px;
}

.navgroup__grid {
  /* Flex rather than a fixed 3-column grid: a group whose item count is not a
     multiple of three centres its last row instead of leaving empty cells
     stranded on the right. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.navcell {
  /* Three to a row, accounting for the two 6px gaps between them. */
  flex: 0 0 calc((100% - 12px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 8px 3px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}

.navcell:active { background: rgba(217, 168, 62, 0.12); }
.navcell svg { width: 22px; height: 22px; color: var(--gold); }

/* ---------------------------------------------------- 10. status / notices */
.snackbar {
  position: fixed;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: calc(var(--bottom-stack) + 84px);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(143, 103, 36, 0.85);
  border-radius: 11px;
  background: rgba(10, 8, 4, 0.97);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  transform: translateY(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.snackbar.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.snackbar__msg { flex: 1 1 auto; min-width: 0; }
.snackbar__close { flex: 0 0 auto; color: var(--gold); font-size: 16px; line-height: 1; padding: 0 2px; }

.offline {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 10px var(--page-pad) 0;
  padding: 9px 12px;
  border: 1px solid rgba(241, 61, 72, 0.6);
  border-radius: 10px;
  background: rgba(60, 10, 12, 0.5);
  color: #FFD9DB;
  font-size: 12px;
}

.offline.is-visible { display: flex; }

.offline__retry {
  margin-left: auto;
  border: 1px solid rgba(241, 61, 72, 0.8);
  border-radius: 7px;
  padding: 4px 10px;
  color: #FFD9DB;
  font-size: 11px;
}

.spinner {
  width: 26px; height: 26px;
  margin: 22px auto;
  border: 2px solid rgba(217, 168, 62, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- 11. modal    */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.7);
}

.modal.is-open { display: flex; }

.modal__card {
  width: 100%;
  max-width: 330px;
  background: #FFFFFF;
  color: #17130A;
  border-radius: 12px;
  padding: 18px 16px 10px;
  text-align: center;
}

.modal__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: #6B4E12;
}

.modal__msg { font-size: 13px; line-height: 1.45; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 16px;
}

.modal__actions button {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #A97C22;
  padding: 8px 4px;
  text-transform: uppercase;
}

/* --------------------------------------------- 12. generic content blocks */
.content {
  padding: 12px var(--page-pad) 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  padding: 13px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.panel h1, .panel h2, .panel h3, .panel h4 {
  font-family: var(--serif);
  color: var(--gold-heading);
  margin: 0 0 8px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

.panel p { margin: 0 0 9px; }
.panel p:last-child { margin-bottom: 0; }
.panel ul, .panel ol { margin: 0 0 9px; padding-left: 18px; }
.panel a { color: var(--gold-bright); text-decoration: underline; }

.panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
.panel td, .panel th {
  padding: 6px 8px;
  border: 1px solid rgba(143, 103, 36, 0.4);
  text-align: left;
}
.panel th { color: var(--gold-heading); font-weight: 600; }
.panel img { max-width: 100%; height: auto; }

/* Message cards (Message.html) */
.msgcard {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  padding: 12px 13px;
}

.msgcard__text { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.msgcard__date {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--gold-heading);
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* Key/value rows built by pages/content.js on the information pages. */
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(143, 103, 36, 0.28);
  font-size: 12.5px;
}

.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.kv__v { color: var(--price); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

.disclaimer-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--gold-heading);
  text-decoration: underline;
  padding: 6px 0 2px;
}

/* ------------------------------------------------- 14. calculator pages  */
.rate-strip {
  background: #000;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 11px 13px;
  text-align: center;
}

.rate-strip__label {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

.rate-strip__value {
  font-size: 26px;
  line-height: 1.15;
  color: var(--price);
  margin-top: 3px;
}

.rate-strip__hl { font-size: 11.5px; margin-top: 2px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }

.field > label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

.field input, .field select {
  width: 100%;
  padding: 10px 11px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--price);
  background: #0B0906;
  border: 1px solid rgba(143, 103, 36, 0.75);
  border-radius: 9px;
  -webkit-user-select: text;
  user-select: text;
  appearance: none;
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(217, 168, 62, 0.18);
}

.field select option { background: #0B0906; color: var(--price); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn-gold {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F4C653 0%, #D9A83E 50%, #B4831F 100%);
  color: #17130A;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(217, 168, 62, 0.22);
}

.btn-gold:active { transform: translateY(1px); }

.btn-outline {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(143, 103, 36, 0.85);
  color: var(--gold-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--card-bg);
}

/* Bill table with alternating gold / dark cells (pages.csv row 5). */
.bill { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.bill th {
  background: linear-gradient(180deg, #E0B04A 0%, #C3922E 100%);
  color: #17130A;
  font-family: var(--serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px;
}

.bill td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(143, 103, 36, 0.3);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.bill td:last-child { text-align: right; color: var(--price); }
.bill tr:nth-child(even) td { background: rgba(217, 168, 62, 0.07); }

.bill tr.is-total td {
  background: linear-gradient(180deg, rgba(217, 168, 62, 0.30) 0%, rgba(217, 168, 62, 0.16) 100%);
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 13.5px;
  border-bottom: 0;
}

/* ----------------------------------------------- 15. services / contact  */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  color: var(--text-secondary);
  text-align: center;
}

.tile:active { background: rgba(217, 168, 62, 0.1); }
.tile svg { width: 30px; height: 30px; color: var(--gold); }

.tile__label {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gold-heading);
  text-transform: uppercase;
}

.tile__desc { font-size: 10.5px; line-height: 1.35; color: var(--text-muted); }

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  color: var(--text-secondary);
  width: 100%;
  text-align: left;
}

.contact-row svg { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; }
.contact-row__k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.contact-row__v { font-size: 13px; color: var(--price); overflow-wrap: anywhere; }

/* --------------------------------------------------- 16. tiny screens    */
@media (max-height: 660px) {
  .hero { min-height: 150px; height: 20dvh; }
  :root { --nav-h: 56px; --ticker-h: 38px; }
  .rates { gap: 10px; }
}

@media (max-width: 340px) {
  :root { --page-pad: 9px; }
  .navbar__item { font-size: 9.5px; }
  .costing__icon { width: 38px; height: 34px; }
}