/* SupaKnock — shared workspace foundations. All assets are served locally. */
:root {
  color-scheme: dark;
  --bg: #171717; --surface: #1c1c1c; --raised: #242424; --hover: #2b2b2b;
  --line: #303030; --line-strong: #464646; --border: var(--line); --ink: #f0f0ef; --muted: #a4a4a1;
  --green: #3ecf8e; --green-hover: #55d89c; --green-ink: #062b1b; --green-soft: #19392b;
  --red: #f19b9b; --red-soft: #392222; --amber: #eac383; --blue: #8eb7f5;
  --shadow: 0 12px 40px #0003; --sidebar-width: 232px;
  --radius: 12px; --motion: 180ms; --ease: cubic-bezier(.2,.7,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f9f8; --surface: #fff; --raised: #f3f5f3; --hover: #edf0ed;
  --line: #e5e5e5; --line-strong: #c8c8c8; --ink: #202020; --muted: #696969;
  --green: #127647; --green-hover: #0d643b; --green-ink: #fff; --green-soft: #e6f4ec;
  --red: #b83737; --red-soft: #fff0f0; --amber: #956410; --blue: #326bc0;
  --shadow: 0 8px 30px #00000006;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.55; }
button,input,textarea,select { font: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--ink); }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: var(--green-soft); color: var(--ink); }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(26px,2.5vw,34px); line-height: 1.18; font-weight: 620; letter-spacing: -1.05px; margin-bottom: 10px; }
h2 { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.15px; margin-bottom: 16px; }
h3 { font-size: 15px; font-weight: 580; margin-bottom: 8px; }
p { margin-bottom: 16px; }
strong { font-weight: 590; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 8px; }
#shell { display: contents; }
.sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); z-index: 30; padding: 0 14px; overflow: hidden; }
.brand { height: 74px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.55px; padding: 0 10px; }
.brandmark { display: grid; place-items: center; color: var(--green); }
.brandmark .icon { width: 24px; height: 24px; }
.workspace-label { border: 1px solid var(--line); border-radius: 9px; margin: 4px 2px 24px; padding: 10px; display: grid; grid-template-columns: 26px 1fr; gap: 0 9px; align-items: center; font-size: 12px; }
.workspace-monogram { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.workspace-tag { font-size: 10px; color: var(--muted); }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { color: var(--muted); font-size: 11px; margin: 16px 12px 6px; font-weight: 500; }
.nav-label:first-child { margin-top: 0; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; min-height: 40px; color: var(--muted); border-radius: 7px; border: 1px solid transparent; font-size: 12px; background: transparent; text-align: left; font-weight: 480; }
.nav-item .icon { width: 16px; height: 16px; }
.nav-item:hover { background: var(--raised); color: var(--ink); border-color: transparent; }
.nav-item.active { color: var(--ink); background: var(--raised); border-color: var(--line); }
.nav-item.active .icon { color: var(--green); }
.sidebar-bottom { margin-top: auto; padding: 20px 0 12px; }
.theme-value { margin-left: auto; font-size: 10px; color: var(--muted); }
.account-link { border-top: 1px solid var(--line); padding: 16px 9px 5px; margin-top: 16px; display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 12px; }
.account-link > .icon { margin-left: auto; color: var(--muted); width: 15px; }
.account-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { border: 1px solid var(--line-strong); background: var(--raised); width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.topbar { position: sticky; top: 0; margin-left: var(--sidebar-width); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 20; }
.topbar-crumb { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); }
.topbar-crumb strong { color: var(--ink); font-weight: 450; }
.slash { color: var(--line-strong); }
.topbar-actions { display: flex; align-items: center; gap: 18px; font-size: 12px; }
.role-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; color: var(--muted); border: 1px solid var(--line); }
.workspace { margin-left: var(--sidebar-width); }
main { max-width: 1280px; margin: auto; padding: 40px 40px 64px; min-height: calc(100vh - 124px); }
main:focus { outline: none; }
footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); border-top: 1px solid var(--line); margin: 0 40px; padding: 18px 0; font-size: 11px; }
footer a { color: var(--muted); }
.mobile-menu { display: none !important; }
.mobile-nav-close { display: none; }
.sidebar-shade { display: none; }
.hero { margin-bottom: 32px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-bottom: 10px; }
.lead { color: var(--muted); max-width: 650px; font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.page-heading > .hero { flex: 1; }
.page-heading > .button { margin-top: 26px; flex-shrink: 0; }
section[id] { scroll-margin-top: 80px; }
.section { margin-top: 34px; scroll-margin-top: 80px; }
.section-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 28px 0 14px; }
.section-heading h2 { margin: 0; }
.section-heading > span { font-size: 11px; color: var(--muted); }
.crumb { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: 16px; }
.grid > .pager,.grid > .empty { grid-column: 1 / -1; }
.card,.panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; min-width: 0; }
.card { transition: border-color .16s, background .16s; }
.card:hover { border-color: var(--line-strong); }
.grid > .card { margin-bottom: 0; }
.card > p { color: var(--muted); font-size: 13px; }
.card p:last-child { margin-bottom: 0; }
.card > .title { display: inline-block; color: var(--ink); font-size: 15px; font-weight: 570; line-height: 1.5; margin-bottom: 8px; }
.card > .title:hover,.request-title:hover { color: var(--green); }
.project-card { position: relative; min-height: 200px; display: flex; align-items: flex-start; flex-direction: column; }
.project-card .project-icon { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); color: var(--green); display: grid; place-items: center; margin-bottom: 18px; }
.project-card > p { flex: 1; max-width: 450px; }
.project-card > a:last-child { font-size: 12px; color: var(--muted); padding-top: 8px; width: 100%; }
.project-card > a:last-child:hover { color: var(--green); }
.project-card:has(a:hover) { border-color: var(--line-strong); background: var(--raised); }
.panel h2 { padding-bottom: 16px; margin: -2px 0 20px; border-bottom: 1px solid var(--line); }
.panel .panel { box-shadow: none; }
.panel > :last-child { margin-bottom: 0; }
.content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.request-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.request-row { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-bottom: 1px solid var(--line); transition: background .15s; }
.request-row:last-of-type { border-bottom: 0; }
.request-row:hover { background: var(--raised); }
.vote-count { display: flex; flex: 0 0 44px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: 6px; min-height: 52px; font-size: 13px; color: var(--ink); background: var(--bg); }
.vote-count .icon { width: 13px; height: 13px; color: var(--muted); }
.request-copy { min-width: 0; flex: 1; }
.request-title { font-size: 15px; font-weight: 550; color: var(--ink); }
.request-copy > p { margin: 7px 0 14px; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.request-row > .pill { margin-top: 2px; flex-shrink: 0; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 11px; margin: 10px 0 16px; }
.request-copy .meta { margin: 0; }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.pill { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--raised); border: 1px solid var(--line); border-radius: 5px; font-size: 10px; padding: 3px 7px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.pending { color: var(--amber); }
.pill.rejected,.pill.failed,.pill.revoked,.pill.Revoked { color: var(--red); }
.pill.planned { color: var(--blue); }
.pill.in_progress { color: #bb9cf4; }
:root[data-theme="light"] .pill.in_progress { color: #7448ac; }
.pill.shipped,.pill.accepted,.pill.delivered,.pill.succeeded,.pill.active { color: var(--green); }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.7; }
.empty { border: 1px solid var(--line); background: var(--surface); padding: 48px 24px; border-radius: var(--radius); text-align: center; color: var(--muted); font-size: 13px; }
.empty .icon { display: block; width: 28px; height: 28px; margin: 0 auto 14px; opacity: .6; }
.request-list > .empty { border: 0; }
.loading { color: var(--muted); padding: 28px 0; font-size: 13px; }
.loading::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; margin-right: 10px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button,.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: 1px solid color-mix(in srgb,var(--green),#fff 8%); background: var(--green); color: var(--green-ink); border-radius: 7px; padding: 8px 13px; font-size: 12px; font-weight: 580; line-height: 1.5; cursor: pointer; transition: background var(--motion), border-color var(--motion), box-shadow var(--motion), transform var(--motion) var(--ease); text-decoration: none; }
button:hover,.button:hover { background: var(--green-hover); color: var(--green-ink); }
button:active,.button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
button .icon,.button .icon { width: 15px; height: 15px; }
.secondary,.quiet-button,.icon-button { color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); }
.secondary:hover { background: var(--hover); border-color: var(--muted); color: var(--ink); }
.quiet-button { display: inline-flex; border-color: transparent; background: transparent; padding: 6px 8px; font-size: 12px; }
.quiet-button:hover,.icon-button:hover { background: var(--raised); color: var(--ink); }
.icon-button { padding: 7px; min-width: 34px; }
.danger { color: var(--red); border-color: var(--line-strong); background: var(--surface); }
.danger:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 18px; }
input,textarea,select { min-height: 40px; display: block; width: 100%; margin-top: 7px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); padding: 10px 12px; font-size: 13px; box-shadow: 0 1px 2px #0000000a; }
input:hover,textarea:hover,select:hover { border-color: var(--muted); }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus,textarea:focus,select:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
textarea { min-height: 116px; resize: vertical; line-height: 1.65; }
input[readonly] { color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 450; margin-bottom: 12px; }
.check input { min-height: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); flex-shrink: 0; }
form > button[type=submit] { margin-top: 3px; }
form .error:empty { display: none; }
.error { color: var(--red); font-size: 12px; overflow-wrap: anywhere; }
.error:not(:empty) { padding: 12px; border: 1px solid var(--red); border-radius: 6px; background: var(--red-soft); }
.narrow { max-width: 432px; margin: clamp(20px,6vh,64px) auto; }
.narrow > .hero { text-align: center; }
.narrow > .hint,.narrow > a { display: block; text-align: center; font-size: 12px; }
.narrow form > button { width: 100%; }
.narrow .panel { padding: 28px; }
.split { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
.split > aside { padding-top: 6px; }
.split > aside .panel { padding: 20px; }
.split > aside .panel h2 { font-size: 14px; }
.split > aside .panel button,.split > aside .panel .button { width: 100%; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 24px 0 16px; }
.toolbar h2 { margin: 0; }
.filters { display: flex; align-items: end; gap: 10px; }
.filters label { margin: 0; font-size: 10px; color: var(--muted); }
.filters select { font-size: 11px; min-height: 32px; padding: 6px 28px 6px 10px; background: var(--surface); margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 0 0; }
.pager .hint { margin-right: auto; font-size: 11px; }
.request-list > .pager { border-top: 1px solid var(--line); padding: 14px 24px; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 32px; }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 22px; font-size: 12px; color: var(--muted); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.stat-top .icon { width: 16px; color: var(--muted); }
.stat strong { display: block; font-size: 30px; font-weight: 500; letter-spacing: -1px; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }
.stat small { font-size: 11px; }
.stat-accent { color: var(--green); }
.shortcut { background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.shortcut strong { font-size: 15px; letter-spacing: -.15px; margin: 14px 0 7px; }
.shortcut > .icon { color: var(--green); }
.shortcut a { color: var(--ink); }
.moderation-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px; padding: 20px 24px; }
.moderation-card .title { margin: 0; font-size: 14px; }
.moderation-card .meta { margin: 6px 0 0; }
.moderation-card .content { font-size: 12px; margin: 10px 0 0; color: var(--muted); }
.moderation-card .actions { grid-column: 2; grid-row: 1 / 4; margin: 0; }
details { margin: 16px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 0 18px; }
summary { cursor: pointer; font-size: 12px; font-weight: 500; padding: 14px 0; color: var(--ink); }
summary::marker { color: var(--muted); }
details[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
details > form { padding-bottom: 20px; }
details > .panel { padding: 0 0 18px; border: none; margin: 0; }
.form-disclosure { max-width: 820px; }
.compose-details { margin: 0 0 24px; border-color: color-mix(in srgb,var(--green),var(--line) 70%); }
.compose-details > summary { color: var(--green); }
.row { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.row:last-child { border-bottom: 0; }
.row .hint { margin: 6px 0 12px; }
.row details { margin-bottom: 0; }
pre { white-space: pre-wrap; word-break: break-word; border: 1px solid var(--line); border-radius: 6px; padding: 16px; background: var(--bg); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; line-height: 1.75; }
.secret { border: 1px solid var(--green); background: var(--green-soft); padding: 20px; border-radius: 8px; margin: 20px 0; }
.secret button { margin-right: 8px; }
.settings-tabs { display: flex; overflow-x: auto; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.settings-tabs button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 12px 0; white-space: nowrap; }
.settings-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--green); }
.settings-view[hidden] { display: none; }
.settings-view > .panel,.settings-page > .panel { max-width: 820px; }
#notice { display: none; position: fixed; z-index: 100; bottom: 24px; right: 24px; max-width: min(420px,calc(100vw - 32px)); color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-left: 3px solid var(--green); border-radius: 7px; box-shadow: var(--shadow); padding: 14px 20px; font-size: 13px; }
@media (min-width:1500px) { main { padding-top: 44px; } }
@media (max-width:1100px) { :root { --sidebar-width: 208px; } main { padding: 30px 26px 48px; } .topbar { padding: 0 26px; } .split { grid-template-columns: minmax(0,1fr) 260px; gap: 20px; } .request-row > .pill { display: none; } .request-copy .mobile-status { display: inline-flex; } .stats { gap: 12px; } }
@media (min-width:1101px) { .request-copy .mobile-status { display: none; } }
@media (max-width:800px) {
  :root { --sidebar-width: 0px; }
  .sidebar { width: 256px; display: none; }
  .nav-open .sidebar { display: flex; animation: drawer-in .22s var(--ease); }
  .nav-open { overflow: hidden; }
  .mobile-nav-close { display: inline-flex; position: absolute; right: 8px; top: 14px; min-width: 28px; min-height: 28px; padding: 5px; }
  .sidebar .brand { font-size: 17px; padding-left: 8px; }
  .sidebar .brandmark .icon { width: 20px; }
  .sidebar-shade:not([hidden]) { display: block; position: fixed; inset: 0; background: #0009; border: 0; border-radius: 0; z-index: 25; }
  .mobile-menu { display: inline-flex !important; background: transparent; border: 0; padding: 4px; }
  .topbar { padding: 0 20px; gap: 12px; }
  .topbar-crumb { margin-right: auto; gap: 9px; }
  .topbar-crumb > span:first-child,.topbar-crumb .slash,.role-tag { display: none; }
  .topbar-actions { gap: 8px; }
  main { padding: 28px 22px 40px; }
  footer { margin: 0 22px; }
  .split { grid-template-columns: 1fr; }
  .split > aside { padding-top: 0; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats .shortcut { display: none; }
}
@media (max-width:520px) {
  main { padding: 24px 18px 36px; }
  h1 { font-size: 25px; }
  .hero { margin-bottom: 24px; }
  .page-heading { display: block; }
  .page-heading > .button { margin: -6px 0 24px; }
  .card,.panel { padding: 18px; }
  .request-row { padding: 18px 15px; gap: 13px; }
  .request-title { font-size: 13px; }
  .request-copy .meta { gap: 7px; }
  .vote-count { flex-basis: 38px; min-height: 48px; }
  .toolbar { display: block; }
  .toolbar h2 { margin-bottom: 12px; }
  .filters { gap: 8px; }
  .filters label { flex: 1; }
  .filters select { width: 100%; }
  .stat { padding: 16px; }
  .stat strong { font-size: 28px; }
  .moderation-card { display: block; }
  .moderation-card .actions { margin-top: 16px; }
  .narrow { margin: 20px auto; }
  .narrow .panel { padding: 20px; }
  footer { margin: 0 18px; font-size: 10px; }
  input,textarea,select { font-size: 16px; }
  .filters select { font-size: 12px; }
  .settings-tabs { gap: 20px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition:none !important; scroll-behavior:auto !important; } }

.history-row { padding: 14px 0 14px 22px; position: relative; }
.history-row::before { content:''; position:absolute; width:6px; height:6px; border:1px solid var(--muted); border-radius:50%; left:0; top:21px; }
.history-row > strong { text-transform:capitalize; font-size:12px; }
.history-row > .hint { margin:4px 0; font-size:11px; }
.ip-address { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; overflow-wrap:anywhere; }
.metadata-list { margin:0; font-size:12px; }
.metadata-list > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.metadata-list > div:last-child { border-bottom:0; }
.metadata-list dt { color:var(--muted); flex-shrink:0; }
.metadata-list dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.account-activity-filter { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.account-activity-filter .hint { margin:0; }
.activity-table-wrap { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }
.activity-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:12px; }
.activity-table th { text-align:left; padding:13px 20px; font-size:11px; color:var(--muted); font-weight:500; border-bottom:1px solid var(--line); background:var(--raised); }
.activity-table th:first-child { width:31%; }
.activity-table th:nth-child(2) { width:22%; }
.activity-table th:nth-child(3) { width:23%; }
.activity-table td { padding:17px 20px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; line-height:1.6; }
.activity-table tr:last-child td { border-bottom:0; }
.activity-account { color:var(--ink); font-weight:550; }
.activity-account:hover { color:var(--green); }
.activity-secondary { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
@media(max-width:720px) {
  .activity-table,.activity-table tbody,.activity-table tr,.activity-table td { display:block; width:100%; }
  .activity-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .activity-table tr { padding:14px 18px; border-bottom:1px solid var(--line); }
  .activity-table tr:last-child { border-bottom:0; }
  .activity-table td { padding:5px 0 5px 104px; border:0; position:relative; min-height:29px; }
  .activity-table td::before { content:attr(data-label); position:absolute; left:0; top:5px; color:var(--muted); font-size:11px; }
}
@media(max-width:800px) {
  .request-layout { display:flex; flex-direction:column; gap:0; }
  .request-main { display:contents; }
  .request-main > * { order:5; }
  .request-main > .hero { order:1; }
  .request-main > .meta { order:2; margin-top:0; }
  .request-main > .request-description { order:3; }
  .request-layout > aside { order:4; margin:0 0 16px; }
}

@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.website-chat-install,.website-chat-response { border-top:1px solid var(--line); margin-top:26px; padding-top:22px; }
.website-chat-install h3,.website-chat-response h3 { font-size:14px; font-weight:550; margin:0; }
.website-chat-install .section-heading { margin-bottom:12px; flex-wrap:wrap; }
.website-chat-install pre { overflow-wrap:anywhere; }
.website-chat-response { margin-bottom:24px; }

/* The notification inbox is shared by every administrator on this installation. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.notification-center { position:relative; display:flex; }
.notification-bell { position:relative; border-color:transparent; background:transparent; color:var(--muted); width:36px; height:36px; }
.notification-bell .icon { width:19px; height:19px; }
.notification-bell[aria-expanded=true] { color:var(--green); background:var(--green-soft); }
.notification-badge { position:absolute; top:-3px; right:-5px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border:2px solid var(--bg); border-radius:9px; font-size:9px; font-weight:650; line-height:1; color:var(--green-ink); background:var(--green); }
.notification-badge[hidden],.notification-popover[hidden],.notification-message[hidden],.notification-pager[hidden] { display:none; }
.notification-popover { position:fixed; top:64px; right:24px; width:420px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 78px); display:flex; flex-direction:column; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 18px 64px #0005,0 2px 8px #0002; overflow:hidden; text-align:left; }
.notification-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 20px 16px; }
.notification-heading h2 { margin:0 0 4px; font-size:16px; letter-spacing:-.3px; }
.notification-heading p { margin:0; color:var(--muted); font-size:11px; }
.notification-close { padding:5px; width:28px; min-width:28px; min-height:28px; background:transparent; border-color:transparent; color:var(--muted); margin:-4px -5px 0 0; }
.notification-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 15px 12px 20px; border-bottom:1px solid var(--line); }
.notification-filters { display:flex; gap:3px; }
.notification-filters button { min-height:28px; padding:4px 10px; border-color:transparent; background:transparent; color:var(--muted); font-size:11px; }
.notification-filters button[aria-pressed=true] { background:var(--raised); border-color:var(--line); color:var(--ink); }
.notification-filters button:hover { color:var(--ink); background:var(--hover); }
.notification-mark-all { min-height:28px; padding:4px 6px; font-size:11px; color:var(--green); }
.notification-mark-all:disabled { color:var(--muted); cursor:default; }
.notification-message { flex-shrink:0; margin:0; padding:12px 20px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.notification-message.is-error { color:var(--red); background:var(--red-soft); }
.notification-list { list-style:none; padding:0; margin:0; overflow-y:auto; overscroll-behavior:contain; min-height:0; max-height:min(480px,calc(100dvh - 250px)); }
.notification-item { display:flex; align-items:flex-start; gap:12px; padding:17px 15px 17px 20px; border-bottom:1px solid var(--line); }
.notification-item:last-child { border-bottom:0; }
.notification-item.is-unread { background:color-mix(in srgb,var(--green-soft),var(--surface) 79%); }
.notification-symbol { display:grid; place-items:center; flex:0 0 32px; height:32px; border:1px solid var(--line); background:var(--raised); border-radius:8px; color:var(--muted); margin-top:1px; }
.notification-symbol .icon { width:16px; height:16px; }
.notification-item.is-unread .notification-symbol { color:var(--green); border-color:color-mix(in srgb,var(--green),var(--line) 78%); background:var(--green-soft); }
.notification-copy { min-width:0; flex:1; }
.notification-title { display:block; font-size:12px; color:var(--ink); line-height:1.55; overflow-wrap:anywhere; font-weight:450; }
.notification-item.is-unread .notification-title { font-weight:580; }
a.notification-title:hover { color:var(--green); }
.notification-meta { display:flex; flex-direction:column; gap:2px; color:var(--muted); font-size:10px; margin-top:5px; overflow-wrap:anywhere; }
.notification-meta time { opacity:.8; }
.notification-read { flex:0 0 28px; min-width:28px; min-height:28px; padding:6px; margin:-2px -4px 0 0; border:1px solid transparent; background:transparent; color:var(--muted); border-radius:50%; }
.notification-read .icon { width:13px; height:13px; }
.notification-read:hover { color:var(--green); background:var(--raised); border-color:var(--line); }
.notification-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.notification-unavailable { display:block; color:var(--muted); font-size:10px; margin-top:6px; font-style:italic; }
.notification-empty { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:40px 32px; color:var(--muted); }
.notification-empty > .icon { width:25px; height:25px; color:var(--green); margin-bottom:5px; }
.notification-empty strong { color:var(--ink); font-size:13px; font-weight:550; }
.notification-empty span { max-width:250px; font-size:12px; line-height:1.7; }
.notification-empty button { margin-top:5px; }
.notification-loading { padding:40px 20px; text-align:center; color:var(--muted); font-size:12px; }
.notification-pager { display:flex; flex-shrink:0; align-items:center; gap:7px; padding:9px 14px 9px 20px; border-top:1px solid var(--line); }
.notification-pager > span { color:var(--muted); margin-right:auto; font-size:11px; }
.notification-pager button { font-size:11px; min-height:28px; }
:root[data-theme=light] .notification-popover { box-shadow:0 18px 64px #00000014,0 2px 8px #0000000a; }
@media(max-width:800px) {
  .notification-popover { position:fixed; top:64px; right:12px; }
}
@media(max-width:520px) {
  .notification-popover { width:calc(100vw - 24px); }
  .notification-heading { padding:20px 18px 13px; }
  .notification-toolbar { padding-left:18px; }
  .notification-close { width:36px; height:36px; margin-top:-7px; }
  .notification-read { flex-basis:36px; min-height:36px; margin-top:-5px; }
  .notification-item { padding-left:18px; gap:10px; }
  .notification-title { font-size:13px; }
  .notification-filters button,.notification-mark-all { min-height:34px; }
}

.business-hours{margin:28px 0;padding:24px 0;border-top:1px solid var(--line);scroll-margin-top:24px}.business-hours h3{margin:0 0 10px}.business-hours form{margin:20px 0 16px}.hours-controls{padding:0;border:0;min-width:0}.hours-days{display:grid;gap:0;margin:20px 0}.hours-day{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.hours-day>strong{padding-top:10px}.hours-ranges{display:grid;gap:10px}.hours-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hours-range input{width:110px;min-width:0}.hours-day button{white-space:nowrap}.hours-inherited{padding:16px 20px;margin:16px 0;border:1px solid var(--line);border-radius:12px}.hours-inherited p{margin:6px 0}.hours-controls[hidden],.hours-inherited[hidden]{display:none}@media(max-width:600px){.hours-day{grid-template-columns:1fr auto}.hours-day>strong{grid-column:1}.hours-day>.hours-ranges{grid-row:2;grid-column:1/-1}.hours-day>button{grid-column:2;grid-row:1}.business-hours{padding-top:20px}.hours-range input{width:100px}}

.archive-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.archive-dialog { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.archive-dialog::backdrop { background: #0008; }
.archive-dialog .actions { justify-content: flex-end; margin-top: 24px; }

.archive-history-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.board-settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.board-settings-row > .actions { margin-left: auto; }
.board-settings-row > details { flex-basis: 100%; }

/* Quiet motion and readable controls are shared by every workspace surface. */
.brandmark img { display: block; width: 28px; height: 32px; object-fit: contain; }
.brand:hover .brandmark { transform: rotate(-5deg); }
.brandmark { transition: transform 220ms var(--ease); }
.sidebar-bottom,.workspace-label { flex-shrink: 0; }
.side-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-bottom: 6px; }
.topbar-crumb { min-width: 0; }
.topbar-crumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex-shrink: 0; }
.nav-item { transition: color var(--motion), background var(--motion), border-color var(--motion); }
.nav-item.active { position: relative; }
.nav-item.active::before { content: ''; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--green); }
input,textarea,select { transition: border-color var(--motion), box-shadow var(--motion), background var(--motion); }
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true] { border-color: var(--red); }
input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus,select[aria-invalid=true]:focus { box-shadow: 0 0 0 3px var(--red-soft); }
.field-error { display: block; font-size: 12px; font-weight: 450; color: var(--red); margin-top: 7px; line-height: 1.5; }
button[aria-busy=true]::before { content: ''; flex: 0 0 12px; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.card .title,.request-title,.hero h1 { overflow-wrap: anywhere; }
.project-card .project-icon { width: 40px; height: 40px; border-radius: 10px; }
.project-card > a:last-child { display: flex; align-items: center; min-height: 36px; border-top: 1px solid var(--line); margin-top: 18px; }
.project-card .title { font-size: 16px; }
.request-row { transition: background var(--motion); }
.vote-count { transition: color var(--motion), border-color var(--motion), background var(--motion); }
.vote-count:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.empty > .icon { width: 40px; height: 40px; padding: 9px; color: var(--green); background: var(--green-soft); border-radius: 11px; opacity: 1; }
.empty > span { display: block; max-width: 460px; margin: auto; }
.panel > h2 { letter-spacing: -.3px; }
.settings-tabs { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.settings-tabs button:hover { color: var(--ink); }
.footer-brand { color: var(--ink); font-weight: 550; }
.footer-brand span { color: var(--muted); font-weight: 400; }
#notice { padding: 14px 48px 14px 42px; border-left-width: 1px; border-radius: 11px; animation: notice-in 220ms var(--ease); }
#notice > .icon { position: absolute; left: 15px; top: 16px; color: var(--green); width: 16px; height: 16px; }
#notice.is-error > .icon { color: var(--red); }
#notice.is-error { border-color: color-mix(in srgb,var(--red),var(--line) 50%); }
#notice .notice-dismiss { position: absolute; top: 6px; right: 6px; min-height: 34px; width: 34px; padding: 6px; color: var(--muted); background: transparent; border-color: transparent; }
#notice .notice-dismiss:hover { color: var(--ink); background: var(--hover); }
.notification-popover:not([hidden]) { animation: notice-in 180ms var(--ease); transform-origin: top right; }
.notification-loading { padding: 8px 20px; }
.notification-loading .skeleton-item { border: 0; padding: 16px 0; }
.notification-loading .skeleton-symbol { width: 30px; height: 30px; }
.skeleton-set { width: 100%; min-width: 0; grid-column: 1/-1; }
.skeleton-item { display: flex; align-items: center; gap: 18px; padding: 26px 24px; min-height: 100px; border-bottom: 1px solid var(--line); }
.skeleton-item:last-child { border-bottom: 0; }
.skeleton-copy { flex: 1; min-width: 0; }
.skeleton-block { display: block; background: var(--raised); border-radius: 5px; animation: skeleton-breathe 1.8s ease-in-out infinite; }
.skeleton-symbol { width: 38px; height: 42px; flex-shrink: 0; border-radius: 8px; }
.skeleton-line { width: 65%; height: 12px; }
.skeleton-line.is-short { width: 42%; height: 9px; margin-top: 13px; }
.skeleton-item:nth-child(odd) .skeleton-line { width: 78%; }
.skeleton-item:nth-child(odd) .skeleton-line.is-short { width: 53%; }
.skeleton-heading { margin: 6px 0 38px; }
.skeleton-heading .skeleton-line { width: 34%; height: 30px; }
.skeleton-heading .skeleton-line.is-short { width: 60%; height: 12px; margin-top: 18px; }
.skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: 16px; }
.skeleton-cards .skeleton-item { display: block; padding: 24px; min-height: 224px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.skeleton-cards .skeleton-symbol { margin-bottom: 24px; }
.skeleton-page .skeleton-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
@keyframes skeleton-breathe { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes notice-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (hover:hover) {
  .project-card { transition: border-color var(--motion), background var(--motion), transform 220ms var(--ease); }
  .project-card:hover { transform: translateY(-2px); }
}
@media (pointer:coarse) {
  button,.button,.icon-button,.quiet-button,.nav-item { min-height: 44px; }
  .icon-button,.mobile-nav-close,.notification-read { min-width: 44px; }
  .check { min-height: 32px; align-items: center; }
  .settings-tabs button { min-height: 48px; }
}
@media (max-width:520px) {
  .brand { height: 70px; }
  .topbar { padding: 0 14px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions > a { padding-left: 9px; padding-right: 9px; font-size: 11px; }
  .request-title { font-size: 14px; }
  .request-copy > p { font-size: 12px; }
  footer { flex-wrap: wrap; row-gap: 8px; }
  .skeleton-item { padding: 22px 16px; gap: 14px; }
  #notice { bottom: 16px; right: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .skeleton-block { animation: none; opacity: .7; }
  .project-card:hover,.brand:hover .brandmark,button:active,.button:active { transform: none; }
}

/* Public feedback and participant accounts have no installation directory. */
.participant-surface .workspace,.participant-surface .topbar {margin-left:0;}
.participant-surface main {max-width:1160px;margin-inline:auto;}
.participant-surface .topbar .brand {padding:0;display:flex;align-items:center;gap:10px;}
@media(max-width:600px){.participant-surface .topbar{padding-inline:16px;}.participant-surface .topbar-actions{gap:10px;}.participant-surface .role-tag{display:none;}}

@media(max-width:600px){.participant-surface .topbar{height:auto;min-height:64px;flex-wrap:wrap;padding-block:12px;}.participant-surface .topbar-actions{flex-wrap:wrap;}}