/* ============================================================================
   Link to NetEra Console Lab: styles (v1.0.0)

   Everything is driven by --ltncl-* custom properties on .ltncl, so:
     · inside the Link to NetEra theme the lab picks up the site's own tokens
       (each property falls back to var(--accent), var(--code-bg) ... first);
     · on any other site the fallbacks give a finished look;
     · Elementor's Style tab simply sets these properties.

   Layout presets  .ltncl--card (default) · .ltncl--split · .ltncl--minimal
   Colour schemes  .ltncl--auto (default) · .ltncl--light · .ltncl--dark · .ltncl--retro
   ============================================================================ */
.ltncl {
  --ltncl-accent: var(--accent, #0b8f80);
  --ltncl-on-accent: var(--on-accent, #ffffff);
  --ltncl-text: var(--text, #0e1626);
  --ltncl-muted: var(--text-muted, #525e70);
  --ltncl-surface: var(--surface, #ffffff);
  --ltncl-surface-alt: var(--surface-alt, #f5f7fb);
  --ltncl-border: var(--border, #e4e9f2);
  --ltncl-frame: color-mix(in srgb, var(--ltncl-accent) 35%, var(--ltncl-border));
  --ltncl-ok: var(--success-600, #15803d);
  --ltncl-ok-bg: var(--success-100, #dcfce7);
  --ltncl-bad: var(--danger-600, #b42318);
  --ltncl-bad-bg: var(--danger-100, #fee4e2);
  --ltncl-hint-bg: var(--warning-100, #fef3c7);
  --ltncl-badge-bg: var(--violet-100, #ede9fe);
  --ltncl-badge-text: var(--violet-600, #5646e0);
  --ltncl-term-bg: var(--code-bg, #0a0e17);
  --ltncl-term-bar: var(--code-surface, #111826);
  --ltncl-term-line: var(--code-line, #1f2a3a);
  --ltncl-term-text: var(--code-text, #e6ebf2);
  --ltncl-term-dim: var(--code-muted, #8b95a7);
  --ltncl-term-cmd: var(--code-teal, #00e0c6);
  --ltncl-term-prompt: var(--code-teal, #00e0c6);
  --ltncl-term-tip: #f0b454;
  --ltncl-term-size: 0.78rem;
  --ltncl-height: 300px;
  --ltncl-radius: 18px;
  --ltncl-term-radius: 12px;
  --ltncl-pad: 20px;
  --ltncl-mono: var(--font-mono, ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace);
  --ltncl-head: var(--font-head, inherit);

  container-type: inline-size;
  display: block;
  margin: 24px 0;
  padding: var(--ltncl-pad);
  border: 1px solid var(--ltncl-frame);
  border-radius: var(--ltncl-radius);
  background: var(--ltncl-surface);
  color: var(--ltncl-text);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}
.ltncl, .ltncl * { box-sizing: border-box; }
.ltncl.is-complete { --ltncl-frame: var(--ltncl-ok); }
.ltncl__grid { display: grid; gap: 14px; }
.ltncl__info, .ltncl__work { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ltncl__icon { width: 18px; height: 18px; flex: none; }
.ltncl__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- head ---------------------------------------------------------------------- */
.ltncl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ltncl__kicker {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0;
  font: 600 0.75rem/1.3 var(--ltncl-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ltncl-accent);
}
.ltncl__title { margin: 0; font-family: var(--ltncl-head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ltncl-text); }
.ltncl__badge {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  background: var(--ltncl-badge-bg); color: var(--ltncl-badge-text);
  font: 600 0.6875rem/1.3 var(--ltncl-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.ltncl__done-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--ltncl-ok-bg); color: var(--ltncl-ok); letter-spacing: 0.04em;
}
.ltncl__done-badge .ltncl__icon { width: 12px; height: 12px; }
.ltncl__brief { font-size: 0.9375rem; line-height: 1.6; }
.ltncl__brief p { margin: 0 0 8px; }
.ltncl__brief p:last-child { margin: 0; }

/* Inline code. Doubled class so a theme's "p code { white-space: nowrap }"
   cannot push a long command off a phone screen. */
.ltncl.ltncl code {
  font-family: var(--ltncl-mono); font-size: 0.875em;
  padding: 1px 5px; border-radius: 5px;
  background: var(--ltncl-surface-alt); border: 1px solid var(--ltncl-border); color: var(--ltncl-text);
  white-space: normal; overflow-wrap: break-word;
}

/* ---- ports & tasks ----------------------------------------------------------------- */
.ltncl__ports { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ltncl__ports li { margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ltncl-border); background: var(--ltncl-surface-alt); font-size: 0.8125rem; }
.ltncl.ltncl .ltncl__ports code { background: none; border: 0; padding: 0; font-weight: 600; }
.ltncl__label { margin: 0; font: 600 0.75rem/1.3 var(--ltncl-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ltncl-muted); }
.ltncl__tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ltncl__task {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start;
  margin: 0; padding: 6px 8px; border-radius: 8px; font-size: 0.9375rem; line-height: 1.5;
}
.ltncl__task-mark { display: inline-flex; padding-top: 2px; color: var(--ltncl-muted); }
.ltncl__task.is-done { background: var(--ltncl-ok-bg); }
.ltncl__task.is-done .ltncl__task-mark { color: var(--ltncl-ok); }
.ltncl__task--opt em { font-style: normal; font-size: 0.8125rem; color: var(--ltncl-muted); }
.ltncl__warn {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--ltncl-bad-bg); color: var(--ltncl-bad); font-size: 0.9375rem; line-height: 1.5;
}
.ltncl__warn[hidden] { display: none; }
.ltncl__warn .ltncl__icon { margin-top: 2px; }
.ltncl__warn span { color: var(--ltncl-text); }

/* ---- the console ---------------------------------------------------------------------- */
.ltncl__console {
  overflow: hidden; border-radius: var(--ltncl-term-radius);
  background: var(--ltncl-term-bg); border: 1px solid var(--ltncl-term-line);
}
.ltncl__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--ltncl-term-bar); border-bottom: 1px solid var(--ltncl-term-line);
}
.ltncl__bar-title { font: 0.75rem/1.3 var(--ltncl-mono); color: var(--ltncl-term-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltncl__bar-tag {
  flex: none; padding: 2px 10px; border: 1px solid var(--ltncl-term-line); border-radius: 999px;
  font: 0.6875rem/1.4 var(--ltncl-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ltncl-term-cmd);
}
.ltncl__out {
  height: var(--ltncl-height); overflow: auto; margin: 0; padding: 12px 14px;
  background: transparent; border: 0; border-radius: 0;
  font: var(--ltncl-term-size)/1.55 var(--ltncl-mono); color: var(--ltncl-term-text); white-space: pre;
  tab-size: 8;
}
.ltncl__o-prompt { color: var(--ltncl-term-dim); }
.ltncl__o-cmd { color: var(--ltncl-term-cmd); }
.ltncl__o-dim { color: var(--ltncl-term-dim); }
.ltncl__o-tip { color: var(--ltncl-term-tip); white-space: pre-wrap; }
.ltncl__form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0;
  padding: 8px 14px; border-top: 1px solid var(--ltncl-term-line); background: var(--ltncl-term-bar);
}
.ltncl__prompt { flex: none; font: 600 0.8125rem/1 var(--ltncl-mono); color: var(--ltncl-term-prompt); white-space: nowrap; }
/* The input keeps at least ~150px: with a long prompt such as
   SW1(config-if-range)# on a phone it drops to its own line instead of
   shrinking to a sliver. */
.ltncl__input {
  flex: 1 1 150px; min-width: 0; min-height: 40px; margin: 0; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--ltncl-term-text); caret-color: var(--ltncl-term-cmd);
  font: 16px/1.4 var(--ltncl-mono);   /* 16px: iOS does not zoom into the field */
}
.ltncl__input:focus { outline: none; border-color: var(--ltncl-term-line); background: var(--ltncl-term-bg); }
.ltncl__input:focus-visible { box-shadow: 0 0 0 2px var(--ltncl-term-cmd); }
@container (min-width: 560px) { .ltncl__input { font-size: 0.875rem; } }

.ltncl__keys { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--ltncl-muted); }
.ltncl__keys kbd { font: 600 0.6875rem/1 var(--ltncl-mono); padding: 2px 5px; border: 1px solid var(--ltncl-border); border-radius: 4px; background: var(--ltncl-surface-alt); color: var(--ltncl-text); }
.ltncl.ltncl .ltncl__keys code { font-size: 0.8125em; padding: 0 4px; }

/* ---- buttons, hint, solution, done ---------------------------------------------------------- */
.ltncl__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ltncl__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0;
  padding: 8px 16px; border: 1px solid var(--ltncl-border); border-radius: 999px;
  background: var(--ltncl-surface); color: var(--ltncl-text);
  font: 600 0.875rem/1.2 inherit; font-family: inherit; text-transform: none; letter-spacing: normal; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.ltncl__btn:hover { border-color: var(--ltncl-accent); color: var(--ltncl-accent); background: var(--ltncl-surface); }
.ltncl__btn:focus-visible { outline: 2px solid var(--ltncl-accent); outline-offset: 2px; }
.ltncl__hint { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ltncl-hint-bg); color: var(--ltncl-text); font-size: 0.9375rem; line-height: 1.55; }
.ltncl__hint[hidden], .ltncl__solution[hidden], .ltncl__done[hidden] { display: none; }
.ltncl__solution { font-size: 0.9375rem; }
.ltncl__solution p { margin: 0 0 6px; }
.ltncl__code {
  margin: 0 0 8px; padding: 12px 14px; border-radius: 10px; border: 0;
  background: var(--ltncl-term-bg); color: var(--ltncl-term-text);
  font: 0.8125rem/1.6 var(--ltncl-mono); overflow-x: auto; white-space: pre;
}
.ltncl__done {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--ltncl-ok-bg); color: var(--ltncl-ok);
}
.ltncl__done .ltncl__icon { margin-top: 3px; }
.ltncl__done p { margin: 0; color: var(--ltncl-text); font-size: 0.9375rem; }
.ltncl__done .ltncl__done-title { color: var(--ltncl-ok); font-weight: 700; }

/* ---- layouts -------------------------------------------------------------------------- */
/* Split: tasks beside the console once the widget itself is wide enough
   (a container query, so it follows the column it sits in, not the screen). */
@container (min-width: 880px) {
  .ltncl--split .ltncl__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
  .ltncl--split .ltncl__work { position: sticky; top: 90px; }
}
.ltncl--minimal { padding: 0; border: 0; background: transparent; }
.ltncl--minimal .ltncl__badge, .ltncl--minimal .ltncl__ports { display: none; }

/* ---- colour schemes ------------------------------------------------------------------------ */
.ltncl--light {
  --ltncl-term-bg: #f8fafc; --ltncl-term-bar: #eef2f7; --ltncl-term-line: #dbe3ee;
  --ltncl-term-text: #0f172a; --ltncl-term-dim: #64748b; --ltncl-term-cmd: #0b7a6e; --ltncl-term-prompt: #0b7a6e; --ltncl-term-tip: #9a5b00;
}
.ltncl--dark {
  --ltncl-text: #e6edf6; --ltncl-muted: #9aa8bc; --ltncl-surface: #0f1522; --ltncl-surface-alt: #151d2c; --ltncl-border: #263247;
  --ltncl-ok: #4ade80; --ltncl-ok-bg: rgba(74, 222, 128, 0.12); --ltncl-bad: #f98a8a; --ltncl-bad-bg: rgba(249, 138, 138, 0.12);
  --ltncl-hint-bg: rgba(240, 180, 84, 0.14); --ltncl-badge-bg: rgba(139, 124, 255, 0.18); --ltncl-badge-text: #b9b0ff;
  --ltncl-accent: #2dd4bf; --ltncl-term-bg: #070a12; --ltncl-term-bar: #0c111c;
}
.ltncl--retro {
  --ltncl-term-bg: #050805; --ltncl-term-bar: #0a120a; --ltncl-term-line: #163016;
  --ltncl-term-text: #7dff9a; --ltncl-term-dim: #3f8f52; --ltncl-term-cmd: #c6ffd2; --ltncl-term-prompt: #33ff66; --ltncl-term-tip: #ffd166;
}
.ltncl--retro .ltncl__out { text-shadow: 0 0 4px rgba(51, 255, 102, 0.35); }

@container (max-width: 520px) {
  .ltncl__out { --ltncl-term-size: 0.72rem; height: min(var(--ltncl-height), 260px); }
}
@media (max-width: 520px) { .ltncl { --ltncl-pad: 16px; } }
@media (prefers-reduced-motion: reduce) { .ltncl__btn { transition: none; } }