:root {
  color-scheme: light dark;
  --bg: #f5f5f7;
  --fg: #1c1c1e;
  --card-bg: #ffffff;
  --border: #d1d1d6;
  --accent: #0a84ff;
  --danger: #ff3b30;
  --muted: #6e6e73;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #f2f2f7;
    --card-bg: #1c1c1e;
    --border: #3a3a3c;
    --muted: #8e8e93;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

#app { max-width: 480px; margin: 0 auto; padding: env(safe-area-inset-top, 16px) 16px 16px; }

h1 { font-size: 22px; margin: 8px 0 4px; }
p { color: var(--muted); margin: 4px 0 16px; }

button {
  display: block;
  width: 100%;
  padding: 14px;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px; /* real tap target */
}
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button:disabled { opacity: 0.5; }

input[type="text"] {
  display: block;
  width: 100%;
  padding: 14px;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}
.card-field { margin: 4px 0; font-size: 15px; }
.card-field-label { color: var(--muted); }
.card-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; padding: 8px; font: 14px/1.4 ui-monospace, Menlo, monospace; border: 1px solid var(--muted); border-radius: 6px; }
.card-warning { color: var(--danger); font-size: 14px; margin: 8px 0; }
.card-countdown { color: var(--muted); font-size: 13px; margin-top: 8px; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.card-actions button { margin: 0; }
button.card-approve { background: var(--accent); color: #fff; border-color: var(--accent); }
button.card-deny { color: var(--danger); border-color: var(--danger); }

.grants-list { list-style: none; padding: 0; margin: 0 0 16px; }
.grants-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.grants-list li button { width: auto; margin: 0; padding: 6px 12px; font-size: 13px; }
.grants-empty { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.message { color: var(--muted); text-align: center; padding: 24px 0; }
.message.error { color: var(--danger); }
.message.reconnecting { font-size: 13px; padding: 8px 0; }

a { color: var(--accent); }

.brake-strip { border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px 8px; margin: 12px 0; background: var(--card-bg); }
.brake-status { color: var(--fg); font-size: 19px; font-weight: 700; margin: 8px 0 2px; }
.brake-banner { color: var(--muted); font-size: 14px; margin: 2px 0 4px; }
.brake-note, .brake-confirm { color: var(--muted); font-size: 14px; margin: 4px 0; }
.brake-details { margin: 8px 0 4px; font-size: 14px; color: var(--muted); }
.brake-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--accent); font-weight: 600; }
.brake-list-head { color: var(--fg); font-weight: 600; margin: 8px 0 2px; }
.brake-list { margin: 0 0 4px; padding-left: 20px; }
.brake-list li { margin: 4px 0; }
.brake-emergency { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; }
.brake-emergency-head { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.read-switches { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin: 12px 0; background: var(--card-bg); font-size: 14px; }
.reads-line { color: var(--fg); font-weight: 600; margin: 2px 0; }
.reads-who, .reads-change { color: var(--muted); margin: 4px 0; }
.brake-confirm { color: var(--fg); font-weight: 600; }
button.brake-end, button.brake-end-confirm { color: var(--danger); border-color: var(--danger); }
.brake-lockdown { color: var(--danger); font-weight: 600; text-align: center; padding: 32px 0; }

/* Brand header: the mark, and the one instruction in large letters (item 56). */
.brand-header { text-align: center; padding: 12px 8px 4px; }
.brand-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.brand-logo { width: 64px; height: 64px; border-radius: 14px; display: block; }
/* The website's wordmark face (index.html .serif) and size/spacing (index.html .brand). */
.brand-word { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-weight: 400; font-size: 44px; letter-spacing: -0.02em; line-height: 1; }
.keep-open { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); }
.keep-open-sub { margin-top: 6px; font-size: 15px; color: var(--muted); }

/* STARDUST: the website's night sky (index.html :root, html/body background, #stars), always dark, whatever the phone's setting (owner direction 2026-10-11).
   Variables only, so every card, button and strip below inherits it; the star field is drawn by /phone/stardust.js onto #stars, behind the page. */
:root, :root:root {
  color-scheme: dark;
  --bg: #010204;
  --fg: #f3f0e8;
  --muted: #b1aaa0;
  --card-bg: rgba(243, 240, 232, 0.055);
  --border: rgba(243, 240, 232, 0.16);
  --accent: #c8894a;
  --danger: #ff6b5e;
}
@media (prefers-color-scheme: light) {
  :root, :root:root { --bg: #010204; --fg: #f3f0e8; --muted: #b1aaa0; --card-bg: rgba(243, 240, 232, 0.055); --border: rgba(243, 240, 232, 0.16); --accent: #c8894a; --danger: #ff6b5e; }
}
html, body {
  background:
    radial-gradient(ellipse 75% 55% at 15% 12%, rgba(125, 72, 36, 0.14) 0%, transparent 72%),
    radial-gradient(ellipse 70% 60% at 84% 62%, rgba(91, 53, 38, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #030302 0%, #050403 48%, #010203 100%);
  background-attachment: fixed;
  min-height: 100%;
}
#app { position: relative; z-index: 1; }
.card, .brake-strip, .read-switches { backdrop-filter: blur(2px); }
button.primary, button.card-approve { color: #120a04; font-weight: 700; }
.keep-open { color: #f3f0e8; text-shadow: 0 0 18px rgba(200, 137, 74, 0.35); }


/* THE WEBSITE'S SKY LAYERS (index.html, stardust 25n), verbatim: four canvases and the vignette sit behind the page; galaxies.js draws into them. */
#neural,#stars{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
#neural{mix-blend-mode:screen;opacity:.94;filter:blur(0px);will-change:opacity,filter;}
#sunflare{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  mix-blend-mode:screen;
}
#accents{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  mix-blend-mode:screen;
  opacity:.92;
}
.vignette{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 46%, rgba(0,0,0,.45) 100%);
}
/* The end of the page: a full screen of open sky, so the galaxies the scroll assembles are seen (owner: "at the bottom, a copy of the galaxies"). */
.sky-end { position: relative; z-index: 1; min-height: 110vh; display: flex; align-items: flex-end; justify-content: center; padding: 0 20px 40px; }
.sky-end p { margin: 0; text-align: center; color: #f3c4a0; font-size: 14px; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(0,0,0,.8), 0 0 18px rgba(243,196,160,.22); } /* peach (owner direction 2026-10-12) */

/* A press-and-hold on the sky is a gravity well, not a text selection or a callout. Fields and buttons keep normal selection. */
body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* APPROVALS APPEAR BELOW: sits under the grants line, theme colour, an arrow either side pointing down (owner direction 2026-10-12). */
.approvals-banner { --nudge: 0px; --glow: .35; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 18px; color: var(--accent); text-shadow: 0 0 18px rgba(200, 137, 74, var(--glow)); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transition: text-shadow .45s ease-out; }
.approvals-text { font-size: 22px; line-height: 1.15; text-align: center; }
.approvals-arrow { font-size: 34px; line-height: 1; transform: translateY(var(--nudge)); transition: transform .45s ease-out; }
.approvals-arrow:last-child { transform: translateY(calc(var(--nudge) * -1)); }
@media (prefers-reduced-motion: reduce) { .approvals-arrow, .approvals-arrow:last-child { transform: none; transition: none; } }

/* The build mark, copied from the website (donnaconnector.app index.html .stardust-build-mark): metallic serif, fixed bottom-right corner (owner direction 2026-10-12). */
.stardust-build-mark{
  position:fixed; right:16px; bottom:12px; z-index:6;
  margin:0; padding:0;
  pointer-events:none; user-select:none;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-weight:400; font-size:11px; line-height:1; letter-spacing:.06em;
  background:linear-gradient(165deg,#fbf7f2 0%,#e8dcc8 18%,#c4a878 38%,#f0e6d6 52%,#8f7e6a 68%,#e8c4c0 82%,#f7f1ea 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 8px rgba(216,174,112,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.35));
  --mark-o:.7; opacity:var(--mark-o);
  /* APPEARS by drifting in from the right as the letters close up out of a wide spacing, with a soft blur clearing (owner direction 2026-10-12: "drag in a little bit different"). */
  animation:sd-mark-in 2.2s cubic-bezier(.16,.8,.24,1) .6s both;
}
@media(max-width:640px){
  .stardust-build-mark{ right:12px; bottom:10px; font-size:10px; --mark-o:.62; }
}
@keyframes sd-mark-in{
  0%{ opacity:0; transform:translateX(34px); letter-spacing:.55em; filter:blur(7px) drop-shadow(0 0 8px rgba(216,174,112,.28)); }
  55%{ opacity:var(--mark-o); }
  100%{ opacity:var(--mark-o); transform:translateX(0); letter-spacing:.06em; filter:blur(0) drop-shadow(0 0 8px rgba(216,174,112,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
}
@media (prefers-reduced-motion: reduce){ .stardust-build-mark{ animation:none; } }

/* A link to the Team page, added by the server only when admission by plan is on (mcp-server.js). */
.team-link { position: relative; z-index: 2; text-align: center; padding: 6px 16px 22px; }
.team-link a { color: var(--accent, #f3b58f); font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }