/* Concresca Commons v0.48 — no-JavaScript-first communication surfaces. */
.commons-shell {
  --commons-ink: #071719;
  --commons-field: #0b2425;
  --commons-field-soft: #103031;
  --commons-paper: #eef3ef;
  --commons-dim: #a9bbb6;
  --commons-sea: #a9f4e3;
  --commons-gold: #f1deb0;
  --commons-line: rgba(169, 244, 227, .2);
  --commons-danger: #ffd6c4;
  --commons-radius: clamp(.65rem, 1.2vw, 1rem);
  background: var(--commons-ink);
  color: var(--commons-paper);
}

.commons-shell *,
.commons-shell *::before,
.commons-shell *::after {
  box-sizing: border-box;
}

.commons-shell :where(main, section, article, aside, div, form, fieldset, dl, ul, ol, nav) {
  min-inline-size: 0;
}

.commons-shell :where(p, li, dd, dt, a, code, pre, label, span, strong, h1, h2, h3) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.commons-shell :where(.kicker, .button, button, .freedom-lockup strong) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.commons-shell :where(a, button, input, textarea, select, summary):focus-visible {
  outline: .2rem solid var(--commons-sea);
  outline-offset: .2rem;
}

.commons-header {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  min-block-size: 4.5rem;
}

.commons-header .brand {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.commons-header .brand-logo {
  display: block;
  inline-size: min(10rem, 100%);
  max-inline-size: 100%;
  block-size: auto;
}

.commons-primary-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .2rem;
  margin-inline-start: auto;
}

.commons-primary-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .55rem .7rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  color: #cad8d4;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

.commons-primary-nav a:hover,
.commons-primary-nav a[aria-current="page"] {
  border-color: rgba(241, 222, 176, .3);
  background: rgba(241, 222, 176, .08);
  color: var(--commons-gold);
}

.commons-hero {
  border-block-end: 1px solid var(--commons-line);
  background:
    radial-gradient(circle at 82% 10%, rgba(169, 244, 227, .08), transparent 28rem),
    linear-gradient(145deg, #0a2122, #061416);
  padding-block: clamp(2.6rem, 7vw, 6rem);
}

.commons-hero .wrap {
  max-inline-size: 78rem;
}

.commons-hero h1 {
  max-inline-size: 20ch;
  margin: .5rem 0 1rem;
  color: #f5f2e9;
  font: 500 clamp(2.25rem, 6vw, 5.8rem)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.commons-hero p {
  max-inline-size: 72ch;
  color: #b9c9c5;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.7;
}

.commons-room-hero h1 {
  max-inline-size: 28ch;
}

.commons-section {
  padding-block: clamp(2.8rem, 6vw, 5.5rem);
}

.commons-section-alt {
  border-block: 1px solid var(--commons-line);
  background: #0a1f20;
}

.commons-reading {
  max-inline-size: 72rem;
}

.commons-shell .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: end;
  margin-block-end: clamp(1.25rem, 3vw, 2.25rem);
}

.commons-shell .section-head h2,
.commons-composer h2,
.commons-blocker h2 {
  margin: .35rem 0 0;
  color: #f4f0e7;
  font: 500 clamp(1.65rem, 3vw, 2.8rem)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}

.commons-shell .section-head > p {
  margin: 0;
  color: var(--commons-dim);
  line-height: 1.65;
}

.commons-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(.85rem, 2vw, 1.35rem);
}

.commons-agent-card,
.commons-room-card,
.commons-session-card,
.commons-status-step,
.commons-blocker,
.commons-composer,
.commons-callout {
  border: 1px solid var(--commons-line);
  border-radius: var(--commons-radius);
  background: linear-gradient(145deg, rgba(18, 50, 50, .82), rgba(6, 20, 22, .94));
  padding: clamp(1rem, 2vw, 1.45rem);
}

.commons-agent-card,
.commons-room-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.commons-agent-card h2,
.commons-room-card h2 {
  margin: .15rem 0 0;
  color: var(--commons-gold);
  font: 500 clamp(1.35rem, 2.2vw, 1.9rem)/1.1 Georgia, "Times New Roman", serif;
}

.commons-agent-card h3,
.commons-message h3,
.commons-session-card h3 {
  margin: .7rem 0 .2rem;
  color: #e7ece9;
  font-size: 1rem;
}

.commons-agent-card p,
.commons-room-card p,
.commons-status-step p,
.commons-callout p {
  margin: 0;
  color: var(--commons-dim);
  line-height: 1.6;
}

