/* Pecky portal: Vaqueiro's warm surfaces, Pecky's blue accent. */
:root {
  --ink:var(--rd-ink);
  --ink-2:#4a4842;
  --ink-3:#747169;
  --paper:var(--rd-paper);
  --paper-2:var(--rd-paper2);
  --white:var(--rd-white);
  --border:var(--rd-border);
  --blue:var(--rd-blue);
  --blue-dark:#0058bd;
  --blue-tint:#e8f1ff;
  --danger:var(--rd-danger);
  --shadow:0 8px 24px rgba(14,13,11,.05);
  --display:"DM Serif Display",Georgia,serif;
  --body:"DM Sans",system-ui,sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.5 var(--body);
}
a {
  color:var(--blue-dark);
  text-underline-offset:3px;
}
button,input,textarea,select {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.42;
  cursor:default;
}
input,select,textarea {
  min-width:0;
  max-width:100%;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}
textarea {
  width:100%;
  resize:vertical;
}
input[type=checkbox],input[type=radio] {
  width:16px;
  height:16px;
  accent-color:var(--blue);
  margin:0;
  flex-shrink:0;
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px;
}
input:focus,textarea:focus,select:focus {
  border-color:var(--blue);
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  overflow-wrap:anywhere;
}
h1,h2 {
  font-family:var(--display);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.03em;
}
h1 {
  font-size:clamp(32px,4vw,46px);
  margin:5px 0 12px;
}
h2 {
  font-size:29px;
  margin:0 0 12px;
}
h3 {
  font-size:16px;
  margin:0 0 8px;
}
p {
  margin:0 0 12px;
}
small,.small-text {
  font-size:12px;
}
.icon {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.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;
}
.skip {
  position:fixed;
  left:20px;
  top:-80px;
  z-index:100;
  padding:10px;
  background:var(--white);
}
.skip:focus {
  top:12px;
}
.topbar {
  min-height:68px;
  padding:12px max(24px,calc((100vw - 1260px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border);
  background:var(--paper);
}
.brand img {
  width:172px;
  height:auto;
  display:block;
}
.topbar nav,.account,.actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar nav {
  gap:18px;
}
.topbar nav form {
  margin:0;
}
.nav-pill {
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  background:var(--paper-2);
  border-radius:30px;
  padding:7px 15px;
}
.account {
  color:var(--ink-2);
  font-size:12px;
  gap:8px;
}
.container {
  width:min(calc(100% - 48px),1260px);
  margin:32px auto 64px;
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:30px 0;
}
.page-heading p {
  color:var(--ink-2);
  margin-bottom:0;
}
.page-heading.compact {
  margin:24px 0 18px;
}
.page-heading.compact h2 {
  margin-bottom:0;
}
.eyebrow {
  font-size:10px!important;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-dark)!important;
  margin:0 0 8px!important;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:10px 17px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
}
.button:hover {
  background:var(--paper-2);
}
.button.primary {
  color:white;
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:0 4px 14px rgba(14,13,11,.1);
}
.button.primary:hover {
  background:#30302e;
}
.button.danger {
  color:white;
  background:var(--danger);
  border-color:var(--danger);
}
.button.small {
  min-height:36px;
  padding:8px 13px;
  font-size:12px;
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:9px;
  min-width:36px;
  height:36px;
  padding:8px;
  color:var(--ink-2);
  text-decoration:none;
}
.icon-button:hover {
  background:var(--paper-2);
  color:var(--ink);
}
.icon-button.bordered {
  border:1px solid var(--border);
  background:var(--white);
  height:42px;
  width:42px;
}
.danger-text {
  color:var(--danger);
}
.link-button {
  background:none;
  border:0;
  color:var(--blue-dark);
}
.muted {
  color:var(--ink-3);
}
.flex-fill {
  flex:1;
  min-width:0;
}
.section {
  margin:26px 0;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.section-heading h3,.section-heading h2,.section-heading p {
  margin:0;
}
.section-heading a {
  font-size:12px;
  text-decoration:none;
}
.heading-count {
  font:500 13px var(--body);
  color:var(--ink-3);
  vertical-align:middle;
  margin-left:6px;
}
.panel,.empty {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:15px;
  padding:22px;
}
.empty {
  text-align:center;
  grid-column:1/-1;
  padding:48px 20px;
}
.empty p,.empty-inline {
  color:var(--ink-3);
}
.empty-icon {
  display:inline-flex;
  padding:14px;
  border-radius:18px;
  background:var(--blue-tint);
  color:var(--blue-dark);
  margin-bottom:16px;
}
.empty-icon .icon {
  width:26px;
  height:26px;
}
.empty-inline {
  padding:22px 0;
}
.search-field {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  border:1px solid var(--border);
  border-radius:24px;
  padding:0 12px;
  background:var(--white);
}
.search-field .icon {
  color:var(--ink-3);
  width:17px;
}
.search-field input {
  background:transparent;
  border:0;
  padding:10px 2px;
  width:100%;
}
.project-search {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:18px;
}
.project-search .search-field {
  flex:1;
}
.segmented {
  display:flex;
  border-radius:30px;
  background:var(--paper-2);
  padding:3px;
  gap:2px;
}
.segmented label {
  border-radius:30px;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
}
.segmented input {
  position:absolute;
  opacity:0;
  width:0;
}
.segmented label:has(input:checked) {
  background:var(--ink);
  color:white;
}
.segmented label:has(input:focus-visible) {
  outline:3px solid var(--blue);
}
.check-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.project-card {
  position:relative;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--white);
  transition:box-shadow .15s,transform .15s;
}
.project-card:hover {
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.card-cover {
  display:block;
  position:relative;
  aspect-ratio:16/6;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  background:#123664;
}
.cover-image {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cover-placeholder {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#071e3b,#154c85);
  color:#7db5fa;
  overflow:hidden;
}
.cover-placeholder span {
  position:absolute;
  right:20px;
  bottom:0;
  font:100px/1 var(--display);
  opacity:.2;
}
.cover-placeholder svg {
  position:absolute;
  width:100%;
  height:100%;
  opacity:.4;
}
.project-card-body {
  padding:17px 19px 19px;
}
.project-card .section-heading {
  margin-bottom:4px;
}
.project-card h2 {
  font-size:24px;
  margin:0 0 8px;
}
.project-card h2 a {
  color:var(--ink);
  text-decoration:none;
}
.card-description {
  color:var(--ink-2);
  font-size:13px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:39px;
}
.project-counts {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  font-size:11px;
  margin:16px 0 10px;
}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:6px;
  background:#9ba2ac;
}
.dot.progress {
  background:#d69419;
}
.dot.completed {
  background:#20875a;
}
.pill {
  display:inline-flex;
  align-items:center;
  border-radius:24px;
  padding:4px 10px;
  font-size:11px;
  white-space:nowrap;
  background:#eef0f3;
  color:#4a5260;
}
.role-pill {
  background:var(--paper-2);
  color:var(--ink-2);
}
.status-pending {
  background:#edf0f4;
  color:#4a5260;
}
.status-in_progress {
  background:#fff0d3;
  color:#805200;
}
.status-completed {
  background:#e2f5e9;
  color:#176639;
}
.action-menu {
  position:relative;
}
.action-menu summary {
  list-style:none;
}
.action-menu summary::-webkit-details-marker {
  display:none;
}
.menu-content {
  position:absolute;
  right:0;
  top:40px;
  min-width:180px;
  z-index:20;
  background:var(--white);
  box-shadow:0 12px 35px #0002;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
}
.menu-content a {
  display:block;
  padding:9px;
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  border-radius:7px;
}
.menu-content a:hover {
  background:var(--paper-2);
}
.invitation-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  margin-bottom:18px;
  background:var(--blue-tint);
  border:1px solid #c6dcfa;
  border-radius:12px;
}
.invitation-banner>span {
  display:flex;
  align-items:center;
  gap:8px;
}
.project-breadcrumb {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.back {
  text-decoration:none;
  color:var(--ink-2);
  font-size:12px;
}
.project-switch select {
  padding:6px 10px;
  max-width:240px;
  background:transparent;
  font-size:12px;
}
.project-hero {
  position:relative;
  min-height:215px;
  border-radius:16px;
  background:#08192d;
  overflow:hidden;
}
.project-hero>.cover-image {
  position:absolute;
  inset:0;
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.2));
}
.hero-content {
  position:relative;
  z-index:1;
  color:white;
  padding:28px 36px;
  max-width:780px;
}
.hero-content h1 {
  font-size:clamp(30px,3.5vw,45px);
  color:#fff;
  margin:5px 0 8px;
}
.hero-content>p:not(.eyebrow) {
  color:#eee;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
}
.hero-content .eyebrow {
  color:#9fcaff!important;
}
.hero-meta {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
}
.hero-meta a {
  color:#fff;
  font-size:12px;
}
.hero-settings {
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  color:white;
  border:1px solid #ffffff55;
}
.hero-settings:hover {
  background:#ffffff22;
  color:white;
}
.project-tabs {
  display:flex;
  align-items:center;
  padding:4px;
  gap:4px;
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:30px;
  margin:18px 0 24px;
  position:sticky;
  top:8px;
  z-index:10;
  width:fit-content;
}
.project-tabs a {
  text-decoration:none;
  color:var(--ink-2);
  border-radius:30px;
  padding:8px 22px;
  font-size:12px;
}
.project-tabs a[aria-current] {
  background:var(--ink);
  color:white;
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  background:var(--white);
  border-radius:14px;
  padding:18px 22px;
  text-decoration:none;
  color:var(--ink);
}
.stat-card strong {
  font-size:34px;
  letter-spacing:-.03em;
  font-weight:500;
  margin:4px 0;
}
.stat-card span {
  font-size:12px;
}
.stat-card small {
  color:var(--ink-3);
}
.summary-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:20px;
}
.summary-grid>.panel {
  min-width:0;
}
.recent-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--border);
  text-decoration:none;
  color:var(--ink);
}
.recent-row p {
  font-size:13px;
  margin:0 0 5px;
}
.recent-row .row-thumb {
  width:46px;
  height:46px;
}
.line-clamp {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.activity-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-top:1px solid var(--border);
  padding:12px 0;
  font-size:12px;
}
.activity-row p {
  margin:3px 0;
  color:var(--ink-2);
}
.review-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--border);
  padding:12px 0;
}
.review-row a {
  color:var(--ink);
  text-decoration:none;
}
.review-row small,.member small,.invitation-row small {
  display:block;
  color:var(--ink-3);
  margin-top:3px;
}
.member {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.member:first-child {
  border-top:0;
}
.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:var(--blue-tint);
  border:1px solid #cddff6;
  color:var(--blue-dark);
  border-radius:50%;
  font-size:12px;
  flex-shrink:0;
}
.avatar.small {
  width:26px;
  height:26px;
  font-size:10px;
}
.feedback-filters {
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
  background:var(--white);
}
.filter-top {
  display:flex;
  gap:8px;
}
.filter-top .search-field {
  flex:1;
}
.filter-top>select {
  max-width:240px;
}
.filter-bottom {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
  font-size:12px;
}
.filter-bottom>select {
  margin-left:auto;
  font-size:12px;
  padding:6px 9px;
}
.status-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:24px;
  padding:6px 10px;
  color:var(--ink-2);
  font-size:11px;
  background:var(--paper);
}
.chip input {
  width:13px;
  height:13px;
}
.chip:has(input:checked) {
  border-color:#7fb7ff;
  background:var(--blue-tint);
  color:var(--blue-dark);
}
.extra-filters {
  flex-basis:100%;
}
.extra-filters summary {
  display:flex;
  align-items:center;
  width:fit-content;
  gap:6px;
  cursor:pointer;
}
.extra-filters summary .icon {
  width:14px;
}
.extra-filter-fields {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.extra-filter-fields label {
  display:grid;
  gap:5px;
}
.bulk-bar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-height:52px;
  padding:8px 12px;
  margin-bottom:10px;
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:10px;
}
.bulk-bar>.actions {
  margin-left:auto;
}
.bulk-bar select {
  font-size:12px;
  padding:6px 9px;
}
.feedback-list {
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--white);
}
.feedback-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.feedback-row:last-child {
  border-bottom:0;
}
.feedback-row:has(input[name=ids]:checked) {
  background:#edf4ff;
  box-shadow:inset 3px 0 var(--blue);
}
.feedback-text {
  flex:1;
  min-width:0;
}
.feedback-excerpt {
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  line-height:1.5;
  margin-bottom:6px;
}
.feedback-excerpt:hover {
  color:var(--blue-dark);
}
.row-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  color:var(--ink-3);
  font-size:10px;
}
.row-meta>span+span:before {
  content:"·";
  margin-right:7px;
}
.row-thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:8px;
  background:var(--paper-2);
  border:1px solid var(--border);
  flex-shrink:0;
}
.thumb-placeholder {
  color:#8f938f;
}
.thumbnail-button {
  position:relative;
  border:0;
  background:transparent;
  padding:0;
}
.thumb-count {
  position:absolute;
  right:-4px;
  bottom:-3px;
  background:var(--ink);
  color:white;
  border:2px solid var(--white);
  border-radius:30px;
  font-size:9px;
  min-width:18px;
  padding:1px 4px;
}
.row-end {
  display:flex;
  align-items:center;
  gap:12px;
}
.status-select {
  font-size:11px;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  width:124px;
}
.row-actions {
  gap:1px;
}
.row-actions .icon-button {
  min-width:32px;
  width:32px;
  height:32px;
  padding:7px;
}
.row-actions .icon {
  width:16px;
  height:16px;
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:20px;
  font-size:12px;
}
.settings-layout {
  display:grid;
  grid-template-columns:218px minmax(0,1fr);
  gap:32px;
}
.settings-nav {
  align-self:start;
  display:grid;
  gap:3px;
  padding:5px;
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:13px;
}
.settings-nav a {
  display:block;
  padding:13px 12px;
  text-decoration:none;
  color:var(--ink-2);
  border-radius:9px;
  border:1px solid transparent;
  font-size:12px;
}
.settings-nav a[aria-current] {
  background:var(--blue-tint);
  border-color:#a5c9f8;
  color:var(--ink);
}
.settings-nav small {
  display:block;
  font-size:10px;
  color:var(--ink-3);
  margin-top:4px;
}
.settings-content {
  min-width:0;
}
.settings-content>.form-stack {
  margin-top:18px;
}
.settings-content .panel {
  box-shadow:none;
}
.member-list .member {
  flex-wrap:wrap;
}
.member-list .member .actions {
  gap:4px;
}
.member-list .member select {
  padding:7px;
  font-size:12px;
  max-width:145px;
}
.invite-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) 165px auto;
  gap:14px;
  align-items:end;
}
.invite-form>p {
  grid-column:1/-1;
  margin:0;
}
.invite-form .button {
  align-self:end;
}
.field label {
  display:block;
  font-size:12px;
  font-weight:500;
  margin-bottom:6px;
}
.field input,.field select {
  width:100%;
}
.invitation-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.invitation-row:last-child {
  border:0;
}
.admin-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
}
.admin-card p {
  margin:0;
}
.danger-panel {
  margin-top:24px;
  border-color:#ecc7c3;
}
.danger-panel h3 {
  color:var(--danger);
}
.cover-settings-preview {
  position:relative;
  aspect-ratio:16/6;
  border-radius:14px;
  overflow:hidden;
  margin:20px 0;
  max-width:650px;
}
.narrow {
  max-width:680px;
  margin:40px auto;
}
.form-title {
  font-size:32px;
}
.form-stack {
  display:grid;
  gap:14px;
}
.form-stack p {
  margin:0;
}
.form-stack label {
  display:block;
  font-size:12px;
  font-weight:500;
  margin-bottom:6px;
}
.form-stack input:not([type=hidden]),.form-stack select {
  width:100%;
}
.form-stack input[type=checkbox] {
  width:16px;
}
.form-stack .helptext,.form-stack ul {
  font-size:11px;
  color:var(--ink-3);
}
.form-stack .button {
  justify-self:start;
}
.errorlist,.form-error {
  color:var(--danger);
  font-size:12px;
}
.errorlist {
  margin:5px 0;
  padding-left:18px;
}
.form-error:empty {
  display:none;
}
.auth-card {
  max-width:460px;
  margin:9vh auto;
  padding:32px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--white);
}
.auth-card h1 {
  font-size:32px;
}
.auth-card .form-stack {
  margin:24px 0;
}
.notices {
  width:min(calc(100% - 48px),1260px);
  margin:auto;
}
.notice {
  margin:12px 0;
  background:var(--blue-tint);
  padding:12px 16px;
  border:1px solid #c6dcfa;
  border-radius:10px;
  font-size:12px;
}
.notice.error {
  color:var(--danger);
  border-color:#ecc7c3;
  background:#fff2f0;
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  background:var(--ink);
  color:white;
  padding:10px 20px;
  border-radius:30px;
  box-shadow:0 4px 24px #0003;
  font-size:13px;
}
.toast.error {
  background:var(--danger);
}
/* Dialogs use the browser top layer, so they sit above the host page. */
dialog {
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--white);
  color:var(--ink);
  box-shadow:0 24px 100px #0003;
  padding:24px;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 32px);
}
dialog::backdrop {
  background:rgba(14,13,11,.4);
  backdrop-filter:blur(4px);
}
.modal {
  width:650px;
}
.small-modal {
  width:460px;
}
.modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.modal-head h2 {
  margin-bottom:0;
  font-size:28px;
}
.modal-footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.composer {
  padding:22px 24px 0;
}
.composer .modal-head {
  margin-bottom:16px;
}
.composer form {
  display:block;
}
.composer-scroll {
  overflow-y:auto;
  max-height:calc(100dvh - 230px);
  padding:0 4px 2px;
}
.destination {
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.destination select {
  flex:1;
}
.composer textarea[name=comment] {
  min-height:124px;
}
.evidence-editor {
  margin:16px 0;
}
.dropzone {
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:14px;
  background:var(--paper);
  border:1px dashed var(--border);
  border-radius:12px;
  cursor:pointer;
  margin:0!important;
}
.dropzone small {
  display:block;
  color:var(--ink-3);
  font-size:11px;
  font-weight:400;
  margin-top:3px;
}
.dropzone.dragging {
  border-color:var(--blue);
  background:var(--blue-tint);
}
.dropzone input {
  position:absolute;
  opacity:0;
  width:1px!important;
  height:1px;
}
.evidence-previews {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.preview-card {
  width:calc((100% - 20px)/3);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper);
}
.preview-image {
  width:100%;
  height:92px;
  object-fit:contain;
  display:block;
}
.preview-card .actions {
  justify-content:center;
  gap:0;
  padding:2px;
}
.preview-card .icon-button {
  width:30px;
  min-width:30px;
  height:30px;
  padding:6px;
}
.preview-card .icon {
  width:16px;
  height:16px;
}
.context-options {
  border-top:1px solid var(--border);
  margin:18px 0 12px;
  padding:14px 0 8px;
  font-size:12px;
}
.context-options summary {
  cursor:pointer;
  font-weight:500;
}
.context-options summary span {
  font-size:11px;
  margin-left:8px;
}
.context-fields {
  margin-top:14px;
}
.context-fields textarea {
  max-height:100px;
}
.composer-footer {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0 20px;
  border-top:1px solid var(--border);
  margin-top:12px;
}
.cover-picker {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-height:55dvh;
  overflow-y:auto;
  padding:3px;
}
.cover-option {
  position:relative;
  border:1px solid var(--border);
  border-radius:10px;
  padding:5px;
  cursor:pointer;
  overflow:hidden;
}
.cover-option:has(input:checked) {
  border-color:var(--blue);
  background:var(--blue-tint);
  box-shadow:0 0 0 1px var(--blue);
}
.cover-option>input {
  position:absolute;
  top:10px;
  left:10px;
}
.cover-option>img,.cover-option-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  height:76px;
  width:100%;
  object-fit:cover;
  border-radius:6px;
  background:var(--paper-2);
  font-size:11px;
  color:var(--ink-3);
}
.cover-option strong {
  display:block;
  padding:7px 3px 2px;
  font-size:11px;
  font-weight:500;
}
.cover-file {
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  flex-wrap:wrap;
}
.cover-file input {
  max-width:100%;
}
.detail-dialog {
  width:690px;
  height:100dvh;
  max-height:100dvh;
  max-width:min(100vw,690px);
  margin:0 0 0 auto;
  padding:0;
  border-radius:16px 0 0 16px;
}
.detail-dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:2;
  background:var(--white);
}
.detail-dialog-top .eyebrow {
  margin:0!important;
}
.feedback-detail {
  padding:24px;
}
.full-detail {
  padding:0;
  max-width:850px;
  margin:20px auto;
}
.detail-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.detail-heading p {
  margin:8px 0 16px;
}
.detail-heading select {
  font-size:12px;
}
.feedback-detail h2 {
  font-size:25px;
}
.comment-body {
  font-size:15px;
  line-height:1.7;
  white-space:normal;
  margin:14px 0;
}
.detail-actions {
  margin-top:16px;
}
.detail-section {
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:22px;
}
.detail-section summary {
  cursor:pointer;
}
.evidence-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.evidence-gallery figure {
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.evidence-open {
  border:0;
  padding:0;
  background:var(--paper-2);
  width:100%;
  height:145px;
  display:block;
}
.evidence-open img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.evidence-gallery figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:3px 7px;
  font-size:11px;
}
.evidence-gallery .actions {
  gap:0;
}
.evidence-gallery .icon-button {
  min-width:30px;
  width:30px;
  height:30px;
  padding:6px;
}
.evidence-gallery .icon {
  width:16px;
}
.context-list {
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:8px 14px;
  font-size:12px;
}
.context-list dt {
  color:var(--ink-3);
}
.context-list dd {
  margin:0;
  overflow-wrap:anywhere;
}
.reply {
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.reply p {
  font-size:13px;
  margin:10px 0 0;
}
.reply strong {
  color:var(--ink);
}
.reply time {
  margin-left:auto;
}
.detail-section form {
  margin-top:20px;
}
.detail-section form textarea {
  min-height:90px;
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:250px;
  overflow:auto;
  padding:14px;
  border-radius:8px;
  background:var(--paper-2);
  font-size:11px;
}
code {
  font-size:11px;
  background:var(--paper-2);
  padding:3px 5px;
  border-radius:5px;
}
.gallery-dialog {
  width:calc(100vw - 40px);
  max-width:1300px;
  height:calc(100dvh - 40px);
  background:#151719;
  color:#fff;
  border-color:#424548;
  padding:14px;
}
.gallery-dialog .icon-button {
  color:#fff;
  border:1px solid #ffffff22;
}
.gallery-dialog .icon-button:hover {
  background:#ffffff22;
}
.gallery-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px 12px;
}
.gallery-stage {
  display:flex;
  align-items:center;
  gap:14px;
  height:calc(100% - 135px);
}
.gallery-image-wrap {
  flex:1;
  height:100%;
  min-width:0;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-image-wrap img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.gallery-image-wrap.zoomed {
  display:block;
}
.gallery-image-wrap.zoomed img {
  max-width:none;
  max-height:none;
  width:auto;
}
.gallery-thumbs {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.gallery-thumbs button {
  background:transparent;
  padding:3px;
  border:1px solid transparent;
  border-radius:6px;
}
.gallery-thumbs button[aria-current] {
  border-color:#79b5ff;
}
.gallery-thumbs img {
  width:58px;
  height:44px;
  object-fit:contain;
  display:block;
}
@media(max-width:1100px) {
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .row-end {
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
  }
  .project-search {
    flex-wrap:wrap;
  }
  .project-search .search-field {
    min-width:240px;
  }
  .invite-form {
    grid-template-columns:1fr 160px;
  }
  .invite-form .button {
    grid-column:1/-1;
    justify-self:start;
  }
}
@media(max-width:760px) {
  .container {
    width:calc(100% - 32px);
    margin-top:20px;
  }
  .topbar {
    padding:12px 16px;
  }
  .topbar nav {
    gap:8px;
  }
  .brand img {
    width:140px;
  }
  .account {
    display:none;
  }
  .page-heading {
    gap:14px;
    align-items:flex-start;
  }
  .page-heading .button {
    padding:9px 12px;
    font-size:12px;
  }
  .page-heading .button .icon {
    width:16px;
  }
  .page-heading h2 {
    font-size:25px;
  }
  .project-search .search-field {
    flex-basis:100%;
  }
  .project-search .segmented {
    margin-right:auto;
  }
  .project-grid {
    grid-template-columns:1fr;
  }
  .project-hero {
    min-height:190px;
  }
  .hero-content {
    padding:25px 22px;
  }
  .hero-content h1 {
    padding-right:24px;
  }
  .project-tabs {
    width:100%;
    justify-content:center;
    margin-top:14px;
  }
  .project-tabs a {
    padding:8px 18px;
  }
  .summary-grid {
    grid-template-columns:1fr;
  }
  .stat-grid {
    gap:8px;
  }
  .stat-card {
    padding:14px 12px;
  }
  .stat-card strong {
    font-size:27px;
  }
  .stat-card span,.stat-card small {
    font-size:10px;
  }
  .settings-layout {
    grid-template-columns:1fr;
    gap:20px;
  }
  .settings-nav {
    display:flex;
    overflow-x:auto;
  }
  .settings-nav a {
    flex-shrink:0;
    padding:10px;
  }
  .settings-nav small {
    display:none;
  }
  .filter-top {
    flex-wrap:wrap;
  }
  .filter-top .search-field {
    flex-basis:100%;
  }
  .filter-top>select {
    flex:1;
    max-width:none;
  }
  .filter-bottom>select {
    margin-left:0;
  }
  .extra-filter-fields {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .feedback-row {
    padding:12px;
    gap:10px;
    flex-wrap:wrap;
  }
  .feedback-text {
    width:calc(100% - 95px);
    flex:auto;
  }
  .row-thumb {
    width:44px;
    height:44px;
  }
  .row-end {
    flex-direction:row;
    margin-left:26px;
    width:calc(100% - 26px);
    justify-content:space-between;
  }
  .row-meta {
    font-size:9px;
  }
  .scope-note {
    display:none;
  }
  .bulk-bar>.actions {
    margin:0;
    flex-wrap:wrap;
  }
  .bulk-bar:has([data-selection-actions]:not([hidden])) {
    padding:10px;
  }
  .bulk-bar>.actions .button {
    font-size:11px;
  }
  .bulk-bar select {
    width:145px;
  }
  .recent-row .pill {
    font-size:9px;
    padding:3px 7px;
  }
  .recent-row {
    gap:8px;
  }
  .panel {
    padding:18px;
  }
  .invite-form {
    grid-template-columns:1fr;
  }
  .member-list .member .actions {
    width:100%;
    padding-left:44px;
  }
  .admin-card {
    align-items:flex-start;
    flex-direction:column;
  }
  .detail-dialog {
    width:100vw;
    max-width:100vw;
    border-radius:0;
  }
  .feedback-detail {
    padding:18px;
  }
  .detail-heading {
    flex-wrap:wrap;
  }
  .detail-heading p {
    font-size:10px;
  }
  .evidence-gallery .actions {
    flex-wrap:wrap;
  }
  .composer {
    padding:20px 16px 0;
  }
  .modal-head h2 {
    font-size:25px;
  }
  .composer-footer .button {
    font-size:12px;
    padding:9px 12px;
  }
  .cover-picker {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cover-option>img,.cover-option-empty {
    height:70px;
  }
  .preview-card {
    width:calc((100% - 10px)/2);
  }
  .gallery-dialog {
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    padding:10px;
  }
  .gallery-stage {
    gap:5px;
  }
  .gallery-stage>.icon-button {
    width:30px;
    min-width:30px;
  }
  .invitation-banner {
    align-items:flex-start;
    flex-direction:column;
  }
  .auth-card {
    padding:24px;
  }
  .narrow {
    margin:25px auto;
  }
  .project-switch select {
    max-width:170px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Workspace resources */
.resources{margin-top:56px;padding-top:32px;border-top:1px solid var(--rd-border)}
.resources h2{margin:0;font-size:30px}.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.resource-card{border:1px solid var(--rd-border);border-radius:24px;overflow:hidden;background:var(--rd-white);display:flex;flex-direction:column}
.resource-card>img{width:100%;height:auto;display:block}.resource-body{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1}
.resource-body h3,.resource-body p{margin:0}.resource-body p{color:#666;line-height:1.6}.resource-body .button{margin-top:auto}.resource-body small{font-size:12px}.upcoming>img{filter:grayscale(1)}
.install-modal{width:580px;max-width:calc(100vw - 32px)}.install-steps{list-style:none;padding:0;display:grid;gap:22px;margin:28px 0}.install-steps li{display:flex;gap:16px}.install-steps li>span{flex-shrink:0;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#e8f2ff;color:#007aff}.install-steps p{margin:5px 0 0;line-height:1.55}.install-note{font-size:13px}
@media(max-width:800px){.resource-grid{grid-template-columns:1fr}.resource-card>img{max-height:220px;object-fit:cover}}

.language-selector{display:flex;align-items:center;gap:4px}.language-selector select{font-size:13px;max-width:120px;padding:7px 10px}.language-selector .icon-button{width:30px;height:30px}

/* A warm, compact invitation to share Pecky. */
.referral-banner{display:grid;grid-template-columns:minmax(0,1fr) 32%;gap:24px;align-items:center;margin-bottom:36px;border:1px solid var(--rd-border);border-radius:24px;background:var(--rd-white);overflow:hidden}
.referral-copy{padding:28px 0 28px 32px}.referral-copy .eyebrow{margin:0 0 8px;color:var(--rd-blue)}
.referral-copy h2{font-size:clamp(21px,2.2vw,28px);line-height:1.2;margin:0 0 12px;max-width:620px}
.referral-copy>p:not(.eyebrow){color:#666;line-height:1.6;max-width:580px;margin:0 0 20px}
.referral-art{width:100%;height:100%;min-height:240px;max-height:310px;object-fit:cover;display:block}
.referral-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.referral-actions [hidden]{display:none}
.referral-networks summary{cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:4px;padding:10px 0}
.referral-networks nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}.referral-networks a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.referral-banner{grid-template-columns:1fr;gap:0}.referral-copy{padding:24px}.referral-art{height:150px;min-height:0;max-height:150px;object-position:center 55%}}

/* Guided agent connection: consistent with the Chrome resource and modal. */
.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-secondary{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.agent-copy-field{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}.agent-copy-field code{overflow-wrap:anywhere;min-width:0;font-size:14px}
.agent-prompt{padding:12px 16px;background:var(--rd-paper);border:1px solid var(--rd-border);border-radius:12px}
.agent-advanced{border-top:1px solid var(--rd-border);padding-top:16px;margin-top:20px}.agent-advanced summary{cursor:pointer;font-weight:600}
.agent-intro{padding:24px;margin:24px 0;display:flex;gap:24px;align-items:center;justify-content:space-between}.agent-intro h2{margin:0}.agent-intro p{margin:12px 0 0;max-width:600px;color:#666}
@media(max-width:800px){.resource-grid{grid-template-columns:1fr}.agent-intro{align-items:flex-start;flex-direction:column}.agent-copy-field code{width:100%}}

@media(max-width:600px){.topbar{flex-wrap:wrap;gap:12px}.topbar nav{width:100%;min-width:0;flex-wrap:wrap}}