/* Performle — Manager OS v4 · "Warm & Human" editorial skin */

/* ---------- design tokens · WARM LIGHT (default: paper + ink) ---------- */
:root{
  color-scheme:light;
  --bg:#f4eee1; --panel:#fffdf8; --panel2:#f2ebdb; --panel3:#ebe2cf;
  --line:#e8dec9; --line2:#ddd0b6; --line3:#cbbb9c;
  --tx:#2a241b; --tx2:#574e3f; --mut:#897e69; --mut2:#a99c83; --dim:#c5b99e;
  --violet:#C0327E; --violet-dim:#f0c4d8; --violet-bg:#fbeaf2;
  --cyan:#C2682B; --cyan-dim:#ecd4bd; --cyan-bg:#f7ece1;
  --green:#5d7a39; --green2:#4f7a55; --green-bg:#e9efd8; --green-ln:#ccd9af;
  --amber:#b07d1c; --amber-dim:#e7d3a0; --amber-bg:#f6ecd1;
  --red:#b1452f; --red-bg:#f6e1d8; --red-ln:#e6c2b3;
  --blue:#2f6ea3; --gold:#b8801f;
  --go-bg:#C0327E; --go-tx:#fbf9f4; --go-hv:#a32a6c;
  --saybar-bg:#f0e7d6; --shadow:0 14px 40px rgba(80,60,25,.13);
  --orb-hi:#f2c6d9; --orb-lo:#C0327E; --orb-glow:rgba(192,50,126,.3);
  --walk-tx:#fbf9f4;
  --radius:14px; --radius-sm:10px;
}
/* ---------- WARM DARK (toggle: espresso, never cold slate) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1a1611; --panel:#221d16; --panel2:#2a241b; --panel3:#332b20;
  --line:#2e2820; --line2:#3a3328; --line3:#4a4030;
  --tx:#f0e9da; --tx2:#cbc0ab; --mut:#9c907a; --mut2:#766c58; --dim:#544b3a;
  --violet:#f2a8cb; --violet-dim:#5e2a46; --violet-bg:#34202c;
  --cyan:#eeb07e; --cyan-dim:#3e2b1f; --cyan-bg:#231a13;
  --green:#a9cc7e; --green2:#82c79a; --green-bg:#212717; --green-ln:#39482a;
  --amber:#e2b25a; --amber-dim:#4a3c1e; --amber-bg:#241d10;
  --red:#e88a72; --red-bg:#2a1b16; --red-ln:#5a2c20;
  --blue:#6fa8d6; --gold:#e0a93f;
  --go-bg:#cf4791; --go-tx:#f4f0ff; --go-hv:#e06aa8;
  --saybar-bg:#1d1812; --shadow:0 16px 44px rgba(0,0,0,.5);
  --orb-hi:#c4b5fd; --orb-lo:#7c3aed; --orb-glow:rgba(139,92,246,.4);
  --walk-tx:#17120a;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:clamp(13px,1.1vw,14px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Newsreader',Georgia,serif; font-weight:500; margin:0; letter-spacing:-.005em}
a{color:var(--violet); text-decoration:none}
button{font-family:'Hanken Grotesk',sans-serif; cursor:pointer}
input,textarea,select{font:inherit; color:var(--tx)}
.mono,.tile .n,.signal .v,.hm-avg{font-variant-numeric:tabular-nums}
.err{color:var(--red); font-size:12.5px; min-height:16px; margin-top:6px}
.muted{color:var(--mut)}
.dim{color:var(--mut2)}

/* buttons (Floor "go" + soft) */
.btn{border:1px solid var(--line2); background:var(--panel2); color:var(--tx2);
  padding:8px 14px; border-radius:9px; font-weight:500; font-size:13px;
  transition:.15s; display:inline-flex; align-items:center; gap:6px}
.btn:hover{border-color:var(--line3); color:var(--tx)}
.btn.primary{background:var(--go-bg); border-color:transparent; color:var(--go-tx); font-weight:600}
.btn.primary:hover{background:var(--go-hv)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:5px 10px; font-size:12px}
.btn.lg{padding:13px 16px; font-size:14px; width:100%; justify-content:center}
.btn.danger{color:var(--red); background:var(--red-bg); border-color:var(--red-ln)}

