/* Free office tools (/tools/qr-code-generator and the rest, Public::OfficeTools).
   Loaded only by those pages (marketing/office_tools/_head), together with
   the page's own office_tools/<key>.css, whose rules use the tool's prefix
   (.ot-qr-, .ot-sig-, .ot-sign-, .ot-pdf-, .ot-card-, .ot-wm-).
   Colors come from web.css's :root tokens. Tap targets 44px or larger. */

.ot-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ot-hero { padding: 32px 0 8px; }
.ot-crumbs { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.ot-crumbs a { color: var(--text-secondary); }
.ot-hero h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; max-width: 780px; color: var(--text); }
.ot-subtitle { margin: 0 0 20px; font-size: 18px; color: var(--text-secondary); max-width: 720px; line-height: 1.5; }
.ot-chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--gray-700); }
.ot-chips li { display: flex; align-items: center; gap: 6px; }
.ot-chips svg { color: var(--success); flex: none; }

.ot-section { padding: 28px 0; }
.ot-section h2 { margin: 0 0 16px; font-size: 26px; letter-spacing: -0.01em; color: var(--text); }

/* The tool card: a main column and a side column that stack on phones. */
.ot-tool { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: flex; flex-wrap: wrap; overflow: hidden; }
.ot-tool-main { flex: 999 1 520px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.ot-tool-side { flex: 1 1 320px; min-width: 0; padding: 28px; background: var(--bg-secondary); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .ot-tool-side { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 600px) {
  .ot-hero h1 { font-size: 30px; }
  .ot-subtitle { font-size: 16px; }
  .ot-tool-main, .ot-tool-side { padding: 20px 16px; }
  .ot-container { padding: 0 16px; }
}

.ot-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ot-label, .ot-legend { font-size: 14px; font-weight: 600; color: var(--text); padding: 0; }
.ot-label .ot-optional { font-weight: 400; color: var(--text-secondary); }
.ot-input, .ot-select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border-hover); border-radius: var(--radius-md); font: inherit; font-size: 16px; color: var(--text); background: var(--surface); width: 100%; box-sizing: border-box; }
.ot-input:focus, .ot-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.ot-hint { font-size: 13px; color: var(--text-secondary); margin: 0; }
.ot-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ot-grid-2 .ot-span-2 { grid-column: 1 / -1; }
@media (max-width: 480px) { .ot-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.ot-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ot-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; color: var(--text); }
.ot-check input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }

.ot-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-pill { min-height: 44px; padding: 0 16px; border-radius: var(--radius-full); border: 1px solid var(--border-hover); background: var(--surface); color: var(--gray-700); font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.ot-pill[aria-pressed="true"], .ot-pill[aria-selected="true"], .ot-pill[aria-current="page"] { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

.ot-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ot-swatch { width: 44px; height: 44px; border-radius: var(--radius-full); border: 2px solid var(--surface); outline: 1px solid var(--border-hover); cursor: pointer; padding: 0; }
.ot-swatch[aria-pressed="true"] { border-width: 3px; outline: 2px solid var(--primary-dark); }
.ot-swatch-custom { position: relative; overflow: hidden; background: var(--surface); outline-style: dashed; }
.ot-swatch-custom input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.ot-btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.ot-btn:hover { border-color: var(--gray-400); }
.ot-btn-primary { min-height: 48px; border: 0; background: var(--primary); color: var(--text-inverse); font-size: 16px; font-weight: 600; }
.ot-btn-primary:hover { background: var(--primary-dark); }
.ot-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ot-actions { display: flex; flex-direction: column; gap: 8px; }
.ot-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-actions-row > .ot-btn { flex: 1 1 auto; }

.ot-dropzone { border: 2px dashed var(--gray-400); border-radius: var(--radius-lg); background: var(--surface); padding: 32px 20px; text-align: center; color: var(--gray-700); display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.ot-dropzone.is-dragover { border-color: var(--primary); background: var(--primary-light); }
.ot-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ot-status { font-size: 14px; color: var(--text-secondary); margin: 0; min-height: 1.4em; }
.ot-status.is-error { color: var(--danger); }

.ot-privacy { background: var(--success-light); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #065f46; }
.ot-privacy svg { color: var(--success); flex: none; margin-top: 1px; }
.ot-privacy p { margin: 0; }

.ot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ot-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; color: var(--text); text-decoration: none; }
.ot-card strong { display: block; margin-bottom: 4px; }
.ot-card p { margin: 0; font-size: 15px; color: var(--text-secondary); }

.ot-split { display: flex; flex-wrap: wrap; gap: 32px; }
.ot-faq { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ot-faq h2 { margin-bottom: 4px; }
.ot-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; }
.ot-faq-item summary { font-weight: 600; cursor: pointer; color: var(--text); }
.ot-faq-item p { margin: 10px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.ot-bridge { flex: 1 1 320px; min-width: 0; align-self: flex-start; background: var(--primary); color: var(--text-inverse); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ot-bridge p { margin: 0; }
.ot-bridge-overline { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-100); }
.ot-bridge-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.ot-bridge-body { font-size: 15px; color: var(--gray-200); line-height: 1.55; }
.ot-bridge-cta { align-self: flex-start; background: var(--surface); color: var(--primary-dark); text-decoration: none; padding: 12px 18px; border-radius: var(--radius-md); font-weight: 600; }
.ot-bridge-link { color: var(--text-inverse); font-size: 15px; }

.ot-more h2 { font-size: 20px; }
.ot-more-list { list-style: none; margin: 0; padding: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ot-more-list a { display: inline-flex; min-height: 44px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0 16px; text-decoration: none; color: var(--text); font-size: 15px; }
.ot-more-list a:hover { border-color: var(--primary); }

.ot-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }