.app-scroll {
  max-width:760px;
  padding:28px 32px 42px
}

.app-eyebrow {
  margin-bottom:11px;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.04em
}

.app-h1 {
  margin-bottom:18px;
  color:var(--text);
  font-family:var(--sans);
  font-size:23px;
  font-weight:650;
  letter-spacing:-.025em
}

.app-p {
  max-width:65ch;
  margin-bottom:15px;
  color:var(--text-dim);
  font-size:14px;
  font-weight:400;
  line-height:1.75
}

.app-p strong {
  color:var(--text);
  font-weight:600
}

.app-p:last-child {
  margin-bottom:0
}

.goal-list {
  margin-top:25px;
  border-top:1px solid var(--line)
}

.goal-row {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}

.goal-tag {
  padding-top:2px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700
}

.goal-text {
  color:var(--text-dim);
  font-size:13px;
  line-height:1.65
}

.goal-text strong {
  color:var(--text);
  font-weight:600
}

.fx-toolbar {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px
}

.fx-path {
  color:var(--text-dim)
}

.fx-list {
  display:flex;
  flex-direction:column
}

.fx-row {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border:none;
  border-bottom:1px solid var(--line);
  background:none;
  text-align:left;
  cursor:pointer
}

.fx-row:hover,.fx-row:focus-visible {
  background:var(--surface-2)
}

.fx-name {
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  font-weight:550
}

.fx-desc {
  margin-top:2px;
  color:var(--text-faint);
  font-size:11px
}

.fx-meta {
  margin-left:auto;
  flex-shrink:0;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:9px
}

.case-badge {
  display:inline-block;
  margin-bottom:16px;
  padding:4px 8px;
  border:1px solid var(--line-strong);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase
}

.case-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:18px 0 22px
}

.case-tag {
  padding:5px 8px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9px
}

.case-links {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:26px
}

.case-btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer
}

.case-btn:hover {
  background:var(--surface-3)
}

.case-btn.primary {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-ink)
}

.case-btn.primary:hover {
  background:var(--accent-hover)
}

.case-section-label {
  margin:28px 0 11px;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase
}

.case-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  list-style:none
}

.case-list li {
  display:flex;
  gap:10px;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.65
}

.case-list li::before {
  content:"•";
  flex-shrink:0;
  color:var(--text-faint)
}

.case-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  margin-top:4px;
  border:1px solid var(--line);
  background:var(--line);
  gap:1px
}

.case-cell {
  padding:14px 15px;
  background:var(--surface);
  color:var(--text-dim);
  font-size:12px;
  line-height:1.55
}

.case-cell strong {
  display:block;
  margin-bottom:5px;
  color:var(--text);
  font-family:var(--sans);
  font-size:11px;
  font-weight:600
}

.case-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:24px;
  border:1px solid var(--line)
}

.case-stat {
  padding:14px 8px;
  border-right:1px solid var(--line);
  text-align:center
}

.case-stat:last-child {
  border-right:none
}

.case-stat .v {
  margin-bottom:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700
}

.case-stat .l {
  color:var(--text-faint);
  font-family:var(--sans);
  font-size:9px
}

.json-view {
  padding:23px 26px 36px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.85;
  white-space:pre-wrap;
  word-break:break-word
}

.tok-key {
  color:var(--blue)
}

.tok-str {
  color:var(--green)
}

.tok-punc {
  color:var(--text-faint)
}

.tok-note {
  color:var(--text-faint);
  font-style:italic
}

.contact-lines {
  margin-top:6px;
  border-top:1px solid var(--line)
}

.contact-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 2px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  text-decoration:none
}

.contact-row:hover {
  color:var(--accent)
}

.c-label {
  color:var(--text-faint);
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase
}

.c-value {
  color:inherit;
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
  word-break:break-word
}

.contact-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px
}

#copy-status {
  min-height:14px;
  margin-top:10px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10px
}

.pdf-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px
}

.pdf-frame-wrap {
  height:calc(100% - 41px);
  background:#252629
}

.pdf-frame-wrap iframe,.pdf-frame-wrap embed {
  width:100%;
  height:100%;
  border:none
}

.pdf-fallback {
  padding:40px 26px;
  text-align:center
}

.term {
  height:100%;
  display:flex;
  flex-direction:column;
  background:#0d0e10;
  font-family:var(--mono);
  font-size:12px
}

.term-out {
  flex:1;
  overflow:auto;
  padding:17px 18px;
  color:#d3d4d6;
  line-height:1.75;
  -webkit-overflow-scrolling:touch
}

.term-line {
  white-space:pre-wrap;
  word-break:break-word
}

.term-line.cmd {
  color:#f5f5f5
}

.term-line.cmd::before {
  content:"tonie@tcos:~$ ";
  color:var(--accent)
}

.term-line.err {
  color:var(--danger)
}

.term-line.accent {
  color:var(--accent)
}

.term-inputrow {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-top:1px solid #26282c;
  background:#111214
}

.term-prompt {
  flex-shrink:0;
  color:var(--accent)
}

.term-input {
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-family:var(--mono);
  font-size:12px
}

.info-rows {
  display:flex;
  flex-direction:column
}

.info-row {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}

.info-row .k {
  color:var(--text-faint)
}

.info-row .v {
  color:var(--text);
  font-family:var(--mono);
  text-align:right
}

.pdf-col {
  height:100%;
  display:flex;
  flex-direction:column
}

.pdf-dl-btn {
  margin-left:auto;
  padding:6px 12px
}

.pdf-object {
  width:100%;
  height:100%
}

.app-scroll-wide {
  max-width:none
}

