/* fill_w9: Fill out a W-9 (/tools/fill-w9, marketing/office_tools/fill_w9.html.erb,
   controllers/fill_w9_controller.js). Prefix .ot-w9-. Shared pieces are in
   ../office_tools.css. The handwriting fonts for typed signatures are the
   ones sign_pdf.css uses (app/assets/fonts/office_tools, see LICENSES.md
   there); they're only downloaded when the Type tab is opened. */

@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/office_tools/dancing-script-latin-600-normal-f32dca1d.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/office_tools/caveat-latin-600-normal-24c7b559.woff2") format("woff2"); }
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/office_tools/homemade-apple-latin-400-normal-d39d701e.woff2") format("woff2"); }

.ot-w9 [hidden] { display: none !important; }

/* The preview is the bigger column here (the form column keeps its width). */
.ot-w9 .ot-tool-main { flex: 1 1 420px; gap: 18px; }
.ot-w9 .ot-tool-side { flex: 999 1 460px; background: var(--gray-200); }
.ot-w9-sticky { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; margin: 0 auto; }

.ot-w9-radio { align-items: flex-start; min-height: 44px; padding: 4px 0; }
.ot-w9-radio input { margin-top: 2px; }
.ot-w9-radio-hint { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.ot-w9-indent { margin: 0 0 6px 30px; }
.ot-w9-panel { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 12px 14px; }

.ot-w9-more { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 14px; }
.ot-w9-more summary { list-style: none; min-height: 44px; padding: 6px 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); }
.ot-w9-more summary::-webkit-details-marker { display: none; }
.ot-w9-more summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.ot-w9-more[open] summary::before { transform: rotate(45deg); }
.ot-w9-more summary .ot-optional { font-weight: 400; color: var(--text-secondary); }
.ot-w9-more-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 14px; }
.ot-w9-textarea { padding: 10px 12px; min-height: 84px; resize: vertical; line-height: 1.4; }

.ot-w9-part { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 18px; }
.ot-w9 .ot-w9-heading { margin: 0; font-size: 18px; line-height: 1.3; color: var(--text); }

.ot-w9-tin-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ot-w9-tin { display: flex; gap: 8px; }
.ot-w9-tin .ot-input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ot-w9-show { flex: none; }
.ot-w9-tin .ot-input[aria-invalid="true"], .ot-w9-form .ot-input[aria-invalid="true"], .ot-w9-form .ot-select[aria-invalid="true"] { border-color: var(--danger); }

.ot-w9-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 4px; }
.ot-w9-method { min-height: 44px; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; cursor: pointer; }
.ot-w9-method[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ot-w9-method-panel { display: flex; flex-direction: column; gap: 10px; }
.ot-w9-pad { width: 100%; height: 150px; border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--surface) linear-gradient(to top, transparent 34px, var(--gray-400) 34px, var(--gray-400) 35px, transparent 35px); touch-action: none; cursor: crosshair; display: block; }
.ot-w9-pad-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ot-w9-style { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border: 1px solid var(--border-hover); border-radius: var(--radius-lg); cursor: pointer; overflow: hidden; }
.ot-w9-style:has(input:checked) { border: 2px solid var(--primary); background: var(--primary-light); padding: 0 11px; }
.ot-w9-style input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.ot-w9-style span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-dark); }
.ot-w9-style-dancing { font-size: 26px; font-weight: 600; }
.ot-w9-style-caveat { font-size: 28px; font-weight: 600; }
.ot-w9-style-apple { font-size: 18px; }

.ot-w9-preview-label { margin: 0; }
.ot-w9-preview { background: var(--surface); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)); aspect-ratio: 612 / 792; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ot-w9-preview canvas { display: block; width: 100% !important; height: auto !important; }
.ot-w9-preview-wait { padding: 16px; text-align: center; }