/* LPM Leran Kulon: sistem desain bersama untuk semua halaman.
   Warna diambil dari logo (hijau tua dan emas). Jenjang ditampilkan sebagai penggaris usia. */

:root{
  --bg:#F1FCEC; --butter:#FFF1B0; --sky:#C6F0F8; --surface:#FFFFFF; --tint:#DAF6D2;
  --ink:#0B2A1E; --muted:#44634F; --line:#BDE5B5; --field-line:#5E8A6E;
  --forest:#0A6B49; --forest-deep:#064632; --on-forest:#F1FCEC; --on-forest-muted:#C4EBD2;
  --gold:#FFB703; --gold-text:#8A5600;
  --coral:#FF6B5B; --teal:#12B5CB; --lime:#B6E83A; --grad-brand:linear-gradient(135deg,#0A7B52 0%,#10A37A 55%,#14B8C4 100%); --grad-sun:linear-gradient(135deg,#FFD23F,#FFA000);
  --btn-bg:#0A7B52; --btn-ink:#FFFFFF;
  --focus:#B45F00; --danger:#D62F25; --ok:#14804A;

  /* tangga jenjang: makin tua makin dewasa */
  --s1:#FFE45E; --s2:#C8EC4A; --s3:#6FDC7A; --s4:#25C48A; --s5:#0B8F73; --s6:#0A5C55;
  --on-1:#3A2A00; --on-2:#1B3300; --on-3:#06280F; --on-4:#032A1B; --on-5:#FFFFFF; --on-6:#FFFFFF;

  --font-head:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(1.1rem,4vw,2.25rem);
  --r-s:10px; --r-m:16px; --r-l:28px;
  --ticks:repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 14px);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08201A; --butter:#2A2508; --sky:#0A2B33; --surface:#0F3024; --tint:#16402F; --ink:#EAF7EE; --muted:#A8CDB6; --line:#1F5640; --field-line:#5FA37F;
    --forest:#0B6B49; --forest-deep:#052A1F; --gold-text:#FFCB3D;
    --btn-bg:#FFB703; --btn-ink:#10230F; --focus:#FFD23F; --danger:#FF8F86; --ok:#6FE3A0;
  }
}
:root[data-theme="dark"]{
  --bg:#08201A; --butter:#2A2508; --sky:#0A2B33; --surface:#0F3024; --tint:#16402F; --ink:#EAF7EE; --muted:#A8CDB6; --line:#1F5640; --field-line:#5FA37F;
  --forest:#0B6B49; --forest-deep:#052A1F; --gold-text:#FFCB3D;
  --btn-bg:#FFB703; --btn-ink:#10230F; --focus:#FFD23F; --danger:#FF8F86; --ok:#6FE3A0;
}

*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-head);margin:0;line-height:1.08;letter-spacing:-.01em;font-weight:800;}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.2rem}
p{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp,.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.logo{display:block;width:52px;height:52px;object-fit:contain;flex:none}

/* tombol */
.btn,.btn-install{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-head);font-weight:680;font-size:1rem;line-height:1.15;letter-spacing:-.012em;padding:.85rem 1.4rem;border-radius:var(--r-s);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn-primary,.btn-install{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover,.btn-install:hover{background:var(--gold);border-color:var(--gold);color:#0A2B21}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--field-line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--tint)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:wait}
.btn-install{padding:.55rem .9rem;font-size:.9rem}
.btn-install.icon{width:2.5rem;height:2.5rem;padding:0;border-radius:var(--r-s)}
.btn-install svg{width:1.2em;height:1.2em;flex:none}

/* isian */
label{display:block;font-family:var(--font-head);font-weight:640;font-size:.95rem;margin:.9rem 0 .35rem;letter-spacing:-.012em}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--field-line);border-radius:var(--r-s);padding:.75rem .9rem;transition:border-color .15s,box-shadow .15s}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 45%,transparent)}
input[aria-invalid="true"]{border-color:var(--danger)}
textarea{resize:vertical;min-height:4.5rem}
.hint,.error,.msg{font-family:var(--font-body);font-size:.92rem;margin-top:.4rem;min-height:1.4em}
.hint{color:var(--muted)}
.error,.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}

/* dialog */
dialog.how{max-width:27rem;width:calc(100% - 2rem);max-height:calc(100vh - 2rem);overflow:auto;border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--surface);color:var(--ink);padding:1.6rem;font-family:var(--font-body);font-size:1rem;line-height:1.6}
dialog.how::backdrop{background:rgba(6,24,17,.62)}
dialog.how h2{font-size:1.4rem;margin-bottom:.6rem}
dialog.how ol{margin:.5rem 0 1rem;padding-left:1.25rem}
dialog.how li{margin:.35rem 0}

/* halaman dalam (masuk, agenda, hadir): pita hijau dengan garis ukur */
.page-band{position:relative;min-height:100vh;isolation:isolate;overflow-x:clip}
/* pita hijau di kepala halaman: tingginya mengikuti isi, jadi tidak menimpa kartu di bawahnya */
.page-band .band{position:relative;padding:1.25rem 0 2.6rem}
.page-band .band::before,.page-band .band::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%)}
.page-band .band::before{top:0;bottom:0;background:var(--grad-brand)}
.page-band .band::after{bottom:0;height:14px;background:repeating-linear-gradient(90deg,#FFD23F 0 3px,transparent 3px 14px)}
.page-band :focus-visible{outline-color:var(--focus)}
.back-top{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem .45rem .7rem;border-radius:var(--r-s);border:1.5px solid rgba(234,243,236,.45);color:var(--on-forest);text-decoration:none;font-family:var(--font-head);font-weight:640;font-size:.95rem;transition:background-color .15s,border-color .15s}
.back-top:hover{background:rgba(234,243,236,.12);border-color:var(--on-forest)}
.back-top:focus-visible,.page-band .brand:focus-visible{outline-color:#F2C14E}
.back-top svg{width:1.1em;height:1.1em;flex:none}
.page-band .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--font-head);font-weight:720;color:var(--on-forest);letter-spacing:-.012em}
.page-band .brand .logo{width:44px;height:44px;background:#fff;border-radius:10px;padding:2px}
.page-band h1{color:var(--on-forest)}
.page-band .lede{color:var(--on-forest-muted)}

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

/* ===== halaman dalam: masuk, hadir, agenda ===== */
.page-band .wrap{max-width:40rem;margin:0 auto;padding:0 var(--gutter) 3.5rem}
.page-band .topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.page-band .band>h1{font-size:clamp(2rem,6vw,2.9rem);font-weight:790;letter-spacing:-.012em}
.page-band .band>.sub{color:var(--on-forest-muted);margin-top:.55rem;max-width:34rem}
.page-band .sub{color:var(--muted);margin-top:.4rem}
.page-band .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,3.5vw,1.6rem);margin-top:1.25rem}
.page-band .panel h2{font-size:1.3rem;margin-bottom:.4rem}
.page-band label:first-child{margin-top:0}
.page-band .opt{font-weight:400;color:var(--muted)}
.page-band .btn{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.page-band .btn:hover{background:var(--gold);border-color:var(--gold);color:#0A2B21}
.page-band .btn-ghost{background:transparent;color:var(--ink);border-color:var(--field-line)}
.page-band .btn-ghost:hover{background:var(--tint);border-color:var(--ink);color:var(--ink)}
.page-band .btn-block{width:100%;margin-top:1.25rem}
.page-band .done{border:1.5px solid var(--ok)}
.page-band .done h2{color:var(--ok)}
.page-band .done .btn{margin-top:1rem}
.page-band .empty{color:var(--muted);padding:1.5rem 0}
.page-band .back{display:inline-block;margin-top:1.25rem;color:var(--muted)}

/* pilihan daftar hadir */
.page-band .choices{display:grid;gap:.6rem;margin-top:1.5rem}
.page-band .choice{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-m);padding:1rem 1.15rem;transition:border-color .15s,background-color .15s}
.page-band .choice:hover{border-color:var(--ink)}
.page-band .choice[aria-pressed="true"]{border-color:var(--forest);background:var(--tint);box-shadow:inset 0 0 0 1px var(--forest)}
.page-band .choice strong{display:block;font-family:var(--font-head);font-size:1.12rem;letter-spacing:-.012em}
.page-band .choice span{display:block;color:var(--muted);font-size:.92rem}
.page-band .who{margin-top:2rem}
.page-band .who h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;color:var(--ink)}
.page-band .who .n{font-size:.95rem;font-weight:500;color:var(--muted);font-family:var(--font-body);letter-spacing:0}
.page-band .who ol{list-style:none;margin:.8rem 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.page-band .who li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1rem .75rem;padding:.75rem 1.05rem;border-bottom:1px solid var(--line)}
.page-band .who li:last-child{border-bottom:0}
.page-band .who li.new{background:var(--tint);box-shadow:inset 5px 0 0 var(--gold)}
.page-band .who .o,.page-band .who .t{color:var(--muted);font-size:.88rem}

