/* Structural rules every theme needs. Each theme file starts with a copy of
   this, so a theme is a single self-contained stylesheet with no import
   order to get wrong. Keep the two in step if you change anything here. */

*, *::before, *::after { box-sizing: border-box; }

.hidden { display: none !important; }

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  max-width: 100%;
}

main { margin-top: auto; margin-bottom: auto; max-width: 100%; }

.next-item {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
  max-width: 100%;
  /* A name with no break opportunity would otherwise run off both edges. */
  overflow-wrap: anywhere;
  overflow-y: auto;
}

.column { display: flex; flex-direction: column; align-items: center; width: 100%; }
.row { display: flex; flex-direction: row; align-items: center; justify-content: center; }

dialog[open] { display: flex; flex-direction: column; }

.portrait-table-wrapper { width: 100%; overflow: auto; }
.portrait-table-wrapper > table { width: max-content; }
.notes-cell { max-width: 50vw; word-wrap: break-word; }

/* Form controls keep their native painting unless appearance is reset, and
   without a declared color-scheme the browser will "helpfully" re-tint them
   on a dark page — which is how the terminal theme's buttons ended up grey
   with darkened text. Themes set color-scheme themselves. */
button,
input[type="button"],
input[type="text"],
input[type="date"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

button, input[type="button"] { white-space: nowrap; }

/* Selects lose their arrow with appearance:none; each theme draws its own
   via --select-arrow. */
select {
  background-image: var(--select-arrow);
  background-position: right 0.55rem center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  padding-right: 1.75rem;
}

/* The page behind an open panel is inert, so it should read as inactive. */
main[inert] { opacity: 0.3; }

/* The appearance picker in the About panel. Only its layout lives here —
   the buttons themselves are styled by whichever theme is active, including
   the .open-button state that marks the current one. */
.theme-picker { display: flex; flex-direction: column; gap: 0.4rem; margin-block: 1rem; }
.theme-picker .row { gap: 0.5rem; justify-content: flex-start; }

/* The New panel's two modes: the single-task form and the paste-several box.
   `.mode` mirrors `.column` without its class, because every theme styles
   `.task-item > .column` as a small-caps field label and that would cascade
   into the pasted text. */
/* The form is a direct child of the dialog, and two themes give those a
   side margin. `.column`'s width: 100% ignores the margin and overflows, so
   let the flex container size it instead. */
dialog > .task-item { width: auto; }
.task-item > .mode { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mode-toggle { align-self: flex-start; margin-bottom: 1rem; }
textarea.bulk { min-height: 9rem; white-space: pre; overflow-x: auto; }
.bulk-hint, .bulk-summary { align-self: stretch; text-align: left; }
.bulk-preview { width: 100%; overflow: auto; margin-bottom: 1rem; }