/* ============================================================================
   screens/access.css - the property credential vault
   ----------------------------------------------------------------------------
   Two panes on desktop (master list + detail), a real master -> detail flow on
   mobile. Everything shared with other screens (.panel, .res, .r-*, .av, .tag,
   .pill, .mini-btn, .fchip, .empty, .toast, .prow) comes from components.css
   and mobile.css; this file only adds what exists nowhere else.

   Four prototype defects are fixed in CSS here (the rest are fixed in
   assets/js/screens/access.js):

   1. SCROLL - .acc-list and .acc-detail combined overflow:hidden with a parent
      pinned to height:100% and had no inner scroller, so on a short viewport
      the property rows and the resource groups were silently cut off with no
      way to reach the rest. Both panes are now .panel, whose .panel-b is a real
      scroller. This file must therefore never reintroduce a height or an
      overflow on the panes themselves.

   2. FOCUS - .acc-search input set outline:none and the file carried no :focus
      rule anywhere, so the search field could hold focus invisibly. .acc-search
      composes on layout.css's .tb-search, which pairs the dropped outline with
      a :focus-within ring. Nothing here removes an outline without putting a
      ring back.

   3. MONOGRAMS - every property row hand-rolled a ~200-character inline
      monogram style, thirteen copies of it. The markup uses .av now, so this
      file needs no avatar rules at all.

   4. INERT CHIPS - the filter chips were spans. They are real buttons wearing
      .fchip now and get their look from components.css; the only addition here
      is the count that rides along inside each one.

   Motion. access.js rebuilds both panes on every render, so anything that
   should move on selection is an animation with `backwards` fill (held through
   the delay, released at the end, as components.css explains) that plays when
   its node is created - a transition would have nothing to transition from.
   The keyframes are the shared rise-in / fade-in from components.css plus the
   two directional slides and the selection bar below. access.js writes `--i`
   (an index, capped at 12) on each resource group and row and stamps
   data-direction="forward|back" on the mobile view before it flips the panes'
   `hidden` flags. What components.css already animates - the .secret
   cross-fade, the .toast, the .mini-btn press, the .prow press - is not
   repeated here. Every duration is a --t-* token.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0. Keyframes - the screen-local ones only

   Only `from` is written, so the end state is the element's own computed
   style and nothing (no transform, no stacking context) is left behind.
   --------------------------------------------------------------------------- */