/* login (Floor gate) */
.login{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 0%, #efe6d3 0%, var(--bg) 60%); z-index:90; padding:20px}
.login-card{width:min(380px,94vw); background:var(--panel); border:1px solid var(--line2);
  border-radius:16px; padding:30px 28px; box-shadow:var(--shadow)}
.login-card input{width:100%; background:var(--panel2); border:1px solid var(--line3);
  border-radius:9px; padding:11px 13px; margin-top:10px; outline:none}
.login-card input:focus{border-color:var(--violet-dim)}
.login-card .btn{margin-top:14px}
.brand{font-size:18px; letter-spacing:.02em; display:flex; align-items:center; gap:8px; font-weight:600}
.brand b{font-weight:700}
.brand .logo{color:var(--violet)}
.brand.sm{font-size:15px}
.tagline{font-family:'Newsreader',serif; color:var(--mut); font-size:13px; margin:10px 0 18px}

/* app shell — THE FLOOR: topbar + room stage + tile dock */
.floorwrap{display:flex; flex-direction:column; height:100vh; overflow:hidden}
.topbar{flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:clamp(8px,1.4vw,16px);
  padding:8px clamp(10px,2.4vw,26px); border-bottom:1px solid var(--line); min-height:56px; background:var(--panel)}
.wordmark{font-size:12.5px; font-weight:700; letter-spacing:.22em; white-space:nowrap; display:inline-flex; align-items:center; gap:9px}
.mark{flex:none; display:block}
.grad{background:linear-gradient(100deg,#E07A2C,#C0327E); -webkit-background-clip:text; background-clip:text; color:transparent}
.dots{display:flex; gap:4px; align-items:center}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--line3); cursor:pointer; transition:.2s}
.dots i:hover{background:var(--mut); transform:scale(1.4)}
.dots i.on{background:var(--violet)}
.iconbtn{font-size:14px; color:var(--mut); background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:6px 9px; line-height:1}
.iconbtn:hover{color:var(--tx2); border-color:var(--line3)}
.who{font-size:12px; color:var(--mut2); white-space:nowrap}

.floor{flex:1; min-height:0; position:relative; overflow:hidden; padding:clamp(8px,1.6vw,16px)}
.room{height:100%; display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--line2); border-radius:clamp(10px,1.6vw,18px); overflow:hidden; animation:roomin .34s ease}
@keyframes roomin{from{opacity:.45; transform:scale(.985)} to{opacity:1; transform:none}}
.doorframe{flex:none; display:flex; align-items:center; gap:11px; padding:11px clamp(14px,2vw,24px);
  border-bottom:1px solid var(--line); font-family:'Newsreader',serif; font-size:18px; font-weight:600; color:var(--tx)}
.doorframe::before{content:''; width:9px; height:9px; border-radius:3px; background:var(--tint,var(--violet)); flex:none}
.doorframe #crumb{display:flex; align-items:center; gap:8px}
.doorframe .dim{font-family:'Hanken Grotesk',sans-serif; font-size:13px; font-weight:400}
.doorframe .doorstat{margin-left:auto; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:500; color:var(--mut2); text-transform:uppercase; letter-spacing:.08em}
.roombody{flex:1; overflow-y:auto; padding:clamp(16px,2vw,26px) clamp(14px,2vw,26px) 40px;
  scrollbar-width:thin; scrollbar-color:var(--line3) transparent}

/* tile dock (the hallway) */
.hallway{flex:none; display:flex; gap:8px; padding:8px clamp(10px,2vw,22px) 12px; overflow-x:auto; scrollbar-width:none}
.hallway::-webkit-scrollbar{display:none}
.mini{flex:1 1 0; min-width:132px; background:var(--panel); border:1px solid var(--line2);
  border-radius:12px; padding:10px 13px; cursor:pointer; transition:.16s; text-align:left; font:inherit}
