/* Selected B: neutral editorial surfaces, one dark feature, restrained color.
   Original logo, typography, document angles, and working routes are retained. */
body[data-refinement="editorial"] {
  --ink: #1b2923;
  --text: #424e48;
  --muted: #626d67;
  --blue: #b44724;
  --blue-dark: #92371b;
  --blue-soft: #f5eae5;
  --wash: #f1f4f2;
  --paper: #ffffff;
  --canvas: #ffffff;
  --line: #dce2de;
  --line-strong: #b9c4bd;
  --radius: 7px;
  --feature-ink: #293b33;
  --art-ochre: #ddbf62;
  --art-mint: #74c7a7;
  --art-blue: #4394f2;
}

/* Masthead and the reading surface stay neutral. */
body[data-refinement] .review-note { background: #f1f4f2; border: 0; }
body[data-refinement] .review-note p,
body[data-refinement] .review-note a { color: var(--muted); font-size: 11px; }
body[data-refinement] .review-note .wrap { min-height: 28px; }
body[data-refinement] .site-header { background: #ffffff; border-top: 3px solid var(--ink); border-bottom-color: var(--line); }
body[data-refinement] .masthead { min-height: 87px; }
body[data-refinement] .brand { gap: 0; }
body[data-refinement] .nav { gap: 29px; }
body[data-refinement] .nav > a,
body[data-refinement] .nav summary,
body[data-refinement] .header-search { font-size: 13px; }
body[data-refinement] .header-search,
body[data-refinement] .mobile-toggle { flex-shrink: 0; }
body[data-refinement] .hero { background: #f8faf9; padding-top: 44px; padding-bottom: 29px; border-bottom-color: var(--line); }
body[data-refinement] .hero > .wrap > .hero-grid > div > .eyebrow { color: #53665b; }
body[data-refinement] .hero .dek { color: var(--text); }
body[data-refinement] .hero-search label { font-weight: 600; }
body[data-refinement] .search-field { background: #ffffff; border-color: var(--line-strong); }
body[data-refinement] .search-hints a { color: #53665b; }
body[data-refinement] .search-hints a:hover { color: var(--blue-dark); }

/* The composed SOP feature supplies contrast instead of a large color fill. */
body[data-refinement] .hero-aside { background: var(--feature-ink); border-color: var(--feature-ink); border-radius: 7px; color: #ffffff; box-shadow: 0 3px 10px #00000104; }
body[data-refinement] .hero-aside > .eyebrow { color: #afd5c2; }
body[data-refinement] .hero-aside .serif { color: #ffffff; }
body[data-refinement] .hero-aside > p { color: #d5e0d9; }
body[data-refinement] .hero-aside .document { border-color: #d5ddd7; border-top: 2px solid var(--art-ochre); box-shadow: 0 8px 18px #0000010e; }
body[data-refinement] .hero-resource-link { box-shadow: 0 5px 14px #0000011c; }
body[data-refinement] .hero-aside :focus-visible { outline-color: #ffffff; }

/* Preserve the original navigation-card treatment, with updated colors. */
body[data-refinement] .stage-card { background: #ffffff; border-color: var(--line); }
body[data-refinement] .stage-card .stage-icon { background: #f4f6f5; border-color: #dce2de; color: #4b6255; }
body[data-refinement] .stage-card.run { background: #ffffff; border-color: #b9c4bd; }
body[data-refinement] .stage-card.run .stage-icon { background: #f7ece6; border-color: #e7d5ca; color: var(--blue); }
body[data-refinement] .stage-card:hover { border-color: #84998a; box-shadow: 0 3px 9px #1b292309; }
body[data-refinement] .section { padding-block: 43px; }
body[data-refinement] .section-head .eyebrow { color: #63746a; }
body[data-refinement] .section-head p { color: var(--muted); }
body[data-refinement] .task-icon { flex-basis: 36px; width: 36px; height: 36px; background: #f5f7f6; border: 1px solid var(--line); border-radius: 6px; color: #4b6255; }
body[data-refinement] .task-card:hover .task-icon { background: #eaf0ec; border-color: #b9c9be; }

/* Color belongs to the document edge, not the entire thumbnail. */
body[data-refinement] .resources-section { background: var(--wash); border-color: var(--line); }
body[data-refinement] .resource-card { border-color: #d8e0da; background: #ffffff; }
body[data-refinement] .resource-card[data-resource="sop"] { --document-accent: #b44724; --preview-tone: #e9eeeb; }
body[data-refinement] .resource-card[data-resource="onboarding"] { --document-accent: var(--art-mint); --preview-tone: #ebf1ed; }
body[data-refinement] .resource-card[data-resource="weekly"] { --document-accent: var(--art-blue); --preview-tone: #eaf0f4; }
body[data-refinement] .resource-card[data-resource] .preview-surface { background: var(--preview-tone); border-color: #d8e0da; }
body[data-refinement] .resource-card .document { border-color: #c5d0c8; border-top-color: var(--document-accent); box-shadow: 0 6px 14px #00000118; }
body[data-refinement] .resource-card[data-resource="sop"] .document { transform: rotate(-2deg); }
body[data-refinement] .resource-card[data-resource="onboarding"] .document { transform: rotate(2deg); }
body[data-refinement] .resource-card[data-resource="weekly"] .document { transform: none; }
body[data-refinement] .resource-copy h3 { font-weight: 500; }
body[data-refinement] .resource-copy p { font-size: 14px; }
body[data-refinement] .resource-actions .text-link { color: #53665b; }
body[data-refinement] .resource-actions .text-link:hover { color: var(--blue); }

/* A functional diagram with small, coordinated accents. */
body[data-refinement] .mini-process { background: #f5f7f6; border: 1px solid var(--line); }
body[data-refinement] .mini-process b { background: #f2e2d9; border-color: #dbc7bb; color: var(--ink); }
body[data-refinement] .mini-process span:nth-of-type(2) b { background: #dfebe3; border-color: #bfd5c6; }
body[data-refinement] .mini-process span:nth-of-type(3) b { background: #e0eaf3; border-color: #c2d4e5; }
body[data-refinement] .mini-process > svg { color: #819087; }
body[data-refinement] .lead-guide p,
body[data-refinement] .compact-guide p { line-height: 1.75; }
body[data-refinement] .lower-section { background: #ffffff; border-color: var(--line); }
body[data-refinement] .software-note { border-color: var(--line); }
body[data-refinement] .topics a { color: #3e5849; }
body[data-refinement] .topics a:hover { color: var(--blue); }

/* Finish with the same dark ink used by the feature. */
body[data-refinement] .site-footer { background: #202e27; border-top: 0; padding-top: 42px; color: #ffffff; }
body[data-refinement] .site-footer h2 { color: #ffffff; font: 500 12px/1.5 "Public Sans",Arial,sans-serif; }
body[data-refinement] .site-footer .brand { width: fit-content; padding: 10px 12px; border-radius: 4px; background: #ffffff; }
body[data-refinement] .site-footer .brand-logo-frame { width: 128px; }
body[data-refinement] .site-footer p,
body[data-refinement] .site-footer nav a,
body[data-refinement] .site-footer .footer-legal a { color: #ced8d0; }
body[data-refinement] .site-footer nav a { font-size: 12px; padding-block: 5px; }
body[data-refinement] .footer-legal { border-top-color: #4a5b4f; padding-top: 21px; }
body[data-refinement] .footer-legal p a { color: #ffffff; }

/* Shared document details and interaction states. */
body[data-refinement] .document { border-color: #c5d0c8; }
body[data-refinement] .document-top,
body[data-refinement] .document .doc-meta { color: #626d67; border-bottom-color: #dce2de; }
body[data-refinement] .doc-square { border-color: #8b9c90; }
body[data-refinement] .sheet-preview td,
body[data-refinement] .sheet-preview th { border-color: #dce2de; }
body[data-refinement] .sheet-preview th { background: #f3f6f4; }
body[data-refinement] input::placeholder { color: var(--muted); }
body[data-refinement] dialog { background: #ffffff; }
body[data-refinement] .dialog-toolbar { background: #f5f7f6; }
body[data-refinement] .callout { background: #f1f4f2; border-left-color: var(--blue); }
body[data-refinement] .icon-button { background: #ffffff; }
body[data-refinement] .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
body[data-refinement] .button.secondary { background: #ffffff; color: var(--blue); border-color: var(--line-strong); }
body[data-refinement] .button.secondary:hover { background: #f5f7f6; color: var(--blue-dark); border-color: var(--blue); }
body[data-refinement] .hero-resource-link,
body[data-refinement] .search-field .button { background: var(--blue); border-color: var(--blue); }
body[data-refinement] .hero-resource-link:hover,
body[data-refinement] .search-field .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

@media(max-width:1280px) {
  body[data-refinement] .nav { gap: 23px; }
}
/* Preserve the supplied SOP composition at laptop widths as well. */
@media(min-width:1041px) and (max-width:1280px) {
  body[data-refinement] .hero-grid { grid-template-columns: minmax(0,1fr) 380px; }
}
@media(max-width:1040px) {
  body[data-refinement] .nav { gap: 16px; }
  body[data-refinement] .nav > a,
  body[data-refinement] .nav summary { font-size: 12px; }
}
@media(max-width:800px) {
  body[data-refinement] .masthead { min-height: 79px; }
  body[data-refinement] .hero { padding-top: 37px; }
}
@media(max-width:580px) {
  body[data-refinement] .masthead { min-height: 77px; }
  body[data-refinement] .brand-logo-frame { width: 100px; }
  body[data-refinement] .review-note .wrap { min-height: 29px; }
  body[data-refinement] .review-note p,
  body[data-refinement] .review-note a { font-size: 9px; }
  body[data-refinement] .hero { padding: 31px 0 24px; }
  body[data-refinement] .section { padding-block: 32px; }
  body[data-refinement] .site-footer nav a { padding-block: 9px; min-height: 38px; }
}
@media(max-width:360px) {
  body[data-refinement] .masthead { gap: 6px; }
}