/* Wren design system — tokens + components. Self-hosted fonts (CSP-clean). */
@import url('/fonts/fonts.css');

:root{
  /* surfaces */
  --bg:#F4F1EA; --surface:#FFF; --surface-soft:#FCFAF5; --surface-2:#FBF0EB;
  --ink:#282420; --ink-soft:#5C554C; --muted:#948C80; --muted-2:#847C72; --muted-3:#A79F92;
  --line:#EAE4D8; --line-2:#EEE8DC; --line-3:#E3DCCF; --line-4:#F1ECE1;
  /* accent — terracotta */
  --accent:#C55E3F; --accent-hover:#A94A2E; --accent-2:#E07A5F;
  --accent-wash:#FBF3EF; --accent-wash-2:#FBF0EB; --accent-line:#F0DACF; --label-incoming:#8A5A45;
  /* semantic */
  --blue:#33668A; --blue-2:#2B6CB0; --blue-wash:#EAF0F5; --blue-wash-2:#E8F0FA; --blue-line:#DCE6EC;
  --green:#3F7A56; --green-2:#2AA875; --green-wash:#E7F4EC; --green-dot:#4E9A6B; --green-line:#D6E6DC;
  --amber:#B07C2E; --amber-wash:#F6EEDD; --violet:#8B6FB0; --violet-wash:#F3EAFA;
  /* ink surfaces (dark cards) */
  --dark-1:#2C2824; --dark-2:#3A342D;
  /* type */
  --font-ui:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  /* geometry */
  --r-sm:10px; --r-md:12px; --r-lg:15px; --r-xl:16px; --r-pill:20px;
  --shadow-card:0 1px 4px rgba(0,0,0,.05);
  --shadow-accent:0 8px 20px rgba(197,94,63,.28);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;}
