/* App-specific styles: forms, lists, project showcase cards, pipeline board, detail panels. Builds on styles.css. */

/* No visible scrollbars anywhere — page, modals, any scrollable list — just mouse-wheel/touch scrolling. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* A <button> styled as a pill (e.g. the posting-status toggles on the Social page) */
button.pill { border: 0; cursor: pointer; font: inherit; }

/* Small hover tooltip (shown via #tooltip-root, positioned by JS — see showTooltip() in app.js).
   position:fixed so it's never clipped by a scrolling ancestor like the floating tabs pill. */
#tooltip-root {
  position: fixed; z-index: 500; pointer-events: none;
  background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
#tooltip-root.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pre-share composer: wider sheet + carousel preview ---------- */
.sheet.wide { width: min(760px, 100%); }
.share-carousel { position: relative; margin-top: 10px; border-radius: 16px; overflow: hidden; background: var(--line); }
.share-slide { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
.share-slide.ph { flex-direction: column; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.share-slide.ph svg { width: 28px; height: 28px; }
.share-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); color: #fff; }
.share-nav.left { left: 10px; }
.share-nav.right { right: 10px; }
.share-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.share-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); display: inline-block; }
.share-dots .dot.on { background: #fff; }

/* Form fields */
/* minmax(0, …) and min-width: 0 stop a wide field (long placeholder, toggle, chips) from pushing the columns past the sheet edge */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 12px; align-items: start; }
.form-grid > * { min-width: 0; max-width: 100%; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* The Company / Contact / University switch fills its column and its three buttons share the width */
.form-grid .fld > .kind-toggle { display: flex; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.form-grid .fld > .kind-toggle button { flex: 1 1 0; min-width: 0; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); }
.fld > span { font-weight: 500; }
.fld small { color: var(--muted); font-size: 11px; }
.fld input, .fld select, .fld textarea {
  width: 100%; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink);
  border-radius: 14px; padding: 9px 12px; font-size: 14px; outline: 0; font-family: inherit;
}
.fld textarea { min-height: 70px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--brand); }
.form-err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 0; }
.form-err:empty { display: none; }
.btn.danger { color: var(--red); border-color: var(--red); background: transparent; }
.btn.danger:hover { background: var(--r-bg); }
.btn.btn-complete { color: var(--green); border-color: var(--green); background: transparent; }
.btn.btn-complete:hover { background: color-mix(in srgb, var(--green) 14%, transparent); }
.sheet-actions .spacer { flex: 1; }

/* Lists */
.list { display: grid; gap: 0; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover b { text-decoration: underline; }
.row .grow { flex: 1; min-width: 0; }
.row small { color: var(--muted); font-size: 12px; display: block; }
.row b { font-weight: 500; }

/* ---------- Project showcase cards ---------- */
.p-card { cursor: pointer; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.p-card:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 44px -20px rgba(17,61,69,.45); }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-card h3 { font-size: 16px; font-weight: 600; margin-top: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* Full-bleed image tile, name overlaid at the bottom - matches the archmkd.com project grid */
.proj-tile {
  position: relative; display: block; cursor: pointer; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--bg-sage), var(--bg-warm));
  box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.proj-tile:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 28px 48px -20px rgba(17,61,69,.45); }
.proj-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-tile .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-2); font-size: 12px;
}
.proj-tile .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,61,69,0) 40%, rgba(14,21,23,.78) 100%);
}
.proj-tile .badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.proj-tile .star { position: absolute; top: 10px; right: 10px; color: var(--yellow); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.proj-tile .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.proj-tile .cap h3 { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(0,0,0,.4); margin: 0; }
.proj-tile .cap small { color: rgba(255,255,255,.85); font-size: 11px; }
.proj-tile-edit {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(0,0,0,.45); color: #fff; border: 0; border-radius: 50%;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease; cursor: pointer;
}
.proj-tile:hover .proj-tile-edit, .proj-tile:focus-within .proj-tile-edit { opacity: 1; }
.proj-tile-edit svg { width: 14px; height: 14px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.proj-grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 14px; }

/* Showcase: single horizontal timeline of projects by year */
.timeline-wrap { overflow-x: auto; padding: 28px 16px 6px; }
.timeline-track { position: relative; display: flex; align-items: flex-start; min-width: max-content; }
.timeline-line { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--line); }
.timeline-point { position: relative; display: flex; flex-direction: column; align-items: center; width: 130px; flex: none; cursor: pointer; }
.timeline-point:hover .tl-name { text-decoration: underline; }
.timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 3px solid var(--card-solid); z-index: 1; box-shadow: var(--shadow); }
.timeline-point .tl-year { font-size: 11px; color: var(--muted); margin-top: 8px; }
.timeline-point .tl-name { font-size: 12px; font-weight: 600; text-align: center; margin-top: 2px; max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- PDF documents shown as a page-flip book ---------- */
.book-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 12, 13, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; gap: 14px;
}
.book-head { display: flex; align-items: center; gap: 10px; color: #fff; width: 100%; max-width: min(1500px, 96vw); }
.book-head b { flex: 1; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-head .ib { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.book-count { font-size: 12px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.book-stage { width: 100%; max-width: min(1500px, 96vw); flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#book-el { width: 100%; height: 100%; flex: none; }
/* zoomed: the book is bigger than its frame; the frame scrolls and is dragged to look around */
.book-stage.zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; cursor: grab; scrollbar-width: thin; }
.book-stage.zoomed.dragging { cursor: grabbing; }
.book-stage.zoomed #book-el { pointer-events: none; }
.book-zoombar { display: inline-flex; align-items: center; gap: 4px; }
.book-zoombar .ib, .book-zoombar .btn { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.book-zoombar .ib { font-size: 18px; line-height: 1; }
.book-hint { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.book-nav { display: flex; gap: 10px; }
.book-nav .btn { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.book-loading { color: #fff; text-align: center; font-size: 14px; }
.book-loading small { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.65); }

/* Document slots (one per template) on the project page — framed cards, side by side */
.doc-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.doc-slot {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  background: var(--card-solid); display: flex; flex-direction: column; gap: 8px;
}
.doc-slot-title { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.doc-slot .list .row { padding: 7px 0; }
.doc-slot-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.doctpl-input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  font: inherit; font-size: 13px; background: var(--card-solid); color: var(--ink);
}

/* Documents tab: one compact row per project, a tile per template slot */
.doc-proj-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doc-proj-row:last-child { border-bottom: 0; }
.doc-proj-name { font-weight: 600; font-size: 13px; min-width: 150px; cursor: pointer; }
.doc-proj-name:hover { text-decoration: underline; }
.doc-tiles { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.doc-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 72px; height: 60px; border-radius: 12px; flex: none;
  border: 1.5px dashed var(--muted); background: transparent; color: var(--muted);
  font-size: 10px; text-align: center; cursor: pointer; padding: 6px 4px;
}
.doc-tile svg { width: 14px; height: 14px; }
.doc-tile span { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 66px; }
.doc-tile.filled { border: 1.5px solid var(--brand); border-style: solid; background: var(--g-bg); color: var(--g-ink); }
.doc-tile small { font-size: 9px; opacity: .75; }

/* Gallery thumbnails in the project detail sheet */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; transition: transform .15s ease; }
.gallery-item { position: relative; cursor: pointer; overflow: visible; }
.gallery-item:hover { z-index: 1; }
.gallery-item:hover img { box-shadow: var(--shadow); }
.gallery-item-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff; border: 2px solid var(--card-solid); padding: 0;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  opacity: 0; transform: scale(0.75); transition: opacity .15s ease, transform .15s ease; cursor: pointer;
}
.gallery-item-del svg { width: 10px; height: 10px; stroke-width: 3; }
/* Show/hide switches in project edit mode */
.sw-host { position: relative; }
.sw-top { position: absolute; top: 0; right: 0; z-index: 5; display: flex; }
.sw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sw-head .section-label { margin-bottom: 0; }
.page-save-bar { position: sticky; bottom: 12px; z-index: 6; margin-top: 14px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; border: 0; padding: 0; border-radius: 11px; background: var(--muted); opacity: .6; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.switch.on { background: var(--brand); opacity: 1; }
.switch.on::after { transform: translateX(16px); }
.sect-off { opacity: .4; }

/* Project code on cards, and bulk-select marks */
.proj-code { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .8; }
h4 .proj-code { display: inline; }
.bulk-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 6px; margin-right: 8px;
  border: 2px solid var(--muted); background: var(--card-solid); color: transparent;
}
.bulk-check.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bulk-check svg { width: 12px; height: 12px; stroke-width: 3; }
.proj-tile .bulk-check, .kcard .bulk-check { position: absolute; top: 8px; left: 8px; z-index: 4; margin: 0; }
.kcard { position: relative; }
.bulk-on { outline: 2px solid var(--brand); outline-offset: -2px; }
tr.bulk-on td { background: var(--g-bg); }
.gallery-item:hover .gallery-item-del,.gallery.editing .gallery-item-del { opacity: 1; transform: scale(1); }
.gallery.editing .gallery-item-del { width: 24px; height: 24px; }

/* Bigger preview that fades in only after hovering a thumbnail for a moment */
img.gallery-item-preview {
  position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none;
  width: 230px; max-width: 60vw; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
  border: 3px solid var(--card-solid); box-shadow: 0 20px 48px rgba(0,0,0,.35);
  opacity: 0; transform: translate(-50%, -50%) scale(0.85);
  transition: opacity .15s ease, transform .15s ease;
}
.gallery-item:hover img.gallery-item-preview {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity .2s ease .5s, transform .2s ease .5s;
}

/* Gallery nav bar shared by all the styled (non-grid) gallery layouts below */
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.gallery-nav .sub { margin: 0; min-width: 50px; text-align: center; }

/* Radial Cards Slider — photos fan out in an arc, like a hand of cards */
.radial-gallery { position: relative; height: var(--gallery-h, 220px); margin-top: 10px; }
.radial-card {
  position: absolute; left: 50%; top: 50%; width: 130px; aspect-ratio: 3/4;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 4px solid var(--card-solid); box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.radial-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Liquid Glass Carousel — side photos curve away like bent glass */
.liquid-gallery { position: relative; height: var(--gallery-h, 220px); margin-top: 10px; perspective: 900px; }
.liquid-card {
  position: absolute; left: 50%; top: 0; width: 56%; height: 100%;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow); background: var(--card);
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.liquid-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cascading Slider — the active photo widens, the rest narrow to strips */
.cascade-gallery { display: flex; gap: 4px; height: var(--gallery-h, 220px); margin-top: 10px; overflow: hidden; border-radius: 16px; }
.cascade-card { flex: 1; min-width: 0; cursor: pointer; transition: flex .45s cubic-bezier(.22,1,.36,1); }
.cascade-card.active { flex: 7; }
.cascade-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dropping Cards Stack — photos stacked like cards, front one on top */
.stack-gallery { position: relative; height: var(--gallery-h, 220px); margin-top: 10px; }
.stack-card {
  position: absolute; left: 50%; top: 50%; width: 70%; max-width: 280px; height: 100%;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.stack-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Photo lightbox (reuses the book viewer's overlay/head/stage/nav chrome) */
/* the photo fills the screen (fit), and zooms from there */
.lightbox-stage { max-width: 100vw; width: 100%; overflow: hidden; position: relative; }
.lightbox-img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; transform-origin: center center; user-select: none; -webkit-user-drag: none; will-change: transform; }
#lightbox-root:fullscreen .lightbox-img { max-height: calc(100vh - 110px); }
#lightbox-root:fullscreen .book-overlay { padding: 10px; }

/* Generated-document previewer/editor (also reuses the book viewer's chrome) */
.docedit-frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: 10px; background: #fff; }
.cover-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); }

/* Cover-photo framing matches the chosen Gallery style — purely decorative, since there's one
   photo. Kept self-contained (no overflowing pseudo-elements, no fake "extra photo" ghosts) so it
   never overlaps the toolbar above or the buttons below, and never implies photos that don't exist. */
.cover-frame { position: relative; }
/* Several covers: slides stack in one grid cell and cross-fade */
.cover-slides { display: grid; }
.cover-slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.cover-slide.on { opacity: 1; pointer-events: auto; }
.cover-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: var(--card-solid); box-shadow: var(--shadow); }
.cover-nav.left { left: 10px; }
.cover-nav.right { right: 10px; }
.cover-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.cover-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; }
.cover-dot.on { background: var(--brand); width: 18px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .cover-slide { transition: none; } }
.cover-frame-radial .cover-img { border: 8px solid var(--card-solid); border-radius: 4px; box-shadow: var(--shadow); }

.cover-frame-liquid .cover-img { border-radius: 24px; border: 1px solid var(--line); }
.cover-frame-liquid::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  /* a faint gloss only — no blur, so the photo stays sharp */
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.08) 100%);
}

.cover-frame-cascade .cover-img { aspect-ratio: 21/9; }
.cover-frame-cascade::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 24px 2px var(--bg);
}

.cover-frame-stack .cover-img { box-shadow: 0 18px 40px -14px rgba(0,0,0,.4); }

/* Bulleted role / responsibility lists in the detail sheet */
.bullets { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.bullets li::marker { color: var(--accent); }

/* ---------- Pipeline board (Kanban by status) ---------- */
.board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px;
}
.col {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 10px; min-height: 320px; transition: outline-color .15s;
  outline: 2px dashed transparent; outline-offset: -2px;
}
.col.drop-over { outline-color: var(--brand); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; font-size: 13px; }
.col-h .count { color: var(--muted); font-size: 12px; }
.kcard {
  border-radius: 16px; padding: 12px; margin-bottom: 8px; cursor: grab;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card-solid); border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.kcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .5; }
.kcard h4 { font-size: 13px; font-weight: 600; line-height: 1.25; }
.kcard p { font-size: 11px; opacity: .75; margin-top: 2px; }

/* Person/contact & project cards */
.av.xxl { width: 104px; height: 104px; font-size: 34px; border: 0; margin: 0; }
.av.xl { width: 88px; height: 88px; font-size: 28px; border: 0; margin: 0; }
.av.sm { width: 40px; height: 40px; font-size: 13px; border: 0; margin: 0; }
img.av { object-fit: cover; display: inline-block; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Detail modal */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.detail-grid div { background: var(--line); border-radius: 14px; padding: 10px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.detail-grid span { display: block; font-size: 11px; color: var(--muted); }
.detail-grid a { color: inherit; }
.detail-grid span i svg { width: 12px; height: 12px; }
.section-label { font-size: 12px; color: var(--muted); margin: 18px 0 6px; font-weight: 500; }

/* Vertical gap between a project page's sections (Key facts, galleries, Documents, ...) — adjustable
   in Settings → Appearance. Each section's own internal spacing (e.g. label to its content) is
   separate and stays fixed; this only controls the space between one section and the next. */
.proj-section + .proj-section { margin-top: var(--section-gap, 18px); }
.linklist { display: grid; gap: 6px; }
.linklist a { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Slow, drifting background. Uses transform only, so it stays smooth.
   Turned off with the "Background motion" setting, or by the system's reduced-motion preference. */
.bg { overflow: hidden; }
.bg .blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: .6; will-change: transform;
  animation: drift 44s ease-in-out infinite alternate;
}
.bg .b1 { width: 62vmax; height: 62vmax; top: -22vmax; right: -16vmax; background: var(--bg-sage); }
.bg .b2 { width: 58vmax; height: 58vmax; bottom: -26vmax; left: -18vmax; background: var(--bg-warm); animation-duration: 56s; animation-delay: -14s; }
.bg .b3 { width: 40vmax; height: 40vmax; top: 34%; left: 36%; background: var(--accent); opacity: .12; animation-duration: 66s; animation-delay: -28s; }
.bg .b4 { width: 30vmax; height: 30vmax; bottom: 6%; right: 8%; background: var(--brand); opacity: .08; animation-duration: 50s; animation-delay: -36s; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(5vw, -4vh, 0) scale(1.06); }
  100% { transform: translate3d(-4vw, 5vh, 0) scale(.97); }
}
/* Background styles (chosen in Settings → Appearance) */
html[data-bg="still"] .bg .blob { animation: none; }
html[data-bg="plain"] .bg .blob,
html[data-bg="dots"] .bg .blob { display: none; }
html[data-bg="plain"] .bg { background: var(--bg); }
html[data-bg="dots"] .bg { background: radial-gradient(circle, var(--line) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--bg); }

/* Colour palettes: the light version first, then the dark version (dark mode uses its own rules) */
html[data-palette="teal"] { --bg: #f1f6f5; --bg-warm: #e3eeec; --bg-sage: #d6e9e5; }
html[data-palette="rose"] { --bg: #f7f0f1; --bg-warm: #f3dde2; --bg-sage: #ecdfdf; }
html[data-palette="sand"] { --bg: #f7f3ea; --bg-warm: #f0e2cb; --bg-sage: #e7e5d8; }
html[data-palette="graphite"] { --bg: #f1f1f0; --bg-warm: #dedede; --bg-sage: #d4d6d4; }
html[data-palette="teal"][data-theme="dark"] { --bg: #0d1716; --bg-warm: #142321; --bg-sage: #112a26; }
html[data-palette="rose"][data-theme="dark"] { --bg: #171213; --bg-warm: #2a1c1f; --bg-sage: #221a1b; }
html[data-palette="sand"][data-theme="dark"] { --bg: #16140f; --bg-warm: #251f17; --bg-sage: #1c1c16; }
html[data-palette="graphite"][data-theme="dark"] { --bg: #0e0f0f; --bg-warm: #1c1e1e; --bg-sage: #181a1a; }

/* Quick filter dropdowns (Projects page, Showcase) */
.qf-select {
  height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid);
  color: var(--ink); padding: 0 12px; font: inherit; font-size: 13px;
}

/* Filter bar and table headers */
.filters .fbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.fbar select, .fbar input {
  height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid);
  color: var(--ink); padding: 0 12px; font: inherit; font-size: 13px; min-width: 120px;
}
.filters .chips { margin-top: 10px; }
.chip-x { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; margin-left: 4px; cursor: pointer; }
.th-sort { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--muted); padding: 0; cursor: pointer; }
.th-sort:hover { color: var(--brand); }

/* Sync status shown in the header */
.sync-pill {
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; background: var(--line);
}
.sync-pill[data-state="saved"] { background: var(--g-bg); color: var(--g-ink); }
.sync-pill[data-state="error"] { background: var(--r-bg); color: var(--r-ink); }
.sync-pill[data-state="idle"]:empty { display: none; }
button.sync-pill { border: 0; font: inherit; font-size: 12px; color: var(--ink-2); cursor: default; }
button.sync-pill[data-state="saved"] { color: var(--g-ink); }
button.sync-pill[data-state="error"] { color: var(--r-ink); cursor: pointer; }

/* Settings page */
.od-status { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.od-status .sw { width: 10px; height: 10px; }
.od-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.od-row .fld { flex: 1; min-width: 220px; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--line); padding: 2px 6px; border-radius: 6px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Network map and relationship strength dots */
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: inline-block; }
.dots i.on { background: var(--ink); }
.graph { width: 100%; height: auto; display: block; }
.graph .edge { stroke: var(--muted); stroke-opacity: .45; }
.graph .edge.member { stroke-dasharray: 3 3; stroke-opacity: .6; }
.graph .node { cursor: pointer; }
.graph .node circle { stroke: var(--card-solid); stroke-width: 2; }
.graph .node:hover circle { stroke: var(--ink); }
.graph text { font-family: var(--font); font-size: 10px; fill: var(--ink-2); text-anchor: middle; pointer-events: none; }
/* Live network map: photo nodes that drift, lines that flow */
.net-tools { flex-wrap: wrap; gap: 8px; }
.netmap { position: relative; width: 100%; aspect-ratio: 640 / 460; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%), radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--red) 8%, transparent), transparent 55%); }
.netmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nedge { stroke: var(--muted); stroke-opacity: .4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.nedge.member { stroke-dasharray: 5 6; stroke-opacity: .5; stroke-width: 1.2; animation: nflow 1.6s linear infinite; }
.nnode { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink-2);
  animation: npop .6s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: var(--e, 0s); }
.nnode .nface { margin: 0; border: 0; flex: none; background-color: hsl(var(--hue, 30) 28% 52%); background-size: cover; background-position: center;
  box-shadow: 0 0 0 2.5px var(--card-solid), 0 0 0 4px var(--ring, var(--muted)), 0 6px 14px rgba(0, 0, 0, .12);
  animation: nfloat var(--t, 5s) ease-in-out var(--d, 0s) infinite; transition: transform .25s, box-shadow .25s; }
.nnode:hover .nface, .nnode:focus-visible .nface { transform: scale(1.18); box-shadow: 0 0 0 2.5px var(--card-solid), 0 0 0 4px var(--ring, var(--muted)), 0 0 0 10px color-mix(in srgb, var(--ring, var(--muted)) 22%, transparent), 0 8px 18px rgba(0, 0, 0, .18); }
.nlabel { font-size: 11px; font-weight: 400; letter-spacing: .01em; color: var(--ink-2); opacity: .85; white-space: nowrap; pointer-events: none;
  padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--card-solid) 70%, transparent); }
.netmap:has(.nnode:hover) .nnode:not(:hover) { opacity: .45; transition: opacity .25s; }
.nnode { transition: opacity .25s; }
@keyframes nfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes npop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes nflow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .nnode, .nnode .nface, .nedge.member { animation: none; } }
.legend-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }

/* Thin divider between groups of tabs */
.tab-sep { width: 1px; height: 18px; flex: none; align-self: center; margin: 0 6px; background: var(--line); }

/* Discipline picker: chosen items as chips, one input to pick from the list or type a new one */
.multi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.multi-chips:empty { display: none; }
.multi-chips .pill { display: inline-flex; align-items: center; gap: 6px; }
.multi-x { border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; opacity: .6; }
.multi-x:hover { opacity: 1; }

/* PDFs in galleries: first page as the tile, a PDF badge, opens as a page-turning book */
.pdf-badge { position: absolute; left: 6px; bottom: 6px; z-index: 2; pointer-events: none; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; background: var(--red); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pdf-ph { background: var(--line); min-height: 60px; }
.gallery img[data-pdf-src] { object-fit: contain; background: #fff; }
.cascade-card { position: relative; }

/* Dragging photos / PDFs to rearrange them */
.gallery-item[draggable="true"] { cursor: grab; }
.gallery-item.dragging { opacity: .35; }
.gallery-item.drop-before::before, .gallery-item.drop-after::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; width: 4px; border-radius: 2px; background: var(--brand); z-index: 4;
}
.gallery-item.drop-before::before { left: -6px; }
.gallery-item.drop-after::after { right: -6px; }
.gallery.drop-end { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: 8px; }

/* Carousel cards being dragged / dropped on */
[data-carousel] { cursor: grab; }
[data-carousel].dragging { opacity: .4; }
[data-carousel].drop-target { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Cover strip in edit mode: drag to reorder, arrows for touch, × to remove one */
.cover-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; margin-top: 8px; }
.cover-thumb { position: relative; flex: none; width: 110px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); cursor: grab; background: var(--line); }
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-thumb.current { border-color: var(--brand); }
.cover-thumb.dragging { opacity: .4; }
.cover-thumb.drop-target { outline: 3px solid var(--brand); outline-offset: 2px; }
.cover-thumb-n { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.6); color: #fff; }
.cover-thumb-btns { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 4px; }
.cover-thumb-btns .ib { width: 22px; height: 22px; background: var(--card-solid); font-size: 14px; line-height: 1; }
.cover-thumb-btns .ib svg { width: 10px; height: 10px; stroke-width: 3; }

/* Cover opens the photo lightbox */
.cover-slide.on { cursor: zoom-in; }

/* Dragging documents between / within slots */
.doc-row[draggable="true"] { cursor: grab; position: relative; }
.doc-row.dragging { opacity: .4; }
.doc-row.drop-before::before, .doc-row.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--brand); }
.doc-row.drop-before::before { top: -2px; }
.doc-row.drop-after::after { bottom: -2px; }
.doc-slot.drop-end { outline: 2px dashed var(--brand); outline-offset: 3px; border-radius: 10px; }

/* Drop box for adding many photos / PDFs at once */
.dropzone {
  flex: 1; min-width: 220px; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
  padding: 16px 14px; border: 2px dashed var(--muted); border-radius: 14px; color: var(--ink-2); text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dropzone svg { width: 22px; height: 22px; flex: none; }
.dropzone span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dropzone small { color: var(--muted); font-size: 11px; }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--g-bg); color: var(--g-ink); }
.dropzone.over { border-style: solid; }

/* Project code suggestions */
.code-suggest { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.code-suggest .pill { cursor: pointer; border: 0; font: inherit; font-size: 12px; }
.code-suggest .pill:disabled { opacity: .45; cursor: default; }
.code-used { text-decoration: none; padding: 0 5px; border-radius: 5px; background: var(--line); color: var(--ink-2); }
.code-bad { color: var(--red); font-weight: 600; }
.code-ok { color: var(--green); font-weight: 600; }

/* Revit files: small preview */
.rvt-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--line) center / cover no-repeat; color: var(--muted); font: 700 10px var(--font); letter-spacing: .06em; cursor: pointer; }
.rvt-thumb.has-img { background-color: #fff; }
.rvt-view { display: flex; justify-content: center; margin: 12px 0 6px; }
.rvt-view img { width: 256px; height: 256px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.rvt-none { padding: 40px 20px; border-radius: 12px; border: 1px dashed var(--muted); color: var(--muted); font-size: 13px; }


/* ---- picker drop-down list (Location, Client, Discipline, ...) ---- */
.fld[data-multi] { position: relative; }
.multi-menu {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 60; max-height: 260px; overflow: auto;
  padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-solid);
  box-shadow: 0 18px 40px rgba(17, 61, 69, 0.16), 0 2px 6px rgba(17, 61, 69, 0.06);
}
.multi-menu[hidden] { display: none; }
.multi-opt {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.multi-opt:hover, .multi-opt.active { background: var(--line); }
.multi-opt.add { color: var(--accent, var(--ink)); font-weight: 600; }
.multi-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* a picker that is switched off because its partner field is in use */
.fld.faded { opacity: .38; filter: grayscale(1); pointer-events: none; transition: opacity .15s; }

/* ---- project page in edit mode: every section is a framed card ---- */
.proj-section.edit-frame {
  margin-top: 16px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--card); box-shadow: 0 6px 22px rgba(17, 61, 69, 0.06);
}
.proj-section.edit-frame > .sw-head { margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.proj-section.edit-frame > .sw-head .section-label, .proj-section.edit-frame > .section-label { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.proj-section.edit-frame .fld { padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.35); }
.proj-section.edit-frame .fld-group { margin: 6px 0 -2px; }
.fld-group {
  grid-column: 1 / -1; margin: 10px 0 0; padding-top: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px dashed var(--line);
}
.form-grid > .fld-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* a group of fields inside a section, shown as its own card */
.edit-subcard { margin-top: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.45); }
.edit-subcard:first-of-type { margin-top: 0; }
.edit-subcard > .fld-group { margin: 0 0 12px; padding: 0; border: 0; font-size: 12px; color: var(--ink); }
.proj-section.edit-frame .edit-subcard .fld { padding: 0; border: 0; border-radius: 0; background: none; }

.multi-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.multi-kind { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--line); color: var(--muted); }
.multi-kind.contact { background: rgba(194, 120, 40, 0.14); color: #a96a1c; }

/* Company | Contact switch above a picker */
.kind-toggle { display: inline-flex; margin: 6px 0 4px; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.5); }
.kind-toggle button { border: 0; background: transparent; padding: 4px 14px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.kind-toggle button.on { background: var(--ink); color: var(--card-solid); }

/* a long form (the project Edit form) as framed section cards */
.form-section { margin-top: 14px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.45); }
.form-section:first-of-type { margin-top: 0; }
.form-section-head { margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink); }
.form-section .fld-group { margin-top: 14px; }
.fld > .kind-toggle { align-self: flex-start; justify-self: start; width: max-content; max-width: 100%; }

/* the Delete / Cancel / Save bar of a form stays at the bottom while the form scrolls */
.sheet form[data-form] > .sheet-actions {
  position: sticky; bottom: -20px; z-index: 5; margin: 14px -20px -20px; padding: 14px 20px 16px;
  background: var(--card-solid); border-top: 1px solid var(--line); border-radius: 0 0 26px 26px;
}
.sheet > .sheet-head:first-child { position: sticky; top: -20px; z-index: 5; margin: -20px -20px 12px; padding: 16px 20px 10px; background: var(--card-solid); border-radius: 26px 26px 0 0; }

