/* ══════════════════════════════════════════════════════════════════════════════
   Metra public pages · mt-pub.css
   The pages server/pub.py renders: the desk catalogue (/desk/), one desk (/desk/<slug>),
   the daily briefs (/brief/, /brief/<date>, /brief/fx/<date>) and the signal record (/rekam-jejak).

   It stands on the landing page's sheet (imported above: reset, tokens, header, footer, buttons,
   the .dvb frame, the .fq rows) and adds only what these pages draw.
     1  page frame (header links, main, crumb, title, buttons, share, table, plan chip)
     2  the catalogue   3  one desk   4  the brief list   5  a brief   6  the record
     7  the legacy guard (only for the old shell, which still links six legacy sheets; delete it with them)
   Every block is labelled SHARED, PHONE ONLY (≤719px), TABLET ONLY (720–1023px) or
   DESKTOP ONLY (≥1024px). Hover lives only inside @media (min-width: 1024px) and (hover: hover).
   One type scale: 12 · 14 · 16 · 20 · 24 · 28 · 40. Radii: 16 cards, 12 frames, 10 buttons.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ════ 1 · PAGE FRAME ═════════════════════════════════════════════════════════ */

/* SHARED */
:root {                                 /* the old shell loads IBM Plex, not Inter: it stands in until the new shell ships */
  --f-text: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
.pub-main { padding-block: 8px 64px; }
.pub-main > section { padding-block: 0; }                             /* the landing gives every section a band's padding */
.pub-main h2 { font-size: 1.25rem; line-height: 1.2; }
.pub-main h3 { font-size: 1rem; }

/* header: these pages get the site's links from mt-funnel.js (the landing has none) */
.fn-top nav > a:not(.fn-btn) { display: none; }

/* where you are */
.pub-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 48px; color: var(--c-ink-3); font-size: .875rem; line-height: 1.2; }
.pub-crumb a { position: relative; display: inline-flex; align-items: center; min-height: 48px; color: var(--c-ink-3); text-decoration: none; }
.pub-crumb a::after { content: ""; position: absolute; inset: 0 -10px; }          /* "Desk" is 31px wide: 51px to hit */
.pub-crumb span { color: var(--c-ink-2); }
.pub-crumb a + span, .pub-crumb span + span:not(:last-child) { color: var(--c-line-2); }      /* the slashes */

/* title, one line under it, the way in */
.pub-h1 { max-width: 22ch; margin: 8px 0 0; font-size: 1.75rem; line-height: 1.12; }
.pub-lede { max-width: 60ch; margin: 12px 0 0; color: var(--c-ink-2); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.pub-cta, .ft-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 20px; }
.pub-cta .fn-btn, .ft-cta .fn-btn { min-height: 48px; padding: 6px 28px; white-space: normal; text-align: center; }
.pub-cta .fn-btn.ghost, .ft-cta .fn-btn.ghost {                       /* the second way is a line of text, as in the landing's hero */
  padding: 0; border-color: transparent; background: none; color: var(--c-ink);
  font: 500 .875rem/1.2 var(--f-text); text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 4px;
}
.pub-note { max-width: 70ch; margin-top: 40px; color: var(--c-ink-3); font-size: .875rem; line-height: 1.55; }

/* dot pictures (/assets/img/dots/*.svg, built by research/landing-v2/tools/dots.py): one for a state that is closed or has
   nothing to show, never beside content. img.dots, because the landing's sheet names its swipe dots .dots */
img.dots { display: block; flex: none; width: auto; height: 72px; margin: 0; }

/* a desk that is closed to this reader: the lock, and what opens it. New template: div.pub-lock > img.dots + p; the old one is p.pub-lock, text alone */
.pub-lock { max-width: 60ch; margin: 20px 0 0; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink-2); font-size: .875rem; line-height: 1.55; text-wrap: pretty; }
.pub-lock p { margin: 12px 0 0; }
.pub-lock a { color: var(--c-ink); text-underline-offset: 3px; white-space: nowrap; }      /* the phone number stays in one piece */

/* nothing to list: the picture and one line, where the list would start */
.pub-empty { display: grid; justify-items: center; gap: 16px; padding: 40px 0; border-top: 1px solid var(--c-line-2); color: var(--c-ink-3); font-size: .875rem; line-height: 1.5; text-align: center; }
.pub-empty p { margin: 0; }
.pub-cta + .pub-empty { margin-top: 32px; }                           /* the whole page is empty: the rule keeps its distance from the buttons */
.pub-share + .pub-empty { border-top: 0; }                            /* the share row already draws that line */

/* share: a quiet row of text, not a row of buttons */
.pub-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 24px; border-block: 1px solid var(--c-line); color: var(--c-ink-3); font-size: .875rem; line-height: 1.2; }
.pub-share > span { margin-right: 4px; }
.pub-share a, .pub-share button { display: inline-flex; align-items: center; min-height: 48px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--c-ink-2); font: 500 .875rem/1.2 var(--f-text); text-decoration: none; cursor: pointer; }

