/* ===== LoreKeeper — Core UI Styles (fixed BG layer) ===== */

:root{
  --bg: #0b0b0c;
  --fg: #e8e8ea;
  --muted: #a7a7ad;
  --border: #2a2a30;
  --accent: #7c3aed;
  --accent-2: #9365f3;
  --body-font-size: 16px;

  /* user-tintable panel colors (default to bg/border) */
  --panel-base: var(--bg);
  --panel-border: var(--border);

  /* user-tintable highlight color */
  --hl: var(--accent);

  /* background controller */
  --bg-url: none;            /* used for tile mode on #bgLayer */
  --bg-ox: 50%;
  --bg-oy: 50%;
  --bg-dim: 0.20;            /* 0..0.8 */

  /* UI surface */
  --ui-alpha: .55;           /* 0 solid .. 1 fully clear */
  --ui-blur: 0px;            /* 0..10px */
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --fg:#161618; --muted:#54545a; --border:#e6e6eb;
    --accent:#6d28d9; --accent-2:#8b5cf6;
    --panel-base: var(--bg);
    --panel-border: var(--border);
    --hl: var(--accent);
  }
}

/* keep sliders purple */
input[type="range"] {
  accent-color: var(--accent);
}


*{ box-sizing:border-box; }
html{ overflow-y:scroll; background:var(--bg); }
body{
  margin:0; padding:0; color:var(--fg); background:transparent;
    font:var(--body-font-size)/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";

}

/* ===== Single real background layer ===== */
#bgLayer { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: transparent; }
#bgLayer::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--bg-dim)); }
#bgImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-ox) var(--bg-oy); will-change: transform; transform: none; }
#bgLayer, #bgLayer::after, #bgImg { pointer-events: none !important; z-index: -2 !important; }

/* Modes */
.bg-fill   #bgImg{ object-fit:cover; }
.bg-contain #bgImg{ object-fit:contain; }
.bg-fitwidth #bgImg{ width:100vw; height:auto; object-fit:contain; object-position: var(--bg-ox) top; transform: none; }
.bg-tile #bgImg{ display:none; }
.bg-tile{ background-image: var(--bg-url); background-repeat: repeat; background-size: auto; background-position: var(--bg-ox) var(--bg-oy); }

/* ===== Main layout & components ===== */
main{ max-width:860px; margin:32px auto; padding:0 16px; }
h1{ font-size:1.6rem; margin:0 0 12px; }
h3{ font-size:1.05rem; margin:18px 0 8px; color:var(--muted); }

label{ display:inline-block; margin:6px 8px 6px 0; }
select, input[type="text"], input[type="url"], textarea{
  background:transparent; color:var(--fg);
  border:1px solid var(--panel-border);
  border-radius:10px; padding:8px 10px; outline:none;
}
textarea{ width:100%; min-height:140px; resize:vertical; }

/* Roadmap button container — uses panel tint + UI blur/alpha */
.uiBox.roadmapBox {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  background: color-mix(in oklab, var(--panel-base) calc((1 - var(--ui-alpha)) * 100%), transparent);
  backdrop-filter: blur(var(--ui-blur)); -webkit-backdrop-filter: blur(var(--ui-blur));
  border: 1px solid var(--panel-border); transition: background .2s ease;
}
.uiBox.roadmapBox:hover { background: color-mix(in oklab, var(--panel-base) 85%, transparent); }

/* Inputs that obey UI transparency/blur + panel tint */
#text, #urlInput, #docName {
  background: color-mix(in oklab, var(--panel-base) calc((1 - var(--ui-alpha)) * 100%), transparent);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  color: var(--fg);
  border: 1px solid var(--panel-border);
}
#text::placeholder, #urlInput::placeholder, #docName::placeholder {
  color: color-mix(in oklab, var(--muted) 85%, transparent); opacity: .9;
}

button{
  appearance:none; background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff; border:0; border-radius:12px; padding:8px 12px; font-weight:600; cursor:pointer;
  transition:transform .06s ease, filter .15s ease;
}
button:hover{ filter:brightness(1.05); }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.6; cursor:not-allowed; }

