/* =============================================================================
 *  Required Actions — the block that sits at the top of every tab.
 *
 *  Styled entirely from each page's own design tokens (--ink, --accent, --crit,
 *  …), which A-Star/Velocity/home (page.css) and HPD (its own :root) both
 *  define under the same names. So the same block reads as native on every tab,
 *  in light and dark, without a per-page stylesheet.
 * ========================================================================== */

.s3-actions{
  background:var(--surface,#fff); border:1px solid var(--line,rgba(15,90,140,.16));
  border-radius:var(--radius,12px); box-shadow:var(--shadow,0 8px 26px rgba(18,37,60,.08));
  margin:0 0 26px; overflow:hidden;
}

/* ---------- header ---------- */
.s3a-top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line,rgba(15,90,140,.16));
  background:var(--surface-2,#eef3f9);
}
.s3a-title{
  font-family:var(--mono,monospace); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink,#0e2136); font-weight:700; margin-right:2px;
}
.s3a-counts{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.s3a-count{
  font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  color:var(--neutral,#5f7183); background:var(--neutral-bg,rgba(95,113,131,.13));
}
.s3a-count.now{color:var(--crit,#c4342f); background:var(--crit-bg,rgba(196,52,47,.12))}
.s3a-count.waiting{color:var(--warn,#b3760f); background:var(--warn-bg,rgba(179,118,15,.14))}
.s3a-spacer{flex:1}
.s3a-money{
  font-family:var(--mono,monospace); font-size:12px; font-weight:700;
  color:var(--accent,#8a6a0e); white-space:nowrap;
}
.s3a-money small{display:block; font-size:9px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted,#748498); text-align:right}
.s3a-btn{
  font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.08em; cursor:pointer;
  color:var(--ink-2,#42566d); background:var(--surface,#fff);
  border:1px solid var(--line-2,rgba(15,90,140,.28)); border-radius:7px; padding:5px 11px;
  transition:.14s;
}
.s3a-btn:hover{border-color:var(--accent,#8a6a0e); color:var(--ink,#0e2136)}
.s3a-btn.primary{background:var(--accent,#8a6a0e); border-color:var(--accent,#8a6a0e); color:var(--surface,#fff)}
.s3a-btn:disabled{opacity:.5; cursor:default}

/* ---------- scope filter ---------- */
.s3a-scopes{
  display:flex; gap:6px; flex-wrap:wrap; padding:9px 16px;
  border-bottom:1px solid var(--line,rgba(15,90,140,.16));
}
.s3a-scope{
  font-family:var(--mono,monospace); font-size:10.5px; cursor:pointer;
  color:var(--muted,#748498); background:none;
  border:1px solid var(--line,rgba(15,90,140,.16)); border-radius:999px; padding:3px 10px;
}
.s3a-scope:hover{color:var(--ink,#0e2136); border-color:var(--line-2,rgba(15,90,140,.28))}
.s3a-scope.on{
  color:var(--ink,#0e2136); border-color:var(--accent,#8a6a0e);
  background:color-mix(in srgb, var(--accent,#8a6a0e) 12%, transparent); font-weight:600;
}

/* ---------- rows ---------- */
.s3a-list{display:flex; flex-direction:column}
.s3a-row{
  display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:start;
  padding:12px 16px; border-bottom:1px solid var(--line,rgba(15,90,140,.16));
}
.s3a-row:last-child{border-bottom:none}
.s3a-row.done{opacity:.5}
.s3a-row.done .s3a-t{text-decoration:line-through}

.s3a-state{
  font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; text-align:center;
  padding:4px 0; border-radius:6px; margin-top:1px;
}
.s3a-state.now{color:var(--crit,#c4342f); background:var(--crit-bg,rgba(196,52,47,.12))}
.s3a-state.waiting{color:var(--warn,#b3760f); background:var(--warn-bg,rgba(179,118,15,.14))}
.s3a-state.next{color:var(--neutral,#5f7183); background:var(--neutral-bg,rgba(95,113,131,.13))}
.s3a-state.done{color:var(--good,#0a8f0a); background:var(--good-bg,rgba(10,143,10,.12))}

.s3a-main{min-width:0}
.s3a-t{font-size:14px; font-weight:600; color:var(--ink,#0e2136); line-height:1.35}
.s3a-d{font-size:12.5px; line-height:1.55; color:var(--ink-2,#42566d); margin-top:4px}
.s3a-meta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:7px;
  font-family:var(--mono,monospace); font-size:10.5px; color:var(--muted,#748498);
}
.s3a-meta .tag{
  color:var(--hud,#0f86ac); border:1px solid var(--line,rgba(15,90,140,.16));
  border-radius:5px; padding:1px 7px;
}
.s3a-meta .who{color:var(--warn,#b3760f)}
.s3a-meta .late{color:var(--crit,#c4342f); font-weight:700}
.s3a-meta a{color:var(--hud,#0f86ac)}
.s3a-meta .bkt{
  color:var(--ink,#0e2136); font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  text-decoration:none; font-size:9.5px;
}

.s3a-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.s3a-amt{font-family:var(--mono,monospace); font-size:13px; font-weight:700; color:var(--accent,#8a6a0e); white-space:nowrap}
.s3a-due{font-family:var(--mono,monospace); font-size:10.5px; color:var(--muted,#748498); white-space:nowrap}
.s3a-tools{display:flex; gap:5px; opacity:0; transition:opacity .12s}
.s3a-row:hover .s3a-tools, .s3a-row:focus-within .s3a-tools{opacity:1}
.s3a-tool{
  font-family:var(--mono,monospace); font-size:10px; cursor:pointer; padding:3px 8px;
  color:var(--muted,#748498); background:none;
  border:1px solid var(--line,rgba(15,90,140,.16)); border-radius:6px;
}
.s3a-tool:hover{color:var(--ink,#0e2136); border-color:var(--line-2,rgba(15,90,140,.28))}

/* ---------- editor / add form ---------- */
.s3a-form{padding:14px 16px; border-bottom:1px solid var(--line,rgba(15,90,140,.16)); background:var(--inset,#e9eff6)}
.s3a-form .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px}
.s3a-form label{
  display:block; font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,#748498); margin:0 0 3px;
}
.s3a-form input, .s3a-form textarea, .s3a-form select{
  width:100%; font:13px var(--sans,system-ui); color:var(--ink,#0e2136);
  background:var(--surface,#fff); border:1px solid var(--line-2,rgba(15,90,140,.28));
  border-radius:7px; padding:7px 9px;
}
.s3a-form textarea{min-height:58px; resize:vertical; line-height:1.5}
.s3a-form .wide{grid-column:1/-1}
.s3a-form .row-btns{display:flex; gap:8px; margin-top:10px; align-items:center}
.s3a-form .warn-text{font-size:11.5px; color:var(--warn,#b3760f); margin-left:auto}

/* ---------- footer / empty / notes ---------- */
.s3a-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px; font-family:var(--mono,monospace); font-size:10.5px;
  color:var(--muted,#748498); background:var(--surface-2,#eef3f9);
  border-top:1px solid var(--line,rgba(15,90,140,.16));
}
.s3a-foot .note{margin-left:auto}
.s3a-empty{padding:26px 16px; text-align:center; color:var(--muted,#748498); font-size:13px}
.s3a-group{
  padding:9px 16px 3px; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted,#748498); background:var(--inset,#e9eff6);
  border-bottom:1px solid var(--line,rgba(15,90,140,.16));
}
.s3a-group a{color:var(--ink,#0e2136); text-decoration:none; font-weight:700}
.s3a-group a:hover{color:var(--accent,#8a6a0e)}

@media (max-width:640px){
  .s3a-row{grid-template-columns:64px 1fr; }
  .s3a-right{grid-column:2; align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap}
  .s3a-tools{opacity:1}
}