/* ============ LAYOUT ============ */
.app{
  max-width:1360px;
  margin:0 auto;
  padding:20px 28px 120px;
  position:relative;
}
@media(max-width:720px){ .app{ padding:16px 16px 100px; } }

/* ============ TOP BAR ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:10px 16px 10px 14px;
  background:color-mix(in oklab, var(--bg) 55%, white);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);
  border-radius:999px;
  margin-bottom:28px;
  box-shadow:0 8px 30px -18px rgba(0,0,0,.18);
}
.tb-brand{display:flex; align-items:center; gap:12px; min-width:0;}
.tb-brand img{height:26px; width:auto; display:block;}
.tb-brand .tb-name{
  display:flex; flex-direction:column; line-height:1.05;
}
.tb-brand .tb-name b{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:15px;
  letter-spacing:-.02em; color:var(--ink);
}
.tb-brand .tb-name .sub{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.tb-sep{width:1px; height:22px; background:var(--line)}
.tb-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px;
  background:color-mix(in oklab, var(--bg) 70%, transparent);
  border:1px solid var(--line); border-radius:999px;
  font-size:12px; color:var(--ink-soft);
}
.tb-pill b{color:var(--ink); font-weight:500}
.tb-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in oklab, var(--green) 25%, transparent)}
.tb-right{display:flex; align-items:center; gap:10px}
.tb-icon-btn{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 60%, white);
  color:var(--ink-soft);
  transition:color .15s, border-color .15s;
  position:relative;
}
.tb-icon-btn:hover{color:var(--ink); border-color:var(--ink-soft)}
.tb-icon-btn .badge-dot{
  position:absolute; top:6px; right:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); border:1.5px solid var(--bg);
}
.tb-user{
  display:flex; align-items:center; gap:10px;
  padding:3px 12px 3px 3px;
  border:1px solid var(--line); border-radius:999px;
  background:color-mix(in oklab, var(--bg) 60%, white);
}
.tb-user .av{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--plum));
  color:#fff; display:grid; place-items:center;
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:12px; font-weight:500;
}
.tb-user .nm{display:flex; flex-direction:column; line-height:1.1}
.tb-user .nm b{font-size:12px; font-weight:500; color:var(--ink)}
.tb-user .nm span{font-size:10px; color:var(--ink-soft)}

@media(max-width:720px){
  .topbar{padding:8px 10px 8px 10px; border-radius:20px; flex-wrap:wrap}
  .tb-pill{display:none}
  .tb-user .nm{display:none}
}

/* ============ EDITORIAL HEADER ============ */
.editorial-head{
  margin:8px 0 32px;
  padding:4px 4px 18px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:end;
}
@media(max-width:900px){ .editorial-head{grid-template-columns:1fr; gap:24px} }

.eh-greet .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:10px;
}
.eh-greet .eyebrow::before{content:""; width:20px; height:1px; background:var(--ink-soft)}
.eh-greet h1{
  font-size:clamp(42px, 5.8vw, 72px);
  line-height:.96;
  margin:16px 0 10px;
  letter-spacing:-.035em;
  font-weight:500;
  text-wrap:balance;
}
.eh-greet .sub{
  font-size:17px; color:var(--ink-soft);
  max-width:42ch; line-height:1.5;
}
.eh-clock{
  text-align:right;
}
@media(max-width:900px){ .eh-clock{text-align:left} }
.eh-clock .time{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:400;
  font-size:clamp(56px, 8vw, 92px);
  line-height:.92; letter-spacing:-.04em;
  color:var(--ink); font-feature-settings:'tnum';
}
.eh-clock .time .sep{ color:var(--accent); font-style:italic; }
.eh-clock .date{
  margin-top:4px; font-size:14px; color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
}

