/* ProjectRank look: v1 left sidebar, v2 visual language (Inter, zinc neutrals, near-black primary,
   brown selection, blue tab underline, periwinkle focus). See ProjectRank v2/docs/design-system. */
:root {
  --pr-text: #27272a; --pr-heading: #18181b; --pr-muted: #71717a; --pr-faint: #8b8b93;
  --pr-rule: #e4e4e7; --pr-control-border: #d4d4d8; --pr-divider: #d9dadd;
  --pr-zebra: #fafafa; --pr-hover: #f1f1f2; --pr-chrome: #f7f7f8;
  --pr-primary: #303034; --pr-primary-border: #4b4b50; --pr-primary-hover: #18181b;
  --pr-selection: #c17a4f; --pr-tab: #6f95d8; --pr-focus: #8f92f3;
  --pr-danger: #e11d48; --pr-danger-text: #be123c; --pr-error: #b42318;
  --pr-sidebar-width: 216px;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: .875rem; --bs-body-line-height: 1.43; --bs-body-color: var(--pr-text);
  --bs-border-color: var(--pr-rule); --bs-border-radius: 5px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px;
  --bs-link-color: #2f5ea8; --bs-link-hover-color: #1e3f73; --bs-link-color-rgb: 47, 94, 168;
  --bs-focus-ring-color: rgba(143, 146, 243, .35);
}
body { background: #fff; color: var(--pr-text); -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--pr-heading); margin: 0; }
h2, .h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--pr-heading); }
h3, .h3 { font-size: .875rem; font-weight: 600; color: var(--pr-heading); }
.text-muted { color: var(--pr-muted) !important; }
.small, small { font-size: .75rem; }
.code, code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; }
code { color: #3f3f46; }
.paper-code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; font-size: .8rem; color: #3f3f46;
  white-space: nowrap; text-decoration: none; }
a.paper-code:hover { color: var(--pr-heading); text-decoration: underline; }
.ti { font-size: 1rem; line-height: 1; vertical-align: -.125em; }

/* ---- shell: sidebar + content ---- */
.pr-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--pr-sidebar-width); background: #fff;
  border-right: 1px solid #d4d4d8; display: flex; flex-direction: column; z-index: 1040; transition: transform .3s; }
.pr-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1rem .75rem; color: var(--pr-heading);
  text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.pr-brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #7a1f3d; color: #fff; display: grid;
  place-items: center; font-size: .95rem; }
.pr-brand small { display: block; font-weight: 500; font-size: .7rem; color: var(--pr-muted); letter-spacing: 0; }
.pr-nav { list-style: none; margin: 0; padding: .25rem .5rem; flex: 1; overflow-y: auto; }
.pr-nav-divider { margin: 1rem .5rem .5rem; border-top: 1px solid var(--pr-rule); padding-top: .25rem; font-size: .6875rem;
  color: var(--pr-faint); }