.lab-note {
  padding:16px 18px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-faint)
}

.fx-row-flush {
  border-left:none;
  border-right:none
}

.dv-meter {
  margin-top:10px
}

/* ============================================================
   FILE EXPLORER
   ============================================================ */

.fx-ex {
  position:relative;

  display:flex;
  flex-direction:column;

  height:100%
}

.fx-ex-bar {
  display:flex;
  align-items:center;

  gap:4px;

  padding:8px 10px;

  background:var(--surface-2);

  border-bottom:1px solid var(--line)
}

.fx-ex-nav {
  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border:none;
  border-radius:3px;

  background:none;
  color:var(--text-dim);

  font-size:15px;

  cursor:pointer
}

.fx-ex-nav:hover:not(:disabled) {
  background:var(--surface-3);
  color:var(--text)
}

.fx-ex-nav:disabled {
  opacity:.3;

  cursor:default
}

.fx-ex-crumbs {
  flex:1;

  display:flex;
  align-items:center;

  gap:2px;

  min-width:0;

  overflow-x:auto;

  padding:4px 6px;

  background:var(--surface);

  border:1px solid var(--line);
  border-radius:3px;

  scrollbar-width:none
}

.fx-ex-crumbs::-webkit-scrollbar {
  display:none
}

.fx-crumb {
  flex-shrink:0;

  padding:3px 7px;

  border:none;
  border-radius:2px;

  background:none;
  color:var(--text-dim);

  font-size:12px;

  cursor:pointer;

  white-space:nowrap
}

.fx-crumb:hover {
  background:var(--surface-3);
  color:var(--text)
}

.fx-crumb.cur {
  color:var(--text);

  font-weight:600
}

.fx-crumb-sep {
  flex-shrink:0;

  color:var(--text-faint);

  font-size:11px
}

.fx-ex-tools {
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  padding:8px 10px;

  border-bottom:1px solid var(--line)
}

.fx-ex-search {
  flex:1;

  min-width:0;

  padding:7px 10px;

  background:var(--surface-2);

  border:1px solid var(--line);
  border-radius:3px;

  color:var(--text);

  font-size:12px
}

.fx-ex-tool {
  flex-shrink:0;

  padding:7px 10px;

  border:1px solid var(--line);
  border-radius:3px;

  background:var(--surface-2);
  color:var(--text-dim);

  font-family:var(--mono);
  font-size:10px;

  cursor:pointer;

  white-space:nowrap
}

.fx-ex-tool:hover {
  background:var(--surface-3);
  color:var(--text)
}

.fx-ex-list {
  flex:1;

  overflow:auto;

  padding:6px
}

.fx-ex-list.grid {
  display:grid;

  grid-template-columns:repeat(auto-fill, 84px);

  gap:4px;

  align-content:start
}

.fx-ex-list.grid .fx-erow {
  flex-direction:column;

  gap:6px;

  padding:10px 4px;

  text-align:center
}

.fx-ex-list.grid .fx-erow .fx-ename {
  text-align:center
}

.fx-ex-list.grid .fx-erow .fx-emeta {
  display:none
}

.fx-erow {
  width:100%;

  display:flex;
  align-items:center;

  gap:10px;

  padding:8px 10px;

  border:none;
  border-bottom:1px solid var(--line);
  border-radius:3px;

  background:none;
  color:var(--text);

  font-size:12px;
  text-align:left;

  cursor:default
}

.fx-erow:hover {
  background:var(--surface-2)
}

.fx-erow.selected {
  background:var(--surface-3)
}

.fx-erow .glyph-wrap {
  position:relative;

  width:24px;
  height:24px;

  flex-shrink:0
}

.fx-erow .glyph-wrap .glyph-folder,
.fx-erow .glyph-wrap .glyph-file {
  width:38px;
  height:38px;

  transform:scale(.57);
  transform-origin:top left
}

.fx-ename {
  flex:1;

  overflow:hidden;

  min-width:0;

  white-space:nowrap;
  text-overflow:ellipsis
}

.fx-ename input {
  width:100%;

  padding:2px 5px;

  background:var(--surface-2);

  border:1px solid var(--accent);
  border-radius:2px;

  color:var(--text);

  font:inherit
}

.fx-emeta {
  flex-shrink:0;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:10px
}

.fx-ex-status {
  display:flex;
  align-items:center;

  gap:10px;

  padding:7px 12px;

  background:var(--surface-2);

  border-top:1px solid var(--line);

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:10px
}

.fx-ex-status .tm-bar {
  flex:1
}

.fx-ctx {
  position:absolute;
  z-index:20;

  min-width:170px;

  padding:5px;

  background:var(--surface);

  border:1px solid var(--line-strong);
  border-radius:4px;

  box-shadow:var(--shadow)
}

.fx-ctx-item {
  width:100%;

  display:block;

  padding:8px 10px;

  border:none;
  border-radius:2px;

  background:none;
  color:var(--text);

  font-size:12px;
  text-align:left;

  cursor:pointer
}

.fx-ctx-item:hover {
  background:var(--surface-2)
}

.fx-prop {
  position:absolute;
  inset:0;
  z-index:30;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(0,0,0,.5)
}

.fx-prop-box {
  width:min(320px, 100%);

  padding:18px;

  background:var(--surface);

  border:1px solid var(--line-strong);
  border-radius:5px;

  box-shadow:var(--shadow)
}

.fx-prop-box h3 {
  overflow:hidden;

  margin-bottom:12px;

  color:var(--text);

  font-size:14px;

  white-space:nowrap;
  text-overflow:ellipsis
}