@layer ec.patterns {
  .ec-post-shell {
    display: grid;
    width: min(100%, 62rem);
    gap: var(--ec-space-5);
    margin-inline: auto;
    padding-block: var(--ec-space-6) var(--ec-space-10);
  }

  .ec-post-shell--narrow {
    width: min(100%, 34rem);
  }

  .ec-post-hero {
    display: grid;
    gap: var(--ec-space-5);
    padding: var(--ec-space-7);
    border-radius: var(--ec-radius-2xl);
    background: linear-gradient(120deg, var(--ec-sys-color-primary-pressed), var(--ec-sys-color-primary-hover) 55%, var(--ec-sys-color-primary));
    color: var(--ec-sys-color-on-primary);
    box-shadow: var(--ec-elevation-3);
  }

  .ec-post-hero--center {
    justify-items: center;
    text-align: center;
  }

  /* Variantes de tom do herói de estado — referenciam tokens semânticos
     existentes (sem cor literal, sem token novo). O texto passa a herdar a cor
     "on-container" (escura), garantindo contraste AA sobre o container claro. */
  .ec-post-hero--success,
  .ec-post-hero--warning,
  .ec-post-hero--danger,
  .ec-post-hero--info,
  .ec-post-hero--neutral {
    box-shadow: var(--ec-elevation-1);
  }

  .ec-post-hero--success {
    background: var(--ec-sys-color-success-container);
    color: var(--ec-sys-color-on-success-container);
  }

  .ec-post-hero--warning {
    background: var(--ec-sys-color-warning-container);
    color: var(--ec-sys-color-on-warning-container);
  }

  .ec-post-hero--danger {
    background: var(--ec-sys-color-error-container);
    color: var(--ec-sys-color-on-error-container);
  }

  .ec-post-hero--info {
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
  }

  .ec-post-hero--neutral {
    background: var(--ec-sys-color-surface-subtle);
    color: var(--ec-sys-color-on-surface-strong);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
  }

  .ec-post-hero--success .ec-post-hero__title,
  .ec-post-hero--warning .ec-post-hero__title,
  .ec-post-hero--danger .ec-post-hero__title,
  .ec-post-hero--info .ec-post-hero__title,
  .ec-post-hero--neutral .ec-post-hero__title,
  .ec-post-hero--success .ec-post-hero__description,
  .ec-post-hero--warning .ec-post-hero__description,
  .ec-post-hero--danger .ec-post-hero__description,
  .ec-post-hero--info .ec-post-hero__description,
  .ec-post-hero--neutral .ec-post-hero__description {
    color: inherit;
    opacity: 1;
  }

  .ec-post-hero--success .ec-post-hero__eyebrow,
  .ec-post-hero--warning .ec-post-hero__eyebrow,
  .ec-post-hero--danger .ec-post-hero__eyebrow,
  .ec-post-hero--info .ec-post-hero__eyebrow,
  .ec-post-hero--neutral .ec-post-hero__eyebrow {
    opacity: 0.85;
  }

  .ec-post-hero--success .ec-post-hero__icon,
  .ec-post-hero--warning .ec-post-hero__icon,
  .ec-post-hero--danger .ec-post-hero__icon,
  .ec-post-hero--info .ec-post-hero__icon,
  .ec-post-hero--neutral .ec-post-hero__icon {
    border-color: color-mix(in srgb, currentColor 32%, transparent);
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
  }

  /* Ações do herói: mobile-first (empilhadas, alvo pleno) → linha em telas largas. */
  .ec-post-hero__actions {
    display: grid;
    width: 100%;
    gap: var(--ec-space-3);
  }

  .ec-post-hero__actions > form {
    display: contents;
  }

  .ec-post-hero__actions .ec-button {
    width: 100%;
  }

  .ec-post-fact-note {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-hero__icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: var(--ec-border-width-thin) solid color-mix(in srgb, var(--ec-sys-color-on-primary) 30%, transparent);
    border-radius: var(--ec-radius-full);
    background: color-mix(in srgb, var(--ec-sys-color-on-primary) 16%, transparent);
    color: var(--ec-sys-color-on-primary);
  }

  .ec-post-hero__icon svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
  }

  .ec-post-hero__eyebrow {
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.08em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
    opacity: 0.78;
  }

  .ec-post-hero__title {
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-heading-1-size);
    font-weight: var(--ec-font-weight-extrabold);
    line-height: var(--ec-type-heading-1-line);
    letter-spacing: -0.035em;
  }

  .ec-post-hero__description {
    max-width: 64ch;
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
    opacity: 0.86;
  }

  /* Passo-a-passo guiado (herói → como funciona → formulário). Lista ordenada
     vertical: em coluna estreita a leitura sequencial é mais clara que colunas. */
  .ec-post-steps {
    display: grid;
    gap: var(--ec-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-post-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ec-space-3);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface);
  }

  .ec-post-steps__number {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
    font-size: var(--ec-type-title-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    line-height: 1;
  }

  .ec-post-steps__copy {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-1);
  }

  .ec-post-steps__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-steps__text {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--ec-space-3);
    margin: 0;
  }

  .ec-post-metric {
    display: grid;
    gap: var(--ec-space-1);
    padding: var(--ec-space-3) var(--ec-space-4);
    border: var(--ec-border-width-thin) solid color-mix(in srgb, var(--ec-sys-color-on-primary) 24%, transparent);
    border-radius: var(--ec-radius-lg);
    background: color-mix(in srgb, var(--ec-sys-color-on-primary) 12%, transparent);
  }

  .ec-post-metric__label {
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-md-line);
    /* WCAG 1.4.3: contraste depende de DUAS coisas juntas — esta opacidade E o
       stop mais claro do gradiente do herói (.ec-post-hero, linha ~19) ser
       cobalt-700 (--ec-sys-color-primary). Sobre cobalt-700 + overlay 12% do
       card: 0.86 → ≈5.2:1 (PASS); 0.76 dava ~4.4:1. Se o gradiente voltar a
       terminar em cobalt-500 (--ec-sys-color-interactive) o label cai a ~2.8:1:
       ao mexer no gradiente, reexecute o contraste deste label. */
    opacity: 0.86;
  }

  .ec-post-metric__value {
    color: inherit;
    font-size: var(--ec-type-title-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    font-variant-numeric: tabular-nums;
    line-height: var(--ec-type-title-md-line);
    overflow-wrap: anywhere;
  }

  .ec-post-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--ec-space-3);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-notice svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-block-start: 0.125rem;
    fill: currentColor;
  }

  .ec-post-section {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-post-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-post-section__heading {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-1);
  }

  .ec-post-section__eyebrow {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.07em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-post-section__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-post-section__description {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-section__body {
    display: grid;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
  }

  .ec-post-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-4);
  }

  .ec-post-status {
    display: grid;
    align-content: start;
    gap: var(--ec-space-2);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-post-status--success {
    border-color: var(--ec-sys-color-success);
    background: var(--ec-sys-color-success-container);
    color: var(--ec-sys-color-on-success-container);
  }

  .ec-post-status--warning {
    border-color: var(--ec-sys-color-warning);
    background: var(--ec-sys-color-warning-container);
    color: var(--ec-sys-color-on-warning-container);
  }

  .ec-post-status--danger,
  .ec-post-status--critical {
    border-color: var(--ec-sys-color-error);
    background: var(--ec-sys-color-error-container);
    color: var(--ec-sys-color-on-error-container);
  }

  .ec-post-status--info {
    border-color: var(--ec-sys-color-info);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
  }

  .ec-post-status__eyebrow {
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.06em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-post-status__title {
    color: inherit;
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-post-status__description,
  .ec-post-status__meta {
    color: inherit;
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-status__meta {
    opacity: 0.78;
  }

  .ec-post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ec-space-3);
  }

  .ec-post-actions > form {
    display: contents;
  }

  .ec-post-actions--stack {
    align-items: stretch;
    flex-direction: column;
  }

  .ec-post-actions--stack .ec-button {
    width: 100%;
  }

  .ec-post-actions__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: var(--ec-touch-target-min);
    padding-inline: var(--ec-space-2);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
    font-weight: var(--ec-font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .ec-post-actions__link:hover {
    color: var(--ec-sys-color-primary-hover);
  }

  .ec-order-list,
  .ec-ticket-list,
  .ec-timeline,
  .ec-support-list {
    display: grid;
    gap: var(--ec-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-order-card,
  .ec-ticket-row,
  .ec-timeline__item,
  .ec-support-item {
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface);
  }

  .ec-order-card {
    overflow: clip;
  }

  .ec-order-card__header {
    display: flex;
    align-items: center;
    gap: var(--ec-space-3);
    padding: var(--ec-space-4) var(--ec-space-5);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-order-card__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
  }

  .ec-order-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }

  .ec-order-card__heading {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-1);
  }

  .ec-order-card__number {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.06em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-order-card__title {
    overflow: hidden;
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ec-order-card__body {
    display: grid;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
  }

  .ec-order-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ec-space-3);
    margin: 0;
  }

  .ec-order-card__fact {
    display: grid;
    gap: var(--ec-space-1);
  }

  .ec-order-card__fact dt,
  .ec-post-fact dt {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-semibold);
    letter-spacing: 0.04em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-order-card__fact dd,
  .ec-post-fact dd {
    min-width: 0;
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-md-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-body-md-line);
    overflow-wrap: anywhere;
  }

  .ec-order-card__participants {
    display: flex;
    align-items: flex-start;
    gap: var(--ec-space-2);
    padding: var(--ec-space-3) var(--ec-space-4);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-surface-subtle);
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-order-card__participants svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    margin-block-start: 0.125rem;
    fill: currentColor;
  }

  .ec-ticket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ec-space-4);
    padding: var(--ec-space-4);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-ticket-row__copy {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-1);
  }

  .ec-ticket-row__id {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.06em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-ticket-row__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-body-lg-line);
  }

  .ec-ticket-row__meta {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-ticket-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-2);
  }

  .ec-timeline {
    position: relative;
  }

  .ec-timeline__item {
    position: relative;
    display: grid;
    gap: var(--ec-space-1);
    padding: var(--ec-space-4) var(--ec-space-4) var(--ec-space-4) var(--ec-space-6);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-timeline__item::before {
    position: absolute;
    inset-block-start: var(--ec-space-5);
    inset-inline-start: var(--ec-space-3);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-interactive);
    content: "";
  }

  .ec-timeline__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-timeline__description,
  .ec-timeline__date {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-timeline__date {
    font-size: var(--ec-type-label-md-size);
  }

  .ec-support-disclosure {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
  }

  .ec-support-disclosure__summary {
    display: flex;
    min-height: var(--ec-touch-target-min);
    padding: var(--ec-space-5);
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-4);
    cursor: pointer;
    list-style: none;
  }

  .ec-support-disclosure__summary::-webkit-details-marker {
    display: none;
  }

  .ec-support-disclosure__summary::after {
    content: "+";
    display: grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-interactive-subtle);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-title-lg-size);
  }

  .ec-support-disclosure[open] .ec-support-disclosure__summary::after {
    content: "−";
  }

  .ec-support-disclosure__body {
    padding: 0 var(--ec-space-5) var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-support-list {
    padding-block-start: var(--ec-space-5);
  }

  .ec-support-item {
    display: grid;
    gap: var(--ec-space-2);
    padding: var(--ec-space-4);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-support-item__meta {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    line-height: var(--ec-type-label-md-line);
  }

  .ec-support-item__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-body-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-support-item__message,
  .ec-support-item__note {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-post-form {
    display: grid;
    gap: var(--ec-space-5);
  }

  .ec-post-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-4);
  }

  .ec-post-form__span-all {
    grid-column: 1 / -1;
  }

  .ec-post-facts {
    display: grid;
    gap: var(--ec-space-3);
    margin: 0;
  }

  .ec-post-fact {
    display: grid;
    grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1.4fr);
    gap: var(--ec-space-4);
    padding-block-end: var(--ec-space-3);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-post-fact:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .ec-access-state {
    display: grid;
    gap: var(--ec-space-5);
    padding: var(--ec-space-6);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-2xl);
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-2);
  }

  .ec-access-state__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-4);
  }

  .ec-empty-state--post {
    justify-items: center;
    text-align: center;
  }

  /* Disclosure de gestão do pedido: agrupa histórico, ações, atendimento — o
     conteúdo secundário do comprador fica colapsado por padrão. */
  .ec-post-manage {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
  }

  .ec-post-manage__summary {
    display: flex;
    min-height: var(--ec-touch-target-min);
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
    cursor: pointer;
    list-style: none;
  }

  .ec-post-manage__summary::-webkit-details-marker {
    display: none;
  }

  .ec-post-manage__summary-copy {
    display: grid;
    gap: var(--ec-space-1);
  }

  .ec-post-manage__summary-copy strong {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-post-manage__summary::after {
    content: "+";
    display: grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-interactive-subtle);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-title-lg-size);
  }

  .ec-post-manage[open] .ec-post-manage__summary::after {
    content: "−";
  }

  .ec-post-manage__body {
    display: grid;
    gap: var(--ec-space-5);
    padding: 0 var(--ec-space-5) var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-post-manage__group {
    display: grid;
    gap: var(--ec-space-3);
    padding-block-start: var(--ec-space-5);
  }

  .ec-post-manage__group-title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-post-manage__summary:focus-visible {
    outline: var(--ec-border-width-strong) solid var(--ec-sys-color-focus-ring);
    outline-offset: calc(var(--ec-border-width-strong) * -1);
  }

  /* Enhancement mobile-first: em telas largas as ações do herói viram linha. */
  @media (min-width: 30rem) {
    .ec-post-hero__actions {
      grid-auto-flow: column;
      justify-content: center;
    }

    .ec-post-hero__actions .ec-button {
      width: auto;
    }
  }

  @media (max-width: 767px) {
    .ec-post-shell {
      padding-block: var(--ec-space-5) var(--ec-space-9);
    }

    .ec-post-hero {
      padding: var(--ec-space-5);
    }

    .ec-post-status-grid,
    .ec-post-form__grid,
    .ec-access-state__steps {
      grid-template-columns: 1fr;
    }

    .ec-post-section__header,
    .ec-post-section__body,
    .ec-support-disclosure__summary,
    .ec-support-disclosure__body {
      padding-inline: var(--ec-space-4);
    }

    .ec-ticket-row {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .ec-ticket-row__actions .ec-button,
    .ec-post-actions .ec-button {
      flex: 1 1 10rem;
    }
  }

  @media (max-width: 479px) {
    .ec-post-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-order-card__body {
      padding: var(--ec-space-4);
    }

    .ec-post-fact {
      grid-template-columns: 1fr;
      gap: var(--ec-space-1);
    }
  }

  @media (forced-colors: active) {
    .ec-post-hero,
    .ec-post-section,
    .ec-post-steps__item,
    .ec-order-card,
    .ec-ticket-row,
    .ec-post-status,
    .ec-access-state {
      border: var(--ec-border-width-strong) solid CanvasText;
    }
  }
}