/* the plan that opens a desk: three pips, lit from that plan on (the landing's chip) */
.tr-tier {
  --p1: var(--c-amber); --p2: var(--c-amber);
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 24px; padding: 0 10px 0 8px; border: 1px solid var(--c-line-2); border-radius: 999px; background: none;
  color: var(--c-ink-2); font: 500 .75rem/1 var(--f-mono); font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.tr-tier::before {
  content: ""; flex: none; width: 24px; height: 6px;
  background:
    radial-gradient(circle at 3px 3px, var(--p1) 2.6px, transparent 3px) 0 0 / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, var(--p2) 2.6px, transparent 3px) 9px 0 / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, var(--c-amber) 2.6px, transparent 3px) 18px 0 / 6px 6px no-repeat;
}
.tr-tier.pro { --p1: var(--c-line-2); color: var(--c-ink-2); }
.tr-tier.max { --p1: var(--c-line-2); --p2: var(--c-line-2); color: var(--c-ink-2); }

/* tables: figures in the mono face, headers small and quiet, the first column left */
.pub-table-wrap { min-width: 0; margin: 0; padding: 0; overflow-x: auto; }
.pub-table { width: 100%; border-collapse: collapse; font: 500 .875rem/1.3 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pub-table th, .pub-table td { height: 40px; padding: 0 0 0 16px; border: 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink-2); text-align: right; white-space: nowrap; }
.pub-table th { height: 36px; border-bottom-color: var(--c-line-2); color: var(--c-ink-3); font: 500 .75rem/1.3 var(--f-text); letter-spacing: 0; text-transform: none; }
.pub-table th:first-child, .pub-table td:first-child { padding-left: 0; text-align: left; }
.pub-board .pub-table th:nth-child(-n+4), .pub-board .pub-table td:nth-child(-n+4) { text-align: left; }      /* date, pair, side, result: words */
.pub-table td.up { color: var(--c-up); }
.pub-table td.down { color: var(--c-down); }

/* the log row: a date, a headline, one line (brief list, and the earlier briefs under a brief) */
.pub-arch { display: grid; gap: 0; border: 0; border-top: 1px solid var(--c-line-2); border-radius: 0; background: none; overflow: visible; }
.pub-arch a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4px; min-height: 48px; padding: 14px 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink-2); text-decoration: none; }
.pub-arch a small { color: var(--c-ink-3); font: 500 .75rem/1.3 var(--f-mono); letter-spacing: -.01em; }
.pub-arch a b { color: var(--c-ink); font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.pub-arch a span { overflow: hidden; color: var(--c-ink-2); font-size: .875rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.pub-older { border-bottom: 0; }
.pub-older > summary { color: var(--c-ink-2); font-size: .875rem; }
.pub-older > summary span { margin-left: 8px; color: var(--c-ink-3); font: 500 .75rem/1 var(--f-mono); }
.pub-older > summary i { margin-left: auto; }
.pub-older[open] > summary { border-bottom: 1px solid var(--c-line); }

/* earlier / later */
.ft-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; border-top: 1px solid var(--c-line); font-size: .875rem; line-height: 1.3; }
.ft-nav a { display: inline-flex; align-items: center; min-height: 48px; min-width: 0; color: var(--c-ink-2); text-decoration: none; }
.ft-nav a:last-child { text-align: right; }

/* PHONE ONLY (≤719px) */
@media (max-width: 719px) {
  .fn-top nav .fn-hide-sm { display: none; }
  .fn-top nav .fn-btn.fn-hide-sm[href="/login.html"] { display: inline-flex; }      /* "Masuk" stays, as on the welcome page; a second button would not fit */
  .pub .fn-foot { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }      /* no offer bar on these pages */
  .pub-cta, .ft-cta { display: grid; gap: 0; }
  .pub-cta .fn-btn.ghost, .ft-cta .fn-btn.ghost { justify-self: start; }
  .pub-share { gap: 0 14px; }
  .pub-share > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }      /* the four names fit one row without the label */
  .pub-share a, .pub-share button { min-width: 48px; }
  .pub-share a[href*="x.com"] { justify-content: center; }
}

/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
  .pub-main { padding-block: 12px 80px; }
  .pub-h1 { font-size: 2.5rem; line-height: 1.08; }
  .pub-main h2 { font-size: 1.5rem; }
  .pub-crumb, .pub-crumb a { min-height: 48px; }
  .pub-share a, .pub-share button { min-width: 48px; }
  .pub-share a[href*="x.com"] { justify-content: center; }
  div.pub-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; max-width: 640px; padding: 20px; }      /* the lock at the left of its line */
  div.pub-lock p { margin: 0; }
  .pub-empty { padding: 56px 0; }
}

