/* =========================================================================
   Clear, liquid glass over the whole public site (15 Oct 2026)

   Andrew asked for "more liquid and frosted glass morph design style like
   apple where applicable throughout the entire site". A first pass with a
   lighter grey slab, a bright top line, a dark bottom line and a sheen band
   was "too much emboss" and "too frosted, not liquid morph clean". So:
     - the glass is clear: the page's own colour let through, lightly
       softened (app.css: --glass, --glass-blur 10px), one even hairline
       for an edge, no bevel, no sheen;
     - controls that sit on the page are clear glass (--glass-clear): a
       faint fill and a crisp hairline;
     - the page behind a dialog or the phone's sheet is softened a little,
       not frosted over;
     - what opens over the page moves like liquid: it grows out of where it
       was opened from with a small spring, instead of appearing.
   Loaded last on every public page (views/layout.php); the admin panel has
   its own layout and does not load it. Content (campus cards, Riwayat rows,
   the report, tables) stays on the matte card. A blur is drawn only where
   something is behind it; a slow phone (html.pk-lite) gets none.

   This is the web's version of the look (backdrop-filter, transforms), an
   approximation and not Apple's material.
   ========================================================================= */

/* ---- the page behind a dialog or the phone's sheet: softened ------------- */
.modal-backdrop {
  --bs-backdrop-bg: rgba(10, 8, 6, 0.46);
  --bs-backdrop-opacity: 1;
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
}
:root:not([data-theme="dark"]) .modal-backdrop { --bs-backdrop-bg: rgba(40, 32, 24, 0.24); }
@media (max-width: 991px) {
  .pk-sheet.is-open { -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); }
}

/* ---- clear glass controls -------------------------------------------------
   The secondary button, the landing page's quiz button, the report's own
   buttons and the chat's suggestions. */
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-bg: var(--glass-clear);
  --bs-btn-hover-bg: var(--glass-clear-hover);
  --bs-btn-border-color: var(--glass-line);
  --bs-btn-disabled-bg: var(--glass-clear);
}
.btn-ghost,
.act:not(.act--go),
.chat-chip {
  background-color: var(--glass-clear);
  border-color: var(--glass-line);
}
.btn-ghost:hover,
.act:not(.act--go):hover,
.chat-chip:hover { background-color: var(--glass-clear-hover); }

/* A group of tabs is one clear capsule; the open tab keeps the lit pill. */
.hist-tabs { background-color: var(--glass-clear); border-color: var(--glass-line); }

/* Jelajahi's search: a clear capsule, like the bar above it. */
.explore-search {
  background-color: var(--glass-clear);
  border-width: 1px;
  border-color: var(--glass-line);
  box-shadow: 0 14px 32px -24px rgba(var(--shadow-rgb), 0.6);
}

/* The analysis form's rail, which stays in view beside the steps. */
@media (min-width: 992px) {
  .af-steps,
  .af .af-save { background-color: var(--glass-clear); border-color: var(--glass-line); }
}

/* ---- the landing page: glass over the pictures ------------------------------ */
.lpb-hero .btn-ghost {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* The conversation on the dotted drawing: the doubts clear glass, the
   answers the same glass tinted with the accent. */
.lpb-bub {
  background-color: var(--glass-clear);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.lpb-bub--us {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  border-color: var(--accent-line);
}
/* The closing card overlaps the campus photograph on a laptop. */
.lpb-final-card {
  background-color: var(--glass-panel);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ---- liquid: what opens grows out of where it was opened ------------------- */
@keyframes pk-liquid-in {
  from { opacity: 0; transform: scale(0.94); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.pk-pop:not([hidden]) { animation: pk-liquid-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.ss.open .ss-panel,
.ss-panel.ss-portal { transform-origin: top center; animation: pk-liquid-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@media (min-width: 576px) {
  .pk-modal.fade .modal-dialog { transform: scale(0.94); transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.18); }
  .pk-modal.show .modal-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-pop:not([hidden]), .ss.open .ss-panel, .ss-panel.ss-portal { animation: none; }
  .pk-modal.fade .modal-dialog { transition: none; }
}

/* ---- solid where glass cannot be afforded ---------------------------------- */
.pk-lite .modal-backdrop,
.pk-lite .pk-sheet.is-open,
.pk-lite .lpb-hero .btn-ghost,
.pk-lite .lpb-bub,
.pk-lite .lpb-final-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pk-lite .modal-backdrop { --bs-backdrop-bg: rgba(0, 0, 0, 0.5); }