/* system/lib/shared-app-styles/styles.css
 *
 * Sept 2026. This is the "real master stylesheet" tier, distinct from
 * both index.html (core shell chrome + type tokens, must load before
 * first paint) and each system/apps/<id>/styles.css (that app's own
 * business, nothing else's). Everything in THIS file is a deliberate,
 * named, cross-app convention that more than one app opts into on
 * purpose -- not app-specific styling that happened to land in a
 * shared spot. If a rule here is only ever used by one app, it
 * belongs in that app's own styles.css instead.
 *
 * Always linked directly from index.html's <head> (not lazy like
 * per-app styles.css, which loads on that specific app's first mount)
 * since it's small and any app might need it as soon as it mounts,
 * including the very first one in a session.
 *
 * Explicitly NOT for .self-edit / .repo-manage's old bare wrapper
 * rules (width:100%; text-align:left) -- those turned out, on
 * inspection (Sept 2026), to be two vestigial lines with no real
 * shared meaning behind them: the apps that used them have nothing
 * to do with each other, and the "sharing" was just how the CSS
 * happened to get copy-pasted while these apps were built. Each
 * consumer now states those two lines locally in its own
 * styles.css. What's below, by contrast, IS a deliberate convention
 * multiple apps are opting into on purpose. */


/* ---------- text input treatments ----------
   Sept 2026: chat, notes, fullscreen-editor, keyboard-test,
   test-title-bar, and test-nav each independently floored their
   field's font-size at 16px (the one number that stops iOS Safari
   auto-zooming the whole page on focus) and reset the same handful
   of other properties around it -- real duplicated intent, not
   coincidence, so it's factored out here rather than left as five-plus
   near-identical hand-rolled copies. Each consumer's own styles.css
   still owns whatever genuinely varies for it (width, height/flex,
   padding, resize behavior, textarea vs input) -- only the part that
   was actually the same everywhere lives here. */

/* The floor + reset every text field wants, regardless of look.
   Consumers: apps/chat, apps/notes, apps/fullscreen-editor,
   apps/keyboard-test, apps/test-title-bar, apps/test-nav. */
.text-input-base {
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: max(16px, var(--fs-md));
  outline: none;
  -webkit-appearance: none;
}

/* The "visible field" look: real border/radius/background, brand-
   colored border on focus. Consumers: apps/keyboard-test,
   apps/test-title-bar, apps/test-nav. (apps/manage-repo-files' own
   commit-message field looks similar but was never actually built to
   this same exact spec -- e.g. it never reset outline/appearance --
   so it's deliberately left out rather than silently changed to
   match; see that app's own styles.css.) */
.text-input-bordered {
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.text-input-bordered:focus {
  border-color: var(--brand);
}
/* Sept 23 2026: dark-mode fix. The base rule's #fff background was
   hardcoded (light-mode-only thinking), so --ink's dark-mode value
   (near-white, for readability on this app's own dark background)
   landed as near-white text on a still-white field -- washed-out to
   the point of unreadable, and can read as an odd warm/yellow tint on
   a real phone with Night Shift/True Tone shifting whites warm. Bug
   first spotted in WordFlex Test's tile/raw-state boxes (Sept 22),
   confirmed here in its search fields (Sept 23) -- this is the shared-
   style fix that was bookmarked then, now applied. Only the dark-mode
   background changes; light mode is untouched. */
@media (prefers-color-scheme: dark) {
  .text-input-bordered {
    background: var(--paper);
  }
}

/* The "fills the shell's own card directly" look: no border/shadow
   of its own (Safari's default textarea border/inset-shadow
   explicitly zeroed -- see apps/notes's styles.css for the fuller
   explanation of why appearance:none alone isn't enough for a
   textarea). Consumers: apps/chat, apps/notes,
   apps/fullscreen-editor. */
.text-input-fill {
  appearance: none;
  border: none;
  box-shadow: none;
}


/* ---------- simple status-report typography ----------
   A handful of small "run a check, show the result" apps
   (build-status, diagnose-auth, dimension-probe, self-edit-proof)
   deliberately share the same look for their <pre> status block, and
   two of them additionally share a smaller one-line status caption.
   Genuinely reused on purpose (unlike the old .self-edit/.repo-manage
   wrapper rules above) -- these stay centralized. */

/* Consumers: apps/build-status, apps/diagnose-auth,
   apps/dimension-probe, apps/self-edit-proof. No background/border/
   radius of its own -- this is real content, not a second nested box
   inside the shell's own card; text just sits in the padded area
   #appMainContent already provides. */
.self-edit pre {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px;
  min-height: 1.4em;
}

/* Consumers: apps/dimension-probe, apps/self-edit-proof. */
.self-edit .self-edit-status {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--slate-light);
}

/* Consumers: apps/manage-repo-files, apps/recent-commits. */
.repo-manage .status-line {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  color: var(--slate-light);
  margin-top: 10px;
  white-space: pre-wrap;
}