/*  
📄  LimeDOM.css — Stylesheet for LimeDOM.js
🔧  Version:    0.5.3.18 (Stable)
📅  Updated:    2025-09-18
👤  Author:     Mantas Adomavičius
🌐  Web:        https://LimeDOM.eu
🌐  Repo:       https://github.com/adomm420/LimeDOM
*/
/*
🧠  Summary
  Components are fully variable-driven (no inline rgba() or raw #000/#fff in rules).
  New tokens: --on-accent (text on accent surfaces) and --on-overlay (text on overlays).
*/

:root{
  /* Core palette (dark default) */
  --bg: #121212;
  --text: #eceff1;
  --bg2:  var(--text);
  --text2: var(--bg);
  --card: #1e1e1e;
  --card2: #282828;
  --accent: #1db954;

  /* “On” colors */
  --on-accent: #000000;   /* text/icons placed on --accent */
  --on-overlay: #ffffff;  /* text/icons over overlay backgrounds */

  /* Base swatches for derived alphas */
  --base-black: #000000;
  --base-white: #ffffff;
  --danger: #dc3545;

  /* Buttons / interactive */
  --button-bg: #282828;
  --button-bg-hover: #393939;
  --scheme-button-bg: #ffffff;
  --scheme-button-bg-hover: #999999;

  /* Lines / rims / outlines */
  --border: rgb(255 255 255 / .2);
  --inset-shadow: var(--border);
  --hover-outline: var(--border);
  --hover-inset: var(--border);

  /* Charts */
  --chart-bg: var(--card);
  --chart-axis: var(--card);
  --chart-text: var(--text);

  /* Tables */
  --table-td-bg: #222;     /* dark cell */
  --table-th-bg: #262626;  /* dark header */
  --table-border: #2b2b2b;

  /* File picker */
  --drop-bg: var(--card);
  --drop-border: var(--hover-outline);
  --drop-hover-bg: var(--card);
  --drop-hover-inset: var(--hover-inset);
  --drop-drag-bg: #1a1a1a;
  --drop-drag-inset: rgb(from var(--accent) r g b / .25);

  /* Linkcard / button hover (shared) */
  --surface-hover: var(--button-bg-hover);
  --thumb-bg: #0f0f0f;

  /* Skip link focus */
  --skip-focus-bg: var(--base-white);
  --skip-focus-text: var(--base-black);

  /* Shadows / overlays / glows (derived) */
  --overlay-bg: rgb(from var(--base-black) r g b / .85);
  --shadow-black-60: rgb(from var(--base-black) r g b / .60);
  --shadow-black-05: rgb(from var(--base-black) r g b / .05);
  --accent-a-35: rgb(from var(--accent) r g b / .35);
  --accent-a-12: rgb(from var(--accent) r g b / .12);
  --accent-a-60: rgb(from var(--accent) r g b / .60);
  --accent-a-25: rgb(from var(--accent) r g b / .25);

  /* Misc */
  --progress-bg: #1a1a1a;
  --radius: 12px;
  --gap: 12px;
  --font: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --card-minh: 50px;
  --cols: 3;
  --muted: #8a949c;
  --muted-2: #6f7a82;
  --ld-pad-x: 14px;
}

/* Light theme uses ONLY variable overrides */
[data-theme="light"] {
  --bg: #eceff1;
  --text: #121416;
  --bg2:  var(--text);
  --text2: var(--bg);
  --card: #f7f9fb;
  --card2: #e5eaee;
  --accent: #1db954;

  /* “On” colors keep same semantics */
  --on-accent: #000000;
  --on-overlay: #ffffff;

  --button-bg: #e5eaee;
  --button-bg-hover: #d9e1e7;
  --scheme-button-bg: #111111;
  --scheme-button-bg-hover: #444444;

  --border: rgb(0 0 0 / .2);
  --inset-shadow: var(--border);
  --hover-outline: var(--border);
  --hover-inset: var(--border);

  --chart-bg: var(--card);
  --chart-axis: var(--card);
  --chart-text: var(--text);

  --table-td-bg: #f1f5f8;
  --table-th-bg: #e7edf2;
  --table-border: #d5dee6;

  --drop-bg: var(--card);
  --drop-border: #b9c6cf;
  --drop-hover-bg: var(--card);
  --drop-hover-inset: var(--hover-inset);
  --drop-drag-bg: #e9f2ec;
  --drop-drag-inset: rgb(from var(--accent) r g b / .22);

  --surface-hover: #dfe6eb;
  --thumb-bg: #eef2f5;

  --skip-focus-bg: var(--base-black);
  --skip-focus-text: var(--base-white);

  --overlay-bg: rgb(from var(--base-black) r g b / .85);
  --shadow-black-60: rgb(from var(--base-black) r g b / .60);
  --shadow-black-05: rgb(from var(--base-black) r g b / .05);

  --progress-bg: #d8e1e8;

  --radius: 12px;
  --gap: 12px;
  --font: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --card-minh: 50px;
  --cols: 3;

  --muted: #8a949c;
  --muted-2: #6f7a82;
  --ld-pad-x: 14px;
}

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

