/*
 * Tempra design tokens: the one place values live (TEMPRA-8). Deliberately plain for now, close to
 * browser defaults; the design pass (TEMPRA-1) changes values here and both the app and the site
 * follow. Light and dark come from the user's system through light-dark().
 */
:root {
  color-scheme: light dark;

  /* Color */
  --tempra-color-text: light-dark(#111111, #e8e8e8);
  --tempra-color-muted: light-dark(#555555, #a8a8a8);
  --tempra-color-bg: light-dark(#ffffff, #121212);
  --tempra-color-link: light-dark(#0000ee, #8ab4f8);
  --tempra-color-link-visited: light-dark(#551a8b, #c58af9);
  --tempra-color-border: light-dark(#cccccc, #444444);
  --tempra-color-code-bg: light-dark(#f4f4f4, #1e1e1e);
  --tempra-color-mark: light-dark(#fff3a8, #4d4100);
  --tempra-color-mark-active: light-dark(#ffd84a, #7a6400);

  /* Type */
  --tempra-font-body: system-ui, sans-serif;
  --tempra-font-mono: ui-monospace, monospace;
  --tempra-font-size: 1rem;
  --tempra-line-height: 1.5;
  --tempra-measure: 70ch;

  /* Space */
  --tempra-space-1: 0.25rem;
  --tempra-space-2: 0.5rem;
  --tempra-space-3: 1rem;
  --tempra-space-4: 2rem;

  /* Shape */
  --tempra-radius: 0;
}

/* Element defaults for every page of the app and the site; values come from tokens.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--tempra-space-3);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-font-size);
  line-height: var(--tempra-line-height);
}

a {
  color: var(--tempra-color-link);
}

a:visited {
  color: var(--tempra-color-link-visited);
}

code,
pre,
kbd,
samp {
  font-family: var(--tempra-font-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--tempra-color-border);
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: var(--tempra-space-1) var(--tempra-space-2);
  text-align: left;
  vertical-align: top;
}

img {
  max-width: 100%;
}

/* A row of short labels (type, trust tier, status): kept apart, wrapping on narrow screens. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-1) var(--tempra-space-2);
}

/* Text for screen readers only: what a symbol (a mark, an icon) means. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * How a rendered concept reads: the markdown body of a concept, in the app now and wherever
 * concepts are shown later (the site, inline MCP Apps views). Scoped to .prose.
 */
.prose {
  max-width: var(--tempra-measure);
}

.prose pre {
  overflow-x: auto;
  padding: var(--tempra-space-2);
  background: var(--tempra-color-code-bg);
  border-radius: var(--tempra-radius);
}

.prose blockquote {
  margin-left: 0;
  padding-left: var(--tempra-space-3);
  border-left: 3px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
}

.prose table th,
.prose table td {
  border: 1px solid var(--tempra-color-border);
}

.prose .footnotes {
  font-size: 0.9em;
  color: var(--tempra-color-muted);
}

/*
 * The concept reader (Wordgard, TEMPRA-11). Wordgard themes itself through --wg-* variables set
 * on its own element; these map them to Tempra's tokens and keep the body as plain as the rest of
 * the page. The selectors are one step more specific than Wordgard's injected theme.
 */
div.body > * {
  --wg-panel-color: var(--tempra-color-bg);
  --wg-border-color: var(--tempra-color-border);
  --wg-highlight-color: var(--tempra-color-link);
  --wg-dialog-font: inherit;
  border: 0;
}

div.body wg-content {
  padding: 0;
}

.tooltip {
  max-width: 32rem;
  padding: var(--tempra-space-1) var(--tempra-space-2);
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
}

.prose a.broken {
  text-decoration-line: line-through;
}

.prose pre.raw,
.prose code.raw {
  color: var(--tempra-color-muted);
}

.toc {
  padding-left: var(--tempra-space-3);
}

.toc .depth-1 {
  margin-left: var(--tempra-space-3);
}

.toc .depth-2 {
  margin-left: var(--tempra-space-4);
}

/* Comments (TEMPRA-13): a thread's quote highlighted in the body, and the threads beside it. */
mark.comment-mark {
  background: var(--tempra-color-mark);
  color: inherit;
  cursor: pointer;
}

mark.comment-mark.active {
  background: var(--tempra-color-mark-active);
}

.threads {
  list-style: none;
  padding: 0;
}

.thread {
  border-top: 1px solid var(--tempra-color-border);
  padding: var(--tempra-space-2) 0;
}

.thread.active {
  border-left: 3px solid var(--tempra-color-mark-active);
  padding-left: var(--tempra-space-2);
}

.quote {
  margin: 0 0 var(--tempra-space-1);
  padding-left: var(--tempra-space-2);
  border-left: 3px solid var(--tempra-color-mark);
  color: var(--tempra-color-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment {
  margin: var(--tempra-space-1) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.5rem;
  margin-bottom: var(--tempra-space-1);
  font: inherit;
}

/*
 * The workspace (TEMPRA-19): a library's tree on the left, the open file in the middle, its
 * context on the right, under one header. Structure only: lines and spacing from the tokens, no
 * decoration (the UI rule). Under 60rem the side panels become drawers over the main pane.
 */
body:has(> #root > .workspace) {
  padding: 0;
}

.workspace {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 20rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main context";
  height: 100dvh;
}

.workspace.no-context {
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "sidebar main";
}

.ws-header {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-2) var(--tempra-space-3);
  padding: var(--tempra-space-2) var(--tempra-space-3);
  border-bottom: 1px solid var(--tempra-color-border);
}

.ws-header .ws-spacer {
  flex: 1;
}

.ws-sidebar,
.ws-main,
.ws-context {
  overflow: auto;
  padding: var(--tempra-space-3);
}

.ws-sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--tempra-color-border);
}

.ws-main {
  grid-area: main;
}

.ws-context {
  grid-area: context;
  border-left: 1px solid var(--tempra-color-border);
}

.ws-context h2 {
  font-size: 1rem;
}

.ws-filter {
  width: 100%;
  margin-bottom: var(--tempra-space-2);
}

/* The tree: nested lists, one row per directory or file. */
.tree,
.tree ul,
.ws-views {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree ul {
  padding-left: var(--tempra-space-3);
}

.tree-row {
  display: flex;
  align-items: baseline;
  gap: var(--tempra-space-1);
  white-space: nowrap;
}

.tree-row > a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-row [aria-current="page"],
.ws-views [aria-current="page"] {
  font-weight: bold;
}

.tree-toggle {
  flex: none;
  width: 1.25em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tree-leaf {
  flex: none;
  width: 1.25em;
}

/* A file an agent changed in the last few minutes, or since the last visit. */
.tree-mark {
  flex: none;
  color: var(--tempra-color-link);
}

.ws-views {
  margin-top: var(--tempra-space-3);
  padding-top: var(--tempra-space-2);
  border-top: 1px solid var(--tempra-color-border);
}

.ws-toggle {
  display: none;
}

/* The quick switcher: a modal dialog with a search box and a list of files. */
.switcher {
  width: min(36rem, 90vw);
  padding: var(--tempra-space-3);
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
}

.switcher::backdrop {
  background: rgb(0 0 0 / 0.3);
}

.switcher input {
  width: 100%;
}

.switcher [role="listbox"] {
  margin-top: var(--tempra-space-2);
}

.switcher [role="option"] {
  padding: var(--tempra-space-1) var(--tempra-space-2);
  cursor: pointer;
}

.switcher [role="option"][aria-selected="true"] {
  background: var(--tempra-color-code-bg);
}

@media (max-width: 60rem) {
  .workspace,
  .workspace.no-context {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  /* Drawers open over the main pane, below the header, so its buttons stay in reach. */
  .ws-sidebar,
  .ws-context {
    grid-area: main;
    z-index: 1;
    display: none;
    width: min(20rem, 85vw);
    background: var(--tempra-color-bg);
  }

  .ws-sidebar {
    justify-self: start;
  }

  .ws-context {
    justify-self: end;
  }

  .ws-sidebar.open,
  .ws-context.open {
    display: block;
  }

  .ws-toggle {
    display: inline-block;
  }
}