/* Free tools: hub, tool pages and the "Save to Recordo" page. Builds on seo-features.css. */
.tool-page [hidden] { display: none !important; }
.tool-hero { padding: clamp(36px,5vw,64px) 0 clamp(56px,6vw,88px); background: radial-gradient(circle at 80% 0%,rgba(94,196,198,.14),transparent 45%),radial-gradient(circle at 0% 90%,rgba(193,122,91,.08),transparent 40%),var(--warm-sand); }
.tool-intro { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.tool-intro h1 { margin: 10px 0 16px; font: 600 clamp(2rem,4.2vw,3.1rem)/1.15 var(--font-display); letter-spacing: .01em; color: var(--charcoal); overflow-wrap: break-word; }
.tool-intro .seo-lede { margin: 0 auto; font-size: 1.12rem; }
.tool-page main a.tool-back { display: inline-flex; gap: 6px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.tool-page main a.tool-back:hover { text-decoration: underline; }

.tool-card { max-width: 760px; margin: 0 auto; padding: clamp(20px,3.5vw,36px); border: 1px solid rgba(94,196,198,.22); border-radius: 28px; background: var(--white); box-shadow: 0 24px 60px rgba(31,32,39,.08); }
.tool-eisenhower-matrix .tool-card,.tool-dopamine-menu .tool-card { max-width: 1040px; }
/* Text in, list out: the form on the left and the result beside it, so nothing needs scrolling on a desktop. */
.tool-brain-dump .tool-card,.tool-task-breakdown .tool-card { max-width: 1100px; padding: 0; overflow: hidden; }
.tool-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: stretch; }
.tool-split .tool-form { align-content: start; padding: clamp(20px,3vw,36px); }
.tool-output { display: flex; flex-direction: column; min-height: 420px; padding: clamp(20px,3vw,36px); background: var(--cyan-pale); }
.tool-split .tool-result { margin-top: 0; padding-top: 0; border-top: 0; }
.tool-empty { margin: auto; max-width: 260px; color: var(--brand-text); font: 500 1.05rem/1.5 var(--font-display); text-align: center; opacity: .75; }
.tool-form { display: grid; gap: 14px; }
.tool-label,.tool-segments legend { font: 600 1rem/1.4 var(--font-display); color: var(--charcoal); }
.tool-card input[type="text"],.tool-card input[type="number"],.tool-card textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--gray-200); border-radius: 16px; background: var(--gray-100); color: var(--charcoal); font: 400 1rem/1.6 var(--font-body); letter-spacing: .01em; transition: border-color .2s ease,background .2s ease; }
.tool-card textarea { display: block; min-height: 150px; resize: vertical; }
.tool-card input:focus,.tool-card textarea:focus { outline: none; border-color: var(--cyan-dark); background: var(--white); }
.tool-card ::placeholder { color: #8a94a6; opacity: 1; }
.tool-textarea { position: relative; }
.tool-textarea textarea { padding-right: 60px; }
.tool-mic { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cyan-pale); color: var(--brand-text); cursor: pointer; transition: background .2s ease,transform .2s ease; }
.tool-mic:hover { background: var(--cyan-soft); }
.tool-mic[aria-pressed="true"] { background: #c2410c; color: var(--white); animation: tool-pulse 1.4s ease-in-out infinite; }
@keyframes tool-pulse { 50% { box-shadow: 0 0 0 8px rgba(194,65,12,.18); } }
.tool-hint,.tool-save-note,.tool-result-note { color: var(--gray-600); font-size: .9rem; line-height: 1.6; }
.tool-error { padding: 12px 16px; border-radius: 14px; background: #fdecec; color: #9b1c1c; font-size: .93rem; line-height: 1.5; }
.tool-submit { justify-self: start; border: 0; cursor: pointer; }
.tool-submit:disabled { opacity: .65; cursor: progress; transform: none; }
.tool-page button.seo-button { border: 0; cursor: pointer; }

.tool-segments { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.tool-segments legend { width: 100%; margin-bottom: 8px; }
.tool-segments label { cursor: pointer; }
.tool-segments input { position: absolute; opacity: 0; pointer-events: none; }
.tool-segments label span,.tool-segments button,.timer-presets button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--gray-200); border-radius: 50px; background: var(--white); color: var(--gray-700); font: 600 .93rem/1.3 var(--font-body); cursor: pointer; transition: all .2s ease; }
.tool-segments input:checked+span,.tool-segments button[aria-pressed="true"],.timer-presets button[aria-pressed="true"] { border-color: var(--cyan-dark); background: var(--cyan-pale); color: var(--brand-text); }
.tool-segments input:focus-visible+span,.tool-card button:focus-visible { outline: 3px solid #176d78; outline-offset: 3px; }

.tool-result { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--gray-200); }
.tool-result-title { margin: 0 0 12px; font: 600 1.3rem/1.3 var(--font-display); color: var(--charcoal); }
.tool-result [data-block]+[data-block] { margin-top: 26px; }
.tool-tasks { display: grid; gap: 8px; list-style: none; padding: 0; }
.tool-tasks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 16px; background: var(--white); }
.tool-tasks label { display: flex; flex: 1 1 240px; align-items: flex-start; gap: 12px; min-width: 0; cursor: pointer; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.tool-tasks input[type="checkbox"],.tool-check input { width: 20px; height: 20px; margin-top: 2px; }
.tool-tasks li.is-off label,.tool-steps li.is-done label { color: var(--gray-400); }
.tool-steps li.is-done label span { text-decoration: line-through; }
.tool-notes li { background: var(--warm-sand); border-color: var(--warm-cream); }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 32px; }
.tool-chip { padding: 3px 10px; border-radius: 50px; background: var(--cyan-pale); color: var(--brand-text); font-size: .78rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.tool-chip-high { background: #fdebe2; color: #9a4a22; }
.tool-steps { counter-reset: step; }
.tool-steps li { counter-increment: step; }
.tool-steps .tool-chips { margin-left: auto; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.tool-actions .seo-button { min-height: 48px; padding: 13px 24px; }
.tool-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--gray-300); border-radius: 50px; background: transparent; color: var(--gray-700); font: 600 .95rem/1.25 var(--font-body); cursor: pointer; transition: all .2s ease; }
.tool-ghost:hover { border-color: var(--cyan-dark); color: var(--brand-text); }
.tool-save-note { margin-top: 12px; }
.tool-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--gray-700); font-size: .93rem; cursor: pointer; }
.tool-check input { margin-top: 0; }
.tool-add { display: flex; gap: 8px; margin-top: 10px; }
.tool-card .tool-add input { padding: 9px 12px; border-radius: 12px; font-size: .92rem; }
.tool-add button { flex: none; width: 42px; border: 0; border-radius: 12px; background: var(--cyan-pale); color: var(--brand-text); font: 600 1.3rem/1 var(--font-body); cursor: pointer; }
.tool-add button:hover { background: var(--cyan-soft); }

