/* A card's own color and look (assets/card-looks.js). Drawn with backgrounds, borders and shadows only, so a card's own
   ::before/::after decorations are never replaced. data-card-ink says which text color stays readable on the look. */

/* ---- A color with no look: the card takes the scheme's gradient ---- */
[data-card-color]:not([data-card-look]):not(.grr-portal) {
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--dc-glow), .18), transparent 55%), linear-gradient(135deg, var(--dc-bg1), var(--dc-bg2)) !important;
  border-color: var(--dc-line) !important;
}
[data-card-color]:not([data-card-look]):not(.grr-portal) :is(h1, h2, h3, h4, .serif) { color: var(--dc-t1) !important; -webkit-text-fill-color: currentColor; }
[data-card-color]:not([data-card-look]):not(.grr-portal) :is(.eyebrow, small) { color: var(--dc-eyebrow) !important; }

/* ---- Readable text on every look (buttons and fields keep their own colors) ---- */
[data-card-ink] { --cl-ink: #2b2620; --cl-soft: #5a5146; --cl-accent: var(--dc-line, #7a5a22); --cl-panel: rgba(255, 255, 255, .55); --cl-edge: rgba(60, 45, 25, .22); }
[data-card-ink="light"] { --cl-ink: #f6f1e6; --cl-soft: #d9cfbe; --cl-accent: var(--dc-line, #e3c27a); --cl-panel: rgba(0, 0, 0, .25); --cl-edge: rgba(255, 255, 255, .22); }
[data-card-ink] { color: var(--cl-ink) !important; }
[data-card-ink] :where(p, li, span, div, td, th, label, em, b, i, strong, small, dt, dd, figcaption, blockquote, h1, h2, h3, h4, h5, h6, .serif, .eyebrow):not(button, button *, .btn, .btn *, [class*="btn-"], [class*="btn-"] *, [class*="cta"], [class*="cta"] *, input, select, textarea, .kb-tools, .kb-tools *, .chl-chrome, .chl-chrome *) {
  color: inherit !important; -webkit-text-fill-color: currentColor;
}
[data-card-ink] :where(h1, h2, h3, h4, .serif, .eyebrow):not(button *, .kb-tools *, .chl-chrome *) { color: var(--cl-accent) !important; }
[data-card-ink="dark"] :where(h1, h2, h3, h4, .serif):not(button *, .kb-tools *, .chl-chrome *) { color: #241c12 !important; }
[data-card-ink] :where(.card, .panel, [class*="-card"], [class*="-box"], [class*="-tile"], [class*="-stat"]):not(button, [data-card-look]) { background: var(--cl-panel) !important; border-color: var(--cl-edge) !important; box-shadow: none !important; }
[data-card-ink] a:not([class]) { color: var(--cl-accent) !important; }

/* ---- Paper ---- */
[data-card-look="paper"] {
  background:
    radial-gradient(circle at 20px 46px, #8a8270 0 6px, transparent 7px) 0 0 / 40px 140px repeat-y,
    linear-gradient(90deg, transparent 48px, rgba(214, 88, 88, .55) 48px 50px, transparent 50px),
    repeating-linear-gradient(#fdfcf6 0 29px, color-mix(in srgb, var(--dc-line, #8fb3d9) 70%, transparent) 29px 30px) !important;
  background-color: #fdfcf6 !important;
  border: 1px solid #ddd6c6 !important; border-radius: 4px !important;
  box-shadow: 0 1px 0 #fff inset, 3px 4px 0 -1px #efe9dc, 3px 4px 0 0 #d8d0bf, 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
  padding-left: 64px !important;
}
[data-card-look="spiral"] {
  background:
    radial-gradient(circle at 50% 13px, #2b2b2b 0 4px, #b9b9b9 5px 7px, transparent 8px) 0 0 / 28px 26px repeat-x,
    linear-gradient(transparent 26px, rgba(214, 88, 88, .45) 26px 28px, transparent 28px) 0 18px / 100% 100% no-repeat,
    repeating-linear-gradient(#fffefa 0 29px, color-mix(in srgb, var(--dc-line, #9cc0e2) 70%, transparent) 29px 30px) !important;
  background-color: #fffefa !important;
  border: 1px solid #ddd8cc !important; border-radius: 3px 3px 6px 6px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
  padding-top: 44px !important;
}
[data-card-look="legal"] {
  background:
    linear-gradient(#b8a64a 0 0) 0 0 / 100% 10px no-repeat,
    linear-gradient(90deg, transparent 50px, rgba(205, 60, 60, .6) 50px 51px, transparent 51px 54px, rgba(205, 60, 60, .6) 54px 55px, transparent 55px),
    repeating-linear-gradient(#fdf5b0 0 29px, color-mix(in srgb, var(--dc-line, #8aa9cc) 75%, transparent) 29px 30px) !important;
  background-color: #fdf5b0 !important;
  border: 1px solid #e3d98c !important; border-radius: 2px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
  padding-left: 68px !important; padding-top: 24px !important;
}
[data-card-look="graph"] {
  background:
    linear-gradient(color-mix(in srgb, var(--dc-line, #6fa3d6) 35%, transparent) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, color-mix(in srgb, var(--dc-line, #6fa3d6) 35%, transparent) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(color-mix(in srgb, var(--dc-line, #6fa3d6) 16%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--dc-line, #6fa3d6) 16%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    #fbfdff !important;
  border: 1px solid #cfdcea !important; border-radius: 3px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
}
[data-card-look="index"] {
  background:
    linear-gradient(transparent 46px, color-mix(in srgb, var(--dc-line, #d65a5a) 85%, transparent) 46px 48px, transparent 48px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(#ffffff 0 25px, rgba(120, 160, 205, .45) 25px 26px) 0 48px / 100% 100% no-repeat !important;
  background-color: #fff !important;
  border: 1px solid #e3e3e3 !important; border-radius: 3px !important;
  box-shadow: 0 2px 0 #f1f1f1, 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
}
[data-card-look="sticky"] {
  background: linear-gradient(rgba(150, 120, 20, .14), transparent 60px), color-mix(in srgb, var(--dc-line, #fff27a) 22%, #fff59d) !important;
  border: none !important; border-radius: 2px 2px 28px 2px !important;
  box-shadow: 4px 10px 22px -6px rgba(0, 0, 0, .45), inset 0 -18px 30px -24px rgba(120, 90, 0, .4) !important;
}

/* ---- King ---- */
[data-card-look="parchment"] {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 78, 28, .28) 100%),
    radial-gradient(circle at 15% 20%, rgba(255, 250, 230, .6), transparent 40%),
    #f1e0b8 !important;
  border: 1px solid #c9a86a !important; border-radius: 6px !important;
  box-shadow: inset 0 0 40px rgba(120, 78, 28, .3), 0 18px 40px -18px rgba(0, 0, 0, .6) !important;
}
[data-card-look="decree"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='30' cy='30' r='26' fill='%239b1c1c'/><circle cx='30' cy='30' r='20' fill='none' stroke='%23c43a3a' stroke-width='3'/><text x='30' y='39' font-size='24' text-anchor='middle' fill='%23f3d7a0'>♔</text></svg>") right 14px bottom 14px / 54px 54px no-repeat,
    linear-gradient(#b48a3c, #b48a3c) 50% 10px / 60% 1px no-repeat,
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 78, 28, .3) 100%),
    #f4e4c1 !important;
  border: 3px double color-mix(in srgb, var(--dc-line, #a87d32) 90%, #000) !important; border-radius: 4px !important;
  box-shadow: inset 0 0 36px rgba(120, 78, 28, .3), 0 18px 40px -18px rgba(0, 0, 0, .6) !important;
  padding-bottom: 72px !important;
}
[data-card-look="velvet"] {
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .14), transparent 55%), linear-gradient(160deg, var(--dc-bg1, #5a0f24), var(--dc-bg2, #250510)) !important;
  border: 2px solid #d4af37 !important; border-radius: 12px !important;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(212, 175, 55, .55), 0 20px 50px -20px rgba(0, 0, 0, .7) !important;
}
[data-card-look="crown"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='48'><path d='M4 40 L10 12 L22 28 L32 6 L42 28 L54 12 L60 40 Z' fill='%23d4af37' opacity='.16'/></svg>") right 16px top 14px / 64px 48px no-repeat,
    linear-gradient(160deg, var(--dc-bg1, #17130b), var(--dc-bg2, #050403)) !important;
  border: 4px double #d4af37 !important; border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 20px 50px -20px rgba(212, 175, 55, .35) !important;
}
[data-card-look="throne"] {
  background: radial-gradient(ellipse at top, rgba(255, 250, 235, .9), transparent 70%), #f5ecd8 !important;
  border: 12px solid var(--dc-bg1, #3b1450) !important; border-radius: 14px 14px 6px 6px !important;
  box-shadow: inset 0 0 0 2px #d4af37, inset 0 0 0 5px rgba(212, 175, 55, .25), 0 0 0 1px #d4af37, 0 22px 50px -20px rgba(0, 0, 0, .7) !important;
}
[data-card-look="ledger"] {
  background: linear-gradient(90deg, rgba(110, 70, 20, .18), transparent 30px), #f4e8cd !important;
  border: 10px solid var(--dc-bg1, #5a2a1c) !important; border-left-width: 22px !important; border-radius: 6px 12px 12px 6px !important;
  box-shadow: inset 0 0 0 2px #b6934f, -3px 0 0 #b6934f, 0 20px 50px -20px rgba(0, 0, 0, .7) !important;
}

/* ---- Chess ---- */
[data-card-look="chess"] {
  border: 12px solid transparent !important; border-radius: 3px !important;
  background: linear-gradient(#faf2df, #faf2df) padding-box, conic-gradient(var(--dc-bg1, #23201b) 25%, #ecdfbf 0 50%, var(--dc-bg1, #23201b) 0 75%, #ecdfbf 0) 0 0 / 24px 24px border-box !important;
  box-shadow: 0 0 0 1px #b99751, 0 20px 50px -20px rgba(0, 0, 0, .7) !important;
}
[data-card-look="marble"] {
  border: 12px solid transparent !important; border-radius: 4px !important;
  background:
    linear-gradient(115deg, transparent 40%, rgba(150, 150, 165, .09) 43%, transparent 46%) padding-box,
    linear-gradient(170deg, transparent 70%, rgba(150, 150, 165, .07) 72%, transparent 74%) padding-box,
    linear-gradient(#f7f6f2, #f7f6f2) padding-box,
    conic-gradient(#3a3a40 25%, #e9e7e2 0 50%, #3a3a40 0 75%, #e9e7e2 0) 0 0 / 24px 24px border-box !important;
  box-shadow: 0 0 0 1px #9a9aa2, 0 20px 50px -20px rgba(0, 0, 0, .7) !important;
}
[data-card-look="checkmate"] {
  border: 12px solid transparent !important; border-radius: 3px !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='28'><text x='0' y='22' font-size='22' fill='%23d4af37' opacity='.35'>♔♕♖♗♘♙</text></svg>") right 12px top 10px / 150px 28px no-repeat padding-box,
    linear-gradient(var(--dc-bg2, #12100c), var(--dc-bg2, #12100c)) padding-box,
    conic-gradient(#d4af37 25%, #1b1812 0 50%, #d4af37 0 75%, #1b1812 0) 0 0 / 24px 24px border-box !important;
  box-shadow: 0 0 0 1px #d4af37, 0 20px 50px -20px rgba(212, 175, 55, .3) !important;
}
[data-card-look="tournament"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='28'><text x='0' y='22' font-size='20' fill='%23333' opacity='.5'>♔♕♖♗♘♙</text></svg>") right 12px top 8px / 150px 28px no-repeat,
    linear-gradient(#222 0 0) 0 40px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 1px), rgba(0, 0, 0, .14) calc(33.33% - 1px) 33.33%) 0 42px / 100% 100% no-repeat,
    repeating-linear-gradient(#fff 0 27px, rgba(0, 0, 0, .1) 27px 28px) 0 42px / 100% 100% no-repeat !important;
  background-color: #fff !important;
  border: 1px solid #bdbdbd !important; border-radius: 2px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55) !important;
  padding-top: 52px !important;
}

/* ---- Other ---- */
[data-card-look="blueprint"] {
  background: linear-gradient(rgba(150, 210, 255, .09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(150, 210, 255, .09) 1px, transparent 1px) 0 0 / 24px 24px, var(--dc-bg1, #10304f) !important;
  border: 1px solid rgba(150, 210, 255, .45) !important; border-radius: 6px !important;
}
[data-card-look="glass"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), color-mix(in srgb, var(--dc-bg1, #1a1d26) 55%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 16px !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 50px -20px rgba(0, 0, 0, .6) !important;
}
[data-card-look="newspaper"] {
  background: #f1efe6 !important;
  border: 1px solid #c9c4b4 !important; border-top: 5px double #222 !important; border-radius: 2px !important;
}
[data-card-look="newspaper"] :where(h1, h2, h3, .serif) { font-family: Georgia, 'Times New Roman', serif !important; }
[data-card-look]:is([data-card-look="decree"], [data-card-look="parchment"], [data-card-look="ledger"], [data-card-look="throne"]) :where(h1, h2, h3, .serif) { font-family: Georgia, 'Times New Roman', serif !important; }

@media (max-width: 520px) {
  [data-card-look="paper"] { padding-left: 52px !important; background-position: -6px 0, -6px 0, 0 0 !important; }
  [data-card-look="legal"] { padding-left: 60px !important; }
  [data-card-look]:is([data-card-look="chess"], [data-card-look="marble"], [data-card-look="checkmate"]) { border-width: 8px !important; }
  [data-card-look="throne"] { border-width: 8px !important; }
  [data-card-look="ledger"] { border-width: 6px !important; border-left-width: 14px !important; }
}

/* ---- The picker (instructors only) ---- */
.cl-pick { position: fixed; z-index: 10080; width: 400px; max-width: calc(100vw - 16px); max-height: min(560px, 80vh); display: flex; flex-direction: column; background: #15130f; color: #f4ecdc; border: 1px solid rgba(212, 175, 55, .55); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); font: 13px/1.4 Inter, system-ui, sans-serif; }
.cl-pick.cl-sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 78vh; }
.cl-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; }
.cl-pick-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-x { background: none; border: 1px solid rgba(255, 255, 255, .2); color: inherit; border-radius: 8px; width: 34px; height: 34px; font-size: 18px; cursor: pointer; }
.cl-pick-tabs { display: flex; gap: 6px; padding: 4px 14px 8px; }
.cl-pick-tabs button { flex: 1; min-height: 36px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15); color: inherit; border-radius: 8px; cursor: pointer; font: inherit; }
.cl-pick-tabs button[aria-selected="true"] { border-color: #d4af37; color: #f3d98c; background: rgba(212, 175, 55, .12); }
.cl-pick-body { overflow: auto; padding: 0 14px 10px; }
.cl-cat { margin: 10px 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #c9b27a; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cl-tile { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px; min-height: 44px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.cl-tile:hover { border-color: rgba(212, 175, 55, .6); }
.cl-tile[aria-pressed="true"] { border: 2px solid #d4af37; }
.cl-swatch { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 6px; background: #20242d; border: 1px solid rgba(255, 255, 255, .12); font: 600 15px Georgia, serif; color: #f4ecdc; padding: 0 !important; overflow: hidden; }
.cl-swatch[data-card-look] { border-width: 5px !important; box-shadow: none !important; }
.cl-swatch[data-card-look="decree"] { background-size: 20px 20px, 60% 1px, auto, auto !important; background-position: right 3px bottom 3px, 50% 4px, 0 0, 0 0 !important; }
.cl-swatch[data-card-look="paper"] { background-size: 40px 140px, auto, 100% 10px !important; background-position: -14px -24px, -28px 0, 0 0 !important; }
.cl-swatch[data-card-look="spiral"] { background-size: 12px 10px, 100% 100%, 100% 10px !important; background-position: 0 -4px, 0 -10px, 0 0 !important; }
.cl-name { font-size: 11.5px; }
.cl-note { margin: 10px 0 0; font-size: 11.5px; color: #b9ad94; }
.cl-pick-foot { padding: 8px 14px 12px; font-size: 11.5px; color: #b9ad94; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---- Hidden from instructors: the card folds to a labeled strip so it can still be shown again from its ⋯ ---- */
.kb-wrap.kb-staffhid > :not(.kb-tools), .chl-w.chl-staffhid > :not(.chl-chrome):not(summary) { display: none !important; }
.kb-wrap.kb-staffhid, .chl-w.chl-staffhid { min-height: 50px; border: 1px dashed rgba(212, 175, 55, .55); border-radius: 12px; }
.kb-wrap.kb-staffhid::after, .chl-w.chl-staffhid::after { content: 'Hidden from instructors · use ⋯ to show it'; display: block; padding: 16px 18px; font-size: 11.5px; letter-spacing: .05em; color: #c9b27a; }
.chl-w.chl-staffhid > .chl-chrome { opacity: 1; pointer-events: auto; }