:root {
  color-scheme: light;
  --canvas: #f4e7d3;
  --surface: #fbf6ec;
  --surface-quiet: #ede4d4;
  --ink: #17130f;
  --muted: #5c5348;
  --faint: #7a7468;
  --umber: #3b2f2a;
  --rule: color-mix(in srgb, var(--umber) 16%, var(--canvas) 84%);
  --rule-strong: color-mix(in srgb, var(--umber) 30%, var(--canvas) 70%);
  --accent: #b96a4a;
  --accent-ink: #8f4f35;
  --accent-soft: #f0ddd4;
  --olive: #7a8460;
  --olive-ink: #5a6348;
  --olive-soft: #e8ede0;
  --note: #f5e6b8;
  --note-rule: #d4c48a;
  --danger: #a33a2f;
  --danger-soft: #fff0ed;
  --ok: #5a6348;
  --ok-soft: #e8ede0;
  --font: "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, "Times New Roman", serif;
  --ui: var(--font);
  --serif: var(--font);
  --topbar-height: 60px;
  --z-site-nav: 300;
  --z-reader-head: 290;
  --z-doc-toolbar: 280;
  --z-selection-toolbar: 270;
  --z-folder-picker: 900;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  text-size-adjust: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--note);
}

.topbar {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  min-height: var(--topbar-height);
  padding: 9px 32px;
  position: sticky;
  top: 0;
  z-index: var(--z-site-nav);
}

.brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  flex-shrink: 1;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  flex-shrink: 0;
  height: 40px;
  object-fit: contain;
  width: 40px;
}

.brand-wordmark {
  display: block;
  flex-shrink: 1;
  height: auto;
  width: min(11.75rem, 44vw);
  object-fit: contain;
}

nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-link {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 6px 7px;
}

.nav-link.active {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-profile {
  color: var(--accent);
}

.nav-count {
  background: var(--danger);
  color: white;
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  margin-left: 3px;
  min-width: 1.4em;
  padding: 1px 5px;
}

nav form {
  margin: 0;
}

.nav-bookmark-menu {
  position: relative;
}

.nav-bookmark-summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 2px;
  list-style: none;
  min-height: 32px;
  padding: 5px 6px;
}

.nav-bookmark-summary::-webkit-details-marker {
  display: none;
}

.nav-bookmark-icon {
  background: #a83240;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
  display: block;
  height: 22px;
  width: 14px;
}

.nav-bookmark-summary .nav-count {
  align-self: flex-start;
  border-radius: 999px;
  font-size: 0.62rem;
  margin-left: -3px;
  margin-top: -2px;
  min-width: 1.2em;
  padding: 0 4px;
}

.nav-bookmark-popover {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--umber) 16%, transparent);
  display: none;
  min-width: 300px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: calc(var(--z-site-nav) + 8);
}

.nav-bookmark-menu[open] .nav-bookmark-popover {
  display: block;
}

.nav-bookmark-head {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  justify-content: space-between;
  padding: 4px 5px 8px;
}

.nav-bookmark-head strong {
  color: var(--ink);
}

.nav-bookmark-list {
  display: grid;
  gap: 2px;
  max-height: min(360px, 70vh);
  overflow: auto;
  padding-top: 6px;
}

.nav-bookmark-item {
  color: var(--ink);
  display: grid;
  gap: 1px;
  padding: 7px 6px;
  text-decoration: none;
}

.nav-bookmark-item:hover,
.nav-bookmark-item:focus {
  background: var(--surface-quiet);
  text-decoration: none;
}

.nav-bookmark-item strong {
  font-size: 0.84rem;
  line-height: 1.25;
}

.nav-bookmark-item span,
.nav-bookmark-item time,
.nav-bookmark-empty {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.nav-bookmark-empty {
  margin: 0;
  padding: 10px 6px 4px;
}

.mobile-nav-menu {
  display: none;
  position: relative;
}

.mobile-nav-summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  list-style: none;
  width: 34px;
}

.mobile-nav-summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-icon,
.mobile-nav-icon::before,
.mobile-nav-icon::after {
  background: currentColor;
  border-radius: 2px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 18px;
}

.mobile-nav-icon {
  position: relative;
}

.mobile-nav-icon::before {
  top: -6px;
}

.mobile-nav-icon::after {
  top: 6px;
}

.mobile-nav-panel {
  background: white;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: 0 14px 32px rgba(23, 19, 15, 0.18);
  display: grid;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: calc(var(--z-site-nav) + 6);
}

.mobile-nav-panel a,
.mobile-nav-panel button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus,
.mobile-nav-panel button:hover,
.mobile-nav-panel button:focus,
.mobile-nav-panel a.active {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.mobile-nav-panel form {
  margin: 0;
}

.shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: 28px 32px 56px;
}

.flash {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  margin: 0 auto 18px;
  max-width: 980px;
  padding: 11px 13px;
}

.flash.error {
  border-left-color: var(--danger);
  color: var(--danger);
}

.kicker,
.source-line,
.source-domain,
.note-meta,
.helper,
.backlink,
.footer,
.button,
button,
input,
textarea,
select,
label {
  font-family: var(--ui);
}

.kicker {
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

.landing {
  align-items: center;
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1fr) 360px;
  min-height: calc(100vh - 156px);
}

.landing h1 {
  font-family: var(--serif);
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 0.95;
  margin: 0 0 18px;
}

.lede,
.summary {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.actions,
.desk-actions,
.onboarding-actions,
.report-actions,
.invite-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions {
  margin-top: 24px;
}

.button,
button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 800;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
}

.button.primary,
button.primary,
.primary {
  background: var(--accent);
  color: white;
}

.button.primary:hover,
button.primary:hover {
  background: var(--accent-ink);
  text-decoration: none;
}

.button.secondary,
button.secondary {
  border-color: var(--olive);
  color: var(--olive-ink);
}

.button.secondary:hover,
button.secondary:hover {
  background: var(--olive-soft);
  text-decoration: none;
}

.button.danger,
button.danger,
.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.text-button {
  background: transparent;
  border: 0;
  color: var(--accent);
  min-height: auto;
  padding: 0;
}

.full {
  width: 100%;
}

input,
textarea,
select {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  padding: 10px 11px;
  width: 100%;
}

textarea {
  resize: vertical;
}

label {
  display: grid;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 6px;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
.button:focus {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.stack {
  display: grid;
  gap: 13px;
}

.source-card,
.form-page,
.empty-state,
.panel,
.article-card,
.source-note,
.comment,
.topic-card,
.question-card,
.shelf-submit-panel,
.shelf-principles,
.shelf-explainer,
.shelf-section-builder,
.argument-section,
.unfiled-pieces,
.profile-hero,
.profile-stats,
.report-card,
.moderation-summary,
.search-box,
.story-head,
.onboarding-hero {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.source-card {
  padding: 24px;
}

.source-card h2 {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.1;
  margin: 8px 0 12px;
}

blockquote {
  border-left: 3px solid var(--accent);
  color: var(--ink);
  line-height: 1.5;
  margin: 12px 0;
  padding: 2px 0 2px 13px;
  white-space: pre-wrap;
}

.margin-note,
.report-reason {
  background: var(--note);
  border: 1px solid var(--note-rule);
  color: color-mix(in srgb, var(--umber) 72%, var(--ink) 28%);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 11px;
}

.source-domain,
.source-line,
.note-meta {
  color: var(--faint);
  font-size: 0.82rem;
  font-weight: 700;
}

.source-line a,
.note-meta a {
  color: var(--accent-ink);
}

.search-page,
.admin-page,
.moderation-page,
.story-page,
.pieces-discovery-page,
.shelves-page,
.shelf-page,
.onboarding-page,
.rules-page,
.profile-page,
.single-object,
.form-page {
  margin: 0 auto;
  max-width: 980px;
}

.desk-page,
.article-page {
  margin: 0 auto;
  max-width: 1120px;
}

.pieces-discovery-page {
  max-width: 1080px;
}

.page-head,
.desk-head {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.page-head.compact {
  display: block;
}

.page-head.compact .summary {
  margin: 8px 0 0;
  max-width: 62ch;
}

.desk-head-title {
  display: grid;
  gap: 0;
}

.desk-head h1,
.page-head h1,
.single-object h1,
.form-page h1,
.moderation-page h1,
.story-head h1,
.profile-hero h1,
.onboarding-hero h1 {
  font-family: var(--serif);
  font-size: 2.35rem;
  line-height: 1.05;
  margin: 0;
}

.start-strip {
  align-items: center;
  background: var(--surface-quiet);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 10px 0;
}

.start-strip strong,
.feed-count {
  color: var(--ink);
}

.start-strip div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-index {
  display: grid;
}

.article-row {
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  grid-template-columns: 150px minmax(0, 1fr) 112px;
  padding: 18px 0;
}

.article-row:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.row-source,
.row-stats,
.article-card footer,
.profile-stats,
.moderation-summary,
.search-summary {
  color: var(--muted);
  font-size: 0.86rem;
}

.row-source,
.row-stats {
  display: grid;
  gap: 5px;
}

.row-source span,
.row-stats strong {
  color: var(--ink);
}

.row-main h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0 0 6px;
}

.row-main h2 a,
.article-card h2 a,
.article-card h3 a,
.compact-card h3 a {
  color: var(--ink);
}

.row-main p {
  color: var(--muted);
  margin: 0;
}

.desk-page .row-main h2 {
  font-size: 1.25rem;
}

.desk-page .row-main p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pieces-discovery-page {
  max-width: 1180px;
}

.pieces-command-bar {
  align-items: end;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), var(--surface));
  border: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 18px 20px;
}

.pieces-title-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pieces-title-block h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 0.96;
  margin: 0;
}

.pieces-title-block .summary {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  max-width: 68ch;
}

.pieces-discovery-stats {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
}

.pieces-discovery-stats span {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 58px;
  padding: 8px 10px;
}

.pieces-discovery-stats strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
}

.pieces-workspace {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: 270px minmax(0, 1fr);
}

.pieces-filter-panel {
  display: grid;
  gap: 12px;
  position: sticky;
  top: calc(var(--topbar-height) + 14px);
}

.pieces-filter-card,
.pieces-signal-guide,
.pieces-queue-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.pieces-filter-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.pieces-filter-card strong {
  color: var(--ink);
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.05;
}

.pieces-filter-card p,
.pieces-signal-guide p,
.pieces-signal-guide dd {
  color: var(--muted);
}

.pieces-filter-card p {
  font-size: 0.82rem;
  margin: 4px 0 0;
}

