/* ─────────────────────────────────────────────────────────────────────────────
   SIP GLOBAL — Commodity reference
───────────────────────────────────────────────────────────────────────────── */

.ref-head {
  padding      : calc(var(--nav-height) + var(--space-xl)) 0 var(--space-lg);
  background   : var(--color-navy);
  color        : var(--color-white);
}

.ref-crumbs {
  font-size     : var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity       : 0.6;
  margin-bottom : var(--space-sm);
}

.ref-crumbs a { color: var(--color-blue-bright); text-decoration: none; }
.ref-crumbs span { padding: 0 0.4em; }

.ref-title {
  font-size     : var(--text-2xl);
  letter-spacing: -0.02em;
  margin        : 0 0 var(--space-sm);
}

.ref-standfirst {
  font-size  : var(--text-md);
  line-height: 1.6;
  opacity    : 0.82;
  margin     : 0;
}

.ref-body { padding: var(--space-xl) 0; }
.ref-block { margin: 0 0 var(--space-xl); }

.ref-block__title {
  font-size     : var(--text-lg);
  letter-spacing: -0.01em;
  margin        : 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom : 2px solid var(--color-navy);
}

.ref-block__lede {
  font-size  : var(--text-base);
  line-height: 1.7;
  opacity    : 0.78;
  margin     : 0 0 var(--space-md);
}

.ref-sys {
  margin      : 0 0 var(--space-sm);
}

.ref-sys__head {
  cursor      : pointer;
  list-style  : none;
  display     : flex;
  align-items : center;
  gap         : var(--space-sm);
  padding     : 10px 12px;
  background  : var(--term-surface, rgba(25, 50, 68, 0.04));
  border      : 1px solid var(--term-border, rgba(25, 50, 68, 0.14));
  border-left : 3px solid var(--term-accent);
}

.ref-sys__head::-webkit-details-marker { display: none; }

.ref-sys__head .ref-sys__name { flex: 1 1 auto; margin: 0; }

.ref-sys__count {
  font-size : var(--text-xs);
  opacity   : 0.6;
  flex      : 0 0 auto;
}

.ref-sys__head::after {
  content       : 'Show \002B';
  flex          : 0 0 auto;
  font-size     : var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height   : 1;
  color         : var(--term-accent);
  font-weight   : var(--weight-semibold, 600);
  border        : 1px solid var(--term-accent);
  padding       : 5px 8px;
}

.ref-sys[open] .ref-sys__head::after { content: 'Hide \2212'; }
.ref-sys__head:hover { background: var(--term-bg, #fff); }
.ref-sys[open]  { padding-bottom: var(--space-md); }
.ref-sys > .ref-sys__meta { margin-top: var(--space-sm); }

.ref-sys__name {
  font-size     : var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--color-blue);
  margin        : 0 0 4px;
}

.ref-sys__meta {
  font-size    : var(--text-xs);
  opacity      : 0.65;
  margin       : 0 0 var(--space-sm);
  display      : flex;
  flex-wrap    : wrap;
  gap          : 0 var(--space-sm);
}

.ref-sys__meta span + span::before { content: '/ '; opacity: 0.5; }

.ref-scroll { overflow-x: auto; }

.ref-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : var(--text-sm);
}

.ref-table thead th {
  text-align    : left;
  font-size     : var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding       : 0 var(--space-sm) var(--space-xs) 0;
  border-bottom : 1px solid rgba(25, 50, 68, 0.28);
  opacity       : 0.7;
  white-space   : nowrap;
}

.ref-table tbody th {
  text-align   : left;
  font-weight  : var(--weight-bold);
  width        : 26%;
  padding      : var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: 1px solid rgba(25, 50, 68, 0.1);
  vertical-align: top;
}

.ref-table tbody td {
  padding      : var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: 1px solid rgba(25, 50, 68, 0.1);
  line-height  : 1.65;
  vertical-align: top;
}

.ref-table--tight tbody th { width: 34%; white-space: nowrap; }
.ref-table--tight tbody th,
.ref-table--tight tbody td { padding: 7px var(--space-sm) 7px 0; }

.ref-code {
  display     : inline-block;
  color       : var(--color-blue);
  margin-right: 0.5em;
}

.ref-gname { opacity: 0.7; font-weight: 400; }

.ref-onrequest {
  font-size   : var(--text-base);
  line-height : 1.65;
  margin      : var(--space-sm) 0 0;
  padding     : var(--space-sm) 0 0 var(--space-sm);
  border-left : 2px solid var(--color-blue);
  opacity     : 0.8;
}

/* Timing grid --------------------------------------------------------------- */

.ref-key {
  display  : flex;
  gap      : var(--space-md);
  font-size: var(--text-xs);
  margin   : 0 0 var(--space-sm);
}

.ref-key__item { display: inline-flex; align-items: center; gap: 0.5em; }

.ref-swatch {
  width : 14px;
  height: 14px;
  display: inline-block;
}

