/* Shared content vocabulary. A role keeps its colour across editing and reading.
   Objective/category colours and status indicators remain independent.
   Load last in layout.php; keep all decoration screen-only for existing exports. */
:root {
  --content-identity: #285f8b;
  --content-identity-soft: #edf4fb;
  --content-identity-line: #c5d8e9;
  --content-pedagogy: #206d70;
  --content-pedagogy-soft: #eaf6f4;
  --content-pedagogy-line: #b9dbd6;
  --content-practice: #855b24;
  --content-practice-soft: #fbf4e8;
  --content-practice-line: #e4d2b4;
  --content-resources: #4c6079;
  --content-resources-soft: #eff2f8;
  --content-resources-line: #cbd5e3;
  --content-collective: #71518b;
  --content-collective-soft: #f4eef9;
  --content-collective-line: #d9c9e7;
  --content-evaluation: #426b4f;
  --content-evaluation-soft: #eef5eb;
  --content-evaluation-line: #cadcc4;
}

[data-content="identity"] {
  --content-accent: var(--content-identity);
  --content-soft: var(--content-identity-soft);
  --content-line: var(--content-identity-line);
}
[data-content="pedagogy"] {
  --content-accent: var(--content-pedagogy);
  --content-soft: var(--content-pedagogy-soft);
  --content-line: var(--content-pedagogy-line);
}
[data-content="practice"] {
  --content-accent: var(--content-practice);
  --content-soft: var(--content-practice-soft);
  --content-line: var(--content-practice-line);
}
[data-content="resources"] {
  --content-accent: var(--content-resources);
  --content-soft: var(--content-resources-soft);
  --content-line: var(--content-resources-line);
}
[data-content="collective"] {
  --content-accent: var(--content-collective);
  --content-soft: var(--content-collective-soft);
  --content-line: var(--content-collective-line);
}
[data-content="evaluation"] {
  --content-accent: var(--content-evaluation);
  --content-soft: var(--content-evaluation-soft);
  --content-line: var(--content-evaluation-line);
}

