/* ============================================================
   16-tidy.css — The tidy-up of 5 Oct 2026: the deck view with its ···
   menu and tabs, the dashboard's quick access, the import screen and the
   filter panels with their phone sheet. Loads after the earlier files and
   overrides them, like 09-refresh.css.
   ============================================================ */

/* ---------- back link ("← All decks", "← Dashboard") ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:4px 0;
  background:none; border:0; color:var(--text-dim); font-family:inherit; font-size:14px;
}
.back-link svg{width:18px; height:18px; display:block;}
.back-link:hover{color:var(--text);}

/* ============================================================
   DECK VIEW
   ============================================================ */
.deck-topbar{margin-bottom:4px;}
.deck-topbar + .add-panel{margin-top:14px;}
/* Title, buttons and commander line in one box, the deck's artwork behind
   them (decks.js paintDeckHero): darkened towards the text, the artist
   credited in the corner. Without art crop it is a plain panel. */
.deck-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r3);
  background:var(--surface); padding:16px 18px 18px;
}
.deck-hero.has-art{border-color:rgba(255,255,255,.14); padding-bottom:30px; text-shadow:0 1px 3px rgba(0,0,0,.65);}
.dh-art{position:absolute; inset:0; z-index:-1;}
.dh-art img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;}
.dh-fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,18,.42) 0%, rgba(8,11,18,.6) 45%, rgba(8,11,18,.9) 100%);
}
.deck-hero .art-credit{right:10px; bottom:8px; text-shadow:none;}
.deck-hero .btn{text-shadow:none;}
.deck-hero.has-art .btn:not(.primary){
  background:rgba(17,24,38,.62); border-color:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.deck-hero.has-art .deck-menu-btn{background:rgba(8,11,18,.42); color:var(--text); border-radius:50%;}
.deck-hero.has-art .ds-sum, .deck-hero.has-art .ds-bracket{color:rgba(233,237,244,.84);}
.deck-hero .deck-sum{margin-top:16px;}
@media(min-width:961px){
  /* wide and low: the text sits left, so the art can show on the right */
  .dh-art img{object-position:center 30%;}
  .dh-fade{background:
    linear-gradient(90deg, rgba(8,11,18,.9) 0%, rgba(8,11,18,.62) 50%, rgba(8,11,18,.2) 100%),
    linear-gradient(180deg, transparent 55%, rgba(8,11,18,.55) 100%);}
}
@media(max-width:960px){
  .deck-hero{padding:14px 14px 16px;}
  .deck-hero.has-art{padding-bottom:28px;}
  .deck-hero .deck-sum{margin-top:14px;}
}
.deck-title-row{display:flex; align-items:center; gap:10px;}
/* the name lines up with the back link; its padding is for the edit frame */
.deck-title-row .deck-name-input{flex:1 1 auto; min-width:0; max-width:none; margin-left:-10px;}
.deck-top-actions{display:flex; gap:9px; flex:0 0 auto;}
.deck-top-actions .btn{padding:10px 18px; font-size:14px;}
.deck-top-actions .btn svg{width:16px; height:16px; display:block;}
.deck-menu-btn{
  width:42px; height:42px; flex:0 0 42px; border-radius:var(--r1);
  border:1px solid transparent; background:none; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.deck-menu-btn svg{width:22px; height:22px; display:block; transform:rotate(90deg);}
.deck-menu-btn:hover{color:var(--text); background:var(--surface-2); border-color:var(--line-2);}
@media(max-width:960px){
  /* name and ··· on one line, the two buttons half and half below */
  .deck-title-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 4px;}
  .deck-top-actions{grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .deck-top-actions .btn{padding:13px 12px; font-size:15.5px;}
  .deck-menu-btn{margin-right:-8px;}
}

/* the commander line inside the box: picture, name, colors, bracket, the figures */
.deck-sum{display:flex; align-items:center; gap:16px;}
.ds-imgs{display:flex; gap:6px; flex:0 0 auto;}
.ds-thumb{
  display:block; width:54px; aspect-ratio:488/680; padding:0; border:0; background:var(--surface-3);
  border-radius:4.6%/3.3%; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.ds-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.ds-txt{flex:1; min-width:0;}
.ds-name{font-size:22px; text-transform:uppercase; letter-spacing:.035em; margin-bottom:6px; overflow-wrap:anywhere;}
.ds-line{display:flex; align-items:center; gap:4px 6px; flex-wrap:wrap; margin-bottom:4px;}
.ds-line .mana-sym{width:22px; height:22px; margin:0;}
.ds-bracket{background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--text-dim); text-align:left;}
.ds-bracket:hover{color:var(--text); text-decoration:underline;}
.ds-sum{font-size:14px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
@media(max-width:960px){
  .deck-sum{gap:14px;}
  .ds-thumb{width:48px;}
  .ds-name{font-size:20px;}
}

/* Cards | Analysis | Shopping · n — and, as .ui-tabs, the card detail's
   Info | Printings | Rules and the scanner's Binder | Deck (17-detail.css) */
.deck-tabs, .ui-tabs{display:flex; border-bottom:1px solid var(--line-2); margin:12px 0 18px;}
.deck-tabs button, .ui-tabs button{
  flex:1; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px;
  color:var(--text-dim); font-family:inherit; font-size:15px; font-weight:500; padding:12px 8px 11px; white-space:nowrap;
}
.deck-tabs button:hover, .ui-tabs button:hover{color:var(--text);}
.deck-tabs button.on, .ui-tabs button.on{color:var(--accent-hi); border-bottom-color:var(--accent);}
@media(min-width:961px){ .deck-tabs button{flex:0 0 auto; padding:12px 26px 11px;} }

/* a rule break over the list, one line until Details */
.rule-bar{border:1px solid rgba(239,95,95,.34); background:var(--bad-soft); border-radius:var(--r2); margin-bottom:16px;}
.rule-bar-head{display:flex; align-items:center; gap:12px; padding:12px 16px;}
.rule-bar-head .ico{width:20px; height:20px; flex:0 0 20px; color:var(--text);}
.rule-bar-head .ico svg{width:100%; height:100%; display:block;}
.rule-bar-text{flex:1; min-width:0; font-size:14.5px;}
.rule-bar-btn{background:none; border:0; padding:4px 0 4px 8px; color:var(--text-dim); font-family:inherit; font-size:14px;}
.rule-bar-btn:hover{color:var(--text);}
.rule-bar .rules-list{margin:0; padding:0 16px 14px;}

/* Analysis: the old header's figures without the commander's text */
.deck-analysis .tag-list{margin-top:0;}
.deck-analysis .stat-block .stat-row:first-child{margin-top:14px;}

/* the ··· menu and the Rebuild dialog */
.menu-item.danger{color:var(--bad);}
.menu-item .mi-sub{display:block; margin-top:2px; font-size:12.5px; color:var(--text-faint);}
.rebuild-field{margin-top:14px;}
.rebuild-field .cfg-select{width:100%;}
.rebuild-field + .rebuild-field{margin-top:12px;}

/* ============================================================
   DASHBOARD — quick access: its own block under the decks, two by two,
   one row of four where the column is wide enough for the labels
   ============================================================ */
.dash-quick{container-type:inline-size;}
.dash-quick .kv{margin:0 0 10px 2px;}
.quick{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
@container (min-width:820px){ .quick{grid-template-columns:repeat(4,minmax(0,1fr));} }
.quick-btn{padding:14px 15px; gap:12px; border-color:var(--line-2); font-size:14.5px; min-width:0;}
.quick-btn > span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.quick-btn .ico{width:20px; height:20px; flex-basis:20px;}
@media(max-width:400px){ .quick-btn{padding:13px 12px; gap:10px; font-size:14px;} }

/* ============================================================
   IMPORT
   ============================================================ */
#view-upload{max-width:760px;}
#view-upload .view-head{margin-bottom:18px;}
#view-upload .panel + .stat-row, #view-upload .panel + .notice{margin-top:16px;}
.import-alt{margin-top:16px;}
.import-panel .panel-head .ico{color:var(--text-dim);}
.import-panel .dropzone{padding:28px 22px 24px;}
.dropzone h3{margin-bottom:6px;}
.dropzone p{margin-bottom:18px;}
.dropzone .dz-note{font-size:13px; color:var(--text-faint); margin:12px auto 0;}
.file-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; padding:13px 28px; font-size:15px;}
.file-btn svg{width:20px; height:20px; display:block;}
/* nothing to drop on a touch screen: the wording says choose */
.dz-pick{display:none;}
@media(hover:none) and (pointer:coarse){
  .dz-drop{display:none;}
  .dz-pick{display:inline;}
}
.import-more{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);}
.import-more summary{cursor:pointer; color:var(--text-dim); font-size:14px; list-style:none; display:flex; align-items:center; gap:8px;}
.import-more summary::-webkit-details-marker{display:none;}
.import-more summary::before{content:""; border:5px solid transparent; border-left:7px solid currentColor; border-right:0; transition:transform .15s;}
.import-more[open] summary::before{transform:rotate(90deg);}
.import-more ul{margin:12px 0 0; padding-left:18px; font-size:13px; color:var(--text-dim); line-height:1.6; display:flex; flex-direction:column; gap:6px;}
.import-more strong{color:var(--text);}
.import-alt .panel-body p{margin:0 0 14px; color:var(--text-dim); font-size:14px;}
.import-alt .btn{width:100%; padding:12px 16px; font-size:15px;}
.import-alt .btn svg{width:18px; height:18px; display:block;}
.import-foot{margin:16px 2px 0; font-size:13px; color:var(--text-faint);}
@media(max-width:960px){
  .import-panel .dropzone{padding:24px 16px 20px;}
  .file-btn{width:100%;}
}

/* ============================================================
   FILTER PANELS (search and collection) and the phone's sheet
   ============================================================ */
/* A field's label in sentence case; small capitals only over a group of
   chips or pips, which has no single field to name. */
.fgroup > label{
  font-family:inherit; font-size:13px; font-weight:500; text-transform:none; letter-spacing:0;
  color:var(--text-dim); margin-bottom:6px;
}
.fg-title{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-label); margin-bottom:8px;
}
.range-row{gap:10px;}
.range-field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0;}
.range-row .range-field span{font-size:13px; color:var(--text-dim);}
/* "Sort by" and the arrow that reverses it */
.sort-field{display:flex; gap:8px;}
.sort-field select{flex:1; min-width:0;}
.sort-dir{
  flex:0 0 auto; min-width:40px; border-radius:var(--r1); border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--text); font-family:inherit; font-size:13.5px; line-height:1; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.sort-dir .sd-arrow{font-size:17px;}
