/* account.css — the dashboard's own, self-contained styles.
   ADR-009 (2026-07-22): the dashboard speaks the INSTALLER's visual language — the deep
   sage rail, cream paper, serif display headings with an italic accent, pill buttons —
   so setup and account feel like one maker's hand. Still deliberately calm, still NO
   ../styles.css dependency: this folder must publish standalone at account.locwinn.com. */

:root {
  --sage: #5c6b4e;
  --sage-deep: #4e5c42;
  --sage-ink: #f4f3ea;   /* text on the sage rail */
  --paper: #f7f5ec;      /* the installer's cream pane */
  --card: #fffef8;
  --ink: #26281f;
  --muted: #6d7062;
  --line: #e2dfd2;
  --ok: #2c6136;  --ok-bg: #edf4ee;
  --bad: #8a3030; --bad-bg: #f9f1f1;
  /* --serif is the ONE serif for the whole surface (owner 2026-07-27: font consistency with the
     notification popup). Georgia is the guaranteed-installed serif that the GDI popup is pinned to,
     so keeping the dashboard on the same face is what actually makes the two read as one voice. */
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--serif);   /* serif is the default voice, matching the popup */
}

/* Carve-outs kept in the sans face: functional/UI text where a serif would hurt legibility or
   feel out of place — controls, form fields, the monospace key, status chips, the rail nav, and
   the small uppercase eyebrow label. Everything else (headings, body copy, subtext, links) is
   serif. */
.license-chip, .rail-nav a, .eyebrow, .device-card h2 {
  font-family: var(--sans);
}
/* Buttons, inputs, and the license key pin their own sans/mono face in their rules below (they use
   `font: inherit`, which would otherwise re-inherit the serif body default). */

a { color: var(--sage-deep); }
/* Prose links in the reading pane take the popup's serif-italic underline, so a link on the
   dashboard is visibly the same gesture as the link in the notification (owner 2026-07-27). Colour
   and underline are left as they already were (sage in cards, muted in the footer), so this only
   changes the face — pill buttons and button-styled links keep the sans stack. */
.main a:not(.btn):not(.btn-link) { font-family: var(--serif); font-style: italic; }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* Fixed window, like the installer: the app fills the viewport exactly; the body never
   scrolls. If a section ever outgrows the pane (many devices), only the cream pane
   scrolls, thinly — the frame holds still. */
html, body { height: 100%; }
body { overflow: hidden; display: flex; flex-direction: column; }
#app { display: flex; flex: 1; min-height: 0; } /* flex, not 100vh: survives the DEV banner */

/* ---------- the sage rail (straight from the installer) ---------- */

.rail {
  width: 250px;
  flex-shrink: 0;
  color: var(--sage-ink);
  background: linear-gradient(160deg, #64734f 0%, #55644a 55%, #4a573f 100%);
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
}

/* The full logo (admin-supplied lockup), light variant for the sage rail. */
.lockup { margin-bottom: 44px; }
.lockup a { display: inline-block; } /* the logo is the way home */
.lockup img.logo-full { width: 100%; max-width: 128px; height: auto; display: block; opacity: 0.97; }

.rail-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sage-ink);
  text-decoration: none;
  opacity: 0.78;
  padding: 9px 0;
  font-size: 0.98rem;
}
.rail-nav a:hover { opacity: 1; }
.rail-nav a.active { opacity: 1; }
.rail-nav a .ring {
  width: 15px; height: 15px;
  border: 2px solid var(--sage-ink);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  opacity: 0.9;
  flex-shrink: 0;
}
.rail-nav a.active .ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--sage-ink);
  border-radius: 50%;
}

.rail-quote {
  margin-top: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  opacity: 0.85;
  line-height: 1.5;
}

.rail-foot {
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.rail-who {
  opacity: 0.9;
  width: 100%;            /* hard clamp: long emails ellipsize, never wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    /* full address sits in the title tooltip */
}
.rail-foot a { color: var(--sage-ink); }
.rail-foot button {
  font: inherit;
  font-family: var(--sans); /* controls stay sans even though the body default is now serif */
  font-size: 0.92rem;
  color: var(--sage-ink);
  background: transparent;
  border: 1px solid rgba(244, 243, 234, 0.6);
  border-radius: 999px;
  padding: 9px 26px;
  cursor: pointer;
  margin-top: 4px;
}
.rail-foot button:hover { border-color: var(--sage-ink); }

/* ---------- the cream pane ---------- */

.main { flex: 1; padding: 38px 52px 40px; max-width: 820px; overflow-y: auto; scrollbar-width: thin; }

.eyebrow {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 600;
}

h1 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2rem;
  margin: 6px 0 4px;
  line-height: 1.2;
}
h1 em { font-style: italic; }

/* The status line is the dashboard's equivalent of the popup's message — the one plain line that
   states where things stand — so it takes the same serif voice (owner 2026-07-27). */
.statusline { font-family: var(--serif); color: var(--muted); font-size: 0.98rem; margin: 0 0 20px; }
.statusline .dot-ok { color: var(--ok); }
.statusline .dot-bad { color: var(--bad); }

h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.25rem;
  margin: 6px 0 10px;
}

