:root {

  --ink:
    #182432;

  --muted:
    #667383;

  --line:
    #d9dee4;

  --ivory:
    #f7f4ed;

  --paper:
    #ffffff;

  --blue:
    #314e68;

  --blue-dark:
    #20384e;

  --gold:
    #a58a52;

  --soft-blue:
    #edf2f6;

  --success:
    #557566;

  --warning:
    #9a7137;

  --danger:
    #9a5353;

  --shadow:
    0 18px 50px
    rgba(
      24,
      36,
      50,
      0.07
    );
}


/*
 * ============================================================
 * FOUNDATION
 * ============================================================
 */


* {

  box-sizing:
    border-box;
}


html {

  scroll-behavior:
    smooth;
}


body {

  margin:
    0;

  min-height:
    100vh;

  color:
    var(--ink);

  background:
    linear-gradient(
      180deg,
      #f8f6f0 0%,
      #f2f3f4 100%
    );

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
textarea,
select,
input {

  font:
    inherit;
}


button {

  cursor:
    pointer;
}


button:disabled {

  cursor:
    not-allowed;
}


[hidden] {

  display:
    none !important;
}


/*
 * ============================================================
 * SHELL
 * ============================================================
 */


.atlaspoint-shell {

  width:
    min(
      1280px,
      calc(100% - 48px)
    );

  margin:
    0 auto;

  padding:
    58px 0 48px;
}


/*
 * ============================================================
 * HEADER
 * ============================================================
 */


.atlaspoint-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    48px;
}


.atlaspoint-header > div:first-child {

  max-width:
    800px;
}


.eyebrow {

  margin:
    0 0 10px;

  color:
    var(--gold);

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.atlaspoint-header h1 {

  margin:
    0;

  color:
    var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.2rem,
      7vw,
      5.8rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.05em;

  line-height:
    0.95;
}


.atlaspoint-subtitle {

  margin:
    16px 0 0;

  color:
    var(--blue);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.25rem,
      2.5vw,
      1.7rem
    );

  line-height:
    1.25;
}


.atlaspoint-intro {

  max-width:
    700px;

  margin:
    18px 0 0;

  color:
    var(--muted);

  font-size:
    1.03rem;

  line-height:
    1.7;
}


.engine-status {

  min-width:
    190px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px 16px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      0.66
    );
}


.status-dot {

  width:
    10px;

  height:
    10px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--muted);

  box-shadow:
    0 0 0 4px
    rgba(
      102,
      115,
      131,
      0.10
    );
}


.status-dot.online {

  background:
    var(--success);

  box-shadow:
    0 0 0 4px
    rgba(
      85,
      117,
      102,
      0.13
    );
}


.status-dot.offline {

  background:
    var(--danger);

  box-shadow:
    0 0 0 4px
    rgba(
      154,
      83,
      83,
      0.13
    );
}


.status-label {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--muted);

  font-size:
    0.61rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;
}


.engine-status strong {

  color:
    var(--ink);

  font-size:
    0.82rem;
}


/*
 * ============================================================
 * SHARED SECTION STRUCTURE
 * ============================================================
 */


.studio-card,
.production-section,
.plan-section,
.output-section {

  margin-bottom:
    28px;
}


.studio-card {

  padding:
    34px;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  box-shadow:
    var(--shadow);
}


.section-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    28px;
}


.section-heading > div {

  max-width:
    650px;
}


.section-heading > p {

  max-width:
    470px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.88rem;

  line-height:
    1.55;

  text-align:
    right;
}


.section-kicker {

  margin:
    0 0 7px;

  color:
    var(--gold);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.13em;
}


.section-heading h2,
.output-card h2 {

  margin:
    0;

  color:
    var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.03em;
}


/*
 * ============================================================
 * FORM
 * ============================================================
 */


.creation-form {

  display:
    grid;

  gap:
    28px;
}


.field {

  min-width:
    0;
}


.field-full {

  grid-column:
    1 / -1;
}


.field label,
.field legend {

  display:
    block;

  margin:
    0 0 10px;

  padding:
    0;

  color:
    var(--ink);

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.025em;
}


