/* shane-consulting.com holding page: a dark code editor. No outside fonts, files or scripts.
   Three widths: wide (over 1000 px) the full editor; medium (601-1000) the explorer becomes a
   drawer and the short-lined copy of the code shows; phones (600 and under) that copy too,
   bigger touch targets, and the page scrolls. A phone on its side scrolls the same way. */
:root {
  --title: #1f1f1f;
  --activity: #181818;
  --sidebar: #181818;
  --editor: #1f1f1f;
  --tab-idle: #181818;
  --line: #2b2b2b;
  --text: #cccccc;
  --dim: #858585;
  --selected: #37373d;
  --accent: #0078d4;
  --status: #0078d4;

  /* syntax */
  --kw: #c586c0;      /* from, import */
  --kw2: #569cd6;     /* class, True */
  --fn: #dcdcaa;      /* decorators, functions */
  --cls: #4ec9b0;     /* classes and types */
  --var: #9cdcfe;     /* names */
  --str: #ce9178;     /* strings */
  --com: #6a9955;     /* comments */

  --mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --title-h: 32px;
  --status-h: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--editor); color: var(--text); font: 13px/1.5 var(--ui);
  overflow-x: hidden; -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.window {
  display: grid; grid-template-rows: var(--title-h) 1fr var(--status-h);
  height: 100vh; height: 100dvh;
}
.drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* title bar */
.titlebar {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; background: var(--title); border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px;
}
.titlebar .logo { flex: none; border-radius: 3px; }
.titlebar .title {
  position: absolute; left: 50%; transform: translateX(-50%); color: var(--text); white-space: nowrap;
}
.menu-button { display: none; }