.panel .intro { margin: 0 0 12px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 12px;
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* buy-here prompt (empty-license state): each plan is a .row; a hairline separates them */
.buy-prompt p { margin: 8px 0; }              /* tighten the default 1em paragraph gaps */
.buy-prompt > p:first-child { margin-top: 0; } /* lead sits at the card's top padding, no extra gap */
.buy-plan { padding: 12px 0; }
.buy-plan + .buy-plan { border-top: 1px solid var(--line); }
.strong { font-weight: 600; }
.muted { color: var(--muted); font-size: 0.86rem; }
.editor-label { margin-bottom: 4px; }
ul { margin: 6px 0; padding-left: 20px; }
li { margin: 3px 0; }

/* ---------- pills / chips (JS renders .license-chip*) ---------- */

.license-chip {
  font-size: 0.72rem;
  font-weight: 400;   /* not bold (owner 2026-07-27): the active/expired tags read calmer unweighted */
  padding: 2px 9px;
  border-radius: 4px;   /* squared-off tag, not a pill (owner 2026-07-27: the roundness read as annoying) */
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.license-chip-active { color: var(--ok); background: var(--ok-bg); border-color: #cfe0d1; }
.license-chip-revoked, .license-chip-expired { color: var(--bad); background: var(--bad-bg); border-color: #e4cccc; }

/* ---------- the key ---------- */

.license-key-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
code.license-key {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 0.9rem;
  background: #f1efe3;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  letter-spacing: 0.04em;
  user-select: all;
}
.license-block + .license-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }

/* ---------- controls: installer-style pills ---------- */

button, .btn, .btn-link {
  font: inherit;
  font-family: var(--sans); /* controls stay sans even though the body default is now serif */
  font-size: 0.87rem;
  font-weight: 400;   /* not bold (owner 2026-07-27) */
  color: var(--ink);
  background: var(--card);
  border: 1px solid #bcb9a8;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover, .btn-link:hover { background: #f1efe3; }
button:disabled { opacity: 0.5; cursor: default; }

button.primary, .btn.primary, .btn-link.primary {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: #fff;
}
button.primary:hover, .btn.primary:hover, .btn-link.primary:hover { background: #42503a; }

button.link-danger {
  border: 0;
  background: none;
  padding: 0;
  color: var(--bad);
  text-decoration: underline;
  font-size: inherit;
  font-weight: inherit;
  /* Same serif-italic face as the other prose links so it doesn't read as a foreign element beside
     them; the red colour still marks it as the destructive one. */
  font-family: var(--serif);
  font-style: italic;
}
button.link-danger:hover { background: none; }

input[type="number"], input[type="text"], select {
  font: inherit;
  font-family: var(--sans); /* controls stay sans even though the body default is now serif */
  font-size: 0.86rem;
  padding: 8px 12px;
  border: 1px solid #bcb9a8;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  max-width: 100%;
}
input[type="number"] { width: 6.2em; }

/* ---------- delete-account: typed confirmation (owner 2026-07-27) ---------- */

/* A destructive, server-irreversible action gets a type-to-confirm gate, not a one-click
   button: the owner must type the exact phrase before "Delete permanently" un-disables. */
.delete-confirm { margin-top: 12px; }
.delete-confirm .delete-phrase {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  color: var(--bad);
}
#delete-confirm-input { width: 15em; }

button.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
button.danger:hover { background: #75282a; }
button.danger:disabled { background: var(--bad); border-color: var(--bad); color: #fff; opacity: 0.45; }

.inline, .delay-custom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.actions { margin-top: 12px; }

/* ---------- device rows (JS renders .card.device-card; styled as rows in one card) ---------- */

#device-list > .card.device-card {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 15px 0 13px;
  margin: 0;
  border-top: 1px solid var(--line);
}
#device-list > .card.device-card:first-child { border-top: 0; padding-top: 2px; }
.device-card h2 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.device-card p { margin: 6px 0; }
.license-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.device-removed { opacity: 0.62; } /* greyed out: confirmed uninstall, kept as history */
.device-removed h2 { color: var(--muted); }

/* ---------- fine print + page foot ---------- */

.fine {
  color: var(--muted);
  font-size: 0.79rem;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin: 14px 0 0;
}
.fine a { color: var(--muted); }
.pagefoot { color: var(--muted); font-size: 0.78rem; margin-top: 40px; }
.pagefoot a { color: var(--muted); }

/* resend deep-link (installer's /resend path) draws the eye here */
.account-pulse { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* ---------- small screens: the rail becomes a top bar ---------- */

@media (max-width: 720px) {
  #app { flex-direction: column; }
  .rail {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    overflow-x: auto;
  }
  .lockup { margin: 0; gap: 8px; }
  .lockup img { width: 24px; height: 24px; }
  .lockup span { font-size: 1.2rem; }
  .rail-nav { display: flex; gap: 14px; margin-left: auto; }
  .rail-nav a { padding: 4px 0; font-size: 0.88rem; white-space: nowrap; }
  .rail-nav a .ring { display: none; }
  .rail-quote, .rail-who { display: none; }
  .rail-foot { margin: 0 0 0 10px; flex-direction: row; align-items: center; }
  .main { padding: 24px 18px 48px; }
  h1 { font-size: 1.7rem; }
  .lockup img.logo-full { max-width: 120px; }
}