/*
 * MIC Design Language — Layer 4: Primitives
 * ============================================================
 * Component classes. Consumes only Layer 3 properties — never
 * raw palette and never hardcoded hex.
 *
 * Dependency: properties.css
 *
 * Covers both surfaces:
 *   Public Experience  → editorial authority
 *   Management         → operational instrument
 */

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.mic-container {
  width: 100%;
  max-width: var(--mic-container);
  margin-inline: auto;
  padding-inline: var(--mic-gutter);
}
.mic-container--narrow { max-width: var(--mic-container-narrow); }
.mic-container--wide   { max-width: var(--mic-container-wide); }

.mic-section {
  padding-block: var(--mic-section-padding);
}
.mic-section--tight { padding-block: var(--mic-space-9); }
.mic-section--flush { padding-block: 0; }

.mic-stack > * + * { margin-top: var(--mic-stack-gap); }
.mic-stack--lg > * + * { margin-top: var(--mic-block-gap); }

.mic-divider {
  border: 0;
  border-top: 1px solid var(--mic-color-border);
  margin-block: var(--mic-space-7);
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
.mic-eyebrow {
  display: inline-block;
  font-size: var(--mic-label-size);
  font-weight: var(--mic-label-weight);
  letter-spacing: var(--mic-label-tracking);
  text-transform: uppercase;
  color: var(--mic-color-ink-muted);
}
.mic-eyebrow--evidence { color: var(--mic-color-evidence-text); }

.mic-display { font-size: var(--mic-type-display); line-height: var(--mic-leading-tight); letter-spacing: var(--mic-tracking-tight); font-weight: var(--mic-font-weight-regular); }
.mic-h1 { font-size: var(--mic-type-h1); line-height: var(--mic-leading-tight); letter-spacing: var(--mic-tracking-tight); font-weight: var(--mic-font-weight-regular); }
.mic-h2 { font-size: var(--mic-type-h2); line-height: var(--mic-leading-snug); font-weight: var(--mic-font-weight-medium); }
.mic-h3 { font-size: var(--mic-type-h3); line-height: var(--mic-leading-snug); font-weight: var(--mic-font-weight-medium); }
.mic-h4 { font-size: var(--mic-type-h4); line-height: var(--mic-leading-snug); font-weight: var(--mic-font-weight-semibold); }

.mic-lead { font-size: var(--mic-type-lead); line-height: var(--mic-leading-normal); color: var(--mic-color-ink-soft); }
.mic-prose { max-width: var(--mic-measure); font-size: var(--mic-type-body); line-height: var(--mic-leading-relaxed); color: var(--mic-color-ink-soft); }
.mic-prose > * + * { margin-top: var(--mic-space-5); }
.mic-muted { color: var(--mic-color-ink-muted); }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mic-space-2);
  height: var(--mic-control-height);
  padding-inline: var(--mic-control-padding-x);
  font-size: var(--mic-control-font-size);
  font-weight: var(--mic-control-font-weight);
  letter-spacing: var(--mic-control-tracking);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--mic-control-radius);
  cursor: pointer;
  transition: background-color var(--mic-duration-base) var(--mic-ease-standard),
              color var(--mic-duration-base) var(--mic-ease-standard),
              border-color var(--mic-duration-base) var(--mic-ease-standard),
              transform var(--mic-duration-fast) var(--mic-ease-standard);
}
.mic-btn:focus-visible { outline: 2px solid var(--mic-color-focus); outline-offset: 2px; }

.mic-btn--primary {
  background: var(--mic-color-authority);
  color: var(--mic-palette-paper-000);
}
.mic-btn--primary:hover { background: var(--mic-color-authority-soft); transform: translateY(-1px); }

.mic-btn--evidence {
  background: var(--mic-color-evidence);
  color: var(--mic-color-emphasis-text);
}
.mic-btn--evidence:hover { background: var(--mic-palette-gold-400); transform: translateY(-1px); }

.mic-btn--ghost {
  background: transparent;
  color: var(--mic-color-authority);
  border-color: var(--mic-color-border-strong);
}
.mic-btn--ghost:hover { border-color: var(--mic-color-authority); background: var(--mic-color-surface); }

.mic-btn--quiet {
  background: transparent;
  color: var(--mic-color-ink-muted);
  text-transform: none;
  letter-spacing: normal;
  padding-inline: var(--mic-space-3);
}
.mic-btn--quiet:hover { color: var(--mic-color-ink); }

.mic-btn--sm { height: var(--mic-control-height-sm); padding-inline: var(--mic-space-4); font-size: var(--mic-type-caption); }

/* ---------------------------------------------------------
   Panels, cards, badges
   --------------------------------------------------------- */
.mic-panel {
  background: var(--mic-panel-bg);
  border: var(--mic-panel-border);
  border-radius: var(--mic-panel-radius);
  padding: var(--mic-panel-padding);
}
.mic-panel--raised { box-shadow: var(--mic-panel-shadow); }
.mic-panel--flat { border: 0; background: transparent; padding: 0; }

