/* RolePilot customer app - the paper/ink editorial look, terracotta accent, no third party. */

:root{
  --ink:#16212b;
  --paper:#EDE9DD;
  --panel:#E2DDCC;
  --panel-line: rgba(22,33,43,0.14);
  --accent:#D97757;
  --accent-ink:#7A3B24;
  --accent-soft: rgba(217,119,87,0.16);
  --good:#3a6346;
  --good-soft: rgba(58,99,70,0.14);
  --bad:#a34b3c;
  --bad-soft: rgba(163,75,60,0.12);
  --text:#1c2530;
  --text-soft:#5b6773;
  --radius:10px;
  --rail-w:236px;
  --mono:'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

:root[data-theme="dark"]{
  --ink:#0e151c;
  --paper:#141b22;
  --panel:#1b232c;
  --panel-line: rgba(237,233,220,0.12);
  --accent:#E8906F;
  --accent-ink:#f0c4b2;
  --accent-soft: rgba(232,144,111,0.16);
  --good:#7fb391;
  --good-soft: rgba(127,179,145,0.14);
  --bad:#e08f82;
  --bad-soft: rgba(224,143,130,0.12);
  --text:#ECE7D9;
  --text-soft:#9aa4ac;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ }
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --ink:#0e151c;
    --paper:#141b22;
    --panel:#1b232c;
    --panel-line: rgba(237,233,220,0.12);
    --accent:#E8906F;
    --accent-ink:#f0c4b2;
    --accent-soft: rgba(232,144,111,0.16);
    --good:#7fb391;
    --good-soft: rgba(127,179,145,0.14);
    --bad:#e08f82;
    --bad-soft: rgba(224,143,130,0.12);
    --text:#ECE7D9;
    --text-soft:#9aa4ac;
  }
}

*{box-sizing:border-box;}
html{height:100%;}
body{
  margin:0; min-height:100%;
  background:var(--paper);
  color:var(--text);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:500; margin:0; letter-spacing:-0.01em; }
a{ color:var(--accent-ink); }
a:hover{ text-decoration-thickness:1px; }
button{ font-family:inherit; }
:focus{ outline:2px solid var(--accent); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }
.mono{ font-family:var(--mono); font-size:0.85em; }

/* ---------------------------------------------------------------- banners */
.banner{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; font-size:0.86rem;
  border-bottom:1px solid var(--panel-line);
}
.banner[hidden]{ display:none; }
.banner-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.banner-offline{ background:var(--bad-soft); color:var(--text); }
.banner-offline .banner-dot{ background:var(--bad); }
.banner-reconnect{ background:var(--accent-soft); color:var(--text); }
.banner-reconnect .banner-dot{ background:var(--accent); }
.banner-action{
  margin-left:auto; cursor:pointer; flex:none;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:7px; padding:6px 14px; font-size:0.82rem; font-weight:500;
}
:root[data-theme="dark"] .banner-action{ background:var(--accent); color:var(--ink); }

/* ---------------------------------------------------------------- sign-in */
.view-signin{
  height:100vh; height:100dvh; overflow:hidden; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  background:var(--paper);
}
.wordmark{ font-family:'Fraunces', Georgia, serif; font-size:1.15rem; letter-spacing:-0.01em; }

