/* RDF Editor: the workbench of layout A in web/prototype/editor-mode.html,
   VS Code's own arrangement (activity bar, side bar, editor, panel, status
   bar) in VS Code's light and dark colours. Each colour token is
   light-dark(light, dark), so it follows `color-scheme`: dark under the
   system preference unless data-theme says light (theme.js and editor.html
   set it), and always when data-theme says dark. */
:root {
  --bg: light-dark(#ffffff, #1e1e1e); --side: light-dark(#f3f3f3, #252526); --activity: light-dark(#2c2c2c, #333333); --act-fg: #858585; --act-on: #ffffff;
  --line: light-dark(#e5e5e5, #3c3c3c); --fg: light-dark(#3b3b3b, #cccccc); --muted: light-dark(#6f6f6f, #9d9d9d); --hover: light-dark(#e8e8e8, #2a2d2e); --select: light-dark(#e4e6f1, #37373d); --focus: light-dark(#0060c0, #0e639c);
  --tab: light-dark(#ececec, #2d2d2d); --tab-on: light-dark(#ffffff, #1e1e1e); --status: #007acc; --status-fg: #ffffff; --input: light-dark(#ffffff, #3c3c3c);
  --err: light-dark(#e51400, #f14c4c); --warn: light-dark(#bf8803, #cca700); --info: light-dark(#1a85ff, #3794ff); --badge: light-dark(#c4c4c4, #4d4d4d); --badge-fg: light-dark(#333333, #ffffff); --menu: light-dark(#ffffff, #252526); --shadow: light-dark(rgba(0, 0, 0, .16), rgba(0, 0, 0, .5));
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
.hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp { flex: 1; }
kbd { font: 11px var(--mono); padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; }

.wb {
  display: grid; height: 100vh;
  grid-template-columns: 48px var(--side-w, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--panel-h, 200px) 22px;
  grid-template-areas: "act side center" "act side panel" "status status status";
}
.wb.panel-closed { grid-template-rows: minmax(0, 1fr) 30px 22px; }
.wb.panel-closed .problems { display: none; }

.activity { grid-area: act; background: var(--activity); display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.act { width: 48px; height: 48px; display: grid; place-items: center; color: var(--act-fg); border-left: 2px solid transparent; text-decoration: none; }
.act .codicon { font-size: 24px; }
.act:hover, .act.on { color: var(--act-on); }
.act.on { border-left-color: var(--act-on); }
.act-sp { flex: 1; }

.side { grid-area: side; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.view-hd { display: flex; align-items: center; gap: 2px; height: 35px; padding: 0 8px 0 20px; }
.view-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fg); }
.ic:hover { background: var(--hover); }
.tree, .outline { flex: 1; overflow: auto; outline: none; padding-bottom: 12px; }
.tree.drop { box-shadow: inset 0 0 0 1px var(--focus); }
.row { display: flex; align-items: center; height: 22px; padding-right: 8px; cursor: pointer; white-space: nowrap; user-select: none; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--select); }
.tree:focus .row.sel { box-shadow: inset 0 0 0 1px var(--focus); }
.row.drop { background: var(--select); }
.row .tw { width: 16px; flex: none; text-align: center; font-size: 14px; }
.row .fi { width: 30px; flex: none; font: 600 8.5px var(--mono); color: var(--muted); text-align: center; }
.row .nm { overflow: hidden; text-overflow: ellipsis; flex: 1; padding-left: 4px; }
.row .dec { font-size: 11px; font-weight: 600; padding-left: 6px; }
.row .dec.e { color: var(--err); }
.row .dec.w { color: var(--warn); }
.row.has-e .nm { color: var(--err); }
.row.has-w .nm { color: var(--warn); }
.tree-input { width: 100%; height: 20px; font: inherit; color: var(--fg); background: var(--input); border: 1px solid var(--focus); outline: none; padding: 0 4px; }

.center { grid-area: center; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.groups { flex: 1; display: flex; min-height: 0; }
.group { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.group + .group { border-left: 1px solid var(--line); }
.group.focused .tab[aria-selected="true"] { box-shadow: inset 0 1px var(--focus); }
.group:not(.focused) .tab[aria-selected="true"] { box-shadow: none; }
.tabs { display: flex; background: var(--side); overflow-x: auto; flex: none; scrollbar-width: thin; }
.tab { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 6px 0 12px; background: var(--tab); border-right: 1px solid var(--line); white-space: nowrap; color: var(--muted); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--tab-on); color: var(--fg); box-shadow: inset 0 1px var(--focus); }
.tab .x { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; visibility: hidden; }
.tab:hover .x, .tab[aria-selected="true"] .x, .tab.dirty .x { visibility: visible; }
.tab .x:hover { background: var(--hover); }
.tab.dirty .x .codicon-close::before { content: "\25CF"; font: 10px system-ui; }
.tab.dirty .x:hover .codicon-close::before { content: "\ea76"; font: 16px codicon; }
.tab .e { color: var(--err); }
.crumbs { height: 22px; padding: 0 16px; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; flex: none; background: var(--bg); }
.editor-host { flex: 1; min-height: 0; }
.welcome { position: absolute; inset: 57px 0 0 0; z-index: 2; display: grid; place-content: center; text-align: center; color: var(--muted); background: var(--bg); }

.panel { grid-area: panel; border-top: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.panel-hd { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; flex: none; }
.ptab { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding: 6px 4px; border-bottom: 1px solid transparent; }
.ptab.on { border-bottom-color: var(--fg); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge); color: var(--badge-fg); font-size: 11px; text-align: center; margin-left: 4px; }
.pfilter { display: flex; gap: 2px; margin-right: 6px; }
.pf { font-size: 12px; padding: 1px 8px; border-radius: 4px; color: var(--muted); }
.pf.on { background: var(--select); color: var(--fg); }
.problems { overflow: auto; flex: 1; font-size: 13px; padding-bottom: 8px; }
.problem-file { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; cursor: pointer; font-weight: 600; }
.problem-file .path { color: var(--muted); font-weight: 400; font-size: 12px; }
.problem { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px 0 34px; cursor: pointer; white-space: nowrap; }
.problem:hover, .problem-file:hover { background: var(--hover); }
.problem .msg { overflow: hidden; text-overflow: ellipsis; }
.problem .src { color: var(--muted); }
.problem .codicon-error { color: var(--err); }
.problem .codicon-warning { color: var(--warn); }
.problem .codicon-info, .problem .codicon-lightbulb { color: var(--info); }
.problems .empty { padding: 6px 12px; color: var(--muted); }

.outline .row { padding-left: 12px; }

.status { grid-area: status; display: flex; align-items: center; background: var(--status); color: var(--status-fg); font-size: 12px; padding: 0 6px; }
.st { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; color: var(--status-fg); white-space: nowrap; }
.st .codicon { font-size: 14px; }
button.st:hover, a.st:hover { background: rgba(255, 255, 255, .12); }
a.st { text-decoration: none; }

.quick { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); background: var(--menu); box-shadow: 0 4px 20px var(--shadow); border-radius: 6px; padding: 6px; z-index: 50; }
.quick input { width: 100%; height: 28px; font: inherit; color: var(--fg); background: var(--input); border: 1px solid var(--focus); outline: none; padding: 0 8px; border-radius: 3px; }
.quick-list { max-height: 50vh; overflow: auto; margin-top: 4px; }
.quick-item { display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.quick-item .dir { color: var(--muted); font-size: 12px; }
.quick-item.on { background: var(--select); }

.menu { position: fixed; min-width: 200px; background: var(--menu); box-shadow: 0 2px 12px var(--shadow); border-radius: 5px; padding: 4px; z-index: 60; }
.menu button { display: flex; width: 100%; justify-content: space-between; gap: 24px; padding: 4px 12px; border-radius: 3px; text-align: left; }
.menu button:hover, .menu button:focus { background: var(--focus); color: #fff; outline: none; }
.menu .k { color: var(--muted); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.dialog { position: fixed; top: 18vh; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); background: var(--menu); color: var(--fg); box-shadow: 0 6px 30px var(--shadow); border-radius: 8px; padding: 18px 20px 14px; z-index: 80; }
.dialog .dq { margin: 0 0 6px; font-weight: 600; }
.dialog .dd { margin: 0 0 16px; color: var(--muted); }
.dialog .db { display: flex; gap: 8px; justify-content: flex-end; }
.dialog button { padding: 4px 14px; border-radius: 4px; border: 1px solid var(--line); }
.dialog button.pri { background: var(--focus); color: #fff; border-color: var(--focus); }
/* The first-visit note on privacy, over a dimmed workbench. */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: light-dark(rgba(0, 0, 0, .35), rgba(0, 0, 0, .6)); padding: 16px; }
.intro-card { width: min(480px, 100%); background: var(--menu); color: var(--fg); box-shadow: 0 8px 40px var(--shadow); border-radius: 10px; padding: 24px 26px 20px; }
.intro-icon { font-size: 28px; color: var(--focus); }
.intro h1 { font-size: 18px; margin: 8px 0 10px; }
.intro p { margin: 0 0 12px; line-height: 1.5; }
.intro-btns { display: flex; gap: 8px; margin-top: 18px; }
.intro-btns button { padding: 6px 16px; border-radius: 4px; border: 1px solid var(--line); }
.intro .intro-foot { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.intro-foot a { color: inherit; }
.intro-foot a:hover { color: var(--fg); }
.intro-btns button.pri { background: var(--focus); color: #fff; border-color: var(--focus); }
.toast { position: fixed; right: 16px; bottom: 34px; max-width: 420px; background: var(--menu); color: var(--fg); box-shadow: 0 2px 12px var(--shadow); border-radius: 6px; padding: 10px 14px; z-index: 70; display: flex; gap: 12px; align-items: center; }
.toast button { color: var(--focus); font-weight: 600; }

/* Desktop-first; on a narrow screen the parts stack, and the toolbox is the
   better page there. */
@media (max-width: 760px) {
  .wb { grid-template-columns: minmax(0, 1fr); grid-template-rows: 30vh minmax(0, 1fr) 160px 22px; grid-template-areas: "side" "center" "panel" "status"; }
  .activity { display: none; }
}