/* Dictionary page pack card and the note after the first Copy or Download
 * (piece-download.js). Loaded after /styles.css and before the page's own
 * inline <style>; overrides its global button/h2 rules inside these blocks.
 *
 * Buy buttons use the buy color tokens in styles.css :root (--pk-buy,
 * --pk-buy-hover, --pk-buy-ink). Everything else that is decoration (the
 * border, the corner glow, the kicker) uses the site's indigo, so the only
 * green on the card is the thing to click. Swap the three --pd-* values
 * below to change the accent. */

.pd-card, .pd-note {
  --pd-line: #3d3f7a;                 /* indigo border, as the site's indigo panels */
  --pd-glow: rgba(99, 102, 241, .10); /* --accent, faint, top-left corner */
  --pd-kick: #8b8cf8;                 /* the site's a:visited indigo: AA on the card */
}

/* ---- pack card under the art ---- */
.pd-card { margin: 8px 0 32px; border: 1px solid var(--pd-line); border-radius: 12px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; background: radial-gradient(120% 160% at 0% 0%, var(--pd-glow), transparent 55%), var(--bg-secondary); }
.pd-kicker { margin: 0 0 6px; font: 500 11px/1.3 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-kick); }
.pd-card h2.pd-card-title { display: block; margin: 0 0 8px; font-size: 20px; line-height: 1.25; color: var(--text-primary); }
.pd-card p.pd-card-text { margin: 0 0 14px; font-size: 14px; color: #c9ccd3; line-height: 1.6; }
.pd-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pd-files { margin: 0; padding: 12px 14px; font: 11.5px/1.7 'Roboto Mono', 'Roboto Mono Fallback', monospace; color: #c9ccd3; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; white-space: pre; overflow-x: auto; min-width: 0; }
.pd-files { scrollbar-width: thin; scrollbar-color: #3a3a44 transparent; }
.pd-files i { font-style: normal; color: var(--text-secondary); } /* v1 had #6b7280: under AA here */

/* ---- buy button (card and note) ---- */
.pd-buy, .pd-buy:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: var(--pk-buy, var(--success-green)); color: var(--pk-buy-ink, #0b0b0e); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; transition: background-color .2s; }
.pd-buy:hover { background: var(--pk-buy-hover, var(--success-green)); color: var(--pk-buy-ink, #0b0b0e); text-decoration: none; }

/* ---- the quiet link next to it ---- */
.pd-more, .pd-more:visited { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.pd-more:hover { color: var(--text-primary); text-decoration: underline; }
.pd-card :focus-visible, .pd-note :focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* ---- note after the first Copy or Download: a compact card in the page
   flow, right under the box that was used, so it never covers the art ---- */
.pd-note { position: relative; max-width: 400px; margin: -24px 0 40px; padding: 16px 18px 14px; border: 1px solid var(--pd-line); border-radius: 12px; background: radial-gradient(120% 160% at 0% 0%, var(--pd-glow), transparent 55%), #19191d; color: var(--text-primary); box-shadow: 0 12px 32px -16px rgba(0,0,0,.7); font-size: 14px; line-height: 1.5; }
.pd-note p { margin: 0; }
.pd-note .pd-note-done { font-size: 12px; color: var(--text-secondary); padding-right: 32px; overflow-wrap: anywhere; }
.pd-note .pd-note-done span { font: 600 11px 'Roboto Mono', 'Roboto Mono Fallback', monospace; color: var(--success-green); }
.pd-note .pd-note-done code { font: 11.5px 'Roboto Mono', 'Roboto Mono Fallback', monospace; color: #d1d5db; }
.pd-note .pd-note-title { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.pd-note .pd-note-text { margin-top: 4px; color: #c9ccd3; font-size: 13.5px; }
.pd-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; }
/* overrides the bare <button> rule (full width, indigo) */
.pd-note button.pd-note-no, .pd-note button.pd-note-x { width: auto; margin: 0; background: none; color: var(--text-secondary); font-weight: 500; transform: none; }
.pd-note button.pd-note-no { min-height: 44px; padding: 0 4px; font-size: 13px; }
.pd-note button.pd-note-x { position: absolute; top: 2px; right: 2px; min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; font-weight: 400; }
.pd-note button.pd-note-no:hover, .pd-note button.pd-note-x:hover { background: none; color: var(--text-primary); transform: none; }

@media (max-width: 640px) {
  .pd-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pd-note { max-width: none; margin-top: -28px; }
}
@media (prefers-reduced-motion: reduce) { .pd-buy { transition: none; } }