/*
 * StetProof: app chrome.
 *
 * Deliberately quiet. The document being edited supplies its own typography and
 * colour, and anything assertive here would compete with it: the user is
 * looking at their file, not at this. Mobile-first: the layout below is the
 * phone layout, and the desktop one is the same thing with more room.
 */
:root {
  --ink: #16191c;
  --muted: #5f6672;
  --line: #dfe2e6;
  --paper: #f6f7f8;
  --accent: #2f5fd0;
  --accent-ink: #ffffff;
  --warn: #9a3412;
  --warn-bg: #fff3e8;
  --chrome-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8eaed;
    --muted: #9aa1ac;
    --line: #2c3238;
    --paper: #15181b;
    --accent: #7ba3f5;
    --accent-ink: #10131a;
    --warn: #f0b088;
    --warn-bg: #2d1e14;
  }
}

* { box-sizing: border-box; }

/*
 * The hidden attribute has to win.
 *
 * [hidden] { display: none } is a UA rule, so any class here that sets display
 * .welcome is flex, .chrome is flex, silently beats it and the element stays
 * on screen. That is what happened: the welcome panel never went away when a
 * file opened, so it and the document shared the flex row and pushed the page
 * off the side of a phone.
 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

/* ---- top bar --------------------------------------------------------- */
.chrome {
  flex: none;
  min-width: 0;
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand {
  font-weight: 650;
  letter-spacing: -.01em;
  flex: none;
}
.file {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.spacer { flex: 1 1 auto; }

.btn {
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  /* 44px is the smallest target both Apple and Android call reliable on touch. */
  min-height: 40px;
  padding: 0 14px;
  cursor: pointer;
  flex: none;
}
.btn:hover:not(:disabled) { background: rgba(127, 127, 127, .12); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.big { min-height: 48px; padding: 0 22px; font-size: 16px; }

/* ---- stage ------------------------------------------------------------ */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  /* A flex item will not shrink below its content by default, and a document
     is as wide as it likes. Without this the stage refuses to be narrower than
     the widest thing in the file and pushes the whole app off the side of the
     screen: taking Save with it. */
  min-width: 0;
  position: relative;
  display: flex;
  overflow: hidden;
}
#frame {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: #fff;   /* the document brings its own; never show ours through */
}

/* ---- welcome ---------------------------------------------------------- */
.welcome {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 20px 48px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 44rem;
  margin: 0 auto;
}
.welcome h1 {
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  margin: 0;
  color: var(--muted);
  max-width: 40ch;
}
.drop-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.how {
  margin: 18px 0 0;
  display: grid;
  gap: 16px;
  width: 100%;
}
.how > div {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.how dt {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 3px;
}
.how dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 52ch;
}
@media (min-width: 700px) {
  .how { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* Phone: the filename and the two controls earn their space; the wordmark does
   not, once you are looking at your own document. */
@media (max-width: 460px) {
  body.editing .brand { display: none; }
  .chrome { gap: 8px; }
  .btn { padding: 0 12px; }
}

/* ---- toast ------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10;
  max-width: min(92vw, 34rem);
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(22, 22, 27, .94);
  color: #f2f3f5;
  font-size: 13px;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .3);
}
.toast.warn { background: var(--warn-bg); color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- opening from your own network ------------------------------------ */
.network {
  width: 100%;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

#net-form {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#net-form label {
  font-size: 13px;
  font-weight: 600;
}
#net-url {
  font: inherit;
  font-size: 16px;            /* below 16px, iOS zooms the page on focus */
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
#net-url:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.net-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.net-msg {
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 14rem;
  min-width: 0;
}
.net-msg.warn { color: var(--warn); }

.hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}
.hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: rgba(127, 127, 127, .14);
  padding: .08em .3em;
  border-radius: 3px;
}

.recents-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}
.recents {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recents li {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.recent-open {
  font: inherit;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  justify-content: center;
}
.recent-open:hover { background: rgba(127, 127, 127, .1); }
.recent-name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-host {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-forget {
  font: inherit;
  flex: none;
  width: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.recent-forget:hover { background: rgba(127, 127, 127, .1); color: var(--ink); }

/* ---- settings --------------------------------------------------------- */
.settings {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  width: min(30rem, calc(100vw - 32px));
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
}
.settings::backdrop { background: rgba(10, 12, 16, .45); }
.settings-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.settings h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.settings label { font-weight: 600; font-size: 13px; margin-top: 10px; }
.settings .opt { font-weight: 400; color: var(--muted); }
.settings input, .settings select {
  font: inherit; font-size: 16px;            /* below 16px, iOS zooms on focus */
  width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.settings input:focus-visible, .settings select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.settings .hint { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.settings #set-status.good { color: #15803d; }
.settings #set-status.bad { color: var(--warn); }
.settings-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.settings-body { max-height: calc(100dvh - 48px); overflow: auto; }
.settings .set-section {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.settings fieldset.ai-access { border: 0; padding: 0; margin: 12px 0 0; }
.settings fieldset.ai-access legend { font-weight: 600; font-size: 13px; padding: 0; }
.settings label.choice { display: flex; gap: 9px; align-items: flex-start; font-weight: 400;
  font-size: 13px; line-height: 1.5; margin-top: 8px; }
.settings label.choice input { width: auto; min-height: 0; margin: 3px 0 0; flex: none; }

/* ---- brand: StetProof (added by sites/brand-app.js) ---------------- */
:root { --paper: #fbf8f2; --ink: #1d1a17; --muted: #6b635a; --line: #e7dfd2; --accent: #a3201d; --accent-ink: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #16120f; --ink: #efe8dc; --muted: #b0a698; --line: #3a322b; --accent: #f0897c; --accent-ink: #1a0f0d; }
}
.brand { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; color: inherit; text-decoration: none; }