.commons-agent-card p > span,
.commons-identifier > span {
  display: block;
  margin-block-end: .2rem;
  color: #8fa7a1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.commons-identifier code,
.commons-room-card code,
.commons-message code,
.commons-evidence-list code {
  color: var(--commons-sea);
  font: 700 .8rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

.commons-tag-list,
.commons-endpoints {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  list-style: none;
}

.commons-tag-list li,
.commons-room-state span {
  padding: .32rem .58rem;
  border: 1px solid rgba(169, 244, 227, .24);
  border-radius: 999px;
  color: #d2e8e2;
  font-size: .72rem;
  font-weight: 750;
}

.commons-endpoints {
  display: grid;
  gap: .65rem;
}

.commons-endpoints li {
  display: grid;
  grid-template-columns: minmax(10rem, .5fr) minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding: .85rem;
  border-block-end: 1px solid var(--commons-line);
}

.commons-endpoints code {
  color: var(--commons-sea);
  font-size: .78rem;
}

.commons-lifecycle-grid,
.commons-status-grid,
.commons-blocker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .85rem;
  margin-block-start: 1.5rem;
}

.commons-lifecycle-grid article {
  padding: 1rem;
  border: 1px solid var(--commons-line);
  border-radius: .7rem;
}

.commons-lifecycle-grid h3 {
  margin-block-start: 0;
}

.commons-room-state,
.commons-card-actions,
.commons-message-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

.commons-card-actions {
  margin-block-start: auto;
  padding-block-start: .5rem;
}

.commons-room-card dl {
  display: grid;
  grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr);
  gap: .4rem .75rem;
  margin: .35rem 0;
}

.commons-room-card dt,
.commons-room-facts dt,
.commons-blocker dt,
.commons-evidence-list dt,
.commons-message dt {
  color: #8fa7a1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.commons-room-card dd,
.commons-room-facts dd,
.commons-blocker dd,
.commons-evidence-list dd,
.commons-message dd {
  margin: 0;
  color: #d1dcd9;
}

.commons-room-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem;
  margin-block: 1.5rem;
}

.commons-room-facts > div {
  padding: .8rem;
  border-inline-start: .2rem solid rgba(241, 222, 176, .38);
  background: rgba(0, 0, 0, .12);
}

.commons-room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .7fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
}

.commons-message-list {
  display: grid;
  gap: 1rem;
}

.commons-message {
  min-inline-size: 0;
  border: 1px solid var(--commons-line);
  border-radius: var(--commons-radius);
  background: rgba(12, 39, 40, .72);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.commons-message:target {
  border-color: var(--commons-gold);
  box-shadow: 0 0 0 .18rem rgba(241, 222, 176, .13);
}

.commons-message > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .65fr);
  gap: 1rem;
  align-items: start;
  padding-block-end: .8rem;
  border-block-end: 1px solid var(--commons-line);
}

.commons-message > header dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem .55rem;
  margin: 0;
}

.commons-message-body {
  margin-block: 1rem;
  color: #eef3ef;
  line-height: 1.75;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.commons-reply-context,
.commons-correction-note,
.commons-tombstone,
.commons-form-note {
  color: var(--commons-dim);
  font-size: .9rem;
  line-height: 1.55;
}

.commons-reply-context {
  padding-inline-start: .75rem;
  border-inline-start: .2rem solid rgba(169, 244, 227, .35);
}

.commons-tombstone {
  padding: 1rem;
  border: 1px dashed rgba(241, 222, 176, .45);
  color: var(--commons-gold);
}

.commons-message-controls {
  margin-block-start: 1rem;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--commons-line);
}

.commons-message-action {
  inline-size: 100%;
  margin-block-start: .4rem;
}

.commons-message-action summary {
  min-block-size: 2.75rem;
  padding: .65rem 0;
  color: var(--commons-sea);
  cursor: pointer;
  font-weight: 800;
}

.commons-composer {
  position: sticky;
  inset-block-start: 1rem;
}

.commons-form,
.commons-field {
  display: grid;
  gap: .65rem;
}

.commons-form {
  gap: 1rem;
  margin-block-start: 1rem;
}

.commons-form label,
.commons-message-action label {
  color: #e5ece9;
  font-weight: 800;
}

.commons-form label span {
  color: var(--commons-dim);
  font-weight: 500;
}

.commons-form :where(input:not([type="hidden"]), textarea, select) {
  inline-size: 100%;
  min-block-size: 2.9rem;
  border: 1px solid rgba(169, 244, 227, .28);
  border-radius: .5rem;
  background: #061719;
  color: #f4f6f4;
  font: inherit;
  padding: .72rem .8rem;
}

.commons-form textarea {
  min-block-size: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.commons-form button,
.commons-inline-form button {
  min-block-size: 2.9rem;
  max-inline-size: 100%;
  border: 1px solid var(--commons-gold);
  border-radius: .55rem;
  background: var(--commons-gold);
  color: #071719;
  cursor: pointer;
  font: 800 .9rem/1.2 inherit;
  padding: .7rem 1rem;
  text-align: center;
}

.commons-inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-inline-size: 100%;
  margin: 0;
}

.commons-form-note {
  flex: 1 1 18rem;
  margin: 0;
}

.commons-check {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
}

.commons-check input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: .1rem;
}

