/* Frondesk design system — tokens + components. Self-hosted fonts (CSP-clean). */
@import url('/fonts/fonts.css?v=3');

:root{
  /* surfaces */
  --bg:#F4F1EA; --surface:#FFF; --surface-soft:#FCFAF5; --surface-2:#dde9fd;
  --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 — Frondesk blue (CD 2026-07-09) */
  --accent:#2f6bed; --accent-hover:#1f4fc0; --accent-2:#6296f2;
  --accent-wash:#eaf1fe; --accent-wash-2:#dde9fd; --accent-line:#cfe0ff; --label-incoming:#3f6fcf;
  /* 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 (CD 2026-07-09: Space Grotesk display + JetBrains Mono labels) */
  --font-ui:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  /* 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(47,107,237,.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-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:#1f4fc0;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(47,107,237,.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;}}

/* ============================================================================
   frondesk WORDMARK (CD Logo Lab, 2026-07-09) — the "t" is drawn as a DESK + ".ai" badge.
   Authoritative CD values (uploads/frontdesk-wordmark.html). NO separate tile/box mark —
   the wordmark IS the logo. Self-hosted Space Grotesk 600.
   ============================================================================ */
.fd{
  --fd-size:20px; --fd-blue:#2F6BED; --fd-blue-fade:#2F6BED; --fd-ink:#000000;
  --fd-leg-w:.115em; --fd-surface-h:.075em; --fd-corner:.15em; --fd-advance:.19em;
  --fd-leg-x:.0515em; --fd-surface-len:2.302em;
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:var(--fd-size);
  letter-spacing:-.035em; display:inline-flex; align-items:baseline; color:var(--fd-ink); line-height:1;
}
.fd__fron{ background:linear-gradient(90deg,var(--fd-blue-fade),var(--fd-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.fd__desk{ position:relative; display:inline-block; width:var(--fd-advance); height:.7em;
  vertical-align:baseline; color:var(--fd-blue); }
.fd__desk::before{ content:""; position:absolute; left:var(--fd-leg-x); bottom:0;
  width:var(--fd-surface-len); height:.59em;
  border-left:var(--fd-leg-w) solid currentColor; border-top:var(--fd-surface-h) solid currentColor;
  border-top-left-radius:var(--fd-corner); box-sizing:border-box; }
.fd__desk-word{ position:relative; z-index:1; }
.fd__ai{ font-size:.36em; font-weight:700; color:#fff; background:#3F82FF; padding:.18em .42em;
  border-radius:.45em; margin-left:.24em; letter-spacing:.01em; align-self:center; }
.fd--dark{ --fd-blue:#6FA0FF; --fd-blue-fade:#B4CCFF; --fd-ink:#F4F5F7; }
.fd--dark .fd__ai{ color:#14161C; background:#6FA0FF; }

/* No I-beam on non-input text — text reads as UI, not an editable field (Yaakov 2026-07-09) */
body{cursor:default}
a[href],button,select,summary,[role=button],[role=link],[role=tab],[role=menuitem],[role=switch],[tabindex="0"],.nav-item,.btn,.btn-lp,.btn-primary-lp,.btn-ghost-lp,.cta,.linkbtn,.desk,.health-pill,.user-chip,.help-item,.reach-pill{cursor:pointer}
input:not(:disabled),textarea:not(:disabled),[contenteditable=true]{cursor:text}
input:disabled,textarea:disabled,button:disabled{cursor:default}