# Plan: tstp_console.css — card structure and form/data styling

objectives:
  - Make console (Twitter, Reddit, and other tools) look professional with card-like structure.
  - Consistently style inputs, buttons, tables, lists, modals, and data blocks without changing tool HTML.
  - Centralize all structural console CSS so inline styles in tools can be removed or overridden.

completed:
  - Nested sections: details/subsections inside .section-body styled as sub-cards (border, padding, background).
  - Form controls: all input/textarea/select in .section-body and .tstp-console-card get shared styling (padding, border, radius, focus).
  - Labels: block labels with spacing; first label margin-top 0.
  - Section body typography: p margins; p strong as subsection titles with top margin.
  - Tables: any table in .section-body/.tstp-console-card gets data-table styling (header, cells, tfoot, borders).
  - Token row: .token-row flex layout; input flex 1, buttons aligned.
  - Grant row: .section-body > input[type="email"] inline with following button.
  - Form row: .form-row / .input-button-row for optional flex layout.
  - Stats: .stat-row, .stat-label, .stat-value; .stats-stacked spacing.
  - List/content divs: #*-list, #*-content margin and overflow-x for tables.
  - Alerts: .alert in section-body/card padding and radius.
  - Forms: form in section-body label/input/button spacing; form button[type="submit"] without .tstp-console-btn gets primary button structure.
  - pre/code: raw pre and code in section-body styled like .tstp-console-pre / .tstp-console-code.
  - Table extras: .token-limit-input and .tstp-console-btn inside tables sized for cells.
  - Modals: .modal-overlay, .modal-overlay.is-open, .modal-content, .modal-confirm-msg, .modal-actions; .preview-modal-content, .preview-modal-tabs (Theme Manager).
  - Widget hint: .widget-hint, .widget-hint summary, .widget-hint-body (How to use blocks).
  - Widget result: .widget-result (padding, border, margin); .widget-success / .widget-error (vars: --tstp-success-border, --tstp-error-border, etc.).
  - .btn and .btn-secondary: same structure as .tstp-console-btn / .tstp-console-btn-secondary (Reddit list cards, index modals).
  - Reddit list-post cards: .widget-list-posts-cards, .widget-list-posts-card, .post-meta, .meta-item, .meta-label, .post-title, .post-extra, .post-actions.
  - input[type="number"] in section-body: max-width 120px.
  - :root vars: --tstp-success-border, --tstp-success-bg, --tstp-error-border, --tstp-error-bg, --tstp-surface-hover.

validation:
  - CSS only; no PHP/HTML changes in tools.
  - Colors remain via var(--tstp-*).
  - Lint: no errors on tstp_console.css.

testing:
  - Load Twitter, Reddit, Notes, OpenAI, Theme Manager consoles and confirm: cards, forms, tables, modals, widget hints, widget results, list-post cards, and unclassed submit buttons use the shared structure.
