/* ============================================================================
   BB84 VAULT / COMPONENTS
   Every component owns its own size and spacing. A screen may place a
   component but may never adjust one: if a component is the wrong size in
   some context, the fix belongs here, not on the screen.

   The first half is the CRM's own components, value for value, so the chrome,
   the buttons, the fields and the rows are the same things in both. The second
   half is what the vault adds, built from the same tokens.
   ========================================================================= */

/* --- status strip -------------------------------------------------------- */
.c-status{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; row-gap:var(--space-1);
  padding:var(--space-2) var(--space-5);
  background:#070709;
  font-family:var(--font-figure);
  font-size:var(--size-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-3);
}
.c-status__live{ color:var(--accent-bright) }
.c-status__dot{
  display:inline-block; width:6px; height:6px; margin-left:var(--space-2);
  border-radius:var(--radius-pill); background:var(--accent-bright);
  vertical-align:middle;
}

/* --- masthead ------------------------------------------------------------ */
.c-masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); flex-wrap:wrap; row-gap:var(--space-4);
  padding:var(--space-5) var(--space-6);
}
.c-masthead__mark{ height:56px; width:auto; flex:none }
.c-masthead__side{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
  min-width:0;
}

/* --- a control with its label beside it ------------------------------------
   For a list that needs a word to say what it is, such as which secret you
   are checking in Admin. */
.c-inlinelabel{
  display:inline-flex; align-items:center; gap:var(--space-3); min-width:0;
  font-size:var(--size-label); color:var(--text-3); white-space:nowrap;
}

/* --- menu bar ------------------------------------------------------------ */
.c-menubar{
  display:flex; align-items:center; gap:var(--space-3);
  flex-wrap:wrap; row-gap:var(--space-2);
}
.c-menubar__item{
  border:.5px solid var(--hairline);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
  font-size:var(--size-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-2);
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-menubar__item:hover{ border-color:var(--accent-edge); color:var(--text-1) }
.c-menubar__item[aria-current="page"]{
  border-color:var(--accent-edge); background:var(--accent-wash); color:var(--accent-bright);
}

/* --- page heading --------------------------------------------------------
   What the screen is, where things stand, and what you can do about it, with
   the line saying what the screen is for underneath. */
.c-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  padding:var(--space-5) var(--space-6) var(--space-3);
}
.c-heading__title{ grid-row:1; grid-column:1 }
.c-heading__meters{ grid-row:1; grid-column:2 }
.c-heading__aside{ grid-row:1; grid-column:3 }
.c-heading__lede{ grid-row:2; grid-column:1 / -1 }
.c-heading__title{
  margin:0;
  font-family:var(--font-identity);
  font-size:var(--size-title);
  font-weight:var(--weight-heavy);
  letter-spacing:var(--track-identity);
  text-transform:uppercase;
  line-height:var(--line-tight);
}
.c-heading__meters{ display:flex; gap:var(--space-3); flex-wrap:wrap; justify-self:center }
.c-heading__aside{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
  font-size:var(--size-small); color:var(--text-2);
  justify-self:end;
}
@media (max-width:900px){
  .c-heading{ grid-template-columns:minmax(0,1fr) }
  .c-heading__title,.c-heading__meters,.c-heading__aside,.c-heading__lede{
    grid-row:auto; grid-column:1;
  }
  .c-heading__meters{ justify-self:start }
  .c-heading__aside{ justify-self:start; justify-content:flex-start }
}

/* --- meter --------------------------------------------------------------- */
.c-meter{
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-5);
  text-align:center;
  min-width:0;
}
.c-meter__value{
  font-size:var(--size-title); font-weight:var(--weight-strong);
  font-family:var(--font-figure); line-height:var(--line-tight);
}
.c-meter--accent .c-meter__value{ color:var(--accent-bright) }
.c-meter--danger .c-meter__value{ color:var(--danger) }
.c-meter__value--words{
  font-family:var(--font-body);
  font-size:var(--size-heading);
  font-weight:var(--weight-regular);
  line-height:var(--line-body);
}
.c-meter__label{
  margin-top:var(--space-1);
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3);
}

