/* Interaction cues, not a second page theme. Loaded only outside Home/Studio.
   Keep route artwork and button semantics; make actions legible at rest. */
@layer printpass-control-clarity {
  @media screen {
    body[data-pa-control-clarity="true"] {
      --pa-control-accent: #087681;
      --pa-control-ink: #ffffff;
      --pa-control-edge: #537d87;
      --pa-control-focus: #087681;
    }

    html[data-pa-theme="dark"] body[data-pa-control-clarity="true"] {
      --pa-control-accent: #70e1dc;
      --pa-control-ink: #071620;
      --pa-control-edge: #87abb6;
      --pa-control-focus: #70e1dc;
    }

    /* Text links keep an at-rest cue. Navigation uses its authored active,
       hover and focus treatment; linked cards underline only their titles. */
    body[data-pa-control-clarity="true"] #main-content a[href]:not(.btn):not([role="button"]):not(:is(nav a, [role="navigation"] a)):not(:has(h2, h3, h4, p, strong, img, svg, canvas, [class*="__title"], [class$="-title"])) {
      text-decoration-line: underline !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: .2em !important;
      text-decoration-skip-ink: auto;
    }

    body[data-pa-control-clarity="true"] #main-content a[href]:not(.btn):not([role="button"]):not(:is(nav a, [role="navigation"] a)) :is(h2, h3, h4, strong, [class*="__title"], [class$="-title"]) {
      text-decoration-line: underline !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: .2em !important;
      text-decoration-skip-ink: auto;
    }

    body[data-pa-control-clarity="true"] footer a[href]:not(:has(img)) {
      text-decoration: none !important;
      border-bottom: 1px solid currentColor;
    }

    body[data-pa-control-clarity="true"] :is(a[href], button, summary, [role="button"], [role="tab"], select, input:is([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"])) {
      cursor: pointer;
    }

    /* An outlined edge survives transparent themes and busy image surfaces.
       Existing fills, radii, danger colors and component geometry stay owned
       by their original component. No pseudo-content or click handlers added. */
    body[data-pa-control-clarity="true"] #main-content :is(.btn, button, [role="button"], [role="tab"], input[type="submit"], input[type="button"], input[type="reset"]):not(.btn-link) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 65%, transparent), 0 2px 0 color-mix(in srgb, currentColor 16%, transparent) !important;
      font-weight: 650;
    }

    body[data-pa-control-clarity="true"] #main-content .btn {
      text-decoration: none !important;
    }

    body[data-pa-control-clarity="true"] #main-content .btn-close {
      padding: .5rem !important;
      border-radius: 4px;
      opacity: 1;
    }

    body[data-pa-control-clarity="true"] #main-content .pa-asset-preview {
      position: relative;
      outline: 1px solid var(--pa-control-edge);
      outline-offset: -1px;
    }

    body[data-pa-control-clarity="true"] #main-content .pa-asset-preview__action {
      position: absolute;
      inset: auto .65rem .65rem auto;
      padding: .4rem .65rem;
      border: 1px solid #ffffff;
      border-radius: 4px;
      background: #087681;
      color: #ffffff;
      font-size: .8rem;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: .2em;
    }

    body[data-pa-control-clarity="true"] #main-content :is(.btn-link, button.nav-link) {
      text-decoration: underline !important;
      text-underline-offset: .2em !important;
    }

    /* Selected filters/tabs are visibly different from available choices. */
    body[data-pa-control-clarity="true"] #main-content :is(button[aria-pressed="true"], [role="tab"][aria-selected="true"], .pa-list-filter-row button.active) {
      background: var(--pa-control-accent) !important;
      color: var(--pa-control-ink) !important;
      border-color: var(--pa-control-accent) !important;
      box-shadow: inset 0 -3px 0 currentColor !important;
    }

    body[data-pa-control-clarity="true"] #main-content :is(button[aria-pressed="true"], [role="tab"][aria-selected="true"], .pa-list-filter-row button.active) :is(span, strong, i) {
      color: inherit !important;
    }

    /* Disclosures retain their native/custom arrow and their open/closed
       behavior. A keyline makes the entire summary read as a control. */
    body[data-pa-control-clarity="true"] #main-content summary {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent) !important;
      border-radius: 4px;
      padding: .85rem 1rem !important;
      font-weight: 650;
    }

    body[data-pa-control-clarity="true"] #main-content summary::marker { color: currentColor; }

    /* Form fields keep their route palette but no longer disappear into it. */
    body[data-pa-control-clarity="true"] #main-content :is(.form-control, .form-select, textarea, select, input:not([type])):not([type="hidden"]):not([readonly]):not(:disabled),
    body[data-pa-control-clarity="true"] #main-content input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"], [type="url"], [type="tel"], [type="date"], [type="datetime-local"]):not([readonly]):not(:disabled) {
      border-color: var(--pa-control-edge) !important;
      border-width: 1px !important;
      border-style: solid !important;
    }

    body[data-pa-control-clarity="true"] #main-content input:is([type="checkbox"], [type="radio"], [type="range"]) {
      accent-color: var(--pa-control-accent);
    }

    body[data-pa-control-clarity="true"] #main-content .form-check-input {
      border: 1.5px solid var(--pa-control-edge) !important;
    }

    body[data-pa-control-clarity="true"] #main-content .form-check-input:checked,
    body[data-pa-control-clarity="true"] #main-content .form-check-input:indeterminate {
      background-color: var(--pa-control-accent) !important;
      border-color: var(--pa-control-accent) !important;
    }

    html[data-pa-theme="dark"] body[data-pa-control-clarity="true"] #main-content .form-check-input[type="checkbox"]:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23071620' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-6'/%3e%3c/svg%3e") !important;
    }

    html[data-pa-theme="dark"] body[data-pa-control-clarity="true"] #main-content .form-check-input[type="radio"]:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='4' cx='8' cy='8' fill='%23071620'/%3e%3c/svg%3e") !important;
    }

    html[data-pa-theme="dark"] body[data-pa-control-clarity="true"] #main-content .form-check-input[type="checkbox"]:indeterminate {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23071620' stroke-linecap='round' stroke-width='3' d='M4 8h8'/%3e%3c/svg%3e") !important;
    }

    html[data-pa-theme="dark"] body[data-pa-control-clarity="true"] #main-content .form-switch .form-check-input:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='6' cx='8' cy='8' fill='%23071620'/%3e%3c/svg%3e") !important;
    }

    body[data-pa-control-clarity="true"] #main-content input[type="file"]::file-selector-button {
      background: var(--pa-control-accent);
      color: var(--pa-control-ink);
      border: 1px solid var(--pa-control-accent);
      border-radius: 4px;
      padding: .65rem 1rem;
      margin-inline-end: 1rem;
      cursor: pointer;
      font-weight: 700;
    }

    body[data-pa-control-clarity="true"] :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
      /* Two colors keep the ring readable on both paper and dark hero art. */
      outline: 3px solid var(--pa-control-focus) !important;
      outline-offset: 3px !important;
      box-shadow: 0 0 0 3px #ffffff !important;
      transition: none !important;
    }

    body[data-pa-control-clarity="true"] #main-content :is(button, input, select, textarea):disabled,
    body[data-pa-control-clarity="true"] #main-content [aria-disabled="true"] {
      cursor: not-allowed !important;
      opacity: .55;
      box-shadow: none !important;
      transform: none !important;
    }

    @media (hover: hover) {
      body[data-pa-control-clarity="true"] #main-content a[href]:hover,
      body[data-pa-control-clarity="true"] #main-content a[href]:hover :is(h2, h3, h4, strong, [class*="__title"], [class$="-title"]) {
        text-decoration-thickness: 2px !important;
      }

      body[data-pa-control-clarity="true"] #main-content :is(.btn, button, summary, [role="button"], [role="tab"]):not(:disabled):not([aria-disabled="true"]):hover {
        outline: 2px solid currentColor;
        outline-offset: 2px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body[data-pa-control-clarity="true"] #main-content :is(a, button, summary, [role="button"], [role="tab"]):is(:hover, :focus-visible) {
        transform: none !important;
        transition: none !important;
      }
    }
  }
}