/* ============================================================
   TCCI DOMAIN ECOSYSTEM — DESIGN TOKENS
   Direction: a light, cartographic "systems atlas" — the ecosystem
   map read as a chart, not a slide. Ink-navy type on cool paper,
   with each of the three domain clusters carrying its own accent
   the way a transit map gives every line its own color.
   ============================================================ */

:root{
  --paper:         #F6F7FB;
  --paper-2:       #FFFFFF;
  --paper-3:       #EEF0F7;
  --border:        #E1E3EF;
  --border-strong: #CACDE2;

  --navy:          #2B4FD6;
  --navy-tint:     #EAEEFC;
  --teal:          #0E8F82;
  --teal-tint:     #E1F3EF;
  --violet:        #7C4DCC;
  --violet-tint:   #F1EBFB;
  --amber:         #BD7420;
  --amber-soft:    #D99A3F;
  --amber-tint:    #FBF1DF;
  --rose:          #C43D6B;
  --rose-tint:     #FCE9EF;

  --ink:           #181B33;
  --ink-dim:       #52577A;
  --ink-faint:     #8B8FAD;

  --spoke:         #C2C6DD;

  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(24,27,51,.04), 0 10px 28px -14px rgba(24,27,51,.16);
  --shadow-hover: 0 8px 20px -6px rgba(24,27,51,.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

::selection{ background: var(--amber-tint); color: var(--ink); }

a{ color: inherit; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--ink); }
h4{ font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); }
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- background texture: a faint chart grid, not a starfield ---------- */
.starfield{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(24,27,51,.06), transparent),
    radial-gradient(1px 1px at 75% 35%, rgba(24,27,51,.05), transparent),
    radial-gradient(1px 1px at 45% 70%, rgba(24,27,51,.05), transparent),
    radial-gradient(1px 1px at 88% 82%, rgba(24,27,51,.05), transparent),
    radial-gradient(1px 1px at 25% 88%, rgba(24,27,51,.05), transparent),
    radial-gradient(ellipse 900px 500px at 15% -6%, rgba(43,79,214,.06), transparent 60%),
    radial-gradient(ellipse 800px 520px at 100% 10%, rgba(14,143,130,.06), transparent 60%),
    radial-gradient(ellipse 700px 480px at 50% 100%, rgba(124,77,204,.05), transparent 60%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 340px 340px, 300px 300px, 420px 420px, 360px 360px, 300px 300px, auto, auto, auto;
}

/* ---------- top nav ---------- */
.topnav{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: rgba(246,247,251,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav-brand{
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
}
.topnav-brand span{ color: var(--ink-faint); font-weight: 500; }
.topnav-links{ display: flex; gap: 28px; align-items: center; }
.topnav-links a{
  font-size: 13.5px; text-decoration: none; color: var(--ink-dim);
  font-family: var(--font-mono); letter-spacing: .01em;
  transition: color .2s;
}
.topnav-links a:hover{ color: var(--amber); }
.topnav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; background: none; border: 1px solid var(--border-strong);
  border-radius: 8px; cursor: pointer; padding: 0 7px;
}
.topnav-toggle span{ display: block; height: 2px; background: var(--ink); border-radius: 1px; }

/* ---------- hero ---------- */
.hero{
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 76px 32px 60px;
}
.hero-grid{
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start;
}
.hero-eyebrow{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 20px; max-width: 320px;
}
.hero-title{
  font-size: clamp(38px, 5.2vw, 60px); line-height: 1.05; font-weight: 600;
  color: var(--ink); max-width: 620px;
}
.hero-sub{
  max-width: 480px; margin: 22px 0 0; font-size: 17px; color: var(--ink-dim);
}
.hero-scroll{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
  transition: color .2s, border-color .2s, gap .2s;
}
.hero-scroll:hover{ color: var(--amber); border-color: var(--amber); gap: 12px; }

.hero-mission-card{
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow-card);
}
.hero-mission-kicker{
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.hero-mission-text{ font-size: 15px; color: var(--ink); margin: 0 0 18px; line-height: 1.6; }
.hero-purpose{ list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border); }
.hero-purpose li{
  font-size: 13.5px; color: var(--ink-dim); padding-left: 20px; position: relative;
}
.hero-purpose li::before{
  content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
}