.mini:hover{border-color:var(--line3); transform:translateY(-2px)}
.mini.here{border-color:var(--tint,var(--violet)); background:var(--panel2)}
.mini .mname{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); display:flex; align-items:center; gap:6px; font-weight:600}
.mini .mname::before{content:''; width:6px; height:6px; border-radius:2px; background:var(--tint,var(--mut2)); flex:none}
.mini.here .mname{color:var(--tx)}
.mini .mglance{font-family:'Newsreader',serif; font-size:15px; color:var(--tx2); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* layout helpers */
.wrap{max-width:940px; margin:0 auto}
.row{display:flex; gap:14px}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.grid{display:grid; gap:14px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.section-h{font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--mut2);
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; margin:26px 0 12px}
.section-h:first-child{margin-top:0}

/* cards */
.card{background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:16px}
.card.pad-lg{padding:22px}
.card.click{cursor:pointer; transition:.14s}
.card.click:hover{border-color:var(--violet-dim)}
.tile{background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:16px}
.tile .n{font-family:'Newsreader',serif; font-size:30px; font-weight:600}
.tile .l{color:var(--mut); font-size:12px; margin-top:2px}

/* list rows */
.rowcard{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--panel);
  border:1px solid var(--line2); border-radius:11px; margin-bottom:8px; transition:.12s}
.rowcard.click{cursor:pointer}
.rowcard.click:hover{border-color:var(--violet-dim)}
.rowcard .nt{flex:1; min-width:0}
.rowcard .nt b{font-weight:600}
.rowcard .nt small{display:block; color:var(--mut2); font-size:11.5px}
.av{width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:600; font-size:13px; background:var(--violet-bg);
  border:1px solid var(--violet-dim); color:var(--violet)}
.av.lg{width:54px; height:54px; font-size:18px}

/* chips / pills (Floor statchip palette) */
.chip{font-size:10px; font-weight:600; padding:3px 9px; border-radius:99px; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid var(--line3); color:var(--mut); white-space:nowrap}
.chip.win{color:var(--green); border-color:var(--green-ln); background:var(--green-bg)}
.chip.block{color:var(--red); border-color:var(--red-ln); background:var(--red-bg)}
.chip.task{color:var(--amber); border-color:var(--amber-dim); background:var(--amber-bg)}
.chip.topic{color:var(--cyan); border-color:var(--cyan-dim); background:var(--cyan-bg)}
.chip.over{color:var(--red); border-color:var(--red-ln); background:var(--red-bg)}
.chip.violet{color:var(--violet); border-color:var(--violet-dim); background:var(--violet-bg)}

/* empty + note */
.empty{text-align:center; color:var(--mut); padding:38px 22px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); font-size:12.5px; line-height:1.7}
.empty-rule{width:34px; height:2px; background:var(--violet); border-radius:2px; margin:0 auto 14px; opacity:.65}
.empty b{font-family:'Newsreader',serif; color:var(--tx); display:block; font-size:18px; margin-bottom:5px; font-weight:500; letter-spacing:-.01em}
.note{font-size:12px; color:var(--violet); background:var(--violet-bg); border:1px solid var(--violet-dim);
  border-radius:10px; padding:11px 13px; line-height:1.55}
.note.warn{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-dim)}
.note.warn ul{margin:6px 0 0; padding-left:18px}
.note b{font-weight:600}

/* suggestion / confirm cards */
.sugg{border:1px solid var(--line2); border-left:3px solid var(--violet); border-radius:11px;
  padding:13px 14px; margin-bottom:10px; background:var(--panel)}
.sugg .txt{margin:7px 0 11px; font-size:13.5px; color:var(--tx)}
.sugg .acts{display:flex; gap:8px}

/* forms */
.field{margin-bottom:12px}
.field label{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut2); margin-bottom:6px; font-weight:600}
.field input,.field select,.field textarea{width:100%; background:var(--panel2);
  border:1px solid var(--line3); border-radius:9px; padding:10px 12px; outline:none}
.field textarea{min-height:140px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet-dim)}

