/*
Theme Name: Pixeldev
Theme URI: https://pixeldev.com
Author: Pixeldev
Author URI: https://pixeldev.com
Description: Pixeldev — engineered/terminal aesthetic, two-tone. React-driven single-page theme using in-browser Babel.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixeldev
*/

/* Pixeldev — engineered/terminal aesthetic, two-tone */
:root {
  /* Type stacks (overridable via tweaks) */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: var(--font-mono);

  /* Light theme defaults */
  --paper: oklch(0.972 0.005 85);
  --paper-2: oklch(0.945 0.006 85);
  --ink: oklch(0.18 0.012 250);
  --ink-2: oklch(0.32 0.012 250);
  --ink-3: oklch(0.55 0.01 250);
  --rule: oklch(0.86 0.008 250);
  --rule-strong: oklch(0.72 0.01 250);
  --accent: oklch(0.86 0.22 130);          /* lime */
  --accent-ink: oklch(0.22 0.05 130);       /* legible text on accent */
  --accent-soft: oklch(0.94 0.08 130);
  --shadow: 0 1px 0 oklch(0.85 0.01 250), 0 12px 30px -18px oklch(0.2 0.02 250 / .25);

  /* Density */
  --gutter: 16px;
  --section-y: 96px;
  --row-y: 28px;
  --pad-card: 24px;

  /* Sizing */
  --max: 1440px;
  --rail: 64px;
}

[data-theme='dark'] {
  --paper: oklch(0.135 0.012 250);
  --paper-2: oklch(0.175 0.012 250);
  --ink: oklch(0.96 0.005 85);
  --ink-2: oklch(0.82 0.008 85);
  --ink-3: oklch(0.62 0.008 250);
  --rule: oklch(0.27 0.012 250);
  --rule-strong: oklch(0.38 0.012 250);
  --accent: oklch(0.86 0.22 130);
  --accent-ink: oklch(0.18 0.05 130);
  --accent-soft: oklch(0.28 0.08 130);
  --shadow: 0 1px 0 oklch(0.22 0.012 250), 0 14px 30px -16px oklch(0 0 0 / .55);
}

[data-accent='ember']  { --accent: oklch(0.78 0.20 45); --accent-ink: oklch(0.18 0.06 45);  --accent-soft: oklch(0.94 0.06 45); }
[data-accent='violet'] { --accent: oklch(0.78 0.20 290); --accent-ink: oklch(0.20 0.06 290); --accent-soft: oklch(0.94 0.06 290); }
[data-accent='cyan']   { --accent: oklch(0.84 0.16 215); --accent-ink: oklch(0.20 0.06 230); --accent-soft: oklch(0.94 0.06 215); }
[data-accent='lime']   { --accent: oklch(0.86 0.22 130); --accent-ink: oklch(0.22 0.05 130); --accent-soft: oklch(0.94 0.08 130); }

[data-density='compact'] { --section-y: 64px; --row-y: 20px; --pad-card: 18px; --gutter: 12px; }
[data-density='airy']    { --section-y: 140px; --row-y: 36px; --pad-card: 32px; --gutter: 20px; }

[data-typeset='mono']    { --font-display: var(--font-mono); --font-sans: var(--font-mono); }
[data-typeset='serif']   { --font-display: 'Fraunces', 'Times New Roman', serif; --font-sans: 'Fraunces', Georgia, serif; }
[data-typeset='sans']    { --font-display: 'IBM Plex Sans', system-ui, sans-serif; }
[data-typeset='hybrid']  { --font-display: var(--font-mono); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}
@media (max-width: 900px) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
@media (max-width: 900px) { button { cursor: pointer; } }

/* Layout primitives */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--rail); }
@media (max-width: 900px) { .shell { padding: 0 20px; } :root { --rail: 20px; } }

.row { display: flex; align-items: center; gap: var(--gutter); }
.between { display: flex; align-items: center; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* Type */
.mono { font-family: var(--font-mono); font-feature-settings: 'ss01','ss02'; }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--ink-3);
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; font-weight: 500; }
h1 { font-size: clamp(40px, 6vw, 92px); line-height: 0.96; letter-spacing: -0.035em; }
.rotator { display: inline-flex; align-items: baseline; gap: 0; }
h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
p  { margin: 0; }

/* Hairline grid backdrop (subtle) */
.gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  opacity: 0.35;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}

/* Buttons / pill */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 14px 20px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: transform 180ms ease, background 180ms ease;
  cursor: none;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.accent:hover { box-shadow: 4px 4px 0 var(--ink); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; border: 1px solid var(--rule);
  color: var(--ink-2);
}
.tag .dot { width: 6px; height: 6px; background: var(--accent); display: inline-block; }

/* Section scaffolding */
section.section {
  position: relative;
  padding: var(--section-y) 0;
  border-top: 1px solid var(--rule);
}
.section-head {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--gutter);
  padding-bottom: 48px;
}
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; } }
.section-head .index {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-top: 1px solid var(--ink); padding-top: 8px;
}

/* Card */
.card {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: var(--pad-card);
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Cursor */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot { width: 8px; height: 8px; background: var(--accent); transform: translate(-50%, -50%); transition: transform 80ms linear, width 200ms, height 200ms; }
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid var(--paper);
  transform: translate(-50%, -50%);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), width 220ms, height 220ms, border-radius 220ms;
}
.cursor-ring.hov { width: 64px; height: 64px; border-color: var(--accent); }
.cursor-dot.hov { width: 0; height: 0; }

