/* Tickety. Tokens and components lifted from brand/tickety-style-guide.html.
   Cool greys, teal for interactive things only, status colours for status.
   3px pills and labels, 4px controls and chips, 6px panels, 9px the tile. No shadows. */

:root {
  --page:#F1F3F5; --surface:#FFFFFF; --sunken:#E8EBED;
  --text:#11181C; --text-2:#5C6B73; --text-3:#8A969C;
  --line:#DDE1E5; --line-2:#C3CACF;
  --teal:#0F6E6E; --teal-dark:#0B5757; --teal-wash:#E4F0EF;
  --todo:#6B7A82; --ready:#2563A8; --progress:#B26A00; --done:#1F7A44; --blocked:#B3261E;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--page); color:var(--text);
  font-family:Inter,system-ui,sans-serif; font-size:13px; line-height:1.55;
}

h1,h2,h3 { font-weight:600; margin:0; letter-spacing:-0.01em; }
p { margin:0 0 10px; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

code, .mono {
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px;
}
code { background:var(--sunken); padding:1px 5px; border-radius:3px; }

/* ---- chrome ---- */

.topbar { background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-in {
  max-width:1080px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:22px; height:48px;
}
.brand { display:flex; align-items:center; gap:9px; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand img { width:22px; height:22px; display:block; }
.brand span { font-size:16px; font-weight:600; letter-spacing:-0.02em; }
.nav { display:flex; gap:16px; margin-left:4px; }
.nav a { font-size:12.5px; font-weight:500; color:var(--text-2); }
.nav a:hover { color:var(--teal); text-decoration:none; }
.nav a[aria-current="page"] { color:var(--teal); }

.wrap { max-width:1080px; margin:0 auto; padding:24px 24px 72px; }

.foot {
  max-width:1080px; margin:0 auto; padding:0 24px 40px;
  font-size:11.5px; color:var(--text-3);
}

/* ---- shared components ---- */

.panel { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:16px 18px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.muted { color:var(--text-2); }
.meta { font-size:12px; color:var(--text-2); }

.key { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; font-weight:500; color:var(--teal); }

.pill {
  display:inline-block; font-size:11px; font-weight:500;
  padding:2px 8px; border-radius:3px; letter-spacing:0.01em; white-space:nowrap;
}
.p-todo { background:#EDF0F1; color:var(--todo); }
.p-ready { background:#E6EFF8; color:var(--ready); }
.p-progress { background:#FAF2E4; color:var(--progress); }
.p-done { background:#E6F2EB; color:var(--done); }
.p-blocked { background:#FAEDEC; color:var(--blocked); }

.label { display:inline-block; font-size:11px; padding:1px 7px; border-radius:3px; background:var(--sunken); color:var(--text-2); }

/* The reference chip. A key and a title, and it never expands inline. */
.chip {
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:4px 10px; border:1px solid var(--line-2); border-radius:4px;
  background:var(--surface); color:var(--text); text-decoration:none;
}
.chip:hover { border-color:var(--teal); text-decoration:none; }
.chip .k { font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--teal); font-weight:500; }

.crumb { font-size:12px; color:var(--text-2); }

.icon { width:14px; height:14px; vertical-align:-2px; flex:none; }

.field-label { font-size:11.5px; font-weight:500; color:var(--text-2); margin-bottom:7px; }

/* Buttons come from the style guide. Nothing in the read-only UI renders one
   today — the board and the pages have none at all — but the stylesheet
   implements the whole design system rather than a subset of it. */
.btn { font:inherit; font-size:12.5px; font-weight:500; padding:6px 13px; border-radius:4px; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal-dark); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--line-2); }
.btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

.cmt { border-left:2px solid var(--line-2); padding:2px 0 2px 12px; margin:12px 0; }
.cmt .who { font-size:12px; font-weight:500; }
.cmt .when { font-size:11px; color:var(--text-3); }
.cmt p { margin:3px 0 0; max-width:70ch; }
.cmt .md { margin-top:4px; }
.cmt .md > :last-child { margin-bottom:0; }

.note { border-left:3px solid var(--teal); background:var(--teal-wash); padding:10px 14px; margin:12px 0; border-radius:0 4px 4px 0; }

.empty { color:var(--text-2); font-size:12.5px; }

/* ---- board ---- */

.page-head { margin-bottom:18px; }
.page-head h1 { font-size:22px; letter-spacing:-0.02em; }
.page-head .meta { margin-top:3px; }

.epic { margin-bottom:16px; }
.epic-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:6px 6px 0 0;
}
.epic-head .title { font-size:15px; font-weight:600; }
.epic-head .count { font-size:11.5px; color:var(--text-3); margin-left:auto; }
.epic-body {
  background:var(--surface); border:1px solid var(--line); border-top:0;
  border-radius:0 0 6px 6px; padding:4px 18px 12px;
}
.epic-blurb { max-width:70ch; margin:10px 0 2px; color:var(--text-2); font-size:12.5px; }

.status-group { margin-top:12px; }
.status-group > .field-label { margin-bottom:4px; }

table.rows { width:100%; border-collapse:collapse; font-size:12.5px; }
table.rows th {
  text-align:left; font-weight:500; color:var(--text-2); font-size:11.5px;
  padding:0 10px 6px 0; border-bottom:1px solid var(--line);
}
table.rows td { padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.rows tr:last-child td { border-bottom:0; }
table.rows td.c-key { width:82px; white-space:nowrap; }
table.rows td.c-status { width:170px; }
table.rows td.c-points { width:54px; color:var(--text-2); }
table.rows td.c-labels { width:150px; }
table.rows a { color:var(--text); }
table.rows a:hover { color:var(--teal); text-decoration:none; }

/* ---- issue detail ---- */

.issue-head { display:flex; align-items:center; gap:10px; margin:10px 0 6px; flex-wrap:wrap; }
.issue-title, .wiki-title { font-size:20px; font-weight:600; letter-spacing:-0.02em; margin-bottom:10px; }
.detail-cols { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start; }
.side .panel + .panel { margin-top:12px; }
.side dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:12px; }
.side dt { color:var(--text-2); }
.side dd { margin:0; }
.chip-stack { display:flex; flex-direction:column; gap:7px; align-items:flex-start; }

@media (max-width:820px) {
  .detail-cols { grid-template-columns:minmax(0,1fr); }
}

/* ---- knowledge base: the space shell ---- */
/* Confluence navigates from a persistent space rail. The board drills in and
   back out from a list; these are different products and should not share a
   layout. Only the /wiki routes get this. */

.wiki-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; align-items:start; }
.wiki-main { min-width:0; }

.wiki-nav {
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:12px 0 8px; position:sticky; top:20px;
}
.wiki-nav-space {
  display:block; padding:0 14px 10px; margin-bottom:6px;
  border-bottom:1px solid var(--line); color:var(--text);
}
.wiki-nav-space:hover { text-decoration:none; }
.wiki-nav-space:hover .sp-name { color:var(--teal); }
.wiki-nav-space .sp-name { display:block; font-size:13px; font-weight:600; letter-spacing:-0.01em; }
.wiki-nav-space .sp-kind { display:block; font-size:11.5px; color:var(--text-3); }

.wiki-nav-list { list-style:none; margin:0; padding:0; }
.wiki-nav-item {
  display:block; padding:6px 14px 6px 12px;
  border-left:2px solid transparent; color:var(--text);
}
.wiki-nav-item:hover { background:var(--sunken); text-decoration:none; }
.wiki-nav-item .t { display:block; font-size:12.5px; line-height:1.35; }
.wiki-nav-item .i {
  display:block; margin-top:1px; color:var(--text-3);
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px;
}
/* Current page: a left bar as well as the colour, so it does not depend on
   colour alone. */
.wiki-nav-item[aria-current="page"] { border-left-color:var(--teal); background:var(--teal-wash); }
.wiki-nav-item[aria-current="page"] .t { color:var(--teal); font-weight:500; }
.wiki-nav-item[aria-current="page"] .i { color:var(--teal); }

.wiki-title { margin:8px 0 4px; }
.wiki-section { font-size:13px; font-weight:600; margin:22px 0 6px; }

/* Recently updated. A list, not a table — no column headers, and nothing
   shared with the board's issue rows. */
.wiki-recent {
  list-style:none; margin:0; padding:0;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
}
.wiki-recent li + li { border-top:1px solid var(--line); }
.wiki-recent a { display:flex; align-items:baseline; gap:12px; padding:9px 14px; color:var(--text); }
.wiki-recent a:hover { background:var(--sunken); text-decoration:none; }
.wiki-recent a:hover .t { color:var(--teal); }
.wiki-recent .t { flex:1; min-width:0; font-size:12.5px; }
.wiki-recent .o { flex:none; font-size:11.5px; color:var(--text-2); }
.wiki-recent .d { flex:none; width:52px; text-align:right; font-size:11.5px; color:var(--text-3); }

@media (max-width:820px) {
  .wiki-shell { grid-template-columns:minmax(0,1fr); }
  .wiki-nav { position:static; }
}

/* ---- markdown body ---- */
/* Line length caps at 70 characters. The board and the pages are read on a
   projector, and a full-width paragraph at 13px is unreadable from the back. */

/* The 70-character cap is about prose line length, so it applies to text blocks
   only. Wireframes and wide tables get the full panel and their own scroll. */
.md p, .md ul, .md ol, .md blockquote, .md h1, .md h2, .md h3 { max-width:70ch; }
.md > :first-child { margin-top:0; }
.md p, .md ul, .md ol { margin:0 0 11px; }
.md h1 { font-size:17px; margin:20px 0 7px; }
.md h2 { font-size:15px; margin:20px 0 6px; }
.md h3 { font-size:14px; margin:16px 0 5px; }
.md ul, .md ol { padding-left:20px; }
.md li { margin:3px 0; }
.md strong { font-weight:600; }
.md blockquote {
  margin:12px 0; padding:2px 0 2px 12px;
  border-left:2px solid var(--line-2); color:var(--text-2);
}
.md hr { border:0; border-top:1px solid var(--line); margin:20px 0; }

/* KB-6 is ASCII wireframes. They must not wrap, must not force the page
   sideways, and must stay monospaced at a size where 74 columns fit. */
.md pre {
  margin:0 0 12px; padding:12px 14px; background:var(--sunken);
  border:1px solid var(--line); border-radius:4px;
  overflow-x:auto; max-width:100%;
}
.md pre code {
  background:none; padding:0; border-radius:0;
  font-size:11.5px; line-height:1.45; white-space:pre; display:block;
}

/* Tables in page bodies are wide. Let them scroll rather than break the page. */
.md .table-scroll { overflow-x:auto; margin:0 0 12px; max-width:100%; }
.md table { border-collapse:collapse; font-size:12.5px; min-width:100%; }
.md th {
  text-align:left; font-weight:500; color:var(--text-2); font-size:11.5px;
  padding:0 14px 6px 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.md td { padding:7px 14px 7px 0; border-bottom:1px solid var(--line); vertical-align:top; }