/*
 * AODesk theme: the shared look for AODesk tools.
 * GENERATED from the AODesk Design System (https://claude.ai/artifact/BrjSJNyCdDCd4G1PQE2EdF):
 * tokens.json + components/bundle.css. Change the design system, then regenerate; do not edit by hand.
 * Load the fonts first:
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap">
 */
:root {
  --blue-deep: #003366;
  --blue-mid: #004e9a;
  --blue-bright: #0072ce;
  --blue-accent: #1a9bff;
  --blue-light: #e8f2fc;
  --offwhite: #f5f8fc;
  --surface: #ffffff;
  --line: #dce5ef;
  --grey-light: #edf2f7;
  --grey: #8096ae;
  --slate: #5d7380;
  --text-body: #3d5570;
  --text-dark: #001d3d;
  --blue-on-dark: #7cc4ff;
  --teal: #2da194;
  --teal-bright: #38c5b5;
  --red: #d43858;
  --red-hover: #b32646;
  --red-tint: #fceef1;
  --amber: #a66300;
  --font-heading: "Syne", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --radius-code: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 29, 61, 0.06), 0 4px 16px rgba(0, 29, 61, 0.06);
  --shadow-bar: 0 2px 10px rgba(0, 29, 61, 0.25);
}

:root {
  /* semantic aliases: build screens from these */
  --bg: var(--offwhite);
  --heading: var(--text-dark);
  --text: var(--text-body);
  --muted: var(--slate);
  --primary: var(--blue-bright);
  --primary-hover: var(--blue-mid);
  --focus: var(--blue-bright);
  --surface-tint: var(--blue-light);
  --ok: var(--teal);
  --warn: var(--amber);
  --danger: var(--red);
  --radius: var(--radius-md);
  --shadow: var(--shadow-card);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--heading); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
a { color: var(--primary); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--danger); min-height: 1.2em; }

/* buttons */
button {
  background: var(--primary); color: #fff; border: 1px solid transparent;
  padding: .55rem 1rem; border-radius: var(--radius-sm); cursor: pointer;
  font: 600 14px/1.2 var(--font-body); transition: background .15s, border-color .15s;
}
button:hover { background: var(--primary-hover); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
button.ghost { background: var(--surface); border-color: var(--grey); color: var(--heading); }
button.ghost:hover { background: var(--surface-tint); border-color: var(--primary); }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--red-hover); }
button.ghost.danger { background: var(--surface); color: var(--danger); border-color: var(--grey); }
button.ghost.danger:hover { border-color: var(--danger); background: var(--red-tint); }
button.warn { background: var(--warn); }
button.warn:hover { background: var(--warn); filter: brightness(.88); }
button.small { padding: .3rem .6rem; font-size: 12.5px; }
button:disabled { opacity: .55; cursor: default; }
.link-btn {
  background: none; border: 0; padding: 0; color: var(--primary);
  font: 500 13px var(--font-body); cursor: pointer;
}
.link-btn:hover { background: none; text-decoration: underline; }

/* inputs */
input, select {
  background: var(--surface); border: 1px solid var(--grey); color: var(--heading);
  padding: .5rem .65rem; border-radius: var(--radius-sm); font: 14px var(--font-body);
}
input::placeholder { color: var(--muted); }
label { display: block; margin: .7rem 0; color: var(--heading); font-weight: 500; }
label input { width: 100%; display: block; margin-top: .3rem; font-weight: 400; }
label input[type=checkbox], label input[type=radio] {
  width: auto; display: inline-block; margin: 0 .45rem 0 0; vertical-align: -2px; accent-color: var(--primary);
}

/* surfaces */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
code {
  font: 13px var(--font-mono); background: var(--surface-tint); color: var(--blue-deep);
  padding: .1rem .4rem; border-radius: var(--radius-code);
}

/* tables: wrap in .table-wrap for the rounded frame and sideways scroll */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--grey-light); }
.table th {
  color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--bg);
}
.table tr:last-child td { border-bottom: 0; }

/* pills (read-only status) and chips (clickable choices) */
.pill {
  display: inline-block; font-size: 12px; font-weight: 600; padding: .15rem .6rem; border-radius: var(--radius-pill);
  background: var(--surface-tint); color: var(--blue-mid);
}
.chip {
  background: var(--surface); color: var(--heading); border: 1px solid var(--grey);
  padding: .3rem .65rem; border-radius: var(--radius-pill); font: 500 13px var(--font-body);
}
.chip:hover { background: var(--surface-tint); border-color: var(--primary); }
.chip.added { background: var(--surface-tint); border-color: var(--surface-tint); color: var(--blue-mid); }
.chip.added::before { content: '\2713  '; }
.dot { width: 9px; height: 9px; border-radius: var(--radius-pill); display: inline-block; margin-right: .45rem; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(45, 161, 148, .18); }
.dot.off { background: var(--grey); }
.dot.idle { background: var(--warn); box-shadow: 0 0 0 3px rgba(240, 160, 40, .18); }

/* control bar: the navy band at the top of every AODesk tool */
.topbar {
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: 64px;
  background: linear-gradient(90deg, var(--text-dark) 0%, var(--blue-deep) 100%);
  box-shadow: var(--shadow-bar);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: #fff; padding: 2px; }
.brand-name { font: 700 1.05rem var(--font-heading); color: #fff; white-space: nowrap; }
.brand-name span { color: var(--blue-on-dark); }
.topbar nav { display: flex; gap: .25rem; height: 100%; }
.tab {
  background: transparent; color: rgba(255, 255, 255, .78); border: 0; border-radius: 0; height: 100%;
  padding: 0 .9rem; font-weight: 500; border-bottom: 3px solid transparent;
}
.tab:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--blue-accent); font-weight: 600; }
.topbar button.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.topbar button.ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.topbar :focus-visible { outline-color: #fff; }
.spacer { flex: 1; }