/* Top nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 14px; gap: 24px; }
.nav-links { display: flex; gap: 28px; justify-content: center; }
.nav-link {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2); position: relative; padding: 6px 0;
}
.nav-link[aria-current='page'] { color: var(--ink); }
.nav-link[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}
.nav-link:hover { color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; }
.brand .glyph { line-height: 1; }
.brand .name { font-size: 15px; }
.brand .name b { font-weight: 600; }

.nav-meta { display: flex; gap: 16px; align-items: center; justify-content: end; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.nav-meta .live { display: inline-flex; align-items: center; gap: 8px; }
.nav-meta .live .dot { width: 7px; height: 7px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }

/* Theme toggle */
.theme-toggle { padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; }
.theme-track {
  position: relative; display: inline-flex; align-items: center;
  width: 52px; height: 24px; border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 70%, var(--ink) 6%);
  transition: background 200ms ease, border-color 200ms ease;
}
.theme-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--ink);
  transition: transform 240ms cubic-bezier(.4,.7,.2,1);
}
[data-theme='dark'] .theme-thumb { transform: translateX(28px); background: var(--accent); }
.theme-icon {
  position: absolute; top: 0; bottom: 0;
  font-size: 11px; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px;
  pointer-events: none; line-height: 1;
  font-family: var(--font-sans);
  font-feature-settings: normal;
  text-align: center;
}
.theme-icon.sun  { left: 0; }
.theme-icon.moon { right: 0; }
[data-theme='dark']  .theme-icon.sun  { color: var(--ink-3); }
[data-theme='dark']  .theme-icon.moon { color: var(--ink); }
[data-theme='light'] .theme-icon.sun  { color: var(--paper); }
[data-theme='light'] .theme-icon.moon { color: var(--ink-3); }
.theme-toggle:hover .theme-track { border-color: var(--ink-3); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Footer */
footer.foot {
  border-top: 1px solid var(--rule);
  padding: 64px 0 32px;
  margin-top: 64px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 14px; font-weight: 500; }
.foot a { display: block; padding: 4px 0; color: var(--ink-2); }
.foot a.brand { display: inline-flex; padding: 0; color: var(--ink); }
.foot a.brand:hover { background: transparent; padding-left: 0; color: var(--ink); }
.foot a.btn { display: inline-flex; padding: 14px 20px; }
.foot a.btn:hover { background: var(--accent); padding-left: 20px; color: var(--accent-ink); }
.foot .foot-grid > div > a:not(.brand):not(.btn):hover { color: var(--accent-ink); background: var(--accent); padding-left: 6px; }
.foot .colophon { display: flex; justify-content: space-between; padding-top: 32px; margin-top: 48px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding: 14px 0; }
.marquee-track { display: flex; gap: 48px; white-space: nowrap; animation: scroll 40s linear infinite; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.marquee-track span { display: inline-flex; align-items: center; gap: 14px; }
.marquee-track .sep { color: var(--accent); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Accent text */
.accent-text { color: var(--ink); position: relative; display: inline-block; padding: 0 6px; background: var(--accent); }

/* Utility */
.hide-mobile { }
@media (max-width: 900px) { .hide-mobile { display: none !important; } }

/* Hero canvas */
.hero { position: relative; padding-top: 56px; padding-bottom: var(--section-y); border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .hero-content { position: relative; z-index: 2; }
.hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding-top: 56px; border-top: 1px solid var(--rule); margin-top: 64px; }
@media (max-width: 900px) { .hero-meta { grid-template-columns: repeat(2, 1fr); } }
.hero-meta .cell .k { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.hero-meta .cell .v { font-family: var(--font-display); font-size: 28px; line-height: 1; margin-top: 8px; letter-spacing: -0.02em; }

/* Caret */
.caret { display: inline-block; width: 0.55em; background: var(--accent); animation: blink 1s steps(2) infinite; vertical-align: -0.08em; }
.caret::before { content: '\00a0'; }
@keyframes blink { 50% { background: transparent; } }

/* Service rows */
.service-row {
  display: grid; grid-template-columns: 80px 1fr 1.4fr 200px;
  gap: var(--gutter);
  padding: var(--row-y) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
  transition: background 240ms ease;
}
.service-row:hover { background: var(--paper-2); }
.service-row:hover .service-arrow { transform: translateX(6px); color: var(--accent); }
.service-row .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 6px; }
.service-row h3 { font-size: 28px; }
.service-row .meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.service-arrow { font-family: var(--font-mono); transition: transform 240ms ease, color 240ms ease; padding-top: 6px; text-align: right; }
@media (max-width: 900px) {
  .service-row { grid-template-columns: 32px 1fr; }
  .service-row .meta, .service-arrow { grid-column: 2; }
}

/* Work tiles */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.work-tile { position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2); aspect-ratio: 4 / 3; cursor: none; }
.work-tile.span-7 { grid-column: span 7; }
.work-tile.span-5 { grid-column: span 5; }
.work-tile.span-6 { grid-column: span 6; }
.work-tile.span-12 { grid-column: span 12; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .work-tile { grid-column: span 12 !important; aspect-ratio: 4 / 3; } }
.work-tile .preview { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 600ms cubic-bezier(.2,.7,.2,1), opacity 400ms; }
.work-tile .preview.alt { opacity: 0; transform: scale(1.04); }
.work-tile:hover .preview.base { opacity: 0; transform: scale(0.98); }
.work-tile:hover .preview.alt { opacity: 1; transform: scale(1); }
.work-tile .meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink); background: linear-gradient(transparent, color-mix(in oklab, var(--paper) 70%, transparent));
}
.work-tile .meta .title { font-size: 18px; text-transform: none; letter-spacing: -0.01em; font-family: var(--font-display); color: var(--ink); }
.work-tile .corner-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--ink); color: var(--paper); padding: 4px 8px;
}