/* Eisenhower matrix */
.matrix { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 30px; padding-top: 34px; }
.matrix-axis { position: absolute; top: 0; width: calc(50% - 7px); color: var(--gray-600); font: 600 .82rem/1.4 var(--font-display); text-align: center; }
.matrix-axis-urgent { left: 0; }
.matrix-axis-later { right: 0; }
.matrix-quadrant { display: flex; flex-direction: column; min-height: 210px; padding: 18px; border-radius: 20px; border: 2px solid transparent; transition: border-color .15s ease; }
.matrix-quadrant[data-quadrant="do"] { background: #fdebe2; }
.matrix-quadrant[data-quadrant="schedule"] { background: var(--cyan-pale); }
.matrix-quadrant[data-quadrant="delegate"] { background: #fff4d6; }
.matrix-quadrant[data-quadrant="drop"] { background: var(--gray-100); }
.matrix-quadrant.is-target { border-color: var(--cyan-dark); }
.matrix-quadrant header h2 { margin: 0; font: 600 1.15rem/1.3 var(--font-display); color: var(--charcoal); }
.matrix-quadrant header p { margin: 2px 0 12px; color: var(--gray-700); font-size: .85rem; line-height: 1.4; }
.matrix-quadrant ul { display: grid; gap: 6px; flex: 1; align-content: start; list-style: none; padding: 0; }
.matrix-quadrant li,.matrix-ghost { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 4px; padding: 6px 6px 6px 4px; border-radius: 12px; background: rgba(255,255,255,.85); list-style: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.matrix-quadrant li:focus-visible { outline: 3px solid #176d78; outline-offset: 2px; }
.matrix-quadrant li.is-dragging { opacity: .35; }
/* The grip is where a finger picks an item up; touch-action keeps the page from scrolling under it. */
.matrix-grip { width: 28px; height: 36px; border-radius: 8px; background: radial-gradient(circle,var(--gray-400) 1.5px,transparent 2px) center / 7px 7px; background-clip: content-box; padding: 9px 7px; touch-action: none; }
.matrix-item-title { font-size: .93rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.matrix-quadrant li button,.matrix-ghost button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--gray-600); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.matrix-quadrant li button:hover { background: rgba(45,55,72,.08); }
.matrix-ghost { position: fixed; left: 0; top: 0; z-index: 2000; margin: 0; background: var(--white); box-shadow: 0 14px 34px rgba(31,32,39,.22); cursor: grabbing; pointer-events: none; }
.matrix-quadrant .tool-add input { background: rgba(255,255,255,.7); border-color: transparent; }
.matrix-quadrant .tool-add button { background: rgba(255,255,255,.7); }
.matrix-quadrant .tool-add button:hover { background: var(--white); }

/* Timers */
.timer { display: grid; justify-items: center; gap: 22px; text-align: center; }
.timer-modes { justify-content: center; }
.timer-face { position: relative; width: min(100%,320px); aspect-ratio: 1; }
.timer-face svg { display: block; width: 100%; height: 100%; }
.timer-track { fill: none; stroke: var(--cyan-pale); stroke-width: 12; }
.timer-progress { fill: none; stroke: var(--cyan-dark); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.timer[data-mode="short"] .timer-progress,.timer[data-mode="long"] .timer-progress { stroke: var(--warm-orange); }
.timer-readout { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; }
.timer-time { font: 600 clamp(3rem,11vw,4.4rem)/1 var(--font-display); letter-spacing: .01em; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.timer-round,.timer-message { color: var(--gray-600); font-size: .93rem; }
.timer-message { min-height: 1.6em; font-weight: 600; color: var(--brand-text); }
.timer-controls { justify-content: center; margin-top: 0; }
.timer-settings { width: 100%; max-width: 460px; text-align: left; }
.timer-settings summary { cursor: pointer; color: var(--brand-text); font-weight: 600; font-size: .93rem; text-align: center; }
.timer-settings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.timer-settings-grid label { display: grid; gap: 6px; color: var(--gray-700); font-size: .85rem; font-weight: 600; }
.timer-settings-grid span { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.tool-card .timer-settings-grid input { padding: 9px 10px; border-radius: 12px; }
.timer-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.timer-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-700); font-size: .9rem; font-weight: 600; }
.tool-card .timer-custom input { width: 86px; padding: 9px 12px; border-radius: 50px; text-align: center; }
.timer-stage { display: grid; justify-items: center; gap: 14px; width: 100%; padding: 8px; background: var(--white); }
.timer-disk .timer-track { fill: var(--white); stroke: var(--gray-200); stroke-width: 2; }
.timer-wedge { fill: #e2553d; }
.timer-ticks line { stroke: var(--charcoal); stroke-width: 2; stroke-linecap: round; }
.timer-ticks text { fill: var(--gray-600); font: 600 9px var(--font-display); text-anchor: middle; dominant-baseline: middle; }
.timer-hub { fill: var(--charcoal); }
.timer-stage:fullscreen { align-content: center; padding: 4vh 4vw; }
.timer-stage:fullscreen .timer-face { width: min(72vh,86vw); }
.timer-stage:fullscreen .timer-time { font-size: 12vh; }

/* Dopamine menu */
.menu-builder { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.menu-course { padding: 20px; border: 1px solid var(--warm-cream); border-radius: 20px; background: var(--warm-sand); }
.menu-course:last-child { grid-column: 1 / -1; }
.menu-course header h2 { margin: 0; font: 600 1.2rem/1.3 var(--font-display); color: var(--charcoal); }
.menu-course header p { margin: 2px 0 12px; color: var(--gray-700); font-size: .88rem; line-height: 1.5; }
.menu-items { display: grid; gap: 6px; list-style: none; padding: 0; }
.menu-items li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 14px; border-radius: 12px; background: var(--white); font-size: .95rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.menu-items li button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--gray-600); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.menu-items li button:hover { background: rgba(45,55,72,.08); }
.menu-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.menu-ideas button { padding: 6px 12px; border: 1.5px dashed var(--gray-300); border-radius: 50px; background: transparent; color: var(--gray-700); font: 500 .84rem/1.4 var(--font-body); cursor: pointer; }
.menu-ideas button:hover { border-color: var(--cyan-dark); border-style: solid; color: var(--brand-text); }
.menu-ideas button::before { content: '+ '; }

/* Sections below the tool */
.tool-explainer { background: var(--white); }
.tool-explainer h2,.tool-app h2,.tools-menu-section h2,.tool-page .seo-faq h2 { font-size: clamp(1.7rem,3vw,2.3rem); }
.tool-explainer p+p { margin-top: 16px; }
.tool-app { background: var(--cyan-pale); }
.tool-app-grid { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: clamp(32px,6vw,80px); align-items: center; }
.tool-app-copy { max-width: 560px; }
.tool-app-copy .seo-button { margin-top: 26px; }
.tool-app .seo-shot-frame { box-shadow: 0 30px 60px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08); }
.tools-menu-section { background: var(--warm-sand); }
.tools-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 24px; }
.tools-menu-heading { margin-bottom: 10px; color: var(--gray-600); font: 600 .9rem/1.4 var(--font-display); }
.tools-menu ul { display: grid; gap: 10px; list-style: none; padding: 0; }
.tool-page main .tools-menu a { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid rgba(94,196,198,.22); border-radius: 18px; background: var(--white); color: var(--charcoal); text-decoration: none; transition: transform .25s var(--ease-gentle),box-shadow .25s var(--ease-gentle),border-color .25s ease; }
.tool-page main .tools-menu a:hover { transform: translateY(-2px); border-color: var(--cyan-dark); box-shadow: 0 12px 28px rgba(31,32,39,.08); }
.tools-menu a span { font: 600 1.05rem/1.35 var(--font-display); }
.tools-menu a small { color: var(--gray-600); font-size: .9rem; line-height: 1.5; }
.tools-menu-cards { max-width: 960px; margin: 0 auto; }

@media (max-width: 900px) {
    .tool-split { grid-template-columns: minmax(0,1fr); }
    .tool-output { min-height: 0; }
    /* On a phone the result follows the form, so the empty half would only be a gap. */
    .tool-output:has(> .tool-result[hidden]) { display: none; }
}
@media (max-width: 800px) {
    .tool-app-grid { grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; }
    .tool-app-grid .seo-product-shot { order: 2; }
    .tools-menu,.menu-builder { grid-template-columns: minmax(0,1fr); }
    .matrix { grid-template-columns: minmax(0,1fr); padding-top: 0; }
    .matrix-axis { display: none; }
    .matrix-quadrant { min-height: 0; }
    .timer-settings-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
    .tool-card { border-radius: 22px; }
    .tool-submit,.tool-actions .seo-button,.tool-actions .tool-ghost { width: 100%; }
    .tool-chips { margin-left: 32px; }
    .tool-steps .tool-chips { margin-left: 32px; }
}
@media (prefers-reduced-motion: reduce) { .tool-mic[aria-pressed="true"] { animation: none; } .timer-progress { transition: none; } }

/* Print or save as PDF: the page is replaced by a sheet built for paper (see renderPrint in tools.js). */
#tool-print { display: none; }
@media print {
    /* No page margins: that is where browsers print their own date, title and address. The sheet brings its own (see .print-frame). */
    @page { margin: 0; }
    body.has-print-sheet { background: #fff !important; }
    body.has-print-sheet > *:not(#tool-print) { display: none !important; }
    #tool-print { display: block; color: #2d3748; font: 400 11.5pt/1.5 var(--font-body); letter-spacing: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #tool-print * { letter-spacing: 0; word-spacing: normal; }
    .print-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9pt; border-bottom: 2pt solid #5ec4c6; }
    .print-brand { display: flex; align-items: center; gap: 8pt; color: #2d3748; font: 600 15pt/1 var(--font-display); }
    .print-brand img { width: 24pt; height: 24pt; border-radius: 6pt; }
    .print-date { color: #56627a; font-size: 9.5pt; }
    .print-title { margin: 20pt 0 2pt; color: #2d3748; font: 600 25pt/1.15 var(--font-display); }
    .print-subtitle { color: #56627a; font-size: 11pt; }
    .print-section { margin: 20pt 0 0; color: #22656c; font: 600 14pt/1.3 var(--font-display); }
    .print-frame { width: 100%; border-collapse: collapse; }
    .print-frame td { padding: 0 15mm; }
    .print-space-top { height: 13mm; }
    .print-space-bottom { height: 20mm; }
    /* Fixed, so it sits at the bottom of every page however short the content is. */
    .print-footer { position: fixed; left: 15mm; right: 15mm; bottom: 9mm; padding-top: 7pt; border-top: 0.75pt solid #cbd5e0; color: #56627a; font-size: 9pt; text-align: center; }

    .print-list { margin: 12pt 0 0; padding: 0; list-style: none; counter-reset: print-step; }
    .print-list li { display: flex; align-items: flex-start; gap: 10pt; padding: 7pt 0; border-bottom: 0.75pt solid #e2e8f0; break-inside: avoid; }
    .print-box { flex: none; width: 12pt; height: 12pt; margin-top: 2.5pt; border: 1.2pt solid #4a5568; border-radius: 3pt; }
    .print-box.is-checked { border-color: #4aa8aa; background: #4aa8aa; box-shadow: inset 0 0 0 2pt #fff; }
    .print-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .print-meta { flex: none; color: #56627a; font-size: 9.5pt; white-space: nowrap; }
    ol.print-list li { counter-increment: print-step; }
    ol.print-list .print-text::before { content: counter(print-step) '. '; color: #22656c; font-weight: 600; }
    .print-blanks { display: grid; gap: 0; }
    .print-blanks span { height: 22pt; border-bottom: 0.75pt solid #cbd5e0; }

    /* Eisenhower matrix: the four boxes fill the page. */
    .print-matrix { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10pt; margin-top: 14pt; }
    .print-quadrant { min-height: 90mm; overflow: hidden; border: 1.2pt solid #cbd5e0; border-radius: 12pt; break-inside: avoid; }
    .print-quadrant header { padding: 9pt 12pt 8pt; background: #f7fafc; }
    .print-quadrant h2 { margin: 0; font: 600 13.5pt/1.25 var(--font-display); color: #2d3748; }
    .print-quadrant header p { margin: 1pt 0 0; color: #4a5568; font-size: 9pt; }
    .print-quadrant .print-list,.print-quadrant .print-blanks { margin: 4pt 12pt 10pt; }
    .print-quadrant .print-list li { padding: 5.5pt 0; font-size: 10.5pt; }
    .print-quadrant-do { border-color: #eab79e; }
    .print-quadrant-do header { background: #fdebe2; }
    .print-quadrant-schedule { border-color: #9fd6d8; }
    .print-quadrant-schedule header { background: #e8f6f7; }
    .print-quadrant-delegate { border-color: #ecd58c; }
    .print-quadrant-delegate header { background: #fff4d6; }

    /* Dopamine menu: set like a menu card. */
    .print-dopamine-menu .print-body { margin-top: 12pt; padding: 4pt 26pt 14pt; -webkit-box-decoration-break: clone; box-decoration-break: clone; border: 1.2pt solid #5ec4c6; border-radius: 16pt; box-shadow: inset 0 0 0 3pt #fff,inset 0 0 0 3.75pt #b8e5e6; text-align: center; }
    .print-dopamine-menu .print-title { margin-top: 12pt; font-size: 25pt; }
    .print-dopamine-menu .print-title::after { content: ''; display: block; width: 46pt; height: 2pt; margin: 6pt auto 0; border-radius: 2pt; background: #e89c74; }
    .print-course { margin-top: 10pt; break-inside: avoid; }
    .print-course h2 { display: flex; align-items: center; gap: 10pt; margin: 0; color: #22656c; font: 600 15pt/1.3 var(--font-display); }
    .print-course h2::before,.print-course h2::after { content: ''; flex: 1; height: 0.75pt; background: #b8e5e6; }
    .print-course > p { margin: 0 0 2pt; color: #56627a; font-size: 9.5pt; font-style: italic; }
    .print-course .print-list { margin-top: 2pt; }
    .print-course .print-list li { display: block; padding: 2pt 0; border: 0; font-size: 12pt; }
    .print-course .print-blanks { width: 62%; margin: 0 auto; }
    .print-course .print-blanks span { height: 18pt; }
}