/*
 * Polyglot Workbench, in WAYABANK's brand.
 *
 * Taken from www.wayabank.ng by reading the live site's computed styles rather
 * than eyeballing a screenshot:
 *
 *   #FF4400   the brand orange. 216 text uses and 215 borders on that page,
 *             and every primary button carries it.
 *   #101828   near-black slate for text, with #475467 and #667085 beneath it
 *   #F2F4F7   the cool grey canvas, over white surfaces
 *   Inter     987 elements on that page use it
 *
 * ONE DELIBERATE DEVIATION. Failures are crimson-rose, not red. A red sitting
 * beside #FF4400 is nearly the same hue, and this interface uses colour to say
 * "this run failed" — a distinction that vanishes at a glance, or for a
 * colourblind reader, is not a distinction. So brand orange means brand and
 * activity, and failure gets a hue nothing else uses.
 *
 * A tool somebody keeps open all day: high contrast, tight hierarchy, dense
 * enough for real work, and nothing that moves without a reason.
 */

:root {
  --brand:        #ff4400;
  --brand-dark:   #d93a00;
  --brand-bright: #ff6a35;
  --brand-wash:   #fff1ec;

  --paper:        #f2f4f7;
  --paper-raised: #ffffff;
  --paper-sunken: #e9edf3;
  --rule:         #e4e7ec;
  --rule-strong:  #d0d5dd;

  --ink:          #0c111d;
  --ink-soft:     #161d2b;
  --ink-line:     #29323f;

  --text:         #101828;
  --text-muted:   #475467;
  --text-faint:   #667085;
  --text-onink:   #eaecf0;
  --text-onink-muted: #98a2b3;

  --amber:        #b23000;
  --amber-bright: #ff6a35;
  --amber-wash:   #fff1ec;

  --cyan:         #0e7490;
  --cyan-bright:  #22d3ee;
  --cyan-wash:    #e6f6fa;

  --rose:         #a11043;
  --rose-bright:  #fb7185;
  --rose-wash:    #fdeef3;

  --mono: "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rail: 268px;
  --dock: 380px;
  /* The terminal used to be a fixed 340px, which on a laptop with browser
     chrome and a taskbar left the code panes about one line tall. It scales
     with the window now, and it can be collapsed to its bar. */
  --terminal: clamp(150px, 26vh, 300px);
  --radius: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18);
}

* { box-sizing: border-box; }

/* `hidden` has to beat every display rule below it, or a button the code
 * believes is hidden sits there being clickable. This is how "Cancel" was
 * visible with nothing to cancel. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--text);
  font: 400 13.5px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------- shell ---------------- */

.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  grid-template-areas:
    "brand  topbar"
    "rail   main";
  height: 100vh;
}

/* With the agent open the page gives it a column rather than letting it sit on
   top of the code. A conversation about a diff you cannot see is a worse tool
   than no conversation at all. */
@media (min-width: 1100px) {
  .app[data-agent="open"] {
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--dock);
    grid-template-areas:
      "brand  topbar  topbar"
      "rail   main    agent";
  }
  .app[data-agent="open"] .agentdock {
    position: static;
    grid-area: agent;
    width: auto;
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 1px;
    box-shadow: none;
  }
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}

.brand__mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font: 700 10.5px/1 var(--ui);
  letter-spacing: .02em;
}

.brand__name {
  font-weight: 700;
  letter-spacing: .02em;
}

.brand__product {
  color: var(--text-muted);
  font-weight: 500;
}

.brand__sub {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  min-width: 0;
}

.topbar__path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;      /* keep the interesting end of a long path visible */
  text-align: left;
}

.topbar__spacer { flex: 1 1 auto; }

