, so that wrapper carries the flex sizing. */ main { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; } /* ---- Slim brand top bar (consistent with the main site header) --------- */ .cal-topbar { /* Calipers are position:absolute on with z-index:1000. Like the core .header (z-index:2000), this bar must sit above them with an opaque background so caliper lines never paint over the chrome — they should only appear in the content panel below. */ position: relative; z-index: 2001; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-shrink: 0; padding: 0 var(--sp-5); height: 52px; background: var(--bg-2); border-bottom: 1px solid var(--border-soft); } .cal-topbar__left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .cal-topbar .nav__brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text); font-weight: var(--fw-bold); text-decoration: none; } .cal-topbar .nav__brand img { width: 28px; height: 28px; border-radius: 6px; } .cal-topbar .nav__brand-name { font-size: var(--fs-base); } .cal-topbar__badge { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--brand-teal); background: var(--brand-gradient-soft); border: 1px solid rgba(22,194,201,0.45); padding: 0.3em 0.7em; border-radius: var(--r-pill); } @media (max-width: 720px) { .cal-topbar__badge { display: none; } } .cal-topbar__links { display: flex; align-items: center; gap: var(--sp-2); } .cal-topbar__links a { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; padding: 0.4em 0.7em; border-radius: var(--r-sm); } .cal-topbar__links a:hover { color: var(--text); background: var(--surface); } @media (max-width: 560px) { .cal-topbar__links a.hide-sm { display: none; } } /* ---- Tool toolbar (was the red ".header") ------------------------------ */ .header { background: var(--bg-2); color: var(--text); border-bottom: 1px solid var(--border-soft); box-shadow: none; padding: 8px var(--sp-5); } .header h1 { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-muted); letter-spacing: 0.02em; } .header__identity { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .download-app-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.45em 0.9em; color: var(--bg); background: var(--text); border: 1px solid var(--text); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm); } .download-app-btn:hover { color: var(--bg); background: var(--brand-teal); border-color: var(--brand-teal); } .download-app-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } @media (max-width: 760px) { .header { gap: var(--sp-3); } .header__identity { gap: var(--sp-2); } .download-app-btn { padding-inline: 0.7em; } } /* ---- Buttons ----------------------------------------------------------- */ .btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-sans); font-weight: var(--fw-semi); } .btn:hover:not(:disabled) { background: var(--surface-hi); border-color: var(--brand-teal); } .btn:disabled { background: var(--surface); color: var(--text-faint); border-color: var(--border-soft); } .btn.action-red { background: var(--brand-gradient); color: var(--text-on-brand); border-color: transparent; } /* Keep the brand gradient on hover. Without re-setting background + border here, the core's dark-red hover (#7A1212) and the generic .btn:hover teal border would win, turning the button red. A subtle brightness bump signals hover. */ .btn.action-red:hover:not(:disabled) { background: var(--brand-gradient); color: var(--text-on-brand); border-color: transparent; filter: brightness(1.08); } .btn.clear { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn.clear:hover:not(:disabled) { background: var(--surface); color: var(--text); } /* ---- Color swatches & reference controls ------------------------------- */ .color-option { padding: 0; } .color-option.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--brand-teal); } .color-option:focus-visible, .caliper-handle:focus-visible, .info-button:focus-visible, .modal-close-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } #referenceLabel { color: var(--text-muted); } .reference-selector select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); } .reference-selector select option { background: var(--surface); color: var(--text); } .reference-selector select:disabled { background: var(--bg-2); color: var(--text-faint); } .info-button { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0; font: inherit; } .info-button:hover { background: var(--surface-hi); border-color: var(--brand-teal); } /* ---- Workspace / drop zone (keep light canvas for viewing tracings) ---- */ .drop-zone { border-color: var(--border); background: #fafafa; } .drop-zone.drag-over { border-color: var(--brand-teal); background: rgba(22,194,201,0.08); } .drop-zone h3 { color: #1a2a2e; } .drop-zone p { color: #4a5a5e; } .paste-btn { background: var(--brand-gradient); color: var(--text-on-brand); border-radius: var(--r-pill); font-weight: var(--fw-semi); } .paste-btn:hover { filter: brightness(1.06); background: var(--brand-gradient); } .browse-files-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); } .browse-files-btn:hover { background: var(--surface-hi); } /* Prominent privacy reassurance inside the drop zone (light canvas) */ .privacy-note { display: flex; align-items: flex-start; gap: 12px; text-align: left; max-width: 540px; margin: 26px auto 0; padding: 16px 18px; background: rgba(22,194,201,0.10); border: 1px solid rgba(22,194,201,0.45); border-radius: 14px; } .privacy-note__icon { font-size: 24px; line-height: 1.1; flex-shrink: 0; } .privacy-note__body { display: flex; flex-direction: column; gap: 4px; } .privacy-note__body strong { color: #0c3a3d; font-size: 15.5px; } .privacy-note__body span { color: #335255; font-size: 13.5px; line-height: 1.55; } .drop-zone__hint { margin-top: 16px; font-size: 13px; color: #8a9a9c; } .drop-zone__hint strong { color: #4a5a5e; } #pageIndicator { color: var(--text); background: var(--surface); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); } /* ---- Modal ------------------------------------------------------------- */ .modal-content-wrapper { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .modal-close-button { color: var(--text-muted); background: none; border: 0; padding: 0; font-family: inherit; } .modal-close-button:hover { color: var(--text); } .modal-text-content p, .modal-text-content li { color: var(--text-muted); } .modal-text-content strong { color: var(--text); } #instructionsModal .modal-title { color: var(--brand-teal); } #instructionsModal strong { color: var(--brand-green); } .modal-text-content a { color: var(--link); }