/**
 * modals.css — dialogs, toasts and the sign-in panel
 *
 * DIALOG ACCESSIBILITY
 * --------------------
 * Every dialog built by unifiedModals.js is a role="dialog" with aria-modal,
 * an aria-labelledby pointing at its own <h2>, and a focus trap.  This
 * stylesheet supplies the parts that CSS is responsible for:
 *
 *  - The backdrop is opaque enough (0.55 alpha) that the content behind it
 *    cannot be mistaken for interactive, but not so opaque that a child loses
 *    the sense of where they are.
 *  - The panel is centred with flexbox and capped at 92vw / 88vh, then scrolls
 *    internally.  It never exceeds the viewport, so the close button is always
 *    reachable — including at 400% zoom (SC 1.4.10).
 *  - The header and footer are sticky within the panel, so the Cancel and
 *    Confirm buttons stay visible while a long file list scrolls.  This is what
 *    stops SC 2.4.11 Focus Not Obscured failing when a focused list item
 *    scrolls under a fixed footer.
 *  - Nothing depends on :hover to be discoverable.
 */

.modal-host {
  position: relative;
}

/* ══ Overlay and panel ═════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(12, 20, 28, 0.55);
  /* A slight blur helps separate layers, but is dropped under reduced
     transparency / reduced motion preferences below. */
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}

@media (prefers-reduced-transparency: reduce) {
  .modal-overlay {
    background: rgba(12, 20, 28, 0.9);
    backdrop-filter: none;
  }
}

.modal-panel {
  display: flex;
  flex-direction: column;
  width: min(38rem, 92vw);
  max-height: 88vh;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.modal-panel.wide {
  width: min(56rem, 94vw);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}

.modal-title {
  margin: 0;
  flex: 1;
  font-size: 1.25rem;
}

.modal-subtitle {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--panel-2);
  border-color: var(--line);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: thin;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
}

.modal-footer .spacer {
  flex: 1;
}

.branch-key-start-form {
  display: grid;
  gap: 1rem;
}

/* ══ Choice list (Save to… / Open from…) ═══════════════════════════════════ */
.choice-list {
  display: grid;
  gap: 0.6rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--min-touch-target);
  padding: 0.8rem 0.9rem;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.choice:hover:not(:disabled) {
  background: var(--panel-2);
  border-color: var(--accent);
}

.choice-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.choice-text {
  flex: 1;
  min-width: 0;
}

.choice-name {
  display: block;
  font-weight: 700;
}

.choice-desc {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

/* ══ Pictogram image chooser ═══════════════════════════════════════════════ */
.pictogram-gallery,
.pictogram-upload-box {
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.pictogram-gallery legend,
.pictogram-upload-box legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.pictogram-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.5rem;
}

.pictogram-image-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: var(--min-touch-target);
  min-height: 5rem;
  padding: 0.5rem;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}

.pictogram-image-choice:hover {
  background: var(--panel-2);
  border-color: var(--accent);
}

.pictogram-image-choice[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.pictogram-image-choice[aria-pressed="true"]::after {
  content: "\2713";
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  font-weight: 900;
  color: var(--accent);
}

.pictogram-image-choice-glyph {
  font-size: 1.8rem;
  line-height: 1;
}

.pictogram-upload-box .hint {
  margin-bottom: 0.65rem;
}

.pictogram-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  align-items: end;
  gap: 0.65rem 0.8rem;
}

.pictogram-upload-file,
.pictogram-upload-name {
  grid-column: 1;
}