.pieces-filter-eyebrow {
  color: var(--faint);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.piece-discovery-sort {
  display: grid;
  gap: 5px;
}

.piece-discovery-sort a {
  border: 1px solid transparent;
  color: var(--muted);
  display: flex;
  font-size: 0.85rem;
  font-weight: 900;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 9px;
}

.piece-discovery-sort a::after {
  color: var(--faint);
  content: "›";
  font-weight: 900;
}

.piece-discovery-sort a:hover,
.piece-discovery-sort a:focus {
  background: var(--surface-quiet);
  border-color: var(--rule);
  color: var(--accent-ink);
  text-decoration: none;
}

.piece-discovery-sort a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.piece-discovery-sort a.active::after {
  color: currentColor;
}

.piece-discovery-rule {
  background: color-mix(in srgb, var(--olive-soft) 78%, var(--surface) 22%);
  border: 1px solid color-mix(in srgb, var(--olive) 34%, var(--canvas) 66%);
  color: var(--olive-ink);
  display: grid;
  font-size: 0.82rem;
  gap: 4px;
  line-height: 1.35;
  padding: 12px 13px;
}

.piece-discovery-rule strong {
  color: var(--ink);
}

.pieces-signal-guide {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.pieces-signal-guide h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.05;
  margin: 0;
}

.pieces-signal-guide p {
  font-size: 0.82rem;
  margin: 0;
}

.pieces-signal-guide dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.pieces-signal-guide dl div {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 2px;
  padding: 9px 0;
}

.pieces-signal-guide dt {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.pieces-signal-guide dd {
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0;
}

.pieces-queue-panel {
  min-height: 640px;
}

.pieces-queue-head {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 18px;
}

.pieces-queue-head h2 {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1;
  margin: 0;
}

.pieces-queue-head span {
  color: var(--faint);
  font-size: 0.82rem;
  font-weight: 900;
}

.pieces-add-link {
  color: var(--accent-ink);
  font-size: 0.85rem;
  font-weight: 900;
}

.piece-square {
  display: grid;
}

.piece-square-card {
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 14px 18px;
  grid-template-columns: 58px minmax(0, 1fr) minmax(200px, 260px);
  padding: 16px 18px;
}

.piece-square-card:hover {
  background: color-mix(in srgb, var(--surface) 82%, white 18%);
}

.piece-rank-block {
  align-content: start;
  color: var(--faint);
  display: grid;
  gap: 7px;
  justify-items: center;
  padding-top: 2px;
}

.piece-rank-number {
  align-items: center;
  background: var(--ink);
  color: var(--surface);
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.piece-state {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.piece-state.is-new {
  color: var(--accent-ink);
}

.piece-state.is-long-unseen {
  color: var(--olive-ink);
}

.piece-square-main {
  align-content: start;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.piece-square-source {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 850;
  gap: 6px 12px;
  margin: 0;
}

.piece-square-source a {
  color: var(--accent-ink);
}

.piece-square-main h2 {
  font-family: var(--serif);
  font-size: clamp(1.28rem, 2.1vw, 1.9rem);
  line-height: 1.08;
  margin: 0;
}

.piece-square-main h2 a {
  color: var(--ink);
}

.piece-square-summary {
  color: var(--muted);
  display: -webkit-box;
  font-size: 0.93rem;
  line-height: 1.45;
  margin: 0;
  max-width: 76ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.piece-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.piece-topic-chip {
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px 7px;
}

.piece-topic-chip:hover,
.piece-topic-chip:focus {
  color: var(--accent-ink);
  text-decoration: none;
}

.piece-topic-chip.is-match {
  background: var(--olive-soft);
  border-color: color-mix(in srgb, var(--olive) 38%, var(--canvas) 62%);
  color: var(--olive-ink);
}

.piece-topic-chip.is-muted {
  color: var(--faint);
}

.piece-signal-ledger {
  align-content: start;
  background: color-mix(in srgb, var(--canvas) 52%, var(--surface) 48%);
  border: 1px solid var(--rule);
  display: grid;
  gap: 10px;
  padding: 11px;
}

.piece-signal-ledger h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.1;
  margin: 0;
}

.piece-square-metrics {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.piece-signal {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--muted);
  display: grid;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 2px;
  justify-items: center;
  line-height: 1.05;
  min-height: 55px;
  padding: 6px 3px;
  text-align: center;
}

.piece-signal strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.piece-signal-icon {
  color: currentColor;
  height: 18px;
  position: relative;
  width: 18px;
}

.piece-signal-icon::before,
.piece-signal-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.piece-signal-icon-shelf::before {
  border: 2px solid currentColor;
  border-radius: 2px;
  height: 15px;
  left: 4px;
  top: 1px;
  width: 10px;
}

.piece-signal-icon-shelf::after {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  height: 7px;
  left: 4px;
  top: 9px;
  transform: skewY(-18deg);
  width: 10px;
}

.piece-signal-ledger ul {
  display: grid;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 6px;
  line-height: 1.28;
  list-style: none;
  margin: 0;
  padding: 0;
}

.piece-signal-ledger li {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  padding-top: 6px;
}

.piece-square-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  grid-column: 2 / 4;
}

.piece-square-actions form {
  margin: 0;
}

.piece-square-actions .button {
  min-height: 34px;
  padding: 7px 10px;
}

.piece-hide-button {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 32px;
}

.piece-hide-button:hover,
.piece-hide-button:focus {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.piece-square-pager {
  border-top: 1px solid var(--rule);
  margin: 0;
  padding: 14px 18px;
}

@media (max-width: 1120px) {
  .pieces-command-bar {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .pieces-discovery-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .pieces-workspace {
    grid-template-columns: 1fr;
  }

  .pieces-filter-panel {
    position: static;
  }

  .pieces-filter-card {
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  }

  .piece-discovery-sort {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .piece-discovery-sort a {
    justify-content: center;
    text-align: center;
  }

  .piece-discovery-sort a::after {
    display: none;
  }

  .pieces-signal-guide dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pieces-signal-guide dl div {
    border-left: 1px solid var(--rule);
    border-top: 0;
    padding: 0 10px;
  }

  .pieces-signal-guide dl div:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 980px) {
  .piece-square-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .piece-signal-ledger,
  .piece-square-actions {
    grid-column: 2;
  }

  .piece-square-metrics {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
  }
}

.desk-finder {
  margin-bottom: 18px;
}

.desk-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.desk-tabs {
  display: inline-flex;
  gap: 0;
}

.desk-tab {
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  margin-right: -1px;
  padding: 7px 14px;
  text-decoration: none;
}

.desk-tab:first-child {
  border-radius: 4px 0 0 4px;
}

.desk-tab:last-child {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}

.desk-tab:hover {
  background: var(--surface-quiet);
  color: var(--ink);
  text-decoration: none;
}

.desk-tab.is-active {
  background: var(--surface);
  border-color: var(--rule-strong);
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.desk-view-toggle {
  display: inline-flex;
  gap: 0;
}

.desk-view-btn {
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-right: -1px;
  padding: 6px 12px;
  text-decoration: none;
}

.desk-view-btn:first-child {
  border-radius: 4px 0 0 4px;
}

.desk-view-btn:last-child {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}

.desk-view-btn:hover {
  background: var(--surface-quiet);
  color: var(--ink);
  text-decoration: none;
}

.desk-view-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.desk-breadcrumb {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.84rem;
  font-weight: 700;
  gap: 6px;
  margin-bottom: 10px;
}

.desk-breadcrumb a {
  color: var(--accent-ink);
}

.desk-breadcrumb-current {
  color: var(--ink);
}

.desk-breadcrumb-sep {
  color: var(--faint);
}

.desk-folder-toolbar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.desk-folder-create summary,
.desk-folder-add-pieces summary {
  cursor: pointer;
  list-style: none;
}

.desk-folder-create summary::-webkit-details-marker,
.desk-folder-add-pieces summary::-webkit-details-marker {
  display: none;
}

.desk-folder-create-form,
.desk-add-pieces-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  display: grid;
  gap: 8px;
  margin-top: 8px;
  min-width: 260px;
  padding: 10px;
}

.desk-folder-create-form .sh-field {
  gap: 5px;
}

.desk-bulk-folder.sh-field {
  gap: 5px;
  min-width: min(100%, 240px);
}

.desk-add-pieces-hint,
.desk-bulk-hint,
.desk-folder-note {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0 0 10px;
}

.desk-add-pieces-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.desk-add-pieces-list,
.sh-choice-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  max-height: 280px;
  overflow: auto;
}

.desk-add-piece-option {
  margin: 0;
}

.desk-add-piece-copy {
  display: grid;
  gap: 2px;
}

.desk-add-piece-copy strong {
  font-size: 0.86rem;
  line-height: 1.25;
}

.desk-add-piece-copy small {
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 700;
}

.desk-pieces-toolbar {
  align-items: center;
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  margin-bottom: 12px;
  min-height: 52px;
  padding: 10px 14px;
}

.desk-toolbar-idle,
.desk-toolbar-selecting {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px 12px;
  width: 100%;
}

.desk-toolbar-selecting {
  justify-content: flex-start;
}

.desk-bulk-bar {
  align-items: flex-end;
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 10px;
  padding: 12px 14px;
}

.desk-bulk-selection {
  align-items: center;
  display: flex;
  flex: 1 1 220px;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: min(100%, 260px);
}

.desk-bulk-count {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.desk-bulk-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.desk-bulk-selection-actions .button {
  font-size: 0.78rem;
  min-height: 32px;
  padding: 0 10px;
}

.desk-bulk-bar .button.primary[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.desk-inbox-link {
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 800;
  margin-left: auto;
  text-decoration: none;
}

.desk-inbox-link.is-active {
  color: var(--ink);
  text-decoration: underline;
}

.desk-folder-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.desk-folder-card,
.desk-piece-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: inherit;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 10px 11px;
  text-decoration: none;
}

.desk-folder-card:hover,
.desk-piece-card:hover {
  border-color: var(--rule-strong);
  text-decoration: none;
}

.desk-folder-card {
  border-color: color-mix(in srgb, var(--folder-color, var(--olive)) 28%, var(--rule) 72%);
}

.desk-folder-card-icon,
.desk-piece-card-icon,
.desk-folder-row-icon {
  align-items: center;
  background: color-mix(in srgb, var(--folder-color, var(--olive)) 12%, var(--surface) 88%);
  border: 1px solid color-mix(in srgb, var(--folder-color, var(--olive)) 28%, var(--rule) 72%);
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  line-height: 1;
  width: 22px;
}

.desk-piece-card-icon {
  background: var(--surface);
  border-color: var(--rule);
}

.desk-folder-card-name,
.desk-piece-card-name {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
}

.desk-folder-card-meta,
.desk-piece-card-meta {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.desk-folder-list .desk-folder-row {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 10px 2px;
  text-decoration: none;
}

.desk-folder-list .desk-folder-row:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  text-decoration: none;
}

.desk-folder-row-main {
  display: grid;
  gap: 2px;
}

.desk-folder-row-main strong {
  font-size: 0.92rem;
}

.desk-folder-row-main span {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 700;
}

.desk-folder-list .desk-folder-row-piece:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  text-decoration: none;
}

.desk-folder-row-icon-piece {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface) 90%);
  border-color: var(--rule);
  color: var(--muted);
}

.desk-list-head {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 10px;
}

.desk-list-head h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0;
}

.desk-list-meta {
  color: var(--faint);
  font-size: 0.82rem;
  font-weight: 800;
}

/* Shelf.human custom fields (Desk + forms) */
.sh-field {
  display: grid;
  gap: 6px;
}

.sh-field-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sh-field-hint {
  color: var(--faint);
  font-weight: 700;
}

.sh-input {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
  min-height: 40px;
  padding: 9px 11px;
  width: 100%;
}

.sh-input:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
}

.sh-input-color {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  max-width: 140px;
}

.sh-select-wrap {
  display: block;
  position: relative;
  width: 100%;
}

.sh-select-wrap::after {
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238f4f35' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  border-left: 1px solid var(--rule);
  border-radius: 0 3px 3px 0;
  bottom: 1px;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 1px;
  top: 1px;
  width: 34px;
}

.sh-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  min-height: 40px;
  padding: 9px 40px 9px 11px;
  width: 100%;
}

.sh-select:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule-strong));
}

.sh-select:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
}

.sh-select:invalid,
.sh-select option[value=""] {
  color: var(--muted);
}

.sh-check {
  height: 1px;
  left: -9999px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.sh-choice-control {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  margin-top: 2px;
  position: relative;
  width: 20px;
}

.sh-check-box {
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: block;
  height: 18px;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  width: 18px;
}

.sh-check:focus-visible + .sh-check-box {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

.sh-check:checked + .sh-check-box {
  align-items: center;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  display: inline-flex;
  justify-content: center;
}

.sh-check:checked + .sh-check-box::after {
  border: solid white;
  border-width: 0 0 2px 2px;
  content: "";
  display: block;
  height: 4px;
  margin-top: -2px;
  transform: rotate(-45deg);
  width: 8px;
}

.sh-choice-row {
  align-items: start;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  margin: 0;
  padding: 11px 12px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sh-choice-row:last-child {
  border-bottom: 0;
}

.sh-choice-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.sh-choice-row:has(.sh-check:checked) {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--rule));
}

.sh-choice-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sh-choice-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.sh-choice-open {
  align-self: center;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--accent-ink);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.sh-choice-open:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}

.desk-page:not(.desk-selecting) .desk-piece-select {
  display: none;
}

.desk-page.desk-selecting .desk-piece-row-selectable {
  cursor: pointer;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: 22px minmax(0, 1fr);
  padding-left: 8px;
}

.desk-page.desk-selecting .desk-piece-row-selectable.is-selected,
.desk-page.desk-selecting .desk-piece-row-selectable:has(.sh-check:checked) {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.desk-piece-select {
  align-items: start;
  cursor: pointer;
  display: inline-flex;
  margin-top: 4px;
  padding-top: 2px;
}

.desk-piece-row-selectable .desk-piece-main h3 a {
  pointer-events: auto;
}

.desk-page.desk-selecting .desk-piece-row-selectable .desk-piece-main h3 a {
  position: relative;
  z-index: 1;
}

body.folder-picker-open {
  overflow: hidden;
}

.folder-picker[hidden] {
  display: none !important;
}

.folder-picker {
  inset: 0;
  position: fixed;
  z-index: var(--z-folder-picker);
}

.folder-picker-backdrop {
  background: rgba(24, 28, 26, 0.42);
  inset: 0;
  position: absolute;
}

.folder-picker-dialog {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(24, 28, 26, 0.22);
  display: grid;
  gap: 0;
  left: 50%;
  max-height: min(82vh, 720px);
  max-width: min(700px, calc(100vw - 28px));
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, calc(100vw - 28px));
}

.folder-picker-head {
  border-bottom: 1px solid var(--rule);
  padding: 18px 20px 14px;
}

.folder-picker-head h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0 0 6px;
}

.folder-picker-subtitle {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0;
}

.folder-picker-location {
  border-bottom: 1px solid var(--rule);
  padding: 10px 20px 12px;
}

.folder-picker-back {
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0 0 8px;
  min-height: auto;
  padding: 0;
}

.folder-picker-breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.folder-picker-crumb {
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--accent-ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 28px;
  padding: 4px 10px;
}

.folder-picker-crumb:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
}

.folder-picker-crumb.is-current {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  cursor: default;
  font-weight: 800;
  padding-left: 0;
}

.folder-picker-crumb-sep {
  color: var(--faint);
  font-weight: 700;
}

.folder-picker-list-wrap {
  align-content: start;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 220px;
}

.folder-picker-list-head {
  align-items: center;
  align-self: start;
  background: var(--surface-quiet);
  border-bottom: 1px solid var(--rule);
  color: var(--faint);
  display: grid;
  font-size: 0.68rem;
  font-weight: 800;
  gap: 10px;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 0;
  padding: 2px 16px 3px;
  text-transform: uppercase;
}

.folder-picker-list-head span {
  line-height: 1;
}