.mic-card {
  background: var(--mic-color-surface);
  border: 1px solid var(--mic-color-border);
  border-radius: var(--mic-radius-md);
  overflow: hidden;
  transition: box-shadow var(--mic-duration-base) var(--mic-ease-standard),
              transform var(--mic-duration-base) var(--mic-ease-standard);
}
.mic-card:hover { box-shadow: var(--mic-shadow-md); transform: translateY(-2px); }

.mic-badge,
.mic-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mic-space-1);
  padding: 3px var(--mic-space-3);
  font-size: var(--mic-type-caption);
  font-weight: var(--mic-font-weight-medium);
  letter-spacing: var(--mic-tracking-wide);
  border-radius: var(--mic-radius-full);
  background: var(--mic-color-surface-sunken);
  color: var(--mic-color-ink-soft);
  border: 1px solid var(--mic-color-border-faint);
}
.mic-badge--evidence { background: var(--mic-color-evidence-soft); color: var(--mic-color-emphasis-text); border-color: transparent; }
.mic-badge--authority { background: var(--mic-color-authority); color: var(--mic-palette-paper-000); border-color: transparent; }

/* ---------------------------------------------------------
   Evidence marker — gold marks judgement/proof.
   --------------------------------------------------------- */
.mic-evidence {
  position: relative;
  padding-left: var(--mic-space-5);
  border-left: var(--mic-evidence-rule);
}
.mic-evidence__label {
  display: block;
  font-size: var(--mic-label-size);
  font-weight: var(--mic-label-weight);
  letter-spacing: var(--mic-label-tracking);
  text-transform: uppercase;
  color: var(--mic-color-evidence-text);
  margin-bottom: var(--mic-space-2);
}
.mic-evidence--inline { border-left: 0; padding-left: 0; }

.mic-metric {
  font-size: var(--mic-type-metric);
  font-weight: var(--mic-font-weight-regular);
  line-height: 1;
  color: var(--mic-color-authority);
  letter-spacing: var(--mic-tracking-tight);
}

/* ---------------------------------------------------------
   Meta list
   --------------------------------------------------------- */
.mic-meta { display: grid; gap: var(--mic-space-4); }
.mic-meta__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--mic-space-3); }
.mic-meta__label { font-size: var(--mic-type-caption); text-transform: uppercase; letter-spacing: var(--mic-label-tracking); color: var(--mic-color-ink-muted); }
.mic-meta__value { font-size: var(--mic-type-small); color: var(--mic-color-ink); }

/* ---------------------------------------------------------
   Case — public experience
   --------------------------------------------------------- */
.mic-case__hero { position: relative; background: var(--mic-color-authority); color: var(--mic-palette-paper-000); overflow: hidden; }
.mic-case__hero-inner { padding-block: var(--mic-space-11); }
.mic-case__hero .mic-eyebrow { color: var(--mic-color-evidence); }
.mic-case__hero .mic-h1,
.mic-case__hero .mic-display { color: var(--mic-palette-paper-000); }
.mic-case__hero .mic-lead { color: rgba(255, 255, 255, 0.78); max-width: var(--mic-case-measure); }
.mic-case__hero-media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }

.mic-case__body { padding-block: var(--mic-case-section-gap); }
.mic-case__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--mic-space-10); align-items: start; }
.mic-case__aside { position: sticky; top: calc(var(--mic-header-height) + var(--mic-space-5)); display: grid; gap: var(--mic-space-6); }
.mic-case__section + .mic-case__section { margin-top: var(--mic-case-section-gap); }
.mic-case__section-title { font-size: var(--mic-type-caption); letter-spacing: var(--mic-label-tracking); text-transform: uppercase; color: var(--mic-color-ink-muted); margin-bottom: var(--mic-space-4); }

.mic-case__result { background: var(--mic-color-surface-sunken); border-radius: var(--mic-radius-md); padding: var(--mic-space-8); }
.mic-case__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--mic-space-4); align-items: start; }
.mic-case__gallery img { max-width: 100%; height: auto; border-radius: var(--mic-radius-sm); display: block; }

.mic-case__quote { border-left: var(--mic-evidence-rule); padding-left: var(--mic-space-5); font-family: var(--mic-font-serif); font-size: var(--mic-type-h4); line-height: var(--mic-leading-normal); color: var(--mic-color-ink); }
.mic-case__quote cite { display: block; margin-top: var(--mic-space-4); font-family: var(--mic-font-sans); font-size: var(--mic-type-small); font-style: normal; color: var(--mic-color-ink-muted); }

@media (max-width: 900px) {
  .mic-case__grid { grid-template-columns: 1fr; }
  .mic-case__aside { position: static; }
}

/* ---------------------------------------------------------
   Experience View switcher — "One asset, many surfaces."
   --------------------------------------------------------- */
