/* Task Hub's pages, including the OAuth sign-in page, in the Native look of the MCP app's views
   (internal/ui/board.css): the colour values those views fall back to when
   the host sends none, the same type, the hairline card, the mono labels.
   Unlike a view, a page is not inside a host, so it paints its own
   background. Every colour is a token, a light-dark() pair. */
:root {
  --th-bg: light-dark(#FAF9F5, #1F1E1D);
  --th-text: light-dark(#141413, #FAF9F5);
  --th-muted: light-dark(#73726C, #9C9A92);
  --th-line: light-dark(rgb(31 30 29 / .15), rgb(222 220 209 / .15));
  --th-control: light-dark(rgb(31 30 29 / .40), rgb(222 220 209 / .40));
  --th-ring: light-dark(rgb(20 20 19 / .7), rgb(250 249 245 / .7));
  --th-accent: light-dark(#6D4AE0, #A68BFF);
  --th-on-accent: light-dark(#FFFFFF, #141413);
  --th-accent-soft: light-dark(rgb(109 74 224 / .16), rgb(166 139 255 / .22));
  --th-danger: light-dark(#B42318, #F97066);
  --th-on-danger: light-dark(#FFFFFF, #141413);
  --th-warn-bg: light-dark(#FBF3E6, rgb(229 166 76 / .10));
  --th-warn-line: light-dark(#E9CFA3, rgb(229 166 76 / .35));
  --th-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --th-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--th-bg); }
body {
  margin: 0; min-height: 100vh; padding: 12vh 16px 48px;
  color: var(--th-text); font: 400 14px/20px var(--th-font); -webkit-font-smoothing: antialiased;
}

/* The card: a hairline border on the page, nothing painted inside. */
.th { max-width: 440px; margin: 0 auto; padding: 18px 24px 22px; border: 1px solid var(--th-line); border-radius: 12px; }

/* The brand line: the views' section label, a mono caps word and a rule. */
.th-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.th-brand a { font: 600 11px/16px var(--th-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--th-text); text-decoration: none; }
.th-brand::after { content: ""; flex: 1; height: 1px; background: var(--th-line); }

h1 { margin: 0 0 8px; font: 600 20px/26px var(--th-font); letter-spacing: -.005em; }
h2 { margin: 24px 0 8px; font: 600 15px/20px var(--th-font); }
p { margin: 0 0 12px; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code { font: 400 12px/16px var(--th-mono); padding: 1px 4px; border-radius: 4px; background: var(--th-line); overflow-wrap: anywhere; }
.th-muted { color: var(--th-muted); }
.th-foot { margin: 18px 0 0; font-size: 12px; line-height: 16px; color: var(--th-muted); }

/* Forms. */
label, .th-label { display: block; margin: 18px 0 6px; font: 600 11px/16px var(--th-mono); letter-spacing: .08em; text-transform: uppercase; }
input[type="email"], input[type="text"], input[type="password"] {
  display: block; width: 100%; height: 40px; padding: 0 12px;
  font: 400 15px/20px var(--th-font); color: var(--th-text); background: transparent;
  border: 1px solid var(--th-control); border-radius: 8px;
}
input::placeholder { color: var(--th-muted); }
input[type="email"]:focus-visible, input[type="text"]:focus-visible, input[type="password"]:focus-visible {
  outline: none; border-color: var(--th-accent); box-shadow: 0 0 0 3px var(--th-accent-soft);
}
button { font: inherit; cursor: pointer; }
.th-primary, .th-danger {
  display: block; width: 100%; height: 40px; margin-top: 16px; padding: 0 16px;
  font: 600 14px/20px var(--th-font); border: 0; border-radius: 8px;
}
.th-primary { color: var(--th-on-accent); background: var(--th-accent); }
a.th-primary { line-height: 40px; text-align: center; text-decoration: none; }
.th-danger { color: var(--th-on-danger); background: var(--th-danger); }
.th-primary:hover, .th-danger:hover { filter: brightness(1.08); }
.th-primary:disabled, .th-danger:disabled { cursor: default; filter: none; opacity: .6; }
.th-secondary { display: block; margin-top: 4px; padding: 12px 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--th-muted); }
.th-secondary:hover { color: var(--th-text); }

/* Notices: a refusal, and the warning before regenerating. */
.th-error { padding: 10px 12px; border-radius: 8px; color: var(--th-danger); border: 1px solid var(--th-danger); }
.th-warn { padding: 12px 14px; border: 1px solid var(--th-warn-line); border-radius: 8px; background: var(--th-warn-bg); }
.th-warn strong { display: block; margin-bottom: 2px; }
.th-warn p { margin: 0; }

/* A secret with its copy button. The value wraps rather than hides, and
   one click selects all of it, for copying by hand when the clipboard is
   unavailable. */
.th-secret { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--th-control); border-radius: 8px; }
.th-value {
  flex: 1; min-width: 0; padding: 6px 0; border-radius: 0; background: none;
  font: 400 13px/20px var(--th-mono); color: var(--th-text); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.th-copy {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--th-muted); transition: color .15s, background-color .15s;
}
.th-copy:hover { color: var(--th-text); background: var(--th-line); }
.th-copy svg { width: 16px; height: 16px; }
.th-copy .th-done { display: none; color: var(--th-accent); }
.th-copy.copied .th-idle { display: none; }
.th-copy.copied .th-done { display: block; }
.th-status { min-height: 16px; margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--th-muted); }

/* The connect steps under the token. */
.th-steps { margin: 0 0 12px; padding-left: 20px; }
.th-steps li { margin: 0 0 6px; }
.th-steps li::marker { color: var(--th-muted); font: 400 12px var(--th-mono); }
.th-rule { height: 1px; margin: 22px 0 0; border: 0; background: var(--th-line); }

:focus-visible { outline: 2px solid var(--th-ring); outline-offset: 2px; }

@media (max-width: 480px) {
  body { padding-top: 24px; }
  .th { padding: 16px 18px 20px; }
}

/* Touch: fields and buttons grow to 44px, and the copy button answers to
   a 44px square. */
@media (pointer: coarse) {
  input[type="email"], input[type="text"], input[type="password"], .th-primary, .th-danger { height: 44px; }
  a.th-primary { line-height: 44px; }
  .th-copy::before { content: ""; position: absolute; inset: -6px; }
}

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