/* Bàn học Chốn Riêng — the scan.chonrieng.com look: a desk lamp in a dark room, one accent (lamp
   yellow), League Spartan for display, Be Vietnam Pro for text. Sheet, toast and buttons are the
   same as in cr-scan, so the tools feel like one family. */
:root {
  --ink: #0f0e0c;
  --ink-2: #171512;
  --ink-3: #211e1a;
  --paper: #f2ede3;
  --muted: #a59d8f;
  --line: rgba(242, 237, 227, 0.12);
  --lamp: #f2c14e;
  --lamp-ink: #1b1508;
  --wood: #5b3d29;
  --r: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "League Spartan", "Be Vietnam Pro", system-ui, sans-serif;
  --body: "Be Vietnam Pro", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; /* browsers without dvh */
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 30% -10%, rgba(242, 193, 78, 0.1), transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* the room fills the screen under the top bar; the page itself does not scroll there */
body.is-room { height: 100vh; height: 100dvh; overflow: hidden; }
body.is-sheet { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 8px; }
/* views and layers take the focus themselves when they open: no ring around a whole screen */
[data-view-focus]:focus-visible, .sheet-panel:focus-visible { outline: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar: the brand ---------- */
.top {
  display: flex; align-items: center; gap: 10px 16px;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 10px;
}
.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -0.03em; text-decoration: none;
}
/* a phone on its side: no top bar over the room and a slimmer tab bar, so the room keeps the 320 px it needs */
@media (max-height: 500px) {
  body.is-room .top { display: none; }
  body.is-room .tabbar { padding-top: 2px; padding-bottom: calc(2px + var(--safe-b)); }
  body.is-room .tab { min-height: 40px; padding-top: 2px; gap: 0; }
  body.is-room .tab-camera-disc { margin-top: 0; width: 28px; height: 28px; }
}

/* ---------- tab bar: Quán, Bàn học, Camera (raised), Phòng, Tôi ---------- */
/* the last child of the page column and sticky: on a short page it rests at the bottom of the screen, on a
   long one it stays there while the page scrolls; in the room (a page that does not scroll) it simply
   takes its row, so the 3D room keeps what is left. The sheet (z 40) and the file view (z 42) cover it. */
.tabbar {
  position: sticky; bottom: 0; z-index: 30; flex: none; width: 100%;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 4px 6px calc(6px + var(--safe-b));
  background: rgba(15, 14, 12, 0.94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.is-sheet .tabbar, body.is-file .tabbar { visibility: hidden; }
.tab {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; padding: 4px 0 2px;
  border: 0; border-radius: 12px; background: none; color: var(--muted); text-decoration: none;
  font-size: 0.7rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.tab .ico { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--lamp); font-weight: 600; }
.tab:active { color: var(--paper); }
.tab-initials { display: grid; place-items: center; width: 24px; height: 24px; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--lamp); }
/* Camera sits higher than the rest: a lamp-yellow disc, so the thumb finds it first */
.tab--camera { color: var(--paper); }
.tab-camera-disc {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: -16px; border-radius: 50%;
  background: var(--lamp); color: var(--lamp-ink); box-shadow: 0 6px 20px -6px rgba(242, 193, 78, 0.7);
}
.tab-camera-disc .ico { width: 22px; height: 22px; }
@media (min-width: 760px) {
  .tabbar { padding-left: calc(50% - 320px); padding-right: calc(50% - 320px); }
}

/* ---------- views ---------- */
.views { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.view { width: 100%; max-width: 640px; margin: 0 auto; padding: 6px 20px 36px; }
.view-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 10vw, 3.2rem); line-height: 1; letter-spacing: -0.03em;
  margin: 12px 0 10px;
}
.lead { color: #d8d1c4; margin: 0 0 22px; max-width: 34em; }
.hint-small { color: var(--muted); font-size: 0.86rem; margin: 10px 0 0; }

/* launchpad: rounded icons, the name under each */
.launchpad {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 4px;
}
/* a tile is a button, or a link (Camera) that must look the same */
.app {
  display: grid; justify-items: center; gap: 9px; width: 100%; padding: 4px 0;
  border: 0; border-radius: 18px; background: none; text-decoration: none;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.app-icon {
  display: grid; place-items: center; width: 66px; height: 66px; flex: none;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(242, 237, 227, 0.1);
  transition: transform 0.15s var(--ease);
}
.app-icon svg { display: block; width: 100%; height: 100%; }
.app:active .app-icon { transform: scale(0.93); }
.app-icon--scan { background: var(--ink); }
.app-icon--camera { background: var(--paper); }
.app-name { font-size: 0.84rem; font-weight: 500; line-height: 1.25; text-align: center; white-space: nowrap; color: var(--paper); }
@media (min-width: 760px) {
  .launchpad { margin-top: 44px; gap: 36px 24px; }
  .app-icon { width: 92px; height: 92px; border-radius: 24px; }
  .app-name { font-size: 0.98rem; }
}

/* room: the 3D room (or the plain note) fills what the top bar leaves */
.view--room { position: relative; flex: 1; min-height: 0; max-width: none; padding: 0; display: flex; flex-direction: column; }
.room-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.room-note {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px; text-align: center; color: #d8d1c4; pointer-events: none;
}
.room-note p { margin: 0; max-width: 26em; }
.room-note button { pointer-events: auto; }

/* tools */
.tool-head { display: flex; align-items: center; gap: 4px; margin: 8px 0 8px -10px; }
.tool-head .view-title { margin: 0; font-size: clamp(2.1rem, 9vw, 2.8rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0.85em 1.4em;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--lamp { background: var(--lamp); color: var(--lamp-ink); box-shadow: 0 8px 30px -10px rgba(242, 193, 78, 0.55); }
.btn--lamp:hover { background: #ffd56e; }
.btn--ghost { background: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover { border-color: rgba(242, 237, 227, 0.3); }
.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; padding: 0.55em 1.05em; font-size: 0.94rem; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--paper);
}
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn--glass { background: rgba(15, 14, 12, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- footer ---------- */
.foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px calc(28px + var(--safe-b)); color: var(--muted); font-size: 0.84rem; }
.foot p { margin: 0 0 10px; }
.foot a { color: var(--paper); }
.privacy { display: flex; gap: 10px; align-items: flex-start; }
.privacy .ico { margin-top: 2px; color: var(--lamp); }

/* ---------- sheet (what the room opens) ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.sheet-panel {
  position: relative; width: 100%; max-width: 560px;
  background: var(--ink-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(18px + var(--safe-b));
  display: grid; gap: 12px;
  animation: rise 0.35s var(--ease);
}
.sheet-panel > div { display: grid; gap: 10px; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.sheet-title { font-family: var(--display); font-size: 1.7rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.sheet-text { margin: 0; color: #d8d1c4; }
.sheet-later { justify-self: center; }
.tool-row { /* a button, or a link (Camera) that must look the same */
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--ink); text-align: left; text-decoration: none;
}
.tool-row:active { background: var(--ink-3); }
.tool-row .app-icon { width: 46px; height: 46px; border-radius: 13px; }
.tool-row b { display: block; font-weight: 600; }
.tool-row small { display: block; color: var(--muted); font-size: 0.86rem; }

/* ---------- toast ---------- */
.toast {
  /* --toast-lift: set from JS while a layer's own buttons sit at the bottom (liftToast in js/toast.js) */
  position: fixed; left: 50%; bottom: max(calc(24px + var(--safe-b)), calc(var(--toast-lift, 0px) + 8px)); z-index: 60;
  transform: translateX(-50%); width: min(92vw, 520px);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--paper); color: var(--ink); font-size: 0.92rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast-action { flex: none; margin-left: auto; background: none; border: 0; color: var(--ink); font-weight: 700; text-decoration: underline; padding: 6px 0; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}