/* CEO office screen — portrait tablet beside the door. Quiet gravitas.
   States: meeting (busy wash) · free (green wash) · dnd (the screen goes dark). */

:root {
  /* DND palette — the one dark state */
  --dnd-bg:    #16143A;
  --dnd-ink:   #EDEEFB;
  --dnd-mut:   #9DA2E8;
  --dnd-sub:   #B9BDEF;
  --dnd-word:  #A5AAF5;
  --dnd-label: #7A7FC9;
  --dnd-ring:  #2E2B66;
}

body.display {
  display: flex; flex-direction: column;
  transition: color .7s ease;
}

[data-state="meeting"] .washes .w-busy,
[data-state="free"]    .washes .w-free { opacity: 1; }

/* DND — the one moment the ambient screen turns solemn (no wash, true dark) */
body[data-state="dnd"] { background: var(--dnd-bg); color: var(--dnd-ink); }
[data-state="dnd"] .top .where { color: var(--dnd-mut); }
[data-state="dnd"] .top .clock { color: var(--dnd-label); }

.top .where.office { letter-spacing: .18em; font-size: clamp(11px, 1.7vmin, 16px); }
[data-state="meeting"] .top .where { color: var(--busy-label); }
[data-state="free"]    .top .where { color: var(--free-label); }

.card {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 3.6vmin, 40px);
  padding: 0 clamp(26px, 6vmin, 64px);
}

.who { display: flex; align-items: center; gap: clamp(18px, 3.6vmin, 38px); }

.avatar {
  width: clamp(84px, 16vmin, 168px); height: clamp(84px, 16vmin, 168px);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 8px 26px rgba(17, 24, 39, .16);
  border: 3px solid rgba(255, 255, 255, .85);
}
[data-state="dnd"] .avatar {
  border-color: var(--dnd-ring);
  filter: saturate(.75) brightness(.92);
}

.name { display: flex; flex-direction: column; line-height: 1.02; }
.name .first { font-size: clamp(34px, 7.4vmin, 76px); font-weight: 300; letter-spacing: .01em; }
.name .last  { font-size: clamp(34px, 7.4vmin, 76px); font-weight: 900; letter-spacing: -.01em; }
.name .role  {
  margin-top: clamp(8px, 1.6vmin, 16px);
  font-size: clamp(11px, 1.8vmin, 17px); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
[data-state="dnd"] .name .role { color: var(--dnd-mut); }

.rule {
  border: 0; height: 1px; width: clamp(48px, 12vmin, 120px);
  background: currentColor; opacity: .25;
}

.status { display: flex; align-items: flex-start; gap: clamp(12px, 2.4vmin, 24px); }
.status .dot { width: clamp(12px, 2.2vmin, 22px); height: clamp(12px, 2.2vmin, 22px); margin-top: .5em; }
[data-state="meeting"] .status { color: var(--busy-word); }
[data-state="free"]    .status { color: var(--free-word); }
[data-state="dnd"]     .status { color: var(--dnd-word); }

.word {
  font-size: clamp(28px, 6vmin, 62px);
  font-weight: 900; letter-spacing: -.005em; line-height: 1;
}
.sub {
  margin-top: clamp(6px, 1.2vmin, 12px);
  font-size: clamp(14px, 2.4vmin, 22px); font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
[data-state="dnd"] .sub { color: var(--dnd-sub); }

.today { margin-top: clamp(6px, 1.4vmin, 14px); }
.today .label {
  font-size: clamp(10px, 1.6vmin, 14px); font-weight: 700;
  letter-spacing: .2em; color: var(--ink-3); margin-bottom: clamp(8px, 1.6vmin, 16px);
}
[data-state="dnd"] .today .label { color: var(--dnd-label); }

.today .row {
  display: flex; gap: clamp(10px, 2vmin, 20px);
  font-size: clamp(13px, 2.2vmin, 20px);
  font-variant-numeric: tabular-nums;
  padding: clamp(4px, .9vmin, 9px) 0;
}
.today .row b { font-weight: 700; min-width: 5.6em; }
.today .row .t { font-weight: 400; }
.today .row.past { opacity: .38; }
.today .row.now .t { font-weight: 700; }
.today .row .priv { font-style: italic; color: var(--ink-2); }
[data-state="dnd"] .today .row .priv { color: var(--dnd-mut); }

.foot {
  padding: 0 clamp(26px, 6vmin, 64px) clamp(20px, 4vmin, 44px);
  font-size: clamp(12px, 1.9vmin, 17px); color: var(--ink-2);
}
[data-state="dnd"] .foot { color: var(--dnd-mut); }
.foot b { font-weight: 700; }
.foot .hint { margin-top: 4px; font-size: clamp(11px, 1.7vmin, 15px); opacity: .8; }