/* section cards alternate: one light, the next a shade deeper */
.form-section, .proj-section.edit-frame { background: color-mix(in srgb, #fff 62%, var(--card-solid)); }
.form-section:nth-of-type(even), .proj-section.edit-frame.tone-b { background: color-mix(in srgb, var(--ink) 7%, var(--card-solid)); }
.form-section:nth-of-type(even) .fld input:not([type=hidden]), .form-section:nth-of-type(even) .fld textarea, .form-section:nth-of-type(even) .fld select,
.proj-section.edit-frame.tone-b .fld input:not([type=hidden]), .proj-section.edit-frame.tone-b .fld textarea, .proj-section.edit-frame.tone-b .fld select { background: color-mix(in srgb, #fff 70%, var(--card-solid)); }
:root[data-theme="dark"] .form-section, :root[data-theme="dark"] .proj-section.edit-frame { background: color-mix(in srgb, #fff 6%, var(--card-solid)); }
:root[data-theme="dark"] .form-section:nth-of-type(even), :root[data-theme="dark"] .proj-section.edit-frame.tone-b { background: color-mix(in srgb, #fff 11%, var(--card-solid)); }

/* contact / company photo gallery */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 6px; }
.pg-thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.pg-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; cursor: zoom-in; }
.pg-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
/* social brand icons */
.soc-ico { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; color: var(--ink); }
.soc-ico svg { width: 100%; height: 100%; }
.soc-linkedin { color: #0a66c2; } .soc-instagram { color: #d6249f; } .soc-facebook { color: #1877f2; } .soc-behance { color: #1769ff; }

/* contact card: a big, centred photo in a rounded rectangle */
.sheet > .sheet-head.no-stick:first-child { position: relative; top: auto; margin: 0 0 4px; padding: 0; background: none; border-radius: 0; display: block; }
.contact-hero { width: min(270px, 72%); aspect-ratio: 4 / 5; margin: 6px auto 0; border-radius: 28px; overflow: hidden; box-shadow: 0 14px 34px -12px rgba(17, 61, 69, 0.35); }
.av.hero { width: 100%; height: 100%; border-radius: 0; margin: 0; border: 0; font-size: 72px; display: grid; place-items: center; }
.contact-hero-x { position: absolute; top: 0; right: 0; }
/* the contact photo-size slider and the card photos it controls */
.photo-size { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-solid); color: var(--muted); }
.photo-size svg { width: 16px; height: 16px; }
.photo-size input { width: 120px; accent-color: var(--brand, var(--ink)); }
.av.lg.cav { width: var(--cav, 52px); height: var(--cav, 52px); border-radius: var(--cav-r, 50%); font-size: var(--cav-fs, 16px); }

/* picker fields: the input has a drop-down arrow that opens the list */
.multi-input { position: relative; }
.multi-input input { padding-right: 38px; }
.multi-chev { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.multi-chev:hover { background: var(--line); color: var(--ink); }
.multi-chev svg { width: 16px; height: 16px; }

/* contact cards: the photo sits in the middle, the role tag in the corner, text centred under it */
.p-card.contact-card { position: relative; text-align: center; }
.contact-card .p-top { justify-content: center; }
.contact-card .p-top .pill { position: absolute; top: 14px; right: 14px; }
.contact-card .tags { justify-content: center; }

.contact-card .contact-role { margin-top: 12px; }

/* contact card: phone and email lines above the project, role tag at the right end of the footer */
.contact-lines { display: grid; gap: 3px; margin: 8px 0 2px; font-size: 12px; color: var(--ink-2); }
.contact-lines span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-lines svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.contact-card .p-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }

.contact-card .contact-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.contact-card .contact-line > span { display: inline-flex; align-items: center; gap: 6px; }
.contact-card .contact-line svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.contact-card .link-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card .link-btn:hover { color: var(--brand, var(--ink)); }

/* WhatsApp: just the logo; strength dots that can be seen */
.wa-btn { width: 32px; padding: 0; justify-content: center; color: #25d366; border-color: rgba(37, 211, 102, 0.45); }
.wa-btn svg { width: 17px; height: 17px; }
.wa-btn:hover { background: rgba(37, 211, 102, 0.12); }
.dots { gap: 4px; }
.dots i { width: 9px; height: 9px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.dots i.on { background: var(--ink); }
.strength-n { margin-left: 6px; font-size: 12px; font-weight: 600; }
.contact-strength { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.contact-strength small { color: var(--muted); font-size: 11px; }

/* WhatsApp logo button: a round green logo, drawn filled (the generic button icons are outlines) */
.btn.wa-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; color: #25d366; border-color: rgba(37, 211, 102, 0.5); background: transparent; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.btn.wa-btn:hover { background: rgba(37, 211, 102, 0.14); }

/* contact card background: the contact's own photo, blurred and washed out to a soft light tint */
.contact-card.has-bg { overflow: hidden; isolation: isolate; }
.contact-card .card-bg { position: absolute; inset: -30px; z-index: -1; filter: blur(26px) saturate(0.85); transform: scale(1.15); opacity: 0.5; pointer-events: none; }
.contact-card.has-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.72)); }
:root[data-theme="dark"] .contact-card.has-bg::before { background: linear-gradient(180deg, rgba(20, 28, 30, 0.45), rgba(20, 28, 30, 0.8)); }

/* contact card: the blurred photo shows at the top, then fades into clean white where the details are */
.contact-card .card-bg { opacity: 0.8; filter: blur(22px) saturate(1); }
.contact-card.has-bg::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 255, 0.86) 48%, rgba(255, 255, 255, 0.96) 100%); }
:root[data-theme="dark"] .contact-card.has-bg::before { background: linear-gradient(180deg, rgba(20, 28, 30, 0.1) 0%, rgba(20, 28, 30, 0.4) 28%, rgba(20, 28, 30, 0.88) 48%, rgba(20, 28, 30, 0.96) 100%); }

/* switch beside the photo-size slider: contact card photo background on / off */
.bg-switch { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-solid); font-size: 12px; font-weight: 600; color: var(--ink-2); }
:root[data-contact-bg="off"] .contact-card .card-bg, :root[data-contact-bg="off"] .contact-card.has-bg::before { display: none; }

/* the white fade must sit ABOVE the blurred photo (it was painted underneath it); a soft white fog behind the details */
.contact-card .card-bg { z-index: -2; }
.contact-card.has-bg::before { z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 26%, rgba(255, 255, 255, 0.9) 46%, rgba(255, 255, 255, 0.97) 100%); }
.contact-card.has-bg h3, .contact-card.has-bg .sub, .contact-card.has-bg .contact-line, .contact-card.has-bg .p-foot { text-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.contact-card.has-bg .pill, .contact-card.has-bg .pill.ghost { background: rgba(255, 255, 255, 0.85); }

/* small social logos on a contact card (only the ones that are filled in) */
.card-social { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.card-social a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); transition: transform .15s; }
.card-social a:hover { transform: translateY(-2px); }
.card-social .soc-ico { width: 15px; height: 15px; margin: 0; vertical-align: 0; display: grid; place-items: center; }

/* contact card: tighter spacing between the detail lines */
.contact-card .p-top { margin-bottom: 0; }
.contact-card h3 { margin-top: 8px; line-height: 1.2; }
.contact-card .sub { margin-top: 1px; line-height: 1.25; }
.contact-card .contact-line { margin-top: 4px; gap: 6px; }
.contact-card .btn.wa-btn { width: 26px; height: 26px; }
.contact-card .btn.wa-btn svg { width: 15px; height: 15px; }
.contact-card .card-social { margin-top: 6px; gap: 6px; }
.contact-card .card-social a { width: 24px; height: 24px; }
.contact-card .card-social .soc-ico { width: 13px; height: 13px; }
.contact-card .tags { margin-top: 6px; }
.contact-card .contact-strength { margin-top: 7px; }
.contact-card .p-foot { margin-top: 8px; padding-top: 8px; }
.contact-card.p-card { padding-bottom: 14px; }

/* the "morph" when a contact / company card opens */
::view-transition-group(morph) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(morph), ::view-transition-new(morph) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* ---- card / form open effects (Settings → Appearance → Card open effect) ---- */
@keyframes fx-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes fx-slide { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes fx-flip { from { opacity: 0; transform: perspective(900px) rotateY(-80deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fx-blur { from { opacity: 0; filter: blur(16px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-open-fx="morph"] #modal-root .sheet, html[data-open-fx="zoom"] #modal-root .sheet { animation: fx-zoom var(--open-dur, .4s) cubic-bezier(.22, 1, .36, 1) both; }
html[data-open-fx="slide"] #modal-root .sheet { animation: fx-slide var(--open-dur, .4s) cubic-bezier(.22, 1, .36, 1) both; }
html[data-open-fx="flip"] #modal-root .sheet { animation: fx-flip var(--open-dur, .4s) cubic-bezier(.22, 1, .36, 1) both; }
html[data-open-fx="blur"] #modal-root .sheet { animation: fx-blur var(--open-dur, .4s) ease-out both; }
html[data-open-fx="fade"] #modal-root .sheet { animation: fx-fade var(--open-dur, .4s) ease both; }
html[data-open-fx="none"] #modal-root .sheet, html[data-open-fx="none"] #modal-root .overlay { animation: none; }
html[data-open-fx] #modal-root .overlay { animation-duration: var(--open-dur, .4s); }
::view-transition-group(morph) { animation-duration: var(--open-dur, .5s); }
@media (prefers-reduced-motion: reduce) { html[data-open-fx] #modal-root .sheet, html[data-open-fx] #modal-root .overlay { animation: none; } }

/* PDF tiles in a contact / company file section */
.pg-pdf { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.pg-thumb .pdf-badge { left: 4px; bottom: 4px; font-size: 9px; padding: 1px 5px; }

/* the button row at the bottom of a card (Delete / Contacted today / Connect / Edit) stays in view while the card scrolls */
.sheet > .sheet-actions:last-child {
  position: sticky; bottom: -20px; z-index: 5; margin: 14px -20px -20px; padding: 14px 20px 18px;
  background: var(--card-solid); border-top: 1px solid var(--line); border-radius: 0 0 26px 26px;
}

/* forms: tighter spacing */
.form-section { margin-top: 10px; padding: 12px 14px 14px; border-radius: 18px; }
.form-section-head { margin: -2px 0 10px; padding-bottom: 8px; font-size: 13px; }
.form-section .form-grid { gap: 8px 10px; }
.form-section .fld { gap: 3px; }
.form-section .fld input, .form-section .fld select, .form-section .fld textarea { padding: 7px 11px; font-size: 13.5px; }
.form-section .fld textarea { min-height: 44px; }
.form-section .fld small { font-size: 10.5px; line-height: 1.3; }
.form-section .fld-group { margin: 8px 0 0; padding-top: 8px; }
.form-section .multi-chips:empty { display: none; }
.edit-subcard { margin-top: 8px; padding: 10px 12px 12px; }
.proj-section.edit-frame { margin-top: 10px; padding: 12px 14px 14px; }
.proj-section.edit-frame .fld { padding: 8px 10px 9px; }
.pg-grid { margin-top: 2px; }

/* file viewer with Previous / Next */
.fv-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.fv-body { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.fv-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.fv-arrow:hover { background: rgba(0, 0, 0, 0.6); }

/* Experience / Education / Licenses entries */
.entry { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px 34px 10px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
.entry label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entry .entry-wide { grid-column: 1 / -1; }
.entry small { color: var(--muted); font-size: 10.5px; }
.entry input, .entry textarea { width: 100%; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); border-radius: 10px; padding: 6px 9px; font: inherit; font-size: 13px; }
.entry textarea { min-height: 40px; resize: vertical; }
.entry-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); cursor: pointer; line-height: 1; }
.entry-x:hover { background: var(--r-bg, var(--line)); color: var(--red); }
.entry-list { display: grid; gap: 8px; margin-top: 4px; }
.entry-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border-left: 3px solid var(--line); }
.entry-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.av.entry-logo { width: 44px; height: 44px; flex: none; margin: 0; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; color: hsl(var(--hue, 30) 28% 40%); }
.entry-item b { font-size: 14px; }
.entry-item small { color: var(--muted); font-size: 12px; }
.entry-item p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
.entry-item a { font-size: 12px; margin-top: 2px; }
@media (max-width: 520px) { .entry { grid-template-columns: 1fr; } }

.entry .pick-wrap { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entry .multi-menu { top: 100%; }

.entry-item .link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }

.bday-today { background: color-mix(in srgb, var(--yellow, #f3c94c) 22%, transparent); border-radius: 14px; }

/* Settings → Lists: grouped by what they serve */
.list-group { margin-top: 16px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.list-group-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 6%, var(--card-solid)); }
.list-group-head small { font-weight: 500; color: var(--muted); font-size: 12px; }
.list-group.tone-1 .list-group-head { background: color-mix(in srgb, var(--brand, var(--ink)) 12%, var(--card-solid)); }
.list-group.tone-2 .list-group-head { background: color-mix(in srgb, var(--yellow, #f3c94c) 22%, var(--card-solid)); }
.list-group-body { display: grid; gap: 10px; padding: 12px; background: color-mix(in srgb, #fff 55%, var(--card-solid)); }
.list-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-solid); }
.list-tile-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.list-tile-head b { font-size: 13.5px; }
.list-tile-head small { color: var(--muted); font-size: 12px; }
.list-tile .multi-chips { margin: 0 0 8px; }
.list-tile input[data-list-add] { width: 100%; max-width: 520px; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; outline: 0; }
.list-tile input[data-list-add]:focus { border-color: var(--brand); }

/* long experience / education text is folded until you ask for more */
.entry-item p.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.entry-item .entry-more { justify-self: start; margin-top: 2px; font-size: 12px; font-weight: 600; }

/* universities: a small Departments button on each row, and departments shown apart inside the card */
.dept-btn { gap: 6px; white-space: nowrap; }
.dept-btn.on { background: var(--ink); color: var(--card-solid); }
.dept-caret { display: inline-block; transition: transform .2s; font-size: 10px; }
.dept-btn.on .dept-caret { transform: rotate(180deg); }
.uni-depts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px 62px; }
.uni-depts .chip small { margin-left: 4px; opacity: .7; }
.sheet .uni-depts { padding: 4px 0 8px; }
.dept-block { margin-top: 10px; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.45); }
.dept-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.dept-title small { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* years of experience box at the top of a contact's card */
.exp-badge { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; max-width: 100%; margin: 8px auto 0; padding: 6px 16px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--brand, var(--ink)) 8%, var(--card-solid)); }
.exp-badge b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 50%; background: var(--ink); color: var(--card-solid); font-size: 15px; }
.exp-badge span { display: grid; font-size: 13px; font-weight: 600; line-height: 1.2; }
.exp-badge small { font-weight: 500; font-size: 11px; color: var(--muted); }

/* small years-of-experience number in the corner of a contact card */
.exp-chip { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--card-solid); font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.exp-chip small { font-size: 9px; font-weight: 600; opacity: .8; }

/* sort bar inside the filter panel */
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.sortbar select { min-width: 190px; }

/* Settings split into pages */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 70px; display: grid; gap: 6px; }
.settings-tab { display: grid; gap: 1px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-solid); color: var(--ink); cursor: pointer; font: inherit; }
.settings-tab b { font-size: 14px; }
.settings-tab small { font-size: 11px; color: var(--muted); }
.settings-tab:hover { background: color-mix(in srgb, var(--ink) 5%, var(--card-solid)); }
.settings-tab.on { background: var(--ink); color: var(--card-solid); border-color: var(--ink); }
.settings-tab.on small { color: color-mix(in srgb, var(--card-solid) 75%, transparent); }
.settings-body > .card { margin-top: 12px; }
.settings-body > .card:first-of-type { margin-top: 0; }
.settings-page-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; }
  .settings-tab { flex: 1 1 140px; }
}

/* contact cards, "Photo" mode: only the picture and the name */
.bg-switch .seg { margin: 0; }
:root[data-contact-bg="photo"] .contact-card { aspect-ratio: 4 / 5; padding: 0; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; }
:root[data-contact-bg="photo"] .contact-card .card-bg { inset: 0; z-index: -2; filter: none; transform: none; opacity: 1; display: block; background-size: cover; background-position: center; }
:root[data-contact-bg="photo"] .contact-card.has-bg::before { display: block; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.7) 100%); }
:root[data-contact-bg="photo"] .contact-card.has-bg .p-top { display: none; }
:root[data-contact-bg="photo"] .contact-card:not(.has-bg) .p-top { display: grid; place-items: center; flex: 1; }
:root[data-contact-bg="photo"] .contact-card h3 { margin: 0; padding: 12px 14px; text-align: center; }
:root[data-contact-bg="photo"] .contact-card.has-bg h3 { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
:root[data-contact-bg="photo"] .contact-card .sub, :root[data-contact-bg="photo"] .contact-card .contact-line, :root[data-contact-bg="photo"] .contact-card .card-social, :root[data-contact-bg="photo"] .contact-card .tags, :root[data-contact-bg="photo"] .contact-card .contact-strength, :root[data-contact-bg="photo"] .contact-card .p-foot, :root[data-contact-bg="photo"] .contact-card .exp-chip { display: none; }

/* Network map hover preview */
.net-pop { position: fixed; z-index: 80; width: 230px; padding: 12px 14px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); pointer-events: none; font-size: 12px; color: var(--ink-2); animation: npop-in .15s ease-out; }
.net-pop p { margin: 6px 0 0; }
.net-pop .np-meta { color: var(--muted); }
.net-pop .np-head { display: flex; align-items: center; gap: 10px; }
.net-pop .np-head > div { display: grid; gap: 2px; min-width: 0; }
.net-pop .np-head b { font-size: 14px; color: var(--ink); }
.net-pop .np-head small { color: var(--muted); }
.net-pop .av.np-av { width: 44px; height: 44px; flex: none; margin: 0; border: 0; font-size: 14px; }
@keyframes npop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* new-contact form: the LinkedIn PDF button sits beside the title */
.sheet-head .head-tools { margin-left: auto; margin-right: 8px; }

/* Network map: nodes can be dragged */
.nnode { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.nnode.dragging { cursor: grabbing; z-index: 5; }
.nnode.dragging .nface { transform: scale(1.22); }
body.net-dragging { cursor: grabbing; user-select: none; }
body.net-dragging .net-pop { display: none; }

/* Network: project nodes and project links, view tabs */
.nedge.proj { stroke-dasharray: 2 5; stroke-opacity: .55; stroke-width: 1.4; animation: nflow 2.2s linear infinite reverse; }
.nnode.pj .nface { box-shadow: 0 0 0 2.5px var(--card-solid), 0 0 0 4px var(--ring), 0 6px 14px rgba(0, 0, 0, .14); }
.net-views { flex-wrap: wrap; gap: 8px; }

/* Network: an endless, pannable and zoomable canvas */
.netmap { aspect-ratio: auto; height: clamp(420px, 68vh, 760px); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 38%, transparent) 1.1px, transparent 1.4px), radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%);
  background-size: 28px 28px, 100% 100%; background-repeat: repeat, no-repeat; }
.netmap.panning { cursor: grabbing; }
.netmap .networld { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.netmap svg.netsvg { position: absolute; inset: auto; left: 0; top: 0; overflow: visible; pointer-events: none; }
.netzoom { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); cursor: default; }
.netzoom button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.netzoom button:hover { background: var(--line); }
.netzoom button svg { width: 15px; height: 15px; }
.netzoom span { min-width: 42px; text-align: center; font-size: 11px; color: var(--muted); }

/* Network: organic group shapes */
.ngroup path { fill: hsl(var(--gh) 70% 55% / .14); stroke: hsl(var(--gh) 60% 48% / .55); stroke-width: 1.6; stroke-linejoin: round; }
.nglabel { font-size: 12px; font-weight: 600; letter-spacing: .02em; fill: hsl(var(--gh) 50% 36%); }
:root[data-theme="dark"] .ngroup path { fill: hsl(var(--gh) 60% 60% / .16); stroke: hsl(var(--gh) 60% 65% / .6); }
:root[data-theme="dark"] .nglabel { fill: hsl(var(--gh) 70% 78%); }

/* Network: tidy controls panel and generic filters */
.net-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 14px 16px; margin-bottom: 12px; }
.net-group { display: grid; gap: 6px; }
.net-group > :not(.net-lbl) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.net-group { grid-auto-flow: row; }
.net-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.net-panel .qf-select { max-width: 220px; }
.net-reset { margin-left: auto; align-self: flex-end; }
.net-filters { margin-bottom: 12px; }
.net-ftabs { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.net-fchips .chip small { opacity: .7; margin-right: 2px; }

/* Tables: editable cells and the column chooser */
.tbl.editing td.cell-edit { cursor: text; outline: 1px dashed transparent; outline-offset: -3px; transition: outline-color .15s, background .15s; }
.tbl.editing td.cell-edit:hover { outline-color: var(--muted); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.tbl td input[data-cell-input], .tbl td select[data-cell-input] { width: 100%; min-width: 110px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--brand); background: var(--card-solid); color: var(--ink); font: inherit; font-size: 13px; }
.cols-panel { margin-bottom: 12px; }
.col-chip .chip-x { opacity: .75; }
.col-chip .chip-x:disabled { opacity: .25; cursor: default; }

/* Network shape tags: light and thin (the generic svg icon stroke made the text look bold) */
.netsvg text.nglabel { stroke: none; paint-order: normal; font-family: var(--font); font-size: 11px; font-weight: 400; letter-spacing: .03em; fill: hsl(var(--gh) 35% 42%); opacity: .85; }
:root[data-theme="dark"] .netsvg text.nglabel { fill: hsl(var(--gh) 50% 80%); }

.net-slider { width: 150px; accent-color: var(--brand, var(--ink)); }
.net-lbl b { font-weight: 600; margin-left: 4px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }

/* Network: names can be hidden (they still show on hover) */
.netmap.no-names .nlabel { display: none; }
.netmap.no-names .nnode:hover .nlabel, .netmap.no-names .nnode.dragging .nlabel { display: block; }

.legend-row .sw.ring { background: transparent; border: 3px solid; border-radius: 50%; width: 12px; height: 12px; box-sizing: border-box; }
.net-ringleg b { font-weight: 600; color: var(--ink-2); }

/* Tidy similar values */
.td-list { display: grid; gap: 8px; margin-top: 6px; }
.td-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.td-row > input[type="checkbox"] { margin-top: 4px; accent-color: var(--brand); }
.td-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.td-variants { display: flex; flex-wrap: wrap; gap: 6px; }
.td-canon { display: flex; align-items: center; gap: 8px; }
.td-canon small { color: var(--muted); white-space: nowrap; }
.td-canon input { flex: 1; min-width: 0; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); padding: 0 10px; font: inherit; font-size: 13px; }

.td-var { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; cursor: pointer; }
.td-var input { accent-color: var(--brand); }

/* Network in 3D */
.net3d { position: relative; width: 100%; height: clamp(440px, 70vh, 780px); border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #15333a 0%, #0b1a1e 60%, #070f12 100%); }
.net3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.net3d-ui { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.net3d-ui button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 18, 20, .6); color: #fff; font: inherit; font-size: 12px; cursor: pointer; backdrop-filter: blur(6px); }
.net3d-ui button.on { background: rgba(70, 240, 228, .25); border-color: rgba(70, 240, 228, .6); }
.net3d-key { position: absolute; left: 14px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: rgba(255, 255, 255, .8); font-size: 12px; z-index: 3; pointer-events: none; }
.net3d-key span { display: inline-flex; align-items: center; gap: 6px; }
.net3d-key i { width: 11px; height: 11px; display: inline-block; box-shadow: 0 0 10px currentColor; }
.net3d-key b { font-weight: 400; opacity: .6; }

/* Documents: the shared templates and the project files are separate full-width blocks */
.doc-block { width: 100%; box-sizing: border-box; }
.doc-block-files { margin-top: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.35); }

.doc-slot-add { display: flex; align-items: center; justify-content: center; min-height: 96px; border: 1.5px dashed var(--line); border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; }
.doc-slot-add:hover { background: rgba(255, 255, 255, 0.5); color: var(--ink); border-color: var(--muted); }
.doc-slot-add svg { width: 28px; height: 28px; }

.doc-slot { position: relative; }
.doc-slot-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; line-height: 1; font-size: 16px; }

/* ---- More motion backgrounds (Settings → Appearance → Background) ---- */
html[data-bg="aurora"] .bg .blob, html[data-bg="mesh"] .bg .blob,
html[data-bg="bubbles"] .bg .blob, html[data-bg="waves"] .bg .blob { display: none; }
html[data-bg="aurora"] .bg::before, html[data-bg="aurora"] .bg::after,
html[data-bg="mesh"] .bg::before, html[data-bg="mesh"] .bg::after,
html[data-bg="bubbles"] .bg::before,
html[data-bg="waves"] .bg::before, html[data-bg="waves"] .bg::after { content: ''; position: absolute; pointer-events: none; will-change: transform; }

/* Aurora: two ribbons of light sweeping slowly across */
html[data-bg="aurora"] .bg::before { inset: -40%; filter: blur(70px); opacity: .7;
  background: linear-gradient(105deg, transparent 32%, var(--bg-sage) 44%, var(--accent) 50%, var(--bg-warm) 56%, transparent 68%);
  animation: aurora-a 22s ease-in-out infinite alternate; }
html[data-bg="aurora"] .bg::after { inset: -40%; filter: blur(80px); opacity: .16;
  background: linear-gradient(75deg, transparent 38%, var(--brand) 50%, transparent 62%);
  animation: aurora-b 30s ease-in-out infinite alternate; }
@keyframes aurora-a { from { transform: translate3d(-12%, -6%, 0) rotate(-4deg); } to { transform: translate3d(12%, 6%, 0) rotate(5deg); } }
@keyframes aurora-b { from { transform: translate3d(10%, 4%, 0) rotate(6deg); } to { transform: translate3d(-10%, -4%, 0) rotate(-3deg); } }

/* Spinning mesh: a big conic blend of the palette turning slowly, with a soft pulsing glow on top */
html[data-bg="mesh"] .bg::before { left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; filter: blur(110px); opacity: .5;
  background: conic-gradient(from 0deg, var(--bg-sage), var(--bg-warm), var(--accent), var(--bg-sage), var(--brand), var(--bg-warm), var(--bg-sage));
  animation: mesh-spin 70s linear infinite; }
html[data-bg="mesh"] .bg::after { inset: 0; opacity: .6;
  background: radial-gradient(60vmax 40vmax at 20% 30%, var(--bg-sage), transparent), radial-gradient(50vmax 40vmax at 80% 70%, var(--bg-warm), transparent);
  animation: mesh-pulse 18s ease-in-out infinite alternate; }
@keyframes mesh-spin { to { transform: rotate(360deg); } }
@keyframes mesh-pulse { from { opacity: .3; } to { opacity: .75; } }

/* Rising bubbles: three sizes of translucent circles, each tile slides up by exactly one tile height so it loops without a jump */
html[data-bg="bubbles"] .bg::before { inset: 0; filter: blur(1.5px);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0 38%, transparent 41%),
    radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent) 0 38%, transparent 41%),
    radial-gradient(circle, color-mix(in srgb, var(--bg-sage) 95%, transparent) 0 38%, transparent 41%);
  background-size: 180px 180px, 260px 260px, 120px 120px;
  background-position: 20px 40px, 130px 160px, 70px 10px;
  animation: bubbles-rise 46s linear infinite; }
@keyframes bubbles-rise { to { background-position: 20px -140px, 130px -100px, 70px -110px; } }

/* Waves: two layers of rolling waves along the bottom, moving in opposite directions */
html[data-bg="waves"] .bg::before { left: 0; right: 0; bottom: 0; height: 40vh;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 100 350 20 600 60 C850 100 1050 20 1200 60 L1200 120 L0 120 Z' fill='%232f8f87' fill-opacity='.16'/%3E%3C/svg%3E") repeat-x;
  background-size: 1200px 100%; animation: wave-slide 26s linear infinite; }
html[data-bg="waves"] .bg::after { left: 0; right: 0; bottom: 0; height: 30vh;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C200 20 400 100 800 60 C1200 20 1400 100 1600 60 L1600 120 L0 120 Z' fill='%23113d45' fill-opacity='.09'/%3E%3C/svg%3E") repeat-x;
  background-size: 1600px 100%; animation: wave-slide-rev 38s linear infinite; }
@keyframes wave-slide { to { background-position-x: 1200px; } }
@keyframes wave-slide-rev { to { background-position-x: -1600px; } }

/* ---- Glass cards (Settings → Appearance → Card style): two frosted looks for panels and project / contact tiles ---- */
html[data-card="frost"] .card, html[data-card="frost"] .p-card {
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 34px -16px rgba(17, 61, 69, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-card="crystal"] .card, html[data-card="crystal"] .p-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 55%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(38px) saturate(1.9) brightness(1.05); backdrop-filter: blur(38px) saturate(1.9) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 44px -20px rgba(17, 61, 69, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"][data-card="frost"] .card, html[data-theme="dark"][data-card="frost"] .p-card {
  background: rgba(40, 56, 60, 0.45); border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 34px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"][data-card="crystal"] .card, html[data-theme="dark"][data-card="crystal"] .p-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
}

/* Company / Contact switch: a small logo on each side and its own colour (blue for Company, orange for Contact) */
.kind-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.kind-toggle button svg { width: 13px; height: 13px; flex: none; }
.kind-toggle button > span { overflow: hidden; text-overflow: ellipsis; }
.kind-toggle button[data-kind-set="Company"] { color: #2a6fb0; }
.kind-toggle button[data-kind-set="Contact"] { color: #d9772b; }
.kind-toggle button[data-kind-set="Company"].on { background: #2a6fb0; color: #fff; }
.kind-toggle button[data-kind-set="Contact"].on { background: #d9772b; color: #fff; }

/* ---- Even more backgrounds ---- */
html[data-bg="gradient"] .bg .blob, html[data-bg="fireflies"] .bg .blob, html[data-bg="stars"] .bg .blob,
html[data-bg="ripples"] .bg .blob, html[data-bg="lines"] .bg .blob { display: none; }

/* Shifting gradient: a wide gradient of the palette slowly sliding */
html[data-bg="gradient"] .bg {
  background: linear-gradient(120deg, var(--bg-sage), var(--bg), var(--bg-warm), color-mix(in srgb, var(--accent) 22%, var(--bg)), var(--bg-sage));
  background-size: 320% 320%; animation: grad-shift 26s ease-in-out infinite; }
@keyframes grad-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Lava: the usual blobs, bigger and brighter, that stretch and merge */
html[data-bg="lava"] .bg .blob { opacity: .8; filter: blur(55px); animation: lava 18s ease-in-out infinite alternate; }
html[data-bg="lava"] .bg .b3, html[data-bg="lava"] .bg .b4 { opacity: .4; }
html[data-bg="lava"] .bg .b2 { animation-duration: 23s; animation-delay: -6s; }
html[data-bg="lava"] .bg .b3 { animation-duration: 15s; animation-delay: -3s; }
html[data-bg="lava"] .bg .b4 { animation-duration: 27s; animation-delay: -11s; }
@keyframes lava {
  0%   { transform: translate3d(0, 0, 0) scale(1); border-radius: 50% 50% 50% 50%; }
  33%  { transform: translate3d(8vw, -6vh, 0) scale(1.18); border-radius: 62% 38% 46% 54%; }
  66%  { transform: translate3d(-6vw, 7vh, 0) scale(.9); border-radius: 40% 60% 55% 45%; }
  100% { transform: translate3d(4vw, 3vh, 0) scale(1.1); border-radius: 55% 45% 38% 62%; }
}

/* Fireflies: small warm lights, two layers that drift and twinkle */
html[data-bg="fireflies"] .bg::before, html[data-bg="fireflies"] .bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
html[data-bg="fireflies"] .bg::before {
  background-image:
    radial-gradient(circle, rgba(255, 190, 60, .95) 0 1.6px, rgba(255, 190, 60, .28) 2.6px, transparent 7px),
    radial-gradient(circle, rgba(255, 214, 110, .9) 0 1.3px, rgba(255, 214, 110, .25) 2.4px, transparent 6px);
  background-size: 230px 230px, 340px 340px; background-position: 30px 60px, 160px 200px;
  animation: fly-a 70s linear infinite, twinkle 6s ease-in-out infinite alternate; }
html[data-bg="fireflies"] .bg::after {
  background-image: radial-gradient(circle, rgba(255, 170, 50, .9) 0 1.8px, rgba(255, 170, 50, .25) 3px, transparent 8px);
  background-size: 290px 290px; background-position: 120px 30px;
  animation: fly-b 95s linear infinite, twinkle 9s ease-in-out -3s infinite alternate; }
@keyframes fly-a { to { background-position: 260px -170px, -180px -140px; } }
@keyframes fly-b { to { background-position: -170px 320px; } }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

/* Twinkling stars: three sizes of tiny specks that fade in and out */
html[data-bg="stars"] .bg::before, html[data-bg="stars"] .bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
html[data-bg="stars"] .bg::before {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 55%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--ink) 40%, transparent) 0 1.2px, transparent 2px);
  background-size: 110px 110px, 170px 170px; background-position: 14px 22px, 90px 70px; animation: twinkle 4.5s ease-in-out infinite alternate; }
html[data-bg="stars"] .bg::after {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, transparent) 0 1.6px, transparent 2.6px);
  background-size: 240px 240px; background-position: 60px 120px; animation: twinkle 7s ease-in-out -2s infinite alternate; }

/* Ripples: rings spreading out from two points, like drops on water */
html[data-bg="ripples"] .bg::before, html[data-bg="ripples"] .bg::after {
  content: ''; position: absolute; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, transparent 0 36%, color-mix(in srgb, var(--accent) 45%, transparent) 37% 38.2%, transparent 39% 56%, color-mix(in srgb, var(--brand) 40%, transparent) 57% 58.4%, transparent 59.5%);
  animation: ripple 16s ease-out infinite; }
html[data-bg="ripples"] .bg::before { left: 24%; top: 34%; }
html[data-bg="ripples"] .bg::after { left: 74%; top: 68%; animation-delay: -8s; }
@keyframes ripple { from { transform: scale(.02); opacity: .9; } to { transform: scale(1); opacity: 0; } }

/* Moving grid: a fine grid gliding diagonally, faded towards the edges */
html[data-bg="lines"] .bg::before {
  content: ''; position: absolute; inset: -60px; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; animation: grid-glide 14s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 15%, transparent 85%); mask-image: radial-gradient(circle at 50% 40%, #000 15%, transparent 85%); }
@keyframes grid-glide { to { background-position: 56px 56px; } }

/* ---- More card styles ---- */
html[data-card="tint"] .card, html[data-card="tint"] .p-card {
  background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.55));
  box-shadow: 0 12px 34px -16px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="dark"][data-card="tint"] .card, html[data-theme="dark"][data-card="tint"] .p-card {
  background: color-mix(in srgb, var(--accent) 20%, rgba(24, 34, 36, 0.62)); border-color: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, 0.1)); }

html[data-card="smoke"] .card, html[data-card="smoke"] .p-card {
  --ink: #eaf4f2; --ink-2: #c4d6d3; --muted: #93a9a6; --line: rgba(255, 255, 255, 0.12);
  background: rgba(20, 32, 36, 0.58); color: #eaf4f2;
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14); }

html[data-card="glow"] .card, html[data-card="glow"] .p-card {
  background: linear-gradient(var(--card-solid), var(--card-solid)) padding-box, linear-gradient(135deg, var(--accent), var(--brand), var(--bg-sage)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--accent) 65%, transparent); }

html[data-card="soft"] .card, html[data-card="soft"] .p-card {
  background: var(--card-solid); border: 0;
  box-shadow: 8px 8px 18px rgba(17, 61, 69, 0.13), -8px -8px 18px rgba(255, 255, 255, 0.9); }
html[data-theme="dark"][data-card="soft"] .card, html[data-theme="dark"][data-card="soft"] .p-card {
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.5), -6px -6px 14px rgba(255, 255, 255, 0.04); }

html[data-card="outline"] .card, html[data-card="outline"] .p-card {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent); }

/* Hover preview note in Settings → Appearance */
#appearance-hover-note { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 200; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: var(--card-solid); font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); pointer-events: none; }

/* ---- Extra glass on the contact / company / project tiles: a diagonal sheen, a sweep of light on hover, and a glassy avatar ---- */
html[data-card="frost"] .p-card, html[data-card="crystal"] .p-card, html[data-card="tint"] .p-card, html[data-card="smoke"] .p-card { position: relative; overflow: hidden; isolation: isolate; }
html[data-card="frost"] .p-card::before, html[data-card="crystal"] .p-card::before, html[data-card="tint"] .p-card::before, html[data-card="smoke"] .p-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .18) 28%, transparent 46%), radial-gradient(120% 80% at 100% 100%, rgba(255, 255, 255, .24), transparent 60%); }
html[data-card="frost"] .p-card::after, html[data-card="crystal"] .p-card::after, html[data-card="tint"] .p-card::after, html[data-card="smoke"] .p-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transition: left .9s cubic-bezier(.22, 1, .36, 1); }
html[data-card="frost"] .p-card:hover::after, html[data-card="crystal"] .p-card:hover::after, html[data-card="tint"] .p-card:hover::after, html[data-card="smoke"] .p-card:hover::after { left: 130%; }
html[data-theme="dark"][data-card] .p-card::before { background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%), radial-gradient(120% 80% at 100% 100%, rgba(255, 255, 255, .08), transparent 60%); }
html[data-theme="dark"][data-card] .p-card::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); }
/* contact cards get the strongest blur and a glassy, domed avatar */
html[data-card="frost"] .contact-card, html[data-card="crystal"] .contact-card, html[data-card="tint"] .contact-card {
  -webkit-backdrop-filter: blur(34px) saturate(1.7); backdrop-filter: blur(34px) saturate(1.7); }
html[data-card="frost"] .contact-card .av, html[data-card="crystal"] .contact-card .av, html[data-card="tint"] .contact-card .av, html[data-card="smoke"] .contact-card .av {
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35), inset 0 2px 5px rgba(255, 255, 255, .55), inset 0 -4px 10px rgba(0, 0, 0, .14); }

