/* =====================================================================
   public/app/status.css: the dot and its word (the owner, 21 October 2026: the status-dots design, "all yes")

   How a state is drawn everywhere a list says where something stands (Customers, Invoices and Quotes, Bookings, Home's
   Needs you, the Inbox): a small dot and the state's word, never a filled chip. The idea is Solid Glass's Invoices card
   (MIT, github.com/deeplethe/solid-glass): "hue only for how each one went: a dot, never a coloured row". Colour.css
   names the four hues and says what each means; the tokens are --st-*. status.js writes the markup.

     .sdot            the dot and its word, in the second ink: nothing is asked of the owner
     .sdot.hollow     a hollow ring: not sent yet (Draft, Made, not sent)
     .sdot.firm       the word takes the hue's ink, a little firmer (500, never bold): it needs the owner, and one tap
                      fixes it, so a quiet .btn-sub (.row-do) sits beside it
     .sdot.pill       a soft tinted pill: it needs the owner but the row's action is elsewhere (Customers' "Needs you")

   Lime and purple are for the button to press and never for a state. Every state keeps its word; the dot is never the
   only cue. Weights stay 400 and 500 (600 is for a section's lead and a title).
   ===================================================================== */
.sdot{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-sm);font-weight:400;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow-wrap:normal;word-break:normal} /* a state word is never broken or cut: a sheet that lets long words break anywhere must not shrink it */
.sdot>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-off)}
.sdot.ok>i{background:var(--st-ok)}
.sdot.you>i{background:var(--st-you)}
.sdot.err>i{background:var(--st-err)}
.sdot.hollow>i{background:none;box-shadow:inset 0 0 0 1.5px var(--st-off)}
.sdot.firm{font-weight:500}
.sdot.firm.you{color:var(--you-ink)}
.sdot.firm.err{color:var(--err-ink)}
.sdot.pill{height:24px;padding:0 10px 0 9px;border-radius:999px;font-weight:500}
.sdot.pill>i{width:6px;height:6px}
.sdot.pill.you{background:var(--st-you-wash);color:var(--you-ink)}
.sdot.pill.err{background:var(--st-err-wash);color:var(--err-ink)}
/* a word that is cut (a narrow column) keeps its dot */
.sdot.cut{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* the one action beside a state: the dashboard's own quiet button (.btn-sub, app.css: 32 to see, and a phone gets its
   44 from the invisible edge), a little shorter in a wide row where every other button is 28 */
@media (min-width:721px) and (pointer:fine){.btn-sub.row-do{height:28px}}
.btn-sub.row-do svg.i{width:14px;height:14px}

/* a meter, in Solid Glass's Storage style: "905 of 1,000 used" over a thin bar. Grey while there is room, amber from
   80% (the owner is e-mailed then too), coral when it has stopped. The bar is never lime: lime is for the button. */
.sd-bar{display:block;height:4px;border-radius:999px;background:var(--st-track);overflow:hidden}
.sd-bar>i{display:block;height:100%;border-radius:999px;background:var(--st-bar)}
.sd-bar.is-warn>i{background:var(--st-you)}
.sd-bar.is-out>i{background:var(--st-err)}