/*
 * WORDPRESS ADMIN BASELINE, for the demo only.
 *
 * Two of Linkilo's screens — Setup Guide and MCP Access — ship no stylesheet
 * of their own. They are ordinary wp-admin markup: .wrap, .notice, .button,
 * .widefat, inline styles. Inside WordPress that renders on top of core's
 * common.css and forms.css, which the marketing site does not load.
 *
 * So this is the slice of WordPress core the demo needs, with core's own
 * values (wp-admin/css/common.css, forms.css, list-tables.css as of WP 6.x),
 * scoped so it can only paint inside the demo frame. It is hand-maintained
 * and deliberately small: only the selectors those two screens use.
 */

/* Scoped to the two screens that are plain wp-admin markup. Each selector
   carries its full tail on both scopes: an earlier version split
   ".wrap code" into ".wrap, .wrap code", which put monospace on the
   whole screen. */
.lkd__screen [data-lk-demo-panel="setup"] .wrap,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap { margin: 0; }.lkd__screen [data-lk-demo-panel="setup"] .wrap h1,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap h1,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap h1,
.lkd__screen [data-lk-demo-panel="setup"] .wrap .lkd-as-h1,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap .lkd-as-h1,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap .lkd-as-h1 {
  font-size: 23px;
  font-weight: 400;
  margin: 0 0 8px;
  padding: 9px 0 4px;
  line-height: 1.3;
  color: #1d2327;
}.lkd__screen [data-lk-demo-panel="setup"] .wrap h2,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap h2,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap h2,
.lkd__screen [data-lk-demo-panel="setup"] .wrap .lkd-as-h2,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap .lkd-as-h2,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap .lkd-as-h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 1em 0;
  color: #1d2327;
}.lkd__screen [data-lk-demo-panel="setup"] .wrap p,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap p,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap p { font-size: 13px; line-height: 1.5; margin: 1em 0; color: #3c434a; }.lkd__screen [data-lk-demo-panel="setup"] .wrap a:not([class*="button"]):not(.nav-tab),
.lkd__screen [data-lk-demo-panel="mcp"] .wrap a:not([class*="button"]):not(.nav-tab),
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap a:not([class*="button"]):not(.nav-tab) { color: #3858e9; text-decoration: none; }
.lkd__screen [data-lk-demo-panel="setup"] .wrap a:not([class*="button"]):not(.nav-tab):hover,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap a:not([class*="button"]):not(.nav-tab):hover,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap a:not([class*="button"]):not(.nav-tab):hover { color: #2145e6; text-decoration: underline; }.lkd__screen [data-lk-demo-panel="setup"] .wrap code,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap code,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap code {
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, .07);
  padding: 3px 5px 2px;
  border-radius: 3px;
}.lkd__screen [data-lk-demo-panel="setup"] .wrap ul,
.lkd__screen [data-lk-demo-panel="mcp"] .wrap ul,
.lkd__screen [data-lk-demo-panel="linkhealth"] .wrap ul { margin: 0 0 1em; }

/* Index Coverage's bar-chart hover tooltip. Hidden until hover in the plugin;
   the demo has no hover, so it is simply hidden. */
.lkd__screen .lic-tip { display: none !important; }

/* ---- .notice -------------------------------------------------------- */

.lkd__screen .notice {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-left-width: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  margin: 5px 0 15px;
  padding: 1px 12px;
}
.lkd__screen .notice p { margin: .5em 0; padding: 2px; font-size: 13px; }
.lkd__screen .notice-success { border-left-color: #00a32a; }
.lkd__screen .notice-error   { border-left-color: #d63638; }
.lkd__screen .notice-warning { border-left-color: #dba617; }
.lkd__screen .notice-info    { border-left-color: #72aee6; }

/* ---- .button -------------------------------------------------------- */

/* Specificity note: in wp-admin these are .wp-core-ui rules (two classes), so a
   plugin's bare .button-secondary override LOSES to them and a two-class
   override wins. The extra attribute selector reproduces that weight. */
.lkd__screen .button, .lkd__screen [data-lk-demo-panel] .button,
.lkd__screen .button-secondary, .lkd__screen [data-lk-demo-panel] .button-secondary {
  display: inline-block;
  font-size: 13px;
  line-height: 2.15384615;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid #3858e9;
  border-radius: 3px;
  background: #f6f7f7;
  color: #3858e9;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: top;
}
.lkd__screen .button-primary, .lkd__screen [data-lk-demo-panel] .button-primary {
  background: #3858e9;
  border-color: #3858e9;
  color: #fff;
}
.lkd__screen .button-hero {
  font-size: 14px;
  min-height: 46px;
  line-height: 3.14285714;
  padding: 0 36px;
}
.lkd__screen .button-small {
  font-size: 11px;
  min-height: 26px;
  line-height: 2.18181818;
  padding: 0 8px;
}
.lkd__screen .button-large {
  min-height: 32px;
  line-height: 2.30769231;
  padding: 0 12px;
}
.lkd__screen .button .dashicons { vertical-align: middle; margin-top: -2px; }

/* ---- form controls ----------------------------------------------------- */

.lkd__screen .wrap input[type="text"],
.lkd__screen .wrap input[type="url"],
.lkd__screen .wrap select {
  font-size: 14px;
  line-height: 2;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff;
  color: #2c3338;
  box-shadow: 0 0 0 transparent;
}
.lkd__screen .wrap input[type="checkbox"] {
  width: 1rem; height: 1rem;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff;
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* ---- .widefat (list-tables.css) ---------------------------------------- */

.lkd__screen table.widefat {
  width: 100%;
  border-spacing: 0;
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  background: #fff;
  clear: both;
  margin: 0;
}
.lkd__screen table.widefat th,
.lkd__screen table.widefat td {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  color: #2c3338;
}
.lkd__screen table.widefat thead th {
  border-bottom: 1px solid #c3c4c7;
  font-weight: 400;
}
.lkd__screen table.widefat.striped tbody > tr:nth-child(odd) { background: #f6f7f7; }
.lkd__screen table.widefat td code { font-size: 12px; }


/*
 * TAILWIND SUBSET, for the Topic Clusters screen only.
 *
 * templates/topic-clusters-page.php loads Tailwind from cdn.tailwindcss.com
 * and writes its layout in utility classes. The marketing site does not load
 * Tailwind (a 300KB runtime for one page is not a trade this site makes), so
 * this is the exact set of utilities that screen uses, with Tailwind's own
 * values, scoped to that one panel.
 *
 * If the clusters screen gains a utility this file does not have, the
 * layout audit in the browser will report an overflow on that panel. Add the
 * utility here; do not load the CDN.
 */

.lkd__screen [data-lk-demo-panel="clusters"] .flex { display: flex; }
.lkd__screen [data-lk-demo-panel="clusters"] .grid { display: grid; }
.lkd__screen [data-lk-demo-panel="clusters"] .block { display: block; }
.lkd__screen [data-lk-demo-panel="clusters"] .flex-1 { flex: 1 1 0%; }
.lkd__screen [data-lk-demo-panel="clusters"] .flex-grow { flex-grow: 1; }
.lkd__screen [data-lk-demo-panel="clusters"] .flex-wrap { flex-wrap: wrap; }
.lkd__screen [data-lk-demo-panel="clusters"] .items-center { align-items: center; }
.lkd__screen [data-lk-demo-panel="clusters"] .items-end { align-items: flex-end; }
.lkd__screen [data-lk-demo-panel="clusters"] .items-start { align-items: flex-start; }
.lkd__screen [data-lk-demo-panel="clusters"] .justify-between { justify-content: space-between; }
.lkd__screen [data-lk-demo-panel="clusters"] .justify-around { justify-content: space-around; }
.lkd__screen [data-lk-demo-panel="clusters"] .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lkd__screen [data-lk-demo-panel="clusters"] .gap-4 { gap: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .gap-x-6 { column-gap: 1.5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .gap-y-2 { row-gap: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .space-x-4 > * + * { margin-left: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .space-y-2 > * + * { margin-top: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .space-y-3 > * + * { margin-top: .75rem; }

.lkd__screen [data-lk-demo-panel="clusters"] .w-4 { width: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .h-4 { height: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .w-full { width: 100%; }
.lkd__screen [data-lk-demo-panel="clusters"] .max-w-full { max-width: 100%; }
.lkd__screen [data-lk-demo-panel="clusters"] .min-w-\[150px\] { min-width: 150px; }
.lkd__screen [data-lk-demo-panel="clusters"] .mx-auto { margin-left: auto; margin-right: auto; }
.lkd__screen [data-lk-demo-panel="clusters"] .ml-auto { margin-left: auto; }
.lkd__screen [data-lk-demo-panel="clusters"] .ml-2 { margin-left: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mr-1 { margin-right: .25rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-1 { margin-bottom: .25rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-2 { margin-bottom: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-3 { margin-bottom: .75rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-4 { margin-bottom: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-6 { margin-bottom: 1.5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mb-8 { margin-bottom: 2rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mt-4 { margin-top: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mt-6 { margin-top: 1.5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .mt-8 { margin-top: 2rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .p-2 { padding: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .p-3 { padding: .75rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .p-4 { padding: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .p-6 { padding: 1.5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .px-2 { padding-left: .5rem; padding-right: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .py-20 { padding-top: 5rem; padding-bottom: 5rem; }

.lkd__screen [data-lk-demo-panel="clusters"] .rounded { border-radius: .25rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .rounded-lg { border-radius: .5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .rounded-xl { border-radius: .75rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .rounded-full { border-radius: 9999px; }
.lkd__screen [data-lk-demo-panel="clusters"] .border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.lkd__screen [data-lk-demo-panel="clusters"] .border-2 { border-width: 2px; border-style: solid; border-color: #e5e7eb; }
.lkd__screen [data-lk-demo-panel="clusters"] .border-b-4 { border-bottom-width: 4px; border-bottom-style: solid; }
.lkd__screen [data-lk-demo-panel="clusters"] .border-gray-200 { border-color: #e5e7eb; }
.lkd__screen [data-lk-demo-panel="clusters"] .border-gray-300 { border-color: #d1d5db; }
.lkd__screen [data-lk-demo-panel="clusters"] .shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.lkd__screen [data-lk-demo-panel="clusters"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.lkd__screen [data-lk-demo-panel="clusters"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.lkd__screen [data-lk-demo-panel="clusters"] .bg-white { background-color: #fff; }
.lkd__screen [data-lk-demo-panel="clusters"] .bg-gray-50 { background-color: #f9fafb; }
.lkd__screen [data-lk-demo-panel="clusters"] .bg-yellow-200 { background-color: #fef08a; }

.lkd__screen [data-lk-demo-panel="clusters"] .text-xs { font-size: .75rem; line-height: 1rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-sm { font-size: .875rem; line-height: 1.25rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-center { text-align: center; }
.lkd__screen [data-lk-demo-panel="clusters"] .font-medium { font-weight: 500; }
.lkd__screen [data-lk-demo-panel="clusters"] .font-semibold { font-weight: 600; }
.lkd__screen [data-lk-demo-panel="clusters"] .font-bold { font-weight: 700; }
.lkd__screen [data-lk-demo-panel="clusters"] .font-extrabold { font-weight: 800; }
.lkd__screen [data-lk-demo-panel="clusters"] .uppercase { text-transform: uppercase; }
.lkd__screen [data-lk-demo-panel="clusters"] .tracking-wider { letter-spacing: .05em; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-white { color: #fff; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-gray-400 { color: #9ca3af; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-gray-500 { color: #6b7280; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-gray-600 { color: #4b5563; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-gray-700 { color: #374151; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-gray-800 { color: #1f2937; }
.lkd__screen [data-lk-demo-panel="clusters"] .text-yellow-800 { color: #854d0e; }
.lkd__screen [data-lk-demo-panel="clusters"] .list-disc { list-style-type: disc; }
.lkd__screen [data-lk-demo-panel="clusters"] .list-inside { list-style-position: inside; }
.lkd__screen [data-lk-demo-panel="clusters"] .cursor-pointer { cursor: pointer; }

@media (min-width: 768px) {
  .lkd__screen [data-lk-demo-panel="clusters"] .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lkd__screen [data-lk-demo-panel="clusters"] .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/*
 * AI dashboard stat tiles.
 *
 * assets/css/admin.css defines .stat-item twice, for two different AI screens:
 * a centred block tile (the dashboard) and a horizontal flex row (the
 * suggestions page). Both are scoped to this panel, and the flex one lands
 * later in the cascade, so the dashboard's three tiles were sizing to their
 * content and overflowing the 3-column grid. This re-asserts the dashboard's
 * own rule from templates/dashboard-page.php at the same specificity, last.
 */
.lkd__screen [data-lk-demo-panel="ailab"] .progress-stats .stat-item {
  display: block;
  text-align: center;
  padding: 15px;
}

/* Update URL: the cardkit's .lkit-grow field flexes, but the text input inside
   it was sizing to its default 20 characters. The plugin's own inputs fill the
   field. */
.lkd__screen [data-lk-demo-panel="updateurl"] .lkit-field input[type="text"] { width: 100%; box-sizing: border-box; }

/*
 * Topic Clusters, two more things Tailwind's preflight normally provides.
 *
 * 1. box-sizing: border-box on everything. Without it a w-full select inside a
 *    padded container is wider than the container by the padding.
 * 2. The pillar primer's paragraphs were inheriting white-space: nowrap from a
 *    table-cell rule elsewhere on that screen; the plugin's primer wraps.
 */
.lkd__screen [data-lk-demo-panel="clusters"] *,
.lkd__screen [data-lk-demo-panel="clusters"] *::before,
.lkd__screen [data-lk-demo-panel="clusters"] *::after { box-sizing: border-box; }
.lkd__screen [data-lk-demo-panel="clusters"] .linkilo-ai-pillar-primer p { white-space: normal; }

/*
 * WordPress core draws the tick and the radio dot itself (forms.css), because
 * it replaces the native control with its own box. Without these two rules a
 * checked box looks unchecked.
 */
.lkd__screen .wrap input[type="checkbox"],
.lkd__screen .wrap input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  display: inline-block; position: relative;
  min-width: 1rem;
  cursor: pointer;
  transition: .05s border-color ease-in-out;
}
.lkd__screen .wrap input[type="radio"] { border-radius: 50%; }
/* The tick. Core's rule outranks a plugin's bare input[type=checkbox]::before;
   scoping inflates the plugin's, so the tick is !important here. Switch-style
   toggles hide their input, so they are unaffected. */
.lkd__screen input[type="checkbox"], .lkd__screen input[type="radio"] { position: relative; }
.lkd__screen input[type="checkbox"]:checked::before {
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%233858e9'/%3E%3C/svg%3E") !important;
  position: absolute !important; inset: 0 !important; margin: -3px 0 0 -4px !important;
  width: 1.3125rem !important; height: 1.3125rem !important; background: none !important; display: block !important; opacity: 1 !important;
}
.lkd__screen input[type="radio"]:checked::before {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: .5rem; height: .5rem; border-radius: 50%; background: #3582c4;
}

/* Links styled as primary buttons (<a class="button button-primary">): the
   screens' own link colour rules outrank the baseline, which left white text
   painted blue on blue. WP core wins this with .wp-core-ui; we do the same. */
.lkd__screen a.button-primary,
.lkd__screen a.button-primary:hover,
.lkd__screen a.button-primary:focus,
.lkd__screen [data-lk-demo-panel] a.button-primary { color: #fff; }
.lkd__screen a.button, .lkd__screen a.button:hover { text-decoration: none; }

/* Colour scheme: WordPress "Modern" (#3858e9), the scheme the plugin's own screenshots
   and the owner's admin use, not the default blue. */
/* WP core list tables: row actions appear on hover only. */
.lkd__screen .row-actions { position: relative; left: -9999em; font-size: 13px; color: #a7aaad; }
.lkd__screen tr:hover .row-actions, .lkd__screen .row-actions:focus-within { left: 0; }