/* LucidLink Lab Design Tokens — Sand Edition */
/* No web-font @import: the loopback admin UI must be fully self-contained and
   make no outbound request on open. The font stack below prefers a locally
   installed Inter and falls back to the native system font (SF on macOS). */

:root {
  --ll-lab-bg:              #F0EFE9;
  --ll-lab-surface:         #ffffff;
  --ll-lab-surface-subtle:  #F0EFE9;
  --ll-lab-border:          #D8D0C0;
  --ll-lab-border-strong:   #C4B9A1;
  --ll-lab-text:            #191610;
  --ll-lab-text-muted:      #64583F;
  --ll-lab-text-subtle:     #917E5A;
  --ll-lab-accent:          #5E53E0;
  --ll-lab-accent-hover:    #4A40C8;
  --ll-lab-accent-subtle:   #E3E0FF;
  --ll-lab-accent-text:     #ffffff;
  --ll-lab-success:         #16a34a;
  --ll-lab-success-subtle:  #dcfce7;
  --ll-lab-warning:         #b45309;
  --ll-lab-warning-subtle:  #fef3c7;
  --ll-lab-danger:          #dc2626;
  --ll-lab-danger-subtle:   #fee2e2;
  --ll-lab-neutral-subtle:  #F0EFE9;
  --ll-lab-font:            'Inter', system-ui, -apple-system, sans-serif;
  --ll-lab-font-mono:       ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --ll-lab-text-xs:11px; --ll-lab-text-sm:13px; --ll-lab-text-base:15px;
  --ll-lab-text-lg:17px; --ll-lab-text-xl:20px; --ll-lab-text-2xl:24px; --ll-lab-text-3xl:30px;
  --ll-lab-space-1:4px; --ll-lab-space-2:8px; --ll-lab-space-3:12px; --ll-lab-space-4:16px;
  --ll-lab-space-5:20px; --ll-lab-space-6:24px; --ll-lab-space-8:32px; --ll-lab-space-10:40px; --ll-lab-space-12:48px;
  --ll-lab-radius-sm:6px; --ll-lab-radius-md:10px; --ll-lab-radius-lg:14px; --ll-lab-radius-full:9999px;
  --ll-lab-transition:150ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ll-lab-font);
  font-size: var(--ll-lab-text-base);
  color: var(--ll-lab-text);
  background: var(--ll-lab-bg);
  min-height: 100vh;
}