/* Process */
.process-step { display: grid; grid-template-columns: 60px 1fr 1fr; gap: var(--gutter); padding: 28px 0; border-top: 1px solid var(--rule); }
.process-step .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.process-step h3 { font-size: 22px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); }
.stat { padding: 36px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat .v { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.stat .v sup { font-size: 22px; vertical-align: top; color: var(--accent-ink); background: var(--accent); padding: 2px 6px; margin-left: 4px; }
.stat .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; letter-spacing: 0.08em; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }

/* Form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: span 2; }
@media (max-width: 900px) { .field.full { grid-column: span 1; } }
.field label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit; font-family: var(--font-mono); font-size: 14px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 12px 0; outline: none; resize: vertical;
  cursor: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { min-height: 120px; }
.field .err { color: oklch(0.7 0.18 25); font-family: var(--font-mono); font-size: 11px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-2); cursor: none; user-select: none;
  transition: all 160ms ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed='true'] .dot { background: var(--accent); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-col { padding: 36px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 20px; }
.pricing-col:last-child { border-right: 0; }
.pricing-col.feature { background: var(--ink); color: var(--paper); }
.pricing-col.feature .label { color: oklch(0.7 0.01 250); }
.pricing-col h3 { font-size: 24px; }
.pricing-col .price { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em; }
.pricing-col .price small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pricing-col.feature .price small { color: oklch(0.7 0.01 250); }
.pricing-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 13px; }
.pricing-col ul li::before { content: '+ '; color: var(--accent); }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
.member { border: 1px solid var(--rule); aspect-ratio: 3/4; position: relative; overflow: hidden; }
.member .photo { position: absolute; inset: 0; }
.member .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(transparent, var(--paper) 80%); }
.member .info h4 { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 4px; }
.member .info .role { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }

/* Case study */
.cs-cover { aspect-ratio: 16/9; border: 1px solid var(--rule); position: relative; overflow: hidden; }
.cs-cover .corner-tag { position: absolute; top: 16px; left: 16px; }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); border-block: 1px solid var(--rule); padding: 28px 0; }
@media (max-width: 900px) { .cs-meta { grid-template-columns: repeat(2, 1fr); } }
.cs-meta .cell .k { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.cs-meta .cell .v { font-family: var(--font-display); font-size: 18px; margin-top: 6px; }
.cs-section { padding: 64px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); }
@media (max-width: 900px) { .cs-section { grid-template-columns: 1fr; } }
.cs-section .label { padding-top: 6px; }
.cs-section h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 16px; }
.cs-section p { font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.cs-section p + p { margin-top: 16px; }
.cs-image { aspect-ratio: 16/10; border: 1px solid var(--rule); margin-top: 24px; position: relative; overflow: hidden; }

/* Misc */
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--rule); background: var(--paper-2); }
.divider { height: 1px; background: var(--rule); margin: 32px 0; }

/* Hide for print */
@media print { .nav, footer.foot, .cursor-dot, .cursor-ring { display: none !important; } }

/* ===========================================================
   RESPONSIVE LAYER
   Breakpoints: 980 (tablet), 768 (phablet), 480 (phone)
   =========================================================== */

/* Helper: 2-up split that collapses */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.split-2.gap-lg { gap: 48px; }
@media (max-width: 768px) {
  .split-2 { grid-template-columns: 1fr !important; gap: 24px !important; }
  .split-2.gap-lg { gap: 24px !important; }
}

/* Helper: row that wraps tighter on mobile */
.row-wrap { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- Layout tokens shrink on small screens ----- */
@media (max-width: 980px) {
  :root { --section-y: 72px; --gutter: 14px; --pad-card: 22px; }
  [data-density='airy']    { --section-y: 96px; }
  [data-density='compact'] { --section-y: 52px; }
}
@media (max-width: 768px) {
  :root { --rail: 20px; --section-y: 60px; --pad-card: 18px; --row-y: 22px; }
  body { font-size: 14px; cursor: auto; }
  button { cursor: pointer; }
  .btn { padding: 12px 16px; font-size: 11px; }
}
@media (max-width: 480px) {
  :root { --rail: 16px; --section-y: 48px; }
}

/* ----- Type scale on small screens ----- */
@media (max-width: 768px) {
  h1 { font-size: clamp(36px, 11vw, 60px); letter-spacing: -0.03em; }
  h2 { font-size: clamp(28px, 7vw, 40px); }
  h3 { font-size: clamp(20px, 5vw, 24px); }
  .stat .v { font-size: 40px; }
  .hero-meta .cell .v { font-size: 22px; }
}

/* ----- Nav: collapse to logo + hamburger ----- */
@media (max-width: 980px) {
  .nav-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .nav-links { display: none; }
  .nav-meta .live { display: none; }
}
@media (max-width: 480px) {
  .nav-meta { gap: 10px; }
}
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: transparent;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  cursor: pointer;
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform 220ms, opacity 220ms; }
.nav-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
.nav-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-2.75px) rotate(-45deg); }
@media (max-width: 980px) { .nav-burger { display: inline-flex; } }

.nav-drawer {
  position: fixed; inset: 56px 0 0 0;
  background: var(--paper);
  z-index: 49;
  display: flex; flex-direction: column;
  padding: 32px var(--rail);
  gap: 6px;
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
  border-top: 1px solid var(--rule);
}
.nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-drawer a {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -0.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--ink);
}
.nav-drawer a .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.nav-drawer a[aria-current='page'] { color: var(--accent-ink); }
.nav-drawer a[aria-current='page'] .num { color: var(--accent-ink); }
.nav-drawer a[aria-current='page']::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--accent); z-index: -1; margin: 4px calc(var(--rail) * -1);
}
.nav-drawer a { position: relative; padding-left: 4px; padding-right: 4px; }
.nav-drawer .drawer-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ----- Hero adjustments ----- */
@media (max-width: 768px) {
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero-meta { grid-template-columns: 1fr 1fr; padding-top: 32px; margin-top: 40px; }
}
@media (max-width: 480px) {
  .hero-meta { grid-template-columns: 1fr; gap: 14px; }
}

