/* Interactive controls, monday Vibe sizing and contrast (Arthur, 25 Sep 2026: "the buttons and links blend
   in with the rest of the page"). Loaded after app.css and overrides it, so every existing class keeps
   working and no template had to be rewritten:
     .btn            -> Vibe "secondary": 40px, 14px/600, visible #797e93 border (3.25:1 on the card, was 1.62:1)
     .btn.primary    -> Vibe "primary": solid #0073ea
     .btn.ghost      -> Vibe "tertiary": link-coloured text, fills on hover
     .btn.danger     -> red border with #ff8095 text (5.47:1, was 2.89:1)
     .btn.small      -> Vibe "small": 32px, 13px
   Also here: disclosure summaries drawn as buttons, underlined content links, the queue row affordance,
   and the three loading indicators (A: spinner in the button, B: top progress bar, D: status pill). */
:root{--ui-border:#797e93; --danger-ink:#ff8095; --link-hover:#8fc0ff}

/* ---------- buttons ---------- */
.btn{height:40px;padding:0 16px;font:600 14px var(--sans);gap:8px;justify-content:center;
  border:1px solid var(--ui-border);background:transparent;color:var(--ink);position:relative}
.btn:hover{background:var(--ui-hover);border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.btn.primary:active{background:var(--teal-hover)}
.btn.ghost{border-color:transparent;color:var(--link);padding-inline:10px}
.btn.ghost:hover{background:var(--teal-soft);border-color:transparent;color:var(--link)}
.btn.danger{border-color:var(--st-fail);color:var(--danger-ink)}
.btn.danger:hover{background:var(--red-bg);border-color:var(--st-fail)}
.btn.plain{border-color:transparent}
.btn.guarded{height:auto;min-height:40px}
.btn.small,table.cmp.suggest .btn.small{height:32px;padding:0 12px;font-size:13px}
.btn.wide{margin-top:8px}
/* the approvals page and case header use .btn inside inline forms: keep them on one line */
form.inline .btn,form.inlineform .btn{vertical-align:middle}

/* ---------- disclosures: <summary> drawn as a small secondary button with a chevron ---------- */
details.work>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;
  height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--radius-sm);
  font:600 13px var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background-color var(--motion-short) var(--motion-timing),border-color var(--motion-short) var(--motion-timing)}
details.work>summary::-webkit-details-marker{display:none}
details.work>summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-right:2px;transition:transform var(--motion-med) var(--motion-timing)}
details.work>summary:hover{background:var(--ui-hover);border-color:var(--ink)}
details.work>summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
details.work[open]>summary{background:var(--teal-soft);border-color:var(--teal)}
details.work[open]>summary::before{transform:rotate(45deg)}
details.work[open]>form,details.work[open]>.stackform{border-left:3px solid var(--teal);padding-left:14px;margin-top:10px}
details.work.mini>summary{font-weight:600}
/* "Take over" is already a .btn summary */
details.takeover>summary::-webkit-details-marker{display:none}

/* ---------- links ---------- */
.page a:not(.btn):not(.mname):not(.approvals){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page a:not(.btn):not(.mname):not(.approvals):hover{color:var(--link-hover);text-decoration-thickness:2px}
.page a[target="_blank"]:not(.btn)::after{content:"\2197";font-size:.85em;margin-left:2px;display:inline-block;text-decoration:none}
.tabs a,.tabs a:hover,.secnav a,.secnav a:hover{text-decoration:none!important;color:inherit}
.tabs a{color:var(--muted)!important}.tabs a.on,.tabs a:hover{color:var(--ink)!important}
.secnav a{color:var(--ink)!important}
.linklike{text-underline-offset:3px}
.linklike:hover{color:var(--link-hover)}

/* ---------- queue rows: say they open ---------- */
table.q tbody tr:hover td:first-child,table.q tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
table.q td:first-child{position:relative;padding-right:64px}
table.q tbody tr td:first-child::after{content:"Open \203A";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--link);font-weight:600;font-size:13px;opacity:0;transition:opacity var(--motion-short) var(--motion-timing)}
table.q tbody tr:hover td:first-child::after,table.q tr.sel td:first-child::after{opacity:1}
.mname{color:var(--ink)}

/* ---------- A: spinner in the button, button locked ---------- */
.btn.is-busy,.btn.is-busy:disabled{pointer-events:none;cursor:progress;opacity:1}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:kyb-rot .7s linear infinite;flex:none}
.btn.small .spin{width:14px;height:14px}
@keyframes kyb-rot{to{transform:rotate(360deg)}}

/* ---------- B: bar across the top of the page while the next page loads ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 120ms}
#topbar i{position:absolute;inset:0;background:var(--teal);transform-origin:left}
#topbar.run{opacity:1}
#topbar.run i{animation:kyb-bar 1.6s var(--motion-timing) infinite}
@keyframes kyb-bar{0%{transform:translateX(-100%) scaleX(.4)}60%{transform:translateX(40%) scaleX(.6)}100%{transform:translateX(110%) scaleX(.3)}}

/* ---------- D: status pill for background jobs (the document reader) ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;
  background:var(--teal-soft);color:var(--ink);font-size:13px;font-weight:600;vertical-align:middle}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--link);box-shadow:0 0 0 0 rgba(105,167,239,.6);animation:kyb-pulse 1.4s ease-out infinite}
@keyframes kyb-pulse{to{box-shadow:0 0 0 8px rgba(105,167,239,0)}}
.pill .t{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
.pill.done{background:var(--green-bg);color:var(--green-ink)}
.pill.done .dot{background:var(--green-ink);animation:none}
.pill.stopped{background:var(--amber-bg);color:var(--amber-ink)}
.pill.stopped .dot{background:var(--amber-ink);animation:none}

@media (prefers-reduced-motion:reduce){
  .spin,#topbar.run i,.pill .dot{animation-duration:0s!important;animation-iteration-count:1!important}
  #topbar.run i{transform:scaleX(.6)}
}
@media (max-width:720px){.btn{height:38px}table.q td:first-child{padding-right:12px}table.q tbody tr td:first-child::after{display:none}}

/* ---------- the document chaser panel (S1) ---------- */
.chase{border-top:1px solid var(--rule);margin-top:16px;padding-top:12px}
.chase h3{margin-top:0}
.chaseform{max-width:640px}
.emailpreview{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-md);padding:10px 12px;display:grid;gap:4px}
pre.mail{margin:6px 0 0;font:13px/1.5 var(--sans);white-space:pre-wrap;color:var(--ink)}
pre.mail .line[hidden]{display:none}
table.cmp.chases{margin-top:10px}
.stackform input[type=checkbox]{width:auto;margin:.25em 0 0;accent-color:var(--teal)}