/* --- field --------------------------------------------------------------- */
.c-input,.c-select{
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-4);
  font-size:var(--size-small);
  color:var(--text-1);
  min-width:0; max-width:100%;
  transition:border-color var(--motion-fast) var(--motion-ease);
}
.c-input::placeholder{ color:var(--text-3) }
.c-input:focus,.c-select:focus{ outline:none; border-color:var(--accent-edge) }
.c-input--search{ flex:1 1 220px; max-width:420px }
.c-input--search::-webkit-search-cancel-button{ -webkit-appearance:none }
.c-select{
  appearance:none; -webkit-appearance:none;
  padding-right:var(--space-8);
  color:var(--text-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F0F0EC' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right var(--space-4) center;
}
.c-select option{ background:var(--ink); color:var(--text-1) }

/* --- tag ----------------------------------------------------------------- */
.c-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); row-gap:var(--space-2); min-width:0 }
.c-tag{
  display:inline-flex; align-items:center;
  background:transparent;
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-3);
  font-family:inherit;
  font-size:var(--size-micro); line-height:var(--line-body); color:var(--text-3);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.c-tag--row{ padding:var(--space-2) var(--space-4); font-size:var(--size-label) }
.c-tag--warn{ border-color:rgba(224,112,122,.3); color:var(--danger) }
.c-tag--on{
  border-color:var(--accent-edge);
  background:var(--accent-wash);
  color:var(--accent-bright);
  font-weight:var(--weight-strong);
}
/* A tag you press to switch something on or off: membership of a group. It is
   a pill like every other tag, and says which state it is in by being the
   active cyan or not. */
button.c-tag{
  cursor:pointer;
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
button.c-tag:hover{ border-color:var(--accent-edge); color:var(--text-1) }
button.c-tag--on:hover{ color:var(--accent-bright) }
button.c-tag:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }

/* --- button -------------------------------------------------------------- */
.c-btn{
  border:.5px solid var(--hairline);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-5);
  font-size:var(--size-small);
  font-weight:var(--weight-strong);
  color:var(--text-2);
  white-space:nowrap;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-btn:hover{ border-color:var(--accent-edge); color:var(--text-1) }
.c-btn:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }
.c-btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--ink) }
.c-btn--primary:hover{ background:var(--accent-bright); border-color:var(--accent-bright); color:var(--ink) }
.c-btn--danger{ border-color:rgba(224,112,122,.36); color:var(--danger) }
.c-btn--danger:hover{ background:rgba(224,112,122,.1); border-color:rgba(224,112,122,.6); color:var(--danger) }
.c-btn--action{ border-color:var(--accent-edge); color:var(--accent-bright) }
.c-btn--action:hover{ background:var(--accent-wash); border-color:var(--accent-bright); color:var(--accent-bright) }
.c-btn--sm{ font-size:var(--size-label); padding:var(--space-2) var(--space-4) }
.c-btn[aria-disabled="true"],.c-btn:disabled{ opacity:.45; cursor:not-allowed }

/* --- lede, empty and notice ---------------------------------------------- */
.c-lede{
  margin:0;
  font-size:var(--size-body);
  line-height:var(--line-prose);
  color:var(--text-2);
  max-width:var(--measure-text);
}
.c-empty{
  padding:var(--space-7) var(--space-4);
  font-size:var(--size-small);
  color:var(--text-3);
  text-align:center;
}
.c-notice{
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
  padding:var(--space-4) var(--space-5);
  font-size:var(--size-small);
  color:var(--text-2);
  line-height:var(--line-body);
}
.c-notice--error{ border-color:rgba(224,112,122,.4); color:var(--danger) }

/* --- utility: the only two a screen may use ------------------------------ */
.is-hidden{ display:none }
[hidden]{ display:none !important }
.u-visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* --- link ---------------------------------------------------------------- */
.c-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:3px;
  transition:color var(--motion-fast) var(--motion-ease),
             text-decoration-color var(--motion-fast) var(--motion-ease);
}
.c-link:hover{ color:var(--accent-bright); text-decoration-color:var(--accent-edge) }

/* --- back ---------------------------------------------------------------- */
.c-back{
  width:var(--control-height); height:var(--control-height); flex:none;
  padding:0;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  border:.5px solid var(--hairline);
  background:transparent;
  color:var(--text-2);
  font-size:var(--size-heading); line-height:1;
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-back:hover{ border-color:var(--accent-edge); color:var(--text-1) }

/* --- record titles ------------------------------------------------------- */
.c-titles{ flex:1 1 280px; min-width:0 }
.c-titles h2{
  margin:0; font-size:var(--size-display); font-weight:var(--weight-strong);
  line-height:var(--line-tight); letter-spacing:-.015em; max-width:24ch;
  overflow-wrap:anywhere;
}
.c-titles .sub{ margin-top:var(--space-2); font-size:var(--size-heading); color:var(--text-2) }
@media (max-width:600px){ .c-titles h2{ font-size:var(--size-title) } }

/* --- large meter, for a record's facts row ------------------------------- */
.c-meter--lg{ min-width:150px; padding:var(--space-4) var(--space-6) }
.c-meter--lg .c-meter__value{ font-size:var(--size-display) }
.c-meter--lg .c-meter__value--words{ font-size:var(--size-heading) }
@media (max-width:600px){
  .c-meter--lg{ min-width:0; flex:1 1 130px; padding:var(--space-3) var(--space-4) }
  .c-meter--lg .c-meter__value{ font-size:var(--size-title) }
}

/* --- rail item ----------------------------------------------------------- */
.c-railitem{
  display:block; width:100%; text-align:left;
  padding:var(--space-3) var(--space-5); border:none; background:transparent;
  border-radius:var(--radius-large);
  color:var(--text-2);
  transition:background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-railitem:hover{ color:var(--text-1); background:var(--surface-1) }
.c-railitem[aria-current="page"]{ background:var(--surface-2); color:var(--text-1) }
.c-railitem .a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  font-size:var(--size-body); font-weight:var(--weight-medium);
}
.c-railitem .a .c-count{ font-weight:var(--weight-regular) }
/* Across the top of a phone the count sits closer to the next name than to
   its own, so there it is left to the list it counts. */
@media (max-width:900px){ .c-railitem .a .c-count{ display:none } }
.c-railitem .b{ margin-top:var(--space-1); font-size:var(--size-label); color:var(--text-3); line-height:var(--line-body) }

/* --- section ------------------------------------------------------------- */
.c-sec{ display:grid; gap:var(--space-4); min-width:0 }
.c-sec > h3{
  margin:0; font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}
.c-sec__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
}
.c-sec__head > h3{
  margin:0; font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}

/* --- reading ------------------------------------------------------------- */
.c-prose{
  margin:0; font-size:var(--size-body); line-height:var(--line-prose); color:var(--text-1);
  max-width:68ch; white-space:pre-wrap; overflow-wrap:anywhere;
}
.c-note{
  font-size:var(--size-body); color:var(--text-2);
  line-height:var(--line-body); max-width:68ch; margin:0;
}
.c-note--bad{ color:var(--danger) }

/* --- list of things ------------------------------------------------------ */
.c-list{ display:grid; gap:var(--space-2); min-width:0 }
.c-item{
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-4) var(--space-5);
  display:flex; gap:var(--space-4); align-items:flex-start;
  min-width:0;
}
.c-item .body{ flex:1; min-width:0 }
.c-item .t{
  font-size:var(--size-body); font-weight:var(--weight-strong); line-height:var(--line-tight);
  text-align:left; overflow-wrap:anywhere;
}
.c-item .d{
  margin-top:var(--space-1); font-size:var(--size-small); color:var(--text-3);
  line-height:var(--line-body); overflow-wrap:anywhere;
}
.c-count{
  flex:none; font-size:var(--size-small); color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.c-chevron{ flex:none; color:var(--text-3); font-size:18px; line-height:1 }

/* --- key and value ------------------------------------------------------- */
.c-kv{ display:grid; max-width:68ch; min-width:0 }
.c-kv .r{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--space-7); padding:var(--space-2) 0; min-width:0;
}
.c-kv .r > span{ flex:none; font-size:var(--size-body); color:var(--text-2) }
.c-kv .r > b{
  font-size:var(--size-body); font-weight:var(--weight-strong); text-align:right;
  overflow-wrap:anywhere; min-width:0;
}
.c-kv .r > b.num{ font-family:var(--font-figure); font-weight:var(--weight-regular) }

/* --- a labelled field ---------------------------------------------------- */
.c-field{ display:grid; gap:var(--space-2); max-width:68ch; min-width:0 }
.c-field > label{ font-size:var(--size-body); color:var(--text-2) }
.c-field .c-input,.c-field .c-select,.c-field .c-textarea{ width:100% }
.c-textarea{
  width:100%; max-width:74ch; min-height:140px; resize:vertical;
  background:var(--surface-1); border:.5px solid var(--hairline);
  border-radius:var(--radius-large); padding:var(--space-4) var(--space-5);
  font-family:inherit; font-size:var(--size-body); line-height:var(--line-body);
  color:var(--text-1);
}
.c-textarea:focus{ outline:none; border-color:var(--accent-edge) }
.c-stack{ display:grid; gap:var(--space-4); min-width:0 }
.c-formgrid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}

/* --- a row of actions ---------------------------------------------------- */
.c-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-3); align-items:center }

/* --- segmented control --------------------------------------------------- */
.c-seg{ display:flex; gap:var(--space-2); flex-wrap:wrap; row-gap:var(--space-2); min-width:0 }
.c-seg button{
  font-family:inherit; font-size:var(--size-label); padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-pill); border:.5px solid var(--hairline);
  background:transparent; color:var(--text-3); cursor:pointer;
  white-space:nowrap;
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.c-seg button:hover{ color:var(--text-1) }
.c-seg button:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }
.c-seg button[aria-current="true"]{
  background:var(--accent-wash); border-color:var(--accent-edge);
  color:var(--accent-bright); font-weight:var(--weight-strong);
}

/* --- a row of controls above a list -------------------------------------- */
.c-toolrow{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; row-gap:var(--space-2); min-width:0 }
.c-toolrow .spacer{ flex:1 }

/* ==========================================================================
   WHAT THE VAULT ADDS
   ========================================================================== */

/* --- the search field -----------------------------------------------------
   The vault is this field. It is the largest control in the system because it
   is the only one most people will ever touch: a field at the heading size,
   the full width of the list under it, with the key that reaches it written
   at its end. */
.c-search{
  position:relative; display:flex; align-items:center; min-width:0;
}
.c-search__icon{
  position:absolute; left:var(--space-5); top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--text-3); pointer-events:none;
}
.c-search__input{
  width:100%; min-width:0;
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-4) var(--space-9) var(--space-4) var(--space-9);
  font-size:var(--size-title);
  line-height:var(--line-tight);
  color:var(--text-1);
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.c-search__input::placeholder{ color:var(--text-3) }
.c-search__input::-webkit-search-cancel-button{ -webkit-appearance:none }
.c-search__input:focus{ outline:none; border-color:var(--accent-edge); background:var(--surface-2) }
.c-search__icon + .c-search__input:focus{ border-color:var(--accent-edge) }
.c-search__key{ position:absolute; right:var(--space-5); top:50%; transform:translateY(-50%) }
@media (max-width:600px){
  .c-search__input{
    font-size:var(--size-heading);
    padding:var(--space-4) var(--space-5) var(--space-4) var(--space-8);
  }
  .c-search__icon{ left:var(--space-4); width:18px; height:18px }
  .c-search__key{ display:none }
}