.hero-stats{
  display: flex; gap: 0; margin-top: 56px;
  border-top: 1px solid var(--border); padding-top: 30px;
}
.hero-stat{ display: flex; flex-direction: column; flex: 1; padding-right: 24px; }
.hero-stat + .hero-stat{ border-left: 1px solid var(--border); padding-left: 24px; }
.stat-num{
  font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--ink);
}
.stat-label{ font-size: 13px; color: var(--ink-dim); margin-top: 4px; max-width: 160px; }

/* ---------- sections, general ---------- */
.section{
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 92px 32px 20px;
}
.section-head{ max-width: 720px; margin-bottom: 44px; }
.eyebrow{
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--teal); margin-bottom: 14px; text-transform: uppercase;
}
.section h2{ font-size: clamp(27px, 3.6vw, 36px); margin-bottom: 12px; }
.section-intro{ color: var(--ink-dim); font-size: 15.5px; max-width: 680px; }
.money-block-head{ display: flex; align-items: baseline; justify-content: space-between; margin: 44px 0 18px; }
.money-block-head:first-of-type{ margin-top: 8px; }
.money-block-head h3{ font-size: 19px; }
.money-hint{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* ---------- map section (full-bleed canvas, spread edge to edge) ---------- */
.map-section-full{ max-width: 100%; padding-left: 20px; padding-right: 20px; }
.map-canvas-full{
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(189,116,32,.05), transparent 70%),
    var(--paper-2);
  background-size: 100% 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: var(--shadow-card);
}
#ecosystem-svg, #ecosystem-svg-intl{ width: 100%; height: auto; display: block; margin: 0 auto; }
.map-scroll-hint{
  display: none; text-align: center; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-faint); padding: 10px 0 2px; letter-spacing: .04em;
}

/* ---------- Excel upload toolbar (drives the map above from an uploaded file) ---------- */
.data-upload{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 16px;
}
.btn-upload, .btn-ghost{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .01em;
  padding: 9px 16px; border-radius: 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none;
}
.btn-upload{
  background: var(--ink); color: var(--paper-2); border: 1px solid var(--ink);
  position: relative;
}
.btn-upload:hover{ background: var(--amber); border-color: var(--amber); }
.btn-upload input[type="file"]{
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.btn-ghost{
  background: var(--paper-2); color: var(--ink-dim); border: 1px solid var(--border-strong);
}
.btn-ghost:hover{ color: var(--ink); border-color: var(--ink-dim); }
.btn-ghost[hidden]{ display: none; }
.data-upload-status{
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
}
.data-upload-status.is-ok{ color: var(--teal); }
.data-upload-status.is-error{ color: var(--rose); }

/* Floating hover card — overlays the top-right corner of the full-width diagram
   instead of permanently occupying half the screen. Appears only on hover/focus/tap. */
.map-hover-card{
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: min(320px, 42vw);
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-hover);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.map-hover-card.is-left{ right: auto; left: 18px; }
.map-hover-card:not([hidden]){ opacity: 1; transform: translateY(0); pointer-events: auto; }

.hc-close{
  position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink-dim);
  font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hc-close:hover{ background: var(--amber-tint); color: var(--ink); }
.hc-kicker{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--amber); text-transform: uppercase; margin-bottom: 8px; display:block;}
.hc-ext{ font-family: var(--font-mono); font-size: 23px; font-weight: 600; margin-bottom: 2px; }
.hc-title{ color: var(--ink-dim); font-size: 13px; margin-bottom: 14px; }
.hc-block-label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; margin: 12px 0 5px; }
.hc-block-label:first-of-type{ margin-top: 0; }
.hc-desc{ font-size: 13.5px; color: var(--ink); }
.hc-expand{ font-size: 13px; color: var(--ink-dim); }

