/* =========================================================================
   Booky · profile.html  —  "The Study at Night"
   Profile-only styles. Builds ON TOP of styles.css tokens/components.
   Reuses: --bg-*, --gold*, --on-*, --tx-*, --f-*, --s*, --r-*, --ease,
           .nav .btn .card .spine .shelf .chip .reveal .glow .panel ...
   ========================================================================= */

/* ---------- The lamplit study header ---------- */
.study-head{
  position:relative; isolation:isolate;
  margin-top:var(--s5);
  padding:clamp(28px,5vw,56px) clamp(22px,4vw,48px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(130% 120% at 18% -10%, rgba(232,184,100,0.16), transparent 52%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg-card) 70%, var(--bg-night));
  box-shadow:var(--sh-warm);
}
/* the warm lamp pool behind the avatar */
.study-head::before{
  content:""; position:absolute; z-index:0; left:-4%; top:-40%;
  width:min(440px,60%); aspect-ratio:1; border-radius:50%;
  background:var(--glow-gold); filter:blur(70px); opacity:0.9; pointer-events:none;
}
/* a cool counter-glow for depth */
.study-head::after{
  content:""; position:absolute; z-index:0; right:-10%; bottom:-50%;
  width:min(420px,55%); aspect-ratio:1; border-radius:50%;
  background:var(--glow-cool); filter:blur(80px); opacity:0.7; pointer-events:none;
}
.study-head > *{ position:relative; z-index:1; }

.study-head .head-grid{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,3vw,40px);
  align-items:center;
}

/* avatar lit by the lamp */
.study-avatar{
  position:relative; width:clamp(96px,12vw,140px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--f-display); font-weight:600; font-size:clamp(40px,6vw,58px);
  color:#2a1f06;
  background:radial-gradient(circle at 35% 28%, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  box-shadow:
    0 0 0 1px rgba(255,214,138,0.5),
    0 0 44px rgba(232,184,100,0.5),
    inset 0 2px 6px rgba(255,255,255,0.4),
    inset 0 -8px 18px rgba(58,44,12,0.35);
}
.study-avatar .pulse{
  position:absolute; inset:-10px; border-radius:50%; z-index:-1;
  background:var(--glow-gold); filter:blur(14px); opacity:0.7;
  animation:lampBreathe 5.5s var(--ease) infinite;
}
@keyframes lampBreathe{ 0%,100%{ opacity:0.5; transform:scale(0.98);} 50%{ opacity:0.85; transform:scale(1.04);} }
.study-avatar .status-dot{
  position:absolute; right:6%; bottom:6%; width:22px; height:22px; border-radius:50%;
  background:var(--success); border:3px solid var(--bg-card);
  box-shadow:0 0 12px rgba(53,196,144,0.6);
}

.head-id h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(30px,4.4vw,50px);
  line-height:1.02; letter-spacing:-0.02em; margin:0; }
.head-id .handle{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  color:var(--gold-soft); font-weight:500; font-size:14px; margin-top:8px; }
.head-id .handle .sep{ color:var(--tx-faint); }
.head-id .handle .where{ color:var(--tx-low); font-weight:400; }
.head-id .bio{ color:var(--tx-med); font-size:15.5px; line-height:1.6; max-width:48ch; margin:14px 0 18px; }

.head-counts{ display:flex; gap:clamp(18px,3vw,34px); flex-wrap:wrap; }
.head-counts a{ display:flex; flex-direction:column; gap:2px; transition:color var(--d-fast) var(--ease); }
.head-counts a:hover b{ color:var(--gold-soft); }
.head-counts b{ font-family:var(--f-display); font-weight:600; font-size:22px; line-height:1; color:var(--on-high); }
.head-counts span{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--tx-low); }

.head-actions{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
@media (max-width:880px){
  .study-head .head-grid{ grid-template-columns:1fr; text-align:left; }
  .head-actions{ flex-direction:row; flex-wrap:wrap; }
}

/* ---------- Section heading rhythm ---------- */
.sec{ margin-top:clamp(40px,6vw,72px); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:var(--s5); flex-wrap:wrap; }
.sec-head h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(24px,3vw,32px);
  letter-spacing:-0.02em; line-height:1.05; margin:0; }
.sec-head .sub{ color:var(--tx-low); font-size:14px; margin-top:6px; }
.sec-head .eyebrow{ font-family:var(--f-text); font-weight:600; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 6px; }

/* =========================================================================
   STATS — the instrument panel
   ========================================================================= */
.instrument{
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(2,1fr) 1.3fr;
  align-items:stretch;
}
@media (max-width:980px){ .instrument{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .instrument{ grid-template-columns:1fr 1fr; } }

.gauge{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bg-card), var(--bg-night));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-card);
  transition:transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.gauge:hover{ transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:var(--sh-hi), 0 0 30px rgba(232,184,100,0.10); }
/* faint inner lamplight at top of each gauge */
.gauge::before{ content:""; position:absolute; inset:0 0 auto 0; height:60%;
  background:radial-gradient(120% 90% at 50% -30%, rgba(232,184,100,0.08), transparent 60%);
  pointer-events:none; }
.gauge .num{ font-family:var(--f-display); font-weight:600; font-size:clamp(34px,4vw,46px);
  line-height:1; color:var(--gold-soft); display:flex; align-items:baseline; gap:6px;
  text-shadow:0 0 24px rgba(232,184,100,0.22); }
.gauge .num .unit{ font-size:16px; color:var(--tx-med); font-family:var(--f-text); font-weight:600;
  text-shadow:none; }
.gauge .num .flame{ font-size:0.7em; filter:drop-shadow(0 0 8px rgba(255,138,61,0.5)); }
.gauge .cap{ margin-top:10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx-low); }
.gauge .foot{ margin-top:4px; font-size:12.5px; color:var(--tx-faint); }

/* the goal ring — memorable touch */
.gauge.ring-card{
  grid-row:span 2; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(232,184,100,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg-night));
}
@media (max-width:980px){ .gauge.ring-card{ grid-row:auto; grid-column:span 2; flex-direction:row; justify-content:space-around; } }
.ring-wrap{ position:relative; width:clamp(150px,18vw,196px); aspect-ratio:1; }
.ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ring-wrap .ring-track{ fill:none; stroke:rgba(244,241,234,0.07); stroke-width:13; }
.ring-wrap .ring-prog{ fill:none; stroke:url(#goldGrad); stroke-width:13; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(232,184,100,0.4)); }
.ring-center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-center .pct{ font-family:var(--f-display); font-weight:600; font-size:clamp(30px,3.6vw,40px);
  line-height:1; color:var(--on-high); }
.ring-center .pct .of{ display:block; font-family:var(--f-text); font-size:12px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--tx-low); margin-top:6px; }
.ring-meta .cap{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx-low); }
.ring-meta .lead{ font-family:var(--f-display); font-size:19px; color:var(--gold-soft); margin-top:4px; }

/* top genres */
.genres{ margin-top:var(--s4); }
.gbar{ display:grid; grid-template-columns:120px 1fr 46px; align-items:center; gap:14px;
  font-size:13.5px; padding:7px 0; }
.gbar .name{ color:var(--tx-med); font-weight:500; }
.gbar .track{ height:11px; background:rgba(244,241,234,0.06); border-radius:var(--r-pill); overflow:hidden; }
.gbar .track i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  border-radius:var(--r-pill); box-shadow:0 0 12px rgba(232,184,100,0.3);
  transition:width 1.1s var(--ease); }
.gbar .pct{ text-align:right; color:var(--tx-faint); font-variant-numeric:tabular-nums; font-size:12.5px; }
@media (max-width:520px){ .gbar{ grid-template-columns:84px 1fr 40px; gap:10px; } }

/* =========================================================================
   SHELVES (spines on a lit wooden ledge) + public/private
   ========================================================================= */
.shelf-row{ margin-bottom:var(--s6); }
.shelf-row .shelf-bar{ display:flex; align-items:center; gap:14px; margin-bottom:var(--s4); flex-wrap:wrap; }
.shelf-row .shelf-bar h3{ font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:-0.01em; margin:0; }
.shelf-row .shelf-bar .count{ color:var(--tx-faint); font-size:13px; }

/* the public/private toggle (bespoke, robust, persists) */
.pp{ display:inline-flex; align-items:center; gap:10px; margin-left:auto;
  padding:6px 8px 6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg-raised); backdrop-filter:blur(8px);
  cursor:pointer; min-height:40px; color:var(--tx-med); font-size:12.5px; font-weight:600;
  letter-spacing:0.04em; transition:border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.pp:hover{ border-color:var(--line-strong); color:var(--on-high); }