.pr-nav a { display: flex; align-items: center; gap: .625rem; padding: .3rem .5rem; margin: 1px 0; border-radius: 8px;
  color: #3f3f46; text-decoration: none; font-size: .8125rem; font-weight: 500; }
.pr-nav a .ti { font-size: 1.15rem; color: var(--nav-c); }
.pr-nav a:hover, .pr-nav a.active { background: var(--nav-bg); color: var(--pr-heading); }
.pr-nav .pr-count { margin-left: auto; border-radius: 999px; background: #f4f4f5; color: #52525b; font-size: .6875rem;
  font-weight: 600; padding: .05rem .4rem; box-shadow: inset 0 0 0 1px var(--pr-rule); }
.pr-account { border-top: 1px solid var(--pr-rule); padding: .625rem .75rem; display: flex; align-items: center;
  gap: .5rem; font-size: .75rem; }
.pr-avatar { width: 28px; height: 28px; border-radius: 50%; background: #eeeeed; color: #3f3f46; display: grid;
  place-items: center; font-weight: 600; font-size: .7rem; flex: none; }
.pr-account .who { min-width: 0; flex: 1; line-height: 1.2; }
.pr-account .who b { display: block; font-weight: 600; color: var(--pr-heading); overflow: hidden; text-overflow: ellipsis; }
.pr-account .who span { color: var(--pr-muted); }
.pr-main { margin-left: var(--pr-sidebar-width); min-height: 100vh; }
.pr-content { padding: 1.5rem 2rem 3rem; max-width: 1320px; }
.pr-content.wide { max-width: none; }
.pr-mobilebar { display: none; }
.pr-backdrop { display: none; }
@media (max-width: 991.98px) {
  .pr-sidebar { transform: translateX(-100%); width: 256px; }
  body.nav-open .pr-sidebar { transform: none; }
  body.nav-open .pr-backdrop { display: block; position: fixed; inset: 0; background: rgba(228, 228, 231, .5);
    backdrop-filter: blur(4px); z-index: 1030; }
  .pr-main { margin-left: 0; }
  .pr-mobilebar { display: flex; align-items: center; gap: .5rem; height: 48px; padding: 0 .75rem;
    border-bottom: 1px solid var(--pr-rule); background: rgba(255, 255, 255, .92); position: sticky; top: 0; z-index: 1020; }
  .pr-content { padding: 1rem; }
}

/* ---- page header ---- */
.pr-page-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pr-page-head .sub { color: var(--pr-muted); font-size: .8125rem; }

/* ---- blocks (v2 .home-block) instead of shadowed cards ---- */
.card { border: 1px solid var(--pr-rule); border-radius: 8px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid var(--pr-rule); font-weight: 600; font-size: .875rem;
  color: var(--pr-heading); padding: .625rem .9rem; }
.card-body { padding: .875rem .95rem; }
.list-group-item { border-color: var(--pr-rule); font-size: .875rem; }
.list-group-item-action:hover { background: var(--pr-hover); }
.stat { font-size: 1.5rem; font-weight: 600; color: var(--pr-heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--pr-muted); font-size: .75rem; }

/* ---- buttons (v2 module-work-region-button) ---- */
.btn { --bs-btn-font-size: .8125rem; --bs-btn-font-weight: 500; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem;
  --bs-btn-border-radius: 5px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-sm { --bs-btn-font-size: .75rem; --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; min-height: 27px; }
.btn-primary { --bs-btn-bg: var(--pr-primary); --bs-btn-border-color: var(--pr-primary-border); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--pr-primary-hover); --bs-btn-hover-border-color: var(--pr-primary-hover);
  --bs-btn-active-bg: var(--pr-primary-hover); --bs-btn-active-border-color: var(--pr-primary-hover);
  --bs-btn-disabled-bg: var(--pr-primary); --bs-btn-disabled-border-color: var(--pr-primary-border); }
.btn-outline-primary, .btn-outline-secondary, .btn-light { --bs-btn-bg: #fff; --bs-btn-color: #52525b;
  --bs-btn-border-color: var(--pr-control-border); --bs-btn-hover-bg: #f4f4f5; --bs-btn-hover-color: var(--pr-heading);
  --bs-btn-hover-border-color: var(--pr-control-border); --bs-btn-active-bg: #ededf0; --bs-btn-active-color: var(--pr-heading);
  --bs-btn-active-border-color: var(--pr-control-border); }
.btn-outline-danger { --bs-btn-color: var(--pr-danger-text); --bs-btn-border-color: #fecdd3; --bs-btn-hover-bg: #fff1f2;
  --bs-btn-hover-color: var(--pr-danger-text); --bs-btn-hover-border-color: #fda4af; --bs-btn-active-bg: #ffe4e6;
  --bs-btn-active-color: var(--pr-danger-text); }
.btn-danger { --bs-btn-bg: var(--pr-danger); --bs-btn-border-color: var(--pr-danger); --bs-btn-hover-bg: var(--pr-danger-text);
  --bs-btn-hover-border-color: var(--pr-danger-text); }
.btn-success { --bs-btn-bg: #047857; --bs-btn-border-color: #047857; --bs-btn-hover-bg: #065f46; --bs-btn-hover-border-color: #065f46; }
.btn-icon { width: 30px; padding: 0; color: var(--pr-muted); }

/* ---- form controls ---- */
.form-control, .form-select { border-color: var(--pr-control-border); border-radius: 5px; font-size: .8125rem;
  color: var(--pr-text); }
.form-control-sm, .form-select-sm { font-size: .78rem; }
.form-control:focus, .form-select:focus { border-color: var(--pr-selection);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pr-focus) 25%, transparent); }
.form-label { font-size: .8125rem; font-weight: 500; color: #3f3f46; margin-bottom: .3rem; }
.form-text { font-size: .72rem; color: var(--pr-faint); }
.form-check-input:checked { background-color: var(--pr-selection); border-color: var(--pr-selection); }
.form-check-input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pr-focus) 25%, transparent); }
:focus-visible { outline: 2px solid var(--pr-focus); outline-offset: 1px; }

/* ---- pills (v1 status badges) ---- */
.pill { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .1rem .5rem; font-size: .72rem;
  font-weight: 500; line-height: 1.35; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--ring); background: var(--bg);
  color: var(--fg); --bg: #f4f4f5; --fg: #52525b; --ring: #e4e4e7; }
