/* CF presentation layer, inspired by CodeFronts component techniques.
   Source links and attribution: docs/codefronts-ui-sources.md.
   Screen only: document printing and the application's state remain independent. */
@media screen {
  body.cf-ui {
    --cf-accent: #2d7153;
    --cf-focus: #327756;
    --cf-soft-shadow: 0 12px 32px -24px #244d354a;
    background: radial-gradient(ellipse at 0 0, #e4f1e8 0, transparent 40rem), #f4f7f4;
    accent-color: var(--cf-accent);
  }

  .cf-ui .topbar {
    background: #fffffff5;
    border-bottom-color: #dce8df;
    box-shadow: 0 4px 22px #203e2b06;
  }
  .cf-ui .brandmark {
    background: linear-gradient(145deg, #263d3e, #1d2c33);
    box-shadow: inset 0 1px 0 #ffffff29, 0 4px 12px #203e2b13;
  }
  .cf-ui .card {
    border-color: #d9e5dc;
    box-shadow: var(--cf-soft-shadow), inset 0 1px 0 #fff;
  }
  .cf-ui .card > .step { color: #4e7760; }
  .cf-ui :is(.metrics article, .subscription-item, .commerce-item, .billing-history-item) {
    border-color: #dae6de;
    box-shadow: 0 3px 12px #244d3504;
  }
  .cf-ui :is(.metrics strong, .billing-total-due strong, .commerce-credit-summary strong) {
    font-variant-numeric: tabular-nums;
  }

  /* Native controls keep their platform semantics and the existing Mac chevron. */
  .cf-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):not(.native-password-field input):focus-visible {
    border-color: var(--cf-focus);
    outline: 3px solid #b4ddc5;
    outline-offset: 2px;
    box-shadow: 0 4px 14px #24664110;
  }
  .cf-ui :is(button, a, summary, input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 3px solid var(--cf-focus);
    outline-offset: 3px;
  }
  .cf-ui :is(button, a).primary:not(.danger):not(.coupon-danger) {
    background-color: #286447;
    background-image: linear-gradient(115deg, transparent 25%, #ffffff14 49%, transparent 72%), linear-gradient(135deg, #235d45, #377957);
    background-size: 230% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    color: #fff;
    border-color: #2c674b;
    box-shadow: 0 4px 10px #285e3f16, inset 0 1px 0 #ffffff1c;
  }
  .cf-ui :is(button, a).secondary:not(.danger):not(.coupon-danger) {
    background-color: #eef5f0;
    background-image: linear-gradient(145deg, #f5faf6, #eaf3ed);
    border-color: #d4e3d9;
    box-shadow: inset 0 1px 0 #ffffffc9;
  }
  .cf-ui :is(button, a):is(.primary, .secondary)[aria-disabled="true"],
  .cf-ui button:is(.primary, .secondary):disabled {
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
  }
  .cf-ui .shop-option[aria-pressed="true"] {
    border-color: #458764;
    background: linear-gradient(135deg, #eef8f1, #f7fcf8);
    box-shadow: inset 4px 0 0 #438562, 0 4px 14px #244d3509;
  }
  .cf-ui :is(.segmented button.selected, .filters button.active) {
    box-shadow: 0 2px 8px #244d3517, inset 0 0 0 1px #d3e3d8;
  }
  .cf-ui .commerce-tabs a[aria-current="page"] {
    background: linear-gradient(135deg, #235d45, #377957);
    box-shadow: 0 3px 10px #285e3f18;
  }
  .cf-ui .commerce-tabs a:focus-visible { outline-offset: 3px; }
  .cf-ui .cf-nav-link[aria-current="page"] { background: #edf6ef; }
  .cf-ui :is(.cf-nav-package, .cf-nav-drawer-package) {
    background: linear-gradient(135deg, #f5faf6, #eaf4ed);
    border-color: #d4e4d9;
    box-shadow: inset 0 1px 0 #fff;
  }
  .cf-ui .cf-nav-toggle { box-shadow: inset 0 1px 0 #fff; }
  .cf-ui .cf-nav-drawer { background: linear-gradient(160deg, #fff, #f6faf7); }
  .cf-ui .cf-nav-drawer::backdrop { background: #18372d70; }
  .cf-ui .cf-nav-mobile-links a[aria-current="page"] { background: #e9f4ed; }
  .cf-ui dialog { border-color: #d0e2d6; box-shadow: 0 24px 80px #18372d30; }
  .cf-ui dialog::backdrop { background: #18372d70; }

  /* Decorative spans never receive focus or clicks, or alter button labels. */
  .cf-ui .cf-ripple-host { position: relative; isolation: isolate; overflow: hidden; }
  .cf-ui .cf-click-ripple {
    position: absolute;
    top: var(--cf-ripple-y);
    left: var(--cf-ripple-x);
    width: var(--cf-ripple-size);
    height: var(--cf-ripple-size);
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  .cf-ui :is(button, a).primary:not(.danger):not(.coupon-danger):not(:disabled):not([aria-disabled="true"]):hover {
    background-position: 0 0, 0 0;
    box-shadow: 0 6px 16px #285e3f29, inset 0 1px 0 #ffffff24;
  }
  .cf-ui :is(button, a).secondary:not(.danger):not(.coupon-danger):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: #9fc2ad;
    background-color: #e2f0e7;
    background-image: none;
  }
  .cf-ui .shop-option:not(:disabled):hover { border-color: #7ba68c; }
  .cf-ui :is(.commerce-item, .billing-history-item):hover { border-color: #b5cdbd; }
  .cf-ui .commerce-tabs a:not([aria-current="page"]):hover { background: #eaf4ed; border-color: #b1cfbb; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .cf-ui :is(button, a):is(.primary, .secondary) {
    transition: background-position .45s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease;
  }
  .cf-ui :is(button, a):is(.primary, .secondary):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
  .cf-ui :is(.shop-option, .commerce-item, .billing-history-item) { transition: border-color .18s ease, box-shadow .18s ease; }
  .cf-ui :is(input, select, textarea) { transition: border-color .18s ease, box-shadow .18s ease; }
  .cf-ui .cf-click-ripple { animation: cf-click-ripple .55s ease-out both; }
  /* Pending sections stay fully visible if JS or IntersectionObserver fails. */
  .cf-ui [data-cf-reveal].cf-reveal-visible { animation: cf-section-enter .4s ease-out both; }
  .cf-ui dialog[open]:not(.cf-nav-drawer) { animation: cf-dialog-enter .18s ease-out; }
  .cf-ui dialog[open]::backdrop { animation: cf-backdrop-enter .18s ease-out; }
  @keyframes cf-click-ripple {
    0% { opacity: .16; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes cf-section-enter {
    from { opacity: .92; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes cf-dialog-enter {
    from { opacity: .7; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes cf-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
}

@media screen and (prefers-reduced-motion: reduce) {
  .cf-ui *, .cf-ui *::before, .cf-ui *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .cf-ui .cf-click-ripple { display: none; }
}

@media screen and (forced-colors: active) {
  body.cf-ui { background: Canvas; }
  .cf-ui :is(.card, .topbar, .shop-option, dialog, .cf-nav-package, .cf-nav-drawer-package) {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
  .cf-ui :is(button, a):is(.primary, .secondary) { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  .cf-ui .shop-option[aria-pressed="true"], .cf-ui .commerce-tabs a[aria-current="page"] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
    box-shadow: none;
  }
  .cf-ui .shop-option[aria-pressed="true"] span { color: HighlightText; }
  .cf-ui .cf-click-ripple { display: none; }
}