.folder-picker-status {
  color: var(--danger, #8b3a3a);
  font-size: 0.8rem;
  font-weight: 700;
  grid-row: 2;
  line-height: 1.3;
  margin: 0;
  padding: 6px 16px 0;
}

.folder-picker-status[hidden] {
  display: none;
}

.folder-picker-list {
  grid-row: 3;
  max-height: 320px;
  min-height: 0;
  overflow: auto;
}

.folder-picker-row {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 10px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 6px 14px;
}

.folder-picker-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.folder-picker-row-icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.folder-picker-row-main {
  align-items: start;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-content: start;
  justify-items: start;
  min-height: 36px;
  min-width: 0;
  padding: 6px 4px;
  text-align: left;
  width: 100%;
}

.folder-picker-row-main strong {
  color: var(--ink);
  display: block;
  font-size: 0.92rem;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-picker-row-main span {
  color: var(--faint);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-picker-row-add {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--accent-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0 12px;
  white-space: nowrap;
}

.folder-picker-row-add:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.folder-picker-row-add-folder {
  grid-template-columns: 28px minmax(0, 1fr);
  opacity: 0.72;
}

.folder-picker-row-add-folder.is-editing {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  opacity: 1;
}

.folder-picker-row-icon-add {
  background: var(--surface-quiet);
  border-color: var(--rule);
  color: var(--faint);
  font-size: 1rem;
  line-height: 1;
}

.folder-picker-row-main-add {
  min-height: 36px;
}

.folder-picker-add-trigger {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 6px 4px;
  text-align: left;
  width: 100%;
}

.folder-picker-add-trigger strong {
  color: var(--muted);
  font-size: 0.92rem;
}

.folder-picker-add-trigger span {
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 700;
}

.folder-picker-add-trigger:hover strong {
  color: var(--accent-ink);
}

.folder-picker-inline-name {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  margin: 6px 4px;
  outline: none;
  padding: 4px 0;
  width: calc(100% - 8px);
}

.folder-picker-inline-name::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.folder-picker-row-piece {
  grid-template-columns: 28px minmax(0, 1fr);
}

.folder-picker-row-piece:hover {
  background: var(--surface);
}

.folder-picker-row-icon-piece {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface) 90%);
  border-color: var(--rule);
  color: var(--muted);
}

.folder-picker-row-main-piece {
  cursor: default;
  min-height: 36px;
  padding: 6px 4px;
}

.folder-picker-empty {
  color: var(--muted);
  font-size: 0.88rem;
  grid-row: 3;
  margin: 0;
  min-height: 0;
  padding: 28px 20px;
  text-align: center;
}

.folder-picker-foot {
  align-items: center;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: flex-end;
  padding: 12px 16px 14px;
}

.folder-picker-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.folder-picker-foot-actions .button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.folder-picker-foot-actions .button[hidden] {
  display: none;
}

.desk-piece-main .topic-strip {
  margin-top: 7px;
}

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

.topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.topic-pill,
.identity-badge,
.status-pill,
.removed-badge {
  border: 1px solid var(--rule);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 7px;
}

.topic-pill,
.identity-badge {
  background: var(--surface-quiet);
  color: var(--accent-ink);
}

.reader-page {
  margin-left: 0;
  margin-right: 0;
}

.reader-head {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  margin: -28px -32px 0;
  padding: 14px 32px 12px;
  position: relative;
  z-index: var(--z-reader-head);
}

.reader-titlebar {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.reader-head h1 {
  font-family: var(--ui);
  font-size: 1.12rem;
  line-height: 1.24;
  margin: 3px 0 0;
  max-width: 980px;
}

.reader-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room-meta-strip,
.piece-meta-strip {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.room-meta-strip strong,
.piece-meta-strip strong {
  color: var(--ink);
}

.reader-meta .topic-pill {
  padding: 3px 8px;
}

.piece-metric,
.piece-activity-metrics {
  align-items: center;
  display: inline-flex;
}

.piece-activity-metrics {
  gap: 12px;
}

.piece-metric {
  color: #5f6368;
  gap: 5px;
  line-height: 1;
  white-space: nowrap;
}

.piece-metric-icon {
  color: currentColor;
  flex: 0 0 18px;
  height: 18px;
  position: relative;
  width: 18px;
}

.piece-metric-icon::before,
.piece-metric-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.piece-metric-icon-comment::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  height: 15px;
  left: 2px;
  top: 1px;
  width: 14px;
}

.piece-metric-icon-comment::after {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px / 9px 2px no-repeat;
  height: 8px;
  left: 5px;
  top: 5px;
  width: 9px;
}

.piece-metric-icon-chat::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 14px;
  left: 1px;
  top: 2px;
  width: 16px;
}

.piece-metric-icon-chat::after {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  bottom: 1px;
  height: 6px;
  left: 4px;
  transform: rotate(-18deg);
  width: 7px;
}

.article-layout {
  --piece-discussion-width: 300px;
  align-items: start;
  background: var(--surface-quiet);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 -32px;
  min-height: calc(100vh - 104px);
  padding: 0 24px 52px;
}

.article-layout.has-piece-discussion {
  grid-template-columns: minmax(0, 1fr) 5px var(--piece-discussion-width);
}

.piece-discussion-split {
  align-self: stretch;
  background: var(--rule);
  cursor: col-resize;
  min-height: calc(100vh - var(--topbar-height));
  position: sticky;
  top: var(--topbar-height);
  touch-action: none;
  user-select: none;
  width: 5px;
}

.piece-discussion-split:hover,
.piece-discussion-split.is-dragging,
body.is-resizing-piece-discussion .piece-discussion-split {
  background: color-mix(in srgb, var(--accent) 36%, var(--rule));
}

.piece-discussion-split[hidden] {
  display: none;
}

.discussion-column {
  min-width: 0;
}

.piece-discussion-panel {
  background: var(--surface);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - var(--topbar-height));
  min-height: calc(100vh - var(--topbar-height));
  min-width: 0;
  position: sticky;
  top: var(--topbar-height);
  width: var(--piece-discussion-width);
}

.piece-discussion-panel[hidden] {
  display: none;
}

.piece-discussion-head {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  padding: 7px 10px;
}

.piece-discussion-head h2 {
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
}

.piece-discussion-close {
  font-size: 0.78rem;
}

.piece-discussion-scroll {
  min-height: 0;
  overflow: auto;
  padding: 6px 10px;
}

.piece-discussion-thread .comment {
  border-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.32;
  margin: 0 0 5px;
  padding: 0;
}

.piece-discussion-thread .comment.is-grouped {
  margin-top: -2px;
  padding-left: 0;
}

.piece-discussion-thread .comment > header {
  gap: 4px;
  margin-bottom: 1px;
}

.piece-discussion-thread .comment.is-grouped > header {
  display: none;
}

.piece-discussion-thread .thread-comment-meta {
  font-size: 0.7rem;
  gap: 5px;
}

.piece-discussion-thread .comment-body {
  font-size: 0.78rem;
  line-height: 1.32;
  margin: 0;
}

.piece-discussion-thread .compact-report {
  display: none;
}

.piece-discussion-thread .empty-state.compact {
  font-size: 0.76rem;
  padding: 6px 0;
}

.piece-discussion-composer {
  padding: 6px 8px 8px;
}

.piece-discussion-chat-bar {
  align-items: center;
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  border-radius: 999px;
  display: flex;
  gap: 4px;
  min-height: 38px;
  padding: 3px 4px 3px 12px;
}

.piece-discussion-chat-bar textarea {
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 1;
  font-size: 0.78rem;
  line-height: 20px;
  max-height: 120px;
  min-height: 20px;
  overflow: hidden;
  padding: 0;
  resize: none;
}

.piece-discussion-send {
  align-items: center;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--surface);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  line-height: 1;
  min-width: 32px;
  padding: 0;
  width: 32px;
}

.piece-discussion-send:hover {
  filter: brightness(0.96);
}

.piece-discussion-send:disabled {
  cursor: wait;
  opacity: 0.7;
}

.doc-comment-controls {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 6px;
}

.doc-comment-controls-label {
  color: var(--muted);
  font-weight: 700;
}

.comment-ctrl-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comment-ctrl-btn.is-active {
  color: var(--accent-ink);
  text-decoration: none;
}

.comment-ctrl-sep {
  color: var(--faint);
}

.desk-list-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.desk-mark-read-form {
  margin: 0;
}

.desk-folder-add-row {
  display: block;
}

.desk-folder-add-row summary {
  cursor: pointer;
  list-style: none;
}

.desk-folder-add-row summary::-webkit-details-marker {
  display: none;
}

.desk-folder-add-trigger {
  color: var(--muted);
}

.desk-folder-add-trigger strong {
  color: var(--muted);
  font-weight: 700;
}

.desk-folder-add-icon {
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--faint);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}

.desk-folder-create-inline {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  margin: 0;
  padding: 12px 14px 14px 52px;
}

.piece-saved-form {
  margin: 0;
}

.piece-saved-toggle.is-active {
  border-color: color-mix(in srgb, #a83240 42%, var(--rule));
  color: #a83240;
}

.outline-overlay {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: calc(var(--topbar-height) + 68px);
  z-index: calc(var(--z-doc-toolbar) - 1);
}

.outline-overlay:not([hidden]) {
  pointer-events: auto;
}

.outline-overlay-panel {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--umber) 10%, transparent);
  left: max(12px, calc((100vw - 1160px) / 2));
  max-height: min(72vh, calc(100% - 24px));
  max-width: min(240px, 42vw);
  overflow: auto;
  padding: 10px 10px 12px;
  pointer-events: auto;
  position: absolute;
  top: 12px;
  width: min(240px, 42vw);
}

.outline-overlay-label {
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0 0 8px;
}

.outline-toolbar-toggle.is-active {
  background: #edf2f7;
  border-color: #d6dde4;
}

.doc-toolbar-tools {
  gap: 6px;
}

.doc-toolbar-left {
  justify-content: flex-start;
}

.bookmark-gutter {
  bottom: 0;
  left: 26px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 24px;
  z-index: 4;
}

.bookmark-gutter-marker {
  background: #a83240;
  border: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 35%, transparent) inset,
    0 2px 7px color-mix(in srgb, var(--umber) 18%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  cursor: pointer;
  height: 24px;
  left: 1px;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  width: 15px;
}

.bookmark-gutter-marker:hover,
.bookmark-gutter-marker:focus,
.bookmark-gutter-marker.is-focused {
  filter: brightness(0.95);
  transform: translateX(2px);
}

.outline-list {
  display: grid;
  gap: 1px;
}

.outline-list a {
  border-left: 2px solid transparent;
  color: var(--muted);
  display: block;
  font-family: var(--ui);
  font-size: 0.79rem;
  line-height: 1.28;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 5px 5px 9px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-list a:hover,
.outline-list a:focus {
  background: var(--surface-quiet);
  color: var(--ink);
}

.outline-list a.active {
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 800;
}

.outline-list a[data-outline-level="2"] {
  padding-left: 18px;
}

.outline-list a[data-outline-level="3"] {
  padding-left: 27px;
}

.outline-list a[data-outline-level="4"] {
  color: var(--faint);
  font-size: 0.75rem;
  padding-left: 36px;
}

.doc-workspace {
  background: var(--surface-quiet);
  margin-bottom: 30px;
  min-width: 0;
}

.doc-toolbar {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--umber) 8%, transparent);
  margin: 0 auto;
  max-width: min(100%, 1160px);
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-doc-toolbar);
}

.doc-toolbar-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
  padding: 6px 10px;
}

.doc-toolbar-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.doc-toolbar-right {
  gap: 12px;
}

.doc-mode,
.doc-zoom {
  align-items: center;
  background: white;
  border: 1px solid #d9dee3;
  color: #3c4043;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 28px;
  padding: 0 10px;
}

.doc-mode {
  margin-right: 4px;
}

.tool-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: #2b2f33;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 30px;
  padding: 0 8px;
}

.tool-button:hover {
  background: #edf2f7;
  border-color: #d6dde4;
  text-decoration: none;
}

.tool-button:disabled {
  color: #8b9298;
  cursor: not-allowed;
  opacity: 0.72;
}

.tool-button:disabled:hover {
  background: transparent;
  border-color: transparent;
}

.tool-button.italic {
  font-style: italic;
}

.tool-button.underline {
  text-decoration: underline;
}

.tool-button.highlighter {
  background: #fff4bf;
  border-color: #eadc92;
}

.tool-button.primary-tool {
  background: #e8f0fe;
  border-color: #d2e3fc;
  color: #174ea6;
}

.tool-button.comments-toggle {
  border-color: #d6dde4;
  color: #3c4043;
  min-width: 112px;
}

.annotation-dim-toggle {
  align-items: center;
  color: #4b5258;
  display: flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 7px;
  white-space: nowrap;
}

.annotation-dim-toggle input {
  width: auto;
}

.doc-ruler {
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, #c9ced3 23px 24px),
    linear-gradient(#f8f9fa, #f8f9fa);
  border-top: 1px solid #e5e8ea;
  height: 18px;
  position: relative;
}

.doc-ruler span {
  background: #d7dce0;
  display: block;
  height: 100%;
  margin-left: 76px;
  width: 1px;
}

.document-stage {
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
  padding: 26px 18px 44px;
  position: relative;
}

.document-canvas {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 860px) minmax(220px, 260px);
  justify-content: center;
  margin: 0 auto;
  max-width: 1160px;
  min-width: 0;
}

.document-canvas.no-comment-margin {
  grid-template-columns: minmax(0, 860px);
  max-width: 860px;
}

.document-canvas.comments-collapsed {
  grid-template-columns: minmax(0, 980px);
  max-width: 980px;
}

.document-canvas.comments-collapsed .document-page {
  max-width: min(100%, 980px);
}

.document-page {
  background: var(--surface);
  box-sizing: border-box;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--umber) 12%, transparent),
    0 8px 28px color-mix(in srgb, var(--umber) 8%, transparent);
  margin: 0;
  max-width: min(100%, 860px);
  min-height: 1120px;
  padding: 68px 78px 92px;
  position: relative;
  width: 100%;
}

.document-title-block {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
  padding-bottom: 18px;
}

.document-title-block h2 {
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.76rem;
  line-height: 1.16;
  margin: 10px 0;
}

.document-title-block p:last-child {
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 0;
}

.document-content {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.66;
  min-width: 0;
  overflow-wrap: break-word;
}

.document-content .ltx_title,
.document-content .ltx_authors,
.document-content .ltx_dates {
  display: none;
}

.document-content .ltx_abstract {
  background: transparent;
  border-bottom: 1px solid var(--rule);
  border-left: 0;
  margin: 0 0 26px;
  padding: 0 0 22px;
}