.hc-money-cats{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hc-money-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--border-strong); border-radius: 20px; color: var(--ink-dim); background: var(--paper);
}
.hc-money-dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hc-money-plan{ font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

.hc-impl-row{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.hc-impl-label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.hc-impl-pct{ font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--amber); }
.hc-impl-track{ height: 6px; border-radius: 4px; background: var(--paper-3); margin-top: 6px; overflow: hidden; }
.hc-impl-fill{ height: 100%; border-radius: 4px; transition: width .3s ease; }

.hc-flow-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--amber); color: #fff; font-family: var(--font-mono); font-weight:700;
  margin-bottom: 12px;
}
.hc-flow-route{ font-family: var(--font-mono); font-size: 14px; margin-bottom: 10px; }
.hc-flow-route b{ color: var(--amber); }
.hc-flow-text{ font-size: 13.5px; color: var(--ink); }

.legend{
  display: flex; flex-wrap: wrap; gap: 16px 30px;
  margin-top: 22px; padding: 18px 6px 4px;
  font-size: 13px; color: var(--ink-dim);
}
.legend-item{ display: flex; align-items: center; gap: 9px; }
.legend-swatch{ width: 11px; height: 11px; border-radius: 50%; flex: none; }
.legend-line{ width: 22px; height: 0; border-top: 2px solid; flex: none; }
.legend-line-spoke{ border-color: var(--spoke); }
.legend-line-amber{ border-color: var(--amber); border-top-style: dashed; }

/* ---------- SVG node/link interactions ---------- */
.node{ cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(.2,.9,.3,1.2); }
.node:hover, .node:focus, .node.is-active{ transform: scale(1.14); outline: none; }
.node .node-fill{ transition: filter .2s, stroke-width .2s; }
.node:hover .node-fill, .node:focus .node-fill{ filter: drop-shadow(0 4px 10px rgba(24,27,51,.22)); stroke-width: 2.4; }
.node text{ pointer-events: none; }
.node-label{ font-family: var(--font-mono); font-size: 15px; font-weight: 600; }

.hub-ring{ fill: var(--paper-2); stroke: var(--amber); stroke-width: 2; }
.hub-tick{ stroke: var(--amber); stroke-width: 1.4; opacity: .55; }
.hub-text-1{ font-family: var(--font-mono); font-size: 19px; font-weight: 600; fill: var(--ink); }
.hub-text-2{ font-family: var(--font-body); font-size: 13px; fill: var(--ink-dim); }

.spoke{ stroke: var(--spoke); stroke-width: 1.3; opacity: .8; }

.flow-arc{ fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .7; cursor: pointer; transition: opacity .2s, stroke-width .2s; }
.flow-arc:hover, .flow-arc.is-active{ opacity: 1; stroke-width: 2.6; stroke-dasharray: none; }
.flow-badge{ cursor: pointer; }
.flow-badge circle{ fill: var(--paper-2); stroke: var(--amber); stroke-width: 1.6; transition: fill .2s, transform .2s; transform-box: fill-box; transform-origin: center;}
.flow-badge:hover circle, .flow-badge.is-active circle{ fill: var(--amber); transform: scale(1.18); }
.flow-badge text{ fill: var(--amber); font-family: var(--font-mono); font-size: 14px; font-weight: 600; pointer-events: none; transition: fill .2s;}
.flow-badge:hover text, .flow-badge.is-active text{ fill: #fff; }

/* ---------- workflows: horizontal icon chains ---------- */
.flows{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; }
.flow-card{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); }
.flow-card h3{ font-size: 17px; margin-bottom: 20px; color: var(--ink); display:flex; align-items:center; gap:10px; }
.flow-card-icon{ font-size: 20px; }
.flow-steps{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; }
.flow-step{
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; text-align: center;
}
.flow-step-icon{
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--border);
}
.flow-step-text{ font-size: 11.5px; color: var(--ink-dim); line-height: 1.3; }
.flow-step-arrow{ color: var(--amber); font-size: 14px; flex: none; }

