:root {
  --bg: #fbfaf7;
  --fg: #1f2421;
  --muted: #6b7570;
  --accent: #2f6f4f;
  --card: #ffffff;
  --border: #e4e2da;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161a18;
    --fg: #e8ebe8;
    --muted: #9aa59e;
    --accent: #6fbf95;
    --card: #1f2421;
    --border: #2c332f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 2rem 1.25rem 4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
}

h1 { margin-bottom: 0.25rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
small { color: var(--muted); }

section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}

form { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
input, textarea, select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* Links follow the theme rather than the browser's defaults.
   Without this, an unstyled <a> renders #0000EE on the dark background — about
   1.3:1 against the card, which is invisible rather than merely ugly — and
   visited links go purple, which is worse. Anything wanting different
   treatment (the header's nav and icon buttons, the home page's cards)
   overrides this on a more specific selector. */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

ul { padding-left: 1.25rem; }

/* ---------- card links ---------- */
/* One tappable block: a title, a line of context, and sometimes a line of
   state. The home page lists the sub-apps with these; a sub-app's own front
   door lists its views the same way, which is why they are here rather than
   inline in either page.
   Cards rather than <button>s: they are navigation, so long-press,
   middle-click and open-in-new-tab all keep working and a screen reader still
   calls them links. */
.card-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.card-list li { margin-bottom: .5rem; }

.app-card {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s;
}
.app-card:hover { border-color: var(--accent); }
.app-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-card .title { display: block; font-weight: 600; }
.app-card .blurb { display: block; color: var(--muted); font-size: .9rem; margin-top: .15rem; }
/* Where you are up to with the thing the card leads to. */
.app-card .status { display: block; color: var(--accent); font-size: .82rem; margin-top: .35rem; }

/* ---------- app chrome (rendered by <app-header> in components.js) ---------- */
/* One line: home, title, section nav, account. The nav takes the slack so
   the avatar stays pinned right. */
.topbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.topbar h1 { margin: 0; font-size: 1.5rem; line-height: 1.1; }
/* The title is a link back to the sub-app's own front door, and should read as
   the heading it is rather than as a link. */
.topbar h1 a { color: inherit; text-decoration: none; }
.topbar h1 a:hover { color: var(--accent); }
/* Wraps rather than squeezing: a sub-app with four views cannot fit them beside
   a title on a narrow phone, and shrinking them further makes them unhittable. */
.topbar nav { flex: 1; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-left: 0.4rem; }
.topbar nav a { margin-right: 0; }

.iconbtn, .avatar {
  flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); text-decoration: none;
}
.iconbtn svg, .avatar svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
/* The close control in capture mode is a <button> where the home control is an
   <a>, so it arrives carrying the generic button padding above — 1rem a side
   inside a fixed 2rem circle, which leaves the icon exactly no width. */
button.iconbtn { padding: 0; cursor: pointer; }
.avatar { font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
          color: var(--accent); }
.iconbtn:hover, .avatar:hover { border-color: var(--accent); color: var(--accent); }
/* `display: inline-flex` above beats the hidden attribute's UA rule, so the
   avatar needs this to actually disappear when signed out. */
.avatar[hidden] { display: none; }

/* Narrow screens: the nav drops to its own line rather than wrapping around the
   title, which put one stray link under the others and left the header looking
   broken. The title takes the slack so the avatar stays pinned right. */
@media (max-width: 460px) {
  .topbar { flex-wrap: wrap; }
  .topbar h1 { flex: 1; font-size: 1.25rem; }
  .topbar nav { order: 3; flex-basis: 100%; flex-grow: 0; gap: 1rem;
                margin-left: 0; font-size: 0.9rem; }
}

/* ---------- developer mode (assets/devpicker.ts) ---------- */
/* Only ever on screen for an account holding a developer address, so this is a
   few hundred bytes the rest of the world downloads and never sees. Kept here
   rather than injected from the module because a stylesheet is where styles
   live, and the alternative is a string of CSS inside TypeScript. */

/* Same circle as the home and account controls; the hidden attribute does the
   hiding, as it does for the avatar. */
#dev-pencil[hidden] { display: none; }

/* The layer that takes the tap. Transparent and above everything, so no handler
   in the page ever sees the pointer — see the note in devpicker.ts. Vertical
   panning is left alone, so reaching something further down the page still
   works while picking. */
.devpick-layer {
  position: fixed; inset: 0; z-index: 2147483000;
  cursor: crosshair; background: transparent;
  touch-action: pan-y;
}

/* Drawn, never applied to the target: an outline set on the element itself
   changes its layout in exactly the cases worth inspecting. */
.devpick-outline {
  position: fixed; top: 0; left: 0; z-index: 2147483001;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transition: transform .06s linear, width .06s linear, height .06s linear;
}
.devpick-outline[hidden] { display: none; }

/* Bottom of the screen, out of the way of the header the pencil is in — and
   within thumb reach on a phone, which is where cancelling needs to be. */
.devpick-banner {
  position: fixed; z-index: 2147483002;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--card); color: var(--fg);
  border-top: 1px solid var(--border);
  font-size: .9rem;
  box-shadow: 0 -4px 16px rgb(0 0 0 / 12%);
}
.devpick-warn { flex-basis: 100%; color: var(--muted); font-size: .8rem; }
.devpick-cancel {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); padding: .35rem .9rem; font-size: .9rem;
}

.devdialog {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--fg);
  padding: 1.1rem 1.2rem;
  width: min(32rem, calc(100vw - 2rem));
  max-height: 85vh; overflow-y: auto;
}
.devdialog::backdrop { background: rgb(0 0 0 / 45%); }
.devdialog h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.devdialog textarea { width: 100%; margin-top: .6rem; resize: vertical; }
.devdialog details { margin-top: .7rem; font-size: .85rem; color: var(--muted); }
.devdialog summary { cursor: pointer; }
/* The captured context, shown before it is sent. Scrolls in its own box: it is
   twenty lines, and it must not push the buttons off the screen. */
.devdialog-context {
  margin: .5rem 0 0; padding: .5rem .6rem;
  max-height: 11rem; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: .75rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.devdialog-target { margin: 0; color: var(--muted); font-size: .85rem; }
.devdialog-problem { margin: .7rem 0 0; font-size: .85rem; color: #b3261e; }
@media (prefers-color-scheme: dark) { .devdialog-problem { color: #f2b8b5; } }
.devdialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.devdialog-cancel { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.devdialog-file { min-width: 8rem; }