/* ---------------- status pills ---------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-sunken);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 520;
  white-space: nowrap;
}

.pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.pill--ok    { border-color: #b6e3ef; background: var(--cyan-wash);  color: var(--cyan); }
.pill--ok    .pill__dot { background: var(--cyan); }
.pill--busy  { border-color: #ffd0bd; background: var(--brand-wash); color: var(--brand-dark); }
.pill--busy  .pill__dot { background: var(--brand); animation: pulse 1.4s ease-in-out infinite; }
.pill--bad   { border-color: #f3c6c2; background: var(--rose-wash);  color: var(--rose); }
.pill--bad   .pill__dot { background: var(--rose); }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------- rail ---------------- */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* The rail grew past the viewport as sections were added. It scrolls, and
     the file list keeps a floor, because a browser squeezed to 112 pixels is
     not a file browser. */
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  background: var(--paper-raised);
}

.rail__section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}

.rail__title {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.langgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.langchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
}

.langchip--canonical {
  border-color: var(--ink-line);
  background: var(--ink);
  color: var(--text-onink);
}

.langchip__role {
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.langchip--canonical .langchip__role { color: var(--brand-bright); }

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 11.5px;
}
.meta dt { color: var(--text-faint); }
.meta dd { margin: 0; font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }

.rail__files {
  flex: 1 1 auto;
  min-height: 240px;          /* a floor: the list is the point of the rail */
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
}

.search {
  position: relative;
  margin-bottom: 8px;
}

.search input {
  width: 100%;
  height: 30px;
  padding: 0 8px 0 26px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 12.5px;
}
.search input::placeholder { color: var(--text-faint); }
.search__icon {
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  display: grid;
}

.filelist {
  list-style: none;
  margin: 0 -6px;
  padding: 0 0 12px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.filelist li { margin: 0; }

.fileitem {
  width: 100%;
  display: block;
  text-align: left;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  line-height: 1.35;
}
.fileitem:hover { background: var(--paper-sunken); }
.fileitem[aria-current="true"] {
  background: var(--ink);
  color: var(--text-onink);
}

.fileitem__name { font-family: var(--mono); font-size: 12px; }
.fileitem__dir {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fileitem[aria-current="true"] .fileitem__dir { color: var(--text-onink-muted); }

/* ---------------- main ---------------- */

.main {
  grid-area: main;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--terminal);
  min-width: 0;
  min-height: 0;
}

.workspace-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  flex-wrap: wrap;
}

.toolbar__file {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 550;
}

.toolbar__spacer { flex: 1 1 auto; }

label.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

select.control {
  height: 28px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235f6570' stroke-width='1.5'/></svg>") no-repeat right 9px center;
  font-family: var(--mono);
  font-size: 12px;
  appearance: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  font-size: 12.5px;
  font-weight: 540;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--paper-sunken); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn--danger { border-color: #e7b4ae; color: var(--rose); background: var(--rose-wash); }
.btn--icon { padding: 0; width: 28px; justify-content: center; }

/* ---------------- code panes ---------------- */

.panes {
  flex: 1 1 auto;
  /* The code is the point of the screen: it keeps a floor even when the
     terminal, the banner and a wrapped toolbar all want room. */
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}

.panes[data-single="true"] { grid-template-columns: 1fr; }

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ink);
}

