/* Surprise Lab — Variant E: Ribbon Corners (CSS-only, accessibility-first)
   Owner: AI Village — GPT-5 (gpt-5@agentvillage.org)
   Install/uninstall: add/remove a single SRI-pinned <link> to this file.
   No JS, no storage, no telemetry.
*/

:root{
  --sl-ribbon-size: 14px;              /* corner triangle size */
  --sl-ribbon-color: hsl(12 88% 54%);  /* top-right */
  --sl-ribbon2-color: hsl(220 84% 54%);/* bottom-left (duo) */
  --sl-ribbon-ink: CanvasText;         /* focus ink fallback */
}

/* Opt-in surface: add .sl-ribbon or [data-sl-ribbon] to any container */
.sl-ribbon,[data-sl-ribbon]{ position:relative; }

/* Top-right ribbon */
.sl-ribbon::after,[data-sl-ribbon]::after{
  content:""; position:absolute; inset:auto 0 0 auto; /* place in top-right corner */
  top:0; right:0; width:var(--sl-ribbon-size); height:var(--sl-ribbon-size);
  pointer-events:none; z-index:1;
  background:
    conic-gradient(from 45deg at 100% 0,
      transparent 0 90deg,
      var(--sl-ribbon-color) 0 360deg);
}

/* Optional bottom-left ribbon: add .sl-ribbon-duo or [data-sl-ribbon="duo"] */
.sl-ribbon.sl-ribbon-duo::before,[data-sl-ribbon="duo"]::before{
  content:""; position:absolute; bottom:0; left:0;
  width:var(--sl-ribbon-size); height:var(--sl-ribbon-size);
  pointer-events:none; z-index:1;
  background:
    conic-gradient(from 225deg at 0 100%,
      transparent 0 90deg,
      var(--sl-ribbon2-color) 0 360deg);
}

/* Strong, visible focus — preserves keyboard accessibility */
:where(a,button,input,select,textarea,[tabindex]):focus{ outline:none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px var(--sl-ribbon-ink, CanvasText),
    0 0 0 6px color-mix(in oklab, var(--sl-ribbon-color), white 70%);
}

/* Forced-colors/High Contrast — replace gradients with border triangles */
@media (forced-colors: active){
  .sl-ribbon::after,[data-sl-ribbon]::after{
    background:none; width:0; height:0; top:0; right:0;
    border-top: var(--sl-ribbon-size) solid ButtonText;
    border-left: var(--sl-ribbon-size) solid transparent;
    border-right: 0 solid transparent; border-bottom: 0 solid transparent;
  }
  .sl-ribbon.sl-ribbon-duo::before,[data-sl-ribbon="duo"]::before{
    background:none; width:0; height:0; bottom:0; left:0;
    border-bottom: var(--sl-ribbon-size) solid ButtonText;
    border-right: var(--sl-ribbon-size) solid transparent;
    border-left: 0 solid transparent; border-top: 0 solid transparent;
  }
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    box-shadow:none; outline:2px solid ButtonText;
  }
}

/* Print — gentle ink; leave layout untouched; no animations used */
@media print{
  :root{ --sl-ribbon-color:#555; --sl-ribbon2-color:#777; }
  *{ filter:saturate(0.85) brightness(0.98); }
}

/* Demo helpers (scoped via attribute selector to avoid leaking styles) */
html[data-sl-demo] .sl-card{
  border:1px solid color-mix(in oklab, currentColor, transparent 75%);
  border-radius:14px; padding:1rem; background:Canvas; color:CanvasText;
}
html[data-sl-demo] .sl-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
html[data-sl-demo] .sl-btn{
  display:inline-block; padding:.6rem 1rem; border-radius:999px; text-decoration:none;
  color:Canvas; background:color-mix(in oklab, var(--sl-ribbon-color), Canvas 10%);
}
html[data-sl-demo] .sl-btn:focus-visible{ color:Canvas; }