.mic-views { display: flex; flex-wrap: wrap; gap: var(--mic-space-2); align-items: center; }
.mic-views__label { font-size: var(--mic-type-caption); text-transform: uppercase; letter-spacing: var(--mic-label-tracking); color: var(--mic-color-ink-muted); margin-right: var(--mic-space-2); }
.mic-views__item {
  display: inline-flex; align-items: center; height: var(--mic-control-height-sm);
  padding-inline: var(--mic-space-4); border-radius: var(--mic-radius-full);
  font-size: var(--mic-type-caption); font-weight: var(--mic-font-weight-medium);
  color: var(--mic-color-ink-soft); text-decoration: none;
  border: 1px solid var(--mic-color-border); background: var(--mic-color-surface);
  transition: all var(--mic-duration-base) var(--mic-ease-standard);
}
.mic-views__item:hover { border-color: var(--mic-color-authority); color: var(--mic-color-authority); }
.mic-views__item.is-active { background: var(--mic-color-authority); color: var(--mic-palette-paper-000); border-color: var(--mic-color-authority); }

/* ---------------------------------------------------------
   Share
   --------------------------------------------------------- */
.mic-share { display: flex; flex-wrap: wrap; gap: var(--mic-space-3); align-items: center; }
.mic-share__url {
  flex: 1 1 220px; min-width: 0; height: var(--mic-control-height-sm);
  padding-inline: var(--mic-space-3); font-family: var(--mic-font-mono); font-size: var(--mic-type-caption);
  color: var(--mic-color-ink-soft); background: var(--mic-color-surface-sunken);
  border: 1px solid var(--mic-color-border); border-radius: var(--mic-radius-sm);
}

/* ---------------------------------------------------------
   Management surface
   --------------------------------------------------------- */
.mic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mic-space-3); justify-content: space-between; margin-bottom: var(--mic-space-6); }
.mic-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mic-space-2); }

.mic-list { display: grid; gap: 1px; background: var(--mic-color-border-faint); border: 1px solid var(--mic-color-border); border-radius: var(--mic-radius-md); overflow: hidden; }
.mic-list__row { display: grid; grid-template-columns: 1fr auto; gap: var(--mic-space-4); align-items: center; padding: var(--mic-space-4) var(--mic-space-5); background: var(--mic-color-surface); }
.mic-list__row:hover { background: var(--mic-color-surface-sunken); }
.mic-list__title { font-weight: var(--mic-font-weight-medium); color: var(--mic-color-ink); }
.mic-list__meta { font-size: var(--mic-type-caption); color: var(--mic-color-ink-muted); }

.mic-status { display: inline-flex; align-items: center; gap: var(--mic-space-2); font-size: var(--mic-type-caption); color: var(--mic-color-ink-muted); }
.mic-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mic-color-border-strong); }
.mic-status--published::before { background: var(--mic-color-success); }
.mic-status--draft::before { background: var(--mic-color-warning); }

.mic-field { margin-bottom: var(--mic-space-6); }
.mic-field__label { display: block; font-size: var(--mic-type-small); font-weight: var(--mic-font-weight-semibold); color: var(--mic-color-ink); margin-bottom: var(--mic-space-2); }
.mic-field__hint { display: block; font-size: var(--mic-type-caption); color: var(--mic-color-ink-muted); margin-bottom: var(--mic-space-2); }
.mic-field__input,
.mic-field__textarea,
.mic-field__select {
  width: 100%; font-size: var(--mic-type-small); color: var(--mic-color-ink);
  background: var(--mic-color-surface); border: 1px solid var(--mic-color-border-strong);
  border-radius: var(--mic-radius-sm); padding: var(--mic-space-3);
}
.mic-field__input:focus,
.mic-field__textarea:focus,
.mic-field__select:focus { outline: 2px solid var(--mic-color-focus); outline-offset: 0; border-color: var(--mic-color-evidence); }
.mic-field__textarea { min-height: 96px; line-height: var(--mic-leading-normal); resize: vertical; }

.mic-empty {
  text-align: center; padding: var(--mic-space-11) var(--mic-space-6);
  border: 1px dashed var(--mic-color-border-strong); border-radius: var(--mic-radius-md);
  color: var(--mic-color-ink-muted); background: var(--mic-color-surface);
}
.mic-empty__title { font-size: var(--mic-type-h4); color: var(--mic-color-ink); margin-bottom: var(--mic-space-2); }

/* ---------------------------------------------------------
   Utilities
   --------------------------------------------------------- */
.mic-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mic-cluster { display: flex; flex-wrap: wrap; gap: var(--mic-space-3); align-items: center; }
.mic-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mic-block-gap); }
@media (max-width: 767px) { .mic-grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Accessibility baseline (Gate A)
   --------------------------------------------------------- */
.mic-surface a:focus-visible,
.mic-surface button:focus-visible,
.mic-surface input:focus-visible,
.mic-surface textarea:focus-visible,
.mic-surface select:focus-visible,
.mic-surface [tabindex]:focus-visible {
  outline: 2px solid var(--mic-color-focus);
  outline-offset: 2px;
}

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