/* Olive editorial collage (~/Downloads/olive-editorial-collage/SKILL.md, 2026-11-07, per Ali): the GTM app's
   look, shared by its pages (index.html, studio.html, the profile audit). App intensity (SKILL.md §7):
   sage ground, paper cards, serif voice, mono labels; collage only on the sign-in frame.
   Fonts: Playfair Display, Inter Tight, JetBrains Mono, Caveat (SIL OFL 1.1, fonts/README.md), served from here. */
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-ext-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-ext-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-ext-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-ext-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* The tokens (SKILL.md §3), plus the few the app needs that the system implies: the active row, and
   good / bad text dark enough for small type on the sage ground (≥ 4.5:1). */
:root {
  --board: #2C351F; --plate-back: #5C6B33; --ground: #E7E9DA;
  --bone: #EEEDE0; --paper: #F4F3E8; --paper-card: #F7F7EF; --aged: #DCD9B8;
  --ink: #1F2617; --ink-2: #343B2B; --muted: #545B45; --muted-dk: #C9D0B0; --body-dk: #DCE0CC;
  --marker: #D6EC5A; --pen: #C8542A; --ink-teal: #2C5A50;
  --rule-dk: rgba(238,240,226,0.35); --rule: #A9AF92; --border: #CDD1BC; --tape: rgba(214,222,160,0.80);
  --active: #D5DBC1; --hair: #DCDFCC;
  --good: #3B5418; --good-soft: #DDE6C2; --bad: #9A3B16; --bad-soft: #F3DED2; --teal-soft: #D7E3DD;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;
  /* The one dropdown chevron, with the same room on its right as the text has on its left. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23545B45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* The ground: sage, a faint 32 px graph grid and the grain (§5.9, app strength), all under the paper. */
  --ground-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .05 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E"),
    linear-gradient(rgba(31,38,23,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,38,23,.04) 1px, transparent 1px);
  --ground-size: 220px 220px, 32px 32px, 32px 32px;
  color-scheme: light;
}

/* The pieces the app may use (§5, §7 app column): a low highlighter, the hand, a stamp for real state.
   Collage plates live only on the sign-in and onboarding frame. */

/* The pipespecting brand (assets/brand/README.md): the logo is the Pipe P alone (per Ali, 2026-11-07); its dot is
   orange on light and chartreuse on dark. Never rotated, outlined or recoloured. Size it with font-size (1em tall). */
.brandmark { display: inline-flex; color: var(--ink); line-height: 0; }
.brandmark svg { height: 1em; width: auto; overflow: visible; }
.brandmark path { fill: none; stroke: currentColor; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.brandmark circle { fill: var(--pen); }
.brandmark.on-dark { color: var(--bone); }
.brandmark.on-dark circle { fill: var(--marker); }
/* The Flow pattern as the loader (brand sheet: loaders, dividers, onboarding; never next to the logo). */
.flow { width: 96px; height: auto; overflow: visible; }
.flow .track { fill: none; stroke: var(--active); stroke-width: 22; stroke-linecap: round; }
.flow .run { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 36 420; stroke-dashoffset: 0; }
.flow circle { fill: var(--plate-back); }
.flow circle.end { fill: var(--marker); stroke: var(--ink); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .flow .run { animation: flow-run 1.8s linear infinite; }
  .flow circle.end { animation: flow-end 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes flow-run { from { stroke-dashoffset: 36; } to { stroke-dashoffset: -260; } }
@keyframes flow-end { 50% { transform: scale(1.18); } }
/* The Pipe lens: "find" (search, prospecting, "no leads yet"); never the app icon. */
.lens { width: 76px; height: auto; }
.emptystate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px 40px; text-align: center; }
.emptystate h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; }
.emptystate h3 i { font-style: italic; }
.emptystate p { margin: 0 0 6px; max-width: 46ch; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.mark-low { background: linear-gradient(transparent 55%, var(--marker) 55%); padding: 0 2px; }
.hand { font-family: var(--hand); font-weight: 700; line-height: 1.1; }
.stamp { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--pen);
         box-shadow: inset 0 0 0 6px var(--paper-card), inset 0 0 0 7.5px var(--pen); color: var(--pen); text-align: center;
         font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
         transform: rotate(-12deg); padding: 10px; }
.halftone { border-radius: 50%; background: radial-gradient(circle, var(--board) 36%, transparent 42%) 0 0 / 9px 9px; }
.halftone.on-dark { background: radial-gradient(circle, var(--marker) 34%, transparent 40%) 0 0 / 9px 9px; }
.halftone-light { border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--board) 0 18%, rgba(44,53,31,.75) 34%, rgba(44,53,31,0) 64%); }
.tape { position: absolute; width: 96px; height: 26px; background: var(--tape); pointer-events: none; }
.torn-a { clip-path: polygon(0.00% 1.12%,3.85% 0.31%,7.69% 1.86%,11.54% 0.74%,15.38% 1.95%,19.23% 0.18%,23.08% 1.40%,26.92% 0.62%,30.77% 2.05%,34.62% 0.93%,38.46% 0.11%,42.31% 1.67%,46.15% 0.86%,50.00% 1.98%,53.85% 0.27%,57.69% 1.30%,61.54% 0.54%,65.38% 2.12%,69.23% 1.05%,73.08% 0.36%,76.92% 1.74%,80.77% 0.80%,84.62% 1.93%,88.46% 0.22%,92.31% 1.49%,96.15% 0.69%,100.00% 1.15%,98.90% 3.85%,99.70% 7.69%,98.21% 11.54%,99.45% 15.38%,98.02% 19.23%,99.84% 23.08%,98.65% 26.92%,99.33% 30.77%,97.95% 34.62%,99.12% 38.46%,98.48% 42.31%,99.90% 46.15%,98.30% 50.00%,99.58% 53.85%,98.10% 57.69%,99.25% 61.54%,98.71% 65.38%,99.78% 69.23%,97.98% 73.08%,99.04% 76.92%,98.39% 80.77%,99.66% 84.62%,98.14% 88.46%,99.40% 92.31%,98.83% 96.15%,99.10% 100.00%,96.15% 98.85%,92.31% 99.62%,88.46% 98.06%,84.62% 99.41%,80.77% 98.32%,76.92% 99.88%,73.08% 98.57%,69.23% 99.20%,65.38% 97.91%,61.54% 99.55%,57.69% 98.73%,53.85% 99.94%,50.00% 98.17%,46.15% 99.29%,42.31% 98.44%,38.46% 99.71%,34.62% 98.00%,30.77% 99.15%,26.92% 98.61%,23.08% 99.83%,19.23% 98.26%,15.38% 99.48%,11.54% 98.79%,7.69% 99.97%,3.85% 98.40%,0.00% 99.05%,1.20% 96.15%,0.35% 92.31%,1.88% 88.46%,0.60% 84.62%,1.95% 80.77%,0.15% 76.92%,1.42% 73.08%,0.77% 69.23%,2.01% 65.38%,0.48% 61.54%,1.63% 57.69%,0.09% 53.85%,1.27% 50.00%,0.92% 46.15%,2.10% 42.31%,0.28% 38.46%,1.55% 34.62%,0.71% 30.77%,1.80% 26.92%,0.40% 23.08%,1.08% 19.23%,0.20% 15.38%,1.72% 11.54%,0.55% 7.69%,1.36% 3.85%,0.83% 0.00%); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }