/* The same tokens as the phone, the Mac app and the extension popup.
   Copied rather than imported: the extension ships its own CSS from its own
   origin, and a page that reached across for it would be loading vault UI from
   somewhere this page cannot see. If these drift, the palette test on the JVM
   is the one that decides which is right. */
:root {
  --ground: #f4f5f7;
  --surface: #fbfbfc;
  --panel: #e6eaef;
  --ink: #12161c;
  --muted: #5f6772;
  --line: #dce1e8;
  --edge: #b8c0ca;
  --accent: #1f4e79;
  --on-accent: #ffffff;
  --ok: #14622b;
  --warn: #96590a;
  --risk: #a3000b;

  --c-money: #1f6b4e;  --c-email: #2b55a0;    --c-social: #743d86;
  --c-shopping: #9d5526; --c-media: #8a2f4a;  --c-work: #3a5668;
  --c-travel: #1a6874; --c-home: #64562c;     --c-health: #9a3838;
  --c-gov: #464667;    --c-none: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0e12;
    --surface: #0e1217;
    --panel: #181d24;
    --ink: #e7e9ec;
    --muted: #98a1ad;
    --line: #262d36;
    --edge: #414956;
    --accent: #e0a458;
    --on-accent: #241b0c;
    --ok: #6fcf8e;
    --warn: #e0a458;
    --risk: #e0685f;

    --c-money: #5bbd90;  --c-email: #7ba4e8;   --c-social: #c08bd4;
    --c-shopping: #e0996a; --c-media: #e07f9b; --c-work: #8cabc1;
    --c-travel: #5cb8c4; --c-home: #c3b070;    --c-health: #e08585;
    --c-gov: #9a9ad0;    --c-none: #9aa3ae;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--ground);
}
#app { height: 100%; display: flex; flex-direction: column; }
.loading { color: var(--muted); padding: 24px; }

/* --- sign in ------------------------------------------------------------ */
/* One column, centred, at the phone's measure. The three panes are the signed-in
   view; a sign-in screen stretched across a 27-inch display is a form with the
   password field a foot from the email field. */
