/* ASTRA SCHOOL – clean corporate-document layout. All rule content remains unchanged. */
:root {
  color-scheme:light;
  --ink:#182338;
  --body:#293241;
  --muted:#68768a;
  --line:#e3e8ef;
  --blue:#204f82;
  --paper:#fff;
  --soft:#f5f8fb;
  --focus:#397ec0;
  font-family:"Noto Sans Thai", "Sarabun", Tahoma, system-ui, sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--paper);color:var(--body);margin:0;line-height:1.88;font-size:18px}
button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hidden{display:none!important}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{max-width:990px;margin:auto;padding:8px 30px;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;gap:12px;align-items:center;font-weight:800;font-size:18px;letter-spacing:.03em;color:#1a3455;white-space:nowrap;line-height:1.25}
.brand-logo{display:block;width:auto;height:64px;max-width:110px;object-fit:contain;flex:none}
.topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.role-pill{color:var(--muted);font-size:13px}
.button{font-size:14px;padding:8px 14px;border-radius:6px;font-weight:650;border:1px solid transparent;background:transparent;white-space:nowrap}
.button.outline{border-color:#c9d3df;color:var(--blue);background:#fff}
.button.quiet{border-color:#dae2eb;color:#475568;background:#fff}
.button.primary{background:#204f82;color:#fff;border-color:#204f82}
.button.full{width:100%}
.button:hover{background:#f0f5fa}
.button.primary:hover{background:#173e67}
.main{max-width:930px;margin:0 auto;padding:54px 32px 0;min-width:0}
.hero{padding-bottom:34px;border-bottom:2px solid #26466d}
.hero-kicker{margin:0 0 13px;color:var(--blue);font-size:13px;letter-spacing:.1em;font-weight:800;line-height:1.5}
.hero h1{color:var(--ink);font-size:clamp(33px,4.2vw,49px);font-weight:820;line-height:1.4;letter-spacing:-.025em;margin:0}
.hero h1 span{font-weight:800}
.hero-desc{color:#546376;font-size:19px;margin:15px 0 9px}
.stats{color:var(--muted);font-size:14px;margin:12px 0 0}
.stats strong{color:#34526f;font-weight:750}
.dot{padding:0 8px;color:#b2bdca}
.toc{padding:19px 0 22px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px 20px;align-items:baseline;font-size:15px}
.toc-label{color:var(--ink);font-weight:800;margin-right:2px}
.toc a{color:#335e86;text-decoration:underline;text-decoration-color:#b9cad8;text-underline-offset:4px}
.toc a:hover{color:#122c4d;text-decoration-color:currentColor}
.search-shell{display:flex;align-items:center;gap:10px;margin:28px 0 4px}
.search-wrap{min-width:0;flex:1;display:flex;align-items:center;gap:12px;border:1px solid #cbd5e1;border-radius:6px;padding:0 15px;background:#fff;color:#63758b}
.search-wrap:focus-within{outline:2px solid #aac9e8;outline-offset:1px}
.search-wrap input{color:var(--ink);border:0;background:transparent;outline:0;min-width:0;width:100%;padding:12px 0;font-size:16px}
.search-wrap input::placeholder{color:#8190a1}
.preview-notice{background:#f4f7fa;border-left:3px solid #859bb2;color:#536276;padding:12px 16px;margin:23px 0 0;font-size:14px;line-height:1.7}
.content-top{min-height:30px;text-align:right;margin:0}
.result-count{font-size:14px;color:#697d91}
.content-stack{display:block}
.document-section{padding-top:34px;padding-bottom:7px;scroll-margin-top:36px}
.document-section+.document-section{margin-top:10px}
.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid #c6d2df;padding-bottom:11px;margin:0 0 19px}
.section-header h2{color:var(--ink);font-size:28px;font-weight:820;letter-spacing:-.018em;line-height:1.5;margin:0}
.section-caption{color:#7b8896;font-size:13px}
.section-caption:empty{display:none}
.principles-text{font-size:20px;line-height:2.02;margin:13px 0 14px;white-space:pre-wrap}
.term-list{margin:0;padding:0;display:block}
.term-entry{padding:14px 0 18px;border-bottom:1px solid #e5eaf0}
.entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.term-entry dt{font-size:19px;font-weight:800;line-height:1.6;color:#1a304b}
.term-entry dd{font-size:18px;line-height:1.9;color:var(--body);margin:5px 0 0}
.rule-list{display:block}
.rule-entry{padding:20px 0 23px;border-bottom:1px solid var(--line);scroll-margin-top:30px}
.rule-entry:target{background:#f7f9fc;outline:12px solid #f7f9fc}
.rule-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.rule-heading h3{color:#193956;font-size:21px;font-weight:820;line-height:1.55;margin:0}
.rule-body{font-size:20px;line-height:1.96;white-space:pre-wrap;margin:9px 0 9px;color:#202b3c}
.penalty{font-size:18px;line-height:1.8;font-weight:750;margin:10px 0 0;color:#394251;white-space:pre-wrap}
.penalty.yellow{color:#896218}
.penalty.orange{color:#a1511d}
.penalty.red{color:#a33030}
.link-tiny{border:0;background:transparent;padding:5px 0;margin-top:5px;color:#667e95;text-decoration:underline;text-underline-offset:3px;font-size:13px}
.link-tiny:hover{color:var(--blue)}
.edit-button{font-size:13px;padding:5px 11px;border:1px solid #cbd5df;background:#f6f8fa;color:#24527c;border-radius:5px;flex-shrink:0}
.edit-button:hover{background:#e7eef5}
.empty-state{padding:35px 0;color:#66758a}
.loading{color:#66758a}
.footer{border-top:1px solid var(--line);margin-top:54px;padding:26px 0 44px;display:flex;justify-content:space-between;gap:14px;color:#7a8898;font-size:13px;letter-spacing:.02em}
.footer span:first-child{font-weight:800;color:#385b80}
/* Admin windows deliberately remain separate from the single-column reading view. */
.modal{border:1px solid #d7e1eb;border-radius:11px;background:#fff;color:var(--body);padding:0;max-width:calc(100vw - 22px);max-height:88vh;overflow:auto;width:480px;box-shadow:0 16px 70px #101d2b40}
.modal:modal::backdrop{background:#111d2d80}
.modal:has(.wide){width:790px}
.modal-inner{padding:26px}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.modal-header h2{font-size:24px;color:var(--ink);line-height:1.5;margin:0}
.eyebrow{font-size:12px;letter-spacing:.1em;font-weight:800;color:#436d96;margin:0 0 5px}
.close{background:none;border:0;color:#56687a;font-size:30px;line-height:1;padding:0 5px}
.modal-desc{font-size:14px;color:#68798c;line-height:1.8;margin:10px 0 18px}
.field{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--body);margin:12px 0}
.field input,.field textarea{background:#fff;border:1px solid #bccad9;color:var(--ink);width:100%;min-width:0;border-radius:6px;padding:11px 12px;outline:0;font-size:16px}
.field textarea{min-height:120px;resize:vertical;line-height:1.85}
.field textarea.long{min-height:200px}
.field input:focus,.field textarea:focus{border-color:var(--focus);box-shadow:0 0 0 2px #397ec030}
.form-error{color:#ad2b39;font-size:14px;min-height:17px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
.divider{height:1px;background:var(--line);margin:22px 0}
.users-list{display:flex;flex-direction:column;gap:0;margin:10px 0}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.user-info{min-width:0}
.user-info b{display:block;font-size:16px;overflow-wrap:anywhere}
.user-info small{display:block;font-size:13px;color:var(--muted)}
.user-actions{display:flex;gap:7px;flex-wrap:wrap}
.user-row button{border-radius:5px;border:1px solid #cdd7e1;background:#fff;color:#335c82;font-size:13px;padding:5px 9px}
.user-row button.danger{color:#ad2f3d}
.add-user-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.add-user-grid .field{margin:0}
.add-user-grid button{grid-column:1/-1}
.modal h3{font-size:18px;margin:17px 0 11px}
.history-list{max-height:190px;overflow:auto;font-size:13px;color:#637287}
.history-item{border-bottom:1px solid var(--line);padding:6px 0}
.toast{position:fixed;right:18px;bottom:18px;z-index:50;background:#233b58;color:white;box-shadow:0 12px 32px #111b2c30;font-size:14px;border-radius:5px;padding:12px 16px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:700px){
  body{font-size:17px}
  .topbar-inner{padding:9px 18px;min-height:66px;align-items:flex-start}
  .brand{font-size:15px;gap:8px}
  .brand-logo{height:50px;max-width:84px}
  .topbar-right{gap:5px}
  .role-pill{display:none}
  .topbar .button{font-size:12px;padding:6px 9px}
  .main{padding:34px 19px 0}
  .hero{padding-bottom:27px}
  .hero h1{font-size:32px;line-height:1.4}
  .hero-desc{font-size:17px;margin:14px 0 8px}
  .toc{padding:16px 0;gap:5px 16px;font-size:14px}
  .search-shell{margin:22px 0 3px;gap:7px}
  .search-wrap{padding:0 9px;gap:7px}
  .search-wrap input{font-size:14px;padding:11px 0}
  .search-shell>.button{font-size:12px;padding:8px}
  .document-section{padding-top:27px}
  .section-header h2{font-size:24px}
  .principles-text,.rule-body{font-size:18px;line-height:1.95}
  .rule-heading h3{font-size:19px}
  .term-entry dt{font-size:18px}
  .term-entry dd,.penalty{font-size:17px}
  .rule-entry{padding:18px 0 19px}
  .modal-inner{padding:20px}
  .add-user-grid{grid-template-columns:1fr}
  .user-row{align-items:flex-start;flex-direction:column}
}
@media print{
  body{font-size:14px;color:black}
  .topbar-right,.search-shell,.toc,.edit-button,.link-tiny,.preview-notice,.toast{display:none!important}
  .main{padding:0 12px;max-width:none}
  .hero{padding-top:0}
  .document-section{break-inside:auto}
  .rule-entry,.term-entry{break-inside:avoid}
  .rule-body,.principles-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{transition:none}}