/* ============================================================
   10-settings.css
   The settings page, and what its settings change elsewhere:
   tile size, card frames, reduced motion. Also the artist credits
   and legality chips that came with the same release.
   ------------------------------------------------------------
   Settings classes use the cfg- prefix: set- is taken by the set
   list in search.
   ============================================================ */

/* ---------- page layout ----------
   A phone shows either the list of groups or one open group, with a way back.
   A wider screen shows both side by side. */
.settings{max-width:1040px;}
.cfg-layout{display:grid; grid-template-columns:1fr; gap:18px;}
@media(max-width:960px){
  .cfg-layout.has-group .cfg-nav{display:none;}
  #view-settings:has(.cfg-layout.has-group) .settings-head{display:none;}
}
@media(min-width:961px){
  .cfg-layout{grid-template-columns:270px minmax(0,1fr); gap:22px; align-items:start;}
  .cfg-nav{position:sticky; top:84px;}
  .cfg-back{display:none;}
}

/* ---------- group list ---------- */
.cfg-nav{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r3); overflow:hidden;
}
.cfg-group{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text); padding:12px 14px; min-height:58px;
  -webkit-tap-highlight-color:transparent;
}
.cfg-group + .cfg-group{border-top:1px solid var(--line);}
.cfg-group:hover{background:var(--surface-2);}
.cfg-group.on{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent);}
.cfg-group:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.cfg-ico{
  width:32px; height:32px; flex:0 0 32px; padding:7px; border-radius:9px;
  background:var(--surface-3); color:var(--accent-hi); display:flex;
}
.cfg-ico svg{width:100%; height:100%; display:block;}
.cfg-gtext{display:flex; flex-direction:column; min-width:0; flex:1; gap:1px;}
.cfg-glabel{font-size:14.5px; font-weight:600; line-height:1.3;}
.cfg-gsum{font-size:12.5px; color:var(--text-faint); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cfg-chev{color:var(--text-faint); font-size:20px; line-height:1; flex:0 0 auto;}

/* ---------- open group ---------- */
.cfg-pane{display:flex; flex-direction:column; gap:14px; min-width:0;}
.cfg-pane-head{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.cfg-pane-head h3{font-size:22px; text-transform:uppercase; letter-spacing:.05em;}
.cfg-back{
  background:transparent; border:none; color:var(--accent-hi); font-size:14.5px; font-weight:600;
  padding:6px 0; min-height:36px;
}
.cfg-sec{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r3);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-width:0;
}
.cfg-sec:empty{display:none;}
.cfg-sec-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);}
.cfg-sec-desc{font-size:13px; color:var(--text-faint); line-height:1.55; margin-top:-4px;}
.cfg-note{font-size:12.5px; color:var(--text-faint); line-height:1.55;}
.cfg-sec .field{margin:0; max-width:none;}
.cfg-sec .field > .desc:first-child{margin-top:0;}
.cfg-sec pre.code{max-width:100%;}

/* ---------- a setting: label left, control right ---------- */
.cfg-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid var(--line);
}
.cfg-sec-title + .cfg-row, .cfg-sec-desc + .cfg-row, .cfg-sec > .cfg-row:first-child{border-top:none; padding-top:0;}
.cfg-label{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 200px; font-size:14px;}
.cfg-hint{font-size:12.5px; color:var(--text-faint); line-height:1.45;}
.cfg-select{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--r1); padding:8px 32px 8px 11px; font:inherit; font-size:13.5px;
  max-width:100%; min-height:38px; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.cfg-select:focus{outline:none; border-color:var(--accent);}
.cfg-select:disabled{opacity:.45;}
.cfg-select option{background:var(--surface-2); color:var(--text);}

/* language: the round flag of the language in use opens the list */
.lang-pick{position:relative; flex:0 0 auto;}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; min-height:38px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:22px; color:var(--text-dim);
}
.lang-btn:focus-visible, .lang-opt:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.lang-btn[aria-expanded="true"]{border-color:var(--accent);}
.lang-chev{width:6px; height:6px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:translateY(-2px) rotate(45deg);}
.lang-list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; margin:0; padding:5px; list-style:none; min-width:220px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r2); box-shadow:var(--shadow);
}
.lang-opt{
  display:flex; align-items:center; gap:10px; padding:7px 10px 7px 7px; border-radius:var(--r1);
  font-size:14px; cursor:pointer; color:var(--text);
}
.lang-opt .lang-flag{width:24px; height:24px; flex-basis:24px;}
.lang-opt:hover, .lang-opt:focus{background:var(--surface-3); outline:none;}
.lang-opt.on{color:var(--accent-hi); font-weight:600;}
@media(max-width:960px){
  .cfg-row > .lang-pick{flex:0 0 auto;}
  .lang-opt{font-size:16px; padding-top:10px; padding-bottom:10px;}
}

