/* Shared, scoped workspace styles for the free tools. */
.tools-workspace {
    --tools-bg: #020617;
    --tools-panel: #0f172a;
    --tools-surface: #1e293b;
    --tools-border: rgba(148, 163, 184, .24);
    --tools-text: #f1f5f9;
    --tools-muted: #cbd5e1;
    --tools-accent: #67e8f9;
    background: var(--tools-bg);
    color: var(--tools-text);
    color-scheme: dark;
}
.tools-workspace :is(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--tools-accent);
    outline-offset: 3px;
}
.photo-workspace .hidden, #capture-canvas.hidden { display: none !important; }
.tools-section { padding: 112px 0 80px; }
.tools-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.tools-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.tools-topbar .tool-breadcrumbs__list { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; }
.tools-navigation { display: flex; gap: 4px; padding: 4px; background: var(--tools-panel); border-radius: 12px; }
.tools-navigation a { padding: 8px 14px; border-radius: 9px; color: var(--tools-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tools-navigation a:hover { color: #fff; }
.tools-navigation a[aria-current="page"] { background: var(--tools-surface); color: #fff; box-shadow: 0 1px 4px #00000026; }
.tools-footer-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }
.tools-footer-navigation a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; color: var(--tools-accent); font-size: 15px; font-weight: 600; }
.tools-footer-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tools-page-header { margin-bottom: 32px; }
.tools-eyebrow { margin: 0 0 12px; color: var(--tools-muted); font-size: 13px; font-weight: 600; }
.tools-page-heading { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.04em; font-weight: 650; text-wrap: balance; }
.tools-page-intro { max-width: 680px; margin: 14px 0 0; color: var(--tools-muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.tools-page-header--hub { max-width: 760px; margin: 48px auto 44px; text-align: center; }
.tools-page-header--hub .tools-page-heading { font-size: clamp(36px, 4.5vw, 54px); }
.tools-page-header--hub .tools-page-intro { margin-left: auto; margin-right: auto; }
.tools-panel { min-width: 0; padding: 24px; border: 1px solid var(--tools-border); border-radius: 24px; background: var(--tools-panel); box-shadow: 0 4px 20px #00000026; }
.tools-note { color: var(--tools-muted); font-size: 13px; line-height: 1.6; }
.tools-help { border-top: 1px solid var(--tools-border); margin-top: 20px; font-size: 14px; line-height: 1.6; }
.tools-help summary { padding: 16px 0; font-weight: 500; color: var(--tools-text); cursor: pointer; }
.tools-help-content { color: var(--tools-muted); padding-bottom: 8px; }
.tools-help-content ul { padding-left: 20px; list-style: disc; }
.tools-help-content li + li { margin-top: 8px; }
.tools-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tools-hub-card { overflow: hidden; display: flex; flex-direction: column; background: var(--tools-panel); border: 1px solid var(--tools-border); border-radius: 24px; box-shadow: 0 4px 20px #00000026; transition: box-shadow 180ms ease, transform 180ms ease; }
.tools-hub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #00000040; }
.tools-hub-art { display: grid; place-items: center; height: 196px; margin: 12px 12px 0; border-radius: 16px; }
.tools-hub-art svg { width: 160px; height: 120px; }
.tools-hub-art--photo { background: #13253a; color: #93c5fd; }
.tools-hub-art--desk { background: #102c28; color: #6ee7b7; }
.tools-hub-art--reset { background: #2a2142; color: #c4b5fd; }
.tools-hub-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px 28px 28px; }
.tools-hub-card h2 { font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.tools-hub-card p { margin: 10px 0 26px; color: var(--tools-muted); font-size: 15px; line-height: 1.6; }
.tools-hub-link { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--tools-accent); font-size: 14px; font-weight: 500; }
.tools-hub-note { margin-top: 32px; text-align: center; color: var(--tools-muted); font-size: 13px; }
.photo-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.photo-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.photo-panel-heading h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.posture-photo-status { padding: 4px 10px; border-radius: 999px; background: var(--tools-surface); color: var(--tools-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.posture-photo-status--active { background: #052e16; color: #86efac; }
.posture-photo-status--warn { background: #451a03; color: #fcd34d; }
.posture-photo-status--error { background: #450a0a; color: #fca5a5; }
.photo-camera-controls { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
.photo-camera-picker { flex: 1; min-width: 0; }
.photo-camera-picker label { display: block; margin-bottom: 6px; color: var(--tools-muted); font-size: 12px; }
.photo-camera-picker select { width: 100%; height: 44px; border: 1px solid #64748b; border-radius: 10px; background-color: var(--tools-bg); color: var(--tools-text); font-size: 14px; padding: 0 32px 0 12px; }
.photo-camera-picker select:disabled { background-color: var(--tools-surface); color: #94a3b8; }
.photo-camera-preview { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tools-bg); border: 1px solid var(--tools-border); border-radius: 16px; }
.posture-photo-video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--tools-bg); }
.photo-camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; color: var(--tools-muted); font-size: 14px; }
.photo-camera-placeholder svg { width: 48px; height: 48px; }
.photo-camera-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.tool-action-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color 150ms ease; }
.tool-action-button--primary { background: #38bdf8; color: #082f49; }
.tool-action-button--primary:hover:not(:disabled) { background: #7dd3fc; }
.tool-action-button--secondary { background: var(--tools-surface); border-color: var(--tools-border); color: var(--tools-text); }
.tool-action-button--secondary:hover:not(:disabled) { background: #334155; }
.tool-action-button:disabled { background: #0b1220; color: #94a3b8; border-color: var(--tools-border); cursor: not-allowed; box-shadow: none; }
.tool-action-button__icon { width: 16px; height: 16px; flex-shrink: 0; }
.posture-photo-message { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tools-surface); color: var(--tools-muted); font-size: 13px; line-height: 1.6; }
.posture-photo-message--success { background: #052e16; color: #86efac; }
.posture-photo-message--warn { background: #451a03; color: #fcd34d; }
.posture-photo-message--error { background: #450a0a; color: #fca5a5; }
.photo-capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.photo-step { display: grid; width: 20px; height: 20px; place-items: center; background: var(--tools-surface); border-radius: 50%; font-size: 11px; }
.photo-privacy { margin-top: 16px; font-size: 12px; }
.photo-clear-button { min-height: 44px; padding: 6px; color: var(--tools-accent); font-size: 12px; cursor: pointer; }
.photo-clear-button:disabled { color: #94a3b8; cursor: not-allowed; }
.photo-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-result-frame { overflow: hidden; position: relative; aspect-ratio: 3 / 4; background: var(--tools-bg); border: 1px solid var(--tools-border); border-radius: 12px; }
.photo-result-frame img { width: 100%; height: 100%; object-fit: contain; }
.photo-result-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--tools-muted); text-align: center; font-size: 12px; }
.photo-result-empty span { font-size: 32px; font-weight: 300; color: #94a3b8; }
.photo-results-grid figcaption { margin-top: 10px; font-size: 13px; font-weight: 500; }
#comparison-hint { margin-top: 20px; }
.photo-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.posture-photo-canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--tools-bg); }
.photo-export-preview[open] { padding-bottom: 16px; }
.photo-example { margin: 16px 0; width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 900px) {
    .tools-topbar { flex-wrap: wrap; }
    .photo-workspace { grid-template-columns: 1fr; }
    .tools-hub-grid { gap: 14px; }
    .tools-hub-card-body { padding: 22px; }
    .tools-hub-art { height: 160px; }
}
@media (max-width: 639px) {
    .tools-section { padding: 96px 0 48px; }
    .tools-shell { width: calc(100% - 32px); }
    .tools-topbar { gap: 12px; margin-bottom: 28px; }
    .tools-navigation { width: 100%; }
    .tools-navigation a { flex: 1; text-align: center; }
    .tools-footer-navigation { flex-direction: column; align-items: flex-start; gap: 0; }
    .tools-page-header--hub { margin: 24px auto 32px; }
    .tools-page-intro { font-size: 15px; }
    .tools-hub-grid { grid-template-columns: 1fr; gap: 16px; }
    .tools-hub-art { height: 156px; }
    .tools-hub-card-body { padding: 20px 24px 24px; }
    .tools-hub-card p { margin-bottom: 20px; }
    .tools-panel { padding: 20px; border-radius: 20px; }
    .photo-camera-controls { flex-wrap: wrap; }
    .photo-camera-picker { flex-basis: 100%; }
    .photo-camera-controls .tool-action-button { width: 100%; }
    .photo-capture-actions { gap: 8px; }
    .photo-capture-actions .tool-action-button { padding-left: 8px; padding-right: 8px; font-size: 12px; }
}
@media print {
    .tools-footer-navigation { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tools-hub-card, .tool-action-button { transition: none; }
    .tools-hub-card:hover { transform: none; }
}