/** * field-tool.css * FIELD TOOL 001: FARE RIGHTS -- tool-specific styles. * Every class prefixed `ft-`; every custom property prefixed `--ft-` and * scoped to .ft-root (never :root); no bare element selectors -- so this * can safely coexist with the site's own investigation.css/found.css/ * style.css without collisions, even though their real contents weren't * available while building this. */ .ft-root { --ft-cork: #7C5A3D; --ft-cork-shadow: #4E3620; --ft-paper: #F3E9D2; --ft-paper-2: #E9DAB4; --ft-ink: #2B2420; --ft-ink-soft: #6B5D4C; --ft-stamp-red: #A83A32; --ft-stamp-red-dark: #7A2620; --ft-carbon: #3D5568; --ft-carbon-dark: #29394A; --ft-brass: #B8925A; --ft-line: rgba(43,36,32,0.18); /* Explicit z-index hierarchy (spec 16-2): content < site floating action / site header (both external, unknown exact values) < our modal overlay, which intentionally sits far above anything realistic the site uses so an open Field Tool screen always wins. */ --ft-z-content: 1; --ft-z-modal: 999999; background-color: var(--ft-cork); background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.2px), radial-gradient(circle, rgba(0,0,0,0.10) 1px, transparent 1.2px), radial-gradient(120% 90% at 50% -10%, rgba(0,0,0,0.18), transparent 60%); background-size: 16px 16px, 11px 11px, 100% 100%; background-position: 0 0, 6px 8px, 0 0; color: var(--ft-ink); font-family: 'Special Elite', 'Courier New', monospace; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; z-index: var(--ft-z-content); } .ft-root *, .ft-root *::before, .ft-root *::after { box-sizing: border-box; } .ft-root button, .ft-root select, .ft-root input, .ft-root textarea { font-family: inherit; } /* ---------- Header offset (spec 16-1) ---------- --ft-header-height is set on by field-tool.js once #shared-nav's real rendered height is known (measured on load + resize/orientation). The value below is only the pre-JS fallback. iOS safe-area is added on top so notch/Dynamic-Island devices get correct clearance too. */ :root { --ft-header-height: 57px; } .ft-main { padding-top: calc(var(--ft-header-height) + 16px + env(safe-area-inset-top, 0px)); } .ft-wrap { max-width: 460px; margin: 0 auto; padding: 10px 18px 60px; } @media (max-width: 768px) { :root { --ft-header-height: 51px; } /* Clearance from the site's fixed bottom-right compass button (shared chrome, not ours to reposition) plus iOS home-indicator safe area. */ .ft-wrap { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } } /* ---------- Header text ---------- */ .ft-kicker { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--ft-paper); opacity: 0.85; text-align: center; } .ft-sub-kicker { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ft-brass); opacity: 0.95; text-align: center; margin: 3px 0 12px; } .ft-title { font-size: clamp(1.9rem, 9vw, 2.6rem); color: var(--ft-paper); text-align: center; margin: 0 0 8px; letter-spacing: 0.02em; text-shadow: 2px 2px 0 rgba(0,0,0,0.25); } .ft-tagline { text-align: center; color: var(--ft-paper); font-family: 'Caveat', cursive; font-size: 1.35rem; margin-bottom: 4px; } .ft-sub-tagline { text-align: center; color: var(--ft-paper-2); font-size: 0.78rem; opacity: 0.85; margin-bottom: 28px; } /* ---------- Generic paper card ---------- */ .ft-card { background: var(--ft-paper); border-radius: 3px; padding: 26px 22px 22px; box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 2px 0 rgba(255,255,255,0.35) inset; position: relative; margin-bottom: 22px; } .ft-card.ft-tilt-l { transform: rotate(-0.5deg); } .ft-card.ft-tilt-r { transform: rotate(0.4deg); } .ft-pin { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F0D28A, var(--ft-brass) 55%, #6E4F26 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.45); } .ft-card-kicker { font-size: 0.7rem; letter-spacing: 0.13em; color: var(--ft-ink-soft); text-align: center; border-bottom: 1px dashed var(--ft-line); padding-bottom: 12px; margin-bottom: 18px; } .ft-field { margin-bottom: 18px; } .ft-field-label { font-size: 0.76rem; letter-spacing: 0.08em; color: var(--ft-ink-soft); margin-bottom: 8px; display: block; } .ft-stamp-toggle { display: flex; gap: 8px; flex-wrap: wrap; } .ft-stamp-btn { flex: 1; min-width: 90px; min-height: 44px; padding: 9px 10px; border: 2px solid var(--ft-ink); background: transparent; color: var(--ft-ink); cursor: pointer; font-size: 0.78rem; letter-spacing: 0.03em; border-radius: 2px; pointer-events: auto; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease; } .ft-stamp-btn.ft-active { background: var(--ft-ink); color: var(--ft-paper); transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ft-stamp-red); } .ft-root .ft-stamp-btn:focus-visible, .ft-root input:focus-visible, .ft-root textarea:focus-visible, .ft-root button:focus-visible { outline: 3px solid var(--ft-carbon); outline-offset: 2px; } .ft-fare-row { display: flex; align-items: center; gap: 10px; } .ft-fare-currency { font-size: 1.1rem; color: var(--ft-ink-soft); } .ft-text-input, .ft-textarea { flex: 1; font-size: 1.02rem; padding: 11px 12px; border: 2px solid var(--ft-ink); border-radius: 2px; background: #fff; color: var(--ft-ink); min-height: 46px; width: 100%; } .ft-textarea { min-height: 80px; resize: vertical; } .ft-fare-hint { font-size: 0.72rem; color: var(--ft-ink-soft); margin-top: 8px; line-height: 1.5; } .ft-case-field-error { font-size: 0.74rem; color: var(--ft-stamp-red); margin-top: 6px; } /* ---------- Expected Fare (main-card, spec: 3-second UX) ---------- */ .ft-expected-fare-block { text-align: center; margin-bottom: 14px; } .ft-section-divider { border-top: 1px dashed var(--ft-line); margin: 18px 0; } .ft-map-block { margin-bottom: 4px; } .ft-map-container { width: 100%; height: 220px; border-radius: 4px; border: 1px solid var(--ft-line); margin-bottom: 12px; background: var(--ft-paper-2); } .ft-distance-block { text-align: center; } .ft-distance-value { font-size: 1.6rem; color: var(--ft-ink); margin: 4px 0; } .ft-fare-matrix-distance-hint { font-size: 0.78rem; color: var(--ft-ink-soft); margin: 4px 0 10px; font-style: italic; } .ft-fare-matrix-section { margin-bottom: 4px; } .ft-route-status-section { margin-bottom: 4px; } .ft-route-recheck-btn { font-size: 0.72rem; padding: 8px 14px; margin-top: 8px; } .ft-matrix-guide-steps { margin: 8px 0; padding-left: 20px; font-size: 0.8rem; color: var(--ft-ink-soft); line-height: 1.6; } .ft-calculated-fare-block { text-align: center; margin: 16px 0 6px; padding-top: 14px; border-top: 1px dashed var(--ft-line); } .ft-expected-fare-label { font-size: 0.76rem; letter-spacing: 0.1em; color: var(--ft-ink-soft); } .ft-expected-fare-label-sub { font-size: 0.68rem; color: var(--ft-ink-soft); letter-spacing: 0.02em; font-style: italic; margin-top: 2px; } .ft-expected-fare-amount { font-size: 2.6rem; color: var(--ft-ink); line-height: 1; margin: 6px 0 4px; } .ft-expected-fare-category-line { font-size: 0.82rem; color: var(--ft-ink-soft); letter-spacing: 0.04em; min-height: 1.2em; } .ft-expected-fare-breakdown { margin-top: 10px; } .ft-expected-fare-breakdown-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ft-ink-soft); border-top: 1px dashed var(--ft-line); padding: 6px 2px; } .ft-expected-fare-breakdown-row:last-child { border-bottom: 1px dashed var(--ft-line); } .ft-expected-fare-note { font-size: 0.7rem; color: var(--ft-ink-soft); margin-top: 8px; line-height: 1.4; } .ft-fare-caveat { font-size: 0.82rem; color: var(--ft-ink-soft); font-weight: bold; line-height: 1.4; margin: 2px 0 10px; } /* ---------- Base fare, de-emphasized behind native
---------- */ .ft-fare-details { margin-bottom: 14px; } .ft-fare-details > .ft-field { margin: 10px 0 0; } .ft-fare-details-summary { font-size: 0.76rem; letter-spacing: 0.05em; color: var(--ft-ink-soft); cursor: pointer; list-style: none; padding: 4px 0; pointer-events: auto; } .ft-fare-details-summary::-webkit-details-marker { display: none; } .ft-fare-details-summary::before { content: '▸ '; } .ft-fare-details[open] > .ft-fare-details-summary::before { content: '▾ '; } .ft-action-btn { width: 100%; padding: 17px; margin-top: 6px; border: none; font-size: 0.96rem; min-height: 44px; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px; pointer-events: auto; transition: transform 0.08s ease, box-shadow 0.08s ease; } .ft-action-btn.ft-primary { background: var(--ft-stamp-red); color: var(--ft-paper); box-shadow: 0 5px 0 var(--ft-stamp-red-dark); } .ft-action-btn.ft-primary:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ft-stamp-red-dark); } .ft-action-btn.ft-carbon { background: var(--ft-carbon); color: var(--ft-paper); box-shadow: 0 5px 0 var(--ft-carbon-dark); } .ft-action-btn.ft-carbon:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ft-carbon-dark); } .ft-action-btn.ft-ghost { background: transparent; color: var(--ft-ink-soft); border: 2px dashed var(--ft-line); box-shadow: none; } .ft-action-btn:disabled { opacity: 0.55; cursor: default; } /* ---------- Route section (FROM/TO -- honestly unpopulated, spec 10-B) ---------- */ .ft-route-note { font-size: 0.74rem; color: var(--ft-ink-soft); line-height: 1.5; margin-bottom: 14px; } .ft-route-result { margin-top: 14px; padding: 12px 14px; border-radius: 2px; font-size: 0.84rem; line-height: 1.5; } .ft-route-result--unverified { background: var(--ft-paper-2); border-left: 4px solid var(--ft-ink-soft); } .ft-route-result--multi { background: var(--ft-paper-2); border-left: 4px solid var(--ft-carbon); } .ft-route-result--ok { background: #E3F2EA; border-left: 4px solid #2FA97D; } .ft-official-ref-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ft-line); } .ft-official-ref-kicker { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ft-ink-soft); margin-bottom: 8px; } .ft-official-ref-row { margin-bottom: 8px; } .ft-official-ref-vehicle { font-size: 0.8rem; color: var(--ft-ink); font-weight: bold; margin-bottom: 2px; } .ft-official-ref-line { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ft-ink-soft); padding: 1px 0; } .ft-official-ref-note { font-size: 0.7rem; color: var(--ft-ink-soft); margin: 8px 0 0; font-style: italic; } /* ---------- Research consent block (Case File form) ---------- */ .ft-consent-block { background: var(--ft-paper-2); border-radius: 2px; padding: 14px 16px; margin-bottom: 18px; } .ft-consent-title { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ft-ink); margin-bottom: 6px; font-weight: bold; } .ft-consent-desc { font-size: 0.8rem; color: var(--ft-ink-soft); line-height: 1.5; margin: 0 0 12px; } .ft-consent-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--ft-ink); cursor: pointer; margin-bottom: 12px; min-height: 44px; } .ft-consent-checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ft-carbon); cursor: pointer; } .ft-consent-privacy-note { font-size: 0.74rem; color: var(--ft-ink-soft); line-height: 1.5; margin: 0 0 8px; } .ft-consent-optional-tag { font-size: 0.7rem; color: var(--ft-carbon); letter-spacing: 0.04em; margin: 0; } .ft-consent-summary { font-size: 0.76rem; color: var(--ft-ink-soft); margin-top: 4px; } /* ---------- Location autocomplete ---------- */ .ft-location-field { position: relative; } .ft-location-input-wrap { position: relative; display: flex; align-items: center; } .ft-location-input-wrap .ft-text-input { padding-right: 40px; } .ft-location-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: transparent; color: var(--ft-ink-soft); font-size: 0.9rem; cursor: pointer; pointer-events: auto; border-radius: 50%; } .ft-location-clear:hover { background: var(--ft-paper-2); } .ft-location-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 2px solid var(--ft-ink); border-radius: 2px; margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,0.25); } .ft-location-dropdown[hidden] { display: none; } .ft-location-option { padding: 11px 12px; font-size: 0.86rem; color: var(--ft-ink); cursor: pointer; border-bottom: 1px solid var(--ft-line); display: flex; justify-content: space-between; gap: 8px; min-height: 44px; align-items: center; } .ft-location-option:last-child { border-bottom: none; } .ft-location-option:hover, .ft-location-option.ft-active { background: var(--ft-paper-2); } .ft-location-option-meta { font-size: 0.68rem; color: var(--ft-ink-soft); white-space: nowrap; } .ft-location-empty { padding: 12px; font-size: 0.78rem; color: var(--ft-ink-soft); line-height: 1.5; } .ft-route-result-line { font-size: 0.85rem; color: var(--ft-ink); margin-bottom: 10px; line-height: 1.4; } .ft-route-result-line strong { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ft-ink-soft); display: block; margin-bottom: 2px; } .ft-location-check { color: #2FA97D; font-weight: bold; } .ft-location-unrecognized { font-size: 0.74rem; color: var(--ft-ink-soft); font-style: italic; } .ft-route-result-explain { font-size: 0.78rem; color: var(--ft-ink-soft); line-height: 1.5; margin: 4px 0 0; } .ft-route-candidates { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ft-route-candidate-btn { width: 100%; text-align: left; padding: 10px 12px; border: 1.5px solid var(--ft-ink); background: #fff; color: var(--ft-ink); font-size: 0.82rem; border-radius: 2px; cursor: pointer; min-height: 44px; pointer-events: auto; } .ft-route-candidate-btn:hover { background: var(--ft-paper-2); } /* ---------- Field Note (refusal steps) section ---------- */ .ft-section-kicker { font-size: 0.76rem; letter-spacing: 0.12em; color: var(--ft-paper); opacity: 0.85; margin: 0 0 12px 4px; } .ft-field-steps { margin: 0 0 18px; padding-left: 22px; } .ft-field-steps li { margin-bottom: 9px; font-size: 0.86rem; line-height: 1.5; } .ft-hotline-box { background: var(--ft-carbon); color: var(--ft-paper); border-radius: 3px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .ft-hotline-label { font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.8; } .ft-hotline-number { font-size: 1.1rem; letter-spacing: 0.02em; } .ft-hotline-copy-btn { background: var(--ft-paper); color: var(--ft-carbon); border: none; padding: 9px 14px; font-size: 0.72rem; letter-spacing: 0.06em; border-radius: 2px; cursor: pointer; min-height: 40px; pointer-events: auto; } .ft-hotline-copy-btn.ft-copied { background: var(--ft-stamp-red); color: var(--ft-paper); } /* ---------- Takumi Field Notes -- FIX: line-height, padding, overflow (spec 16-5) ---------- */ .ft-note { border-left: 3px solid var(--ft-brass); padding: 10px 16px 10px 16px; font-family: 'Caveat', cursive; font-size: clamp(1rem, 4vw, 1.15rem); /* responsive: shrinks on very narrow screens */ color: var(--ft-ink); line-height: 1.75; /* was 1.35 -- too tight for a cursive face */ margin-bottom: 18px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; hyphens: none; /* never hyphenate a handwriting font -- looks broken */ } .ft-note-signature { display: block; font-size: 0.92rem; color: var(--ft-ink-soft); font-family: 'Special Elite', monospace; margin-bottom: 6px; letter-spacing: 0.03em; } .ft-footer-note { text-align: center; color: var(--ft-paper-2); font-size: 0.7rem; opacity: 0.75; line-height: 1.6; padding: 0 10px; } /* ---------- Overlays (shared) ---------- */ .ft-overlay { position: fixed; inset: 0; background: var(--ft-cork-shadow); z-index: var(--ft-z-modal); display: flex; align-items: flex-start; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; pointer-events: auto; height: 100vh; height: 100dvh; /* Promote to its own GPU compositing layer. Known mitigation for iOS Safari's position:fixed repaint inconsistency during rapid viewport resize (on-screen keyboard open/close). */ transform: translateZ(0); -webkit-transform: translateZ(0); } .ft-overlay[hidden] { display: none; } /* Defensive-only: while ANY .ft-overlay is open, #shared-footer is force-hidden and non-interactive. This does not address the root cause of the iOS Safari repaint bug; it guarantees the footer can never visually block or intercept taps on modal content regardless of what the browser does with position:fixed layout during rapid keyboard open/close. body.ft-modal-open is toggled by showOverlay()/closeOverlay() in field-tool.js. */ body.ft-modal-open #shared-footer { visibility: hidden; pointer-events: none; } .ft-overlay-card { background: var(--ft-paper); max-width: 400px; width: 100%; border-radius: 4px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); border: 3px solid var(--ft-ink); position: relative; pointer-events: auto; } .ft-overlay-close { display: inline-block; background: none; border: none; color: var(--ft-ink-soft); font-size: 0.82rem; letter-spacing: 0.06em; cursor: pointer; padding: 8px 4px 14px; min-height: 44px; pointer-events: auto; position: relative; z-index: 1; touch-action: manipulation; } .ft-overlay-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--ft-line); padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 6px; } .ft-overlay-kicker { font-size: 0.66rem; letter-spacing: 0.09em; color: var(--ft-ink-soft); } /* ---------- Legal Fare Guide (3-second UI, spec 7) ---------- */ .ft-guide-fare-label { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ft-ink-soft); text-align: center; margin-top: 6px; } .ft-guide-fare-amount { font-size: 3.4rem; color: var(--ft-ink); text-align: center; line-height: 1; margin: 6px 0 4px; } .ft-guide-category-line { text-align: center; font-size: 0.85rem; color: var(--ft-ink-soft); letter-spacing: 0.04em; margin-bottom: 14px; } .ft-guide-regular-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ft-ink-soft); border-top: 1px dashed var(--ft-line); border-bottom: 1px dashed var(--ft-line); padding: 8px 2px; margin-bottom: 16px; } .ft-phrase-card { background: var(--ft-paper-2); border-left: 4px solid var(--ft-carbon); padding: 14px 15px; margin: 0 0 16px; border-radius: 0 3px 3px 0; } .ft-phrase-text { font-family: 'Caveat', cursive; font-size: 1.45rem; color: var(--ft-ink); line-height: 1.5; overflow-wrap: break-word; } .ft-guide-basis-line { font-size: 0.78rem; color: var(--ft-ink-soft); text-align: center; margin-bottom: 8px; } .ft-guide-law-line { font-size: 0.86rem; color: var(--ft-ink); text-align: center; line-height: 1.4; margin: 18px 0 8px; } .ft-guide-safety-line { font-size: 0.8rem; color: var(--ft-ink-soft); text-align: center; line-height: 1.5; margin: 18px 0 14px; } .ft-guide-disclaimer { font-size: 0.68rem; color: var(--ft-ink-soft); text-align: center; opacity: 0.75; margin-top: 14px; line-height: 1.5; } .ft-verify-btn { display: block; width: 100%; background: transparent; border: 1.5px solid var(--ft-line); color: var(--ft-ink-soft); font-size: 0.72rem; letter-spacing: 0.08em; padding: 9px; border-radius: 2px; cursor: pointer; min-height: 40px; pointer-events: auto; } .ft-verify-btn[aria-expanded="true"] { background: var(--ft-paper-2); color: var(--ft-ink); border-color: var(--ft-ink-soft); } .ft-verify-detail { margin-top: 10px; margin-bottom: 4px; } .ft-verify-detail[hidden] { display: none; } .ft-detail-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 0.78rem; margin-bottom: 10px; } .ft-detail-grid dt { color: var(--ft-ink-soft); letter-spacing: 0.03em; } .ft-detail-grid dd { margin: 0; color: var(--ft-ink); overflow-wrap: break-word; } .ft-detail-grid dd.ft-overcharge { color: var(--ft-stamp-red); font-weight: bold; } .ft-detail-tag { font-size: 0.68rem; color: var(--ft-ink-soft); font-style: italic; } .ft-detail-note { font-size: 0.76rem; color: var(--ft-ink-soft); line-height: 1.55; } .ft-unverified-block { text-align: center; padding: 20px 6px 10px; } .ft-unverified-title { font-size: 1.3rem; color: var(--ft-stamp-red); letter-spacing: 0.04em; margin-bottom: 10px; } .ft-unverified-block p { font-size: 0.88rem; color: var(--ft-ink); line-height: 1.5; margin-bottom: 10px; } .ft-unverified-reason { font-size: 0.74rem !important; color: var(--ft-ink-soft) !important; } .ft-regular-note { font-size: 0.92rem; line-height: 1.6; color: var(--ft-ink); text-align: center; padding: 20px 6px 8px; } /* ---------- Case form ---------- */ .ft-case-field { margin-bottom: 16px; } .ft-case-field label { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ft-ink-soft); display: block; margin-bottom: 7px; } .ft-context-strip { background: var(--ft-paper-2); border-radius: 2px; padding: 10px 12px; font-size: 0.76rem; color: var(--ft-ink-soft); margin-bottom: 18px; line-height: 1.5; } .ft-case-summary-line { background: var(--ft-paper-2); border-radius: 2px; padding: 10px 12px; font-size: 0.85rem; color: var(--ft-ink); margin-top: 6px; } .ft-refusal-banner { background: var(--ft-stamp-red); color: var(--ft-paper); padding: 12px 14px; border-radius: 2px; font-size: 0.8rem; line-height: 1.5; margin-bottom: 18px; } .ft-refusal-banner strong { display: block; font-size: 0.9rem; margin-bottom: 4px; } .ft-photo-input-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ft-photo-preview { max-width: 70px; max-height: 70px; border-radius: 3px; border: 2px solid var(--ft-ink); display: block; } .ft-photo-remove { font-size: 0.72rem; color: var(--ft-stamp-red); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 8px 0; min-height: 44px; pointer-events: auto; } /* ---------- Case result ---------- */ .ft-case-result-overlay .ft-overlay-card { max-width: 420px; } .ft-case-status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; flex-wrap: wrap; gap: 8px; } .ft-case-number { font-size: 1.1rem; letter-spacing: 0.03em; } .ft-case-status-stamp { border: 2px solid var(--ft-carbon); color: var(--ft-carbon); font-size: 0.68rem; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 3px; display: inline-block; } .ft-case-subheader { font-size: 0.72rem; color: var(--ft-ink-soft); letter-spacing: 0.04em; margin-bottom: 16px; } .ft-case-photo-block { margin-bottom: 16px; } .ft-case-photo-block img { width: 100%; border-radius: 3px; border: 2px solid var(--ft-ink); } .ft-case-notes-block { margin-bottom: 16px; } .ft-case-notes-block p { font-size: 0.82rem; line-height: 1.55; color: var(--ft-ink); overflow-wrap: break-word; } .ft-case-summary-label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ft-ink-soft); margin-bottom: 6px; } .ft-privacy-note { font-size: 0.74rem; line-height: 1.55; background: var(--ft-paper-2); padding: 12px 14px; border-radius: 2px; margin-bottom: 4px; color: var(--ft-ink-soft); } .ft-case-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 6px; } .ft-case-btn-row .ft-action-btn { flex: 1; min-width: 140px; } @media (prefers-reduced-motion: reduce) { .ft-root * { transition: none !important; } } /* ---------- Print (Case File as PDF) ---------- */ @media print { body { background: #fff !important; } .ft-wrap, .ft-overlay:not(.ft-print-target) { display: none !important; } .ft-overlay.ft-print-target { position: static !important; background: #fff !important; padding: 0 !important; display: block !important; } .ft-print-target .ft-overlay-card { max-width: 100% !important; box-shadow: none !important; border: 1px solid #000 !important; background: #fff !important; color: #000 !important; transform: none !important; } .ft-no-print { display: none !important; } .ft-case-status-stamp { color: #000 !important; border-color: #000 !important; } .ft-privacy-note, .ft-detail-tag, .ft-detail-note { color: #000 !important; background: #fff !important; } .ft-detail-grid dd.ft-overcharge { color: #000 !important; } } /* ---------- Footer fallback (unchanged from previous pass) ---------- */ .ft-footer-fallback { background: #141110; color: #C9BEA8; padding: 56px 20px 40px; text-align: center; font-family: 'Special Elite', 'Courier New', monospace; } .ft-footer-fallback-inner { max-width: 640px; margin: 0 auto; } .ft-footer-fallback-logo { font-size: 1.6rem; letter-spacing: 0.12em; color: #F3E9D2; margin-bottom: 14px; } .ft-footer-fallback-rule { width: 60px; height: 1px; background: rgba(201,190,168,0.3); margin: 0 auto 24px; } .ft-footer-fallback-contact-label { font-size: 0.78rem; opacity: 0.75; margin: 0 0 6px; } .ft-footer-fallback-email { color: #F3E9D2; text-decoration: none; font-size: 1.05rem; } .ft-footer-fallback-email:hover { text-decoration: underline; } .ft-footer-fallback-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 32px 0 22px; font-size: 0.74rem; letter-spacing: 0.08em; } .ft-footer-fallback-links a { color: #C9BEA8; text-decoration: none; } .ft-footer-fallback-links a:hover { color: #F3E9D2; } .ft-footer-fallback-copyright { font-size: 0.72rem; opacity: 0.65; margin-bottom: 30px; } .ft-footer-fallback-status { border-top: 1px dashed rgba(201,190,168,0.25); padding-top: 18px; font-size: 0.72rem; letter-spacing: 0.05em; color: #B8925A; line-height: 1.8; } .ft-footer-fallback-status p { margin: 0; } .ft-cursor-blink { animation: ft-blink 1.1s step-end infinite; } @keyframes ft-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ft-cursor-blink { animation: none; } }