/* on/off switch */
.cfg-switch{
  position:relative; width:46px; height:28px; flex:0 0 46px; border-radius:14px;
  background:var(--surface-3); border:1px solid var(--line-2); padding:0;
  transition:background .16s, border-color .16s;
}
.cfg-switch .knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--text-dim); transition:transform .16s, background .16s;
}
.cfg-switch.on{background:var(--accent); border-color:var(--accent);}
.cfg-switch.on .knob{transform:translateX(18px); background:var(--on-accent);}

.cfg-seg button{padding:7px 15px; min-width:40px;}
.cfg-chips{gap:7px;}
.cfg-chips .chip{padding:6px 13px; font-size:13px;}

/* colour choices */
.cfg-swatches{display:flex; flex-wrap:wrap; gap:8px;}
.cfg-swatch{
  display:flex; align-items:center; gap:8px; padding:6px 12px 6px 7px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-dim); font-size:13px;
}
.cfg-swatch:hover{border-color:var(--line-3); color:var(--text);}
.cfg-swatch.on{border-color:var(--accent); color:var(--text); box-shadow:0 0 0 1px var(--accent);}
.sw-dot{width:20px; height:20px; border-radius:50%; flex:0 0 20px; border:1px solid rgba(255,255,255,.18);}
.sw-dot.sw-none{background:linear-gradient(135deg,transparent 45%,var(--bad) 45%,var(--bad) 55%,transparent 55%) !important;}

.cfg-actions{display:flex; flex-wrap:wrap; gap:8px;}

/* link rows in About */
.cfg-link, .cfg-version{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; border-top:1px solid var(--line); color:var(--text);
  padding:12px 0; font-size:14.5px; min-height:48px;
}
.cfg-sec > .cfg-link:first-child{border-top:none; padding-top:2px;}
.cfg-link > span:first-child{flex:1;}
.cfg-link:hover > span:first-child{color:var(--accent-hi);}
.cfg-link-sub{font-size:12.5px; color:var(--text-faint);}
.cfg-version{cursor:default; justify-content:space-between; -webkit-user-select:none; user-select:none;}

/* text pages (FAQ, disclaimer, licences) */
.cfg-doc{overflow:auto; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.6; color:var(--text-dim); flex-shrink:1 !important; min-height:0;}
.cfg-doc h4{font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:600; color:var(--text); letter-spacing:0; margin-top:4px;}
.cfg-doc h4 + p{margin-top:-8px;}
.cfg-doc p{margin:0; white-space:pre-line;}
.cfg-doc details.faq{border-top:1px solid var(--line); padding:10px 0 0;}
.cfg-doc details.faq:first-child{border-top:none; padding-top:0;}
.cfg-doc details.faq summary{cursor:pointer; color:var(--text); font-weight:600; list-style:none; display:flex; gap:10px; align-items:baseline;}
.cfg-doc details.faq summary::-webkit-details-marker{display:none;}
.cfg-doc details.faq summary::before{content:'+'; color:var(--accent-hi); font-weight:700; width:12px; flex:0 0 12px;}
.cfg-doc details.faq[open] summary::before{content:'\2212';}
.cfg-doc details.faq p{padding:6px 0 4px 22px;}

@media(max-width:960px){
  .cfg-sec{padding:14px 14px;}
  .cfg-select{font-size:16px;}
  .cfg-row > .cfg-select{flex:1 1 100%;}
  .cfg-row > .cfg-seg{flex:0 0 auto;}
}

/* ============================================================
   WHAT THE SETTINGS CHANGE
   ============================================================ */

/* ---------- cards per row ----------
   3 is the default the other files set; 2 and 4 override it. */
@media(max-width:960px){
  body[data-tiles="2"] .cgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px;}
  body[data-tiles="4"] .cgrid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 5px;}
  body[data-tiles="4"] .ctile-price{display:none;}
  body[data-tiles="4"] .ctile-set{font-size:10px;}
}
@media(min-width:961px){
  body[data-tiles="2"] .cgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
  body[data-tiles="4"] .cgrid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:12px 9px;}
}

/* ---------- card frame ----------
   A ring laid on the outermost edge of the card, over its own printed
   border. Drawn inside the tile on purpose: an outline outside it was cut
   off by the grid's content-visibility containment, which clips everything
   beyond the tile, so only scraps of it showed at the corners. The card's
   picture itself is never tinted (Scryfall's image rules). */
