/* ==========================================================================
   tix² — members.css
   The private side. Same tokens, different posture.

   What changes inside, and why:
   · ground drops from paper to --c-surface and panels come back up to paper,
     inverting the public page's figure/ground so the member area reads as a
     room you are in rather than a sheet you are reading
   · density increases — smaller rhythm, more information per screen
   · mono carries more of the interface, because inside is operational
   · gold is reserved for tier and for the single primary action per view
   ========================================================================== */

body.app{
  background:var(--c-surface);
  color:var(--c-text-2);
  font-size:var(--t-sm);
}
body.app::after{opacity:.08}   /* less grain inside; this is a workspace */

:root{ --rail:236px; --bar:60px; }

/* ---------- app shell ---------- */
.app-top{
  position:sticky;top:0;z-index:var(--z-nav);
  height:var(--bar);display:flex;align-items:center;gap:var(--s5);
  padding-inline:var(--s5);
  background:rgba(234,231,224,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-hair);
}
.app-top .mark{font-size:19px}
.app-top .spacer{margin-left:auto}

.tier{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-accent);
  border:1px solid var(--c-accent-dim);border-radius:var(--r-full);background:rgba(148,96,8,.06);
  padding:5px 11px;white-space:nowrap;
}
.tier i{width:5px;height:5px;border-radius:50%;background:var(--c-accent);flex:none}

.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--c-elevated);border:var(--border-strong);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-text-2);
}

.app-body{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:calc(100vh - var(--bar))}

/* ---------- left rail ---------- */
.rail{
  border-right:var(--border);padding:var(--s5) var(--s3);
  position:sticky;top:var(--bar);align-self:start;height:calc(100vh - var(--bar));
}
.rail h4{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-text-3);
  padding:var(--s4) var(--s3) var(--s2);font-weight:500;
}
.rail a{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-sm);
  color:var(--c-text-2);font-size:var(--t-sm);
  transition:background var(--m-fast) var(--ease),color var(--m-fast) var(--ease);
}
.rail a:hover{background:var(--c-elevated);color:var(--c-text)}
.rail a[aria-current="page"]{background:var(--c-elevated);color:var(--c-text);font-weight:600}
.rail a[aria-current="page"] .dot{background:var(--c-accent)}
.rail .dot{width:5px;height:5px;border-radius:1px;background:var(--c-line-strong);flex:none;
  transition:background var(--m-fast) var(--ease)}
.rail .count{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--c-text-3)}

/* ---------- main ---------- */
.app-main{padding:var(--s7) var(--s7) var(--s9);min-width:0}
@media (max-width:1023px){ .app-main{padding:var(--s6) var(--s5) var(--s9)} }

.greet{margin-bottom:var(--s7)}
.greet h1{font-size:clamp(1.5rem,3.2vw,2.05rem);margin-bottom:6px}
.greet p{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-text-3);letter-spacing:.04em}

.cols{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--s5)}
@media (max-width:1100px){ .cols{grid-template-columns:1fr} }

.panel{
  /* separated by tone, not by an outline round every box */
  background:var(--c-bg);border-radius:var(--r-md);
  padding:var(--s5);margin-bottom:var(--s5);
}
.panel:last-child{margin-bottom:0}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s5);
}
.panel-head h2{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em}
.panel-head a{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-text-3);
  transition:color var(--m-fast) var(--ease)}
.panel-head a:hover{color:var(--c-accent)}

/* status strip */
.status{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:1px;background:var(--c-hair);border-radius:var(--r-md);overflow:hidden}
.status div{background:var(--c-bg);padding:var(--s4)}
.status dt{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-text-3);margin-bottom:7px}
.status dd{font-size:var(--t-body);color:var(--c-text);font-weight:600;margin:0}
.status dd.mono{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500}

/* feed */
.feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--c-hair);align-items:baseline}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed .room-tag{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-data);white-space:nowrap}
.feed p{margin:0;color:var(--c-text-2)}
.feed time{font-family:var(--f-mono);font-size:11px;color:var(--c-text-3);white-space:nowrap}
@media (max-width:560px){
  .feed li{grid-template-columns:minmax(0,1fr) auto}
  .feed p{grid-column:1/-1}
}

/* progress rows */
.prog li{padding-block:var(--s3);border-bottom:1px solid var(--c-hair)}
.prog li:last-child{border-bottom:0}
.prog-top{display:flex;justify-content:space-between;gap:var(--s4);margin-bottom:7px}
.prog-top span:first-child{color:var(--c-text-2)}
.prog-top span:last-child{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-text-3)}
/* a real progress value the member generated themselves — honest to display */
.prog-bar{height:2px;background:var(--c-line);border-radius:1px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--c-data);border-radius:1px;
  transform-origin:left;transition:transform var(--m-slow) var(--ease)}

/* event rows */
.event{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--c-hair);align-items:start}
.event:last-child{border-bottom:0}
.event-date{text-align:center;border:var(--border);border-radius:var(--r-sm);padding:6px 0}
.event-date b{display:block;font-size:var(--t-body);color:var(--c-text);line-height:1.1}
.event-date span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-text-3)}
.event h3{font-size:var(--t-sm);font-weight:600;margin-bottom:3px}
.event p{margin:0;font-size:var(--t-xs);color:var(--c-text-3);font-family:var(--f-mono)}

/* ---------- states: empty / loading / error ---------- */
.state{text-align:center;padding:var(--s7) var(--s5);border:1px dashed var(--c-line);
  border-radius:var(--r-md)}
.state h3{font-size:var(--t-sm);font-weight:600;margin-bottom:6px}
.state p{font-size:var(--t-xs);color:var(--c-text-3);max-width:34ch;margin-inline:auto}
.state.err{border-style:solid;border-color:rgba(166,43,24,.4)}
.state.err h3{color:var(--c-error)}

.skel{background:linear-gradient(90deg,var(--c-elevated) 25%,var(--c-sunken) 50%,var(--c-elevated) 75%);
  background-size:300% 100%;border-radius:var(--r-xs);height:11px;
  animation:shimmer 1.5s linear infinite}
.skel+.skel{margin-top:9px}
.skel.w70{width:70%} .skel.w45{width:45%}
@keyframes shimmer{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }

/* ---------- mobile: rail becomes a bottom tab bar ---------- */
.tabs{display:none}
@media (max-width:860px){
  .app-body{grid-template-columns:1fr}
  .rail{display:none}
  .app-main{padding-bottom:calc(var(--bar) + var(--s8))}
  .tabs{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:var(--z-nav);
    background:rgba(234,231,224,.94);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--c-hair);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabs a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    min-height:56px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--c-text-3);
  }
  .tabs a[aria-current="page"]{color:var(--c-accent)}
  .tabs .dot{width:5px;height:5px;border-radius:1px;background:currentColor}
}

/* ---------- logged out ---------- */
.gate{min-height:100svh;display:grid;place-items:center;padding:var(--s5);background:var(--c-bg)}
.gate-card{max-width:400px;width:100%;text-align:center;
  background:var(--c-surface);border:var(--border-strong);border-radius:var(--r-lg);
  padding:var(--s8) var(--s6)}
.gate-card .mark{font-size:34px;margin-bottom:var(--s6)}
.gate-card h1{font-size:1.3rem;margin-bottom:var(--s3)}
.gate-card p{font-size:var(--t-sm);margin-bottom:var(--s6)}
.gate-card .btn{width:100%}
.gate-card .alt{margin-top:var(--s5);font-size:var(--t-xs);color:var(--c-text-3)}