/*
 * Design tokens (DESIGN-01). Tokens, components and theme values are versioned
 * repository artifacts: there is no theme table, no theme endpoint and no
 * browser-persisted theme state, and a theme here is a set of token values
 * rather than an entity with a lifecycle of its own.
 *
 * The set is derived from this stylesheet as it stands, not from an imported
 * scale. Every colour earns a token, because `styles.test.ts` refuses a raw
 * colour outside this block. Every other value earns one only where the sheet
 * already repeats it; the paddings, gaps and margins below are per-component
 * and form no scale, so naming them would invent one the product does not use.
 *
 * Near-identical values are kept apart on purpose. --surface-row-hover and
 * --surface-inset differ by one step of blue; the four pale sand surfaces and
 * the eight warm greys under Text differ by a shade each. Collapsing them would
 * change what renders, which is a product decision and not a refactor.
 *
 * There is no dark theme here because the sheet never implied one: no
 * prefers-color-scheme rule, no color-scheme declaration and no theme choice
 * anywhere in the application. The dark values below are inverted regions of
 * the light theme - a sidebar, a code block, a primary button - and a real dark
 * theme would have to choose forty-odd new values that no product decision has
 * made yet. An invented one would be a second set of tokens nothing renders.
 */
:root {
  /* Surfaces */
  --surface-page: #f4f0e8;
  --surface-raised: #fffdf8;
  --surface-input: #ffffff;
  --surface-row-hover: #faf7f0;
  --surface-inset: #faf7f1;
  --surface-muted: #f7f3eb;
  --surface-pill: #e9e3d9;
  --surface-chip: #eee6da;
  --surface-code-inline: #eee7dc;
  --surface-attribution: #ebe4d9;
  --surface-danger: #f7ddd5;

  /* Inverted surfaces. These are dark regions of the light theme, not a theme. */
  --surface-sidebar: #17140f;
  --surface-sidebar-hover: #2b261f;
  --surface-code-block: #24201b;
  --surface-inverse: #262019;

  /* Text */
  --text-primary: #28231d;
  --text-body: #766e63;
  --text-eyebrow: #6c6257;
  --text-meta-label: #6d6459;
  --text-subtle: #62594f;
  --text-muted: #696158;
  --text-quote: #675e52;
  --text-caption: #655d53;
  --text-toolbar: #564c40;
  --text-danger: #9c3328;
  --text-on-inverse: #ffffff;
  --text-on-dark: #eee8dc;
  --text-on-dark-muted: #bdb5a9;
  --text-on-dark-action: #c8c0b5;

  /* Accent */
  --accent-strong: #f0b84f;
  --accent-glyph: #b08b4c;
  --accent-rule: #c4913d;
  --accent-border-hover: #b99555;
  --accent-focus-border: #947137;
  --accent-eyebrow: #8f6b28;
  --accent-link: #7b551b;
  --accent-identifier: #765219;
  --accent-soft: #e9d8b9;

  /* Lines */
  --line-card: #ddd5c8;
  --line-panel: #ded6c9;
  --line-list: #d8d0c4;
  --line-inset: #e0d8cc;
  --line-input: #ccc2b3;
  --line-button: #c9bda9;
  --line-empty: #cfc5b7;
  --line-toolbar-hover: #b9aa95;

  /* Radius */
  --radius-control: 7px;
  --radius-button: 8px;
  --radius-card: 14px;
  --radius-pill: 99px;
  --radius-round: 50%;

  /* Typography */
  --font-size-micro: 11px;
  --font-size-caption: 12px;
  --font-size-label: 13px;
  --font-weight-strong: 700;
  --font-weight-eyebrow: 750;

  /* Layout */
  --layout-content-max: 1080px;
  --shadow-focus: 0 0 0 3px var(--accent-soft);
}

:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--surface-page);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
aside {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  color: var(--text-on-dark);
  background: var(--surface-sidebar);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: -0.02em;
}
.brand-mark,
.org-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--surface-sidebar);
  background: var(--accent-strong);
  border-radius: 10px;
  font-weight: 800;
}
.nav-label,
.eyebrow {
  margin: 42px 10px 12px;
  color: var(--text-eyebrow);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sidebar .nav-label {
  color: var(--text-on-dark-muted);
}
.nav-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 3px 0;
  padding: 11px 12px;
  border-radius: var(--radius-button);
}
.nav-item small {
  color: var(--text-on-dark-muted);
  font-size: var(--font-size-micro);
  text-transform: uppercase;
}
.nav-item:hover,
.nav-item.active {
  background: var(--surface-sidebar-hover);
}
.logout {
  margin-top: auto;
  align-self: flex-start;
}
.text-button {
  border: 0;
  color: var(--text-subtle);
  background: transparent;
  cursor: pointer;
}
.sidebar .text-button {
  color: var(--text-on-dark-action);
}
.workspace {
  padding: 56px clamp(28px, 6vw, 88px);
  overflow: hidden;
}
.page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--layout-content-max);
  margin-bottom: 42px;
}
.page-header .eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--accent-eyebrow);
}
h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: -0.04em;
}
h2 {
  margin: 0;
  font-size: 18px;
}
p {
  color: var(--text-body);
  line-height: 1.55;
}
.org-grid,
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  max-width: var(--layout-content-max);
}
.org-card,
.project-card {
  border: 1px solid var(--line-card);
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.org-card:hover,
.project-card:hover {
  border-color: var(--accent-border-hover);
  transform: translateY(-2px);
}
.org-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
}
.org-card p {
  margin: 4px 0 0;
}
.project-card {
  min-height: 180px;
  padding: 24px;
}
.project-card > span,
.identifier {
  color: var(--accent-identifier);
  font:
    var(--font-weight-strong) var(--font-size-caption) ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.project-card h2 {
  margin-top: 28px;
}
.item-list {
  max-width: var(--layout-content-max);
  border-top: 1px solid var(--line-list);
}
.item-row {
  display: grid;
  grid-template-columns: 90px 1fr auto 20px;
  align-items: center;
  gap: 16px;
  padding: 18px 10px;
  border-bottom: 1px solid var(--line-list);
}
.item-row:hover {
  background: var(--surface-row-hover);
}
.priority {
  padding: 5px 9px;
  color: var(--text-subtle);
  background: var(--surface-pill);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
}
.priority.urgent,
.priority.high {
  color: var(--text-danger);
  background: var(--surface-danger);
}
.center {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}
.state-card {
  width: min(540px, 100%);
  padding: 48px;
  border: 1px solid var(--line-panel);
  background: var(--surface-raised);
  border-radius: 18px;
  text-align: center;
}
.state-card .eyebrow {
  display: block;
  margin: 0 0 20px;
}
.button {
  display: inline-flex;
  justify-content: center;
  padding: 11px 17px;
  border: 1px solid var(--line-button);
  border-radius: var(--radius-button);
  background: transparent;
  cursor: pointer;
}
.button.primary {
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  background: var(--surface-inverse);
}
.button:disabled {
  opacity: 0.5;
}
.empty {
  grid-column: 1 / -1;
  padding: 54px 20px;
  border: 1px dashed var(--line-empty);
  border-radius: 12px;
  text-align: center;
}
.empty > span {
  color: var(--accent-glyph);
  font-size: 30px;
}
.empty h2 {
  margin-top: 12px;
}
.editor {
  display: grid;
  gap: 24px;
  max-width: 760px;
  padding: 32px;
  border: 1px solid var(--line-card);
  background: var(--surface-raised);
  border-radius: var(--radius-card);
}
.task-card {
  max-width: 1180px;
}
.task-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.task-heading h1 {
  margin-top: 8px;
  font-size: clamp(30px, 4vw, 48px);
}
.task-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: start;
}
.task-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.task-section,
.task-meta {
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-card);
  background: var(--surface-raised);
  border-radius: var(--radius-card);
}
.task-section h2 {
  margin-bottom: 18px;
}
.task-section.unavailable {
  background: var(--surface-muted);
  border-style: dashed;
}
.task-section.unavailable p {
  margin-bottom: 0;
}
.task-meta {
  position: sticky;
  top: 24px;
  color: var(--text-primary);
}
.task-meta dl,
.task-meta dd {
  margin: 0;
}
.task-meta dl {
  display: grid;
  gap: 18px;
}
.task-meta dl > div {
  display: grid;
  gap: 7px;
}
.task-meta dt {
  color: var(--text-meta-label);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  padding: 5px 9px;
  background: var(--surface-chip);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
}