/* ============ KPI STRIP ============ */
.kpi-strip{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:14px; margin-bottom:32px;
}
@media(max-width:900px){ .kpi-strip{grid-template-columns:repeat(2, 1fr)} }
.kpi{
  padding:18px 20px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:18px;
  position:relative; overflow:hidden;
}
.kpi .lbl{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.kpi .val{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:40px;
  line-height:1; letter-spacing:-.03em; margin-top:12px;
  color:var(--ink); font-feature-settings:'tnum';
}
.kpi .val .unit{font-size:18px; color:var(--ink-soft); margin-left:4px; letter-spacing:0}
.kpi .trend{
  margin-top:10px; font-size:12px; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
}
.kpi .trend .chip{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  background:color-mix(in oklab, var(--green) 15%, transparent);
  color:var(--green);
}
.kpi .trend .chip.neg{background:color-mix(in oklab, var(--red) 15%, transparent); color:var(--red)}
.kpi .trend .chip.flat{background:color-mix(in oklab, var(--ink) 8%, transparent); color:var(--ink-soft)}
.kpi .spark{position:absolute; right:10px; top:14px; opacity:.55}

/* ============ AGENDA ROW ============ */
.agenda-row{
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:16px; margin-bottom:36px;
}
@media(max-width:900px){ .agenda-row{grid-template-columns:1fr} }
.agenda-row.solo{ grid-template-columns:1fr; }

.panel{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px 22px 18px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.panel-head h3{
  font-size:22px; letter-spacing:-.02em;
  display:flex; align-items:center; gap:10px;
}
.panel-head h3 em{ color:var(--accent); font-style:italic; }
.panel-head .count{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
}
.panel-head .more{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; padding:6px 10px; border-radius:999px;
  transition:background .15s, color .15s;
}
.panel-head .more:hover{background:var(--line-soft); color:var(--ink)}

.agenda{
  display:flex; flex-direction:column; gap:2px;
}
.ag-day{
  padding:14px 0 8px;
  border-top:1px dashed var(--line);
}
.ag-day:first-child{border-top:none; padding-top:4px}
.ag-day-label{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.ag-day-label .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ag-day.tomorrow .ag-day-label{color:var(--ink-soft)}
.ag-day.tomorrow .ag-day-label .dot{background:var(--ink-soft)}
.ag-day.week .ag-day-label{color:var(--ink-muted)}
.ag-day.week .ag-day-label .dot{background:var(--ink-muted)}

.ag-item{
  display:grid; grid-template-columns:70px 1fr auto;
  align-items:center; gap:14px;
  padding:8px 0;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
  transition:background .15s;
  margin:0 -8px; padding-left:8px; padding-right:8px;
  border-radius:8px;
}
.ag-item:hover{background:color-mix(in oklab, var(--accent-wash) 50%, transparent)}
.ag-item:last-child{border-bottom:none}
.ag-item .tm{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--ink-soft); font-feature-settings:'tnum';
  letter-spacing:.05em;
}
.ag-item .ti{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.ag-item .ti b{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:16px;
  letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ag-item .ti .meta{
  font-size:12px; color:var(--ink-soft);
}
.ag-item .tag{
  padding:3px 8px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line);
  color:var(--ink-soft);
  white-space:nowrap;
}
.ag-item .tag.md{background:color-mix(in oklab, var(--accent) 14%, transparent); color:var(--accent); border-color:color-mix(in oklab, var(--accent) 25%, var(--line))}
.ag-item .tag.mgmt{background:color-mix(in oklab, var(--teal) 18%, transparent); color:var(--teal); border-color:color-mix(in oklab, var(--teal) 30%, var(--line))}
.ag-item .tag.new{background:color-mix(in oklab, var(--gold) 20%, transparent); color:#a07820; border-color:color-mix(in oklab, var(--gold) 40%, var(--line))}
.ag-item .tag.int{background:color-mix(in oklab, var(--plum) 14%, transparent); color:var(--plum); border-color:color-mix(in oklab, var(--plum) 25%, var(--line))}

/* Alerts panel */
.alerts{
  display:flex; flex-direction:column; gap:10px;
}
.alert{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  padding:12px 14px;
  background:color-mix(in oklab, var(--bg) 60%, white);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:12px;
  cursor:default;
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.alert.clickable{ cursor:pointer; }
.alert.clickable:hover{
  transform:translateX(2px);
  border-color:color-mix(in oklab, var(--ink) 30%, var(--line));
  background:color-mix(in oklab, var(--accent-wash) 35%, var(--bg-card));
  box-shadow:0 6px 14px -8px rgba(0,0,0,.18);
}
.alert.clickable:hover .arr{ color:var(--ink); transform:translateX(3px); transition:transform .15s, color .15s; }
.alert:hover{transform:translateX(2px); box-shadow:0 6px 18px -12px rgba(0,0,0,.2)}
.alert.red{border-left-color:var(--red)}
.alert.amber{border-left-color:var(--amber)}
.alert.green{border-left-color:var(--green)}
.alert .ic{
  width:28px; height:28px; border-radius:8px;
  background:color-mix(in oklab, var(--accent) 15%, var(--bg));
  color:var(--accent);
  display:grid; place-items:center; flex-shrink:0;
}
.alert.red .ic{background:color-mix(in oklab, var(--red) 15%, var(--bg)); color:var(--red)}
.alert.amber .ic{background:color-mix(in oklab, var(--amber) 20%, var(--bg)); color:#a07820}
.alert.green .ic{background:color-mix(in oklab, var(--green) 18%, var(--bg)); color:var(--green)}
.alert .body{min-width:0}
.alert .body b{font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:15px; letter-spacing:-.01em; display:block; color:var(--ink)}
.alert .body .meta{font-size:12px; color:var(--ink-soft); margin-top:2px}
.alert .arr{color:var(--ink-muted); align-self:center}

/* ============ SECTION ============ */
.section{
  margin-top:48px;
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.section-head .title{display:flex; flex-direction:column; gap:8px}
.section-head .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:10px;
}
.section-head .eyebrow::before{content:""; width:20px; height:1px; background:var(--ink-soft)}
.section-head h2{
  font-size:clamp(28px, 4vw, 42px);
  letter-spacing:-.025em; font-weight:500;
}
.section-head h2 em{color:var(--accent); font-style:italic}
.section-head .meta{
  display:flex; gap:20px; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
}
.section-head .meta b{color:var(--ink); font-weight:500}

/* ============ COMPANY TILES ============ */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.tiles.cozy{
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
.tile{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .15s;
  position:relative; overflow:hidden;
}
.tile:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.22);
  border-color:color-mix(in oklab, var(--accent) 30%, var(--line));
}
.tile-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
}
.tile-logo{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:17px;
  letter-spacing:-.02em;
  color:#fff; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 10px -4px rgba(0,0,0,.18);
}
.tile-title{
  display:flex; flex-direction:column; line-height:1.15;
  min-width:0; flex:1;
}
.tile-title b{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:18px;
  letter-spacing:-.015em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile-title .role{
  font-size:12px; color:var(--ink-soft); margin-top:2px;
}
.health-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--green) 22%, transparent);
  flex-shrink:0; margin-top:6px;
}
.health-dot.amber{background:var(--amber); box-shadow:0 0 0 3px color-mix(in oklab, var(--amber) 25%, transparent)}
.health-dot.red{background:var(--red); box-shadow:0 0 0 3px color-mix(in oklab, var(--red) 22%, transparent)}

.tile-row{
  display:flex; flex-direction:column; gap:3px;
  padding:9px 0;
  border-top:1px dashed var(--line);
}
.tile-row .k{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.tile-row .v{
  font-size:13.5px; color:var(--ink);
  line-height:1.35;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.tile-row .v .dim{color:var(--ink-soft)}

.tile-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:10px;
  border-top:1px dashed var(--line);
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.12em; text-transform:uppercase;
}
.tile-foot .chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:999px;
  background:color-mix(in oklab, var(--bg) 50%, transparent);
  border:1px solid var(--line); color:var(--ink);
}
.tile-foot .chip.warn{color:var(--amber); border-color:color-mix(in oklab, var(--amber) 30%, var(--line))}
.tile-foot .chip.urgent{color:var(--red); border-color:color-mix(in oklab, var(--red) 30%, var(--line))}
.tile-foot .arr{transition:transform .2s}
.tile:hover .tile-foot .arr{transform:translateX(3px); color:var(--accent)}

/* Add company tile */
.tile.add{
  border-style:dashed;
  background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ink-soft);
  min-height:200px;
  gap:10px;
}
.tile.add:hover{color:var(--accent); border-color:var(--accent)}
.tile.add .plus{
  width:42px; height:42px; border-radius:50%;
  border:1.5px dashed currentColor;
  display:grid; place-items:center;
}
.tile.add b{font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:17px; letter-spacing:-.015em}
.tile.add span{font-size:12px}

/* ============ NEW BUSINESS EVENTS ============ */
.events{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px;
}
.event{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  display:flex; flex-direction:column; gap:12px;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.event:hover{transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(0,0,0,.22)}
.event .ev-type{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:8px;
}
.event .ev-type .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.event h4{
  font-size:20px; letter-spacing:-.02em; font-weight:500;
  line-height:1.15;
}
.event .ev-when{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink);
}
.event .ev-when .date-chip{
  display:grid; place-items:center;
  width:48px; height:52px; border-radius:10px;
  background:var(--bg);
  border:1px solid var(--line);
  font-family:'Fraunces','Noto Sans Hebrew',serif;
  line-height:1;
  flex-shrink:0;
}
.event .ev-when .date-chip .m{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:3px;
}
.event .ev-when .date-chip .d{
  font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-.03em;
}
.event .ev-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:10px; border-top:1px dashed var(--line);
  font-size:12px; color:var(--ink-soft);
}
.event .ev-meta span{display:inline-flex; align-items:center; gap:5px}
.event .stage{
  position:absolute; top:14px; right:14px;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  color:var(--ink-soft);
}
.event .stage.hot{color:var(--accent); border-color:color-mix(in oklab, var(--accent) 30%, var(--line)); background:color-mix(in oklab, var(--accent) 8%, var(--bg))}
.event .stage.won{color:var(--green); border-color:color-mix(in oklab, var(--green) 30%, var(--line))}
.event .stage.prep{color:var(--plum); border-color:color-mix(in oklab, var(--plum) 30%, var(--line))}