/* --- a key on the keyboard ----------------------------------------------- */
.c-kbd{
  display:inline-grid; place-items:center;
  min-width:24px; height:24px; padding:0 var(--space-2);
  border:.5px solid var(--hairline); border-radius:var(--radius-pill);
  font-family:var(--font-figure); font-size:var(--size-micro); color:var(--text-3);
  line-height:1;
}

/* --- a search result ------------------------------------------------------
   One secret, on one line. The row is the copy button: press anywhere on it
   and the value is on your clipboard. The arrow at the end is the only other
   target on the row and opens the secret itself.

   Dense on purpose. The list has to stay comfortable at two hundred secrets,
   so a row is a line of text with room to press it, not a card: the name,
   what it logs in as and where, the group, when it was last used, and the
   arrow. Rows sit two pixels apart and read as a list, not as a stack of
   separate things.

   On a phone the group and the time drop to a second line under the name. */
.c-results{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.c-resulthead,
.c-result{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,190px) 112px 36px;
  grid-template-areas:"name group used open";
  align-items:center;
  column-gap:var(--space-4);
  min-width:0;
}
.c-resulthead{
  padding:0 var(--space-2) var(--space-2) var(--space-4);
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}
.c-resulthead > :nth-child(3){ text-align:right }
.c-result{
  position:relative;
  min-height:40px;
  background:var(--surface-1);
  border:.5px solid transparent;
  border-radius:var(--radius-tight);
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  transition:background var(--motion-fast) var(--motion-ease),
             border-color var(--motion-fast) var(--motion-ease);
}
.c-result:hover{ background:var(--surface-2) }
/* The row the keyboard is on. Only where there is a pointer and a keyboard to
   move it: on a phone a ring round the first row means nothing. */