/* sign in: to the console, which asks for the Google sign-in first */
.signin {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 4px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.signin svg { width: 14px; height: 14px; fill: #fff; }
.signin:hover { background: #026ec1; }
.signin:focus-visible, .account:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.workbench { display: grid; grid-template-columns: 48px 240px 1fr; min-height: 0; }

/* activity bar */
.activitybar {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding-top: 12px; min-height: 0; background: var(--activity); border-right: 1px solid var(--line);
}
.activity-explorer { display: flex; cursor: pointer; }
.icon { width: 24px; height: 24px; fill: var(--dim); }
.icon.active { fill: var(--text); }
.account { margin-top: auto; margin-bottom: 12px; display: flex; }
.account:hover .icon, .account:focus-visible .icon { fill: var(--text); }

/* explorer */
.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); overflow: hidden; }
.sidebar-title { padding: 10px 20px; font-size: 11px; letter-spacing: 0.04em; color: var(--dim); }
.folder { padding: 2px 8px; font-size: 11px; font-weight: 700; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree li { padding: 1px 8px 1px 22px; white-space: nowrap; }
.tree .file { padding-left: 34px; }
.tree .selected { background: var(--selected); outline: 1px solid var(--accent); outline-offset: -1px; }
.tree .file::before {
  display: inline-block; width: 16px; margin-right: 4px; font: 700 10px var(--mono);
}
.tree .py::before { content: "py"; color: var(--kw2); }
.tree .md::before { content: "M\2193"; color: var(--var); }
.tree .txt::before { content: "\2261"; color: var(--dim); font-size: 13px; }
.scrim { display: none; }

/* editor */
.editor { display: grid; grid-template-rows: 35px 22px 1fr auto; min-width: 0; min-height: 0; background: var(--editor); }

.tabs {
  display: flex; background: var(--tab-idle); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  color: var(--dim); border-right: 1px solid var(--line); white-space: nowrap;
}
.tab.active { background: var(--editor); color: var(--text); box-shadow: inset 0 1px 0 var(--accent); margin-bottom: -1px; }
.dot { width: 8px; height: 8px; border-radius: 2px; }
.dot.py { background: var(--kw2); }
.dot.md { background: var(--var); }
.dot.txt { background: var(--dim); }

.breadcrumbs {
  padding: 2px 16px; color: var(--dim); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumbs .c { color: var(--cls); }

.code {
  margin: 0; padding: 8px 0 24px; overflow: auto;
  font: 15px/1.6 var(--mono); list-style: none; counter-reset: line;
}
.code.narrow { display: none; }
.code li {
  counter-increment: line; position: relative;
  min-height: 1.6em; padding: 0 24px 0 72px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.code li::before {
  content: counter(line); position: absolute; left: 0; width: 48px;
  text-align: right; color: var(--dim);
}
.code li:has(.cursor) { background: #ffffff0a; }
.code li:has(.cursor)::before { color: var(--text); }

.k { color: var(--kw); }
.k2 { color: var(--kw2); }
.f { color: var(--fn); }
.c { color: var(--cls); }
.v { color: var(--var); }
.s { color: var(--str); }
.m { color: var(--com); }

.cursor {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 1px;
  vertical-align: text-bottom; background: #aeafad;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .sidebar { transition: none !important; }
}

/* terminal */
.panel { border-top: 1px solid var(--line); background: var(--editor); }
.panel-tabs { display: flex; gap: 20px; padding: 6px 20px 0; font-size: 11px; color: var(--dim); }
.panel-tabs .on { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.terminal {
  margin: 0; padding: 10px 20px 16px; font: 13px/1.6 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.prompt { color: #23d18b; }
.path { color: #3b8eea; }

/* status bar */
.statusbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 0 10px; background: var(--status); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden;
}
.statusbar svg { width: 14px; height: 14px; fill: #fff; vertical-align: -2px; margin-right: 4px; }

/* medium: the explorer slides in over the editor from the activity bar */
@media (max-width: 1000px) {
  .workbench { grid-template-columns: 48px 1fr; position: relative; }
  .sidebar {
    position: fixed; z-index: 20; top: var(--title-h); bottom: var(--status-h); left: 48px;
    width: 260px; max-width: 80vw; transform: translateX(-120%); transition: transform 0.2s ease;
    box-shadow: 4px 0 16px #0008;
  }
  .drawer-toggle:checked ~ .workbench .sidebar { transform: none; }
  .drawer-toggle:checked ~ .workbench .scrim {
    display: block; position: fixed; z-index: 10; inset: 0; background: #0006;
  }
  .titlebar .menu { display: none; }
  .code.wide { display: none; }
  .code.narrow { display: block; }
}

/* short screens (a phone on its side): the page scrolls instead of the editor */
@media (max-width: 1000px) and (max-height: 500px) {
  .window { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; }
  .titlebar { position: sticky; top: 0; z-index: 30; height: var(--title-h); }
  .menu-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; }
  .menu-button svg { width: 20px; height: 20px; fill: var(--text); }
  .workbench { display: block; flex: 1; }
  .activitybar { display: none; }
  .sidebar { left: 0; }
  .editor { display: block; }
  .tabs { height: 35px; }
  .code.narrow { overflow: visible; }
  .statusbar { position: sticky; bottom: 0; z-index: 30; height: var(--status-h); }
}

/* phones: their own code, bigger touch targets, title and status bars stay put, the page scrolls */
@media (max-width: 600px) {
  :root { --title-h: calc(48px + env(safe-area-inset-top)); --status-h: calc(24px + env(safe-area-inset-bottom)); }
  .window { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; }
  .titlebar {
    position: sticky; top: 0; z-index: 30; height: var(--title-h);
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
    gap: 8px;
  }
  .menu-button {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; cursor: pointer;
  }
  .menu-button svg { width: 22px; height: 22px; fill: var(--text); }
  .titlebar .logo, .title-project { display: none; }
  .titlebar .title { position: static; transform: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .signin { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .signin svg { width: 16px; height: 16px; }

  .workbench { display: block; flex: 1; }
  .activitybar { display: none; }
  .sidebar { left: 0; width: 280px; font-size: 14px; padding-left: env(safe-area-inset-left); }
  .tree li { padding-top: 6px; padding-bottom: 6px; }

  .editor { display: block; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .tabs { height: 40px; }
  .tab { font-size: 13px; }
  .breadcrumbs { padding: 6px 12px; }

  .code.wide { display: none; }
  .code.narrow { display: block; font-size: 14px; overflow: visible; padding-bottom: 20px; }
  .code li { padding: 0 10px 0 38px; overflow-wrap: normal; }
  .code li::before { width: 26px; font-size: 12px; }

  .panel-tabs { padding: 8px 12px 0; }
  .terminal { padding: 10px 12px 20px; }
  .path-long { display: none; }

  .statusbar {
    position: sticky; bottom: 0; z-index: 30; height: var(--status-h);
    padding: 0 max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left));
  }
  .statusbar .right { display: none; }
}

/* the smallest phones: a touch smaller type so no line wraps */
@media (max-width: 360px) {
  .code.narrow { font-size: 12.5px; }
  .terminal { font-size: 12px; }
  .signin { padding: 0 10px; }
}