/* ============================================================================
   Varelyno v10 — one visual language for the cards.

   The card SHELLS were already unified: 18px radius, one shadow, one surface,
   one hover. What still drifted was the primary TITLE type — project titles
   were 16px with tight tracking, people 17px and notes 18px, both untracked —
   so a wall of mixed cards read as three hands rather than one. This layer
   sets a single title scale for the three record cards, and nothing else:
   colour, the deliberate note accent-tab, spacing and layout are all left
   exactly as they were. Additive and scoped to the live theme, so it can be
   switched off by removing one <link>.
   ========================================================================== */
html.v-universe .project-card h3,
html.v-universe .person-card h3,
html.v-universe .note-card h4{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.32;
}

/* ------------------------------------------------------ your top message ---
   Each person sets their own on the account page (v10-announce.js). Built from the live theme's own
   accent so it belongs to whichever of the eighteen themes is on, and sized to
   be read from across a room without shouting over the page under it. */
.v10-announce{
  --a:var(--v-accent,var(--nhs,#187bb1));
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  margin:0 0 20px;padding:18px 26px;border-radius:18px;color:#fff;
  background:
    radial-gradient(120% 180% at 100% 0%,color-mix(in srgb,#fff 18%,transparent),transparent 55%),
    linear-gradient(115deg,color-mix(in srgb,var(--a) 88%,#061a2b) 0%,var(--a) 48%,color-mix(in srgb,var(--a) 62%,#19b3a6) 100%);
  box-shadow:0 18px 40px color-mix(in srgb,var(--a) 26%,transparent),inset 0 1px 0 #ffffff33;
  animation:v10-announce-in .5s cubic-bezier(.2,.75,.25,1) both;
}
.v10-announce::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,#ffffff26 45%,transparent 60%);
  transform:translateX(-100%);animation:v10-announce-sheen 7s ease-in-out 1.2s infinite;
}
.v10-announce-mark{
  flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:24px;line-height:1;color:#fff;background:#ffffff24;border:1px solid #ffffff40;
  text-shadow:0 0 12px #fff9;
}
.v10-announce-text{display:grid;gap:3px;min-width:0}
.v10-announce strong{
  font-size:clamp(20px,2.1vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.15;
  text-wrap:balance;
}
.v10-announce-sub{font-size:14.5px;font-weight:500;opacity:.9;line-height:1.4}
.v10-announce-sub[hidden]{display:none}
@keyframes v10-announce-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes v10-announce-sheen{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.v10-announce,.v10-announce::after{animation:none}}
@media(max-width:700px){.v10-announce{padding:14px 16px;gap:12px}.v10-announce-mark{width:38px;height:38px;font-size:19px}}

/* ------------------------------------------------------- connection lines ---
   Quiet guides until you point at something. Every line -- including the
   dashed ones to future projects, which were at .58 because their rule
   out-ranked the base .28 -- rests at one low opacity, and the lines of the
   person or project under the pointer come up to full colour. Ids in the
   selector so no older layer's rule out-ranks these. */
html #graphWorld #graphEdges .graph-edge,
html #graphWorld #graphEdges .graph-edge.future-edge{opacity:.24}
html #graphWorld #graphEdges .graph-edge.hot{opacity:1;stroke-width:2.4}
html #graphWorld #graphEdges .graph-edge.project.hot{stroke-width:3}
html #graphWorld #graphEdges .graph-edge.dim{opacity:.05}
html #graphWorld #graphEdges .graph-edge:hover{opacity:.9}

/* ------------------------------------------------------ relationship table ---
   Project headings bold and centred over their column; each person centred in
   their own cell, so the name sits in the middle of the row however tall the
   row's role pills make it. */
html .matrix-table thead th{text-align:center;vertical-align:middle;font-weight:750}
html .matrix-table thead th.matrix-head span{font-weight:750}
html .matrix-table thead th.matrix-head .dot{vertical-align:.1em;margin-right:5px}
html .matrix-table .matrix-person{text-align:center;vertical-align:middle}
html .matrix-table .matrix-person strong,
html .matrix-table .matrix-person span{text-align:center;margin-inline:auto}

/* ------------------------------------------------------ one row language ---
   Every list inside a hub card now reads like Future Projects: rows float
   free (no divider lines), each led by a straight vertical bar in its own
   colour, with the same title/sub-line type, and the same hover -- the ring
   and tint in the row's colour from hover.css. Dots become bars; rows that
   had no dot (tasks, waiting) draw the bar from their project colour. */
html.v-universe #mainContent .command-card>.stack,
html.v-universe #mainContent .command-card>.future-list{padding:7px 12px 12px;gap:6px}
html.v-universe #mainContent .command-card .info-row,
html.v-universe #mainContent .command-card .future-project{
  --bar:var(--card-accent,var(--hl,var(--v-accent)));
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:56px;padding:9px 12px;margin:0;
  border:1px solid transparent!important;border-radius:12px;background:transparent;
}
html.v-universe #mainContent .command-card .future-project{display:grid;grid-template-columns:9px 1fr 20px}
/* the bar */
html.v-universe #mainContent .command-card .info-row>:is(i.dot,.health-dot),
html.v-universe #mainContent .command-card .future-project>.future-colour{
  flex:none;width:9px!important;height:34px!important;min-width:9px;border-radius:999px!important;
  box-shadow:none!important;margin:0!important;
}
html.v-universe #mainContent .command-card .info-row:not(:has(>:is(i.dot,.health-dot)))::before{
  content:"";flex:none;width:9px;height:34px;border-radius:999px;background:var(--bar);
}
/* the waiting clock tile gives way to the bar (the card title says "waiting") */
html.v-universe #mainContent .command-card .info-row>.wait-icon{display:none}
/* the text */
html.v-universe #mainContent .command-card :is(.info-row .main,.future-project>span){min-width:0;flex:1}
html.v-universe #mainContent .command-card :is(.info-row .main strong,.future-project strong){
  display:block;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--text);
}
html.v-universe #mainContent .command-card :is(.info-row .main small,.future-project small){
  display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px;
}
/* the future card's own hover used a lavender wash; it now takes the shared ring */
html.v-universe #mainContent .command-card .future-project:hover{transform:translateY(-1px)}