/* DESKTOP ONLY (≥1024px) */
@media (min-width: 1024px) {
  .pub-main { padding-block: 20px 96px; }
  .pub-h1 { margin-top: 16px; font-size: 2.5rem; line-height: 1.08; }
  .pub-lede { margin-top: 16px; }
  .pub-main h2 { font-size: 1.5rem; }
  .pub-crumb, .pub-crumb a { min-height: 40px; }
  .pub-cta, .ft-cta { margin-top: 28px; }
  .pub-share a, .pub-share button, .ft-nav a { min-height: 44px; transition: color .16s; }
  .fn-top nav > a:not(.fn-btn) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--c-ink-2); font: 500 .875rem/1 var(--f-text); text-decoration: none; transition: color .16s; }
  .fn-top nav > a:not(.fn-btn)[aria-current="page"] { color: var(--c-ink); }
  .fn-top nav > a:not(.fn-btn) + .fn-btn { margin-left: 12px; }
  .pub-crumb a { transition: color .16s; }
  div.pub-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; max-width: 640px; padding: 20px 24px 20px 20px; }      /* the lock at the left of its line */
  div.pub-lock p { margin: 0; }
  .pub-empty { padding: 64px 0; }
}
/* DESKTOP ONLY · hover */
@media (min-width: 1024px) and (hover: hover) {
  .fn-top nav > a:not(.fn-btn):hover, .pub-crumb a:hover, .pub-share a:hover, .pub-share button:hover, .ft-nav a:hover { color: var(--c-ink); }
  .pub-cta .fn-btn.ghost:hover, .ft-cta .fn-btn.ghost:hover { border-color: transparent; text-decoration-color: var(--c-amber); }
  .pub-arch a:hover b, .pub-item:hover b, .ft-more a:hover b { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .pub-lock a:hover { color: var(--c-amber-hi); }
}


/* ════ 2 · THE CATALOGUE · /desk/ ═════════════════════════════════════════════
   .pub-jump (the areas) · section.pub-area > h2 + p + div.pub-group > h3 + div.pub-list > a.pub-item
   a.pub-item > picture (or an empty span) + span > b + small, then i.tr-tier */

/* SHARED */
.pub-jump { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 32px; border-block: 1px solid var(--c-line); }      /* a still row, like the welcome page's movers */
.pub-jump a { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 48px; padding: 0 12px; color: var(--c-ink-2); font: 500 .875rem/1 var(--f-text); text-decoration: none; }
.pub-jump a:first-child { margin-left: -12px; }
.pub-area { margin-top: 48px; }
.pub-area > h2 { margin: 0; font-size: 1.5rem; }
.pub-area > p { display: none; }                                                    /* the names of the groups say it */
.pub-group { margin-top: 20px; }
.pub-group h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--c-line-2); color: var(--c-ink-3); font: 500 .875rem/1.3 var(--f-text); letter-spacing: 0; }
.pub-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.pub-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 2px 12px;
  min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink-2); text-decoration: none;
}
.pub-item > picture, .pub-item > span:empty { grid-area: 1 / 1 / 3 / 2; display: block; width: 64px; height: 36px; border: 1px solid var(--c-line-2); border-radius: 4px; background: var(--c-char); overflow: hidden; }
.pub-item > span:empty { background: var(--c-char) url(/assets/img/dots/mark.svg) center / auto 20px no-repeat; }      /* a desk without a screenshot: the mark, not a blank box */
.pub-item img { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; object-position: top left; }
.pub-item > span:not(:empty) { display: contents; }
.pub-item b { grid-area: 1 / 2; display: block; min-width: 0; overflow: hidden; color: var(--c-ink); font-weight: 600; font-size: .875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pub-item .tr-tier { grid-area: 1 / 3; }
.pub-item small { grid-area: 2 / 2 / 3 / 4; display: block; min-width: 0; margin: 0; overflow: hidden; color: var(--c-ink-3); font-size: .875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pub-jump ~ .pub-cta { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); }

/* PHONE ONLY (≤719px): the areas are a strip that stays in reach; one area is open at a time */
@media (max-width: 719px) {
  .pub-jump {
    position: sticky; top: 0; z-index: 20; flex-wrap: nowrap; gap: 2px; margin: 20px calc(-1 * var(--gut)) 0; padding: 8px var(--gut);
    background: var(--c-bg); border-top: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .pub-jump::-webkit-scrollbar { display: none; }
  .pub-jump a { height: 36px; min-height: 0; border-radius: calc(var(--r) - 3px); }
  .pub-jump a:first-child { margin-left: 0; }
  .pub-jump a::after { content: ""; position: absolute; inset: -6px 0; }           /* 36px to look at, 48px to hit */
  .pub-area { margin-top: 24px; }
  .pub-area > h2 { font-size: 1.25rem; }
  .pub-item .tr-tier { min-height: 0; padding: 0; border: 0; gap: 6px; }           /* in a phone row the chip gives its outline to the desk's name */
  .pub-jump ~ .pub-cta { margin-top: 32px; }
}
/* PHONE ONLY · the narrowest phones (≤389px): the plan's name without its pips, so the desk's name keeps its room */
@media (max-width: 389px) {
  .pub-item .tr-tier::before { display: none; }
}
@supports selector(:has(*)) {
  @media (max-width: 719px) {
    .pub-jump ~ .pub-area { display: none; margin-top: 0; }
    .pub-jump ~ .pub-area:target, .pub-jump ~ .pub-area:has(:target),
    .pub-main:not(:has(.pub-area:target, .pub-area :target)) > .pub-jump + .pub-area { display: block; }
    .pub-jump ~ .pub-area > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }      /* the lit tab says it */
    /* the lit tab: the first one until an area is chosen. The ids are the areas in mt-nav-data.js; a new area still opens, it only is not lit */
    .pub-main:not(:has(.pub-area:target, .pub-area :target)) > .pub-jump a:first-child,
    .pub-main:has(#a-markets:is(:target, :has(:target))) > .pub-jump a[href="#a-markets"],
    .pub-main:has(#a-signals:is(:target, :has(:target))) > .pub-jump a[href="#a-signals"],
    .pub-main:has(#a-gold:is(:target, :has(:target))) > .pub-jump a[href="#a-gold"],
    .pub-main:has(#a-value:is(:target, :has(:target))) > .pub-jump a[href="#a-value"],
    .pub-main:has(#a-flows:is(:target, :has(:target))) > .pub-jump a[href="#a-flows"],
    .pub-main:has(#a-technicals:is(:target, :has(:target))) > .pub-jump a[href="#a-technicals"],
    .pub-main:has(#a-makro:is(:target, :has(:target))) > .pub-jump a[href="#a-makro"],
    .pub-main:has(#a-news:is(:target, :has(:target))) > .pub-jump a[href="#a-news"],
    .pub-main:has(#a-tools:is(:target, :has(:target))) > .pub-jump a[href="#a-tools"],
    .pub-main:has(#a-lainnya:is(:target, :has(:target))) > .pub-jump a[href="#a-lainnya"] { background: var(--c-ink); color: var(--c-bg); }
  }
}

/* TABLET ONLY (720–1023px): every area, two desks a row */
@media (min-width: 720px) and (max-width: 1023px) {
  .pub-area { margin-top: 56px; }
  .pub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pub-item { grid-template-columns: 80px minmax(0, 1fr) auto; min-height: 72px; }
  .pub-item > picture, .pub-item > span:empty { width: 80px; height: 45px; }
  .pub-item b { font-size: 1rem; }
}

/* DESKTOP ONLY (≥1024px): two desks a row; from 1280px an index, the group's name at the left of its desks */
@media (min-width: 1024px) {
  .pub-jump { margin-top: 40px; }
  .pub-jump a { min-height: 44px; }
  .pub-area { margin-top: 72px; }
  .pub-area > h2 { font-size: 1.75rem; }
  .pub-group { margin-top: 28px; }
  .pub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pub-item { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 16px; min-height: 76px; }
  .pub-item > picture, .pub-item > span:empty { width: 96px; height: 54px; border-radius: 6px; }
  .pub-item b { font-size: 1rem; }
  .pub-jump ~ .pub-cta { margin-top: 72px; padding-top: 32px; }
}
@media (min-width: 1280px) {
  .pub-area > h2 { padding-bottom: 20px; }
  .pub-group { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; margin-top: 0; padding-block: 6px; border-top: 1px solid var(--c-line-2); }
  .pub-group h3 { padding: 28px 0 0; border: 0; }
  .pub-item { border-bottom: 0; }
}
/* DESKTOP ONLY · hover */
@media (min-width: 1024px) and (hover: hover) {
  .pub-jump a:hover { color: var(--c-ink); }
}


/* ════ 3 · ONE DESK · /desk/<slug> ════════════════════════════════════════════
   header.ft-head > div (div.ft-meta, h1, p.pub-lede, .pub-lock for a reader the desk is closed to) + div.ft-cta · figure.ft-shot (the new template adds .dvb and a bar)
   section.ft-cols > .ft-col × 3 (the new template: section.ft-cols.ft-acc > details.fq × 2 + div.ft-col)
   div.fn-rule + div.ft-more > a · nav.ft-nav · section.pub-sec (the closing row) */

/* SHARED */
.ft-head { display: grid; gap: 0; padding: 0; border: 0; }
.ft-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; color: var(--c-ink-3); font-size: .875rem; line-height: 1.2; }
.ft-code { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--c-ink-3); font: 500 .75rem/1 var(--f-mono); }
.ft-meta > span:not(.ft-code) { display: none; }                        /* the group is in the crumb */
.ft-head .pub-h1 { margin-top: 12px; }
.ft-head .pub-lede { max-width: 68ch; }

/* the screenshot in the landing's frame. The old template has no bar, so the frame draws one */
.ft-shot { position: relative; margin: 28px 0 0; border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: #090909; aspect-ratio: auto; overflow: hidden; }
.ft-shot:not(.dvb)::before {
  content: "Tangkapan layar"; display: flex; align-items: center; justify-content: flex-end; height: 36px; padding: 0 12px;
  background:
    radial-gradient(circle at 4px 4px, #2E2E2E 3.5px, transparent 4px) 12px 50% / 8px 8px no-repeat,
    radial-gradient(circle at 4px 4px, #2E2E2E 3.5px, transparent 4px) 27px 50% / 8px 8px no-repeat,
    radial-gradient(circle at 4px 4px, #2E2E2E 3.5px, transparent 4px) 42px 50% / 8px 8px no-repeat, #121212;
  border-bottom: 1px solid var(--c-line); color: var(--c-ink-3); font: 500 .75rem/1.2 var(--f-mono); white-space: nowrap;
}
.ft-shot:not(:has(img)) { display: none; }                            /* a desk without a screenshot gets no empty frame */
.ft-shot picture { display: block; }
.ft-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }

/* what it reads, how to use it, which plan opens it */
.ft-cols { display: grid; gap: 32px; margin-top: 40px; border: 0; }
.ft-col { min-width: 0; padding: 0; border: 0; }
.ft-col h2, .pub-main .ft-col h2 { margin: 0 0 12px; font: 600 1rem/1.3 var(--f-text); }
.ft-col ul, .ft-acc .fq ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ft-col li, .ft-acc .fq li { position: relative; padding-left: 16px; color: var(--c-ink-2); font-size: .875rem; line-height: 1.55; text-wrap: pretty; }
.ft-col li::before, .ft-acc .fq li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-line-2); }
div.ft-col li:nth-child(n+4) { display: none; }                       /* old template: the lists stay short; the new one folds them instead */
.ft-acc { gap: 32px; }
.ft-acc .fq:first-child { border-top: 1px solid var(--c-line); }
.ft-acc .fq ul { max-width: 68ch; padding: 0 0 20px; }
.ft-acc .fq:has(ul:empty) { display: none; }
.ft-plans { display: grid; gap: 0; border-top: 1px solid var(--c-line-2); }
.ft-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto 124px; align-items: center; gap: 16px; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; font-size: .875rem; line-height: 1.3; }
.ft-plan b { color: var(--c-ink); font-weight: 500; }
.ft-plan .pub-price { color: var(--c-ink-2); font: 500 .875rem/1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ft-plan .yes, .ft-plan .no { display: inline-flex; align-items: center; gap: 8px; }
.ft-plan .yes { color: var(--c-ink); }
.ft-plan .no { color: var(--c-ink-3); }
.ft-plan .yes::before, .ft-plan .no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-amber); }
.ft-plan .no::before { background: var(--c-line-2); }

/* the other desks of its group */
.fn-rule { display: block; margin: 56px 0 0; padding: 0; border: 0; }
.fn-rule::before, .fn-rule::after { content: none; }
.fn-rule > span { padding: 0; background: none; color: var(--c-ink); font: 700 1.25rem/1.2 var(--f-text); letter-spacing: -.02em; text-transform: none; }
.ft-more { display: grid; gap: 0; margin-top: 16px; border: 0; border-top: 1px solid var(--c-line-2); border-radius: 0; overflow: visible; }
.ft-more a { display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink-2); text-decoration: none; }
.ft-more a b { color: var(--c-ink); font-weight: 600; font-size: .875rem; line-height: 1.3; }
.ft-more a small { overflow: hidden; color: var(--c-ink-3); font-size: .875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

/* the closing row: one line and the way in */
.ft-nav + .pub-sec { display: grid; gap: 0; margin-top: 0; padding: 24px 0 0; border-top: 1px solid var(--c-line); }
.ft-nav + .pub-sec h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.ft-nav + .pub-sec .pub-lede { display: none; }                       /* old template: its paragraph repeats the page */
.ft-nav + .pub-sec .pub-cta { margin-top: 16px; }

/* PHONE ONLY (≤719px) */
@media (max-width: 719px) {
  .ft-shot { margin-top: 20px; }
  .ft-plan { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; }
  .ft-plan .pub-price { grid-area: 2 / 1; color: var(--c-ink-3); }
  .ft-plan .yes, .ft-plan .no { grid-area: 1 / 2 / 3 / 3; }
  div.ft-col li:nth-child(n+3) { display: none; }
  .ft-cols { margin-top: 32px; }
  .ft-acc { gap: 24px; }
}

/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
  .ft-shot { margin-top: 32px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ft-cols > .ft-col:last-child { grid-column: 1 / -1; }
  .ft-acc { grid-template-columns: minmax(0, 1fr); }
  .ft-more { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .ft-nav + .pub-sec { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .ft-nav + .pub-sec .pub-cta { margin-top: 0; }
}

/* DESKTOP ONLY (≥1024px) */
@media (min-width: 1024px) {
  .ft-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 64px; }
  .ft-head .ft-cta { margin: 0; padding-bottom: 2px; }
  .ft-shot { margin-top: 40px; }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
  .ft-acc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 0; align-items: start; }
  .ft-acc .fq { grid-column: 1; }
  .ft-acc .ft-col { grid-column: 2; grid-row: 1 / span 3; }
  .fn-rule { margin-top: 72px; }
  .ft-more { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .ft-nav + .pub-sec { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .ft-nav + .pub-sec .pub-cta { margin-top: 0; }
}


/* ════ 4 · THE BRIEF LIST · /brief/ ═══════════════════════════════════════════
   div.pub-two > section.pub-board × 2 (h2, p, div.pub-arch > a > small + b + span); the new template folds the older rows into details.pub-older;
   a column with no brief is div.pub-empty (img.dots + p) in place of the list */

/* SHARED */
.pub-two { display: grid; gap: 40px; margin-top: 40px; }
.pub-two .pub-board { min-width: 0; margin: 0; }
.pub-two .pub-board > h2 { margin: 0 0 12px; }
.pub-two .pub-board > p, .pub-two + .pub-note { display: none; }      /* old template: an intro per column, and the footer's line again */

/* PHONE ONLY (≤719px): the market the header switch says comes first and whole; the other is its newest brief */
@media (max-width: 719px) {
  .pub-two .pub-arch > a:nth-child(n+8) { display: none; }            /* old template: one week; the new one folds the rest into "Lebih lama" */
  html[data-mode="forex"] .pub-two > .pub-board:last-child { order: -1; }
  html:not([data-mode="forex"]) .pub-two > .pub-board:last-child .pub-arch > :nth-child(n+2),
  html[data-mode="forex"] .pub-two > .pub-board:first-child .pub-arch > :nth-child(n+2) { display: none; }
}

/* TABLET ONLY (720–1023px) and DESKTOP ONLY (≥1024px): the date at the left of its row */
@media (min-width: 720px) {
  .pub-arch a { grid-template-columns: 152px minmax(0, 1fr); column-gap: 16px; }
  .pub-arch a small { grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .pub-arch a > :not(small) { grid-column: 2; }
}

/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
  .pub-two { gap: 56px; margin-top: 48px; }
}

/* DESKTOP ONLY (≥1024px): crypto and forex side by side */
@media (min-width: 1024px) {
  .pub-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 56px; align-items: start; }
  .pub-two .pub-board > h2 { margin-bottom: 16px; }
}
/* DESKTOP ONLY · small laptops (1024–1279px): two columns are too narrow for a date column */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pub-two .pub-arch a { grid-template-columns: minmax(0, 1fr); }
  .pub-two .pub-arch a small { grid-row: auto; padding-top: 0; }
  .pub-two .pub-arch a > :not(small) { grid-column: auto; }
}


/* ════ 5 · A BRIEF · /brief/<date> ════════════════════════════════════════════
   p.pub-meta, h1, p.pub-lede, div.pub-share, section.pub-sec × n (div.pub-snap, table, ul.pub-items), section.pub-gate (div > img.dots + h2 + p, the button, ul), the earlier briefs.
   One column of about 70 characters. */

/* SHARED */
.pub-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--c-ink-3); font: 500 .75rem/1.4 var(--f-mono); letter-spacing: -.01em; }
.pub-meta span:first-child { color: var(--c-ink-2); }
.pub-meta + .pub-h1 { max-width: 680px; margin-top: 12px; }
.pub-meta ~ .pub-lede { max-width: 680px; }
.pub-meta ~ .pub-lede + .pub-share { display: none; }                 /* old template: the same row twice; it stays at the end of the brief */
.pub-sec { margin-top: 40px; }
.pub-sec > h2 { margin: 0 0 12px; }
.pub-snap { display: grid; gap: 0; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.pub-snap p { margin: 0; }
.pub-snap > p:not(.pub-kv) { padding-bottom: 14px; color: var(--c-ink); font-size: 1rem; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.pub-snap .pub-kv { padding: 10px 0; border-top: 1px solid var(--c-line); color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
.pub-snap .pub-kv:last-child { padding-bottom: 0; }
.pub-snap .pub-kv b { color: var(--c-ink-3); font-weight: 400; }
.pub-tone { width: max-content; margin-bottom: 10px; padding: 5px 8px; border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--c-ink-2); font: 500 .75rem/1 var(--f-mono); }
.pub-tone.risk_on { color: var(--c-up); }
.pub-tone.risk_off { color: var(--c-down); }
.pub-sec .pub-table td:first-child { color: var(--c-ink); font-family: var(--f-text); letter-spacing: 0; white-space: normal; }
.pub-items { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pub-items li { padding: 16px 0; border-top: 1px solid var(--c-line); }
.pub-items li:first-child { padding-top: 4px; border-top: 0; }
.pub-items li:last-child { padding-bottom: 0; }
.pub-items b { display: block; color: var(--c-ink); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.pub-items p { margin: 6px 0 0; color: var(--c-ink-2); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.pub-items p b { display: inline; color: var(--c-ink); font-weight: 500; letter-spacing: 0; }
.pub-items .k { display: block; margin: 0 0 6px; color: var(--c-ink-3); font: 500 .75rem/1.2 var(--f-mono); }

/* the gate: what the rest holds, and the way in */
.pub-gate { display: grid; gap: 0; margin-top: 48px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.pub-main > .pub-gate { padding: 16px; }
.pub-gate img.dots { margin-bottom: 16px; }                           /* new template: the lock above the line that says what is closed */
.pub-gate h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.pub-gate p { margin: 8px 0 0; color: var(--c-ink-2); font-size: .875rem; line-height: 1.55; }
.pub-gate p a { color: var(--c-ink); text-underline-offset: 3px; }
.pub-gate .fn-btn { width: 100%; min-height: 48px; margin-top: 16px; padding: 6px 20px; white-space: normal; text-align: center; }
.pub-gate ul { order: 3; display: grid; gap: 0; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--c-line); list-style: none; }
.pub-gate li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink-3); font-size: .875rem; line-height: 1.3; }
.pub-gate li:last-child { border-bottom: 0; margin-bottom: -8px; }
.pub-gate li::before { content: none; }
.pub-gate li span { color: var(--c-ink-3); font: 500 .75rem/1 var(--f-mono); }

/* TABLET ONLY (720–1023px) and DESKTOP ONLY (≥1024px): the reading column, about 70 characters */
@media (min-width: 720px) {
  .pub-meta ~ * { max-width: 680px; }
  .pub-items p, .pub-snap p { max-width: 68ch; }
  .pub-sec { margin-top: 48px; }
  .pub-snap { padding: 20px; }
  .pub-gate, .pub-main > .pub-gate { padding: 20px; }
  .pub-gate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .pub-gate .fn-btn { width: auto; max-width: 300px; margin-top: 0; }
  .pub-gate:has(img.dots) .fn-btn { align-self: end; }                /* beside the two lines, not beside the lock above them */
  .pub-gate ul { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pub-gate li:nth-last-child(2):nth-child(odd) { border-bottom: 0; margin-bottom: -8px; }
}

/* DESKTOP ONLY (≥1024px): the headline at the left, the brief beside it, as the welcome page sets its FAQ */
@media (min-width: 1024px) {
  .pub-snap { padding: 24px; }
  .pub-gate, .pub-main > .pub-gate { padding: 24px; }
}
@supports selector(:has(*)) {
  @media (min-width: 1024px) {
    .pub-main:has(> .pub-meta) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 64px; align-items: start; }
    .pub-main:has(> .pub-meta) > * { grid-column: 2; max-width: none; }
    .pub-main:has(> .pub-meta) > .pub-crumb { grid-column: 1 / -1; grid-row: 1; margin-bottom: 20px; }
    .pub-main:has(> .pub-meta) > .pub-meta { grid-column: 1; grid-row: 2; margin-top: 0; }
    .pub-main:has(> .pub-meta) > .pub-h1 { grid-column: 1; grid-row: 3; font-size: 1.75rem; line-height: 1.15; }
    .pub-main:has(> .pub-meta) > .pub-lede { grid-column: 1; grid-row: 4; }
    .pub-main:has(> .pub-meta) > .pub-sec:first-of-type { grid-row: 2 / span 4; margin-top: 0; }
    /* what the brief holds, under the lede, in reach while the brief scrolls (the legal pages' "Daftar isi") */
    .pub-main:has(> .pub-meta) > .pub-toc { grid-column: 1; grid-row: 5 / span 40; align-self: start; position: sticky; top: calc(var(--top-h) + 32px); max-height: calc(100vh - var(--top-h) - 64px); margin-top: 32px; overflow-y: auto; }
  }
}
@media (min-width: 1024px) {
  .pub-toc p { margin: 0; padding-bottom: 8px; color: var(--c-ink-3); font: 500 .875rem/1.3 var(--f-text); }
  .pub-toc ol { margin: 0; padding: 0; border-left: 1px solid var(--c-line); list-style: none; }
  .pub-toc a { display: flex; align-items: center; min-height: 36px; padding: 0 0 0 16px; color: var(--c-ink-2); font: 500 .875rem/1.3 var(--f-text); text-decoration: none; transition: color .16s; }
  .pub-toc a[aria-current] { color: var(--c-ink); box-shadow: -1px 0 0 var(--c-ink); }
}
@media (min-width: 1024px) and (hover: hover) {
  .pub-toc a:hover { color: var(--c-ink); }
}

/* PHONE ONLY (≤719px) and TABLET ONLY (720–1023px): one column; the list of sections would only make it longer */
@media (max-width: 1023px) {
  .pub-toc { display: none; }
}

/* PHONE ONLY (≤719px) */
@media (max-width: 719px) {
  .pub-sec .pub-table th:nth-child(4), .pub-sec .pub-table td:nth-child(4) { display: none; }     /* the z-score gives its room to the names */
  .pub-sec .pub-table td:first-child { padding-block: 6px; }
  .pub-table th, .pub-table td { height: 36px; }
  .pub-items p { font-size: .875rem; line-height: 1.55; }
  .pub-items li { padding: 14px 0; }
  .pub-gate li { min-height: 36px; }
}


/* ════ 6 · THE RECORD · /rekam-jejak ══════════════════════════════════════════
   section.pub-board[data-mkt] × n > h2 + p + (Metra Edge: dl.pub-years, the backtest's R per year) + div.pub-stats (div.pub-stat > b + span) + div.pub-table-wrap > table.pub-table
   columns: Tutup · Pair · Arah · Hasil · R · % (Metra Edge: no %) */

/* SHARED */
.pub-board { margin-top: 48px; }
.pub-board > h2 { margin: 0; }
.pub-board > p { max-width: 70ch; margin: 8px 0 0; color: var(--c-ink-3); font-size: .875rem; line-height: 1.55; text-wrap: pretty; }
.pub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 20px; border: 0; border-radius: 0; background: none; overflow: visible; }
.pub-stat { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 0; border-top: 1px solid var(--c-line-2); background: none; }
.pub-stat b { color: var(--c-ink); font: 500 1.75rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pub-stat span { color: var(--c-ink-2); font-size: .875rem; line-height: 1.4; }
.pub-board .pub-table-wrap { margin-top: 24px; }
.pub-board ~ .pub-note { margin-top: 48px; }
.pub-board ~ .pub-cta { margin-top: 24px; }
/* the backtest per year: a row of cells, each a year and its average R */
.pub-years { display: grid; margin: 16px 0 0; border-top: 1px solid var(--c-line); }      /* the figures' own rules close it */
.pub-years div { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 10px 0; }
.pub-years dt { color: var(--c-ink-3); font: 500 .75rem/1 var(--f-mono); }
.pub-years dd { margin: 0; color: var(--c-ink-2); font: 500 .875rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pub-years dd.up { color: var(--c-up); }
.pub-years dd.down { color: var(--c-down); }
.pub-years + .pub-stats { margin-top: 8px; }

/* PHONE ONLY (≤719px): the percent column goes; R says the result */
@media (max-width: 719px) {
  .pub-board { margin-top: 40px; }
  .pub-stats { gap: 16px 12px; margin-top: 16px; }
  .pub-stat { gap: 4px; padding-top: 10px; }
  .pub-stat b { font-size: 1.5rem; }
  .pub-board .pub-table-wrap { margin-top: 16px; }
  .pub-board .pub-table { font-size: .8125rem; }
  .pub-board .pub-table th, .pub-board .pub-table td { padding-left: 10px; }
  .pub-board .pub-table th:first-child, .pub-board .pub-table td:first-child { padding-left: 0; }
  .pub-board .pub-table th:nth-child(6), .pub-board .pub-table td:nth-child(6) { display: none; }
  .pub-years { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }       /* five years still make one row at 360px */
  .pub-years div { min-height: 48px; padding: 8px 0; }
  .pub-years div:nth-child(n+4) { border-top: 1px solid var(--c-line); }
}
/* PHONE ONLY: the boards of the market the header switch says come first and whole; the other market's keep their name and figures */
@supports selector(:has(*)) {
  @media (max-width: 719px) {
    .pub-main:has(> .pub-board[data-mkt]) { display: flex; flex-direction: column; }
    .pub-main:has(> .pub-board[data-mkt]) > .pub-board ~ :not(.pub-board) { order: 2; }
    html:not([data-mode="forex"]) .pub-board[data-mkt="forex"], html[data-mode="forex"] .pub-board[data-mkt="crypto"] { order: 1; }
    html:not([data-mode="forex"]) .pub-board[data-mkt="forex"] > :is(p, .pub-years, .pub-table-wrap),
    html[data-mode="forex"] .pub-board[data-mkt="crypto"] > :is(p, .pub-years, .pub-table-wrap) { display: none; }
  }
}

/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
  .pub-board { margin-top: 56px; }
  .pub-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .pub-stat b { font-size: 2.5rem; }
  .pub-years { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
}

/* DESKTOP ONLY (≥1024px): the figures at the left of their table */
@media (min-width: 1024px) {
  .pub-board:not(.pub-two *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 64px; margin-top: 0; padding-block: 40px; border-top: 1px solid var(--c-line); }
  .pub-share + .pub-board:not(.pub-two *), .pub-cta + .pub-board:not(.pub-two *) { margin-top: 8px; border-top: 0; }
  .pub-board:not(.pub-two *) > * { grid-column: 1; }
  .pub-board:not(.pub-two *) > .pub-table-wrap, .pub-board:not(.pub-two *) > p:last-child { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .pub-stats { gap: 24px; margin-top: 28px; align-self: start; }
  .pub-stat { padding-top: 16px; gap: 8px; }
  .pub-stat b { font-size: 2.5rem; }
  .pub-board:not(.pub-two *):last-of-type { border-bottom: 1px solid var(--c-line); }
  .pub-board ~ .pub-note { margin-top: 32px; }
  .pub-years { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); margin: 24px 0 0; }
  .pub-years + .pub-stats { margin-top: 20px; }
}