.pictogram-upload-file input[type="file"] {
  width: 100%;
  min-height: var(--min-touch-target);
  padding: 0.25rem;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.pictogram-upload-file input[type="file"]::file-selector-button {
  min-height: calc(var(--min-touch-target) - 0.5rem);
  margin-right: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pictogram-upload-preview {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  padding: 0.4rem;
  background:
    linear-gradient(45deg, var(--panel-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--panel-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--panel-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--panel-2) 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.pictogram-upload-preview[hidden] {
  display: none;
}

.pictogram-upload-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pictogram-upload-layout > .btn {
  grid-column: 1;
  justify-self: start;
}

.pictogram-upload-status {
  min-height: 1.5em;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .pictogram-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pictogram-upload-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pictogram-upload-preview,
  .pictogram-upload-file,
  .pictogram-upload-name,
  .pictogram-upload-layout > .btn {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ══ Data editor ══════════════════════════════════════════════════════════ */
.data-editor-modal {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.data-editor-intro {
  margin: 0;
}

.data-editor-section {
  min-width: 0;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.data-editor-section h3 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

.data-editor-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.data-editor-field-grid input {
  width: 100%;
}

.data-editor-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.data-editor-section-head h3,
.data-editor-summary {
  margin: 0;
}

.data-editor-summary {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.data-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0;
}

.data-editor-groups {
  display: grid;
  gap: 0.45rem;
}

.data-editor-column-headings,
.data-editor-row {
  display: grid;
  grid-template-columns:
    1.25rem minmax(8rem, 1fr) var(--min-touch-target) auto
    minmax(6.75rem, auto) var(--min-touch-target);
  gap: 0.5rem;
  align-items: center;
}

.data-editor-column-headings {
  padding: 0 0.5rem;
  color: var(--ink-soft);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.data-editor-row {
  min-width: 0;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.data-editor-row > .swatch-dot {
  margin: 0;
}

.data-editor-picture-button {
  justify-self: start;
}

.data-editor-row > .field input,
.data-editor-row > select {
  width: 100%;
}

.data-editor-row > .btn-danger {
  justify-self: end;
}

@media (max-width: 650px) {
  .data-editor-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-editor-column-headings {
    display: none;
  }

  .data-editor-row {
    grid-template-columns:
      1.25rem minmax(0, 1fr) var(--min-touch-target);
    align-items: center;
  }

  .data-editor-row > .swatch-dot {
    grid-column: 1;
    grid-row: 1;
  }

  .data-editor-row > .field {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .data-editor-row > .stepper {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }

  .data-editor-row > .data-editor-picture-button {
    grid-column: 2;
    grid-row: 2;
  }

  .data-editor-row > select {
    grid-column: 2;
    grid-row: 4;
  }

  .data-editor-row > .btn-danger {
    grid-column: 3;
    grid-row: 2 / span 3;
  }
}

/* A choice that needs sign-in first is not hidden — it is shown with a clear
   explanation, because hiding features makes an app feel broken. */
.choice[data-requires-auth="true"] .choice-desc::after {
  content: " Sign in first to use this.";
  font-weight: 600;
  color: var(--warning);
}

/* ══ Saved-file list ═══════════════════════════════════════════════════════ */
.file-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.file-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  background: transparent;
  border: 0;
  padding: 0.2rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.file-item-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-item-meta {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.file-item-actions {
  display: flex;
  gap: 0.3rem;
}

.empty-note {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
}

/* ══ Sign-in dialog ════════════════════════════════════════════════════════ */
.signin-intro {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.provider-buttons {
  display: grid;
  gap: 0.6rem;
}

.provider-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
}

.provider-btn:hover:not(:disabled) {
  background: var(--panel-2);
  border-color: var(--accent);
}

.provider-btn svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

.provider-btn .provider-note {
  margin-left: auto;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--muted);
}

.signin-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.signin-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--accent);
}

.signin-account-text {
  min-width: 0;
}

.signin-account-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.signin-account-email {
  color: var(--muted);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.privacy-note {
  margin-top: 1rem;
  font-size: var(--font-size-sm);
  color: var(--muted);
}

/* ══ Alerts inside dialogs ═════════════════════════════════════════════════ */
.alert {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 2px solid;
  margin-bottom: 1rem;
  font-size: var(--font-size-sm);
}

/* Each variant is identified by a word as well as by colour, supplied in the
   markup by unifiedModals.js as a bold prefix. */
.alert-error {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.alert-warning {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}

.alert-success {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.alert-info {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ══ Toasts ════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottombar-h) + 1rem);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: min(30rem, 92vw);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  border-left-width: 6px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
}

.toast-success {
  border-left-color: var(--success);
}
.toast-error {
  border-left-color: var(--danger);
}
.toast-warning {
  border-left-color: var(--warning);
}
.toast-info {
  border-left-color: var(--accent);
}

.toast-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-kind {
  font-weight: 800;
}

.toast-dismiss {
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink-soft);
}

/* ══ Tooltips ══════════════════════════════════════════════════════════════
   Shown on hover AND on keyboard focus, dismissible with Escape, and they never
   cover the control that triggered them — the three requirements of SC 1.4.13
   Content on Hover or Focus. */
.tool-tip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 20rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-sm);
  /* Pointer events enabled so a user can move the mouse onto the tooltip to
     read a long description without it vanishing (SC 1.4.13 "hoverable"). */
  pointer-events: auto;
}

.tool-tip-title {
  margin: 0 0 0.2rem;
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--accent);
}

.tool-tip-body {
  margin: 0;
}

.tool-tip-hint {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

@media (forced-colors: active) {
  .modal-overlay {
    background: Canvas;
  }
  .modal-panel,
  .toast,
  .tool-tip,
  .choice,
  .file-item,
  .provider-btn,
  .pictogram-gallery,
  .pictogram-upload-box,
  .pictogram-image-choice,
  .data-editor-section,
  .data-editor-row {
    border: 2px solid CanvasText;
  }
  .pictogram-image-choice[aria-pressed="true"] {
    border: 3px solid Highlight;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
  .pictogram-image-choice[aria-pressed="true"]::after {
    color: Highlight;
  }
}