/* Article page standard (17 Oct 2026) - Mak Kimbong's article pages, in the Kenduri language.
   The bar: aeo-toolchain/article-kit/STANDARD.md. Applied by build-notes/article_kit_apply.py, which marks the article
   section .mk-art-kit and links this file; no other page reads it.
   Wide (1001px+, the site's own grid): the left "Dalam artikel ini" rail stays where the site's rails sit, now numbered
   01, 02 ... like the sections, the section being read marked with the brown bar the other rails use (article-kit.js
   sets aria-current), "Kembali ke atas" under it, then the yellow "Datang makan" ticket; it scrolls on its own if it is
   taller than the screen. Up to 1000px: the rail folds into a santan card right after the answer. Tables sit in a
   santan tile (the dish tiles' colour) that scrolls inside itself; on phones the table keeps its own card view. */

.mk-art-kit { --ak-top: 160px; }
/* a jump lands a heading 180px down (the site's own html scroll-padding-top 84px + its 96px heading scroll margin);
   --ak-top + 24 is where article-kit.js starts calling a section 'current', so the section jumped to is the one marked */
/* a slightly wider rail on laptops: the questions wrap in two lines, not three, so the list and the ticket fit a
   900px-high screen; the text keeps its own measure (the column is wider than the paragraphs) */
@media (min-width: 1201px) { .mk-art-kit .mk-art-grid { grid-template-columns: 290px minmax(0, 1fr); } }

/* ---- the rail (wide screens) ---- */
.mk-art-kit .mk-art-rail {
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-left: -4px;
  padding: 0 0 4px 4px;     /* room for the brown bar that sits over the list's rule */
}
.mk-art-kit .ak-toc__label { margin: 0 0 14px; opacity: .78; }
.mk-art-kit .ak-toc__list { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: mk; }
.mk-art-kit .ak-toc__list li { counter-increment: mk; }
.mk-art-kit .ak-toc__list a { position: relative; display: flex; gap: 10px; align-items: baseline; }
.mk-art-kit .mk-art-rail .ak-toc__list a { padding: 6px 0 6px 16px; font-size: 14.5px; line-height: 1.32; }
.mk-art-kit .ak-toc__list a::before {
  content: counter(mk, decimal-leading-zero);
  flex: none;
  min-width: 1.6em;
  font: 600 12px/1.3 var(--mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--brown);
  opacity: .75;
}
.mk-art-kit .ak-toc__list a[aria-current="true"] { opacity: 1; font-weight: 650; color: var(--ink); }
.mk-art-kit .ak-toc__list a[aria-current="true"]::before { opacity: 1; }
.mk-art-kit .ak-toc__list a[aria-current="true"]::after {
  content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--brown);
}
.mk-art-kit .ak-toc__list a:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; border-radius: 4px; }
.mk-rail-top { margin: 0 0 24px 18px; font-size: 14px; line-height: 1.4; }
.mk-rail-top a { color: inherit; opacity: .78; text-decoration: underline; text-decoration-color: var(--rule-light); text-underline-offset: 4px; }
.mk-rail-top a:hover { opacity: 1; color: var(--brown); }

/* ---- phones and tablets: the folded card after the answer ---- */
.mk-toc-m { display: none; }
@media (max-width: 1000px) {
  .mk-art-kit .mk-art-rail { display: none; }
  .mk-toc-m {
    display: block;
    border-radius: var(--r-tile);
    background: var(--santan-2);
    color: var(--ink);
  }
  .mk-toc-m > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; list-style: none; cursor: pointer;
    font: 650 16px/1.3 var(--display); letter-spacing: -.005em;
  }
  .mk-toc-m > summary::-webkit-details-marker { display: none; }
  .mk-toc-m > summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 3px 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s var(--ease);
  }
  .mk-toc-m[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
  .mk-toc-m > summary:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; border-radius: var(--r-tile); }
  .mk-toc-m .ak-toc-m__count {
    margin-left: auto; min-width: 28px; padding: 3px 9px; border-radius: 999px;
    background: var(--kunyit); color: var(--ink); text-align: center;
    font: 700 13px/1.3 var(--mono); font-variant-numeric: tabular-nums;
  }
  .mk-toc-m .ak-toc__list { margin: 0 18px 18px; border-left: 2px solid currentColor; }
  .mk-toc-m .ak-toc__list a { padding: 9px 0 9px 16px; color: inherit; text-decoration: none; line-height: 1.35; font-size: 16px; }
  .mk-art-kit .mk-art-body { padding-top: 0; }
  .mk-art-kit .mk-art-grid { row-gap: 24px; }
}

/* ---- tables: a santan tile that scrolls inside itself ---- */
.mk-art-kit .ak-table.mk-tbox {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 6px;
  border-radius: var(--r-tile);
  background: var(--santan-2);
}
.mk-art-kit .ak-table.mk-tbox:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.mk-art-kit .mk-tbox .mk-table tbody tr:last-child > * { border-bottom: 0; }
.mk-art-kit .mk-tbox .mk-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
.mk-art-kit .mk-tbox + figcaption { margin-top: 12px; }
@media (max-width: 640px) {
  .mk-art-kit .ak-table.mk-tbox { padding: 4px 18px; }
  .mk-art-kit .mk-tbox .mk-table tr:last-child { border-bottom: 0; }
}