/* G-direct — this tool's own styles. Shared styles (text box, buttons, link rows, toast…) are in /assets/style.css */

.panel { max-width: 860px; margin: 38px auto 0; padding: clamp(16px, 3vw, 26px); display: grid; gap: 14px; text-align: left; }

/* results */
.block { padding-top: clamp(40px, 5vw, 60px); }
.narrow { max-width: 860px; }
.ftype { display: inline-block; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px;
  margin-right: 8px; vertical-align: 1px; color: var(--info); background: var(--info-bg); }
.ftype.doc { color: #93c5fd; background: rgba(59,130,246,.15); }
.ftype.sheet { color: var(--ok); background: var(--ok-bg); }
.ftype.slides { color: var(--warn); background: var(--warn-bg); }
.skipped { margin-top: 22px; }
.skipped ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.skipped li { font-size: 14px; color: var(--text-2); padding: 10px 14px; border-radius: 12px; background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); overflow-wrap: anywhere; }
.skipped li b { color: var(--bad); font-weight: 600; margin-right: 6px; }

/* the two option switches side by side */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 640px) {
  .options { grid-template-columns: 1fr; }
}