/* Staff and account tools: the view-as banner, two-step sign-in, saved replies. Tokens from panel.css. */

/* View as owner */
.viewas-bar{position:sticky;top:0;z-index:45;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;
  margin:0;padding:8px 20px;background:var(--warn-soft);color:var(--ink);border-bottom:2px solid var(--warn);font-size:14.5px}
.viewas-bar p{margin:0}
.viewas-bar form{margin:0}
.ts-nudge{margin:0;padding:8px 20px;text-align:center;font-size:14px;background:var(--sage-soft);color:var(--ink);border-bottom:1px solid var(--line)}
.ts-nudge a{font-weight:500}

/* Two-step sign-in */
.two-step h2{font-size:18px;margin:6px 0 0}
.ts-wide{width:100%}
.ts-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;margin:18px 0}
.ts-or::before,.ts-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ts-narrow{max-width:560px}
.ts-steps{padding-left:20px;display:grid;gap:10px}
.ts-qr{margin:10px 0 4px;width:220px;max-width:100%;background:#fff;border-radius:8px;padding:6px;border:1px solid var(--line)}
.ts-qr svg{display:block;width:100%;height:auto}
.ts-key{font-size:15px;letter-spacing:.04em;word-break:break-all}
.ts-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 18px;padding-left:22px;margin:14px 0}
.ts-codes code{font-size:17px;letter-spacing:.06em}
.ts-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ts-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.ts-list form{margin:0}
.ts-actions{margin-top:6px}
.two-step [data-passkey-msg],.two-step-card [data-passkey-msg]{margin-top:8px}

/* Saved replies */
.reply-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.reply-pick select{width:auto;flex:1 1 220px;max-width:360px}
.reply-pick [data-reply-note]:empty{display:none}
.req-reply{flex:1 1 100%;display:grid;gap:6px}
.req-reply textarea{min-height:44px}
.reply-new summary,.replies-list summary{cursor:pointer;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.replies-list form .btn-text{min-height:44px}

@media (max-width:720px){
  /* The staff menu is longer than a phone screen: it scrolls inside itself, so Sign out stays reachable */
  .top-menu{max-height:calc(100vh - var(--top-h,56px));max-height:calc(100dvh - var(--top-h,56px));overflow-y:auto;overscroll-behavior:contain}
  .viewas-bar{padding:8px 16px;justify-content:space-between;text-align:left}
  .viewas-bar .btn{min-height:44px}
  .ts-nudge{padding:8px 16px}
  .reply-pick select{max-width:none;min-height:44px}
  .ts-list .btn-text,.two-step-card .btn,.two-step .btn{min-height:44px}
  .members form .btn{min-height:44px}
  .ts-codes{grid-template-columns:1fr 1fr}
}
@media print{.top,.foot,.viewas-bar,.ts-nudge,.two-step .row,.crumbs{display:none!important}}