/* Skip link (theme-aware via variables) */
a.ld-skip {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
a.ld-skip:focus {
  left: 8px !important;
  top: 8px;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  background: var(--skip-focus-bg);
  color: var(--skip-focus-text);
  border-radius: .5rem;
  z-index: 9999;
  clip: auto;
  clip-path: none;
  text-decoration: none;
}

.ld-wrap{max-width:1200px;margin:0 auto;padding:20px}
.ld-header{
  background:var(--accent);
  color:var(--on-accent);
  border-radius:var(--radius);
  padding:24px 20px;
  margin:20px 0;
  box-shadow:0 0 0 1px var(--inset-shadow) inset;
}
.ld-header h1{margin:0 0 6px 0;font-size:clamp(22px,4vw,40px);line-height:1.1}
.ld-header p{margin:0;opacity:.8}

/* Grid / Columns layouts */
.ld-stack[data-layout="grid"]{
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gap);
  align-items:start
}
.ld-stack[data-layout="grid"] .ld-toprow{grid-column:1/-1}

.ld-stack[data-layout="columns"]{
  column-count:var(--cols);
  column-gap:var(--gap)
}
.ld-stack[data-layout="columns"]>.ld-card,
.ld-stack[data-layout="columns"]>.ld-toprow{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 var(--gap) 0;
  display:block;
  width:100%
}
.ld-stack[data-layout="columns"] .ld-toprow{column-span:all;-webkit-column-span:all}

@media (max-width:980px){:root{--cols:2}}
@media (max-width:640px){:root{--cols:1}}

/* Cards */
.ld-card{
  background:var(--card);
  border: 0;
  border-radius:var(--radius);
  padding:14px 16px;
  min-height:var(--card-minh);
  box-shadow:0 0 0 1px var(--inset-shadow) inset;
}
.ld-card .ld-card{
  border: 0;
  box-shadow:0 0 0 0 inset;
  padding:0;
}
.ld-sechead{margin:0 0 8px 0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-secbody{display:grid;gap:10px}

/* Copy buttons */
.ld-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  cursor:pointer;
  font-size:14px;
  padding:12px var(--ld-pad-x);
  border-radius:10px;
  background:var(--button-bg);
  color:var(--text);
  transition:background .5s,transform .5s, box-shadow .15s;
  width:100%;
  box-shadow: 0 0 0 1px var(--hover-inset) inset; /* subtle rim in all themes */
}
.ld-btn:hover{background:var(--button-bg-hover); box-shadow: 0 0 0 1px var(--hover-outline) inset;}
.ld-btn:active{transform:scale(.996)}
.ld-swatch{width:18px;height:18px;border-radius:4px;box-shadow:0 0 0 1px var(--inset-shadow) inset;flex:0 0 18px}
.ld-mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.ld-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 64px)}
.ld-pulse{animation:ldPulse .9s ease}
@keyframes ldPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.ld-status{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  padding:2px 8px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:12px;
  line-height:1.2;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s
}
.ld-status.show{opacity:.95}

/* Webpage link cards */
.ld-linkcard{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  min-width:0;
  background: var(--card2);
  border-radius:10px;
  padding:12px var(--ld-pad-x);
  transition: background .2s, box-shadow .15s;
  box-shadow: 0 0 0 1px var(--hover-inset) inset;
}
.ld-linkcard:hover{ background: var(--surface-hover); box-shadow: 0 0 0 1px var(--hover-outline) inset; }
.ld-thumb{
  width:56px;
  height:56px;
  border-radius:10px;
  flex:0 0 56px;
  object-fit:cover;
  background: var(--thumb-bg);
  box-shadow:0 0 0 1px var(--inset-shadow) inset;
}
.ld-meta{display:grid;gap:4px;min-width:0}
.ld-title{font-weight:700;font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ld-desc{opacity:.8;font-size:10px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:520px){.ld-desc{display:none}}
.ld-host{opacity:.7;font-size:9px;  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }

/* Notes & quotes */
.ld-note{font-size:12px;line-height:1.45;opacity:.92}
.ld-quote{font-size:12px;line-height:1.45;font-style:italic;border-left:3px solid var(--border);padding-left:12px}
.ld-cite{display:block;margin-top:6px;opacity:.7;font-size:12px}

/* Images */
.ld-thumbimg{
  width:100%;
  max-height:200px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s
}
.ld-thumbimg:hover{
  transform:scale(1.02);
  box-shadow: 0 0 0 1px var(--accent-a-35), 0 0 18px var(--accent-a-12);
}
.ld-thumbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){ .ld-thumbgrid{grid-template-columns:1fr} }

