/* Objects — shared cross-screen primitives: a11y + page helpers, base
   heading sizes, section scaffolding, sort/heading controls, buttons, meta, tag */

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

.page {
  width: min(var(--content-width), 100%);
  min-height: calc(100vh - var(--topbar-height));
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  background: var(--paper);
}

/* Wide mode: let the sheet fill the viewport edge to edge, while keeping the
   regular view's comfortable 40px content inset. Below the cap min() already
   resolves to the same width, so this is a desktop no-op. */
body.is-wide {
  --content-width: 100%;
}

body.is-wide .page,
body.is-wide .topbar-inner {
  width: 100%;
  padding-inline: clamp(var(--space-4), 3vw, calc(var(--space-5) + var(--space-4)));
}
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: var(--space-4);
  font-size: clamp(2.5rem, 7vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: 0;
}
.dashboard-section,
.empty-state {
  display: grid;
  gap: var(--space-4);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Reserve the carousel rocker's height (32px) so the heading row keeps a constant
   height whether or not the rocker is showing. Without this, a track crossing its
   overflow threshold during a resize toggles the rocker and the row collapses/grows,
   jiggling all the content below it vertically. */
.section-heading-with-action {
  min-height: 32px;
}

.section-icon-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.18rem;
  font-weight: 520;
  line-height: 1;
}

.section-icon-button:hover,
.section-icon-button:focus-visible {
  background: var(--soft);
  outline: 0;
}

.dashboard-group {
  display: grid;
  gap: var(--space-4);
}

/* My Stuff sits tighter than Explore: the header leads into a small label,
   the labels hug their cards, and the subsections pack closer together. */
.dashboard-group:not(.explore) {
  gap: var(--space-3);
}

.dashboard-group-body {
  display: grid;
  gap: var(--space-4);
}

.dashboard-group-body > .dashboard-section {
  gap: var(--space-2);
}

/* Reserve the control-row height (32px buttons) so revealing the rocker or
   the Explore pager never reflows a heading and shoves content below it. */
.dashboard-group .section-heading {
  min-height: 32px;
}

.section-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.section-heading .section-toggle h2 {
  font-size: 1.3rem;
}

.section-heading > h2 {
  margin: 0;
  font-size: 1.3rem;
}

.section-toggle:focus-visible {
  outline: 0;
}

.section-toggle:hover h2,
.section-toggle:focus-visible h2 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.section-chevron {
  display: inline-grid;
  place-items: center;
  color: var(--clay);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.section-toggle[aria-expanded="true"] .section-chevron {
  transform: rotate(90deg);
}

.field-required {
  margin-left: 2px;
  color: var(--clay);
  font-weight: 720;
}

.subsection-title {
  margin: 0;
  color: var(--clay);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-add-row {
  display: flex;
  justify-content: flex-start;
}
.result-group {
  display: grid;
  gap: var(--space-2);
}

.section-heading h2,
.result-group h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: var(--line-ui);
}

.section-heading h2 {
  font-size: 1.05rem;
}

.section-actions {
  display: flex;
  justify-content: flex-start;
}

.sort-button {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: var(--line-ui);
}

.sort-button:hover,
.sort-button:focus-visible {
  background: var(--soft);
  color: var(--ink);
  outline: 0;
}

.section-icon {
  color: var(--clay);
}
.meta {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* A state, not a sentence. Everything that reports where a room stands — its
   away-ness signal (unvisited, 3 new, 4 unresolved, active 2 days ago) and its
   unpublished states (Draft, Awaiting review) — wears this one micro-label, so
   a room reads the same in My Stuff's Discussions list and inside a source
   card's carousel. Sentence-case UI type is reserved for prose (titles, empty
   states, "proposed by Maya"), which is how you tell the two apart at a glance.
   Muted by default; accent stays reserved for "you are here", so only the two
   signals that are asking for something lift to ink. */
.state-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
}

.state-label.is-unvisited,
.state-label.is-new {
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-weight: 720;
  line-height: var(--line-ui);
}

.btn:hover {
  background: var(--accent-dark);
}

.btn.secondary {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.btn.secondary:hover {
  background: var(--soft);
}

.btn.secondary:disabled:hover {
  background: var(--panel);
}

.btn.ghost {
  background: transparent;
  color: var(--accent);
  padding-inline: 0;
}

.btn.ghost:hover {
  background: transparent;
  color: var(--accent-dark);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 680;
}