/* ---- Tasks: the same rows, in a table ---------------------------------- */
html.v-universe .tasks-table{border-spacing:0 5px}
html.v-universe .tasks-table tbody td{
  border-top:1px solid transparent!important;border-bottom:1px solid transparent!important;
  background:transparent;transition:border-color .2s ease,background-color .2s ease;
}
html.v-universe .tasks-table tbody td:first-child{
  position:relative;padding-left:26px;border-left:1px solid transparent!important;border-radius:12px 0 0 12px;
}
html.v-universe .tasks-table tbody td:last-child{border-right:1px solid transparent!important;border-radius:0 12px 12px 0}
html.v-universe .tasks-table tbody td:first-child::before{
  content:"";position:absolute;left:10px;top:50%;width:9px;height:34px;margin-top:-17px;border-radius:999px;
  background:var(--card-accent,color-mix(in srgb,var(--muted) 45%,transparent));
}
html.v-universe .tasks-table tbody td.task-title{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
/* the ring is drawn by the cells, so it follows the rounded ends */
html.v-universe .tasks-table tbody tr.uhl:hover{box-shadow:none!important;background:transparent!important}
html.v-universe .tasks-table tbody tr.uhl:hover>td{
  border-color:color-mix(in srgb,var(--uhl) 55%,transparent)!important;
  background:color-mix(in srgb,var(--uhl) 6%,var(--surface))!important;
}
html.v-universe .tasks-table tbody tr.uhl:hover>td:not(:first-child):not(:last-child){border-left-color:transparent!important;border-right-color:transparent!important}

/* ------------------------------------------ Decisions / Finished, empty ---
   A raised shell holding a recessed well, the well dead-centre with equal
   room on every side. */
html .v10-empty-card{
  padding:14px;border-radius:20px;
  box-shadow:0 1px 2px rgba(28,45,95,.05),0 10px 24px -12px rgba(28,45,95,.16),0 30px 60px -30px rgba(28,45,95,.22)!important;
}
html .v10-empty-card>.v10-empty{
  margin:0;display:grid;justify-items:center;align-content:center;gap:7px;
  min-height:190px;padding:30px 24px!important;text-align:center;border-radius:14px!important;
  border:1.5px dashed color-mix(in srgb,var(--v-accent,#187bb1) 28%,var(--line))!important;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--v-accent,#187bb1) 7%,transparent),transparent 70%),
    color-mix(in srgb,var(--v-wash,#eef5f9) 35%,var(--surface))!important;
  box-shadow:inset 0 2px 6px rgba(28,45,95,.06),inset 0 -1px 0 #ffffff80;
}
html .v10-empty-ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:4px;
  color:var(--v-accent,#187bb1);background:var(--surface);
  box-shadow:0 1px 2px rgba(28,45,95,.08),0 8px 18px -8px color-mix(in srgb,var(--v-accent,#187bb1) 45%,transparent);
}
html .v10-empty-ico svg{width:24px;height:24px}
html .v10-empty strong{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em}
html .v10-empty>span:last-child{font-size:13.5px;color:var(--muted);max-width:42ch;line-height:1.5}

/* ------------------------------------------------------- wide screens -----
   The hub was laid out for a laptop and stayed that way at any size: the
   card grid beside the map was pinned to one or two fixed columns (the demo
   forced one), the four count tiles to 2x2, and the panel was capped at the
   35% the map left over. On a big monitor -- or at 67% zoom -- that left a
   tall single stack of cards next to a sea of empty space.

   Now: cards gain a column only while each stays comfortable (2 at >= 380px
   each, 3+ at >= 460px each)
   (varelyno-topbar.js), and on wide screens the panel beside
   the map is given room for a third column (the map keeps at least 1400px
   before it gives any up). Below ~1900px nothing changes.

   html.v10-own-zoom (shell.js): the browser is zoomed out, so the
   big-monitor upscale in hub-responsive.css stands down and the person gets
   the extra room they zoomed out for. */
@media(min-width:1900px){html.v10-own-zoom .app-shell{zoom:1!important;height:100vh!important}}
/* The column COUNT is set by varelyno-topbar.js layoutCards() from the
   panel's real width (inline, so it wins); this layer gives the panel the room. */
@media(min-width:1101px){
  html .v9-hub .hub-layout:not(.expanded){
    grid-template-columns:minmax(0,var(--hub-width,60%)) 14px minmax(min(1040px,max(35%,100% - 1400px)),1fr);
  }
}
/* the parts each kind of top line adds */
.v10-announce-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.v10-announce-text{flex:1}
.v10-announce-actions{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;position:relative;z-index:1}
.v10-announce-go{
  border:1px solid #ffffff66;background:#ffffff26;color:#fff;border-radius:999px;padding:9px 18px;
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .18s,transform .18s;
}
.v10-announce-go:hover{background:#ffffff40;transform:translateY(-1px)}
.v10-announce-hide{
  width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:#fff;opacity:.6;
  font-size:20px;line-height:1;cursor:pointer;transition:opacity .18s,background .18s;
}
.v10-announce-hide:hover{opacity:1;background:#ffffff26}
.v10-announce[data-mode=focus] .v10-announce-mark{box-shadow:inset 0 0 0 3px var(--fc,#ffffff40)}
.v10-announce[data-mode=spark] strong{font-weight:700;letter-spacing:-.015em}
@media(max-width:700px){.v10-announce-go{padding:7px 12px;font-size:12.5px}}

/* Top bar on tablets (seen on iPad Safari): the "Ctrl K" hint broke onto two
   lines, and a touch screen has no Ctrl key anyway -- keep it on one line,
   and drop it where there is no mouse. Safari's wider letters also pushed
   "YOU" to the edge of its 29px account circle. */
#topbar .kbd{white-space:nowrap}
@media(hover:none) and (pointer:coarse){#topbar .kbd{display:none}}
.account-trigger .avatar-xs{font-size:9px;letter-spacing:-.02em}