.assignee-list {
  display: flex;
  align-items: center;
}

.assignee-avatar {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-round);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: var(--font-weight-strong);
  height: 2rem;
  justify-content: center;
  margin-inline-start: -0.3rem;
  width: 2rem;
}

.assignee-avatar:first-child {
  margin-inline-start: 0;
}
.rich-content {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
.rich-content pre,
.editable pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  color: var(--text-on-dark);
  background: var(--surface-code-block);
  border-radius: var(--radius-button);
}
.rich-content code:not(pre code),
.editable code:not(pre code) {
  padding: 2px 5px;
  background: var(--surface-code-inline);
  border-radius: 4px;
}
.rich-content blockquote,
.editable blockquote {
  margin-left: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent-rule);
  color: var(--text-quote);
}
.rich-content a {
  color: var(--accent-link);
  text-decoration: underline;
}
.task-editor {
  max-width: 900px;
}
.rich-editor {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rich-editor legend {
  margin-bottom: 8px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
}
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line-input);
  border-bottom: 0;
  background: var(--surface-muted);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.editor-toolbar button {
  padding: 6px 9px;
  border: 1px solid transparent;
  color: var(--text-toolbar);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}
.editor-toolbar button:hover,
.editor-toolbar button:focus-visible {
  border-color: var(--line-toolbar-hover);
  background: var(--surface-input);
}
.editable {
  min-height: 240px;
  padding: 14px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line-input);
  background: var(--surface-input);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  outline: none;
}
.editable:focus {
  border-color: var(--accent-focus-border);
  box-shadow: var(--shadow-focus);
}
.editor label {
  display: grid;
  gap: 8px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
}
.editor input,
.editor textarea,
.editor select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  background: var(--surface-input);
  border-radius: var(--radius-control);
  outline: none;
}
.editor input:focus,
.editor textarea:focus,
.editor select:focus {
  border-color: var(--accent-focus-border);
  box-shadow: var(--shadow-focus);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.form-error {
  margin: 0;
  color: var(--text-danger);
}
.muted {
  color: var(--text-muted);
}
.compact {
  padding: 0 10px;
  font-size: var(--font-size-label);
}
.section-heading,
.attachment-row,
.row-actions,
.timeline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.attachment-list,
.external-links,
.timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.attachment-row,
.timeline-entry,
.linked-item,
.external-links li {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-inset);
  background: var(--surface-inset);
  border-radius: 9px;
}
.attachment-row > div:first-child {
  min-width: 0;
}
.attachment-preview {
  width: 72px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
}
.attachment-row strong,
.attachment-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-row small,
.timeline-meta,
.attribution {
  color: var(--text-caption);
  font-size: var(--font-size-caption);
}
.danger {
  color: var(--text-danger);
}
.compact-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.compact-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
}
.compact-form input,
.compact-form textarea,
.filter-bar select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-input);
  background: var(--surface-input);
  border-radius: var(--radius-control);
}
.compact-form textarea {
  min-height: 100px;
  resize: vertical;
}
.comment-editor {
  min-height: 120px;
}
.compact-form progress {
  width: 100%;
}
.section-message {
  min-height: 1.5em;
  margin: 0;
}
.timeline-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.timeline-entry .rich-content,
.timeline-entry p {
  margin: 10px 0 0;
}
.attribution {
  padding: 3px 7px;
  background: var(--surface-attribution);
  border-radius: var(--radius-pill);
}
.relation-group {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.relation-group h3 {
  margin: 0;
  font-size: 14px;
}
.linked-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.external-links li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.external-links a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent-link);
  text-decoration: underline;
}
/*
 * Every notice the workspace draws above its content: filters that could not be
 * sent, an organization that has moved on, and the WM-31 notice that says the
 * view is the last read rather than the current one. The class was written into
 * the markup by all three and declared by nothing, so each of them rendered as
 * undifferentiated body text - a warning shaped exactly like the content it is
 * warning about.
 */
.notice {
  max-width: var(--layout-content-max);
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}
.notice > p {
  margin: 0 0 10px;
}
.notice > p:last-child {
  margin-bottom: 0;
}
.limitation {
  margin-bottom: 0;
  font-size: var(--font-size-caption);
}
.filter-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  max-width: var(--layout-content-max);
  margin: -20px 0 24px;
}
.filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--text-body);
  font-size: var(--font-size-micro);
}
/*
 * The clear control shares the row with the selects and has no label above it,
 * so it is aligned to their inputs rather than stretched over the whole cell.
 */
.filter-bar .text-button {
  align-self: end;
  justify-self: start;
  padding: 10px 0;
}
/*
 * The last track holds the label chips, not the 20px marker the plain row ends
 * with: a detailed row places time, summary, state, priority, assignees and
 * chips, in that order, and nothing follows them. Sized at 20px it was too
 * narrow for one chip, so a label was drawn 71px outside the list it belongs to
 * and into the workspace padding - and clipped outright once the padding ran
 * out, which at 1440 was 16px away and below about 1370px of viewport had
 * already happened. `auto` gives the chips the width they have, and the
 * flexible summary column, which may shrink to its declared 180px, gives it
 * back.
 */
.item-row-detailed {
  grid-template-columns: 82px minmax(180px, 1fr) minmax(120px, auto) minmax(100px, auto) auto auto;
}
.item-row-link {
  display: contents;
}
.inline-state select {
  max-width: 180px;
  padding: 7px;
  border: 1px solid var(--line-button);
  background: var(--surface-input);
  border-radius: var(--radius-control);
}
.inline-message {
  grid-column: 2 / -1;
  min-height: 0;
  color: var(--text-danger);
  font-size: var(--font-size-caption);
}
.inline-message:empty {
  display: none;
}
.pagination,
.pagination-actions {
  margin-top: 18px;
}
.pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.item-summary {
  min-width: 0;
}
.item-summary strong,
.item-summary small {
  display: block;
}
.item-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-marker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-radius: var(--radius-round);
}
.overdue {
  color: var(--text-danger);
  font-weight: var(--font-weight-strong);
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  aside {
    position: static;
    padding: 18px;
  }
  aside nav,
  aside .nav-label {
    display: none;
  }
  .logout {
    position: absolute;
    top: 27px;
    right: 18px;
  }
  .workspace {
    padding: 34px 18px;
  }
  .page-header {
    align-items: start;
    flex-direction: column;
  }
  .item-row {
    grid-template-columns: 70px 1fr 20px;
  }
  .state-card {
    padding: 32px 22px;
  }
  .task-heading {
    flex-direction: column;
  }
  .task-heading .button {
    width: 100%;
  }
  .task-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .task-meta {
    position: static;
    order: -1;
  }
  .editor,
  .task-section,
  .task-meta {
    padding: 18px;
  }
  .form-actions {
    flex-direction: column-reverse;
  }
  .form-actions .button {
    width: 100%;
  }
  .filter-bar {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }
  .item-row-detailed {
    grid-template-columns: 64px minmax(0, 1fr) 20px;
  }
  .item-row-detailed > .inline-state,
  .item-row-detailed > .inline-priority,
  .item-row-detailed > .state-marker,
  .item-row-detailed > .priority,
  .item-row-detailed > .assignee-list,
  .item-row-detailed > .chips,
  .item-row-detailed > time {
    grid-column: 2 / -1;
    justify-self: start;
  }
  .attachment-row,
  .row-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  /*
   * Stacking the attachment row turns its name block into a column flex item,
   * and a flex-start item is sized by its content: a long file name grew the
   * block to max-content, `.workspace { overflow: hidden }` cut the excess off,
   * and no scrollbar offered it back. Stretching gives the block the row width
   * that the ellipsis rules on its strong and small already assume.
   * `.row-actions` stays flex-start, so its buttons keep their own width.
   */
  .attachment-row {
    align-items: stretch;
  }
  .row-actions .text-button {
    padding: 4px 0;
  }
  .linked-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .linked-item .priority {
    grid-column: 2;
    justify-self: start;
  }
}