.pp .ppl{ display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; }
.pp .lock{ font-size:12px; opacity:0; width:0; overflow:hidden; transition:opacity var(--d-fast) var(--ease); }
.pp .sw{ width:46px; height:26px; border-radius:var(--r-pill); background:var(--line-strong);
  position:relative; flex:0 0 auto; transition:background var(--d-base) var(--ease); }
.pp .sw::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--on-high); box-shadow:0 1px 3px rgba(0,0,0,0.4); transition:transform var(--d-base) var(--ease); }
.pp[aria-checked="true"] .sw{ background:var(--success); box-shadow:0 0 14px rgba(53,196,144,0.4); }
.pp[aria-checked="true"] .sw::after{ transform:translateX(20px); }
.pp[aria-checked="false"]{ color:var(--tx-low); }
.pp[aria-checked="false"] .lock{ opacity:1; width:auto; }

/* private shelf treatment: dimmer + lock badge */
.shelf-row.is-private .shelf-stage{ opacity:0.55; filter:saturate(0.6) brightness(0.85); transition:opacity var(--d-base) var(--ease), filter var(--d-base) var(--ease); }
.shelf-row.is-private .shelf-bar h3{ color:var(--tx-med); }
.shelf-stage{ position:relative; transition:opacity var(--d-base) var(--ease), filter var(--d-base) var(--ease); }
.shelf-row .priv-veil{
  position:absolute; z-index:3; top:12px; right:16px; display:none;
  align-items:center; gap:7px; padding:7px 12px; border-radius:var(--r-pill);
  background:rgba(7,8,16,0.7); backdrop-filter:blur(8px); border:1px solid var(--line-strong);
  color:var(--tx-med); font-size:12px; font-weight:600; letter-spacing:0.04em; }
.shelf-row.is-private .priv-veil{ display:inline-flex; }

/* =========================================================================
   ACTIVITY FEED + the lifted-highlight card (signature)
   ========================================================================= */
.feed{ display:flex; flex-direction:column; gap:var(--s4); }
.feed .act{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-soft);
  transition:transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.feed .act:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--sh-card); }
.feed .act .ic{ width:40px; height:40px; flex:0 0 auto; border-radius:var(--r-md); display:grid; place-items:center;
  font-size:17px; color:var(--gold-soft); background:rgba(232,184,100,0.12); border:1px solid rgba(232,184,100,0.18); }
.feed .act .body{ flex:1; min-width:0; }
.feed .act .line{ font-size:14.5px; color:var(--tx-med); }
.feed .act .line b{ color:var(--on-high); font-weight:600; }
.feed .act .line i{ color:var(--gold-soft); font-style:italic; }
.feed .act .time{ margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--tx-faint); white-space:nowrap; }

/* the lifted highlight: a quote line lifts off the page into a glowing note */
.lift{ margin-top:14px; position:relative; padding-left:18px; }
.lift::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold-deep)); box-shadow:0 0 12px rgba(232,184,100,0.4); }
.lift .quote{
  font-family:var(--f-display); font-style:italic; font-size:17px; line-height:1.5; color:var(--on-high);
  background:radial-gradient(120% 140% at 0% 0%, rgba(232,184,100,0.10), transparent 60%);
  padding:14px 16px; border-radius:var(--r-md); border:1px solid rgba(232,184,100,0.16);
  transform:translateY(8px); opacity:0; transition:transform var(--d-cine) var(--ease), opacity var(--d-cine) var(--ease); }
.reveal.in .lift .quote, .feed.in .lift .quote{ transform:none; opacity:1; }
.lift .note{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:var(--tx-low); }
.lift .note .pg{ color:var(--gold-soft); font-weight:600; }

/* book chip inside activity */
.act .mini-cover{ width:34px; height:48px; border-radius:4px; flex:0 0 auto;
  box-shadow:0 4px 10px rgba(7,8,16,0.5), inset 0 0 0 1px rgba(255,255,255,0.06); }

/* layout: shelves + side rail */
.profile-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; margin-top:var(--s5); }
@media (max-width:1000px){ .profile-cols{ grid-template-columns:1fr; } }

/* =========================================================================
   Reduced motion: final values, no breathing/parallax
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .study-avatar .pulse{ animation:none; }
  .gbar .track i{ transition:none; }
  .lift .quote{ transition:none; transform:none; opacity:1; }
  .ring-wrap .ring-prog{ transition:none; }
}