/* =========================================================================
   Pledge Agent System Tracker — sending assessments out (2026-10-08)
   The "Assessments you have sent" block on the Assessments tab, and the sheet
   that makes a link. Reads from the theme tokens, so light and dark both come
   out of one set of rules. One typeface, sized for 90% zoom.
   ========================================================================= */

.ai-sent{
  margin-top:22px; padding:18px 20px 20px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
}
.ai-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ai-h{font-size:16px;font-weight:800;color:var(--text);text-wrap:balance}
.ai-sub{margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:60ch;text-wrap:balance}
.ai-head > div{flex:1 1 320px;min-width:0}
.ai-new{flex:none;display:inline-flex;align-items:center;gap:7px}
.ai-new svg{width:15px;height:15px}

/* ---- the three counts ---- */
.ai-counts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ai-c{
  display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--muted);
}
.ai-c b{font-size:14px;font-weight:800;color:var(--text)}
.ai-c-done{background:rgba(30,154,82,.1);border-color:rgba(30,154,82,.34)}
.ai-c-done b{color:#136C3C}
.ai-c-prog{background:rgba(242,183,5,.12);border-color:rgba(242,183,5,.4)}
.ai-c-prog b{color:#8A5A05}

/* ---- the list ---- */
.ai-list{display:flex;flex-direction:column;gap:7px}
.ai-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel2);
}
.ai-row.is-off{opacity:.6}
.ai-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c,#1E9A52)}
.ai-who{flex:1 1 180px;min-width:0}
.ai-n{font-size:13.5px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-anon{font-weight:600;color:var(--muted2)}
.ai-m{margin-top:2px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-st{
  flex:none;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  background:var(--panel3);color:var(--muted);border:1px solid var(--line);
}
.ai-st-done{background:rgba(30,154,82,.14);color:#136C3C;border-color:rgba(30,154,82,.4)}
.ai-st-prog{background:rgba(242,183,5,.14);color:#8A5A05;border-color:rgba(242,183,5,.42)}
.ai-st-open{background:rgba(45,110,170,.1);color:#1C4F80;border-color:rgba(45,110,170,.3)}
.ai-st-revoked{background:var(--panel3);color:var(--muted2)}
.ai-acts{flex:none;display:flex;flex-wrap:wrap;gap:5px}
.ai-a{
  appearance:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;
  height:28px;padding:0 11px;border-radius:7px;
  border:1px solid var(--line2);background:var(--panel);color:var(--text);
  transition:background .14s,border-color .14s;
}
.ai-a:hover:not(:disabled){background:var(--panel3);border-color:#1E9A52}
.ai-a:disabled{opacity:.5;cursor:default}
.ai-a-primary{background:#17834A;border-color:transparent;color:#fff}
.ai-a-primary:hover:not(:disabled){background:#136C3C;border-color:transparent}
.ai-a-quiet{color:var(--muted);border-color:var(--line)}

/* ---- empty, loading, error ---- */
.ai-empty{padding:22px 16px;text-align:center;border:1px dashed var(--line2);border-radius:11px;background:var(--panel2)}
.ai-empty-t{font-size:14px;font-weight:800;color:var(--muted);text-wrap:balance}
.ai-empty-s{margin-top:5px;font-size:12px;color:var(--muted2);line-height:1.55;max-width:52ch;margin-inline:auto;text-wrap:balance}
.ai-loading{padding:18px 4px;font-size:12.5px;color:var(--muted2);font-weight:600}
.ai-err{
  margin-top:10px;padding:9px 11px;border-radius:8px;font-size:12px;font-weight:600;
  background:rgba(190,62,42,.08);border:1px solid rgba(190,62,42,.26);color:#A8341F;text-wrap:pretty;
}

/* ---- the send sheet ---- */
.ai-modal{max-width:560px}
.ai-body .field{margin-bottom:13px}
.ai-body label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:5px}
.ai-opt{color:var(--muted2);font-weight:600}
.ai-i{
  width:100%;height:40px;padding:0 12px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--panel);color:var(--text);
  font:inherit;font-size:14px;
}
select.ai-i{height:42px}
.ai-i:focus{outline:none;border-color:#1E9A52;box-shadow:0 0 0 3px rgba(30,154,82,.14)}
.ai-made{
  margin-top:4px;padding:14px;border-radius:11px;
  background:rgba(30,154,82,.07);border:1px solid rgba(30,154,82,.34);
}
.ai-made-t{font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#136C3C}
.ai-made-u{margin-top:7px}
.ai-made-u .ai-i{font-size:12.5px;background:var(--panel)}
.ai-made-r{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ai-made-r .btn-row{font-size:12px;text-decoration:none;display:inline-flex;align-items:center}
.ai-made-s{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.5;text-wrap:balance}

/* ===================================================================== dark */
html[data-theme="dark"] .ai-sent,
html[data-theme="dark"] .ai-row,
html[data-theme="dark"] .ai-empty{background:rgba(255,255,255,.03)}
html[data-theme="dark"] .ai-c-done{background:rgba(63,193,120,.14);border-color:rgba(63,193,120,.4)}
html[data-theme="dark"] .ai-c-done b{color:#9FD8B5}
html[data-theme="dark"] .ai-c-prog{background:rgba(248,194,30,.14);border-color:rgba(248,194,30,.4)}
html[data-theme="dark"] .ai-c-prog b{color:#F3D083}
html[data-theme="dark"] .ai-st-done{background:rgba(63,193,120,.16);color:#9FD8B5;border-color:rgba(63,193,120,.42)}
html[data-theme="dark"] .ai-st-prog{background:rgba(248,194,30,.16);color:#F3D083;border-color:rgba(248,194,30,.42)}
html[data-theme="dark"] .ai-st-open{background:rgba(120,175,235,.14);color:#A9CCEE;border-color:rgba(120,175,235,.34)}
html[data-theme="dark"] .ai-a-primary{background:#1E9A52}
html[data-theme="dark"] .ai-a-primary:hover:not(:disabled){background:#23AC5C}
html[data-theme="dark"] .ai-made{background:rgba(63,193,120,.1);border-color:rgba(63,193,120,.34)}
html[data-theme="dark"] .ai-made-t{color:#9FD8B5}
html[data-theme="dark"] .ai-err{background:rgba(240,120,95,.1);border-color:rgba(240,120,95,.3);color:#F0A08C}

/* ===================================================================== mobile */
@media (max-width:760px){
  .ai-sent{padding:15px 14px 16px;border-radius:12px}
  .ai-new{width:100%;justify-content:center}
  .ai-row{flex-wrap:wrap;gap:9px}
  .ai-who{flex:1 1 100%;order:1}
  .ai-dot{order:0}
  .ai-st{order:2}
  /* the actions take their own full-width row so each one is a real tap target */
  .ai-acts{order:3;flex:1 1 100%}
  .ai-a{flex:1 1 auto;height:34px}
  .ai-made-r .btn-row{flex:1 1 auto;justify-content:center}
  .ai-i{font-size:16px}   /* 16px stops iOS zooming the page on focus */
}

/* ---- the calendar's read-only state ----
   Lives here rather than in a new file: one small block, same drop. */
.cal-bar-ro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cal-ro-btn{
  appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  height:32px;padding:0 13px;border-radius:8px;border:0;
  background:#17834A;color:#fff;white-space:nowrap;
}
.cal-ro-btn:hover{background:#136C3C}
html[data-theme="dark"] .cal-ro-btn{background:#1E9A52}
html[data-theme="dark"] .cal-ro-btn:hover{background:#23AC5C}
@media (max-width:760px){
  .cal-bar-ro{width:100%;justify-content:flex-start}
  .cal-ro-btn{flex:1 1 auto;height:36px}
}

/* ---- the Assessments column on the team table ----
   Six dots and a count: who has done theirs, at a glance, sortable. */
.ar-cell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ar-dots{display:inline-flex;gap:3px}
.ar-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.ar-dot.on{background:var(--c,#3FC178);box-shadow:none}
.ar-n{font-size:11.5px;font-weight:800;color:#CFE0D5;font-variant-numeric:tabular-nums}
.ar-all .ar-n{color:#9FD8B5}
.ar-none .ar-n{color:#8FA797}
.ar-wait{display:inline-block;width:52px;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
/* the team table sits on a light panel in light mode */
/* :not(.on) matters — without it this beats .ar-dot.on on specificity and every
   dot comes out grey in light mode, however many are done */
html:not([data-theme="dark"]) .ar-dot:not(.on){background:rgba(11,43,29,.14);box-shadow:inset 0 0 0 1px rgba(11,43,29,.08)}
html:not([data-theme="dark"]) .ar-n{color:var(--text)}
html:not([data-theme="dark"]) .ar-all .ar-n{color:#136C3C}
html:not([data-theme="dark"]) .ar-none .ar-n{color:var(--muted2)}
html:not([data-theme="dark"]) .ar-wait{background:rgba(11,43,29,.09)}
@media (max-width:900px){
  /* the dots are the signal; the count alone still answers "have they" */
  .td2-assess .ar-dots{display:none}
}