/* The delete affordance, and the confirmation dialog every irreversible act in the app wears
   (web/core/confirm.mjs builds it; erase.mjs and publish.mjs supply the words).
   Self-contained like auth.css: four pages mount this and they do not agree on what a `button`
   or a `p` looks like, so it brings its own. Dark, and still one accent - the weight here is
   carried by the wording and by the dialog stopping the page, not by a colour.
   The dialog selectors are `dialog.ask`, not `dialog.erase`: publishing an item is not an
   erasure and a shared shell wearing the other act's name is how one of the two gets styled
   by accident. The FILE keeps its name so the four pages that link it need no edit. */
.del {
  background: none; border: 1px solid transparent; border-radius: 4px; padding: .1rem .4rem;
  font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; white-space: nowrap;
}
/* Deliberately not louder than the row it sits in until you are on it: a delete you can find
   but cannot hit by accident. */
.del:hover { color: var(--text); border-color: var(--line); background: var(--surface); }
/* The UA focus ring is blue, and blue is a second colour - the same rule the dialog's buttons
   below already carry, applied to the affordance that opens them. It matters more here than
   anywhere else: the queue holds this button back until the pointer is on the row
   (web/index.html), so the keyboard is the one way to reach it that has no pointer to follow,
   and it has to be unmistakable the moment tab lands on it. */
.del:focus-visible { outline: none; color: var(--text); border-color: var(--accent); background: var(--surface); }
/* And not NEXT to `done` either. In a flex row it takes the free space and ends up alone at
   the far end - two controls apart from the one you were reaching for. */
li > .del { margin-left: auto; }

dialog.ask {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 1.25rem; max-width: 28rem; width: calc(100% - 2rem);
  font: 15px/1.5 var(--font);
}
/* The page behind is still legible, but it is plainly not the thing being answered. */
dialog.ask::backdrop { background: rgba(0, 0, 0, .6); }
/* Sentence case, not tracked-out caps - web/core/tokens.css says why. */
dialog.ask h3 { font-size: 13px; color: var(--dim); font-weight: 600; margin: 0 0 .6rem; }
/* The title of the thing, at the size of the thing: the one line that says which item this is. */
dialog.ask .what { font-size: 17px; font-weight: 600; margin: 0 0 .5rem; overflow-wrap: anywhere; }
dialog.ask p { margin: 0 0 .5rem; color: var(--dim); font-size: 13px; }
dialog.ask .row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
dialog.ask button {
  background: none; border: 1px solid var(--line); border-radius: 4px; padding: .25rem .7rem;
  font: inherit; font-size: 13px; color: var(--dim); cursor: pointer;
}
dialog.ask button:hover:not(:disabled) { color: var(--text); }
/* The UA focus ring is blue, and blue is a second colour. Same accent border a focused field
   wears everywhere else (auth.css), so the keyboard path is still obvious. */
dialog.ask button:focus-visible { outline: none; color: var(--text); border-color: var(--accent); }
dialog.ask button:disabled { opacity: .35; cursor: default; }
/* The one that does it reads as the answer to the question, without becoming a second accent. */
dialog.ask button.go { color: var(--text); background: var(--bg); }
dialog.ask button.go:hover:not(:disabled) { border-color: var(--text); }
dialog.ask .say { color: var(--dim); font-size: 13px; margin: .6rem 0 0; text-align: right; }
dialog.ask .say:empty { display: none; }