/* --- login ---------------------------------------------------------------------- */

.login {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--s-8) + var(--s-6)) var(--s-6) var(--s-7);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 40%, var(--sky-low) 70%, var(--sky-end));
}
.login > * { position: relative; }
.login > .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login .deco .sun { left: calc(50% + 100px); right: auto; top: 50px; width: 66px; height: 66px; }
.login .deco .cloud { left: calc(50% - 205px); top: 120px; width: 110px; height: 34px; }
.login .deco .cloud::before { left: 26px; top: -22px; width: 44px; height: 44px; }
.login .deco .cloud::after { left: 62px; top: -14px; width: 32px; height: 32px; }
.login .deco .hill-far { left: 10%; bottom: -60px; width: 92%; height: 150px; }
.login .deco .hill-mid { left: -30%; bottom: -90px; width: 95%; height: 170px; }
.login .deco .hill-near { right: -35%; bottom: -110px; width: 105%; height: 190px; }
.login .brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
/* 23.3%: the logo SVG's own corner (28 of 120). */
.login .brand .logo { border-radius: 23.3%; box-shadow: var(--shadow); }
.login .brand .display { font-size: var(--fs-display); line-height: 1; }
.login .tagline { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); }
.login form {
  margin-top: var(--s-7); width: 100%; max-width: 342px; display: flex; flex-direction: column;
  gap: var(--s-3); padding: var(--s-6) var(--s-5); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.login h1 { font-size: var(--fs-h3); }
.login .banner { margin: 0; }
.login .field { display: flex; flex-direction: column; gap: var(--s-1); }

/* The picker is radios, so it works without JS. Each hidden radio sits
   inside its own person and lets taps through to the label: stacked at the
   fieldset's corner, Tira's radio once caught taps meant for Ali. */
.people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.people legend { padding: 0; margin-bottom: var(--s-2); }
.person { position: relative; display: flex; }
.people input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.people label {
  flex: 1; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--paper); display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  cursor: pointer; font-size: var(--fs-md); font-weight: 700; color: var(--ink);
}
.people .avatar { width: 26px; height: 26px; font-size: var(--fs-sm); background: var(--hill-mid); }
.person:nth-child(odd) .avatar { background: var(--hill-far); }
.people input:checked + label {
  border: 2px solid var(--accent); background: var(--paper-2); font-weight: 800; box-shadow: var(--shadow);
}
.people input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.login input[type="password"], .login input[type="text"] {
  width: 100%; height: 48px; padding: 0 var(--s-4); border-radius: var(--radius-sm); font-size: var(--fs-lg);
}
.login input[type="password"] { letter-spacing: 0.1em; }
.login .btn { height: 52px; font-size: var(--fs-lg); margin-top: var(--s-1); }
.login .foot { margin: auto 0 0; padding-top: var(--s-6); max-width: 300px; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; }

/* The EN/ID switch (D5): the login speaks the browser's language until picked. */
.login > .lang-switch {
  position: absolute; top: calc(var(--s-4) + env(safe-area-inset-top)); left: var(--s-4);
  background: var(--glass);
}

/* --- error pages (error.html): the login's sky and one card ------------------------ */

.error-card {
  margin-top: var(--s-7); width: 100%; max-width: 342px; padding: var(--s-2) var(--s-5) var(--s-5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); text-align: center;
}
.error-code { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- settings ------------------------------------------------------------------- */

/* One centred 720px column, the scene included: a short list reads better
   in the middle than stretched along the left. */
@media (min-width: 900px) { .settings-scene { margin-inline: max(var(--s-7), (100% - 720px) / 2); } }
.profile { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); box-shadow: var(--shadow-lg); }
.profile .avatar { width: 44px; height: 44px; font-size: var(--fs-h3); }
.profile b { font-size: var(--fs-lg); }
.profile form { margin-left: auto; }
.settings { display: flex; flex-direction: column; gap: var(--s-5); max-width: calc(720px + 2 * var(--s-7)); }
.set-head { margin: 0 var(--s-1) var(--s-3); font-size: var(--fs-h3); color: var(--ink); }
.set-list { padding: 0 var(--s-5); }
.set-list [hidden] { display: none; }
.set-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
  margin: 0; padding: var(--s-4) 0;
}
.set-row + .set-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.set-text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.set-label { font-weight: 700; color: var(--ink); }
.set-note { font-size: var(--fs-sm); color: var(--ink-2); }
p.set-note { padding: var(--s-3) 0 var(--s-4); }
.set-row .inline select { min-width: 0; }
/* Change password: one column of fields, as wide as a phone's, on every screen. */
.password-form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 360px; padding: var(--s-4) 0 var(--s-5); }
.password-form .field { display: flex; flex-direction: column; gap: var(--s-2); }
.password-form input { width: 100%; }
.password-form .btn { align-self: flex-start; }
.set-list > .banner { margin: var(--s-4) 0 0; }
@media (max-width: 899px) {
  .profile { margin-top: var(--s-4); }
  .set-row .inline { width: 100%; flex-wrap: nowrap; }
  .set-row .inline select { flex: 1 1 0; }
}

/* A switch: the track holds the thumb, on is the accent. */
.switch {
  flex: none; position: relative; width: 52px; height: 32px; padding: 0; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--paper-2); cursor: pointer;  /* off, not disabled */
  transition: background-color 0.15s;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow); transition: transform 0.15s;
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .thumb { transform: translateX(20px); }
.switch:disabled { cursor: default; opacity: var(--dim); }
@media (prefers-reduced-motion: reduce) { .switch, .switch .thumb { transition: none; } }