.pane__head {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Wraps instead of overlapping. Three tags and a label do not fit on a
     narrow pane at a fixed 32px, and the result was text printed over text. */
  flex-wrap: wrap;
  min-height: 32px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-soft);
  color: var(--text-onink-muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.pane__head .spacer { flex: 1 1 auto; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  white-space: nowrap;      /* "fresh translation" is one thing, not two lines */
  padding: 0 7px;
  border-radius: 3px;
  border: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-onink-muted);
}
.tag--cache { border-color: #17505e; background: #0d2d36; color: var(--cyan-bright); }
.tag--fresh { border-color: #6b2d12; background: #2b1309; color: var(--brand-bright); }
.tag--warn  { border-color: #6b3b18; background: #331a0c; color: #fdba74; }

.code {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px 0;
  background: var(--ink);
  color: var(--text-onink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  tab-size: 4;
}

.code__line { display: flex; }
.code__line:hover { background: #131b2a; }

.code__no {
  flex: 0 0 auto;
  width: 46px;
  padding-right: 14px;
  text-align: right;
  color: #475467;
  user-select: none;
}

.code__text { white-space: pre; padding-right: 16px; }

.code__text mark {
  background: #4a1f0c;
  color: #ffb08a;
  border-radius: 2px;
  padding: 0 2px;
}

/* ---------------- terminal ---------------- */

.terminal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--rule);
  background: var(--ink);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-soft);
  flex-wrap: wrap;
}

.terminal__title {
  color: var(--text-onink-muted);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.terminal .control,
.terminal .cmdinput {
  border-color: var(--ink-line);
  background: var(--ink);
  color: var(--text-onink);
}

.cmdinput {
  flex: 1 1 220px;
  min-width: 140px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
}
.cmdinput::placeholder { color: #667085; }

.btn--onink {
  border-color: var(--ink-line);
  background: var(--ink);
  color: var(--text-onink);
}
.btn--onink:hover:not(:disabled) { background: #232c3b; }

.preview {
  padding: 7px 12px;
  border-bottom: 1px solid var(--ink-line);
  background: #0a0f1a;
  color: var(--text-onink-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview strong { color: var(--brand-bright); font-weight: 500; }
.preview .spacer { flex: 1 1 auto; }

.termout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-onink);
  white-space: pre-wrap;
  word-break: break-word;
}

.termout .cmd    { color: var(--brand-bright); }
.termout .stderr { color: var(--rose-bright); }
.termout .meta-line { color: var(--text-onink-muted); }
.termout .ok   { color: var(--cyan-bright); }
.termout .bad  { color: var(--rose-bright); }

/* ---------------- activity ---------------- */

/* The launcher sits over the bottom right corner, which is where the activity
   list puts its badges. Reserve the corner rather than covering CACHED with a
   button — a status you cannot read is a status that is not there. */
.app[data-agent="closed"] .activity,
.app:not([data-agent]) .activity { padding-right: 108px; }

.activity {
  border-top: 1px solid var(--ink-line);
  max-height: 116px;
  overflow-y: auto;
  padding: 6px 12px 10px;
  background: #0a0f1a;
}

.activity__row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 11.5px;
  color: var(--text-onink-muted);
  border-bottom: 1px solid #151d2b;
}
.activity__row:last-child { border-bottom: 0; }
.activity__when { font-family: var(--mono); font-size: 10.5px; color: #667085; }
.activity__what { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity__badge { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.activity__badge[data-kind="ok"]     { color: var(--cyan-bright); }
.activity__badge[data-kind="bad"]    { color: var(--rose-bright); }
.activity__badge[data-kind="busy"]   { color: var(--brand-bright); }

/* ---------------- empty and error states ---------------- */

.state {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  color: var(--text-onink-muted);
}
.state h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-onink); }
.state p  { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 1.6; }
.state code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: #111827;
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--amber-bright);
}
.state--paper { color: var(--text-muted); }
.state--paper h2 { color: var(--text); }
.state--paper code { background: var(--paper-sunken); border-color: var(--rule); color: var(--brand-dark); }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 14px 0;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid #f3c6c2;
  background: var(--rose-wash);
  color: #7f1d1d;
  font-size: 12.5px;
  line-height: 1.5;
}
#boot-notice { margin: 14px; }
#boot-notice code { background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; }

.banner--warn { border-color: #ffd0bd; background: var(--brand-wash); color: #8a2a00; }
.banner code { font-family: var(--mono); font-size: 11.5px; }

.skeleton {
  background: linear-gradient(90deg, #161d2b 25%, #202a3d 37%, #161d2b 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 3px;
  height: 12px;
  margin: 8px 12px;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* Skeleton widths as classes rather than inline styles: the page ships a strict
 * Content-Security-Policy, and style-src 'self' blocks style attributes. A
 * loading state that trips CSP is a loading state that renders wrong. */
.skeleton--w1 { width: 78% }
.skeleton--w2 { width: 54% }
.skeleton--w3 { width: 66% }
.skeleton--w4 { width: 41% }
.skeleton--w5 { width: 72% }
.skeleton--w6 { width: 48% }

.state--inline { padding: 18px 4px; }
.activity__empty { grid-column: 1 / -1; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- responsive ---------------- */

/* Tablet and small laptop: the rail becomes a drawer, and the terminal keeps
 * its height, because the terminal is where the work is watched. State is not
 * torn down when the layout changes; only visibility moves. */
@media (max-width: 1060px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "topbar" "main";
    grid-template-rows: 48px 44px minmax(0, 1fr);
  }
  .brand { border-right: 0; }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    z-index: 20;
    box-shadow: var(--shadow);
    transform: translateX(-102%);
    transition: transform .18s ease;
  }
  .app[data-rail="open"] .rail { transform: none; }
  .scrim {
    position: fixed; inset: 0;
    background: rgba(20, 22, 26, .34);
    z-index: 15;
  }
  .main { grid-template-rows: minmax(0, 1fr) 300px; }
  .panes { grid-template-columns: 1fr; }
  .panes .pane[data-role="canonical"] { display: none; }
  .panes[data-mobile-view="canonical"] .pane[data-role="canonical"] { display: flex; }
  .panes[data-mobile-view="canonical"] .pane[data-role="view"] { display: none; }
}

/* The two pane-switch buttons and the rail toggle exist only below the
 * breakpoint. They are governed here rather than by a `hidden` attribute,
 * because an attribute cannot know how wide the window is, and a button that
 * is hidden at every width is a feature nobody can reach. */
@media (min-width: 1061px) {
  .rail-toggle, .scrim, .mobile-only { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------- repository panel ---------------- */

.control--block { width: 100%; }

.gitrow {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.gitrow--actions { margin-top: 8px; }
.gitrow--actions .btn { flex: 1 1 0; justify-content: center; }

/* Secondary Git controls must never make the primary Files list disappear. */
.gitmore[open] {
  max-height: min(260px, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gitstate {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.gitmore {
  margin-top: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.gitmore > summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
}
.gitmore > summary::-webkit-details-marker { display: none; }
.gitmore > summary::before { content: "▸ "; }
.gitmore[open] > summary::before { content: "▾ "; }

.fieldlabel {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.fieldnote {
  margin: 8px 0 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* A dirty tree is a fact worth seeing before you switch branches. */
.pill--dirty { border-color: #ffd0bd; background: var(--brand-wash); color: var(--brand-dark); }

/* ---------------- github panel ---------------- */

.ghrow { display: flex; align-items: center; gap: 6px; }
.btn--block { width: 100%; justify-content: center; }
.btn--small { height: 24px; padding: 0 8px; font-size: 11.5px; }

.ghlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.ghlist:empty { display: none; }
.ghlist li + li { border-top: 1px solid var(--rule); }

.ghitem {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: none;
  text-align: left;
}
.ghitem:hover { background: var(--paper-sunken); }
.ghitem__name { font-family: var(--mono); font-size: 11.5px; }
.ghitem__owner { color: var(--text-faint); font-size: 10.5px; }
.ghitem__badge {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ghitem__badge[data-private="true"] { color: var(--brand-dark); }

/* ---------------- review dialog ---------------- */

.review {
  width: min(980px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--text);
  background: var(--paper-raised);
}
.review::backdrop { background: rgba(16, 24, 40, .45); }

.review__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.review__head h2 { margin: 0; font-size: 14.5px; }
.review__head .btn { margin-left: auto; }

.review__action {
  margin: 0;
  padding: 10px 16px;
  background: var(--brand-wash);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brand-dark);
}

.review__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding: 12px 16px 4px;
}
@media (max-width: 720px) { .review__grid { grid-template-columns: 1fr; } }

.review__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11.5px;
}
.review__list li { padding: 2px 0; border-bottom: 1px solid var(--rule); }
.review__list li:last-child { border-bottom: 0; }
.review__list .sha { color: var(--brand-dark); }
.review__list .muted { color: var(--text-faint); }
.review__list .empty { color: var(--text-faint); font-family: var(--ui); }

.review__diff {
  margin: 0;
  padding: 12px 16px;
  max-height: 34vh;
  overflow: auto;
  background: var(--ink);
  color: var(--text-onink);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre;
}
.review__diff .add { color: #86efac; }
.review__diff .del { color: var(--rose-bright); }
.review__diff .hunk { color: var(--cyan-bright); }
.review__diff .meta { color: var(--text-onink-muted); }

.review__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.review__foot .control { width: 190px; }

/* ---------------- language identity ---------------- */

.configstate { margin-top: 8px; }

.langchip--detected {
  border-style: dashed;
  border-color: var(--brand);
}
.langchip--unknown { border-style: dashed; opacity: .8; }

.langchip__confidence {
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.langchip--detected .langchip__confidence { color: var(--brand-dark); }

.fielderrors {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #f3c6c2;
  border-radius: var(--radius);
  background: var(--rose-wash);
  font-size: 11.5px;
  line-height: 1.5;
  color: #7f1d1d;
}
.fielderrors li + li { margin-top: 5px; padding-top: 5px; border-top: 1px solid #f3c6c2; }
.fielderrors .field { font-family: var(--mono); font-weight: 600; }

.direction {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

#proposal-rationale .field { font-family: var(--mono); color: var(--brand-dark); }
#proposal-rationale .source {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
#proposal-rationale .why { color: var(--text-muted); }

/* Sections above the file list collapse, so a long GitHub list or a long
   configuration panel never pushes the files off screen. */
.rail__section--foldable > summary {
  cursor: pointer;
  list-style: none;
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rail__section--foldable > summary::-webkit-details-marker { display: none; }
.rail__section--foldable > summary::before { content: "▾ "; }
.rail__section--foldable:not([open]) > summary::before { content: "▸ "; }

.hint {
  font-size: 11.5px;
  color: var(--brand-dark);
  white-space: nowrap;
}

.filecount {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-faint);
}

/* The GitHub repository list is a setup control and must never own more of the
   rail than the file list it sits above. */
.ghlist { max-height: 150px; }

/* The file list sits between the repository picker and the reference panels,
   and it is the one that absorbs spare height. Everything below it keeps its
   own size so it cannot be squeezed away again. */
.rail__files { order: 0; }
.rail > .rail__section { flex: 0 0 auto; }

/* The hint is a button, so it must look pressable and take focus like one. */
button.hint {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  padding: 2px 6px;
  cursor: pointer;
}
button.hint:hover { border-color: var(--brand); background: var(--brand-wash); }

/* A brief mark on the first row, so "the files are over here" lands. */
.fileitem--flash { animation: flash 1.2s ease-out; }
@keyframes flash {
  0%, 40% { background: var(--brand-wash); box-shadow: inset 2px 0 0 var(--brand); }
  100% { background: none; }
}

/* Collapsed terminal: the bar stays, everything below it goes. */
.main[data-terminal="collapsed"] { grid-template-rows: minmax(0, 1fr) auto; }
.main[data-terminal="collapsed"] .termout,
.main[data-terminal="collapsed"] .activity,
.main[data-terminal="collapsed"] .preview { display: none; }

#terminal-toggle { margin-left: auto; }

/* ---------------------------------------------------------------- the agent */

#agent-section .control--block { margin-bottom: 8px; }
#agent-instruction { font-family: var(--ui); resize: vertical; min-height: 54px; }

.agentplan {
  margin: 10px 0 8px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-sunken);
}
.agentplan__summary { margin: 0 0 8px; font-size: 12.5px; color: var(--text); }
.agentplan .rail__title { margin: 8px 0 4px; }
.agentplan__stop li { color: var(--rose); }

.permlist { list-style: none; margin: 8px 0; padding: 0; }
.permlist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.permlist .permname { font-weight: 600; font-size: 12.5px; }
.permlist .permmeans { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.permlist .permhuman { grid-column: 2; color: var(--brand-dark); font-size: 11.5px; }

.auditlist { max-height: 320px; overflow-y: auto; font-family: var(--mono); font-size: 11.5px; }
.auditlist .when { color: var(--text-faint); }
.auditlist .ok { color: var(--cyan); }
.auditlist .bad { color: var(--rose); }

/* ---------------------------------------------------------------- agent dock

   The agent used to live in a folded section under a long file list, which is
   an excellent place to put something you would rather nobody found. A tool
   that edits your code should be visible while you are looking at your code. */

.agentfab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: 600 13px/1 var(--ui);
  cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(255, 68, 0, .55), 0 2px 6px rgba(16, 24, 40, .2);
}
.agentfab:hover { background: var(--brand-dark); }
.agentfab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.agentfab__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.agentdock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 36px));
  max-height: min(640px, calc(100vh - 100px));
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(16, 24, 40, .45), 0 2px 8px rgba(16, 24, 40, .12);
  overflow: hidden;
}
.agentdock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--text-onink);
}
.agentdock__title { min-width: 0; font: 600 13px/1 var(--ui); }
.agentdock__head .toolbar__spacer { min-width: 8px; }
.agentdock__head .tag { min-width: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentdock__head .tag { background: rgba(255, 255, 255, .12); color: var(--text-onink); border-color: transparent; }
.agentdock__head .btn { background: rgba(255, 255, 255, .1); color: var(--text-onink); border-color: transparent; }
.agentdock__head .btn:hover { background: rgba(255, 255, 255, .2); }
.agentdock__head #agent-close { flex: 0 0 32px; }

.agentlog {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
}
.agentturn { max-width: 92%; font-size: 12.5px; line-height: 1.5; }
.agentturn--you {
  align-self: flex-end;
  background: var(--brand-wash, #fff1ec);
  border: 1px solid var(--rule);
  border-radius: 12px 12px 2px 12px;
  padding: 8px 11px;
  color: var(--text);
}
.agentturn--agent {
  align-self: flex-start;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px 12px 12px 2px;
  padding: 9px 11px;
}
.agentturn--stop { border-color: var(--rose); background: var(--rose-wash); }
.agentturn--done { border-color: var(--cyan); background: var(--cyan-wash); }
.agentturn__what { margin: 0 0 6px; }
.agentturn ul { margin: 4px 0 0; padding-left: 16px; color: var(--text-muted); }
.agentturn li { margin: 2px 0; }
.agentturn code { font-family: var(--mono); font-size: 11.5px; }
.agentturn__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.agentturn__meta { color: var(--text-faint); font-size: 11px; margin-top: 6px; }

.agentdock__foot { border-top: 1px solid var(--rule); padding: 8px 10px 10px; background: var(--paper-raised); }
.agentcompose { display: flex; gap: 8px; align-items: flex-end; }
.agentcompose textarea {
  flex: 1;
  resize: none;
  font: 12.5px/1.45 var(--ui);
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--paper);
}
.agentcompose textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.agentcompose__row { display: flex; gap: 6px; margin-top: 8px; }

@media (max-width: 760px) {
  .agentdock { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .agentdock__head { flex-wrap: wrap; }
  .agentdock__head .toolbar__spacer { display: none; }
  .agentdock__head #agent-close { margin-left: auto; }
}

/* ---------------------------------------------------------------- whoami
   The signed-in person, at the top of the rail. Hidden entirely in
   single-user mode: a row naming nobody is worse than no row. */
.whoami {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
.whoami__avatar {
  border-radius: 50%;
  background: var(--paper-sunken);
  flex: none;
}
.whoami__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  flex: 1;
}
.whoami__name strong { font-size: .84rem; font-weight: 600; }
.whoami__sub {
  font-size: .72rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}