/* ============ INTERNAL 2x2 GRID ============ */
.internal-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
@media(max-width:900px){ .internal-grid{grid-template-columns:1fr} }
.int-panel{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.int-panel .p-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.int-panel .p-head h3{
  font-size:22px; letter-spacing:-.02em;
}
.int-panel .p-head h3 em{color:var(--accent); font-style:italic}
.int-panel .p-head .meta{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.int-list{display:flex; flex-direction:column; gap:0}
.int-item{
  display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center;
  padding:10px 2px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
  transition:background .15s;
  margin:0 -10px; padding-left:10px; padding-right:10px;
  border-radius:8px;
}
.int-item:hover{background:color-mix(in oklab, var(--accent-wash) 40%, transparent)}
.int-item:last-child{border-bottom:none}
.int-avatar{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:12px; color:#fff; font-weight:500;
}
.int-info{min-width:0}
.int-info b{
  display:block;
  font-size:14px; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.int-info span{font-size:11.5px; color:var(--ink-soft)}
.int-badge{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
  white-space:nowrap;
}
.int-badge.ok{color:var(--green); border-color:color-mix(in oklab, var(--green) 30%, var(--line))}
.int-badge.doing{color:var(--accent); border-color:color-mix(in oklab, var(--accent) 30%, var(--line))}
.int-badge.blocked{color:var(--red); border-color:color-mix(in oklab, var(--red) 30%, var(--line))}

/* Financial mini */
.fin{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.fin-stat{
  padding:14px; border-radius:14px;
  background:color-mix(in oklab, var(--bg) 60%, white);
  border:1px solid var(--line);
}
.fin-stat .lbl{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.fin-stat .val{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:28px; letter-spacing:-.025em;
  margin-top:6px; color:var(--ink); font-feature-settings:'tnum';
}
.fin-stat .val .unit{font-size:14px; color:var(--ink-soft); margin-left:3px}
.fin-stat .bar{
  margin-top:10px; height:5px; border-radius:3px;
  background:var(--bg-alt); overflow:hidden;
}
.fin-stat .bar > div{height:100%; background:var(--accent); border-radius:3px}

/* ============ DRAWER ============ */
.drawer-scrim{
  position:fixed; inset:0; z-index:200;
  background:color-mix(in oklab, var(--ink) 35%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.drawer-scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:50%; left:50%; z-index:201;
  width:min(880px, 94vw);
  height:min(88vh, 920px);
  max-height:88vh;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 40px 120px -24px rgba(0,0,0,.4), 0 0 0 1px color-mix(in oklab, var(--ink) 6%, transparent);
  transform:translate(-50%, -50%) scale(.96);
  opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,.8,.3,1), opacity .25s ease;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.drawer.on{
  transform:translate(-50%, -50%) scale(1);
  opacity:1; pointer-events:auto;
}
.dr-head{
  padding:20px 24px 18px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; gap:14px;
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, color-mix(in oklab, var(--accent-soft) 40%, transparent), transparent 60%),
    var(--bg-card);
}
.dr-head .logo{
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center;
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:22px;
  color:#fff; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 8px 16px -6px rgba(0,0,0,.2);
  letter-spacing:-.02em;
}
.dr-head .ti{flex:1; min-width:0}
.dr-head .ti .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.dr-head .ti h2{
  font-size:32px; letter-spacing:-.02em; font-weight:500;
  margin-top:4px;
}
.dr-head .ti .row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;
  font-size:12px; color:var(--ink-soft);
}
.dr-head .ti .row span{display:inline-flex; align-items:center; gap:5px}
.dr-close{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  display:grid; place-items:center; color:var(--ink-soft);
  flex-shrink:0;
  transition:color .15s, border-color .15s;
}
.dr-close:hover{color:var(--ink); border-color:var(--ink-soft)}

.dr-tabs{
  display:flex; gap:2px;
  padding:8px 20px 0;
  border-bottom:1px solid var(--line);
}
.dr-tab{
  padding:10px 14px 12px;
  font-size:13px; color:var(--ink-soft);
  font-weight:500;
  position:relative;
  transition:color .15s;
}
.dr-tab:hover{color:var(--ink)}
.dr-tab.on{color:var(--ink)}
.dr-tab.on::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-1px;
  height:2px; background:var(--accent); border-radius:2px;
}

.dr-body{
  flex:1; overflow-y:auto;
  padding:20px 24px 24px;
  display:flex; flex-direction:column; gap:20px;
}
.dr-section h4{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.dr-section h4::before{content:""; width:18px; height:1px; background:var(--ink-soft)}

.dr-card{
  padding:16px; border-radius:14px;
  background:var(--bg-card);
  border:1px solid var(--line);
}
.dr-card .k{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:4px;
}
.dr-card .v{font-size:15px; color:var(--ink); line-height:1.45}
.dr-card.highlight{
  background:color-mix(in oklab, var(--accent-wash) 60%, var(--bg-card));
  border-color:color-mix(in oklab, var(--accent) 25%, var(--line));
}

.dr-kv{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.dr-kv .dr-card{padding:14px}

/* Touchpoints timeline */
.tp{display:flex; flex-direction:column}
.tp-item{
  display:grid; grid-template-columns:24px 1fr; gap:14px;
  padding:0 0 18px 0;
  position:relative;
}
.tp-item:not(:last-child)::before{
  content:""; position:absolute;
  left:11px; top:20px; bottom:0;
  width:1.5px; background:var(--line);
}
.tp-dot{
  width:24px; height:24px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--accent);
  display:grid; place-items:center;
  color:var(--accent);
  z-index:1;
  flex-shrink:0;
}
.tp-dot.call{background:var(--accent); color:#fff; border-color:var(--accent)}
.tp-dot.email{background:var(--bg-card); color:var(--teal); border-color:var(--teal)}
.tp-dot.meet{background:var(--plum); color:#fff; border-color:var(--plum)}
.tp-body{
  padding:10px 14px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:12px;
}
.tp-body .head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:4px;
}
.tp-body .head b{font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:15px; letter-spacing:-.01em}
.tp-body .head time{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
}
.tp-body p{font-size:13.5px; color:var(--ink-soft); line-height:1.45}

/* Task list */
.task{
  display:grid; grid-template-columns:22px 1fr auto; gap:12px;
  align-items:center;
  padding:10px 2px;
  border-bottom:1px solid var(--line-soft);
}
.task:last-child{border-bottom:none}
.task-check{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--line); background:var(--bg);
  display:grid; place-items:center;
  cursor:pointer; flex-shrink:0;
  transition:border-color .15s, background .15s;
}
.task-check:hover{border-color:var(--accent)}
.task-check.done{background:var(--accent); border-color:var(--accent); color:#fff}
.task-info b{
  font-size:14px; color:var(--ink); font-weight:500;
  display:block;
}
.task.done .task-info b{color:var(--ink-muted); text-decoration:line-through}
.task-info span{font-size:11.5px; color:var(--ink-soft)}
.task-due{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
}
.task-due.overdue{color:var(--red)}
.task-due.soon{color:var(--amber)}

/* Inline edit/delete actions on touchpoints + tasks */
.task{ grid-template-columns:22px 1fr auto auto; }
.task-actions, .tp-actions{
  display:flex; gap:4px; opacity:0; transition:opacity .15s;
}
.task:hover .task-actions, .tp-item:hover .tp-actions{ opacity:1 }
.task-actions button, .tp-actions button{
  width:26px; height:26px; border-radius:7px;
  background:transparent; border:1px solid transparent;
  color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.task-actions button:hover, .tp-actions button:hover{
  background:var(--bg-alt); border-color:var(--line); color:var(--ink);
}
.task-actions button[title="Delete"]:hover, .tp-actions button[title="Delete"]:hover{
  color:var(--red); border-color:color-mix(in oklab, var(--red) 30%, transparent);
}
.tp-body .head{ gap:8px }
.tp-actions{ margin-left:auto }

.tp-body.editing{
  padding:14px;
  background:var(--bg-alt);
  border:1px dashed var(--line);
}
.tp-body.editing .seg{
  display:flex; gap:4px; padding:3px;
  background:var(--bg); border-radius:10px;
  width:fit-content;
}
.tp-body.editing .seg button{
  padding:5px 10px; border-radius:7px;
  font-size:11px; color:var(--ink-soft);
  background:transparent; border:none; cursor:pointer;
}
.tp-body.editing .seg button.on{ background:var(--bg-card); color:var(--ink) }
.tp-edit-title, .tp-edit-note{
  width:100%; padding:8px 10px; margin-top:8px;
  background:var(--bg-card); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13px;
  resize:vertical;
}
.tp-edit-title:focus, .tp-edit-note:focus{ outline:none; border-color:var(--accent) }

.task-edit{
  padding:14px; margin:6px 0;
  background:var(--bg-alt);
  border:1px dashed var(--line);
  border-radius:10px;
  display:flex; flex-direction:column; gap:12px;
}
.task-edit input{
  padding:8px 10px;
  background:var(--bg-card); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13px;
}
.task-edit input:focus{ outline:none; border-color:var(--accent) }

/* Add touchpoint / task forms */
.dr-form{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  border-radius:14px;
  background:var(--bg-card);
  border:1px dashed var(--line);
}
.dr-form .row-in{display:flex; gap:8px}
.dr-form input, .dr-form textarea, .dr-form select{
  padding:10px 12px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font-size:13.5px; outline:none; width:100%;
  resize:none;
}
.dr-form textarea{min-height:56px}
.dr-form input:focus, .dr-form textarea:focus, .dr-form select:focus{border-color:var(--accent)}
.dr-form .seg{
  display:flex; gap:4px; padding:3px;
  background:var(--bg-alt); border-radius:10px;
}
.dr-form .seg button{
  padding:6px 10px; border-radius:7px;
  font-size:12px; color:var(--ink-soft);
  flex:1;
  transition:background .15s, color .15s;
}
.dr-form .seg button.on{background:var(--bg-card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dr-form .btn-submit{
  align-self:flex-end;
  padding:8px 16px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
}
.dr-form .btn-submit:hover{background:var(--accent)}

/* Opportunity card */
.opp{
  padding:14px 16px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent-wash) 80%, transparent), var(--bg-card));
  border:1px solid color-mix(in oklab, var(--accent) 25%, var(--line));
  border-radius:14px;
  display:flex; flex-direction:column; gap:6px;
}
.opp .head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px;
}
.opp .head b{font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:16px; letter-spacing:-.015em}
.opp .head .v{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:18px; letter-spacing:-.02em;
  color:var(--accent);
}
.opp p{font-size:13px; color:var(--ink-soft); line-height:1.45}

/* Renewal bar */
.renewal{
  padding:16px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex; flex-direction:column; gap:10px;
}
.renewal .head{display:flex; justify-content:space-between; align-items:baseline}
.renewal .head b{font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:500; font-size:16px}
.renewal .head .days{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase;
}
.renewal .head .days.soon{color:var(--amber)}
.renewal .head .days.overdue{color:var(--red)}
.renewal .bar{
  height:6px; border-radius:3px;
  background:var(--bg-alt); overflow:hidden;
}
.renewal .bar > div{
  height:100%; border-radius:3px;
  background:linear-gradient(to right, var(--green), var(--accent));
}
.renewal .timeline{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--ink-soft); letter-spacing:.1em;
}

/* Contacts */
.contact{
  display:grid; grid-template-columns:36px 1fr auto; gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.contact:last-child{border-bottom:none}
.contact .av{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-size:13px; color:#fff; font-weight:500;
}
.contact .info b{font-size:14px; display:block; color:var(--ink); font-weight:500}
.contact .info span{font-size:11.5px; color:var(--ink-soft)}
.contact .act{
  display:flex; gap:4px;
}
.contact .act button{
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg);
  color:var(--ink-soft);
  display:grid; place-items:center;
  transition:color .15s, border-color .15s;
}
.contact .act button:hover{color:var(--accent); border-color:var(--accent)}

/* ============ FOOTER ============ */
.footer{
  margin-top:60px;
  padding:24px 4px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.footer b{color:var(--ink); font-weight:500}
.footer-duck{
  width:32px; height:32px;
  opacity:.85;
}
.footer-duck img{width:100%; display:block}

/* Reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}

/* Add-company modal */
.modal-scrim{
  position:fixed; inset:0; z-index:210;
  background:color-mix(in oklab, var(--ink) 40%, transparent);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.modal-scrim.on{opacity:1; pointer-events:auto}
.modal{
  width:min(460px, calc(100vw - 28px));
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
  transform:translateY(10px); opacity:0;
  transition:transform .25s, opacity .25s;
}
.modal-scrim.on .modal{transform:none; opacity:1}
.modal h3{font-size:24px; letter-spacing:-.02em; margin-bottom:6px}
.modal .sub{font-size:13px; color:var(--ink-soft); margin-bottom:16px}
.modal form{display:flex; flex-direction:column; gap:10px}
.modal label{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:-4px;
}
.modal input, .modal select{
  padding:12px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
  font-size:14px; outline:none;
}
.modal input:focus, .modal select:focus{border-color:var(--accent)}
.modal .actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:10px;
}
.modal .actions button{
  padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:500;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
}
.modal .actions button.primary{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.modal .actions button.primary:hover{background:var(--accent); border-color:var(--accent)}

/* ===== Drawer edit button ===== */
.dr-edit{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line);
  font-size:12px; font-weight:500;
  cursor:pointer; transition:background .15s, border-color .15s;
  align-self:flex-start;
  margin-right:6px;
}
.dr-edit:hover{ background:var(--accent-wash); border-color:var(--accent); color:var(--accent) }
.dr-edit svg{ stroke-width:1.6 }

/* ===== Events tab ===== */
.dr-events-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:6px;
}
.dr-events-head h4{ margin:0 }
.dr-form .btn-submit.small{
  padding:6px 12px; font-size:11px; align-self:auto;
}
.dr-hint{
  display:block; font-size:11px; color:var(--ink-soft);
  margin-top:6px; line-height:1.4;
}
.dr-form-actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:6px;
}

/* Add-task expandable form */
.add-task-details{
  display:flex; flex-direction:column; gap:14px;
  margin-top:6px;
  animation: addTaskFold .18s ease-out;
}
@keyframes addTaskFold{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
.add-task-details .bf-field label{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-soft); font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
}
.add-task-details .bf-field label svg{ width:11px; height:11px; }
.add-task-details .bf-optional{
  text-transform:none; letter-spacing:0; font-size:10px;
  font-family:inherit; color:var(--ink-soft); opacity:.7;
}
.add-task-details input[type=date],
.add-task-details input[type=time]{
  padding:10px 12px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:13px;
  min-height:42px;
}
.add-task-details input[type=date]:focus,
.add-task-details input[type=time]:focus{ border-color:var(--accent); outline:none; }

.add-task-quick{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-top:-4px;
}
.add-task-quick-label{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:4px;
}
.add-task-quick button{
  padding:5px 10px; border-radius:999px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft); font-size:11.5px;
  cursor:pointer; transition:all .15s;
  font-family:inherit;
}
.add-task-quick button:hover{
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in oklab, var(--accent-wash) 50%, transparent);
}
.bf-status-hint{
  font-size:10.5px; color:var(--ink-soft);
  align-self:center; margin-left:4px; opacity:.7;
  font-style:italic;
}
.add-task-form .btn-primary{
  /* allow longer label */
  max-width:none;
}
.dr-events-list{
  display:flex; flex-direction:column; gap:10px;
}
.dr-event{
  display:flex; gap:12px; padding:12px 14px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:12px;
}
.dr-event.clickable{
  cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.dr-event.clickable:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.18);
}
.dr-event-edit-hint{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--bg-alt); color:var(--ink-soft);
  align-self:center;
  opacity:0; transition:opacity .15s;
}
.dr-event.clickable:hover .dr-event-edit-hint{ opacity:1 }
.dr-event-bar{
  width:4px; flex:none; border-radius:4px; align-self:stretch;
}
.dr-event-body{ flex:1; min-width:0 }
.dr-event-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:4px;
}
.dr-event-top b{ font-size:14px; font-weight:600 }
.dr-event-status{
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:2px 8px; border-radius:999px;
  background:var(--bg-alt);
}
.dr-event-status.in-progress{ background:color-mix(in oklab, var(--teal) 15%, transparent); color:var(--teal) }
.dr-event-status.overdue{ background:color-mix(in oklab, var(--red) 15%, transparent); color:var(--red) }
.dr-event-status.milestone, .dr-event-status.event{ background:color-mix(in oklab, var(--gold) 18%, transparent); color:#8a6a18 }
.dr-event-meta{
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:11.5px; color:var(--ink-soft);
}
.dr-event-meta span{ display:inline-flex; align-items:center; gap:5px }
.dr-event-note{
  margin-top:8px; font-size:13px; color:var(--ink-soft);
  line-height:1.5;
}

/* ===== Edit company modal ===== */
.edit-modal{
  width:min(640px, calc(100vw - 28px));
  max-height:calc(100vh - 60px);
  padding:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.edit-modal-head{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:22px 28px 22px;
  background:var(--bg-card);
  border-bottom:1px solid var(--line);
}
.edit-modal-preview{
  width:64px; height:64px; flex:none;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.edit-modal-titles{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.edit-modal-titles .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.edit-modal-titles h3{
  font-family:'Fraunces','Noto Sans Hebrew',serif; font-weight:400;
  font-size:24px; letter-spacing:-.02em;
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.edit-modal-body{
  flex:1; overflow-y:auto;
  padding:22px 28px 12px;
  display:flex; flex-direction:column; gap:24px;
}
.edit-group{
  display:flex; flex-direction:column; gap:14px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.edit-group:last-child{ border-bottom:none; padding-bottom:8px }
.edit-group h5{
  margin:0;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
}

/* Logo swatch grid */
.logo-swatches{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
}
.logo-swatch{
  aspect-ratio:1;
  border-radius:12px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s, border-color .15s, box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.logo-swatch:hover{ transform:translateY(-1px) }
.logo-swatch.on{
  border-color:var(--ink);
  box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
@media(max-width:640px){ .logo-swatches{ grid-template-columns:repeat(4, 1fr) } }


/* =========================================================
   MOBILE — first-pass responsive layer on top of desktop CSS
   ========================================================= */

/* Kill iOS sticky-hover across all hover-translate/shadow rules.
   Anything inside this query only fires on devices with a real pointer. */
@media (hover: none) {
  .tile:hover, .alert.clickable:hover, .row-h:hover, .row-l:hover, .row-s:hover,
  .event:hover, .nb-card:hover, .nb-col:hover, .opp:hover, .renewal:hover,
  .sched-event:hover, .ag-item:hover, .stat-block:hover, .add-tile:hover,
  .add-row:hover, .dr-tab:hover, .task:hover, .contact:hover, .dr-event:hover,
  .dr-edit:hover, .dr-close:hover, .tb-icon-btn:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

/* iOS Safari URL-bar-aware viewport */
@supports (height: 100svh) {
  html, body { min-height: 100svh; }
}

/* === Tablet portrait & below (720px) === */
@media (max-width: 720px) {
  .app { padding: 14px 16px var(--bottom-nav-h, 64px); }

  /* TopBar collapses to a slimmer single row */
  .topbar { padding: 8px 12px; border-radius: 14px; gap: 8px; }
  .topbar .tb-brand .tb-name .sub, .topbar .tb-sep, .topbar .tb-search { display: none; }
  .tb-icon-btn { width: 40px; height: 40px; }

  /* Editorial header — drop chrome, shrink type, kill the clock */
  .editorial-head { gap: 12px; margin: 16px 0 8px; }
  .editorial-head .eh-eyebrow::before { display: none; }
  .editorial-head .eh-clock { display: none; }
  .editorial-head .eh-greet h1 { font-size: clamp(28px, 8vw, 44px); }
  .editorial-head .eh-greet .eh-sub { font-size: 13px; }

  /* Sections breathe less aggressively */
  .section { padding: 18px 16px; border-radius: 16px; scroll-margin-top: 72px; }
  .section-head { gap: 8px; margin-bottom: 14px; }
  .section-head h2 { font-size: clamp(22px, 6vw, 32px); }
  .section-head .meta { font-size: 11px; gap: 8px; flex-wrap: wrap; }
  .section-head .meta > * { white-space: nowrap; }

  /* KPI strip → 2x2 compact */
  .kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 14px; min-height: auto; }
  .kpi .lbl { font-size: 10px; }
  .kpi .val { font-size: 26px; }
  .kpi .trend { font-size: 11px; gap: 6px; }
  .kpi .spark { display: none; }

  /* Alerts panel */
  .panel { padding: 16px; border-radius: 16px; }
  .panel-head h3 { font-size: 20px; }
  .alert { grid-template-columns: 28px 1fr auto; padding: 10px 12px; gap: 10px; }
  .alert .arr { display: none; }
  .alert .ic { font-size: 18px; }

  /* Tile grids → 1 col */
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { padding: 14px; }

  /* Footer center + drop the duck */
  .footer { flex-direction: column; gap: 6px; text-align: center; padding: 18px 16px 28px; }
  .footer-duck { display: none; }

  /* === DRAWER → BOTTOM SHEET === */
  .drawer {
    inset: auto 0 0 0;
    width: 100%; max-width: 100%;
    height: 92svh; max-height: 92svh;
    top: auto; left: 0; transform: translateY(100%);
    border-radius: 22px 22px 0 0;
  }
  .drawer.on { transform: translateY(0); }
  .dr-head { padding: 14px 16px; }
  .dr-head .ti h2 { font-size: 22px; }
  .dr-head .logo { width: 44px; height: 44px; }
  .dr-edit span { display: none; }
  .dr-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 0 12px; }
  .dr-tabs::-webkit-scrollbar { display: none; }
  .dr-tab { white-space: nowrap; font-size: 13px; }
  .dr-body { padding: 12px 14px 24px; }
  .dr-kv { grid-template-columns: 1fr; gap: 12px; }

  /* Task list — drop the hover-to-reveal action affordance */
  .task { grid-template-columns: 22px 1fr auto; padding: 12px 10px; gap: 8px; }
  .task-actions { opacity: 1 !important; gap: 4px; }
  .task-actions button { width: 32px; height: 32px; }
  .task-due { font-size: 11px; padding: 2px 6px; }
}

/* === Phones (≤480px) === */
@media (max-width: 480px) {
  .app { padding: 12px 12px var(--bottom-nav-h, 64px); }
  .section { padding: 14px 12px; }
  .topbar .tb-pill, .topbar .tb-user .nm { display: none; }

  /* KPI → 1 column on tiny screens */
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi .val { font-size: 28px; }

  /* All inputs ≥16px to avoid iOS auto-zoom */
  input[type="text"], input[type="email"], input[type="url"], input[type="search"],
  input[type="password"], input[type="date"], input[type="time"], input[type="number"],
  textarea, select { font-size: 16px; }
}

/* =========================================================
   MOBILE NAVIGATION — slide-in drawer + bottom tab bar
   ========================================================= */
.mobile-nav-scrim {
  position: fixed; inset: 0; z-index: 199;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  display: none;
}
.mobile-nav-scrim.on { opacity: 1; pointer-events: auto; }
.mobile-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 200;
  width: min(320px, 86vw);
  background: var(--bg-card);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 30px -10px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  display: none;
}
.mobile-nav.on { transform: translateX(0); }
.mobile-nav-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav-head > div:nth-child(2) { flex: 1; min-width: 0; }
.mobile-nav-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.mobile-nav-list {
  display: flex; flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}
.mobile-nav-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  font-family: 'Fraunces', 'Noto Sans Hebrew', serif;
  font-size: 18px; font-weight: 500;
  color: var(--ink); letter-spacing: -.01em;
  border: none; background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.mobile-nav-link:hover, .mobile-nav-link:active {
  background: color-mix(in oklab, var(--accent-wash) 50%, transparent);
}
.mobile-nav-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--bg-alt);
  color: var(--accent);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* Bottom tab bar — fixed, thumb-reach, hidden on desktop */
.mobile-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in oklab, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid var(--line);
  padding: 4px 0 max(4px, env(safe-area-inset-bottom));
  height: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
}
.mobile-tabbar button {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  background: transparent; border: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.mobile-tabbar .tab-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; line-height: 1;
}
.mobile-tabbar .tab-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase;
}
.mobile-tabbar button:active { color: var(--accent); }

/* Show mobile nav + tabbar only on small screens */
@media (max-width: 720px) {
  .mobile-nav, .mobile-nav-scrim { display: flex; }
  .mobile-tabbar { display: grid; }

  /* TopBar gets a hamburger button — added via JSX */
  .tb-menu-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 60%, white);
    color: var(--ink-soft);
  }
}
@media (min-width: 721px) {
  .tb-menu-btn { display: none; }
}

/* ===== Toasts (window.toast) ===== */
.toast-host{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:300;
  pointer-events:none;
}
.toast{
  pointer-events:auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:13px; line-height:1.3;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.35);
  animation:toast-in .22s ease-out;
  max-width:min(520px, 90vw);
}
.toast .toast-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ink-muted);
}
.toast.ok .toast-dot{ background:var(--green); }
.toast.error .toast-dot{ background:var(--red); }
.toast.error{ background:#3A1714; color:#FBE7E3; }
@keyframes toast-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (max-width:720px){
  .toast-host{ bottom:calc(var(--bottom-nav-h, 0px) + 16px); }
}

/* ===== Loading skeletons (KPI strip + company rows) ===== */
.kpi.kpi-skeleton{
  min-height:96px;
  background:linear-gradient(90deg, var(--bg-card) 0%, var(--line-soft) 50%, var(--bg-card) 100%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
.row-skeleton{
  height:88px; border-radius:16px;
  border:1px solid var(--line-soft);
  background:linear-gradient(90deg, var(--bg-card) 0%, var(--line-soft) 50%, var(--bg-card) 100%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer{
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ===== Mark-done button on attention-panel task rows ===== */
.alert-check{
  width:24px; height:24px; flex:none; align-self:center;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--bg-card);
  color:transparent;
  font-size:13px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all .15s;
}
.alert-check:hover{
  border-color:var(--green);
  background:color-mix(in oklab, var(--green) 14%, var(--bg-card));
  color:var(--green);
}
.alert-check:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* Live-source marker on section eyebrows */
.eyebrow .live-tag{ color:var(--green); }
.eyebrow .live-tag::before{
  content:""; display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--green);
  margin:0 5px 0 10px; vertical-align:1px;
  animation:live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* Note under live-sourced internal lists */
.int-live-note{
  padding:10px 4px 2px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted);
}

/* ============================================================
   Wix Longevity theme layer — frosted-glass surfaces + brand accents.
   Sits after all component styles on purpose: it retunes surfaces only,
   never layout.
   ============================================================ */

/* Glass cards: the design's signature surface */
.panel, .kpi, .int-panel, .fin-big, .fin-card,
.row-h, .row-l, .row-s, .nb-col, .tile{
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-color:var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.modal, .drawer{
  background:rgba(252,251,247,0.92);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
}

/* Softer, larger corner radius on the primary surfaces */
.panel, .int-panel, .fin-big, .fin-card, .nb-col{ border-radius:22px; }
.kpi, .row-h, .row-l{ border-radius:22px; }

/* Brand gradient on primary progress fills */
.fin-big .bar > div, .kpi .bar > div{
  background:var(--brand-grad) !important;
}

/* Featured-card glow for urgent surfaces (matches .is-featured in the design) */
.alert.red{
  border-left-color:var(--rose);
}

/* Buttons: dark pill primary, glass ghost — straight from the design */
.btn-primary{
  background:linear-gradient(180deg, #1a1a1a 30%, #444 100%);
  border-radius:999px;
}
.btn-ghost{
  background:rgba(255,255,255,0.55);
  border:1px solid var(--glass-border);
  border-radius:999px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}

/* Selection + focus tint follows the new accent automatically via tokens */