/* agenda */
.page-band.wide .wrap{max-width:74rem}
.page-band .cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem}
.page-band .cal-head h2{margin:0;text-transform:capitalize;font-size:1.5rem}
.page-band .cal-nav{display:flex;gap:.4rem}
.page-band .cal-nav button{font:inherit;font-weight:700;width:2.6rem;height:2.6rem;border-radius:var(--r-s);border:1.5px solid var(--field-line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s}
.page-band .cal-nav button:hover{background:var(--tint);border-color:var(--ink)}
.page-band .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.page-band .dow{text-align:center;font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--muted);padding-bottom:.3rem}
.page-band .day{font:inherit;color:var(--ink);min-height:5rem;padding:.35rem .4rem;text-align:left;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s}
.page-band .day:hover{border-color:var(--ink)}
.page-band .day.today{border:2px solid var(--gold)}
.page-band .day.sel{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
.page-band .day.empty{border:0;background:none;cursor:default}
.page-band .day b{font-family:var(--font-head);font-size:.98rem;font-weight:700}
.page-band .tts{display:block;min-width:0;margin-top:2px}
.page-band .tt{display:block;margin-top:2px;padding:.05rem .35rem;font-size:.72rem;line-height:1.35;border-radius:5px;background:var(--tint);color:var(--ink);box-shadow:inset 3px 0 0 var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-band .tt.d{box-shadow:inset 3px 0 0 var(--ok);color:var(--muted);text-decoration:line-through}
.page-band .tt.more{box-shadow:inset 3px 0 0 var(--field-line);color:var(--muted)}
.page-band .dots{display:none;gap:3px;flex-wrap:wrap}
.page-band .dots i{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.page-band .dots i.d{background:var(--ok)}
.page-band .evs{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.page-band .ev{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.page-band .ev .chk{flex:none;width:2.2rem;height:2.2rem;border-radius:var(--r-s);border:1.5px solid var(--field-line);background:var(--surface);color:transparent;font-size:1.1rem;font-weight:800;cursor:pointer}
.page-band .ev .chk[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.page-band .ev .chk:disabled{cursor:default;opacity:.65}
.page-band .ev .bd{flex:1;min-width:0}
.page-band .ev strong{display:block;font-family:var(--font-head);overflow-wrap:anywhere;letter-spacing:-.012em}
.page-band .ev.isdone strong{text-decoration:line-through;color:var(--muted)}
.page-band .ev small{display:block;color:var(--muted);font-size:.88rem}
.page-band .cd{display:inline-block;margin-top:.35rem;padding:.12rem .65rem;border-radius:6px;background:var(--tint);font-family:var(--font-head);font-size:.82rem;font-weight:700}
.page-band .cd.soon{background:var(--gold);color:#0A2B21}
.page-band .ev .del{flex:none;border:0;background:none;color:var(--danger);font:inherit;font-size:.9rem;cursor:pointer;padding:.25rem}
.page-band .row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.page-band.wide #app{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"cal up" "cal day";gap:1rem;align-items:start;margin-top:0}
.page-band.wide #app .panel{margin-top:0}
.page-band .p-up{grid-area:up}.page-band .p-cal{grid-area:cal}.page-band .p-day{grid-area:day}
@media (max-width:900px){.page-band.wide #app{grid-template-columns:minmax(0,1fr);grid-template-areas:"up" "cal" "day"}}
@media (max-width:560px){.page-band .tts{display:none}.page-band .dots{display:flex}.page-band .day{min-height:3.1rem;padding:.25rem}.page-band .row2{grid-template-columns:1fr}.page-band .topbar{flex-wrap:wrap}}


/* ===== lapisan cerah & hidup ===== */
body{background:var(--bg)}
.btn-primary,.btn-install,.page-band .btn,.login-link{background:var(--grad-brand);border-color:transparent;box-shadow:0 8px 18px -8px rgba(10,123,82,.7)}
.btn-primary:hover,.btn-install:hover,.page-band .btn:hover,.login-link:hover{background:var(--grad-sun);border-color:transparent;color:#2A1B00;transform:translateY(-2px);box-shadow:0 12px 22px -8px rgba(255,160,0,.8)}
.btn-ghost,.page-band .btn-ghost{background:var(--surface);box-shadow:none}
.btn-ghost:hover,.page-band .btn-ghost:hover{background:var(--tint);box-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary,:root:not([data-theme="light"]) .btn-install,:root:not([data-theme="light"]) .page-band .btn,:root:not([data-theme="light"]) .login-link{background:var(--grad-sun);color:#10230F}}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .btn-install,:root[data-theme="dark"] .page-band .btn,:root[data-theme="dark"] .login-link{background:var(--grad-sun);color:#10230F}

input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--forest);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 55%,transparent)}
dialog.how{border:0;border-radius:var(--r-l);box-shadow:0 30px 60px -20px rgba(6,60,40,.55)}

/* halaman dalam */
.page-band .panel{border:0;box-shadow:0 18px 36px -22px rgba(10,90,60,.55),0 0 0 1px var(--line)}
.page-band .choice{box-shadow:0 6px 14px -10px rgba(10,90,60,.5);transition:transform .15s,border-color .15s,background-color .15s}
.page-band .choice:hover{transform:translateY(-2px);border-color:var(--forest)}
.page-band .choice[aria-pressed="true"]{background:linear-gradient(135deg,#DFF8D6,#FFF3B8);border-color:var(--forest)}
.page-band .who li.new{background:linear-gradient(90deg,#FFF3B8,transparent);box-shadow:inset 5px 0 0 var(--gold)}
.page-band .day{transition:transform .15s,border-color .15s,box-shadow .15s}
.page-band .day:hover{transform:translateY(-2px);border-color:var(--forest);box-shadow:0 8px 14px -10px rgba(10,90,60,.6)}
.page-band .day.today{border:2px solid var(--gold);background:linear-gradient(180deg,#FFF8D6,var(--surface))}
.page-band .day.sel{background:var(--grad-brand);border-color:transparent}
.page-band .tt{background:#E5F9DE;box-shadow:inset 3px 0 0 var(--gold)}
.page-band .cd.soon{background:var(--grad-sun)}
.page-band .ev{background:var(--surface);box-shadow:0 6px 14px -12px rgba(10,90,60,.6)}
.page-band .cal-nav button:hover{background:var(--gold);border-color:var(--gold)}


/* status berkas: hijau disetujui, oranye revisi, merah belum dikumpulkan, biru menunggu diperiksa */
.st{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:700;font-size:.82rem;padding:.22rem .7rem .22rem .3rem;border-radius:999px;white-space:nowrap;line-height:1.2}
.st i{width:1.2rem;height:1.2rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.78rem;font-weight:800;line-height:1;color:#fff;flex:none}
.st-ok{background:#D6F6E1;color:#0A6A38}.st-ok i{background:#16A34A}
.st-rev{background:#FFE7BD;color:#8A4A00}.st-rev i{background:#F59E0B}
.st-no{background:#FFD9D9;color:#9A1B1B}.st-no i{background:#E5484D}
.st-wait{background:#D5E7FF;color:#1B4C9E}.st-wait i{background:#2F80ED}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .st-ok{background:#12402A;color:#93E8B3}
  :root:not([data-theme="light"]) .st-rev{background:#4A3410;color:#FFCF73}
  :root:not([data-theme="light"]) .st-no{background:#4A1D1D;color:#FFA3A3}
  :root:not([data-theme="light"]) .st-wait{background:#1C3354;color:#A9CBFF}
}
:root[data-theme="dark"] .st-ok{background:#12402A;color:#93E8B3}
:root[data-theme="dark"] .st-rev{background:#4A3410;color:#FFCF73}
:root[data-theme="dark"] .st-no{background:#4A1D1D;color:#FFA3A3}
:root[data-theme="dark"] .st-wait{background:#1C3354;color:#A9CBFF}

/* jarak konten dari pita */
.page-band .band+*{margin-top:1.6rem}
.page-band #app,.page-band.wide #app{margin-top:1.6rem}
.page-band .band+.panel,.page-band .band+.choices{margin-top:1.6rem}

/* ===== tata letak lebar untuk layar desktop ===== */
.page-band.cols .wrap,.page-band.duo-page .wrap{max-width:88rem}
.page-band.cols #gate{max-width:34rem}
.page-band.cols #app{display:grid;grid-template-columns:minmax(17rem,22rem) minmax(0,1fr);gap:1.5rem;align-items:start}
.page-band.cols .side{display:grid;gap:1rem;position:sticky;top:1rem}
.page-band.cols .side>*{margin:0 !important}
.page-band.cols .dks{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));align-items:start}
.page-band.cols #list>.sub{grid-column:1/-1}

.page-band .duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.page-band .duo-a>.panel{max-width:42rem}
.page-band .duo-a>.panel:first-child,.page-band .duo-a>.choices:first-child{margin-top:0}
.page-band .duo-b .who{margin-top:0}
.page-band .who h2{font-size:1.3rem}
.page-band.duo-page .duo:not(:has(.who:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.page-band.duo-page .duo:not(:has(.who:not([hidden]))) .choices{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));margin-top:0}
.page-band.split .wrap{max-width:66rem}
.page-band.split .duo{grid-template-columns:minmax(0,27rem) minmax(0,1fr)}
.page-band .duo>.panel.info{margin-top:0}
.page-band .info h2{margin-bottom:.8rem}
.page-band .info ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.page-band .info li a{display:block;padding:.8rem 1rem;border-radius:var(--r-m);background:var(--bg);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.page-band .info li a:hover{border-color:var(--forest);transform:translateY(-2px)}
.page-band .info li strong{display:block;font-family:var(--font-head)}
.page-band .info li span{color:var(--muted);font-size:.92rem}
@media (max-width:900px){
  .page-band.cols #app,.page-band .duo,.page-band.split .duo{grid-template-columns:minmax(0,1fr)}
  .page-band.cols .side{position:static}
  .page-band .duo-a>.panel{max-width:none}
  .page-band.duo-page .duo:not(:has(.who:not([hidden]))) .choices{grid-template-columns:minmax(0,1fr)}
}