/* ToolTapGo focused result upgrades — 2026-07-27
   These tools render into the shared .ttg-output-result card defined in
   site.css. This file only adds the blocks that card does not cover, and
   keeps the accent teal: orange is no longer used in tool results. */

/* site.css paints the primary action orange. These tools are fully teal, and
   this file loads after site.css, so the same specificity wins here. */
.ttg-output-result button.is-primary{border-color:var(--teal);background:var(--teal);color:#fff}
.ttg-output-result button.is-primary:hover{border-color:var(--teal-strong);background:var(--teal-strong);color:#fff}
/* Dark mode lightens --teal, so white label text drops to ~1.8:1. Ink text on
   the light teal reads instead. */
[data-theme=dark] .ttg-output-result button.is-primary,[data-theme=dark] .ttg-worksheet-result button.is-primary{background:var(--teal);border-color:var(--teal);color:#08201e}
[data-theme=dark] .ttg-output-result button.is-primary:hover,[data-theme=dark] .ttg-worksheet-result button.is-primary:hover{background:var(--teal-strong);border-color:var(--teal-strong);color:#08201e}
.ttg-worksheet-result button.is-primary{border-color:var(--teal);background:var(--teal);color:#fff}
.ttg-worksheet-result button.is-primary:hover{border-color:var(--teal-strong);background:var(--teal-strong);color:#fff}
.ttg-worksheet-sheet__title small{color:var(--teal-strong)}
.ttg-worksheet-questions article>strong>span{color:var(--teal-strong)}
.ttg-worksheet-answers article>strong{background:var(--teal-soft);color:var(--teal-strong)}
.ttg-worksheet-export>div:first-child>span{background:var(--teal-soft);color:var(--teal-strong)}
.ttg-policy-snippet>header>span i{color:var(--teal-strong)}
.ttg-policy-snippet>header button:hover{border-color:color-mix(in srgb,var(--teal) 36%,var(--line));color:var(--teal-strong)}
.ttg-output-badge.is-warning{border-color:color-mix(in srgb,var(--gold) 40%,var(--line));background:color-mix(in srgb,var(--gold) 18%,var(--surface));color:var(--warning)}
.ttg-output-badge.is-danger{border-color:color-mix(in srgb,var(--danger) 38%,var(--line));background:color-mix(in srgb,var(--danger) 13%,var(--surface));color:var(--danger)}

/* Shared sub-blocks used inside the result card. */
.ttg-result-card{padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--surface);min-width:0}
.ttg-result-card>small,.ttg-result-stat>small{display:block;color:var(--muted);font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.ttg-result-card>strong{display:block;margin-top:5px;font-size:.92rem;overflow-wrap:anywhere}
.ttg-result-card>p{margin:6px 0 0;color:var(--muted);font-size:.72rem}
.ttg-result-preview{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface)}
.ttg-result-preview>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.68rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.ttg-result-preview pre{margin:0;padding:18px;max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:600 .82rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);background:transparent}
.ttg-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ttg-result-stat{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ttg-result-stat strong{display:block;margin-top:4px;font-size:.88rem;overflow-wrap:anywhere}
.ttg-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* The colour converter renders each swatch value as a button that keeps the
   card shape, so it has to out-rank the generic .ttg-output-result button. */
.ttg-output-result button.ttg-result-card{min-height:0;padding:17px;border-radius:15px;background:var(--surface);color:var(--ink);font-weight:inherit;font-size:inherit;text-align:left}
.ttg-output-result button.ttg-result-card:hover{border-color:color-mix(in srgb,var(--teal) 38%,var(--line));color:var(--ink)}

.ttg-output-list{display:grid;gap:8px}
.ttg-output-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ttg-output-row small{flex:0 0 auto;color:var(--muted);font-size:.66rem;font-weight:850}
.ttg-output-row code{min-width:0;flex:1;overflow-wrap:anywhere;font-size:.78rem;color:var(--ink)}
.ttg-output-result .ttg-output-row button{width:34px;height:34px;min-height:0;flex:0 0 34px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--teal-strong)}

/* A result that needs no card chrome of its own: the inner block is the
   result, so the wrapper only carries the footer. */
.ttg-output-result.is-bare{padding:0;border:0;background:transparent;border-radius:0}
.ttg-worksheet-result.is-bare{padding:0;border:0;background:transparent;border-radius:0}
.ttg-worksheet-result.is-bare>header.is-bare-head{justify-content:flex-end}

.ttg-plain-preview pre{padding:22px;font-size:1.05rem;line-height:1.75}
.ttg-plain-preview>header{font-size:.7rem}
/* These tools present the result itself rather than a summary of it: the shared
   Detail / Additional information boxes, the horizontal inset and the orange
   edge marker are all dropped so the block runs the full width. */
body[data-tool="random-word-and-sentence-generator"] .result-box.ttg-special-result .result-details,
body[data-tool="json-to-csv-converter"] .result-box.ttg-special-result .result-details,
body[data-tool="text-repeater"] .result-box.ttg-special-result .result-details,
body[data-tool="meeting-time-planner"] .result-box.ttg-special-result .result-details,
body[data-tool="random-date-and-time-generator"] .result-box.ttg-special-result .result-details,
body[data-tool="colour-contrast-checker"] .result-box.ttg-special-result .result-details,
body[data-tool="cron-expression-generator"] .result-box.ttg-special-result .result-details,
body[data-tool="domain-availability-checker"] .result-box.ttg-special-result .result-details,
body[data-tool="worksheet-generator"] .result-box.ttg-special-result .result-details,
body[data-tool="would-you-rather-generator"] .result-box.ttg-special-result .result-details{display:none!important}
body[data-tool="random-word-and-sentence-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="random-word-and-sentence-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="json-to-csv-converter"] .result-box.ttg-special-result .result-main,
body[data-tool="json-to-csv-converter"] .result-box.ttg-special-result .result-label,
body[data-tool="text-repeater"] .result-box.ttg-special-result .result-main,
body[data-tool="text-repeater"] .result-box.ttg-special-result .result-label,
body[data-tool="meeting-time-planner"] .result-box.ttg-special-result .result-main,
body[data-tool="meeting-time-planner"] .result-box.ttg-special-result .result-label,
body[data-tool="random-date-and-time-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="random-date-and-time-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="colour-contrast-checker"] .result-box.ttg-special-result .result-main,
body[data-tool="colour-contrast-checker"] .result-box.ttg-special-result .result-label,
body[data-tool="cron-expression-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="cron-expression-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="domain-availability-checker"] .result-box.ttg-special-result .result-main,
body[data-tool="domain-availability-checker"] .result-box.ttg-special-result .result-label,
body[data-tool="worksheet-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="worksheet-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="would-you-rather-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="would-you-rather-generator"] .result-box.ttg-special-result .result-label{padding-inline:0}
body[data-tool="random-word-and-sentence-generator"] .result-box.ttg-special-result::after,
body[data-tool="json-to-csv-converter"] .result-box.ttg-special-result::after,
body[data-tool="text-repeater"] .result-box.ttg-special-result::after,
body[data-tool="meeting-time-planner"] .result-box.ttg-special-result::after,
body[data-tool="random-date-and-time-generator"] .result-box.ttg-special-result::after,
body[data-tool="colour-contrast-checker"] .result-box.ttg-special-result::after,
body[data-tool="cron-expression-generator"] .result-box.ttg-special-result::after,
body[data-tool="domain-availability-checker"] .result-box.ttg-special-result::after,
body[data-tool="worksheet-generator"] .result-box.ttg-special-result::after,
body[data-tool="would-you-rather-generator"] .result-box.ttg-special-result::after{display:none}

/* Larger, more readable result text now that the summary chrome is gone. */
.is-bare .ttg-result-preview pre{padding:22px;font-size:1.05rem;line-height:1.75}
.is-bare .ttg-result-preview>header{font-size:.72rem}
.is-bare .ttg-output-row code{font-size:.95rem}
.is-bare .ttg-output-row small{font-size:.75rem}
.is-bare .ttg-result-stat strong{font-size:1.05rem}
.is-bare .ttg-result-stat>small,.is-bare .ttg-result-card>small{font-size:.7rem}
.is-bare .ttg-result-card>strong{font-size:1.02rem}
.is-bare .ttg-result-card>p{font-size:.82rem}
.is-bare .ttg-cron-fields strong{font-size:1.15rem}
.is-bare .ttg-cron-fields small{font-size:.68rem}
.is-bare .ttg-pass-row{font-size:.88rem}
.is-bare .ttg-status-hero h3{font-size:1.18rem}
.is-bare .ttg-status-hero p{font-size:.85rem}
.is-bare .ttg-meeting-slot strong{font-size:1rem}
.is-bare .ttg-meeting-slot small{font-size:.74rem}
.is-bare .ttg-csv-table{font-size:.86rem}

/* Result controls follow the site body face rather than the inherited stack. */
.ttg-output-result button,.ttg-worksheet-result button,.ttg-pdf-field-report button{font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

.ttg-choice-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:13px}
.ttg-output-result button.ttg-choice-card{min-height:170px;padding:22px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font:inherit;gap:0}
.ttg-output-result button.ttg-choice-card:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));color:var(--ink)}
.ttg-output-result button.ttg-choice-card.is-chosen{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 22%,transparent)}
.ttg-choice-card span{width:35px;height:35px;flex:0 0 35px;border-radius:11px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-strong);font-weight:900;margin-bottom:12px}
.ttg-output-result button.ttg-choice-card.is-chosen span{background:var(--teal);color:#fff}
[data-theme=dark] .ttg-output-result button.ttg-choice-card.is-chosen span{color:#08201e}
.ttg-choice-card strong{font-size:1.02rem;line-height:1.45;font-weight:800}
.ttg-choice-or{align-self:center;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--surface);font-size:.7rem;font-weight:900}

/* Would you rather — category chips, custom dilemma modal and result card. */
.ttg-wyr-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ttg-wyr-cats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ttg-wyr-cats>span{font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ttg-wyr-cats>div{display:flex;gap:6px;flex-wrap:wrap}
.tool-form #toolFields .ttg-wyr-cats button{min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.72rem;font-weight:800}
.tool-form #toolFields .ttg-wyr-cats button:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong)}
.tool-form #toolFields .ttg-wyr-cats button.is-active{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.tool-form #toolFields .ttg-wyr-custom-btn{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:.74rem;font-weight:800;display:inline-flex;align-items:center;gap:7px}
.tool-form #toolFields .ttg-wyr-custom-btn:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong)}
.ttg-wyr-hint{margin:9px 0 0;text-align:right;color:var(--muted);font-size:.7rem}
.ttg-wyr-hint kbd{padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);font:inherit;font-size:.68rem;font-weight:800}

.ttg-wyr-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(3px)}
.ttg-wyr-modal[hidden]{display:none}
.ttg-wyr-modal-card{display:grid;gap:14px;width:min(460px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.ttg-wyr-modal-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ttg-wyr-modal-card h3{display:flex;align-items:center;gap:9px;margin:0;font-size:1.02rem}
.ttg-wyr-modal-card h3 i{color:var(--teal-strong)}
.tool-form #toolFields .ttg-wyr-modal-card>header button{width:34px;height:34px;min-height:0;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.tool-form #toolFields .ttg-wyr-modal-card label{display:grid;gap:7px;margin:0;font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ttg-wyr-modal-card>footer{display:flex;justify-content:flex-end;gap:9px;margin-top:2px}
.tool-form #toolFields .ttg-wyr-modal-card>footer button{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:800}
.tool-form #toolFields .ttg-wyr-modal-card>footer button.primary-btn{border-color:var(--teal);background:var(--teal);color:#fff}
[data-theme=dark] .tool-form #toolFields .ttg-wyr-modal-card>footer button.primary-btn{color:#08201e}

.ttg-wyr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ttg-wyr-head>div{display:flex;align-items:center;gap:10px}
.ttg-wyr-head small{font-size:.66rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.ttg-output-result .ttg-wyr-head [data-wyr-fav]{width:36px;height:36px;min-height:0;padding:0;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--muted);font-size:16px}
.ttg-output-result .ttg-wyr-head [data-wyr-fav].is-saved{border-color:color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 11%,var(--surface));color:var(--danger)}
.ttg-wyr-state{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));border-radius:999px;background:var(--teal-soft);color:var(--teal-strong);font-size:.67rem;font-weight:850}
.ttg-wyr-state i{font-size:13px}
.ttg-wyr-state.is-voted{border-color:color-mix(in srgb,var(--success) 40%,var(--line));background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success)}
[data-theme=dark] .ttg-wyr-state.is-voted{color:#5fcf9b}
.ttg-wyr-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ttg-wyr-meta article{display:grid;gap:5px;min-width:0;padding:15px 17px}
.ttg-wyr-meta article+article{border-left:1px solid var(--line)}
.ttg-wyr-meta small{font-size:.62rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ttg-wyr-meta strong{font-size:.85rem;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
@media(max-width:620px){.ttg-wyr-meta{grid-template-columns:1fr}.ttg-wyr-meta article+article{border-left:0;border-top:1px solid var(--line)}.ttg-wyr-controls{flex-direction:column;align-items:stretch}.ttg-wyr-custom-btn{width:100%;justify-content:center}.ttg-wyr-hint{text-align:left}}

.ttg-colour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ttg-output-result button.ttg-colour-chip{min-height:92px;padding:12px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:15px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;font-weight:900;font-size:.78rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);text-shadow:0 1px 2px rgba(0,0,0,.28)}
.ttg-colour-chip i{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;place-items:center}

.ttg-contrast-score{display:grid;grid-template-columns:180px 1fr;gap:14px}
.ttg-contrast-ratio{min-height:150px;border-radius:17px;display:grid;place-items:center;text-align:center;padding:18px;background:var(--ink);color:var(--surface)}
.ttg-contrast-ratio strong{font-size:2.05rem;line-height:1}
.ttg-contrast-ratio small{display:block;margin-top:8px;color:color-mix(in srgb,var(--surface) 72%,transparent);font-weight:800}
.ttg-pass-list{display:grid;gap:9px}
.ttg-pass-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);font-size:.78rem}
.ttg-pass-row b{display:inline-flex;align-items:center;gap:6px;color:var(--success)}
.ttg-pass-row b.fail{color:var(--danger)}

