/* Content cards share one frame in every page and appearance mode.
   Form fields, buttons, badges, drawing elements, and print layouts keep
   their existing treatment. The orange intentionally stays the same in
   light and dark mode rather than following the darker mode's accent. */
@media screen {
  :root {
    --card-outline-blue: #0556a5;
    --card-top-orange: #f4783a;
  }

  :root[data-theme="dark"] {
    --card-outline-blue: #8ac4ff;
  }

  html:root body :is(
    .landing-tool,
    .utility-tile,
    .input-card,
    .output-card,
    .reference-card,
    .anchor-reference,
    .panel-editor,
    .recommendation,
    .anchor-option,
    .no-match,
    .picture-picker,
    .sign-picture-result,
    .native-chart,
    .auth-card,
    .unlock-card,
    .editor-card,
    .appearance-preview,
    .sample-card,
    .sample-recommendation,
    .county-list,
    .visibility-list,
    .option-group,
    .popup-toggle,
    .catalog-item,
    .catalog-upload,
    .catalog-empty,
    .catalog-sizes-empty,
    .catalog-sizes-dialog,
    .catalog-size-row,
    .catalog-featured,
    .catalog-featured-list > li,
    .visitor-card,
    .visitor-empty,
    .visitor-block-row,
    .access-lock,
    .access-lock-toggle,
    .accounts-owner-note,
    .accounts-create-form,
    .app-notice,
    .notice,
    .form-error,
    .county-anchor-note,
    .warehouse-feedback,
    .warehouse-conflict
  ) {
    border: 1px solid var(--card-outline-blue);
    border-top: 4px solid var(--card-top-orange);
  }

  /* The home cards previously painted their top stripe as a pseudo-element. */
  html:root body .landing-tool::before {
    content: none;
  }

  html:root body .landing-tool:hover,
  html:root body .sign-picture-result:hover,
  html:root body .sign-picture-result:focus-visible,
  html:root body .clean-sign-form .panel-editor.is-primary {
    border-color: var(--card-outline-blue);
    border-top-color: var(--card-top-orange);
  }

  html:root body .clean-sign-form .panel-editor.is-primary {
    box-shadow: none;
  }

  /* The chart heading and sheet form one card, with one perimeter. */
  html:root body .native-chart {
    border-radius: 13px;
    overflow: hidden;
  }

  html:root body .native-chart-heading,
  html:root body .capacity-chart-sheet {
    border: 0;
  }

  html:root body .county-anchor-note {
    border-radius: 13px;
  }
}