.pill-amber { --bg: #fffbeb; --fg: #b45309; --ring: #fde68a; }
.pill-green { --bg: #ecfdf5; --fg: #047857; --ring: #a7f3d0; }
.pill-red { --bg: #fff1f2; --fg: #be123c; --ring: #fecdd3; }
.pill-blue { --bg: #eff6ff; --fg: #1d4ed8; --ring: #bfdbfe; }
.pill-violet { --bg: #f5f3ff; --fg: #6d28d9; --ring: #ddd6fe; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 .5rem; border-radius: 999px; font-size: .72rem;
  background: #edf3f7; color: #42586a; border: 1px solid #d7e2ea; }

/* ---- tables (v2 collection table) ---- */
.pr-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .8125rem; }
.pr-table thead th { position: sticky; top: 0; background: #fff; height: 36px; padding: 0 .5rem; font-size: .6875rem;
  font-weight: 400; color: #52525b; border-bottom: 1px solid var(--pr-rule); text-align: left; white-space: nowrap; z-index: 1; }
.pr-table thead th + th { box-shadow: inset 1px 0 0 #ededf0; }
.pr-table tbody td { height: 48px; padding: .4rem .5rem; border-bottom: 1px solid var(--pr-rule); vertical-align: middle; }
.pr-table tbody tr:nth-child(even) td { background: var(--pr-zebra); }
.pr-table tbody tr:hover td { background: var(--pr-hover); }
.pr-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.pr-table .title-cell a { color: var(--pr-heading); text-decoration: none; font-weight: 500; }
.pr-table .title-cell a:hover { text-decoration: underline; }
.pr-table .meta { font-size: .6875rem; color: #a1a1aa; margin-top: 1px; }
.pr-table-wrap { border: 1px solid var(--pr-rule); border-radius: 8px; overflow: hidden; }
.pr-empty { text-align: center; padding: 2.5rem 1rem; color: var(--pr-faint); font-size: .8125rem; }
.pr-empty .ti { font-size: 1.75rem; color: #a1a1aa; display: block; margin-bottom: .5rem; }
.pr-empty b { display: block; color: #52525b; font-weight: 600; }
.table { --bs-table-hover-bg: var(--pr-hover); font-size: .8125rem; }
.table > :not(caption) > * > * { border-bottom-color: var(--pr-rule); }
.table thead th { font-weight: 400; font-size: .6875rem; color: #52525b; }

/* ---- tabs (v2 detail tabs) ---- */
.nav-tabs { border-bottom: 1px solid #e5e7eb; gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .75rem;
  font-size: .75rem; font-weight: 600; color: #6b7280; margin-bottom: -1px; display: inline-flex; gap: .35rem; align-items: center; }
.nav-tabs .nav-link:hover { color: #3f3f46; border-bottom-color: #d4d4d8; }
.nav-tabs .nav-link.active { color: #3f3f46; border-bottom-color: var(--pr-tab); background: transparent; }
.pr-segments { display: inline-flex; border: 1px solid var(--pr-control-border); border-radius: 5px; overflow: hidden; }
.pr-segments a { padding: .25rem .7rem; font-size: .75rem; font-weight: 500; color: #52525b; text-decoration: none;
  display: inline-flex; gap: .35rem; align-items: center; }
.pr-segments a + a { border-left: 1px solid var(--pr-control-border); }
.pr-segments a.active { background: #f4f4f5; color: var(--pr-heading); box-shadow: inset 0 -2px 0 var(--pr-selection); }

/* ---- alerts (v1 inline banners) ---- */
.alert { font-size: .8125rem; border-radius: 6px; padding: .6rem .9rem; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fff1f2; border-color: #fecdd3; color: var(--pr-error); }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: #f4f7fb; border-color: #d7e2ea; color: #42586a; }

/* ---- paper detail ---- */
.compare-table { table-layout: fixed; }
.compare-table td, .compare-table th { overflow-wrap: anywhere; }
.pdf-frame { width: 100%; height: 80vh; border: 1px solid var(--pr-rule); border-radius: 8px; background: #fff; }
.value-box { white-space: pre-wrap; font-size: .8125rem; }
pre.citation { white-space: pre-wrap; background: var(--pr-chrome); padding: .75rem; border-radius: 6px; font-size: .78rem;
  border: 1px solid var(--pr-rule); }

/* ---- chat ---- */
.chat { max-width: 980px; }
.msg { border-radius: 8px; padding: .65rem .9rem; margin-bottom: .6rem; font-size: .875rem; }
.msg-editor { background: #f4f7fb; border: 1px solid #d7e2ea; margin-left: 12%; }
.msg-agent { background: #fff; border: 1px solid var(--pr-rule); margin-right: 6%; }
.msg-agent table { font-size: .8125rem; margin: .5rem 0; }
.msg-agent table td, .msg-agent table th { border: 1px solid var(--pr-rule); padding: .25rem .5rem; }
.msg-agent pre { background: var(--pr-chrome); padding: .5rem; border-radius: 6px; white-space: pre-wrap; }
.msg-tool { font-size: .75rem; color: var(--pr-muted); padding: .1rem .9rem; margin-bottom: .2rem; }
.msg-system { background: #fff1f2; border: 1px solid #fecdd3; color: var(--pr-error); }
.msg-note { background: #fffbeb; border: 1px dashed #fde68a; color: #92400e; }
.msg .who { font-size: .72rem; color: var(--pr-muted); margin-bottom: .2rem; }
.thinking { color: var(--pr-muted); }

/* ---- issue timeline ---- */
.timeline { position: relative; }
.tl-item { margin-bottom: .6rem; }
.tl-event { font-size: .78rem; color: #52525b; padding: .15rem .25rem .15rem .9rem; border-left: 2px solid var(--pr-rule); margin-left: .5rem; }
.tl-event .ti { color: var(--pr-muted); }
.tl-error, .tl-error .ti { color: var(--pr-error); border-left-color: #fecdd3; }
.tl-tools { margin: 0 0 .35rem .5rem; font-size: .75rem; color: var(--pr-muted); }
.tl-tools summary { cursor: pointer; list-style: none; display: inline-flex; gap: .3rem; align-items: center;
  border: 1px dashed var(--pr-control-border); border-radius: 5px; padding: .1rem .5rem; }
.tl-tools summary::-webkit-details-marker { display: none; }
.tl-tools[open] summary { margin-bottom: .3rem; }
.tl-tool { border-left: 2px solid var(--pr-control-border); padding: .1rem .6rem; margin: .15rem 0 .15rem .25rem; }

/* ---- secrets ---- */
.secret-field { display: flex; gap: .35rem; }
.secret-field .form-control { font-family: ui-monospace, Consolas, monospace; }

.login-card { max-width: 400px; margin: 10vh auto; }

/* ---- tool calls (chat and issue timeline) ---- */
.tool-item { margin: 0 0 .3rem .5rem; font-size: .78rem; color: #52525b; }
.tool-item > summary { cursor: pointer; list-style: none; display: flex; gap: .35rem; align-items: baseline;
  padding: .15rem .5rem; border-left: 2px solid var(--pr-control-border); }
.tool-item > summary::-webkit-details-marker { display: none; }
.tool-item > summary:hover { background: var(--pr-hover); }
.tool-item[open] > summary { border-left-color: var(--pr-selection); }
.tool-body { margin: .3rem 0 .6rem 1rem; }
.tool-label { font-size: .6875rem; color: var(--pr-muted); margin: .3rem 0 .15rem; }
.tool-pre { background: var(--pr-chrome); border: 1px solid var(--pr-rule); border-radius: 6px; padding: .5rem .6rem;
  white-space: pre-wrap; max-height: 320px; overflow: auto; font-size: .75rem; margin-bottom: .35rem; }
.tool-error { border-color: #fecdd3; background: #fff1f2; }
.thinking-item > summary { color: var(--pr-muted); font-style: italic; }

.attachments { margin-top: .5rem; display: grid; gap: .3rem; }
.attachment { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .78rem; padding: .3rem .5rem;
  border: 1px solid var(--pr-rule); border-radius: 6px; background: #fff; }
.attachment.gone { color: var(--pr-muted); background: var(--pr-chrome); }
.tl-detail { margin: .35rem 0 .2rem 1.1rem; font-size: .75rem; color: #3f3f46; }
.tl-detail table { border-collapse: collapse; margin: 0; }
.tl-detail th, .tl-detail td { border: 1px solid var(--pr-rule); padding: .2rem .45rem; vertical-align: top; }
.tl-detail th { font-weight: 500; color: var(--pr-muted); background: var(--pr-chrome); }
.msg table { border-collapse: collapse; font-size: .8rem; margin: .4rem 0; }
.msg table td, .msg table th { border: 1px solid var(--pr-rule); padding: .25rem .5rem; vertical-align: top; }
.copy-btn { position: absolute; top: .35rem; right: .35rem; min-height: 24px; padding: .1rem .45rem; font-size: .7rem; }
pre.copyable { padding-right: 5.5rem; }