/* ----- Service rows: stack ----- */
@media (max-width: 768px) {
  .service-row { grid-template-columns: 28px 1fr; gap: 8px 14px; padding: 20px 0; }
  .service-row .meta { grid-column: 2; margin-top: 4px; }
  .service-row > div:nth-child(3) { grid-column: 2; padding-top: 12px; font-size: 14px; }
  .service-arrow { display: none; }
  .service-row h3 { font-size: 22px; }
}

/* ----- Work tiles: stack to full width, tighter aspect ----- */
@media (max-width: 768px) {
  .work-tile { grid-column: span 12 !important; aspect-ratio: 4 / 3 !important; }
  .work-tile .meta { padding: 12px 14px; }
  .work-tile .meta .title { font-size: 15px; }
}

/* ----- Process steps ----- */
@media (max-width: 768px) {
  .process-step { grid-template-columns: 28px 1fr; gap: 6px 14px; padding: 22px 0; }
  .process-step > div:nth-child(3) { grid-column: 2; padding-top: 8px; }
}

/* ----- Stats ----- */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px; }
  .stat:last-child { border-bottom: 0; }
}

/* ----- Pricing ----- */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-col { border-right: 0; border-bottom: 1px solid var(--rule); padding: 28px; }
  .pricing-col:last-child { border-bottom: 0; }
}

/* ----- Team ----- */
@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ----- Case study sections ----- */
@media (max-width: 768px) {
  .cs-section { grid-template-columns: 1fr; padding: 40px 0; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
}

/* ----- Form ----- */
@media (max-width: 768px) {
  .form { grid-template-columns: 1fr; gap: 20px; }
  .field.full { grid-column: span 1; }
}
.form-submit { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .form-submit { flex-direction: column; align-items: stretch; }
  .form-submit .btn { justify-content: center; }
}

/* ----- Footer ----- */
@media (max-width: 768px) {
  footer.foot { padding: 48px 0 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot .colophon { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ----- Section heads ----- */
@media (max-width: 768px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; padding-bottom: 32px; }
}

/* ----- Testimonial side-col grid ----- */
.side-col { display: grid; grid-template-columns: 200px 1fr; gap: var(--gutter); }
@media (max-width: 768px) {
  .side-col { grid-template-columns: 1fr; gap: 16px; }
}

/* ----- CTA card ----- */
@media (max-width: 768px) {
  .cta-card { padding: 40px 24px !important; }
}

/* ----- Tweaks panel: don't block content on phone ----- */
@media (max-width: 768px) {
  .tweaks-panel,
  [data-tweaks-panel] {
    max-width: calc(100vw - 24px) !important;
    max-height: 70vh !important;
    overflow-y: auto;
  }
}

/* ----- Cursor: hide on touch ----- */
@media (max-width: 980px), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body, button, a, .chip, .work-tile, .field input, .field textarea, .field select, .btn { cursor: auto; }
}

/* ----- Marquee tighter ----- */
@media (max-width: 768px) {
  .marquee-track { gap: 28px; font-size: 11px; }
}
/* ===========================================================
   Jobs / Client Portal — kanban + list
   Inherits Pixeldev tokens (paper/ink/accent/rule, mono/sans)
   =========================================================== */

/* Page chrome */
.jobs-page { padding-top: 32px; padding-bottom: 96px; }
.jobs-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gutter);
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.jobs-head h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.025em; }
.jobs-head .crumbs { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.jobs-head .crumbs .sep { color: var(--rule-strong); }
.jobs-head .actions { display: flex; gap: 8px; align-items: center; }

/* Sub-bar: filters + view toggle */
.jobs-bar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
}
.jobs-bar .group { display: flex; gap: 0; border: 1px solid var(--rule); }
.jobs-bar .group button {
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
  border-right: 1px solid var(--rule);
  cursor: none;
}
.jobs-bar .group button:last-child { border-right: 0; }
.jobs-bar .group button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.jobs-bar .group button:hover:not([aria-pressed='true']) { background: var(--paper-2); color: var(--ink); }

.jobs-bar .search {
  flex: 1 1 220px; min-width: 180px; max-width: 360px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule);
  padding: 8px 12px;
}
.jobs-bar .search input {
  flex: 1; font-family: var(--font-mono); font-size: 12px;
  background: transparent; color: var(--ink); border: 0; outline: none;
  cursor: none;
}
.jobs-bar .search .ico { color: var(--ink-3); font-size: 12px; }
.jobs-bar .spacer { flex: 1; }
.jobs-bar .meta { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.jobs-bar .live { display: inline-flex; align-items: center; gap: 8px; }
.jobs-bar .live .dot { width: 7px; height: 7px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }

/* Kanban board */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kanban { grid-template-columns: 1fr; }
}

.col {
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 70vh;
}
.col:last-child { border-right: 0; }
@media (max-width: 1100px) {
  .col:nth-child(2n) { border-right: 0; }
  .col:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .col:last-child { border-bottom: 0; }
}

