/* ============================================================
   notes.css — gaya bersama untuk semua halaman catatan.
   Dihasilkan oleh build_notes_page.py — ubah di sana, bukan di sini.
   Theme: Terminal-light / One Light.
   ============================================================ */

body{line-height:1.6;}

/* ---------- Top bar ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(250,250,250,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
header.nav .nav-id{color:var(--text);}
.nav-inner{max-width:1600px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-id{font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;min-width:0;}
.nav-id span.nav-id-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-links-r{display:flex;gap:10px;font-size:13px;color:var(--text-dim);font-weight:600;flex-shrink:0;}
.nav-pill{padding:8px 16px;border-radius:100px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);transition:border-color .15s,color .15s,background .15s,transform .15s;white-space:nowrap;}
.nav-pill:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-dim);transform:translateY(-1px);}
.nav-pill-accent{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep);box-shadow:0 4px 12px rgba(42,95,208,.24);}
.nav-pill-accent:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- Three-column documentation layout ---------- */
.layout{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:272px minmax(0,1fr) 236px;align-items:start;}
/* Explicit placement: DOM order is sidebar → rail → main so the on-this-page
   nav lands right after the chapter list for keyboard and screen-reader users,
   but visually the rail belongs in the third column. */
aside.sidebar{grid-column:1;grid-row:1;}
main.content{grid-column:2;grid-row:1;}
aside.toc-rail{grid-column:3;grid-row:1;}

/* ---------- Left rail: chapter navigation ---------- */
aside.sidebar{position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;padding:20px 14px 60px;border-right:1px solid var(--border-soft);}
.rail-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);padding:0 8px 8px;}
.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:11px 14px;cursor:pointer;}
.toc-toggle .toc-caret{transition:transform .18s;}
.toc-toggle[aria-expanded="true"] .toc-caret{transform:rotate(180deg);}
.search-wrap{position:sticky;top:0;background:var(--bg);padding-bottom:12px;margin-bottom:10px;z-index:5;}
.search-field{position:relative;display:flex;align-items:center;}
#searchBox{width:100%;padding:10px 40px 10px 14px;border-radius:9px;border:1px solid var(--border);background:#fff;font-family:var(--body);font-size:13.5px;color:var(--text);}
#searchBox:focus{outline:2px solid var(--accent);outline-offset:1px;}
.search-kbd{position:absolute;right:10px;font-family:var(--mono);font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--surface-2);pointer-events:none;}
#searchBox:focus + .search-kbd{opacity:0;}

.side-chapter{margin-bottom:1px;}
.side-chapter-title{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:13px;padding:8px 9px;border-radius:7px;color:var(--text-dim);line-height:1.35;}
.side-chapter-title:hover{background:var(--surface-2);color:var(--text);}
.side-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.side-num{font-family:var(--mono);font-size:11px;color:var(--text-faint);flex-shrink:0;min-width:1.4em;}
.side-txt{flex:1;min-width:0;}
.side-chapter-title.current{background:var(--accent-dim);color:var(--accent-deep);font-weight:700;}
.side-chapter-title.current .side-num{color:var(--accent-deep);}
.side-hit{font-family:var(--mono);font-size:10px;color:var(--accent-deep);background:var(--accent-dim);border-radius:100px;padding:1px 7px;margin-left:auto;flex-shrink:0;display:none;}
.side-chapter.has-hit .side-hit{display:inline-block;}
.no-results{display:none;color:var(--text-faint);font-size:13px;padding:12px 10px;font-style:italic;}

/* ---------- Right rail: on-this-page ---------- */
aside.toc-rail{position:sticky;top:57px;max-height:calc(100vh - 57px);overflow-y:auto;padding:24px 18px 60px 6px;visibility:hidden;}
aside.toc-rail.has-subs{visibility:visible;}
#tocRailList{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--border);}
.rail-link{font-size:12px;color:var(--text-faint);padding:5px 10px;line-height:1.45;border-left:2px solid transparent;margin-left:-1px;transition:color .12s,border-color .12s;}
.rail-link:hover{color:var(--text);}
.rail-link.active{color:var(--accent-deep);border-left-color:var(--accent-deep);font-weight:600;}
.rail-link .rl-num{font-family:var(--mono);font-size:10.5px;opacity:.75;margin-right:5px;}
@media(max-width:1180px){
  .layout{grid-template-columns:272px minmax(0,1fr);}
  aside.sidebar{grid-row:1/span 2;}
  aside.toc-rail{position:static;max-height:none;grid-column:2;grid-row:1;padding:20px 24px 0;}
  main.content{grid-column:2;grid-row:2;padding-top:14px;}
  #tocRailList{border-left:none;border:1px solid var(--border);border-radius:10px;background:#fff;padding:8px;flex-direction:row;flex-wrap:wrap;gap:4px;}
  .rail-link{border-left:none;border:1px solid var(--border-soft);border-radius:100px;padding:4px 10px;margin-left:0;background:var(--surface-2);}
  .rail-link.active{border-color:var(--accent);background:var(--accent-dim);}
}
@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);}
  aside.sidebar{grid-column:1;grid-row:1;}
  aside.toc-rail{grid-column:1;grid-row:2;}
  main.content{grid-column:1;grid-row:3;}
  aside.sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border-soft);min-width:0;padding:14px 16px;}
  aside.toc-rail{padding:14px 16px 0;}
  .toc-toggle{display:flex;}
  .rail-label{display:none;}
  aside.sidebar.toc-collapsed .search-wrap,
  aside.sidebar.toc-collapsed #sideList,
  aside.sidebar.toc-collapsed #noResults{display:none;}
  main.content{min-width:0;}
}