.sort-dir .sd-word{display:none;}
.in-sheet .sort-dir .sd-word{display:inline;}
.sort-dir:hover{border-color:var(--line-3);}
/* the collection's pips and sort live in the toolbar and the sort bar on a wide screen */
.coll-filters:not(.in-sheet) .sheet-only{display:none;}

@media(max-width:960px){
  body.filters-open .filter-sheet{
    display:flex; flex-direction:column; padding:0; overflow:hidden;
    max-height:92vh; max-height:92dvh; border-radius:22px 22px 0 0;
  }
  /* the handle: grab bar and title row; the page must not scroll under it */
  .fs-top{flex:0 0 auto; touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none;}
  .fs-top:active{cursor:grabbing;}
  .fs-grab{height:20px; display:flex; align-items:flex-end; justify-content:center;}
  .fs-grab::before{content:""; width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.24);}
  .sheet-head{flex:0 0 auto; margin:0 16px; padding:10px 0 12px;}
  .sheet-head h3{font-size:24px;}
  .fs-x{
    width:40px; height:40px; margin-right:-8px; padding:0; border:0; background:none; color:var(--text-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .fs-x .ico, .fs-x svg{width:22px; height:22px; display:block;}
  .sheet-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 16px 20px;}
  .sheet-foot{
    flex:0 0 auto; display:flex; flex-direction:column; gap:10px; margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-2); background:var(--surface);
  }
  .sheet-btns{display:flex; gap:10px;}
  .sheet-btns .btn{flex:1; padding:14px 12px; font-size:16px;}
  .sheet-btns .btn.ghost{border-color:transparent; color:var(--text-dim);}
  .sheet-foot .query-preview{
    width:auto; background:none; border:0; padding:0 2px; font-family:inherit; font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sheet-foot .query-preview:empty{display:none;}

  /* the panel inside the sheet: no box of its own, two columns */
  .filters.in-sheet{background:none; border:0; border-radius:0; padding:0; margin:0;}
  .in-sheet .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px;}
  .in-sheet .fg-wide{grid-column:1/-1;}
  .in-sheet .fgroup > label, .in-sheet .range-row .range-field span{font-size:15px; margin-bottom:8px;}
  .in-sheet .range-field{gap:0;}
  .in-sheet .fg-title{font-size:13.5px; margin-bottom:10px;}
  .in-sheet .fgroup input[type=text], .in-sheet .fgroup input[type=number], .in-sheet .fgroup select{
    min-height:48px; padding:11px 14px; border-radius:10px; font-size:16px;
  }
  .in-sheet .fgroup select{padding-right:32px;}
  .in-sheet .sort-dir{min-width:48px; padding:0 14px; border-radius:10px; font-size:15px;}
  .in-sheet .chips{gap:8px;}
  .in-sheet .chip{
    padding:11px 16px; border-radius:10px; font-size:15px;
    background:var(--surface-2); color:var(--text);
  }
  .in-sheet .chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  /* six equal tiles, every symbol in its colours; the chosen ones framed */
  body.filters-open .in-sheet .pips{display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;}
  .in-sheet .pip{
    width:auto; height:50px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2);
    opacity:1; filter:none; display:flex; align-items:center; justify-content:center;
  }
  .in-sheet .pip img{width:30px; height:30px;}
  .in-sheet .pip.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
  .in-sheet .pip:not(.on):hover{transform:none;}
  /* the sheet's foot has Reset and Show results; the panel's own buttons stay home */
  .in-sheet .filter-foot{margin:0; padding:0; border:0;}
  .in-sheet .filter-foot > .btn, .in-sheet .filter-foot > .spacer{display:none;}
  .in-sheet #sActiveSet:not(:empty), .in-sheet .cf-note:not(:empty){margin-top:16px;}
}

