/* Platforms page (nen-tang). Loaded after site.css, reuses its tokens. One accent (son red), shapes 6px interactive / 8px surfaces. */
:root{--lv-api:var(--ink);--lv-appr:var(--jade);--lv-hook:#5f7a6e;--lv-file:#aab6af;--lv-ui:#d3dad5;--lv-res:var(--son)}


/* head */
.pf-hero{padding-block:clamp(24px,4vw,48px) clamp(36px,5vw,64px)}
.pf-crumb{display:flex;gap:10px;align-items:center;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:clamp(20px,3vw,36px)}
.pf-crumb a{color:var(--mute);text-decoration:none}
.pf-crumb a:hover{color:var(--ink)}
.pf-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end}
.pf-hero-copy{display:flex;flex-direction:column;gap:24px}
.pf-hero h1{max-width:18ch}
.pf-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surf);padding:clamp(20px,2.6vw,32px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:22px}
.pf-total{display:flex;align-items:baseline;gap:16px}
.pf-total b{font-weight:200;font-size:clamp(52px,7vw,84px);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.pf-total span{color:var(--mute);font-size:15px;max-width:24ch;line-height:1.4}
.pf-cap{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.pf-bar{display:flex;gap:2px;height:12px;border-radius:var(--r-ui);overflow:hidden}
.pf-seg{display:block;min-width:4px}
.pf-seg-api{background:var(--lv-api)}.pf-seg-api-approval{background:var(--lv-appr)}.pf-seg-webhook{background:var(--lv-hook)}
.pf-seg-file{background:var(--lv-file)}.pf-seg-ui{background:var(--lv-ui)}.pf-seg-restricted{background:var(--lv-res)}
.pf-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:14px;font-size:13.5px;color:var(--mute)}
.pf-key li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center}
.pf-key b{font:500 12px var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pf-dot{display:block;width:10px;height:10px;border-radius:2px}
.pf-note{font-size:13px;color:var(--mute);padding-top:16px;border-top:1px solid var(--line)}

/* chevron glyph: how many layers are solid shows how directly we can connect (bottom layer first) */
.lv{width:34px;height:26px;display:block;flex:none}
.lv path{fill:none;stroke:#cfd6d1;stroke-width:11}
.lv-1 .c1,.lv-2 .c1,.lv-2 .c2,.lv-3 path{stroke:var(--ink)}
.lv-r path{stroke:#efb8ac}

/* how to read the levels */
.pf-legend{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(48px,7vw,88px)}
.pf-legend-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:start}
.pf-legend-copy{display:flex;flex-direction:column;gap:18px}
.pf-lg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px)}
.pf-lg li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.pf-lg .lv{margin-top:3px}
.pf-lg b{display:block;font-weight:600;margin-bottom:4px}
.pf-lg p{color:var(--mute);font-size:14.5px;line-height:1.55}

/* directory */
.pf-list-sec{padding-block:clamp(48px,7vw,88px) 0}
.pf-list-head{margin-bottom:clamp(20px,3vw,32px)}
.pf-filter{position:sticky;top:68px;z-index:12;background:rgba(247,248,246,.97);border-block:1px solid var(--line);padding-block:12px}
.pf-f{display:flex;flex-wrap:wrap;align-items:end;gap:12px clamp(12px,2vw,24px)}
.pf-fl{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-fl span{font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pf-fl select{font:500 15px var(--f);color:var(--ink);padding:11px 38px 11px 14px;min-width:min(260px,100%);border:1px solid var(--line);border-radius:var(--r-ui);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121413' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;-webkit-appearance:none;cursor:pointer}
.pf-fl select:hover{border-color:var(--ink)}
.pf-reset{font:500 14px var(--f);padding:11px 4px;background:none;border:0;border-bottom:1px solid var(--ink);color:var(--ink);cursor:pointer;border-radius:0}
.pf-reset:hover{color:var(--son);border-color:var(--son)}
.pf-result{margin-left:auto;font:500 12.5px var(--f-mono);color:var(--mute);padding-bottom:12px}
.pf-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-block:clamp(24px,4vw,44px) clamp(56px,8vw,96px)}
.pf-toc{position:sticky;top:156px;display:flex;flex-direction:column;border-left:1px solid var(--line);max-height:calc(100dvh - 176px);overflow-y:auto}
.pf-toc a{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--mute);text-decoration:none}
.pf-toc a:hover{color:var(--ink)}
.pf-toc a[aria-current=true]{color:var(--ink);border-left-color:var(--son);font-weight:600}
.pf-toc a[hidden]{display:none}
.pf-toc .n{font:500 11.5px var(--f-mono);color:var(--mute);align-self:center}
.pf-cat{scroll-margin-top:160px;padding-block:0}
.pf-cat[hidden]{display:none}
.pf-cat + .pf-cat{margin-top:clamp(32px,4.5vw,56px)}
.pf-cat-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.pf-cat-h h3{font-size:clamp(19px,2vw,24px);font-weight:600}
.pf-cat-h .n{font:500 12px var(--f-mono);color:var(--mute);white-space:nowrap}
.pf-cat-d{color:var(--mute);font-size:14.5px;margin:10px 0 6px;max-width:68ch}
.pf-list{display:flex;flex-direction:column}
.pf-row{border-bottom:1px solid var(--line)}
.pf-row[hidden]{display:none}
.pf-row-b{width:100%;display:grid;grid-template-columns:36px minmax(140px,220px) minmax(0,1fr) 128px 84px 16px;gap:4px 18px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:transparent;border:0;border-radius:0;padding:16px 10px;cursor:pointer;transition:background .15s}
.pf-row-b:hover{background:var(--surface)}
.pf-row-b[aria-expanded=true]{background:var(--tint);box-shadow:inset 3px 0 0 var(--son)}
.pf-name b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
.pf-name small{display:block;color:var(--mute);font-size:12.5px;line-height:1.35;margin-top:2px}
.pf-what{color:var(--mute);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-lvl{font:500 12px var(--f-mono);letter-spacing:.01em;color:var(--ink)}
.pf-lvl-restricted{color:var(--son-d)}
.pf-count{font:500 12px var(--f-mono);color:var(--mute);text-align:right;white-space:nowrap}
.pf-caret{font-size:14px;color:var(--mute);transition:transform .2s}
.pf-row-b[aria-expanded=true] .pf-caret{transform:rotate(90deg);color:var(--ink)}
.pf-slot{padding:0 0 18px;background:var(--tint)}
.pf-slot[hidden]{display:none}
.pf-slot .skel-block{min-height:160px;margin:0 10px;border-radius:var(--r-surf)}
.pf-empty{margin-top:24px;padding:28px;border:1px dashed #b9c3bd;border-radius:var(--r-surf);color:var(--mute);display:flex;flex-direction:column;gap:8px;max-width:64ch}
.pf-empty[hidden]{display:none}
.pf-empty b{color:var(--ink)}

/* detail panel (htmx fragment) */
.pd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);padding:clamp(18px,2.6vw,32px) clamp(14px,2.6vw,32px) 0}
.pd h4{font:500 11.5px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.pd p{font-size:15px;line-height:1.6;max-width:62ch}
.pd p + h4{margin-top:22px}
.pd-vendor,.pd-src{font-size:13px!important;color:var(--mute);margin-top:6px}
.pd-vendor a,.pd-src a,.pd-link{color:var(--son-d)}
.pd-mute{color:var(--mute)}
.pd-lvl{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}
.pd-lvl .lv{margin-top:3px}
.pd-lvl b{display:block;font-weight:600;margin-bottom:2px}
.pd-lvl span{color:var(--mute);font-size:14.5px;line-height:1.55}
.pd-dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 14px;font-size:14.5px;margin:0 0 14px;padding-top:12px;border-top:1px solid #c9d1cc}
.pd-dl dt{font:500 11.5px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.pd-dl dd{margin:0;line-height:1.55}
.pd-chips{display:flex;flex-wrap:wrap;gap:6px}
.pd-chips li{font-size:13px;padding:4px 10px;border:1px solid #b9c3bd;border-radius:var(--r-ui);background:var(--bg);line-height:1.3}
.pd-link{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.pd-link:hover{color:var(--ink)}
.pd-wide{grid-column:1 / -1}
.pd-uses{display:flex;flex-direction:column;border-top:1px solid #c9d1cc}
.pd-uses li{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:11px 0;border-bottom:1px solid #c9d1cc}
.pd-ui{font:500 11.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.pd-uses b{font-weight:600;font-size:15px}
.pd-ut{font:500 12px var(--f-mono);color:var(--son-d);white-space:nowrap}
.pd-more{margin-top:12px;font-size:14px!important;color:var(--mute)}
.pd-more b{color:var(--ink);font-weight:600}
.pd-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:14px 0 0;border-top:1px solid #c9d1cc}
.pd-foot p{font-size:12.5px;color:var(--mute);max-width:70ch}
.pd-foot .btn{padding-block:6px}

/* method */
.pf-method{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(48px,7vw,88px)}
.pf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(24px,4vw,40px);border-top:1px solid var(--line)}
.pf-steps li{padding:22px clamp(16px,2.4vw,32px) 8px 0;display:flex;flex-direction:column;gap:8px}
.pf-steps li + li{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line)}
.pf-steps p{color:var(--mute);font-size:15px;max-width:40ch}

html[data-motion="off"] .pf-row-b,html[data-motion="off"] .pf-caret{transition:none}

@media (max-width:1000px){
  .pf-hero-in,.pf-legend-in{grid-template-columns:1fr}
  .pf-body{grid-template-columns:1fr}
  .pf-toc{position:static;flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);max-height:none;scroll-snap-type:x proximity;margin-inline:calc(clamp(16px,4vw,40px) * -1);padding-inline:clamp(16px,4vw,40px)}
  .pf-toc a{flex:none;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;margin:0;padding:10px 12px;scroll-snap-align:start}
  .pf-toc a[aria-current=true]{border-bottom-color:var(--son)}
  .pf-toc .n{display:none}
  .pf-cat{scroll-margin-top:150px}
  .pf-result{margin-left:0;flex-basis:100%;padding-bottom:0}
}
@media (max-width:760px){
  .pf-row-b{grid-template-columns:36px minmax(0,1fr) 16px;grid-template-areas:"g n c" ". w w" ". l l";padding:14px 6px}
  .pf-glyph{grid-area:g}.pf-name{grid-area:n}.pf-what{grid-area:w;-webkit-line-clamp:3}.pf-caret{grid-area:c}
  .pf-lvl{grid-area:l}
  .pf-count{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
  .pf-key,.pf-lg,.pf-steps{grid-template-columns:1fr}
  .pf-steps li + li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .pf-steps li{padding-right:0}
  .pd{grid-template-columns:1fr}
  .pd-uses li{grid-template-columns:1fr auto}
  .pd-ui{grid-column:1 / -1}
  .pd-dl{grid-template-columns:1fr}
  .pf-filter{position:static}
  .pf-f{gap:10px}
  .pf-fl{flex:1 1 calc(50% - 5px)}.pf-fl select{width:100%;min-width:0;font-size:14px;padding-right:32px}
}

.pf-ind-note{margin:0 0 clamp(20px,3vw,32px);padding:14px 18px;border-left:3px solid var(--son);background:var(--tint);border-radius:0 var(--r-ui) var(--r-ui) 0;font-size:14.5px;line-height:1.55;max-width:70ch}
.pf-ind-note[hidden]{display:none}

/* an open row already shows its description as "Là gì" below, so the one-liner steps aside */
.pf-row-b[aria-expanded=true] .pf-what{visibility:hidden}
@media (max-width:760px){.pf-row-b[aria-expanded=true] .pf-what{display:none}}