/* Element defaults: unclassed HTML only. */

/* Components set their own display, which beats the browser's default for [hidden]. Without
   this, hiding the sidebar by setting .hidden = true silently does nothing. */
[hidden] { display: none !important; }

h1 { font-size: 30px; } h2 { font-size: 21px; } h3 { font-size: 16px; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  nav button { font: inherit; font-size: 14px; background: transparent; border: 0; color: var(--muted); padding: 7px 11px; border-radius: 4px; cursor: pointer; }
  nav button[aria-current="true"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
  main { padding: 26px 0 60px; display: grid; gap: 20px; }
  dialog.ui { padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 440px; width: calc(100% - 32px); }
  dialog.ui::backdrop { background: rgba(8, 10, 12, .55); backdrop-filter: blur(2px); }
  dialog.ui form { display: grid; gap: 16px; padding: 20px; margin: 0; }
  /* A grid item will not shrink below its min-content width, and a filename like
     "702684631_18080809682633396_987858094563826794_n.jpg" has no break opportunity in it — so the
     form grew past the card and everything to the right of it was clipped. Let long words break,
     and let the tracks shrink. */
  dialog.ui form > *, dialog.ui .field { min-width: 0; }
  dialog.ui p, dialog.ui h3 { overflow-wrap: anywhere; }
  dialog.ui .field select, dialog.ui .field input { max-width: 100%; }
  dialog.ui h3 { font-size: 18px; }
  dialog.ui .dialog-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  dialog.ui .btn.danger { border-color: var(--accent); color: var(--accent); }
  dialog.ui .btn.danger:hover { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }