/* Jewel Portal — stylesheet
   Colours and layout live here. Page text lives in content.js. */

:root {
  --purple:#7a2a9e; --pink:#c65fd0; --blue:#1f7fc4; --crystal:#7fdcff;
  --ink:#241f36; --muted:#6b6482; --line:#e7e1f1; --bg:#faf8fd; --panel:#ffffff;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
}

/* ---------- Top bar ---------- */
.top {
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  background:linear-gradient(90deg,#ffffff,#fdf6fb);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .mark { width:52px; height:52px; }
.brand .name {
  font-size:21px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--purple),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* mobile menu toggle (hidden on desktop) */
.menu-toggle {
  display:none; margin-right:2px; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; color:var(--purple);
  flex:0 0 auto; align-items:center; justify-content:center;
}

/* ---------- Thin timezone banner (top of the content column) ---------- */
.tzbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 46px; font-size:12.5px; color:#5a5470;
  background:#f4eefb; border-bottom:1px solid #e7dcf5;
  position:sticky; top:0; z-index:10;
}
.tzbar b { color:var(--purple); font-weight:600; }
.tzbar a { color:var(--blue); text-decoration:none; font-weight:600; cursor:pointer; margin-left:auto; }
.tzbar a:hover { text-decoration:underline; }

/* ---------- Body layout ---------- */
/* The top bar stays fixed; the sidebar and the main content each scroll
   independently below it, so scrolling the page never moves the menu. */
.layout { display:flex; height:calc(100vh - 81px); overflow:hidden; }
.side {
  width:276px; flex:0 0 auto; background:var(--panel);
  border-right:1px solid var(--line); padding:16px 14px;
  height:100%; overflow-y:auto;
}

/* Big section header (Ric's Review, Anthony's Summary) */
.section-btn {
  width:100%; text-align:left; padding:12px 14px; margin:6px 0 4px; border-radius:12px;
  border:1px solid #e2d4f2; background:linear-gradient(90deg,#f5ecfc,#eef6fd);
  color:var(--purple); font-size:15px; font-weight:700; cursor:pointer; letter-spacing:.2px;
  display:flex; align-items:center; gap:9px;
}
.section-btn:hover { background:linear-gradient(90deg,#f0e2fb,#e6f1fc); }
.section-btn.active { background:linear-gradient(90deg,#e7d3f8,#d9ecfb); border-color:#cbb0ec; }
.section-btn .chev { font-size:11px; color:var(--pink); margin-left:auto; }

/* Nested group */
.group { padding:2px 0 6px 8px; border-left:2px solid #efe6f8; margin:2px 0 6px 8px; }
.subhdr {
  font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); margin:8px 6px 6px;
}

/* Plain top-level button (Resources) */
.nav-btn {
  display:block; width:100%; text-align:left; padding:11px 13px; margin:4px 0;
  border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink);
  font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none;
}
.nav-btn:hover { background:#f7f1fc; border-color:#e2d4f2; }
.nav-btn.active { background:linear-gradient(90deg,#efe0fb,#e4f2fd); border-color:#cbb0ec; color:var(--purple); }

/* Little box sub-items */
.nav-item {
  display:block; width:100%; text-align:left; padding:9px 12px; margin:4px 0;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:all .15s; text-decoration:none;
}
.nav-item:hover { background:#f7f1fc; border-color:#dcc9f0; }
.nav-item.active { background:linear-gradient(90deg,#efe0fb,#e4f2fd); border-color:#cbb0ec; color:var(--purple); font-weight:600; }

.signout {
  display:block; text-align:center; padding:9px 12px; margin:2px 0 4px;
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:9px; background:#fff;
}
.signout:hover { background:#f7f1fc; color:var(--purple); border-color:#dcc9f0; }

.mini-hr { height:1px; background:var(--line); margin:8px 4px; }
.big-div { height:2px; background:linear-gradient(90deg,#e7d3f8,#d9ecfb); margin:14px 4px; border-radius:2px; }

/* R row: all on one line */
.r-row { display:flex; gap:5px; padding:2px 2px 4px; }
.r-btn {
  flex:1 1 0; min-width:0; text-align:center; padding:9px 0; border-radius:8px;
  background:#f4eefb; border:1px solid #e2d4f2; font-size:12.5px; font-weight:700;
  color:var(--purple); cursor:pointer; text-decoration:none;
}
.r-btn:hover { background:#ece0f8; }
.r-btn.active { background:var(--purple); color:#fff; border-color:var(--purple); }

/* ---------- Content ---------- */
.main { flex:1; min-width:0; height:100%; overflow-y:auto; }
#page { padding:30px 46px; }
#page > * { max-width:900px; }
.crumb { font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:.3px; }
.page-title { font-size:28px; font-weight:700; margin:0 0 8px; color:var(--ink); }
.lede { font-size:15px; color:#4a4460; margin:0 0 24px; max-width:660px; line-height:1.55; }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:24px 26px; margin-bottom:18px;
}
.card h3 { margin:0 0 12px; font-size:15px; color:var(--purple); font-weight:700; }
.card p, .card li { font-size:14px; line-height:1.65; color:#3a3452; }
.card ol, .card ul { margin:10px 0 0; padding-left:22px; }
.card li { margin:6px 0; }
.tag {
  display:inline-block; font-size:11px; font-weight:600; color:var(--blue);
  background:#e7f3fc; border:1px solid #cde6f8; padding:3px 10px; border-radius:999px; margin-bottom:14px;
}
.placeholder { color:var(--muted); font-style:italic; font-size:13.5px; }

/* ---------- Plain document text (Anthony's docs, kept close to the original) ---------- */
.doc { font-size:14.5px; line-height:1.6; color:#2f2a45; max-width:760px; }
.doc h3 { font-size:17px; color:var(--purple); font-weight:700; margin:26px 0 8px; }
.doc h3:first-child { margin-top:0; }
.doc p { margin:0 0 10px; }
.doc b, .doc strong { color:var(--purple); font-weight:700; }
.doc .note { color:var(--muted); font-style:italic; }
.doc ol, .doc ul { margin:0 0 10px; padding-left:26px; }
.doc ol { list-style-type:decimal; }
.doc ol ol { list-style-type:lower-alpha; margin:4px 0 4px; }
.doc ol ol ol { list-style-type:lower-roman; }
.doc ul { list-style-type:disc; }
.doc li { margin:3px 0; padding-left:2px; }
.doc .time { color:var(--blue); font-size:13px; }
.doc hr { border:none; border-top:1px solid var(--line); margin:20px 0; }
.doc .source {
  display:inline-block; font-size:12px; font-weight:600; color:var(--purple);
  background:#f4eefb; border:1px solid #e2d4f2; padding:5px 12px; border-radius:999px;
  margin:0 0 18px;
}

/* ---------- Embedded PDF (Ric's Review main page) ---------- */
.pdf-wrap { max-width:900px; }
.pdf-actions { margin:0 0 14px; display:flex; gap:10px; flex-wrap:wrap; }
.pdf-btn {
  display:inline-block; padding:9px 16px; border-radius:10px; text-decoration:none;
  font-size:13.5px; font-weight:600; border:1px solid #cbb0ec;
  background:linear-gradient(90deg,#efe0fb,#e4f2fd); color:var(--purple);
}
.pdf-btn:hover { background:linear-gradient(90deg,#e7d3f8,#d9ecfb); }
.pdf-frame {
  width:100%; height:78vh; min-height:520px; border:1px solid var(--line);
  border-radius:14px; background:#fff;
}

/* Backdrop for mobile drawer */
.backdrop { display:none; position:fixed; inset:0; background:rgba(36,31,54,.35); z-index:15; }

/* ---------- Timezone picker modal ---------- */
.tz-modal { display:none; position:fixed; inset:0; z-index:50; align-items:flex-start; justify-content:center; }
.tz-modal.show { display:flex; }
.tz-overlay { position:absolute; inset:0; background:rgba(36,31,54,.42); backdrop-filter:blur(2px); }
.tz-dialog {
  position:relative; z-index:1; margin-top:9vh; width:min(460px, 92vw);
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(36,31,54,.28); padding:18px 18px 14px;
  display:flex; flex-direction:column; max-height:78vh;
}
.tz-dialog-head { display:flex; align-items:center; margin-bottom:12px; }
.tz-dialog-title { margin:0; font-size:17px; font-weight:700; color:var(--purple); }
.tz-close {
  margin-left:auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--muted); font-size:14px; cursor:pointer;
}
.tz-close:hover { background:#f7f1fc; color:var(--purple); }
.tz-search {
  width:100%; padding:11px 13px; border:1px solid #dcc9f0; border-radius:11px;
  font-size:14px; font-family:inherit; color:var(--ink); outline:none; margin-bottom:12px;
}
.tz-search:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(198,95,208,.15); }
.tz-list { overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding-right:2px; }
.tz-option {
  display:flex; align-items:center; text-align:left; width:100%; padding:10px 12px;
  border:1px solid transparent; border-radius:10px; background:#fff; color:var(--ink);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:all .13s;
}
.tz-option:hover { background:#f7f1fc; }
.tz-option.selected { background:linear-gradient(90deg,#efe0fb,#e4f2fd); border-color:#cbb0ec; color:var(--purple); font-weight:600; }
.tz-option-detect { border:1px dashed #dcc9f0; margin-bottom:2px; }
.tz-opt-meta { margin-left:auto; color:var(--muted); font-size:12px; font-weight:500; }
.tz-none { padding:14px 6px; color:var(--muted); font-size:13px; font-style:italic; }

/* ---------- Responsive ---------- */
@media (max-width:820px) {
  .menu-toggle { display:inline-flex; }
  .top { padding:10px 14px; gap:10px; }
  .brand .mark { width:40px; height:40px; }
  .brand .name { font-size:19px; }

  .layout { height:auto; overflow:visible; }
  .main { height:auto; overflow:visible; }
  #page { padding:22px 18px; }
  #page > * { max-width:100%; }

  .tzbar { padding:7px 18px; font-size:12px; }
  .tzbar a { margin-left:0; }

  .side {
    position:fixed; top:0; left:0; height:100vh; z-index:30; width:82%; max-width:320px;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:2px 0 18px rgba(0,0,0,.14);
  }
  .side.open { transform:translateX(0); }
  .backdrop.show { display:block; }

  .doc, .lede { max-width:100%; }
  .pdf-frame { height:70vh; }
}