/* ============================================================================
   HOME DASHBOARD (/app/)

   The wireframe layout (Aug 2026): the opening stack (pill, date, greeting),
   the most-recent-workshop card, and the Recent Workshops grid down the main
   column; everything else lives in the shared right rail (app/includes/
   rail.php, styled in app-shell.css). The funnel, the monthly trend and the
   Recent/Needs-attention tabs came off the page in that rebuild, and their
   two-hundred-odd lines went with them.

   Everything here is scoped under .dash so it cannot leak into a ported
   section sharing the same region.

   Font sizes use the shared type tokens. The app document restores a 16px root,
   so those tokens paint at their nominal sizes here; the fluid hero clamp below
   stays in px because a ramp is not a scale step.

   If this file drifts back to literals, settle the scale first.
   ============================================================================ */

/* ---- the opening stack ----------------------------------------------------- */

/* Rides .app-hero for the pill and the 48px opening; these rules are only the
   two lines the hero pattern does not have. Two children now, not three: the
   meta row and the greeting. */
.dash__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
}

/* Pill and date on one line. They answer the same question — which product,
   which day — and stacking them spent two full lines of the opening on it. */
.dash__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

/* The date is a timestamp, so it is set like one. It ran at 26px in the italic
   accent voice until Sep 2026, which made it larger than the hero's workshop
   title (--text-h1) and the same size as the grid's section heading: a date
   outweighing the workshop the reader came back to finish. Red is spent on the
   hero band and the phase marks now, not on this. */
.dash__date {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.2;
    color: var(--color-ink-muted, #78716C);
}

/* The greeting is Home's title, at the size the four phase indexes set theirs
   (.app-hero__title, --text-display-lg), so every page in the shell opens at
   one scale. Bill's call, 19 Sep 2026; it shared --text-h2 with the current
   workshop's title before that. The workshop card keeps its size: the red
   surface, white type and action cluster carry its weight. */
.dash__greeting {
    margin: 0;
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-display-lg, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--color-ink, #2C2416);
}

/* ---- up next --------------------------------------------------------------- */

/* The one card on the page that is not white. It carries the single decision
   the dashboard exists to make, so it gets the brand gradient and everything
   else stays paper and ink. */
.dash__hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-6, 24px);
    padding: var(--space-6, 24px) var(--space-5, 20px);
    border-radius: var(--radius-xl, 12px);
    color: var(--text-inverse, #FFFFFF);
    background:
        radial-gradient(90% 150% at 85% -10%, rgba(255, 255, 255, 0.20), transparent 55%),
        linear-gradient(135deg, var(--phase-learn, #E54D4D) 0%, #7F1D1D 100%);  /* ds-lint-disable-line */
}

/* Two soft shapes bled off the top-right corner. Decorative only, and behind
   everything: the text sits on the gradient, never on a highlight.

   z-index is doing real work here, not tidying. Positioned elements at
   z-index:auto paint in DOM order, and ::after comes after the element's own
   children — so without this the second shape lands on top of the title. It
   only shows once the title wraps far enough right to reach it, which is why
   it is invisible on a wide viewport and obvious on a phone. */
.dash__hero::before,
.dash__hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(1px);
    pointer-events: none;
}

.dash__hero::before {
    width: 190px; height: 190px;
    right: 150px; top: -105px;
    border-radius: 50%;
}

.dash__hero::after {
    width: 120px; height: 120px;
    right: 36px; top: 40px;
    /* decorative 120x120 blob; 28px is a shape choice, not a UI radius.
       The scale tops out at 16px and rounding would restyle the art.  ds-lint-disable-next-line */
    border-radius: 28px;
    transform: rotate(18deg);
}

.dash__hero > * { position: relative; z-index: 1; }

.dash__when {
    font-size: var(--text-meta);
    font-weight: var(--font-bold, 700);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.92;
}

/* color stated, not inherited: the global sheet sets a colour on h2 directly,
   and a directly-matching declaration beats an inherited one no matter how
   specific the ancestor. Without this the title renders ink on the gradient. */
/* -0.02em, not a px literal. Every Fraunces heading in the frame is tracked at
   this ratio; written in px it has to be recomputed per size and two of them
   were rounded by eye, so .dash__hero-title and .wl__title sat at -0.023em and
   -0.020em while showing the same 25.6px on the same page. */
.dash__hero-title {
    color: inherit;
    margin: var(--space-1-5, 6px) 0 var(--space-1, 4px);
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-h2);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.dash__stage {
    color: inherit;   /* same reason as the title above */
    margin: 0;
    font-size: var(--text-body);
    opacity: 0.94;
}

/* The text column takes the slack so the actions keep their natural width;
   min-width:0 lets a long workshop title wrap instead of forcing the row wide. */
.dash__hero-body {
    flex: 1;
    min-width: 0;
}

/* Stacked, right-hand column. Each chip fills the column so the two read as a
   pair rather than two differently-sized buttons. */
.dash__hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5, 10px);
    flex-shrink: 0;
}