.document-content .ltx_abstract .ltx_title {
  display: block;
  font-family: var(--ui);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document-content h1,
.document-content h2,
.document-content h3,
.document-content h4,
.document-content .ltx_title_section,
.document-content .ltx_title_subsection {
  color: var(--ink);
  font-family: var(--ui);
  line-height: 1.26;
  margin: 1.55em 0 0.55em;
}

.document-heading-anchor {
  scroll-margin-top: 124px;
}

.document-content h1,
.document-content h2,
.document-content .ltx_title_section {
  font-size: 1.24rem;
}

.document-content h3,
.document-content .ltx_title_subsection {
  font-size: 1.02rem;
}

.document-content p,
.document-content li {
  margin: 0 0 0.86em;
}

.document-content a {
  color: var(--accent-ink);
}

.document-content :not(pre) > code,
.document-content .document-inline-code {
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.86em;
  padding: 0.08em 0.28em;
  white-space: break-spaces;
}

.document-content pre,
.document-content .document-code-block {
  background: #f7f8fa;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  color: #1f2937;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 1.2rem 0 1.65rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 15px 17px;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: normal;
}

.document-content .document-code-frame,
.document-content .highlighter-rouge,
.document-content .highlight {
  max-width: 100%;
}

.document-content .document-code-frame {
  margin: 1.2rem 0 1.65rem;
}

.document-content .document-code-frame pre,
.document-content .highlighter-rouge pre,
.document-content .highlight pre {
  margin: 0;
}

.document-content pre code,
.document-content .document-code-block code,
.document-content .document-code-block-content {
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  white-space: inherit;
}

.document-content blockquote {
  border-left: 3px solid #c9d3df;
  color: #394150;
  margin: 1.15rem 0 1.45rem;
  padding: 0.1rem 0 0.1rem 1rem;
}

.document-content table {
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 1.3rem 0 1.7rem;
  min-width: 520px;
  width: 100%;
}

.document-content .document-table-frame {
  margin: 1.3rem 0 1.7rem;
  max-width: 100%;
  overflow-x: auto;
}

.document-content .document-table-frame table {
  margin: 0;
}

.document-content .document-table {
  max-width: 100%;
}

.document-content th,
.document-content td {
  border: 1px solid var(--rule);
  padding: 7px 9px;
  vertical-align: top;
}

.document-content .ltx_equation,
.document-content .ltx_para {
  max-width: 100%;
}

.document-content section {
  margin: 0 0 1.2rem;
}

.document-content figure {
  margin: 1.85rem auto 2.15rem;
  overflow-x: auto;
  text-align: center;
}

.document-content img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

.document-content .report-figure,
.document-content .document-figure {
  clear: both;
  max-width: 100%;
}

.document-content h1 + figure,
.document-content h2 + figure,
.document-content h3 + figure,
.document-content h4 + figure,
.document-content p + figure {
  margin-top: 1.2rem;
}

.document-content figcaption,
.document-content .ltx_caption {
  color: #5f6368;
  font-family: var(--ui);
  font-size: 0.82rem;
  line-height: 1.42;
  margin-top: 8px;
}

.document-content .paper-label {
  color: #5f6368;
  font-family: var(--ui);
  font-weight: 800;
}

.academic-document .document-title-block {
  margin-bottom: 24px;
}

.annotation-highlight,
.bookmark-highlight,
.source-note blockquote {
  transition: opacity 120ms ease;
}

.annotation-highlight {
  background: rgba(255, 229, 100, 0.52);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(214, 181, 46, 0.18);
  cursor: pointer;
}

.document-stage.dim-annotations .annotation-highlight {
  background: rgba(255, 229, 100, 0.25);
  box-shadow: 0 0 0 1px rgba(214, 181, 46, 0.09);
}

.document-stage.has-focused-annotation .annotation-highlight:not(.is-focused) {
  opacity: 0.42;
}

.annotation-highlight.is-focused {
  background: rgba(255, 229, 100, 0.82);
  box-shadow: 0 0 0 2px rgba(214, 181, 46, 0.42);
  opacity: 1;
}

.document-stage.dim-annotations.has-focused-annotation .annotation-highlight.is-focused {
  background: rgba(255, 229, 100, 0.82);
  box-shadow: 0 0 0 2px rgba(214, 181, 46, 0.42);
  opacity: 1;
}

.bookmark-highlight {
  background: color-mix(in srgb, #a83240 16%, transparent);
  border-bottom: 2px solid color-mix(in srgb, #a83240 72%, transparent);
}

.bookmark-highlight.is-focused {
  background: color-mix(in srgb, #a83240 24%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #a83240 24%, transparent);
}

.comment-margin {
  isolation: isolate;
  min-height: 100%;
  position: relative;
  z-index: 0;
}

.comment-margin[hidden] {
  display: none;
}

.margin-comments {
  min-height: 1px;
  position: relative;
}

@media (min-width: 861px) {
  .margin-comments {
    display: block;
  }
}

@media (max-width: 860px) {
  .margin-comments {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

.margin-comment,
.margin-composer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--note-rule);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--umber) 8%, transparent);
  color: var(--ink);
  font-family: var(--ui);
  padding: 8px 9px;
  width: 100%;
}

.margin-comment {
  flex-shrink: 0;
  font-size: 0.82rem;
  position: relative;
}

.document-stage.dim-annotations .margin-comment:not(:hover):not(:target):not(.is-focused) {
  opacity: 0.82;
}

.margin-comment:target,
.margin-comment.is-focused {
  border-color: #d6b13b;
  box-shadow: 0 0 0 3px rgba(241, 200, 75, 0.24), 0 3px 10px rgba(21, 24, 28, 0.12);
  opacity: 1;
  z-index: 2;
}

.margin-comment header,
.margin-composer-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.margin-comment header {
  margin-bottom: 5px;
}

.margin-comment header a {
  color: #5f6368;
  font-size: 0.76rem;
}

.margin-comment p {
  line-height: 1.42;
  margin: 0 0 6px;
}

.margin-replies {
  border-top: 1px solid #edf0f2;
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
}

.margin-replies article {
  border-left: 2px solid #dfe4e8;
  padding-left: 7px;
}

.margin-replies strong {
  display: block;
  font-size: 0.76rem;
  margin-bottom: 3px;
}

.margin-comment-meta,
.thread-comment-meta {
  align-items: baseline;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.margin-reply-head {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-bottom: 3px;
}

.comment-owner-actions {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
}

.icon-action {
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #5f6368;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 3px 6px;
  pointer-events: auto;
  touch-action: manipulation;
}

.icon-action:hover,
.icon-action:focus-visible {
  background: #f1f3f4;
  color: var(--ink);
  outline: none;
}

.icon-action.is-delete-pending {
  background: var(--danger-soft);
  color: var(--danger);
}

.margin-reply-children {
  border-left: 2px solid #dfe4e8;
  display: grid;
  gap: 6px;
  margin-left: 8px;
  margin-top: 6px;
  padding-left: 8px;
}

.margin-reply-item {
  border-left: 2px solid #dfe4e8;
  padding-left: 7px;
}

.comment-edit-form {
  margin-top: 6px;
}

.comment-edit-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.thread .comment > header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.margin-comment-actions,
.margin-reply-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
}

.margin-inline-reply {
  border-top: 1px solid #dfe4e8;
  margin-top: 7px;
  padding-top: 7px;
  position: relative;
  z-index: 1;
}

.margin-inline-reply-form {
  gap: 6px;
}

.margin-inline-reply textarea {
  margin: 0;
  min-height: 64px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.margin-inline-reply-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

.margin-inline-reply-actions[hidden] {
  display: none;
}

.margin-inline-reply-hint {
  color: var(--faint);
  font-size: 0.72rem;
  margin: 4px 0 0;
}

.margin-inline-reply textarea,
.margin-composer textarea {
  font-family: var(--ui);
  font-size: 0.82rem;
  resize: vertical;
}

.margin-composer textarea {
  min-height: 76px;
}

.margin-composer {
  border-left-color: var(--accent);
  position: absolute;
  top: 0;
  z-index: 2;
}

.margin-composer-label {
  color: #5f6368;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.margin-composer blockquote {
  background: #f8fafd;
  border-left: 2px solid #c9d6e5;
  color: #4c5661;
  font-size: 0.78rem;
  line-height: 1.38;
  margin: 0 0 9px;
  max-height: 92px;
  overflow: auto;
  padding: 7px 9px;
}

.margin-composer-actions {
  margin-top: 8px;
}

.document-empty {
  align-items: center;
  display: grid;
  min-height: 520px;
  place-items: center;
  text-align: center;
}

.document-empty h2 {
  margin-bottom: 8px;
}

.selection-toolbar {
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--umber) 22%, transparent);
  display: flex;
  gap: 2px;
  left: 0;
  padding: 3px;
  position: fixed;
  top: 0;
  z-index: var(--z-selection-toolbar);
}

.selection-toolbar[hidden] {
  display: none;
}

.selection-toolbar-btn {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--surface);
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0 12px;
}

.selection-toolbar-btn:hover {
  background: color-mix(in srgb, var(--surface) 16%, transparent);
}

.selection-toolbar-btn + .selection-toolbar-btn {
  border-left: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  border-radius: 0 999px 999px 0;
}

.selection-toolbar-btn:first-child {
  border-radius: 999px 0 0 999px;
}

.discussion-title {
  margin: 0 auto 12px;
  max-width: 816px;
}

.section-title {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 9px;
}

.section-title h2 {
  margin: 0;
}

.section-title span,
.backlink {
  color: var(--faint);
  font-size: 0.84rem;
}

.composer-inline,
.side-section,
.note-composer,
.story-tool {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.composer-inline > summary,
.side-section > summary,
.note-composer > summary,
.story-tool > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
  list-style-position: outside;
}

.composer-inline form,
.side-section form,
.note-composer form,
.story-tool form {
  margin-top: 12px;
}

.comment {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 17px 0;
}

.thread,
.composer-inline {
  margin-left: auto;
  margin-right: auto;
  max-width: 816px;
}

.comment:target,
.source-note:target {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 3px;
}

.comment header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.comment-body,
.source-note p,
.story-discussion-note p,
.rules-list p {
  line-height: 1.58;
  white-space: pre-wrap;
}

.notes-rail {
  position: sticky;
  top: 74px;
  padding: 26px 0 0 22px;
}

.side-section {
  background: transparent;
  border-color: var(--rule);
}

.side-section > summary {
  color: var(--ink);
  font-size: 0.98rem;
}

.source-notes {
  display: grid;
  gap: 12px;
}

.source-note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--note-rule);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--umber) 8%, transparent);
  padding: 12px;
}

.source-note blockquote {
  background: var(--note);
  border-color: transparent;
  margin: 9px 0;
  padding: 9px 11px;
}

.source-note-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.86rem;
  gap: 12px;
}

.report-box {
  font-size: 0.88rem;
  margin-top: 12px;
}

.report-box summary,
.note-discuss summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
}

.report-box form,
.note-discuss form {
  border: 1px solid var(--rule);
  margin-top: 10px;
  padding: 12px;
}

.note-discuss {
  margin-top: 10px;
}

.admin-tool-block {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
}

.admin-tool-block h3 {
  margin: 0 0 9px;
}

.empty-state {
  line-height: 1.5;
  padding: 20px;
}

.empty-state.compact {
  padding: 12px;
}

.empty-copy {
  color: var(--muted);
  font-style: italic;
}

.form-page,
.single-object,
.search-page,
.moderation-page,
.story-page,
.onboarding-page,
.rules-page,
.profile-page,
.admin-page {
  padding: 0;
}

.form-page {
  background: var(--surface);
  padding: 26px;
}

.form-page > .summary {
  margin: 0 0 18px;
}

.form-note {
  border-top: 1px solid var(--rule);
  margin-top: 16px;
  padding-top: 14px;
}

.search-box {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 18px;
  padding: 14px;
}

.search-summary {
  align-items: center;
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 12px;
}

.result-group {
  border-top: 1px solid var(--rule);
  margin-top: 24px;
  padding-top: 16px;
}

.article-card {
  margin-bottom: 12px;
  padding: 17px;
}

.article-card h2,
.article-card h3,
.compact-card h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 7px 0 9px;
}

.article-card footer {
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 12px;
  padding-top: 10px;
}

.topic-grid,
.admin-grid,
.onboarding-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.topic-card,
.admin-nav a,
.metric-line {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
  display: grid;
  gap: 6px;
  padding: 15px;
}

.topic-card span,
.admin-nav span,
.metric-line span,
.metric-line p {
  color: var(--muted);
  font-size: 0.86rem;
}