fieldset.field {

  margin:
    0;

  padding:
    0;

  border:
    0;
}


textarea,
select,
input[type="number"] {

  width:
    100%;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  color:
    var(--ink);

  background:
    var(--paper);

  outline:
    none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}


textarea {

  min-height:
    150px;

  resize:
    vertical;

  padding:
    18px;

  font-size:
    1rem;

  line-height:
    1.6;
}


select,
input[type="number"] {

  min-height:
    48px;

  padding:
    0 14px;
}


textarea:focus,
select:focus,
input[type="number"]:focus {

  border-color:
    rgba(
      49,
      78,
      104,
      0.55
    );

  box-shadow:
    0 0 0 4px
    rgba(
      49,
      78,
      104,
      0.08
    );
}


.field-help {

  margin:
    8px 0 0;

  color:
    var(--muted);

  font-size:
    0.76rem;

  line-height:
    1.5;
}


/*
 * ============================================================
 * ARTIFACT TYPES
 * ============================================================
 */


.artifact-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.artifact-option {

  position:
    relative;

  min-height:
    160px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    var(--paper);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}


label.artifact-option {

  cursor:
    pointer;
}


.artifact-option-active {

  border-color:
    rgba(
      49,
      78,
      104,
      0.48
    );

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--soft-blue) 100%
    );

  box-shadow:
    0 10px 30px
    rgba(
      24,
      36,
      50,
      0.055
    );
}


.artifact-option-active:hover {

  transform:
    translateY(-2px);
}


.artifact-option-disabled {

  opacity:
    0.55;
}


.artifact-option input {

  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.artifact-kicker {

  margin-bottom:
    9px;

  color:
    var(--gold);

  font-size:
    0.62rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;
}


.artifact-option strong {

  color:
    var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.3rem;

  font-weight:
    500;
}


.artifact-description {

  margin-top:
    6px;

  color:
    var(--muted);

  font-size:
    0.76rem;

  line-height:
    1.4;
}


.artifact-state {

  margin-top:
    auto;

  padding-top:
    18px;

  color:
    var(--muted);

  font-size:
    0.59rem;

  font-weight:
    850;

  letter-spacing:
    0.1em;
}


.artifact-state-live {

  color:
    var(--blue);
}


/*
 * ============================================================
 * CONTROLS
 * ============================================================
 */


.control-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;
}


.number-control {

  position:
    relative;
}


.number-control input {

  padding-right:
    78px;
}


.number-control span {

  position:
    absolute;

  top:
    50%;

  right:
    14px;

  transform:
    translateY(-50%);

  color:
    var(--muted);

  font-size:
    0.74rem;

  pointer-events:
    none;
}


/*
 * ============================================================
 * BUTTONS
 * ============================================================
 */


.form-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    4px;
}


.form-note {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--muted);

  font-size:
    0.75rem;
}


.form-note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 38px;
  height: 24px;

  padding: 0 8px;

  border: 1px solid rgba(165, 138, 82, 0.42);
  border-radius: 999px;

  background: rgba(165, 138, 82, 0.08);

  color: var(--gold);

  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1;
}