/* ws_button's secondary variant is drawn for the paper background — on the
   hero's red gradient its ink-on-white would be the only white block on the
   card. Same component, repainted for a dark surface: translucent white fill,
   white border, white label. */
.dash__hero-actions .dash__hero-btn {
    justify-content: flex-start;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--text-inverse, #FFFFFF);
}

.dash__hero-actions .dash__hero-btn:hover,
.dash__hero-actions .dash__hero-btn:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    border-color: var(--bg-surface, #FFFFFF);
    color: var(--text-inverse, #FFFFFF);
}

/* The forward action carries variant primary, and the rule above would flatten
   it back into the outline treatment. On a red ground the emphatic fill is
   solid white with red text, not the button's own red on red. */
.dash__hero-actions .dash__hero-btn.ws-btn--primary {
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--bg-surface, #FFFFFF);
    color: var(--phase-learn-dark, #C73E3E);
}

/* Rest, hover and focus were one rule, so the only emphatic button on the page
   never answered the pointer or the keyboard. The tinted fill is the smallest
   step that still reads against white, and the border stays white so the
   button's outer edge does not move under the cursor. */
.dash__hero-actions .dash__hero-btn.ws-btn--primary:hover,
.dash__hero-actions .dash__hero-btn.ws-btn--primary:focus-visible {
    background: var(--phase-learn-very-light, #FEF2F2);
    border-color: var(--bg-surface, #FFFFFF);
    color: var(--phase-learn-dark, #C73E3E);
}

/* One of these icons is a local SVG and the other is a font glyph (there is no
   co_present asset), and left alone they render at 11px and 24px — visibly
   mismatched side by side. Pin both to the same box. */
.dash__hero-actions .ws-btn__icon,
.dash__hero-actions .ws-btn__icon > * {
    width: 18px;
    height: 18px;
    font-size: var(--text-h2);
    flex-shrink: 0;
}

/* A white focus ring, since the card is red and the component's own ring is
   drawn for the paper background. */
.dash__hero-actions .dash__hero-btn:focus-visible {
    outline: 2px solid var(--text-inverse, #FFFFFF);
    outline-offset: 1px;
}

/* ---- recent workshops ------------------------------------------------------ */

/* --space-8, the same interval .app-hero puts under itself. Two different gaps
   for the same kind of break (32px above the hero, 24px below it) made the
   opening and the hero read as marginally more related than the hero and the
   list, which was nobody's decision. */
.dash__recent {
    margin-top: var(--space-8, 32px);
}

/* ---- empty ----------------------------------------------------------------- */

.dash__empty {
    background: var(--bg-paper, #FAF7F2);
    border: 1px solid var(--gray-200, #E7E5E4);
    border-radius: var(--radius-lg, 8px);
    padding: var(--space-6, 24px);
}

/* ---- first run ------------------------------------------------------------- */

/* ws_task_checklist ships as its own card — white, bordered, padded — which
   inside this panel is a card within a card, and the white undid the paper.
   It drops its chrome here and lets the panel around it be the card. Scoped
   rather than changed at the component: the rail uses the checklist with its
   card chrome on and still wants it. */
.dash__firstrun .ws-task-checklist {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.dash__firstrun {
    max-width: 560px;
}

.dash__firstrun-cta { margin-top: var(--space-5, 20px); }

@media (max-width: 700px) {
    /* Side by side leaves neither column enough room on a phone, so the
       actions go back under the text and sit as a row. */
    .dash__hero {
        display: block;
    }
    .dash__hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: var(--space-4, 16px);
    }
}