/* AragoCor Minerals — the specification sheets
 *
 * The five documents generated by tools/build-grade-sheets.py: the master
 * technical data sheet and the four grade sheets. They render inside
 * <doc-page>, so on screen they are one continuous sheet on a desk and at
 * print they paginate as Letter pages; document-actions.css supplies the
 * action bar above them and the phone rules that stack their tables.
 *
 * The type scale is the technical briefs' — this is the same document
 * family — with a second, larger scale below 700px, where the sheet is the
 * width of the phone rather than 8.5 inches and print sizes land at roughly
 * half the size they were drawn at.
 */

:root {
  --gs-navy: 213 70% 14%;
  --gs-accent: 184 78% 29%;
  --gs-ink: 215 45% 12%;
  --gs-muted: 215 20% 40%;
  --gs-line: 210 25% 85%;
  --gs-wash: 213 40% 97%;
}

* { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-sizing: border-box; }

body { margin: 0; font-family: "Inter Tight", sans-serif; color: hsl(var(--gs-ink)); }
main { display: block; }

h1, h2 { font-family: "Fraunces", serif; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; }
a { color: hsl(var(--gs-accent)); }

/* The same floor site-chrome.css puts on the rest of the site. These pages do
   not load it, and CaCO3 is in every table here: `font-size: smaller` is
   relative, so inside the small tracked notes the subscript reached 9.2px. */
sub,
sup { font-size: max(0.83em, 10px); }

/* ---------- Masthead ---------- */

.gs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid hsl(var(--gs-navy));
}
.gs-head__brand { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; color: hsl(var(--gs-navy)); }
.gs-head__id { display: flex; flex-wrap: wrap; gap: 0 14px; }
.gs-head__id span { white-space: nowrap; }
.gs-head__id,
.gs-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--gs-muted));
}
.gs-kicker { margin: 22px 0 0; color: hsl(var(--gs-accent)); }
.gs-title { font-size: 30px; line-height: 1.15; margin-top: 6px; }
.gs-subtitle { margin-top: 8px; font-size: 14px; color: hsl(var(--gs-muted)); }

/* ---------- Headline figures ---------- */

.gs-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.gs-kpis li {
  padding: 10px 12px;
  border: 1px solid hsl(var(--gs-line));
  border-radius: 6px;
  break-inside: avoid;
}
.gs-kpi__v {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 20px;
  line-height: 1.15;
  color: hsl(var(--gs-navy));
}
.gs-kpi__k {
  display: block;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: hsl(var(--gs-muted));
}

/* ---------- Sections ---------- */

.gs-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 10px;
  padding-top: 12px;
  border-top: 1px solid hsl(var(--gs-line));
  font-size: 17px;
  color: hsl(var(--gs-navy));
  break-after: avoid;
}
.gs-section__n {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: hsl(var(--gs-accent));
}
.gs-section--minor { font-size: 15px; }

.gs-caption {
  margin: 0 0 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--gs-muted));
}

.gs-list { margin: 0; padding: 0; list-style: none; }
.gs-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  break-inside: avoid;
}
.gs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: hsl(var(--gs-accent));
}

.gs-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: hsl(var(--gs-muted));
}

.gs-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--gs-line));
  border-left: 3px solid hsl(var(--gs-accent));
  border-radius: 0 6px 6px 0;
  background: hsl(var(--gs-wash));
  break-inside: avoid;
}
.gs-panel__t {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--gs-navy));
  margin-bottom: 5px;
}
.gs-panel p { margin: 0; font-size: 12.5px; color: hsl(var(--gs-muted)); }

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12.5px;
  break-inside: avoid;
}
thead { background: hsl(var(--gs-wash)); }
th, td {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 1px solid hsl(var(--gs-line));
  vertical-align: top;
}
th {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--gs-navy));
}
tbody tr td:first-child { color: hsl(var(--gs-navy)); font-weight: 500; }

/* ---------- Closing blocks ---------- */

