/* =========================================================================
   READING PAGES: Info SNBP, Tentang, and the three legal documents.

   These are the pages somebody reads from the top down, so they share one
   layout instead of each inventing a set of cards: a column of prose held
   near 65 characters, its contents beside it on a wide screen, and sections
   told apart by a hairline and the space around it. No tinted boxes, no icon
   tiles. Cobalt appears twice (the countdown and the weight bar) and on the
   button a page ends with.

   Loaded only for assetGroup info, about and legal; see views/layout.php.
   ========================================================================= */

.rd-main {
  max-width: 42rem;
  font-size: .95rem; line-height: 1.7; color: var(--ink-2);
}
.rd-main p { margin: 0 0 .85rem; }
.rd-main b, .rd-main strong { color: var(--ink); font-weight: 700; }
.rd-main a:not(.btn) {
  color: var(--accent-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.rd-main a:not(.btn):hover { text-decoration-color: currentColor; }
/* A button that reads as a link in a sentence (the cookie page's "Tanya
   lagi"). The browser's own button face has to be taken off by hand. */
.rd-linkbtn {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.rd-linkbtn:hover { text-decoration-color: currentColor; }

/* ---- the row of links under the title ---------------------------------
   The page's sections, or the three legal documents. One line; on a phone it
   scrolls sideways rather than wrapping into a block of links. */
.rd-toc, .rd-docs {
  display: flex; gap: 1.4rem; margin: 0 0 2.25rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.rd-toc::-webkit-scrollbar, .rd-docs::-webkit-scrollbar { display: none; }
.rd-toc a, .rd-docs a, .rd-docs span {
  flex: 0 0 auto; padding: .65rem 0; margin-bottom: -1px;
  font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.rd-toc a:hover, .rd-docs a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.rd-docs span { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
/* As wide as the text under it, so its rule and the sections' rules line up. */
.rd-toc, .rd-docs { max-width: 42rem; }
@media (min-width: 992px) { .rd-toc, .rd-docs { max-width: 59rem; } }

/* ---- sections ----------------------------------------------------------
   On a wide screen the title of a section sits in the margin beside it, so
   the page can be scanned down its left edge and the text keeps one measure. */
.rd-sec { scroll-margin-top: 1.5rem; }
.rd-sec + .rd-sec { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.rd-sec > h2 {
  margin: 0 0 1.1rem;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--ink);
}
@media (min-width: 992px) {
  .rd-main { max-width: 59rem; }
  .rd-sec { display: grid; grid-template-columns: 13rem minmax(0, 42rem); column-gap: 4rem; align-items: start; }
  .rd-sec > * { grid-column: 2; min-width: 0; }
  /* Spans every row the section has, however many that is; the rows past the
     last element are empty and take no height. */
  .rd-sec > h2 { grid-column: 1; grid-row: 1 / span 24; margin: 0; }
}
.rd-fine { margin: 1rem 0 0 !important; font-size: .84rem; line-height: 1.6; color: var(--muted); }
.rd-fine + .rd-list { margin-top: 1.6rem; }

/* ---- what is next on the calendar --------------------------------------
   The one figure on the page that changes from day to day. */
.rd-next { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.75rem; }
.rd-next p { margin: 0; display: flex; flex-direction: column; }
.rd-next-n { padding-right: 1.25rem; border-right: 1px solid var(--line-strong); }
.rd-next-n b {
  font-size: clamp(2.6rem, 11vw, 3.4rem); font-weight: 800; line-height: .95;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--accent-ink);
}
.rd-next-n b:only-child { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; }
.rd-next-n span { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.rd-next-t b { font-size: 1.05rem; line-height: 1.35; }
.rd-next-t span { font-size: .88rem; color: var(--muted); }

/* ---- the calendar: date on the left, what happens on the right --------- */
.rd-tl { list-style: none; margin: 0; padding: 0; }
.rd-tl li { padding: .95rem 0; border-top: 1px solid var(--line); }
.rd-tl li:last-child { border-bottom: 1px solid var(--line); }
.rd-tl p { margin: 0; }
.rd-tl-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; margin-bottom: .2rem !important; }
.rd-tl-when b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.rd-tl-when span { font-size: .78rem; color: var(--muted); }
.rd-tl-when span.is-live { color: var(--ok-ink); font-weight: 700; }
.rd-tl-what > b { font-size: .98rem; }
.rd-tl-what p { margin-top: .15rem; font-size: .9rem; line-height: 1.6; }
/* A phase that is over steps back, in ink rather than opacity so it still
   passes contrast. */
.rd-tl .is-lewat, .rd-tl .is-lewat b { color: var(--muted); font-weight: 500; }
.rd-tl .is-lewat .rd-tl-what > b { font-weight: 600; }
@media (min-width: 576px) {
  .rd-tl li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 1.5rem; }
  .rd-tl-when { flex-direction: column; gap: .1rem; margin-bottom: 0 !important; }
}

/* ---- lists of a bold line and a sentence under it ---------------------- */
.rd-list { list-style: none; margin: 0; padding: 0; counter-reset: rd; }
.rd-list > li + li { margin-top: 1.3rem; }
.rd-list > li > b, .rd-pairs b, .rd-items h3 {
  display: block; margin: 0 0 .2rem;
  font-size: .98rem; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--ink);
}
.rd-list p, .rd-pairs p, .rd-items p { margin: 0; }
.rd-list--n > li { position: relative; padding-left: 1.7rem; counter-increment: rd; }
@media (min-width: 576px) { .rd-list--n > li { padding-left: 2.1rem; } }
.rd-list--n > li::before {
  content: counter(rd); position: absolute; left: 0; top: 0;
  font-size: .98rem; font-weight: 800; line-height: 1.45; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rd-items { display: grid; gap: 1.3rem; }

/* Two columns once there is room: the thing, then what to know about it. */
.rd-pairs > div { padding: .95rem 0; border-top: 1px solid var(--line); }
.rd-pairs > div:last-child { border-bottom: 1px solid var(--line); }
/* A list that opens its section starts level with the title beside it; the
   section's own rule is already just above. */
.rd-pairs > div:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 576px) {
  .rd-pairs > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 1.5rem; }
  .rd-pairs b { margin: 0; }
}

/* ---- small figures ----------------------------------------------------- */
.rd-figs { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .7rem 0 0; }
.rd-figs > div { display: flex; flex-direction: column; }
.rd-figs dd {
  margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.rd-figs dt { font-size: .8rem; font-weight: 500; color: var(--muted); }
.rd-figs--lead { gap: .75rem 2.5rem; margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.rd-figs--lead dd { font-size: 1.6rem; }

/* ---- the weight bar: two parts of one whole ---------------------------- */
.rd-split { margin: 0 0 .25rem; }
.rd-split-bar, .rd-split figcaption {
  display: grid; grid-template-columns: calc(var(--k1, 50) * 1%) minmax(0, 1fr); gap: 0 3px;
}
.rd-split-bar { height: .7rem; }
.rd-split-bar i { border-radius: 999px; background: var(--primary); }
.rd-split-bar i + i { background: var(--line-strong); }
.rd-split figcaption { margin-top: .6rem; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.rd-split figcaption span { padding-right: .75rem; }
.rd-split figcaption b { display: block; font-size: .92rem; }

/* ---- questions --------------------------------------------------------- */
.rd-faq details { border-top: 1px solid var(--line); }
.rd-faq details:last-child { border-bottom: 1px solid var(--line); }
.rd-faq details:first-child { border-top: 0; }
.rd-faq details:first-child summary { padding-top: 0; }
.rd-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; cursor: pointer; list-style: none;
  font-size: .96rem; font-weight: 700; line-height: 1.45; color: var(--ink);
}
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary i { flex: 0 0 auto; margin-top: .2rem; font-size: 1rem; color: var(--muted); transition: transform .18s ease; }
.rd-faq details[open] summary i { transform: rotate(45deg); }
.rd-faq summary:hover i { color: var(--ink); }
.rd-faq summary:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; border-radius: .25rem; }
.rd-faq details > p { margin: 0 0 1.1rem; padding-right: 2rem; }
@media (prefers-reduced-motion: reduce) { .rd-faq summary i { transition: none; } }

/* ---- sources ----------------------------------------------------------- */
.rd-src { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.rd-src li { padding: .8rem 0; border-top: 1px solid var(--line); }
.rd-src li:last-child { border-bottom: 1px solid var(--line); }
.rd-src a:not(.btn) { color: var(--ink); font-weight: 700; text-decoration: none; }
.rd-src a:not(.btn):hover { color: var(--accent-ink); }
.rd-src a i { margin-left: .3rem; font-size: .85em; color: var(--muted); }
.rd-src span { display: block; font-size: .86rem; color: var(--muted); }

/* ---- tables ------------------------------------------------------------ */
.rd-table { width: 100%; border-collapse: collapse; }
.rd-table th, .rd-table td { padding: .75rem 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.rd-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.rd-items + .rd-table { margin-top: 1.5rem; }
/* What energy costs and where it comes from. */
.rd-table--price th { font-size: .93rem; font-weight: 600; color: var(--ink); }
.rd-table--price th span { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); }
.rd-table--price td {
  padding-left: 1rem; text-align: right; white-space: nowrap;
  font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink);
}
.rd-table--price td span { font-size: .8rem; font-weight: 500; color: var(--muted); }
.rd-table--price td.is-in { color: var(--ok-ink); }

/* ---- how a page ends --------------------------------------------------- */
.rd-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.rd-cta > div { flex: 1 1 16rem; }
.rd-cta h2 { margin: 0 0 .2rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rd-cta p { margin: 0; font-size: .92rem; color: var(--muted); }
.rd-cta .btn { flex: 0 0 auto; }

/* =========================================================================
   LEGAL DOCUMENTS
   The same sections, closer together: nine short clauses are one text, not
   nine chapters.
   ========================================================================= */
.rd-prose .rd-sec + .rd-sec { margin-top: 2rem; padding-top: 2rem; }
.rd-prose .rd-sec > :last-child { margin-bottom: 0; }
.rd-prose ul:not(.rd-tldr) { margin: 0 0 .95rem; padding-left: 1.15rem; }
.rd-prose ul:not(.rd-tldr) li { margin: 0 0 .4rem; }
.rd-prose ul:not(.rd-tldr) li::marker { color: var(--muted); }
.rd-prose code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .9em; color: var(--ink); background: var(--surface-2); padding: .1rem .35rem; border-radius: .35rem;
}

/* The short version, which every document opens with: the same sentences a
   size up and ruled like a list, instead of a tinted box that reads as an
   advert for the text under it. */
.rd-tldr { list-style: none; margin: 0; padding: 0; }
.rd-tldr li {
  padding: .7rem 0; border-top: 1px solid var(--line);
  font-size: 1.03rem; font-weight: 500; line-height: 1.55; color: var(--ink);
}
.rd-tldr li:first-child { padding-top: 0; border-top: 0; }
.rd-tldr li:last-child { padding-bottom: 0; }

/* A term and what it covers. */
.rd-defs { margin: 0 0 1rem; }
.rd-defs > div { padding: .8rem 0; border-top: 1px solid var(--line); }
.rd-defs > div:last-child { border-bottom: 1px solid var(--line); }
h2 + .rd-defs > div:first-child { padding-top: 0; border-top: 0; }
.rd-defs dt { margin: 0 0 .15rem; font-size: .93rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.rd-defs dd { margin: 0; }
@media (min-width: 576px) {
  .rd-defs > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 1.5rem; }
  .rd-defs dt { margin: 0; padding-top: .05rem; }
}

.rd-ask p { margin: 0; font-size: .9rem; color: var(--muted); }

/* A ruled list that ends its section leaves the closing rule to the section:
   two hairlines a few lines apart read as a box with its sides missing. */
.rd-sec > .rd-pairs:last-child > div:last-child,
.rd-sec > .rd-src:last-child > li:last-child,
.rd-sec > .rd-defs:last-child > div:last-child,
.rd-sec > .rd-table:last-child tbody tr:last-child > * { padding-bottom: 0; border-bottom: 0; }
.rd-sec > .rd-faq:last-child > details:last-child { border-bottom: 0; }
.rd-sec > .rd-faq:last-child > details:last-child:not([open]) summary { padding-bottom: 0; }
.rd-sec > .rd-faq:last-child > details:last-child > p { margin-bottom: 0; }