.col-head {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: color-mix(in oklab, var(--paper) 96%, var(--ink) 4%);
  position: sticky; top: 56px; z-index: 4;
}
.col-head .swatch {
  width: 10px; height: 10px;
  background: var(--col-color, var(--ink-3));
}
.col-head .name { color: var(--ink); font-weight: 500; }
.col-head .count {
  font-feature-settings: 'tnum';
  color: var(--ink-3);
}
.col-head .add {
  font-family: var(--font-mono); font-size: 14px; line-height: 1;
  color: var(--ink-3); padding: 4px 6px;
  border: 1px solid var(--rule);
  cursor: none;
}
.col-head .add:hover { color: var(--ink); border-color: var(--ink); }

.col-body {
  flex: 1;
  padding: 12px 12px 200px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
}
.col.drag-over .col-body {
  background: color-mix(in oklab, var(--paper) 92%, var(--accent) 8%);
}

.col-empty {
  margin-top: 12px;
  padding: 18px;
  border: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center;
}

/* Task card */
.task {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: none;
  transition: transform 140ms ease, box-shadow 200ms ease, border-color 160ms;
  position: relative;
}
.task:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--accent); }
.task.dragging { opacity: 0.4; }
.task[data-priority='high']::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: oklch(0.7 0.18 25);
}
.task[data-priority='med']::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: oklch(0.78 0.16 75);
}
.task[data-priority='low']::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: var(--ink-3);
}
.task-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.task-id {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.task-prio {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 5px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.task-prio[data-p='high']  { color: oklch(0.55 0.18 25);  border-color: oklch(0.7 0.18 25); }
.task-prio[data-p='med']   { color: oklch(0.50 0.13 75);  border-color: oklch(0.78 0.16 75); }
.task-prio[data-p='low']   { color: var(--ink-3); }

.task-title {
  font-family: var(--font-display);
  font-size: 14px; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.task-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tt {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: var(--paper-2);
}

.task-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px; margin-top: 2px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
}
.task-foot .left { display: inline-flex; gap: 10px; align-items: center; }
.task-foot .right { display: inline-flex; gap: 10px; align-items: center; }
.task-foot .due { color: var(--ink-2); }
.task-foot .due.overdue { color: oklch(0.55 0.18 25); }
.task-foot .time { font-feature-settings: 'tnum'; color: var(--ink); }
.task-foot .time .est { color: var(--ink-3); }
.task-foot .timer-on { color: var(--accent-ink); background: var(--accent); padding: 2px 6px; }

/* Avatar */
.avatar {
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 500;
}
.avatar.sm { width: 18px; height: 18px; font-size: 9px; }
.avatar.lg { width: 32px; height: 32px; font-size: 12px; }

/* Progress bar (time spent vs estimate) */
.progress {
  height: 3px; background: var(--rule);
  position: relative; overflow: hidden;
}
.progress > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  display: block;
}
.progress.over > i { background: oklch(0.7 0.18 25); }

/* Comments / attachment counters */
.task-foot .icoset { display: inline-flex; gap: 8px; }
.task-foot .icoset span { display: inline-flex; gap: 3px; align-items: center; }

/* List view */
.list-wrap { overflow-x: auto; border-bottom: 1px solid var(--rule); }
.list-table { width: 100%; min-width: 880px; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.list-table thead th {
  text-align: left; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 96%, var(--ink) 4%);
  font-weight: 500;
}
.list-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.list-table tbody tr { cursor: none; transition: background 140ms; }
.list-table tbody tr:hover { background: var(--paper-2); }
.list-table .t-title { font-family: var(--font-display); font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.list-table .t-id { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.list-table .status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 7px; border: 1px solid var(--rule);
  color: var(--ink-2);
}
.list-table .status-pill .swatch { width: 8px; height: 8px; }

/* Stats strip above board */
.jobs-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-bottom: 0;
  background: var(--paper);
}
@media (max-width: 768px) {
  .jobs-stats { grid-template-columns: repeat(2, 1fr); }
  .jobs-stats > div:nth-child(2) { border-right: 0 !important; }
  .jobs-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.jobs-stats > div { padding: 18px 22px; border-right: 1px solid var(--rule); }
.jobs-stats > div:last-child { border-right: 0; }
.jobs-stats .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.jobs-stats .v { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.025em; margin-top: 8px; font-feature-settings: 'tnum'; }
.jobs-stats .v small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; text-transform: uppercase; }

/* Task drawer */
.drawer-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 35%, transparent);
  z-index: 80;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 96vw);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  z-index: 81;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
}
.drawer-head .close {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink-3);
  padding: 4px 8px; border: 1px solid var(--rule); cursor: none;
}
.drawer-head .close:hover { color: var(--ink); border-color: var(--ink); }