.gs-cta {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 6px;
  background: hsl(var(--gs-navy));
  color: hsl(210 30% 92%);
  break-inside: avoid;
}
.gs-cta__t { font-family: "Fraunces", serif; font-size: 17px; color: #fff; }
.gs-cta p { margin: 6px 0 0; font-size: 12.5px; }
.gs-cta a { color: hsl(43 46% 73%); }
.gs-cta__l { font-family: "JetBrains Mono", monospace; font-size: 11.5px; }
/* The phone number, the email and the contact link are what this document is
   asking a reader to act on, and they sit on a line of their own rather than
   inside a sentence — so they get a real touch target rather than the 16px
   line box an inline link would have. A flex row rather than a run of text:
   they sit side by side where there is room and stack where there is not,
   without a separator to strand at the end of a wrapped line. */
.gs-cta__l { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.gs-cta__l a { display: inline-flex; align-items: center; }
@media screen { .gs-cta__l a { min-height: 44px; } }
.gs-support .gs-cta__l { margin-top: 2px; }

.gs-related { margin-top: 16px; font-size: 12.5px; color: hsl(var(--gs-muted)); }

.gs-legal {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid hsl(var(--gs-line));
  font-size: 10.5px;
  line-height: 1.55;
  color: hsl(var(--gs-muted));
}

.gs-support { margin-top: 18px; }
.gs-support__t {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--gs-navy));
  margin-bottom: 4px;
}
.gs-support p { margin: 0; font-size: 12.5px; color: hsl(var(--gs-muted)); }

footer[slot="footer"] {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid hsl(var(--gs-line));
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--gs-muted));
}

/* ---------- The sheet on a phone ----------
 *
 * Below 900px <doc-page> makes the sheet the width of the viewport, so from
 * here the document is being read at roughly half the width it was drawn for
 * and the print type scale is half the size it was meant to be. These are the
 * screen sizes only: the printed sheet, and the PDF the action bar links to,
 * keep the scale above.
 */

@media screen and (max-width: 900px) {
  .gs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  footer[slot="footer"] { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 700px) {
  p, .gs-list li { font-size: 15px; }
  .gs-subtitle { font-size: 15px; }
  .gs-section { font-size: 19px; }
  .gs-kicker, .gs-head__id, .gs-section__n, .gs-caption,
  .gs-panel__t, .gs-support__t { font-size: 11.5px; letter-spacing: 0.14em; }
  .gs-kpi__v { font-size: 22px; }
  .gs-kpi__k { font-size: 11px; letter-spacing: 0.1em; }
  table { font-size: 14px; }
  th { font-size: 11px; }
  .gs-note { font-size: 12.5px; }
  .gs-panel p, .gs-related, .gs-support p { font-size: 14px; }
  .gs-cta__t { font-size: 19px; }
  .gs-cta p { font-size: 14px; }
  .gs-cta__l { font-size: 13px; }
  .gs-legal { font-size: 12px; }
  footer[slot="footer"] { font-size: 11px; letter-spacing: 0.1em; }
}

@media screen and (max-width: 380px) {
  .gs-kpis { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 430px) {
  .gs-title { font-size: 26px; }
}

/* ---------- Legal footer and skip link ----------
 *
 * These two carry the shared chrome's class names deliberately: it is what
 * lets document-actions.css hide them when the /resources reader frames the
 * page, and what puts this footer's UPDATED stamp under the same audit as
 * every other footer on the site. Styled here rather than by loading 40KB of
 * site-chrome.css for two links.
 */

.ac-skip {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 4px;
  background: #F7F4ED;
  color: #0E3540;
  font: 700 13px/1.2 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
}
.ac-skip:focus { transform: translateY(0); }

.ac-foot { background: #0E3540; color: rgba(247, 244, 237, 0.75); font: 400 13.5px/1.65 system-ui, sans-serif; }
.ac-foot__bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 40px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  font-size: 12.5px;
}
.ac-foot__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ac-foot a {
  color: rgba(247, 244, 237, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ac-foot a:hover, .ac-foot a:focus-visible { color: #F7F4ED; }

@media (max-width: 560px) { .ac-foot__bottom { padding: 20px 20px 32px; } }

doc-page:not(:defined) { visibility: hidden; }
html.doc-fallback doc-page:not(:defined) { visibility: visible; }