/* View: Pulpit — the greeting header (js/views/dashboard.js, .dash-head). The user's own panel:
   monogram (.greet-me → settings), date + live clock (.greet-clock, liveClock() in js/ui/motion.js), the greeting button
   (tap = next fact, letters in .gl, the name in accent with a short drawn stroke .greet-ink).
   The neon wash lives on body (css/base.css) so it is not clipped to this header.
   Phone: a compact bar (.greet-mini) slides in under the top bar once the greeting has scrolled away (stickyGreeting()).
   Motion: entrance runs only while .dash-head.is-entering (set on route change), so the 30 s tick re-render never replays it.
   Only transform / opacity animate (the ink stroke uses clip-path once). */
@layer views {
.dash-head { padding: 18px 0 16px; gap: 18px 40px; }

/* ---- identity, date and clock ---- */
.dash-greet {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  grid-template-areas: "me meta" "title title" "line line" "dots dots";
}
.greet-me { grid-area: me; display: inline-flex; border-radius: 50%; transition: transform var(--t-base) var(--ease-settle); }
.greet-me .avatar { width: 44px; height: 44px; font-size: 17px; }
.greet-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.greet-meta .kicker { margin: 0; }
.greet-clock {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule-2);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); white-space: nowrap;
}
.greet-clock > span { display: inline-block; }
.greet-clock .colon { padding: 0 1px; animation: colon-tick 2s linear infinite; }
@keyframes colon-tick { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

/* ---- the greeting itself (a button: tap / click / Enter = next fact in .greet-line) ---- */
.greet-title { grid-area: title; margin-top: 10px; }
.dash-head .page-title { font-size: 34px; line-height: 1.1; }
/* hit area ≥ 44 px without changing the look: 7 px of padding above and below, cancelled by a negative margin */
.greet-btn { display: inline-block; padding: 7px 0; margin: -7px 0; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.greet-mark { display: inline-flex; width: .8em; height: .8em; margin-right: .2em; vertical-align: -.08em; color: var(--warn); transition: transform var(--t-base) var(--ease-settle); }
.greet-mark svg { width: 100%; height: 100%; overflow: visible; }
.greet-mark.gm-moon { color: var(--accent); }
.gw { display: inline-block; white-space: nowrap; }
.gl { display: inline-block; transform: translateY(var(--lift, 0px)); transition: transform 180ms var(--ease-out); }
.greet-name-wrap { display: inline-block; white-space: nowrap; }
.greet-name { position: relative; display: inline-block; color: var(--accent); }
/* short stroke under the name only: absolute, so the greeting line does not grow */
.greet-ink {
  position: absolute; left: 18%; bottom: -.06em; width: 64%; height: .34em; overflow: visible; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: max(4px, .1em); stroke-linecap: round;
}
.greet-ink path { vector-effect: non-scaling-stroke; }
.dash-head.is-entering .greet-ink { animation: ink-draw 720ms var(--ease-out) 640ms backwards; }
@keyframes ink-draw { from { clip-path: inset(0 100% 0 0); } }
.greet-line { grid-area: line; min-height: 1.45em; margin-top: 8px; }
.dash-greet .page-sub b { color: var(--ink); font-weight: 600; }
.greet-dots { grid-area: dots; display: flex; gap: 6px; margin-top: 10px; }
.greet-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); transition: transform var(--t-base) var(--ease-settle), background-color var(--t-base); }
.greet-dots i.on { background: var(--accent); transform: scale(1.5); }

@media (hover: hover) and (pointer: fine) {
  .greet-btn:hover .greet-mark { transform: rotate(-12deg) scale(1.08); }
  .greet-me:hover { transform: rotate(-6deg) scale(1.05); }
}

/* ---- phone: compact greeting under the top bar once the header has scrolled away ---- */
.greet-mini { display: none; }
@media (max-width: 760px) {
  .greet-mini {
    position: fixed; z-index: 25; top: var(--shell-top); left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: 44px;
    padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l)); background: var(--paper); border-bottom: 1px solid var(--rule);
    color: var(--ink); text-align: left; opacity: 0; transform: translateY(-100%); pointer-events: none;
    transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .greet-mini.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .greet-mini.is-instant { transition: none; }
  .greet-mini-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: var(--w-display); font-size: 16px; font-variation-settings: var(--fvs-display); }
  .greet-mini .greet-clock .colon { animation: none; }
}
@media (max-width: 380px) {
  .dash-head .page-title { font-size: 30px; }
}

/* ---- desktop: monogram beside the greeting, figures to the right ---- */
@media (min-width: 761px) {
  .dash-head { padding: 30px 0 22px; align-items: flex-end; }
  .dash-greet { flex: 1 1 520px; column-gap: 18px; grid-template-areas: "me meta" "me title" ". line" ". dots"; }
  .greet-me { align-self: end; margin-bottom: 4px; }
  .greet-me .avatar { width: 68px; height: 68px; font-size: 26px; }
  .greet-title { margin-top: 6px; }
  .dash-head .page-title { font-size: clamp(40px, 1.6vw + 26px, 64px); line-height: 1.05; }
  .greet-line { font-size: var(--fs-lead); }
  .greet-clock { font-size: 14px; }
}
}