@media (hover:hover){ .c-result.is-active{ background:var(--surface-2); border-color:var(--accent-edge) } }
.c-result.is-copied{ background:var(--accent-wash); border-color:var(--accent-edge) }
.c-result__copy{
  grid-area:name;
  display:flex; align-items:baseline; gap:var(--space-3); min-width:0;
  background:transparent; border:none; padding:6px 0; margin:0;
  text-align:left; color:inherit; cursor:pointer; border-radius:var(--radius-tight);
}
.c-result__copy:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }
/* The whole row answers the pointer, not only the name. */
.c-result__copy::after{ content:''; position:absolute; inset:0; border-radius:var(--radius-tight) }
.c-result__name{
  flex:0 1 auto; min-width:0;
  font-size:var(--size-body); font-weight:var(--weight-strong); line-height:var(--line-tight);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-result__name mark{ background:transparent; color:var(--accent-bright) }
.c-result__what{
  flex:1 1 0; min-width:0;
  font-size:var(--size-small); color:var(--text-3); line-height:var(--line-tight);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-result__group,
.c-result__used{
  position:relative; pointer-events:none; min-width:0;
  font-size:var(--size-small); line-height:var(--line-tight);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-result__group{ grid-area:group; color:var(--text-2) }
.c-result__used{ grid-area:used; text-align:right; color:var(--text-3) }
/* Said as a sentence where there is no column head over it, which is on a
   phone. "Used" is dropped where there is a head saying Last used. */
.c-result__used::first-letter{ text-transform:uppercase }
.c-result__lead{ display:none }
.c-result.is-copied .c-result__used{ color:var(--accent-bright); font-weight:var(--weight-strong) }
.c-result__open{
  grid-area:open; position:relative; z-index:1;
  width:32px; height:32px; padding:0;
  display:grid; place-items:center;
  border:.5px solid transparent; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-3);
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-result__open svg{ width:16px; height:16px }
.c-result__open:hover,.c-result__open:focus-visible{ border-color:var(--accent-edge); color:var(--text-1); outline:none }
@media (max-width:720px){
  .c-resulthead{ display:none }
  .c-result{
    grid-template-columns:minmax(0,1fr) auto 36px;
    grid-template-areas:"name name open" "group used open";
    row-gap:0;
    padding:var(--space-2) var(--space-1) var(--space-2) var(--space-4);
  }
  .c-result__copy{ padding:0 0 var(--space-1) }
  .c-result__what{ display:none }
  .c-result__group,.c-result__used{ font-size:var(--size-label) }
  .c-result__lead{ display:inline }
  .c-result__used.is-never .c-result__lead{ display:none }
}

/* --- a value that is kept out of sight ------------------------------------
   Figures, so monospace, and dots until somebody asks to see it. When it is
   showing it can be any length, so it wraps anywhere rather than pushing the
   page wider. */
.c-secret{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-3);
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-large);
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  min-width:0;
}
.c-secret__value{
  flex:1 1 220px; min-width:0;
  font-family:var(--font-figure); font-size:var(--size-heading);
  letter-spacing:.04em; color:var(--text-1);
  overflow-wrap:anywhere; word-break:break-all;
  padding:var(--space-2) 0;
}
.c-secret__value.is-hidden-value{ color:var(--text-3); letter-spacing:.2em }
.c-secret__time{ font-family:var(--font-figure); font-size:var(--size-label); color:var(--text-3) }

/* --- what the screen says back to you -------------------------------------
   Short, at the foot of the window in the middle, and gone after a moment. */
.c-toast{
  position:fixed; left:50%; bottom:var(--space-6); z-index:40;
  transform:translate(-50%, var(--space-4));
  max-width:calc(100% - var(--space-8));
  background:var(--ink);
  border:.5px solid var(--accent-edge);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lifted);
  padding:var(--space-3) var(--space-6);
  font-size:var(--size-small); color:var(--text-1);
  text-align:center; overflow-wrap:anywhere;
  opacity:0; pointer-events:none;
  transition:opacity var(--motion-base) var(--motion-ease),
             transform var(--motion-base) var(--motion-ease);
}
.c-toast.is-shown{ opacity:1; transform:translate(-50%, 0) }
.c-toast--bad{ border-color:rgba(224,112,122,.5); color:var(--danger) }

/* --- the column heads over the audit log ---------------------------------- */
.c-loghead{
  display:grid;
  grid-template-columns:136px minmax(0,140px) minmax(0,1fr) minmax(0,320px);
  gap:var(--space-4);
  padding:0 var(--space-5) var(--space-2);
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}
@media (max-width:980px){ .c-loghead{ display:none } }

/* --- one line of the audit log --------------------------------------------
   When, who, what, where from. Down a column on a phone. */