.primary-button,
.secondary-button {

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  padding:
    0 20px;

  border-radius:
    11px;

  font-size:
    0.79rem;

  font-weight:
    800;

  letter-spacing:
    0.025em;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.primary-button {

  border:
    1px solid
    var(--blue-dark);

  color:
    #ffffff;

  background:
    var(--blue-dark);
}


.primary-button:hover:not(:disabled) {

  transform:
    translateY(-1px);

  box-shadow:
    0 10px 24px
    rgba(
      32,
      56,
      78,
      0.18
    );
}


.primary-button:disabled {

  opacity:
    0.6;
}


.secondary-button {

  border:
    1px solid
    var(--line);

  color:
    var(--blue);

  background:
    var(--paper);
}


.secondary-button span {

  color:
    var(--muted);

  font-size:
    0.6rem;

  letter-spacing:
    0.07em;
}


/*
 * ============================================================
 * PRODUCTION PIPELINE
 * ============================================================
 */


.production-section {

  padding:
    30px 34px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


.production-pipeline {

  display:
    flex;

  align-items:
    center;
}


.pipeline-stage {

  min-width:
    150px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  opacity:
    0.52;

  transition:
    opacity 180ms ease;
}


.pipeline-marker {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  color:
    var(--muted);

  background:
    var(--paper);

  font-size:
    0.72rem;

  font-weight:
    800;
}


.pipeline-stage strong {

  display:
    block;

  color:
    var(--ink);

  font-size:
    0.76rem;
}


.pipeline-stage div span {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    0.67rem;
}


.pipeline-line {

  height:
    1px;

  flex:
    1;

  margin:
    0 13px;

  background:
    var(--line);
}


.pipeline-stage.active,
.pipeline-stage.complete {

  opacity:
    1;
}


.pipeline-stage.active
.pipeline-marker {

  border-color:
    var(--gold);

  color:
    var(--gold);

  box-shadow:
    0 0 0 5px
    rgba(
      165,
      138,
      82,
      0.10
    );
}


.pipeline-stage.complete
.pipeline-marker {

  border-color:
    var(--blue);

  color:
    #ffffff;

  background:
    var(--blue);
}


.figure8-return {

  margin-top:
    24px;

  display:
    flex;

  gap:
    14px;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(
      154,
      83,
      83,
      0.25
    );

  border-radius:
    12px;

  background:
    rgba(
      154,
      83,
      83,
      0.055
    );
}


.figure8-symbol {

  width:
    30px;

  height:
    30px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      154,
      83,
      83,
      0.35
    );

  border-radius:
    50%;

  color:
    var(--danger);

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


.figure8-return strong {

  color:
    var(--danger);

  font-size:
    0.78rem;
}


.figure8-return p {

  margin:
    4px 0 0;

  color:
    var(--muted);

  font-size:
    0.76rem;

  line-height:
    1.5;
}


/*
 * ============================================================
 * PLAN
 * ============================================================
 */


.plan-section {

  padding:
    34px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


.plan-badge {

  align-self:
    flex-start;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(
      49,
      78,
      104,
      0.25
    );

  border-radius:
    999px;

  color:
    var(--blue);

  background:
    var(--soft-blue);

  font-size:
    0.61rem;

  font-weight:
    850;

  letter-spacing:
    0.1em;
}


.plan-layout {

  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      0.8fr
    )
    minmax(
      0,
      1.2fr
    );

  gap:
    18px;
}


.plan-summary-card,
.plan-detail-card {

  border:
    1px solid
    var(--line);

  border-radius:
    16px;

  background:
    var(--paper);
}


.plan-summary-card {

  padding:
    26px;
}


.plan-label {

  margin:
    0 0 9px;

  color:
    var(--gold);

  font-size:
    0.64rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}


.plan-summary-card h3 {

  margin:
    0;

  color:
    var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.65rem;

  font-weight:
    500;

  line-height:
    1.15;
}


.artifact-meta {

  margin:
    12px 0 0;

  color:
    var(--muted);

  font-size:
    0.8rem;

  line-height:
    1.5;
}


.metric-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  margin-top:
    26px;
}


.metric {

  padding:
    15px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    #fbfbfa;
}


.metric strong {

  display:
    block;

  color:
    var(--blue-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.5rem;

  font-weight:
    500;
}


.metric span {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    0.67rem;
}


.manifest-action {

  margin-top:
    26px;
}


.manifest-action
.primary-button {

  width:
    100%;
}


.plan-detail-card {

  overflow:
    hidden;
}


.plan-detail-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    18px 20px;

  border-bottom:
    1px solid
    var(--line);

  background:
    #fbfbfa;
}


.plan-detail-header
.plan-label {

  margin:
    0;
}


.plan-detail-header > span {

  color:
    var(--muted);

  font-size:
    0.67rem;
}


.slide-plan {

  max-height:
    520px;

  overflow:
    auto;

  padding:
    8px 20px 12px;
}


.slide-plan-item {

  display:
    grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px 0;

  border-bottom:
    1px solid
    #eceff2;
}


.slide-plan-item:last-child {

  border-bottom:
    0;
}


.slide-number {

  color:
    var(--gold);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    0.86rem;
}


.slide-plan-item strong {

  display:
    block;

  color:
    var(--ink);

  font-size:
    0.78rem;

  line-height:
    1.35;
}


.slide-plan-item p {

  margin:
    4px 0 0;

  color:
    var(--muted);

  font-size:
    0.66rem;
}


.slide-layout {

  padding:
    5px 8px;

  border-radius:
    999px;

  color:
    var(--blue);

  background:
    var(--soft-blue);

  font-size:
    0.56rem;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  white-space:
    nowrap;
}


/*
 * ============================================================
 * OUTPUT
 * ============================================================
 */


.output-card {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    22px;

  padding:
    32px 34px;

  border:
    1px solid
    rgba(
      85,
      117,
      102,
      0.30
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  box-shadow:
    var(--shadow);
}


.output-mark {

  width:
    48px;

  height:
    48px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    var(--success);

  font-weight:
    900;
}


.output-content {

  flex:
    1;
}


.output-content > p:not(
  .section-kicker
) {

  max-width:
    700px;

  margin:
    10px 0 0;

  color:
    var(--muted);

  line-height:
    1.55;
}


.output-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    22px;
}


/*
 * ============================================================
 * LOADING
 * ============================================================
 */


.is-busy {

  pointer-events:
    none;
}


.is-busy
.primary-button {

  opacity:
    0.68;
}


@keyframes atlaspoint-pulse {

  0%,
  100% {

    opacity:
      0.45;
  }

  50% {

    opacity:
      1;
  }
}


.pipeline-stage.processing {

  animation:
    atlaspoint-pulse
    1.1s
    ease-in-out
    infinite;
}


/*
 * ============================================================
 * FOOTER
 * ============================================================
 */


.atlaspoint-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    48px;

  padding:
    22px 2px 0;

  border-top:
    1px solid
    var(--line);

  color:
    var(--muted);

  font-size:
    0.67rem;
}