.drawer-body { padding: 24px 24px 80px; display: flex; flex-direction: column; gap: 28px; }
.drawer h2 { font-size: 26px; letter-spacing: -0.02em; }
.drawer .field-row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 14px; align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
}
.drawer .field-row:last-of-type { border-bottom: 1px solid var(--rule); }
.drawer .field-row .k { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.drawer .field-row .v { color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.drawer .desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }

/* Timer widget in drawer */
.timer-widget {
  border: 1px solid var(--rule);
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
}
.timer-widget.running { border-color: var(--accent); background: color-mix(in oklab, var(--paper) 88%, var(--accent) 12%); }
.timer-widget .clock { font-size: 28px; font-feature-settings: 'tnum'; letter-spacing: -0.02em; color: var(--ink); }
.timer-widget .clock small { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; }
.timer-widget .progress { height: 4px; flex: 1; max-width: 160px; }
.timer-widget button.timer-btn {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 14px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: none;
}
.timer-widget button.timer-btn:hover { box-shadow: 2px 2px 0 var(--accent); transform: translate(-1px, -1px); }
.timer-widget.running button.timer-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Time log table inside drawer */
.timelog { display: flex; flex-direction: column; }
.timelog .row {
  display: grid; grid-template-columns: 90px 1fr 70px;
  gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
}
.timelog .row:last-child { border-bottom: 1px solid var(--rule); }
.timelog .row .when { color: var(--ink-3); }
.timelog .row .note { color: var(--ink-2); }
.timelog .row .dur { text-align: right; color: var(--ink); font-feature-settings: 'tnum'; }

.activity { display: flex; flex-direction: column; gap: 14px; }
.activity .ev {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-2);
}
.activity .ev .when { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.activity .ev .body { display: flex; flex-direction: column; gap: 2px; }
.activity .ev b { color: var(--ink); font-weight: 500; }

.comment-form { display: flex; flex-direction: column; gap: 10px; }
.comment-form textarea {
  font: inherit; font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--rule);
  padding: 12px 14px; background: var(--paper);
  color: var(--ink); resize: vertical; min-height: 84px;
  outline: none; cursor: none;
}
.comment-form textarea:focus { border-color: var(--accent); }
.comment-form .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comment-form .hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* New task modal */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 40%, transparent);
  z-index: 90;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 92vw);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
  transform: translateY(8px);
  transition: transform 220ms ease;
}
.modal-scrim.open .modal { transform: translateY(0); }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.modal-body .field { display: flex; flex-direction: column; gap: 6px; }
.modal-body label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.modal-body input, .modal-body textarea, .modal-body select {
  font: inherit; font-family: var(--font-mono); font-size: 13px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); padding: 10px 12px;
  outline: none; resize: vertical; cursor: none;
  color-scheme: light dark;
}
.modal-body select option { background: var(--paper); color: var(--ink); }
.modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus { border-color: var(--accent); }
.modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--ink-3); }
/* Date picker indicator visible in dark mode */
[data-theme='dark'] .modal-body input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
.modal-body .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

/* Buttons used inside the page */
.btn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: none;
  transition: transform 140ms, box-shadow 200ms;
}
.btn-sm:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--accent); }
.btn-sm.ghost { background: transparent; color: var(--ink); }
.btn-sm.ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-sm.accent:hover { box-shadow: 2px 2px 0 var(--ink); }

/* Drag ghost cursor hint */
.kanban[data-dragging='true'] .task:not(.dragging) { cursor: none; }

/* ===========================================================
   Portal shell (per-org client portal)
   =========================================================== */
.portal-page { padding-top: 32px; padding-bottom: 0; }
.portal-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gutter);
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.portal-head h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.025em; }
.portal-head .crumbs {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px; display: flex; gap: 10px; align-items: center;
}
.portal-head .crumbs .sep { color: var(--rule-strong); }
.portal-head .actions { display: flex; gap: 8px; align-items: center; }

.ws-switcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
  cursor: none;
}
.ws-switcher:hover { border-color: var(--ink); color: var(--ink); }
.ws-switcher .pill { width: 18px; height: 18px; background: var(--accent); display: inline-block; }
.ws-switcher .car  { color: var(--ink-3); margin-left: 2px; }

.portal-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.portal-tabs::-webkit-scrollbar { display: none; }
.portal-tabs button {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 16px 18px;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: none;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.portal-tabs button:hover { color: var(--ink); }
.portal-tabs button[aria-current='page'] {
  color: var(--ink); border-bottom-color: var(--accent);
}
.portal-tabs button .ct {
  font-feature-settings: 'tnum';
  color: var(--ink-3); font-size: 10px;
  background: var(--paper-2);
  padding: 2px 5px;
  border: 1px solid var(--rule);
}
.portal-tabs button[aria-current='page'] .ct { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.portal-overview { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 28px; }

.ovr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--paper); }
@media (max-width: 768px) {
  .ovr-kpis { grid-template-columns: repeat(2, 1fr); }
  .ovr-kpis > div:nth-child(2) { border-right: 0 !important; }
  .ovr-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.ovr-kpis > div { padding: 22px 24px; border-right: 1px solid var(--rule); position: relative; }
.ovr-kpis > div:last-child { border-right: 0; }
.ovr-kpis .k { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ovr-kpis .v { font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: -0.025em; margin-top: 10px; font-feature-settings: 'tnum'; }
.ovr-kpis .v small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 8px; letter-spacing: 0; text-transform: uppercase; }
.ovr-kpis .delta {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
}
.ovr-kpis .delta.up   { color: oklch(0.50 0.16 145); }
.ovr-kpis .delta.down { color: oklch(0.55 0.18 25); }

.ovr-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
}
@media (max-width: 980px) { .ovr-grid { grid-template-columns: 1fr; } }
.ovr-grid > .left  { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.ovr-grid > .right { display: flex; flex-direction: column; }
@media (max-width: 980px) {
  .ovr-grid > .left { border-right: 0; border-bottom: 1px solid var(--rule); }
}
.panel {
  border-bottom: 1px solid var(--rule);
  padding: 22px 24px;
}
.panel:last-child { border-bottom: 0; }
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 16px;
}
.panel-head .title {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
}
.panel-head .title .num { color: var(--ink-3); margin-right: 8px; }
.panel-head .more {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  cursor: none;
}
.panel-head .more:hover { color: var(--accent-ink); background: var(--accent); padding: 2px 4px; margin: -2px -4px; }

