@media screen { #transmittal-form .page-header .relative > input[type="text"] { padding-top: 0.625rem; padding-bottom: 0.25rem; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background-color: var(--bg); box-shadow: none !important; } #transmittal-form .page-header .relative > input[type="text"]:focus { border-bottom-color: var(--primary); box-shadow: none !important; } /* Remove underlines from title area inputs (type and title) */ #transmittal-form .page-header .title-area input[type="text"] { border-bottom: 0 !important; } #transmittal-form .page-header label[for], #transmittal-form .page-header .relative > label { position: absolute; left: 0.5rem; top: -0.5rem; font-weight: 700; background: var(--bg); padding: 0 0.25rem; font-size: 10px; color: var(--text-muted); pointer-events: none; z-index: 1; } #transmittal-form .page-header .relative { margin-top: 0.375rem; } /* Boxed inputs (full-border, floating label) inside the grid need extra top margin so the absolute-positioned label (-top-2 = -0.5rem) is not clipped */ #transmittal-form .page-header .grid .relative { margin-top: 0.75rem; } /* ── From field rendered mailto link ──────────────────────── */ .from-render { font-size: 12px; font-family: var(--font-mono); line-height: 1.6; padding: 0.625rem 0.5rem 0.25rem; border-bottom: 1px solid var(--border); } .from-mailto { color: var(--primary); text-decoration: none; } .from-mailto:hover { text-decoration: underline; } /* ── To field rendered mailto links ───────────────────────── */ .to-render { font-size: 12px; font-family: var(--font-mono); line-height: 1.6; padding: 0.625rem 0.5rem 0.25rem; border-bottom: 1px solid var(--border); word-break: break-word; } .to-mailto { color: var(--primary); text-decoration: none; } .to-mailto:hover { text-decoration: underline; } .to-sep { color: var(--text-muted); } }