/* modal */
#modal-root:empty{display:none}
.modal-bg{position:fixed; inset:0; background:rgba(8,6,14,.66); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:20px}
.modal{width:560px; max-width:100%; max-height:88vh; overflow-y:auto; background:var(--panel);
  border:1px solid var(--line2); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
.modal h2{font-size:22px; margin-bottom:4px}
.modal .sub{color:var(--mut); font-size:12.5px; margin-bottom:18px}
.modal-acts{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}

/* person timeline */
.phead{display:flex; align-items:center; gap:16px; margin-bottom:6px}
.phead .meta{flex:1}
.phead h1{font-size:27px}
.signals{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 6px}
.signal{background:var(--panel2); border:1px solid var(--line2); border-radius:11px; padding:11px 14px; min-width:118px}
.signal .v{font-family:'Newsreader',serif; font-size:23px; font-weight:600}
.signal .k{color:var(--mut2); font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-top:2px}
.caprow{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px}

/* heatmap (Culture Amp steal) */
.hm{min-width:520px}
.hm-row{display:flex; align-items:center; gap:5px; margin-bottom:5px}
.hm-row[data-person]{cursor:pointer}
.hm-row[data-person]:hover .hm-name{color:var(--violet)}
.hm-name{width:64px; flex:none; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hm-cell{flex:1; height:26px; border-radius:5px; min-width:22px}
.hm-cell-h{flex:1; min-width:22px; text-align:center; font-size:10px; color:var(--mut2)}
.hm-avg{width:34px; flex:none; text-align:center; font-weight:600; font-size:13px; font-family:'Newsreader',serif}

/* pulse sparkline (15Five steal) */
.pulse-spark{display:flex; align-items:flex-end; gap:4px; height:40px}
.spark{width:14px; border-radius:3px 3px 0 0; display:inline-block}

/* agenda (Lattice/Fellow steal) */
.agenda-item{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--line)}
.agenda-item:last-of-type{border-bottom:none}
.agenda-item input{width:16px; height:16px; accent-color:var(--violet)}
.ag-input{flex:1; background:var(--panel2); border:1px solid var(--line3); border-radius:9px; padding:8px 11px; outline:none}
.ag-input:focus{border-color:var(--violet-dim)}

/* mood picker */
.mood-row{display:flex; gap:8px}
.mood-btn{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 0;
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px; color:var(--mut); transition:.14s}
.mood-btn b{font-family:'Newsreader',serif; font-size:21px; font-weight:600; color:var(--mc); line-height:1}
.mood-btn span{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em}
.mood-btn:hover{border-color:var(--line3)}
.mood-btn.on{border-color:var(--mc); background:color-mix(in srgb, var(--mc) 12%, var(--panel)); color:var(--tx)}

/* search (Fellow steal) */
.search-wrap{position:relative; flex:1; max-width:420px}
#search{width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:22px; padding:8px 15px; font-size:13px; outline:none}
#search:focus{border-color:var(--violet-dim)}
.search-res{position:absolute; top:42px; left:0; right:0; background:var(--panel); border:1px solid var(--line2);
  border-radius:11px; box-shadow:var(--shadow); overflow:hidden; display:none; z-index:60; max-height:60vh; overflow-y:auto}
.search-res.show{display:block}
.sr{display:flex; gap:10px; align-items:center; padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--line)}
.sr:hover{background:var(--panel2)}
.sr small{display:block; color:var(--mut2); font-size:11px}
.sr-t{width:20px; text-align:center; color:var(--violet)}
.sr-empty{padding:12px 13px; color:var(--mut2); font-size:12.5px}

/* team-load bark banner (loud right-sizing alert — solid, high-contrast) */
.bark{display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:12px; margin-bottom:18px;
  cursor:pointer; color:#fff; box-shadow:0 8px 22px rgba(120,40,20,.28); transition:.14s}
.bark:hover{filter:brightness(1.06); transform:translateY(-1px)}
.bark-hi{background:#a83a26} /* understaffed — solid clay red */
.bark-md{background:#c0682f} /* overloaded — solid burnt orange */
.bark-tag{font-size:10.5px; font-weight:700; letter-spacing:.13em; padding:5px 11px; border-radius:99px;
  background:#fff; color:#3a1810; flex:none}
.bark-msg{flex:1; color:#fff; font-size:14.5px; font-weight:600; line-height:1.4}
.bark-cta{font-size:13px; font-weight:700; white-space:nowrap; background:#fff; color:#2a241b; padding:8px 15px; border-radius:8px}

/* toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel3); border:1px solid var(--line3); color:var(--tx);
  padding:11px 18px; border-radius:99px; font-size:13px; font-weight:500; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.25s; z-index:95; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media(max-width:760px){
  .wm-txt, .who{display:none}
  .search-wrap{max-width:none; order:5; flex:1 1 100%}
  .mini{min-width:116px}
  .mini .mglance{font-size:13px}
  .cols-2,.cols-3{grid-template-columns:1fr}
}