/* Virtuad Local — one stylesheet, mobile first.
   Warm, plain, and quiet: this is a tool a landscaper opens between job sites, not an operator
   console. Light and dark are both defined explicitly; neither is inherited. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --line: #e6e2db;
  --ink: #1e1c1a;
  --ink-soft: #5d5852;
  --ink-faint: #8b857d;
  --accent: #1f6f5c;
  --accent-ink: #ffffff;
  --good: #1f6f5c;
  --good-bg: #e6f2ee;
  --warn: #8a6100;
  --warn-bg: #fbf1dc;
  --bad: #a02c2c;
  --bad-bg: #fbe9e9;
  --neutral-bg: #eeece8;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(30, 28, 26, .06), 0 4px 16px rgba(30, 28, 26, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16151400;
    --bg: #161514;
    --surface: #201e1c;
    --line: #34302c;
    --ink: #f2efea;
    --ink-soft: #b9b2a9;
    --ink-faint: #8d857b;
    --accent: #5fbfa2;
    --accent-ink: #10201b;
    --good: #5fbfa2;
    --good-bg: #17302a;
    --warn: #e0b463;
    --warn-bg: #33290f;
    --bad: #e78b8b;
    --bad-bg: #3a1d1d;
    --neutral-bg: #2a2724;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* The lead form's honeypot. Off-screen rather than display:none — some bots skip hidden fields,
   which would defeat the point of having it. aria-hidden and tabindex keep it away from people. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ shell -- */
.topbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
/* THE HEADER LOCKUP. Social and Accounting hang the wordmark down a vertical sidebar, where 196px
   of it fits naturally; this app's shell is a horizontal bar, so the same two pieces sit side by
   side instead of stacked. The white card is the same device as on the sign-in page and for the
   same reason: the wordmark is dark artwork and the topbar surface is dark under a dark theme. */
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; background: #fff; border-radius: 8px; padding: 5px 8px; box-shadow: 0 1px 2px rgba(16,32,42,.08); }
.brand-logo img { display: block; width: 130px; height: auto; }
.brand span { color: var(--accent); }
.brand.big { font-size: 1.9rem; margin: 0 0 .2rem; }
.mainnav { display: flex; gap: .25rem; overflow-x: auto; flex: 1 1 100%; order: 3; }
.mainnav a {
  padding: .45rem .6rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); white-space: nowrap; font-size: .95rem;
}
.mainnav a:hover { background: var(--neutral-bg); color: var(--ink); }
.topright { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.bell { position: relative; text-decoration: none; font-size: 1.1rem; }
.bell .dot {
  position: absolute; top: -6px; right: -8px; background: var(--bad); color: #fff;
  border-radius: 999px; font-size: .7rem; padding: 0 .35rem; line-height: 1.4;
}
.loc-switch { display: flex; gap: .35rem; flex: 1 1 100%; order: 4; }
.loc-switch select { flex: 1; min-width: 0; }
.loc-switch button { padding: .5rem .8rem; }
.linky { white-space: nowrap; background: none; border: 0; color: var(--ink-soft); cursor: pointer; font: inherit; padding: .3rem; }
.linky:hover { color: var(--ink); text-decoration: underline; }

main { max-width: 860px; margin: 0 auto; padding: 1.1rem 1rem 4rem; }
h1 { font-size: 1.55rem; letter-spacing: -.02em; margin: .4rem 0 .2rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.sub { color: var(--ink-soft); margin: 0 0 1.2rem; }

.pagefoot {
  display: flex; justify-content: space-between; gap: 1rem; max-width: 860px;
  margin: 0 auto; padding: 1rem; color: var(--ink-faint); font-size: .85rem;
}

/* ------------------------------------------------------------------ cards -- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin: 0 0 1rem; box-shadow: var(--shadow);
}
.card footer { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }

.stack > * + * { margin-top: .6rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }

.bignum { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; margin: .2rem 0; }
.bignum span { font-size: 1.1rem; font-weight: 500; color: var(--ink-faint); }
.bignum em { font-size: 1rem; font-style: normal; margin-left: .5rem; }
.bignum .up { color: var(--good); }
.bignum .down { color: var(--bad); }

.diagram svg { width: 100%; height: auto; border-radius: 10px; }
.diagram-bg { fill: var(--neutral-bg); }
.dot-competitor { fill: var(--ink-faint); }
.dot-home { fill: var(--accent); }
.dot-label { fill: var(--ink-soft); font-size: 11px; font-family: inherit; }
.dot-label-home { fill: var(--accent); font-weight: 700; }

ol.plan { margin: 0; padding-left: 1.4rem; }
ol.plan li { padding: .8rem 0; border-top: 1px solid var(--line); }
ol.plan li:first-child { border-top: 0; }
ol.plan li::marker { font-weight: 700; color: var(--accent); }

.post-preview {
  white-space: pre-wrap; font-size: 1.05rem; line-height: 1.6;
  background: var(--neutral-bg); padding: .9rem 1rem; border-radius: 10px;
}

.unknown {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem;
  background: var(--neutral-bg); border-radius: 10px; margin: .4rem 0;
}
.unknown span { color: var(--ink-soft); font-size: .9rem; }

/* ----------------------------------------------------------------- badges -- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-good { background: var(--good-bg); color: var(--good); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-neutral { background: var(--neutral-bg); color: var(--ink-soft); }

.banner { padding: .8rem 1rem; margin: 0; font-size: .95rem; }
.banner-alert { background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid var(--line); }
.banner-alert a { color: inherit; }
/* The same shape in the warning colours, for a trial that is running out rather than one that has.
   Both tokens already carry a light and a dark definition, so this inherits the theme handling.

   IT DOES NOT INHERIT A TEST. The first version of this comment said it carried "the contrast the
   stylesheet tests enforce" — there are no contrast tests in this repository. That claim is true of
   the sibling Social app and was imported here from memory rather than from the tree, which is
   exactly the kind of borrowed fact a comment should never assert. Measured instead: 4.94:1 in
   light, 7.43:1 in dark, both above the 4.5:1 that WCAG AA asks for body text. */
.banner-warn { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--line); }
.banner-warn a { color: inherit; }

.alert { background: var(--bad-bg); color: var(--bad); padding: .7rem .85rem; border-radius: 10px; }
.notice { background: var(--good-bg); color: var(--good); padding: .7rem .85rem; border-radius: 10px; }

/* ------------------------------------------------------------------ lists -- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: .8rem 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.row-title { font-weight: 600; }
.row-meta { color: var(--ink-soft); font-size: .88rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------------------------------------ forms -- */
form { margin: 0; }
label { display: block; font-weight: 600; margin: .8rem 0 .25rem; font-size: .92rem; }
input, select, textarea {
  width: 100%; padding: .62rem .7rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
button {
  font: inherit; font-weight: 600; padding: .62rem 1rem; border-radius: 10px;
  border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  min-height: 44px;   /* a thumb, not a mouse pointer */
}
button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.danger { background: var(--bad); color: #fff; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.actions form { display: inline; }

/* ---------------------------------------------------------------- sign in -- */
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.signin { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow); }
.signin form button { width: 100%; margin-top: 1.1rem; }
.tagline { color: var(--ink-soft); margin: 0 0 1.2rem; text-align: center; }

/* THE SIGNED-OUT LOCKUP, the same one Social and Accounting use: the parent wordmark on white, the
   product name under it. The wordmark is a dark PNG, so it keeps its own white card rather than
   sitting on the page background — which is what lets the identical file work on both themes. */
.login-logo { background: #fff; border-radius: 12px; padding: 14px 18px; margin: 0 auto 1rem; box-shadow: var(--shadow); max-width: 260px; }
.login-logo img { display: block; width: 100%; height: auto; margin: 0 auto; }
.login-product { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: .82rem; font-weight: 600; color: var(--accent); margin: 0 0 .5rem; }

@media (min-width: 700px) {
  .mainnav { flex: 1 1 auto; order: 0; }
  .loc-switch { flex: 0 1 auto; order: 0; margin-left: auto; }
  .loc-switch select { max-width: 170px; }
  .topright { margin-left: .5rem; }
  h1 { font-size: 1.85rem; }
}