/* =========================================================================
   TRACE ACT (tact-): the "Take action" section under a target board.
   One collapsed details block in the board's paper shell; inside, three numbered
   cards (the eye path: 1, 2, 3), one review panel that opens below them, and the
   quiet rows (Reddit, the letter, Google). Reads the board's tokens (.ttg sets
   them), works at 390px with no sideways scroll. No em dashes.
   ========================================================================= */
.tact{ margin:18px 0 0; border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:var(--ttg-r,14px); background:var(--ttg-card,#fff); color:var(--ttg-ink,#171310); font:400 14px/1.5 var(--ttg-sans,Inter,system-ui,sans-serif); }
.tact *{ box-sizing:border-box; }
.tact-sum{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none; }
.tact-sum::-webkit-details-marker{ display:none; }
.tact-sum-t{ flex:none; font:600 17px/1.2 var(--ttg-serif,Georgia,serif); letter-spacing:-.01em; }
.tact-sum-l{ flex:1 1 auto; min-width:0; font:500 12.5px/1.4 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-muted,#6f685e); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tact-sum-chev{ flex:none; width:9px; height:9px; border-right:2px solid var(--ttg-ink-soft,#433d36); border-bottom:2px solid var(--ttg-ink-soft,#433d36); transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .16s ease; }
.tact[open] .tact-sum-chev{ transform:rotate(-135deg); margin-top:4px; }
.tact[open] .tact-sum{ border-bottom:1px solid var(--ttg-line,#e4ddd1); }
.tact-sum:hover .tact-sum-t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.tact-body{ padding:16px 18px 18px; }
.tact-lead{ margin:0 0 14px; max-width:72ch; font-size:13.5px; line-height:1.5; color:var(--ttg-ink-soft,#433d36); }
.tact-fine{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--ttg-muted,#6f685e); }
.tact-empty{ margin:0; color:var(--ttg-muted,#6f685e); }
.tact-link{ font:600 12px/1 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-wi,#0a91ae); text-decoration:none; }
.tact-link:hover{ text-decoration:underline; }

/* ---- sign-in strip ---- */
.tact-auth{ margin:0 0 14px; }
.tact-auth-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:12px; background:var(--ttg-paper,#efeae1); }
.tact-auth-row p{ flex:1 1 260px; margin:0; font-size:13px; line-height:1.45; color:var(--ttg-ink-soft,#433d36); }
.tact-auth-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--ttg-line-2,#d8cfc0); }
.tact-auth-ok .tact-auth-dot{ background:#2a9d5c; box-shadow:0 0 0 3px rgba(42,157,92,.18); }
.tact-auth-no .tact-auth-dot{ background:var(--ttg-ag,#e0522f); }
.tact-auth-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; }
.tact-auth-form input{ font:500 13.5px/1.2 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-ink,#171310); background:#fff; border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:100px; padding:10px 14px; min-width:0; width:230px; max-width:100%; }
.tact-auth-form input:focus{ outline:2px solid var(--ttg-wi,#0a91ae); outline-offset:1px; }

/* ---- the three cards ---- */
.tact-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tact-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 16px 14px 16px; border:1px solid var(--ttg-line,#e4ddd1); border-radius:12px; background:linear-gradient(180deg,#fff,var(--ttg-paper,#efeae1)); min-width:0; }
.tact-n{ position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%; background:var(--ttg-ink,#171310); color:#fff; font:600 12px/24px var(--ttg-mono,ui-monospace,monospace); text-align:center; }
.tact-card h3{ margin:0 36px 0 0; font:600 15.5px/1.25 var(--ttg-serif,Georgia,serif); letter-spacing:-.01em; }
.tact-big{ margin:4px 0 0; font:600 34px/1 var(--ttg-serif,Georgia,serif); letter-spacing:-.02em; color:var(--ttg-ink,#171310); font-variant-numeric:tabular-nums; }
.tact-big small{ display:block; margin-top:5px; font:500 11px/1.3 var(--ttg-mono,ui-monospace,monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--ttg-muted,#6f685e); }
.tact-p{ margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--ttg-ink-soft,#433d36); flex:1 1 auto; }
.tact-saved{ margin:0; font:500 12px/1.45 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-wi,#0a91ae); }
.tact-saved:empty{ display:none; }
.tact-act{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.tact-btn{ display:inline-flex; align-items:center; font:700 12.5px/1 var(--ttg-sans,Inter,system-ui,sans-serif); color:#fff; background:var(--ttg-ink,#171310); border:1px solid var(--ttg-ink,#171310); border-radius:100px; padding:10px 15px; cursor:pointer; text-decoration:none; }
.tact-btn:hover{ filter:brightness(1.15); }
.tact-btn:disabled{ opacity:.45; cursor:default; filter:none; }
.tact-btn-q{ background:transparent; color:var(--ttg-ink,#171310); border-color:var(--ttg-line-2,#d8cfc0); }
.tact-btn-q:hover{ border-color:var(--ttg-ink-soft,#433d36); filter:none; }
.tact-msg{ font:500 12px/1.4 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-wi,#0a91ae); }
.tact-msg:empty{ display:none; }
.tact-chip{ display:inline-flex; align-items:center; padding:2px 7px; border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:999px; font:500 10px/1.3 var(--ttg-sans,Inter,system-ui,sans-serif); letter-spacing:.04em; text-transform:uppercase; color:var(--ttg-ink-soft,#433d36); background:var(--ttg-paper,#efeae1); vertical-align:middle; cursor:help; }
.tact-more{ margin-top:6px; }
.tact-more > summary{ cursor:pointer; font:600 12.5px/1.2 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-wi,#0a91ae); padding:4px 0; list-style:none; }
.tact-more > summary::-webkit-details-marker{ display:none; }
.tact-more > summary:before{ content:"+ "; }
.tact-more[open] > summary:before{ content:"\2212  "; }
.tact-more[open] > summary{ margin-bottom:6px; }

/* ---- the review panel ---- */
.tact-panel{ margin-top:14px; }
.tact-pn{ padding:16px 16px 14px; border:1px solid var(--ttg-ink,#171310); border-radius:12px; background:#fff; }
.tact-pn h4{ margin:0; font:600 19px/1.2 var(--ttg-serif,Georgia,serif); letter-spacing:-.015em; }
.tact-pn h5{ display:flex; align-items:baseline; gap:8px; margin:0 0 8px; font:600 14.5px/1.2 var(--ttg-serif,Georgia,serif); }
.tact-pn h5 span{ font:600 12px/1 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-muted,#6f685e); }
.tact-pn-sub{ margin:6px 0 0; max-width:76ch; font-size:13px; line-height:1.5; color:var(--ttg-ink-soft,#433d36); }
.tact-lab{ display:block; margin:14px 0 6px; font:700 10.5px/1 var(--ttg-mono,ui-monospace,monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--ttg-muted,#6f685e); }
.tact-fixed{ margin:0; font-size:13px; color:var(--ttg-ink-soft,#433d36); }
.tact-radios{ display:flex; flex-direction:column; gap:6px; }
.tact-radio{ display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:10px; cursor:pointer; font-size:13.5px; line-height:1.4; }
.tact-radio input{ margin:3px 0 0; accent-color:var(--ttg-ink,#171310); }
.tact-radio em{ font:600 10.5px/1 var(--ttg-mono,ui-monospace,monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--ttg-wi,#0a91ae); margin-left:6px; font-style:normal; }
.tact-rec{ border-color:var(--ttg-ink,#171310); background:var(--ttg-paper,#efeae1); }
.tact-radio:has(input:checked){ border-color:var(--ttg-ink,#171310); box-shadow:inset 0 0 0 1px var(--ttg-ink,#171310); }
.tact-ck-line{ display:flex; align-items:flex-start; gap:10px; margin:10px 0 0; font-size:13.5px; line-height:1.45; cursor:pointer; }
.tact-ck-line input{ margin:3px 0 0; accent-color:var(--ttg-ink,#171310); }
.tact-pickbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 8px; }
.tact-pickn{ font:600 12px/1 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-muted,#6f685e); margin-left:auto; }
.tact-grp{ margin-top:14px; padding-top:12px; border-top:1px solid var(--ttg-line,#e4ddd1); }
.tact-grp header .tact-lab{ margin-top:4px; }
.tact-grp textarea, .tact-ta{ display:block; width:100%; margin-top:4px; font:400 13px/1.5 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-ink,#171310); background:var(--ttg-paper,#efeae1); border:1px solid var(--ttg-line-2,#d8cfc0); border-radius:10px; padding:10px 12px; resize:vertical; }
.tact-ta{ font-family:var(--ttg-mono,ui-monospace,monospace); font-size:12px; white-space:pre-wrap; }

/* ---- lists ---- */
.tact-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.tact-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--ttg-line,#e4ddd1); border-radius:10px; background:var(--ttg-paper,#efeae1); min-width:0; }
.tact-row-off{ opacity:.55; }
.tact-ck{ flex:none; display:flex; align-items:center; padding-top:2px; }
.tact-ck input{ width:16px; height:16px; margin:0; accent-color:var(--ttg-ink,#171310); cursor:pointer; }
.tact-row-m{ flex:1 1 auto; min-width:0; }
.tact-row-h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font:500 12px/1.3 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-muted,#6f685e); }
.tact-row-h b{ font:600 13px/1.3 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-ink,#171310); overflow-wrap:anywhere; }
.tact-row-h em{ font:500 11px/1.3 var(--ttg-mono,ui-monospace,monospace); color:var(--ttg-wi,#0a91ae); font-style:normal; }
.tact-row-h .tact-link{ margin-left:auto; }
.tact-st{ font:600 10.5px/1 var(--ttg-mono,ui-monospace,monospace); letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:100px; border:1px solid currentColor; font-style:normal; color:var(--ttg-muted,#6f685e); }
.tact-st-against{ color:var(--ttg-ag,#e0522f); }
.tact-st-with{ color:var(--ttg-wi,#0a91ae); }
.tact-q{ display:block; margin:5px 0 0; font:italic 400 13px/1.45 var(--ttg-serif,Georgia,serif); color:var(--ttg-ink-soft,#433d36); overflow-wrap:anywhere; }
.tact-q:before,.tact-q:after{ content:""; }

/* ---- the quiet rows ---- */
.tact-quiet{ margin-top:14px; display:grid; gap:8px; }
.tact-row-d{ border:1px solid var(--ttg-line,#e4ddd1); border-radius:10px; background:var(--ttg-paper,#efeae1); }
.tact-row-d > summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:10px 14px; cursor:pointer; list-style:none; font-size:13px; line-height:1.45; }
.tact-row-d > summary::-webkit-details-marker{ display:none; }
.tact-row-d > summary b{ font:600 13.5px/1.3 var(--ttg-sans,Inter,system-ui,sans-serif); color:var(--ttg-ink,#171310); }
.tact-row-d > summary span{ color:var(--ttg-ink-soft,#433d36); }
.tact-d-body{ padding:4px 14px 14px; }
.tact-d-body .tact-list{ margin-top:10px; }
.tact-google{ margin:4px 2px 0; font-size:12.5px; line-height:1.55; color:var(--ttg-muted,#6f685e); }
.tact-google .tact-link{ font-size:12.5px; font-weight:600; }

@media (max-width:760px){
  .tact-cards{ grid-template-columns:minmax(0,1fr); }
  .tact-sum{ flex-wrap:wrap; }
  .tact-sum-l{ flex-basis:100%; order:3; white-space:normal; }
  .tact-sum-chev{ margin-left:auto; }
  .tact-body, .tact-sum{ padding-left:14px; padding-right:14px; }
}