.ctile-art::after, .card-tile .art::after, .detail-art::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 var(--frame-w) var(--frame);
}

/* ---------- reduce motion ---------- */
body.reduce-motion .foil-sheen, body.reduce-motion .foil-sheen::after{animation:none;}
body.reduce-motion .view.active, body.reduce-motion .toast{animation:none;}
body.reduce-motion .ctile-art, body.reduce-motion .detail-figure, body.reduce-motion .car-track,
body.reduce-motion .cfg-switch, body.reduce-motion .cfg-switch .knob{transition:none !important;}
@media (hover:hover){
  body.reduce-motion .ctile.clickable:hover .ctile-art{transform:none;}
}
html:has(body.reduce-motion){scroll-behavior:auto;}

/* ============================================================
   ARTWORK AND ITS CREDIT
   ============================================================
   An art crop is shown with its artist; a card whose artist is not known
   yet is shown whole, never cropped (Scryfall's image rules). */
img.whole{object-fit:contain !important; object-position:center !important;}
.btile-art img.whole, .deck-art img.whole, .mini-deck .art img.whole{padding:6px 0;}
.dr-art img{position:static; width:100%; height:100%; left:auto; top:auto; object-fit:cover; object-position:center 30%;}
.art-credit{
  position:absolute; right:6px; bottom:5px; z-index:2; max-width:calc(100% - 12px);
  font-size:10px; line-height:1.2; color:rgba(255,255,255,.82); letter-spacing:.01em;
  background:rgba(8,11,18,.62); padding:2px 6px; border-radius:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none;
}
.btile-credit{
  font-size:10.5px; line-height:1.3; color:rgba(255,255,255,.6); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.art-opt{position:relative;}
.art-opt-credit{
  display:block; font-size:10px; line-height:1.25; color:var(--text-faint);
  padding:3px 5px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dr-artist{font-size:11px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
@media(max-width:960px){
  .dr-artist{display:none;}
  .art-credit{font-size:9.5px;}
}

/* ============================================================
   LEGALITY IN THE CARD DETAIL
   ============================================================ */
.legal-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; min-height:26px;}
.legal-row:empty{min-height:0; margin:0;}
.lg{
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; line-height:1.4;
  border:1px solid var(--line-2); color:var(--text-faint); background:transparent;
}
.lg-legal{color:var(--ok); border-color:rgba(63,199,138,.38); background:var(--ok-soft);}
.lg-banned{color:var(--bad); border-color:rgba(239,95,95,.4); background:var(--bad-soft);}
.lg-restricted{color:var(--info); border-color:rgba(90,169,240,.4); background:var(--info-soft);}
.lg-not-legal{text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25);}

/* the price of the provider chosen in Settings, among the others */
.dmeta .m.sel{color:var(--text); font-weight:600; border-color:var(--line-3);}

/* ---------- hero: the second button ----------
   The plain button style is a dark surface, which on the hero artwork all but
   disappeared. A light glass pane keeps it readable on any part of the image. */
.hero-actions .btn:not(.primary){
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.38); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.hero-actions .btn:not(.primary):hover{background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.55);}
/* 14 Oct 2026: the hero buttons carry "lg", which is also the old legality
   pill above (border-radius 20px) — they came out round. The corners of every
   other button; size unchanged. */
.hero-actions .btn{border-radius:var(--r1);}

/* ---------- deck view: tighter figures ----------
   The stat boxes and the category headings took a lot of height before the
   first card; the same information, closer together. */
.cmd-header .stat-row{gap:8px; margin-top:14px;}
.cmd-header .stat{padding:9px 13px; min-width:0;}
.cmd-header .stat .n{font-size:23px;}
.cmd-header .stat .l{margin-top:3px;}
.cmd-header .stat.value .n{color:var(--accent-hi);}
.cmd-header .stat .n .of{font-size:.6em; color:var(--text-faint); margin-left:2px; font-weight:500;}
.cmd-header .stat .l{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.category-block{margin-bottom:16px;}
.category-block h3{margin-bottom:8px; padding-bottom:6px;}
@media(max-width:960px){
  .cmd-header .stat-row{gap:6px; margin-top:12px;}
  .cmd-header .stat{padding:7px 10px; flex:1 1 calc(33% - 6px);}
  .cmd-header .stat.value{flex-basis:calc(50% - 6px);}
  .cmd-header .stat .n{font-size:20px;}
  .cmd-header .stat .l{font-size:10.5px;}
  .category-block{margin-bottom:14px;}
}