/* AIFF design tokens — shadcn's vocabulary and default "neutral" values, verbatim.
   Sites override any of these via kernel({ theme: { light: {...}, dark: {...} } }).
   Any shadcn / tweakcn theme pastes in unchanged. */

:root {
  --radius: 0.625rem;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* AIFF additions: the agent's presence — ghosting, approvals, the dock. */
  --agent: oklch(0.627 0.265 303.9);
  --agent-foreground: oklch(0.985 0 0);
  --agent-soft: oklch(0.627 0.265 303.9 / 8%);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  color-scheme: light;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]):where(.aiff-dark) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --agent: oklch(0.714 0.203 305.5);
    --agent-soft: oklch(0.714 0.203 305.5 / 12%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --agent: oklch(0.714 0.203 305.5);
  --agent-soft: oklch(0.714 0.203 305.5 / 12%);
  color-scheme: dark;
}


/* AIFF components — one stylesheet keyed on the semantic markup the tree emits.
   Contract: data-aiff-kind, data-aiff-region, data-variant, data-size, data-ghost.
   Vocabulary follows shadcn: default · secondary · outline · ghost · destructive · link. */

/* ─── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; padding: 2rem 1.5rem 8rem; background: var(--background); color: var(--foreground); max-width: 72rem; margin-inline: auto; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--foreground); text-underline-offset: 4px; }
a:hover { color: var(--muted-foreground); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }

/* ─── Page layout ──────────────────────────────────────────────────────── */

#aiff-root { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
#aiff-root > :not(section[data-aiff-region]) { flex: 1 1 100%; }
#aiff-root > button, #aiff-root > a { flex: 0 0 auto; }
#aiff-root > h1 { margin-bottom: -0.5rem; }

/* Regions are cards. */
section[data-aiff-region] {
  flex: 1 1 22rem; min-width: 0;
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
section[data-side="left"], section[data-side="right"] { flex: 0 1 20rem; }
section[data-side="right"] { order: 2; }
section[data-side="top"], section[data-side="bottom"] { flex: 1 1 100%; }
section[data-side="bottom"] { order: 3; }
section[data-aiff-region] > h2:first-child { margin-bottom: -0.25rem; }

div[data-aiff-layout="row"] { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
div[data-aiff-layout="row"] > label { flex: 1 1 10rem; }
div[data-aiff-layout="row"] > article[data-aiff-kind="card"] { flex: 1 1 16rem; }
div[data-aiff-layout="stack"] { display: flex; flex-direction: column; gap: 0.75rem; }

article[data-aiff-kind="card"] {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem;
}
article[data-aiff-kind="card"] > h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
article[data-aiff-kind="card"] > button { align-self: flex-start; margin-top: 0.25rem; }

/* ─── Typography ───────────────────────────────────────────────────────── */

h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
h4 { font-size: 0.9375rem; font-weight: 600; }
p[data-aiff-kind="text"] { color: var(--foreground); }
p[data-variant="muted"] { color: var(--muted-foreground); }
p[data-variant="small"] { font-size: 0.8125rem; color: var(--muted-foreground); }
p[data-variant="lead"] { font-size: 1.125rem; color: var(--muted-foreground); }
p[data-variant="code"] { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--muted); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); display: inline-block; }

hr[data-aiff-kind="divider"] { border: 0; border-top: 1px solid var(--border); margin: 0.25rem 0; width: 100%; }
img[data-aiff-kind="image"] { max-width: 100%; height: auto; align-self: flex-start; border-radius: var(--radius-md); }

/* ─── Badge & alert ────────────────────────────────────────────────────── */