.ov-jobs { display: flex; flex-direction: column; }
.ov-jobs .row {
  display: grid;
  grid-template-columns: 60px 1fr 90px 130px 28px;
  gap: 12px; align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
  cursor: none;
}
.ov-jobs .row:hover { background: var(--paper-2); padding-inline: 8px; margin-inline: -8px; }
.ov-jobs .row:last-child { border-bottom: 1px solid var(--rule); }
.ov-jobs .row .id { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.ov-jobs .row .ti { font-family: var(--font-display); font-size: 14px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.ov-jobs .row .ti .meta { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.ov-jobs .row .stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px; border: 1px solid var(--rule);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2);
}
.ov-jobs .row .stat .sw { width: 8px; height: 8px; }
.ov-jobs .row .pr { display: flex; flex-direction: column; gap: 4px; }
.ov-jobs .row .pr .num { font-feature-settings: 'tnum'; color: var(--ink); font-size: 11px; display: flex; justify-content: space-between; }
.ov-jobs .row .pr .num small { color: var(--ink-3); }
.ov-jobs .row .pr .bar { height: 3px; background: var(--rule); position: relative; }
.ov-jobs .row .pr .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.ov-jobs .row .pr .bar.over i { background: oklch(0.7 0.18 25); }
.ov-jobs .row .arr { color: var(--ink-3); text-align: right; }
.ov-jobs .row:hover .arr { color: var(--accent-ink); }

.ov-activity { display: flex; flex-direction: column; gap: 18px; }
.ov-activity .ev {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
  line-height: 1.5;
}
.ov-activity .ev .when { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.ov-activity .ev b { color: var(--ink); font-weight: 500; }
.ov-activity .ev a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.ov-activity .ev a:hover { border-color: var(--ink); }

.retainer { padding: 22px 24px; border-bottom: 1px solid var(--rule); }
.retainer .hd { display: flex; justify-content: space-between; align-items: baseline; }
.retainer .hd .ti { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.retainer .hd .pct { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; font-feature-settings: 'tnum'; }
.retainer .meter {
  margin-top: 14px; height: 12px; background: var(--paper-2);
  border: 1px solid var(--rule); position: relative; overflow: hidden;
}
.retainer .meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.retainer .meter.warn i { background: oklch(0.78 0.16 75); }
.retainer .meter.over i { background: oklch(0.7 0.18 25); }
.retainer .legend {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.retainer .legend b { color: var(--ink); font-weight: 500; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.quick a {
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: none;
  transition: background 160ms;
}
.quick a:nth-child(2n) { border-right: 0; }
.quick a:nth-child(-n+2) { border-top: 0; }
.quick a:hover { background: var(--ink); color: var(--paper); }
.quick a:hover .lbl { color: var(--paper); }
.quick a:hover .arr { color: var(--accent); }
.quick a .ttl { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.quick a:hover .ttl { color: var(--paper); }
.quick a .lbl { color: var(--ink-3); }
.quick a .arr { color: var(--ink-3); align-self: flex-end; margin-top: 6px; }

.files-list { display: flex; flex-direction: column; }
.files-list .row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 90px 28px;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
  cursor: none;
}
.files-list .row:hover { background: var(--paper-2); padding-inline: 8px; margin-inline: -8px; }
.files-list .row:last-child { border-bottom: 1px solid var(--rule); }
.files-list .row .ico {
  width: 32px; height: 38px; border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--paper-2);
}
.files-list .row .nm { font-family: var(--font-display); font-size: 13px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.files-list .row .nm a { color: var(--ink); }
.files-list .row .nm a:hover { border-bottom: 1px solid var(--ink); }
.files-list .row .nm .meta { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.files-list .row .sz { color: var(--ink-3); }
.files-list .row .dt { color: var(--ink-3); text-align: right; }
.files-list .row .del { color: var(--ink-3); text-align: right; cursor: none; }
.files-list .row .del:hover { color: oklch(0.55 0.18 25); }

.inv-list { display: flex; flex-direction: column; }
.inv-list .row {
  display: grid;
  grid-template-columns: 100px 1fr 100px 110px 90px;
  gap: 12px; align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px;
  cursor: none;
}
.inv-list .row:hover { background: var(--paper-2); padding-inline: 8px; margin-inline: -8px; }
.inv-list .row:last-child { border-bottom: 1px solid var(--rule); }
.inv-list .row .id { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.inv-list .row .desc { font-family: var(--font-display); font-size: 13px; color: var(--ink); letter-spacing: -0.01em; }
.inv-list .row .amt { font-feature-settings: 'tnum'; color: var(--ink); text-align: right; }
.inv-list .row .due { color: var(--ink-3); text-align: right; }
.inv-list .row .st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 7px; border: 1px solid var(--rule); color: var(--ink-2);
  justify-self: end;
}
.inv-list .row .st .sw { width: 7px; height: 7px; background: var(--ink-3); }
.inv-list .row .st.paid .sw    { background: var(--accent); }
.inv-list .row .st.pending .sw { background: oklch(0.78 0.16 75); }
.inv-list .row .st.overdue { color: oklch(0.55 0.18 25); border-color: oklch(0.7 0.18 25); }
.inv-list .row .st.overdue .sw { background: oklch(0.7 0.18 25); }

.team-strip {
  padding: 22px 24px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap;
}
.team-strip .who { display: flex; gap: 12px; align-items: center; }
.team-strip .who .info { display: flex; flex-direction: column; gap: 2px; }
.team-strip .who .info .name { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.team-strip .who .info .role { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.team-strip .links { display: flex; gap: 8px; }

.ovr-notice {
  padding: 14px 20px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px;
}
.ovr-notice .accent-mark { width: 10px; height: 10px; background: var(--accent); display: inline-block; }
.ovr-notice .left { display: flex; gap: 12px; align-items: center; }
.ovr-notice .left b { color: var(--accent); font-weight: 500; }
.ovr-notice a { color: var(--paper); border-bottom: 1px solid var(--paper); }
.ovr-notice a:hover { color: var(--accent); border-color: var(--accent); }

.stub {
  padding: 80px 32px;
  border: 1px dashed var(--rule);
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.stub b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--ink); letter-spacing: -0.02em; text-transform: none; margin-bottom: 6px; font-weight: 500; }

/* Files tab — drag & drop dropzone */
.files-tab { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 20px; }
.dropzone {
  border: 2px dashed var(--rule);
  padding: 36px 24px;
  text-align: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--paper);
  transition: border-color 160ms, background 160ms;
}
.dropzone.drag { border-color: var(--accent); background: color-mix(in oklab, var(--paper) 88%, var(--accent) 12%); color: var(--ink); }
.dropzone b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--ink); text-transform: none; letter-spacing: -0.01em; margin-bottom: 6px; font-weight: 500; }
.dropzone .browse { color: var(--accent-ink); background: var(--accent); padding: 2px 6px; }
.dropzone input[type=file] { display: none; }

/* Toast / inline error */
.portal-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px;
  border-left: 4px solid var(--accent);
  z-index: 95;
}
.portal-toast.err { border-left-color: oklch(0.7 0.18 25); }

/* ===========================================================
   Admin org-list (top-level /portal/ for administrators)
   =========================================================== */
.org-list-page { padding: 32px 0 96px; }
.org-list-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gutter);
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.org-list-head h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.025em; }
.org-list-head .crumbs {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px; display: flex; gap: 10px; align-items: center;
}
.org-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
}
@media (max-width: 980px) { .org-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .org-grid { grid-template-columns: 1fr; } }
.org-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: none;
  background: var(--paper);
  transition: background 140ms;
}
.org-card:nth-child(3n) { border-right: 0; }
.org-card:hover { background: var(--paper-2); }
.org-card .swatch { width: 16px; height: 16px; background: var(--accent); }
.org-card .name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.org-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.org-card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); }
.org-card .stats .k { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.org-card .stats .v { font-family: var(--font-display); font-size: 18px; color: var(--ink); letter-spacing: -0.02em; margin-top: 4px; font-feature-settings: 'tnum'; }
.org-card .arr { color: var(--ink-3); align-self: flex-end; margin-top: -8px; }
.org-card:hover .arr { color: var(--accent-ink); background: var(--accent); padding: 2px 4px; }

.org-card.create {
  background: transparent;
  border-style: dashed;
  align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.org-card.create:hover { color: var(--ink); border-color: var(--ink); }
.org-card.create b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--ink); letter-spacing: -0.02em; text-transform: none; font-weight: 500; }

