/* email_signature_generator: rules for this tool only. Shared pieces are in ../office_tools.css.
   Page: marketing/office_tools/email_signature_generator.html.erb. The signature
   inside .ot-sig-output carries its own inline styles (it is pasted into email
   apps), so nothing here may style it. */

/* Form column narrower, preview column wider (the mock-up's proportions). */
.ot-sig-tool .ot-sig-form { flex: 1 1 380px; }
.ot-sig-tool .ot-sig-side { flex: 999 1 520px; background: var(--bg-secondary); }

.ot-sig-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ot-sig-layout { min-height: 64px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: var(--surface); color: var(--gray-700); font: inherit; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 6px 4px; }
.ot-sig-layout[aria-pressed="true"] { border: 2px solid var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.ot-sig-layout-icon { display: flex; gap: 4px; align-items: center; }
.ot-sig-icon-square { width: 14px; height: 14px; border-radius: 4px; background: currentColor; opacity: 0.8; }
.ot-sig-icon-round { border-radius: 9999px; }
.ot-sig-icon-lines { display: flex; flex-direction: column; gap: 2px; }
.ot-sig-icon-lines span { display: block; width: 28px; height: 3px; border-radius: 2px; background: currentColor; }
.ot-sig-icon-lines span + span { width: 20px; opacity: 0.55; }
.ot-sig-icon-center { align-items: center; }

.ot-sig-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ot-sig-image-field { flex: 1 1 220px; }
.ot-sig-image-field[hidden], .ot-sig-image-field .ot-btn[hidden] { display: none; }
.ot-sig-file { position: relative; }
.ot-sig-file:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.ot-sig-file.is-busy { opacity: 0.5; cursor: progress; }

.ot-sig-custom { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 20px; }
.ot-sig-custom:focus-within { outline: 2px solid var(--primary); }
.ot-sig-custom.is-selected { border-width: 3px; outline: 2px solid var(--primary-dark); outline-style: solid; }

.ot-sig-extra-field { padding: 0 0 6px 30px; }
.ot-sig-extra-field[hidden] { display: none; }
.ot-sig-socials { display: flex; flex-direction: column; gap: 10px; }

/* The mock email around the live signature. */
.ot-sig-mail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ot-sig-mail-head { padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ot-sig-mail-key { color: var(--gray-500); }
.ot-sig-mail-body { padding: 20px 18px 24px; font-size: 15px; color: var(--text); }
.ot-sig-mail-body > p { margin: 0 0 12px; }
.ot-sig-mail-body > .ot-sig-mail-signoff { margin-bottom: 22px; }
.ot-sig-output { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }

.ot-sig-install { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.ot-section h2.ot-sig-install-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; letter-spacing: 0; }
.ot-sig-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ot-sig-tab { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 15px; cursor: pointer; }
.ot-sig-tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.ot-sig-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ot-sig-panel ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--gray-700); display: flex; flex-direction: column; gap: 6px; }

/* "Already have your logo online?" link field and the stored images list. */
.ot-sig-hosted summary { cursor: pointer; font-size: 14px; color: var(--primary-dark); min-height: 32px; display: flex; align-items: center; }
.ot-sig-hosted[open] summary { margin-bottom: 8px; }
.ot-sig-stored[hidden] { display: none; }
.ot-sig-stored { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ot-sig-stored-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ot-sig-stored-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ot-sig-stored-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ot-sig-stored-label { flex: 1 1 120px; font-size: 14px; color: var(--text-secondary); }