/* ---------- the same panels on a wide screen ----------
   The sheet's look — field labels in sentence case, small capitals over chip
   groups, tall fields, square chips, colour tiles — on a grid of four
   columns where every row adds up: a field takes one column, a chip group or
   a From/To pair two, the card types all four. The auto-fit grid before put
   whatever fitted side by side, so labels, fields and chips of different
   heights shared a row and single groups were left on a row of their own.
   A narrow panel (the collection beside its binder list) gets the sheet's
   two columns instead. */
@media(min-width:961px){
  .filters{container-type:inline-size; padding:20px 22px;}
  .filter-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 16px;}
  .filter-grid > .fg-wide, .filter-grid > .fg-desk2{grid-column:span 2;}
  .filter-grid > .fg-desk1{grid-column:span 1;}
  .filters .fgroup > label, .filters .fg-title, .filters .range-row .range-field span{line-height:18px; margin-bottom:8px;}
  .filters .fgroup > label, .filters .range-row .range-field span{font-size:14px;}
  .filters .range-field{gap:0;}
  .filters .fgroup input[type=text], .filters .fgroup input[type=number], .filters .fgroup select{
    min-height:42px; padding:9px 13px; border-radius:10px; font-size:14px;
  }
  .filters .fgroup select{padding-right:32px;}
  .filters .sort-dir{min-width:42px; border-radius:10px;}
  .filters .chips{gap:8px;}
  .filters .chip{padding:8px 14px; border-radius:10px; font-size:13.5px; background:var(--surface-2); color:var(--text);}
  .filters .chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  /* the search's colours: six tiles, as in the sheet */
  .filter-grid .pips{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;}
  .filter-grid .pip{
    width:auto; height:42px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2);
    opacity:1; filter:none; display:flex; align-items:center; justify-content:center;
  }
  .filter-grid .pip img{width:24px; height:24px;}
  .filter-grid .pip.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
  .filter-grid .pip:not(.on):hover{transform:none; border-color:var(--line-3);}
  .filters .filter-foot{margin-top:22px; padding-top:18px;}
}
@container (max-width:719px){
  .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .filter-grid > .fg-wide{grid-column:1/-1;}
  .filter-grid > .fg-desk2, .filter-grid > .fg-desk1{grid-column:span 1;}
}