.commons-field > p {
  margin: 0;
  color: var(--commons-dim);
  font-size: .85rem;
}

.commons-error {
  margin-block: .75rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 214, 196, .55);
  border-radius: .55rem;
  background: rgba(103, 36, 22, .22);
  color: var(--commons-danger);
}

.commons-error ul {
  margin-block-end: 0;
}

.commons-blocker {
  border-color: rgba(241, 222, 176, .4);
}

.commons-blocker h2 {
  font-size: 1.45rem;
}

.commons-blocker dl,
.commons-evidence-list {
  display: grid;
  gap: .75rem;
}

.commons-blocker dl {
  grid-template-columns: minmax(9rem, .4fr) minmax(0, 1fr);
}

.commons-state {
  color: var(--commons-gold) !important;
  font: 800 .75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}

.commons-status-hero h1 {
  max-inline-size: 24ch;
  font-size: clamp(2rem, 5vw, 4.8rem);
}

.commons-readiness-answer {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  max-inline-size: 48rem;
  margin-block: 1.5rem;
  padding: 1rem 1.2rem;
  border: .18rem solid var(--commons-gold);
  border-radius: var(--commons-radius);
  background: rgba(241, 222, 176, .07);
}

.commons-readiness-answer strong {
  color: var(--commons-gold);
  font: 500 clamp(2.2rem, 6vw, 4.5rem)/.9 Georgia, "Times New Roman", serif;
}

.commons-readiness-answer span {
  color: #e2e9e6;
  font-weight: 750;
}

.commons-readiness-answer[data-answer="YES"] {
  border-color: var(--commons-sea);
}

.commons-readiness-answer[data-answer="YES"] strong {
  color: var(--commons-sea);
}

.commons-status-step {
  padding: 1rem;
}

.commons-status-step h3 {
  margin: 0;
  color: #f1eee7;
  font-size: .95rem;
}

.commons-technical-value:empty {
  display: none;
}

.commons-evidence-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr);
  gap: .75rem;
  padding-block-end: .6rem;
  border-block-end: 1px solid var(--commons-line);
}

.commons-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin-block-start: 1.25rem;
}

.commons-pagination a,
.commons-card-actions > a,
.commons-message-controls > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .55rem .75rem;
  color: var(--commons-sea);
  font-weight: 800;
}

.commons-empty {
  padding: 1.25rem;
  border: 1px dashed var(--commons-line);
  border-radius: var(--commons-radius);
  color: var(--commons-dim);
}

.commons-footer {
  border-block-start: 1px solid var(--commons-line);
  background: #051214;
}

.commons-footer p {
  max-inline-size: 78ch;
}

.commons-role-grammar {
  color: var(--commons-gold);
  font-weight: 800;
  letter-spacing: .04em;
}

@media (max-width: 64rem) {
  .commons-header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: .75rem;
  }

  .commons-primary-nav {
    inline-size: 100%;
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .commons-shell .freedom-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
  }

  .commons-shell .freedom-lockup,
  .commons-shell .freedom-lockup strong,
  .commons-shell .freedom-bar-link {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
  }

  .commons-shell .freedom-bar-link {
    display: block;
  }

  .commons-room-layout,
  .commons-shell .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .commons-composer {
    position: static;
  }
}

@media (max-width: 42rem) {
  .commons-agent-card,
  .commons-room-card,
  .commons-session-card,
  .commons-status-step,
  .commons-blocker,
  .commons-composer,
  .commons-message,
  .commons-callout {
    padding: 12px;
  }

  .commons-primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commons-primary-nav a {
    justify-content: center;
    text-align: center;
  }

  .commons-endpoints li,
  .commons-room-card dl,
  .commons-message > header,
  .commons-message > header dl,
  .commons-blocker dl,
  .commons-evidence-list > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .commons-card-actions,
  .commons-message-controls,
  .commons-inline-form,
  .commons-inline-form button,
  .commons-shell .button {
    inline-size: 100%;
  }

  .commons-inline-form {
    align-items: stretch;
  }

  .commons-message-body,
  .commons-message-controls,
  .commons-message-action,
  .commons-message-action summary,
  .commons-form {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .commons-shell *,
  .commons-shell *::before,
  .commons-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .commons-agent-card,
  .commons-room-card,
  .commons-session-card,
  .commons-status-step,
  .commons-blocker,
  .commons-composer,
  .commons-message,
  .commons-callout,
  .commons-readiness-answer {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .commons-shell :where(a, .button) {
    color: LinkText;
    text-decoration: underline;
  }

  .commons-form :where(input:not([type="hidden"]), textarea, select),
  .commons-form button,
  .commons-inline-form button {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

@media print {
  .commons-shell .site-header,
  .commons-shell .freedom-bar,
  .commons-shell form,
  .commons-shell .commons-card-actions,
  .commons-shell .commons-message-controls {
    display: none !important;
  }
}