span[data-aiff-kind="badge"] {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 0.75rem; font-weight: 500; line-height: 1;
  padding: 0.3rem 0.55rem; border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground);
}
span[data-aiff-kind="badge"][data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
span[data-aiff-kind="badge"][data-variant="outline"] { background: transparent; color: var(--foreground); border-color: var(--border); }
span[data-aiff-kind="badge"][data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
span[data-aiff-kind="badge"][data-variant="agent"] { background: var(--agent); color: var(--agent-foreground); }

div[data-aiff-kind="alert"] {
  display: grid; gap: 0.25rem;
  padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); color: var(--card-foreground); font-size: 0.875rem;
}
div[data-aiff-kind="alert"] > strong { font-weight: 600; letter-spacing: -0.01em; }
div[data-aiff-kind="alert"] > span { color: var(--muted-foreground); }
div[data-aiff-kind="alert"][data-variant="destructive"] { border-color: color-mix(in oklch, var(--destructive) 40%, transparent); color: var(--destructive); }
div[data-aiff-kind="alert"][data-variant="destructive"] > span { color: color-mix(in oklch, var(--destructive) 85%, var(--foreground)); }
div[data-aiff-kind="alert"][data-variant="agent"] { border-color: var(--agent); background: var(--agent-soft); }

/* ─── Forms ────────────────────────────────────────────────────────────── */

label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; line-height: 1; }
label > span { color: var(--foreground); }
label:has(> input[type="checkbox"]), fieldset label { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; line-height: 1.25; }

input, textarea, select {
  font: inherit; font-size: 0.875rem; line-height: 1.25; width: 100%;
  min-height: 2.25rem; padding: 0.4rem 0.75rem;
  color: var(--foreground); background: transparent;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--destructive); }
textarea { min-height: 4.5rem; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%); background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; padding-right: 2rem; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; min-height: 0; padding: 0; margin: 0; accent-color: var(--primary); box-shadow: none; flex: none; }
input[type="date"] { min-width: 10rem; }

fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
legend { font-size: 0.875rem; font-weight: 500; padding: 0; margin-bottom: 0.25rem; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  transition: background-color .15s, color .15s, opacity .15s;
}
button:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
button[data-variant="primary"] { /* alias of default */ }
button[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
button[data-variant="secondary"]:hover { background: color-mix(in oklch, var(--secondary) 80%, var(--foreground) 5%); }
button[data-variant="outline"] { background: var(--background); color: var(--foreground); border-color: var(--input); }
button[data-variant="outline"]:hover { background: var(--accent); color: var(--accent-foreground); }
button[data-variant="ghost"] { background: transparent; color: var(--foreground); box-shadow: none; }
button[data-variant="ghost"]:hover { background: var(--accent); color: var(--accent-foreground); }
button[data-variant="destructive"], button[data-variant="danger"] { background: var(--destructive); color: var(--destructive-foreground); }
button[data-variant="destructive"]:hover, button[data-variant="danger"]:hover { background: color-mix(in oklch, var(--destructive) 90%, transparent); }
button[data-variant="link"] { background: transparent; color: var(--foreground); box-shadow: none; text-decoration: underline; text-underline-offset: 4px; padding: 0; height: auto; }
button[data-variant="agent"] { background: var(--agent); color: var(--agent-foreground); }
button[data-size="sm"] { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-md); }
button[data-size="lg"] { height: 2.5rem; padding: 0 1.5rem; font-size: 0.9375rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
button[aria-busy] { opacity: 0.6; cursor: progress; }
section[data-aiff-region] > button, dialog[data-aiff-region] > button, article[data-aiff-kind="card"] > button { align-self: flex-start; }
button[data-align$="-right"] { align-self: flex-end; }
button[data-align$="-center"], button[data-align="center"] { align-self: center; }
button[data-align^="top-"] { order: -1; }

/* ─── Table ────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; caption-side: bottom; }
caption { color: var(--muted-foreground); font-size: 0.8125rem; padding-top: 0.75rem; text-align: left; }
th { text-align: left; font-weight: 500; color: var(--muted-foreground); height: 2.5rem; padding: 0 0.75rem; vertical-align: middle; }
td { padding: 0.6rem 0.75rem; vertical-align: middle; border-top: 1px solid var(--border); }
tbody tr:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
td:last-child, th:last-child { text-align: right; }
td:first-child, th:first-child { text-align: left; }

/* ─── Agent presence ───────────────────────────────────────────────────── */

[data-ghost="agent"] > input, [data-ghost="agent"] > textarea, [data-ghost="agent"] > select,
input[data-ghost="agent"], textarea[data-ghost="agent"], select[data-ghost="agent"], fieldset[data-ghost="agent"], label:has(> input[data-ghost="agent"]) {
  border-color: var(--agent); box-shadow: 0 0 0 3px var(--agent-soft); transition: box-shadow .3s, border-color .3s;
}
fieldset[data-ghost="agent"] { border-radius: var(--radius-md); padding: 0.5rem; margin: -0.5rem; }
label[data-ghost="agent"] { border-radius: var(--radius-md); }
[data-ghost="pending"] { box-shadow: 0 0 0 3px var(--agent-soft), 0 0 0 1px var(--agent); animation: aiff-pulse 1.2s ease-in-out infinite; }
@keyframes aiff-pulse { 50% { box-shadow: 0 0 0 6px transparent, 0 0 0 1px var(--agent); } }

dialog[data-aiff-region="aiff:approvals"] { border-color: var(--agent); max-width: 34rem; }
dialog[data-aiff-region="aiff:approvals"] > h2 { color: var(--agent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
dialog[data-aiff-region="aiff:approvals"] p[data-variant="lead"] { color: var(--foreground); font-size: 1.0625rem; font-weight: 500; }
dialog[data-aiff-region="aiff:approvals"] button[data-aiff-id$=":approve"] { background: var(--agent); color: var(--agent-foreground); }

section[data-aiff-region="aiff:tour"] { display: none; }

/* ─── The dock ─────────────────────────────────────────────────────────── */

/* A column on the right, full height, floating with a little depth; the page keeps to its left. */
section[data-aiff-region="aiff:agent"] {
  position: fixed; top: 1rem; right: 1rem; bottom: 1rem; z-index: 10;
  width: min(22rem, calc(100vw - 2rem)); overflow: hidden;
  flex: none; gap: 0.5rem; padding: 1rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgb(0 0 0 / 12%), 0 1px 3px rgb(0 0 0 / 6%);
}
section[data-aiff-region="aiff:agent"]::before { content: attr(aria-label); flex: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--agent); }
/* The transcript scrolls; the composer stays at the bottom. */
section[data-aiff-region="aiff:agent"] > .aiff-transcript { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-right: 0.25rem; overscroll-behavior: contain; }
section[data-aiff-region="aiff:agent"] > textarea, section[data-aiff-region="aiff:agent"] > button { flex: none; }
/* The page steps aside for it. */
@media (min-width: 64rem) {
  #aiff-root:has(> section[data-aiff-region="aiff:agent"]) { padding-right: calc(22rem + 2.5rem) !important; }
}
section[data-aiff-region="aiff:agent"] p { font-size: 0.875rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-lg); max-width: 90%; white-space: pre-wrap; }
section[data-aiff-region="aiff:agent"] p[data-variant="user"] { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); }
section[data-aiff-region="aiff:agent"] p[data-variant="agent"] { align-self: flex-start; background: var(--muted); color: var(--foreground); }
section[data-aiff-region="aiff:agent"] p[data-variant="status"] { padding: 0; color: var(--muted-foreground); font-style: italic; font-size: 0.8125rem; }
section[data-aiff-region="aiff:agent"] p.partial::after { content: "▍"; color: var(--agent); animation: aiff-blink 1s steps(2) infinite; }
@keyframes aiff-blink { 50% { opacity: 0; } }
section[data-aiff-region="aiff:agent"] > .aiff-suggestions { flex: none; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
section[data-aiff-region="aiff:agent"] .suggest { align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
section[data-aiff-region="aiff:agent"] .suggest > p { flex: 1 1 auto; padding: 0; font-size: 0.8125rem; max-width: 100%; }
section[data-aiff-region="aiff:agent"] .suggest > button { align-self: center; }
section[data-aiff-region="aiff:agent"] .suggest > button[data-variant="ghost"] { background: none; color: var(--muted-foreground); }
section[data-aiff-region="aiff:agent"] textarea { min-height: 3rem; }
section[data-aiff-region="aiff:agent"] button { align-self: flex-end; background: var(--agent); color: var(--agent-foreground); }
@media (max-width: 64rem) {
  section[data-aiff-region="aiff:agent"] { top: auto; max-height: 60vh; }
}
@media (max-width: 40rem) {
  section[data-aiff-region="aiff:agent"] { right: 0; bottom: 0; left: 0; width: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 60vh; }
}

/* ─── Calendar ─────────────────────────────────────────────────────────── */

div[data-aiff-kind="calendar"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; width: 100%; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
div[data-aiff-kind="calendar"] > span { background: var(--muted); padding: 0.45rem 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
div[data-aiff-kind="calendar"] > button[role="gridcell"] {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.2rem; min-height: 6rem; height: auto; padding: 0.4rem;
  background: var(--card); color: var(--foreground); border: 0; border-radius: 0; box-shadow: none; text-align: left; font-weight: 400; min-width: 0;
}
div[data-aiff-kind="calendar"] > button[role="gridcell"]:hover { background: color-mix(in oklch, var(--muted) 60%, var(--card)); }
div[data-aiff-kind="calendar"] > button[data-outside] { background: color-mix(in oklch, var(--muted) 35%, var(--card)); color: var(--muted-foreground); }
div[data-aiff-kind="calendar"] > button[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
div[data-aiff-kind="calendar"] > button > b { align-self: flex-start; font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 0.3rem 0.35rem; border-radius: 999px; }
div[data-aiff-kind="calendar"] > button[data-today] > b { background: var(--agent); color: var(--agent-foreground); }
div[data-aiff-kind="calendar"] > button > i { display: block; font-style: normal; font-size: 0.72rem; line-height: 1.25; padding: 0.15rem 0.35rem; border-radius: 4px; background: var(--muted); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div[data-aiff-kind="calendar"] > button > i > time { color: var(--muted-foreground); }
div[data-aiff-kind="calendar"] > button > i[data-kind="event"] { background: var(--agent-soft); color: var(--agent); }
div[data-aiff-kind="calendar"] > button > i[data-kind="event"] > time { color: inherit; opacity: 0.8; }
div[data-aiff-kind="calendar"] > button > i[data-emphasis] { box-shadow: inset 2px 0 0 var(--destructive); }
div[data-aiff-kind="calendar"] > button > i[data-done] { text-decoration: line-through; opacity: 0.5; }
div[data-aiff-kind="calendar"] > button > i[data-more] { background: none; color: var(--muted-foreground); padding-left: 0.1rem; }
@media (max-width: 48rem) {
  div[data-aiff-kind="calendar"] > button[role="gridcell"] { min-height: 3.5rem; padding: 0.25rem; }
  div[data-aiff-kind="calendar"] > button > i { display: none; }
  div[data-aiff-kind="calendar"] > button > i:first-of-type { display: block; }
}

/* ─── Modal ────────────────────────────────────────────────────────────── */

.aiff-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 50%); backdrop-filter: blur(2px); }
dialog[data-aiff-region] {
  position: static; margin: 0; max-width: min(32rem, 100%); width: 100%; max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
}
dialog[data-aiff-region] > h2 { font-size: 1.125rem; }

/* ─── Tabs ─────────────────────────────────────────────────────────────── */

div[data-aiff-kind="tabs"] { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--muted); border-radius: var(--radius-lg); align-self: flex-start; max-width: 100%; overflow-x: auto; }
div[data-aiff-kind="tabs"] > button[role="tab"] { height: 2rem; padding: 0 0.875rem; font-size: 0.875rem; background: transparent; color: var(--muted-foreground); box-shadow: none; border-radius: var(--radius-md); }
div[data-aiff-kind="tabs"] > button[role="tab"]:hover { color: var(--foreground); }
div[data-aiff-kind="tabs"] > button[aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }

/* ─── Switch, checkbox groups ──────────────────────────────────────────── */

input[type="checkbox"][data-variant="switch"] {
  appearance: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--input); border: 0; position: relative; cursor: pointer; transition: background .15s;
}
input[type="checkbox"][data-variant="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 999px; background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); transition: transform .15s; }
input[type="checkbox"][data-variant="switch"]:checked { background: var(--primary); }
input[type="checkbox"][data-variant="switch"]:checked::after { transform: translateX(1rem); }
fieldset[data-aiff-kind="checks"] label { font-weight: 400; }

/* ─── Hints & errors ───────────────────────────────────────────────────── */

small[data-aiff-hint] { font-size: 0.8125rem; font-weight: 400; color: var(--muted-foreground); }
small[data-aiff-error] { font-size: 0.8125rem; font-weight: 500; color: var(--destructive); }
label[data-invalid] > span, fieldset[data-invalid] > legend { color: var(--destructive); }
label[data-invalid] input, label[data-invalid] textarea, label[data-invalid] select { border-color: var(--destructive); }

/* ─── Facts, stats, nav ────────────────────────────────────────────────── */

dl[data-aiff-kind="facts"] { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; font-size: 0.875rem; }
dl[data-aiff-kind="facts"] > div { display: contents; }
dl[data-aiff-kind="facts"] dt { color: var(--muted-foreground); }
dl[data-aiff-kind="facts"] dd { margin: 0; font-weight: 500; }

div[data-aiff-kind="stat"] { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 10rem; flex: 1 1 10rem; }
div[data-aiff-kind="stat"] > span { font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); }
div[data-aiff-kind="stat"] > strong { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
div[data-aiff-kind="stat"] > em { font-style: normal; font-size: 0.8125rem; color: var(--chart-2); }
div[data-aiff-kind="stat"] > small { font-size: 0.75rem; color: var(--muted-foreground); }

nav[data-aiff-kind="nav"] { display: flex; gap: 0.25rem; flex-wrap: wrap; }
nav[data-aiff-kind="nav"] a { text-decoration: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 0.5rem; }
nav[data-aiff-kind="nav"] a > svg { flex: none; }
nav[data-aiff-kind="nav"] .grp { display: contents; }
nav[data-aiff-kind="nav"] .grp > b { display: none; }
nav[data-aiff-kind="nav"] a:hover { background: var(--accent); color: var(--accent-foreground); }
nav[data-aiff-kind="nav"] a[aria-current="page"] { background: var(--secondary); color: var(--foreground); }
section[data-side="left"] nav[data-aiff-kind="nav"] { flex-direction: column; }

/* ─── Table extras ─────────────────────────────────────────────────────── */

th > button[role=""], th > button { height: auto; padding: 0; font-weight: 500; color: var(--muted-foreground); }
th > button:hover { color: var(--foreground); background: transparent; }
th > span[aria-hidden] { font-size: 0.6rem; margin-left: 0.3rem; color: var(--muted-foreground); }
td > button { margin-left: 0.375rem; }
td:has(> button), td:first-child { white-space: nowrap; }
td[data-aiff-empty] { text-align: center; color: var(--muted-foreground); padding: 2rem; }
tfoot td { border-top: 1px solid var(--border); padding-top: 0.75rem; text-align: right; }
tfoot td > span { color: var(--muted-foreground); font-size: 0.8125rem; margin-right: 0.75rem; }
tfoot td > button { margin-left: 0.375rem; }

/* ─── Notices (toasts) ─────────────────────────────────────────────────── */

section[data-aiff-region="aiff:notices"] { position: fixed; top: 1rem; right: 1rem; z-index: 30; width: min(22rem, calc(100vw - 2rem)); flex: none; padding: 0; gap: 0.5rem; background: transparent; border: 0; box-shadow: none; }
section[data-aiff-region="aiff:notices"] > p { padding: 0.75rem 1rem; font-size: 0.875rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / 15%); animation: aiff-toast .25s ease-out; }
section[data-aiff-region="aiff:notices"] > p[data-variant="success"] { border-color: var(--chart-2); }
section[data-aiff-region="aiff:notices"] > p[data-variant="destructive"] { border-color: var(--destructive); color: var(--destructive); }
@keyframes aiff-toast { from { opacity: 0; transform: translateY(-6px); } }

/* ─── Errors ───────────────────────────────────────────────────────────── */

#aiff-root[data-aiff-error]::after { content: attr(data-aiff-error); flex-basis: 100%; color: var(--destructive); font-size: 0.875rem; }


:root {
  --background: #f7f7f8;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --muted-foreground: #6b7280;
  --muted: #f3f4f6;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --primary: #111827;
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #111827;
  --accent: #f3f4f6;
  --accent-foreground: #111827;
  --radius: 0.6rem;
  --agent: #7c3aed;
  --agent-foreground: #ffffff;
  --agent-soft: rgb(124 58 237 / 10%);
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html { font-size: 15px; }
body { padding: 0; max-width: none; background: #f7f7f8; color: #111827; }

/* ─── Frame: sidebar · title bar · canvas · assistant panel ────────────── */
#aiff-root { padding: 5.75rem 2rem 3rem calc(15rem + 2rem); gap: 1.25rem; min-height: 100vh; }
#aiff-root:has(> section[data-aiff-region="aiff:agent"]) { padding-right: calc(22rem + 3rem) !important; }

nav[data-aiff-kind="nav"] {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 15rem;
  display: flex; flex-direction: column; gap: .15rem; padding: 1rem .75rem 1rem;
  background: #fff; border-right: 1px solid #e5e7eb; overflow-y: auto;
}
nav[data-aiff-kind="nav"] .grp { display: flex; flex-direction: column; gap: .15rem; }
nav[data-aiff-kind="nav"] .grp > b { display: block; padding: 1.1rem .75rem .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
nav[data-aiff-kind="nav"] .grp.bottom { margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0f0f2; }
nav[data-aiff-kind="nav"] a { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: .65rem; color: #374151; font-size: .95rem; font-weight: 500; }
nav[data-aiff-kind="nav"] a:hover { background: #f3f4f6; color: #111827; }
nav[data-aiff-kind="nav"] a[aria-current="page"] { background: #f3f4f6; color: #111827; box-shadow: inset 0 0 0 1px #e5e7eb; }
nav[data-aiff-kind="nav"] a > svg { width: 1.2rem; height: 1.2rem; color: #4b5563; }
nav[data-aiff-kind="nav"] a[aria-current="page"] > svg { color: #111827; }
nav[data-aiff-kind="nav"] a[data-icon="logo"] { font-weight: 700; font-size: 1.1rem; color: #111827; margin-bottom: .75rem; }
nav[data-aiff-kind="nav"] a[data-icon="logo"] > svg { width: 1.5rem; height: 1.5rem; color: #111827; }

/* The page's title becomes the bar across the top. */
#aiff-root > h1 {
  position: fixed; top: 0; left: 15rem; right: 0; z-index: 15; height: 4rem; margin: 0;
  display: flex; align-items: center; padding: 0 2rem;
  font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: #111827;
  background: #fff; border-bottom: 1px solid #e5e7eb;
}
#aiff-root > p[data-variant="muted"]:nth-child(3) { margin-top: -.5rem; }
#aiff-root > a[href] { color: #4b5563; font-size: .9rem; }

/* Cards. */
section[data-aiff-region] { background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); gap: .9rem; }
section[data-aiff-region] > h2:first-child { margin-bottom: 0; }
h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
p[data-variant="muted"], p[data-variant="small"] { color: #6b7280; }

article[data-aiff-kind="card"] { border-radius: .9rem; border-color: #e5e7eb; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
article[data-aiff-kind="card"] > h3 { text-transform: none; letter-spacing: 0; font-size: 1rem; color: #111827; }
div[data-aiff-kind="stat"] { border-radius: .9rem; border-color: #e5e7eb; }
div[data-aiff-kind="stat"] > strong { font-size: 1.9rem; font-weight: 600; }

/* Controls. */
input, textarea, select { border-radius: .6rem; border-color: #e5e7eb; background: #fff; }
input:focus, textarea:focus, select:focus { border-color: #111827; box-shadow: 0 0 0 3px rgb(17 24 39 / 8%); }
label > span { color: #4b5563; font-weight: 500; }
button { border-radius: .6rem; font-weight: 500; }
button:not([data-variant]) { background: #111827; color: #fff; border-color: #111827; }
button:not([data-variant]):hover { background: #000; }
button[data-variant="outline"] { background: #fff; border-color: #e5e7eb; color: #111827; }
button[data-variant="outline"]:hover { background: #f9fafb; }
button[data-variant="ghost"] { color: #6b7280; }
button[data-variant="secondary"] { background: #f3f4f6; color: #111827; }
div[data-aiff-kind="tabs"] { background: #f3f4f6; border-radius: .7rem; }
div[data-aiff-kind="tabs"] > button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }

/* Pills. */
span[data-aiff-kind="badge"] { border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 500; border: 0; }
span[data-aiff-kind="badge"]:not([data-variant]) { background: #dcfce7; color: #15803d; }
span[data-aiff-kind="badge"][data-variant="secondary"] { background: #ede9fe; color: #6d28d9; }
span[data-aiff-kind="badge"][data-variant="outline"] { background: #f3f4f6; color: #4b5563; }
span[data-aiff-kind="badge"][data-variant="destructive"] { background: #fee2e2; color: #b91c1c; }
span[data-aiff-kind="badge"][data-variant="agent"] { background: #ffedd5; color: #c2410c; }
span[data-aiff-kind="badge"]::before { content: "●"; font-size: .55rem; margin-right: .4rem; vertical-align: .1rem; }

/* Tables. */
table { font-size: .92rem; }
th { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; height: 2.5rem; border-bottom: 1px solid #e5e7eb; }
td { padding: .95rem .75rem; border-top: 1px solid #f0f0f2; white-space: nowrap; }
td:nth-child(2) { white-space: normal; }
section[data-aiff-region] > table { display: block; overflow-x: auto; }
td:first-child { font-weight: 500; color: #111827; }
td:empty::before { content: "—"; color: #d1d5db; font-weight: 400; }
tbody tr:hover { background: #fafafa; }
td:last-child button { opacity: .6; }
tbody tr:hover td:last-child button { opacity: 1; }

/* Rows used by the briefing, the day list, the toolbar. */
div[data-aiff-layout="row"].item { align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid #f0f0f2; }
div[data-aiff-layout="row"].item:last-child { border-bottom: 0; }
div[data-aiff-layout="row"].item > p { flex: 1 1 auto; margin: 0; }
div[data-aiff-layout="row"].title { align-items: center; gap: .6rem; }
div[data-aiff-layout="row"].title div[data-aiff-kind="tabs"] { margin-left: auto; }
div[data-aiff-layout="row"].month { align-items: center; gap: .5rem; }
div[data-aiff-layout="row"].month h2 { min-width: 12rem; text-align: center; }
section[data-aiff-region="toolbar"], section[data-aiff-region="capture"], section[data-aiff-region="quick"] { background: #fff; }
section[data-aiff-region="toolbar"] > div[data-aiff-layout="row"]:first-child label, section[data-aiff-region="capture"] > div[data-aiff-layout="row"]:first-child label, section[data-aiff-region="quick"] label { flex: 1 1 22rem; }
section[data-aiff-region="overdue"] { border-color: #fecaca; }
section[data-aiff-region="demo-controls"] { display: none; }

/* Home cards (demo home) and the little count beside a title. */
article[data-aiff-id^="home-"] { position: relative; flex: 1 1 14rem; }
article[data-aiff-id^="home-"] > div[data-aiff-kind="stat"] { border: 0; padding: 0; background: none; min-width: 0; flex: 0 0 auto; }
article[data-aiff-id^="home-"] > div[data-aiff-kind="stat"] > span { display: none; }
article[data-aiff-id^="home-"] > a { font-size: .85rem; font-weight: 500; color: #111827; text-decoration: none; }
article[data-aiff-id^="home-"] > a::before { content: ""; position: absolute; inset: 0; }
article[data-aiff-id^="home-"] > a::after { content: "  \2192"; }
section[data-aiff-region="overview"] { background: none; border: 0; padding: 0; box-shadow: none; }
section[data-aiff-region="overview"] > div[data-aiff-layout="row"] { gap: 1.25rem; align-items: stretch; }

/* The assistant panel: below the title bar, flush right, with a little depth. */
section[data-aiff-region="aiff:agent"] { top: 5rem; right: 1rem; bottom: 1rem; border-radius: .9rem; border-color: #e5e7eb; box-shadow: 0 8px 30px rgb(0 0 0 / 8%); }
section[data-aiff-region="aiff:agent"]::before { color: #111827; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
section[data-aiff-region="aiff:agent"]::before { content: "⚡ " attr(aria-label); }
section[data-aiff-region="aiff:agent"] p[data-variant="user"] { background: #f3f4f6; color: #111827; border-radius: .9rem; }
section[data-aiff-region="aiff:agent"] p[data-variant="agent"] { background: none; padding: .25rem 0; max-width: 100%; }
section[data-aiff-region="aiff:agent"] textarea { border-radius: .8rem; }
section[data-aiff-region="aiff:agent"] > button { border-radius: 999px; }

/* Approvals. */
dialog[data-aiff-region="aiff:approvals"] { border-radius: .9rem; }

/* Sign-in and the other auth screens: no sidebar, one centred card. */
#aiff-root:has(> section[data-aiff-region="login"]), #aiff-root:has(> section[data-aiff-region="register"]), #aiff-root:has(> section[data-aiff-region="mfa"]), #aiff-root:has(> section[data-aiff-region="backup"]) { padding: 3rem 2rem; justify-content: center; }
#aiff-root:has(> section[data-aiff-region="login"]) nav, #aiff-root:has(> section[data-aiff-region="register"]) nav, #aiff-root:has(> section[data-aiff-region="mfa"]) nav, #aiff-root:has(> section[data-aiff-region="backup"]) nav {
  position: static; width: auto; border: 0; flex-direction: row; padding: 0; flex: 1 1 100%; justify-content: space-between;
}
#aiff-root:has(> section[data-aiff-region="login"]) nav .grp, #aiff-root:has(> section[data-aiff-region="register"]) nav .grp { display: contents; }
section[data-aiff-region="login"], section[data-aiff-region="register"], section[data-aiff-region="mfa"], section[data-aiff-region="backup"] { flex: 0 1 28rem; width: 100%; max-width: 30rem; margin: 2rem auto 0; padding: 2rem; }
section[data-aiff-region="mfa"] { max-width: 34rem; }
section[data-aiff-region="backup"] { max-width: 40rem; }

@media (max-width: 64rem) {
  nav[data-aiff-kind="nav"] { position: static; width: auto; flex-direction: row; flex-wrap: wrap; border: 0; border-bottom: 1px solid #e5e7eb; padding: .75rem 1rem; margin: -5.75rem -1.25rem 0; flex: 1 1 100%; }
  nav[data-aiff-kind="nav"] .grp { flex-direction: row; flex-wrap: wrap; }
  nav[data-aiff-kind="nav"] .grp > b { display: none; }
  nav[data-aiff-kind="nav"] .grp.bottom { margin: 0; padding: 0; border: 0; }
  #aiff-root { padding: 5.75rem 1.25rem 3rem; }
  #aiff-root > h1 { left: 0; }
}