/* Post-it notes on the back of the membership card (js/profile-notes.js). Kept apart from
   css/dgg-card.css, which is destiny.gg's own card styling and stays unchanged. */
.pn-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pn-layer.pn-placing { pointer-events: auto; cursor: crosshair; }
.pn-layer.pn-placing:focus-visible { outline: 2px dashed #70b8ff; outline-offset: -4px; }
.pn-note { position: absolute; width: 20%; aspect-ratio: 1; pointer-events: auto; transform: rotate(var(--pn-rotate, 0deg));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.pn-ghost { opacity: .85; pointer-events: none; }
/* Lifting shows what the notes cover without taking them off. */
.pn-layer.pn-lifted .pn-note { opacity: .12; transform: translateY(-14%) rotate(calc(var(--pn-rotate, 0deg) - 8deg)) scale(1.04); pointer-events: none; }

.pn-paper { position: relative; width: 100%; height: 100%; box-sizing: border-box; border-radius: 2px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7), inset 0 -12px 18px -14px rgba(0, 0, 0, .25); overflow: hidden; }
.pn-paper::before { content: ''; position: absolute; inset: 0 0 auto; height: 14%; background: rgba(0, 0, 0, .06); }
.pn-yellow { background: #fde68a; } .pn-pink { background: #fbb6ce; } .pn-blue { background: #a5d8ff; }
.pn-green { background: #b2f2bb; } .pn-orange { background: #ffc078; }
.pn-ink { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #1d1d1f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pn-author { position: absolute; right: 6%; bottom: 4%; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #1d1d1f; font: italic 600 .75rem/1.2 Inter, system-ui, sans-serif; opacity: .75; }
.pn-remove { position: absolute; top: -.6rem; right: -.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; padding: 0;
  background: rgba(17, 17, 19, .85); color: #edeef0; font: 700 1rem/1 Inter, system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; }
.pn-note:hover .pn-remove, .pn-remove:focus-visible { opacity: 1; }

/* Shown under the card only while its back is showing. */
.pn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pn-toolbar[hidden] { display: none; }
.pn-button { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border, #363a3f);
  background: var(--bg-surface, #18191b); color: var(--text-primary, #edeef0); font: 500 12px var(--font-sans, Inter, system-ui, sans-serif);
  text-decoration: none; cursor: pointer; }
.pn-button:hover { border-color: var(--accent, #70b8ff); }
.pn-button[aria-pressed="true"] { border-color: var(--accent, #70b8ff); color: var(--accent, #70b8ff); }
.pn-primary { background: var(--accent, #0090ff); border-color: var(--accent, #0090ff); color: #fff; }
.pn-status { margin: 0; color: var(--text-secondary, #afb3ba); font-size: 12px; }

.pn-dialog { width: min(26rem, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border, #363a3f); border-radius: 14px;
  background: var(--bg-surface, #18191b); color: var(--text-primary, #edeef0); font-family: var(--font-sans, Inter, system-ui, sans-serif); }
.pn-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.pn-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.pn-pad { aspect-ratio: 1; }
.pn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.pn-swatches { display: flex; gap: 8px; margin: 14px 0 10px; }
.pn-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.pn-swatch[aria-checked="true"] { border-color: var(--text-primary, #edeef0); }
.pn-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-secondary, #afb3ba); }
.pn-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.pn-saved { width: min(40rem, calc(100vw - 32px)); }
.pn-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 16px; max-height: 60vh; overflow: auto; font-size: 13px; }
.pn-saved-item { margin: 0; display: grid; gap: 6px; align-content: start; }
.pn-saved-item .pn-paper { aspect-ratio: 1; height: auto; }
.pn-saved-item figcaption { color: var(--text-secondary, #afb3ba); font-size: 12px; overflow-wrap: anywhere; }