/* Disclaimer banner (verbatim from the Lab kit) */
.ll-lab-disclaimer {
  position: sticky; top: 0; z-index: 100; width: 100%; height: 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-shrink: 0; padding-bottom: 4px;
  background:
    linear-gradient(#F8AE55, #F8AE55) top / 100% calc(100% - 4px) no-repeat,
    repeating-linear-gradient(-45deg, #000 0px, #000 4px, #F8AE55 4px, #F8AE55 10px);
}
.ll-lab-disclaimer-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; line-height: 1; letter-spacing: 0; color: #000; white-space: nowrap; margin: 0;
}
.ll-lab-disclaimer-text strong { font-weight: 700; }
.ll-lab-disclaimer-text span   { font-weight: 500; }

/* Header */
.ll-lab-header {
  display: flex; align-items: center; gap: var(--ll-lab-space-3);
  padding: 0 var(--ll-lab-space-6); height: 56px;
  background: var(--ll-lab-surface);
  border-bottom: 1px solid var(--ll-lab-border);
  position: sticky; top: 32px; z-index: 90;
}
.ll-lab-app-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.ll-lab-header-name { font-size: var(--ll-lab-text-base); font-weight: 600; flex: 1; }
.ll-lab-header-state { font-size: var(--ll-lab-text-sm); color: var(--ll-lab-text-muted); }

/* Tabs */
.ll-tabs { display: flex; gap: 2px; padding: 0 var(--ll-lab-space-6);
  background: var(--ll-lab-surface); border-bottom: 1px solid var(--ll-lab-border);
  position: sticky; top: 88px; z-index: 80; overflow-x: auto; }
.ll-tab { padding: 12px 16px; font-size: var(--ll-lab-text-sm); font-weight: 600;
  color: var(--ll-lab-text-muted); cursor: pointer; border: none; background: none;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.ll-tab:hover { color: var(--ll-lab-text); }
.ll-tab.active { color: var(--ll-lab-accent); border-bottom-color: var(--ll-lab-accent); }

/* Layout */
main { max-width: 1000px; margin: 0 auto; padding: var(--ll-lab-space-6); }
h2 { font-size: var(--ll-lab-text-xl); margin: 0 0 var(--ll-lab-space-4); }
h3 { font-size: var(--ll-lab-text-base); margin: 0 0 var(--ll-lab-space-2); }
p.muted { color: var(--ll-lab-text-muted); font-size: var(--ll-lab-text-sm); }

.ll-card { background: var(--ll-lab-surface); border: 1px solid var(--ll-lab-border);
  border-radius: var(--ll-lab-radius-lg); padding: var(--ll-lab-space-6);
  margin-bottom: var(--ll-lab-space-4); }

.ll-row { display: flex; gap: var(--ll-lab-space-3); align-items: center; flex-wrap: wrap; }
.ll-grid { display: grid; gap: var(--ll-lab-space-4); grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }

/* Buttons */
.ll-btn { font-family: var(--ll-lab-font); font-size: var(--ll-lab-text-sm); font-weight: 600;
  border-radius: var(--ll-lab-radius-sm); padding: 7px 16px; cursor: pointer;
  border: 1px solid transparent; transition: var(--ll-lab-transition); }
.ll-btn-primary { background: var(--ll-lab-accent); color: #fff; }
.ll-btn-primary:hover { background: var(--ll-lab-accent-hover); }
.ll-btn-secondary { background: #fff; border-color: var(--ll-lab-border-strong); color: var(--ll-lab-text); }
.ll-btn-secondary:hover { border-color: var(--ll-lab-accent); color: var(--ll-lab-accent); }
.ll-btn-ghost { background: transparent; color: var(--ll-lab-text-muted); }
.ll-btn-ghost:hover { background: var(--ll-lab-surface-subtle); }
.ll-btn-danger { background: var(--ll-lab-danger-subtle); color: var(--ll-lab-danger); }
.ll-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Inputs */
.ll-input, .ll-select { width: 100%; font-family: var(--ll-lab-font); font-size: var(--ll-lab-text-sm);
  border: 1px solid var(--ll-lab-border); border-radius: var(--ll-lab-radius-sm); padding: 7px 12px;
  background: #fff; color: var(--ll-lab-text); }
.ll-input::placeholder { color: var(--ll-lab-text-subtle); }
.ll-input:focus, .ll-select:focus { outline: none; border-color: var(--ll-lab-accent);
  box-shadow: 0 0 0 3px rgba(94,83,224,.12); }
label { display: block; font-size: var(--ll-lab-text-sm); font-weight: 600;
  margin-bottom: var(--ll-lab-space-1); }
.ll-field { margin-bottom: var(--ll-lab-space-3); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--ll-lab-text-sm); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ll-lab-border); }
th { color: var(--ll-lab-text-muted); font-weight: 600; }
tr:hover td { background: var(--ll-lab-surface-subtle); }
.mono { font-family: var(--ll-lab-font-mono); font-size: var(--ll-lab-text-xs); }

/* Status badges */
.ll-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ll-lab-text-xs);
  font-weight: 600; padding: 2px 10px; border-radius: var(--ll-lab-radius-full); }
.ll-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ll-status.ok { color: var(--ll-lab-success); background: var(--ll-lab-success-subtle); }
.ll-status.warn { color: var(--ll-lab-warning); background: var(--ll-lab-warning-subtle); }
.ll-status.err { color: var(--ll-lab-danger); background: var(--ll-lab-danger-subtle); }
.ll-status.neutral { color: var(--ll-lab-text-muted); background: var(--ll-lab-neutral-subtle); }

/* Code + banners */
.ll-code { font-family: var(--ll-lab-font-mono); font-size: var(--ll-lab-text-sm);
  background: var(--ll-lab-surface-subtle); border: 1px solid var(--ll-lab-border);
  border-radius: var(--ll-lab-radius-sm); padding: var(--ll-lab-space-3); overflow-x: auto;
  white-space: pre-wrap; word-break: break-all; }
.ll-note { border-left: 3px solid var(--ll-lab-accent); background: var(--ll-lab-accent-subtle);
  padding: var(--ll-lab-space-3) var(--ll-lab-space-4); border-radius: var(--ll-lab-radius-sm);
  font-size: var(--ll-lab-text-sm); margin-bottom: var(--ll-lab-space-4); }
.ll-note.warn { border-color: var(--ll-lab-warning); background: var(--ll-lab-warning-subtle); }
.ll-flash { padding: var(--ll-lab-space-3) var(--ll-lab-space-4); border-radius: var(--ll-lab-radius-sm);
  margin-bottom: var(--ll-lab-space-4); font-size: var(--ll-lab-text-sm); }
.ll-flash.ok { background: var(--ll-lab-success-subtle); color: var(--ll-lab-success); }
.ll-flash.err { background: var(--ll-lab-danger-subtle); color: var(--ll-lab-danger); }

/* Tree browser */
.ll-tree { list-style: none; padding-left: var(--ll-lab-space-4); margin: 0; }
.ll-tree li { padding: 3px 0; }
.ll-tree .dir { font-weight: 600; cursor: pointer; }
.ll-tree label { display: inline; font-weight: 400; }
.ll-logs { max-height: 60vh; overflow: auto; }
.htmx-indicator { opacity: 0; transition: opacity 200ms; }
.htmx-request .htmx-indicator { opacity: 1; }

/* Inline outline icons (no emoji) */
.ll-ic { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -4px; }
.ll-ic-sm { width: 15px; height: 15px; vertical-align: -3px; }

/* File browser — Volumes → browse the filesystem */
.ll-fb { border: 1px solid var(--ll-lab-border); border-radius: var(--ll-lab-radius-md);
  overflow: hidden; background: var(--ll-lab-surface); margin-top: var(--ll-lab-space-2); }
.ll-fb-bar { display: flex; align-items: center; gap: var(--ll-lab-space-3);
  padding: var(--ll-lab-space-2) var(--ll-lab-space-3);
  background: var(--ll-lab-surface-subtle); border-bottom: 1px solid var(--ll-lab-border); }
.ll-fb-crumbs { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow-x: auto; }
.ll-fb-crumb { display: inline-flex; align-items: center; gap: 5px; border: none; background: none;
  cursor: pointer; font: inherit; font-size: var(--ll-lab-text-sm); font-weight: 600;
  color: var(--ll-lab-text-muted); padding: 4px 8px; border-radius: var(--ll-lab-radius-sm); white-space: nowrap; }
.ll-fb-crumb:hover { color: var(--ll-lab-accent); background: var(--ll-lab-accent-subtle); }
.ll-fb-crumbs .ll-fb-crumb:last-of-type { color: var(--ll-lab-text); }
.ll-fb-sep { color: var(--ll-lab-text-subtle); }
.ll-fb-use { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ll-fb-shortcuts { display: flex; align-items: center; gap: var(--ll-lab-space-2);
  padding: var(--ll-lab-space-2) var(--ll-lab-space-3); border-bottom: 1px solid var(--ll-lab-border); }
.ll-fb-shortcuts-label { font-size: var(--ll-lab-text-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ll-lab-text-subtle); }
.ll-fb-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit;
  font-size: var(--ll-lab-text-sm); font-weight: 600; color: var(--ll-lab-text);
  background: var(--ll-lab-surface); border: 1px solid var(--ll-lab-border-strong);
  border-radius: var(--ll-lab-radius-full); padding: 4px 12px; }
.ll-fb-chip:hover { border-color: var(--ll-lab-accent); color: var(--ll-lab-accent); }
.ll-fb-chip .ll-ic { width: 15px; height: 15px; }

.ll-fb-list { list-style: none; margin: 0; padding: var(--ll-lab-space-2); max-height: 340px; overflow-y: auto; }
.ll-fb-row { display: flex; align-items: center; gap: var(--ll-lab-space-3); width: 100%;
  border: none; background: none; cursor: pointer; font: inherit; text-align: left;
  padding: 9px var(--ll-lab-space-3); border-radius: var(--ll-lab-radius-sm); color: var(--ll-lab-text); }
.ll-fb-row:hover { background: var(--ll-lab-accent-subtle); color: var(--ll-lab-accent); }
.ll-fb-row .ll-ic { color: var(--ll-lab-text-subtle); }
.ll-fb-row:hover .ll-ic { color: var(--ll-lab-accent); }
.ll-fb-name { flex: 1; font-size: var(--ll-lab-text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-fb-row .ll-ic-sm { opacity: 0; transition: opacity var(--ll-lab-transition); }
.ll-fb-row:hover .ll-ic-sm { opacity: 1; }
.ll-fb-up { color: var(--ll-lab-text-muted); font-weight: 600; }
.ll-fb-empty { padding: var(--ll-lab-space-4); font-size: var(--ll-lab-text-sm); color: var(--ll-lab-text-muted); }
.ll-fb-err { color: var(--ll-lab-danger); }
.ll-fb-err .muted { display: block; margin-top: 4px; color: var(--ll-lab-text-muted); }