/* The cron expression sits in a code panel that stays dark in both themes,
   the same treatment the cookie banner snippet uses. */
.ttg-code-display{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px;border-radius:15px;background:#102b2a;color:#fff}
.ttg-code-display code{font:800 clamp(1rem,3vw,1.38rem)/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
.ttg-output-result .ttg-code-display button{width:42px;height:42px;min-height:0;flex:0 0 42px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.09);color:#fff}
.ttg-output-result .ttg-code-display button:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff}
.ttg-cron-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ttg-cron-fields div{padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center}
.ttg-cron-fields strong{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1rem}
.ttg-cron-fields small{display:block;margin-top:4px;color:var(--muted);font-size:.62rem;font-weight:800;text-transform:uppercase}

.ttg-status-hero{padding:22px;border:1px solid var(--line);border-radius:17px;background:var(--surface);display:flex;align-items:center;gap:18px}
.ttg-status-hero>strong{flex:0 0 auto;font-size:2.25rem;color:var(--teal-strong)}
.ttg-status-hero h3{margin:0 0 4px;font-size:1.05rem}
.ttg-status-hero p{margin:0;color:var(--muted);font-size:.76rem}

.ttg-csv-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.ttg-csv-table{width:100%;border-collapse:collapse;min-width:520px;font-size:.76rem}
.ttg-csv-table th,.ttg-csv-table td{padding:11px 13px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.ttg-csv-table th{background:var(--surface-2);color:var(--ink);font-weight:900;position:sticky;top:0}
.ttg-csv-table tr:last-child td{border-bottom:0}

.ttg-meeting-list{display:grid;gap:9px}
.ttg-meeting-slot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.ttg-meeting-slot div:first-child{text-align:left}.ttg-meeting-slot div:last-child{text-align:right}
.ttg-meeting-slot strong{display:block;font-size:.9rem}.ttg-meeting-slot small{display:block;color:var(--muted);font-size:.66rem;font-weight:750;overflow-wrap:anywhere}
.ttg-meeting-slot>i{color:var(--teal-strong)}
.ttg-output-result button.ttg-logo-toggle.is-removed{color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,var(--line))}

/* PDF form filler report — sits under the fields, not inside a result card,
   so it repeats the card language rather than inheriting it. */
.ttg-pdf-field-report{margin:0 0 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);overflow:hidden}
.ttg-pdf-field-report>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ttg-pdf-field-report>header div{display:flex;align-items:center;gap:12px}
.ttg-pdf-field-report>header span:first-child{flex:0 0 43px;width:43px;height:43px;border-radius:13px;background:var(--teal-soft);color:var(--teal-strong);display:grid;place-items:center;font-size:20px}
.ttg-pdf-field-report>header strong{display:block;font-size:1rem}
.ttg-pdf-field-report>header small{display:block;color:var(--muted);font-size:.68rem}
.ttg-pdf-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px}
.ttg-pdf-summary article{padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.ttg-pdf-summary small{display:block;color:var(--muted);font-size:.65rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.ttg-pdf-summary strong{display:block;margin-top:3px;font-size:1.15rem}
.ttg-pdf-results{display:grid;gap:9px;padding:0 20px 20px}
.ttg-pdf-field-row{display:grid;grid-template-columns:34px minmax(140px,.7fr) minmax(140px,1fr);align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ttg-pdf-field-row>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--teal-soft);color:var(--success)}
.ttg-pdf-field-row.is-failed>span{background:color-mix(in srgb,var(--danger) 13%,var(--surface));color:var(--danger)}
.ttg-pdf-field-row b{font-size:.78rem;overflow-wrap:anywhere}
.ttg-pdf-field-row p{margin:0;color:var(--muted);font-size:.74rem;overflow-wrap:anywhere}
.ttg-pdf-report-note{display:flex;align-items:flex-start;gap:8px;margin:0 20px 20px;padding:12px 14px;border-radius:12px;background:var(--surface);color:var(--muted);font-size:.74rem}
.ttg-pdf-report-note i{margin-top:2px;color:var(--teal-strong)}

/* Colour palette extractor — image picker, swatch count, and a result card
   with three ways to view the same palette. */
.ttg-cpe-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);gap:18px;align-items:start}
.ttg-cpe-controls h3{margin:0 0 4px;font-size:.68rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.ttg-cpe-controls>section>p{margin:0 0 10px;color:var(--muted);font-size:.76rem}
.ttg-cpe-drop{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:16px;border:2px dashed color-mix(in srgb,var(--teal) 34%,var(--line));border-radius:15px;background:var(--surface)}
.ttg-cpe-drop>div{display:grid;gap:3px;min-width:0;flex:1}
.ttg-cpe-drop strong{font-size:.92rem;overflow-wrap:anywhere}
.ttg-cpe-drop small{color:var(--muted);font-size:.72rem}
.ttg-cpe-thumb{display:grid;place-items:center;flex:0 0 62px;width:62px;height:62px;overflow:hidden;border-radius:13px;background:var(--teal-soft);color:var(--teal-strong);font-size:24px}
.ttg-cpe-thumb img{width:100%;height:100%;object-fit:cover}
.ttg-cpe-formats{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.ttg-cpe-formats span{padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:.62rem;font-weight:800}
.tool-form #toolFields .ttg-cpe-drop button{flex:0 0 auto;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--danger);font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.tool-form #toolFields .ttg-cpe-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;opacity:0;cursor:pointer}
.tool-form #toolFields .ttg-cpe-drop button{position:relative;z-index:1}
.ttg-cpe-count small{display:block;margin-top:7px;color:var(--muted);font-size:.72rem}

.ttg-cpe-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ttg-cpe-head>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ttg-cpe-kicker{padding:7px 12px;border-radius:999px;background:var(--teal-soft);color:var(--teal-strong);font-size:.66rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.ttg-cpe-count-chip{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.68rem;font-weight:800}
.ttg-cpe-views{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ttg-output-result .ttg-cpe-views button{min-height:34px;padding:0 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:.7rem;font-weight:800}
.ttg-output-result .ttg-cpe-views button.is-active{border-color:var(--line);background:var(--surface-2);color:var(--teal-strong)}
.ttg-cpe-bar{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:11px}
.ttg-output-result .ttg-cpe-bar button{flex:1;min-height:26px;padding:0;border:0;border-radius:0}
.ttg-cpe-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ttg-output-result .ttg-cpe-cards button{display:grid;gap:0;min-height:0;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;font-weight:inherit}
.ttg-output-result .ttg-cpe-cards button:hover{border-color:color-mix(in srgb,var(--teal) 42%,var(--line));color:var(--ink)}
.ttg-cpe-cards button>span{display:block;height:96px;border-radius:10px}
.ttg-cpe-cards strong{margin-top:11px;font-size:.86rem;font-weight:850}
.ttg-cpe-cards em{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-top:4px;font-style:normal}
.ttg-cpe-cards code{font-size:.76rem;font-weight:800;color:var(--ink-2)}
.ttg-cpe-cards i{font-style:normal;font-size:.68rem;color:var(--muted)}
.ttg-cpe-strips{display:grid;gap:8px}
.ttg-output-result .ttg-cpe-strips button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 18px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:13px;font-size:.86rem;font-weight:850}
.ttg-cpe-strips button span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem}
.ttg-cpe-mockup{display:grid;gap:11px;padding:24px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:15px}
.ttg-cpe-mockup-bar{display:flex;gap:6px}
.ttg-cpe-mockup-bar span{width:34px;height:8px;border-radius:999px}
.ttg-cpe-mockup h4{margin:0;font-size:1.12rem}
.ttg-cpe-mockup p{margin:0;font-size:.82rem}
.ttg-cpe-mockup-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.ttg-cpe-mockup-actions span{padding:9px 15px;border:1px solid transparent;border-radius:10px;font-size:.74rem;font-weight:850}
.ttg-cpe-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ttg-cpe-notes article{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:15px 17px}
.ttg-cpe-notes article+article{border-left:1px solid var(--line)}
.ttg-cpe-notes article>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:var(--teal-soft);color:var(--teal-strong);font-size:17px}
.ttg-cpe-notes small{display:block;font-size:.62rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ttg-cpe-notes strong{display:block;margin-top:3px;font-size:.85rem;font-weight:800;color:var(--ink)}
@media(max-width:820px){.ttg-cpe-controls{grid-template-columns:1fr}}
@media(max-width:620px){.ttg-cpe-notes{grid-template-columns:1fr}.ttg-cpe-notes article+article{border-left:0;border-top:1px solid var(--line)}.ttg-cpe-head{align-items:stretch;flex-direction:column}.ttg-cpe-views{overflow:auto}.ttg-cpe-drop{flex-wrap:wrap}}

/* HTTP status code reference — search, class filters and quick select, plus a
   result card carrying protocol notes and per-language examples. */
.ttg-hs-search{display:grid;gap:12px;min-width:0}
.ttg-hs-search-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tool-form #toolFields .ttg-hs-search-head label{margin:0;font-size:.68rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.ttg-hs-search-head small{color:var(--muted);font-size:.7rem}
.ttg-hs-field{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px 0 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ttg-hs-field>i{flex:0 0 auto;color:var(--muted);font-size:17px}
.tool-form #toolFields .ttg-hs-field input{width:100%;min-height:0;padding: 5px 10px;border:0;background:transparent;font-size:1rem;font-weight:700;color:var(--ink)}
.tool-form #toolFields .ttg-hs-field input:focus{outline:none}
.ttg-hs-field:focus-within{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));box-shadow:0 0 0 3px var(--teal-soft)}
.tool-form #toolFields .ttg-hs-field button{flex:0 0 auto;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:.72rem;font-weight:800}
.ttg-hs-filters{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.ttg-hs-filters>span{flex:0 0 auto;padding-top:7px;font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ttg-hs-filters>div{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.tool-form #toolFields .ttg-hs-filters button,.tool-form #toolFields .ttg-hs-matches button{min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:800}
.tool-form #toolFields .ttg-hs-filters button:hover,.tool-form #toolFields .ttg-hs-matches button:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong)}
.tool-form #toolFields .ttg-hs-filters button.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
[data-theme=dark] .tool-form #toolFields .ttg-hs-filters button.is-active{color:#08201e}
.ttg-hs-matches{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.ttg-hs-matches>small{font-size:.66rem;font-weight:800;color:var(--muted)}
.ttg-hs-matches>div{display:flex;gap:6px;flex-wrap:wrap}

.ttg-hs-hero{display:flex;align-items:center;gap:20px;min-width:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.ttg-hs-hero>strong{flex:0 0 auto;font:800 clamp(2.1rem,6vw,3rem)/1 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.04em;color:var(--teal-strong)}
.ttg-hs-hero h3{margin:0 0 3px;font-size:1.05rem}
.ttg-hs-hero p{margin:0;color:var(--muted);font-size:.76rem}
.ttg-hs-tech{display:grid;gap:12px;min-width:0;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.ttg-hs-tech>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ttg-hs-tech>header>span:first-child{font-size:.66rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ttg-hs-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ttg-hs-specs article{display:grid;gap:4px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.ttg-hs-specs small{font-size:.62rem;font-weight:800;color:var(--muted)}
.ttg-hs-specs strong{font-size:.82rem;color:var(--ink)}
.ttg-hs-specs strong.is-yes{color:var(--success)}
.ttg-hs-specs strong.is-no{color:var(--danger)}
/* --success and --danger are not lightened for dark mode, so on a dark panel
   they fall to about 3.3:1. These lifted tones restore readable contrast. */
[data-theme=dark] .ttg-hs-specs strong.is-yes,[data-theme=dark] .ttg-pass-row b{color:#5fcf9b}
[data-theme=dark] .ttg-hs-specs strong.is-no,[data-theme=dark] .ttg-pass-row b.fail{color:#f2848d}
.ttg-hs-langs{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:9px;border-bottom:1px solid var(--line)}
.ttg-output-result .ttg-hs-langs button{min-height:31px;padding:0 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:.7rem;font-weight:800}
.ttg-output-result .ttg-hs-langs button.is-active{border-color:var(--line);background:var(--surface-2);color:var(--teal-strong)}
.ttg-hs-code{position:relative;min-width:0;overflow:hidden;border-radius:13px;background:#102b2a}
.ttg-output-result .ttg-hs-code button{position:absolute;top:10px;right:10px;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.09);color:#fff;font-size:.65rem;font-weight:800}
.ttg-output-result .ttg-hs-code button:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.17);color:#fff}
.ttg-hs-code pre{margin:0;padding:17px 92px 17px 17px;overflow:auto;color:#b7f2c6;font:600 .74rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;scrollbar-width:thin}

@media(max-width:760px){.ttg-hs-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.ttg-hs-filters{flex-direction:column;gap:6px}.ttg-hs-filters>span{padding-top:0}}
@media(max-width:520px){.ttg-hs-specs{grid-template-columns:1fr}.ttg-hs-hero{gap:14px}}

/* Colour converter — picker, sliders and palette workspace, plus a live
   preview result card. */
.ttg-cc-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:16px;align-items:start}
.ttg-cc-panel{display:grid;gap:14px;align-content:start;min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.ttg-cc-panel h3{margin:0;font-size:.68rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.ttg-cc-panel>section{display:grid;gap:9px;min-width:0}
.ttg-cc-panel>section>small{font-size:.7rem;font-weight:800;color:var(--ink-2)}
.ttg-cc-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-form #toolFields .ttg-cc-workspace label{display:grid;gap:7px;margin:0;font-size:.7rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ttg-cc-picker-box{display:flex;align-items:center;gap:12px;min-height:64px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.tool-form #toolFields .ttg-cc-picker-box input[type=color]{flex:0 0 52px;width:52px;height:42px;min-height:0;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.ttg-cc-picker-box>span{display:grid;gap:2px;min-width:0;text-transform:none;letter-spacing:0}
.ttg-cc-picker-box b{font-size:.78rem;font-weight:800;color:var(--ink)}
.ttg-cc-picker-box small{font-size:.68rem;font-weight:600;color:var(--muted)}
.ttg-cc-hexwrap{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.ttg-cc-hexwrap>i{flex:0 0 auto;font-style:normal;font-size:1rem;font-weight:900;color:var(--muted)}
.tool-form #toolFields .ttg-cc-hexwrap input{width:100%;min-height:0;padding:0;border:0;background:transparent;font:800 1rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:var(--ink); padding: 10px;}
.tool-form #toolFields .ttg-cc-hexwrap input:focus{outline:none}
.ttg-cc-hexwrap:focus-within{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));box-shadow:0 0 0 3px var(--teal-soft)}
.ttg-cc-sliders{display:grid;gap:11px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ttg-cc-sliders>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.68rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ttg-cc-readout{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none}
.tool-form #toolFields .ttg-cc-sliders label{display:grid;grid-template-columns:18px minmax(0,1fr) 42px;align-items:center;gap:11px}
.ttg-cc-sliders label b{font-size:.8rem;font-weight:900;color:var(--ink-2)}
.ttg-cc-sliders label output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;font-weight:800;color:var(--ink);text-align:right}
.tool-form #toolFields .ttg-cc-sliders input[type=range]{--cc-track:linear-gradient(90deg,#000,#fff);width:100%;height:10px;min-height:0;padding:0;border:0;border-radius:999px;background:var(--cc-track);appearance:none;-webkit-appearance:none;cursor:pointer}
.ttg-cc-sliders input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(16,43,42,.45)}
.ttg-cc-sliders input[type=range]::-moz-range-thumb{width:19px;height:19px;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(16,43,42,.45)}
.ttg-cc-ramp{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid var(--line);border-radius:11px}
.tool-form #toolFields .ttg-cc-ramp button{min-height:42px;padding:0;border:0;border-radius:0}
.ttg-cc-harmony{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ttg-cc-harmony article{display:grid;gap:7px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ttg-cc-harmony small{font-size:.62rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ttg-cc-harmony article>div{display:flex;gap:6px}
.ttg-cc-harmony code{font-size:.62rem;font-weight:800;color:var(--ink-2);overflow-wrap:anywhere}
.tool-form #toolFields .ttg-cc-harmony button{flex:1;min-height:32px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:9px}
.ttg-cc-presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.tool-form #toolFields .ttg-cc-presets button{min-height:30px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:9px}
.tool-form #toolFields .ttg-cc-presets button.is-active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--teal)}
.tool-form #toolFields .ttg-cc-workspace .actions{margin:0}
.tool-form #toolFields .ttg-cc-workspace .actions button{width:100%}

.ttg-cc-preview{display:grid;gap:16px;min-width:0;padding:20px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:16px}
.ttg-cc-preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ttg-cc-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,currentColor 13%,transparent);font-size:.65rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ttg-cc-preview-main{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.ttg-cc-preview-main strong{font:800 clamp(1.6rem,5vw,2.3rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.02em}
.ttg-cc-preview-main em{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:800;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;opacity:.82}
.ttg-cc-formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ttg-cc-formats article{display:grid;gap:7px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.ttg-cc-formats article>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ttg-cc-formats small{font-size:.62rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ttg-cc-formats strong{font:700 .78rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.ttg-output-result .ttg-cc-formats button{min-height:26px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.62rem;font-weight:800}
.ttg-output-result .ttg-cc-formats button:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong)}

@media(max-width:900px){.ttg-cc-workspace{grid-template-columns:1fr}.ttg-cc-formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ttg-cc-inputs{grid-template-columns:1fr}.ttg-cc-formats{grid-template-columns:1fr}.ttg-cc-harmony{grid-template-columns:1fr}.ttg-cc-preview-main em{margin-left:0;width:100%}}

/* The three policy generators render a full document card, so the shared
   result box drops its orange edge marker and its horizontal inset and lets
   the card run the full width of the column. */
body[data-tool="privacy-policy-generator"] .result-box.ttg-special-result::after,
body[data-tool="terms-and-conditions-generator"] .result-box.ttg-special-result::after,
body[data-tool="cookie-policy-and-banner-generator"] .result-box.ttg-special-result::after{display:none}
body[data-tool="privacy-policy-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="terms-and-conditions-generator"] .result-box.ttg-special-result .result-main,
body[data-tool="cookie-policy-and-banner-generator"] .result-box.ttg-special-result .result-main{padding-inline:0}
body[data-tool="privacy-policy-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="terms-and-conditions-generator"] .result-box.ttg-special-result .result-label,
body[data-tool="cookie-policy-and-banner-generator"] .result-box.ttg-special-result .result-label{padding-inline:0}

/* Pomodoro styles live at the end of this file. */

/* Random colour generator works straight from the swatch grid, so the shared
   result box is not used at all. */
body[data-tool="random-colour-generator"] #resultBox{display:none!important}
body[data-tool="random-colour-generator"] #colourGrid{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}
body[data-tool="random-colour-generator"] #colourGrid button{min-height:132px;border:0;border-radius:16px;padding:14px;display:flex;align-items:flex-end;justify-content:space-between;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
body[data-tool="random-colour-generator"] #colourGrid button:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
body[data-tool="random-colour-generator"] #colourGrid button span{padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.82);color:#102b2a;font-size:.74rem;font-weight:900;text-shadow:none}
body[data-tool="random-colour-generator"] #colourGrid button:after{content:"\ea7a";font-family:"tabler-icons";width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.82);color:#102b2a}

@media(max-width:760px){
.ttg-output-badge{display:none}
.ttg-result-grid,.ttg-result-stats,.ttg-pdf-summary{grid-template-columns:1fr}
.ttg-choice-grid{grid-template-columns:1fr}
.ttg-choice-or{justify-self:center;margin:-3px 0}
.ttg-contrast-score{grid-template-columns:1fr}
.ttg-cron-fields{grid-template-columns:repeat(2,1fr)}
.ttg-meeting-slot{grid-template-columns:1fr;text-align:left}
.ttg-meeting-slot div:last-child{text-align:left}
.ttg-meeting-slot>i{transform:rotate(90deg)}
.ttg-pdf-field-row{grid-template-columns:34px 1fr}
.ttg-pdf-field-row p{grid-column:2}
.ttg-pomodoro-main{grid-template-columns:1fr;padding:15px}
.ttg-pomodoro-stage{min-height:390px}
.ttg-pomodoro-settings{grid-template-columns:1fr}
.ttg-pomodoro-app:fullscreen .ttg-pomodoro-main,.ttg-pomodoro-app.is-fullscreen-fallback .ttg-pomodoro-main{height:auto;min-height:calc(100vh - 79px);overflow:auto}
}

/* ===========================================================================
   Focused result layout polish — 2026-07-27
   Uses the site typography and control sizing without adding a decorative
   icon/title/description header above the actual result.
   =========================================================================== */
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .result-box.ttg-special-result{
  padding:20px;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .result-box.ttg-special-result>.result-label{
  display:none;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .result-box.ttg-special-result>.result-main{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  color:inherit;
  font:inherit;
  white-space:normal;
  overflow:visible;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .ttg-output-result{
  gap:18px;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.5;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .ttg-output-result button{
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  font-family:inherit;
  font-size:.875rem;
  font-weight:800;
  line-height:1.2;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .ttg-output-result>footer{
  gap:16px;
  padding-top:2px;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .ttg-output-result>footer>span{
  gap:8px;
  font-size:.8125rem;
  line-height:1.5;
}
:is(
  body[data-tool="random-word-and-sentence-generator"],
  body[data-tool="json-to-csv-converter"],
  body[data-tool="text-repeater"],
  body[data-tool="meeting-time-planner"],
  body[data-tool="colour-palette-extractor"],
  body[data-tool="random-date-and-time-generator"],
  body[data-tool="colour-contrast-checker"],
  body[data-tool="cron-expression-generator"],
  body[data-tool="domain-availability-checker"],
  body[data-tool="would-you-rather-generator"]
) .ttg-output-result>footer>div{
  gap:10px;
}

/* Plain text and repeated text use the normal site face, not a code font. */
body[data-tool="random-word-and-sentence-generator"] .ttg-result-preview pre,
body[data-tool="text-repeater"] .ttg-result-preview pre{
  padding:20px;
  min-height:82px;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  font-weight:600;
  line-height:1.7;
}
body[data-tool="random-word-and-sentence-generator"] .ttg-result-preview>header,
body[data-tool="text-repeater"] .ttg-result-preview>header{
  padding:12px 16px;
  font-size:.8125rem;
  letter-spacing:.035em;
}
body[data-tool="text-repeater"] .ttg-result-stats,
body[data-tool="json-to-csv-converter"] .ttg-result-stats{
  gap:12px;
}
body[data-tool="text-repeater"] .ttg-result-stat,
body[data-tool="json-to-csv-converter"] .ttg-result-stat{
  min-height:82px;
  padding:16px;
}
body[data-tool="text-repeater"] .ttg-result-stat>small,
body[data-tool="json-to-csv-converter"] .ttg-result-stat>small{
  font-size:.75rem;
}
body[data-tool="text-repeater"] .ttg-result-stat strong,
body[data-tool="json-to-csv-converter"] .ttg-result-stat strong{
  margin-top:6px;
  font-size:1rem;
}

/* Row-based results keep comfortable touch targets and readable labels. */
body[data-tool="random-date-and-time-generator"] .ttg-output-list{
  gap:10px;
}
body[data-tool="random-date-and-time-generator"] .ttg-output-row{
  min-height:56px;
  gap:12px;
  padding:10px 12px 10px 15px;
  border-radius:13px;
}
body[data-tool="random-date-and-time-generator"] .ttg-output-row small{
  font-size:.75rem;
}
body[data-tool="random-date-and-time-generator"] .ttg-output-row code{
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.9375rem;
  font-weight:700;
  line-height:1.45;
}
body[data-tool="random-date-and-time-generator"] .ttg-output-row button{
  width:38px;
  height:38px;
  min-height:38px;
  flex-basis:38px;
  padding:0;
}

/* CSV preview follows the same density as the site's standard data tables. */
body[data-tool="json-to-csv-converter"] .ttg-csv-table{
  font-size:.875rem;
}
body[data-tool="json-to-csv-converter"] .ttg-csv-table th,
body[data-tool="json-to-csv-converter"] .ttg-csv-table td{
  padding:12px 14px;
}

/* Meeting overlap cards. */
body[data-tool="meeting-time-planner"] .ttg-meeting-list{
  gap:10px;
}
body[data-tool="meeting-time-planner"] .ttg-meeting-slot{
  min-height:64px;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
}
body[data-tool="meeting-time-planner"] .ttg-meeting-slot strong{
  font-size:1rem;
  line-height:1.3;
}
body[data-tool="meeting-time-planner"] .ttg-meeting-slot small{
  margin-top:3px;
  font-size:.8125rem;
  line-height:1.35;
}

/* Contrast result. */
body[data-tool="colour-contrast-checker"] .ttg-contrast-score{
  grid-template-columns:200px minmax(0,1fr);
  gap:16px;
}
body[data-tool="colour-contrast-checker"] .ttg-contrast-ratio{
  min-height:164px;
  padding:20px;
}
body[data-tool="colour-contrast-checker"] .ttg-contrast-ratio strong{
  font-family:"Plus Jakarta Sans",Manrope,sans-serif;
  font-size:2.25rem;
}
body[data-tool="colour-contrast-checker"] .ttg-contrast-ratio small{
  margin-top:10px;
  font-size:1rem;
}
body[data-tool="colour-contrast-checker"] .ttg-pass-list{
  gap:10px;
}
body[data-tool="colour-contrast-checker"] .ttg-pass-row{
  min-height:48px;
  padding:12px 14px;
  font-size:.9375rem;
}
body[data-tool="colour-contrast-checker"] .ttg-result-card{
  padding:18px;
}
body[data-tool="colour-contrast-checker"] .ttg-result-card>small{
  font-size:.75rem;
}

/* Cron expression and compatibility details. */
body[data-tool="cron-expression-generator"] .ttg-code-display{
  padding:20px;
}
body[data-tool="cron-expression-generator"] .ttg-code-display code{
  font-size:clamp(1.125rem,3vw,1.5rem);
}
body[data-tool="cron-expression-generator"] .ttg-cron-fields{
  gap:10px;
}
body[data-tool="cron-expression-generator"] .ttg-cron-fields div{
  min-height:70px;
  padding:13px 10px;
}
body[data-tool="cron-expression-generator"] .ttg-cron-fields strong{
  font-size:1.125rem;
}
body[data-tool="cron-expression-generator"] .ttg-cron-fields small{
  margin-top:6px;
  font-size:.75rem;
}
body[data-tool="cron-expression-generator"] .ttg-result-card{
  padding:18px;
}
body[data-tool="cron-expression-generator"] .ttg-result-card>small{
  font-size:.75rem;
}
body[data-tool="cron-expression-generator"] .ttg-result-card>strong{
  font-size:1rem;
}
body[data-tool="cron-expression-generator"] .ttg-result-card>p{
  font-size:.875rem;
}

/* Domain status. */
body[data-tool="domain-availability-checker"] .ttg-status-hero{
  gap:18px;
  padding:20px;
}
body[data-tool="domain-availability-checker"] .ttg-status-hero>strong{
  font-size:2.5rem;
}
body[data-tool="domain-availability-checker"] .ttg-status-hero h3{
  margin-bottom:5px;
  font-size:1.125rem;
}
body[data-tool="domain-availability-checker"] .ttg-status-hero p{
  font-size:.875rem;
}
body[data-tool="domain-availability-checker"] .ttg-result-card{
  padding:18px;
}
body[data-tool="domain-availability-checker"] .ttg-result-card>small{
  font-size:.75rem;
}
body[data-tool="domain-availability-checker"] .ttg-result-card>strong{
  font-size:1rem;
}

/* Colour Palette Extractor uses the site's shared upload component. */
body[data-tool="colour-palette-extractor"] .ttg-cpe-controls{
  grid-template-columns:minmax(0,1fr) minmax(220px,260px);
  gap:20px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-controls h3{
  margin-bottom:6px;
  font-size:.8125rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-controls>section>p,
body[data-tool="colour-palette-extractor"] .ttg-cpe-count small{
  font-size:.875rem;
  line-height:1.5;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-count small{
  margin:0 0 10px;
  color:var(--muted);
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-upload .file-dropzone{
  margin-top:12px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-kicker,
body[data-tool="colour-palette-extractor"] .ttg-cpe-count-chip{
  font-size:.75rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-head{
  gap:16px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-views{
  gap:5px;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result .ttg-cpe-views button{
  min-height:38px;
  padding:0 13px;
  font-size:.8125rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
  gap:14px;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result .ttg-cpe-cards button{
  padding:12px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards strong{
  font-size:.9375rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards code,
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards i{
  font-size:.8125rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-notes small{
  font-size:.75rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-notes strong{
  font-size:.9375rem;
  line-height:1.45;
}

/* Would You Rather controls and choice cards. */
body[data-tool="would-you-rather-generator"] .ttg-wyr-controls{
  gap:16px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-cats{
  gap:12px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-cats>span{
  font-size:.75rem;
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-cats button,
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-custom-btn{
  min-height:40px;
  padding:0 15px;
  font-size:.8125rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-hint{
  margin-top:12px;
  font-size:.8125rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-head{
  gap:16px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-head small{
  font-size:.75rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-state{
  padding:7px 12px;
  font-size:.75rem;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-head [data-wyr-fav]{
  width:40px;
  height:40px;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-grid{
  gap:16px;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card{
  min-height:180px;
  padding:24px;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card span{
  width:40px;
  height:40px;
  flex-basis:40px;
  margin-bottom:14px;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card strong{
  font-size:1.0625rem;
  line-height:1.5;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-or{
  width:42px;
  height:42px;
  font-size:.75rem;
}

/* Worksheet result text now matches the website's normal readable scale. */
body[data-tool="worksheet-generator"] .ttg-worksheet-result{
  gap:18px;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.5;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-result button{
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  font-family:inherit;
  font-size:.875rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-meta{
  gap:10px;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-meta>span{
  min-height:34px;
  padding:6px 11px;
  font-size:.8125rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-sheet__title{
  padding:15px 17px;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-sheet__title small{
  font-size:.75rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-sheet__title strong{
  font-size:.9375rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-sheet__title>span{
  font-size:.875rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-questions article{
  min-height:64px;
  padding:11px 12px;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-questions article>strong{
  font-size:1rem;
  line-height:1.4;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-answers article{
  min-height:60px;
  padding:10px 12px;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-answers article>span{
  font-size:.9375rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-answers article>strong{
  min-width:46px;
  min-height:34px;
  font-size:.9375rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-export{
  padding:16px;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-export small{
  font-size:.75rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-export strong{
  font-size:.9375rem;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-result>footer>span{
  font-size:.8125rem;
}

@media(max-width:760px){
  :is(
    body[data-tool="random-word-and-sentence-generator"],
    body[data-tool="json-to-csv-converter"],
    body[data-tool="text-repeater"],
    body[data-tool="meeting-time-planner"],
    body[data-tool="colour-palette-extractor"],
    body[data-tool="random-date-and-time-generator"],
    body[data-tool="colour-contrast-checker"],
    body[data-tool="cron-expression-generator"],
    body[data-tool="domain-availability-checker"],
    body[data-tool="would-you-rather-generator"]
  ) .result-box.ttg-special-result{
    padding:16px;
  }
  :is(
    body[data-tool="random-word-and-sentence-generator"],
    body[data-tool="json-to-csv-converter"],
    body[data-tool="text-repeater"],
    body[data-tool="meeting-time-planner"],
    body[data-tool="colour-palette-extractor"],
    body[data-tool="random-date-and-time-generator"],
    body[data-tool="colour-contrast-checker"],
    body[data-tool="cron-expression-generator"],
    body[data-tool="domain-availability-checker"],
    body[data-tool="would-you-rather-generator"]
  ) .ttg-output-result>footer{
    align-items:stretch;
  }
  body[data-tool="colour-contrast-checker"] .ttg-contrast-score{
    grid-template-columns:1fr;
  }
  body[data-tool="colour-palette-extractor"] .ttg-cpe-controls{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  :is(
    body[data-tool="random-word-and-sentence-generator"],
    body[data-tool="json-to-csv-converter"],
    body[data-tool="text-repeater"],
    body[data-tool="meeting-time-planner"],
    body[data-tool="colour-palette-extractor"],
    body[data-tool="random-date-and-time-generator"],
    body[data-tool="colour-contrast-checker"],
    body[data-tool="cron-expression-generator"],
    body[data-tool="domain-availability-checker"],
    body[data-tool="would-you-rather-generator"]
  ) .ttg-output-result>footer>div{
    gap:8px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card{
    min-height:150px;
    padding:20px;
  }
  body[data-tool="worksheet-generator"] .ttg-worksheet-result{
    padding:16px;
  }
}


/* ==========================================================================
   Result and form refinements — 2026-07-27 batch 37
   ========================================================================== */
.result-box[data-custom-result="true"] > .result-details,
.result-box.ttg-special-result > .result-details{
  display:none!important;
}

body[data-tool="json-to-csv-converter"] .ttg-code-input{
  display:grid;
  gap:0;
  overflow:hidden;
  margin:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__head b{
  font-size:.8125rem;
  font-weight:850;
  color:var(--ink);
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__head small{
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--muted);
  font:750 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.05em;
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__hint{
  padding:11px 15px 0;
  color:var(--muted);
  font-size:.8125rem;
  line-height:1.5;
}
body[data-tool="json-to-csv-converter"] .tool-form #toolFields .ttg-code-input textarea{
  min-height:260px;
  margin:0;
  padding:14px 15px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ink);
  font:600 .875rem/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  tab-size:2;
  white-space:pre;
  overflow:auto;
  resize:vertical;
}
body[data-tool="json-to-csv-converter"] .ttg-code-input:focus-within{
  border-color:var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 14%,transparent);
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 15px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
  color:var(--muted);
  font-size:.75rem;
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__meta span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
body[data-tool="json-to-csv-converter"] .ttg-code-input__meta b{
  color:var(--ink-2);
  font-weight:750;
}

body[data-tool="uuid-and-ulid-generator"] .result-box.ttg-special-result{
  padding:20px;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-tool="uuid-and-ulid-generator"] .result-box.ttg-special-result>.result-label{
  display:none;
}
body[data-tool="uuid-and-ulid-generator"] .result-box.ttg-special-result>.result-main{
  margin:0;
  padding:0;
  color:inherit;
  font:inherit;
  white-space:normal;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-id-result{
  gap:14px;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-id-result__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-id-result__head strong{
  font-size:1rem;
  font-weight:850;
  color:var(--ink);
}
body[data-tool="uuid-and-ulid-generator"] .ttg-id-result__head span{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--teal-soft);
  color:var(--teal-strong);
  font-size:.75rem;
  font-weight:800;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-output-row{
  min-height:56px;
  padding:10px 12px 10px 15px;
  border-radius:13px;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-output-row code{
  font-size:.875rem;
  line-height:1.45;
}
body[data-tool="uuid-and-ulid-generator"] .ttg-output-row button{
  width:38px;
  height:38px;
  min-height:38px;
  flex-basis:38px;
  padding:0;
}

body[data-tool="colour-palette-extractor"] .ttg-cpe-result{
  gap:14px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-title{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-kicker{
  border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));
  background:var(--brand-soft);
  color:var(--brand);
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-bar{
  min-height:38px;
  border-radius:12px;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result .ttg-cpe-bar button{
  min-height:38px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-view-body{
  min-width:0;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result .ttg-cpe-cards button{
  min-width:0;
  padding:10px;
  border-radius:14px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards button>span{
  height:86px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards strong{
  margin-top:10px;
  font-size:.875rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards em{
  align-items:flex-start;
  flex-direction:column;
  gap:2px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards code{
  font-size:.75rem;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-cards i{
  font-size:.6875rem;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result button.is-brand{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
}
body[data-tool="colour-palette-extractor"] .ttg-output-result button.is-brand:hover{
  border-color:var(--brand-strong,var(--brand));
  background:var(--brand-strong,var(--brand));
  color:#fff;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-notes{
  background:var(--surface-2);
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-notes article{
  padding:14px 16px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-notes article>span{
  background:var(--surface);
}

body[data-tool="colour-converter"] .result-box.ttg-special-result{
  padding:0;
  border:0;
  background:transparent;
}
body[data-tool="colour-converter"] .result-box.ttg-special-result>.result-label{
  display:none;
}
body[data-tool="colour-converter"] .result-box.ttg-special-result>.result-main{
  margin:0;
  padding:0;
  color:inherit;
  font:inherit;
  white-space:normal;
}
body[data-tool="colour-converter"] .ttg-cc-result{
  gap:16px;
}
body[data-tool="colour-converter"] .ttg-cc-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
body[data-tool="colour-converter"] .ttg-cc-result-head>div{
  display:grid;
  gap:4px;
}
body[data-tool="colour-converter"] .ttg-cc-result-head small{
  color:var(--muted);
  font-size:.6875rem;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
}
body[data-tool="colour-converter"] .ttg-cc-result-head strong{
  color:var(--ink);
  font-size:1.0625rem;
  font-weight:850;
}
body[data-tool="colour-converter"] .ttg-cc-preview{
  min-height:116px;
  padding:18px 20px;
}
body[data-tool="colour-converter"] .ttg-cc-formats article{
  min-height:86px;
  padding:13px 14px;
}
body[data-tool="colour-converter"] .ttg-cc-workspace{
  grid-template-columns:minmax(0,1.45fr) minmax(270px,.95fr);
  gap:20px;
}
body[data-tool="colour-converter"] .ttg-cc-panel{
  padding:20px;
  border-radius:16px;
  background:var(--surface-2);
}
body[data-tool="colour-converter"] .ttg-cc-panel h3{
  font-size:.75rem;
}
body[data-tool="colour-converter"] .ttg-cc-sliders{
  padding:16px;
}
body[data-tool="colour-converter"] .ttg-cc-side{
  gap:18px;
}

body[data-tool="http-status-code-reference"] .result-box.ttg-special-result{
  padding:20px;
}
body[data-tool="http-status-code-reference"] .result-box.ttg-special-result>.result-label{
  display:none;
}
body[data-tool="http-status-code-reference"] .result-box.ttg-special-result>.result-main{
  margin:0;
  padding:0;
  color:inherit;
  font:inherit;
  white-space:normal;
}
body[data-tool="http-status-code-reference"] .ttg-hs-result{
  gap:14px;
}
body[data-tool="http-status-code-reference"] .ttg-hs-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
body[data-tool="http-status-code-reference"] .ttg-hs-result-head>span:first-child{
  color:var(--muted);
  font-size:.6875rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy>span{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--teal-soft);
  color:var(--teal-strong);
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy>div{
  min-width:0;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy small{
  display:block;
  color:var(--muted);
  font-size:.625rem;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy strong{
  display:block;
  margin-top:2px;
  color:var(--ink);
  font-size:1rem;
  font-weight:850;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference-copy p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.45;
}
body[data-tool="http-status-code-reference"] .ttg-hs-hero{
  min-height:86px;
  padding:16px 18px;
  background:var(--surface-2);
}
body[data-tool="http-status-code-reference"] .ttg-hs-hero>strong{
  font-size:2.4rem;
}
body[data-tool="http-status-code-reference"] .ttg-hs-protocol{
  padding:16px;
}
body[data-tool="http-status-code-reference"] .ttg-hs-actions{
  padding:0 0 2px;
}
body[data-tool="http-status-code-reference"] .ttg-hs-tech{
  padding:16px;
}

body[data-tool="worksheet-generator"] .ttg-worksheet-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
body[data-tool="worksheet-generator"] .ttg-worksheet-meta>button{
  margin-left:auto;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-2);
}
body[data-tool="worksheet-generator"] .ttg-worksheet-meta>button:hover{
  border-color:color-mix(in srgb,var(--teal) 38%,var(--line));
  color:var(--teal-strong);
}

@media(max-width:760px){
  body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body[data-tool="colour-converter"] .ttg-cc-workspace{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  body[data-tool="json-to-csv-converter"] .ttg-code-input__meta{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-tool="colour-palette-extractor"] .ttg-cpe-views{
    width:100%;
  }
  body[data-tool="colour-palette-extractor"] .ttg-output-result .ttg-cpe-views button{
    flex:1 0 auto;
  }
  body[data-tool="http-status-code-reference"] .ttg-hs-reference{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-tool="worksheet-generator"] .ttg-worksheet-meta>button{
    width:100%;
    margin-left:0;
  }
}
@media(max-width:500px){
  body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:360px){
  body[data-tool="colour-palette-extractor"] .ttg-cpe-cards{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   Focused tool refinements — 2026-07-27 batch 38
   ========================================================================== */

/* Result boxes no longer use a coloured side marker anywhere on ToolTapGo. */
.result-box::after{
  display:none!important;
  content:none!important;
}

/* UUID / ULID and palette results keep a neutral, even border on all sides. */
body[data-tool="uuid-and-ulid-generator"] .result-box.ttg-special-result,
body[data-tool="colour-palette-extractor"] .result-box.ttg-special-result{
  border-color:var(--line);
  background:var(--surface);
}

/* The palette cards are the colour view. The duplicate segmented strip above
   them has been removed from the markup and is hidden defensively here. */
body[data-tool="colour-palette-extractor"] .ttg-cpe-bar{
  display:none!important;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-result{
  gap:16px;
}
body[data-tool="colour-palette-extractor"] .ttg-cpe-view-body{
  margin-top:2px;
}

/* JSON to CSV now uses the same numbered, highlighted editor system as HTML
   Viewer rather than a generic textarea. */
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor{
  grid-template-rows:auto minmax(300px,1fr) auto;
  min-height:390px;
  border-radius:16px;
}
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor .ttg-html-codewrap{
  min-height:300px;
}
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 14px;
  border-top:1px solid rgba(148,163,184,.16);
  background:#111c33;
  color:#94a3b8;
  font-size:.72rem;
  line-height:1.45;
}
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor__foot span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor__foot i{
  color:#7dd3fc;
  font-size:15px;
}
body[data-tool="json-to-csv-converter"] .ttg-json-code-editor__foot b{
  color:#cbd5e1;
  font-weight:750;
}

/* Colour Converter follows the reference hierarchy: result first, controls
   beneath it, with an open main workspace and a separate tonal side panel. */
body[data-tool="colour-converter"] .tool-form{
  display:flex;
  flex-direction:column;
}
body[data-tool="colour-converter"] .tool-form>#resultBox{
  order:-1;
  width:100%;
  margin:0 0 24px;
}
body[data-tool="colour-converter"] .tool-form>#toolFields{order:0}
body[data-tool="colour-converter"] .tool-form>#toolStatus{order:1}
body[data-tool="colour-converter"] .tool-form>.result-actions{order:2}
body[data-tool="colour-converter"] .tool-form>.tool-note{order:3}
body[data-tool="colour-converter"] .result-box.ttg-special-result{
  padding:0;
  border:0;
  background:transparent;
}
body[data-tool="colour-converter"] .ttg-cc-result{
  gap:16px;
}
body[data-tool="colour-converter"] .ttg-cc-result-head{
  align-items:center;
  padding-bottom:14px;
}
body[data-tool="colour-converter"] .ttg-cc-preview{
  min-height:124px;
  padding:20px;
  border-radius:15px;
}
body[data-tool="colour-converter"] .ttg-cc-formats{
  gap:10px;
}
body[data-tool="colour-converter"] .ttg-cc-formats article{
  min-height:82px;
  padding:13px 14px;
  background:var(--surface);
}
body[data-tool="colour-converter"] .ttg-cc-workspace{
  grid-template-columns:minmax(0,1.5fr) minmax(275px,.95fr);
  gap:20px;
  align-items:stretch;
}
body[data-tool="colour-converter"] .ttg-cc-main{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  align-content:start;
}
body[data-tool="colour-converter"] .ttg-cc-main>h3{
  margin:0 0 2px;
  color:var(--ink-2);
  font-size:.75rem;
}
body[data-tool="colour-converter"] .ttg-cc-side{
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}
body[data-tool="colour-converter"] .ttg-cc-side>h3{
  color:var(--ink-2);
  font-size:.75rem;
}
body[data-tool="colour-converter"] .ttg-cc-inputs{
  gap:12px;
}
body[data-tool="colour-converter"] .ttg-cc-sliders{
  padding:16px;
  border-radius:14px;
}
body[data-tool="colour-converter"] .tool-form #toolFields .ttg-cc-workspace>.ttg-cc-main>.actions{
  margin-top:2px;
}
body[data-tool="colour-converter"] .ttg-output-result>footer{
  padding-top:4px;
  border-top:1px solid var(--line);
}

/* HTTP reference keeps the controls first, then the update status, then the
   complete reference result and technical example panel. */
body[data-tool="http-status-code-reference"] .tool-form{
  display:flex;
  flex-direction:column;
}
body[data-tool="http-status-code-reference"] .tool-form>#toolFields{order:0}
body[data-tool="http-status-code-reference"] .tool-form>#toolStatus{
  order:1;
  margin:8px 0 18px;
}
body[data-tool="http-status-code-reference"] .tool-form>#resultBox{
  order:2;
  width:100%;
  margin:0;
}
body[data-tool="http-status-code-reference"] .tool-form>.result-actions{order:3}
body[data-tool="http-status-code-reference"] .tool-form>.tool-note{order:4}
body[data-tool="http-status-code-reference"] .result-box.ttg-special-result{
  padding:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface-2);
}
body[data-tool="http-status-code-reference"] .ttg-hs-result{
  gap:14px;
}
body[data-tool="http-status-code-reference"] .ttg-hs-reference,
body[data-tool="http-status-code-reference"] .ttg-hs-protocol,
body[data-tool="http-status-code-reference"] .ttg-hs-tech,
body[data-tool="http-status-code-reference"] .ttg-hs-result .ttg-result-card{
  background:var(--surface);
}
body[data-tool="http-status-code-reference"] .ttg-hs-hero{
  min-height:88px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
body[data-tool="http-status-code-reference"] .ttg-hs-tech{
  padding:16px;
  border:1px solid var(--line);
  border-radius:15px;
}
body[data-tool="http-status-code-reference"] .ttg-hs-code{
  background:#111827;
}
body[data-tool="http-status-code-reference"] .ttg-hs-code pre{
  color:#67e8a7;
}

@media(max-width:760px){
  body[data-tool="colour-converter"] .ttg-cc-workspace{
    grid-template-columns:1fr;
  }
  body[data-tool="colour-converter"] .tool-form>#resultBox{
    margin-bottom:18px;
  }
}

@media(max-width:620px){
  body[data-tool="json-to-csv-converter"] .ttg-json-code-editor{
    min-height:340px;
    grid-template-rows:auto minmax(250px,1fr) auto;
  }
  body[data-tool="json-to-csv-converter"] .ttg-json-code-editor .ttg-html-codewrap{
    min-height:250px;
    grid-template-columns:42px minmax(0,1fr);
  }
  body[data-tool="json-to-csv-converter"] .ttg-json-code-editor__foot{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-tool="colour-converter"] .result-box.ttg-special-result,
  body[data-tool="http-status-code-reference"] .result-box.ttg-special-result{
    padding:15px;
  }
}

/* ========================================================================== 
   Would You Rather Generator — dedicated two-card voting workspace
   ========================================================================== */
body[data-tool="would-you-rather-generator"] .tool-layout>div>.panel:has(#wyrCats){
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body[data-tool="would-you-rather-generator"] .tool-layout>div>.panel:has(#wyrCats)>.guide,
body[data-tool="would-you-rather-generator"] .tool-form>.actions,
body[data-tool="would-you-rather-generator"] .tool-form>.tool-note,
body[data-tool="would-you-rather-generator"] #toolStatus{
  display:none!important;
}
body[data-tool="would-you-rather-generator"] .tool-form{
  margin-top:0;
}
body[data-tool="would-you-rather-generator"] #toolFields{
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft,0 12px 34px rgba(22,42,39,.06));
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-toolbar{
  display:grid;
  gap:20px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-controls{
  align-items:center;
  gap:18px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-cats{
  align-items:center;
  gap:12px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-cats>span{
  font-size:.8125rem;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--muted);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-cats>div{
  gap:8px;
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-cats button{
  min-height:38px;
  padding:0 16px;
  border-color:var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:.8125rem;
  font-weight:750;
  box-shadow:none;
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-cats button:hover{
  border-color:color-mix(in srgb,var(--ink) 24%,var(--line));
  background:var(--surface);
  color:var(--ink);
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-cats button.is-active{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--surface);
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-custom-btn{
  min-height:42px;
  padding:0 17px;
  border-color:var(--line);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:.8125rem;
  box-shadow:0 3px 10px rgba(21,39,37,.04);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-custom-btn i{
  color:var(--brand);
  font-size:17px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-generate-btn{
  min-height:58px;
  padding:0 24px;
  border:1px solid var(--brand);
  border-radius:16px;
  background:var(--brand);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 10px 20px color-mix(in srgb,var(--brand) 22%,transparent);
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-generate-btn:hover{
  border-color:var(--brand-strong,var(--brand));
  background:var(--brand-strong,var(--brand));
  color:#fff;
  transform:translateY(-1px);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-btn i{
  font-size:20px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-row>p{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  white-space:nowrap;
  color:var(--muted);
  font-size:.8125rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-row kbd{
  min-width:48px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--ink-2);
  font:700 .75rem/1 Manrope,system-ui,sans-serif;
  text-align:center;
}
body[data-tool="would-you-rather-generator"] .result-box.ttg-special-result{
  margin-top:32px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-result{
  display:grid;
  gap:0;
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft,0 12px 34px rgba(22,42,39,.06));
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-head{
  min-height:62px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-head>div{
  gap:10px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-category{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 13px;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  color:var(--brand-strong,var(--brand));
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-category.is-tech{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--line));
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  color:var(--brand-strong,var(--brand));
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-category.is-deep,
body[data-tool="would-you-rather-generator"] .ttg-wyr-category.is-pop{
  border-color:color-mix(in srgb,var(--ink) 20%,var(--line));
  background:var(--surface-2);
  color:var(--ink-2);
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-head button{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:.8125rem;
  font-weight:800;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-head button:hover{
  border-color:color-mix(in srgb,var(--teal) 38%,var(--line));
  color:var(--teal-strong);
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-head [data-wyr-fav]{
  width:42px;
  min-width:42px;
  padding:0;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-head [data-wyr-fav].is-saved{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--line));
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  color:var(--brand);
}
body[data-tool="would-you-rather-generator"] .ttg-choice-grid{
  grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr);
  gap:24px;
  padding:28px 0;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card{
  min-height:220px;
  padding:32px;
  border:2px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  color:var(--ink);
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  box-shadow:none;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card:hover{
  border-color:color-mix(in srgb,var(--teal) 42%,var(--line));
  background:var(--surface-2);
  transform:translateY(-2px);
}
body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card.is-chosen{
  border-color:var(--teal);
  background:var(--teal-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent);
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card span{
  width:34px;
  height:34px;
  flex-basis:34px;
  margin-bottom:18px;
  border-radius:11px;
  font-size:.875rem;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card.is-a span{
  background:color-mix(in srgb,var(--brand) 9%,var(--surface));
  color:var(--brand-strong,var(--brand));
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card.is-b span{
  background:var(--teal-soft);
  color:var(--teal-strong);
}
body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card.is-chosen span{
  background:var(--teal);
  color:#fff;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-card strong{
  max-width:470px;
  font-size:1.25rem;
  line-height:1.42;
  font-weight:800;
}
body[data-tool="would-you-rather-generator"] .ttg-choice-or{
  position:relative;
  z-index:3;
  align-self:center;
  width:44px;
  height:44px;
  margin-left:-22px;
  margin-right:-22px;
  border:4px solid var(--surface);
  background:var(--ink);
  color:#fff;
  font-size:.75rem;
  box-shadow:0 4px 12px rgba(12,31,29,.14);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer>span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.8125rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer>span i{
  color:var(--teal-strong);
  font-size:17px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer>div{
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-result>footer button{
  min-height:42px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:.8125rem;
  font-weight:800;
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-result>footer [data-wyr-again]{
  width:42px;
  min-width:42px;
  padding:0;
  border-color:transparent;
  background:transparent;
  color:var(--muted);
}
body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-result>footer button:hover{
  border-color:color-mix(in srgb,var(--teal) 36%,var(--line));
  color:var(--teal-strong);
}


body[data-tool="would-you-rather-generator"] .ttg-wyr-toolbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-saved-btn{
  min-height:42px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:.8125rem;
  font-weight:800;
  box-shadow:0 3px 10px rgba(21,39,37,.04);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-btn i{
  color:var(--brand);
  font-size:17px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-btn span{
  display:inline-grid;
  min-width:24px;
  height:24px;
  place-items:center;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:.7rem;
  line-height:1;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved{
  display:grid;
  gap:18px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft,0 12px 34px rgba(22,42,39,.06));
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head>div{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head>div:first-child>span{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  color:var(--brand);
  font-size:18px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head h2{
  margin:0;
  color:var(--ink);
  font-size:1rem;
  line-height:1.25;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:.75rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head>div:last-child{
  justify-content:flex-end;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head strong{
  color:var(--muted);
  font-size:.75rem;
  white-space:nowrap;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head button,
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions button{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--ink-2);
  font:800 .75rem/1 Manrope,system-ui,sans-serif;
  box-shadow:none;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head button:hover,
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions button:hover{
  border-color:color-mix(in srgb,var(--teal) 36%,var(--line));
  background:var(--surface);
  color:var(--teal-strong);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head button[hidden]{display:none!important}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-list{
  display:grid;
  gap:10px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-2);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-item>div:first-child{
  display:grid;
  gap:4px;
  min-width:0;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-item small{
  color:var(--brand);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-item p{
  margin:0;
  color:var(--ink);
  font-size:.875rem;
  font-weight:750;
  line-height:1.45;
  overflow-wrap:anywhere;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions{
  display:flex;
  align-items:center;
  gap:7px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions button:not([data-wyr-saved-use]){
  width:38px;
  min-width:38px;
  padding:0;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions [data-wyr-saved-remove]:hover{
  border-color:color-mix(in srgb,var(--danger) 36%,var(--line));
  color:var(--danger);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:112px;
  padding:22px;
  border:1px dashed var(--line);
  border-radius:16px;
  background:var(--surface-2);
  text-align:left;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-empty>span{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:12px;
  background:var(--surface);
  color:var(--muted);
  font-size:18px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-empty strong{
  display:block;
  color:var(--ink);
  font-size:.875rem;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-empty p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.75rem;
}

/* Random Picker — post-link fetch flow from the supplied social import code. */
.ttg-picker-fetch-loader[hidden]{display:none!important}
.ttg-picker-fetch-loader{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  margin-top:10px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--teal) 28%,var(--line));
  border-radius:12px;
  background:var(--teal-soft);
  color:var(--teal-strong);
  font-size:.75rem;
  font-weight:750;
}
.ttg-picker-fetch-loader i{
  font-size:18px;
  animation:ttgPickerFetchSpin .8s linear infinite;
}
.ttg-picker-social-status.is-loading{
  color:var(--teal-strong);
}
.tool-form #toolFields .ttg-picker-url-row button:disabled{
  opacity:.62;
  cursor:wait;
  transform:none!important;
}
@keyframes ttgPickerFetchSpin{to{transform:rotate(360deg)}}

@media(max-width:820px){
  body[data-tool="would-you-rather-generator"] #toolFields,
  body[data-tool="would-you-rather-generator"] .ttg-wyr-result{
    padding:20px;
    border-radius:20px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-controls{
    align-items:stretch;
    flex-direction:column;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-toolbar-actions{
    width:100%;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-custom-btn,
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-btn{
    flex:1 1 220px;
    justify-content:center;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-row{
    grid-template-columns:1fr;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-generate-row>p{
    justify-content:center;
  }
  body[data-tool="would-you-rather-generator"] .ttg-choice-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  body[data-tool="would-you-rather-generator"] .ttg-choice-or{
    margin:-12px auto;
  }
  body[data-tool="would-you-rather-generator"] .ttg-output-result button.ttg-choice-card{
    min-height:170px;
    padding:24px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer{
    align-items:stretch;
    flex-direction:column;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer>div{
    justify-content:flex-end;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved{
    padding:20px;
    border-radius:20px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-item{
    grid-template-columns:1fr;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions{
    justify-content:flex-end;
  }
}
@media(max-width:520px){
  body[data-tool="would-you-rather-generator"] #toolFields,
  body[data-tool="would-you-rather-generator"] .ttg-wyr-result{
    padding:16px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-cats{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-cats>div{
    width:100%;
  }
  body[data-tool="would-you-rather-generator"] .tool-form #toolFields .ttg-wyr-cats button{
    flex:1 1 auto;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-head{
    align-items:flex-start;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-head>div{
    width:100%;
    justify-content:flex-end;
  }
  body[data-tool="would-you-rather-generator"] .ttg-choice-card strong{
    font-size:1.05rem;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-result>footer>div{
    display:grid;
    grid-template-columns:1fr 42px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-output-result .ttg-wyr-result>footer button{
    width:100%;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved{
    padding:16px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head>div:last-child{
    width:100%;
    justify-content:space-between;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions{
    display:grid;
    grid-template-columns:1fr 38px 38px;
  }
  body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-actions [data-wyr-saved-use]{
    width:100%;
  }
}

/* Colour Converter — the reference layout.
   Channel rows are divs, not labels, so the shared field decorator leaves them
   alone; these rules restore the compact label / track / value row. */
body[data-tool="colour-converter"] .ttg-cc-sliders{
  display:grid;
  gap:12px;
}
body[data-tool="colour-converter"] .ttg-cc-slider{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  margin:0;
}
body[data-tool="colour-converter"] .ttg-cc-slider>b{
  font-size:.8rem;
  font-weight:900;
  color:var(--ink-2);
}
body[data-tool="colour-converter"] .ttg-cc-slider>output{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.78rem;
  font-weight:800;
  color:var(--ink);
  text-align:right;
}
body[data-tool="colour-converter"] .tool-form #toolFields .ttg-cc-slider>input[type=range]{
  --cc-track:linear-gradient(90deg,#000,#fff);
  width:100%;
  height:10px;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--cc-track);
  accent-color:auto;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  height:19px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 4px rgba(16,43,42,.45);
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-moz-range-thumb{
  width:19px;
  height:19px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 4px rgba(16,43,42,.45);
}
/* Format values sit on one line in the reference. */
body[data-tool="colour-converter"] .ttg-cc-formats strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* site.css forces `background:transparent!important` on range inputs and paints
   the track through ::-webkit-slider-runnable-track in the brand colour. The
   channel gradient therefore has to be applied to the track itself; --cc-track
   is set inline per channel and inherits into the pseudo-element. */
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-webkit-slider-runnable-track{
  height:8px;
  border:0;
  border-radius:999px;
  background:var(--cc-track);
  box-shadow:none;
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-moz-range-track{
  height:8px;
  border:0;
  border-radius:999px;
  background:var(--cc-track);
  box-shadow:none;
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-moz-range-progress{
  background:transparent;
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-5px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 4px rgba(16,43,42,.45),0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent);
}
body[data-tool="colour-converter"] .ttg-cc-slider>input[type=range]::-moz-range-thumb{
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 4px rgba(16,43,42,.45);
}

/* Saved dilemmas: four rows visible, collapsible, and draggable to resize. */
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-list{
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  transition:max-height .2s ease;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-list.is-collapsed{
  overflow:hidden;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-list::-webkit-scrollbar{
  width:8px;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-list::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:var(--line);
  background-clip:content-box;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-resize{
  display:grid;
  place-items:center;
  height:20px;
  margin-top:2px;
  border-radius:999px;
  cursor:ns-resize;
  touch-action:none;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-resize>span{
  width:46px;
  height:4px;
  border-radius:999px;
  background:var(--line);
  transition:background .18s ease,width .18s ease;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-resize:hover>span,
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-resize:focus-visible>span,
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-resize.is-dragging>span{
  width:64px;
  background:var(--teal);
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head [data-wyr-saved-toggle]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
body[data-tool="would-you-rather-generator"] .ttg-wyr-saved-head [data-wyr-saved-toggle]:hover{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--line));
  color:var(--teal-strong);
}

/* Random picker full screen: the display and a close button, nothing else. */
body[data-tool="random-picker"] .ttg-picker-winner{
  display:grid;
  place-items:center;
  padding:32px;
}
body[data-tool="random-picker"] .ttg-picker-winner-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:var(--picker-winner-text,#fff);
  font-size:19px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
body[data-tool="random-picker"] .ttg-picker-winner-close:hover{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
body[data-tool="random-picker"] .ttg-picker-winner-main{
  display:grid;
  justify-items:center;
  gap:14px;
  max-width:min(1100px,92vw);
  text-align:center;
}
body[data-tool="random-picker"] .ttg-picker-winner-main>span{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:var(--picker-winner-text,#fff);
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body[data-tool="random-picker"] .ttg-picker-winner-main>strong{
  color:var(--picker-winner-text,#fff);
  font-family:"Plus Jakarta Sans",Manrope,sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
body[data-tool="random-picker"] .ttg-picker-winner.is-ready .ttg-picker-winner-main>strong{
  font-size:clamp(1.5rem,4vw,2.6rem);
  opacity:.9;
  animation:ttgPickerReady 2.4s ease-in-out infinite;
}
body[data-tool="random-picker"] .ttg-picker-winner.is-rolling .ttg-picker-winner-main>strong{
  font-size:clamp(2rem,7vw,4.6rem);
  animation:ttgPickerRoll .16s ease-out;
}
body[data-tool="random-picker"] .ttg-picker-winner.is-done .ttg-picker-winner-main>strong{
  font-size:clamp(2.4rem,9vw,6rem);
  text-shadow:0 12px 40px rgba(0,0,0,.32);
}
body[data-tool="random-picker"] .ttg-picker-winner.is-celebrating .ttg-picker-winner-main>strong{
  animation:ttgPickerWin .82s cubic-bezier(.18,.9,.24,1.08);
}
body[data-tool="random-picker"] .ttg-picker-winner.is-celebrating .ttg-picker-winner-main>span{
  animation:ttgPickerBadge .82s cubic-bezier(.18,.9,.24,1.08);
}
@keyframes ttgPickerReady{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes ttgPickerRoll{from{opacity:.35;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ttgPickerWin{
  0%{opacity:0;transform:scale(.72) translateY(18px)}
  46%{opacity:1;transform:scale(1.09) translateY(-6px)}
  70%{transform:scale(.98)}
  100%{transform:scale(1)}
}
@keyframes ttgPickerBadge{
  0%{opacity:0;transform:translateY(12px) scale(.8)}
  60%{opacity:1;transform:translateY(0) scale(1.06)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  body[data-tool="random-picker"] .ttg-picker-winner .ttg-picker-winner-main>strong,
  body[data-tool="random-picker"] .ttg-picker-winner .ttg-picker-winner-main>span{
    animation:none!important;
  }
}

/* Pomodoro focus timer.
   Single stacked column: bar, stage, then each settings panel in turn. */
body[data-tool="pomodoro-timer"] .ttg-pom{
  --pom-bg:#eaf6f3;
  --pom-colour:#0f766e;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
body[data-tool="pomodoro-timer"] .ttg-pom-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}
body[data-tool="pomodoro-timer"] .ttg-pom-brand{display:flex;align-items:center;gap:12px;min-width:0}
body[data-tool="pomodoro-timer"] .ttg-pom-brand>span{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:13px;background:var(--teal-soft);color:var(--teal-strong);font-size:19px;
}
body[data-tool="pomodoro-timer"] .ttg-pom-brand strong{display:block;font-size:.95rem}
body[data-tool="pomodoro-timer"] .ttg-pom-brand small{display:block;color:var(--muted);font-size:.72rem}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-bar>button{
  flex:0 0 auto;width:42px;height:42px;min-height:0;padding:0;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:18px;
}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-bar>button:hover{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong);
}

body[data-tool="pomodoro-timer"] .ttg-pom-stage{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:28px 20px;
  border:1px solid var(--line);border-radius:22px;
  background:var(--pom-bg);
  color:#102b2a;
}
body[data-tool="pomodoro-timer"] .ttg-pom-stage>canvas{position:absolute;inset:0;width:100%;height:100%;max-width:100%;pointer-events:none;z-index:0}
body[data-tool="pomodoro-timer"] .ttg-pom-stage>*:not(canvas){position:relative;z-index:1}
body[data-tool="pomodoro-timer"] .ttg-pom-modes{
  display:flex;gap:5px;flex-wrap:wrap;justify-content:center;
  padding:5px;border-radius:14px;background:rgba(255,255,255,.55);
}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-modes button{
  min-height:36px;padding:0 14px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:#4a5f5c;font-size:.75rem;font-weight:800;
}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-modes button.is-active{
  background:#fff;color:#102b2a;box-shadow:0 2px 8px rgba(16,43,42,.12);
}
body[data-tool="pomodoro-timer"] .ttg-pom-display{display:grid;place-items:center;width:100%;min-height:300px}
body[data-tool="pomodoro-timer"] .ttg-pom-round{display:grid;justify-items:center;gap:6px;text-align:center}
body[data-tool="pomodoro-timer"] .ttg-pom-round small{font-size:.64rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#6b807d}
body[data-tool="pomodoro-timer"] .ttg-pom-round span{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.7);color:#102b2a;font-size:.74rem;font-weight:800;
}

body[data-tool="pomodoro-timer"] .ttg-pom-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:420px}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-controls button{
  flex:1;min-width:104px;min-height:48px;padding:0 16px;
  border:1px solid rgba(16,43,42,.14);border-radius:14px;background:rgba(255,255,255,.86);
  color:#102b2a;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-controls button.is-primary{
  flex:1.4;border-color:transparent;background:var(--pom-colour);color:#fff;
}
body[data-tool="pomodoro-timer"] .ttg-pom-exit[hidden],
body[data-tool="pomodoro-timer"] .ttg-pom:not(.is-fullscreen):not(:fullscreen) .ttg-pom-exit{display:none}
body[data-tool="pomodoro-timer"] .ttg-pom-exit{
  position:absolute;top:16px;right:16px;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(16,43,42,.16);border-radius:999px;background:rgba(255,255,255,.7);color:#102b2a;font-size:18px;
}

body[data-tool="pomodoro-timer"] .ttg-pom-ring{position:relative;display:grid;place-items:center;width:min(290px,78vw);aspect-ratio:1}
body[data-tool="pomodoro-timer"] .ttg-pom-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
body[data-tool="pomodoro-timer"] .ttg-pom-ring-track{fill:none;stroke:rgba(16,43,42,.12);stroke-width:8}
body[data-tool="pomodoro-timer"] .ttg-pom-ring-value{fill:none;stroke:var(--pom-colour);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .3s ease}
body[data-tool="pomodoro-timer"] .ttg-pom-ring>div{position:absolute;inset:0;display:grid;place-items:center;gap:0;text-align:center}
body[data-tool="pomodoro-timer"] .ttg-pom-ring>div>small,
body[data-tool="pomodoro-timer"] .ttg-pom-ring>div>strong{grid-area:1/1}
body[data-tool="pomodoro-timer"] .ttg-pom-ring>div>small{transform:translateY(-2.4rem)}
body[data-tool="pomodoro-timer"] .ttg-pom-ring small,
body[data-tool="pomodoro-timer"] .ttg-pom-neu small,
body[data-tool="pomodoro-timer"] .ttg-pom-bold small{font-size:.68rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#6b807d}
body[data-tool="pomodoro-timer"] .ttg-pom-ring strong{font:800 clamp(2.6rem,10vw,3.9rem)/1 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.05em;color:var(--pom-colour)}

body[data-tool="pomodoro-timer"] .ttg-pom-neu{
  position:relative;display:grid;place-items:center;gap:8px;
  width:min(290px,78vw);aspect-ratio:1;border-radius:50%;
  background:var(--pom-bg);
  box-shadow:12px 12px 26px rgba(16,43,42,.10),-12px -12px 26px rgba(255,255,255,.85);
}
body[data-tool="pomodoro-timer"] .ttg-pom-neu-dash{position:absolute;inset:16px;border:1px dashed rgba(16,43,42,.2);border-radius:50%}
body[data-tool="pomodoro-timer"] .ttg-pom-neu strong{font:800 clamp(2.1rem,8vw,3.2rem)/1 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.05em;color:var(--pom-colour)}
body[data-tool="pomodoro-timer"] .ttg-pom-neu-bar{width:70px;height:4px;border-radius:999px;background:rgba(16,43,42,.14);overflow:hidden}
body[data-tool="pomodoro-timer"] .ttg-pom-neu-bar i{display:block;height:100%;background:var(--pom-colour);transition:width .3s ease}

body[data-tool="pomodoro-timer"] .ttg-pom-cyber{
  position:relative;overflow:hidden;display:grid;justify-items:center;gap:10px;
  width:100%;max-width:520px;padding:30px 22px;
  border:1px solid #22323f;border-radius:20px;background:#0b1220;text-align:center;
}
body[data-tool="pomodoro-timer"] .ttg-pom-cyber-line{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--pom-colour),transparent)}
body[data-tool="pomodoro-timer"] .ttg-pom-cyber small{font:700 .66rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--pom-colour) 78%,#fff)}
body[data-tool="pomodoro-timer"] .ttg-pom-cyber strong{
  font:800 clamp(2.4rem,11vw,4.2rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em;color:var(--pom-colour);
  text-shadow:0 0 18px currentColor,0 0 38px color-mix(in srgb,currentColor 55%,transparent);
}
body[data-tool="pomodoro-timer"] .ttg-pom-cyber-bar{width:100%;height:8px;padding:2px;border:1px solid #22323f;border-radius:999px;background:#0f1a2b}
body[data-tool="pomodoro-timer"] .ttg-pom-cyber-bar i{display:block;height:100%;border-radius:999px;background:var(--pom-colour);transition:width .3s ease}

body[data-tool="pomodoro-timer"] .ttg-pom-analog{
  position:relative;display:grid;place-items:center;
  width:min(290px,78vw);aspect-ratio:1;border-radius:50%;
  border:4px solid rgba(16,43,42,.14);background:rgba(255,255,255,.62);
  box-shadow:inset 0 4px 18px rgba(16,43,42,.08);
}
body[data-tool="pomodoro-timer"] .ttg-pom-tick{position:absolute;font-size:.72rem;font-weight:800;color:#6b807d}
body[data-tool="pomodoro-timer"] .ttg-pom-tick[data-at="12"]{top:12px}
body[data-tool="pomodoro-timer"] .ttg-pom-tick[data-at="3"]{right:14px}
body[data-tool="pomodoro-timer"] .ttg-pom-tick[data-at="6"]{bottom:12px}
body[data-tool="pomodoro-timer"] .ttg-pom-tick[data-at="9"]{left:14px}
body[data-tool="pomodoro-timer"] .ttg-pom-hand{position:absolute;left:50%;top:50%;transform-origin:50% 100%;border-radius:999px}
body[data-tool="pomodoro-timer"] .ttg-pom-hand.is-minute{width:5px;height:31%;background:var(--pom-colour)}
body[data-tool="pomodoro-timer"] .ttg-pom-hand.is-second{width:2px;height:38%;background:var(--brand)}
body[data-tool="pomodoro-timer"] .ttg-pom-pivot{position:absolute;width:14px;height:14px;border-radius:50%;background:#102b2a}
body[data-tool="pomodoro-timer"] .ttg-pom-analog small{position:absolute;bottom:24%;font:700 .86rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#102b2a}

body[data-tool="pomodoro-timer"] .ttg-pom-bold{display:grid;justify-items:center;gap:8px;width:100%;max-width:560px;text-align:center}
body[data-tool="pomodoro-timer"] .ttg-pom-bold strong{font:800 clamp(3rem,15vw,6rem)/1 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.06em;color:var(--pom-colour)}
body[data-tool="pomodoro-timer"] .ttg-pom-bold-bar{width:100%;height:12px;padding:2px;border-radius:999px;background:rgba(16,43,42,.13)}
body[data-tool="pomodoro-timer"] .ttg-pom-bold-bar i{display:block;height:100%;border-radius:999px;background:var(--pom-colour);transition:width .3s ease}

body[data-tool="pomodoro-timer"] .ttg-pom-panel{
  display:grid;gap:13px;min-width:0;padding:18px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
}
body[data-tool="pomodoro-timer"] .ttg-pom-panel h3{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.68rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted);
}
body[data-tool="pomodoro-timer"] .ttg-pom-panel h3 i{color:var(--teal-strong);font-size:15px}
body[data-tool="pomodoro-timer"] .ttg-pom-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-styles button{
  display:grid;gap:3px;min-height:0;padding:13px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);
  color:var(--ink);text-align:left;font-weight:inherit;
}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-styles button.is-active{
  border-color:var(--teal);background:var(--teal-soft);
}
body[data-tool="pomodoro-timer"] .ttg-pom-styles b{font-size:.8rem;font-weight:850}
body[data-tool="pomodoro-timer"] .ttg-pom-styles small{color:var(--muted);font-size:.68rem}
body[data-tool="pomodoro-timer"] .ttg-pom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
body[data-tool="pomodoro-timer"] .ttg-pom-colours{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
body[data-tool="pomodoro-timer"] .ttg-pom-field{display:grid;gap:7px;min-width:0}
body[data-tool="pomodoro-timer"] .ttg-pom-field>span{font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
body[data-tool="pomodoro-timer"] .ttg-pom-colour{display:flex;align-items:center;gap:10px}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-colour input[type=color]{
  flex:0 0 52px;width:52px;height:44px;min-height:0;padding:3px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;
}
body[data-tool="pomodoro-timer"] .ttg-pom-colour code{font-size:.76rem;font-weight:800;color:var(--ink-2)}
body[data-tool="pomodoro-timer"] .ttg-pom-presets{display:flex;gap:8px;flex-wrap:wrap}
body[data-tool="pomodoro-timer"] .tool-form #toolFields .ttg-pom-presets button{
  display:flex;overflow:hidden;width:56px;height:34px;min-height:0;padding:0;
  border:1px solid var(--line);border-radius:10px;
}
body[data-tool="pomodoro-timer"] .ttg-pom-presets i{flex:1;display:block;align-self:stretch;height:100%;min-height:32px}
body[data-tool="pomodoro-timer"] .ttg-pom-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
body[data-tool="pomodoro-timer"] .ttg-pom-stats article{
  display:grid;gap:3px;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--surface);text-align:center;
}
body[data-tool="pomodoro-timer"] .ttg-pom-stats strong{font:800 1.6rem/1 "Plus Jakarta Sans",Manrope,sans-serif;color:var(--ink)}
body[data-tool="pomodoro-timer"] .ttg-pom-stats small{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body[data-tool="pomodoro-timer"] .ttg-pom-stats .is-goal{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ink);color:var(--surface);text-align:left;
}
body[data-tool="pomodoro-timer"] .ttg-pom-stats .is-goal small{color:color-mix(in srgb,var(--surface) 70%,transparent)}
body[data-tool="pomodoro-timer"] .ttg-pom-stats .is-goal b{font-size:.82rem}
body[data-tool="pomodoro-timer"] .ttg-pom-stats .is-goal>span{
  display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;
  border:4px solid var(--gold);border-radius:50%;font-size:.72rem;font-weight:850;
}

/* Full screen keeps only the stage. */
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen{
  position:fixed;inset:0;z-index:4000;gap:0;padding:0;width:100vw;height:100vh;background:var(--pom-bg);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen>*:not(.ttg-pom-stage),
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen>*:not(.ttg-pom-stage){display:none}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-stage,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-stage{
  flex:1;justify-content:center;border:0;border-radius:0;height:100%;
}
body.ttg-pomodoro-locked{overflow:hidden}

@media(max-width:620px){
  body[data-tool="pomodoro-timer"] .ttg-pom-stage{padding:20px 14px}
  body[data-tool="pomodoro-timer"] .ttg-pom-controls button{flex:1 1 100%}
  body[data-tool="pomodoro-timer"] .ttg-pom-bar{align-items:flex-start}
}

/* Random picker: full screen text is centred, and the chosen colours win over
   the selected theme's own background. */
body[data-tool="random-picker"] .ttg-picker-winner-main{
  justify-items:center;
  text-align:center;
  margin-inline:auto;
}
body[data-tool="random-picker"] .ttg-picker-winner-main>strong{
  width:100%;
  text-align:center;
}
body[data-tool="random-picker"] .ttg-picker-winner.has-custom-colours{
  background:var(--picker-solid-bg)!important;
  background-image:none!important;
  animation:none!important;
}
body[data-tool="random-picker"] .ttg-picker-winner.has-custom-colours .ttg-picker-winner-main>strong,
body[data-tool="random-picker"] .ttg-picker-winner.has-custom-colours .ttg-picker-winner-main>span{
  color:var(--picker-winner-text);
}
body[data-tool="random-picker"] .ttg-picker-colour-row.is-pairs{align-items:flex-start}
body[data-tool="random-picker"] .ttg-picker-pairs{display:flex;gap:7px;flex-wrap:wrap}
body[data-tool="random-picker"] .tool-form #toolFields .ttg-picker-pairs button{
  display:flex;
  overflow:hidden;
  width:54px;
  height:32px;
  min-height:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:9px;
}
body[data-tool="random-picker"] .ttg-picker-pairs button i{flex:1;display:block;align-self:stretch;height:100%}
body[data-tool="random-picker"] .tool-form #toolFields .ttg-picker-pairs button:hover{
  border-color:color-mix(in srgb,var(--teal) 42%,var(--line));
}

/* Pomodoro: clock styles on one line, and the colour inputs share a row with
   the presets. */
body[data-tool="pomodoro-timer"] .ttg-pom-styles{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
body[data-tool="pomodoro-timer"] .ttg-pom-colours{
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:start;
  gap:18px;
}
@media(max-width:900px){
  body[data-tool="pomodoro-timer"] .ttg-pom-styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-tool="pomodoro-timer"] .ttg-pom-colours{grid-template-columns:1fr}
}
@media(max-width:560px){
  body[data-tool="pomodoro-timer"] .ttg-pom-styles{grid-template-columns:1fr}
}

/* Full screen: push the mode switch to the top and the round, controls and
   close to the bottom, letting the clock take the space between. */
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-stage,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-stage{
  justify-content:space-between;
  gap:clamp(14px,3vh,32px);
  padding:clamp(22px,5vh,60px) 24px clamp(26px,6vh,68px);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-display,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-display{
  flex:1;
  align-content:center;
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-controls,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-controls{
  max-width:520px;
}
/* The generic stage-child rule sets position:relative and out-ranks the plain
   .ttg-pom-exit selector, so the close button needs the deeper match. */
body[data-tool="pomodoro-timer"] .ttg-pom-stage>.ttg-pom-exit{
  position:absolute;
  top:clamp(16px,3vh,32px);
  right:clamp(16px,3vw,32px);
}

/* Narrow screens: the mode switch spans most of the width, so drop the stage
   content below the close button rather than letting them overlap. */
@media(max-width:620px){
  body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-stage,
  body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-stage{
    padding-top:80px;
  }
}

/* Full screen gives the clock the whole middle band, so every style scales up
   from the inline size. Heights are viewport-relative so the dial always fits
   between the mode switch and the controls. */
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-ring,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-ring,
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-neu,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-neu,
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-analog,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-analog{
  width:min(58vh,84vw,calc(100vh - 300px));
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-ring strong,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-ring strong{
  font-size:clamp(3.2rem,13vh,7.4rem);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-ring>div>small,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-ring>div>small{
  font-size:.92rem;
  transform:translateY(clamp(-5.4rem,-8vh,-3.4rem));
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-neu strong,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-neu strong{
  font-size:clamp(2.8rem,11vh,6.2rem);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-neu small,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-neu small{font-size:.92rem}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-neu-bar,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-neu-bar{width:min(180px,26vh);height:7px}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-cyber,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-cyber{
  max-width:min(1040px,92vw);
  padding:clamp(28px,6vh,64px) clamp(24px,5vw,56px);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-cyber strong,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-cyber strong{
  font-size:clamp(3rem,14vh,8rem);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-cyber small,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-cyber small{font-size:.9rem}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-analog small,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-analog small{font-size:1.5rem}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-analog .ttg-pom-tick,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-analog .ttg-pom-tick{font-size:1.15rem}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-pivot,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-pivot{width:22px;height:22px}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-bold,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-bold{max-width:min(1180px,94vw);gap:16px}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-bold strong,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-bold strong{
  font-size:clamp(4rem,22vh,12rem);
}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-bold small,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-bold small{font-size:1rem}
body[data-tool="pomodoro-timer"] .ttg-pom.is-fullscreen .ttg-pom-bold-bar,
body[data-tool="pomodoro-timer"] .ttg-pom:fullscreen .ttg-pom-bold-bar{height:18px}

/* Social post preview: Platform has no helper line while Profile name and
   Handle do, which pushed their inputs 18px lower than the dropdown. Reserving
   the helper's line height on the empty one lines all three controls up. */
body[data-tool="social-post-preview"] .ttg-social-profile-row .tool-field__help--empty{
  min-height:1.48em;
}

/* Currency converter.
   The field decorator gives each label grid-template-rows:subgrid, but the
   currency pair row defines only one row, so the label, helper and control all
   landed in the same cell and the caption sat behind the dropdown. */
body[data-tool="currency-converter"] .ttg-currency-pair .tool-field{
  grid-template-rows:none;
  align-content:end;
  gap:7px;
}
body[data-tool="currency-converter"] .ttg-currency-pair .tool-field__help--empty{
  display:none;
}
/* Press feedback for Convert currency and Copy conversion result. */
body[data-tool="currency-converter"] #calculate,
body[data-tool="currency-converter"] #copyCurrency{
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
body[data-tool="currency-converter"] #calculate:active,
body[data-tool="currency-converter"] #copyCurrency:active{
  transform:translateY(1px);
}
body[data-tool="currency-converter"] #calculate.is-done,
body[data-tool="currency-converter"] #copyCurrency.is-done{
  border-color:var(--teal)!important;
  background:var(--teal)!important;
  color:#fff!important;
}
[data-theme=dark] body[data-tool="currency-converter"] #calculate.is-done,
[data-theme=dark] body[data-tool="currency-converter"] #copyCurrency.is-done{
  color:#08201e!important;
}

/* The overlay is a grid with justify-content:space-between, so its single
   child was placed at the start and shrank to fit — 500px left of centre.
   Centring the item itself is independent of the container's distribution. */
body[data-tool="random-picker"] .ttg-picker-winner{
  justify-items:center;
  justify-content:center;
}
body[data-tool="random-picker"] .ttg-picker-winner-main{
  justify-self:center;
  width:min(1100px,92vw);
  margin-inline:auto;
  text-align:center;
}

/* Social import modal: the shared field decorator laid the API key field out as
   two columns, leaving the input 298px wide so its placeholder was cut off, and
   put the caption and helper on the same line. Stack them instead. */
body[data-tool="random-picker"] #pickerSocialModal .tool-field,
body[data-tool="random-picker"] .ttg-picker-api-key{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:none;
  gap:6px;
  align-items:start;
}
body[data-tool="random-picker"] #pickerSocialModal .tool-field__label{
  display:block;
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
body[data-tool="random-picker"] #pickerSocialModal .tool-field__help{
  display:block;
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}
body[data-tool="random-picker"] #pickerSocialModal .tool-field__control{
  width:100%;
  min-width:0;
}
body[data-tool="random-picker"] #pickerSocialModal .tool-field__control input,
body[data-tool="random-picker"] #pickerSocialModal .tool-field__control textarea,
body[data-tool="random-picker"] #pickerSocialModal input[type="text"],
body[data-tool="random-picker"] #pickerSocialModal input[type="password"],
body[data-tool="random-picker"] #pickerSocialModal input[type="url"]{
  width:100%;
  min-width:0;
  min-height:48px;
  text-overflow:ellipsis;
}
body[data-tool="random-picker"] #pickerSocialModal textarea{
  min-height:132px;
}
/* Toggle rows: keep the caption and its explanation on separate lines. */
body[data-tool="random-picker"] #pickerSocialModal .mega-check,
body[data-tool="random-picker"] #pickerSocialModal label:has(> input[type="checkbox"]){
  display:flex;
  align-items:flex-start;
  gap:10px;
}
body[data-tool="random-picker"] #pickerSocialModal .mega-check span{
  display:grid;
  gap:2px;
  min-width:0;
}

/* Color Matcher: base colour input, harmony rules, palette, live preview and
   the WCAG matrix, all in the site's own tokens. */
body[data-tool="color-matcher"] .ttg-cm{display:flex;flex-direction:column;gap:16px;min-width:0}
body[data-tool="color-matcher"] .ttg-cm-panel{
  display:grid;gap:14px;min-width:0;padding:18px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
}
body[data-tool="color-matcher"] .ttg-cm-panel>header{display:flex;align-items:center;gap:12px}
body[data-tool="color-matcher"] .ttg-cm-panel>header>span{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:13px;background:var(--teal-soft);color:var(--teal-strong);font-size:19px;
}
body[data-tool="color-matcher"] .ttg-cm-panel>header small{
  display:block;font-size:.64rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase;color:var(--muted);
}
body[data-tool="color-matcher"] .ttg-cm-panel>header strong{display:block;font-size:.98rem}
body[data-tool="color-matcher"] .ttg-cm-base{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
body[data-tool="color-matcher"] .ttg-cm-field{display:grid;gap:7px;min-width:0}
body[data-tool="color-matcher"] .ttg-cm-field>span{
  font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
body[data-tool="color-matcher"] .ttg-cm-colour{display:flex;align-items:center;gap:10px}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-colour input[type=color]{
  flex:0 0 56px;width:56px;height:48px;min-height:0;padding:3px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;
}
body[data-tool="color-matcher"] .ttg-cm-colour code{font-size:.8rem;font-weight:800;color:var(--ink-2)}
body[data-tool="color-matcher"] .ttg-cm-hex{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
body[data-tool="color-matcher"] .ttg-cm-hex>i{font-style:normal;font-size:1rem;font-weight:900;color:var(--muted)}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-hex input{
  width:100%;min-height:0;padding:0;border:0;background:transparent;
  font:800 1rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-hex input:focus{outline:none}
body[data-tool="color-matcher"] .ttg-cm-hex:focus-within{
  border-color:color-mix(in srgb,var(--teal) 45%,var(--line));box-shadow:0 0 0 3px var(--teal-soft);
}
body[data-tool="color-matcher"] .ttg-cm-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-rules button{
  min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--ink-2);font-size:.74rem;font-weight:800;
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-rules button:hover{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong);
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-rules button.is-active{
  border-color:var(--teal);background:var(--teal);color:#fff;
}
[data-theme=dark] body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-rules button.is-active{color:#08201e}
body[data-tool="color-matcher"] .ttg-cm-presets{display:flex;gap:7px;flex-wrap:wrap}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-presets button{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:.72rem;font-weight:800;
}
body[data-tool="color-matcher"] .ttg-cm-presets i{width:14px;height:14px;border-radius:5px;border:1px solid rgba(16,43,42,.14)}

body[data-tool="color-matcher"] .ttg-cm-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-tabs button{
  min-height:42px;padding:0 15px;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:transparent;color:var(--muted);font-size:.78rem;font-weight:850;
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-tabs button.is-active{
  border-bottom-color:var(--teal);color:var(--teal-strong);
}
body[data-tool="color-matcher"] .ttg-cm-view{display:grid;gap:12px;min-width:0}
body[data-tool="color-matcher"] .ttg-cm-view>header{display:grid;gap:2px}
body[data-tool="color-matcher"] .ttg-cm-view>header strong{font-size:.95rem}
body[data-tool="color-matcher"] .ttg-cm-view>header small{color:var(--muted);font-size:.74rem}

body[data-tool="color-matcher"] .ttg-cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
body[data-tool="color-matcher"] .ttg-cm-swatch{
  overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface);
}
body[data-tool="color-matcher"] .ttg-cm-swatch.is-locked{
  border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 24%,transparent);
}
body[data-tool="color-matcher"] .ttg-cm-chip{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:104px;padding:12px;
}
body[data-tool="color-matcher"] .ttg-cm-chip>span{
  padding:4px 9px;border-radius:999px;background:color-mix(in srgb,currentColor 16%,transparent);
  font-size:.62rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-chip button{
  display:grid;place-items:center;width:30px;height:30px;min-height:0;padding:0;
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);border-radius:9px;
  background:color-mix(in srgb,currentColor 16%,transparent);color:inherit;
}
body[data-tool="color-matcher"] .ttg-cm-meta{display:grid;gap:4px;padding:11px 12px}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-meta button{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:0;padding:0;border:0;background:transparent;color:var(--ink);
}
body[data-tool="color-matcher"] .ttg-cm-meta code{font:800 .86rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
body[data-tool="color-matcher"] .ttg-cm-meta i{color:var(--muted);font-size:14px}
body[data-tool="color-matcher"] .ttg-cm-meta small{color:var(--muted);font-size:.66rem}

body[data-tool="color-matcher"] .ttg-cm-canvas{padding:24px;border:1px solid var(--line);border-radius:16px;transition:background .25s ease}
body[data-tool="color-matcher"] .ttg-cm-card{
  display:grid;gap:10px;max-width:520px;margin-inline:auto;padding:22px;
  border:1px solid var(--line);border-radius:16px;background:#fff;color:#101817;
}
body[data-tool="color-matcher"] .ttg-cm-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
body[data-tool="color-matcher"] .ttg-cm-card-top span{padding:5px 11px;border-radius:999px;font-size:.66rem;font-weight:850}
body[data-tool="color-matcher"] .ttg-cm-card-top code{font-size:.64rem;color:#7b8a87}
body[data-tool="color-matcher"] .ttg-cm-card h4{margin:0;font-size:1.15rem;font-weight:850}
body[data-tool="color-matcher"] .ttg-cm-card p{margin:0;color:#5c6b68;font-size:.8rem;line-height:1.6}
body[data-tool="color-matcher"] .ttg-cm-callout{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid transparent;border-radius:12px;font-size:.74rem;font-weight:700;
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-card button{
  width:100%;min-height:44px;border:1px solid transparent;border-radius:12px;font-weight:850;font-size:.82rem;
}
body[data-tool="color-matcher"] .tool-form #toolFields #cmSecondaryBtn{border-width:1px;border-style:solid}

body[data-tool="color-matcher"] .ttg-cm-contrast{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
body[data-tool="color-matcher"] .ttg-cm-contrast-card{
  display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);
}
body[data-tool="color-matcher"] .ttg-cm-contrast-card>header{display:flex;align-items:center;gap:11px}
body[data-tool="color-matcher"] .ttg-cm-contrast-card>header>span{
  flex:0 0 38px;width:38px;height:38px;border-radius:11px;border:1px solid rgba(16,43,42,.14);
}
body[data-tool="color-matcher"] .ttg-cm-contrast-card strong{display:block;font:800 .84rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
body[data-tool="color-matcher"] .ttg-cm-contrast-card small{display:block;color:var(--muted);font-size:.68rem}
body[data-tool="color-matcher"] .ttg-cm-contrast-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:11px;font-size:.72rem;font-weight:800;
}
body[data-tool="color-matcher"] .ttg-cm-contrast-row div{display:flex;gap:5px}
body[data-tool="color-matcher"] .ttg-cm-contrast-row b{
  padding:2px 8px;border-radius:6px;font-size:.6rem;font-weight:900;letter-spacing:.04em;
}
body[data-tool="color-matcher"] .ttg-cm-contrast-row b.is-pass{background:#1f8a62;color:#fff}
body[data-tool="color-matcher"] .ttg-cm-contrast-row b.is-fail{background:#c2414b;color:#fff}

body[data-tool="color-matcher"] .ttg-cm-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line);
}
body[data-tool="color-matcher"] .ttg-cm-toolbar>div{display:flex;gap:9px;flex-wrap:wrap}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-toolbar button{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:800;font-size:.78rem;
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-toolbar button:hover{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--line));color:var(--teal-strong);
}
body[data-tool="color-matcher"] .ttg-cm-favourites{
  display:grid;gap:11px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);
}
body[data-tool="color-matcher"] .ttg-cm-favourites>header{display:flex;align-items:center;gap:9px}
body[data-tool="color-matcher"] .ttg-cm-favourites>header strong{font-size:.86rem}
body[data-tool="color-matcher"] .ttg-cm-favourites>header span{
  padding:2px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal-strong);font-size:.66rem;font-weight:850;
}
body[data-tool="color-matcher"] #cmFavList{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
body[data-tool="color-matcher"] #cmFavList article{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
body[data-tool="color-matcher"] .ttg-cm-fav-swatches{display:flex;gap:3px}
body[data-tool="color-matcher"] .ttg-cm-fav-swatches i{width:16px;height:16px;border-radius:5px;border:1px solid rgba(16,43,42,.14)}
body[data-tool="color-matcher"] #cmFavList code{font-size:.72rem;font-weight:800;color:var(--ink-2)}
body[data-tool="color-matcher"] .ttg-cm-fav-actions{display:flex;gap:5px}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-fav-actions button{
  min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);color:var(--ink-2);font-size:.7rem;font-weight:800;
}
@media(max-width:620px){
  body[data-tool="color-matcher"] .ttg-cm-toolbar{align-items:stretch;flex-direction:column}
  body[data-tool="color-matcher"] .ttg-cm-toolbar>div{display:grid;grid-template-columns:1fr 1fr}
}

/* Color Matcher refinements: a larger base-colour block, roomier hex code, and
   the harmony rules and palette each on a single row. */
body[data-tool="color-matcher"] .ttg-cm-base{grid-template-columns:minmax(280px,1fr) minmax(240px,1fr)}
body[data-tool="color-matcher"] .ttg-cm-colour{
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-colour input[type=color]{
  flex:0 0 74px;
  width:74px;
  height:62px;
  border-radius:13px;
}
body[data-tool="color-matcher"] .ttg-cm-colour code{
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  font:800 .92rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em;
}
body[data-tool="color-matcher"] .ttg-cm-hex{min-height:62px;padding:0 16px}
body[data-tool="color-matcher"] .tool-form #toolFields .ttg-cm-hex input{font-size:1.05rem}
/* Six rules across one row, five swatches across one row. */
body[data-tool="color-matcher"] .ttg-cm-rules{grid-template-columns:repeat(6,minmax(0,1fr))}
body[data-tool="color-matcher"] .ttg-cm-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1024px){
  body[data-tool="color-matcher"] .ttg-cm-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-tool="color-matcher"] .ttg-cm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  body[data-tool="color-matcher"] .ttg-cm-base{grid-template-columns:1fr}
  body[data-tool="color-matcher"] .ttg-cm-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-tool="color-matcher"] .ttg-cm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  body[data-tool="color-matcher"] .ttg-cm-grid{grid-template-columns:1fr}
}

/* A class-level display always beats the user-agent [hidden] rule, so the
   inactive tab panels kept rendering. Hide them explicitly. */
body[data-tool="color-matcher"] .ttg-cm-view[hidden],
body[data-tool="color-matcher"] [data-cm-panel][hidden]{
  display:none!important;
}

/* The palette, live preview and contrast matrix are the result, so the shared
   result box and its detail row are not used on this tool. */
body[data-tool="color-matcher"] #resultBox,
body[data-tool="color-matcher"] .result-box{display:none!important}