/*
 * ============================================================
 * ACCESSIBILITY
 * ============================================================
 */


button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
.artifact-option:focus-within {

  outline:
    3px solid
    rgba(
      49,
      78,
      104,
      0.25
    );

  outline-offset:
    3px;
}


@media (
  prefers-reduced-motion:
  reduce
) {

  * {

    scroll-behavior:
      auto !important;

    animation:
      none !important;

    transition:
      none !important;
  }
}


/*
 * ============================================================
 * RESPONSIVE
 * ============================================================
 */


@media (
  max-width:
  980px
) {

  .atlaspoint-header {

    flex-direction:
      column;
  }


  .engine-status {

    min-width:
      0;
  }


  .artifact-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .control-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .production-pipeline {

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      14px;
  }


  .pipeline-line {

    display:
      none;
  }


  .plan-layout {

    grid-template-columns:
      1fr;
  }

}


@media (
  max-width:
  720px
) {

  .atlaspoint-shell {

    width:
      min(
        100% - 28px,
        1280px
      );

    padding:
      36px 0 40px;
  }


  .atlaspoint-header {

    margin-bottom:
      34px;
  }


  .studio-card,
  .production-section,
  .plan-section {

    padding:
      24px 20px;
  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      10px;
  }


  .section-heading > p {

    text-align:
      left;
  }


  .artifact-grid,
  .control-grid,
  .production-pipeline {

    grid-template-columns:
      1fr;
  }


  .form-actions {

    align-items:
      stretch;

    flex-direction:
      column;
  }


  .primary-button {

    width:
      100%;
  }


  .output-card {

    padding:
      25px 20px;
  }


  .atlaspoint-footer {

    align-items:
      flex-start;

    flex-direction:
      column;
  }

}

/*
 * ============================================================
 * A5 — UNIVERSAL ARTIFACT SELECTION
 * ============================================================
 */


.artifact-grid-user {

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


.artifact-option:has(
  input:checked
) {

  border-color:
    rgba(
      49,
      78,
      104,
      0.48
    );

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--soft-blue) 100%
    );

  box-shadow:
    0 10px 30px
    rgba(
      24,
      36,
      50,
      0.055
    );
}