.shelves-hero,
.shelf-head {
  align-items: start;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.shelves-hero h1,
.shelf-head h1 {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1.02;
  margin: 0 0 12px;
  max-width: 760px;
}

.shelf-principles {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.shelf-principles span {
  border-bottom: 1px solid var(--rule);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 800;
  padding-bottom: 8px;
}

.shelf-principles span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.shelf-submit-panel,
.shelf-section-builder {
  display: grid;
  gap: 18px;
  grid-template-columns: 260px minmax(0, 1fr);
  margin-bottom: 18px;
  padding: 17px;
}

.shelf-submit-panel h2,
.shelf-section-builder h2,
.argument-section h2,
.unfiled-pieces h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0 0 7px;
}

.shelf-submit-panel p,
.shelf-section-builder p,
.argument-section header p,
.piece-row p,
.shelf-explainer p {
  color: var(--muted);
  margin: 0;
}

.shelf-submit-panel form,
.shelf-section-builder form,
.section-file-form {
  display: grid;
  gap: 11px;
}

.shelf-sort-note {
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
  margin: 8px 0 14px;
  padding: 10px 0;
}

.question-grid {
  display: grid;
  gap: 13px;
}

.question-card {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 340px 150px;
  padding: 18px;
}

.question-card h2 {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0 0 8px;
}

.question-card h2 a,
.piece-row h3 a {
  color: var(--ink);
}

.question-card p {
  color: var(--muted);
  margin: 0;
}

.question-card footer,
.shelf-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-card footer span,
.shelf-stats div {
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.84rem;
  padding: 9px;
}

.question-card footer strong,
.shelf-stats strong {
  color: var(--ink);
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
}

.question-card form {
  align-items: start;
  display: flex;
}

.shelf-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.shelves-compact-page {
  max-width: 980px;
}

.shelves-compact-head {
  align-items: end;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 14px;
}

.shelves-compact-head h1 {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  margin: 0;
}

.shelf-add-form {
  align-items: end;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.shelf-add-form[hidden] {
  display: none;
}

.shelf-add-form label {
  gap: 5px;
}

.shelf-add-form input {
  min-height: 38px;
}

.shelf-sort-tabs {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
  padding: 0 0 8px;
}

.shelf-sort-tabs a {
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 7px 10px;
}

.shelf-sort-tabs a:hover,
.shelf-sort-tabs a:focus {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.shelf-sort-tabs a.active {
  background: var(--surface);
  border-color: var(--rule);
  color: var(--ink);
}

.shelf-index {
  display: grid;
}

.shelf-row {
  align-items: start;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 14px;
  grid-template-columns: 86px minmax(0, 1fr);
  padding: 12px 0;
}

.shelf-row:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.shelf-vote {
  padding-top: 2px;
}

.shelf-vote .text-button {
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: left;
}

.shelf-vote .text-button:disabled {
  color: var(--faint);
  cursor: default;
}

.shelf-follow-btn.is-following {
  color: var(--ink);
}

.shelf-row-main h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0 0 3px;
}

.shelf-row-main h2 a {
  color: var(--ink);
}

.shelf-row-main p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0 0 7px;
}

.shelf-row-meta {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 9px;
}

.shelf-detail-page {
  max-width: 980px;
}

.shelf-detail-head {
  align-items: start;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
  padding-bottom: 14px;
}

.shelf-title-block h1 {
  font-family: var(--serif);
  font-size: 1.72rem;
  line-height: 1.1;
  margin: 0 0 8px;
  max-width: 760px;
}

.shelf-detail-tabs {
  margin-bottom: 10px;
}

.shelf-piece-sort {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.shelf-piece-sort a {
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 9px;
}

.shelf-piece-sort a:hover,
.shelf-piece-sort a:focus {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.shelf-piece-sort a.active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
}

.shelf-discussion-chat {
  display: grid;
  gap: 7px;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 420px;
}

.shelf-discussion-feed {
  background: var(--surface);
  border: 1px solid var(--rule);
  display: block;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding: 8px 10px;
}

.shelf-discussion-msg {
  border-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.32;
  margin: 0;
  padding: 0 0 5px;
}

.shelf-discussion-msg.is-grouped {
  margin-top: -2px;
}

.shelf-discussion-msg.is-grouped header {
  display: none;
}

.shelf-discussion-msg header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7rem;
  gap: 5px;
  justify-content: flex-start;
  margin-bottom: 1px;
}

.shelf-discussion-msg header time {
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 700;
}

.shelf-discussion-body {
  font-size: 0.78rem;
  line-height: 1.32;
  margin: 0;
  white-space: pre-wrap;
}

.shelf-discussion-composer {
  margin: 0;
  padding: 0;
}

.shelf-discussion-chat-bar {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  display: flex;
  gap: 4px;
  min-height: 38px;
  padding: 3px 4px 3px 12px;
}

.shelf-discussion-chat-bar textarea {
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 1;
  font-size: 0.78rem;
  line-height: 20px;
  max-height: 120px;
  min-height: 20px;
  overflow: hidden;
  padding: 0;
  resize: none;
}

.shelf-detail-meta {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 10px;
}

.shelf-follow-form {
  padding-top: 18px;
}

.shelf-file-panel {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
  padding: 0 0 12px;
}

.desk-picker summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  list-style: none;
  padding: 8px 0 10px;
}

.desk-picker summary::-webkit-details-marker {
  display: none;
}

.desk-picker summary > span:first-child {
  display: grid;
  gap: 2px;
}

.desk-picker summary small {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 800;
}

.desk-picker-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 42px rgba(38, 33, 25, 0.08);
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
}

.desk-picker-tools {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.desk-picker-tools label {
  gap: 5px;
}

.desk-picker-actions {
  display: flex;
  gap: 8px;
}

.desk-picker-list {
  border: 1px solid var(--rule);
  max-height: 420px;
  overflow: auto;
}

.desk-picker-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 11px 12px;
}

.desk-picker-item:last-child {
  border-bottom: 0;
}

.desk-picker-item:hover,
.desk-picker-item:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.desk-picker-item input {
  margin-top: 3px;
}

.desk-picker-copy {
  display: grid;
  gap: 4px;
}

.desk-picker-copy strong {
  color: var(--ink);
  line-height: 1.2;
}

