/* sheet.css — the one shared sheet/modal.
   Bottom sheet under 768px, centered modal above. */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 4, 10, .6);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  transition: transform var(--t-fast) var(--ease);
  overflow: hidden;
}
.sheet-backdrop.open .sheet { transform: translateY(0); }

.sheet-grab {
  width: 40px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: 2px;
  background: var(--line-hover);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.sheet-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 700;
}
.sheet-x {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-dim);
  background: var(--night-1);
  font-size: 18px;
  line-height: 1;
  transition: color var(--t-fast) var(--ease);
}
.sheet-x:hover { color: var(--ink); }

.sheet-body {
  overflow-y: auto;
  min-height: 0;
  color: var(--ink);
}
.sheet-body p { color: var(--ink-dim); }
.sheet-confirm { font-size: var(--fs-3); color: var(--ink) !important; }

.sheet-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 18px;
}
.sheet-actions .btn { flex: 1; }

/* Rows used by the "More" sheet (and free for any list-of-choices sheet) */
.sheet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  margin-bottom: 8px;
  text-align: left;
  background: var(--night-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color var(--t-fast) var(--ease);
}
.sheet-row:hover { border-color: var(--line-hover); }
.sheet-row svg { width: 20px; height: 20px; color: var(--ink-dim); flex: none; }
.sheet-row b { font-weight: 600; }
.sheet-row span { display: block; color: var(--ink-dim); font-size: var(--fs-small); }

/* Centered modal on wider screens */
@media (min-width: 768px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet {
    border-radius: var(--radius);
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
    transform: translateY(10px) scale(.985);
  }
  .sheet-backdrop.open .sheet { transform: translateY(0) scale(1); }
  .sheet-grab { display: none; }
  .sheet-actions { justify-content: flex-end; }
  .sheet-actions .btn { flex: none; }
}

/* Shared forms must not depend on visiting a screen to load its CSS. */
.sheet .v2-field { display:block; margin:16px 0; font-size:13px; }
.sheet .v2-field > span { display:block; margin-bottom:7px; font-weight:600; color:var(--ink-dim); }
.sheet .v2-field :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { display:block; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--night-1); color:var(--ink); font:inherit; color-scheme:inherit; }
.sheet .v2-field textarea { line-height:1.5; resize:vertical; }
.sheet .tp-btnrow { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.sheet [data-ai-preview] { margin:12px 0; }
.sheet [data-ai-preview] li { margin:10px 0; overflow-wrap:anywhere; }
.sheet [role=status] { font-size:13px; line-height:1.6; }