/* Halaman Profil: tipografi isi dokumen, kartu data, daftar SO. */
.smk-page { margin: 0; min-block-size: 100dvh; color: #173b2e; font: 1rem/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 500px at 10% -10%, #c9f1e6 0, transparent 60%), radial-gradient(900px 500px at 100% 0, #d8f3d0 0, transparent 55%), #f3fbf8; background-attachment: fixed; }
.smk-wrap { max-inline-size: 62rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 3rem; }
.smk-title { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; color: #0c3b2a; }
main:focus { outline: none; }

.smk-notice { padding: .9rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid #bfe3d0; }
.smk-notice--warn { background: #fff8e6; border-color: #f0d9a0; }

.smk-card { margin: 0 0 1.25rem; padding: 1.1rem 1.25rem 1.25rem; border-radius: 16px; background: rgba(255, 255, 255, .78); border: 1px solid #d4eadf; box-shadow: 0 8px 24px -18px rgba(8, 70, 55, .45); }
.smk-card h2 { margin: 0 0 .7rem; font-size: 1.15rem; color: #0c3b2a; }
.muted { color: #6b8a7c; }

.smk-kv { inline-size: 100%; border-collapse: collapse; }
.smk-kv th, .smk-kv td { padding: .45rem .5rem; text-align: start; vertical-align: top; border-block-end: 1px solid #e3f1ea; }
.smk-kv th { inline-size: 40%; font-weight: 600; color: #2c6a50; }
.smk-kv tr.group th { padding-block-start: .9rem; color: #0c3b2a; border-block-end-color: #bfe3d0; }
.smk-kv tr.sub th { padding-inline-start: 1.5rem; font-weight: 500; }

.table-wrap { overflow-x: auto; }
.smk-table, .doc-content table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.smk-table th, .smk-table td, .doc-content td, .doc-content th { padding: .5rem .65rem; border: 1px solid #dcece4; text-align: start; }
.smk-table thead th { background: #e4f5ec; color: #0c3b2a; }
.smk-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.smk-table tbody tr:nth-child(even) { background: rgba(228, 245, 236, .45); }

.smk-details { border-block-start: 1px solid #e3f1ea; padding-block: .35rem; }
.smk-details > summary { cursor: pointer; padding: .45rem .2rem; font-weight: 600; }
.smk-details[open] > summary { color: #0b7a4b; }

/* Struktur organisasi */
.smk-so { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.smk-so__item { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .8); border: 1px solid #d4eadf; border-block-start: 4px solid #5fcf8d; }
.smk-so__jabatan { font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: #2c6a50; font-weight: 700; }
.smk-so__nama { font-size: 1.1rem; color: #0c3b2a; }
.smk-so__kosong { color: #6b8a7c; }

.smk-btn { padding: .6rem 1.1rem; border-radius: 12px; border: 1px solid #bfe3d0; background: linear-gradient(180deg, #c5f2d3, #e5f8ec); color: #0c3b2a; font: inherit; font-weight: 600; cursor: pointer; }
.smk-btn:hover { background: linear-gradient(180deg, #a8e8bf, #d6f4e1); }
.smk-btn:focus-visible { outline: 3px solid #0b7a4b; outline-offset: 2px; }
.smk-back { margin-block-start: 1.75rem; }

/* Isi dokumen Google Docs */
.doc-content { padding: 1.25rem clamp(1rem, 3vw, 1.75rem); border-radius: 16px; background: rgba(255, 255, 255, .82); border: 1px solid #d4eadf; overflow-wrap: anywhere; }
.doc-content > :first-child { margin-block-start: 0; }
.doc-content > :last-child { margin-block-end: 0; }
.doc-content h2, .doc-content h3, .doc-content h4, .doc-content h5 { line-height: 1.3; color: #0c3b2a; margin: 1.6em 0 .5em; }
.doc-content p { margin: 0 0 .9em; }
.doc-content img { max-inline-size: 100%; block-size: auto; border-radius: 8px; }
.doc-content a { color: #0b7a4b; }
.doc-content ul, .doc-content ol { margin: 0 0 1em; padding-inline-start: 1.5rem; }
.doc-content li > p { margin: 0; }
.doc-content .lvl-1 { margin-inline-start: 1.5rem; } .doc-content .lvl-2 { margin-inline-start: 3rem; } .doc-content .lvl-3 { margin-inline-start: 4.5rem; }
.doc-content .ta-center { text-align: center; } .doc-content .ta-right { text-align: end; } .doc-content .ta-justify { text-align: justify; }
.doc-content hr { border: 0; border-block-start: 1px solid #cfe6db; margin: 1.5em 0; }

/* Statistik peserta didik */
.smk-table--stat { max-inline-size: 36rem; margin-block-end: 1.25rem; }
.smk-table--stat caption { text-align: start; font-weight: 700; padding-block: .4rem; color: #0c3b2a; }
.smk-table--stat tbody th { font-weight: 500; text-align: start; }
.smk-table--stat tfoot th, .smk-table--stat tfoot td { background: #e4f5ec; font-weight: 700; }

/* dipakai di portal admin (admin/cek-siswa.php) agar latar halaman tidak ikut berubah */
.adm-embed.smk-page { background: none; min-block-size: 0; }
.adm-embed .smk-card { margin-block-start: 0; }

/* Bagan struktur organisasi (tab SO dengan kolom Tingkat) */
.org-scroll { overflow-x: auto; margin: 0 0 1.5rem; padding: .25rem .25rem 1rem; }
.org { --gap: .6rem; --min: 8rem; --max: 14rem; --garis: #6fbf94; display: flex; flex-direction: column; inline-size: 100%; min-inline-size: min-content; }
.org-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(var(--min), var(--max))); justify-content: center; gap: var(--gap); padding-block-start: 1.75rem; }
.org-row--top { padding-block-start: 0; }
/* batang turun dari tingkat di atas, rel mendatar, lalu cabang ke tiap kotak */
.org-row:not(.org-row--top)::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; block-size: .875rem; border-inline-start: 2px solid var(--garis); }
.org-row:not(.org-row--top)::before {
  content: ""; position: absolute; inset-block-start: .875rem; border-block-start: 2px solid var(--garis);
  /* dari tengah kotak pertama ke tengah kotak terakhir (kolom dipusatkan) */
  inline-size: calc((min(var(--max), max(var(--min), (100% - (var(--n) - 1) * var(--gap)) / var(--n))) + var(--gap)) * (var(--n) - 1));
  inset-inline-start: 50%; transform: translateX(-50%);
}
.org-row:not(.org-row--top) > .org-box::before { content: ""; position: absolute; inset-block-start: calc(-.875rem - 2px); inset-inline-start: 50%; block-size: calc(.875rem + 2px); border-inline-start: 2px solid var(--garis); }
.org-box { position: relative; display: flex; flex-direction: column; gap: .3rem; justify-content: center; padding: .7rem .6rem; overflow-wrap: anywhere; text-align: center; border-radius: 12px; background: #fff; border: 2px solid #9fd5b6; box-shadow: 0 8px 18px -14px rgba(8, 70, 55, .6); }
.org-box .smk-so__jabatan { font-size: .74rem; }
.org-box .smk-so__nama { font-size: .88rem; line-height: 1.35; }
.org-box .smk-so__kosong { font-size: .8rem; }
.org-box--pimpinan { background: linear-gradient(180deg, #c5f2d3, #ffffff); border-color: #5fcf8d; }
.org-box--lembaga { background: #f4faf7; border-style: dashed; }
.org-box__link { font-size: .85rem; font-weight: 600; color: #0b7a4b; }
.org-daftar .smk-kv th { inline-size: 45%; }

@media (max-width: 640px) {
  /* ponsel: bagan menjadi susunan menurun, tanpa garis mendatar */
  .org { inline-size: auto; }
  .org-row { grid-template-columns: 1fr; padding-block-start: 1.25rem; gap: .5rem; }
  .org-row:not(.org-row--top)::before, .org-row:not(.org-row--top) > .org-box::before { display: none; }
  .org-row:not(.org-row--top)::after { block-size: 1.25rem; }
}