@media screen {
  /* The page frame stays calm; colour belongs to the content within it. */
  body { background: #f3f5f8; }
  .heading-row {
    background: linear-gradient(115deg, #fff 30%, var(--content-identity-soft));
    border-color: var(--content-identity-line);
  }
  .contextbar {
    padding: 1rem 1.2rem;
    border: 1px solid var(--content-identity-line);
    border-inline-start: 4px solid var(--content-identity);
    border-radius: 12px;
    background: var(--content-identity-soft);
  }
  .contextbar-title { color: var(--content-identity); }
  .contextbar select { background-color: #fff; }

  /* Explicit roles avoid tying colours to block order or translated headings. */
  .container [data-content] {
    border: 1px solid var(--content-line);
    border-inline-start: 4px solid var(--content-accent);
    border-radius: 12px;
    background: linear-gradient(115deg, var(--content-soft), #fff 85%);
    color: var(--ink);
    min-width: 0;
  }
  [data-content] > :is(h2, h3, h4, legend, summary, .eyebrow),
  [data-content] > .panel-heading h2,
  [data-content] > .panel-heading .eyebrow,
  label[data-content] > span:first-child {
    color: var(--content-accent);
  }
  [data-content] > legend { padding-inline: .45rem; font-weight: 700; }
  [data-content] > summary { border-radius: 8px; }
  [data-content] > :is(p, ul, dl):last-child { margin-bottom: 0; }
  [data-content] > .eyebrow { font-weight: 750; }
  .content-inset,
  label.content-field {
    padding: 1rem 1.1rem;
    margin-block: .8rem;
  }
  label.content-field { display: flex; flex-direction: column; gap: .5rem; }
  label.content-field :is(input, textarea, select) { margin: 0; background-color: #fff; }
  label.content-field small { color: var(--muted); font-weight: 400; }

  /* Form heading, jump link and read view share the same accent. */
  .activity-edit-section[data-content] { border-top-width: 1px; }
  .activity-edit-section[data-content] > .section-heading {
    background: var(--content-soft);
    border-bottom: 1px solid var(--content-line);
  }
  .activity-edit-section[data-content] > .section-heading h2 { color: var(--content-accent); }
  .activity-edit-section[data-content] > .section-heading .step-badge {
    background: var(--content-accent);
    color: #fff;
    box-shadow: none;
  }
  .activity-edit-section[data-content] > .activity-edit-body { background: #fff; }
  .ai-workbench[data-content] > summary { background: var(--content-soft); }
  .ai-workbench[data-content] .ai-workbench-icon { background: var(--content-accent); }
  .edit-steps a[data-content] { border-inline-start-width: 4px; box-shadow: none; }
  .edit-steps a[data-content] > :is(span, strong) { color: var(--content-accent); }
  .edit-steps a[data-content] > span { background: #fff; border: 1px solid var(--content-line); }
  .edit-steps a[data-content]:hover { border-color: var(--content-accent); }
  .choice-fieldset[data-content] { padding: 1rem 1.1rem; }
  .visibility-fieldset[data-content] .visibility-choice { background: #fff; }
  .visibility-fieldset[data-content] .visibility-choice:has(input:checked) {
    background: var(--content-soft);
    border-color: var(--content-accent);
    box-shadow: inset 0 0 0 1px var(--content-accent);
  }
  .visibility-fieldset[data-content] input { accent-color: var(--content-accent); }
  .dgt-editor-section[data-content] > summary {
    background: var(--content-soft);
    color: var(--content-accent);
  }
  .dgt-editor-section[data-content] .dgt-section-number { background: var(--content-accent); color: #fff; }
  .dgt-section-nav a[data-content] { color: var(--content-accent); }
  .dgt-section-nav a[data-content].active { border-color: var(--content-accent); box-shadow: inset 0 0 0 1px var(--content-accent); }

  /* Compact library and follow-up blocks use exactly the same vocabulary. */
  .activity-section[data-content], .activity-details[data-content],
  .evidence[data-content], .activity-resources[data-content] { padding: .85rem 1rem; }
  .activity-section[data-content] > strong { color: var(--content-accent); }
  .activity-details[data-content] > summary { font-weight: 700; background: transparent; }
  .activity-details[data-content] > p { color: var(--ink); }
  .activity-resources[data-content] { margin-block: .8rem; }
  .activity-resources[data-content] .resource-link { background: #fff; color: var(--content-accent); border-color: var(--content-line); }
  .teacher-notes-grid > label[data-content] { margin-block: .75rem; }
  .secondary-fields[data-content] { padding: .85rem 1rem; }
  .secondary-fields[data-content] > summary { color: var(--content-accent); }
  .concertation-report > .content-inset { margin-block: 1rem; }
  .concertation-report > .content-inset h2:first-child { margin-top: 0; }

  /* Colour is explained in words and never replaces the existing labels. */
  .content-color-guide {
    margin: 1.25rem 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: .875rem;
  }
  .content-color-guide > summary { padding: .7rem 1rem; cursor: pointer; color: var(--muted); font-weight: 650; }
  .content-color-guide[open] > summary { border-bottom: 1px solid var(--line); }
  .content-color-guide > p { margin: .8rem 1rem; color: var(--muted); }
  .content-color-key {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    padding: 0 1rem;
    list-style: none;
    margin: 1rem 0;
  }
  .content-color-key li { padding: .6rem .8rem; }
  .content-color-key strong { display: block; color: var(--content-accent); }
  .content-color-key span { display: block; color: var(--muted); font-size: .8125rem; }
  @media (max-width: 700px) {
    .content-color-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contextbar, .content-inset, label.content-field { padding: .85rem; }
  }
  @media (max-width: 420px) {
    .content-color-key { grid-template-columns: 1fr; }
  }
}

@media print {
  .content-color-guide { display: none !important; }
  /* Spacing for newly grouped report sections; existing print colours prevail. */
  .concertation-report > .content-inset { margin-block: 1rem; }
}
@media (forced-colors: active) {
  .container [data-content] { border-color: CanvasText; background: Canvas; color: CanvasText; }
  [data-content] > :is(h2, h3, h4, legend, summary, .eyebrow),
  [data-content] > .panel-heading h2,
  .edit-steps a[data-content] > :is(span, strong),
  .content-color-key strong { color: CanvasText; }
}