/* ---- tweet-generator.css: the tweet generator's own styles (outside/_partials/tools/tweet-generator.html, on
        outside/tools/tweet-generator.html in the article hero's place), loaded by that page only, after
        outside.css. Laid out as the legacy tool was (Dave, 2026-10-23), not in the shared tool's half and half:
        one band across the page on a faint dotted near-white, the title, then the editor on the left (two
        fifths) and the tweet on the right (three fifths), so it shows at its real size. Over the tweet its size
        and background, under it Download. On a phone the editor comes first with a bar held at its foot (See
        your tweet, Download), then the tweet. The post inside the preview is drawn as X draws one, in X's own
        colours and system font, so the saved picture looks like the real thing ---- */

[data-tool="tweet-generator"] [hidden] { display: none !important; }

/* the band: the title across the top, then the editor and the tweet side by side from 1000 across */
.tg { --dot: rgba(17, 17, 17, .09); background-color: #fafaf8; }
.tg-in { box-sizing: border-box; display: grid; gap: var(--space-6); max-width: 1520px; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.tg-left { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.tg-right { display: grid; gap: var(--space-5); justify-items: center; align-content: start; min-width: 0; }
@container (min-width: 1000px) {
    .tg-in { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8) clamp(40px, 5vw, 96px); padding: var(--space-12) clamp(32px, 4vw, 64px) var(--space-14); }
    .tg-top { grid-column: 1 / -1; }
    .tg-right { position: sticky; top: calc(var(--bar-h) + var(--space-6)); align-self: start; }
}

/* the editor */
.tg-edit { container-type: inline-size; display: grid; gap: var(--space-4); }
.tg-cols { display: grid; gap: var(--space-3); }
.tg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-field label { display: block; margin: 0 0 6px 2px; color: var(--ink-2); font-size: 13.5px; font-weight: 800; }
.tg-field input, .tg-field select, .tg-field textarea { box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; box-shadow: var(--edge); }
.tg-field select { padding-right: 6px; cursor: pointer; }
.tg-field textarea { display: block; height: auto; min-height: 150px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.tg-field input:focus-visible, .tg-field select:focus-visible, .tg-field textarea:focus-visible { outline: none; box-shadow: 0 0 0 2.5px var(--ink); }
.tg-upload { position: relative; display: inline-flex; align-items: center; justify-self: start; height: 44px; padding: 0 18px; border: 1.5px dashed var(--ink); border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 800; cursor: pointer; }
.tg-upload:hover { background: var(--yellow-tint); }
.tg-upload:focus-within { box-shadow: 0 0 0 2.5px var(--ink); }
.tg-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* the editor is its own container, so its rows follow its width, not the page's: three across until the
   Verified choices would be cut short, four until the boxes get too narrow */
@container (max-width: 520px) {
    .tg-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tg-cols-3 .tg-field-verified { grid-column: 1 / -1; grid-row: 2; }
}
@container (max-width: 400px) {
    .tg-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* on a phone, a bar held at the foot of the editor: to the tweet below, and Download from where you are */
.tg-bar { display: none; }
@container (max-width: 999px) {
    .tg-bar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--space-4)); padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 2px solid var(--ink); }
    .tg-bar .tw-btn { flex: 1; }
}

/* the right: the tweet's size and background, the tweet, then Download, all on the middle */
.tg-controls { display: grid; gap: var(--space-4); justify-items: center; }
.tg-sliders { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); }
.tg-slider { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.tg-slider input { width: 150px; accent-color: var(--ink); cursor: pointer; }
.tg-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.tg-swatches button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--c); cursor: pointer; }
.tg-swatches .tg-light { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35); }
.tg-swatches [aria-pressed="true"] { box-shadow: 0 0 0 2.5px #fafaf8, 0 0 0 4.5px var(--ink); }
.tg-swatches button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tg-buttons { margin: var(--space-1) 0 0; }
.tg-buttons .tw-btn { min-width: 200px; }

/* the preview: at its real size where there is room, scaled down to fit where not (tweet-generator.js), saved
   at full size. A soft shadow, not the site's ink edge, so nothing but the picture sits around its colour; a
   filter on the box that clips it, as a box-shadow on the picture would be clipped with it */
.tg-fit { position: relative; width: 100%; overflow: hidden; filter: drop-shadow(0 0 .5px rgba(17, 17, 17, .3)) drop-shadow(0 14px 22px rgba(17, 17, 17, .16)); }
.tg-stage { width: max-content; margin-inline: auto; overflow: hidden; border-radius: 14px; transform-origin: 0 0; }
.tg-stage.tg-scaled { margin-left: 0; }
.tg-bkg { position: relative; background-color: #ffffff; }
.tg-disclaimer { position: absolute; right: 20px; bottom: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; opacity: .7; white-space: pre; }

/* the post, as X draws it in a timeline */
.tg-tweet { box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-width: 400px; max-width: 800px; margin: auto; padding: 12px 12px 14px 14px; border: 1px solid transparent; border-radius: 10px; background: #ffffff; color: #536471; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 20px; text-align: left; }
.tg-avatar { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tg-main { min-width: 0; }
.tg-head { display: grid; grid-template-columns: minmax(0, 1fr) 23px; height: 20px; overflow: hidden; }
.tg-names { overflow: hidden; white-space: nowrap; }
.tg-names > * { display: inline-block; vertical-align: top; }
.tg-names b { color: #0f1419; font-weight: 700; }
.tg-names > span { margin-left: 4px; }
.tg-verified { margin-left: 2px !important; }
.tg-verified:empty { display: none; }
.tg-verified svg { display: block; height: 20px; margin-top: 0; }
.tg-more { width: 18.75px; height: 18.75px; fill: #536471; }
.tg-text { margin-top: 1px; padding-bottom: 2px; color: #0f1419; white-space: pre-wrap; overflow-wrap: break-word; }
.tg-link { color: #1d9bf0; }
.tg-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 26px; margin-top: 12px; font-size: 13px; line-height: 16px; }
.tg-metrics > span { display: flex; align-items: center; white-space: nowrap; }
.tg-metrics svg { flex: none; height: 19px; width: 19px; margin-right: 7px; fill: #536471; }
.tg-metrics i { font-style: normal; }