.signin {
  margin: auto;
  width: 100%;
  max-width: 360px;
  padding: 32px 26px 64px;
}
.wordmark { font-size: 28px; font-weight: 640; letter-spacing: -0.015em; }
.promise {
  font-size: 15px; line-height: 1.45; color: var(--muted);
  margin-top: 10px;
}
.fields { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; height: 48px; padding: 0 13px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 15px;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input[type="password"] {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.18em;
}
/* The recovery key being typed *back in*, off the sheet of paper it was copied
   onto. Same face as the one that showed it, so 0/O and 1/l cannot be argued
   about — and no letter-spacing, because seven groups of four is already as
   wide as the field goes. */
.field input.mono {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

button {
  font: inherit; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
button:disabled { cursor: default; opacity: 0.55; }
.signin button.primary {
  height: 50px; margin-top: 8px; width: 100%;
  border: none; background: var(--accent); color: var(--on-accent);
  font-size: 16px; font-weight: 560;
}

.note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.note strong { color: var(--ink); font-weight: 560; }
.error {
  margin-top: 16px; padding: 11px 13px;
  border: 1px solid var(--risk); border-radius: 8px;
  color: var(--risk); font-size: 13px;
}

/* --- the three panes ----------------------------------------------------- */
/* Rail, list, detail. Nothing folds: the phone folds because it is narrow. */
body.in { overflow: hidden; }
body.in #app {
  display: grid; grid-template-columns: 232px 1fr; grid-template-rows: 100%;
  height: 100%; min-height: 0;
}

.rail {
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto;
}
.brand {
  padding: 16px 16px 12px;
  font-size: 17px; font-weight: 620; letter-spacing: -0.01em;
}
.destinations { padding: 0 8px; display: flex; flex-direction: column; gap: 1px; }
.dest {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 8px; border: none; background: none;
  border-radius: 7px; color: var(--ink); font-size: 13.5px; text-align: left;
}
.dest svg { color: var(--muted); flex: 0 0 auto; }
.dest span { flex: 1; }
.dest:hover { background: var(--panel); }
.dest.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dest.on svg { color: var(--accent); }
/* The only number in Alpha that means "do something". */
.count {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px;
  border-radius: 999px; background: var(--risk); color: var(--surface);
  font-size: 11px; font-weight: 600; text-align: center;
}

.categories { padding: 16px 8px 8px; }
.rail-label {
  padding: 0 8px 6px; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.cat {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 8px; border: none; background: none;
  border-radius: 7px; color: var(--ink); font-size: 13px; text-align: left;
}
.cat:hover { background: var(--panel); }
.cat.on { background: var(--panel); }
.cat .dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.cat .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat .n { color: var(--muted); font-size: 12px; }

.account {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.avatar {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.who { min-width: 0; line-height: 1.25; }
.who b { display: block; font-size: 12.5px; font-weight: 500; }
.who span {
  display: block; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.frame { min-width: 0; display: grid; grid-template-columns: 1fr; overflow: hidden; }
.frame.two { grid-template-columns: minmax(260px, 340px) 1fr; }

.pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-list { border-right: 1px solid var(--line); }
.pane-detail, .pane-wide { background: var(--ground); }
.pane-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); min-height: 52px;
}
.pane-head h1 { margin: 0; font-size: 15px; font-weight: 560; }
.pane-head .spacer { flex: 1; }
.made.prose { font-family: inherit; font-size: 13px; text-align: left; color: var(--muted); }
.pane-head input[type="search"] {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 13px;
}
.pane-head input[type="search"]:focus { outline: none; border-color: var(--accent); }

.rows { flex: 1; min-height: 0; overflow-y: auto; }
.row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 14px; border: none; border-radius: 0;
  background: none; color: var(--ink); text-align: left;
}
.row:not(.static):hover { background: var(--panel); }
.row.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.badge {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center;
  font: 600 12px/1 ui-monospace, Menlo, monospace;
  background: var(--panel); color: var(--c-none);
}
.row .text { min-width: 0; flex: 1; }
.row .title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.empty { padding: 22px 16px; color: var(--muted); font-size: 13px; max-width: 40em; }

/* --- one-time codes ------------------------------------------------------ */
.code { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.digits {
  font: 400 14px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em; color: var(--accent);
}
.code.large .digits { font-size: 19px; }
.digits.expiring { color: var(--risk); }
.ring { flex: 0 0 auto; }
.ring-track { fill: none; stroke: var(--edge); stroke-width: 2.5; }
.ring-arc {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear;
}
.ring.expiring .ring-arc { stroke: var(--risk); }

/* --- the item ------------------------------------------------------------ */
.form, .checkup, .generator, .settings, .groups {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px 32px; max-width: 620px;
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.field input {
  width: 100%; height: 40px; padding: 0 11px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px;
}
.field input[type="password"] { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.14em; }
.field input:focus { outline: none; border-color: var(--accent); }
.field-box {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.field-box input { border: none; background: none; height: 38px; }
.field-box input:focus { border: none; }
.field-box > .code { padding-left: 12px; }
button.icon {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: none; background: none; color: var(--accent); border-radius: 7px;
}
button.icon:hover { background: var(--surface); }
.copy { display: inline-flex; align-items: center; gap: 6px; }
.flash { font-size: 11px; color: var(--muted); }

.actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
button.primary {
  height: 38px; padding: 0 18px; border: none;
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 560; border-radius: 8px;
}
button.ghost {
  height: 38px; padding: 0 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 14px; border-radius: 8px;
}
button.ghost.small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.pane-head button.ghost { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.status { font-size: 12.5px; color: var(--muted); }
.status.ok { color: var(--ok); }
.status.bad { color: var(--risk); }
.gap { margin-top: 22px; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 46em; }
.muted { color: var(--muted); font-size: 13px; }

/* --- authenticator ------------------------------------------------------- */
.groups { max-width: 700px; }
.group + .group { margin-top: 22px; }
.group h2 {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.row.static { padding-left: 0; padding-right: 0; }
.row.static + .row.static { border-top: 1px solid var(--line); }

/* --- checkup ------------------------------------------------------------- */
.score { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; }
.number { font-size: 30px; font-weight: 600; line-height: 1.1; }
.number small { font-size: 15px; font-weight: 400; color: var(--muted); }
.arc-track { fill: none; stroke: var(--edge); stroke-width: 4.5; }
.arc-fill { fill: none; stroke: var(--warn); stroke-width: 4.5; stroke-linecap: round; }
.arc.clean .arc-fill { stroke: var(--ok); }
.findings { display: flex; flex-direction: column; gap: 9px; }
.finding { padding: 13px 14px; background: var(--panel); border-radius: 11px; }
.finding .headline { font-size: 13.5px; font-weight: 500; }
.finding .headline.risk { color: var(--risk); }
.finding .headline.warn { color: var(--warn); }
.finding .named { margin-top: 5px; font-size: 12.5px; color: var(--accent); }

/* --- generator ----------------------------------------------------------- */
.made {
  padding: 18px 14px; border-radius: 10px; background: var(--panel);
  font: 400 18px/1.4 ui-monospace, Menlo, monospace;
  text-align: center; word-break: break-all;
}
.made.refused {
  background: color-mix(in srgb, var(--risk) 18%, transparent);
  font-family: inherit; font-size: 14px; text-align: left;
}
.strength { display: flex; align-items: center; gap: 12px; margin: 12px 0 20px; }
.bar { flex: 1; height: 5px; border-radius: 999px; background: var(--edge); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.bar.warn span { background: var(--warn); }
.bar.risk span { background: var(--risk); }
.reading { font-size: 12.5px; color: var(--ok); white-space: nowrap; }
.reading.warn { color: var(--warn); }
.reading.risk { color: var(--risk); }
.length { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, monospace; color: var(--ink); }
input[type="range"] { width: 100%; margin: 6px 0 14px; accent-color: var(--accent); }
.toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; font-size: 13.5px;
}
.toggle input { accent-color: var(--accent); margin-top: 2px; }
.toggle small { display: block; font-size: 11.5px; color: var(--muted); }

/* --- settings ------------------------------------------------------------ */
.line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.settings h2 { margin: 26px 0 10px; font-size: 13px; font-weight: 560; }
.note-card { padding: 12px 14px; background: var(--panel); border-radius: 10px; margin-bottom: 9px; }
.note-card b { font-size: 13px; font-weight: 560; }
.note-card p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* --- narrow windows ------------------------------------------------------ */
/* The Mac app never folds, because a Mac window is never 600 points wide. A
   browser window is whatever the person dragged it to, so this does the two
   things that keep three panes usable rather than squashed: the rail loses its
   words before its destinations, and below that the panes stack instead of
   competing for a column each. */
@media (max-width: 1000px) {
  body.in #app { grid-template-columns: 54px 1fr; }
  .brand { font-size: 0; padding: 16px 0 12px; text-align: center; }
  .brand::first-letter { font-size: 17px; }
  .dest { justify-content: center; padding: 9px 0; }
  .dest span { display: none; }
  .categories, .who { display: none; }
  .account { justify-content: center; padding: 12px 0; }
  .frame.two { grid-template-columns: minmax(200px, 260px) 1fr; }
}

@media (max-width: 760px) {
  .frame.two { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 38vh) 1fr; }
  .pane-list { border-right: none; border-bottom: 1px solid var(--line); }
}

/* --- import and export --------------------------------------------------- */
.transfer { margin-top: 22px; }
.transfer h2 { margin: 0 0 5px; font-size: 13px; font-weight: 560; }
.transfer p.muted { margin: 0 0 10px; max-width: 46em; }
.transfer input[type="file"] { font: inherit; font-size: 12.5px; color: var(--muted); }
.report { margin-top: 10px; font-size: 12.5px; }
.report .tally { font-size: 13.5px; }
.report .muted { font-size: 12px; margin-top: 3px; }
.report .skipped { margin-top: 3px; color: var(--warn); }
.report .status { margin-top: 8px; max-width: 46em; line-height: 1.5; }
.status.warn { color: var(--warn); }

/* --- the notice line ----------------------------------------------------- */
.middle { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.middle .frame { flex: 1; min-height: 0; }
.notice {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5;
}
.notice.warn { color: var(--warn); }
.notice.bad { color: var(--risk); }

/* --- making an account --------------------------------------------------- */
button.ghost.wide { width: 100%; height: 46px; margin-top: 2px; }
button.link {
  float: right; border: none; background: none; padding: 0;
  color: var(--accent); font: inherit; font-size: 11.5px;
}
.recovery { max-width: 400px; }
/* Grouped and spaced out: this gets copied onto paper by hand. */
.keyblock {
  margin: 22px 0 14px; padding: 20px 14px;
  background: var(--panel); border-radius: 12px;
  font: 17px/1.9 ui-monospace, Menlo, monospace;
  letter-spacing: 2px; text-align: center;
}
.recovery .actions { display: flex; gap: 10px; }
.recovery .actions button { flex: 1; }
.recovery .toggle { margin: 20px 0 14px; align-items: flex-start; }
.recovery button.primary { width: 100%; height: 46px; }

/* The three gates on the recovery screen. A list, not a spinner: they open in
   any order and at wildly different speeds, and which one you are waiting on is
   the only actionable fact on the screen. */
.gates { margin: 18px 0 8px; }
.gate {
  display: flex; align-items: center; gap: 12px; min-height: 36px;
  font-size: 14px; color: var(--muted);
}
.gate.done { color: var(--ink); }
.gate .tick { width: 16px; text-align: center; }
.gate.done .tick { color: var(--ok, #3fa66a); }

/* Somebody is waiting on a click from this browser. Above the panes, because it
   is the one thing on this screen that expires. */
.approvals { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.approvalrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; font: inherit; font-size: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; color: var(--muted); cursor: pointer;
}
.approvalrow:hover { border-color: var(--accent); }