/* ---------- Main column ---------- */
main.content{padding:30px 44px 110px;max-width:980px;min-width:0;}
@media(max-width:640px){main.content{padding:20px 16px 80px;}}

.breadcrumb{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--text-faint);margin-bottom:14px;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--accent-deep);}
.breadcrumb .crumb-sep{opacity:.5;}
.doc-title{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.015em;margin-bottom:8px;}
.doc-sub{color:var(--text-dim);font-size:14.5px;margin-bottom:18px;max-width:70ch;}

.stat-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.stat{display:flex;align-items:baseline;gap:7px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:5px 14px;box-shadow:var(--shadow-sm);}
.stat .num{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent-deep);}
.stat .lbl{font-size:11px;color:var(--text-faint);font-weight:600;}

.intro-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:32px;box-shadow:var(--shadow-sm);}
.intro-card h3{font-family:var(--display);font-size:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.intro-card ol{padding-left:20px;color:var(--text-dim);font-size:13.5px;}
.intro-card li{margin-bottom:6px;}

/* ---------- Chapter ---------- */
section.chapter{display:none;padding-top:4px;}
section.chapter.active{display:block;}
.ch-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
section.chapter h2{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.01em;display:flex;align-items:center;gap:13px;margin-bottom:8px;scroll-margin-top:75px;}
.ch-num{font-family:var(--mono);font-size:14px;color:#fff;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm);}
.ch-rule{height:1px;background:var(--border);margin:0 0 24px;}

.sub-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm);scroll-margin-top:75px;transition:box-shadow .2s;}
.chapter-body-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.sub-card:hover{box-shadow:var(--shadow-md);}
.sub-card h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:10px;color:var(--text);}
.sub-num{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;flex-shrink:0;}
.anchor{font-family:var(--mono);font-size:13px;color:var(--text-faint);opacity:0;transition:opacity .15s,color .15s;margin-left:2px;}
.sub-card h3:hover .anchor,section.chapter h2:hover .anchor,.anchor:focus{opacity:1;}
.anchor:hover{color:var(--accent-deep);}

/* ---------- Deskripsi (definition list) ---------- */
.konsep-box{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 17px;margin-bottom:12px;}
.block-label{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:9px;}
.def-list{display:flex;flex-direction:column;gap:9px;}
.def-list dt{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text);line-height:1.4;}
.def-list dd{font-size:14px;color:var(--text-dim);margin-left:0;padding-left:11px;border-left:2px solid var(--border-strong);margin-top:3px;}

/* ---------- Catatan (bullet points) ---------- */
.points-box{border:1px solid var(--border);border-radius:8px;background:#fff;padding:13px 17px;margin-bottom:12px;}
.points-box .block-label{color:var(--text-faint);}
.konsep-list{padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.konsep-list li{color:var(--text-dim);font-size:14px;}
.konsep-list li::marker{color:var(--text-faint);}
.ksp-user{color:#3a7a39;font-weight:700;}
.ksp-host{color:#8a5e00;font-weight:700;}
.ksp-path{color:#2a5fd0;font-weight:700;}
.ksp-sep{color:#63646d;font-weight:600;}

/* ---------- Tables ---------- */
.table-caption{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--text-dim);margin-bottom:7px;}
.ref-table-wrap{margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;}
.ref-table-wrap table.ref-table{min-width:max-content;}
table.ref-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
table.ref-table thead th{background:var(--surface-2);text-align:left;padding:8px 11px;font-family:var(--display);font-weight:600;color:var(--text);border-bottom:1px solid var(--border);white-space:nowrap;}
table.ref-table tbody td{padding:8px 11px;border-bottom:1px solid var(--border-soft);color:var(--text-dim);vertical-align:top;}
table.ref-table tbody tr:last-child td{border-bottom:none;}
table.ref-table tbody tr:nth-child(even){background:var(--surface-2);}

/* ---------- Terminal ---------- */
.terminal-box{background:#1a1b26;border-radius:10px;overflow:hidden;margin-bottom:14px;box-shadow:0 6px 18px rgba(16,24,40,.18);}
.terminal-titlebar{background:#232436;padding:8px 12px 8px 14px;display:flex;align-items:center;gap:7px;user-select:none;-webkit-user-select:none;}
.terminal-label{margin-left:8px;font-family:var(--mono);font-size:11px;color:#8a93b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.term-copy{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#a8b1d1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:3px 10px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.term-copy:hover{background:rgba(255,255,255,.13);color:#fff;}
.term-copy.done{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.12);}
.terminal-body{padding:15px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.7;overflow-x:auto;}
.term-line{white-space:pre;}
/* The prompt is chrome, not content: excluded from selection so a drag over
   the block yields runnable commands only. The trailing space lives INSIDE
   this span for the same reason. */
.term-prompt{user-select:none;-webkit-user-select:none;}
.term-prompt-cisco{color:#4ade80;font-weight:600;}
.term-prompt-linux{color:#38bdf8;font-weight:600;}
.term-prompt-pc{color:#fbbf24;font-weight:600;}
.term-user{color:#4ade80;font-weight:600;}
.term-host{color:#facc15;font-weight:600;}
.term-path{color:#38bdf8;font-weight:600;}
.term-sep{color:#6b7690;}
.term-cmd{color:#e5e9f5;cursor:pointer;border-radius:3px;padding:0 3px;margin:0 -3px;transition:background .12s;}
.term-cmd:hover{background:rgba(120,160,255,.18);}
.term-cmd.copied{background:rgba(74,222,128,.22);}
.terminal-body ::selection{background:#3b4a7a;color:#fff;}
.file-box .terminal-titlebar{background:#1e2a3d;}
.file-icon{font-size:12px;}
.file-name{color:#c3cbe0 !important;font-weight:600;}
.file-code{color:#e5e9f5;white-space:pre;}
.term-comment{color:#8b94ad;font-style:italic;margin:0 0 12px 0;white-space:pre-wrap;}

.konfig-aside{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:14px;}
.aside-label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px;}
.konfig-aside ul{padding-left:18px;display:flex;flex-direction:column;gap:5px;}
.konfig-aside li{color:var(--text-dim);font-size:13px;}

/* ---------- Steps ---------- */
.steps-box{background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 16px;margin-bottom:14px;}
.step-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft);}
.step-row:last-child{border-bottom:none;}
.step-num{width:22px;height:22px;border-radius:50%;font-family:var(--mono);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.steps-violet .step-num{background:var(--violet-dim);color:var(--violet);}
.steps-teal .step-num{background:var(--teal-dim);color:var(--teal);}
.steps-magenta .step-num{background:var(--magenta-dim);color:var(--magenta-text);}
.step-path{font-family:var(--mono);font-size:12.5px;color:var(--text);font-weight:600;}
.step-arrow{color:var(--text-faint);margin:0 3px;}
.step-desc{color:var(--text-dim);font-size:12.5px;margin-top:3px;}

/* ---------- Admonition ---------- */
.admonition{border:1px solid var(--amber);border-left-width:3px;background:var(--amber-dim);border-radius:0 8px 8px 0;padding:11px 15px;margin-bottom:12px;}
.adm-title{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#7a4a06;display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.adm-body{font-size:13.5px;color:#5c3805;line-height:1.55;}

.diagram-box{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px;overflow-x:auto;}

/* ---------- Chapter pager ---------- */
.pager{display:flex;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid var(--border);}
.pager a{flex:1;min-width:0;border:1px solid var(--border);border-radius:10px;background:#fff;padding:13px 16px;box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s;}
.pager a:hover{border-color:var(--accent);transform:translateY(-1px);}
.pager .pg-dir{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px;}
.pager .pg-title{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pager .pg-next{text-align:right;}

/* ---------- Toast + back to top ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);background:var(--text);color:#fff;font-family:var(--mono);font-size:12px;padding:9px 16px;border-radius:100px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:200;}
#toast.show{opacity:1;transform:translate(-50%,0);}
#toTop{position:fixed;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--text-dim);box-shadow:var(--shadow-md);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:15px;z-index:150;}
#toTop:hover{color:var(--accent-deep);border-color:var(--accent);}
#toTop.show{display:flex;}

@media(max-width:640px){
  .nav-inner{padding:11px 14px;gap:10px;}
  .nav-id{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nav-pill{padding:7px 12px;font-size:12px;}
  .breadcrumb{font-size:11px;}
  .sub-card{padding:18px 16px;}
  .terminal-body{font-size:11.5px;padding:13px 14px;}
  .pager{flex-direction:column;}
  .pager .pg-next{text-align:left;}
}

@media(prefers-reduced-motion:reduce){*{transition:none !important;}}

/* ---------- Print: flatten to a single readable document ---------- */
@media print{
  header.nav,aside.sidebar,aside.toc-rail,.pager,#toTop,#toast,.term-copy,.anchor{display:none !important;}
  .layout{display:block;}
  main.content{max-width:none;padding:0;}
  section.chapter{display:block !important;page-break-before:always;}
  section.chapter:first-of-type{page-break-before:avoid;}
  .sub-card,.terminal-box{break-inside:avoid;box-shadow:none;}
  .terminal-box{background:#f5f5f7;border:1px solid #ccc;}
  .term-cmd,.file-code{color:#111;}
  .term-comment{color:#555;}
  body{background:#fff;}
}