/* mo.ment EPK tokens: deep night blue, one orange. Shared by the practice screen and the library. */
:root{
  --canvas:#02080c; --surface:#0a141b; --surface-2:#111e27; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --text:#eef1f3; --muted:#8f9ba4;              /* 17.8:1 / 7.1:1 on canvas, 6.0:1 on surface-2 */
  --accent:#ee6300; --accent-text:#ff7a1a;       /* orange fill with dark text 6.2:1, orange text 7.7:1 */
  --primary:var(--accent); --on-primary:#02080c;
  --miss-bg:#2a1416; --miss:#ff9a8f;             /* grades keep their own colours, never the brand orange */
  --half-bg:#262312; --half:#e8d36a;
  --got-bg:#13241a;  --got:#9fd8a0;
  --new-bg:#111e27;  --new:#c3cbd1;
  --vinyl:#030608; --groove:#0e151a; --inner:#0d171e;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --display:"Zen Dots","Montserrat",sans-serif;
  --mono:"Sometype Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}

/* Shared by the practice screen and the library: dialogs, crate chips, tag chips. */
dialog{margin:auto;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:24px;
  width:calc(100% - 32px);max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
dialog[open]{animation:pop .18s ease-out}
dialog[open]::backdrop{animation:fade .18s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-transparency:reduce){dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.8)}}
@media (prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop{animation:none}}
dialog h2{font:400 19px/1.25 var(--display);margin-bottom:8px}
dialog p{color:var(--muted);font-size:14px}
dialog .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
dialog .btn{min-height:36px;padding:0 14px;border-radius:6px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
dialog .btn:hover{background:var(--line)}
dialog .btn.primary{background:var(--primary);color:var(--on-primary);border-color:transparent}
dialog .btn.danger{background:var(--miss-bg);color:var(--miss);border-color:transparent}

.crate-list{list-style:none;padding:0;margin-top:14px;max-height:300px;overflow:auto;border-top:1px solid var(--line)}
.crate-list label{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 4px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.crate-list label:hover{background:var(--line)}
.crate-list input{width:16px;height:16px;accent-color:var(--text)}
.crate-list .n{margin-left:auto;color:var(--muted);font:12px var(--mono)}
.new-field{display:flex;gap:8px;margin-top:14px}
.new-field input{flex:1;min-width:0;min-height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--canvas);font-size:14px}
.new-field button{flex:none}
/* Phones: dialogs never wider than the screen; 16px fields stop Safari from zooming in on tap */
@media (max-width:600px){
  dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px)!important;padding:20px 16px;max-height:calc(100dvh - 24px);overflow:auto}
  input,select,textarea{font-size:16px!important}
}
.new-field input::placeholder{color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:12px;background:var(--surface-2,#1b1b1b);
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text);white-space:nowrap}
.chip button{width:18px;height:18px;margin-right:-6px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1}
.chip button:hover{background:var(--line);color:var(--text)}
.tag{display:inline-flex;align-items:center;border-radius:4px;padding:0 6px;font:11px/18px var(--mono);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.suggest button{border-radius:4px;padding:0 8px;font:12px/24px var(--mono);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.suggest button:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.dlg-label{font-size:12px;color:var(--muted);margin-top:16px}

/* Crate multi-select dropdown */
.menu{position:fixed;z-index:30;width:260px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);padding:6px;font-size:14px;animation:drop .12s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.menu{animation:none}}
.menu .head{font-size:12px;color:var(--muted);padding:6px 8px 4px}
.menu ul{list-style:none;padding:0;max-height:260px;overflow:auto}
.menu label{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px;border-radius:5px;cursor:pointer}
.menu label:hover{background:var(--line)}
.menu input[type=checkbox]{width:15px;height:15px;accent-color:var(--text)}
.menu .n{margin-left:auto;color:var(--muted);font:11px var(--mono)}
.menu .choice{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 8px;border-radius:5px;text-align:left}
.menu .choice:hover:not(:disabled){background:var(--line)}
.menu .choice:disabled{opacity:.4;cursor:default}
.menu .sw{width:16px;height:16px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.menu form{display:flex;gap:6px;padding:6px 2px 2px;border-top:1px solid var(--line);margin-top:4px}
.menu form input{flex:1;min-width:0;min-height:30px;padding:0 8px;border:1px solid var(--line-strong);border-radius:5px;background:var(--canvas);font-size:13px}
.menu form button{min-height:30px;padding:0 10px;border-radius:5px;font-size:13px;font-weight:600;border:1px solid var(--line-strong)}
.menu form button:hover{background:var(--line)}
.crate-trigger{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:28px;padding:2px 4px;border-radius:6px;text-align:left;cursor:pointer;color:var(--muted)}
.crate-trigger:hover{background:var(--line)}
.crate-trigger .caret{width:10px;height:10px;flex:none;opacity:.7}

/* Add Record / New on Discogs dialogs */
.dlg-status{min-height:20px;margin-top:10px;font-size:13px;color:var(--muted)}
.rec-head{display:grid;gap:2px;margin-top:4px}
.rec-head b{font-weight:600;font-size:16px}
.rec-head span{font-size:13px;color:var(--muted)}
.photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photos button{width:72px;display:grid;gap:4px;padding:0;color:var(--muted);font:600 11px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.photos img{width:72px;height:72px;object-fit:cover;border-radius:4px;border:1px solid var(--line-strong)}
.sync-list{list-style:none;padding:0;margin-top:14px;max-height:300px;overflow:auto;border-top:1px solid var(--line)}
.sync-list label{display:grid;grid-template-columns:18px 44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.sync-list input{width:16px;height:16px;accent-color:var(--text)}
.sync-list img,.sync-list .noimg{width:44px;height:44px;object-fit:cover;border-radius:3px;background:var(--surface-2)}
.sync-list b{display:block;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-list small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog .btn:disabled{opacity:.5;cursor:default}

/* Header (title + navigation) stays at the top while scrolling */
.bar{position:sticky;top:0;z-index:20;background:rgba(2,8,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (prefers-reduced-transparency:reduce){.bar{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* phones: menus and the sets editor get 44pt rows and bigger text */
@media (pointer:coarse), (max-width:600px){
  .menu label,.menu .choice{min-height:44px;font-size:15px}
  .menu input[type=checkbox]{width:20px;height:20px}
  dialog .chip{font-size:14px;padding:4px 4px 4px 12px}
  dialog .chip button{min-width:32px;min-height:32px;font-size:16px}
  .suggest button{font-size:14px;line-height:36px;padding:0 12px}
}