.signin-aside{
  background:var(--ink); color:#ECE7D9;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  padding: max(36px, env(safe-area-inset-top)) clamp(28px, 5vw, 64px) 36px;
}
.aside-body{ max-width:460px; }
.aside-line{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.12; letter-spacing:-0.02em;
  margin:0 0 36px; max-width:15ch;
}
.sheet{ border:1px solid rgba(237,233,220,0.18); border-radius:6px; overflow:hidden; font-size:0.84rem; }
.sheet-caption{ padding:9px 14px; color:rgba(237,233,220,0.6); border-bottom:1px solid rgba(237,233,220,0.18); }
.sheet-row{
  display:grid; grid-template-columns:1.2fr 1.3fr 84px; gap:14px; align-items:center;
  padding:11px 14px; border-bottom:1px solid rgba(237,233,220,0.1);
}
.sheet-row:last-child{ border-bottom:none; }
.sheet-head{ color:rgba(237,233,220,0.6); font-size:0.78rem; }
.sheet-hot{ background:rgba(232,144,111,0.14); }
.chip{
  justify-self:end; padding:2px 10px; border-radius:99px; font-size:0.78rem;
  border:1px solid rgba(237,233,220,0.3); color:#ECE7D9;
}
.chip-good{ background:#7fb391; border-color:#7fb391; color:#0e151c; font-weight:500; }
.chip-quiet{ color:rgba(237,233,220,0.6); border-style:dashed; }
.aside-foot{ margin:0; max-width:36ch; font-size:0.86rem; color:rgba(237,233,220,0.6); }

.signin-main{
  display:flex; align-items:center; justify-content:center;
  padding: max(32px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) max(32px, env(safe-area-inset-bottom));
}
.signin-card{ width:100%; max-width:420px; }
.signin-mark{ display:none; color:var(--text); margin-bottom:20px; }
.signin-title{ font-size:2rem; line-height:1.15; max-width:18ch; }
.signin-sub{ color:var(--text-soft); margin:12px 0 0; font-size:0.95rem; max-width:44ch; }
.scopes{ list-style:none; margin:24px 0; padding:0; border:1px solid var(--panel-line); border-radius:8px; overflow:hidden; }
.scopes li{ display:flex; gap:12px; align-items:baseline; padding:11px 14px; border-bottom:1px solid var(--panel-line); font-size:0.88rem; }
.scopes li:last-child{ border-bottom:none; }
.scopes b{ font-weight:500; min-width:118px; }
.scopes span{ color:var(--text-soft); }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; margin-top:24px; padding:3px; gap:3px; border:1px solid var(--panel-line); border-radius:10px; }
.auth-tab{ padding:9px 12px; border:none; border-radius:7px; background:transparent; color:var(--text-soft); font-size:0.92rem; font-weight:500; cursor:pointer; }
.auth-tab[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
:root[data-theme="dark"] .auth-tab[aria-pressed="true"]{ background:var(--accent); color:var(--ink); }
.auth-tab[hidden]{ display:none; }
.account-form{ margin-top:18px; }
.account-form[hidden], .or-rule[hidden], .field[hidden]{ display:none; }
.btn-submit{ min-height:46px; }
.auth-switch{ margin:14px 0 0; font-size:0.88rem; color:var(--text-soft); }
.link-btn{ background:none; border:none; padding:0; font:inherit; color:var(--accent-ink); text-decoration:underline; cursor:pointer; }
.or-rule{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-soft); font-size:0.84rem; }
.or-rule::before, .or-rule::after{ content:""; flex:1; border-top:1px solid var(--panel-line); }
.view-signin.has-accounts .btn-google{ background:transparent; color:var(--text); border:1px solid var(--panel-line); }
:root[data-theme="dark"] .view-signin.has-accounts .btn-google{ background:transparent; color:var(--text); }
.scopes-lead{ margin:26px 0 10px; font-size:0.86rem; color:var(--text-soft); }
.scopes{ margin-top:0; }
.btn-google{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; }
.g-mark{ display:inline-grid; place-items:center; width:24px; height:24px; background:#fff; border-radius:50%; }
.signin-error{ color:var(--bad); font-size:0.86rem; margin:14px 0 0; }
.signin-fine{ color:var(--text-soft); font-size:0.82rem; margin:18px 0 0; }

/* one screen, no scrolling: the Google permissions collapse to chips and spacing tightens on short screens */
.signin-card .scopes{ display:flex; flex-wrap:wrap; gap:6px; margin:0; border:none; border-radius:0; overflow:visible; }
.signin-card .scopes li{ display:block; padding:3px 10px; border:1px solid var(--panel-line); border-radius:99px; font-size:0.8rem; }
.signin-card .scopes li:last-child{ border-bottom:1px solid var(--panel-line); }
.signin-card .scopes b{ min-width:0; font-weight:500; }
.signin-card .scopes span{ display:none; }
.signin-card .scopes-lead{ margin:16px 0 8px; }
.signin-card .signin-fine{ margin-top:12px; }
.signin-card .field{ margin-bottom:12px; }
.signin-card .signin-sub{ margin-top:8px; }
.signin-card .auth-tabs{ margin-top:16px; }
.signin-card .account-form{ margin-top:14px; }
.signin-card .or-rule{ margin:14px 0; }
.signin-title{ font-size:1.7rem; }
.signin-main{ overflow:hidden; }
@media (max-height: 820px){
  .signin-card .signin-fine, .aside-foot{ display:none; }
  .signin-card .input{ padding:8px 12px; }
  .signin-card .field label{ margin-bottom:4px; }
  .signin-card .field{ margin-bottom:9px; }
  .signin-title{ font-size:1.5rem; }
  .signin-mark{ margin-bottom:14px; }
}
@media (max-height: 680px){
  .signin-card .signin-sub, .signin-card .scopes-lead{ display:none; }
  .signin-card .scopes{ margin-top:12px; }
}
@media (max-height: 760px), (max-width: 860px){
  /* Trim the name field on the compact layout ONLY while it is the hidden one. The create page
     (and create mode on the single page) shows that field, and hiding it there would strip a field
     the form is asking for. */
  #nameField[hidden]{ display:none; }
}
@media (max-height: 520px){
  .view-signin{ height:auto; min-height:100vh; overflow:auto; }
}

@media (max-width: 860px){
  .view-signin{ grid-template-columns:1fr; }
  .signin-aside{ display:none; }
  .signin-mark{ display:block; }
  .signin-main{ align-items:flex-start; padding-top:max(40px, env(safe-area-inset-top)); }
  .scopes li{ flex-direction:column; gap:2px; }
}

/* ---------------------------------------------------------------- shell */
.view[hidden]{ display:none; }
.view-app{ min-height:100vh; display:grid; grid-template-columns:var(--rail-w) 1fr; }
.rail{
  background:var(--ink); color:#ECE7D9;
  display:flex; flex-direction:column;
  padding:22px 14px; gap:8px;
  position:sticky; top:0; height:100vh;
}
.rail-brand{ padding:6px 10px 18px; }
.rail .word{ font-family:'Fraunces', Georgia, serif; font-size:1.05rem; letter-spacing:-0.01em; }
.rail-items{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  appearance:none; border:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:11px;
  padding:11px 10px; border-radius:8px;
  color:#a9a58f; background:transparent; font-size:0.92rem;
  transition:background .15s ease, color .15s ease;
}
.nav-index{ font-family:var(--mono); font-size:0.7rem; color:#8b96a1; min-width:20px; }
.nav-item:hover{ color:#ECE7D9; background:rgba(237,233,221,0.06); }
.nav-item[aria-current="page"]{ color:#ECE7D9; background:rgba(217,119,87,0.22); font-weight:500; }
.nav-item[aria-current="page"] .nav-index{ color:#E8906F; }
:root[data-theme="dark"] .nav-item[aria-current="page"]{ background:rgba(232,144,111,0.2); }
/* Pinned to the viewport, not to the rail's own box. A banner at the top (offline, reconnect) is
   real flow height above the rail, so a rail of 100vh starts that much lower and pushes its own
   footer - the account line and Sign out - below the fold. Fixed keeps them on screen whatever the
   banners do, and still sits on the rail's dark column, which reaches past the viewport. */
.rail-foot{
  position:fixed; left:0; bottom:0; width:var(--rail-w);
  padding:10px 14px 14px; border-top:1px solid rgba(237,233,221,0.12);
  z-index:2;
}
.rail-user{ font-size:0.8rem; color:#a9a58f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-link{
  display:block; width:100%; margin-top:8px; appearance:none; border:1px solid rgba(237,233,221,0.22);
  border-radius:8px; background:transparent; cursor:pointer; text-align:left;
  color:#a9a58f; font-size:0.82rem; padding:8px 10px;
}
.rail-link:hover{ color:#ECE7D9; text-decoration:underline; }

.content{ padding: max(24px, env(safe-area-inset-top)) 34px 60px; max-width:960px; width:100%; margin:0 auto; }

/* ---------------------------------------------------------------- screen */
.screen{ display:none; }
.screen.active{ display:block; }
.screen-head{ padding-bottom:18px; border-bottom:1px solid var(--panel-line); margin-bottom:20px; }
.eyebrow{
  display:inline-block; color:var(--accent-ink); background:var(--accent-soft);
  padding:3px 10px; border-radius:20px; font-size:0.72rem; margin-bottom:12px;
}
.screen-title{ font-size:1.7rem; }
.screen-sub{ color:var(--text-soft); margin-top:8px; max-width:58ch; font-size:0.95rem; }
.screen-tools{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- states */
.loading{ display:flex; align-items:center; gap:10px; color:var(--text-soft); padding:28px 0; }
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--panel-line); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.state{ padding:30px 22px; border:1px dashed var(--panel-line); border-radius:12px; }
.state p{ margin:0; color:var(--text-soft); max-width:52ch; }
.state.empty{ text-align:center; }
.state.error{ border-color:var(--bad); }
.state.error p{ color:var(--bad); }

/* ---------------------------------------------------------------- primitives */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:11px 18px; border-radius:8px; font-size:0.92rem; font-weight:500;
  transition:transform .1s ease, opacity .15s ease;
}
.btn:active{ transform:scale(0.98); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.btn-primary{ background:var(--ink); color:var(--paper); }
:root[data-theme="dark"] .btn-primary{ background:var(--accent); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--text-soft); }
.btn-ghost:hover{ color:var(--text); }
.btn-danger{ background:var(--bad); color:#fff; }
.btn-block{ display:block; width:100%; }
.btn-sm{ padding:7px 12px; font-size:0.82rem; }

.input{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid var(--panel-line); background:rgba(255,255,255,0.4);
  font-family:inherit; font-size:0.92rem; color:var(--text);
}
:root[data-theme="dark"] .input{ background:rgba(255,255,255,0.05); }
.select{ width:auto; min-width:160px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; color:var(--text-soft); margin-bottom:6px; }
.field .hint{ font-size:0.78rem; color:var(--text-soft); margin-top:5px; }
.help{ font-size:0.8rem; color:var(--text-soft); }

/* ---------------------------------------------------------------- cards and rows */
.card{
  border:1px solid var(--panel-line); border-radius:12px; padding:18px 20px;
  background:rgba(255,255,255,0.28); margin-bottom:14px;
}
:root[data-theme="dark"] .card{ background:rgba(255,255,255,0.03); }
.card h3{ font-size:1rem; margin-bottom:10px; }

.kv{ display:grid; grid-template-columns:180px 1fr; gap:6px 14px; font-size:0.9rem; }
.kv dt{ color:var(--text-soft); }
.kv dd{ margin:0; word-break:break-word; }
@media (max-width:520px){ .kv{ grid-template-columns:1fr; } .kv dd{ margin-bottom:8px; } }

.row-list{ list-style:none; margin:0; padding:0; }
.row-item{
  display:block; width:100%; text-align:left;
  appearance:none; border:1px solid var(--panel-line); border-bottom:none;
  background:rgba(255,255,255,0.28); cursor:pointer;
  padding:14px 18px; font-family:inherit; font-size:0.95rem; color:var(--text);
}
:root[data-theme="dark"] .row-item{ background:rgba(255,255,255,0.03); }
.row-list .row-item:first-child{ border-radius:12px 12px 0 0; }
.row-list .row-item:last-child{ border-bottom:1px solid var(--panel-line); border-radius:0 0 12px 12px; }
.row-item:hover{ background:var(--accent-soft); }
.row-item .row-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.row-item .company{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.02rem; }
.row-item .role{ color:var(--text-soft); }
.row-item .meta{ margin-left:auto; font-size:0.8rem; color:var(--text-soft); }
.row-item .row-id{ font-family:var(--mono); color:var(--text-soft); font-size:0.78rem; }

.pill{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:0.76rem; font-weight:500;
  background:var(--panel); color:var(--text-soft); white-space:nowrap;
}
.pill-good{ background:var(--good-soft); color:var(--good); }
.pill-bad{ background:var(--bad-soft); color:var(--bad); }
.pill-accent{ background:var(--accent-soft); color:var(--accent-ink); }

/* ---------------------------------------------------------------- usage bars */
.bars{ display:flex; align-items:flex-end; gap:3px; height:140px; padding-top:8px; }
.bars .bar{
  flex:1; min-width:6px; background:var(--accent); border-radius:3px 3px 0 0;
  position:relative; transition:height .2s ease;
}
.bars .bar:hover{ opacity:0.8; }
.bars .bar span{
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-size:0.66rem; color:var(--text-soft); white-space:nowrap;
}
.bars-wrap{ overflow-x:auto; }

/* ---------------------------------------------------------------- settings */
.ops-list{ margin-top:18px; border-top:1px solid var(--panel-line); padding-top:14px; }
.ops-item{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:0.88rem; }
.ops-item .ops-key{ font-family:var(--mono); color:var(--text-soft); }
.ops-item .ops-why{ color:var(--text-soft); text-align:right; max-width:46ch; }
.diff-line{ font-family:var(--mono); font-size:0.82rem; padding:3px 0; }
.diff-line .d-field{ color:var(--accent-ink); }
.diff-line .d-old{ color:var(--bad); }
.diff-line .d-new{ color:var(--good); }
.form-errors{ border:1px solid var(--bad); border-radius:10px; padding:12px 16px; margin:14px 0; background:var(--bad-soft); }
.form-errors ul{ margin:6px 0 0; padding-left:18px; }
.form-warnings{ border:1px solid var(--panel-line); border-radius:10px; padding:12px 16px; margin:14px 0; }
.form-warnings ul{ margin:6px 0 0; padding-left:18px; color:var(--text-soft); }
.preview-box{ border:1px solid var(--panel-line); border-radius:10px; padding:14px 16px; margin:12px 0; }

/* ---------------------------------------------------------------- modal */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(10,14,18,0.6); }
.modal-card{
  position:relative; width:100%; max-width:600px; max-height:86vh; overflow:auto;
  background:var(--paper); color:var(--text); border-radius:14px; padding:28px 30px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.6);
}
.modal-close{
  position:absolute; top:14px; right:14px; appearance:none; border:none; background:none;
  cursor:pointer; font-size:1.5rem; line-height:1; color:var(--text-soft); padding:4px 8px; border-radius:6px;
}
.modal-close:hover{ color:var(--text); background:var(--panel); }
.modal-title{ font-size:1.3rem; margin-bottom:4px; }
.modal-sub{ color:var(--text-soft); font-size:0.88rem; margin-bottom:16px; }

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(16px);
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:8px;
  font-size:0.88rem; opacity:0; pointer-events:none; transition:all .22s ease; z-index:70;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.5); max-width:86vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:720px){
  .view-app{ grid-template-columns:1fr; }
  .rail{
    position:sticky; top:0; height:auto; flex-direction:row; align-items:center;
    padding:10px 12px; gap:8px; overflow-x:auto; z-index:30;
  }
  .rail-brand{ padding:0 4px 0 0; white-space:nowrap; }
  .rail-items{ flex-direction:row; gap:4px; }
  .nav-item{ padding:8px 10px; white-space:nowrap; }
  .nav-index{ display:none; }
  .rail-foot{ display:none; }
  .content{ padding:18px 16px 48px; }
  .screen-title{ font-size:1.45rem; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .spinner{ animation:none; border-top-color:var(--text-soft); }
}