a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent-hover);}
::selection{background:var(--accent-line);}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;}
input,select,textarea,button{font-family:inherit;font-size:16px;} /* 16px = no iOS zoom */
button{cursor:pointer;}
.wren-scroll::-webkit-scrollbar{width:10px;height:10px;}
.wren-scroll::-webkit-scrollbar-thumb{background:#E0D9CB;border-radius:20px;border:3px solid transparent;background-clip:content-box;}
@keyframes wrenPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wrenRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rise{animation:wrenRise .3s ease both;}
.hidden{display:none!important;}

/* ---- layout shell ---- */
.app{display:flex;min-height:100vh;}
.sidebar{width:250px;flex-shrink:0;background:#EFEBE1;border-right:1px solid #E4DECF;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(197,94,63,.3);flex-shrink:0;}
.brand-mark>i{width:8px;height:8px;border-radius:50%;background:#FFF;box-shadow:0 0 0 3.5px rgba(255,255,255,.25);}
.brand-word{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.nav{display:flex;flex-direction:column;gap:3px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:all .15s;background:transparent;border:none;text-align:left;width:100%;}
.nav-item:hover{background:#E6E0D2;}
.nav-item.active{font-weight:600;color:var(--ink);background:#FFF;box-shadow:var(--shadow-card);}
.nav-item>span:first-child{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.side-foot{margin-top:auto;}
.plan-card{padding:14px;background:var(--accent-wash-2);border:1px solid var(--accent-line);border-radius:13px;}
.plan-card b{font-size:12px;font-weight:700;color:#B4603F;letter-spacing:.03em;}
.plan-card p{font-size:12.5px;color:var(--label-incoming);line-height:1.45;margin-top:5px;}
.user-chip{margin-top:12px;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;}
.user-chip:hover{background:#E6E0D2;}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}

.main{flex:1;height:100vh;overflow-y:auto;}
.topbar{position:sticky;top:0;z-index:20;background:rgba(244,241,234,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 34px;display:flex;align-items:center;gap:16px;}
.cmd{flex:1;display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:11px 16px;max-width:620px;}
.cmd input{flex:1;border:none;outline:none;font-size:14.5px;background:transparent;color:var(--ink);}
.cmd input:disabled{cursor:not-allowed;}
.cmd .mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(150deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cmd .mark>i{width:6px;height:6px;border-radius:50%;background:#FFF;}
kbd{font-size:11px;color:var(--muted-3);background:#F1ECE0;border:1px solid #E4DECF;border-radius:6px;padding:2px 7px;font-family:inherit;}
.help-item{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink-soft);background:transparent;border:none;width:100%;text-align:left;font-size:13.5px;font-weight:600;}
.help-item:hover{background:#E6E0D2;}
.help-ic{width:24px;height:24px;border-radius:7px;background:#E6DFCF;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.health-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:7px 13px;cursor:pointer;}
.hp-dot{width:8px;height:8px;border-radius:50%;animation:wrenPulse 2s infinite;flex-shrink:0;}
.hp-label{font-size:13px;font-weight:600;color:#4A443C;white-space:nowrap;}
.health-pop{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:82vw;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(40,35,32,.22);padding:16px;z-index:40;}
.hp-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-4);}
.hp-rdot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(40,35,32,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-card{width:100%;max-width:460px;background:var(--surface-soft);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(40,35,32,.28);padding:26px;}
.reach-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:7px 13px;}
.reach-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green-dot);animation:wrenPulse 2s infinite;flex-shrink:0;}
.reach-pill span{font-size:13px;font-weight:600;color:#4A443C;white-space:nowrap;}
.content{padding:30px 34px 60px;max-width:1120px;}
h1.page{font-family:var(--font-display);font-size:30px;font-weight:500;}
.page-sub{color:var(--muted-2);font-size:15px;margin-top:5px;max-width:640px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}

/* ---- components ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;}
.card-sm{border-radius:var(--r-lg);padding:18px;}
.dark-card{background:linear-gradient(155deg,var(--dark-1),var(--dark-2));color:#F4F1EA;border-radius:var(--r-xl);padding:22px;position:relative;overflow:hidden;}
.dark-card .glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(197,94,63,.35),transparent 70%);pointer-events:none;}

.btn{padding:11px 18px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface);color:var(--ink-soft);font-size:14.5px;font-weight:600;transition:transform .15s;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{border:none;background:var(--accent);color:#FFF;box-shadow:var(--shadow-accent);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btn-block{width:100%;padding:15px;font-size:16px;border-radius:13px;justify-content:center;}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.stat .label{font-size:13px;color:var(--muted);font-weight:500;}
.stat .value{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:6px;}
.stat .delta{font-size:12.5px;margin-top:2px;font-weight:600;color:var(--muted);}

.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;display:inline-block;}

/* toggle track+knob */
.tgl{border-radius:20px;flex-shrink:0;padding:2px;display:flex;transition:all .2s;cursor:pointer;border:none;}
.tgl>i{border-radius:50%;background:#FFF;box-shadow:0 1px 3px rgba(0,0,0,.2);display:block;}
.tgl.md{width:40px;height:23px;background:var(--line-3);justify-content:flex-start;}
.tgl.md>i{width:19px;height:19px;}
.tgl.md.on{background:var(--accent);justify-content:flex-end;}
.tgl.sm{width:34px;height:20px;background:var(--line-3);justify-content:flex-start;}
.tgl.sm>i{width:16px;height:16px;}
.tgl.sm.on{background:var(--green-dot);justify-content:flex-end;}

.logo-tile{border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-tile.light{background:#FFF;border:1px solid #ECE6DA;}

.field{width:100%;padding:14px;background:var(--surface);border:1px solid var(--line-3);border-radius:var(--r-md);font-size:16px;color:var(--ink);outline:none;}
.field-soft{background:var(--surface-soft);}
select.field{cursor:pointer;}
label.lbl{font-size:13px;font-weight:600;color:var(--ink-soft);}

.section-title{font-size:16px;font-weight:700;}
.meta{font-size:13px;color:var(--muted-3);}
.row{display:flex;align-items:center;gap:12px;}
.empty{padding:32px;text-align:center;color:var(--muted);font-size:14px;}
.spinner{width:22px;height:22px;border:2.5px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:24px auto;}
@keyframes spin{to{transform:rotate(360deg)}}

/* grids */
.grid{display:grid;gap:14px;}
.g4{grid-template-columns:repeat(4,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g2{grid-template-columns:1fr 1fr;}
.dash-2col{grid-template-columns:1.5fr 1fr;gap:16px;}
.auto-2col{grid-template-columns:300px 1fr;gap:16px;}

/* ---- responsive ---- */
@media(max-width:900px){
  .dash-2col,.auto-2col{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .app{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;gap:6px;}
  .brand{padding:4px 6px;}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1;justify-content:flex-end;gap:2px;}
  .nav-item>span:last-child{display:none;} /* icon-only on phone */
  .nav-item{padding:10px;}
  .side-foot{display:none;}
  .main{height:auto;}
  .topbar{padding:12px 16px;flex-wrap:wrap;}
  .cmd{order:2;max-width:none;flex-basis:100%;}
  .content{padding:20px 16px 48px;}
  .g4,.g3,.g2{grid-template-columns:1fr;}
}
@media(pointer:coarse){.btn,.btn-primary,.nav-item{min-height:44px;}}