.flow-insights{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; box-shadow: var(--shadow-card); }
.flow-insights h3{ grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 2px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-weight: 500;}
.flow-insights ul{ display: contents; }
.flow-insights li{ list-style: none; font-size: 13.5px; color: var(--ink-dim); display: flex; gap: 10px; align-items: flex-start; }
.insight-icon{ font-size: 17px; flex: none; }

/* ---------- expansion tree: accordion cards ---------- */
.expansion-tree{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.exp-parent{
  background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.exp-parent-head{
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.exp-parent-ext{ font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--exp-color); flex: none; }
.exp-parent-title{ font-size: 12.5px; color: var(--ink-dim); flex: 1; }
.exp-parent-count{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); flex: none; }
.exp-parent-chevron{ flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .25s; }
.exp-parent.is-open .exp-parent-chevron{ transform: rotate(-135deg); }
.exp-parent-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.exp-parent.is-open .exp-parent-body{ grid-template-rows: 1fr; }
.exp-parent-body-inner{ overflow: hidden; min-height: 0; }
.exp-child{ display: flex; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--border); }
.exp-child-icon{ font-size: 18px; flex: none; width: 26px; text-align: center; }
.exp-child-name{ font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.exp-child-purpose{ font-family: var(--font-body); font-size: 12.5px; color: var(--ink-dim); font-weight: 400; }
.exp-child-why{ font-size: 12.5px; color: var(--ink-dim); }

/* ---------- monetization ---------- */
.money-stats{ display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; margin-bottom: 28px; }
.money-layers{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.layer-card{ display: flex; gap: 12px; background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 16px; box-shadow: var(--shadow-card); }
.layer-num{ font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--amber); background: var(--amber-tint); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.layer-card h4{ font-size: 13.5px; margin-bottom: 3px; }
.layer-card p{ font-size: 12px; color: var(--ink-dim); margin: 0; }

.money-stakeholders{ margin-bottom: 40px; }
.money-stakeholders-label{ display: block; font-size: 13.5px; color: var(--ink-dim); margin-bottom: 12px; }

.tag-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag{
  font-family: var(--font-mono); font-size: 12.5px; padding: 6px 13px;
  border: 1px solid var(--border-strong); border-radius: 20px; color: var(--ink-dim); background: var(--paper-2);
}

.money-categories{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.money-card{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.money-card-head{
  width: 100%; display: grid; grid-template-columns: 40px 1fr auto 14px; align-items: center; gap: 16px;
  padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.money-card-icon{ width: 40px; height: 40px; border-radius: 10px; background: var(--amber-tint); color: var(--amber); display: flex; align-items: center; justify-content: center; }
.money-card-icon svg{ width: 21px; height: 21px; }
.money-card-titles{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.money-card-num{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); flex: none; }
.money-card-name{ font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.money-card-model{ font-size: 12.5px; color: var(--ink-faint); }
.money-card-potential{
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
}
.potential-high{ background: var(--teal-tint); color: var(--teal); }
.potential-medium-high{ background: var(--amber-tint); color: var(--amber); }
.potential-medium{ background: var(--paper-3); color: var(--ink-dim); }
.money-card-chevron{ width: 9px; height: 9px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .25s; justify-self: end; }
.money-card.is-open .money-card-chevron{ transform: rotate(-135deg); }
.money-card-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.money-card.is-open .money-card-body{ grid-template-rows: 1fr; }
.money-card-body-inner{ overflow: hidden; min-height: 0; padding: 0 20px; }
.money-card-row{ padding: 4px 0 16px; border-top: 1px solid var(--border); margin-top: 2px; }
.money-card-label{ display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 8px; }
.chip-row{ display: flex; flex-wrap: wrap; gap: 7px; }
.chip{ font-size: 12.5px; color: var(--ink-dim); background: var(--paper-3); border-radius: 8px; padding: 6px 10px; }
.money-card-facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; padding-bottom: 6px; }
.money-card-facts > div{ display: flex; flex-direction: column; gap: 4px; }
.money-card-facts > div span:last-child{ font-size: 13px; color: var(--ink); }
.money-card-example{ font-size: 13px; color: var(--ink-dim); font-style: italic; border-top: 1px solid var(--border); padding-bottom: 18px; margin: 0; }
.money-card-example .money-card-label{ font-style: normal; }

.money-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; }
.money-panel{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); }
.money-panel h3{ font-size: 16.5px; margin-bottom: 18px; }

.mix-chart{ display: flex; justify-content: center; margin-bottom: 4px; }
.mix-donut{ width: 180px; height: 180px; }
.mix-center-num{ font-family: var(--font-display); font-size: 27px; font-weight: 600; fill: var(--ink); }
.mix-center-label{ font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.mix-legend{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.mix-legend li{ display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-dim); }
.mix-dot{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mix-legend-label{ flex: 1; }
.mix-legend-pct{ font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.money-mix-note{ font-size: 12.5px; color: var(--ink-faint); border-top: 1px solid var(--border); margin: 18px 0 0; padding-top: 14px; }

.money-matrix svg{ width: 100%; height: auto; display: block; }
.matrix-axis-mid{ stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.matrix-axis-border{ stroke: var(--border-strong); stroke-width: 1; }
.matrix-quad-label{ font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink-dim); text-transform: uppercase; letter-spacing: .03em; }
.matrix-dot-num{ font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: #fff; pointer-events: none; }
.matrix-dot-label{
  font-size: 11px; fill: var(--ink); opacity: 0; transition: opacity .15s; font-weight: 600;
  paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round;
}
.matrix-dot{ cursor: default; }
.matrix-dot:hover .matrix-dot-label, .matrix-dot:focus .matrix-dot-label{ opacity: 1; }
.matrix-dot circle{ transition: r .15s; }
.matrix-dot:hover circle, .matrix-dot:focus circle{ r: 12; }
.matrix-axis-label{ font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-faint); }
.matrix-axis-v{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: -6px; }

.money-roadmap{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; margin-bottom: 34px; }
.roadmap-phase{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-card); }
.roadmap-phase-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.roadmap-phase-num{ font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--amber); width: 34px; height: 34px; border-radius: 50%; background: var(--amber-tint); display: flex; align-items: center; justify-content: center; flex: none; }
.roadmap-phase-head h4{ font-size: 15px; }
.roadmap-phase-window{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.roadmap-phase ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.roadmap-phase li{ font-size: 13px; color: var(--ink-dim); padding-left: 16px; position: relative; }
.roadmap-phase li::before{ content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

.money-recs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rec-card{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-card); }
.rec-num{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.rec-card h4{ font-size: 14px; margin: 6px 0 6px; }
.rec-card p{ font-size: 12.5px; color: var(--ink-dim); margin: 0; }

/* ---------- IP grid ---------- */
.ip-grid{ display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; }
.ip-card{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); }
.ip-card h3{ font-size: 16.5px; margin-bottom: 12px; }
.ip-card-desc{ font-size: 13.5px; color: var(--ink-dim); margin-bottom: 18px; }
.ip-card-note{ font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px;}

.suite-grid{ display: grid; gap: 10px; }
.suite-item{ display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.suite-item:first-child{ border-top: none; padding-top: 0; }
.suite-item-icon{
  width: 34px; height: 34px; border-radius: 9px; background: var(--paper-3);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none;
}
.suite-item-name{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); margin-bottom: 2px; font-weight: 600; }
.suite-item-what{ font-size: 13px; color: var(--ink-dim); }

/* ---------- tech stack ---------- */
.hosting-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.host-card{ background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); }
.host-card-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.host-card-icon{ font-size: 24px; }
.host-card h3{ font-size: 16.5px; }
.host-card-role{ font-family: var(--font-mono); font-size: 11.5px; color: var(--amber); text-transform: uppercase; letter-spacing: .05em; }
.host-specs{ list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.host-specs li{ font-size: 12.5px; color: var(--ink-dim); padding-left: 14px; position: relative; }
.host-specs li::before{ content: '·'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.host-card-note{ font-size: 12.5px; color: var(--ink-faint); border-top: 1px solid var(--border); padding-top: 14px; margin: 0;}

.tech-rows{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tech-row{
  background: var(--paper-2); border: 1px solid var(--border); border-left: 3px solid var(--row-color, var(--amber));
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.tech-row-head{ grid-column: 1 / -1; display:flex; align-items:center; gap: 10px; margin-bottom: 2px; flex-wrap: wrap;}
.tech-row-icon{ font-size: 19px; }
.tech-row-head h4{ font-family: var(--font-display); font-size: 15px; color: var(--ink); margin:0; }
.tech-row-domains{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); flex-basis: 100%; }
.tech-col-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.tech-col-val{ font-size: 12.5px; color: var(--ink-dim); }
.tech-row-note{
  grid-column: 1 / -1; font-size: 12px; color: var(--amber); background: var(--amber-tint);
  border-radius: 8px; padding: 9px 12px; margin-top: 2px;
}

/* ---------- view (domain version & status tracker) ---------- */
.view-toolbar{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px;
  background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.filter-block{ display: flex; flex-direction: column; gap: 9px; }
.filter-label{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.filter-chips{ display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip{
  font-family: var(--font-mono); font-size: 12px; padding: 6px 13px;
  border: 1px solid var(--border-strong); border-radius: 20px; background: var(--paper-2); color: var(--ink-dim);
  cursor: pointer; transition: background .18s, border-color .18s, color .18s;
}
.filter-chip:hover{ border-color: var(--ink-dim); color: var(--ink); }
.filter-chip.is-active{ background: var(--ink); border-color: var(--ink); color: #fff; }
.view-toolbar-end{
  display: flex; align-items: center; gap: 14px; margin-left: auto;
}
.view-count{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

.view-table-wrap{
  background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow-x: auto;
}
.view-table{ width: 100%; border-collapse: collapse; min-width: 860px; }
.view-table thead th{
  text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--ink); padding: 13px 16px; white-space: nowrap;
}
.view-table thead th:first-child{ border-top-left-radius: var(--radius); }
.view-table thead th:last-child{ border-top-right-radius: var(--radius); }
.view-table tbody td{
  padding: 13px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-dim);
  vertical-align: top;
}
.view-table tbody tr:hover td{ background: var(--paper-3); }
.view-cell-url{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 600; max-width: 260px; }
.view-cell-version{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.view-cell-text{ max-width: 280px; line-height: 1.5; }
.view-empty{ text-align: center; color: var(--ink-faint); padding: 34px 16px !important; font-size: 13.5px; }

.status-pill{
  display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.status-pill.tone-positive{ background: var(--teal-tint); color: var(--teal); }
.status-pill.tone-progress{ background: var(--amber-tint); color: var(--amber); }
.status-pill.tone-future{ background: var(--violet-tint); color: var(--violet); }
.status-pill.tone-neutral{ background: var(--paper-3); color: var(--ink-faint); }

/* ---------- footer ---------- */
.footer{ position: relative; z-index: 1; text-align: center; padding: 96px 32px 60px; }
.footer-quote{
  font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(20px, 3vw, 27px); max-width: 680px; margin: 0 auto 20px;
  color: var(--ink);
}
.footer-quote::before, .footer-quote::after{ content: '"'; color: var(--amber); }
.footer-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .flows{ grid-template-columns: 1fr; }
  .flow-insights{ grid-template-columns: 1fr; }
  .ip-grid{ grid-template-columns: 1fr; }
  .hosting-cards{ grid-template-columns: 1fr; }
  .tech-rows{ grid-template-columns: 1fr; }
  .money-split{ grid-template-columns: 1fr; }
  .money-layers{ grid-template-columns: repeat(2, 1fr); }
  .money-roadmap{ grid-template-columns: 1fr; }
  .money-recs{ grid-template-columns: repeat(2, 1fr); }
  .money-card-facts{ grid-template-columns: 1fr 1fr; }
  .topnav-links{
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--paper-2); border-bottom: 1px solid var(--border); padding: 12px 24px 18px; gap: 4px;
    box-shadow: var(--shadow-card);
  }
  .topnav-links.is-open{ display: flex; }
  .topnav-links a{ padding: 10px 0; border-bottom: 1px solid var(--border); }
  .topnav-links a:last-child{ border-bottom: none; }
  .topnav-toggle{ display: flex; }
  .map-hover-card{ width: min(300px, 60vw); }
  .map-canvas-full{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #ecosystem-svg, #ecosystem-svg-intl{ width: 1180px; }
  .map-scroll-hint{ display: block; }
  .view-toolbar-end{ margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 640px){
  .hero{ padding: 56px 20px 40px; }
  .hero-stats{ flex-wrap: wrap; gap: 20px 0; }
  .hero-stat{ flex: 1 1 45%; border: none !important; padding: 0 !important; }
  .tech-row{ grid-template-columns: 1fr; }
  .section{ padding: 64px 20px 20px; }
  .money-layers{ grid-template-columns: 1fr; }
  .money-recs{ grid-template-columns: 1fr; }
  .money-card-head{ grid-template-columns: 34px 1fr 12px; }
  .money-card-potential{ display: none; }
  .money-card-facts{ grid-template-columns: 1fr; }
  .map-hover-card{
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto;
    max-height: 60vh; overflow-y: auto;
  }
  .map-hover-card.is-left{ left: 12px; right: 12px; }
  .host-specs{ grid-template-columns: 1fr; }
  .data-upload-status{ flex-basis: 100%; }
}


/* ---------- GUI PREVIEW MODAL ---------- */
.preview-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(24, 27, 51, 0.6); /* var(--ink) with opacity */
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.preview-modal-overlay.is-open {
  opacity: 1; pointer-events: auto;
}
.preview-modal-content {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  max-width: 90vw; max-height: 90vh;
  box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column;
}
.preview-modal-close {
  position: absolute; top: -16px; right: -16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--border-strong);
  color: var(--ink); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background .2s, color .2s, border-color .2s;
}
.preview-modal-close:hover {
  background: var(--amber-tint); color: var(--amber); border-color: var(--amber);
}
.preview-modal-image {
  max-width: 100%; max-height: calc(90vh - 16px);
  border-radius: var(--radius-sm);
  object-fit: contain;
  display: block;
}
.preview-modal-error {
  padding: 40px 60px; text-align: center; color: var(--ink-dim); 
  font-family: var(--font-mono); font-size: 13px;
}

/* ---------- HOVER CARD PREVIEW BUTTON ---------- */
.hc-preview-btn {
  margin-top: 16px; width: 100%;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 20px; cursor: pointer;
  background: var(--paper-3); color: var(--ink-dim); border: 1px solid var(--border);
  transition: background .2s, color .2s, border-color .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hc-preview-btn:hover {
  background: var(--amber-tint); color: var(--amber); border-color: var(--amber);
}

/* ---------- AUTHENTICATION GATE ---------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: opacity 0.3s ease;
}
.auth-gate.is-unlocking {
  opacity: 0; pointer-events: none;
}
.auth-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  width: min(420px, 90vw);
  box-shadow: var(--shadow-hover);
  text-align: center;
}
.auth-card h2 {
  font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; color: var(--ink);
}
.auth-card p {
  font-size: 13.5px; color: var(--ink-dim); margin-bottom: 24px; line-height: 1.5;
}
.auth-input {
  width: 100%; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink);
  margin-bottom: 16px; outline: none;
  transition: border-color .2s;
}
.auth-input:focus { border-color: var(--amber); }
.auth-btn {
  width: 100%; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: var(--ink); color: var(--paper-2);
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .2s;
}
.auth-btn:hover { background: var(--amber); }
.auth-preview-btn {
  width: 100%; padding: 11px 16px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: var(--paper-2); color: var(--ink-dim);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.auth-preview-btn:hover {
  background: var(--amber-tint); color: var(--ink); border-color: var(--amber);
}
.auth-error {
  font-size: 12.5px; color: var(--rose); margin-top: 14px; font-family: var(--font-mono);
}

/* ---------- VIEW TRACKER INLINE EDITING (Updated for Usability) ---------- */
.view-inline-input {
  width: 100%;
  min-width: 140px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .2s, background .2s;
}

.view-inline-textarea {
  width: 100%;
  min-width: 220px;
  min-height: 60px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  resize: both; /* Allows you to freely resize it in any direction */
  transition: border-color .2s, background .2s;
}

.view-inline-input:focus, .view-inline-textarea:focus {
  background: var(--paper-2);
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-tint);
}

/* ---------- PROPER EDITABLE DROPDOWN PILLS ---------- */
.view-inline-select {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 30px 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352577A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  cursor: pointer;
  width: 100%;
  min-width: 180px;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.view-inline-select.tone-positive { background-color: var(--teal-tint); color: var(--teal); }
.view-inline-select.tone-progress { background-color: var(--amber-tint); color: var(--amber); }
.view-inline-select.tone-future { background-color: var(--violet-tint); color: var(--violet); }
.view-inline-select.tone-neutral { background-color: var(--paper-3); color: var(--ink-dim); }

.view-inline-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-tint);
}

.view-readonly-text {
  max-width: 280px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.view-readonly-empty {
  color: var(--ink-faint);
}

.is-preview-mode .sticky-note {
  display: none;
}

/* ---------- STICKY NOTE (persistent scratchpad) ---------- */
.sticky-note{
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: row-reverse; align-items: stretch;
}
.sticky-note-tab{
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 9px;
  background: var(--amber); color: #fff; border: none;
  border-radius: 10px 0 0 10px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: background .2s, padding-right .2s;
}
.sticky-note-tab:hover{ background: var(--amber-soft); padding-right: 13px; }
.sticky-note-tab-icon{ font-size: 15px; }
/* Deliberately stays visible (and clickable to close) even while the panel is open —
   it's the biggest, highest-contrast control on the widget, so it's always the
   reliable way back rather than disappearing and leaving only the small × in the header. */

.sticky-note-panel{
  width: min(300px, 82vw);
  max-height: 70vh;
  background: var(--paper-2);
  border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sticky-note-panel[hidden]{ display: none; }
.sticky-note-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--paper-3);
  flex: none;
}
.sticky-note-title{
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.sticky-note-head-actions{ display: flex; align-items: center; gap: 10px; }
.sticky-note-saved{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.sticky-note-clear{
  border: none; background: none; cursor: pointer; color: var(--ink-faint);
  font-family: var(--font-mono); padding: 0; transition: color .2s;
  font-size: 11px; white-space: nowrap;
}
.sticky-note-clear:hover{ color: var(--rose); }
.sticky-note-clear.is-armed{
  color: #fff; background: var(--rose); font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
}
.sticky-note-clear.is-armed:hover{ background: var(--rose); color: #fff; }
.sticky-note-close{
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--border-strong); color: var(--ink-dim);
  font-size: 15px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.sticky-note-close:hover{ background: var(--amber-tint); color: var(--ink); border-color: var(--amber); }
.sticky-note-textarea{
  flex: 1; resize: none; border: none; outline: none;
  padding: 14px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); line-height: 1.55;
  background: var(--paper-2); min-height: 220px; overflow-y: auto;
}
.sticky-note-textarea::placeholder{ color: var(--ink-faint); }

@media (max-width: 640px){
  .sticky-note-panel{ width: min(260px, 78vw); max-height: 60vh; }
}