/* Network: one colour per kind of project link (Client, Consultants, Contractor, Came from, Other parties) */
.nedge.role-client { stroke: #2a6fb0; stroke-opacity: .85; stroke-width: 1.8; }
.nedge.role-consultants { stroke: #8a5cc6; stroke-opacity: .85; stroke-width: 1.8; }
.nedge.role-contractor { stroke: #d9772b; stroke-opacity: .85; stroke-width: 1.8; }
.nedge.role-cameFrom { stroke: #2f9e6a; stroke-opacity: .85; stroke-width: 1.8; }
.nedge.role-parties { stroke: #c2517a; stroke-opacity: .85; stroke-width: 1.8; }
.net-panel .chip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* ---- Background colour (Settings → Appearance): every preset is two colours, --ca and --cb, turned into the tints the moving background uses ---- */
html[data-bgcolor="sky"] .bg { --ca: #4a90d9; --cb: #7fb8f0; }
html[data-bgcolor="mint"] .bg { --ca: #34b27b; --cb: #9be0b8; }
html[data-bgcolor="sunset"] .bg { --ca: #f0764a; --cb: #e0588a; }
html[data-bgcolor="lavender"] .bg { --ca: #8a5cc6; --cb: #d08ad0; }
html[data-bgcolor="ocean"] .bg { --ca: #1fa3c4; --cb: #5bd0d8; }
html[data-bgcolor="gold"] .bg { --ca: #e0a82e; --cb: #f0c98a; }
html[data-bgcolor]:not([data-bgcolor="palette"]) .bg {
  --bg: color-mix(in srgb, var(--ca, #7fd1c4) 8%, #fff);
  --bg-sage: color-mix(in srgb, var(--ca, #7fd1c4) 30%, #fff);
  --bg-warm: color-mix(in srgb, var(--cb, #f2c9a0) 28%, #fff);
  --accent: var(--ca, #7fd1c4); --brand: var(--cb, #f2c9a0);
}
html[data-theme="dark"][data-bgcolor]:not([data-bgcolor="palette"]) .bg {
  --bg: color-mix(in srgb, var(--ca, #7fd1c4) 8%, #0f181a);
  --bg-sage: color-mix(in srgb, var(--ca, #7fd1c4) 34%, #0f181a);
  --bg-warm: color-mix(in srgb, var(--cb, #f2c9a0) 30%, #0f181a);
}
.chip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* ---- Contact cards in the glass styles: keep the white fade behind the details so the text is easy to read.
   (The glass sheen used the same ::before, which replaced the fade and left the text on top of the photo.) ---- */
html[data-card="frost"] .contact-card.has-bg::before, html[data-card="crystal"] .contact-card.has-bg::before, html[data-card="tint"] .contact-card.has-bg::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .45) 0%, transparent 28%),
              linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 24%, rgba(255, 255, 255, .92) 44%, rgba(255, 255, 255, .98) 100%); }
html[data-theme="dark"][data-card] .contact-card.has-bg::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 28%),
              linear-gradient(180deg, rgba(20, 28, 30, 0) 0%, rgba(20, 28, 30, .4) 24%, rgba(20, 28, 30, .9) 44%, rgba(20, 28, 30, .97) 100%); }
html[data-card="smoke"] .contact-card.has-bg::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 28%),
              linear-gradient(180deg, rgba(20, 28, 30, 0) 0%, rgba(20, 28, 30, .4) 24%, rgba(20, 28, 30, .9) 44%, rgba(20, 28, 30, .97) 100%); }
/* the white glow behind small text suits the light cards; the smoked cards use a dark one */
html[data-card="smoke"] .contact-card.has-bg h3, html[data-card="smoke"] .contact-card.has-bg .sub, html[data-card="smoke"] .contact-card.has-bg .contact-line, html[data-card="smoke"] .contact-card.has-bg .p-foot { text-shadow: 0 0 10px rgba(20, 28, 30, .9); }

/* ---- Photo hover effects (Settings → Appearance → Photo hover effect): contact / company photos on cards and in their profile ---- */
:is(.p-card, .contact-hero, .sheet-head) .av { position: relative; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease; }
/* Glass shine: a pane of light sweeps across the photo, and the photo gets a glassy rim while hovered */
html[data-photofx="shine"] :is(.p-card, .contact-hero, .sheet-head) .av { overflow: hidden; isolation: isolate; }
html[data-photofx="shine"] :is(.p-card, .contact-hero, .sheet-head) .av::after {
  content: ''; position: absolute; inset: -10%; pointer-events: none; z-index: 2; border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .85) 47%, rgba(255, 255, 255, .3) 54%, transparent 68%);
  transform: translateX(-130%); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
html[data-photofx="shine"] :is(.p-card, .contact-hero, .sheet-head) .av::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; opacity: 0; transition: opacity .4s ease;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), inset 0 8px 18px rgba(255, 255, 255, .32), inset 0 -10px 18px rgba(0, 0, 0, .12);
  background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .38), transparent 60%); }
html[data-photofx="shine"] .p-card:hover .av::after, html[data-photofx="shine"] .contact-hero:hover .av::after, html[data-photofx="shine"] .sheet-head .av:hover::after { transform: translateX(130%); }
html[data-photofx="shine"] .p-card:hover .av::before, html[data-photofx="shine"] .contact-hero:hover .av::before, html[data-photofx="shine"] .sheet-head .av:hover::before { opacity: 1; }
/* Zoom */
html[data-photofx="zoom"] .p-card:hover .av, html[data-photofx="zoom"] .sheet-head .av:hover { transform: scale(1.1); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); }
html[data-photofx="zoom"] .contact-hero .av { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
html[data-photofx="zoom"] .contact-hero:hover .av { transform: scale(1.08); }
/* Pulse ring */
html[data-photofx="ring"] .p-card:hover .av, html[data-photofx="ring"] .sheet-head .av:hover { animation: photo-ring 1.5s ease-out infinite; }
@keyframes photo-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* Glow */
html[data-photofx="glow"] .p-card:hover .av, html[data-photofx="glow"] .sheet-head .av:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent), 0 8px 28px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- Card hover effects (Settings → Appearance → Card hover effect). Lift is the existing behaviour. ---- */
html[data-cardfx="none"] .p-card:hover { transform: none; }
html[data-cardfx="glow"] .p-card:hover { transform: translateY(-3px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 20px 50px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-cardfx="tilt"] .p-card { transform-style: preserve-3d; }
html[data-cardfx="tilt"] .p-card:hover { transition: transform .12s ease-out, box-shadow .3s ease;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) scale(1.02);
  box-shadow: 0 24px 44px -20px rgba(17, 61, 69, .5); }
@media (prefers-reduced-motion: reduce) { html[data-cardfx="tilt"] .p-card:hover { transform: none; } }

/* Drag left / right to roll through the photos (carousel galleries and cover slideshows) */
.cover-slider, [data-gkey][data-kind] { touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
.cover-slider.swiping, [data-gkey][data-kind].swiping { cursor: grabbing; }
.cover-slider img, [data-gkey][data-kind] img { -webkit-user-drag: none; }
.lightbox-img { cursor: grab; }

/* Network: every kind of node has its own shape (person: circle, company: rounded square, project: leaf) */
.legend-row .shp { display: inline-block; width: 12px; height: 12px; margin-right: 5px; background: var(--muted); vertical-align: -1px; }

/* Small profile picture / logo next to a company or person named on a project */
.av.xs { width: 22px; height: 22px; font-size: 9px; border: 0; margin: 0; flex: none; }
.party { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; vertical-align: middle; margin: 1px 6px 1px 0; }
a.party[data-act]:hover { text-decoration: underline; }
.detail-grid .party .av { display: inline-grid; color: #fff; font-size: 9px; }

/* Network: the small x that hides a node from the map (appears on hover) */
.nnode .nhide { position: absolute; top: -7px; left: 50%; margin-left: calc(var(--fs, 40px) / 2 - 8px); width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1; font-weight: 700; color: #fff; background: rgba(20, 28, 30, .78); opacity: 0; transform: scale(.7);
  transition: opacity .15s, transform .15s; z-index: 6; cursor: pointer; }
.nnode:hover .nhide, .nnode:focus-visible .nhide { opacity: 1; transform: scale(1); }
.nnode .nhide:hover { background: var(--red, #c0392b); }

/* Zoomed-in preview of the small logo / picture beside a name in the project details */
#logo-zoom { position: fixed; z-index: 300; width: 200px; height: 200px; border-radius: 24px; pointer-events: none; display: none; place-items: center;
  background: hsl(var(--hue, 30) 28% 52%) center / cover no-repeat; color: #fff; font-size: 64px; font-weight: 600;
  box-shadow: 0 28px 64px -14px rgba(0, 0, 0, .5), 0 0 0 4px var(--card-solid); }
#logo-zoom.on { display: grid; animation: logo-zoom-in .18s cubic-bezier(.22, 1, .36, 1); }
#logo-zoom[data-fit="logo"] { background-color: var(--card-solid); background-size: contain; background-origin: content-box; padding: 14px; box-sizing: border-box; }
@keyframes logo-zoom-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* Network looks: Neural (glowing cells joined by firing links) and Mind map (branches around the middle) */
.nedge.off { display: none; }
.netmap.neural { background-color: #070b1a; background-image: radial-gradient(rgba(120, 200, 255, .16) 1px, transparent 1px); }
.netmap.neural .nedge { stroke: #5cc8ff; stroke-opacity: .5; stroke-width: 1.1; stroke-dasharray: 2 10; animation: nflow 1.4s linear infinite; filter: drop-shadow(0 0 3px #5cc8ff); }
.netmap.neural .nedge.member, .netmap.neural .nedge.proj { stroke: #c77dff; filter: drop-shadow(0 0 3px #c77dff); }
.netmap.neural .nedge[class*="role-"] { stroke-width: 1.6; stroke-opacity: .9; }
.netmap.neural .nnode .nface { border-radius: 50% !important; box-shadow: 0 0 0 2px var(--ring, #5cc8ff), 0 0 18px 4px color-mix(in srgb, var(--ring, #5cc8ff) 65%, transparent); }
.netmap.neural .nnode .nlabel { color: #cfe9ff; background: rgba(7, 11, 26, .7); }
.netmap.mindmap .nedge { stroke-width: 2.2; stroke-opacity: .55; stroke-dasharray: none; animation: none; }
.netmap.mindmap .nnode .nlabel { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .netmap.neural .nedge { animation: none; } }
.netmap.neural .nedge, .netmap.mindmap .nedge { animation: none !important; }
.netmap.neural .nnode, .netmap.mindmap .nnode, .netmap.neural .nnode .nface, .netmap.mindmap .nnode .nface { animation: none !important; }

/* Project views: Gallery (large covers), Timeline (by year) and Sectors (a strip per sector) */
.proj-groups { display: grid; gap: 26px; }
.proj-groups .pg-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; }
.proj-groups .pg-h small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.proj-groups .pg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.proj-groups .pg-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
.proj-groups .pg-strip .proj-tile { flex: 0 0 260px; scroll-snap-align: start; }
.proj-groups.timeline .pg { position: relative; padding-left: 28px; border-left: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); margin-left: 6px; }
.proj-groups.timeline .pg-h { margin-left: -41px; }

/* Projects: the three 3D views (Ring, Helix, Flow) */
.p3d { display: grid; gap: 16px; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.p3d-stage { position: relative; perspective: 1500px; perspective-origin: 50% 40%; height: clamp(440px, 62vh, 600px); display: grid; place-items: center; overflow: hidden; border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), color-mix(in srgb, var(--card-solid) 70%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.p3d-floor { position: absolute; left: 50%; bottom: 7%; width: 62%; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); filter: blur(6px); pointer-events: none; }
.p3d-ring { position: relative; width: 260px; height: 350px; transform-style: preserve-3d; }
.p3d-item { position: absolute; inset: 0; backface-visibility: hidden; cursor: pointer; transition: filter .4s; filter: brightness(.82) saturate(.9); }
.p3d-item.front { filter: none; }
.p3dv-flow .p3d-item { backface-visibility: visible; transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .65s, filter .4s; }
.p3d-card { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background: var(--card-solid); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14) inset; transition: box-shadow .4s, transform .4s; }
.p3d-item.front .p3d-card { box-shadow: 0 26px 54px -12px rgba(0, 0, 0, .55), 0 0 0 2px color-mix(in srgb, var(--brand) 70%, #fff), 0 0 34px color-mix(in srgb, var(--brand) 45%, transparent); }
.p3d-item:hover .p3d-card { transform: translateY(-6px); }
.p3d-card img, .p3d-card .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; background: hsl(var(--hue, 200) 28% 48%); color: rgba(255, 255, 255, .8); }
.p3d-card .ph svg { width: 56px; height: 56px; }
.p3d-card .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 12, 20, .88) 0%, rgba(8, 12, 20, .25) 46%, transparent 70%); }
.p3d-card .p3d-st { position: absolute; top: 12px; left: 12px; }
.p3d-card .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; display: grid; gap: 3px; }
.p3d-card .cap h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.p3d-card .cap small { opacity: .8; }
.p3d-info { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: color-mix(in srgb, var(--card-solid) 80%, transparent); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); cursor: default; }
.p3d-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.p3d-meta b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3d-meta span { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3d-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.p3d-arrow { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
/* the opening effect */
.p3d-fly { position: fixed; z-index: 400; background: center / cover no-repeat var(--brand); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); pointer-events: none; transition: left .56s cubic-bezier(.65, 0, .2, 1), top .56s cubic-bezier(.65, 0, .2, 1), width .56s cubic-bezier(.65, 0, .2, 1), height .56s cubic-bezier(.65, 0, .2, 1), border-radius .56s, opacity .42s; }
.p3d-fly.go { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
.p3d-fly.done { opacity: 0; }
@media (max-width: 640px) { .p3d-info { flex-wrap: wrap; } .p3d-meta { flex-basis: 100%; order: -1; } }

/* 3D views: always the full width of the page, and a full-screen mode */
.p3d { width: 100%; min-width: 0; box-sizing: border-box; }
.p3d-stage { width: 100%; }
.p3d-arrow { display: inline-grid; place-items: center; flex: 0 0 40px; }
.p3d-count { white-space: nowrap; }
.p3d:fullscreen { padding: 18px; background: var(--bg, #f0f0ee); grid-template-rows: 1fr auto; height: 100vh; }
.p3d:fullscreen .p3d-stage { height: auto; min-height: 0; }
.p3d-fly { z-index: 2147483000; }

/* 3D space: projects floating in a starfield */
.p3dv-space .p3d-stage { perspective: 1100px; perspective-origin: 50% 50%; height: clamp(520px, 74vh, 720px);
  background: radial-gradient(ellipse at 50% 120%, rgba(90, 60, 200, .35), transparent 60%), radial-gradient(ellipse at 20% 0%, rgba(40, 120, 220, .25), transparent 55%), #05060f;
  border-color: rgba(255, 255, 255, .08); }
.p3dv-space .p3d-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; animation: p3d-twinkle 6s ease-in-out infinite alternate;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 33% 68%, #cfe3ff, transparent), radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent), radial-gradient(1px 1px at 77% 52%, #ffe9c9, transparent), radial-gradient(1.2px 1.2px at 90% 80%, #fff, transparent), radial-gradient(1px 1px at 46% 90%, #cfe3ff, transparent), radial-gradient(1px 1px at 5% 75%, #fff, transparent), radial-gradient(1.2px 1.2px at 68% 33%, #fff, transparent);
  background-size: 340px 300px; }
.p3dv-space .p3d-floor { display: none; }
.p3dv-space .p3d-item { filter: none; transition: opacity .4s, filter .4s; }
.p3dv-space .p3d-card { animation: p3d-bob 5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.p3dv-space .p3d-item:hover .p3d-card { animation-play-state: paused; filter: brightness(1.12); }
.p3dv-space .p3d-item:not(.front) .p3d-card { box-shadow: 0 0 22px rgba(120, 160, 255, .22), 0 0 0 1px rgba(255, 255, 255, .16) inset; }
@keyframes p3d-bob { from { transform: translateY(-9px) rotate(-.6deg); } to { transform: translateY(9px) rotate(.6deg); } }
@keyframes p3d-twinkle { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .p3dv-space .p3d-card, .p3dv-space .p3d-stage::before { animation: none; } }

.p3d-speed { gap: 16px; }
.p3d-slider { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.p3d-slider input { flex: 1; min-width: 80px; accent-color: var(--brand); cursor: pointer; }
.p3d-slider b { min-width: 38px; color: var(--ink, inherit); font-variant-numeric: tabular-nums; }
.p3d-speed .p3d-count { white-space: normal; text-align: right; }
@media (max-width: 640px) { .p3d-speed { flex-wrap: wrap; } .p3d-speed .p3d-count { display: none; } }

.p3dv-space .p3d-item { cursor: grab; }
.p3d-item.moving { cursor: grabbing; z-index: 5; }
.p3d-item.moving .p3d-card { animation: none; box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 0 2px var(--brand); }
.p3d-pop { position: fixed; z-index: 2147483001; width: 280px; border-radius: 18px; overflow: hidden; background: var(--card-solid); color: var(--ink, inherit); pointer-events: none;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(128, 128, 128, .25); animation: logo-zoom-in .18s cubic-bezier(.22, 1, .36, 1); }
.p3d-pop-img { display: block; width: 100%; height: 170px; object-fit: cover; }
.p3d-pop-img.ph { display: grid; place-items: center; background: hsl(var(--hue, 200) 28% 48%); color: rgba(255, 255, 255, .85); }
.p3d-pop-img.ph svg { width: 48px; height: 48px; }
.p3d-pop-body { display: grid; gap: 6px; padding: 12px 14px 14px; justify-items: start; }
.p3d-pop-body b { font-size: 1.02rem; line-height: 1.25; }
.p3d-pop-body b small { color: var(--muted); font-weight: 500; }
.p3d-pop-body p { margin: 0; font-size: .85rem; }
.p3d-pop-hint { color: var(--muted); margin-top: 2px; }

/* 3D views: card size, background choices and the look bar */
.p3d-ring { width: calc(260px * var(--p3d-s, 1)); height: calc(350px * var(--p3d-s, 1)); }
.p3d[data-bg] .p3d-stage { background: var(--p3d-bg, none); border-color: color-mix(in srgb, var(--brand) 14%, transparent); }
.p3d[data-bg="light"] .p3d-stage { --p3d-bg: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), color-mix(in srgb, var(--card-solid) 70%, transparent); }
.p3d[data-bg="studio"] .p3d-stage { --p3d-bg: radial-gradient(ellipse at 50% 35%, #ffffff, #c4cad2 85%); }
.p3d[data-bg="space"] .p3d-stage { --p3d-bg: radial-gradient(ellipse at 50% 120%, rgba(90, 60, 200, .35), transparent 60%), radial-gradient(ellipse at 20% 0%, rgba(40, 120, 220, .25), transparent 55%), #05060f; border-color: rgba(255, 255, 255, .08); }
.p3d[data-bg="midnight"] .p3d-stage { --p3d-bg: radial-gradient(ellipse at 50% 0%, #1b2130, #0b0d12 75%); border-color: rgba(255, 255, 255, .08); }
.p3d[data-bg="aurora"] .p3d-stage { --p3d-bg: radial-gradient(ellipse at 15% 90%, rgba(16, 185, 129, .55), transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(139, 92, 246, .6), transparent 55%), #0b1224; border-color: rgba(255, 255, 255, .08); }
.p3d[data-bg="sunset"] .p3d-stage { --p3d-bg: linear-gradient(165deg, #ffc46b 0%, #ef5b7b 52%, #4b2a86 100%); border-color: transparent; }
.p3d[data-bg="blueprint"] .p3d-stage { --p3d-bg: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 34px 34px, #17388a; border-color: rgba(255, 255, 255, .12); }
.p3d:not([data-bg="space"]) .p3d-stage::before { display: none; }
.p3d-look { gap: 16px; flex-wrap: wrap; }
.p3d-lbl { color: var(--muted); font-size: .85rem; }
.p3d-bgs { display: flex; gap: 8px; }
.p3d-bg { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(128, 128, 128, .45); cursor: pointer; transition: transform .15s; }
.p3d-bg:hover { transform: scale(1.12); }
.p3d-bg.on { border-color: var(--card-solid); box-shadow: 0 0 0 2px var(--brand); }

/* Ctrl+K / S window: the row Enter will open */
.gs-row.gs-active { background: color-mix(in srgb, var(--brand) 14%, transparent); box-shadow: inset 3px 0 0 var(--brand); }

/* Fees & invoices */
.fin-kpis { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin: 8px 0 12px; }
.fin-kpis div { display: grid; gap: 2px; }
.fin-kpis small { color: var(--muted); font-size: .75rem; }
.fin-kpis b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* Gantt view */
.gantt { padding: 0; overflow: hidden; }
.g-scroll { overflow-x: auto; }
.g-inner { padding: 8px 0; }
.g-head, .g-row { display: grid; grid-template-columns: 230px 1fr; align-items: center; }
.g-row { cursor: pointer; transition: background .15s; }
.g-row:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.g-name { position: sticky; left: 0; z-index: 2; padding: 6px 12px; background: var(--card-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.g-name small { color: var(--muted); }
.g-track { position: relative; height: 34px; margin-right: 16px; }
.g-head .g-track { height: 22px; }
.g-year { position: absolute; top: 0; font-size: .75rem; color: var(--muted); padding-left: 4px; }
.g-line { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.g-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e0463b; z-index: 1; }
.g-bar { position: absolute; top: 7px; height: 20px; border-radius: 10px; min-width: 8px; background: #7d8a8c; color: #fff; font-size: .7rem; line-height: 20px; padding: 0 8px; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.g-bar.tone-green { background: #2f9e6a; } .g-bar.tone-yellow { background: #d99b00; } .g-bar.tone-red { background: #c0392b; } .g-bar.tone-dark { background: #113d45; }
.g-bar.est { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); opacity: .85; }

/* Map view */
.pmap-card { padding: 0; overflow: hidden; }
.pmap { height: clamp(420px, 66vh, 700px); background: color-mix(in srgb, var(--card-solid) 80%, #888); }

/* Network: path finder */
.netmap.has-path .nnode:not(.on-path) { opacity: .22; }
.netmap.has-path .nedge:not(.on-path) { opacity: .1; }
.nedge.on-path { stroke: #f59e0b !important; stroke-width: 3.6 !important; stroke-opacity: 1 !important; stroke-dasharray: none !important; }
.nnode.on-path .nface { box-shadow: 0 0 0 3px #f59e0b, 0 0 18px #f59e0b; }

/* Keyboard focus */
[role="button"][tabindex]:focus-visible, .p3d-item:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 12px; }

/* Printable project sheets: only the sheet is printed */
#print-root { display: none; }
@page { margin: 14mm; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  body.printing { background: #fff !important; }
  .sheet-page { page-break-after: always; font-family: "DM Sans", Arial, sans-serif; color: #111; }
  .sheet-page:last-child { page-break-after: auto; }
  .sheet-page header { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #555; border-bottom: 2px solid #113d45; padding-bottom: 6px; margin-bottom: 14px; }
  .sheet-page h1 { font-size: 26px; margin: 14px 0 10px; }
  .sheet-page h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #113d45; margin: 16px 0 4px; }
  .sheet-page p, .sheet-page li { font-size: 12.5px; line-height: 1.5; }
  .sp-cover { width: 100%; max-height: 95mm; object-fit: cover; border-radius: 6px; }
  .sp-facts { border-collapse: collapse; width: 100%; font-size: 12px; }
  .sp-facts th { text-align: left; width: 28%; color: #555; font-weight: 600; padding: 3px 8px 3px 0; vertical-align: top; }
  .sp-facts td { padding: 3px 0; border-bottom: 1px solid #e3e6e3; }
  .sp-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
  .sp-imgs img { width: 100%; height: 40mm; object-fit: cover; border-radius: 4px; }
}

/* Small screens */
@media (max-width: 640px) {
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .qf-select, .toolbar select { flex: 1 1 46%; min-width: 0; }
  .toolbar .btn { flex: 1 1 auto; }
  .toolbar .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .net-panel .net-group { flex-wrap: wrap; }
  .net-panel select { max-width: 100%; }
  .p3d-info, .p3d-look { flex-wrap: wrap; }
  .p3d-slider { flex: 1 1 100%; }
  .g-head, .g-row { grid-template-columns: 150px 1fr; }
  .overlay .sheet { width: 100%; max-width: 100vw; margin: 0; }
  .proj-groups .pg-strip .proj-tile { flex-basis: 200px; }
  .h-title { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}

/* Map: placing projects */
.pmap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; }
.pmap-bar .search { flex: 1 1 260px; max-width: 380px; }
.pmap.placing { cursor: crosshair; outline: 3px solid var(--brand); outline-offset: -3px; }
.pmap.placing .leaflet-grab { cursor: crosshair; }
.pmap-dot i { display: block; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.pmap-none { padding: 4px 12px 14px; }
.pmap-chip { display: inline-flex; align-items: center; gap: 8px; }
.pmap-chip.on { outline: 2px solid var(--brand); }

/* Map pins: round photos, groups, and the hover preview */
.pmap-pin-wrap { background: none; border: 0; }
.pmap-pin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #7d8a8c; background: #7d8a8c center / cover no-repeat; color: #fff; font: 700 18px/38px "DM Sans", sans-serif; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s; }
.pmap-pin-wrap:hover .pmap-pin { transform: scale(1.35); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.pmap-group { position: relative; width: 56px; height: 56px; }
.pmap-group i { position: absolute; top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: center / cover no-repeat #7d8a8c; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.pmap-group b { position: absolute; right: 0; bottom: 0; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #113d45; color: #fff; font: 700 12px/24px "DM Sans", sans-serif; text-align: center; border: 2px solid #fff; box-sizing: border-box; }
.pmap-pin-wrap:hover .pmap-group { transform: scale(1.12); transition: transform .18s; }
.leaflet-tooltip.pmap-tip { padding: 0; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); white-space: normal; }
.leaflet-tooltip.pmap-tip::before { display: none; }
.pmap-card-tip { display: grid; gap: 4px; width: 230px; padding: 0 0 10px; font-family: "DM Sans", sans-serif; color: #1d2b2e; }
.pmap-card-tip img { width: 100%; height: 130px; object-fit: cover; display: block; }
.pmap-card-tip > b, .pmap-card-tip > span, .pmap-card-tip > em { padding: 0 12px; }
.pmap-card-tip > b { margin-top: 8px; font-size: 14px; }
.pmap-card-tip > b small { color: #6b7a7d; font-weight: 500; }
.pmap-card-tip > span { font-size: 12px; color: #4b5a5d; }
.pmap-card-tip > .pill { width: fit-content; margin: 0 12px; }
.pmap-card-tip > em { font-size: 11px; color: #6b7a7d; margin-top: 4px; }
.pmap-pop img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }

/* Pick the exact spot on the map */
.geo-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 14, 16, .6); display: grid; place-items: center; padding: 16px; }
.geo-box { width: min(980px, 100%); height: min(680px, 92vh); display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--card-solid); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.geo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.geo-bar .search { flex: 1 1 260px; max-width: 360px; }
#geo-map { width: 100%; height: 100%; min-height: 300px; }

/* Google Maps card on the project page */
.gmap-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(128, 128, 128, .25); }
.gmap-frame iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Notes timeline, phases, 3D jump box, portfolio cover */
.tl-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.tl-add .grow { flex: 1 1 200px; min-width: 0; }
.tl-list { display: grid; gap: 4px; border-left: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); margin-left: 6px; }
.tl-item { display: flex; gap: 10px; align-items: flex-start; padding: 4px 4px 4px 14px; position: relative; }
.tl-item p { margin: 2px 0 0; }
.tl-dot { position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: #7d8a8c; border: 2px solid var(--card-solid); }
.tl-dot.tl-Call { background: #2f9e6a; } .tl-dot.tl-Meeting { background: #2a6fb0; } .tl-dot.tl-Email { background: #d9772b; }
.g-phase { position: absolute; bottom: 3px; height: 5px; border-radius: 3px; background: #2a6fb0; opacity: .9; }
.g-phase.c1 { background: #2f9e6a; } .g-phase.c2 { background: #d9772b; } .g-phase.c3 { background: #8a5cc6; } .g-phase.c4 { background: #c2517a; } .g-phase.c5 { background: #16a3a3; }
.p3d-jump { width: 150px; }
@media print { .sp-title { padding-top: 50mm; } .sp-title h1 { font-size: 34px; } .sp-title ol { columns: 2; font-size: 13px; line-height: 1.7; } }

@media (max-width: 640px) {
  .topbar .tabs { flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 190px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .topbar .tabs::-webkit-scrollbar { display: none; }
  .topbar .tabs > * { flex: 0 0 auto; }
  .brand span:not(.logo) { display: none; }
}
@media (max-width: 640px) {
  .topbar .sync-pill { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
  .topbar .tabs { max-width: calc(100vw - 170px); }
}

/* Drop files onto Documents and Project files */
[data-fdrop].over { outline: 2px dashed var(--brand); outline-offset: 3px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, transparent); transition: background .12s; }
.doc-slot[data-fdrop].over::after { content: "Drop to add here"; position: absolute; inset: auto 10px 8px auto; font-size: 11px; font-weight: 600; color: var(--brand); }
.doc-slot { position: relative; }

/* Compact document rows: a small type badge, a short name (the full name shows on hover), icon buttons */
.doc-slot .doc-row { gap: 6px; padding: 4px 0; align-items: center; flex-wrap: nowrap; }
.doc-ext { flex: 0 0 auto; min-width: 30px; padding: 2px 4px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.doc-name { min-width: 0; }
.doc-name b { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row .ib.sm { flex: 0 0 auto; width: 26px; height: 26px; }
.doc-row .ib.sm svg { width: 14px; height: 14px; }

/* DWG / DXF viewer */
.dwg-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 14, 16, .65); display: grid; place-items: center; padding: 14px; }
.dwg-box { width: min(1400px, 100%); height: 94vh; display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: var(--card-solid); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.dwg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.dwg-title { max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwg-main { position: relative; min-height: 0; }
.dwg-canvas { width: 100%; height: 100%; display: block; background: #fff; cursor: grab; touch-action: none; }
.dwg-canvas.grabbing { cursor: grabbing; }
.dwg-layers { position: absolute; top: 10px; right: 10px; max-height: calc(100% - 20px); width: 230px; overflow: auto; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card-solid) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
.dwg-layer { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; cursor: pointer; }
.dwg-layer i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.doc-slot { min-width: 0; overflow: hidden; }
.doc-slot .list, .doc-slot .doc-row { min-width: 0; }

/* Cover photos shown again lower on the page, as a collage (the same files, not copies) */
.cover-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; grid-auto-flow: dense; gap: 8px; margin-top: 8px; }
.cm-item { position: relative; overflow: hidden; border-radius: 14px; cursor: zoom-in; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.cm-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.cm-item:hover img { transform: scale(1.06); }
.cm-item.cm0 { grid-column: span 2; grid-row: span 2; }
.cm-item.cm3 { grid-column: span 2; }
.cm-item.cm4 { grid-row: span 2; }
.cover-mosaic.n1 .cm0 { grid-column: span 4; grid-row: span 2; }
.cover-mosaic.n2 .cm0, .cover-mosaic.n2 .cm1 { grid-column: span 2; grid-row: span 2; }
.cover-mosaic.n3 .cm0 { grid-column: span 2; grid-row: span 2; } .cover-mosaic.n3 .cm1, .cover-mosaic.n3 .cm2 { grid-column: span 2; }
@media (max-width: 640px) { .cover-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; } .cm-item.cm0 { grid-column: span 2; } .cm-item.cm3 { grid-column: span 2; } .cover-mosaic.n1 .cm0 { grid-column: span 2; } }
.gallery-item-cover { position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; border: 2px solid var(--card-solid); padding: 0; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; opacity: 0; transform: scale(.75); transition: opacity .15s, transform .15s; }
.gallery-item-cover svg { width: 12px; height: 12px; }
.gallery-item:hover .gallery-item-cover, .gallery.editing .gallery-item-cover { opacity: 1; transform: scale(1); }
.hk { flex: 0 0 auto; min-width: 150px; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--muted) 16%, transparent); font: 600 12px "DM Sans", sans-serif; white-space: nowrap; }

/* Projects as a moving collage */
.pcollage { display: grid; gap: 10px; }
.pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pc-wall { display: flex; gap: 12px; height: min(78vh, 820px); overflow: hidden; border-radius: 20px; -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.pc-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.pc-track { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; animation: pc-up calc(var(--d) / var(--sp, 1)) linear infinite; will-change: transform; }
.pc-col.down .pc-track { animation-name: pc-down; }
.pc-col:hover .pc-track, .pcollage.paused .pc-track { animation-play-state: paused; }
@keyframes pc-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pc-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.pc-tile { position: relative; flex: 0 0 auto; border-radius: 18px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--muted) 18%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.pc-tile img, .pc-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pc-ph { display: grid; place-items: center; font-size: 34px; font-weight: 700; color: rgba(255, 255, 255, .85); background: hsl(var(--hue, 200) 28% 46%); }
.pc-tile:hover img, .pc-tile:hover .pc-ph { transform: scale(1.08); }
.pc-cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; color: #fff; background: linear-gradient(transparent, rgba(8, 12, 20, .82)); display: grid; gap: 2px; transform: translateY(60%); opacity: 0; transition: transform .3s, opacity .3s; }
.pc-tile:hover .pc-cap, .pc-tile:focus-visible .pc-cap { transform: none; opacity: 1; }
.pc-cap b { font-size: 13px; } .pc-cap small { opacity: .7; } .pc-cap span { font-size: 11px; opacity: .85; }
@media (max-width: 640px) { .pc-wall { height: 70vh; } }
.pcollage:fullscreen { background: var(--bg, #f0f0ee); padding: 14px 18px; grid-template-rows: auto 1fr; height: 100vh; box-sizing: border-box; }
.pcollage:fullscreen .pc-wall { height: auto; min-height: 0; }
.pc-bar .p3d-slider { flex: 0 1 220px; }

/* Projects grid with your own size */
.pgrid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; }
.pgrid-bar .p3d-slider { flex: 0 1 240px; }
.proj-grid.custom { grid-template-columns: repeat(auto-fill, minmax(var(--pgw, 230px), 1fr)); }
.proj-grid.custom.fixed { grid-template-columns: repeat(var(--pgc, 4), minmax(0, 1fr)); }
.proj-grid.custom .proj-tile { aspect-ratio: auto; height: 0; padding-bottom: var(--pgh, 75%); }
@media (max-width: 640px) { .proj-grid.custom.fixed { grid-template-columns: repeat(min(var(--pgc, 2), 3), minmax(0, 1fr)); } }

/* Spherical Earth */
.pmap.globe { position: relative; background: #02040c; }
.globe-ctl { position: absolute; right: 14px; top: 14px; z-index: 5; display: grid; gap: 8px; }
.globe-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #113d45; font-size: 20px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); transition: transform .15s; }
.globe-ctl button:hover { transform: scale(1.1); }
.globe-tip { position: absolute; z-index: 6; width: 230px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); pointer-events: none; }
.globe-pin .pmap-pin { width: 40px; height: 40px; font-size: 16px; line-height: 32px; }
.globe-pin:hover .pmap-pin { transform: scale(1.4); }

/* Project page toolbar: Edit and Edit mode up front, the rest under More */
.proj-toolbar { flex-wrap: wrap; gap: 8px; }
.more-menu { position: relative; }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--card-solid); box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 0 0 1px rgba(128, 128, 128, .2); }
.more-pop[hidden] { display: none; }
.more-pop .btn { width: 100%; justify-content: flex-start; border: 0; box-shadow: none; background: transparent; border-radius: 10px; }
.more-pop .btn:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.more-pop .btn.danger { color: var(--red, #c0392b); }
@media (max-width: 640px) { .proj-toolbar .btn { flex: 1 1 auto; } }

/* the wired, glowing Earth */
.pmap.globe { background: radial-gradient(ellipse at 50% 45%, #06192b, #02050d 70%); }
.globe-pin .pmap-pin { box-shadow: 0 0 14px 3px var(--glow, #27e6ff), 0 0 38px 8px color-mix(in srgb, var(--glow, #27e6ff) 40%, transparent); border-width: 3px; }
.globe-ctl button { background: rgba(4, 22, 36, .78); color: #6ff0ff; box-shadow: 0 0 0 1px rgba(80, 230, 255, .55), 0 0 14px rgba(40, 220, 255, .4); backdrop-filter: blur(4px); }
.globe-ctl button:hover { background: rgba(10, 60, 84, .9); box-shadow: 0 0 0 1px #6ff0ff, 0 0 22px rgba(40, 220, 255, .7); }

/* Globe: auto-rotate popup and full screen */
.globe-ctl button.on { background: rgba(10, 80, 110, .95); color: #fff; box-shadow: 0 0 0 1px #6ff0ff, 0 0 22px rgba(40, 220, 255, .8); }
.globe-pop .pmap-card-tip { width: auto; padding-bottom: 6px; }
.globe-pop-open { display: block; width: calc(100% - 24px); margin: 0 12px 12px; padding: 8px; border: 0; border-radius: 10px; background: #113d45; color: #fff; font-weight: 600; cursor: pointer; }
.pmap.globe:fullscreen { height: 100vh !important; width: 100vw; border-radius: 0; }

/* the auto-rotate popup comes out of the project's pin */
.globe-pop { position: absolute; z-index: 9999; width: 250px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(80, 230, 255, .7), 0 0 34px rgba(40, 220, 255, .55), 0 20px 50px rgba(0, 0, 0, .55); animation: globe-pop-in .6s cubic-bezier(.22, 1.2, .36, 1); }
.globe-pop::before { content: ""; position: absolute; top: calc(var(--ay, 30px) - 8px); width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(80, 230, 255, .5); }
.globe-pop.at-right::before { left: -8px; } .globe-pop.at-left::before { right: -8px; }
.globe-pop > * { position: relative; }
.globe-pop .pmap-card-tip { border-radius: 16px 16px 0 0; overflow: hidden; }
@keyframes globe-pop-in { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: scale(1); } }
.globe-pin.hot .pmap-pin { transform: scale(1.7); box-shadow: 0 0 22px 6px var(--glow, #27e6ff), 0 0 60px 14px color-mix(in srgb, var(--glow, #27e6ff) 55%, transparent); transition: transform .4s; }

/* the renders list inside the auto-rotate popup */
.globe-pop { width: 280px; }
.globe-pop .pmap-card-tip img:first-child { height: 150px; transition: opacity .3s; }
.gp-strip { display: grid; gap: 4px; padding: 8px 12px 2px; }
.gp-strip small { color: #6b7a7d; font-size: 11px; }
.gp-strip > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gp-strip img { flex: 0 0 auto; width: 56px !important; height: 40px !important; object-fit: cover; border-radius: 7px; opacity: .55; cursor: pointer; transition: opacity .2s, transform .2s; }
.gp-strip img.on { opacity: 1; outline: 2px solid #17c8dc; transform: scale(1.06); }
.globe-pop-open { margin-top: 4px; }

/* preview size (the ⤢ button): normal / large / extra large through --gps */
.pmap.globe { --gps: 1; }
.globe-pop { width: calc(280px * var(--gps, 1)); }
.globe-pop .pmap-card-tip img:first-child { height: calc(150px * var(--gps, 1)); }
.globe-pop .pmap-card-tip > b { font-size: calc(14px * var(--gps, 1)); }
.globe-pop .pmap-card-tip > span, .globe-pop .pmap-card-tip > em, .gp-strip small { font-size: calc(12px * var(--gps, 1)); }
.globe-pop .pmap-card-tip > .pill { font-size: calc(11px * var(--gps, 1)); }
.gp-strip img { width: calc(56px * var(--gps, 1)) !important; height: calc(40px * var(--gps, 1)) !important; }
.globe-pop-open { font-size: calc(14px * var(--gps, 1)); padding: calc(8px * var(--gps, 1)); }
.globe-tip { width: calc(230px * var(--gps, 1)); }
.globe-tip .pmap-card-tip { width: 100%; }
.globe-tip .pmap-card-tip img { height: calc(130px * var(--gps, 1)); }
.globe-tip .pmap-card-tip > b { font-size: calc(14px * var(--gps, 1)); }
.globe-pop-size { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(4, 22, 36, .78); color: #6ff0ff; font-size: 15px; cursor: pointer; box-shadow: 0 0 0 1px rgba(80, 230, 255, .6); }
.globe-pop-size:hover { background: rgba(10, 60, 84, .95); color: #fff; }
.globe-ctl button[data-level="1"] { background: rgba(10, 80, 110, .9); } .globe-ctl button[data-level="2"] { background: rgba(10, 110, 140, .95); color: #fff; }

/* Country names and flags on the maps */
.cty { display: flex; align-items: center; gap: 5px; pointer-events: none; white-space: nowrap; font: 600 11px "DM Sans", Arial, sans-serif; color: #e8fbff; text-shadow: 0 0 4px #000, 0 0 8px rgba(0, 0, 0, .8); letter-spacing: .02em; }
.cty img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 6px rgba(0, 0, 0, .5); }
.cty.cty-off { display: none !important; }
.cty-flag-icon { background: none; border: 0; }
.cty-flag-icon img { width: 28px; height: 21px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 2px 8px rgba(0, 0, 0, .45); }

/* the country's flag shown on the auto preview while it zooms in */
.gp-country { position: relative; margin: 10px 46px 2px 12px; width: fit-content; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(4, 22, 36, .82); color: #e8fbff; font: 600 calc(12px * var(--gps, 1)) "DM Sans", Arial, sans-serif; box-shadow: 0 0 0 1px rgba(80, 230, 255, .6), 0 4px 14px rgba(0, 0, 0, .5); animation: gp-country-in .6s .2s both cubic-bezier(.22, 1.2, .36, 1); }
.gp-country img { width: calc(34px * var(--gps, 1)); height: calc(25px * var(--gps, 1)); object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
@keyframes gp-country-in { from { opacity: 0; transform: translateX(-14px) scale(.8); } to { opacity: 1; transform: none; } }

/* project page: the cover opens truly full screen and shrinks as you scroll */
html:has(.cover-hero) { overflow-anchor: none; }
.cover-hero { position: relative; z-index: 5; /* under the header bar (10) and the windows (50) */ margin: var(--hero-mt, 0) var(--hero-mr, 0) 0 var(--hero-ml, 0); }
.cover-hero .cover-slider { margin-top: 0 !important; }
.cover-hero .cover-img { aspect-ratio: auto; height: var(--hero-h, 100vh); border-radius: calc(16px * var(--hero-p, 0)); border-width: calc(1px * var(--hero-p, 0)); object-fit: cover; }
.cover-hero .cover-nav { z-index: 8; }
.cover-hero .cover-dots { z-index: 8; bottom: calc(86px * (1 - var(--hero-p, 0)) + 14px); }
html.hero-top .dock { opacity: 0; pointer-events: none; transform: translateX(-14px); } /* the header bar stays; only the side dock steps aside */
.topbar, .dock { transition: opacity .3s, transform .3s; }
.hero-back { position: absolute; top: calc(92px + 10px * var(--hero-p, 0)); left: 18px; z-index: 9; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(8, 14, 20, .5); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.hero-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-title { position: absolute; left: 28px; right: 28px; bottom: 96px; z-index: 7; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .65); display: grid; gap: 4px; pointer-events: none; opacity: calc(1 - var(--hero-p, 0) * 1.6); }
.hero-title h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.05; color: #fff; }
.hero-title small, .hero-title span { opacity: .85; font-size: .9rem; letter-spacing: .06em; }
.cover-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; border-radius: 0 0 calc(16px * var(--hero-p, 0)) calc(16px * var(--hero-p, 0)); background: linear-gradient(transparent, rgba(6, 10, 16, .6)); opacity: calc(1 - var(--hero-p, 0)); pointer-events: none; }
.hero-cue { position: absolute; left: 50%; bottom: var(--cue-b, 26px); z-index: 9; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 8px 18px 4px; border: 0; border-radius: 999px; background: rgba(8, 14, 20, .45); backdrop-filter: blur(6px); color: #fff; font: 600 13px "DM Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: calc(1 - var(--hero-p, 0) * 6); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.hero-cue i { width: 14px; height: 14px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); animation: hero-bounce 1.3s ease-in-out infinite; }
@keyframes hero-bounce { 0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .65; } 50% { transform: translateY(6px) rotate(45deg); opacity: 1; } }

/* photo viewer: arrows that contrast with the picture, and a light effect between photos */
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 64px; height: 100px; padding: 0; border: 0; background: none; color: #fff; mix-blend-mode: difference; cursor: pointer; display: grid; place-items: center; opacity: .9; transition: opacity .2s, transform .2s; }
.lb-arrow.left { left: 8px; } .lb-arrow.right { right: 8px; }
.lb-arrow svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .55)); }
.lb-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.18); }
.lightbox-img.lb-in { animation: lb-light .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lb-light { 0% { opacity: 0; filter: brightness(3.2) blur(16px) saturate(.5); scale: 1.07; } 45% { opacity: 1; filter: brightness(1.8) blur(3px) saturate(.8); } 100% { opacity: 1; filter: none; scale: 1; } }
.lb-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 236, 190, .5) 35%, rgba(255, 255, 255, 0) 70%); }
.lb-flash.go { animation: lb-flash .9s ease-out both; }
@keyframes lb-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- Portfolio view ---------- */
.pf-btn { white-space: nowrap; }
#pf-root { position: fixed; inset: 0; z-index: 80; background: #0d1416; color: #eef3f3; display: flex; flex-direction: column; font-family: inherit; }
.pf-bar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(13,20,22,.92); border-bottom: 1px solid rgba(255,255,255,.1); z-index: 3; }
.pf-bar .pf-grow { flex: 1; }
.pf-bar .btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.pf-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.pf-scroll.snap { scroll-snap-type: y mandatory; }
.pf-page { min-height: calc(100vh - 54px); padding: 70px max(24px, 8vw); scroll-snap-align: start; position: relative; box-sizing: border-box; }
.pf-page h2 { font-size: clamp(30px, 4.5vw, 60px); margin: 6px 0 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.pf-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: #6fd3dd; margin: 0; }
.pf-lead { font-size: clamp(16px, 1.7vw, 22px); line-height: 1.6; max-width: 62ch; color: #d9e3e3; margin: 0 0 14px; }
.pf-contact { color: #9fb3b5; line-height: 1.7; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips span { border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 5px 13px; font-size: 13px; }
/* cover */
.pf-cover { display: grid; align-items: end; padding: 0; overflow: hidden; min-height: calc(100vh - 54px); }
.pf-collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.pf-collage img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(1.05); }
.pf-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,20,22,.92), rgba(13,20,22,.15) 60%); }
.pf-cover-txt { position: relative; z-index: 2; padding: 0 max(24px, 8vw) 12vh; }
.pf-cover-txt small { letter-spacing: .22em; text-transform: uppercase; color: #6fd3dd; font-size: 13px; }
.pf-cover-txt h1 { font-size: clamp(44px, 9vw, 130px); line-height: .95; margin: 14px 0 12px; letter-spacing: -.03em; }
.pf-cover-txt p { font-size: clamp(16px, 2vw, 26px); color: #cbd8d9; margin: 0; }
.pf-down { position: absolute; z-index: 3; left: 50%; bottom: 22px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; }
.pf-down i { width: 16px; height: 16px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); animation: pf-bounce 1.4s ease-in-out infinite; }
@keyframes pf-bounce { 0%,100% { translate: 0 -5px; opacity: .6 } 50% { translate: 0 6px; opacity: 1 } }
/* intro */
.pf-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6vw; align-items: center; }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-stats div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px; }
.pf-stats b { display: block; font-size: clamp(26px, 3vw, 42px); }
.pf-stats span { color: #9fb3b5; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
/* index */
.pf-toc { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6vw; }
.pf-toc a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #eef3f3; text-decoration: none; font-size: 18px; transition: padding .2s, color .2s; }
.pf-toc a:hover { padding-left: 10px; color: #6fd3dd; }
.pf-toc a span { flex: 1; }
.pf-toc a em { font-style: normal; color: #6fd3dd; font-size: 14px; min-width: 26px; }
.pf-toc a small { color: #8ba0a2; }
/* software */
.pf-bars > div { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 110px; align-items: center; gap: 16px; padding: 9px 0; }
.pf-bars i { height: 8px; border-radius: 9px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.pf-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #19717F, #6fd3dd); border-radius: 9px; }
.pf-bars em { font-style: normal; color: #8ba0a2; font-size: 13px; text-align: right; }
/* experience */
.pf-tl { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.pf-when { color: #6fd3dd; font-size: 14px; }
.pf-tl b { font-size: 20px; } .pf-tl em { display: block; font-style: normal; color: #9fb3b5; margin: 3px 0 6px; }
.pf-tl p { color: #c3d1d2; margin: 6px 0 0; line-height: 1.55; max-width: 70ch; }
/* projects */
.pf-proj { padding: 0 0 40px; }
.pf-proj-hero { position: relative; height: 66vh; overflow: hidden; background: #172124; }
.pf-proj-hero img { width: 100%; height: 100%; object-fit: cover; }
.pf-proj-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,20,22,.9), transparent 55%); }
.pf-proj-title { position: absolute; z-index: 2; left: max(24px, 8vw); bottom: 28px; }
.pf-proj-title small { color: #6fd3dd; letter-spacing: .2em; font-size: 13px; }
.pf-proj-title h2 { margin: 6px 0 0; font-size: clamp(32px, 5.5vw, 76px); }
.pf-proj-body { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5vw; padding: 34px max(24px, 8vw) 10px; }
.pf-facts { display: grid; gap: 2px; align-content: start; }
.pf-facts div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.pf-facts span { color: #8ba0a2; } .pf-facts b { font-weight: 500; text-align: right; }
.pf-shots { display: grid; gap: 10px; padding: 18px max(24px, 8vw) 0; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.pf-shots img { width: 100%; height: 22vw; min-height: 130px; object-fit: cover; border-radius: 10px; }
.pf-end { display: grid; place-content: center; text-align: center; }
@media (max-width: 800px) { .pf-intro, .pf-toc, .pf-proj-body { grid-template-columns: 1fr; } .pf-tl { grid-template-columns: 1fr; gap: 4px; } .pf-bars > div { grid-template-columns: 1fr 1fr; } .pf-bars em { display: none; } .pf-btn { padding-inline: 8px; } }
html.pf-open body { overflow: hidden; }
@media print {
  body.pf-printing > *:not(#pf-root) { display: none !important; }
  body.pf-printing #pf-root { position: static; display: block; background: #0d1416; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.pf-printing .pf-bar { display: none; }
  body.pf-printing .pf-scroll { overflow: visible; }
  body.pf-printing .pf-page { min-height: 0; height: 100vh; break-after: page; padding-top: 40px; }
}

/* Portfolio: editor drawer, looks, profile page */
#pf-root ~ #modal-root, body:has(#pf-root) #modal-root { position: relative; z-index: 200; }
body:has(#pf-root) #modal-root .overlay { z-index: 200; }
.pf-wrap { flex: 1; min-height: 0; display: flex; position: relative; }
.pf-drawer { width: 340px; flex: none; overflow-y: auto; padding: 16px 18px 40px; background: #121b1d; border-left: 1px solid rgba(255,255,255,.12); color: #e6eeee; }
.pf-drawer[hidden] { display: none; }
.pf-dhead { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.pf-dhead .ib { color: #fff; }
.pf-dh { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: #6fd3dd; margin: 22px 0 8px; }
.pf-dsub { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; font-size: 13px; color: #9fb3b5; }
.pf-drawer .fld { display: block; margin-bottom: 10px; }
.pf-drawer .fld span { display: block; font-size: 12px; color: #9fb3b5; margin-bottom: 4px; }
.pf-drawer input[type=text], .pf-drawer input:not([type]), .pf-drawer textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; }
.pf-chk { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; cursor: pointer; }
.pf-picks { max-height: 200px; overflow: auto; }
.pf-trow { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 0; color: #fff; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; cursor: pointer; font: inherit; }
.pf-trow small { display: block; color: #9fb3b5; font-size: 12px; }
.pf-drawer .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.pf-looks { display: inline-flex; gap: 4px; margin-left: 18px; }
.pf-looks.wrap { margin: 0; flex-wrap: wrap; }
.pf-look { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #cfdcdc; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.pf-look.on { background: #19717F; border-color: #19717F; color: #fff; }
.pf-profile { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6vw; align-items: center; }
@media (max-width: 800px) { .pf-profile { grid-template-columns: 1fr; } .pf-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 92vw); z-index: 5; } .pf-looks:not(.wrap) { display: none; } }
/* light slides */
.pf-scroll.look-light { background: #f6f3ee; color: #1a2a2c; }
.look-light .pf-lead, .look-light .pf-tl p { color: #3a4c4e; }
.look-light .pf-kicker, .look-light .pf-when, .look-light .pf-toc a em, .look-light .pf-proj-title small { color: #19717F; }
.look-light .pf-contact, .look-light .pf-facts span, .look-light .pf-stats span, .look-light .pf-toc a small, .look-light .pf-bars em, .look-light .pf-tl em { color: #6a7b7d; }
.look-light .pf-toc a { color: #1a2a2c; border-color: rgba(0,0,0,.14); }
.look-light .pf-stats div { background: #fff; border-color: rgba(0,0,0,.08); }
.look-light .pf-chips span { border-color: rgba(0,0,0,.25); }
.look-light .pf-bars i { background: rgba(0,0,0,.08); }
.look-light .pf-tl, .look-light .pf-facts div { border-color: rgba(0,0,0,.12); }
.look-light .pf-proj-hero { background: #ddd; }
.look-light .pf-proj-hero::after, .look-light .pf-cover::after { background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%); }
.look-light .pf-proj-title h2, .look-light .pf-cover-txt h1, .look-light .pf-cover-txt p, .look-light .pf-cover-txt small { color: #fff; }
.look-light .pf-cover-txt small, .look-light .pf-proj-title small { color: #9be7ef; }
/* book pages: paper sheets on a desk */
.pf-scroll.look-book { background: #3a4446; padding: 30px 0; }
.look-book .pf-page { width: min(1100px, 94%); margin: 0 auto 28px; aspect-ratio: 297 / 210; min-height: 0; background: #fbfaf7; color: #1a2a2c; padding: 5% 7%; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); border-radius: 3px; }
.look-book .pf-page h2 { font-size: clamp(22px, 3.4vw, 44px); margin-bottom: 14px; }
.look-book .pf-lead { color: #3a4c4e; font-size: clamp(13px, 1.4vw, 18px); }
.look-book .pf-kicker, .look-book .pf-when, .look-book .pf-toc a em { color: #852F46; }
.look-book .pf-contact, .look-book .pf-facts span, .look-book .pf-stats span, .look-book .pf-bars em, .look-book .pf-tl em, .look-book .pf-toc a small { color: #6a7b7d; }
.look-book .pf-toc a { color: #1a2a2c; border-color: rgba(0,0,0,.14); padding: 8px 0; font-size: 15px; }
.look-book .pf-stats div { background: #f0ece4; border-color: transparent; padding: 12px; }
.look-book .pf-chips span { border-color: rgba(0,0,0,.25); }
.look-book .pf-bars i { background: rgba(0,0,0,.08); }
.look-book .pf-bars > div { padding: 4px 0; }
.look-book .pf-tl, .look-book .pf-facts div { border-color: rgba(0,0,0,.12); }
.look-book .pf-tl { padding: 9px 0; } .look-book .pf-tl b { font-size: 16px; } .look-book .pf-tl p { color: #3a4c4e; font-size: 13px; }
.look-book .pf-cover, .look-book .pf-proj { padding: 0; }
.look-book .pf-cover-txt { padding: 0 7% 8%; } .look-book .pf-cover-txt h1 { font-size: clamp(32px, 6vw, 80px); }
.look-book .pf-proj-hero { height: 52%; } .look-book .pf-proj-title { left: 7%; bottom: 14px; } .look-book .pf-proj-title h2 { font-size: clamp(22px, 3.6vw, 48px); color: #fff; }
.look-book .pf-proj-body { padding: 14px 7% 0; gap: 3vw; } .look-book .pf-proj-body .pf-lead { font-size: clamp(11px, 1.15vw, 15px); }
.look-book .pf-facts div { padding: 4px 0; font-size: 12px; }
.look-book .pf-shots { padding: 10px 7% 0; } .look-book .pf-shots img { height: 9vw; min-height: 70px; }
.look-book .pf-end { place-content: center; }
.look-book .pf-cover::after { background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%); }
.look-book .pf-cover-txt * { color: #fff; }
.look-book .pf-proj-hero::after { background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%); }
/* compact: all projects as cards on one page */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.pf-cards article { break-inside: avoid; }
.pf-card-img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.08); margin-bottom: 10px; }
.pf-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pf-cards small { color: #6fd3dd; letter-spacing: .14em; font-size: 11px; }
.pf-cards h3 { margin: 4px 0 2px; font-size: 18px; }
.pf-cards span { color: #8ba0a2; font-size: 13px; }
.pf-cards p { font-size: 13px; line-height: 1.5; color: #c3d1d2; margin: 8px 0; }
.look-compact .pf-page { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
@media print {
  body.pf-printing .pf-wrap { display: block; }
  body.pf-printing .pf-drawer { display: none !important; }
  body.pf-printing .pf-scroll.look-book { background: #fff; padding: 0; }
  body.pf-printing .look-book .pf-page { width: 297mm; height: 210mm; margin: 0; box-shadow: none; border-radius: 0; aspect-ratio: auto; }
  body.pf-printing .pf-scroll.look-light .pf-page, body.pf-printing .pf-scroll.look-light { background: #f6f3ee; }
  body.pf-printing .look-compact .pf-page { height: auto; break-after: auto; }
}

.pf-scroll.look-book.snap, .pf-scroll.look-compact.snap { scroll-snap-type: y mandatory; }
.look-book .pf-page { scroll-snap-align: center; }
.look-compact .pf-page { scroll-snap-align: start; }
.pf-snap { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 12px; color: #cfdcdc; cursor: pointer; white-space: nowrap; }

/* one long connected scroll: no separate pages, one continuous background, irregular photo mosaics */
.pf-scroll.look-flow, .pf-scroll.look-flow.snap { scroll-snap-type: none; background: linear-gradient(180deg, #0d1416, #12262a 40%, #1b1520 75%, #0d1416); }
.look-flow .pf-page { min-height: 0; padding-top: 90px; padding-bottom: 20px; scroll-snap-align: none; }
.look-flow .pf-cover { min-height: calc(100vh - 54px); padding: 0; }
.look-flow .pf-cover::after { background: linear-gradient(to top, #0d1416, rgba(13,20,22,.1) 60%); }
.look-flow .pf-proj { padding: 70px 0 20px; }
.look-flow .pf-proj-hero { height: 58vh; margin: 0 max(24px, 6vw); border-radius: 22px; }
.look-flow .pf-proj-hero::after { border-radius: 22px; }
.look-flow .pf-end { min-height: 60vh; }
.pf-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15vw; grid-auto-flow: dense; gap: 12px; padding: 14px max(24px, 6vw) 0; }
.pf-mosaic div { overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.06); }
.pf-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.pf-mosaic div:hover img { transform: scale(1.05); }
.pf-mosaic .m0 { grid-column: span 3; grid-row: span 2; }
.pf-mosaic .m1 { grid-column: span 3; }
.pf-mosaic .m2 { grid-column: span 2; }
.pf-mosaic .m3 { grid-column: span 1; grid-row: span 2; }
.pf-mosaic .m4 { grid-column: span 2; grid-row: span 2; }
.pf-mosaic .m5 { grid-column: span 2; }
.pf-mosaic .m6 { grid-column: span 4; }
.pf-mosaic .m7 { grid-column: span 2; grid-row: span 2; }
.pf-mosaic .m8 { grid-column: span 2; }
@media (max-width: 800px) { .pf-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; } .pf-mosaic div { grid-column: span 1 !important; grid-row: span 1 !important; } .pf-mosaic .m0, .pf-mosaic .m6 { grid-column: span 2 !important; } }
@media print { body.pf-printing .look-flow .pf-page { height: auto; break-after: auto; } body.pf-printing .look-flow .pf-proj { break-before: page; } body.pf-printing .pf-scroll.look-flow { background: #0d1416; } }

/* Portfolio: fixed page sizes, project photo pages, grid pages, index views */
.pf-sel { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; margin-left: 12px; }
.pf-sel option, .pf-mini option { color: #111; }
.pf-drawer .pf-sel { margin: 0; width: 100%; border-radius: 10px; padding: 7px 10px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pf-note { color: #8ba0a2; font-size: 11px; }
.pf-pickrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-pickrow .pf-chk { flex: 1; min-width: 0; }
.pf-mini { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 2px 4px; font-size: 12px; }
.pf-pn { position: absolute; right: 28px; bottom: 16px; font-style: normal; font-size: 12px; opacity: .55; }
.pf-photos { display: flex; flex-direction: column; }
.pf-pgrid { flex: 1; min-height: 56vh; display: grid; gap: 12px; margin-top: 14px; }
.pf-pgrid div { overflow: hidden; border-radius: 12px; min-height: 0; }
.pf-pgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-pgrid.c2 { grid-template-columns: 1fr 1fr; }
.pf-pgrid.c3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .pf-pgrid.c3 div:first-child { grid-row: span 2; }
.pf-pgrid.c4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pf-pgrid.c5, .pf-pgrid.c6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; } .pf-pgrid.c5 div:first-child { grid-column: span 2; }
.pf-grid .pf-cards { grid-template-columns: repeat(var(--cols, 3), 1fr); }
/* index views */
.pf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pf-table th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6fd3dd; padding: 8px 10px; border-bottom: 2px solid currentColor; }
.pf-table td { padding: 9px 10px; border-bottom: 1px solid rgba(128,128,128,.3); }
.pf-table tr[data-pf-go] { cursor: pointer; } .pf-table tbody tr:hover { background: rgba(128,128,128,.12); }
.pf-table td:last-child, .pf-table th:last-child { text-align: right; }
.pf-itoc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pf-itoc a { border: 1px solid rgba(128,128,128,.4); border-radius: 12px; padding: 8px 14px; color: inherit; text-decoration: none; }
.pf-itoc small, .pf-igrid small { display: block; opacity: .6; font-size: 12px; }
.pf-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pf-igrid a { color: inherit; text-decoration: none; display: block; }
.pf-igrid em { font-style: normal; color: #6fd3dd; font-size: 12px; margin-right: 6px; } .pf-igrid .pf-card-img { aspect-ratio: 4/3; margin-bottom: 6px; }
.pf-leader a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; color: inherit; text-decoration: none; font-size: 17px; }
.pf-leader a u { flex: 1; border-bottom: 2px dotted rgba(128,128,128,.5); text-decoration: none; transform: translateY(-4px); }
.pf-leader em { font-style: normal; color: #6fd3dd; font-size: 13px; min-width: 24px; }
.pf-toc a small { white-space: nowrap; }
/* fixed page sizes: every page is a sheet of the chosen size; text scales with the sheet (cqw) */
.pf-scroll.fixed { background: #3a4446; padding: 24px 0; }
.pf-scroll.fixed.look-light { background: #cfcac0; }
.fixed .pf-page { width: min(1100px, 92%, calc((100vh - 120px) * var(--ar-n, 1.414))); aspect-ratio: var(--ar, 297 / 210); min-height: 0; height: auto; margin: 0 auto 24px; padding: 5% 7%; overflow: hidden; position: relative; container-type: inline-size; border-radius: 3px; box-shadow: 0 14px 40px rgba(0,0,0,.45); box-sizing: border-box; scroll-snap-align: center; }
.fixed.look-dark .pf-page, .fixed.look-compact .pf-page { background: #0d1416; }
.fixed.look-light .pf-page { background: #f6f3ee; }
.fixed .pf-page h2 { font-size: 4.4cqw; margin: .4cqw 0 2cqw; }
.fixed .pf-lead { font-size: 1.65cqw; max-width: none; }
.fixed .pf-kicker { font-size: 1.05cqw; }
.fixed .pf-contact { font-size: 1.3cqw; }
.fixed .pf-chips span { font-size: 1.1cqw; padding: .3cqw 1cqw; }
.fixed .pf-stats { gap: 1cqw; } .fixed .pf-stats div { padding: 1.4cqw; border-radius: 1.2cqw; } .fixed .pf-stats b { font-size: 3cqw; } .fixed .pf-stats span { font-size: .9cqw; }
.fixed .pf-toc a, .fixed .pf-leader a { font-size: 1.5cqw; padding: .7cqw 0; } .fixed .pf-table { font-size: 1.3cqw; } .fixed .pf-table td { padding: .6cqw .8cqw; } .fixed .pf-table th { font-size: .9cqw; }
.fixed .pf-igrid { grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; } .fixed .pf-igrid a { font-size: 1.2cqw; }
.fixed .pf-bars > div { padding: .5cqw 0; font-size: 1.3cqw; gap: 2cqw; }
.fixed .pf-tl { padding: 1.2cqw 0; gap: 2cqw; grid-template-columns: 14cqw 1fr; } .fixed .pf-tl b { font-size: 1.7cqw; } .fixed .pf-tl p, .fixed .pf-tl em, .fixed .pf-when { font-size: 1.2cqw; }
.fixed .pf-cover { padding: 0; } .fixed .pf-cover-txt { padding: 0 7% 8%; } .fixed .pf-cover-txt h1 { font-size: 9cqw; } .fixed .pf-cover-txt p { font-size: 2cqw; } .fixed .pf-cover-txt small { font-size: 1.2cqw; } .fixed .pf-down { display: none; }
.fixed .pf-proj { padding: 0; display: flex; flex-direction: column; }
.fixed .pf-proj-hero { height: 46%; flex: none; margin: 0; border-radius: 0; } .fixed .pf-proj-title { left: 7%; bottom: 1.4cqw; } .fixed .pf-proj-title h2 { font-size: 4.6cqw; color: #fff; margin: 0; } .fixed .pf-proj-title small { font-size: 1.1cqw; }
.fixed .pf-proj-body { padding: 2cqw 7% 0; gap: 3cqw; } .fixed .pf-facts div { padding: .4cqw 0; font-size: 1.1cqw; }
.fixed .pf-shots { padding: 1.4cqw 7% 0; gap: 1cqw; } .fixed .pf-shots img { height: 11cqw; min-height: 0; border-radius: 1cqw; }
.fixed .pf-pgrid { min-height: 0; gap: 1.2cqw; margin-top: 1.4cqw; } .fixed .pf-pgrid div { border-radius: 1.2cqw; }
.fixed .pf-cards { gap: 1.8cqw; } .fixed .pf-cards h3 { font-size: 1.5cqw; } .fixed .pf-cards p, .fixed .pf-cards span { font-size: 1cqw; } .fixed .pf-cards small { font-size: .9cqw; } .fixed .pf-card-img { margin-bottom: .8cqw; }
.fixed .pf-end { display: grid; place-content: center; }
.fixed .pf-pn { right: 3cqw; bottom: 1.6cqw; font-size: 1cqw; }
.fixed .pf-intro, .fixed .pf-profile { align-items: center; gap: 4cqw; }
@media print { body.pf-printing .pf-scroll.fixed { background: none; padding: 0; } body.pf-printing .fixed .pf-page { box-shadow: none; border-radius: 0; break-after: page; } }

/* Portfolio: look variants (colours come from --pf-* set on the scroller), cover styles */
.pf-scroll:not(.fixed):not(.look-book) { background: var(--pf-bg, #0d1416); color: var(--pf-ink, #eef3f3); }
.pf-scroll.fixed { background: var(--pf-desk, #3a4446); }
.pf-scroll.look-book:not(.fixed) { background: var(--pf-desk, #3a4446); }
.pf-scroll .pf-page { color: var(--pf-ink, #eef3f3); }
.pf-scroll.fixed .pf-page, .pf-scroll.look-book .pf-page { background: var(--pf-bg, #0d1416); }
.pf-scroll .pf-kicker, .pf-scroll .pf-when, .pf-scroll .pf-toc a em, .pf-scroll .pf-leader em, .pf-scroll .pf-igrid em, .pf-scroll .pf-cards small, .pf-scroll .pf-table th { color: var(--pf-accent, #6fd3dd); }
.pf-scroll .pf-cover-txt small, .pf-scroll .pf-proj-title small { color: var(--pf-accent, #6fd3dd); }
.pf-scroll .pf-bars i::after { background: var(--pf-accent, #6fd3dd); }
.pf-scroll .pf-lead, .pf-scroll .pf-tl p, .pf-scroll .pf-cards p { color: color-mix(in srgb, var(--pf-ink, #eef3f3) 84%, transparent); }
.pf-scroll .pf-contact, .pf-scroll .pf-facts span, .pf-scroll .pf-stats span, .pf-scroll .pf-toc a small, .pf-scroll .pf-bars em, .pf-scroll .pf-tl em, .pf-scroll .pf-cards span { color: color-mix(in srgb, var(--pf-ink, #eef3f3) 58%, transparent); }
.pf-scroll .pf-toc a, .pf-scroll .pf-leader a, .pf-scroll .pf-itoc a, .pf-scroll .pf-igrid a { color: var(--pf-ink, #eef3f3); }
.pf-scroll .pf-toc a, .pf-scroll .pf-tl, .pf-scroll .pf-facts div { border-color: color-mix(in srgb, var(--pf-ink, #eef3f3) 20%, transparent); }
.pf-scroll .pf-stats div { background: color-mix(in srgb, var(--pf-ink, #eef3f3) 8%, transparent); border-color: color-mix(in srgb, var(--pf-ink, #eef3f3) 12%, transparent); }
.pf-scroll .pf-chips span { border-color: color-mix(in srgb, var(--pf-ink, #eef3f3) 35%, transparent); }
.pf-scroll .pf-bars i { background: color-mix(in srgb, var(--pf-ink, #eef3f3) 12%, transparent); }
.pf-scroll .pf-proj-title h2, .pf-scroll .pf-cover-txt h1, .pf-scroll .pf-cover-txt p { color: #fff; }
.pf-scroll .pf-cover-txt small { color: var(--pf-accent, #6fd3dd); }
.pf-cvimg img, .pf-cvmos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-cover.cv-single .pf-cvimg { position: absolute; inset: 0; } .pf-cover.cv-single .pf-cvimg img { filter: brightness(.62); }
.pf-cover.cv-mosaic .pf-cvmos { position: absolute; inset: 0; display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.pf-cvmos div { overflow: hidden; } .pf-cvmos img { filter: brightness(.55); }
.pf-cvmos div:first-child { grid-row: span 2; }
.pf-cover.cv-slideshow .pf-cvimg { position: absolute; inset: 0; }
img-slide { position: absolute; inset: 0; display: block; opacity: 0; animation: pf-fade var(--dur, 12s) infinite; }
img-slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
@keyframes pf-fade { 0% { opacity: 0 } 6% { opacity: 1 } 30% { opacity: 1 } 38% { opacity: 0 } 100% { opacity: 0 } }
.pf-cover.cv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--pf-bg); }
.pf-cover.cv-split .pf-cvimg { grid-column: 2; grid-row: 1; height: 100%; } .pf-cover.cv-split .pf-cover-txt { grid-column: 1; grid-row: 1; padding: 0 6%; }
.pf-cover.cv-split::after, .pf-cover.cv-framed::after, .pf-cover.cv-text::after { display: none; }
.pf-cover.cv-framed, .pf-cover.cv-text { background: var(--pf-bg); }
.pf-cover.cv-framed .pf-cvimg { position: absolute; inset: 8% 10% 26% 10%; border: .7cqw solid #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .pf-cover.cv-framed .pf-cover-txt { padding-bottom: 5%; }
.pf-cover.cv-text { background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--pf-accent) 35%, var(--pf-bg)), var(--pf-bg) 65%); }
.pf-cover.cv-split .pf-cover-txt *, .pf-cover.cv-framed .pf-cover-txt *, .pf-cover.cv-text .pf-cover-txt * { color: var(--pf-ink); }
.pf-cover.cv-split .pf-cover-txt small, .pf-cover.cv-framed .pf-cover-txt small, .pf-cover.cv-text .pf-cover-txt small { color: var(--pf-accent); }
.pf-cover.cv-split .pf-cover-txt h1 { font-size: clamp(36px, 6vw, 90px); }
.fixed .pf-cover.cv-split .pf-cover-txt h1 { font-size: 6.5cqw; }
/* compact variants */
.lay-tiles .pf-cards { grid-template-columns: repeat(min(var(--cols, 3), 2), 1fr); gap: 16px; }
.lay-tiles .pf-cards article { position: relative; border-radius: 14px; overflow: hidden; }
.lay-tiles .pf-card-img { aspect-ratio: 16 / 9; margin: 0; border-radius: 0; }
.lay-tiles .pf-cards article > :not(.pf-card-img) { position: relative; padding: 0 14px; } .lay-tiles .pf-cards h3 { margin-top: 10px; } .lay-tiles .pf-cards article > .pf-chips { padding-bottom: 12px; }
.lay-tiles .pf-cards article { background: color-mix(in srgb, var(--pf-ink) 7%, transparent); }
.lay-rows .pf-cards { grid-template-columns: 1fr; gap: 0; }
.lay-rows .pf-cards article { display: grid; grid-template-columns: 120px 1fr; column-gap: 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--pf-ink) 18%, transparent); }
.lay-rows .pf-card-img { grid-row: span 4; margin: 0; aspect-ratio: 4 / 3; } .lay-rows .pf-cards p, .lay-rows .pf-cards .pf-chips { display: none; }
.fixed.lay-rows .pf-cards article { grid-template-columns: 11cqw 1fr; }
.pf-cpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-height: 190px; overflow: auto; }
.pf-cp { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); aspect-ratio: 1; cursor: pointer; }
.pf-cp img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-cp.on { border-color: #6fd3dd; }
.pf-mvs { display: inline-flex; gap: 3px; } .pf-mv { background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; } .pf-mv:disabled { opacity: .3; cursor: default; }
.pf-bar { flex-wrap: wrap; } .pf-bar .pf-sel { margin-left: 8px; }
@media print { .pf-cover.cv-slideshow img-slide { animation: none; opacity: 0; } .pf-cover.cv-slideshow img-slide:first-child { opacity: 1; } }

.pf-cover.cv-color::after { display: none; } .pf-cover.cv-color .pf-cover-txt * { color: inherit !important; }
.pf-cover.cv-image .pf-cvimg { position: absolute; inset: 0; } .pf-cover.cv-image .pf-cvimg img { filter: brightness(.7); }
.pf-sets { display: grid; gap: 4px; } .pf-drawer input[data-pf-setname] { flex: 1; }
.pf-bar .pf-sel { max-width: 150px; }

/* click a photo to change it */
.pf-hint { color: #8ba0a2; font-size: 11px; margin-left: 10px; font-weight: 400; }
.pf-scroll img[data-pf-img] { cursor: pointer; }
.pf-scroll img[data-pf-img]:hover { outline: 3px solid var(--pf-accent, #6fd3dd); outline-offset: -3px; }
.pf-cover::after, .pf-proj-hero::after { pointer-events: none; } .pf-proj-title, .pf-cover-txt { pointer-events: none; } .pf-cover-txt a { pointer-events: auto; }
#pf-pick { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.pf-pick-box { width: min(820px, 94vw); max-height: 86vh; overflow: auto; background: #121b1d; color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: 16px 18px 20px; }
.pf-pickbar { display: flex; gap: 8px; margin: 12px 0; } .pf-pickbar .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.pf-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
/* layouts: the same pages arranged three ways */
.lay-split .pf-proj { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; padding: 0; align-items: start; }
.lay-split .pf-proj-hero { grid-row: 1 / 3; height: 100%; min-height: 70vh; margin: 0; border-radius: 0; }
.lay-split .pf-proj-body { grid-column: 2; grid-template-columns: 1fr; padding: 6% 8% 0 5%; } .lay-split .pf-shots { grid-column: 2; padding: 18px 8% 0 5%; }
.lay-split.fixed .pf-proj-hero { min-height: 0; } .lay-split.fixed .pf-proj-body { padding: 4cqw 5cqw 0 3cqw; } .lay-split.fixed .pf-shots { padding: 1.4cqw 5cqw 0 3cqw; }
.lay-cinema .pf-proj { display: flex; flex-direction: column; justify-content: flex-end; padding: 0; min-height: calc(100vh - 54px); }
.lay-cinema .pf-proj-hero { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; } .lay-cinema .pf-proj-hero::after { background: linear-gradient(to top, rgba(0,0,0,.92) 8%, rgba(0,0,0,.1) 70%); }
.lay-cinema .pf-proj-title { bottom: 36%; } .lay-cinema .pf-proj-body, .lay-cinema .pf-shots { position: relative; z-index: 2; color: #fff; } .lay-cinema .pf-proj-body .pf-lead, .lay-cinema .pf-facts span { color: rgba(255,255,255,.8) !important; }
.lay-cinema.fixed .pf-proj { min-height: 0; height: 100%; } .lay-cinema .pf-proj-body { padding-bottom: 10px; } .lay-cinema .pf-shots { padding-bottom: 28px; } .lay-cinema .pf-shots img { height: 9vw; min-height: 80px; }
.lay-magazine .pf-proj { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr; padding: 0; } .lay-magazine .pf-proj-hero { height: 100%; margin: 0; } .lay-magazine .pf-proj-body { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; align-content: center; padding: 6% 8%; } .lay-magazine .pf-shots { display: none; }
.lay-minimal .pf-proj-hero { height: 34%; width: 46%; margin-left: 0; } .lay-minimal .pf-proj-hero::after { display: none; } .lay-minimal .pf-proj-title { position: static; padding: 20px 0 0; } .lay-minimal .pf-proj-title h2 { color: inherit !important; font-size: 4.6cqw; } .lay-minimal .pf-proj-hero { overflow: visible; }
.lay-minimal .pf-proj-hero img { height: 100%; width: 100%; } .lay-minimal .pf-proj-body { grid-template-columns: 1fr 1fr; } .lay-minimal .pf-shots { display: none; }
.lay-zigzag .pf-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4vw; padding: 70px max(24px, 6vw) 20px; align-items: center; }
.lay-zigzag .pf-proj-hero { height: 62vh; margin: 0; } .lay-zigzag .pf-proj-body { grid-template-columns: 1fr; padding: 0; } .lay-zigzag .pf-mosaic { grid-column: 1 / 3; padding-inline: 0; }
.lay-zigzag .pf-proj:nth-of-type(even) .pf-proj-hero { order: 2; }
.lay-stacked .pf-proj-hero { height: 80vh; margin: 0; border-radius: 0; } .lay-stacked .pf-proj-hero::after { border-radius: 0; }
.lay-stacked .pf-mosaic { grid-template-columns: 1fr; grid-auto-rows: 46vw; } .lay-stacked .pf-mosaic div { grid-column: span 1 !important; grid-row: span 1 !important; }
@media (max-width: 800px) { .lay-split .pf-proj, .lay-magazine .pf-proj, .lay-zigzag .pf-proj { grid-template-columns: 1fr; } .lay-split .pf-proj-body, .lay-split .pf-shots, .lay-magazine .pf-proj-body { grid-column: 1; } .lay-split .pf-proj-hero { grid-row: auto; min-height: 40vh; } }

/* zoom / move a photo */
.pf-cell, .pf-shot { overflow: hidden; min-height: 0; } .pf-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-cover.cv-single .pf-cvimg, .pf-cover.cv-split .pf-cvimg, .pf-cover.cv-framed .pf-cvimg { overflow: hidden; }
img-slide { overflow: hidden; }
.pf-adj { margin: 12px 0 4px; display: grid; justify-items: center; gap: 8px; }
.pf-adjframe { overflow: hidden; border-radius: 12px; background: #000; cursor: grab; touch-action: none; border: 1px solid rgba(255,255,255,.2); }
.pf-adjframe:active { cursor: grabbing; }
.pf-adjframe img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.pf-adjctl { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); } .pf-adjctl input { flex: 1; }
.pf-adjctl .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }

.pf-link { background: none; border: 0; color: #6fd3dd; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* the buttons stay on a row of their own, always visible; the choosers scroll sideways on the row below */
.pf-bar { display: block; padding: 0; }
.pf-bar-top { display: flex; align-items: center; gap: 8px; padding: 10px 18px; }
.pf-bar-top .pf-grow { flex: 1; } .pf-bar-top .btn { flex: none; white-space: nowrap; }
.pf-bar-top .btn.primary { background: #19717F; border-color: #19717F; color: #fff; }
.pf-bar-tools { display: flex; align-items: center; gap: 8px; padding: 0 18px 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.pf-bar-tools > * { flex: none; } .pf-bar-tools .pf-looks { margin-left: 0; } .pf-bar-tools .pf-sel { margin-left: 0; }
@media (max-width: 800px) { .pf-looks:not(.wrap) { display: inline-flex !important; } .pf-hint { display: none; } }
.pf-dhead .ib { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.pf-dhead .ib svg { stroke: #fff; }

/* project page with a full-screen cover: the page buttons (back, Edit, Edit mode, More) float over the cover instead of hiding behind it */
main:has(.cover-hero) .proj-toolbar { position: relative; z-index: 8; }
main:has(.cover-hero) .proj-toolbar .btn:not(.primary), main:has(.cover-hero) .proj-toolbar .ib { background: rgba(255,255,255,.9); color: #14201f; backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
main:has(.cover-hero) .proj-toolbar .pill { backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
main:has(.cover-hero) .proj-toolbar .btn.primary { box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.more-pop { z-index: 12; }
.hero-back { display: none; } /* the page's own back arrow is shown over the cover now */
main:has(.cover-hero) .proj-toolbar .pill { background: rgba(255,255,255,.9); color: #14201f; }

/* Book pages: extra options */
.pf-hd { display: none; position: absolute; top: 1.8cqw; left: 7%; right: 7%; z-index: 7; justify-content: space-between; font-size: .9cqw; letter-spacing: .16em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.pf-hd i { font-style: normal; } .bk-hd .pf-hd { display: flex; }
.bk-m-narrow .pf-page:not(.pf-cover):not(.pf-proj) { padding: 3.5% 5%; } .bk-m-wide .pf-page:not(.pf-cover):not(.pf-proj) { padding: 7.5% 11%; }
.bk-m-narrow .pf-proj-body, .bk-m-narrow .pf-shots { padding-left: 4%; padding-right: 4%; } .bk-m-wide .pf-proj-body, .bk-m-wide .pf-shots { padding-left: 11%; padding-right: 11%; }
.bk-pn-center .pf-pn { left: 0; right: 0; text-align: center; } .bk-pn-off .pf-pn { display: none; }
.bk-pn-outside .pf-page:nth-child(even) .pf-pn { left: 3cqw; right: auto; }
.bk-fr-thin .pf-page::before, .bk-fr-double .pf-page::before { content: ''; position: absolute; inset: 2cqw; z-index: 6; pointer-events: none; border: 1px solid #fff; mix-blend-mode: difference; opacity: .6; }
.bk-fr-double .pf-page::before { border-width: 4px; border-style: double; }
.bk-paper-grain .pf-page { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pf-scroll.bk-spread { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; padding: 24px max(2%, 12px); }
.bk-spread::before { content: ''; flex: 0 0 min(46%, calc((100vh - 120px) * var(--ar-n, 1.414))); height: 1px; margin-right: 0; }
.bk-spread .pf-page { flex: 0 0 auto; width: min(46%, calc((100vh - 120px) * var(--ar-n, 1.414))); margin: 0 0 24px; border-radius: 0; }
.bk-spread .pf-page:nth-child(odd) { box-shadow: inset 2.4cqw 0 2.4cqw -1.6cqw rgba(0,0,0,.28), 0 14px 30px rgba(0,0,0,.4); }
.bk-spread .pf-page:nth-child(even) { box-shadow: inset -2.4cqw 0 2.4cqw -1.6cqw rgba(0,0,0,.28), 0 14px 30px rgba(0,0,0,.4); }
@media print { body.pf-printing .pf-scroll.bk-spread { display: block; padding: 0; } body.pf-printing .bk-spread::before { display: none; } body.pf-printing .bk-spread .pf-page { box-shadow: none; } }

/* Preview mode: nothing but the pages */
#pf-root.pf-preview .pf-bar, #pf-root.pf-preview .pf-drawer, #pf-root.pf-preview #pf-pick { display: none !important; }
#pf-root.pf-preview .pf-scroll img[data-pf-img] { cursor: default; outline: none !important; }
#pf-root.pf-preview .pf-page, #pf-root.pf-preview .pf-cover, #pf-root.pf-preview.pf-root .pf-proj { min-height: 100vh; }
#pf-root.pf-preview .pf-scroll:not(.look-flow):not(.look-compact) { scroll-snap-type: y mandatory; }
#pf-root.pf-preview .fixed .pf-page { min-height: 0; width: min(1600px, 97%, calc((100vh - 36px) * var(--ar-n, 1.414))); }
#pf-root.pf-preview .bk-spread .pf-page { width: min(48.5%, calc((100vh - 36px) * var(--ar-n, 1.414))); }
#pf-root.pf-preview .pf-scroll.fixed { padding: 18px 0; }
.pf-pv-ui { position: fixed; z-index: 30; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: center; gap: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pf-pv-ui.show { opacity: 1; } .pf-pv-ui > * { pointer-events: auto; }
.pf-pv-btn { background: rgba(10,16,18,.72); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; backdrop-filter: blur(8px); }
.pf-pv-count { background: rgba(10,16,18,.72); color: #fff; border-radius: 99px; padding: 7px 14px; font-size: 13px; backdrop-filter: blur(8px); }
.pf-pv-exit { margin-left: 14px; }

/* Preview: project details window */
#pf-root.pf-preview [data-pf-proj] { cursor: pointer; }
#pf-detail { position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,.72); display: grid; place-items: center; animation: fx-fade .25s ease both; }
.pf-dt { width: min(1180px, 95vw); height: min(86vh, 800px); background: #121b1d; color: #eef3f3; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; }
.pf-dt-media { display: flex; flex-direction: column; min-height: 0; background: #0a1012; }
.pf-dt-main { flex: 1; min-height: 0; overflow: hidden; } .pf-dt-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-dt-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; flex: none; } .pf-dt-thumbs .pf-cp { flex: 0 0 74px; width: 74px; height: 56px; aspect-ratio: auto; }
.pf-dt-info { padding: 16px 22px 24px; overflow-y: auto; min-height: 0; }
.pf-dt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pf-dt-head .pf-grow { flex: 1; }
.pf-dt-head .ib { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); } .pf-dt-head .ib svg { stroke: #fff; }
.pf-dt-info small { color: #6fd3dd; letter-spacing: .14em; } .pf-dt-info h2 { margin: 4px 0 10px; font-size: clamp(24px, 3vw, 38px); }
.pf-dt-info p, .pf-dt-info li { color: #cfdcdc; line-height: 1.55; font-size: 14px; margin: 4px 0; } .pf-dt-info ul { padding-left: 18px; margin: 4px 0; }
.pf-dt-info a { color: #6fd3dd; word-break: break-all; }
.pf-dt-info .pf-facts b { font-weight: 500; text-align: right; }
@media (max-width: 800px) { .pf-dt { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; } }

.pf-toc.even { grid-template-columns: 1fr 1fr; }
.fixed .pf-toc { gap: 4cqw; }
/* contents pages on fixed-size sheets: every size follows the sheet */
.fixed .pf-itoc { gap: 1cqw; margin-bottom: 2cqw; } .fixed .pf-itoc a { padding: .6cqw 1.3cqw; border-radius: 1cqw; font-size: 1.2cqw; }
.fixed .pf-itoc small, .fixed .pf-igrid small { font-size: .95cqw; } .fixed .pf-igrid em, .fixed .pf-toc a em, .fixed .pf-leader em { font-size: 1.1cqw; min-width: 2.4cqw; }
.fixed .pf-igrid .pf-card-img { margin-bottom: .6cqw; border-radius: 1cqw; }
.fixed .pf-toc a { gap: 1.2cqw; }

/* contents on one page: columns */
.pf-ixcols { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); column-gap: 40px; align-items: start; }
.pf-ixcols .pf-table { font-size: 13px; }
.fixed .pf-ixcols { column-gap: 3cqw; }
.fixed .pf-ixcols a { font-size: calc(1.5cqw * var(--ix, 1)); padding: calc(.7cqw * var(--ix, 1)) 0; gap: calc(1.2cqw * var(--ix, 1)); }
.fixed .pf-ixcols a em { font-size: calc(1.1cqw * var(--ix, 1)); min-width: calc(2.4cqw * var(--ix, 1)); }
.fixed .pf-ixcols a small { font-size: calc(.95cqw * var(--ix, 1)); }
.fixed .pf-ixcols .pf-table { font-size: calc(1.3cqw * var(--ix, 1)); } .fixed .pf-ixcols .pf-table td { padding: calc(.6cqw * var(--ix, 1)) .8cqw; } .fixed .pf-ixcols .pf-table th { font-size: calc(.9cqw * var(--ix, 1)); }
.pf-igrid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.fixed .pf-igrid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } .fixed .pf-igrid a { font-size: calc(1.2cqw * var(--ix, 1)); } .fixed .pf-igrid small, .fixed .pf-igrid em { font-size: calc(.95cqw * var(--ix, 1)); }
.pf-igrid a { overflow: hidden; } .pf-igrid b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Material List ---------- */
.mat-bar { flex-wrap: wrap; gap: 8px; align-items: center; }
.mat-bar .search { flex: 1 1 220px; min-width: 180px; max-width: 360px; }
.mat-seg { display: inline-flex; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 99px; overflow: hidden; }
.mat-seg button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.mat-seg button.on { background: var(--accent, #19717F); color: #fff; }
.mat-tablewrap { overflow-x: auto; border-radius: 14px; background: var(--card, rgba(255,255,255,.7)); border: 1px solid var(--line, rgba(0,0,0,.1)); }
.mat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mat-table th { text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #5b6b6d); cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); user-select: none; }
.mat-table th.sorted { color: var(--accent, #19717F); }
.mat-table td { padding: 8px 12px; border-bottom: 1px solid var(--line, rgba(0,0,0,.07)); vertical-align: middle; }
.mat-table tbody tr { cursor: pointer; } .mat-table tbody tr:hover { background: rgba(25,113,127,.07); }
.mat-table td:first-child, .mat-table th:first-child { width: 54px; }
.mat-thumb { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: rgba(25,113,127,.14); color: var(--accent, #19717F); font-style: normal; flex: none; }
.mat-thumb.sm { width: 38px; height: 38px; } .mat-thumb img, .mat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mat-thumb i { font-style: normal; font-weight: 700; }
.mat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mat-card { background: var(--card, rgba(255,255,255,.75)); border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.mat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.mat-card-img { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: rgba(25,113,127,.14); overflow: hidden; font-size: 34px; font-weight: 700; color: var(--accent, #19717F); }
.mat-card-img i { font-style: normal; }
.mat-card-body { padding: 12px 14px 14px; display: grid; gap: 3px; } .mat-card-body small { color: var(--ink-2, #5b6b6d); } .mat-card-body h3 { margin: 0; font-size: 16px; } .mat-card-body span { color: var(--ink-2, #5b6b6d); font-size: 13px; } .mat-card-body b { font-size: 14px; }
.mat-print th, .mat-print td { font-size: 11px; padding: 4px 6px; text-align: left; vertical-align: middle; }

/* small dashboard on the Projects page */
.mini-dash { margin: 4px 0 14px; padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, #fff 60%, var(--card-solid)); }
.md-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.md-tile { display: grid; gap: 1px; padding: 8px 12px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); }
.md-tile b { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.md-tile span { font-size: 11px; color: var(--muted); }
.md-tile.is-green b { color: var(--green, #2f7d4f); }
.md-tile.is-red b { color: var(--red, #b3402a); }
.md-bar { display: flex; gap: 3px; height: 8px; margin-top: 12px; border-radius: 999px; overflow: hidden; }
.md-bar span { min-width: 6px; border-radius: 999px; }
.md-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.md-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.md-legend b { margin-left: 2px; }

/* TUT tab */
.tut-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tut-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card-solid); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.tut-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(17, 61, 69, .45); }
.tut-card-img { display: grid; place-items: center; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); overflow: hidden; }
.tut-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tut-card-img i, .tut-thumb i { font-style: normal; font-size: 34px; font-weight: 700; color: var(--muted); }
.tut-card-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.tut-card-body h3 { margin: 2px 0 0; font-size: 15px; }
.tut-card-body small { color: var(--muted); font-size: 12px; }
.tut-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tut-date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.tut-date svg { width: 13px; height: 13px; }
.tut-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.tut-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tut-thumb i { font-size: 18px; }

/* a TUT item's own page */
.tut-hero { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; }
.tut-hero-img { display: grid; place-items: center; flex: none; width: 150px; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.tut-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.tut-hero-img i { font-style: normal; font-size: 40px; font-weight: 700; color: var(--muted); }
.tut-setup .md-tile b { font-size: 26px; }
.tut-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 8px; }
.tut-section-head h2 { margin: 0; font-size: 18px; }
.tut-section-head h2 small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.tut-chapter { margin-top: 10px; }
.tut-ch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tut-ch-head small { display: block; color: var(--muted); font-size: 12px; }
.tut-ch-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card-solid); font-weight: 700; font-size: 13px; }
.tut-lec.done b { text-decoration: line-through; color: var(--muted); }
.tut-check { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.tut-check.on { background: var(--green, #2f7d4f); border-color: var(--green, #2f7d4f); }
@media (max-width: 600px) { .tut-hero { flex-direction: column; align-items: flex-start; } }

/* production pipeline */
.tut-steps { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tut-step { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.tut-step.passed { background: color-mix(in srgb, var(--green, #2f7d4f) 18%, transparent); border-color: color-mix(in srgb, var(--green, #2f7d4f) 40%, transparent); color: var(--green, #2f7d4f); }
.tut-step.now { background: var(--ink); border-color: var(--ink); color: var(--card-solid); }
.tut-step:hover { border-color: var(--ink); }
.tut-due { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.tut-due.soon { background: color-mix(in srgb, #f3c94c 35%, transparent); color: #8a6a00; }
.tut-due.late { background: color-mix(in srgb, var(--red, #b3402a) 16%, transparent); color: var(--red, #b3402a); }
.tut-lec.is-late { background: color-mix(in srgb, var(--red, #b3402a) 6%, transparent); border-radius: 12px; }
.tut-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tut-progress span { display: block; height: 100%; border-radius: 999px; background: var(--green, #2f7d4f); transition: width .3s; }
.tut-progress.sm { height: 5px; margin-top: 6px; }
.tut-stagecount { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.tut-stagecount b { font-size: 14px; margin-right: 3px; }
.tut-todo { margin-top: 4px; }

/* media inside chapters and lectures */
.tut-mstrip { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.tut-mtile { margin: 0; width: 92px; cursor: pointer; }
.tut-mthumb { position: relative; display: block; width: 92px; height: 64px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, var(--card-solid)); }
.tut-mimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-mtile figcaption { margin-top: 3px; font-size: 10.5px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tut-mbtn { position: relative; }
.tut-mbtn small { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--ink); color: var(--card-solid); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.tm-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tm-item textarea { min-height: 64px; }
.tmv-cap { max-width: 900px; margin: 10px auto 0; text-align: center; color: #fff; font-size: 15px; }
html.tutv-open .book-overlay, html.tutv-open #modal-root .overlay { z-index: 140; }
/* course view */
.tutv-open { overflow: hidden; }
.tutv { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; --tv-bg: #0d1416; --tv-ink: #eef3f3; --tv-muted: rgba(238, 243, 243, .62); --tv-accent: #6fd3dd; background: var(--tv-bg); color: var(--tv-ink); }
.tutv.light { --tv-bg: #f6f3ee; --tv-ink: #1a2a2c; --tv-muted: rgba(26, 42, 44, .6); --tv-accent: #19717f; }
.tv-top { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 14px; }
.tv-count { color: var(--tv-muted); font-size: 12px; }
.tv-btn, .tv-jump { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--tv-muted); background: transparent; color: var(--tv-ink); font: inherit; font-size: 13px; cursor: pointer; }
.tv-jump { max-width: 240px; }
.tv-jump option { color: #111; }
.tv-btn.primary { background: var(--tv-accent); border-color: var(--tv-accent); color: #08181a; font-weight: 700; }
.tv-btn[disabled] { opacity: .35; cursor: default; }
.tv-progress { height: 3px; background: color-mix(in srgb, var(--tv-ink) 12%, transparent); }
.tv-progress span { display: block; height: 100%; background: var(--tv-accent); transition: width .3s; }
.tv-stage { flex: 1; overflow: auto; padding: 28px clamp(18px, 6vw, 90px); }
.tv-body, .tv-cover { max-width: 1000px; margin: 0 auto; }
.tv-cover { text-align: center; padding-top: 4vh; }
.tv-cover-img { width: min(560px, 100%); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; margin-bottom: 22px; }
.tv-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tv-accent); }
.tutv h1 { margin: 0 0 10px; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -.02em; }
.tv-no { color: var(--tv-accent); margin-right: 6px; }
.tv-sub { margin: 4px 0; color: var(--tv-muted); font-size: 15px; }
.tv-text { margin: 14px 0; font-size: 18px; line-height: 1.55; white-space: pre-wrap; }
.tv-cover .tv-text { max-width: 760px; margin-left: auto; margin-right: auto; }
.tv-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 22px; color: var(--tv-muted); }
.tv-stats b { color: var(--tv-ink); font-size: 24px; margin-right: 4px; }
.tv-toc { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.tv-toc button { width: 100%; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tv-ink) 18%, transparent); background: color-mix(in srgb, var(--tv-ink) 5%, transparent); color: var(--tv-ink); font: inherit; font-size: 17px; cursor: pointer; }
.tv-toc button:hover { border-color: var(--tv-accent); }
.tv-toc b { color: var(--tv-accent); margin-right: 8px; }
.tv-toc small { float: right; color: var(--tv-muted); }
.tv-toc.small li span { display: block; padding: 6px 2px; border-bottom: 1px solid color-mix(in srgb, var(--tv-ink) 12%, transparent); font-size: 15px; }
.tv-toc.small small { color: var(--tv-muted); margin-left: 6px; }
.tv-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 18px 0; }
.tv-fig { margin: 0; }
.tv-fig img, .tv-fig video { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 14px; background: color-mix(in srgb, var(--tv-ink) 8%, transparent); cursor: zoom-in; }
.tv-fig video { cursor: default; }
.tv-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--tv-muted); }
.tv-link { color: var(--tv-accent); font-weight: 600; }
.tv-links { padding-left: 18px; line-height: 2; }
.tv-links a { color: var(--tv-accent); }
.tv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 14px; }
.tv-hint { color: var(--tv-muted); font-size: 11px; }

/* a small note / files spot next to each production stage */
.tut-stepwrap { display: inline-flex; align-items: stretch; }
.tut-stepwrap .tut-step { border-radius: 999px 0 0 999px; border-right: 0; }
.tut-stepnote { min-width: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 0 999px 999px 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.tut-stepnote:hover { border-color: var(--ink); color: var(--ink); }
.tut-stepnote.has { background: var(--ink); border-color: var(--ink); color: var(--card-solid); }
.tut-file { display: grid; place-items: center; width: 100%; height: 100%; font-size: 12px; font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.tut-file.big { width: 110px; height: 110px; border-radius: 22px; font-size: 22px; margin: 0 auto 10px; }
.tut-filecard { text-align: center; color: #fff; }
/* quiz */
.tut-q { margin-top: 10px; }
.tut-q-head { display: flex; align-items: center; gap: 10px; }
.tut-q-head small { display: block; color: var(--muted); font-size: 12px; }
.tut-q-opts { margin: 8px 0 0 44px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.tut-q-opts li.right { color: var(--green, #2f7d4f); font-weight: 700; }
.tut-q-ans { margin: 8px 0 0 44px; font-size: 14px; }
.tut-q-ans span { color: var(--muted); margin-right: 6px; font-size: 12px; }
.tut-q-exp { margin: 8px 0 0 44px; font-size: 13px; color: var(--ink-2); }
.tv-opts { list-style: upper-alpha; margin: 18px 0; padding-left: 28px; display: grid; gap: 10px; font-size: 20px; }
.tv-opts li { padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tv-ink) 18%, transparent); }
.tv-opts li.is-right { border-color: #3fbf7f; background: rgba(63, 191, 127, .16); }
.tv-opts li.is-wrong { opacity: .5; }
.tv-answer { margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--tv-accent) 12%, transparent); }

/* course view as one long vertical page */
.tutv.is-long .tv-stage { padding: 0 clamp(18px, 6vw, 90px) 80px; scroll-behavior: smooth; }
.tutv.is-long .tv-sec { max-width: 980px; margin: 0 auto; padding: 56px 0; border-bottom: 1px solid color-mix(in srgb, var(--tv-ink) 14%, transparent); }
.tutv.is-long .tv-sec:last-child { border-bottom: 0; }
.tutv.is-long .tv-cover { padding-top: 0; }
.tutv.is-long .tv-fig img, .tutv.is-long .tv-fig video { max-height: 80vh; }

/* DeeAuto */
.auto-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.auto-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--card-solid); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.auto-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(17, 61, 69, .5); }
.auto-card-top { display: flex; align-items: center; gap: 10px; }
.auto-card h3 { margin: 0; font-size: 15px; }
.auto-card small { color: var(--muted); font-size: 12px; }
.auto-desc { margin: 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.auto-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.auto-stats b { color: var(--ink); font-size: 14px; }
.auto-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.auto-thumb { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, var(--card-solid)); }
.auto-thumb.lg { width: 56px; height: 56px; border-radius: 16px; }
.auto-thumb.sm { width: 36px; height: 36px; border-radius: 10px; }
.auto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.auto-thumb i { font-style: normal; font-weight: 800; font-size: 18px; color: var(--muted); }
.auto-steps { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.auto-code { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow: auto; max-height: 220px; }
.auto-uses { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#auto-run { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--card-solid); }
.auto-run-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
#auto-run iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* a DeeAuto tool's own page */
.auto-thumb.xl { width: 84px; height: 84px; border-radius: 22px; }
.auto-thumb.xl i { font-size: 34px; }
.auto-inline { margin-top: 8px; padding: 0; overflow: hidden; }
.auto-inline iframe { display: block; width: 100%; height: 70vh; border: 0; background: #fff; }
.auto-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.auto-bar { flex: 1; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; height: 100%; gap: 2px; }
.auto-bar span { align-self: end; width: 70%; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--green, #2f7d4f); }
.auto-bar b { font-size: 12px; }
.auto-bar small { color: var(--muted); font-size: 11px; }

/* DeeAuto: cover photo, preview, code with copy */
.auto-cover { margin: 4px 0 0; aspect-ratio: 21 / 7; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); cursor: zoom-in; }
.auto-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auto-card-cover { margin: -14px -14px 0; aspect-ratio: 16 / 6; overflow: hidden; border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.auto-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auto-card { min-width: 0; }
.auto-card-top .grow { min-width: 0; }
.auto-card-top .grow h3 { overflow-wrap: anywhere; }
.auto-card-top .pill { flex: none; white-space: nowrap; }
.auto-brief { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.auto-code-box { margin-top: 12px; padding: 0; overflow: hidden; }
.auto-code-box .auto-code { margin: 0; max-height: 60vh; overflow: auto; white-space: pre; }
.auto-mini-box { padding: 0; overflow: hidden; }
.auto-mini { display: block; width: 100%; height: min(70vh, 640px); min-height: 360px; border: 0; background: #fff; }
.auto-card { background: color-mix(in srgb, var(--kind, transparent) 13%, var(--card-solid)); border-color: color-mix(in srgb, var(--kind, transparent) 60%, var(--line)); border-top: 4px solid var(--kind, transparent); }
.auto-row { border-left: 4px solid var(--kind, transparent); }
.auto-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.auto-key span { display: inline-flex; align-items: center; gap: 6px; }
.auto-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--kind, transparent); display: inline-block; }
.auto-about { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.auto-about-label { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.auto-hint { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.eng-edit-title { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 4px 10px; font: inherit; font-size: 2rem; font-weight: 700; color: var(--ink); background: transparent; border: 1px dashed var(--line); border-radius: 12px; }
.eng-edit-text { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.code-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
/* a picture on a card or page shows whole and centred, the way it looks in the edit form (no cropping) */
.tut-card-img img, .tut-hero-img img, .tut-thumb img, .auto-thumb img, .auto-card-cover img, .auto-cover img { object-fit: contain; object-position: center; }
.pg-adj { position: absolute; top: 6px; left: 6px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.pg-adj svg { width: 14px; height: 14px; }
.eng-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.auto-card-top .grow { min-width: 0; }
.pdf-text-wrap { flex: 1; min-height: 0; width: min(900px, 96vw); display: flex; flex-direction: column; }
.pdf-text-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.pdf-text { flex: 1; min-height: 0; margin: 0; padding: 18px; overflow: auto; white-space: pre-wrap; font: 14px/1.6 ui-monospace, Consolas, monospace; color: var(--ink); background: var(--card-solid); border: 1px solid var(--line); border-radius: 12px; }
.pin-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.pin-btn.on { background: var(--ink); color: var(--card-solid); border-color: var(--ink); }
.pin-head { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pin-head small { font-weight: 500; color: var(--muted); }
.auto-play-box .auto-code { margin: 12px 0 0; max-height: 50vh; overflow: auto; white-space: pre-wrap; }
.auto-preview { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.auto-codewrap { display: flex; gap: 8px; align-items: flex-start; }
.auto-codewrap .auto-code { flex: 1; margin: 0; }

/* page edit mode (TUT items, DeeAuto tools, Materials) */
.pe-form { margin-top: 8px; }
.pe-bar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-solid); box-shadow: 0 12px 30px -12px rgba(17, 61, 69, .35); }
.pe-hint { font-size: 12px; color: var(--muted); }
.mat-hero-img { width: 150px; height: 110px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.mat-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* drag & drop with motion */
[data-sort-handle] { cursor: grab; touch-action: none; user-select: none; }
[data-sort-item]:not([data-sort-handle-only]) { cursor: grab; }
.dnd-active, .dnd-active * { cursor: grabbing !important; user-select: none; }
/* the floating card is moved by dnd.js with transform; CSS only gives it its shadow */
.dnd-float { box-shadow: 0 6px 14px rgba(0, 0, 0, .12); border-radius: 18px; background: var(--card-solid); will-change: transform; }
.dnd-float.lifted { box-shadow: 0 28px 60px -14px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .12); }
/* the empty spot the card will land in: a soft dashed slot, its content faded */
.dnd-ph { outline: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -2px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dnd-ph > * { opacity: .18 !important; transition: opacity .2s; }
/* after a drop the page is drawn again; its entrance animations jump straight to the end instead of playing twice */
.dnd-settle #app *, .dnd-settle #app *::before, .dnd-settle #app *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
[data-sort].dnd-over { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 18px; }
.tut-grip, .entry-grip { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--muted); font-size: 15px; letter-spacing: -2px; border-radius: 8px; flex: none; }
.tut-grip:hover, .entry-grip:hover { background: var(--line); color: var(--ink); }
.entry { padding-left: 28px; }
.entry-grip { position: absolute; left: 4px; top: 8px; }
.col[data-sort] { min-height: 96px; transition: background .2s; }
.tut-lecs { min-height: 40px; }
.tut-lec .tut-grip { margin-right: 2px; }
.tut-q-head .tut-grip { margin-right: 2px; }
/* a file section that can take dropped files */
[data-gallery-field], [data-drop-zone] { transition: box-shadow .22s, background .22s, transform .22s; }
.drop-hot { background: color-mix(in srgb, var(--green, #2f7d4f) 9%, transparent); box-shadow: 0 0 0 2px var(--green, #2f7d4f), 0 14px 34px -14px var(--green, #2f7d4f); border-radius: 18px; transform: scale(1.012); }
.drop-hot::after { content: 'Drop to add'; position: absolute; inset: auto 12px 8px auto; padding: 3px 12px; border-radius: 999px; background: var(--green, #2f7d4f); color: #fff; font-size: 12px; font-weight: 700; animation: drop-pop .25s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; }
[data-gallery-field].drop-hot, [data-drop-zone].drop-hot { position: relative; }
@keyframes drop-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dnd-float, .drop-hot, [data-sort] > [data-sort-item] { transition: none !important; animation: none !important; } }

/* a smaller top tab bar, so more tabs fit */
.tabs { padding: 3px; gap: 0; }
.tab { padding: 6px clamp(6px, .72vw, 11px); font-size: clamp(11px, .86vw, 12.5px); }
.tab-sep { margin: 0 3px; height: 15px; }
/* file library: the "/" menu, chips and the library page */
#slash-menu { position: fixed; z-index: 300; width: 320px; max-height: 270px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-solid); box-shadow: 0 20px 44px -14px rgba(17, 61, 69, .4); animation: drop-pop .16s ease-out; }
.slash-head { padding: 4px 8px 6px; font-size: 11px; color: var(--muted); }
.slash-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.slash-item.on, .slash-item:hover { background: var(--line); }
.slash-item small { display: block; color: var(--muted); font-size: 11px; }
.slash-item b { font-size: 13px; font-weight: 600; word-break: break-all; }
.slash-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 9%, var(--card-solid)); color: var(--muted); font-size: 10px; font-weight: 800; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 1px 10px 1px 2px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--card-solid)); color: var(--ink); font-size: .92em; font-weight: 600; text-decoration: none; vertical-align: baseline; cursor: pointer; transition: background .15s, transform .15s; }
.file-chip:hover { background: color-mix(in srgb, var(--ink) 13%, var(--card-solid)); transform: translateY(-1px); }
.file-chip-ext { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--card-solid); font-size: 9px; font-weight: 800; }
.file-chip.missing { color: var(--red, #b3402a); text-decoration: line-through; padding: 1px 10px; }
.lib-name { width: 100%; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; font-weight: 600; padding: 2px 6px; border-radius: 8px; }
.lib-name:hover, .lib-name:focus { border-color: var(--line); background: var(--card-solid); outline: 0; }
.lib-row { flex-wrap: wrap; }

/* resources in layers */
.tut-layer { margin-top: 10px; }
.tut-layer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tut-layer-head small { color: var(--muted); font-size: 12px; }
.tut-res-grid { min-height: 64px; padding: 4px; border-radius: 14px; border: 1px dashed transparent; transition: background .2s, border-color .2s; }
.tut-res-grid.dnd-over { background: color-mix(in srgb, var(--green, #2f7d4f) 8%, transparent); border-color: var(--green, #2f7d4f); }
.tut-res-empty { grid-column: 1 / -1; margin: 14px 0; text-align: center; font-size: 12px; pointer-events: none; }

/* file lines: a file, a small note and tags on one line */
.fl-list { display: grid; gap: 6px; }
.fl-row { display: grid; grid-template-columns: auto 52px minmax(160px, 1.4fr) minmax(150px, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-solid); transition: box-shadow .2s, border-color .2s; }
.tut-section-head h2 { display: flex; align-items: center; gap: 4px; }
.tut-ren { opacity: .5; margin-left: 4px; } .tut-ren:hover, .tut-section-head:hover .tut-ren { opacity: 1; }
.tut-section-head { gap: 6px; flex-wrap: wrap; }
.tut-addsec { margin: 14px 0 6px; }
.tut-sec-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.send-menu { position: fixed; z-index: 9999; width: 290px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-solid); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); display: grid; gap: 2px; }
.send-title { margin: 2px 8px 6px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.send-menu button:hover, .send-menu button:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.send-menu svg { width: 18px; height: 18px; flex: none; }
.send-menu span { display: grid; line-height: 1.25; } .send-menu b { font-size: 14px; font-weight: 600; } .send-menu small { font-size: 12px; color: var(--muted); }
.ad-wrap { flex: 1; min-height: 0; width: min(900px, 96vw); overflow: auto; padding: 18px 20px; color: var(--ink); background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.ad-wrap h3 { margin: 0; font-size: 16px; }
.ad-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.ad-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; } .ad-opt small { color: var(--muted); }
.ad-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; min-height: 0; flex: 1; }
.ad-lab { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ad-current { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; max-height: 46vh; overflow: auto; color: var(--ink-2); }
.ad-draft { width: 100%; min-height: 40vh; height: 100%; resize: vertical; padding: 10px 12px; font: 14px/1.55 inherit; color: var(--ink); background: var(--card-solid); border: 1px solid var(--line); border-radius: 10px; }
.ad-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 760px) { .ad-cols { grid-template-columns: 1fr; } }
.fl-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.fl-txt { white-space: nowrap; }
.fl-row:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.fl-thumb .pg-thumb { width: 52px; height: 52px; border-radius: 10px; }
.fl-thumb .pg-img { font-size: 10px; }
.fl-main { display: grid; gap: 3px; min-width: 0; }
.fl-name { justify-self: start; max-width: 100%; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-name:hover { text-decoration: underline; }
.fl-note { width: 100%; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 8px; }
.fl-note:hover, .fl-note:focus { border-color: var(--line); background: color-mix(in srgb, #fff 55%, var(--card-solid)); outline: 0; }
.fl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.fl-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, var(--card-solid)); font-size: 11.5px; font-weight: 600; }
.fl-tag button { border: 0; background: none; padding: 0 3px; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; }
.fl-tag button:hover { color: var(--red, #b3402a); }
.fl-tag-add { width: 70px; border: 1px dashed var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.fl-tag-add:focus { width: 110px; outline: 0; border-color: var(--ink); }
.fl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; }
.fl-head small { color: var(--muted); }
.tut-q-files { margin: 10px 0 0 44px; }
@media (max-width: 760px) { .fl-row { grid-template-columns: auto 52px 1fr auto; } .fl-tags { grid-column: 3 / -1; } }

/* Settings → Files */
.fv-list { display: grid; gap: 6px; }
.fv-row { display: grid; grid-template-columns: 52px minmax(160px, 1.3fr) auto minmax(180px, 1.6fr); align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-solid); }
.fv-row.missing { border-color: var(--red, #b3402a); background: color-mix(in srgb, var(--red, #b3402a) 5%, var(--card-solid)); }
.fv-thumb { display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
.fv-thumb .pg-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--line); }
.fv-thumb .slash-ico { width: 100%; height: 100%; border-radius: 10px; }
.fv-main { display: grid; gap: 2px; min-width: 0; }
.fv-main small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-warn { color: var(--red, #b3402a); }
.fv-rels { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fv-rel { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 10px 2px 3px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, var(--card-solid)); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fv-rel:hover { background: color-mix(in srgb, var(--ink) 12%, var(--card-solid)); }
.fv-rel i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--ink); color: var(--card-solid); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fv-rel small { color: var(--muted); font-weight: 500; font-size: 11px; }
.fv-more, .fv-unused { font-size: 11.5px; color: var(--muted); align-self: center; }
.fv-group { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, #fff 45%, var(--card-solid)); }
.fv-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fv-group-head small { color: var(--muted); }
.fv-line { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.fv-line .slash-ico { width: 30px; height: 30px; }
.fv-line small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) { .fv-row { grid-template-columns: 52px 1fr auto; } .fv-rels { grid-column: 1 / -1; } }

/* Settings → Users */
.user-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.user-type { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-solid); display: grid; gap: 2px; }
.user-type small { color: var(--muted); font-size: 12px; }
.user-table select { min-width: 140px; }
.user-access-row td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.user-access { padding: 6px 4px 10px; }
.user-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.user-page { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-solid); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.user-page.on { border-color: color-mix(in srgb, var(--green, #2f7d4f) 55%, transparent); background: color-mix(in srgb, var(--green, #2f7d4f) 8%, var(--card-solid)); }

.user-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.user-add .fld { min-width: 220px; flex: 1 1 220px; }
.user-add .fld:nth-child(2) { flex: 0 1 190px; min-width: 160px; }
.user-send { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); padding-bottom: 10px; }

/* Settings → Files: table, thumbnails, folder tree, more filters */
.fv-more-bar { margin-top: 6px; }
.fv-badge { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--bg-2, #eee); color: var(--ink-2); margin-left: 4px; }
.fv-badge.dup { background: #fff3cd; color: #8a6d00; }
.fv-badge.miss { background: #fde2e2; color: #b42318; }
.fv-badge.use { background: #e3f4e8; color: #1d6b3a; }
.fv-tag { cursor: pointer; }
.fv-table th.r, .fv-table td.r { text-align: right; }
.fv-table .th-sort { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; color: inherit; padding: 0; }
.fv-table tr.fv-missing td { opacity: .6; }
.fv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.fv-tile { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 8px; border: 1px solid var(--line, #e3e3e3); border-radius: 12px; background: var(--card, #fff); cursor: pointer; font: inherit; }
.fv-tile b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-tile small { color: var(--ink-3, #888); font-size: 11px; }
.fv-tile.missing { opacity: .6; }
.fv-thumb.big { width: 100%; height: 100px; border-radius: 8px; }
.fv-thumb.big .pg-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.fv-treebar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.fv-tree details.fv-dir { margin-left: 0; }
.fv-dir-body { margin-left: 16px; border-left: 1px dashed var(--line, #ddd); padding-left: 10px; }
.fv-dir > summary { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; list-style: none; }
.fv-dir > summary::-webkit-details-marker { display: none; }
.fv-caret { display: inline-block; transition: transform .15s; font-size: 11px; }
.fv-dir[open] > summary > .fv-caret { transform: rotate(90deg); }
.fv-dir > summary small { color: var(--ink-3, #888); }
.fv-path { opacity: .7; }
.fv-leaf { display: flex; align-items: center; gap: 8px; padding: 3px 4px; flex-wrap: wrap; }
.fv-leaf.missing { opacity: .6; }
.fv-leaf-rels { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Engineering: plain text tabs with an underline */
.eng-tabs { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--line, #ddd); }
.eng-tab { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-3, #888); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.eng-tab small { font-size: 11px; opacity: .7; }
.eng-tab:hover { color: var(--ink, #111); }
.eng-tab.on { color: var(--ink, #111); border-bottom-color: var(--ink, #111); font-weight: 600; }
.eng-sections { display: flex; gap: 16px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 2px; }
.eng-sec { padding: 2px 0; border: 0; background: none; color: var(--ink-3, #888); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.eng-sec small { margin-left: 4px; font-size: 11px; opacity: .7; }
.eng-sec:hover { color: var(--ink, #111); }
.eng-sec.on { color: var(--ink, #111); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.eng-check { display: flex; flex-direction: column; gap: 6px; }
.eng-check-row { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }

/* Connections map */
.cm-kinds { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.cm-kind { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; }
.cm-kind i, .cm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.cm-kind small { opacity: .6; }
.cm-kind.off { opacity: .4; text-decoration: line-through; }
.cm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.cm-stage { overflow: auto; border: 1px solid var(--line, #ddd); border-radius: 14px; max-height: 76vh; background: var(--card, #fff); }
.cm-stage svg { display: block; min-width: 100%; }
.cm-edge { fill: none; stroke: currentColor; stroke-width: 1; opacity: .13; }
.cm-edge.on { opacity: .8; stroke-width: 1.6; }
.cm-edge.dim { opacity: .04; }
.cm-node { cursor: pointer; }
.cm-node text { font-size: 11px; fill: currentColor; pointer-events: none; }
.cm-node.dim { opacity: .18; }
.cm-node.sel circle { stroke: currentColor; stroke-width: 3; }
.cm-panel { max-height: 76vh; overflow: auto; }
.cm-panel .row { cursor: pointer; }
.cm-empty { padding: 20px; }
@media (max-width: 800px) { .cm-wrap { grid-template-columns: 1fr; } }

/* Diagram tool */
html.dg-open { overflow: hidden; }
#dg-root { position: fixed; inset: 0; z-index: 1000; background: var(--bg, #fff); display: flex; flex-direction: column; }
.dg-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line, #ddd); flex-wrap: wrap; }
.dg-title { font: inherit; font-size: 17px; font-weight: 600; background: none; border: 0; border-bottom: 1px dashed var(--line, #ccc); color: inherit; min-width: 220px; padding: 4px 2px; }
.dg-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: 0; }
.dg-canvas { width: 100%; height: 100%; background: var(--card, #fff); background-image: radial-gradient(circle, rgba(128,128,128,.25) 1px, transparent 1px); background-size: 20px 20px; touch-action: none; cursor: grab; color: var(--ink, #222); }
.dg-node { cursor: move; }
.dg-edge { cursor: pointer; }
.dg-side { border-left: 1px solid var(--line, #ddd); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.dg-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.dg-swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); cursor: pointer; }
.dg-swatches button.on { border-color: #e0743c; box-shadow: 0 0 0 2px #e0743c55; }
.dg-btns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dg-opt { text-align: left; padding: 12px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--card, #fff); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.dg-opt small { color: var(--ink-3, #888); }
.dg-opt:hover { border-color: var(--ink, #111); }
.dg-card-thumb { background: var(--bg-2, #f3f3f3); border-radius: 10px; padding: 6px; margin: 8px 0; color: #444; }
.dg-thumb { width: 100%; height: 120px; display: block; }
.dg-big { width: 100%; max-height: 520px; min-height: 260px; display: block; color: var(--ink, #222); }
.dg-view { background: var(--card, #fff); border-radius: 10px; }
@media (max-width: 800px) { .dg-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .dg-side { border-left: 0; border-top: 1px solid var(--line, #ddd); max-height: 38vh; } .dg-choice { grid-template-columns: 1fr; } }

/* Overview: live page */
.ov-card { position: relative; overflow: hidden; }
.ov-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 60%); }
.ov-card:hover::after { opacity: 1; }
.ov-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px; border-radius: 20px; background: linear-gradient(135deg, rgba(79,163,217,.22), rgba(125,111,224,.18) 55%, rgba(224,116,60,.16)); border: 1px solid var(--line, rgba(128,128,128,.25)); animation: ov-in .6s both; }
.ov-blobs i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; animation: ov-float 14s ease-in-out infinite; }
.ov-blobs i:nth-child(1) { width: 220px; height: 220px; background: #4fa3d9; top: -70px; left: -40px; }
.ov-blobs i:nth-child(2) { width: 200px; height: 200px; background: #e0743c; right: 10%; bottom: -90px; animation-delay: -5s; }
.ov-blobs i:nth-child(3) { width: 160px; height: 160px; background: #7d6fe0; right: -30px; top: -50px; animation-delay: -9s; }
.ov-hero-main, .ov-quick { position: relative; z-index: 1; }
.ov-eyebrow { margin: 0; font-size: 14px; opacity: .8; }
.ov-title { margin: 2px 0 4px; font-size: clamp(38px, 7vw, 64px); letter-spacing: -.02em; line-height: 1; }
.ov-sub { margin: 0; opacity: .75; font-size: 14px; }
.ov-clock { font-variant-numeric: tabular-nums; }
.ov-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); background: rgba(128,128,128,.12); color: inherit; font: inherit; font-size: 13px; cursor: pointer; transition: transform .18s, background .18s; backdrop-filter: blur(6px); }
.ov-chip:hover { transform: translateY(-2px); background: rgba(128,128,128,.25); }
.ov-chip svg { width: 14px; height: 14px; }
.ov-chip kbd { font-size: 10.5px; opacity: .65; border: 1px solid rgba(128,128,128,.4); border-radius: 4px; padding: 0 4px; }
.ov-ticker { overflow: hidden; margin: 12px 0; border-radius: 999px; border: 1px solid var(--line, rgba(128,128,128,.25)); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ov-ticker-track { display: flex; width: max-content; gap: 26px; padding: 8px 0; animation: ov-marquee 60s linear infinite; }
.ov-ticker:hover .ov-ticker-track { animation-play-state: paused; }
.ov-tick { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; color: inherit; text-decoration: none; cursor: pointer; }
.ov-tick i, .ov-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ov-tick b { opacity: .6; font-weight: 500; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ov-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; border: 1px solid var(--line, rgba(128,128,128,.25)); background: var(--card, #fff); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; animation: ov-in .55s both; animation-delay: var(--d, 0ms); }
.ov-kpi:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.ov-kpi b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-kpi small { opacity: .65; font-size: 11.5px; }
.ov-kpi-ic svg { width: 18px; height: 18px; opacity: .7; }
.ov-kpi.alert { border-color: #e0553c; animation: ov-in .55s both, ov-pulse 2.2s ease-in-out infinite; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.ov-grid > .ov-card { animation: ov-in .6s both; }
.ov-grid > .ov-card:nth-child(2) { animation-delay: .06s; } .ov-grid > .ov-card:nth-child(3) { animation-delay: .12s; } .ov-grid > .ov-card:nth-child(4) { animation-delay: .18s; } .ov-grid > .ov-card:nth-child(5) { animation-delay: .24s; } .ov-grid > .ov-card:nth-child(6) { animation-delay: .3s; }
.ov-wide { grid-column: 1 / -1; }
.ov-pipe { display: flex; height: 22px; border-radius: 999px; overflow: hidden; gap: 3px; }
.ov-pipe-seg { transform-origin: left; animation: ov-scalex .9s cubic-bezier(.2,.8,.2,1) both; min-width: 8px; background: currentColor; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.ov-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: inherit; text-decoration: none; }
.ov-leg i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.ov-row { transition: background .15s, transform .15s; cursor: pointer; }
.ov-row:hover { transform: translateX(3px); }
.ov-when { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(128,128,128,.16); white-space: nowrap; }
.ov-when.soon { background: rgba(224,168,74,.28); }
.ov-when.late { background: rgba(224,85,60,.3); animation: ov-pulse 1.8s ease-in-out infinite; }
.ov-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ov-donut svg { width: 140px; flex: none; }
.ov-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ov-donut li { display: flex; align-items: center; gap: 7px; }
.ov-donut li span { flex: 1; } .ov-donut li i { width: 9px; height: 9px; border-radius: 50%; }
.ov-donut-n { font-size: 22px; font-weight: 700; fill: currentColor; } .ov-donut-l { font-size: 9px; fill: currentColor; opacity: .6; }
.ov-arc { animation: ov-draw 1.1s cubic-bezier(.2,.8,.2,1) both; }
.ov-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.ov-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ov-bar span { width: 100%; max-width: 38px; border-radius: 8px 8px 3px 3px; background: linear-gradient(#4fa3d9, #7d6fe0); transform-origin: bottom; animation: ov-growy .8s cubic-bezier(.2,.8,.2,1) both; }
.ov-bar b { font-size: 12px; } .ov-bar small { opacity: .65; font-size: 11px; }
.ov-hbar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.ov-hbar div { height: 8px; border-radius: 99px; background: rgba(128,128,128,.18); overflow: hidden; }
.ov-hbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4fa3d9, #4caf7d); transform-origin: left; animation: ov-scalex .9s cubic-bezier(.2,.8,.2,1) both; }
.ov-meter { position: relative; height: 10px; border-radius: 99px; background: rgba(128,128,128,.18); overflow: hidden; margin: 6px 0; }
.ov-meter i { position: absolute; inset: 0 auto 0 0; background: #e0a84a; border-radius: 99px; transform-origin: left; animation: ov-scalex 1s both; }
.ov-meter i.paid { background: #4caf7d; }
.ov-fee-n { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; opacity: .85; }
.ov-line svg { width: 100%; height: auto; max-height: 170px; display: block; overflow: visible; stroke: none; }
.ov-axis { stroke: rgba(128,128,128,.35); stroke-width: 1; }
.ov-line-x { position: relative; height: 16px; margin-top: 2px; }
.ov-line-x small { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; opacity: .65; white-space: nowrap; }
.ov-gauge-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ov-gauge-row .grow { flex: 1; min-width: 160px; }
.ov-gauge { width: 130px; height: auto; flex: none; stroke: none; }
@keyframes ov-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ov-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 24px) scale(1.15); } }
@keyframes ov-marquee { to { transform: translateX(-50%); } }
@keyframes ov-scalex { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ov-growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ov-draw { from { stroke-dasharray: 0 var(--c); } }
@keyframes ov-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,85,60,.0); } 50% { box-shadow: 0 0 0 6px rgba(224,85,60,.18); } }
@media (prefers-reduced-motion: reduce) { .ov-card, .ov-kpi, .ov-blobs i, .ov-ticker-track, .ov-pipe-seg, .ov-arc, .ov-bar span, .ov-hbar i, .ov-meter i, .ov-when.late { animation: none !important; } }

/* Diagram: connection points on every box */
.dg-handle { opacity: 0; cursor: crosshair; transition: opacity .12s; }
.dg-node:hover .dg-handle, .dg-node.sel .dg-handle, .dg-node.target .dg-handle, .dg-node.linking .dg-handle { opacity: 1; }
.dg-dot { fill: #fff; stroke: #e0743c; stroke-width: 2; transition: r .12s; }
.dg-handle:hover .dg-dot, .dg-handle.snap .dg-dot { fill: #e0743c; }
.dg-node.target { filter: drop-shadow(0 0 7px #e0743c); }
.dg-temp { pointer-events: none; }

/* Top bar: More menu */
.tabs.has-more { overflow: visible !important; position: relative; }
.tab-more { position: relative; margin-left: auto; flex: none; }
.tab-more .tab { cursor: pointer; border: 0; background: none; font: inherit; }
.tab-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; min-width: 230px; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: var(--card, #fff); border: 1px solid var(--line, #ddd); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.tab-menu[hidden] { display: none; }
.tab-menu .tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 10px; padding: 8px 12px; white-space: normal; transform: none !important; }
.tab-menu .tab small { font-size: 11px; opacity: .6; font-weight: 400; }
.tab-menu .tab:hover { background: rgba(128,128,128,.14); }

/* Links and Notes: page content blocks */
.blk-view .blk-h { margin: 18px 0 6px; font-size: 19px; }
.blk-view .blk-h:first-child { margin-top: 0; }
.blk-p { margin: 0 0 10px; white-space: pre-wrap; line-height: 1.55; }
.blk-q { margin: 10px 0; padding: 10px 16px; border-left: 4px solid #e0743c; background: rgba(224,116,60,.08); border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.blk-ul { margin: 6px 0 12px 20px; padding: 0; }
.blk-link { display: inline-flex; align-items: center; gap: 6px; }
.blk-fig { margin: 10px 0; }
.blk-fig figcaption { font-size: 12.5px; opacity: .7; margin-top: 6px; }
.blk-img { cursor: zoom-in; border-radius: 12px; overflow: hidden; max-width: 100%; }
.blk-img img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: rgba(128,128,128,.1); }
.blk-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.blk-list { display: flex; flex-direction: column; gap: 8px; }
.blk-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--card, #fff); }
.blk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.blk-type { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; opacity: .55; }
.blk-in { width: 100%; font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #ccc); background: transparent; color: inherit; resize: vertical; }
.blk-media { display: flex; gap: 10px; align-items: center; }
.blk-thumb { width: 84px; height: 64px; flex: none; border-radius: 8px; overflow: hidden; background: rgba(128,128,128,.15); }
.blk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-fn { display: block; font-size: 12.5px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-ctl { display: flex; flex-direction: column; gap: 2px; }
.blk-builder.drop-hot { outline: 2px dashed #e0743c; }

/* the app gives every svg a 16px icon size and a stroke: charts, maps and diagrams need their own */
.cm-stage svg, .dg-thumb, .dg-big, .dg-canvas, .ov-donut svg { stroke: none; stroke-width: 1; }
.cm-stage svg { height: auto; aspect-ratio: 1000 / 760; }
.dg-big, .ov-donut svg { height: auto; }
.cm-stage { min-height: 360px; }
.cm-edge { stroke: currentColor; }
.cm-edge.on { stroke: #e0743c; }
.topbar { max-width: 100vw; }
.topbar .tabs { flex: 1 1 0; min-width: 0; }
.topbar .top-actions { flex: none; }

/* Live motion on every page */
.mo-in { animation: mo-in .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--mo-d, 0ms); }
@keyframes mo-in { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.mo-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 60%); }
.mo-glow:hover::after { opacity: 1; }
.auto-card:not([data-sort-item]), .tut-card:not([data-sort-item]), .contact-card:not([data-sort-item]), .proj-tile, .mat-card, .tile, .md-tile { transition: transform .2s ease, box-shadow .2s ease; }
.auto-card:not([data-sort-item]):hover, .tut-card:not([data-sort-item]):hover, .contact-card:not([data-sort-item]):hover, .proj-tile:hover, .mat-card:hover, .tile:hover, .md-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.list > .row:not([data-sort-item]) { transition: transform .15s ease, background .15s ease; }
.list > .row[data-act]:hover, .list > .row[data-go]:hover, .list > .row[data-auto-open]:hover, .list > .row[data-mod-open]:hover, .list > .row[data-cm-node]:hover { transform: translateX(3px); }
.btn { transition: transform .12s ease, background .2s ease, box-shadow .2s ease; }
.btn:active { transform: scale(.97); }
.eng-tab, .eng-sec, .cm-kind { transition: color .2s ease, border-color .2s ease, opacity .2s ease; }
.cm-fresh .cm-node { animation: cm-pop .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 7ms); transform-box: fill-box; transform-origin: center; }
.cm-fresh .cm-edge { animation: cm-fade .9s ease-out backwards .25s; }
@keyframes cm-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes cm-fade { from { opacity: 0; } }
.cm-node circle { transition: r .2s ease; }
.cm-node:hover circle { filter: brightness(1.25); }
.dg-canvas .dg-node { transition: filter .15s; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .mo-in, .cm-fresh .cm-node, .cm-fresh .cm-edge { animation: none !important; } }

/* Connections map (canvas) */
.cm2-bar .chip { cursor: pointer; }
.cm2-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; margin-top: 8px; }
.cm2-stage { position: relative; height: min(72vh, 760px); min-height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line, rgba(128,128,128,.25)); background: radial-gradient(circle at 50% 40%, rgba(79,163,217,.10), transparent 60%), var(--card, #14191d); }
.cm2-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.cm2-stage canvas:active { cursor: grabbing; }
.cm2-hint { position: absolute; left: 14px; bottom: 10px; font-size: 11.5px; opacity: .55; pointer-events: none; }
.cm2-tip { position: absolute; z-index: 3; pointer-events: none; padding: 7px 10px; border-radius: 10px; background: rgba(20,24,28,.92); color: #fff; font-size: 12.5px; display: flex; flex-direction: column; box-shadow: 0 8px 22px rgba(0,0,0,.35); max-width: 240px; }
.cm2-tip small { opacity: .7; }
.cm2-panel { max-height: min(72vh, 760px); overflow: auto; padding: 14px; border-radius: 18px; border: 1px solid var(--line, rgba(128,128,128,.25)); background: var(--card, #14191d); }
.cm2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cm2-head b { display: block; font-size: 15px; } .cm2-head small { opacity: .65; }
.cm2-av { --c: #888; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--c); color: #fff; font-weight: 600; font-size: 13px; border: 2px solid var(--c); position: relative; }
.cm2-av.big { width: 52px; height: 52px; font-size: 20px; } .cm2-av.sm { width: 28px; height: 28px; font-size: 12px; }
.cm2-av .pg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cm2-panel .row { cursor: pointer; gap: 10px; }
.cm2-list { position: absolute; inset: 0; overflow: auto; }
.cm2-rows { display: flex; flex-direction: column; }
.cm2-rowx { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(128,128,128,.15); }
.cm2-cell { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.cm2-cell div { min-width: 0; } .cm2-cell b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm2-cell small { opacity: .6; font-size: 11px; }
.cm2-cell:hover b { text-decoration: underline; }
.cm2-arrow { opacity: .4; text-align: center; } .cm2-why { opacity: .7; font-size: 12px; }
@media (max-width: 900px) { .cm2-wrap { grid-template-columns: 1fr; } .cm2-panel { max-height: 40vh; } .cm2-rowx { grid-template-columns: 1fr 1fr; } .cm2-arrow { display: none; } .cm2-why { grid-column: 1 / -1; } }

/* Contact cards: the person's photo stays clear, and every line of text is readable */
html[data-contact-bg="photo"] .contact-card .card-bg { filter: none !important; opacity: 1 !important; }
html[data-contact-bg="photo"] .contact-card.has-bg::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.62) 100%) !important; }
html[data-contact-bg="photo"] .contact-card.has-bg h3 { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
html[data-theme="dark"] .contact-card.has-bg h3, html[data-theme="dark"] .contact-card.has-bg .sub, html[data-theme="dark"] .contact-card.has-bg .contact-line, html[data-theme="dark"] .contact-card.has-bg .p-foot, html[data-theme="dark"] .contact-card.has-bg .p-foot span { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
html[data-theme="dark"] .contact-card.has-bg h3 { color: #fff; }
html[data-theme="dark"] .contact-card.has-bg .link-btn { color: #fff; }
html[data-theme="dark"] .contact-card.has-bg .contact-line svg { color: rgba(255, 255, 255, 0.85); }
.contact-card.has-bg .pill, .contact-card.has-bg .pill.ghost { background: rgba(255, 255, 255, 0.93) !important; color: #14222b !important; text-shadow: none !important; font-weight: 600; }

/* Connections side panel: framed boxes and three views */
.cm2-panel { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.cm2-box { border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 14px; padding: 10px 12px; background: rgba(128,128,128,.06); }
.cm2-box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(128,128,128,.2); font-size: 13px; }
.cm2-box-head i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cm2-box-head small { margin-left: auto; opacity: .6; padding: 1px 8px; border-radius: 99px; background: rgba(128,128,128,.18); }
.cm2-who .cm2-head { margin-bottom: 0; }
.cm2-pviews { display: flex; justify-content: center; }
.cm2-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 6px; border: 1px solid rgba(128,128,128,.25); border-radius: 12px; cursor: pointer; background: rgba(128,128,128,.05); transition: border-color .15s, background .15s, transform .15s; }
.cm2-item:first-of-type { margin-top: 0; }
.cm2-item:hover { border-color: rgba(128,128,128,.6); background: rgba(128,128,128,.12); transform: translateX(2px); }
.cm2-item b { display: block; font-size: 13px; } .cm2-item small { display: block; font-size: 11.5px; opacity: .7; line-height: 1.3; } .cm2-item small i, .cm2-card small i { opacity: .7; font-style: normal; }
.cm2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cm2-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid rgba(128,128,128,.3); border-top: 3px solid var(--c, #888); border-radius: 12px; cursor: pointer; background: rgba(128,128,128,.06); transition: transform .18s, box-shadow .18s; min-width: 0; }
.cm2-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.cm2-card b { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .cm2-card small { font-size: 11px; opacity: .65; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm2-av.cover { width: 100%; height: 74px; border-radius: 9px; font-size: 26px; margin-bottom: 4px; }
.cm2-mini { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle, rgba(128,128,128,.12), transparent 70%); }
.cm2-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm2-mini line { stroke-width: 1.2; opacity: .5; vector-effect: non-scaling-stroke; }
.cm2-mini-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.cm2-mini-n { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 1; transition: transform .15s; }
.cm2-mini-n:hover { transform: translate(-50%, -50%) scale(1.35); z-index: 3; }
.cm2-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11.5px; opacity: .8; }
.cm2-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

/* Install the app */
.inst-ok { color: #4caf7d; font-weight: 600; }
.inst-steps { margin: 8px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; }

/* Overview: arrange the cards */
.ov-cell { position: relative; min-width: 0; animation: ov-in .6s both; }
.ov-cell > .card { height: 100%; margin: 0; }
.ov-cell:nth-child(2) { animation-delay: .05s; } .ov-cell:nth-child(3) { animation-delay: .1s; } .ov-cell:nth-child(4) { animation-delay: .15s; } .ov-cell:nth-child(5) { animation-delay: .2s; } .ov-cell:nth-child(6) { animation-delay: .25s; } .ov-cell:nth-child(7) { animation-delay: .3s; } .ov-cell:nth-child(n+8) { animation-delay: .35s; }
.ov-grid.editing .ov-cell { outline: 2px dashed rgba(128,128,128,.45); outline-offset: 3px; border-radius: 18px; }
.ov-grid.editing .ov-cell > .card { pointer-events: none; opacity: .88; }
.ov-tools { position: absolute; z-index: 5; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; background: var(--card, #14191d); border: 1px solid var(--line, rgba(128,128,128,.4)); box-shadow: 0 6px 18px rgba(0,0,0,.3); font-size: 12.5px; }
.ov-tools b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tools .tut-grip { cursor: grab; }
.ov-tbtn { border: 0; background: rgba(128,128,128,.16); color: inherit; border-radius: 8px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: 12px; }
.ov-tbtn:hover { background: rgba(128,128,128,.32); }
.ov-tbtn.danger:hover { background: #e0553c; color: #fff; }
.ov-editbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; border: 1px dashed rgba(128,128,128,.5); background: rgba(79,163,217,.08); }
.ov-editbar small { display: block; opacity: .7; margin-top: 2px; }
.ov-editbtns { display: flex; gap: 8px; }
.ov-tray { margin-top: 14px; }
.ov-tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ov-add { text-align: left; padding: 10px 12px; border: 1px dashed rgba(128,128,128,.5); border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: transform .15s, border-color .15s, background .15s; }
.ov-add:hover { transform: translateY(-2px); border-color: #4caf7d; background: rgba(76,175,125,.1); }
.ov-add small { opacity: .65; }
.ov-chip.on { background: #4caf7d; border-color: transparent; color: #fff; }
.ov-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ov-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; border: 1px solid rgba(128,128,128,.25); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; min-width: 0; }
.ov-day:hover { transform: translateY(-3px); border-color: rgba(128,128,128,.6); }
.ov-day.today { border-color: #4fa3d9; background: rgba(79,163,217,.12); }
.ov-day b { font-size: 20px; } .ov-day small { opacity: .65; font-size: 11px; }
.ov-dots { display: flex; gap: 3px; min-height: 8px; align-items: center; } .ov-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e0743c; animation: ov-pulse 2.2s ease-in-out infinite; } .ov-dots em { opacity: .35; font-style: normal; font-size: 11px; }
.ov-day-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-cloud { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ov-tag { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 8px; transition: transform .15s, background .15s; }
.ov-tag small { opacity: .5; margin-left: 3px; font-size: .7em; }
.ov-tag:hover { transform: scale(1.12); background: rgba(128,128,128,.2); }
@media (max-width: 700px) { .ov-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Overview cover: text on the left, buttons bottom right, taller, changeable background */
.ov-hero { flex-direction: column; align-items: stretch; justify-content: space-between; flex-wrap: nowrap; min-height: var(--ov-h, 220px); padding: 22px 28px; }
.ov-hero-main { align-self: flex-start; text-align: left; max-width: 70%; }
.ov-quick { align-self: flex-end; justify-content: flex-end; margin-top: 24px; max-width: 100%; }
.ov-cover-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.ov-cover-dim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)); pointer-events: none; transition: opacity .2s; }
.ov-hero .ov-eyebrow, .ov-hero .ov-title, .ov-hero .ov-sub { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.ov-coverbar { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ov-cv-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ov-cv-row > span:first-child { width: 120px; flex: none; opacity: .7; font-size: 13px; }
.ov-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-sw { width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(128,128,128,.35); cursor: pointer; padding: 0; position: relative; overflow: hidden; transition: transform .15s, border-color .15s; }
.ov-sw:hover { transform: translateY(-2px) scale(1.06); }
.ov-sw.on { border-color: #4caf7d; box-shadow: 0 0 0 3px rgba(76,175,125,.3); }
.ov-sw-custom input { position: absolute; width: 50%; height: 100%; top: 0; opacity: 0; cursor: pointer; }
.ov-sw-custom input:first-child { left: 0; } .ov-sw-custom input:last-child { right: 0; }
.ov-sw-custom input:only-child { width: 100%; }
.ov-sw-auto { background: rgba(128,128,128,.18); color: inherit; font-weight: 700; font-size: 15px; }

/* the sliding highlight under the header tabs: it glides from one page's tab to the next */
.tabs { position: relative; }
.tab-pill { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--brand); pointer-events: none; z-index: 0; opacity: 0; transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1), opacity .3s ease; }
.tabs > .tab, .tab-more > .tab { position: relative; z-index: 1; transition: color .5s cubic-bezier(.65, 0, .35, 1); }
.tabs > .tab.active, .tab-more > .tab.active { background: transparent; color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) { .tab-pill, .tabs > .tab, .tab-more > .tab { transition: none !important; } }

/* CRM and Brag pages */
.brag-head { flex-wrap: wrap; gap: 8px; }
.brag-segs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.brag-segs button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, rgba(128,128,128,.3)); background: rgba(128,128,128,.08); color: inherit; font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.brag-segs button:hover { background: rgba(128,128,128,.18); }
.brag-segs button.on { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.brag-filters { flex-wrap: wrap; gap: 8px; align-items: center; }
.brag-filters label.sub { display: flex; gap: 6px; align-items: center; }
.brag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.brag-wide { grid-column: 1 / -1; }
.brag-reminder { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; border-color: #d9a441; }
.brag-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.brag-table th, .brag-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line, rgba(128,128,128,.25)); vertical-align: middle; }
.brag-table th { font-weight: 600; opacity: .75; }
.brag-table tr.is-archived { opacity: .5; }
.brag-scroll { overflow-x: auto; }
.brag-card { display: flex; flex-direction: column; gap: 8px; }
.brag-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.brag-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.brag-files { margin-top: 4px; }
.brag-mail { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; margin: 8px 0; }
.brag-mail dt { opacity: .65; }
.brag-mail dd { margin: 0; word-break: break-word; }
.brag-mail-body { white-space: pre-wrap; max-height: 50vh; overflow: auto; padding: 12px; border-radius: 12px; background: rgba(128,128,128,.08); font-size: 13px; line-height: 1.5; }
.brag-quote { margin: 0; padding-left: 10px; border-left: 3px solid rgba(128,128,128,.4); font-style: italic; opacity: .9; }
.brag-bar { height: 8px; border-radius: 99px; background: rgba(128,128,128,.2); overflow: hidden; }
.brag-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .4s ease; }
.brag-month { margin-top: 12px; }
.row.on { outline: 2px solid var(--brand); }

/* header tab icons (Settings → Header tabs) */
.tab.has-ic { display: inline-flex; align-items: center; white-space: nowrap; }
.tab-ic { width: 20px; height: 20px; flex: none; margin-right: 7px; }
.tabs.icon-only > .tab.has-ic { padding-inline: 9px; }
.tabs.icon-only > .tab.has-ic .tab-lbl { display: none; }
.tabs.icon-only > .tab.has-ic .tab-ic { margin-right: 0; width: 23px; height: 23px; }
.tab-menu .tab.has-ic { flex-direction: row; align-items: center; gap: 9px; }
.tab-menu .tab.has-ic .tab-txt { display: flex; flex-direction: column; }
.tab-menu .tab-ic { margin-right: 0; width: 22px; height: 22px; }
.tab-icon-row { display: grid; gap: 4px; margin-top: 10px; }
.tab-icon-row > b { font-size: 13px; }
.tab-icon-pick { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tab-icon-pick svg { width: 16px; height: 16px; }
.ov-cv-row input[type=range] { width: min(280px, 60vw); accent-color: #4caf7d; }
@media (max-width: 700px) { .ov-hero-main { max-width: 100%; } .ov-quick { align-self: stretch; justify-content: flex-start; } .ov-hero { min-height: 280px; } }

/* Cover picture: blur, zoom and position (zoom turns around the point you choose, so left/right and up/down move the picture) */
.ov-cover-img { inset: calc(var(--b, 0px) * -2); background-position: var(--px, 50%) var(--py, 50%); transform-origin: var(--px, 50%) var(--py, 50%); transform: scale(var(--z, 1)); filter: blur(var(--b, 0px)); transition: filter .2s, transform .2s; will-change: transform, filter; }
.ov-cv-row input[data-ov-cimg] { width: min(320px, 60vw); accent-color: #4caf7d; }
.ov-cv-end { opacity: .65; min-width: 140px; }

/* Theme change: the new theme spreads from the sun / moon button */
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { z-index: 1; }
.theme-vt::view-transition-new(root) { z-index: 2; }
#dock [data-theme-toggle] svg { transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
#dock [data-theme-toggle]:hover svg { transform: rotate(35deg) scale(1.15); }

/* lecture View window, and the stages inside the course view */
.tut-vhead { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.tut-vhead .pill { font-size: 11px; }
.tut-vtext { white-space: pre-wrap; margin: 4px 0 8px; line-height: 1.5; }
.tut-vstage { padding: 2px 0 6px; border-top: 1px solid var(--line, #ddd); }
.tut-vstage.empty .tut-vhead b { color: var(--muted, #888); font-weight: 600; }
.tv-pre { white-space: pre-wrap; }
.tv-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(128, 128, 128, .35); }

.sheet.xl { width: min(1100px, 100%); }
.tut-vbar { align-items: center; margin: 6px 0 4px; }
.tut-vbar .grow { flex: 1; }
.tut-vstage > summary { cursor: pointer; list-style: none; }
.tut-vstage > summary::-webkit-details-marker { display: none; }
.tut-vstage > summary::before { content: '▾'; color: var(--muted, #888); }
.tut-vstage:not([open]) > summary::before { content: '▸'; }
.tut-vhead small { color: var(--muted, #888); font-weight: 400; }
.tut-vsep { border: 0; border-top: 1px dashed var(--line, #ddd); margin: 10px 0; }
.tv-stageblk > summary { cursor: pointer; margin-top: 22px; }

.tut-arrow { font-size: 15px; line-height: 1; transition: transform .15s; flex: none; }
.tut-arrow.on { transform: rotate(90deg); }
.tut-xmode { margin-right: 4px; }
.tut-xmode button { padding: 4px 10px; font-size: 12px; }
.tut-xmode button.on { background: var(--accent, #2a6df4); color: #fff; }
.tut-inline { margin: 10px 0 4px; padding: 10px 12px; border-left: 3px solid var(--line, #ddd); background: var(--bg-2, rgba(127,127,127,.06)); border-radius: 0 8px 8px 0; }
.tut-inline .tut-vtext { white-space: pre-wrap; }

.vip-menu { position: fixed; z-index: 90; width: 240px; padding: 12px; display: grid; gap: 8px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.vip-who { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vip-who small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.vip-btn { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; border: 0; font-weight: 700; }
.vip-gate { max-width: 360px; margin-top: 14px; }
.vip-err { color: var(--red, #c0392b); font-size: 13px; margin: 6px 0 0; }

.vip-crumbs { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.vip-crumbs a { color: inherit; }
.vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vip-card { cursor: pointer; display: grid; gap: 4px; }
.vip-card small { color: var(--muted); }

.vip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.vip-filter { align-items: center; margin: 14px 0 0; }
.vip-filter .search { max-width: 240px; }

.card-menu { position: fixed; z-index: 120; min-width: 190px; padding: 6px; display: grid; gap: 1px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.card-menu .cm-title { margin: 2px 8px 6px; font-size: 12px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.card-menu button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; background: transparent; border-radius: 8px; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.card-menu button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.card-menu button.danger { color: var(--red, #c0392b); }
.card-menu button svg { width: 16px; height: 16px; }
.card-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.vip-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 8px; }
.vip-facts small { display: block; color: var(--muted); font-size: 12px; }

.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 6px; }
.ip-opt { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--card-solid); color: var(--ink); cursor: pointer; font: inherit; }
.ip-opt img, .ip-opt .ip-auto { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; font-weight: 700; color: var(--muted); }
.ip-opt small { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.15; }
.ip-opt:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.ip-opt.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card-solid)); }

.ip-btn { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-solid); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.ip-btn img, .ip-btn .ip-auto { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.ip-btn small { margin-left: auto; color: var(--muted); }
#ip-pop { position: fixed; z-index: 400; width: min(380px, calc(100vw - 16px)); max-height: min(420px, calc(100vh - 16px)); overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; padding: 12px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.25); }

/* Bento grid: the card views mix big and small tiles, packed tightly with no gaps */
@media (min-width: 720px) {
  html:not([data-bento="off"]) :is(.proj-grid:not(.custom), .mat-cards, .tut-cards, .auto-cards, .vip-grid) { grid-auto-flow: dense; grid-auto-rows: minmax(96px, auto); gap: 14px; }
  html:not([data-bento="off"]) :is(.proj-grid:not(.custom), .mat-cards, .tut-cards, .auto-cards, .vip-grid) > :nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
  html:not([data-bento="off"]) :is(.proj-grid:not(.custom), .mat-cards, .tut-cards, .auto-cards, .vip-grid) > :nth-child(8n+5) { grid-column: span 2; }
  html:not([data-bento="off"]) :is(.proj-grid:not(.custom), .mat-cards, .tut-cards, .auto-cards, .vip-grid) > :nth-child(8n+7) { grid-row: span 2; }
  html:not([data-bento="off"]) :is(.proj-grid:not(.custom), .mat-cards, .tut-cards, .auto-cards, .vip-grid) > * { border-radius: 18px; min-width: 0; }
}

.vip-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.vip-sec { display: grid; gap: 4px; text-decoration: none; color: inherit; align-content: start; }
.vip-sec small { color: var(--muted); }
.vip-sec-ic { font-size: 26px; line-height: 1; }
.vip-sec:hover { border-color: var(--brand); }

.ib-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent, #852F46); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.ag-list { display: grid; gap: 12px; margin-top: 12px; }
.ag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-data { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; }
.ag-kv small { display: block; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.ag-evidence { margin: 4px 0; color: var(--ink-2, var(--muted)); font-size: 13px; }
.ag-evidence small { color: var(--muted); }
.ag-paste { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.agent-card { cursor: pointer; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--ac, var(--brand)); }
.agent-card:hover { transform: translateY(-2px); }
.agent-top { display: flex; align-items: center; gap: 12px; }
.agent-top small { display: block; color: var(--muted); }
.agent-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: none; background: color-mix(in srgb, var(--ac, var(--brand)) 18%, var(--card-solid)); }
.agent-ic.xl { width: 72px; height: 72px; border-radius: 20px; font-size: 36px; }
.agent-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-stats { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.agent-stats b { color: var(--ink); }
.agent-note { margin-top: 10px; border-left: 4px solid var(--yellow, #F59E0B); }
.agent-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--ac, var(--brand)) 10%, var(--card-solid)); border: 1px solid var(--line); }
.agent-actions { display: flex; gap: 8px; }
.agent-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.agent-task.done b { text-decoration: line-through; color: var(--muted); }
.agent-msgs { max-height: 300px; overflow: auto; display: grid; gap: 8px; margin-bottom: 10px; }
.agent-msg { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); max-width: 90%; white-space: pre-wrap; }
.agent-msg.me { justify-self: end; background: color-mix(in srgb, var(--brand) 16%, var(--card-solid)); }
.agent-msg small { display: block; color: var(--muted); font-size: 11px; }
.agent-form { display: flex; gap: 8px; }
.agent-form .search { flex: 1; }
.agent-log { max-height: 320px; overflow: auto; }

.agent-note.tone-green { border-left-color: #10B981; }
.agent-note.tone-red { border-left-color: #EF4444; }
.agent-note .btn { margin-left: 8px; }
.agent-msg.failed { opacity: .75; }

/* the agents as employees at a desk */
.emp-scene { position: relative; border-radius: 16px; overflow: hidden; padding: 8px 8px 0; background: linear-gradient(color-mix(in srgb, var(--ac, #64748B) 14%, var(--card-solid)) 0 74%, color-mix(in srgb, var(--ac, #64748B) 28%, var(--card-solid)) 74%); }
.emp-scene.big { width: 230px; flex: none; }
.emp { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; overflow: visible; }
.emp-tag { position: absolute; left: 10px; top: 8px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: color-mix(in srgb, var(--ac, #64748B) 22%, var(--card-solid)); }
.emp-live { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.emp-scene[data-mood=idle] .emp-live, .emp-scene[data-mood=ask] .emp-live, .emp-scene[data-mood=cheer] .emp-live { background: #22c55e; }
.emp-scene[data-mood=work] .emp-live { background: #3b82f6; animation: emp-pulse 1s ease-out infinite; }
.emp-scene[data-mood=stuck] .emp-live { background: #ef4444; }
@keyframes emp-pulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.6); } 100% { box-shadow: 0 0 0 9px rgba(59,130,246,0); } }
.emp .fx, .emp .m, .emp .eyes-closed { display: none; }
.emp .led { fill: #94a3b8; }
.emp .eye { transform-box: fill-box; transform-origin: center; animation: emp-blink 4.6s infinite; }
@keyframes emp-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
.emp .emp-head { transform-origin: 80px 64px; }
.emp .arm { transform-origin: 55.5px 80px; }
.emp .arm-r { transform-origin: 104.5px 80px; }
.emp .emp-all { transform-origin: 80px 110px; }
.emp .steam { animation: emp-steam 2.4s ease-in-out infinite; }
.emp .steam.s2 { animation-delay: 1.1s; }
@keyframes emp-steam { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: .8; } 100% { transform: translateY(-6px); opacity: 0; } }
.emp .emp-plant { transform-origin: 27px 94px; animation: emp-sway 4s ease-in-out infinite alternate; }
@keyframes emp-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
/* idle: breathing, a slow look-around, a smile */
.emp[data-mood=idle] .m-smile, .emp[data-mood=ask] .m-smile { display: block; }
.emp[data-mood=idle] .emp-head, .emp[data-mood=ask] .emp-head { animation: emp-breathe 3.4s ease-in-out infinite, emp-look 9s ease-in-out infinite; }
.emp[data-mood=idle] .emp-torso, .emp[data-mood=ask] .emp-torso { animation: emp-chest 3.4s ease-in-out infinite; transform-origin: 80px 108px; }
.emp[data-mood=idle] .led { fill: #22c55e; }
@keyframes emp-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
@keyframes emp-look { 0%, 30%, 100% { rotate: 0deg; } 40%, 55% { rotate: -5deg; } 70%, 85% { rotate: 5deg; } }
@keyframes emp-chest { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }
/* working: typing, a nodding head, code floating up from the laptop */
.emp[data-mood=work] .m-flat { display: block; }
.emp[data-mood=work] .emp-head { animation: emp-nod .5s ease-in-out infinite alternate; }
.emp[data-mood=work] .arm-l { animation: emp-type-l .24s ease-in-out infinite alternate; }
.emp[data-mood=work] .arm-r { animation: emp-type-r .24s ease-in-out .12s infinite alternate; }
.emp[data-mood=work] .led { fill: #22c55e; animation: emp-led .5s steps(2) infinite; }
.emp[data-mood=work] .fx-c1, .emp[data-mood=work] .fx-c2, .emp[data-mood=work] .fx-c3 { display: block; animation: emp-code 1.8s ease-out infinite; opacity: 0; }
.emp[data-mood=work] .fx-c2 { animation-delay: .6s; } .emp[data-mood=work] .fx-c3 { animation-delay: 1.2s; }
@keyframes emp-nod { from { rotate: -2deg; translate: 0 0; } to { rotate: 2deg; translate: 0 1px; } }
@keyframes emp-type-l { from { rotate: -3deg; } to { rotate: 7deg; } }
@keyframes emp-type-r { from { rotate: 3deg; } to { rotate: -7deg; } }
@keyframes emp-led { 50% { opacity: .2; } }
@keyframes emp-code { 0% { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
/* has something for you: waves, with an exclamation mark */
.emp[data-mood=ask] .arm-r { rotate: -150deg; animation: emp-wave .6s ease-in-out infinite alternate; }
.emp[data-mood=ask] .fx-bang { display: block; animation: emp-bang 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes emp-wave { from { rotate: -135deg; } to { rotate: -168deg; } }
@keyframes emp-bang { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25) translateY(-2px); } }
/* just finished: hops with both arms up and confetti */
.emp[data-mood=cheer] .m-o { display: block; }
.emp[data-mood=cheer] .emp-all { animation: emp-hop .5s ease-in-out infinite alternate; }
.emp[data-mood=cheer] .arm-l { rotate: 150deg; animation: emp-wiggle-l .3s ease-in-out infinite alternate; }
.emp[data-mood=cheer] .arm-r { rotate: -150deg; animation: emp-wiggle-r .3s ease-in-out infinite alternate; }
.emp[data-mood=cheer] .fx-conf { display: block; animation: emp-conf 1.2s ease-out infinite; }
.emp[data-mood=cheer] .led { fill: #22c55e; }
@keyframes emp-hop { from { translate: 0 0; } to { translate: 0 -7px; } }
@keyframes emp-wiggle-l { from { rotate: 142deg; } to { rotate: 160deg; } }
@keyframes emp-wiggle-r { from { rotate: -142deg; } to { rotate: -160deg; } }
@keyframes emp-conf { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-8px) scale(1.1); opacity: .2; } }
/* paused: asleep with the head down and Zzz */
.emp[data-mood=sleep] .m-flat, .emp[data-mood=sleep] .eyes-closed { display: block; }
.emp[data-mood=sleep] .eye { display: none; }
.emp[data-mood=sleep] .emp-head { rotate: 15deg; translate: 3px 4px; animation: emp-snore 3.6s ease-in-out infinite; }
.emp[data-mood=sleep] .fx-z { display: block; animation: emp-z 3s ease-in-out infinite; opacity: 0; }
.emp[data-mood=sleep] .z2 { animation-delay: 1s; } .emp[data-mood=sleep] .z3 { animation-delay: 2s; }
@keyframes emp-snore { 0%, 100% { translate: 3px 4px; } 50% { translate: 3px 6px; } }
@keyframes emp-z { 0% { transform: translate(-4px, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -8px); opacity: 0; } }
/* cannot start: confused, scratching the head, a question mark */
.emp[data-mood=stuck] .m-sad { display: block; }
.emp[data-mood=stuck] .emp-head { animation: emp-shake 1.6s ease-in-out infinite; }
.emp[data-mood=stuck] .arm-r { rotate: -156deg; animation: emp-scratch .35s ease-in-out infinite alternate; }
.emp[data-mood=stuck] .fx-q { display: block; animation: emp-bob 1.2s ease-in-out infinite; }
@keyframes emp-shake { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes emp-scratch { from { rotate: -150deg; } to { rotate: -162deg; } }
@keyframes emp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* the line under the character: what it is doing right now */
.emp-says { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.emp-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: none; }
.emp-says[data-mood=work] .emp-dot { background: #3b82f6; animation: emp-pulse 1s ease-out infinite; }
.emp-says[data-mood=idle] .emp-dot, .emp-says[data-mood=ask] .emp-dot, .emp-says[data-mood=cheer] .emp-dot { background: #22c55e; }
.emp-says[data-mood=stuck] .emp-dot { background: #ef4444; }
.emp-time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.agent-card .emp-scene { margin: -4px -4px 0; }
html.no-motion .emp *, html.no-motion .emp-live, html.no-motion .emp-dot { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .emp *, .emp-live, .emp-dot { animation: none !important; } }

.lk { margin: 12px 0; }
.lk-form { display: flex; gap: 8px; }
.lk-form .search { flex: 1; }
.lk-cands { margin-top: 10px; }
.lk-found { margin-top: 12px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lk-item { padding: 8px 0; border-top: 1px solid var(--line); }
.lk-item:first-of-type { border-top: 0; }
.lk-deeper { margin-top: 12px; }
.lk-deeper small { color: var(--muted); }
.lk-deeper .chip { text-decoration: none; }

/* CRM: the empty + card and the table with an empty row at the end */
.crm-add { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 150px; cursor: pointer; text-align: center; border: 2px dashed var(--line); background: transparent; color: var(--muted); }
.crm-add:hover, .crm-add:focus-visible { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); outline: 0; }
.crm-plus { font-size: 38px; line-height: 1; font-weight: 300; }
.crm-add b { color: inherit; }
.crm-tablebox { padding: 0; overflow: auto; margin-top: 4px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crm-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.crm-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.crm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-table tbody tr[data-crm-open] { cursor: pointer; }
.crm-table tbody tr[data-crm-open]:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.crm-newrow td { background: color-mix(in srgb, var(--ink) 3%, transparent); border-bottom: 0; }
.crm-newrow .search { width: 100%; }

.auto-card[data-crm-open] { position: relative; }
.crm-x { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; }
.auto-card:hover .crm-x, .crm-x:focus-visible { opacity: 1; }
.crm-ask { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--yellow, #F59E0B) 16%, transparent); }
.crm-rm-actions { flex-wrap: wrap; }
@media (hover: none) { .crm-x { opacity: 1; } }

.co-found { margin: 0 0 12px; border-left: 4px solid var(--yellow, #F59E0B); }

/* Material List: the + card, the + row and the add row at the end */
.mat-card.mat-add { padding: 18px; }
.mat-add-row { cursor: pointer; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); align-items: center; gap: 10px; margin-top: 8px; }
.mat-add-row:hover, .mat-add-row:focus-visible { border-color: var(--brand); color: var(--brand); outline: 0; }
.mat-newrow td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mat-newrow .search { width: 100%; min-width: 90px; }
.mat-newrow td:nth-child(2) .search { min-width: 200px; }
.mat-newrow .mat-nr-add { font-size: 24px; width: 36px; height: 36px; cursor: pointer; }
.mat-newrow td:first-child { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; }

/* CRM: the PM, and the small CRM buttons on Projects and Contacts */
.crm-pm { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0 0; }
.crm-pm small { color: var(--muted); }
.crm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.crm-strip > small { color: var(--muted); }
.crm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 9%, var(--card-solid)); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; max-width: 100%; }
.crm-chip svg { width: 13px; height: 13px; }
.crm-chip b { color: var(--brand); font-weight: 700; }
.crm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.crm-chip:hover { border-color: var(--brand); }

.pp-row { cursor: pointer; }
.pp-row input { width: 18px; height: 18px; flex: none; }
.inv-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.inv-strip > small { color: var(--muted); }
.inv-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-solid); font-size: 13px; }
.inv-chip .party { text-decoration: none; color: inherit; }
.inv-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; border-radius: 50%; }
.inv-x:hover { color: var(--red, #c0392b); }
.inv-add svg { width: 13px; height: 13px; }

.inv-arrow { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.inv-arrow:hover { color: var(--ink); border-color: var(--brand); }
.inv-caret { display: inline-block; width: 10px; font-size: 11px; }
.inv-arrow-row { margin-top: 8px; }
.inv-pm { padding-left: 6px; gap: 6px; }
.inv-pm .pill { font-size: 10px; padding: 1px 6px; }

/* prayer times under the date and time in the Overview hero */
.pr-row { margin-top: 12px; display: grid; gap: 8px; max-width: 100%; }
.pr-boxes { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-box { display: grid; gap: 1px; min-width: 78px; padding: 6px 12px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.28); backdrop-filter: blur(6px); text-align: center; transition: background .2s, border-color .2s, box-shadow .2s; }
.pr-box small { font-size: 11px; opacity: .8; }
.pr-box b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pr-box.soft { opacity: .8; }
.pr-box.now { border-color: currentColor; background: rgba(255,255,255,.55); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.pr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
.pr-count { font-variant-numeric: tabular-nums; font-size: 16px; }
.pr-place { opacity: .7; font-size: 12px; }
.pr-gear { border: 0; background: rgba(255,255,255,.25); color: inherit; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; line-height: 1; }
.pr-gear:hover { background: rgba(255,255,255,.5); }
.ov-hero .pr-box, .ov-hero .pr-line { text-shadow: 0 1px 8px rgba(0,0,0,.25); }
@media (max-width: 700px) { .pr-box { min-width: 64px; padding: 5px 8px; } }

/* prayer times: sizes (Medium is the base look) and the reminder notice */
.pr-row[data-size="s"] { margin-top: 8px; gap: 5px; }
.pr-row[data-size="s"] .pr-boxes { gap: 5px; }
.pr-row[data-size="s"] .pr-box { min-width: 54px; padding: 3px 8px; border-radius: 9px; border-width: 1.5px; }
.pr-row[data-size="s"] .pr-box small { font-size: 9.5px; }
.pr-row[data-size="s"] .pr-box b { font-size: 11.5px; }
.pr-row[data-size="s"] .pr-line { font-size: 11.5px; gap: 4px 10px; }
.pr-row[data-size="s"] .pr-count { font-size: 12.5px; }
.pr-row[data-size="s"] .pr-gear { width: 22px; height: 22px; font-size: 12px; }
.pr-row[data-size="l"] .pr-box { min-width: 108px; padding: 10px 18px; border-radius: 15px; }
.pr-row[data-size="l"] .pr-box small { font-size: 13px; }
.pr-row[data-size="l"] .pr-box b { font-size: 21px; }
.pr-row[data-size="l"] .pr-line { font-size: 16px; }
.pr-row[data-size="l"] .pr-count { font-size: 22px; }
.pr-opt { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.pr-opt input { width: 17px; height: 17px; }
.pr-mins { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 4px 0 8px 25px; }
.pr-mins .fld { width: 130px; }
#pr-alert-root { position: fixed; top: 70px; right: 18px; z-index: 300; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.pr-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card-solid); border: 2px solid var(--brand); box-shadow: 0 14px 40px rgba(0,0,0,.25); animation: pr-in .35s ease-out; }
.pr-alert b { display: block; font-size: 16px; }
.pr-alert small { color: var(--muted); }
.pr-alert-ic { font-size: 26px; }
.pr-alert-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
@keyframes pr-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the company header on the CRM and Brag tabs: a small banner, so the project below it stays the main title */
.co-hero { align-items: center; padding: 6px 0 2px; }
.co-hero .av.co-hero-logo { width: 44px; height: 44px; margin-left: 0; border: 0; border-radius: 10px; font-size: 15px; flex: 0 0 auto; } /* the company logo (its photo), or its initials until one is added */
.co-hero-name { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.co-hero .sub { font-size: 12px; }

/* ---------- Links: scanned videos (js/videoscan.js) ---------- */
.auto-thumb.vs { width: 72px; height: 44px; border-radius: 8px; }
.auto-thumb.vs.sm { width: 56px; height: 36px; }
.auto-thumb.vs img, .vs-thumb img { object-fit: cover; }
.vs-stat { color: var(--ink-2); }
.vs-err { color: var(--red, #b3402a); }
.vs-main { display: flex; gap: 14px; align-items: flex-start; }
.vs-thumb { display: block; flex: none; width: 240px; max-width: 40%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, var(--card-solid)); }
.vs-thumb img { width: 100%; height: 100%; display: block; }
.vs-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; padding: 3px 0; }
.vs-row small { color: var(--muted); }
.vs-row span { color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .vs-main { flex-direction: column; } .vs-thumb { width: 100%; max-width: none; } }
.auto-thumb.vs.round { width: 44px; height: 44px; border-radius: 50%; }
.auto-thumb.vs.round.sm { width: 36px; height: 36px; }
.vs-thumb.round { width: 96px; aspect-ratio: 1; border-radius: 50%; }
.vs-embed { margin-top: 12px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, var(--card-solid)); }
.vs-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.vs-embed.youtube, .vs-embed.vimeo { aspect-ratio: 16 / 9; max-width: 820px; }
.vs-embed.instagram { max-width: 540px; height: 760px; }
.vs-embed.linkedin { max-width: 560px; height: 600px; }
.vs-link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vs-files { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vs-file { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px calc(10px + var(--d, 0) * 18px); font-size: 13px; border-top: 1px solid var(--line); }
.vs-file:first-child { border-top: 0; }
.vs-file > a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; min-width: 0; flex: 1; }
.vs-file > a:hover { color: var(--brand, var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.vs-file small { color: var(--muted); flex: none; }
.vs-file .vs-caret { display: inline-block; width: 10px; color: var(--muted); transition: transform .2s; }
.vs-file.open .vs-caret { transform: rotate(90deg); }
.vs-file.busy .vs-caret { opacity: .4; }
.vs-file .vs-fopen { flex: none; color: var(--muted); display: inline-flex; }
.vs-file .vs-fopen svg { width: 14px; height: 14px; }
.vs-readme { max-height: 420px; overflow: auto; }
.vs-embed.tiktok { max-width: 340px; height: 600px; }
.vs-embed.facebook { max-width: 560px; height: 520px; }
.vs-sheet { max-width: 720px; border-radius: 12px; overflow: hidden; background: #000; margin: 4px 0 8px; }
.vs-sheet img { width: 100%; height: auto; display: block; object-fit: contain; }
.vs-transcript summary { cursor: pointer; }
.card-menu.vs-assets { max-height: min(70vh, 520px); overflow: auto; }
.card-menu.vs-assets button small { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* Tools in 3D space: every tool a floating shape (js/tools3d.js) */
.tools3d { position: relative; width: 100%; height: clamp(460px, 72vh, 820px); border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #1a2a4a 0%, #0c1426 55%, #05080f 100%); box-shadow: inset 0 0 120px rgba(0, 0, 0, .45); }
.tools3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.tools3d .net3d-ui { flex-wrap: wrap; justify-content: flex-end; }
.t3-seg { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 18, 20, .6); backdrop-filter: blur(6px); }
.t3-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.t3-seg button.on { background: rgba(70, 240, 228, .3); }
.t3-key { max-width: calc(100% - 28px); }
.t3-key i { border-radius: 50%; background: currentColor; }
.t3-pop { position: fixed; z-index: 80; width: 250px; padding: 12px 14px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); border-left: 4px solid var(--kind, var(--accent)); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); pointer-events: none; font-size: 12px; color: var(--ink-2); animation: npop-in .15s ease-out; }
.t3-pop-top { display: flex; align-items: center; gap: 10px; }
.t3-pop-top b { display: block; font-size: 14px; color: var(--ink); }
.t3-pop-top small { color: var(--muted); }
.t3-pop p { margin: 8px 0 0; }
.t3-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); }
@media (max-width: 640px) { .tools3d { height: 70vh; } .tools3d .net3d-ui { left: 12px; right: 12px; } }
/* Settings → 3D space: the colour of the space */
.tools3d[data-space="teal"] { background: radial-gradient(ellipse at 50% 30%, #15333a 0%, #0b1a1e 60%, #070f12 100%); }
.tools3d[data-space="nebula"] { background: radial-gradient(ellipse at 35% 30%, #3a1d5e 0%, #1c1030 45%, #0a0612 100%), radial-gradient(ellipse at 80% 70%, #6b1f4a 0%, transparent 60%); }
.tools3d[data-space="dawn"] { background: radial-gradient(ellipse at 50% 20%, #4a2a1a 0%, #241208 50%, #0d0704 100%); }
.tools3d[data-space="black"] { background: #000; }
.t3-shape-key span { color: var(--muted); }
.t3-shape-key i { background: var(--kind); }

/* "Saved copy" notice: the installed app is running from its saved files because the server is not running (js/install.js) */
.inst-offline[hidden] { display: none; }
.inst-offline {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 680px);
  background: var(--ink); color: var(--bg); border-radius: 18px; padding: 10px 10px 10px 16px;
  font-size: 13px; line-height: 1.4; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); animation: rise .25s ease;
}
.inst-offline b { color: var(--yellow); }
.inst-offline button { border: 0; background: var(--accent); color: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; }
.inst-offline .inst-offline-x { background: transparent; color: inherit; opacity: .7; padding: 6px 8px; }
.inst-offline .inst-offline-x:hover { opacity: 1; }
@media (max-width: 640px) { .inst-offline { left: 12px; right: 12px; transform: none; max-width: none; flex-wrap: wrap; } }

/* Header tab layout: group names, folded groups and their menu (js/tablayout.js) */
.tab-glabel { flex: none; align-self: center; margin: 0 4px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .55; white-space: nowrap; }
.tab-fold { cursor: pointer; border: 0; background: none; font: inherit; white-space: nowrap; }
.tab-pop { position: fixed; z-index: 60; min-width: 220px; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: var(--card-solid, var(--card, #fff)); border: 1px solid var(--line, #ddd); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.tab-pop .tab { display: flex; align-items: center; gap: 9px; border-radius: 10px; padding: 8px 12px; white-space: normal; }
.tab-pop .tab .tab-txt { display: flex; flex-direction: column; }
.tab-pop .tab .tab-ic { margin-right: 0; width: 22px; height: 22px; }
.tab-pop .tab small { font-size: 11px; opacity: .6; font-weight: 400; }
.tab-pop .tab:hover { background: rgba(128,128,128,.14); }
/* the editor in Settings → Header tabs */
.tl-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 4px; }
.tl-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-solid, var(--card)); }
.tl-row .tab-ic { width: 18px; height: 18px; margin: 0; flex: none; }
.tl-row.tl-in { margin-left: 28px; }
.tl-row.tl-off { opacity: .55; }
.tl-row.tl-sep { min-height: 28px; border-style: dashed; background: transparent; }
.tl-row.tl-grp { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--card-solid, var(--card))); }
.tl-grip { cursor: grab; opacity: .5; letter-spacing: -2px; padding: 0 4px; user-select: none; touch-action: none; }
.tl-line { flex: 1; height: 1px; background: var(--line); }
.tl-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.tl-name { flex: 1; min-width: 80px; max-width: 240px; padding: 4px 8px; }
.tl-fold { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.tl-btns { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.tl-row.tl-sep .tl-btns, .tl-row.tl-grp .tl-btns { margin-left: 0; }
.tl-row.tl-sep .tl-line + .sub { flex: none; }

/* ---------- project stages and timeline (js/stages.js) ---------- */
.stl { --stl-lab: 170px; position: relative; z-index: 0; display: grid; gap: 6px; min-width: 520px; }
.stl-row { display: grid; grid-template-columns: var(--stl-lab) 1fr; gap: 10px; align-items: center; }
.stl-label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-track { position: relative; height: 22px; border-radius: 6px; background: var(--line); background: color-mix(in srgb, var(--line) 45%, transparent); }
.stl-head .stl-track { background: none; height: 16px; }
.stl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.stl-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; min-width: 6px; }
.stl-bar.tone-muted { background: var(--muted); opacity: .55; }
.stl-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.stl-sw.tone-muted { background: var(--muted); opacity: .55; }
.stl-nodate { position: absolute; left: 8px; top: 3px; font-size: 11px; }
.stl-today { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--red, #c0392b); opacity: .8; z-index: 1; }
.stl-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--card-solid, #fff); z-index: 2; }
.stl-dot.stl-deadline { background: var(--brand); }
.stl-dot.stl-task { background: var(--accent); border-radius: 3px; }
.stl-dot.late { background: var(--red, #c0392b); }
.stl-dot.done { opacity: .4; }
.stl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.stl-dot.inline, .stl-today.inline { position: static; display: inline-block; margin: 0 2px 0 0; vertical-align: middle; }
.stl-today.inline { height: 12px; }
.stl-num { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.stl-late { color: var(--red, #c0392b); }
.crm-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.crm-stage small { font-size: 12px; }
.stage-zone { margin-bottom: 4px; }
.stage-zone .stage-row-tools { display: inline-flex; gap: 2px; margin-left: 4px; opacity: .55; transition: opacity .15s; }
.stage-zone .row:hover .stage-row-tools, .stage-zone .stage-row-tools:focus-within { opacity: 1; }
/* the live timeline rows: click an empty spot to add, click a point to open it */
.stl-add { cursor: crosshair; transition: background .15s; }
.stl-add:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.stl-subrow .stl-track { height: 40px; }
button.stl-dot, button.stl-pt { padding: 0; font: inherit; cursor: pointer; appearance: none; }
button.stl-dot:hover { transform: scale(1.35); }
button.stl-dot[disabled] { cursor: default; }
.stl-pt { position: absolute; top: 6px; display: flex; align-items: center; gap: 4px; background: none; border: 0; transform: translateX(-7px); z-index: 2; max-width: 140px; color: var(--ink); }
.stl-pt i { width: 13px; height: 13px; flex: none; background: var(--y-ink, #a86f00); background: var(--yellow); transform: rotate(45deg); border: 2px solid var(--card-solid, #fff); border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.stl-pt span { font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--card-solid, #fff) 85%, transparent); }
.stl-pt:hover span { overflow: visible; position: relative; z-index: 3; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.stl-pt.late i { background: var(--red, #c0392b); }
.stl-pt.done { opacity: .45; }
.stl-pt.inline { position: static; display: inline-flex; transform: none; vertical-align: middle; }
.stl-pt.inline i { width: 9px; height: 9px; }
.stl-ghost { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; z-index: 4; }
.stl-ghost i { position: absolute; top: 2px; bottom: 2px; left: -1px; border-left: 2px dashed var(--brand); }
.stl-ghost b { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; padding: 2px 6px; border-radius: 6px; background: var(--brand); color: var(--brand-ink, #fff); }
.stl-ghost.flip b { left: auto; right: 6px; }
.stl-name { all: unset; display: block; cursor: pointer; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-name > .stl-sw, .stl-name > .stl-pt.inline { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.stl-name > .stl-pt.inline { display: inline-flex; vertical-align: middle; }
.stl-tname { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the names column's edge: drag to widen, double-click to fit */
.stl-head .stl-label { overflow: visible; }
.stl-resize { position: absolute; top: -4px; right: -9px; width: 8px; height: 26px; cursor: col-resize; border-radius: 4px; z-index: 6; touch-action: none; }
.stl-resize::after { content: ''; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s; }
.stl-resize:hover::after, .stl-resizing .stl-resize::after { background: var(--brand); }
.stl-resizing, .stl-resizing * { cursor: col-resize !important; user-select: none; }
.stl-name:hover { color: var(--ink); text-decoration: underline; }
.stl-bar { cursor: pointer; }
/* timeline v3: views, zoom, days of the week, weekends, task bars, list and calendar */
.stl-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.stl-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.stl-label { position: sticky; left: 0; z-index: 5; background: var(--card-solid, #fff); box-shadow: 0 -3px 0 var(--card-solid, #fff), 0 3px 0 var(--card-solid, #fff), -16px 0 0 var(--card-solid, #fff); align-self: stretch; padding-right: 4px; }
.stl-group .stl-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.stl-we-layer { position: absolute; top: 0; bottom: 0; left: calc(var(--stl-lab) + 10px); right: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.stl-we-layer span { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent, #c27a5a) 13%, transparent); }
.stl-month { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); overflow: visible; }
.stl-month b { position: sticky; left: calc(var(--stl-lab) + 14px); display: inline-block; padding-left: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.stl-days .stl-track { height: 30px; background: none; }
.stl-day { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; line-height: 1.1; color: var(--ink-2); border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.stl-day i { font-style: normal; font-size: 9.5px; color: var(--muted); }
.stl-day.we { color: var(--accent, #c27a5a); font-weight: 700; }
.stl-day.we i { color: inherit; }
.stl-day.now { background: var(--red, #c0392b); color: #fff; border-radius: 6px; }
.stl-day.now i { color: #fff; }
.stl-wk { justify-content: flex-start; align-items: flex-start; padding: 8px 0 0 3px; white-space: nowrap; }
.stl-bar, .stl-tbar { z-index: 2; }
.stl-tbar { position: absolute; top: 3px; bottom: 3px; border: 0; border-radius: 6px; background: var(--brand); color: var(--brand-ink, #fff); padding: 0 6px; font: inherit; font-size: 11px; text-align: left; overflow: hidden; cursor: pointer; min-width: 6px; }
.stl-tbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 16px; }
.stl-tbar.late { background: var(--red, #c0392b); }
.stl-tbar.done { opacity: .45; }
.stl-tbar[disabled] { cursor: default; }
.stl-tbar.inline { position: static; display: inline-block; width: 20px; height: 9px; padding: 0; vertical-align: middle; }
.stl-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-tname.done { text-decoration: line-through; opacity: .6; }
.stl-newtask .stl-track { cursor: ew-resize; border: 1px dashed var(--line); background: none; }
.stl-range { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 35%, transparent); border: 1px solid var(--brand); z-index: 4; pointer-events: none; }
.stl-range b { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 11px; white-space: nowrap; color: var(--ink); }
.stl-z-fit .stl-pt span { max-width: 90px; }
/* list view */
.stl-listbox { margin: 0; box-shadow: none; padding: 0; overflow-x: auto; }
.stl-table tr.stl-click { cursor: pointer; }
.stl-type { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.stl-type-submission { background: var(--yellow); color: #161818; }
.stl-type-task { background: var(--brand); color: var(--brand-ink, #fff); }
/* calendar view */
.stl-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.stl-cal-head b { min-width: 130px; text-align: center; }
.stl-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.stl-cal-dow { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0; }
.stl-cal-dow:nth-child(6), .stl-cal-dow:nth-child(7) { color: var(--accent, #c27a5a); }
.stl-cal-cell { min-height: 84px; border-radius: 8px; border: 1px solid var(--line); border-top: 3px solid var(--stl-stage, var(--line)); padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.stl-cal-cell:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.stl-cal-grid > .stl-cal-cell:nth-child(7n + 6), .stl-cal-grid > .stl-cal-cell:nth-child(7n) { background: color-mix(in srgb, var(--accent, #c27a5a) 9%, transparent); }
.stl-cal-cell.off { border: 0; background: none !important; cursor: default; }
.stl-cal-cell.today .stl-cal-num { background: var(--red, #c0392b); color: #fff; border-radius: 99px; padding: 0 6px; }
.stl-cal-num { font-size: 11px; font-weight: 700; color: var(--ink-2); align-self: flex-start; }
.stl-cal-item { font-size: 10.5px; line-height: 1.3; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.stl-cal-sub { background: var(--yellow); color: #161818; }
.stl-cal-task { background: var(--brand); color: var(--brand-ink, #fff); }
.stl-cal-stage { background: var(--line); color: var(--ink-2); }
.stl-cal-item.late { background: var(--red, #c0392b); color: #fff; }
.stl-cal-item.done { opacity: .45; }
.stl-pick { width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer; }
@media (max-width: 640px) { .stl { --stl-lab: 110px; } .stl-cal-cell { min-height: 60px; } }

/* colours by type (js/typecolors.js): --tc the type's shade, --tcc its category's colour */
.mat-card.tc { border-color: color-mix(in srgb, var(--tc) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 18%, var(--card, #fff)) 0%, var(--card, #fff) 70%); box-shadow: inset 0 4px 0 var(--tcc); }
.mat-card.tc:hover { box-shadow: inset 0 4px 0 var(--tcc), 0 12px 28px color-mix(in srgb, var(--tc) 30%, transparent); }
.mat-card.tc .mat-card-body small { color: color-mix(in srgb, var(--tc) 70%, var(--ink, #222)); font-weight: 600; }
.mat-card.tc .mat-card-body small::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); margin-right: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tcc) 40%, transparent); }
.mat-table tr.tc td:first-child { box-shadow: inset 4px 0 0 var(--tc); }
.mat-table tr.tc:hover { background: color-mix(in srgb, var(--tc) 10%, transparent); }
.row.tc { box-shadow: inset 4px 0 0 var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 10%, transparent), transparent 40%); }
.chip.tc-chip { border-color: color-mix(in srgb, var(--tc) 60%, transparent); }
.chip.tc-chip::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); margin-right: 6px; vertical-align: 1px; }
.chip.tc-chip.on { background: color-mix(in srgb, var(--tc) 22%, transparent); border-color: var(--tc); }

/* CRM company timeline */
.crm-tl { margin-top: 12px; }
.crm-tl .stl-bar-top .qf-select { max-width: 220px; }
.stl-prow { border-top: 1px solid var(--line); }
.stl-prow .stl-label { gap: 8px; }
.stl-pname { font-weight: 700; color: var(--ink); }
.stl-prow .stl-bar { top: 7px; bottom: 7px; opacity: .55; }
.stl-in .stl-label { padding-left: 14px; }
.stl-sumrow { border-top: 1px solid var(--line); }
.stl-sumrow .stl-track { min-height: calc(26px + var(--stl-lanes, 1) * 8px); }
.stl-sumrow .stl-bar.stl-faint { opacity: .3; top: 3px; bottom: 3px; }
.stl-sumrow .stl-pt { top: 4px; }
.stl-tbar.stl-thin { height: 6px; top: auto; bottom: 5px; padding: 0; min-height: 0; opacity: .85; }
.stl-pick-group { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stl-pick-group > b { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stl-cal-item em { font-style: normal; font-weight: 700; opacity: .75; }

/* ---------- Settings: search, setting rows, tab icons ---------- */
.settings-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.settings-top .h-title { margin: 0; }
.settings-search { margin-left: auto; width: min(340px, 100%); }
.set-pages { margin-bottom: 12px; }
.settings-page-title { margin-bottom: 2px; }
.settings-page-hint { margin: 0 0 12px; }
.settings-body > section.card + section.card { margin-top: 12px; }
.set-row { display: grid; grid-template-columns: minmax(180px, 32%) minmax(0, 1fr); gap: 8px 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.card-head + .set-row, .card-head + p + .set-row { border-top: 0; padding-top: 4px; }
.set-label { display: grid; gap: 2px; min-width: 0; }
.set-label b { font-size: 14px; font-weight: 600; color: var(--ink); }
.set-label small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.set-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.set-ctl > .chips { margin: 0; }
.set-ctl .od-status { display: inline-flex; align-items: center; gap: 8px; }
.set-input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); font: inherit; }
.set-val { color: var(--ink-2); }
.set-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-items: center; }
.set-foot .grow { flex: 1; }
.set-foot { justify-content: flex-end; }
.set-foot .btn, .set-ctl .btn { flex: 0 0 auto; }
.set-results .set-result { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.set-results .set-result:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.set-flash { animation: set-flash 1.6s ease; }
@keyframes set-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: var(--shadow); } }
.tabicon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tabicon-item.open { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.tabicon-cur { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-solid); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.tabicon-cur:hover { border-color: var(--ink-2); }
.tabicon-cur svg { width: 20px; height: 20px; flex: none; }
.tabicon-cur b { flex: 1; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabicon-cur small { color: var(--muted); font-size: 11px; }
.tabicon-item.open .tabicon-cur { border-color: transparent; background: none; }
.tabicon-grid { margin-top: 6px; }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .settings-nav .settings-tab small { display: none; }
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .settings-search { margin-left: 0; width: 100%; }
}

/* Density: Compact (Settings → Appearance → Size & motion) */
html[data-density="compact"] .card { padding: 12px 14px; }
html[data-density="compact"] .toolbar { margin: 8px 0; gap: 6px; }
html[data-density="compact"] .auto-cards, html[data-density="compact"] .stack { gap: 8px; }
html[data-density="compact"] .row { padding-top: 6px; padding-bottom: 6px; }
html[data-density="compact"] .set-row { padding: 8px 0; }
html[data-density="compact"] .chip { padding-top: 4px; padding-bottom: 4px; }
/* Animations: Off */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

/* Primavera schedule cards in the Agent inbox (js/primavera.js) */
.pv-table-wrap { overflow-x: auto; margin-top: 6px; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pv-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; padding: 4px 6px; }
.pv-table td { padding: 4px 6px; border-top: 1px solid var(--line, rgba(127,127,127,.18)); vertical-align: top; }
.pv-table td:first-child { width: 22px; }
.pv-kind { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; background: rgba(127,127,127,.12); }
.pv-fill .pv-kind, .pv-new .pv-kind { background: rgba(46,160,67,.16); color: #2e7d32; }
.pv-update .pv-kind { background: rgba(230,170,20,.18); color: #9a6a00; }
.pv-conflict .pv-kind { background: rgba(220,53,69,.16); color: #c62828; }
.pv-conflict td { background: rgba(220,53,69,.05); }
.pv-notice td { color: var(--muted); }
.pv-warn { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(220,53,69,.1); color: #c62828; font-size: 13px; }
.pv-has-conflict { border-left: 3px solid #c62828; }

/* ---------- CRM Full timeline (js/crmfull.js) ---------- */
.cf-btn { background: linear-gradient(135deg, #2563eb, #7c3aed 55%, #db2777); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 6px 18px -8px rgba(124, 58, 237, .7); }
.cf-btn:hover { filter: brightness(1.08); color: #fff; }
.cf-btn svg { margin-right: 2px; }
.cf-page .toolbar { flex-wrap: wrap; gap: 8px; }
.cf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cf-hero { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 18%, transparent), transparent 70%); border: 1px solid var(--line); }
.cf-hero-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #7c3aed, #db2777); color: #fff; flex: none; }
.cf-hero-ic svg { width: 26px; height: 26px; }
.cf-h-sub { font-size: .55em; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; vertical-align: middle; }
.cf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cf-tile { position: relative; overflow: hidden; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line); }
.cf-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tc); }
.cf-tile small { display: block; color: var(--muted); font-size: 12px; }
.cf-tile b { display: block; font-size: 28px; line-height: 1.15; color: var(--tc); }
.cf-tile em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.cf-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cf-charts .card { margin: 0; }
.cf-chartcard.cf-wide { grid-column: 1 / -1; }
.cf-ct { font-weight: 700; margin-bottom: 8px; }
.cf-ct small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.cf-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-donut svg { flex: none; width: 128px; height: 128px; stroke: none; }
.cf-donut svg text { stroke: none; }
.cf-donut-n { font-size: 22px; font-weight: 700; fill: var(--ink); }
.cf-donut-s { font-size: 10px; fill: var(--muted); }
.cf-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 120px; display: grid; gap: 4px; font-size: 13px; }
.cf-legend li { display: flex; align-items: center; gap: 8px; }
.cf-legend li.zero { opacity: .45; }
.cf-legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.cf-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-hbars { display: grid; gap: 7px; }
.cf-hbar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr 38px auto; align-items: center; gap: 8px; font-size: 13px; }
.cf-hname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-htrack { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.cf-htrack i { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.cf-hbar b { text-align: right; }
.cf-hbar em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #dc2626; border-radius: 99px; padding: 1px 6px; }
.cf-cols { display: flex; align-items: stretch; gap: 6px; height: 170px; }
.cf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cf-col b { font-size: 12px; height: 16px; }
.cf-colbar { flex: 1; width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.cf-colbar i { display: block; width: 100%; border-top: 1px solid rgba(255, 255, 255, .5); }
.cf-col small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cf-col.late small, .cf-col.late b { color: #dc2626; font-weight: 700; }
.cf-col.now small { color: var(--ink); font-weight: 700; }

.cf-tlcard .card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cf-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card-solid); }
.cf-gantt { --cf-lab: 250px; position: relative; min-width: 100%; }
.cf-bg { position: absolute; top: 0; bottom: 0; left: var(--cf-lab); right: 0; pointer-events: none; }
.cf-bg > span:not(.cf-today) { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.cf-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #dc2626; z-index: 3; }
.cf-today b { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #fff; background: #dc2626; padding: 1px 6px; border-radius: 99px; white-space: nowrap; }
.cf-row { display: flex; position: relative; border-bottom: 1px solid var(--line); }
.cf-lab { position: sticky; left: 0; z-index: 4; width: var(--cf-lab); flex: none; box-sizing: border-box; padding: 6px 10px; background: var(--card-solid); border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; min-width: 0; }
.cf-track { position: relative; flex: 1; min-width: 0; }
.cf-head .cf-track { height: 22px; }
.cf-head2 .cf-track { height: 24px; }
.cf-head { background: var(--card-solid); }
.cf-year, .cf-month { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; box-sizing: border-box; font-size: 12px; overflow: hidden; white-space: nowrap; border-left: 1px solid var(--line); }
.cf-year b { color: var(--ink); }
.cf-month { color: var(--ink-2); font-size: 11px; }
.cf-month.jan { border-left: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.cf-corow { background: color-mix(in srgb, var(--cc) 12%, var(--card-solid)); }
.cf-corow .cf-lab { background: color-mix(in srgb, var(--cc) 14%, var(--card-solid)); border-left: 5px solid var(--cc); justify-content: space-between; }
.cf-corow .cf-track { min-height: 34px; }
.cf-coname { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit; min-width: 0; }
.cf-coname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-prow .cf-track { min-height: calc(40px + var(--lanes) * 12px); }
.cf-prow.is-done { opacity: .7; }
.cf-prow .cf-lab { align-items: flex-start; }
.cf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; margin-top: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 25%, transparent); }
.cf-lab .grow { min-width: 0; }
.cf-pname { display: block; max-width: 100%; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-pname:hover { color: var(--pc); text-decoration: underline; }
.cf-lab small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.cf-lab small .pill { font-size: 10px; padding: 1px 6px; }
.cf-kind { font-size: 9px; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; background: var(--pc); color: #fff; }
.cf-kind.proj { background: transparent; color: var(--pc); border: 1px solid var(--pc); }
.cf-curst { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--sc) 18%, transparent); color: var(--ink); border: 1px solid var(--sc); }
.cf-stage { position: absolute; top: 6px; height: 24px; border-radius: 6px; border: 0; padding: 0 6px; background: var(--sc); color: #fff; font-size: 11px; font-weight: 600; text-align: left; overflow: hidden; cursor: pointer; z-index: 1; min-width: 4px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.cf-stage span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 24px; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.cf-stage.cf-st-todo { background: color-mix(in srgb, var(--sc) 55%, transparent); }
.cf-stage.cf-st-done { opacity: .5; }
.cf-stage.cf-st-doing { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--sc); z-index: 2; }
.cf-stage:hover { filter: brightness(1.1); z-index: 3; }
.cf-dl { position: absolute; top: 11px; width: 14px; height: 14px; margin-left: -7px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; }
.cf-dl i { display: block; width: 12px; height: 12px; margin: 1px; transform: rotate(45deg); background: var(--card-solid); border: 2.5px solid var(--pc); border-radius: 2px; box-sizing: border-box; }
.cf-dl.sub i { background: var(--pc); border-color: var(--card-solid); box-shadow: 0 0 0 1.5px var(--pc); }
.cf-dl.late i { background: #dc2626; border-color: #fff; box-shadow: 0 0 0 1.5px #dc2626; }
.cf-dl.done i { background: #10b981; border-color: #fff; box-shadow: 0 0 0 1.5px #10b981; }
.cf-dl:hover i { transform: rotate(45deg) scale(1.3); }
/* Submissions as points (the ◆ Diamonds / ● Points switch on the timelines) */
.subs-points .stl-pt i { transform: none; border-radius: 50%; width: 14px; height: 14px; }
.subs-points .stl-pt.inline i { width: 10px; height: 10px; }
.subs-points .cf-dl.sub i, .subs-points .cf-dl.sub.late i, .subs-points .cf-dl.sub.done i { transform: none; border-radius: 50%; }
.subs-points .cf-dl.sub:hover i { transform: scale(1.3); }
.cf-task { position: absolute; height: 9px; border: 0; padding: 0; border-radius: 99px; background: var(--pc); cursor: pointer; min-width: 9px; z-index: 2; }
.cf-task.done { opacity: .4; }
.cf-task.late { box-shadow: 0 0 0 2px #dc2626; }
.cf-task:hover { filter: brightness(1.15); transform: scaleY(1.3); }
.cf-year-only { position: absolute; top: 8px; height: 20px; box-sizing: border-box; border-radius: 6px; border: 1.5px dashed var(--pc); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--pc) 14%, transparent) 0 6px, transparent 6px 12px); color: var(--ink-2); font-size: 11px; line-height: 17px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.cf-nodates { position: absolute; top: 12px; left: 8px; font-size: 11px; color: var(--muted); font-style: italic; }

.cf-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 6px; font-size: 12px; color: var(--ink-2); }
.cf-key span { display: inline-flex; align-items: center; gap: 6px; }
.cf-key i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.cf-key .cf-k-dl { width: 10px; height: 10px; transform: rotate(45deg); border: 2px solid var(--ink-2); border-radius: 2px; background: transparent; box-sizing: border-box; }
.cf-key .cf-k-dl.late { background: #dc2626; border-color: #dc2626; }
.cf-key .cf-k-dl.done { background: #10b981; border-color: #10b981; }
.cf-key .cf-k-task { height: 7px; border-radius: 99px; background: linear-gradient(90deg, #2563eb, #db2777); }
.cf-key .cf-k-today { width: 2px; height: 14px; background: #dc2626; border-radius: 0; }
@media (max-width: 700px) {
  .cf-gantt { --cf-lab: 150px; }
  .cf-lab small .pill, .cf-curst { display: none; }
  .cf-cols { height: 130px; gap: 3px; }
  .cf-col small { font-size: 9px; }
}

/* Full timeline: filters, sort, expand, zoom, submissions */
.cf-filters { flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.cf-filters .search { flex: 1 1 220px; max-width: 320px; }
.cf-filters .qf-select { max-width: 210px; }
.cf-tltools { flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cf-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cf-dir { font-weight: 700; }
.cf-zoom { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-zoom input[type=range] { width: 130px; accent-color: #7c3aed; }
.cf-zoom .ib { font-size: 16px; font-weight: 700; }
.cf-ct-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.cf-mini button { font-size: 11px; padding: 3px 8px; }
.cf-scroll { cursor: grab; }
.cf-scroll.cf-grabbing { cursor: grabbing; user-select: none; }
.cf-scroll .cf-lab { cursor: default; }
/* month labels follow the zoom */
.cf-month i { display: none; font-style: normal; }
.cf-roomy .cf-month b { display: none; }
.cf-roomy .cf-month i { display: inline; }
.cf-dense .cf-month:not(.q) b { display: none; }
.cf-xdense .cf-month:not(.jan) b { display: none; }
.cf-xdense .cf-stage span, .cf-dense .cf-dltext { display: none; }
/* label column */
.cf-caret { width: 20px; height: 20px; font-size: 12px !important; flex: none; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); cursor: pointer; font-size: 10px; line-height: 18px; padding: 0; margin-top: 1px; transition: transform .15s; }
.cf-caret:hover { background: var(--pc, #7c3aed); color: #fff; }
.cf-caret.open { transform: rotate(90deg); }
.cf-caret-sp { width: 18px; flex: none; }
.cf-meta { display: block !important; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-gdot { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); display: inline-block; }
/* expanded rows */
.cf-prow.cf-open .cf-track { min-height: 40px; }
.cf-span { position: absolute; top: 14px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 35%, transparent); border: 1px solid var(--pc); box-sizing: border-box; }
.cf-srow { background: color-mix(in srgb, var(--pc) 4%, transparent); }
.cf-srow .cf-track { min-height: 28px; }
.cf-sublab { padding: 4px 10px 4px 46px; gap: 6px; font-size: 12px; align-items: center !important; }
.cf-sublab > i { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.cf-sublab > i.cf-k-dl { transform: rotate(45deg); border: 2px solid var(--pc); border-radius: 2px; box-sizing: border-box; }
.cf-sublab > i.cf-k-task { height: 6px; border-radius: 99px; }
.cf-sublab span { flex: 1 0 auto; max-width: 62%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cf-sublab span.done { text-decoration: line-through; opacity: .6; }
.cf-sublab small { color: var(--muted); font-size: 10px; white-space: nowrap; margin: 0 !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-stage.cf-st-one { top: 4px; height: 20px; }
.cf-stage.cf-st-one span { line-height: 20px; }
.cf-task.cf-task-one { top: 6px; height: 16px; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 600; text-align: left; overflow: hidden; }
.cf-task.cf-task-one span { display: block; padding: 0 6px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-task.cf-task-one:hover { transform: none; }
.cf-dltext { position: absolute; top: 6px; margin-left: 10px; font-size: 10px; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
/* upcoming submissions */
.cf-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 8px; }
.cf-sub { --cd: #10b981; display: flex; align-items: stretch; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); border-left: 5px solid var(--cd); background: color-mix(in srgb, var(--cd) 7%, var(--card-solid)); text-align: left; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; }
.cf-sub:hover { box-shadow: 0 6px 18px -10px var(--cd); transform: translateY(-1px); }
.cf-sub.cf-late { --cd: #dc2626; }
.cf-sub.cf-hot { --cd: #ea580c; }
.cf-sub.cf-warm { --cd: #d97706; }
.cf-sub.cf-mild { --cd: #2563eb; }
.cf-count { flex: none; width: 66px; border-radius: 10px; background: var(--cd); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; }
.cf-count b { font-size: 26px; line-height: 1; }
.cf-count small { font-size: 10px; opacity: .92; text-align: center; margin-top: 3px; }
.cf-late .cf-count { animation: cf-pulse 1.6s ease-in-out infinite; }
@keyframes cf-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cf-late .cf-count { animation: none; } }
.cf-subinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cf-subinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-subinfo small { color: var(--ink-2); font-size: 11px; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cf-subinfo .cf-dot { width: 8px; height: 8px; margin: 0; box-shadow: none; }
.cf-left { margin-top: auto; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.cf-left i { display: block; height: 100%; background: var(--cd); border-radius: 99px; }
.cf-red { color: #dc2626; }

/* Full timeline: the final week before a submission, and the live timers */
.cf-wk { position: absolute; top: 31px; height: 6px; z-index: 2 !important; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, #ea580c 15%, transparent), color-mix(in srgb, #ea580c 70%, transparent)); border-right: 2px solid #ea580c; pointer-events: none; }
.cf-srow .cf-wk { z-index: 0 !important; border-radius: 6px; }
.cf-wk.now { background: linear-gradient(90deg, color-mix(in srgb, #ea580c 12%, transparent), color-mix(in srgb, #dc2626 38%, transparent)); border-right-color: #dc2626; box-shadow: 0 0 10px -2px color-mix(in srgb, #dc2626 55%, transparent); }
.cf-wk.late { background: linear-gradient(90deg, transparent, color-mix(in srgb, #dc2626 22%, transparent)); border-right-color: #dc2626; }
.cf-key .cf-k-wk { width: 22px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #ea580c 45%, transparent)); border-right: 2px solid #ea580c; }
.cf-count { width: 92px; }
.cf-clock { margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .22); font: 700 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cf-live .cf-count b { font-variant-numeric: tabular-nums; }
.cf-sub.cf-calm .cf-count { opacity: .85; }
.cf-later { margin-top: 8px; }
.cf-left i { transition: width 1s linear; }

/* Full timeline: the days row, weekends, and labels that stay in view while you scroll */
.cf-head3 { display: none; }
.cf-days-on .cf-head3, .cf-weeks-on .cf-head3 { display: flex; }
.cf-head3 .cf-track { height: 30px; }
.cf-day { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink-2); border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); box-sizing: border-box; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cf-day i { font-style: normal; font-size: 9px; font-weight: 500; color: var(--muted); }
.cf-day.we { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.cf-day.mon { border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.cf-day.now { background: #dc2626; color: #fff; border-radius: 6px; }
.cf-day.now i { color: #fff; }
.cf-weeks-on .cf-day { border-left: 0; background: none; }
.cf-weeks-on .cf-day:not(.mon) { visibility: hidden; }
.cf-weeks-on .cf-day.mon { align-items: flex-start; padding-left: 3px; border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); overflow: visible; white-space: nowrap; }
.cf-weeks-on .cf-day i { display: none; }
.cf-weeks-on .cf-day.now { visibility: visible; background: none; color: #dc2626; }
.cf-bg > .cf-we { display: none; background: color-mix(in srgb, var(--ink) 5%, transparent) !important; }
.cf-days-on .cf-bg > .cf-we, .cf-weeks-on .cf-bg > .cf-we { display: block; }
.cf-days-on .cf-today b { top: -1px; }
/* month, year and stage names follow you along the chart */
.cf-year, .cf-month { overflow: clip !important; }
.cf-year b, .cf-month b, .cf-month i { position: sticky; left: calc(var(--cf-lab) + 6px); }
.cf-stage { overflow: clip !important; }
.cf-stage span { position: sticky; left: calc(var(--cf-lab) + 4px); max-width: max-content; }
.cf-task.cf-task-one { overflow: clip !important; }
.cf-task.cf-task-one span { position: sticky; left: calc(var(--cf-lab) + 4px); max-width: max-content; }

/* Full timeline: closed projects and the right-click menu */
.cf-row.is-closed { opacity: .5; filter: grayscale(.6); }
.cf-row.is-closed:hover { opacity: .8; filter: none; }
.cf-closedpill { background: #475569 !important; color: #fff !important; }
.cf-menu .cf-mi { display: inline-grid; place-items: center; width: 16px; height: 16px; font-style: normal; font-size: 13px; line-height: 1; flex: none; }
.cf-menu .cf-mi-done svg, .cf-menu .cf-mi-done .cf-mi { color: #059669; }
.cf-menu .cf-mi-hold .cf-mi { color: #d97706; }
.cf-menu-note { margin: -2px 10px 6px; font-size: 11px; color: var(--muted); }
.cf-prow, .cf-srow { cursor: context-menu; }
.cf-prow .cf-track, .cf-srow .cf-track { cursor: grab; }

/* Full timeline: start and end dates on the bars and in the labels */
.cf-stage { container-type: inline-size; }
.cf-stage .cf-bin { position: static; display: flex; align-items: center; gap: 6px; width: 100%; max-width: none; overflow: visible; line-height: inherit; text-shadow: none; }
.cf-stage .cf-bname { flex: 0 1 auto; min-width: 0; position: sticky; left: calc(var(--cf-lab) + 4px); max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.cf-bd { flex: none; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 5px; background: rgba(0, 0, 0, .28); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-bd1 { margin-left: auto; }
.cf-st-done .cf-bd { background: rgba(0, 0, 0, .18); }
@container (max-width: 190px) { .cf-bd0 { display: none; } }
@container (max-width: 120px) { .cf-bd { display: none; } }
.cf-xdense .cf-stage span.cf-bin { display: none; }
.cf-dates { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cf-dates b { font-weight: 700; color: var(--ink); }
.cf-dates i { font-style: normal; color: var(--muted); }
.cf-curend { margin-left: 4px; padding: 0 6px; border-radius: 99px; font-size: 10px; border: 1px solid var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--ink); white-space: nowrap; }
.cf-spand { position: absolute; top: 11px; font-size: 10px; font-weight: 700; color: var(--pc); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.cf-spand0 { transform: translateX(calc(-100% - 5px)); }
.cf-spand1 { margin-left: 5px; }
.cf-substage .cf-subinfo b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--sc); margin-right: 6px; vertical-align: 0; }
.cf-sublab { flex-wrap: wrap; row-gap: 0; }
.cf-sublab span { max-width: calc(100% - 18px) !important; flex: 1 1 auto !important; }
.cf-sublab small { flex: 0 0 100% !important; padding-left: 16px; font-size: 10px; font-variant-numeric: tabular-nums; overflow: visible !important; }

/* ---------- On hold: still shown, dimmed and half-toned (a dot screen over it) ---------- */
:root { --halftone: radial-gradient(circle at center, rgba(255, 255, 255, .5) 0 1px, transparent 1.4px); --halftone-ink: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 22%, transparent) 0 1px, transparent 1.4px); }
.tone-hold { background-color: color-mix(in srgb, var(--muted) 35%, var(--line)); background-image: var(--halftone-ink); background-size: 4px 4px; color: var(--ink-2); }
.stl-bar.tone-hold, .stl-sw.tone-hold { background-color: var(--muted); background-image: var(--halftone); background-size: 4px 4px; opacity: .45; }
/* the timeline: an on hold project row, and an on hold stage bar anywhere */
.cf-row.is-hold { opacity: .5; filter: grayscale(.65) saturate(.6); transition: opacity .2s, filter .2s; }
.cf-row.is-hold:hover { opacity: .85; filter: grayscale(.2); }
.cf-row.is-hold > .cf-lab { background-image: var(--halftone-ink); background-size: 5px 5px; }
.cf-stage.cf-st-hold, .cf-row.is-hold .cf-stage { background-color: color-mix(in srgb, var(--sc) 50%, transparent) !important; background-image: var(--halftone) !important; background-size: 4px 4px !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 70%, transparent); }
.cf-stage.cf-st-hold { opacity: .55; }
.cf-row.is-hold .cf-task { background-image: var(--halftone); background-size: 4px 4px; }
/* the Upcoming submissions card */
.cf-sub.cf-onhold { --cd: #94a3b8; opacity: .5; filter: grayscale(.8); background-image: var(--halftone-ink); background-size: 5px 5px; }
.cf-sub.cf-onhold:hover { opacity: .8; }
.cf-sub.cf-onhold .cf-count { background-image: var(--halftone); background-size: 4px 4px; }
.cf-holdtag { display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; margin-right: 6px; border-radius: 999px; background: var(--muted); color: var(--card-solid); vertical-align: 1px; }
/* the days-before boxes on the card */
.cf-subtools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-daysin { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 2px 4px 2px 9px; border: 1px solid var(--line); border-radius: 999px; }
.cf-daysin input { width: 46px; padding: 2px 4px; font: inherit; font-weight: 700; text-align: center; color: var(--ink); background: var(--card-solid); border: 1px solid var(--line); border-radius: 999px; }
.cf-daysin input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* the stage form: open the project's profile */
.sheet-head .stage-goproj { margin-left: auto; margin-right: 8px; max-width: 60%; display: inline-flex; align-items: center; gap: 6px; }
.sheet-head .stage-goproj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-k-hold { display: inline-block; width: 16px; height: 10px; border-radius: 3px; background-color: var(--muted); background-image: var(--halftone); background-size: 4px 4px; opacity: .6; }

/* Upcoming submissions: the day boxes and the view switch sit fixed at the card's top left, the title under them */
.cf-subs .cf-subhead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cf-subs .cf-subhead .cf-subtools { justify-content: flex-start; }
/* a single deadline or task on hold: dimmed and half-toned */
.row.is-hold, .eng-check-row.is-hold { opacity: .55; background-image: var(--halftone-ink); background-size: 5px 5px; border-radius: 10px; }
.row.is-hold:hover, .eng-check-row.is-hold:hover { opacity: .85; }
.cf-dl.hold, .stl-pt.hold { opacity: .45; filter: grayscale(1); }
.cf-task.hold, .stl-tbar.hold, .stl-cal-item.hold { opacity: .5; filter: grayscale(.8); background-image: var(--halftone) !important; background-size: 4px 4px !important; }
.btn-hold { border-style: dashed; }
.btn-hold.on { background-image: var(--halftone-ink); background-size: 4px 4px; }
/* the timeline card: Wide (the whole window width) and Full screen */
.cf-tlcard.cf-tl-wide { max-width: none; box-sizing: border-box; }   /* width and margin set from the window in crmfull.js */
.cf-tlcard.cf-tl-full { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; max-width: none; overflow: auto; background: var(--card-solid); padding: 14px 18px; }
.cf-tlcard.cf-tl-full .cf-scroll { max-height: calc(100vh - 170px); overflow: auto; }
.cf-tlsize button { white-space: nowrap; }
/* the hold toggle on a stage row */
.stage-holdbtn { font-size: 11px; line-height: 1; }
.stage-holdbtn.on { background-image: var(--halftone-ink); background-size: 4px 4px; color: var(--ink); }
.cf-sublab .cf-stname { cursor: pointer; }
.cf-sublab .cf-stname:hover { text-decoration: underline; }