.empty-state {
  margin-top: 28px;
  padding: 80px 32px;
  border: 1px dashed var(--rule);
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.empty-state b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--ink); letter-spacing: -0.02em; text-transform: none; margin-bottom: 6px; font-weight: 500; }

/* ===========================================================
   Custom cursor disabled — restore native cursor everywhere
   =========================================================== */
* { cursor: auto !important; }
a, button, [role='button'], [role='tab'], select, input[type=submit], input[type=button], .task, .org-card, .ov-jobs .row, .files-list .row, .inv-list .row, .quick a, .panel-head .more, .ws-switcher, .files-list .row .del, .list-table tbody tr { cursor: pointer !important; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=search], input:not([type]), textarea, [contenteditable='true'] { cursor: text !important; }
.cursor-dot, .cursor-ring { display: none !important; }

/* ===========================================================
   Full-width portal body (jobs tab) — escapes .shell max-width
   =========================================================== */
.shell-wide { max-width: none; margin: 0; padding: 0 var(--rail); }
@media (max-width: 900px) { .shell-wide { padding: 0 20px; } }

/* When JobsPage is embedded inside the portal, drop the shell wrap and section padding;
   the outer .shell-wide handles horizontal rails. */
.jobs-page.jobs-embedded { padding-top: 0; padding-bottom: 96px; }
.jobs-page.jobs-embedded .jobs-inner { width: 100%; }

/* ===========================================================
   Drawer form fields — same dark-mode legibility fix as modal
   =========================================================== */
.drawer select,
.drawer input[type='text'],
.drawer input[type='number'],
.drawer input[type='date'],
.drawer textarea {
  background: var(--paper) !important;
  color: var(--ink) !important;
  color-scheme: light dark;
}
.drawer select option { background: var(--paper); color: var(--ink); }
.drawer input::placeholder, .drawer textarea::placeholder { color: var(--ink-3); }
[data-theme='dark'] .drawer input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }

/* Jobs stats strip — 5-up variant */
.jobs-stats.stats-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .jobs-stats.stats-5 { grid-template-columns: repeat(3, 1fr); }
  .jobs-stats.stats-5 > div:nth-child(3) { border-right: 0; }
  .jobs-stats.stats-5 > div:nth-child(-n+3) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 768px) { .jobs-stats.stats-5 { grid-template-columns: repeat(2, 1fr); } }

/* Invoice status pills (Stripe) — reuse the inv-list .st look on list-table rows */
.list-table .status-pill.stripe-paid    { color: oklch(0.50 0.16 145); border-color: oklch(0.85 0.10 145); }
.list-table .status-pill.stripe-paid    .swatch { background: var(--accent); }
.list-table .status-pill.stripe-pending { color: oklch(0.50 0.13 75); border-color: oklch(0.85 0.10 75); }
.list-table .status-pill.stripe-pending .swatch { background: oklch(0.78 0.16 75); }
.list-table .status-pill.stripe-overdue { color: oklch(0.55 0.18 25); border-color: oklch(0.7 0.18 25); }
.list-table .status-pill.stripe-overdue .swatch { background: oklch(0.7 0.18 25); }
.list-table tbody tr { cursor: pointer; }