.desk-picker-copy small,
.desk-picker-copy em {
  color: var(--faint);
  font-family: var(--ui);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.desk-picker-copy em {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.desk-picker-footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.desk-picker-footer span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.shelf-explainer {
  margin-bottom: 18px;
  padding: 14px 16px;
}

.shelf-explainer strong {
  color: var(--accent-ink);
}

.argument-list {
  display: grid;
  gap: 16px;
}

.argument-section,
.unfiled-pieces {
  padding: 17px;
}

.argument-section > header,
.unfiled-pieces > header {
  align-items: start;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.argument-section > header > span {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.piece-list {
  display: grid;
}

.piece-row {
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 130px;
  padding: 13px 0;
}

.piece-row-compact {
  display: block;
  padding: 12px 0;
}

.piece-row:first-child {
  padding-top: 0;
}

.piece-row:last-child {
  border-bottom: 0;
}

.piece-row h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.15;
  margin: 5px 0;
}

.piece-row-compact h3 {
  font-size: 1.14rem;
  margin: 0 0 4px;
}

.piece-row-compact:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.piece-row-meta {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 700;
  gap: 9px;
}

.piece-row aside {
  color: var(--muted);
  display: grid;
  font-size: 0.84rem;
  gap: 5px;
}

.piece-row aside strong {
  color: var(--ink);
}

.section-note,
.empty-inline {
  color: var(--muted);
  font-size: 0.9rem;
  margin: -4px 0 12px;
}

.section-file-form {
  border-top: 1px solid var(--rule);
  margin-top: 12px;
  padding-top: 12px;
}

.admin-nav {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0;
}

.metric-line strong {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
}

.story-head,
.onboarding-hero {
  margin-bottom: 16px;
  padding: 22px;
}

.panel {
  margin-bottom: 16px;
  padding: 16px;
}

.panel-head {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  padding-bottom: 9px;
}

.panel-head h2 {
  margin: 0;
}

.panel-head span {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.checklist {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.checklist li {
  display: grid;
  gap: 9px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.checklist li > span {
  border: 2px solid var(--rule-strong);
  display: inline-block;
  height: 15px;
  margin-top: 3px;
  width: 15px;
}

.checklist li.done > span {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.checklist.large {
  gap: 16px;
}

.checklist.large li {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 15px;
}

.checklist.large strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.rules-list {
  display: grid;
  gap: 10px;
}

.rules-list article {
  display: grid;
  gap: 16px;
  grid-template-columns: 44px minmax(0, 1fr);
}

.rule-number {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
}

.moderation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 22px;
  padding: 13px 15px;
}

.report-section {
  margin-top: 24px;
}

.status-pill,
.removed-badge {
  text-transform: uppercase;
}

.status-pill.open {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.status-pill.resolved {
  background: var(--ok-soft);
  color: var(--ok);
}

.status-pill.ignored,
.removed-badge {
  background: var(--surface-quiet);
  color: var(--muted);
}

.report-card {
  margin-bottom: 14px;
  padding: 16px;
}

.report-card header,
.reported-content-head,
.report-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.report-meta {
  color: var(--faint);
  font-size: 0.86rem;
}

.reported-content {
  border-top: 1px solid var(--rule);
  line-height: 1.55;
  margin-top: 14px;
  padding-top: 14px;
}

.invite-create {
  margin-bottom: 22px;
}

.invite-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.invite-list {
  display: grid;
  gap: 10px;
}

.invite-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px;
}

.invite-row strong {
  letter-spacing: 0.02em;
}

.invite-row p {
  color: var(--faint);
  font-size: 0.84rem;
  margin: 5px 0 0;
}

.story-link-list,
.suggestion-list,
.signal-list,
.topic-manage-list {
  display: grid;
  gap: 9px;
}

.story-link-card {
  border: 1px solid var(--rule);
  color: var(--ink);
  display: grid;
  gap: 3px;
  padding: 10px;
}

.story-link-card span {
  color: var(--faint);
  font-size: 0.82rem;
}

.suggestion-card,
.signal-card {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding-top: 12px;
}

.suggestion-score,
.signal-score {
  align-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.signal-card.high .signal-score {
  background: var(--danger-soft);
  color: var(--danger);
}

.signal-card.medium .signal-score {
  background: var(--note);
  color: #5e5016;
}

.signal-card header {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 9px;
  padding-bottom: 9px;
}

.signal-meta {
  color: var(--faint);
  font-size: 0.84rem;
}

.topic-manage-list form {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 8px;
}

.profile-hero {
  align-items: start;
  display: grid;
  gap: 16px 20px;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding: 22px;
  position: relative;
}

.profile-hero-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.profile-hero .profile-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.profile-hero .profile-identity {
  grid-column: 2;
  grid-row: 2;
}

.profile-editor {
  position: relative;
}

.profile-editor > summary {
  cursor: pointer;
  list-style: none;
}

.profile-editor > summary::-webkit-details-marker {
  display: none;
}

.profile-editor-form {
  background: var(--surface-quiet);
  border: 1px solid var(--rule);
  margin-top: 12px;
  max-width: 420px;
  padding: 14px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(420px, calc(100vw - 48px));
  z-index: 2;
}

.profile-articles .profile-piece-summary,
.profile-articles .piece-row-compact p:not(.piece-row-meta),
.search-articles .search-piece-summary {
  color: var(--muted);
  display: -webkit-box;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 6px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-articles .piece-row-compact h3 + .search-piece-summary {
  margin-top: 0;
}

.search-articles .piece-row-meta {
  margin-top: 6px;
}

.result-group .search-articles {
  margin-top: 4px;
}

.profile-mark {
  align-items: center;
  background: var(--ink);
  color: var(--surface);
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 900;
  height: 68px;
  justify-content: center;
  width: 68px;
}

.identity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.identity-badge.moderator {
  background: var(--ok-soft);
  color: var(--ok);
}

.profile-bio {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 12px 0;
}

.verification-note {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 14px 0 0;
  padding-top: 12px;
}

.profile-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0;
}

.profile-stats span {
  background: var(--surface);
  padding: 13px;
}

.profile-stats strong {
  color: var(--ink);
  display: block;
  font-size: 1.25rem;
}

.profile-contributions {
  margin-top: 22px;
}

.profile-card {
  margin-bottom: 12px;
}

.pager {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 18px;
}

.moderation-banner {
  background: var(--danger-soft);
  border: 1px solid rgba(163, 58, 47, 0.35);
  color: #6d241d;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 16px;
  padding: 12px 14px;
}

.footer {
  align-items: center;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 22px;
}

.footer a {
  color: var(--muted);
}

.site-version {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin-left: auto;
  max-width: min(320px, calc(100vw - 24px));
  pointer-events: none;
  text-align: right;
}

@media (max-width: 1100px) and (min-width: 861px) {
  .outline-overlay-panel {
    max-width: min(220px, 52vw);
    width: min(220px, 52vw);
  }

  .outline-list a {
    white-space: normal;
  }
}

@media (max-width: 860px) {
  .topbar,
  .page-head,
  .desk-head,
  .shelves-hero,
  .shelves-compact-head,
  .shelf-detail-head,
  .shelf-head,
  .comment header,
  .article-row,
  .question-card,
  .shelf-submit-panel,
  .shelf-add-form,
  .desk-picker-tools,
  .shelf-row,
  .shelf-section-builder,
  .piece-row,
  .invite-row,
  .desk-page.desk-selecting .desk-piece-row-selectable {
    gap: 8px;
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .desk-pieces-toolbar,
  .desk-toolbar-selecting {
    align-items: stretch;
  }

  .desk-bulk-selection-actions {
    width: 100%;
  }

  .folder-picker-dialog {
    border-radius: 10px 10px 0 0;
    bottom: 0;
    max-height: 88vh;
    top: auto;
    transform: translateX(-50%);
    width: 100%;
  }

  .folder-picker-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 8px 12px 8px 16px;
  }

  .folder-picker-row-add {
    grid-column: 2;
    justify-self: start;
  }

  .folder-picker-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .folder-picker-foot-actions {
    margin-left: 0;
    width: 100%;
  }

  .folder-picker-foot-actions .button {
    flex: 1 1 auto;
  }

  .desk-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .desk-bulk-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .desk-inbox-link {
    margin-left: 0;
  }

  .topbar,
  .page-head,
  .desk-head,
  .invite-row {
    flex-direction: column;
  }

  .topbar {
    align-items: flex-start;
  }

  .brand {
    max-width: 100%;
  }

  .brand-wordmark {
    width: min(10rem, 56vw);
  }

  .brand-mark {
    height: 24px;
    width: 24px;
  }

  nav {
    width: 100%;
  }

  .nav-bookmark-popover {
    left: 0;
    min-width: min(320px, calc(100vw - 36px));
    right: auto;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .topbar nav {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
    width: auto;
  }

  .mobile-nav-menu {
    display: block;
  }

  .topbar nav > .nav-link,
  .topbar nav > form,
  .topbar nav > .button {
    display: none;
  }

  .shell,
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .pieces-command-bar,
  .pieces-filter-card,
  .pieces-workspace,
  .piece-square-card {
    grid-template-columns: 1fr;
  }

  .pieces-command-bar {
    padding: 14px;
  }

  .pieces-discovery-stats,
  .piece-discovery-sort,
  .pieces-signal-guide dl {
    grid-template-columns: 1fr;
  }

  .pieces-discovery-stats span {
    min-height: 0;
  }

  .piece-discovery-sort a {
    justify-content: space-between;
    text-align: left;
  }

  .piece-discovery-sort a::after {
    display: inline;
  }

  .pieces-signal-guide dl div,
  .pieces-signal-guide dl div:first-child {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 9px 0;
  }

  .pieces-queue-head {
    align-items: start;
    flex-direction: column;
  }

  .piece-square-card {
    padding: 14px;
  }

  .piece-rank-block {
    align-items: center;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    justify-items: stretch;
    padding: 0 0 10px;
  }

  .piece-state {
    text-align: right;
  }

  .piece-signal-ledger,
  .piece-square-actions {
    grid-column: 1;
  }

  .piece-square-source,
  .piece-square-actions {
    gap: 6px;
  }

  .landing,
  .article-layout,
  .search-box,
  .invite-form,
  .profile-hero,
  .profile-stats,
  .admin-nav,
  .shelf-stats {
    grid-template-columns: 1fr;
  }

  .profile-hero-actions,
  .profile-hero .profile-mark,
  .profile-hero .profile-identity {
    grid-column: 1;
    grid-row: auto;
  }

  .profile-hero-actions {
    justify-self: start;
    margin-bottom: 4px;
  }

  .profile-editor-form {
    left: 0;
    position: static;
    width: 100%;
  }

  .reader-head {
    margin: -28px -18px 0;
    padding-left: 18px;
    padding-right: 18px;
    position: static;
  }

  .reader-titlebar {
    grid-template-columns: 1fr;
  }

  .article-layout {
    box-sizing: border-box;
    grid-template-columns: 1fr;
    margin-left: -18px;
    margin-right: -18px;
    overflow-x: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }

  .article-layout.has-piece-discussion {
    grid-template-columns: 1fr;
  }

  .piece-discussion-split {
    display: none !important;
  }

  .piece-discussion-panel {
    border-top: 1px solid var(--rule);
    max-height: none;
    min-height: 0;
    position: static;
    width: 100%;
  }

  .outline-overlay-panel {
    max-width: min(210px, 78vw);
    width: min(210px, 78vw);
  }

  .outline-list a {
    white-space: normal;
  }

  .discussion-column,
  .doc-workspace,
  .document-stage,
  .document-canvas,
  .document-page,
  .document-content {
    max-width: 100%;
    min-width: 0;
  }

  .doc-toolbar {
    box-sizing: border-box;
    max-width: none;
    position: static;
    width: 100%;
  }

  .doc-toolbar-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-stage {
    padding: 12px 0 26px;
  }

  .document-canvas {
    display: block;
  }

  .document-page {
    min-height: 0;
    padding: 34px 22px 34px 38px;
  }

  .bookmark-gutter {
    left: 12px;
  }

  .comment-margin {
    margin: 14px 6px 0;
    min-height: 0 !important;
  }

  .margin-comment,
  .margin-composer {
    margin-bottom: 10px;
    position: static !important;
  }

  .document-content {
    font-size: 0.96rem;
  }

  .document-content pre,
  .document-content .document-code-block {
    font-size: 0.76rem;
    margin: 1rem -4px 1.3rem;
    padding: 12px 13px;
  }

  .document-content figure {
    margin: 1.35rem -2px 1.65rem;
  }

  .document-content .document-table-frame {
    margin-left: -4px;
    margin-right: -4px;
  }

  .document-content table {
    min-width: 460px;
  }

  .document-title-block h2 {
    font-size: 1.55rem;
  }

  .landing h1 {
    font-size: 2.55rem;
  }

  .reader-head h1 {
    font-size: 1.35rem;
  }

  .desk-head h1,
  .page-head h1,
  .shelves-hero h1,
  .shelf-head h1,
  .single-object h1,
  .form-page h1,
  .moderation-page h1,
  .story-head h1,
  .profile-hero h1,
  .onboarding-hero h1 {
    font-size: 2rem;
  }

  .desk-picker summary,
  .desk-picker-actions,
  .desk-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .desk-picker summary .button,
  .desk-picker-actions .button,
  .desk-picker-footer .button {
    width: 100%;
  }
}

/* Desk organization refresh */
.desk-head-summary {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 6px 0 0;
  max-width: 52ch;
}

.desk-finder {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 224px minmax(0, 1fr);
  margin-bottom: 20px;
}

.desk-sidebar {
  background: color-mix(in srgb, var(--surface) 82%, white 18%);
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 8px;
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
}

.desk-sidebar-item {
  align-items: center;
  border-radius: 7px;
  color: var(--muted);
  display: grid;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 8px 10px;
  text-decoration: none;
}

.desk-sidebar-item:hover {
  background: color-mix(in srgb, #d8eafd 52%, var(--surface) 48%);
  color: var(--ink);
  text-decoration: none;
}

.desk-sidebar-item.is-active {
  background: color-mix(in srgb, #cfe8ff 70%, var(--surface) 30%);
  color: #123b5d;
}

.desk-sidebar-item strong {
  color: var(--faint);
  font-size: 0.78rem;
  justify-self: end;
}

.desk-workspace {
  min-width: 0;
}

.desk-toolbar {
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  border: 1px solid var(--rule);
  border-radius: 8px 8px 0 0;
  margin: 0;
  padding: 10px;
}

.desk-tabs {
  background: color-mix(in srgb, var(--canvas) 70%, white 30%);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 2px;
}

.desk-tab,
.desk-view-btn {
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 0.86rem;
  margin: 0;
  min-height: 34px;
  padding: 7px 13px;
}

.desk-tab:first-child,
.desk-tab:last-child,
.desk-view-btn:first-child,
.desk-view-btn:last-child {
  border-radius: 6px;
  margin: 0;
}

.desk-tab span {
  color: var(--faint);
  font-size: 0.76rem;
}

.desk-tab.is-active,
.desk-view-btn.is-active {
  background: white;
  box-shadow: 0 1px 2px rgba(23, 19, 15, 0.08);
  color: var(--ink);
}

.desk-view-toggle {
  background: color-mix(in srgb, var(--canvas) 70%, white 30%);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 2px;
}

.desk-current-head {
  align-items: end;
  background: color-mix(in srgb, var(--surface) 90%, white 10%);
  border: 1px solid var(--rule);
  border-top: 0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 20px;
}

.desk-current-kind {
  color: var(--faint);
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.desk-current-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  margin: 0;
}

.desk-current-stats {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 0.84rem;
  font-weight: 800;
  gap: 8px;
  justify-content: flex-end;
}

.desk-current-stats span {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 10px;
}

.desk-current-stats strong {
  color: var(--ink);
}

.desk-mail-toolbar {
  align-items: center;
  background: white;
  border: 1px solid var(--rule);
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 54px;
  padding: 10px 14px;
}

.desk-master-select {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0;
  justify-content: center;
  margin: 0;
  min-height: 32px;
  width: 32px;
}

.desk-tool-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 850;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
}

.desk-tool-btn:hover,
.desk-tool-btn:focus {
  background: color-mix(in srgb, #d8eafd 44%, white 56%);
  color: var(--ink);
  text-decoration: none;
}

.desk-tool-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.desk-shelf-action {
  position: relative;
}

.desk-shelf-action summary {
  cursor: pointer;
  list-style: none;
}

.desk-shelf-action summary::-webkit-details-marker {
  display: none;
}

.desk-shelf-popover {
  background: white;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(23, 19, 15, 0.16);
  display: grid;
  gap: 10px;
  min-width: 260px;
  padding: 12px;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 20;
}

.desk-mail-spacer {
  flex: 1 1 auto;
}

.desk-mail-tabs {
  background: white;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.desk-mail-tab {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  display: flex;
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 850;
  gap: 10px;
  min-height: 50px;
  padding: 0 18px;
}

.desk-mail-tab.is-active {
  border-bottom: 3px solid #1a73e8;
  color: #1558b0;
}

.desk-mail-list {
  background: white;
  border: 1px solid var(--rule);
  border-top: 0;
  display: grid;
}

.desk-piece-row.piece-row-compact {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, #d7dee9 58%, var(--rule) 42%);
  display: grid;
  gap: 12px;
  grid-template-columns: 32px minmax(120px, 180px) minmax(0, 1fr) 78px;
  min-height: 62px;
  padding: 9px 14px;
}

.desk-piece-row:first-child,
.desk-piece-row:last-child {
  padding-top: 9px;
}

.desk-piece-row:hover,
.desk-piece-row.is-selected,
.desk-piece-row:has(.sh-check:checked) {
  background: #edf4ff;
}

.desk-piece-select {
  align-items: center;
  display: inline-flex !important;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.desk-mail-source {
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.88rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-piece-main {
  min-width: 0;
}

.desk-piece-main h3 {
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.desk-piece-main h3 a {
  color: var(--ink);
}

.desk-mail-snippet {
  color: #5f6368;
  display: inline;
  font-family: var(--ui);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.desk-piece-row .piece-row-meta {
  color: var(--faint);
  display: inline-flex;
  font-size: 0.74rem;
  gap: 8px;
  margin-left: 8px;
}

.desk-mail-date {
  color: #4d5156;
  font-family: var(--ui);
  font-size: 0.8rem;
  font-weight: 850;
  justify-self: end;
  white-space: nowrap;
}

.desk-empty-mail {
  align-content: center;
  display: grid;
  min-height: 280px;
}

.desk-empty-icon {
  height: 36px;
  margin-bottom: 8px;
  width: 42px;
}

.desk-drive-top {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 90%, white 10%);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 20px;
}

.desk-drive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.desk-drive-chip {
  align-items: center;
  background: white;
  border: 1px solid #7d858b;
  border-radius: 7px;
  color: #3c4043;
  display: inline-flex;
  font-family: var(--ui);
  font-size: 0.84rem;
  font-weight: 800;
  min-height: 36px;
  padding: 0 15px;
}

.desk-drive-chip.is-active {
  background: #e8f0fe;
  border-color: #88a9df;
  color: #174ea6;
}

.desk-breadcrumb {
  background: color-mix(in srgb, var(--surface) 90%, white 10%);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  margin: 0;
  padding: 0 20px 12px;
}

.desk-folder-list {
  background: white;
  border: 1px solid var(--rule);
  display: grid;
}

.desk-drive-header {
  align-items: center;
  border-bottom: 1px solid #c9ced6;
  color: #3c4043;
  display: grid;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 850;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr) 180px 68px 34px;
  min-height: 38px;
  padding: 0 14px;
}

.desk-drive-name {
  grid-column: 1 / span 2;
}

.desk-folder-list .desk-folder-row {
  align-items: center;
  border-bottom: 1px solid #d7dee9;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr) 180px 68px 34px;
  min-height: 52px;
  padding: 6px 14px;
  text-decoration: none;
}

.desk-folder-list .desk-folder-row:hover {
  background: #f1f5fb;
  text-decoration: none;
}

.desk-folder-row-main {
  min-width: 0;
}

.desk-folder-row-main strong {
  color: var(--ink);
  display: block;
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-folder-row-main span,
.desk-drive-type,
.desk-drive-activity,
.desk-drive-count {
  color: #5f6368;
  font-family: var(--ui);
  font-size: 0.8rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-drive-count {
  justify-self: end;
}

.desk-folder-grid {
  background: white;
  border: 1px solid var(--rule);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  padding: 18px;
}

.desk-folder-card,
.desk-piece-card {
  background: #f2f6fc;
  border: 1px solid #d7dee9;
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 12px;
  min-height: 118px;
  padding: 14px;
  text-decoration: none;
}

.desk-folder-card:hover,
.desk-piece-card:hover {
  background: #eaf1fb;
  border-color: #b6c4d8;
  text-decoration: none;
}

.desk-folder-card-name,
.desk-piece-card-name {
  color: var(--ink);
  display: -webkit-box;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.25;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.desk-folder-card-meta,
.desk-piece-card-meta {
  color: #5f6368;
  font-family: var(--ui);
  font-size: 0.8rem;
  font-weight: 750;
}

.desk-folder-create-form,
.desk-add-pieces-form {
  background: white;
  border-radius: 8px;
}

.desk-folder-create-inline {
  border-bottom: 1px solid var(--rule);
  border-top: 0;
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 18px;
}

.desk-folder-add-row summary {
  list-style: none;
}

.desk-folder-add-trigger {
  color: var(--muted);
}

.desk-folder-add-trigger strong {
  color: var(--muted);
}

.desk-list-meta,
.desk-bulk-count {
  font-family: var(--ui);
}

.desk-icon-folder,
.desk-icon-inbox,
.desk-icon-shelf,
.desk-icon-piece,
.desk-icon-plus,
.desk-tool-icon,
.desk-sidebar-icon,
.desk-mail-tab-icon,
.desk-folder-row-icon,
.desk-folder-card-icon,
.desk-piece-card-icon {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
}

.desk-icon-folder,
.desk-folder-row-icon.desk-icon-folder,
.desk-folder-card-icon.desk-icon-folder {
  background: var(--folder-color, #5f6368);
  border: 0;
  border-radius: 2px;
  height: 16px;
  width: 22px;
}

.desk-icon-folder::before {
  background: var(--folder-color, #5f6368);
  border-radius: 2px 2px 0 0;
  content: "";
  height: 5px;
  left: 2px;
  position: absolute;
  top: -4px;
  width: 10px;
}

.desk-icon-inbox {
  border: 2px solid #5f6368;
  border-radius: 3px 3px 5px 5px;
  height: 18px;
  width: 22px;
}

.desk-icon-inbox::after {
  background: #5f6368;
  border-radius: 2px;
  bottom: -2px;
  content: "";
  height: 5px;
  left: 5px;
  position: absolute;
  width: 8px;
}

.desk-icon-shelf {
  border: 2px solid var(--accent);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  height: 20px;
  width: 15px;
}

.desk-icon-shelf::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--accent);
  bottom: -5px;
  content: "";
  left: 1px;
  position: absolute;
}

.desk-icon-piece {
  background: #4285f4;
  border: 0;
  border-radius: 2px;
  height: 22px;
  width: 18px;
}

.desk-icon-piece::before,
.desk-icon-piece::after {
  background: white;
  border-radius: 1px;
  content: "";
  height: 2px;
  left: 4px;
  position: absolute;
  width: 10px;
}

.desk-icon-piece::before {
  top: 7px;
}

.desk-icon-piece::after {
  top: 12px;
}

.desk-icon-plus {
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  height: 22px;
  width: 22px;
}

.desk-icon-plus::before,
.desk-icon-plus::after {
  background: var(--muted);
  content: "";
  left: 5px;
  position: absolute;
  top: 10px;
}

.desk-icon-plus::before {
  height: 2px;
  width: 10px;
}

.desk-icon-plus::after {
  height: 10px;
  left: 9px;
  top: 6px;
  width: 2px;
}

@media (max-width: 980px) {
  .desk-finder {
    grid-template-columns: 1fr;
  }

  .desk-sidebar {
    display: flex;
    overflow-x: auto;
    position: static;
  }

  .desk-sidebar-item {
    min-width: max-content;
  }

  .desk-current-head,
  .desk-mail-toolbar,
  .desk-drive-top {
    align-items: stretch;
    flex-direction: column;
  }

  .desk-current-stats {
    justify-content: flex-start;
  }

  .desk-mail-spacer {
    display: none;
  }

  .desk-mail-tabs {
    grid-template-columns: 1fr;
  }

  .desk-piece-row.piece-row-compact {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .desk-mail-source {
    grid-column: 2 / 3;
  }

  .desk-piece-main {
    grid-column: 2 / 4;
  }

  .desk-mail-date {
    grid-column: 3;
    grid-row: 1;
  }

  .desk-drive-header {
    display: none;
  }

  .desk-folder-list .desk-folder-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .desk-drive-type,
  .desk-drive-activity,
  .desk-drive-count {
    display: none;
  }

  .desk-folder-row .desk-more-btn {
    grid-column: 3;
  }
}

@media (max-width: 640px) {
  .desk-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .desk-sidebar-item {
    min-width: 0;
  }

  .desk-current-head,
  .desk-mail-toolbar,
  .desk-drive-top,
  .desk-folder-grid {
    padding: 12px;
  }

  .desk-tab,
  .desk-view-btn,
  .desk-tool-btn {
    flex: 1 1 auto;
  }

  .desk-shelf-action {
    width: 100%;
  }

  .desk-shelf-action summary,
  .desk-shelf-popover {
    width: 100%;
  }

  .desk-shelf-popover {
    position: static;
    margin-top: 8px;
  }

  .desk-folder-grid {
    grid-template-columns: 1fr;
  }
}

/* Desk browser focus pass */
body:has(.desk-browser-page) .shell {
  max-width: none;
  padding: 16px 24px 48px;
}

.desk-browser-page {
  margin: 0;
  max-width: none;
}

.desk-browser-shell {
  display: block;
  margin: 0;
}

.desk-browser-page .desk-workspace {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  min-height: calc(100vh - var(--topbar-height) - 120px);
  overflow: clip;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.desk-browser-page .desk-workspace.is-drop-target {
  border-color: #1a73e8;
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.desk-browser-toolbar {
  align-items: center;
  background: #fffdf7;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 16px;
}

.desk-browser-titlebar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.desk-browser-title {
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
}

.desk-browser-crumb,
.desk-browser-titlebar .desk-breadcrumb-current,
.desk-browser-titlebar .desk-breadcrumb a {
  align-items: center;
  border-radius: 999px;
  color: #3c4043;
  display: inline-flex;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  min-height: 34px;
  padding: 6px 10px;
}

.desk-browser-titlebar .desk-breadcrumb {
  background: transparent;
  border: 0;
  font-size: 0.95rem;
  gap: 3px;
  margin: 0;
  padding: 0;
}

.desk-browser-titlebar .desk-breadcrumb a {
  color: #5f6368;
}

.desk-browser-titlebar .desk-breadcrumb a:hover,
.desk-browser-crumb:hover,
.desk-browser-titlebar .desk-breadcrumb a.is-drop-target,
.desk-browser-titlebar .desk-breadcrumb-current.is-drop-target {
  background: #e8f0fe;
  color: #174ea6;
  text-decoration: none;
}

.desk-browser-titlebar .desk-breadcrumb-current {
  background: #f4f6f8;
  color: var(--ink);
}

.desk-breadcrumb-sep {
  color: #7b7974;
  font-family: var(--ui);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.desk-browser-count {
  color: var(--faint);
  font-family: var(--ui);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.desk-browser-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.desk-browser-link,
.desk-folder-add-menu summary {
  align-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--accent-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 850;
  gap: 6px;
  list-style: none;
  min-height: 32px;
  padding: 5px 8px;
}

.desk-browser-link:hover,
.desk-folder-add-menu summary:hover {
  background: #f4eee4;
  color: var(--ink);
  text-decoration: none;
}

.desk-browser-icon-action {
  justify-content: center;
  min-width: 36px;
  padding: 0;
  width: 36px;
}

.desk-action-icon {
  color: currentColor;
  flex: 0 0 18px;
  height: 18px;
  position: relative;
  width: 18px;
}

.desk-action-icon::before,
.desk-action-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.desk-action-icon-search::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 11px;
  left: 2px;
  top: 2px;
  width: 11px;
}

.desk-action-icon-search::after {
  background: currentColor;
  border-radius: 999px;
  height: 2px;
  left: 11px;
  top: 12px;
  transform: rotate(45deg);
  width: 7px;
}

.desk-action-icon-add-piece::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 16px;
  left: 1px;
  top: 1px;
  width: 16px;
}

.desk-action-icon-add-piece::after {
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
  height: 14px;
  left: 2px;
  top: 2px;
  width: 14px;
}

.desk-action-icon-new-folder::before {
  background: currentColor;
  border-radius: 3px;
  bottom: 2px;
  height: 10px;
  left: 1px;
  width: 16px;
}

.desk-action-icon-new-folder::after {
  background:
    linear-gradient(white, white) center / 8px 2px no-repeat,
    linear-gradient(white, white) center / 2px 8px no-repeat,
    currentColor;
  border-radius: 2px 2px 0 0;
  height: 9px;
  left: 4px;
  top: 2px;
  width: 11px;
}

.desk-folder-add-menu {
  position: relative;
}

.desk-folder-add-menu summary::-webkit-details-marker {
  display: none;
}

.desk-folder-create-menu {
  box-shadow: 0 16px 36px rgba(23, 19, 15, 0.16);
  min-width: 280px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
}

.desk-browser-page .desk-view-toggle {
  border-radius: 999px;
  min-height: 36px;
}

.desk-browser-page .desk-view-btn {
  border-radius: 999px;
  min-height: 30px;
}

.desk-browser-page .desk-view-icon-btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 38px;
  padding: 0;
}

.desk-view-icon {
  color: currentColor;
  height: 18px;
  position: relative;
  width: 18px;
}

.desk-view-icon::before,
.desk-view-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.desk-view-icon-list::before {
  background:
    linear-gradient(currentColor, currentColor) left 1px / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 7px / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 13px / 16px 2px no-repeat;
  height: 18px;
  left: 1px;
  top: 0;
  width: 16px;
}

.desk-view-icon-grid::before {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 0 / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 0 12px / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 12px / 6px 6px no-repeat;
  height: 18px;
  left: 0;
  top: 0;
  width: 18px;
}

.desk-browser-page .desk-folder-grid {
  border: 0;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  padding: 18px;
}

.desk-browser-page .desk-folder-list {
  border: 0;
}

.desk-browser-page .desk-drive-header {
  grid-template-columns: 30px minmax(0, 1fr) 190px 72px 34px;
  min-height: 40px;
  padding: 0 18px;
}

.desk-browser-page .desk-folder-list .desk-folder-row {
  grid-template-columns: 30px minmax(0, 1fr) 190px 72px 34px;
  min-height: 52px;
  padding: 6px 18px;
  position: relative;
}

.desk-browser-page .desk-folder-card,
.desk-browser-page .desk-piece-card {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  min-height: 96px;
  position: relative;
}

.desk-browser-page .desk-folder-card-name,
.desk-browser-page .desk-piece-card-name {
  grid-column: 1 / -1;
}

.desk-browser-page .desk-folder-card-meta,
.desk-browser-page .desk-piece-card-meta {
  grid-column: 1 / -1;
}

.desk-more-btn {
  align-items: center;
  border-radius: 999px;
  color: #5f6368;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ui);
  font-size: 1.2rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  justify-self: end;
  line-height: 1;
  width: 28px;
}

.desk-more-btn:hover,
.desk-more-btn:focus {
  background: #e8eef7;
  color: var(--ink);
  outline: none;
  text-decoration: none;
}

.desk-folder-card .desk-more-btn,
.desk-piece-card .desk-more-btn {
  grid-column: 3;
  grid-row: 1;
}

.desk-folder-row .desk-more-btn {
  grid-column: 5;
}

.desk-folder-row.is-dragging,
.desk-folder-card.is-dragging,
.desk-piece-card.is-dragging,
.desk-folder-row-piece.is-dragging {
  opacity: 0.46;
}

.desk-folder-row.is-drop-target,
.desk-folder-card.is-drop-target,
.desk-folder-drop-crumb.is-drop-target {
  background: #dff0ff !important;
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.desk-folder-drop-crumb {
  cursor: grab;
}

.desk-context-menu {
  background: white;
  border: 1px solid rgba(52, 48, 44, 0.22);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(23, 19, 15, 0.24);
  display: grid;
  min-width: 292px;
  overflow: visible;
  padding: 7px 0;
  position: fixed;
  z-index: 500;
}

.desk-context-menu[hidden] {
  display: none;
}

.desk-context-group[hidden],
.desk-context-submenu[hidden] {
  display: none;
}

.desk-context-group {
  display: grid;
  padding: 3px 0;
}

.desk-context-group + .desk-context-group {
  border-top: 1px solid rgba(52, 48, 44, 0.14);
}

.desk-context-menu button,
.desk-context-empty,
.desk-context-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #202124;
  display: flex;
  gap: 14px;
  font-family: var(--ui);
  font-size: 0.98rem;
  font-weight: 700;
  justify-content: flex-start;
  line-height: 1.2;
  min-height: 44px;
  padding: 0 18px;
  text-align: left;
  width: 100%;
}

.desk-context-menu button:hover,
.desk-context-menu button:focus {
  background: #edf3fb;
  outline: none;
}

.desk-context-menu button[hidden] {
  display: none;
}

.desk-context-submenu {
  position: relative;
}

.desk-context-has-submenu::after {
  color: #5f6368;
  content: "›";
  margin-left: auto;
}

.desk-context-submenu-panel {
  background: white;
  border: 1px solid rgba(52, 48, 44, 0.22);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(23, 19, 15, 0.18);
  display: none;
  left: calc(100% - 4px);
  max-height: 320px;
  min-width: 276px;
  overflow: auto;
  padding: 7px 0;
  position: absolute;
  top: 0;
}

.desk-context-submenu:hover .desk-context-submenu-panel,
.desk-context-submenu:focus-within .desk-context-submenu-panel {
  display: grid;
}

.desk-context-empty {
  color: var(--faint);
  cursor: default;
  font-size: 0.82rem;
}

.desk-menu-icon {
  color: #5f6368;
  flex: 0 0 22px;
  height: 22px;
  position: relative;
  width: 22px;
}

.desk-menu-icon::before,
.desk-menu-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.desk-menu-icon-open::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  height: 14px;
  left: 2px;
  top: 6px;
  width: 14px;
}

.desk-menu-icon-search::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 13px;
  left: 2px;
  top: 2px;
  width: 13px;
}

.desk-menu-icon-search::after {
  background: currentColor;
  border-radius: 999px;
  height: 2px;
  left: 13px;
  top: 14px;
  transform: rotate(45deg);
  width: 7px;
}

.desk-menu-icon-add-piece::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 18px;
  left: 2px;
  top: 2px;
  width: 18px;
}

.desk-menu-icon-add-piece::after {
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
  height: 16px;
  left: 3px;
  top: 3px;
  width: 16px;
}

.desk-menu-icon-new-folder::before {
  background: currentColor;
  border-radius: 4px 4px 3px 3px;
  bottom: 3px;
  height: 13px;
  left: 1px;
  width: 19px;
}

.desk-menu-icon-new-folder::after {
  background:
    linear-gradient(white, white) center / 8px 2px no-repeat,
    linear-gradient(white, white) center / 2px 8px no-repeat,
    currentColor;
  border-radius: 3px 3px 0 0;
  height: 10px;
  left: 6px;
  top: 3px;
  width: 12px;
}

.desk-menu-icon-open::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  height: 8px;
  right: 2px;
  top: 2px;
  transform: rotate(45deg);
  width: 8px;
}

.desk-menu-icon-rename::before {
  background: currentColor;
  border-radius: 999px;
  height: 4px;
  left: 3px;
  top: 11px;
  transform: rotate(-42deg);
  width: 17px;
}

.desk-menu-icon-rename::after {
  border-bottom: 2px solid currentColor;
  bottom: 3px;
  left: 2px;
  width: 17px;
}

.desk-menu-icon-move::before,
.desk-menu-icon-folder-small::before {
  background: currentColor;
  border-radius: 4px 4px 3px 3px;
  bottom: 4px;
  height: 12px;
  left: 2px;
  width: 18px;
}

.desk-menu-icon-move::after,
.desk-menu-icon-folder-small::after {
  background: currentColor;
  border-radius: 3px 3px 0 0;
  height: 5px;
  left: 4px;
  top: 4px;
  width: 9px;
}

.desk-menu-icon-remove::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  height: 16px;
  left: 3px;
  top: 3px;
  width: 16px;
}

.desk-menu-icon-remove::after {
  background: currentColor;
  height: 2px;
  left: 7px;
  top: 10px;
  width: 8px;
}

.desk-menu-icon-trash::before {
  border: 2px solid currentColor;
  border-radius: 2px;
  height: 14px;
  left: 5px;
  top: 6px;
  width: 12px;
}

.desk-menu-icon-trash::after {
  border-top: 2px solid currentColor;
  left: 3px;
  top: 3px;
  width: 16px;
}

.desk-context-danger-group button:hover,
.desk-context-danger-group button:focus {
  background: #fbefec;
  color: var(--rust);
}

.desk-rename-dialog {
  align-items: center;
  background: rgba(23, 19, 15, 0.34);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 20px;
  position: fixed;
  z-index: 520;
}

.desk-rename-dialog[hidden] {
  display: none;
}

.desk-rename-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(23, 19, 15, 0.24);
  display: grid;
  gap: 12px;
  max-width: min(420px, 100%);
  padding: 18px;
  width: 100%;
}

.desk-rename-card h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0;
}

.desk-rename-error {
  color: var(--danger);
  font-family: var(--ui);
  font-size: 0.86rem;
  font-weight: 800;
  margin: 0;
}

.desk-rename-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.desk-toast {
  background: #202124;
  border-radius: 6px;
  bottom: 22px;
  box-shadow: 0 12px 28px rgba(23, 19, 15, 0.24);
  color: white;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 800;
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 600;
}

.desk-toast[data-tone="error"] {
  background: var(--danger);
}

@media (max-width: 860px) {
  body:has(.desk-browser-page) .shell {
    padding: 12px;
  }

  .desk-browser-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .desk-browser-actions {
    justify-content: flex-start;
  }

  .desk-browser-page .desk-drive-header {
    display: none;
  }

  .desk-browser-page .desk-folder-list .desk-folder-row {
    grid-template-columns: 30px minmax(0, 1fr) 34px;
  }

  .desk-browser-page .desk-drive-type,
  .desk-browser-page .desk-drive-activity,
  .desk-browser-page .desk-drive-count {
    display: none;
  }

  .desk-folder-row .desk-more-btn {
    grid-column: 3;
  }

  .desk-context-submenu-panel {
    left: 12px;
    right: 12px;
    top: calc(100% - 2px);
  }
}

/* Pieces social feed */
.pieces-social-page {
  max-width: 760px;
}

.pieces-feed-toolbar {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin: 0 auto 10px;
}

.pieces-feed-title {
  min-width: 0;
}

.pieces-feed-title h1 {
  font-family: var(--serif);
  font-size: 2.05rem;
  line-height: 1;
  margin: 0;
}

.pieces-feed-title p {
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 800;
  margin: 3px 0 0;
}

.pieces-feed-sort {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border: 1px solid var(--rule);
  border-radius: 999px;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
}

.pieces-sort-tab {
  align-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 900;
  gap: 6px;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.pieces-sort-tab::after {
  content: none;
  display: none;
}

.pieces-sort-tab:hover,
.pieces-sort-tab:focus {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.pieces-sort-tab.active {
  background: var(--ink);
  color: var(--surface);
}

.pieces-sort-icon,
.pieces-feed-add-icon,
.pieces-feed-principle-icon,
.piece-feed-icon,
.piece-feed-menu-icon,
.piece-overflow-icon {
  color: currentColor;
  display: inline-block;
  flex: 0 0 18px;
  height: 18px;
  position: relative;
  width: 18px;
}

.pieces-sort-icon::before,
.pieces-sort-icon::after,
.pieces-feed-add-icon::before,
.pieces-feed-add-icon::after,
.pieces-feed-principle-icon::before,
.pieces-feed-principle-icon::after,
.piece-feed-icon::before,
.piece-feed-icon::after,
.piece-feed-menu-icon::before,
.piece-feed-menu-icon::after,
.piece-overflow-icon::before,
.piece-overflow-icon::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.pieces-sort-icon-active::before,
.pieces-feed-principle-icon::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 14px;
  left: 2px;
  top: 2px;
  width: 14px;
}

.pieces-sort-icon-active::after {
  background: currentColor;
  height: 8px;
  left: 8px;
  top: 3px;
  transform: rotate(40deg);
  transform-origin: bottom;
  width: 2px;
}

.pieces-feed-principle-icon::after {
  background: currentColor;
  border-radius: 999px;
  height: 7px;
  left: 8px;
  top: 7px;
  width: 2px;
}

.pieces-sort-icon-new::before {
  border-bottom: 14px solid currentColor;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 1px;
  top: 2px;
  width: 0;
}

.pieces-sort-icon-comments::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 14px;
  left: 1px;
  top: 2px;
  width: 16px;
}

.pieces-sort-icon-comments::after {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  height: 6px;
  left: 4px;
  top: 12px;
  transform: rotate(-18deg);
  width: 7px;
}

.pieces-sort-icon-views::before,
.piece-feed-icon-eye::before {
  border: 2px solid currentColor;
  border-radius: 50% 50% 45% 45%;
  height: 12px;
  left: 1px;
  top: 3px;
  transform: rotate(45deg);
  width: 16px;
}

.pieces-sort-icon-views::after,
.piece-feed-icon-eye::after {
  background: currentColor;
  border-radius: 999px;
  height: 5px;
  left: 7px;
  top: 7px;
  width: 5px;
}

.pieces-feed-add {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(23, 19, 15, 0.12);
  color: white;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.pieces-feed-add:hover,
.pieces-feed-add:focus {
  background: var(--accent-ink);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}

.pieces-feed-add-icon::before,
.pieces-feed-add-icon::after {
  background: currentColor;
  border-radius: 2px;
  left: 3px;
  top: 8px;
}

.pieces-feed-add-icon::before {
  height: 2px;
  width: 12px;
}

.pieces-feed-add-icon::after {
  height: 12px;
  left: 8px;
  top: 3px;
  width: 2px;
}

.pieces-feed-principle {
  align-items: center;
  color: var(--faint);
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 7px;
  line-height: 1.3;
  margin: 0 0 12px;
  padding: 0 2px;
}

.pieces-feed-principle-icon {
  color: var(--olive-ink);
}

.pieces-feed-stack {
  display: grid;
  gap: 18px;
}

.piece-feed-card {
  background: color-mix(in srgb, var(--surface) 96%, white 4%);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(59, 47, 42, 0.05);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: visible;
  padding: 0;
  position: relative;
}

.piece-feed-card:hover {
  background: color-mix(in srgb, var(--surface) 98%, white 2%);
  border-color: color-mix(in srgb, var(--umber) 24%, var(--canvas) 76%);
}

.piece-feed-card:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.piece-feed-card-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding: 12px 14px 10px;
}

.piece-feed-avatar {
  align-items: center;
  background: var(--ink);
  border-radius: 6px;
  color: var(--surface);
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 900;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.piece-feed-avatar:hover,
.piece-feed-avatar:focus {
  color: var(--surface);
  text-decoration: none;
}

.piece-feed-byline {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.piece-feed-byline strong,
.piece-feed-byline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-feed-byline strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.1;
}

.piece-feed-byline span {
  color: var(--faint);
  font-size: 0.77rem;
  font-weight: 800;
}

.piece-feed-byline a {
  color: var(--accent-ink);
}

.piece-feed-state {
  background: color-mix(in srgb, var(--olive-soft) 78%, white 22%);
  border: 1px solid color-mix(in srgb, var(--olive) 26%, var(--surface) 74%);
  border-radius: 999px;
  color: var(--olive-ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.piece-feed-preview {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  display: grid;
  gap: 0;
}

.piece-feed-preview:hover,
.piece-feed-preview:focus {
  color: var(--ink);
  text-decoration: none;
}

.piece-feed-preview:hover .piece-preview-open,
.piece-feed-preview:focus .piece-preview-open {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: white;
}

.piece-preview-source {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--olive-soft) 64%, white 36%), transparent 70%),
    color-mix(in srgb, var(--surface-quiet) 56%, white 44%);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 11px;
  min-height: 132px;
  padding: 18px 20px;
}

.piece-preview-source-head {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 900;
  gap: 8px;
}

.piece-preview-source-mark {
  align-items: center;
  background: var(--ink);
  border-radius: 5px;
  color: var(--surface);
  display: inline-flex;
  font-family: var(--serif);
  height: 26px;
  justify-content: center;
  width: 26px;
}

.piece-preview-source p {
  color: var(--umber);
  display: -webkit-box;
  font-size: 1.03rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.piece-preview-open {
  align-self: end;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 900;
  justify-self: start;
  line-height: 1;
  padding: 7px 10px;
}

.piece-preview-copy {
  display: grid;
  gap: 9px;
  padding: 16px 18px 17px;
}

.piece-preview-kicker {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.76rem;
  font-weight: 900;
  gap: 7px 12px;
}

.piece-preview-copy h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.06rem);
  line-height: 1.05;
  margin: 0;
}

.piece-feed-card .piece-topic-strip {
  margin-top: 1px;
}

.piece-feed-card .piece-topic-chip {
  font-size: 0.71rem;
  padding: 4px 7px;
}

.piece-feed-actions {
  align-items: center;
  display: flex;
  gap: 7px;
  padding: 9px 12px 6px;
}

.piece-feed-actions form {
  margin: 0;
}

.piece-action-count,
.piece-icon-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  gap: 5px;
  min-height: 34px;
  padding: 4px 8px;
}

.piece-action-count:hover,
.piece-action-count:focus,
.piece-icon-button:hover,
.piece-icon-button:focus,
.piece-feed-overflow[open] .piece-more-button {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.piece-icon-button {
  cursor: pointer;
  justify-content: center;
  width: 36px;
}

.piece-icon-button.is-saved {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.piece-feed-action-spacer {
  flex: 1 1 auto;
}

.piece-feed-icon-bookmark::before {
  border: 2px solid currentColor;
  border-bottom: 0;
  height: 16px;
  left: 4px;
  top: 1px;
  width: 10px;
}

.piece-feed-icon-bookmark::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  left: 4px;
  top: 11px;
}

.piece-feed-menu-icon::before {
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2px) 2px 8px / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 0 2px, transparent 2px) 8px 8px / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 0 2px, transparent 2px) 14px 8px / 4px 4px no-repeat;
  inset: 0;
}

.piece-feed-overflow {
  position: relative;
}

.piece-feed-overflow summary {
  list-style: none;
}

.piece-feed-overflow summary::-webkit-details-marker {
  display: none;
}

.piece-feed-overflow-menu {
  background: white;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: 0 14px 32px rgba(23, 19, 15, 0.18);
  display: grid;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
}

.piece-feed-overflow-menu a,
.piece-feed-overflow-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 9px;
  min-height: 36px;
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}

.piece-feed-overflow-menu a:hover,
.piece-feed-overflow-menu a:focus,
.piece-feed-overflow-menu button:hover,
.piece-feed-overflow-menu button:focus {
  background: var(--surface-quiet);
  color: var(--accent-ink);
  text-decoration: none;
}

.piece-overflow-icon-source::before {
  border: 2px solid currentColor;
  border-radius: 2px;
  height: 14px;
  left: 2px;
  top: 2px;
  width: 14px;
}

.piece-overflow-icon-source::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  height: 7px;
  left: 8px;
  top: 2px;
  width: 7px;
}

.piece-overflow-icon-hide::before,
.piece-overflow-icon-hide::after {
  background: currentColor;
  height: 2px;
  left: 3px;
  top: 8px;
  width: 12px;
}

.piece-overflow-icon-hide::before {
  transform: rotate(45deg);
}

.piece-overflow-icon-hide::after {
  transform: rotate(-45deg);
}

.piece-feed-card-foot {
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.73rem;
  font-weight: 800;
  gap: 6px 12px;
  padding: 0 16px 13px;
}

.pieces-feed-pager {
  border: 0;
  padding: 18px 0 0;
}

.pieces-feed-empty {
  margin-top: 12px;
}

@media (max-width: 760px) {
  body:has(.pieces-social-page) .shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pieces-social-page {
    max-width: 100%;
  }

  .pieces-feed-toolbar {
    align-items: stretch;
    grid-template-columns: 1fr 40px;
  }

  .pieces-feed-title {
    grid-column: 1;
  }

  .pieces-feed-title h1 {
    font-size: 1.85rem;
  }

  .pieces-feed-sort {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
  }

  .pieces-feed-add {
    grid-column: 2;
    grid-row: 1;
  }

  .pieces-sort-tab {
    flex: 0 0 auto;
    padding: 7px 9px;
  }

  .pieces-feed-principle {
    font-size: 0.76rem;
  }

  .piece-feed-card-head {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 10px 11px;
  }

  .piece-feed-avatar {
    height: 34px;
    width: 34px;
  }

  .piece-feed-state {
    font-size: 0.62rem;
    padding: 5px 7px;
  }

  .piece-preview-source {
    min-height: 118px;
    padding: 15px;
  }

  .piece-preview-source p {
    font-size: 0.96rem;
    -webkit-line-clamp: 4;
  }

  .piece-preview-copy {
    padding: 13px;
  }

  .piece-preview-copy h2 {
    font-size: 1.35rem;
  }

  .piece-feed-actions {
    gap: 3px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .piece-action-count,
  .piece-icon-button {
    padding-left: 6px;
    padding-right: 6px;
  }
}