.c-logrow{
  display:grid;
  grid-template-columns:136px minmax(0,140px) minmax(0,1fr) minmax(0,320px);
  gap:var(--space-1) var(--space-4);
  align-items:baseline;
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-3) var(--space-5);
  font-size:var(--size-small);
  min-width:0;
}
.c-logrow.is-refused{ box-shadow:inset 0 0 0 .5px rgba(224,112,122,.45) }
.c-logrow__when{ font-family:var(--font-figure); font-size:var(--size-label); color:var(--text-3); white-space:nowrap }
.c-logrow__who{ font-weight:var(--weight-strong); overflow-wrap:anywhere; min-width:0 }
.c-logrow__what{ color:var(--text-1); overflow-wrap:anywhere; min-width:0 }
.c-logrow__what .detail{ display:block; color:var(--text-3); margin-top:var(--space-1) }
.c-logrow__what .c-tag{ vertical-align:1px }
.c-logrow__from{ color:var(--text-3); overflow-wrap:anywhere; min-width:0 }
.c-logrow__from .addr{ font-family:var(--font-figure); font-size:var(--size-label) }
@media (max-width:980px){
  .c-logrow{ grid-template-columns:minmax(0,1fr) auto }
  .c-logrow__who{ grid-column:1; grid-row:1 }
  .c-logrow__when{ grid-column:2; grid-row:1; justify-self:end }
  .c-logrow__what,.c-logrow__from{ grid-column:1 / -1 }
}
.c-logrow--compact{ grid-template-columns:136px minmax(0,1fr) }
.c-logrow--compact .c-logrow__who{ grid-column:auto; grid-row:auto }
.c-logrow--compact .c-logrow__from{ grid-column:2 }
@media (max-width:980px){
  .c-logrow--compact{ grid-template-columns:minmax(0,1fr) auto }
  .c-logrow--compact .c-logrow__who{ grid-column:1; grid-row:1 }
  .c-logrow--compact .c-logrow__from{ grid-column:1 / -1 }
}

/* --- who can reach what ---------------------------------------------------
   One person, their groups, and what that adds up to. */
.c-access{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;
  gap:var(--space-3) var(--space-5);
  align-items:center;
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-4) var(--space-5);
  min-width:0;
}
.c-access__who .t{ font-size:var(--size-body); font-weight:var(--weight-strong); overflow-wrap:anywhere }
.c-access__who .d{ margin-top:var(--space-1); font-size:var(--size-small); color:var(--text-3); overflow-wrap:anywhere }
.c-access__sum{ display:flex; gap:var(--space-4); flex-wrap:wrap; row-gap:var(--space-1); justify-content:flex-end }
.c-access__fig{ text-align:right }
.c-access__fig b{ display:block; font-family:var(--font-figure); font-size:var(--size-heading); font-weight:var(--weight-strong) }
.c-access__fig span{ font-size:var(--size-micro); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-3) }
.c-access.is-changed{ box-shadow:inset 0 0 0 .5px var(--accent-edge) }
@media (max-width:820px){
  .c-access{ grid-template-columns:minmax(0,1fr) }
  .c-access__sum{ justify-content:flex-start }
  .c-access__fig{ text-align:left }
}

/* --- a person or a group being managed ----------------------------------- */
.c-manage{
  display:grid; gap:var(--space-3);
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-4) var(--space-5);
  min-width:0;
}
.c-manage__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
}
.c-manage__head .t{ font-size:var(--size-heading); font-weight:var(--weight-strong); overflow-wrap:anywhere }
.c-manage__head .d{ margin-top:var(--space-1); font-size:var(--size-small); color:var(--text-3); overflow-wrap:anywhere }
.c-manage__head .body{ flex:1 1 200px; min-width:0 }
.c-manage__label{
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}

/* --- the gutter on a phone ------------------------------------------------
   Every region steps in to the same sixteen pixels, so the heading, the field
   and the rows under it share one left edge. */
@media (max-width:600px){
  .c-masthead{ padding:var(--space-4) var(--space-4); gap:var(--space-4) }
  .c-masthead__mark{ height:44px }
  .c-heading{ padding:var(--space-4) var(--space-4) var(--space-2) }
  .c-status{ padding:var(--space-2) var(--space-4) }
}

/* --- the keys that work here ----------------------------------------------
   A quiet line under the search field. A phone has no keyboard to speak of,
   so there it is not drawn. */
.c-hints{
  display:flex; gap:var(--space-5); flex-wrap:wrap; row-gap:var(--space-2);
  font-size:var(--size-label); color:var(--text-3);
}
.c-hints > span{ display:inline-flex; align-items:center; gap:var(--space-2) }
@media (max-width:720px){ .c-hints{ display:none } }