.ref-swatch--harvest { background: var(--color-blue); }
.ref-swatch--arrival { background: rgba(0, 99, 168, 0.26); }

.ref-grid-table {
  width          : 100%;
  table-layout   : fixed;
  border-collapse: collapse;
  font-size      : var(--text-sm);
}

.ref-grid-table thead th {
  font-size     : var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity       : 0.7;
  padding       : 0 0 var(--space-xs);
  border-bottom : 1px solid rgba(25, 50, 68, 0.28);
  text-align    : center;
  width         : 3.2%;
}

.ref-grid-table thead th:first-child,
.ref-grid-table tbody th { text-align: left; width: 15%; white-space: nowrap; }

.ref-grid-table tbody th {
  padding      : 6px var(--space-sm) 6px 0;
  border-bottom: 1px solid rgba(25, 50, 68, 0.1);
  font-weight  : var(--weight-bold);
}

.ref-grid-table tbody td {
  border-bottom: 1px solid rgba(25, 50, 68, 0.1);
  border-right : 1px solid rgba(25, 50, 68, 0.06);
  height       : 26px;
  padding      : 0;
}

.ref-grid-table tbody td.is-harvest { background: var(--color-blue); }
.ref-grid-table tbody td.is-arrival { background: rgba(0, 99, 168, 0.26); }
.ref-grid-table tbody td.is-both {
  background: linear-gradient(135deg, var(--color-blue) 50%, rgba(0, 99, 168, 0.26) 50%);
}

.ref-grid-table .ref-window {
  width      : 24%;
  text-align : left;
  padding    : 6px 0 6px var(--space-sm);
  font-size  : var(--text-xs);
  line-height: 1.55;
  border-right: none;
}

.ref-note { display: block; opacity: 0.6; }

/* Enquiry ------------------------------------------------------------------- */

.ref-enquiry {
  border-top : 1px solid rgba(25, 50, 68, 0.14);
  padding-top: var(--space-lg);
}

.ref-form { max-width: 720px; }
.ref-enquiry .ref-block__lede { max-width: 720px; }

.ref-enquiry--wide {
  border-top : none;
  padding-top: 0;
}

.ref-enquiry--wide .ref-form,
.ref-enquiry--wide .ref-block__lede { max-width: none; }

.ref-markets__label { margin-top: var(--space-lg); }

.ref-markets {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : flex;
  flex-wrap : wrap;
  gap       : var(--space-xs) var(--space-sm);
}

.ref-markets a {
  display        : inline-block;
  font-size      : var(--text-xs);
  padding        : 5px 10px;
  border         : 1px solid rgba(25, 50, 68, 0.18);
  color          : var(--color-navy);
  text-decoration: none;
}

.ref-markets a:hover { border-color: var(--color-blue); color: var(--color-blue); }


/* Index --------------------------------------------------------------------- */

.ref-index {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap       : var(--space-md);
}

.ref-index a {
  display        : block;
  height         : 100%;
  padding        : var(--space-md);
  border         : 1px solid rgba(25, 50, 68, 0.14);
  text-decoration: none;
  color          : var(--color-navy);
  transition     : border-color 0.15s ease, transform 0.15s ease;
}

.ref-index a:hover {
  border-color: var(--color-blue);
  transform   : translateY(-2px);
}

.ref-index__title {
  display    : block;
  font-size  : var(--text-md);
  font-weight: var(--weight-bold);
  margin     : 0 0 var(--space-xs);
}

.ref-index__desc {
  display    : block;
  font-size  : var(--text-sm);
  line-height: 1.65;
  opacity    : 0.75;
  margin     : 0 0 var(--space-sm);
}

.ref-index__count {
  display       : block;
  font-size     : var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : var(--color-blue);
}

@media (max-width: 860px) {
  .ref-head { padding-top: calc(var(--nav-height) + var(--space-lg)); }
  .ref-grid-table { min-width: 640px; }
  .ref-table { min-width: 480px; }
}

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

/* Share --------------------------------------------------------------------- */

.ref-share {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : var(--space-sm);
  margin     : var(--space-xl) 0 0;
  padding    : var(--space-md) 0 0;
  border-top : 1px solid rgba(25, 50, 68, 0.14);
}

.ref-share__label {
  font-size     : var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity       : 0.6;
  margin-right  : var(--space-xs);
}

.ref-share__btn {
  font           : inherit;
  font-size      : var(--text-xs);
  padding        : 7px 14px;
  background     : none;
  border         : 1px solid rgba(25, 50, 68, 0.22);
  color          : var(--color-navy);
  text-decoration: none;
  cursor         : pointer;
  transition     : border-color 0.15s ease, color 0.15s ease;
}

.ref-share__btn:hover {
  border-color: var(--color-blue);
  color       : var(--color-blue);
}

.ref-share__btn.mkt-share__btn--copied {
  border-color: var(--color-blue);
  color       : var(--color-blue);
}

.ref-faq {
  margin: 0 0 var(--space-xs);
}

.ref-faq__head {
  cursor      : pointer;
  list-style  : none;
  display     : flex;
  align-items : center;
  gap         : var(--space-sm);
  padding     : 4px 12px;
  background  : var(--term-surface, rgba(25, 50, 68, 0.04));
  border      : 1px solid var(--term-border, rgba(25, 50, 68, 0.14));
  border-left : 3px solid var(--term-accent);
}

.ref-faq__head::-webkit-details-marker { display: none; }

.ref-faq__head::after {
  content       : 'Show \002B';
  flex          : 0 0 auto;
  font-size     : var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height   : 1;
  color         : var(--term-accent);
  font-weight   : var(--weight-semibold, 600);
  border        : 1px solid var(--term-accent);
  padding       : 5px 8px;
}

.ref-faq[open] .ref-faq__head::after { content: 'Hide \2212'; }
.ref-faq__head:hover { background: var(--term-bg, #fff); }

.ref-faq__q {
  flex          : 1 1 auto;
  margin        : 0;
  padding       : var(--space-sm) 0;
  font-size     : var(--text-base);
  font-weight   : 600;
  color         : var(--color-navy);
  border-bottom : none;
}

.ref-faq__a {
  font-size    : var(--text-base);
  line-height  : 1.7;
  margin       : 0;
  padding      : var(--space-md) 12px var(--space-md);
  border       : 1px solid var(--term-border, rgba(25, 50, 68, 0.14));
  border-top   : none;
}

.ref-cites {
  list-style: none;
  margin    : 0;
  padding   : 0;
  border-top: 1px solid rgba(25, 50, 68, 0.14);
}

.ref-cites__item {
  display              : grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap                  : var(--space-md);
  align-items          : baseline;
  padding              : var(--space-sm) 0;
  border-bottom        : 1px solid rgba(25, 50, 68, 0.14);
  font-size            : var(--text-sm);
}

.ref-cites__item span { color: rgba(25, 50, 68, 0.7); }

@media (max-width: 640px) {
  .ref-cites__item { grid-template-columns: 1fr; gap: 4px; }
}

.ref-spec {
  list-style: none;
  margin    : 0;
  padding   : 0;
  border-top: 1px solid rgba(25, 50, 68, 0.14);
}

.ref-spec__item {
  display              : grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap                  : var(--space-md);
  align-items          : baseline;
  padding              : var(--space-sm) 0;
  border-bottom        : 1px solid rgba(25, 50, 68, 0.14);
  font-size            : var(--text-sm);
}

.ref-spec__key {
  font-size     : var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : rgba(25, 50, 68, 0.6);
}

.ref-spec__val strong {
  font-weight        : 600;
  color              : var(--color-navy);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .ref-spec__item { grid-template-columns: 1fr; gap: 4px; }
}

/* Related markets ------------------------------------------------------------ */

.rel-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap       : 1px;
}

.rel-list a {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
  padding        : var(--space-sm) 0;
  border-top     : 1px solid rgba(25, 50, 68, 0.14);
  text-decoration: none;
  color          : inherit;
}

.rel-list a:hover .rel-grade { color: var(--color-blue); }

.rel-grade {
  font-size  : var(--text-sm);
  font-weight: var(--weight-semibold);
}

.rel-region {
  font-size     : var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity       : 0.6;
}

/* Section tabs -------------------------------------------------------------- */

.ref-tabs {
  position     : sticky;
  top          : var(--head-h, 0px);
  z-index      : 20;
  margin       : 0 0 var(--space-lg);
  background   : var(--term-bg, #fff);
  border-bottom: 1px solid var(--term-border, rgba(25, 50, 68, 0.14));
}

.ref-tabs__inner {
  display        : flex;
  gap            : 2px;
  overflow-x     : auto;
  scrollbar-width: none;
}

.ref-tabs__inner::-webkit-scrollbar { display: none; }

.ref-tab {
  flex           : 0 0 auto;
  font-size      : var(--text-xs);
  letter-spacing : 0.12em;
  text-transform : uppercase;
  text-decoration: none;
  color          : var(--term-text, inherit);
  opacity        : 0.62;
  padding        : 10px 14px;
  border         : 1px solid transparent;
  border-bottom  : 2px solid transparent;
  margin-bottom  : -1px;
  cursor         : pointer;
  white-space    : nowrap;
}

.ref-tab:hover { opacity: 1; background: var(--term-surface, rgba(0, 0, 0, 0.03)); }

.ref-tab.is-active {
  opacity            : 1;
  color              : var(--term-accent);
  background         : var(--term-surface, rgba(0, 0, 0, 0.03));
  border-color       : var(--term-border, rgba(25, 50, 68, 0.14));
  border-bottom-color: var(--term-accent);
  font-weight        : var(--weight-semibold, 600);
}

.ref-block[hidden] { display: none !important; }
.ref-block { scroll-margin-top: calc(var(--head-h, 0px) + 56px); }
.ref-block p:not([class]) { font-size: var(--text-base); line-height: 1.7; }