/* 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; }
/* A note, an address: several lines, same box as everything else. */
.field textarea {
  width: 100%; min-height: 84px; padding: 9px 11px; resize: vertical;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px;
  line-height: 1.5;
}
.field textarea:focus { outline: none; border-color: var(--accent); }
/* Picking one of a known list. The browser's own control, so the keyboard, the
   screen reader and a phone's native wheel all work without being rebuilt —
   painted to match the text boxes above it rather than left as the platform
   default, which is the only thing wrong with a select. */
.field select {
  width: 100%; height: 40px; padding: 0 34px 0 11px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--accent); }
.invent { margin-top: 8px; }
/* The sentence under a box: what scheme this card is, or that its digits do not
   add up. Never an error state on the field itself — the save is still allowed. */
.hint { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.hint.warn { color: var(--risk); }

/* --- the add menu -------------------------------------------------------- */
.add { position: relative; flex: 0 0 auto; }
.add > summary {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  list-style: none;
}
.add > summary::-webkit-details-marker { display: none; }
.add > summary::marker { content: ""; }
.add > summary:hover { background: var(--panel); }
.add[open] > summary { border-color: var(--accent); color: var(--accent); }
.add .menu {
  position: absolute; right: 0; top: 38px; z-index: 20; width: 262px;
  padding: 5px; display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
}
.add .choice {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 7px;
  background: none; color: var(--ink); text-align: left;
}
.add .choice:hover { background: var(--panel); }
.add .choice svg { color: var(--accent); flex: 0 0 auto; }
.add .choice .text { min-width: 0; display: block; }
.add .choice .label { display: block; font-size: 13.5px; }
.add .choice .sub {
  display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px;
}

.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); }

/* The one action in the vault that destroys something nobody can bring back.
   It must not look like the button that saves an item. */
.danger-card { border-color: color-mix(in srgb, var(--risk) 35%, var(--line)); }
button.danger {
  background: var(--risk); color: #fff; border: 0;
  padding: 10px 14px; border-radius: 8px; font: inherit; cursor: pointer;
}
button.danger:disabled { background: var(--panel); color: var(--muted); cursor: default; }
button.danger.small { padding: 7px 12px; font-size: 13px; }

/* The files on an item. A block rather than a card: it sits between the fields
   and the delete row, and a border here would make the form look like two
   forms. */
.files { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.files-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.files-head b { flex: 1; font-size: 12.5px; font-weight: 560; }
.files-head button.ghost { display: inline-flex; align-items: center; gap: 6px; }
.file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.file .text { min-width: 0; flex: 1; }
.file .name {
  font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file .sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.files .status { margin-top: 10px; line-height: 1.45; }
.files .hint { margin-top: 0; }
.files .room { margin-top: 10px; }

/* Three figures the server keeps, in Settings. The bar is a reading, not a
   control: only the server refuses anything, so this never turns red as though
   it had. */
.usage { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 12.5px; }
.usage > .muted { flex: 0 0 82px; }
.usage .figure { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar {
  flex: 1; min-width: 60px; height: 6px; border-radius: 3px;
  background: var(--panel); overflow: hidden;
}
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar-fill.full { background: var(--warn); }
/* Who can see one item. Same block shape as the files above it: a rule and a
   heading, not a bordered card, so the form still reads as one form. */
.shares { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.share {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.share .text { min-width: 0; flex: 1; }
.share .who { font-size: 13.5px; }
.share .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
/* Revoked and expired stay in the list, greyed: being able to confirm that you
   stopped something is worth more than a tidy list. */
.share.over .who { color: var(--muted); }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.shares .hint { margin-top: 10px; }
.shares .status { margin-top: 10px; line-height: 1.45; }
.composer { margin-top: 4px; }
.composer .field { margin-bottom: 10px; }

/* The twelve characters the whole feature rests on. Big, monospaced and
   selectable: it gets read down a phone line or pasted into a message. */
.fp-lead { font-size: 13px; font-weight: 560; margin: 14px 0 8px; }
.field-box.fp { padding: 10px 8px 10px 14px; }
.fingerprint {
  flex: 1; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 17px; letter-spacing: 0.12em; user-select: all;
}
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; cursor: pointer; }
.check input { margin-top: 2px; flex: 0 0 auto; }
.check b { display: block; font-size: 13.5px; font-weight: 500; }
.check .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* Not a sixth destination: it sits with the categories, because it changes what
   the panes show rather than being another place Alpha has. */
.shared-link { padding-top: 4px; }
.shared-link .cat svg { color: var(--muted); flex: 0 0 auto; }
.shared-link .cat.on svg { color: var(--accent); }

/* A shared item is read, never edited, so its values are text and not boxes. */
.readonly {
  flex: 1; padding: 0 4px 0 12px; font-size: 14px; min-width: 0;
  overflow-wrap: anywhere; white-space: pre-wrap;
}

/* Deleting one item, at the foot of the form that shows it.
   Not a card like the account one: an item is not an account, and a bordered
   panel around every login would make routine editing feel like defusing
   something. But separated by a rule and pushed to its own line, so it is never
   the thing next to Save that a fast hand reaches for. */
.danger-row {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end;
}
.danger-what { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.danger-what .status { max-width: 40em; text-align: right; line-height: 1.45; }