/* Fareeq work room. Majlis: deep indigo, gold, arch and three figures.
   Token values mirror apps/work-screen/brand/tokens.json so a later sync can
   replace this block from the marketing site /brand/tokens.json.
   Headlines use Amiri. UI uses IBM Plex Sans Arabic and Inter.
   Fonts are SIL Open Font License. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/amiri-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+061F;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+061F;
  src: url("./fonts/amiri-700.woff2") format("woff2");
}
:root,
[data-theme="light"] {
  color-scheme: light;
  --ink: #1a1740;
  --muted: #3d4468;
  --paper: #f6f3ec;
  --panel: #fffcf8;
  --panel-2: #f3efe6;
  --line: #d9d3c6;
  --line-strong: #c4bdb0;
  --indigo: #1e2b72;
  --on-indigo: #f6f3ea;
  --indigo-soft: #e7e9f6;
  --gold: #6f5410;
  --on-gold: #fbf6ea;
  --gold-soft: #f8f1dc;
  --danger: #7a2430;
  --danger-soft: #f8ecee;
  --focus: #1e2b72;
  --idle: #3d4468;
  --green: var(--indigo);
  --green-deep: var(--indigo);
  --green-soft: var(--indigo-soft);
  --copper: var(--gold);
  --copper-soft: var(--gold-soft);
  --accent-fill: var(--indigo);
  --on-accent: var(--on-indigo);
  --unread: var(--gold);
  --on-unread: var(--on-gold);
  --owner-line: #c5cbe4;
  --approval-line: #e4d6b0;
  --shadow: 0 18px 40px rgba(26, 23, 64, 0.06);
  --display: Amiri, Inter, "IBM Plex Sans", "Noto Naskh Arabic", serif;
  --text: "IBM Plex Sans Arabic", Inter, "IBM Plex Sans", sans-serif;
  --origin: right;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f7f3ea;
    --muted: #d9cbae;
    --paper: #100e1a;
    --panel: #1a1730;
    --panel-2: #241f40;
    --line: #3d3858;
    --line-strong: #5c5678;
    --indigo: #c9d2ff;
    --on-indigo: #16142c;
    --indigo-soft: #2a2750;
    --gold: #f0d78c;
    --on-gold: #1a1430;
    --gold-soft: #3a3220;
    --danger: #ffb4b4;
    --danger-soft: #3a2428;
    --focus: #c9d2ff;
    --idle: #b7ad98;
    --green: var(--indigo);
    --green-deep: var(--indigo);
    --green-soft: var(--indigo-soft);
    --copper: var(--gold);
    --copper-soft: var(--gold-soft);
    --accent-fill: var(--gold);
    --on-accent: var(--on-gold);
    --unread: var(--gold);
    --on-unread: var(--on-gold);
    --owner-line: #3d4a88;
    --approval-line: #6e5a30;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f3ea;
  --muted: #d9cbae;
  --paper: #100e1a;
  --panel: #1a1730;
  --panel-2: #241f40;
  --line: #3d3858;
  --line-strong: #5c5678;
  --indigo: #c9d2ff;
  --on-indigo: #16142c;
  --indigo-soft: #2a2750;
  --gold: #f0d78c;
  --on-gold: #1a1430;
  --gold-soft: #3a3220;
  --danger: #ffb4b4;
  --danger-soft: #3a2428;
  --focus: #c9d2ff;
  --idle: #b7ad98;
  --green: var(--indigo);
  --green-deep: var(--indigo);
  --green-soft: var(--indigo-soft);
  --copper: var(--gold);
  --copper-soft: var(--gold-soft);
  --accent-fill: var(--gold);
  --on-accent: var(--on-gold);
  --unread: var(--gold);
  --on-unread: var(--on-gold);
  --owner-line: #3d4a88;
  --approval-line: #6e5a30;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

html[dir="ltr"],
html[lang="en"] {
  --display: Inter, "IBM Plex Sans", sans-serif;
  --text: Inter, "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
  --origin: left;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  background:
    radial-gradient(circle at 100% 0, rgba(111, 84, 16, 0.1), transparent 26rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.55;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 215, 140, 0.1), transparent 26rem),
    var(--paper);
}

body { overflow: hidden; }

button, input, textarea { font: inherit; color: inherit; }

button {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}

button.primary {
  background: var(--indigo);
  color: var(--on-indigo);
  border-color: var(--indigo);
  min-height: 44px;
  padding: 0.5rem 1rem;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .bottom-nav button, .more-sheet a, .more-sheet button, .person, .primary, .kill, .tool {
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  .meter span, .progress span { transition: width 240ms ease; }
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

html[dir="rtl"] .icon.mirror { transform: scaleX(-1); }

.icon { display: inline-block; vertical-align: -0.2em; flex: none; }

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.45rem 0.7rem;
  z-index: 5;
}

.skip:focus { top: 0.6rem; }

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 1rem;
  gap: 0.75rem;
  overflow: hidden;
}

.sim {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0;
}

.mast, .passport, .roster, .activity, #thread {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
}

.brand { display: flex; gap: 0.75rem; align-items: center; min-width: 11rem; }
.brand > div { min-width: 8.5rem; }

.mark {
  width: 3.1rem;
  height: 3.1rem;
  display: block;
  flex: none;
}

.mark .arch { color: var(--gold); }
.mark .figures { color: var(--indigo); }

.wordmark {
  margin: 0;
  font-family: "Amiri", "Noto Naskh Arabic", Palatino, serif;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}

html[dir="ltr"] .wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.optional-off {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.product, .company-meta, .kicker, .meta, .fine, .person-role, .kind, .status, .left {
  color: var(--muted);
}

.product, .company-meta, .kicker { margin: 0; }

.product { font-size: 0.92rem; margin-top: 0.15rem; line-height: 1.4; }

html[dir="ltr"] .product {
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}

.company-name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.1;
}

.mast-tools, .locales { display: flex; gap: 0.35rem; align-items: center; }
.mast-menu { display: contents; }
.mast-menu > summary { display: none; }
.mast-menu > summary::-webkit-details-marker { display: none; }
.mast-panel { display: flex; gap: 0.35rem; align-items: center; }
button[data-primary-action], a[data-primary-action] { min-height: 44px; display: inline-flex; align-items: center; }

.locales button, .tool, .composer-tools button, .card-actions button, .kill, .activity-toggle, .room {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green-deep);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

.locales button[aria-pressed="true"], .options button[aria-pressed="true"], .theme[aria-pressed="true"] {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
}

.person[aria-current="true"] {
  background: var(--green-soft);
  color: var(--ink);
  border-color: var(--green);
}

.passport {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) minmax(12rem, 1fr) minmax(11rem, 0.8fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
}

.who h1 {
  margin: 0.1rem 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
}

html[dir="ltr"] .who h1 { font-weight: 600; }

.objective { margin: 0.2rem 0 0; }

.facts {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.facts div { display: grid; gap: 0.05rem; }
.facts dt { color: var(--muted); font-size: 0.78rem; }
.facts dd { margin: 0; }

.budget p { margin: 0; }
.left { font-size: 0.85rem; }

.meter {
  display: block;
  height: 0.35rem;
  margin: 0.35rem 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  width: 8rem;
}

.meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--copper));
  transform-origin: var(--origin);
}

.kill {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  overflow: hidden;
}

.workspace.has-activity,
.workspace:has(.room-rail) {
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr) minmax(14rem, 18rem);
}

.room-rail {
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
}

.rail-panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  line-height: 1.3;
}

.rail-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.rail-panel button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.55rem;
  text-align: start;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper);
  color: var(--ink);
}

.rail-panel button span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

.context-strip p {
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.9rem;
}

.workspace.is-focus-activity {
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 0.85fr) minmax(18rem, 1.15fr);
}

.roster, .activity, #thread {
  min-height: 0;
  height: 100%;
}

.roster {
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: auto;
  align-items: stretch;
}
.roster .person,
.roster .room,
.roster section,
.roster h2 { flex: 0 0 auto; min-height: min-content; }
.roster section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.roster h2 {
  position: static;
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--copper);
}

html[dir="ltr"] .roster h2 {
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.room { display: inline-flex; align-items: center; gap: 0.5rem; text-align: start; margin-bottom: 0.35rem; }

.desk-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.6rem; }
.desk-tabs button { border: 0; background: transparent; color: inherit; font: inherit; padding: 0.2rem 0.45rem; border-radius: 999px; }
.desk-tabs button[aria-current="true"] { background: var(--paper, #efe8d8); }
.desk-list { list-style: none; margin: 0; padding: 0; }
.notify { margin: 0.4rem 1rem 0; }
.team-tree { margin: 0.35rem 0.7rem 0.9rem; }
.team-tree h2 { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
.team-tree ol { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.team-tree li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.85rem; }
.person {
  display: flex;
  gap: 0.55rem;
  width: 100%;
  text-align: start;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0.8rem;
  padding: 0.45rem;
  align-items: flex-start;
  height: auto;
  flex-shrink: 0;
}

.person[aria-current="true"] { border-color: var(--green); }

.person > .avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  overflow: visible;
}

.person-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  width: 100%;
}
.person-name { font-weight: 600; }
.person-role, .status, .verified { font-size: 0.82rem; }
.status { display: inline-flex; align-items: center; gap: 0.3rem; }

.dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--idle);
  display: inline-block;
}

.person[data-status="working"] .dot { background: var(--green); }
.person[data-status="awaiting_approval"] .dot { background: var(--copper); }
.person[data-status="stopped"] .dot { background: var(--danger); }

#thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0.8rem 0.9rem 0.7rem;
  overflow: hidden;
}

.thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-bottom: 0.6rem;
}
.composer { flex: 0 0 auto; }

.bubble header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.bubble .body p { margin: 0.15rem 0; }

.bubble.from-owner {
  align-self: flex-end;
  max-width: min(40rem, 92%);
  background: var(--green-soft);
  border: 1px solid var(--owner-line);
  border-radius: 1rem 1rem 1rem 0.35rem;
  padding: 0.65rem 0.8rem;
}

html[dir="ltr"] .bubble.from-owner { border-radius: 1rem 1rem 0.35rem 1rem; }

.bubble.from-worker, .bubble.from-system {
  align-self: flex-start;
  max-width: min(42rem, 100%);
}

.bubble.from-system { color: var(--muted); font-size: 0.92rem; }

.caret {
  display: inline-block;
  width: 0.45rem;
  height: 0.95rem;
  margin-inline-start: 0.2rem;
  background: var(--copper);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

.writing {
  margin-inline-start: 0.35rem;
  color: var(--copper);
  font-size: 0.78rem;
}

@keyframes blink { 50% { opacity: 0; } }

.card {
  margin-top: 0.7rem;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.8rem;
  border-radius: 0.9rem;
}

.card h3, .sheet h4 { margin: 0.2rem 0 0.45rem; font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
html[dir="ltr"] .card h3, html[dir="ltr"] .sheet h4 { font-weight: 560; }

.card-top, .card-actions, .composer-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.badge {
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.78rem;
  border: 1px solid var(--line-strong);
}

.badge.risk { background: var(--copper-soft); color: var(--copper); border-color: transparent; }
.badge.cost { background: var(--panel-2); }

.approval { border-color: var(--approval-line); }
.approval[data-risk="R4"], .approval[data-risk="R5"] { border-color: var(--danger); background: var(--danger-soft); }

.card blockquote {
  margin: 0.4rem 0;
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--copper);
}

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.options button, .options button[disabled] {
  width: 100%;
  text-align: start;
  border-radius: 0.7rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0.55rem 0.7rem;
  display: grid;
}
.option-meta { color: var(--muted); font-size: 0.85rem; }

.frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.frames li {
  min-height: 0;
  overflow: visible;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.frames li p { margin: 0; line-height: 1.4; overflow-wrap: normal; word-break: normal; hyphens: none; }
.frame-art { width: 100%; height: 4.5rem; display: block; border-radius: 0.45rem; }
.frames span { font-family: var(--display); font-size: 1.3rem; color: var(--green); }

.sheet { border: 1px solid var(--line-strong); padding: 0.8rem; background: var(--panel); }
.sheet-brand { margin: 0; font-family: var(--display); color: var(--green); }
.sheet table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sheet td { border-top: 1px solid var(--line); padding: 0.35rem 0.2rem; vertical-align: top; }
.stamp {
  margin: 0.6rem 0 0;
  display: inline-block;
  border: 1.5px solid var(--copper);
  color: var(--copper);
  border-radius: 50%;
  padding: 0.35rem 0.55rem;
  font-family: var(--display);
  transform: rotate(-8deg);
}

.takeover { background: var(--copper-soft); }

.activity { padding: 0.8rem 0.9rem; overflow: auto; }
.activity h2, .standup h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
}
html[dir="ltr"] .activity h2, html[dir="ltr"] .standup h2 { font-weight: 560; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.feed li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  align-items: baseline;
  border-inline-start: 2px solid var(--line-strong);
  padding-inline-start: 0.7rem;
}
.feed li[data-kind="tool"] { border-color: var(--green); }
.feed li[data-kind="handoff"] { border-color: var(--copper); }
.feed .kind { color: var(--copper); font-size: 0.78rem; }
.feed time { color: var(--muted); font-size: 0.75rem; }
.feed strong, .feed p { flex-basis: 100%; margin: 0; }

.composer { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.composer-label { display: grid; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); }
textarea, .revise textarea {
  width: 100%;
  min-height: 4.4rem;
  resize: vertical;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: 0.7rem;
  padding: 0.6rem 0.7rem;
}
.tool input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tool { position: relative; display: inline-flex; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0; padding: 0; list-style: none; }
.chips li { border: 1px dashed var(--line-strong); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.82rem; }
.quiet { border-color: var(--line-strong); color: var(--muted); }

.feed-note, .manager-line {
  margin: 0 0 0.5rem;
  color: var(--green);
  font-size: 0.88rem;
}

.toasts {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.4rem;
  z-index: 6;
}

.toast {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 0.55rem 0.8rem;
  box-shadow: var(--shadow);
}

.standup { display: flex; flex-direction: column; gap: 0.55rem; }
.kbd-row {
  order: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kbd-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.7rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.78rem;
}
.kbd-row kbd {
  font-family: Inter, "IBM Plex Sans", sans-serif;
  font-size: 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.3rem;
  padding: 0.05rem 0.28rem;
  background: var(--paper);
}
@media (max-width: 768px) {
  .kbd-row { display: none; }
}
.rail-panel button { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.rail-initial {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-weight: 600;
  font-size: 0.85rem;
}
.rail-copy { display: grid; min-width: 0; }
.rail-copy strong { color: var(--ink); }
.pair-art { width: 4.5rem; height: 3.5rem; color: var(--indigo); display: block; }
.status-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.employee-card[data-status="working"] .status-pill { color: var(--gold); }
.employee-card[data-status="awaiting_approval"] .status-pill { color: var(--indigo); }
.employee-card[data-status="idle"] .status-pill { color: var(--muted); }
.employee-card[data-status="stopped"] .status-pill { color: var(--danger); }
.card, .employee-card, .device-card, .pair-card {
  box-shadow: 0 1px 2px rgba(26, 23, 64, 0.05), 0 10px 24px rgba(26, 23, 64, 0.06);
}
.standup-decisions { order: 1; }
.lead { margin: 0; font-size: 1.08rem; }
.standup-grid { display: none; }
.standup-grid section { background: var(--panel-2); border: 1px solid var(--line); padding: 0.7rem 0.8rem; }
.standup-grid ul, .standup-decisions { margin: 0; padding-inline-start: 1.1rem; }
.inbox-list, .standup-decisions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--panel);
}
.inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem 0.65rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.2rem 0.65rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.inbox-row:last-child { border-bottom: 0; }
.inbox-title { min-width: 0; display: grid; gap: 0.05rem; }
.inbox-title strong, .inbox-title small { overflow-wrap: break-word; }
.inbox-title small { color: var(--muted); font-size: 0.82rem; }
.inbox-row.card {
  margin-top: 0;
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
  padding: 0.2rem 0.65rem;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.inbox-row .primary { min-height: 44px; justify-self: end; }
.demo-footer {
  flex: none;
  margin: 0;
  padding: 0.15rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.demo-footer p { margin: 0; }
.marketing-desk { display: grid; gap: 0.75rem; align-items: start; }
.content-calendar { border: 1px solid var(--line); border-radius: 0.9rem; background: var(--panel); padding: 0.7rem; }
.content-calendar h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.content-calendar ol { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.content-calendar li { min-height: 2.5rem; border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.2rem; display: grid; align-content: start; gap: 0.1rem; font-size: 0.8rem; background: var(--paper); min-width: 0; }
.content-calendar .cal-dow { min-height: 1.5rem; border: 0; background: transparent; font-weight: 700; }
.content-calendar .cal-pad { background: transparent; border-color: transparent; }
.content-calendar .cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin: 0.2rem 0 0; font-size: 0.85rem; }
.content-calendar .is-marked { background: var(--gold-soft); border-color: var(--gold); }
@media (min-width: 1100px) {
  .marketing-desk { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr); }
}
.thread-bar { display: none; }

.dialog-back {
  position: fixed;
  inset: 0;
  background: rgba(16, 14, 26, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 4;
}
.dialog {
  width: min(32rem, 100%);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  padding: 1.1rem;
}
.dialog h2 { font-family: var(--display); margin: 0 0 0.4rem; }

.settled { color: var(--green-deep); }

.avatar { position: relative; overflow: visible; width: auto; height: auto; border: 0; background: transparent; }
.avatar-svg { width: 2.4rem; height: 2.4rem; display: block; border-radius: 50%; }
.avatar-lg .avatar-svg { width: 3.6rem; height: 3.6rem; }
.unread {
  position: absolute;
  top: -0.2rem;
  inset-inline-end: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--unread);
  color: var(--on-unread);
  font-size: 0.75rem;
  line-height: 1.15rem;
  text-align: center;
}
.who { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.who > .kicker, .who > h1, .who > .objective { flex: 1 0 100%; }
.task-progress, .meter { overflow: hidden; }
.task-progress {
  display: block;
  height: 0.32rem;
  width: 6.5rem;
  margin-top: 0.28rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.task-progress-fill { display: block; height: 100%; background: var(--green); }
.task-progress-fill.live { animation: pulse 1.4s ease infinite; }
.progress-label { font-size: 0.75rem; color: var(--muted); }
.person[data-status="working"] .dot, .feed li.live .kind { animation: pulse 1.6s ease infinite; }
.search { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; color: var(--muted); }
.search input, .palette input {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
mark { background: var(--copper-soft); color: var(--ink); }
.bubble-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.bubble-actions button, .bottom-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.bubble-actions button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.78rem;
}
.composer.dropping { outline: 2px dashed var(--copper); outline-offset: 4px; }
.drop-hint, .shortcuts { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--muted); }
.card-actions button, .composer-tools button, .kill, .theme, .tool, .locales button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.options button { display: flex; gap: 0.55rem; align-items: center; }
.roster h2, .activity h2, .kicker, .kind, .status, .badge { display: inline-flex; align-items: center; gap: 0.3rem; }
.roster h2, .activity h2 { display: flex; }
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  color: var(--muted);
  margin: 1.5rem 0.5rem;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 1rem;
  background: var(--panel);
}
.empty-art { width: 9rem; height: auto; color: var(--copper); }
.skeleton { display: grid; gap: 0.7rem; padding: 1.4rem; }
.sk-block {
  display: block;
  height: 1rem;
  width: 42%;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.sk-wide { width: 72%; height: 2.2rem; }
.sk-mid { width: 56%; }
.bubble.is-failed {
  border-color: var(--gold);
  background: #f8f1dc;
}
.bubble.is-failed .body { font-weight: 600; }
.typing { display: inline-flex; gap: 0.18rem; margin-inline-start: 0.35rem; }
.typing i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--copper);
  animation: bounce 1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
.card { animation: card-in 200ms ease; }
.card:has([data-primary-action]),
.card.approval,
.card.decision { animation: none; }
.palette-back { position: fixed; inset: 0; background: rgba(16, 14, 26, 0.5); display: grid; place-items: start center; padding: 12vh 1rem 1rem; z-index: 5; }
.palette { width: min(34rem, 100%); background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); padding: 0.9rem; }
.palette ul { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; max-height: 18rem; overflow: auto; }
.palette li { padding: 0.45rem 0.5rem; display: flex; gap: 0.4rem; align-items: center; }
.palette [aria-selected="true"] { background: var(--green-soft); color: var(--ink); }
.bottom-nav, .bottom-scroll, .approval-dock { display: none; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  margin-inline-start: 0.4rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--gold-soft, #f8f1dc);
  color: var(--gold, #6f5410);
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}
.bubble, .lead, .objective, textarea { font-size: 16px; }
.composer-tools button, .person, .room, .kill, .tool { min-height: 44px; }
.theme { background: transparent; border: 1px solid var(--green); color: var(--green); border-radius: 999px; padding: 0.35rem 0.8rem; white-space: nowrap; }
.bottom-nav button, .room, .person { gap: 0.35rem; }
bdi.money, .pair-code, .kpi-value { white-space: nowrap; }
.lead, .card p, .team-spend, .objective { white-space: normal; overflow-wrap: break-word; min-width: 0; }
.card, .decision, .standup-grid section { min-width: 0; }

@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes pulse { 50% { opacity: 0.45; } }

@media (max-width: 800px) {
  body { overflow: hidden; }
  .app {
    height: 100dvh;
    overflow: hidden;
    padding: 0.55rem 0.55rem calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
  .mast {
    position: sticky;
    top: 0;
    z-index: 8;
    flex-shrink: 0;
    max-height: none;
    overflow: visible;
    grid-template-columns: auto 1fr;
  }
  .mast .mark { width: 2rem; height: 2rem; }
  .mast .company, .mast .product { display: none; }
  .passport {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    max-height: none;
    overflow: visible;
    gap: 0.45rem;
    grid-template-columns: none;
  }
  .app:has(#thread[data-view="employees"]) .passport { display: none; }
  .passport .avatar-svg,
  .passport .avatar-lg .avatar-svg { width: 2.25rem; height: 2.25rem; }
  .passport .budget,
  .passport .facts,
  .passport .objective,
  .passport .live-jump,
  .passport .kicker,
  .passport .meter,
  .passport .left,
  .passport .task-cost { display: none; }
  .passport .who { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1 1 auto; }
  .passport h1 { margin: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .passport .kill {
    width: auto;
    flex: none;
    min-height: 36px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
  }
  .workspace { min-height: calc(100dvh - 120px - 4.75rem); }
  #thread { min-height: calc(100dvh - 120px - 4.75rem); }
  .thread { min-height: 300px; }
  .workspace { display: block; overflow: hidden; }
  .workspace > * { display: none; height: 100%; overflow: auto; }
  .workspace[data-pane="roster"] .roster { display: flex; flex-direction: column; }
  .workspace[data-pane="thread"] #thread,
  .workspace[data-pane="room"] #thread,
  .workspace[data-pane="devices"] #thread { display: flex; }
  .workspace[data-pane="activity"] .activity { display: block; }
  .person, .room { width: 100%; min-width: 0; }
  .standup-grid, .standup-decisions, .frames { grid-template-columns: 1fr; }
  .bubble.from-owner, .bubble.from-worker { max-width: 100%; }
    .bottom-scroll { display: block; }
  .bottom-scroll {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    flex: none;
    z-index: 5;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .workspace > * { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  .mast { padding: 0.4rem 0.55rem; }
  .wordmark { font-size: 1.2rem; line-height: 1.15; }
  .passport { padding: 0.45rem 0.6rem; gap: 0.45rem; }
  .who h1 { font-size: 1.15rem; line-height: 1.2; }
  .facts { display: none; }
  .theme, .theme span { white-space: nowrap; }
  .mast-menu { display: block; position: relative; }
  .mast-menu > summary { display: inline-flex; min-height: 44px; min-width: 44px; list-style: none; }
  .mast-menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mast-panel {
    display: none;
    position: absolute;
    z-index: 30;
    inset-inline-end: 0;
    top: calc(100% + 0.35rem);
    flex-direction: column;
    align-items: stretch;
    min-width: 12.5rem;
    padding: 0.4rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    box-shadow: var(--shadow);
  }
  .mast-menu[open] > .mast-panel { display: flex; }
  [data-worker-context] { display: none !important; }
  .more-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 14, 26, 0.48);
    z-index: 3;
  }
  .more-sheet {
    position: absolute;
    inset-inline: 0.5rem;
    bottom: calc(100% + 0.5rem);
    z-index: 4;
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  .more-sheet a, .more-sheet button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    text-align: start;
  }
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    width: 100%;
  }
  .bottom-nav button {
    background: transparent;
    border: 0;
    color: var(--muted);
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 0.25rem 0.125rem;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
  .bottom-nav button span {
    display: block;
    max-width: 100%;
  }
  .bottom-nav button[aria-current="true"],
  .bottom-nav button[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .toasts { bottom: 4.2rem; }
  .standup { display: flex; flex-direction: column; }
  .standup-decisions { order: 1; }
  .standup-grid { order: 2; }
  .standup .manager-line { margin: 0; }
  .standup-decisions .card { margin-top: 0.35rem; padding: 0.55rem 0.7rem; }
  .standup-decisions .card h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
  .approval-dock { display: none; }
}

.live-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.live-switch { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.live-jump button, .live-switch button, .live-controls button, .live-note button, .replay-side > button, .desk-files button, .live-feed button, .replay-list button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.live-jump button, .live-switch button, .live-controls button, .live-note button, .replay-side > button {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.passport.live-head { grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 0.7fr); }
.live-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.8fr) minmax(13rem, 0.62fr);
  gap: 0.7rem;
}
.live-screen, .live-steps, .live-files, .replay-shot, .replay-side {
  min-height: 0;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.75rem;
}
.browser { border: 1px solid var(--line-strong); border-radius: 0.85rem; overflow: hidden; background: var(--paper); }
.chrome-bar { display: flex; gap: 0.45rem; align-items: center; padding: 0.4rem 0.55rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 0.22rem; }
.dots i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--line-strong); display: block; }
.dots i:first-child { background: var(--danger); }
.urlbar, .tile .urlbar {
  flex: 1;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-name, .live-pill { font-size: 0.75rem; display: inline-flex; gap: 0.25rem; align-items: center; }
.live-pill { border: 1px solid var(--green); color: var(--green); border-radius: 999px; padding: 0.05rem 0.45rem; }
.is-live .live-pill { animation: pulse 1.6s ease infinite; }
.frame-body { padding: 0.85rem 0.9rem 1rem; display: grid; gap: 0.35rem; }
.frame-body h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; }
.secret-field .mask {
  filter: blur(5px);
  background: var(--ink);
  color: transparent;
  border-radius: 0.25rem;
  padding: 0 0.4rem;
  user-select: none;
}
.secret-field i { color: var(--copper); font-style: normal; font-size: 0.78rem; }
.mini-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.mini-frames li { min-height: 4.2rem; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--copper); }
.live-feed, .replay-list, .desk-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.live-feed li { border-inline-start: 2px solid var(--line-strong); padding-inline-start: 0.55rem; }
.live-feed li.is-current { border-color: var(--copper); background: var(--copper-soft); }
.live-feed button, .replay-list button, .desk-files button { background: transparent; border: 0; text-align: start; padding: 0.15rem 0; color: inherit; }
.desk-files button { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 0.7rem; padding: 0.45rem; }
.desk-files small { display: block; color: var(--muted); }
.live-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: end; margin-top: 0.65rem; }
.live-note { display: flex; gap: 0.35rem; align-items: end; flex: 1 1 16rem; }
.live-note label { display: grid; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); flex: 1; }
.live-note input, .replay-side input[type="range"] { width: 100%; accent-color: var(--green); }
.live-note input {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}
.handoff, .note-banner { margin: 0.2rem 0; color: var(--copper); }
.note-banner { color: var(--green); }
.live-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-content: start; }
.tile { display: flex; gap: 0.55rem; text-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 0.85rem; padding: 0.65rem; color: inherit; }
.tile-copy { display: grid; gap: 0.15rem; min-width: 0; }
.replay { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr); gap: 0.7rem; }
.live-nav { display: none; }
.live-risk { margin-top: 0.6rem; }

@media (max-width: 800px) {
  body:has(.live-app) { overflow: auto; }
  .live-app { height: auto; min-height: 100dvh; overflow: visible; }
  .live-stage { display: block; overflow: visible; height: auto; flex: none; }
  .live-stage > * { display: none; height: auto; overflow: visible; }
  .live-stage[data-pane="screen"] .live-screen,
  .live-stage[data-pane="steps"] .live-steps,
  .live-stage[data-pane="files"] .live-files { display: block; }
  .live-app .mast { grid-template-columns: 1fr auto; padding: 0.45rem 0.6rem; }
  .live-app .company { display: none; }
  .passport.live-head { padding: 0.55rem 0.7rem; }
  .live-head h1 { font-size: 1.45rem; }
  .live-head .fine { display: none; }
  .live-screen { padding-bottom: 4.5rem; }
  .passport.live-head, .replay, .live-grid { grid-template-columns: 1fr; }
  .live-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: sticky;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: 3;
  }
  .live-nav button {
    background: transparent;
    border: 0;
    color: var(--muted);
    justify-content: center;
    padding: 0.4rem 0.1rem 0.55rem;
    font-size: 0.75rem;
  }
  .live-nav button[aria-current="true"] { color: var(--ink); }
}

.devices { display: grid; gap: 0.8rem; }
@media (min-width: 1100px) {
  .devices { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); align-items: start; }
  .devices .device-note, .devices .fine { grid-column: 1 / -1; }
  .devices .pair-card { grid-column: 1; grid-row: 2; }
  .devices .device-grid { grid-column: 2; grid-row: 2; align-self: start; }
}
.coming-soon, .device-note { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--gold-ink, #6f5410); background: var(--gold-bg, #f8f1dc); color: var(--ink); border-radius: 12px; font-size: 16px; }
.pair-card, .device-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.45rem 0.7rem;
}
.device-card { display: grid; gap: 0.2rem; }
.pair-card.is-focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pair-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pair-head .kicker { margin: 0; }
.pair-head .primary { flex: 0 0 auto; }
.pair-row { display: flex; gap: 1rem; align-items: center; }
.qr { width: 9.5rem; height: 9.5rem; background: #fff; border-radius: 0.6rem; flex: none; }
.qr rect { fill: #1a1740; }
.pair-code {
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin: 0;
}
.device-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--panel);
}
.device-grid .device-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: transparent;
}
.device-grid .device-card:last-child { border-bottom: 0; }
.employee-board .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.employee-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  min-height: 14rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
}
.employee-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; }
.employee-card > .primary { margin-top: auto; align-self: stretch; justify-self: stretch; }
@media (min-width: 900px) {
  .employee-board .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .employee-board .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.employee-top .primary { align-self: start; }
.employee-card h3, .employee-card p { margin: 0; }
.employee-card .task-line span, .employee-card .left { color: var(--muted); font-size: 0.9rem; }
.employee-card .task-line { line-height: 1.45; }
.employee-card .primary { justify-self: start; min-height: 44px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
}
.device-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}
.device-id { display: grid; gap: 0.35rem; min-width: 0; }
@media (min-width: 1100px) {
  .device-card header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  .device-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
  .device-card .last-seen { margin: 0; }
}
.device-card .badge { justify-self: start; max-width: 100%; white-space: normal; line-height: 1.35; }
.os-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.perm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0.35rem 0; padding: 0; }
.perm-chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  background: var(--panel-2);
  font-size: 0.8rem;
}
.last-seen { margin: 0.35rem 0; }
.device-card h3 { margin: 0; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.device-card p { margin: 0.35rem 0; color: var(--muted); }
.device-card p span, .who-line span { color: var(--ink); }
.person-toggles { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.person-toggles button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}
.person-toggles button[aria-pressed="true"] { background: var(--indigo-soft); border-color: var(--indigo); }
.person-toggles small { display: block; color: var(--muted); font-size: 0.75rem; }
.device-chip {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  background: var(--gold-soft);
  color: var(--ink);
}
.device-card[data-status="revoked"] { opacity: 0.62; }
@media (max-width: 800px) {
  .pair-row, .device-grid { display: grid; grid-template-columns: 1fr; }
  .card.approval { display: flex; flex-direction: column; align-items: stretch; }
  .card.approval h3 { order: 1; }
  .card.approval .card-top { order: 2; flex-direction: column; align-items: flex-start; width: 100%; }
  .card.approval .card-actions { order: 3; flex-direction: column; align-items: stretch; width: 100%; }
  .card.approval .card-actions button { width: 100%; }
  .card.approval blockquote,
  .card.approval .preview-label,
  .card.approval .fine,
  .card.approval .meta { order: 4; }
  .inbox-row.card.decision {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.7rem;
  }
  .inbox-row.card.decision .inbox-title { order: 1; }
  .inbox-row.card.decision .status-pill { order: 2; align-self: flex-start; }
  .inbox-row.card.decision .primary { order: 3; width: 100%; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}