/* PreciousCalc branded header + application navigation */
body main{
  padding-top:0;
}

/* Desktop: align the placard with the calculator workspace, not the sidebar. */
#preciousBrandHeader{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  column-gap:18px;
  align-items:center;
  width:100%;
  padding:10px 0 8px;
  margin:0 auto;
}

#preciousBrandHeader .brand-banner-link{
  grid-column:2;
  display:block;
  width:min(55%,490px);
  margin:0;
  line-height:0;
}

#preciousBrandHeader .brand-banner{
  display:block;
  width:100%;
  height:auto;
}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  color:#202124;
  font-size:28px;
  line-height:1;
  padding:8px;
  cursor:pointer;
}

body[data-metal] .metal-tabs{margin-top:0}

.app-shell{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.app-content{min-width:0}
.site-sidebar{position:sticky;top:14px;padding:10px 8px 12px 0}
.site-sidebar nav{display:block}
.nav-section{padding:8px 0 12px;border-bottom:1px solid #d9dde3}
.nav-section:last-child{border-bottom:0}
.nav-heading{padding:0 10px 5px;color:#7a828d;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.site-sidebar a{display:block;padding:7px 10px;border-radius:7px;color:#3f4650;text-decoration:none;font-size:14px;line-height:1.25}
.site-sidebar a:hover,.site-sidebar a:focus{background:#e7e9ec;text-decoration:none}
.site-sidebar a[aria-current="page"]{background:#dedfe2;color:#202124;font-weight:700}
.sidebar-scrim{display:none}

/* Mobile/tablet: hamburger has a fixed home at the upper-left; placard remains centered. */
@media(max-width:760px){
  body main{padding-top:2px}
  #preciousBrandHeader{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:6px;
    align-items:center;
    padding:4px 0 6px;
  }
  .menu-toggle{
    display:block;
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  #preciousBrandHeader .brand-banner-link{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    width:min(100%,430px);
  }
  .app-shell{display:block}
  .site-sidebar{
    position:fixed;
    z-index:1200;
    top:0;left:0;bottom:0;
    width:min(290px,84vw);
    padding:18px 14px;
    background:#f7f8f9;
    box-shadow:8px 0 24px rgba(0,0,0,.16);
    transform:translateX(-105%);
    transition:transform .2s ease;
    overflow-y:auto;
  }
  body.menu-open .site-sidebar{transform:translateX(0)}
  .sidebar-scrim{position:fixed;z-index:1100;inset:0;background:rgba(0,0,0,.28)}
  body.menu-open .sidebar-scrim{display:block}
  body.menu-open{overflow:hidden}
  .nav-heading{font-size:12px}
  .site-sidebar a{padding:9px 10px;font-size:15px}
}


/* Planned destinations remain visible without behaving like links. */
.site-sidebar .nav-disabled{
  display:block;
  padding:7px 10px;
  border-radius:7px;
  color:#a1a7b0;
  font-size:14px;
  line-height:1.25;
  cursor:default;
  user-select:none;
}
@media(max-width:760px){
  .site-sidebar .nav-disabled{padding:9px 10px;font-size:15px}
}

/* Desktop market rail */
@media(min-width:1100px){
  body main{max-width:1235px}
  #preciousBrandHeader{
    grid-template-columns:180px minmax(0,684px) 255px;
  }
  .app-shell{
    grid-template-columns:180px minmax(0,684px) 255px;
  }
}
@media(max-width:1099px){.market-rail{display:none}}


/* Shared MARKETS rail — 2026-10-02 */
@media(min-width:1100px){
  .app-shell{grid-template-columns:180px minmax(0,684px) 255px}
}
.market-rail{display:none}
@media(min-width:1100px){
  .market-rail{display:block;min-width:0}
}
.market-panel{
  background:#fff;
  border:1px solid #cfd5dd;
  border-radius:12px;
  padding:14px 15px 12px;
  box-shadow:0 3px 12px rgba(32,33,36,.045);
}
.market-panel-head{padding-bottom:9px}
.market-panel-title{font-size:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#4e5661}
.market-panel-updated{margin-top:5px;font-size:12px;color:#6f7782;line-height:1.35}
.market-columns,.market-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
.market-columns{border-bottom:1px solid #e1e4e8;padding:5px 0 6px}
.market-column-heading{appearance:none;border:0;background:transparent;padding:0;font:700 11px/1.25 inherit;letter-spacing:.045em;text-transform:uppercase;color:#6a727d;cursor:pointer}
.market-column-heading:hover,.market-column-heading.is-active{color:#202124}
.market-heading-name{text-align:left}
.market-heading-price{text-align:right}
.market-row{padding:7px 0}
.market-name{font-size:14px;color:#353b44}
.market-quote{text-align:right;white-space:nowrap}
.market-price{font-size:14px;font-weight:400;color:#353b44}
.market-unit{font-size:13px;font-weight:600;color:#626a75;margin-left:2px}
.market-panel-status{font-size:12px;color:#8a919b;padding:10px 0 2px}


/* Shared CURRENCIES panel — 2026-10-03 */
.market-rail{display:none}
@media(min-width:1100px){
  .market-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
}
.currency-panel-head{padding-bottom:9px}
.currency-base-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;margin-top:9px}
.currency-base-row label{font-size:11px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:#6a727d}
.currency-base-select{
  width:100%;min-width:0;padding:5px 7px;border:1px solid #cfd5dd;border-radius:7px;
  background:#fff;color:#353b44;font:600 12px/1.25 inherit;
}
.currency-base-select:focus{outline:2px solid rgba(66,133,244,.22);outline-offset:1px}
.currency-row .currency-name{font-weight:600}


/* Market + Currency panel readability refinements — 2026-10-03 */
.market-row:nth-child(even){background:#f3f8f3}
.currency-row .currency-name{font-weight:400}

/* Keep the local base control compact; it should read as a control, not dominate the panel. */
.currency-base-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:7px;
}
.currency-base-select{
  width:auto;
  max-width:150px;
  padding:4px 24px 4px 7px;
  font-weight:400;
  font-size:12px;
}


/* Currency panel refinement 2 — 2026-10-03 */
.market-row:nth-child(even){background:#e6f1e6}
.currency-base-row{justify-content:space-between}
.currency-base-select{margin-left:auto}

/* Shared live-market freshness status — 2026-10-03 */
.site-header{position:relative}
.shared-market-status{
  margin-left:auto;
  align-self:center;
  padding:0 18px;
  color:#68717c;
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  text-align:right;
}
.shared-market-status-label{font-weight:400}
.shared-market-status-time{font-weight:600;color:#4f5863}
.currency-panel-head{padding-bottom:6px}
@media(max-width:760px){.shared-market-status{display:none}}


/* Coordinated desktop layout + market rail pass — 2026-10-03 */

/* Shared timestamp belongs to the live-data rail, above both panels. */
.shared-market-status{
  margin:0 0 -5px 0;
  padding:0 2px;
  width:100%;
  color:#68717c;
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  text-align:right;
  align-self:auto;
}
.shared-market-status-label{font-weight:400}
.shared-market-status-time{font-weight:600;color:#4f5863}

/* Currency table: readable name first, then ISO code, then rate. */
.currency-columns,
.currency-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px 92px;
  column-gap:10px;
  align-items:center;
}
.currency-columns .market-column-heading,
.currency-row > *{min-width:0}
.currency-heading-name{text-align:left}
.currency-heading-code{
  text-align:left;
  cursor:default;
}
.currency-heading-rate{text-align:right}
.currency-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:400;
}
.currency-code{
  color:#5f6874;
  font-size:13px;
  white-space:nowrap;
}
.currency-rate{text-align:right;justify-content:flex-end}

/* Wider, consistent live-data rail. */
@media(min-width:1100px){
  .market-rail{
    width:390px;
    min-width:390px;
  }
  .market-panel{
    width:100%;
    box-sizing:border-box;
  }
}

/* On genuinely wide desktops, anchor the application toward the left.
   Keep a comfortable outer gutter; surplus width remains on the right. */
@media(min-width:1450px){
  .page-shell,
  .site-shell,
  .app-shell,
  .layout-shell,
  main{
    margin-left:28px;
    margin-right:auto;
  }
}

/* Preserve the existing compact/mobile behavior. */
@media(max-width:1099px){
  .shared-market-status{display:none}
}


/* Final desktop geometry for the wider information rail. */
@media(min-width:1100px){
  body main{max-width:1290px}
  #preciousBrandHeader{
    grid-template-columns:180px minmax(0,684px) 390px;
  }
  .app-shell{
    grid-template-columns:180px minmax(0,684px) 390px;
  }
}

/* Left-anchor the full application on wide screens while retaining a gutter. */
@media(min-width:1450px){
  body main{
    margin-left:28px;
    margin-right:auto;
  }
  .app-shell{
    margin-left:0;
    margin-right:0;
  }
}


/* Final rail sizing/alignment refinement — 2026-10-03 */
@media(min-width:1100px){
  body main{max-width:1265px}
  #preciousBrandHeader{
    grid-template-columns:180px minmax(0,684px) 365px;
  }
  .app-shell{
    grid-template-columns:180px minmax(0,684px) 365px;
  }
  .market-rail{
    width:365px;
    min-width:365px;
    position:relative;
    top:-18px;
  }
  .shared-market-status{
    width:100%;
    box-sizing:border-box;
    margin:0 0 -4px 0;
    padding:0;
    text-align:right;
    align-self:stretch;
  }
}


/* Panel alignment + shared status refinement — 2026-10-03 */
@media(min-width:1100px){
  /* Match the calculator's thin top accent so the rail starts on the same visual line. */
  .market-panel{
    border-top:4px solid #7f9d78;
  }

  /* The status spans the rail width; label starts at the left edge.
     This leaves the full remaining line for variable date/time text. */
  .shared-market-status{
    display:flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:4px;
    width:100%;
    box-sizing:border-box;
    margin:0 0 8px 0;
    padding:0;
    text-align:left;
  }

  /* Undo the earlier lift: the new accent band provides the visual alignment. */
  .market-rail{
    top:0;
  }
}


/* Unified card alignment after retiring core metal tabs — 2026-10-04 */
@media(min-width:1100px){
  .market-rail{
    position:relative;
    top:0;
  }

  /* Shared freshness label occupies the open space above the rail without
     changing the rail's vertical starting point. */
  .shared-market-status{
    position:absolute;
    left:0;
    right:0;
    top:-27px;
    display:flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:4px;
    width:auto;
    margin:0;
    padding:0;
    text-align:left;
    white-space:nowrap;
  }

  /* Same geometry as the calculator cards; green remains the rail identity. */
  .market-panel{
    border-top:4px solid #7f9d78;
  }
}


/* Unified Metals / Currencies column headings — 2026-10-04 */
.market-columns .market-column-heading{
  color:#68717c;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  text-transform:uppercase;
  line-height:1.2;
}
.market-columns button.market-column-heading{
  font-family:inherit;
}
.currency-heading-code{
  color:#68717c;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  text-transform:uppercase;
}


/* Shared CRYPTO panel — 2026-10-04 */
.crypto-panel-head{padding-bottom:6px}
.crypto-columns,
.crypto-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px 112px;
  column-gap:10px;
  align-items:center;
}
.crypto-columns .market-column-heading,
.crypto-row > *{min-width:0}
.crypto-heading-name{text-align:left}
.crypto-heading-code{
  text-align:left;
  cursor:default;
  color:#68717c;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  text-transform:uppercase;
}
.crypto-heading-price{text-align:right}
.crypto-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:400;
}
.crypto-code{
  color:#5f6874;
  font-size:13px;
  white-space:nowrap;
}
.crypto-price{text-align:right;justify-content:flex-end}