button, #customize summary { color: #fff !important; }
.badge, .badge.done, .badge.doing, .badge.todo, .badge.tiny { color: #fff !important; }

.controls-row{ display:flex; align-items:center; gap:12px; margin:8px 0; flex-wrap:wrap; }
.progress-row{ display:flex; align-items:center; gap:12px; margin:8px 0 4px; flex-wrap:wrap; }
#progress{ width:280px; height:14px; appearance:none; border:none; background:var(--border); border-radius:999px; overflow:hidden; }
#progress::-webkit-progress-bar{ background:var(--border); }
#progress::-webkit-progress-value{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px; }
#progress::-moz-progress-bar{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px; }
.time-readout{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.2px; color:var(--muted); }

/* Preview / drop zone — panel tint + UI blur/alpha */
.preview{
  min-height:120px; padding:12px; margin-top:10px;
  border:1px dashed var(--panel-border); border-radius:12px; line-height:1.7;
  max-height:40vh; overflow:auto; overflow-anchor:auto;
  background: color-mix(in oklab, var(--panel-base) calc((1 - var(--ui-alpha))*100%), transparent);
  backdrop-filter: blur(var(--ui-blur)); white-space:pre-wrap;
}
.preview .sent{ padding:1px 2px; border-radius:6px; }

/* === Highlight now uses customizable --hl === */
.preview .sent.a{
  background: color-mix(in oklab, var(--hl) 25%, transparent);
  outline: 1px solid color-mix(in oklab, var(--hl) 45%, transparent);
}

/* ===== CUSTOMIZE panel pinned top-left ===== */
#customize{ position:fixed !important; top:12px; left:12px; z-index:100; margin:0 !important; display:block !important; }
#customize summary{
  display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; font-weight:700; letter-spacing:.2px;
  padding:8px 10px; border:1px solid var(--border); border-radius:10px; cursor:pointer; user-select:none;
}
#customize[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
#customize .customize-body{
  margin-top:6px; width:360px; max-width:min(92vw, 360px);
  max-height:calc(100dvh - 132px);
  /* CHANGED: vertical scroll only; hide horizontal scroll */
  overflow-y:auto;
  overflow-x:hidden;
  background: color-mix(in oklab, var(--panel-base) calc((1 - var(--ui-alpha))*100%), transparent);
  backdrop-filter: blur(var(--ui-blur)); border:1px solid var(--panel-border); border-radius:10px;
  padding:10px 12px; box-shadow:0 3px 10px rgba(0,0,0,.18);
}
#customize .controls-row{ 
  display:grid; 
  grid-template-columns:max-content 1fr; 
  align-items:center; 
  gap:10px; }
#customize input[type="range"]{ width:220px; }
/* Stack label over file inputs in Customize panel */
#customize .controls-row:has(input[type="file"]) {
  grid-template-columns: 1fr;
}

#customize .controls-row:has(input[type="file"]) label {
  grid-column: 1 / -1;
  margin: 0 0 4px 0;
}

#customize .controls-row:has(input[type="file"]) input[type="file"] {
  grid-column: 1 / -1;
  width: 100%;
}


#customize .controls-row.file-stack label {
  margin: 0 0 4px 0;
}

#customize .controls-row.file-stack input[type="file"] {
  width: 100%;
}


/*stack any row that contains a slider (label → full-width slider → value) */
#customize .customize-body > *:has(input[type="range"]) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
#customize .customize-body > *:has(input[type="range"]) label {
  margin: 0 0 6px 0;
}
#customize .customize-body > *:has(input[type="range"]) input[type="range"] {
  width: 100%;
}
#customize .customize-body > *:has(input[type="range"]) [id$="Val"],
#customize .customize-body > *:has(input[type="range"]) .value {
  justify-self: start;
  margin-top: 4px;
}

.bg-fill #bgImg{ object-fit: cover; object-position: var(--bg-ox) var(--bg-oy); transform: none; display:block; }

@media(max-width:560px){
  #customize .customize-body{ max-width:92vw; }
  #customize .controls-row{ grid-template-columns:1fr; }
  #customize input[type="range"]{ width:100%; }
  #progress{ width:100%; }
}

select, button, input[type="color"]{ background-color:var(--bg); color:var(--fg); position:relative; z-index:1; }

/* Badges: rounded, color-coded, and OPAQUE (not affected by panel transparency) */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  line-height:1.2;
  color:#fff !important;           /* keep text readable */
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
}

/* Done = green, Doing = accent purple, Planned = neutral */
.badge.done{
  /* mix with var(--bg) to ensure opacity */
  background: color-mix(in oklab, #22c55e 72%, var(--bg) 28%);
}
.badge.doing{
  background: color-mix(in oklab, var(--accent-2) 78%, var(--bg) 22%);
}
.badge.todo{
  background: color-mix(in oklab, var(--muted) 35%, var(--bg) 65%);
}

/* Tiny badge variant stays neutral but opaque */
.badge.tiny{
  background: color-mix(in oklab, var(--border) 100%, var(--bg) 0%);
  color:#fff !important;
}

#floatingUI{ position:fixed; z-index: 2000; pointer-events:auto; }
#roadmap, #contactPanel{ position:relative; z-index: 2001; }

/* === FIXED: Only one roadmap panel visible === */
#roadmap .roadmap-body{
  background: transparent !important; border: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; padding: 10px !important; border-radius: 0 !important;
}

.uiBox.roadmapBox details{ margin:0; padding:0; }
.uiBox.roadmapBox summary{ margin:0 0 6px 0; padding:0; }
/* --- STOP CLIPPING INSIDE CUSTOMIZE PANEL --- */
#customize .customize-body { 
  padding-right: 14px;                 /* room for scrollbar */
}

/* Let controls shrink to the panel’s inner width */
#customize .customize-body select,
#customize .customize-body button,
#customize .customize-body input[type="text"],
#customize .customize-body input[type="url"] {
  box-sizing: border-box;
  min-width: 0;                        /* allow flex/grid shrinking */
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 12px !important;       /* keep style, just a bit tighter */
  padding-right: 12px !important;
}

/* Keep Save + Reset same size (no jumbo Save) */
#customize .customize-body button {
  flex: 1 1 auto;
}

/* If a button sits in a two-column controls row, let it span cleanly */
#customize .controls-row > button {
  grid-column: 1 / -1;
}