/* The Clinicians page for Opal's own team: invites and the queue on the left, one clinician's checks on the right. On a
   phone the queue comes first and a clinician opens on her own. Built on signup.css. */

.review { display: flex; min-height: calc(100vh - 64px); border-top: 1px solid var(--line); }
.queue { flex: 0 0 360px; min-width: 0; padding: 28px 24px 40px; border-right: 1px solid var(--line); }
.queue h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 32px; letter-spacing: -0.7px; }
.queue .sub { margin-top: 4px; }

.invite { margin-top: 24px; }
.invite form { display: flex; gap: 8px; }
.invite .input { flex: 1; min-width: 0; }
.invite .kind { flex: none; width: auto; }
.invite .primary { flex: none; width: auto; padding: 0 16px; }
.made { margin-top: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.made p { margin: 0 0 8px; font-size: 14px; color: var(--gray); }
.made code { display: block; margin-bottom: 10px; font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }
.made .secondary { height: 40px; }

.setup { margin-top: 28px; }
.setup h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.setup-item { padding: 14px 0; border-top: 1px solid var(--line); }
.setup-item:last-child { border-bottom: 1px solid var(--line); }
.setup-item .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.setup-item b { font-size: 15px; font-weight: 500; }
.setup-item p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray); overflow-wrap: anywhere; }
.setup-form { display: grid; gap: 10px; margin-top: 12px; }
.setup-item .row-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.setup-item .row-buttons .primary, .setup-item .row-buttons .secondary { width: auto; height: 42px; padding: 0 16px;
  font-size: 14px; }
.setup-panel { padding: 0 0 12px; }
.setup-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; }
.setup-panel > summary::-webkit-details-marker { display: none; }
.setup-panel > summary::after { content: "+"; color: var(--gray); font-size: 18px; font-weight: 400; }
.setup-panel[open] > summary::after { content: "−"; }
.setup-panel > summary .status { margin-left: auto; font-size: 12px; }
.setup-panel:not([open]) { padding-bottom: 0; }
.setup-panel[open] > summary { padding-bottom: 4px; }
.setup-panel .setup-form { margin-top: 14px; }
.setup-panel input[readonly] { color: var(--gray); background: var(--fill); }
.readiness-items { list-style: none; padding: 0; margin: 14px 0 0; }
.readiness-items > li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.readiness-items .top-line { align-items: baseline; gap: 10px; }
.readiness-items p { font-size: 12px; }

.filters { display: flex; gap: 18px; max-width: 100%; overflow-x: auto; margin: 28px 0 4px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.filters button { flex: none; min-height: 44px; white-space: nowrap; padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font-size: 14px; color: var(--gray); }
.filters button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--line); }
.list .pick { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border: 0; background: none;
  text-align: left; }
.list .pick[aria-current="true"] b { text-decoration: underline; text-underline-offset: 3px; }
.invite-row { padding: 12px 0; align-items: center; }
.invite-row small { font-size: 13px; color: var(--gray); }
.list .top-line { display: flex; justify-content: space-between; gap: 10px; }
.list b { font-size: 15px; font-weight: 500; }
.list small { font-size: 13px; color: var(--gray); }
.list .none { padding: 16px 0; font-size: 14px; color: var(--gray); }
.status { flex: none; font-size: 13px; color: var(--gray); }
.status.strong { color: var(--ink); }

.detail { flex: 1; min-width: 0; max-width: 760px; padding: 28px 40px 80px; }
.empty { color: var(--gray); padding: 40px 0; }
.back-link { display: none; margin-bottom: 18px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--gray);
  text-decoration: underline; text-underline-offset: 2px; }
.detail h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.6px; }
.detail .sub { margin-top: 6px; }

.block { margin-top: 36px; }
.block > h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.block > .lede { margin: 0 0 6px; font-size: 14px; color: var(--gray); }
.approval-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.approval-buttons .primary, .approval-buttons .secondary { width: auto; min-height: 44px; padding: 10px 16px; }
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rows > li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 15px; }
.rows > li > span:first-child { color: var(--gray); }
.rows > li > span:last-child { text-align: right; overflow-wrap: anywhere; }

.lic { padding: 16px 0; border-top: 1px solid var(--line); }
.lic:last-child { border-bottom: 1px solid var(--line); }
.lic-head { display: flex; justify-content: space-between; gap: 12px; }
.lic-head b { font-size: 15px; font-weight: 500; }
.lic p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--gray); }
.lookups { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.decide .full { grid-column: 1 / -1; }
.decide .row-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.decide .row-buttons .primary, .decide .row-buttons .secondary { width: auto; height: 42px; padding: 0 16px; font-size: 14px; }
.only-admin { margin: 10px 0 0; font-size: 13px; color: var(--gray); }
.npi { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px;
  line-height: 1.55; color: var(--gray); }
.npi b { color: var(--ink); font-weight: 500; }
.npi ul { margin: 8px 0; padding-left: 18px; }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 14px; z-index: 9; }

@media (max-width: 860px) {
  .review { display: block; }
  .queue { border-right: 0; padding: 20px 24px 40px; }
  .review.open .queue { display: none; }
  .review:not(.open) .detail { display: none; }
  .detail { padding: 20px 24px 72px; }
  .back-link { display: inline-block; }
  .decide { grid-template-columns: 1fr; }
  .invite form { flex-wrap: wrap; }
  .invite form > .input:not(.kind) { flex-basis: 100%; }
  .invite form > .kind { flex: 1; min-width: 0; }
  .list .top-line { flex-wrap: wrap; }
}

.queue-controls { margin-top: 22px; }
.signup-tools { display: flex; align-items: center; gap: 10px; }
.signup-search { flex: 1; min-width: 0; width: 100%; }
.signup-tools .secondary { flex: none; width: auto; min-height: 44px; padding: 10px 14px; font-size: 13px; }
.refresh-status { min-height: 19px; margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray); }
.queue-controls + .filters { margin-top: 8px; }
.filter-count { display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: #f1f1f1; color: var(--gray); font-size: 11px; }
.filters button[aria-selected="true"] .filter-count { background: var(--ink); color: #fff; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.invite-actions .quiet { min-height: 44px; padding: 8px 0; }
.invite-list .invite-row { gap: 8px 14px; }
.past-invites { margin-top: 14px; }
.past-invites summary { min-height: 44px; padding: 12px 0; color: var(--gray); font-size: 13px; cursor: pointer; }
.past-invites summary:focus-visible { outline: 2px solid #747474; outline-offset: 3px; }
@media (max-width: 390px) {
  .signup-tools { gap: 8px; }
  .signup-tools .secondary { padding-left: 12px; padding-right: 12px; }
}
.recovered-invite { display: block; width: 100%; min-width: 0; margin-bottom: 14px; font-size: 12px; }
.legacy-invite-note { align-self: center; max-width: 190px; font-size: 12px; line-height: 1.5; color: var(--gray); }
.signup-link-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.signup-copy { flex: none; min-height: 44px; padding: 8px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.signup-link-tools .refresh-status { margin: 0; }
.signup-link { display: block; width: 100%; min-width: 0; margin: 2px 0 10px; font-size: 12px; }

.model-usage { margin: 5px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.model-usage > summary { min-height: 44px; padding: 12px 0; font-size: 13px; color: var(--gray); cursor: pointer; }
.model-usage > summary:focus-visible { outline: 2px solid #747474; outline-offset: 3px; }
.model-usage-body { padding: 2px 0 15px; }
.model-usage-total { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray); }
.model-usage-total strong { color: var(--ink); font-size: 21px; font-weight: 500; }
.model-usage-today { margin: 4px 0 15px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.model-usage-table-wrap { max-height: 270px; overflow-y: auto; }
.model-usage-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.model-usage-table caption { margin-bottom: 8px; text-align: left; color: var(--gray); font-size: 12px; }
.model-usage-table th, .model-usage-table td { padding: 9px 4px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.model-usage-table th:first-child { width: 48%; padding-left: 0; text-align: left; }
.model-usage-table thead th { color: var(--gray); }
.model-usage-note { margin: 10px 0 0; color: var(--gray); font-size: 12px; line-height: 1.6; }
.model-usage-updated { margin: 8px 0 0; color: var(--gray); font-size: 11px; line-height: 1.6; }
.model-usage-coverage summary { min-height: 44px; padding: 12px 0 8px; color: var(--gray); font-size: 12px; cursor: pointer; }
.model-usage-coverage summary:focus-visible { outline: 2px solid #747474; outline-offset: 3px; }
.model-usage-coverage .model-usage-note { margin-top: 0; }