/* S1 visual-language additions (proposal for s1-components.css). Every rule here exists to say something:
 * the comment above each block names what it communicates. No new colors: only --s1-* tokens, and hue only
 * through the existing meaning tokens (late / soon / wait / ok) or ink/mute.
 * Depends on s1-tokens.css, s1-components.css, s1-icons.css. */

:root {
  --s1-icon-gap: 6px;          /* icon ↔ label, everywhere */
  --s1-row-min: 40px;          /* dense list row (desktop) */
  --s1-node: 24px;             /* activity rail system node */
}

/* 1. Section heads: icon + title + tabular count.
 *    Says: what kind of thing this panel holds, and how many, before you read it. The count uses Inter's
 *    tabular figures (no extra font) so columns of counts line up. */
.s1-head-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.s1-head-title > .s1-icon { width: 16px; height: 16px; stroke-width: 2.25; color: var(--s1-ink-2); }
.s1-count { display: inline-block; min-width: 20px; padding: 0 6px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-pill); background: var(--s1-panel); color: var(--s1-ink-2); font: 600 11.5px/18px var(--s1-font-ui); font-variant-numeric: tabular-nums; text-align: center; letter-spacing: 0; }
.s1-tab .s1-count, .s1-tab-count { font-variant-numeric: tabular-nums; }

/* 2. For-you reason glyph. Says: which of the five rules fired, by shape as well as by edge color, so the
 *    reason survives grayscale, color-blindness and forced-colors. The glyph takes the rule's existing tone. */
.s1-status-line-icon { flex: none; width: 20px; height: 20px; stroke-width: 2.1; align-self: flex-start; margin-top: 1px; }
.s1-status-line--late .s1-status-line-icon { color: var(--s1-late); }
.s1-status-line--wait .s1-status-line-icon { color: var(--s1-wait); }
.s1-status-line--soon .s1-status-line-icon { color: var(--s1-soon); }
.s1-status-line--new .s1-status-line-icon { color: var(--s1-ink); }
.s1-status-line--clear .s1-status-line-icon { color: var(--s1-mute); }
/* Same glyph inline at 14px for list rows ("For you" sentence on Home / My Projects). */
.s1-reason { display: inline-flex; align-items: flex-start; gap: var(--s1-icon-gap); font-weight: 700; }
.s1-reason > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; margin-top: 3px; }
.s1-reason--late { color: var(--s1-late); } .s1-reason--wait { color: var(--s1-wait); } .s1-reason--soon { color: var(--s1-soon); }
.s1-reason--new { color: var(--s1-ink); } .s1-reason--clear { color: var(--s1-mute); font-weight: 600; }

/* 3. Phase stepper markers. Says: done / here / not yet by shape, not only by bar fill and weight.
 *    Done = check, current = target dot, upcoming = no mark, paused = pause. No hue anywhere. */
.s1-step-mark { width: 12px; height: 12px; stroke-width: 2.75; margin-right: 3px; vertical-align: -1px; }
.s1-stepper > .is-done .s1-step-mark { color: var(--s1-ink-2); }
.s1-stepper > .is-current .s1-step-mark { color: var(--s1-ink); }
.s1-stepper > .is-current .s1-step-label:has(.s1-step-mark)::after { content: none; }   /* the mark replaces " ●" */
.s1-step.is-paused .s1-step-mark { color: var(--s1-mute); }
.s1-stepper-caption > .s1-icon { width: 12px; height: 12px; stroke-width: 2.75; margin-right: 4px; vertical-align: -1px; }

/* 4. Phase small multiple (lists: Home, My Projects, Manage). Says: how far along, comparable row to row. */
.s1-phasebar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; width: 100%; max-width: 160px; }
.s1-phasebar > i { height: 6px; border-radius: 2px; background: var(--s1-track); }
.s1-phasebar > i.is-done, .s1-phasebar > i.is-current { background: var(--s1-ink); }
.s1-phasebar > i.is-current { box-shadow: 0 0 0 1.5px var(--s1-panel), 0 0 0 2.5px var(--s1-ink); } /* ring: "here" */
.s1-phasebar-label { margin-top: 5px; font: 600 12.5px/1.3 var(--s1-font-ui); color: var(--s1-ink-2); }

/* 5. Avatars. Says: who — a real photo when one was uploaded, neutral initials otherwise; you are ink.
 *    Role badge says the two roles that change what you do (PI signs off, lead runs the work). */
.s1-avatar { position: relative; }
.s1-avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.s1-avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.s1-avatar > img { display: block; }
.s1-avatar-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--s1-panel); box-shadow: 0 0 0 1px var(--s1-line); color: var(--s1-ink-2); }
.s1-avatar-badge > .s1-icon { width: 12px; height: 12px; stroke-width: 2.6; }
.s1-avatar-more { background: var(--s1-panel); box-shadow: 0 0 0 1px var(--s1-line) inset; color: var(--s1-ink-2); font-variant-numeric: tabular-nums; }

/* 6. File-type tile. Says: what kind of document before you read its name. Neutral, never brand color. */
.s1-filetile { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--s1-line); border-radius: 8px; background: var(--s1-panel-head); color: var(--s1-ink-2); }
.s1-filetile > .s1-icon { width: 16px; height: 16px; }
.s1-filetile--lg { width: 44px; height: 44px; border-radius: 10px; }
.s1-filetile--lg > .s1-icon { width: 22px; height: 22px; stroke-width: 2; }
.s1-filetile--rail { border: 0; background: var(--s1-rail); color: var(--s1-on-ink); }   /* the one Drive bar tile */
.s1-filerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s1-filerow-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.s1-filerow-sub { display: block; font: 400 var(--s1-text-small)/1.4 var(--s1-font-ui); color: var(--s1-mute); }

/* 7. Activity rail (Updates). Says: this is a sequence in time, people speak loudly, the system whispers.
 *    Human posts hang off the rail by their avatar; system events are small hollow nodes with a mute glyph,
 *    folded into one row by default. */
.s1-activity { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.s1-activity::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 1px; background: var(--s1-line); }
.s1-activity-item { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.s1-activity-item:last-child { padding-bottom: 0; }
.s1-activity-item > .s1-avatar { box-shadow: 0 0 0 3px var(--s1-panel); }
.s1-activity-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.s1-activity-meta { font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1-activity-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 var(--s1-text-small)/1.4 var(--s1-font-ui); color: var(--s1-ink-2); }
.s1-activity-link > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; color: var(--s1-mute); }
.s1-activity-item--system { align-items: center; padding-bottom: 10px; font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1-activity-node { flex: none; display: grid; place-items: center; width: var(--s1-node); height: var(--s1-node); margin: 0 5px; border: 1px solid var(--s1-line); border-radius: 50%; background: var(--s1-panel); color: var(--s1-mute); }
.s1-activity-node > .s1-icon { width: 12px; height: 12px; stroke-width: 2.75; }
.s1-activity-item--system b { color: var(--s1-ink-2); font-weight: 600; }
.s1-activity-item--pinned .s1-activity-pin { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--s1-text-micro)/1.4 var(--s1-font-ui); color: var(--s1-ink-2); }
.s1-activity-item--pinned .s1-activity-pin > .s1-icon { width: 12px; height: 12px; stroke-width: 2.75; }

/* 8. Empty states. Says: this is empty on purpose and here is the one thing to do — a line-illustration glyph
 *    in a neutral disc, one honest sentence, one action. The glyph names what is missing. */
.s1-empty-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--s1-panel-head); box-shadow: inset 0 0 0 1px var(--s1-line-soft); color: var(--s1-mute); }
.s1-empty-icon > .s1-icon { width: 20px; height: 20px; stroke-width: 2.1; }
.s1-empty-text { flex: 1 1 180px; min-width: 0; }
.s1-empty--stack { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; gap: 10px; }
.s1-empty--stack .s1-empty-text { max-width: 46ch; }

/* 9. Meta rows (header meta, task meta, This week). Says: what each fact is (area, Drive, place, time). */
.s1-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.s1-meta-item > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; color: var(--s1-mute); }
.s1-task-due > .s1-icon { width: 12px; height: 12px; stroke-width: 2.75; margin-right: 3px; vertical-align: -1px; }

/* 10. Live feedback. Says: saving / saved / failed by glyph as well as color; green stays transient. */
.s1-live { display: inline-flex; align-items: center; gap: 5px; }
.s1-live > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; }

/* 11. Type glyph column for agenda rows (This week, Work calendar). Says: task vs key date vs meeting. */
.s1-typeglyph { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--s1-line-soft); background: var(--s1-panel); color: var(--s1-ink-2); }
.s1-typeglyph > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.s1-typeglyph--soon { color: var(--s1-soon); }
.s1-typeglyph--late { color: var(--s1-late); }

@media (max-width: 640px) {
  .s1-activity::before { left: 16px; }
  .s1-empty--stack { padding: 18px 14px; }
}

/* Status-line text block: takes the row, but lets the action wrap under it at phone width instead of
 * squeezing the sentence into a one-word column. */
.s1-status-line-body { flex: 1 1 220px; min-width: 0; }

/* Update reply thread + Seen (project Activity / Updates) */
.s1-thread { list-style: none; margin: var(--s1-space-2, 8px) 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--s1-line, currentColor); display: grid; gap: 8px; }
.s1-thread-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.s1-reply summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.s1-reply summary::-webkit-details-marker { display: none; }
.s1-reply form { display: grid; gap: 8px; margin-top: 8px; min-width: min(100%, 320px); }