/* A pane arriving from the right (forward) or from the left (back). */
@keyframes acc-slide-from-right{
  from{
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes acc-slide-from-left{
  from{
    opacity: 0;
    transform: translateX(-12px);
  }
}

/* The selected row's gold edge growing out from its middle. */
@keyframes acc-bar-in{
  from{ transform: scaleY(0); }
}


/* ---------------------------------------------------------------------------
   1. Desktop shell - the two-pane grid

   height:100% is what makes the panes' inner scrollers engage: it resolves
   against .content's definite content box, so the grid never grows past the
   viewport and .content itself never scrolls. Removing it puts the whole screen
   back on one outer scrollbar and the panel headers stop staying put.
   --------------------------------------------------------------------------- */
.acc{
  display: grid;
  grid-template-columns: 344px minmax(0, 1fr);
  gap: var(--s-4);
  height: 100%;
  min-height: 0;
}

/* The app-wide dashboard breakpoint. Below it the master column gives room back
   to the detail pane, which carries the resource rows and their actions. */
@media (max-width: 1180px){
  .acc{
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

/* Workbench panels: the panel radius, and no lift - components.css only lifts
   a .card that is a link or a button, so nothing has to be cancelled here. */
.acc-list,
.acc-detail{
  min-width: 0;
  border-radius: var(--r-lg);
}


/* ---------------------------------------------------------------------------
   2. In-panel search field

   Composed as class="tb-search acc-search", so the field, its icon slot and its
   focus ring are layout.css's - the prototype's duplicate .acc-search block
   (which is where the missing focus style lived) is gone.

   The override is load-bearing: .tb-search carries flex: 0 1 230px, and inside
   a .phead or a .panel-h - both flex COLUMNS - that 230px reads as a height.
   --------------------------------------------------------------------------- */
.acc-search{
  flex: none;
  width: 100%;
}


/* ---------------------------------------------------------------------------
   3. Master list rows

   A real button inside a real li: keyboard reachable, announced as a list, and
   carrying aria-current for the selected property.

   Selection reads two ways - a gold-100 ground and a 3px gold edge - so it
   survives a greyscale print and does not rely on hue alone. The edge is a
   pseudo-element rather than the inset box-shadow it used to be, for two
   reasons: it can be scaled in (a shadow cannot), and the row's box-shadow is
   then free for the focus ring, so no rule below has to restate the ring.
   --------------------------------------------------------------------------- */
.acc-rows{
  /* The scroller comes from .panel-b; the list reset comes from base.css. */
  min-width: 0;
}

.acc-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-bottom: 1px solid var(--gray-100);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: background var(--t-fast);
}

.acc-rows > li:last-child .acc-row{
  border-bottom: 0;
}

/* The gold edge. Hidden by scale, not by display, so it is one animation away
   from showing; its own transition covers the (rare) case of the class being
   toggled on an existing row rather than the row being re-rendered. */
.acc-row::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-base);
}

.acc-row:hover{
  background: var(--gold-a05);
}

/* Press: one step deeper than the hover wash, on --t-fast like every press. */
.acc-row:active{
  background: var(--gold-a14);
}

.acc-row.is-selected,
.acc-row.is-selected:hover,
.acc-row.is-selected:active{
  background: var(--gold-100);
}

/* access.js re-renders the whole list on selection, so the selected row is a
   NEW node wearing .is-selected from birth: the edge has to animate in rather
   than transition in. `backwards` fill starts it at scaleY(0) on its own. */
.acc-row.is-selected::before{
  transform: scaleY(1);
  animation: acc-bar-in var(--t-base) backwards;
}

.acc-row .a-meta{
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.acc-row .a-meta b{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-row .a-meta span{
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* Item count. The number is store.vaultItemCount(id) - never a typed figure. */
.acc-row .a-cnt{
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
}

.acc-row .a-cnt .ic{
  width: 13px;
  height: 13px;
  color: var(--gray-400);
}


/* ---------------------------------------------------------------------------
   4. Detail header

   Rebuilt with every selection; the new header fades in over the old one's
   place so the name change reads as a change, not a flicker.
   --------------------------------------------------------------------------- */
.acc-detail-h{
  padding: var(--s-4);
}

/* Wraps: at 1366 the tags, the count and two buttons used to keep their full
   width and squeeze the name block to 6px, one word per line. Now the tags and
   actions drop under the name when the row runs out. */
.ad-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
  animation: fade-in var(--t-base) backwards;
}

.ad-t{
  flex: 1 1 240px;
  min-width: 0;
}

/* An h2 that is not a direct child of .panel-h, so components.css's 13.5px
   panel-title rule does not reach it. */
.ad-name{
  margin: 0;
  font-family: var(--f-disp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--navy);
}

.ad-sub{
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

.ad-tags{
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}


/* ---------------------------------------------------------------------------
   5. Resource groups

   Each group rises in after the one above it: `--i` on the group is its index
   from access.js. The rows inside carry their own running index and cascade
   on top of that, so the vault reads top to bottom in one motion.
   --------------------------------------------------------------------------- */
.ad-group{
  animation: rise-in var(--t-base) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.ad-group + .ad-group{
  margin-top: var(--s-5);
}

/* Small-caps group label: 600 at .08em, the app's one label voice. Inset by
   the same --s-2 the rows below carry, so the label and the icon wells share
   one left edge. */
.ad-group-t{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding-inline: var(--s-2);
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

.ad-group-t .ic{
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

.ad-group-n{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gray-400);
}


/* ---------------------------------------------------------------------------
   6. Resource rows - the parts components.css leaves to the screen

   .res is shared vocabulary, but only Access renders one, so the intrinsic
   wrapping rules that keep a row usable in a 260px column live here - and so
   does the list finish: inside the vault a row is not a boxed tile but a line
   in a list. The shared border and ground come off, a hairline separates
   neighbours, and the row takes a gold wash under the pointer with its icon
   well warming to match. The hairline is a pseudo-element inset from both
   ends so it never touches the wash's rounded corners.
   --------------------------------------------------------------------------- */
.acc-detail-b .res,
.acc-mbody .res{
  position: relative;
  flex-wrap: wrap;
  margin: 0;
  padding: var(--s-3) var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  animation: rise-in var(--t-base) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.acc-detail-b .res::after,
.acc-mbody .res::after{
  content: "";
  position: absolute;
  right: var(--s-2);
  bottom: 0;
  left: var(--s-2);
  height: 1px;
  background: var(--gray-100);
}

.acc-detail-b .res:last-child::after,
.acc-mbody .res:last-child::after{
  display: none;
}

.acc-detail-b .res:hover,
.acc-mbody .res:hover{
  background: var(--gold-a05);
}

/* The icon well tints with the row. components.css gives .r-ic no transition
   of its own, so it is declared here where the hover that needs it lives. */
.acc-detail-b .r-ic,
.acc-mbody .r-ic{
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.acc-detail-b .res:hover .r-ic,
.acc-mbody .res:hover .r-ic{
  background: var(--gold-100);
  border-color: var(--gold-300);
  color: var(--gold-700);
}

/* A floor width on the body is what actually triggers the wrap: .r-body carries
   min-width:0, so without this it would shrink towards nothing and the action
   buttons would crush the value instead of dropping to their own line. */
.acc-detail-b .r-body,
.acc-mbody .r-body{
  min-width: 168px;
}

/* Only does anything once the row has wrapped; on one line .r-body's flex:1 has
   already taken the slack. */
.acc-detail-b .r-act,
.acc-mbody .r-act{
  margin-inline-start: auto;
}

/* The address / host / username half of the value line. min-width:0 lets a long
   hostname break inside the flex row instead of widening it. */
.r-value{
  min-width: 0;
}

/* The middot between a host and its username or masked value. */
.r-sep{
  color: var(--gray-400);
}

/* The masked value holds a little width so revealing it does not make the row
   jump, and so the pending state has somewhere to sit. The mask -> value
   cross-fade itself is components.css's .secret rule. */
.res .secret{
  min-width: 72px;
}

.res .note{
  margin-top: var(--s-1);
}

/* The "demo value" line, shown only while a secret is revealed. It is toggled
   with el.hidden, and this file loads after base.css - so display:flex would
   outrank [hidden] unless the companion rule below puts it back. Going from
   display:none to flex restarts the animation, which is what makes the note
   rise in beneath the value each time it is revealed. */
.r-demo{
  display: flex;
  align-items: center;
  gap: var(--s-1);
  animation: rise-in var(--t-base) backwards;
}

.r-demo[hidden]{
  display: none;
}

.r-demo .ic{
  width: 13px;
  height: 13px;
  color: var(--gold-600);
}

/* access.js swaps the reveal button's glyph (eye <-> eye-off) and the copy
   button's (copy <-> check) by replacing the <svg>. A fresh node fades in, so
   the swap reads as a change of state rather than a blink. */
.res .mini-btn .ic{
  animation: fade-in var(--t-fast) backwards;
}

/* The Open action is an anchor, so the underline comes off; the .mini-btn box
   already gives it a visible boundary. */
.res a.mini-btn{
  text-decoration: none;
}

/* A reveal in flight: the button is disabled for the round trip, and looking
   disabled is the point. */
.res .mini-btn:disabled{
  color: var(--gray-400);
  cursor: progress;
}


/* ---------------------------------------------------------------------------
   7. Mobile - master -> detail

   Two panes, exactly one visible at a time. They are flex columns so .pbody's
   flex:1 still means something, which is why the [hidden] companion rule is
   needed: display:flex here would otherwise outrank base.css's [hidden] and a
   "hidden" pane would stay on screen.

   Each pane animates in when its `hidden` comes off (display:none -> flex
   restarts the animation). The default is a plain fade - that is what the
   list gets on first mount. access.js stamps data-direction on the mobile
   view before it flips the flags, so opening a property slides the detail in
   from the right and going back slides the list in from the left.
   --------------------------------------------------------------------------- */
.acc-m{
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: fade-in var(--t-base) backwards;
}

.acc-m[hidden]{
  display: none;
}

[data-direction="forward"] > .acc-m-detail{
  animation-name: acc-slide-from-right;
}

[data-direction="back"] > .acc-m-list{
  animation-name: acc-slide-from-left;
}

/* Long property names sit next to a back button on a 320px screen, so the
   detail title steps down from the 24px .phead heading. */
.acc-m-detail .phead h2{
  flex: 1;
  min-width: 0;
  font-size: 17px;
}

/* Focus moves to this heading when the detail opens; a touch or mouse entry
   should not flash a ring, a keyboard one still should. */
.acc-m-detail .phead h2[tabindex="-1"]:focus:not(:focus-visible){
  outline: none;
}

.acc-m-detail .phead .ad-sub{
  margin: 0;
}

/* The back control is a quiet ghost of the shared .icon-btn: no box until the
   pointer arrives, and pulled left so the chevron sits on the title's edge.
   Its transition is .icon-btn's; only the resting look changes. */
.acc-back{
  margin-inline-start: calc(var(--s-2) * -1);
  border-color: transparent;
  background: transparent;
  color: var(--navy);
}

.acc-back:hover{
  border-color: transparent;
  background: var(--gray-100);
}

.acc-mrows{
  min-width: 0;
}

.acc-mrow .p-tail .ic{
  width: 15px;
  height: 15px;
  color: var(--gray-400);
}

/* The chevron that says "this row goes somewhere" - the prototype's mobile rows
   looked tappable and led nowhere. Same 0,3,0 score as the rule above, so it
   has to sit after it to win. */
.acc-mrow .p-tail .p-go{
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
}

/* mobile.css gives .prow.is-selected a box-shadow (0,2,0) and a:hover/
   button:hover another (0,1,1), both of which outrank base.css's focus ring.
   Restore it, and keep both marks when a selected row is focused. The press
   and hover motion are mobile.css's .prow rules. */
.acc-mrow:focus-visible{
  box-shadow: var(--focus-ring);
}

.acc-mrow.is-selected:focus-visible{
  box-shadow: var(--sh-md), var(--focus-ring);
}

/* On the phone the resource rows have no panel behind them - the mobile view
   is the gray-50 canvas - so each group becomes its own white card, the same
   surface the Email wizard gives its recipient list. */
.acc-mbody .ad-group{
  padding: var(--s-3) var(--s-4) var(--s-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.acc-mbody .ad-group + .ad-group{
  margin-top: var(--s-4);
}


/* ---------------------------------------------------------------------------
   8. Clipboard fallback

   http://jacrabo.test is not a secure context, so navigator.clipboard is
   undefined in Chromium there. The legacy path needs a real, selectable,
   on-screen textarea for the duration of one copy - display:none and
   visibility:hidden both make execCommand('copy') fail.
   --------------------------------------------------------------------------- */
.acc-copy-probe{
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   9. Print

   print.css hides every button inside .app, which is right for the copy and
   reveal actions but would print the vault index empty - the master rows are
   buttons. These selectors score 0,3,0 and 0,2,0 against that rule's 0,1,1, so
   the list comes back without a priority flag and without touching print.css.
   --------------------------------------------------------------------------- */
@media print{
  .app .acc{
    display: block;
    height: auto;
  }

  .app .acc-list{
    margin-bottom: var(--s-5);
  }

  .app .acc-list .acc-row{
    display: flex;
    cursor: auto;
  }

  /* A selected row prints as a plain row: the wash is chrome, not content. */
  .app .acc-list .acc-row.is-selected{
    background: transparent;
  }

  .app .acc-list .acc-row.is-selected::before{
    display: none;
  }

  /* An entrance caught at its first frame would print blank. */
  .ad-head,
  .ad-group,
  .acc-detail-b .res,
  .acc-mbody .res,
  .acc-m{
    animation: none;
  }
}


/* ---------------------------------------------------------------------------
   10. Vault capabilities added when the screen was wired to the API

   Everything above this line is the original visual language and is unchanged.
   What follows is the vocabulary the static version had no need for: a rotation
   warning, a reveal countdown, the permission gated action clusters, the three
   pane states, and the access history table inside its dialog.

   No colour is declared here that is not a token from tokens.css, and no rule
   needs a priority flag: each selector below either names a class that exists
   nowhere else, or scores above the shared rule it refines.
   --------------------------------------------------------------------------- */

/* --- topbar and detail action clusters ----------------------------------- */

/* The topbar's New entry button. .tb-tools is a flex row, so the wrapper only
   has to stop the button stretching and keep it off the search field. */
.acc-tb-actions{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.acc-tb-actions:empty{
  display: none;
}

/* Detail header actions. They sit at the end of .ad-tags, which already wraps,
   so on a narrow desktop column the buttons drop to their own line rather than
   squeezing the client name. */
.acc-actions{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* The same cluster in the mobile detail head. Buttons that split the row
   evenly, each comfortably past the 44px touch target. */
.acc-m-actions{
  display: flex;
  gap: var(--s-2);
}

.acc-m-actions:empty{
  display: none;
}

.acc-m-actions .btn{
  flex: 1;
  min-height: 44px;
  justify-content: center;
}


/* --- the rotation warning ------------------------------------------------ */

/* "Needs rotation". Gold rather than red on purpose: a stale credential is a
   job to schedule, not an outage, and spending the alarm colour on it would
   leave nothing louder for a real breach. */
.acc-rot{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* Inside .r-name, which is a block: the badge follows the name on the same line
   and keeps its own breathing room. */
.r-name .acc-rot{
  margin-inline-start: var(--s-2);
}

.acc-rot .ic{
  width: 12px;
  height: 12px;
  color: var(--gold-600);
}

/* The group heading's count of stale secrets. Lighter than the row badge so the
   heading does not out-shout the rows it introduces. */
.acc-rot--sm{
  margin-inline-start: var(--s-2);
  padding: 0 var(--s-1);
}

/* Why it matters, in one sentence under the row. .note--warn already carries
   the gold; this only gives the sentence room to be read. */
.acc-rot-why{
  margin-top: var(--s-1);
  max-width: 64ch;
}

/* A stale secret's row keeps a gold left edge, so the warning survives a scroll
   that has pushed the badge out of the viewport on a phone. */
.acc-detail-b .res.is-stale,
.acc-mbody .res.is-stale{
  border-inline-start: 2px solid var(--gold-300);
  padding-inline-start: calc(var(--s-2) - 2px);
}

/* The same warning on a master row, where there is no room for words: one gold
   dot beside the entry count. The screen reader gets the sentence instead, from
   the .sr-only span access.js writes next to it. */
.acc-dot{
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}


/* --- the reveal countdown ------------------------------------------------ */

/* How long a revealed secret has left. Monospace and tabular so the number does
   not shuffle the row sideways as it counts 10 down to 9. */
.acc-cd{
  flex: none;
  padding: 0 var(--s-1);
  border-radius: var(--r-sm);
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  animation: fade-in var(--t-fast) backwards;
}

.acc-cd[hidden]{
  display: none;
}

/* A revealed secret is selectable even where the chrome is not: the whole point
   is to be able to drag over it and copy it by hand. */
.res .secret.is-on{
  user-select: text;
  -webkit-user-select: text;
}


/* --- the three pane states ------------------------------------------------ */

/* The li that carries a skeleton, an empty state or an error inside the master
   list. It is a list item only because the list is a ul; visually it is a block
   that fills the panel body. */
.acc-state{
  padding: var(--s-4);
}

.acc-state .ui-skel-list{
  gap: var(--s-3);
}

/* A refresh that already has something on screen: the list dims slightly rather
   than being replaced by a skeleton, so typing in the search box never strobes.
   .is-busy is the app-wide "waiting" state class. */
.acc-rows.is-busy{
  opacity: .55;
  transition: opacity var(--t-fast);
}

/* An empty group still says so, and offers the way out of being empty. */
.acc-group-empty{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-2);
}

/* "Last opened 2d ago by Karang", the line that comes from access_reveal_log. */
.acc-last{
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.acc-last .ic{
  width: 12px;
  height: 12px;
  color: var(--gray-400);
}


/* --- the rotation filter chip -------------------------------------------- */

/* Composes .fchip, so the box, the hover and the .is-on inversion are all
   components.css's. The icon tint is the only addition, and it flips with the
   chip so the glyph stays legible once the chip goes navy. */
.acc-flag .ic{
  color: var(--gold-600);
}

.acc-flag.is-on .ic{
  color: var(--gold);
}


/* --- the access history dialog ------------------------------------------- */

.acc-hist{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* The one line summary above the table: how many times this entry was opened. */
.acc-hist-sum{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.acc-hist-sum .ic{
  width: 15px;
  height: 15px;
  color: var(--gold-600);
}

.acc-hist-who{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.acc-hist-who b{
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Relative time on top ("2d ago"), the exact stamp under it. The absolute time
   is what an incident review needs; the relative one is what a glance needs. */
.acc-hist-when{
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.acc-hist-when b{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}

/* A reveal is a disclosure and a copy is a disclosure that left the building,
   so the two are told apart by colour as well as by their glyph and their word.
   The base .tag is blue; a reveal wears the vault's gold. */
.acc-tag-reveal{
  background: var(--gold-100);
  color: var(--gold-700);
}

.acc-tag-reveal .ic{
  color: var(--gold-600);
}

.acc-hist-more{
  align-self: flex-start;
}


/* --- mobile -------------------------------------------------------------- */

@media (max-width: 860px){
  /* The mobile detail body is the gray-50 canvas with no panel behind it, so a
     row's gold stale edge needs the card's padding back to sit flush. */
  .acc-mbody .res.is-stale{
    padding-inline-start: calc(var(--s-2) - 2px);
  }

  /* At 390px an entry row has to stack: name and value first, the actions under
     them on their own full width line, each control a real 44px target. The
     wrap itself is section 6's rule; this is what makes the wrapped line
     usable with a thumb. */
  .acc-mbody .r-act{
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-2);
    margin-inline-start: 0;
    justify-content: flex-end;
  }

  .acc-mbody .mini-btn{
    min-width: 44px;
    min-height: 44px;
  }

  /* Room under the last group for the tab bar and the home indicator. layout.css
     pays this on .main for the page as a whole; the detail pane needs it too
     because its own last row is what a thumb reaches for. */
  .acc-mbody{
    padding-bottom: calc(var(--bottombar-safe) + var(--s-4));
  }

  /* The head already stacks the title row, the meta line and the actions, so the
     gap tightens to keep the first group above the fold on a 390 x 844 screen. */
  .acc-m-detail .phead{
    gap: var(--s-2);
  }

  /* A long client name next to a back button and a count pill. */
  .acc-m-detail .phead h1{
    flex: 1;
    min-width: 0;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Focus lands here when the detail opens. A touch entry should not flash a
     ring; a keyboard one still should. */
  .acc-m-detail .phead h1[tabindex="-1"]:focus:not(:focus-visible){
    outline: none;
  }

  /* Two chip strips stacked in the master head would eat the fold, so they run
     as one wrapping band with the search field above them. */
  .acc-m-list .phead .fchips{
    flex-wrap: wrap;
  }
}


/* --- print ---------------------------------------------------------------- */

@media print{
  /* A countdown, an action cluster and a filter chip are all chrome. The
     rotation sentence is content and stays. */
  .acc-cd,
  .acc-actions,
  .acc-m-actions,
  .acc-tb-actions{
    display: none;
  }

  .acc-detail-b .res.is-stale,
  .acc-mbody .res.is-stale{
    border-inline-start: 2px solid var(--gray-400);
  }
}