/* Messaging — page-scoped styles, owned by the Messaging screen. Every rule hangs off [data-view="messaging"], except the send confirmation, which is portalled to and so carries its own root class (.smsend). Shared primitives live in planner/planner.css and are READ-ONLY from here. Two decisions here: 1. The library is a drawer, and inside it a timeline, not a table. The page belongs to the composer — writing and sending the message is the job — so the twenty-one prepared ones slide in from the right when you go to fetch one, and slide out again once you have. Inside, they read as a schedule: a phase band, then its messages, each with a dot whose colour is its state, the number it would reach and whether it has gone, because "what have we sent, and who is still missing" is what you open it to see. 2. The dry run is a reading screen, not a dense table. The message each guest would actually receive is set at body size in a tinted block, because reading it is the entire point of the step — a 13px truncated cell would defeat the feature it exists to make safe. ─────────────────────────────────────────────────────────────────────── */ [data-view="messaging"] code{background:var(--surface-2);border:1px solid var(--line); padding:.05rem .3rem;border-radius:2px;font-size:.9em} /* "3/21" — the total is context, not the figure */ [data-view="messaging"] .stat b i{font-style:normal;font-size:1rem;color:var(--muted)} /* ── the library drawer ───────────────────────────────────────────────────── A right-hand panel, not a modal: the composer stays where it is and the library slides in beside it, because picking a message is a step in writing one, not a departure from it. Closed, it is `visibility:hidden` — which also takes every row inside it out of the tab order, so a shut drawer cannot be typed into or tabbed through. */ [data-view="messaging"] .lib{position:fixed;inset:0;z-index:50;visibility:hidden; pointer-events:none} [data-view="messaging"] .lib[data-open="true"]{visibility:visible;pointer-events:auto} [data-view="messaging"] .lib__scrim{position:absolute;inset:0;background:rgba(36,27,21,.4); opacity:0;transition:opacity .2s} [data-view="messaging"] .lib[data-open="true"] .lib__scrim{opacity:1} [data-view="messaging"] .lib__card{position:absolute;inset:0 0 0 auto;width:min(30rem,100%); background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column; box-shadow:-24px 0 60px -30px rgba(20,13,9,.7);translate:100% 0;transition:translate .2s ease-out} [data-view="messaging"] .lib[data-open="true"] .lib__card{translate:0 0} [data-view="messaging"] .lib__head{display:flex;gap:var(--s3);align-items:flex-start; justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)} [data-view="messaging"] .lib__head h2{font-size:1.0625rem} [data-view="messaging"] .lib__body{flex:1;overflow-y:auto;overscroll-behavior:contain} [data-view="messaging"] .lib__foot{display:flex;flex-wrap:wrap;gap:var(--s2); padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--surface-2)} /* the placeholder crib and the "this is edited" note under the composer */ /* The crib sits in the top row beside Name and Who-gets-it rather than under the textarea. A name input capped at 34ch and a select at 24ch left most of a wide panel empty, and this is the one thing you actually want to read while writing — so it fills the gap instead of a void doing it. */ [data-view="messaging"] .sms__ph{flex:1 1 22ch;min-width:20ch;max-width:52ch;margin:0} @media (max-width:900px){ [data-view="messaging"] .sms__ph{flex-basis:100%;max-width:none;margin-top:var(--s2)} } [data-view="messaging"] .sms__edited{margin-top:var(--s3);padding:var(--s3); border-radius:3px;background:var(--surface-2)} /* ── the schedule, inside the drawer ────────────────────────────────────── */ [data-view="messaging"] .tl__phase{border-bottom:1px solid var(--line)} [data-view="messaging"] .tl__phase:last-child{border-bottom:0} [data-view="messaging"] .tl__head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4); align-items:baseline;justify-content:space-between;padding:var(--s3) var(--s5); background:var(--surface-2);border-bottom:1px solid var(--line)} [data-view="messaging"] .tl__head h3{font-family:var(--ui);font-size:.6875rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--rust)} [data-view="messaging"] .tl__head .hint{margin-top:.15rem} [data-view="messaging"] .tl__prog{font-size:var(--ft-meta);color:var(--muted);white-space:nowrap; font-variant-numeric:tabular-nums} [data-view="messaging"] .tl__prog.is-done{color:var(--good)} [data-view="messaging"] .tl__list{list-style:none;margin:0;padding:0} /* One layout at every width: this list only ever lives in a drawer 30rem wide at its widest, so the phone shape IS the shape. Name and count on the first line, state under it. */ [data-view="messaging"] .tl__row{display:grid;width:100%;font:inherit;color:inherit;text-align:left; background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer; grid-template-columns:1rem minmax(0,1fr) auto;gap:var(--s1) var(--s3); align-items:center;padding:var(--s3) var(--s5);min-height:var(--h-ctl-lg)} [data-view="messaging"] .tl__list li:last-child .tl__row{border-bottom:0} [data-view="messaging"] .tl__row:hover{background:var(--row-hover)} [data-view="messaging"] .tl__row:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px} /* the one that's open in the composer below */ [data-view="messaging"] .tl__row[aria-current=true]{background:var(--row-active); box-shadow:inset 3px 0 0 var(--rust)} /* the state of a message, said once, in colour */ [data-view="messaging"] .tl__mark{width:9px;height:9px;border-radius:50%;justify-self:center; background:var(--taupe)} [data-view="messaging"] [data-state=done] .tl__mark{background:var(--good)} [data-view="messaging"] [data-state=part] .tl__mark{background:var(--gold)} [data-view="messaging"] [data-state=blocked] .tl__mark{background:var(--bad)} [data-view="messaging"] [data-state=next] .tl__mark{background:var(--rust); box-shadow:0 0 0 4px rgba(163,74,40,.18)} [data-view="messaging"] .tl__what{min-width:0} [data-view="messaging"] .tl__what b{display:block;font-family:var(--display);font-weight:400; font-size:var(--ft-name);line-height:1.25} [data-view="messaging"] .tl__what small{display:block;color:var(--muted);font-size:var(--ft-meta); line-height:var(--lh-ui)} /* how many people it would text right now */ [data-view="messaging"] .tl__num{text-align:right;font-variant-numeric:tabular-nums} [data-view="messaging"] .tl__num b{display:block;font-family:var(--display);font-weight:400; font-size:1.25rem;line-height:1.1} [data-view="messaging"] .tl__num small{display:block;font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} [data-view="messaging"] [data-state=done] .tl__num b{color:var(--muted)} [data-view="messaging"] .tl__state{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center; gap:var(--s2);min-width:0} [data-view="messaging"] .tl__state small{color:var(--muted);font-size:var(--ft-meta)} [data-view="messaging"] .tl__state .pill{margin:0} /* ── the deadlines a wording quotes ─────────────────────────────────────── */ [data-view="messaging"] .sms__dates{margin-top:var(--s5);padding:var(--s3) var(--s4); border:1px solid var(--line);border-radius:2px;background:var(--surface-2)} [data-view="messaging"] .sms__dates.is-missing{border-color:var(--gold);background:#FDFAF0} [data-view="messaging"] .sms__dates ul{list-style:none;margin:.35rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)} [data-view="messaging"] .sms__dates li{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem; font-size:var(--ft-meta)} [data-view="messaging"] .sms__dates li b{font-weight:700} [data-view="messaging"] .sms__dates li b.is-unset{color:var(--bad)} [data-view="messaging"] .sms__dates li small{color:var(--muted)} [data-view="messaging"] .sms__dates .hint{margin-top:var(--s2)} [data-view="messaging"] .sms__run{display:flex;flex-direction:column;gap:var(--s5)} /* the headline number: "Would send to 47, skipping 12" */ [data-view="messaging"] .sms__verdict{font-size:1rem;line-height:var(--lh-ui)} [data-view="messaging"] .sms__verdict b{font-family:var(--display);font-weight:400; font-size:1.5rem;color:var(--rust);font-variant-numeric:tabular-nums; padding-inline:.1em} [data-view="messaging"] .sms__verdict .hint{display:block;margin-top:.15rem} /* why each skipped guest was skipped, counted */ [data-view="messaging"] .sms__reasons{list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)} [data-view="messaging"] .sms__reasons li{font-size:var(--ft-meta);color:var(--muted)} [data-view="messaging"] .sms__reasons b{font-family:var(--display);font-weight:400; font-size:1.05rem;color:var(--ink);margin-right:.25rem;font-variant-numeric:tabular-nums} /* the message as that one person would read it */ /* a message bubble, not a pull-quote: a full hairline box, because what's in it is the literal text of a text message */ [data-view="messaging"] .sms__body{font-size:var(--ft-body);line-height:1.45; white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2); border:1px solid var(--line);padding:var(--s2) var(--s3);border-radius:3px; max-width:42rem} /* the number sits under the name, not flung to the right: .dt .num right-aligns figures in a numeric column, and this is a phone number in an identity cell */ [data-view="messaging"] .dt .who .num{text-align:left} [data-view="messaging"] td[data-col=msg]{padding-block:var(--s3)} [data-view="messaging"] td[data-col=to]{vertical-align:top;padding-top:var(--s3)} [data-view="messaging"] .dt td{height:auto} /* opt-outs */ [data-view="messaging"] .sms__outs{list-style:none;margin:0 0 var(--s5);padding:0} [data-view="messaging"] .sms__outs li{display:flex;flex-wrap:wrap;align-items:center; gap:var(--s2) var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line); font-size:var(--ft-meta)} [data-view="messaging"] .sms__outs li:last-child{border-bottom:0} [data-view="messaging"] .sms__out-who{display:grid;min-width:10rem;flex:1} [data-view="messaging"] .sms__out-who b{font-family:var(--display);font-weight:400; font-size:1.05rem} [data-view="messaging"] .sms__optform{align-items:flex-end} /* the confirmation sheet — narrower than the import modal; it asks one thing */ .smsend .smsend__card{width:min(30rem,100%)} .smsend .modal__body{gap:var(--s4)} .smsend #confirmWord{font-size:1rem;height:var(--h-ctl-lg);letter-spacing:.25em; text-transform:uppercase;font-weight:700} @media (max-width:1023px){ /* the row action is a real target on a touch screen */ [data-view="messaging"] .sms__outs .link-btn{min-height:44px;display:inline-flex; align-items:center} } @media (max-width:767px){ /* the drawer is the whole screen here, and every edge tightens */ [data-view="messaging"] .lib__card{border-left:0} [data-view="messaging"] .lib__head,[data-view="messaging"] .lib__foot, [data-view="messaging"] .tl__head,[data-view="messaging"] .tl__row{ padding-inline:var(--s4)} [data-view="messaging"] .tl__num b{font-size:1.05rem} [data-view="messaging"] .lib__foot .btn{flex:1 1 9rem;height:var(--h-ctl-lg)} } @media (max-width:639px){ /* At 320px the log has one job: who, and what happened. The timestamp and the campaign name are the detail you open the row of the guest for. */ [data-view="messaging"] td[data-col=sent], [data-view="messaging"] th[data-col=sent]{display:none} /* The dry run stops being a table and becomes a list of cards. Two columns in 320px gives the message a 20-character measure, and the message is the whole reason this screen exists — it has to be readable, not squeezed. */ [data-view="messaging"] .dt--sms, [data-view="messaging"] .dt--sms tbody, [data-view="messaging"] .dt--sms tr, [data-view="messaging"] .dt--sms td{display:block;width:auto} [data-view="messaging"] .dt--sms thead{display:none} [data-view="messaging"] .dt--sms tr{padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);cursor:default} [data-view="messaging"] .dt--sms tr:last-child{border-bottom:0} [data-view="messaging"] .dt--sms td{border-bottom:0;padding:0 0 var(--s2)} [data-view="messaging"] .dt--sms td:last-child{padding-bottom:0} [data-view="messaging"] .sms__body{max-width:none;font-size:var(--ft-meta)} [data-view="messaging"] .sms__verdict b{font-size:1.25rem} [data-view="messaging"] .sms__optform .btn{width:100%} .smsend .modal__foot{flex-wrap:wrap} .smsend .modal__foot .btn{flex:1 1 9rem} }