/* --- a phone gets to the search field sooner -------------------------------
   The wordmark and who you are share the top line, the menu takes the line
   under it, and the heading puts its figures beside each other under the
   title rather than stacking three things down the screen. */
@media (max-width:600px){
  .c-masthead__side{ display:contents }
  .c-masthead .c-inlinelabel{ margin-left:auto }
  .c-masthead .c-menubar{ order:3; width:100% }
  .c-heading{ grid-template-columns:minmax(0,1fr) auto }
  .c-heading__title{ grid-row:1; grid-column:1 }
  .c-heading__aside{ grid-row:1; grid-column:2; justify-self:end }
  .c-heading__meters{ grid-row:2; grid-column:1 / -1 }
  .c-heading__lede{ grid-row:3; grid-column:1 / -1 }
  .c-heading .c-meter{ padding:var(--space-1) var(--space-4); display:flex; align-items:baseline; gap:var(--space-2) }
  .c-heading .c-meter__value{ font-size:var(--size-heading) }
  .c-heading .c-meter__label{ margin-top:0 }
}

/* --- the groups one person is in ------------------------------------------
   Only the ones they are in, each a chip with a cross that takes them out,
   then a short list that adds them to another. The row is as long as the
   person's groups, not as long as the vault's. */
.c-members{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2); row-gap:var(--space-2); min-width:0;
}
.c-chip{
  display:inline-flex; align-items:center; gap:var(--space-1); min-width:0; max-width:100%;
  border:.5px solid var(--hairline); background:var(--surface-2);
  border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  font-size:var(--size-label); font-weight:var(--weight-medium); color:var(--text-1);
}
.c-chip__name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.c-chip__remove{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; padding:0;
  border:none; background:transparent; border-radius:var(--radius-pill);
  color:var(--text-3); font-size:15px; line-height:1; cursor:pointer;
  transition:background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.c-chip__remove:hover,.c-chip__remove:focus-visible{ background:rgba(224,112,122,.16); color:var(--danger); outline:none }
.c-select--sm{
  padding:var(--space-2) var(--space-7) var(--space-2) var(--space-4);
  background-position:right var(--space-3) center;
  font-size:var(--size-label);
}
.c-manage.is-new{ box-shadow:inset 0 0 0 .5px var(--accent-edge) }

/* A count inside a segmented button: the figure face, a step quieter than the
   word, so "Refused 6" reads as a filter first and a number second. */
.c-seg__n{ font-family:var(--font-figure); opacity:.7; font-variant-numeric:tabular-nums }

/* --- one filter, two shapes -------------------------------------------------
   A few groups read best as buttons you can see at once. On a phone the same
   buttons wrap onto two or three lines above the list, so there the filter is
   a single list instead. Both are drawn; the width decides which shows. */
.c-select--narrow{ display:none }
@media (max-width:720px){
  .c-seg--wide{ display:none }
  .c-select--narrow{ display:block }
}

/* --- dialog ----------------------------------------------------------------
   Asked for once, while a person looks at their phone: what they asked for,
   and what to do. Nothing else on the page can be pressed until it is over. */
.c-dialog{
  width:min(440px, calc(100% - var(--space-8)));
  /* The surface is a tint, so it is laid on the ink: nothing behind shows through. */
  background:linear-gradient(var(--surface-2), var(--surface-2)), var(--ink); color:var(--text-1);
  border:.5px solid var(--hairline); border-radius:var(--radius-large);
  box-shadow:var(--shadow-lifted);
  padding:var(--space-6);
  display:grid; gap:var(--space-5);
}
.c-dialog:not([open]){ display:none }
.c-dialog::backdrop{ background:rgba(0,0,0,.6) }
.c-dialog__title{
  margin:0; font-size:var(--size-heading); font-weight:var(--weight-strong);
  line-height:var(--line-tight); overflow-wrap:anywhere;
}