/* The page dialogs: the shared paint card (.dlg), the paint picker and
   « ajouter à un serment ». What any dialog is built from — the element's
   ground, .mwrap, .dclose, .acts — lives in base.css, because the Réglages
   sheet and the restore dialog ride in the tabbar partial and so appear on
   pages this sheet is not loaded by. */

/* per-dialog sizing */
#dlg,#pdlg{--dlg-w:680px;overflow:hidden}
#pjdlg{--dlg-w:440px}
#recdlg{--dlg-w:780px}

/* ---------- the paint card ---------- */
.dlg{display:grid;grid-template-columns:240px 1fr;position:relative}
/* the card's face: the paint's colour, hatched when it has none, and the
   photo the tap swaps it for */
.dlg .big{aspect-ratio:1/1;background:var(--panel-2);position:relative;overflow:hidden;
  display:block;width:100%;border:0;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.dlg .big.nocol{background:var(--hatch)}
.dlg button.big{cursor:pointer}
.dlg button.big:active{filter:brightness(.96)}
.dlg button.big:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.dlg .big img{width:100%;height:100%;object-fit:cover;display:block}
.dlg .rng{
  position:absolute;left:7px;bottom:7px;font-size:10px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 7px;border-radius:99px;
  background:rgba(255,255,255,.86);color:#1c1a17;backdrop-filter:blur(4px);
}
.dlg .body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.dlg .body.full{grid-column:1/-1}
.dnote{margin:0;font-size:13px;color:var(--ink-2)}
.dlg h3{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.cardhead{display:flex;align-items:center;gap:8px}
.cardhead h3{flex:1;min-width:0}
/* two columns put the head under the floating close: the name row yields it
   the room it takes over the body's own padding, whatever the pointer's scale */
@media (min-width:861px){ .cardhead{padding-right:calc(var(--ctl-h) - 4px)} }
.actrow{display:flex;gap:8px;align-items:center}
.actrow .tog{flex:1}
.actrow .ibtn{flex:none}
.dgrab{display:none}
.shoplink{
  color:var(--accent);font-weight:600;font-size:13.5px;
  text-decoration:underline;text-underline-offset:2px;
}
.shoplink svg{vertical-align:-2px}
.dlg dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.dlg dt{color:var(--ink-2)}
.dlg dd{margin:0;overflow-wrap:anywhere}
/* the J'ai / Je veux toggles keep their pressed colours on the .btn base */
button.tog[aria-pressed="true"][data-mark="owned"]{background:var(--ok);border-color:var(--ok);color:#fff}
button.tog[aria-pressed="true"][data-mark="wish"]{background:var(--warn);border-color:var(--warn);color:#fff}
button.tog.ico{width:var(--ctl-h);padding:0}
button.tog.proj[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* a pot of the oath's palette: the card is opened from it, so the toggle
   arrives pressed and a tap takes the colour out */
button.tog.pal[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.nav{display:flex;gap:6px;margin-left:auto}

/* the one dialog close: a framed icon, top right */

.hexline{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.hexline .dot{width:15px;height:15px;background:none}
.hexline .btn{min-height:28px;padding:0 9px;font-size:12px}

/* the closest pot I own, at the foot of a paint I do not: the card's last
   word, under a rule, on an ordinary .btn holding a name and its rack */
.eqvslot{display:contents}
.eqv{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.eqv .btn{justify-content:flex-start;width:100%}
.eqv .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.eqv .pmeta{margin-left:auto;padding-left:10px}


/* ---------- paint picker ---------- */
.pk{display:flex;flex-direction:column;max-height:min(560px,80vh)}
.pk .pkhead{position:relative;padding:14px 56px 10px 16px;border-bottom:1px solid var(--line)}
.pk .pkhead .t{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.pk input{
  width:100%;min-height:var(--ctl-h);padding:0 12px;border:1px solid var(--line);background:var(--bg);
  border-radius:var(--radius-s);outline:none;
}
#pkres,.pkres{overflow:auto;padding:6px}
.pkrow{
  display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;
  width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:7px 10px;cursor:pointer;
}
.pkrow:hover,.pkrow.sel{background:var(--panel-2)}
.pkrow .dot{width:15px;height:15px}
.pkrow .nm{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkrow .br{font-size:12px;color:var(--ink-3);white-space:nowrap}
.pkmsg{padding:18px;color:var(--ink-2);font-size:13.5px;text-align:center}

/* ---------- « ajouter à un serment » ---------- */
.pjin{position:relative;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.pjin h3{margin:0;font-size:17px;letter-spacing:-.01em}
.pjpaint{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}
.pjpaint .dot{width:15px;height:15px}
.pjpaint .pjb{color:var(--ink-3);font-size:12.5px}
.pjlab{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.pjlab select,.pjlab input,.pjrow input{
  min-height:var(--ctl-h);padding:0 10px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius-s);outline:none;font-size:14px;color:var(--ink);
}
.pjrecs{display:flex;flex-direction:column;gap:5px}
.pjrec{
  display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:var(--ctl-h);
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);
  padding:6px 11px;cursor:pointer;font-size:14px;
}
.pjrec:hover:not(:disabled){border-color:var(--accent)}
.pjrec:disabled{opacity:.5;cursor:default}
.pjrec .pjn{font-size:11.5px;color:var(--ink-3)}
.pjrow{display:flex;gap:6px}
.pjrow input{flex:1;min-width:0}
.pjhint{margin:0;font-size:13.5px;color:var(--ink-2)}

@media (max-width:860px){
  .dlg{grid-template-columns:1fr}
  .dlg .big{aspect-ratio:16/9}
}

/* ---------- phone: the page dialogs keep sheet shape over their own sizing ---------- */
@media (max-width:860px){
  /* the paint picker: a fixed-height bottom sheet, whatever the result
     count — the field lands above the keyboard instead of triggering the
     iOS pan-to-input, and the result list scrolls inside */
  .pk{height:min(58dvh,520px)}
  .dlg{max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));overflow:auto}
  .dlg .big{max-height:34dvh}
  .dgrab{display:block;position:absolute;left:50%;top:8px;transform:translateX(-50%);
    width:36px;height:4px;border-radius:99px;background:rgba(255,255,255,.65);z-index:2}
  .hexline .btn{min-height:36px}
  .pk .pkhead{padding-right:56px}
  .pkrow{padding:12px 10px}
}

/* the name row shared by the new-oath and import dialogs */
.newform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.newform input{flex:1;min-height:var(--ctl-h);padding:0 10px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);outline:none;min-width:180px}