/* Instagram SEO tool. Flat: borders for edges, no shadows, lime only on the pass mark and the chosen first line. */

.seo-form [hidden],
.seo-results[hidden],
.seo-results [hidden],
.seo-fields[hidden] { display: none !important; }

.seo-form { display: grid; gap: 18px; }
.seo-fields { display: grid; gap: 18px; }
.seo-form .form-group { margin: 0; }
.seo-form .form-label { display: block; margin-bottom: 6px; }
.seo-form .form-hint { margin: 6px 0 0; }
.seo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.seo-textarea { display: block; width: 100%; min-height: 140px; padding: 12px 16px; line-height: 1.5; resize: vertical; font-family: inherit; }
.seo-textarea--short { min-height: 80px; }
#tv9 .tool-card .seo-form .form-input,
#tv9 .tool-card .seo-results .form-input { border: 1px solid #e5e7eb; }
#tv9 .tool-card .seo-form .form-input:focus,
#tv9 .tool-card .seo-results .form-input:focus { border-color: #000000; }

.seo-error { margin: 0; font-size: 14px; color: #b42318; }
.seo-submit { justify-self: start; min-width: 200px; }

.seo-results { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb; }

.seo-score { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.seo-score__num { display: inline-grid; place-items: center; min-width: 72px; height: 72px; padding: 0 12px; border: 1px solid #000000; border-radius: 16px; font-size: 26px; font-weight: 600; color: #000000; background: #ffffff; font-variant-numeric: tabular-nums; }
.seo-score--full .seo-score__num { background: #d1fe17; }
.seo-score__text { margin: 0; font-size: 17px; font-weight: 500; color: #000000; }

.seo-checks { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.seo-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #ffffff; font-size: 15px; line-height: 1.45; color: #111111; }
.seo-check__mark { flex: 0 0 24px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; }
.seo-check--pass .seo-check__mark { background: #d1fe17; color: #000000; }
.seo-check--fix { border-color: #000000; }
.seo-check--fix .seo-check__mark { background: #000000; color: #ffffff; }
.seo-check--tip .seo-check__mark { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.seo-check__text strong { font-weight: 600; }

.seo-out { display: grid; gap: 12px; }
.seo-out__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; color: #000000; }
.seo-out__label { display: block; margin: 0; font-size: 14px; font-weight: 500; color: #374151; }
.seo-out__block { display: grid; gap: 8px; margin-bottom: 12px; }

.seo-starts-wrap { display: grid; gap: 8px; }
.seo-starts { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-start { max-width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #ffffff; font: inherit; font-size: 14px; line-height: 1.3; color: #111111; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.seo-start:hover { border-color: #000000; }
.seo-start:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
.seo-start--on { border-color: #000000; background: #d1fe17; color: #000000; }

.seo-fixed { min-height: 180px; }
input.seo-fixed { min-height: 0; padding: 12px 16px; }
#seoFixedBio { min-height: 110px; }

.seo-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #6b7280; font-variant-numeric: tabular-nums; }
.seo-counter--warn { color: #b42318; font-weight: 600; }
.seo-note { margin: 0; font-size: 14px; line-height: 1.45; color: #374151; }
.seo-note:empty { display: none; }
.seo-copy { justify-self: start; min-width: 120px; }

.seo-privacy { max-width: 860px; margin: 14px auto 0; font-size: 13px; line-height: 1.45; text-align: center; color: #6b7280; }

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

@media (max-width: 640px) {
  .seo-row { grid-template-columns: 1fr; }
  .seo-submit, .seo-copy { justify-self: stretch; width: 100%; }
  .seo-score__num { min-width: 60px; height: 60px; font-size: 22px; }
  .seo-check { font-size: 14px; }
}

/* tools-base.css reserves 48px on the left of every field for an icon; these fields have none.
   The older typography layer sizes every h2 as a section title; this one is a card heading. */
#tv9 .tool-card .seo-form .form-input,
#tv9 .tool-card .seo-results .form-input { padding-left: 16px; }
#tv9 .tool-card .seo-out__title,
html body.ikt:not(#_) .seo-out__title { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-align: left; color: #000000; }

/* tools-base.css hides the label of inactive step tabs on phones. These tabs are two modes, so both labels stay. */
@media (max-width: 768px) {
  .seo-tabs .tool-tab__text { display: inline !important; }
}