.artifact-option:has(
  input:checked
)::after {

  content:
    "SELECTED";

  position:
    absolute;

  top:
    14px;

  right:
    14px;

  color:
    var(--blue);

  font-size:
    0.52rem;

  font-weight:
    850;

  letter-spacing:
    0.09em;
}


@media (
  max-width:
  820px
) {

  .artifact-grid-user {

    grid-template-columns:
      1fr;
  }

}

/*
 * ============================================================
 * A5 — UNIVERSAL ARTIFACT SELECTION
 * ============================================================
 */

.artifact-grid-user {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}


/*
 * Each artifact card is its own vertical stack.
 *
 * PRESENTATION
 * PowerPoint
 * Visual academic presentation
 * SELECTED
 * PPTX
 */

.artifact-grid-user .artifact-option {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-height: 190px;
  padding: 22px 22px 20px;

  box-sizing: border-box;

  cursor: pointer;
}


/*
 * Hide native radio control.
 * The entire card is the selector.
 */

.artifact-grid-user .artifact-option > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/*
 * PRESENTATION / DOCUMENT / PUBLICATION
 */

.artifact-grid-user .artifact-kicker {
  display: block;
  width: 100%;

  margin: 0 0 10px;

  color: var(--gold);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}


/*
 * PowerPoint / Word / PDF
 */

.artifact-grid-user .artifact-option > strong {
  display: block;
  width: 100%;

  margin: 0 0 8px;

  color: var(--ink);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1.2;
}


/*
 * Description
 */

.artifact-grid-user .artifact-description {
  display: block;
  width: 100%;

  margin: 0 0 14px;

  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.45;
}


/*
 * SELECTED
 *
 * This is deliberately IN FLOW rather than
 * absolutely positioned in the corner.
 */

.artifact-grid-user .artifact-option:has(input:checked)::after {
  content: "SELECTED";

  position: static;

  display: block;
  width: 100%;

  margin: auto 0 7px;

  color: var(--blue);

  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.2;
}


/*
 * PPTX / DOCX / PDF
 */

.artifact-grid-user .artifact-state {
  display: block;
  width: 100%;

  margin: 0;

  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
}


.artifact-grid-user .artifact-state-live {
  color: var(--blue);
}


/*
 * SELECTED CARD
 */

.artifact-grid-user .artifact-option:has(input:checked) {
  border-color: rgba(49, 78, 104, 0.48);

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--soft-blue) 100%
    );

  box-shadow:
    0 10px 30px rgba(24, 36, 50, 0.055);
}


/*
 * Responsive
 */

@media (max-width: 820px) {

  .artifact-grid-user {
    grid-template-columns: 1fr;
  }

  .artifact-grid-user .artifact-option {
    min-height: 175px;
  }
}

/* MEDATLAS INSTITUTIONAL TOPBAR */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px max(26px, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid rgba(173, 122, 32, 0.20);
  background: rgba(250, 247, 239, 0.95);
  backdrop-filter: blur(18px);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.topbar .brand-seal {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.topbar .brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.topbar .brand-copy strong {
  color: #14213d;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.045em;
}

.topbar .brand-parent {
  margin-top: 5px;
  color: #8d6118;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.topbar .product-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 15px;
  border-left: 1px solid rgba(173, 122, 32, 0.20);
  border-right: 1px solid rgba(173, 122, 32, 0.20);
}

.topbar .product-identity span {
  color: #8d6118;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.topbar .product-identity strong {
  color: #14213d;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 500;
}

.topbar .nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 3px;
}

.topbar .nav a {
  padding: 9px 11px;
  border-radius: 8px;
  color: #42516a;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.topbar .nav a:hover {
  color: #14213d;
  background: rgba(173, 122, 32, 0.07);
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .topbar .product-identity {
    display: none;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: relative;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px 18px;
  }

  .topbar .brand,
  .topbar .nav {
    justify-self: center;
  }

  .topbar .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .topbar .nav a {
    padding: 7px 8px;
    font-size: 11px;
  }
}