/* Image overlay */
.ld-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s
}
.ld-overlay.show{opacity:1;pointer-events:auto}
.ld-overlay img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 0 20px var(--shadow-black-60)}
.ld-close{position:absolute;top:18px;right:26px;font-size:32px;color:var(--on-overlay);cursor:pointer;font-weight:bold;line-height:1}

/* Table */
.ld-table{width:100%;border-collapse:separate;border-spacing:0 6px}
.ld-table th,.ld-table td{
  padding:10px 12px;
  text-align:left;
  background: var(--table-td-bg);
  border:1px solid var(--table-border);
  color: var(--text);
}
.ld-table th{background: var(--table-th-bg);font-weight:700}
.ld-table tr:first-child th{border-top-left-radius:8px;border-top-right-radius:8px}
.ld-table tr:last-child td{border-bottom-left-radius:8px;border-bottom-right-radius:8px}

/* Chart */
.ld-charttitle{font-size:14px;opacity:.9;margin:2px 2px 0 2px}
.ld-canvas{width:100%;height:180px;display:block}

/* File picker */
.ld-drop{
  background: var(--drop-bg);
  border: 1px dashed var(--drop-border);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  box-shadow: none;
}
.ld-drop h4{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
}
.ld-drop small{
  display: block;
  opacity: .7;
  font-size: 12px;
}
.ld-drop:hover{
  border-color: var(--hover-outline);
  box-shadow: 0 0 0 2px var(--drop-hover-inset) inset;
  background: var(--drop-hover-bg);
}
.ld-drop.drag{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--drop-drag-inset) inset;
  background: var(--drop-drag-bg);
}

/* Full-bleed single image */
.ld-singleimg { margin: 0; cursor: pointer; }
.ld-singleimg-img {
  display:block;
  width:100%;
  height:auto;
  border-radius: 12px;
  transition: box-shadow .2s;
}
.ld-singleimg:hover img {
  box-shadow: 0 0 0 2px var(--accent-a-60),
              0 0 22px var(--accent-a-25);
}

/* Countdown */
.ld-countdown{ display:grid; gap:12px; }
.ld-countdown .ld-sub{ font-size:14px; opacity:.9; }
.ld-countwrap{ display:grid; justify-items:center; }
.ld-countrow{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.ld-countgrid{ display:grid; grid-auto-flow:column; gap:10px; }
.ld-seg{ background: var(--card2); border: 0; box-shadow: 0 0 0 1px var(--hover-inset) inset; border-radius: 12px; padding: 10px 14px; min-width: 78px; text-align:center; }
.ld-val{ font-size:28px; font-weight:800; line-height:1.1; }
.ld-unit{ font-size:12px; text-transform:uppercase; opacity:.75; }
.ld-progress{ width:100%; height:10px; background: var(--progress-bg); border-radius:999px; overflow:hidden; }
.ld-progress>span{ display:block; height:100%; width:calc(var(--p) * 100%); background:var(--accent); transition:width .25s linear; }
.ld-urgent .ld-seg{ animation:ldPulseDanger .8s infinite alternate; }
@keyframes ldPulseDanger{ from{ box-shadow:0 0 0px var(--danger) } to{ box-shadow:0 0 12px var(--danger) } }

/* Cursor consistency */
.ld-thumbimg, .ld-linkcard, .ld-drop, .ld-btn { cursor: pointer; }

/* === Navbar === */
.ld-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 2px 8px var(--shadow-black-05);
}
.ld-nav-left, .ld-nav-right { display: inline-flex; align-items: center; gap: 8px; }
.ld-nav-spacer { flex: 1; }
.ld-nav-title { font-weight: 600; letter-spacing: .2px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:0;
  border-radius:10px;
  background:var(--button-bg);
  color:var(--text);
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 0 0 1px var(--hover-inset) inset;
  transition: background .2s, box-shadow .15s;
}
.btn:hover{ background:var(--button-bg-hover); box-shadow: 0 0 0 1px var(--hover-outline) inset; }
.btn:active{ transform:scale(1.0); }
.btn:focus-visible{ box-shadow: 0 0 0 2px var(--hover-outline) inset; }

.btn-invert{
  background:var(--scheme-button-bg);
  color:var(--text2);
  border:0;
  box-shadow: 0 0 0 1px var(--hover-inset) inset;
}
.btn-invert:hover{
  background:var(--scheme-button-bg-hover);
  color:var(--text2);
  border:0;
  box-shadow: 0 0 0 1px var(--hover-outline) inset;
}

.icon{ width:16px; height:16px; display:inline-block; }
.icon svg{ width:100%; height:100%; display:block; }

.ld-sronly{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  width:1px;
  overflow:hidden;
  white-space:nowrap
}