:root{ /* ---------- WhipCount (2.131.0) ---------- The palette of the design canvas (WhipCount User Management) and the brand kit: navy ground for the furniture, white cards on a light gray page, Inter throughout, mint for the one thing on a screen somebody is meant to press. */ --navy:#0F2D4A; --navy-2:#16395C; --navy-soft:#EAF0F6; --mint:#4ADE80; --mint-ink:#15803D; --ground:#F3F4F6; --surface:#FFFFFF; --surface-2:#F8FAFC; --ink:#0F2D4A; --ink-2:#334155; --ink-3:#5B6B7D; --rule:#CBD2DA; --rule-2:#E5E7EB; --civic:#2563EB; --civic-ink:#1D4ED8; --civic-soft:#EAF1FE; /* The header bar and the phone menu: navy, with white on it. */ --boyd:#0F2D4A; --boyd-ink:#FFFFFF; /* The whip count. Firm yes is mint and a lean is mint at 45%; persuadable is violet; opposed is red and a lean against is red at 45% (red for opposed was asked for on 2026-10-08, the brand kit had slate). Persuadable was gray until the same day, when a color that stands out and still reads as the middle was asked for: violet, because a swing district is purple, and because nothing else in the app is violet -- amber is attention, blue is a link or a mention. These are FILLS -- mint on white is unreadable as type, so a word in a position's color takes its -ink. */ --sup:#4ADE80; --lsup:#AEF0C6; --pers:#A78BFA; --lopp:#EF9D9D; --opp:#DC2626; --unk:#64748B; --nomeet:#CBD2DA; --sup-ink:#15803D; --opp-ink:#B42318; --pers-ink:#6D28D9; /* Attention, in amber: a follow-up owed, a requirement gained, a forecast. Its own ink, never --pers-ink: the two shared a value while persuadable was amber, and seven places that meant attention were written with the persuadable name, so they would have turned violet. */ --warn:#B45309; --warn-ink:#92400E; --warn-bg:#FFFBEB; --warn-rule:#F3D9A4; --ok:#15803D; --bad:#B42318; --danger:#B42318; --wash:#F8FAFC; --muted:#475569; --rail:264px; --band:68px; --shadow:0 1px 2px rgba(15,45,74,.06), 0 10px 28px -14px rgba(15,45,74,.22); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--ground); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:inherit;font-weight:800;letter-spacing:-.015em;margin:0} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} a{color:var(--civic)} :focus-visible{outline:2px solid var(--civic);outline-offset:2px;border-radius:3px} .tnum{font-variant-numeric:tabular-nums} /* ---------- shell ---------- */ .shell{display:flex;min-height:100vh} .rail{ width:var(--rail);flex:0 0 var(--rail);background:var(--ink);color:#DCE5EA; display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto; } .rail-top{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)} /* ---------- the corporate mark ---------- Clear space the width of the letter B, which the brand sheet gives as the rule: the B is about a fifth of the mark's width, so a fifth of its height all round keeps it honest at any size. The mark is never stretched — the height is set and the width follows. */ /* The photograph a state has chosen, shown beside the way to change it so nobody has to guess which picture is in use. */ .artnow{display:flex;align-items:center;gap:10px;margin:4px 0 8px} .artthumb{display:block;width:72px;height:44px;border-radius:5px;flex:none; background-size:cover;background-position:center;border:1px solid var(--rule-2)} .artpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .artpick .hint{flex:1;min-width:220px} /* The mark is a way home, so it is a button -- but it must look exactly like the image it wraps and nothing like a control. The margin moves onto the button so the mark sits where it always did. */ .brandhome{display:block;padding:0;border:0;background:none;cursor:pointer; margin:0 0 10px;border-radius:3px;-webkit-tap-highlight-color:transparent} .brandhome:hover{opacity:.82} .brandhome:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px} .brandhome .boyd{margin:0} .boyd{display:block;height:20px;width:auto;margin:0 0 10px} .boyd-light{display:none} .drawer-h .boyd{height:18px;margin-bottom:8px} .rail-mark{font-family:inherit;font-size:26px;line-height:1;font-weight:700;color:#fff} .rail-sub{font-size:11.5px;color:#8CA2AE;margin-top:5px;line-height:1.4} .rail-conf{margin-top:10px;display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em; color:#F0C36A;border:1px solid rgba(240,195,106,.4);padding:2px 6px;border-radius:3px} .rail-nav{padding:10px 10px;flex:1} .navitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0; color:#B7C6CE;padding:9px 11px;border-radius:6px;cursor:pointer;font-size:13.5px;font-weight:500} .navitem:hover{background:rgba(255,255,255,.07);color:#fff} .navitem[aria-current="page"]{background:var(--civic);color:#fff} .navitem .ct{margin-left:auto;font-size:11px;color:#8CA2AE;font-variant-numeric:tabular-nums} .navitem[aria-current="page"] .ct{color:#CBDCF0} .navitem .nl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navicon{width:16px;height:16px;flex:0 0 16px;opacity:.9} .rail-foot{padding:12px 14px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;color:#8CA2AE} .live{display:flex;align-items:center;gap:8px;margin-bottom:9px;color:#B7C6CE} .dot{width:8px;height:8px;border-radius:50%;background:#3FBF9E;flex:0 0 8px} .dot.on{animation:pulse 2.4s ease-in-out infinite} .dot.off{background:#6D818C;animation:none} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}} .rail-foot select{background:#22333E;border:1px solid rgba(255,255,255,.16);color:#DCE5EA;border-radius:5px; padding:4px 6px;font-size:11.5px;width:100%;margin-top:2px} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{background:var(--surface);border-bottom:1px solid var(--rule);padding:14px 26px; display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:20} /* The title gives, so the bar does not. It used to hold its full width — a page name and a crumb as long as "Live whip count - Boyd Gaming - Government Affairs" — and the search box and the page's own buttons were pushed to a second row beneath it. Now the title takes what is left and ends in an ellipsis, which is the right thing to lose: the page name is also the biggest thing on the page behind it. */ /* Shrink, but never grow. Growing was worse than holding: the title took all the free space and pushed the search and the buttons to a second row by itself. */ .topbar-title{flex:0 1 auto;min-width:0} .topbar h1{font-size:25px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .crumb{font-size:12px;color:var(--ink-3);margin-bottom:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .page{padding:22px 26px 60px;max-width:1500px;width:100%;zoom:var(--zoom)} /* ---------- controls ---------- */ .btn{background:var(--surface);border:1px solid var(--rule);color:var(--ink);padding:7px 13px;border-radius:6px; cursor:pointer;font-weight:500;font-size:13px;white-space:nowrap} .btn:hover{border-color:#B9C4CB;background:var(--surface-2)} .btn.primary{background:var(--civic);border-color:var(--civic);color:#fff} .btn.primary:hover{background:#16406F} .btn.danger{color:var(--bad);border-color:#E3C4C0} .btn.danger:hover{background:#FBF2F1} .btn.sm{padding:4px 9px;font-size:12px} .btn:disabled{opacity:.45;cursor:not-allowed} .field{display:flex;flex-direction:column;gap:4px;min-width:0} .field > label{font-size:11.5px;color:var(--ink-2);font-weight:600} input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],input[type=tel], input[type=search],input[type=password],select,textarea{ background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:7px 9px; width:100%;min-width:0;max-width:100%;box-sizing:border-box} /* Safari and Chrome give date and time controls a wide intrinsic size that ignores the box they are in. */ input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0} input[type=date]::-webkit-date-and-time-value{text-align:left;min-width:0} input[type=date]::-webkit-calendar-picker-indicator{margin-left:0;padding-left:2px} .field{max-width:100%} .phase-card{min-width:0} .phase-card input,.phase-card select,.phase-card textarea{max-width:100%} textarea{resize:vertical;min-height:64px;line-height:1.5} input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-3)} .switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none} .switch input{position:absolute;opacity:0;width:0;height:0} .track{width:38px;height:21px;border-radius:11px;background:#C3CDD4;position:relative;transition:background .15s;flex:0 0 38px} .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%; background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)} .switch input:checked + .track{background:var(--sup)} .switch input:checked + .track::after{transform:translateX(17px)} /* Small variant. Track, knob and travel are set together; overriding only the track width leaves the knob sliding out past its end and onto the label. */ .switch.sm .track{width:30px;height:17px;flex:0 0 30px;border-radius:9px} .switch.sm .track::after{width:13px;height:13px} .switch.sm input:checked + .track::after{transform:translateX(13px)} .switch.sm > span:last-child{font-size:12.5px} .switch input:focus-visible + .track{outline:2px solid var(--civic);outline-offset:2px} /* ---------- cards ---------- */ .card{background:var(--surface);border:1px solid var(--rule);border-radius:8px} .card-h{padding:13px 16px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .card-h h2{font-size:17px} /* **A row that pairs prose with controls must be able to wrap, because only the prose can shrink** -- the rule 2.193.5 settled for `.att-row`, arriving on the card header. The header already wraps; what did not was the group of buttons on its right, so its min-content was the sum of every button in it (317 points on the backups card) and the whole header could not go narrower than that. Found at Larger on a 390 point phone, where the page lays out in 300 (2.199.0) -- and it is older than that setting, since any screen narrow enough reaches it. The prose takes a basis rather than a width query, the `.att-row` answer: the question is how much room this row has, not which tier it is in. */ .card-h .note{font-size:12px;color:var(--ink-3);font-weight:400;flex:1 1 180px;min-width:0} .card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .card-b{padding:16px} .grid{display:grid;gap:16px} .sect{margin-bottom:18px} /* ---------- hero: chamber floor ---------- */ .floor{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:1050px){.floor{grid-template-columns:1fr}} .chamber-head{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;flex-wrap:wrap} .chamber-head h3{font-size:19px} .chamber-head .of{font-size:12px;color:var(--ink-3)} .tally{font-family:inherit;font-size:58px;line-height:.9;font-weight:700; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .tally small{font-size:20px;font-weight:500;color:var(--ink-3);margin-left:5px} .goalbar{position:relative;height:26px;background:var(--surface-2);border:1px solid var(--rule); border-radius:4px;overflow:hidden;margin-top:12px} .goalbar .seg{position:absolute;top:0;bottom:0;left:0} .goalmark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);z-index:3} .goalmark span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px; font-weight:700;color:var(--ink);white-space:nowrap;background:var(--surface);padding:0 4px} .goallegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--ink-2)} .goallegend b{font-weight:600} .seats{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px} .seat{width:19px;height:19px;border-radius:3px;border:1px solid rgba(0,0,0,.09);cursor:pointer;padding:0} .seat:hover{transform:scale(1.22);z-index:2;position:relative} /* The square whose name is up. On a touch screen the hover scale is off and this is what says which of the three squares under the bubble it is about. At top level rather than in the hover:none block, because tests/cascade.js cannot read a hover query and the class is only ever put on by a tap. */ .seat.armed{transform:scale(1.22);z-index:2;position:relative; box-shadow:0 0 0 2px var(--ink)} .seat.inactive{opacity:.32} .seatkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:11.5px;color:var(--ink-2)} .seatkey span{display:inline-flex;align-items:center;gap:5px} .swatch{width:11px;height:11px;border-radius:2px;display:inline-block;border:1px solid rgba(0,0,0,.1)} /* ---------- stat tiles ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px} .tile{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:13px 15px;position:relative} .tile .lab{font-size:11.5px;color:var(--ink-2);font-weight:600;line-height:1.35;min-height:31px} .tile .val{font-family:inherit;font-size:36px;font-weight:700;line-height:1; font-variant-numeric:tabular-nums;margin:4px 0 3px} .tile .sub{font-size:11.5px;color:var(--ink-3)} .tile .kill{position:absolute;top:7px;right:7px;border:0;background:none;color:var(--ink-3);cursor:pointer; font-size:15px;line-height:1;padding:2px 5px;border-radius:4px;opacity:0} .tile:hover .kill{opacity:1} .tile .kill:hover{background:#FBF2F1;color:var(--bad)} .tile.add{border-style:dashed;display:flex;align-items:center;justify-content:center;cursor:pointer; color:var(--ink-3);font-weight:600;min-height:104px;background:transparent} .tile.add:hover{border-color:var(--civic);color:var(--civic);background:var(--civic-soft)} /* ---------- tables ---------- */ .tw{overflow:auto;max-width:100%} table{border-collapse:collapse;width:100%;font-size:13px} th{text-align:left;font-weight:600;color:var(--ink-2);font-size:11.5px;padding:8px 11px; border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1} th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--civic)} td{padding:8px 11px;border-bottom:1px solid var(--rule-2);vertical-align:top} tbody tr:hover{background:var(--surface-2)} tr.inactive td{color:var(--ink-3)} tr.inactive td .lname{text-decoration:line-through;text-decoration-thickness:1px} .lname{font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left;font-size:13px} .lname:hover{color:var(--civic);text-decoration:underline} /* A word inside a sentence that goes somewhere. A button, because it moves within the app rather than following an address, and it has to read as part of the line it sits in rather than as a control beside it. */ .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--civic); text-decoration:underline;text-underline-offset:2px;cursor:pointer} .linkbtn:hover{color:var(--civic-ink,var(--civic));text-decoration-thickness:2px} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} .empty{padding:34px 16px;text-align:center;color:var(--ink-3)} .empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;font-family:inherit;} /* ---------- pills ---------- */ .pill{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11.5px;font-weight:600; border:1px solid transparent;white-space:nowrap} .pill.sm{font-size:10.5px;padding:1px 6px} .chip{display:inline-block;background:var(--surface-2);border:1px solid var(--rule);border-radius:4px; padding:1px 6px;font-size:11px;font-weight:600;color:var(--ink-2);margin-right:3px} .tier1{background:#FBEAE7;color:#8E3125;border-color:#EFCCC6} .tier2{background:#FBF2E0;color:#8A5D0B;border-color:#EDDCB6} .tier3{background:var(--surface-2);color:var(--ink-3);border-color:var(--rule)} .bar{height:7px;background:var(--rule-2);border-radius:4px;overflow:hidden;min-width:56px} .bar > i{display:block;height:100%;border-radius:4px} /* ---------- filter bar ---------- */ .filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end} .filters .field{min-width:130px} .filters input[type=text]{min-width:190px} .count-note{font-size:12px;color:var(--ink-3);margin-left:auto;align-self:center} /* ---------- timeline track ---------- */ .track-wrap{overflow-x:auto;padding-bottom:6px} .mtrack{display:flex;gap:3px;min-width:640px} .mseg{flex:1;min-width:56px} .mseg .cap{height:9px;border-radius:2px;background:var(--nomeet)} .mseg .n{font-family:inherit;font-weight:700;font-size:13px;margin-top:7px} .mseg .nm{font-size:11px;line-height:1.35;color:var(--ink-2);margin-top:1px} .mseg .dt{font-size:10.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums} .phasebar{display:flex;gap:3px;min-width:640px;margin-bottom:7px} .phasebar div{font-size:10.5px;font-weight:700;color:var(--ink-2);border-left:2px solid var(--rule);padding-left:5px} /* ---------- detail / contact page ---------- */ .detail-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .avatar{width:56px;height:56px;border-radius:8px;background:var(--ink);color:#fff;display:flex; align-items:center;justify-content:center;font-family:inherit;font-size:23px;font-weight:700;flex:0 0 56px} /* minmax(0,1fr) rather than 1fr: a plain 1fr refuses to go below the content's own minimum, and a date input's intrinsic width then pushes it past the edge. */ .cols2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px} .cols3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px} @media(max-width:900px){.cols2,.cols3{grid-template-columns:1fr}} .kv{display:grid;grid-template-columns:150px 1fr;gap:7px 12px;font-size:13px} .kv dt{color:var(--ink-2);font-weight:600;font-size:12px} .kv dd{margin:0} .notebox{background:var(--surface-2);border:1px solid var(--rule-2);border-left:3px solid var(--nomeet); border-radius:0 6px 6px 0;padding:10px 12px;font-size:13px;white-space:pre-wrap;line-height:1.55} .phase-card{border:1px solid var(--rule);border-radius:7px;padding:12px} .phase-card h4{font-size:14px;margin-bottom:9px;display:flex;align-items:center;gap:7px} /* ---------- modal ---------- */ /* Above the sign-in screen, which covers the page at 200. A dialog opened from there — resetting a forgotten password — was rendering correctly and sitting behind it, so the button looked like it did nothing. */ .scrim{position:fixed;inset:0;background:rgba(23,38,47,.5);z-index:260;display:flex;align-items:flex-start; justify-content:center;padding:36px 16px;overflow-y:auto} .modal{background:var(--surface);border-radius:10px;box-shadow:var(--shadow); width:100%;max-width:620px;overflow:hidden;zoom:var(--zoom); /* Taller than the screen, the body scrolls and the footer stays put, so what a dialog offers is always reachable however long it is. */ display:flex;flex-direction:column;max-height:calc(92vh / var(--zoom))} .modal-b{overflow-y:auto;flex:1 1 auto} .modal-f{flex:0 0 auto} .modal.wide{max-width:900px} .modal-h{padding:15px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px} .modal-h h2{font-size:19px} .modal-h .x{margin-left:auto;background:none;border:0;font-size:21px;cursor:pointer;color:var(--ink-3); line-height:1;padding:2px 7px;border-radius:5px} .modal-h .x:hover{background:var(--surface-2);color:var(--ink)} .modal-b{padding:18px;display:grid;gap:13px;max-height:calc(66vh / var(--zoom));overflow-y:auto} /* The footer wraps. A dialog with five things to do — delete, send a reset, hand over the work, cancel, save — laid them in one row that was wider than the dialog, and the first of them went off the edge with no way to reach it. What can be undone sits right; what cannot sits left, away from Save. */ .modal-f{padding:13px 18px;border-top:1px solid var(--rule);display:flex;gap:9px; justify-content:flex-end;flex-wrap:wrap;align-items:center; background:var(--surface-2)} .modal-f .btn.danger{margin-right:auto} @media (max-width:560px){ /* On a phone they stack rather than shuffling into an order nobody meant. */ .modal-f{flex-direction:column-reverse;align-items:stretch} .modal-f .btn{width:100%} .modal-f .btn.danger{margin-right:0} } .hint{font-size:11.5px;color:var(--ink-3);line-height:1.45} /* The roster and the bill tracker on a phone: a card per row. */ .lm-card[data-inactive]{opacity:.72} .lm-card .who{justify-content:space-between} .lm-card .mm-owner{margin-left:8px} /* What the number above the roster is counting, said plainly. */ .lm-note{margin:2px 4px 10px;font-size:12.5px;line-height:1.45} .lm-sort{margin-left:auto;display:inline-flex;align-items:center} .lm-sort select{font:inherit;font-size:14px;height:44px;padding:0 12px;border-radius:22px; border:1px solid var(--rule);background:var(--surface);color:var(--ink)} /* The member page on a phone opens with a briefing. */ .brief .brief-sec + .brief-sec{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2)} .brief-q{margin:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700} .brief-row{padding:3px 0} .brief-take{white-space:pre-line;margin-top:4px} .brief-take.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .brief-fu{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0} .brief-fu + .brief-fu{border-top:1px solid var(--rule-2)} .brief-fu.late b{color:#B42318} /* What can be done from the briefing (2.189.0): two across, a full thumb high, the call first and filled because it is the one most often meant. An odd last one takes the row. */ .brief-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px} .brief-act{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px; border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--civic); font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer} .brief-act:first-child{background:var(--navy);border-color:var(--navy);color:#fff} .brief-acts .brief-act:last-child:nth-child(odd){grid-column:1 / -1} .brief-act:focus-visible{outline:2px solid var(--civic);outline-offset:2px} #brief-log{margin-top:16px;width:100%} /* Choosing a bill on a phone: a search and a short list of taps. */ .mm-billsearch{margin-top:10px} .mm-billpick{display:flex;flex-direction:column;gap:6px;margin-top:8px} .mm-billopt{display:flex;gap:8px;align-items:baseline;text-align:left;padding:11px 12px;border-radius:10px; border:1px solid var(--rule);background:var(--surface,#fff);color:var(--ink);font:inherit;cursor:pointer} .mm-billopt span{flex:1;color:var(--ink-2);font-size:13px} .mm-billopt small{color:var(--ink-3);font-size:11px} /* A meeting that did not save, and one kept from before a reload. Both stay on screen until they are dealt with. */ .mm-unsaved{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#FDECEA; color:#7A1C12;display:flex;gap:10px;align-items:center;justify-content:space-between;font-weight:600} .mm-unsaved .mm-go{flex:0 0 auto;width:auto;padding:9px 16px} /* Not saved, and staying said. Above the bar along the bottom on a phone, out of the corner on a desk. */ .unsaved{position:fixed;left:12px;right:12px;bottom:calc(var(--mm-rail, 0px) + 12px);z-index:70; display:flex;align-items:center;justify-content:center;gap:8px; padding:13px 14px;border:0;border-radius:12px;cursor:pointer; background:var(--bad);color:#fff;font-size:14px;font-weight:600;font-family:inherit; box-shadow:0 8px 22px rgba(168,58,46,.35)} .unsaved:disabled{opacity:.8;cursor:default} .unsaved[hidden]{display:none} @media(min-width:701px){.unsaved{left:auto;right:18px;bottom:18px;min-width:300px}} /* The deploy notice (2.188.0). Its own prefixed names -- a stylesheet shares one namespace (2.153.2, 2.183.0) and a bare `.newbar` or `.ver` is how the next collision happens. Sits where `.unsaved` sits and never at the same time as it, so the two cannot stack: the one state where this would overlap is the one where it is hidden. */ .newver{position:fixed;left:12px;right:12px;bottom:calc(var(--mm-rail, 0px) + 12px); z-index:69;display:flex;align-items:center;gap:10px; padding:11px 12px;border-radius:12px;border:1px solid var(--rule-2); background:var(--surface-1);color:var(--ink-1);font-size:13.5px; box-shadow:0 8px 22px rgba(23,38,47,.18)} .newver[hidden]{display:none} .newver #newver-say{flex:1;min-width:0} .newver .newver-x{border:0;background:none;color:var(--ink-3);font-family:inherit; font-size:12.5px;cursor:pointer;padding:6px 2px;text-decoration:underline} @media(min-width:701px){.newver{left:auto;right:18px;bottom:18px;min-width:320px}} /* A page that is easier at a desk says so, once, at the top. */ .desk-note{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--surface-2); color:var(--ink-2);font-size:12.5px;border:1px solid var(--rule-2)} .mm-resume{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--civic-soft);color:var(--ink)} .mm-resume p{margin:0 0 10px;font-weight:600} .mm-resume .mm-go{width:auto;padding:9px 16px} /* The state's own mailbox: room between the groups of fields. */ .pm-grid{margin-top:12px} .pm-grid > * + *{margin-top:12px} /* A position changed on the bill page and not yet applied. */ tr.bp-changed td{background:rgba(11,74,136,.12)} tr.bp-changed td:first-child{box-shadow:inset 3px 0 0 var(--civic)} /* ---------- query page ---------- */ .sqlbox{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;min-height:112px; background:#12212A;color:#D8E4EA;border-color:#2C3D48;line-height:1.6;tab-size:2} .schema{font-size:12px;line-height:1.7} .schema b{font-family:inherit;font-size:14px} .schema code{background:var(--surface-2);border:1px solid var(--rule-2);border-radius:3px;padding:0 4px;font-size:11.5px} .rulebar{display:grid;grid-template-columns:1fr 150px 1fr 34px;gap:8px;align-items:center;margin-bottom:8px} @media(max-width:760px){.rulebar{grid-template-columns:1fr}} .err{background:#FBF2F1;border:1px solid #EFCCC6;color:#8E3125;padding:10px 12px;border-radius:6px;font-size:12.5px; font-family:ui-monospace,Menlo,monospace;white-space:pre-wrap} .ok-msg{background:#EAF5F2;border:1px solid #C2DFD8;color:#0B5B50;padding:10px 12px;border-radius:6px;font-size:12.5px} /* ---------- toast ---------- */ /* Above everything, including the sign-in screen. A message shown while somebody is resetting a password was appearing behind it. */ #toasts{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px} .toast{background:var(--ink);color:#fff;padding:10px 15px;border-radius:7px;font-size:13px;box-shadow:var(--shadow); max-width:340px} .toast.bad{background:var(--bad)} tr.justadded{animation:flashrow 5s ease-out} tr.justadded td:first-child{box-shadow:inset 3px 0 0 var(--sup)} @keyframes flashrow{0%{background:#DFF1EC}60%{background:#DFF1EC}100%{background:transparent}} #modal-error:empty{display:none} #modal-error{margin-bottom:2px} /* ---------- session countdown strip ---------- */ .datestrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .datestrip::-webkit-scrollbar{height:6px} .datestrip::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px} .datecard{flex:0 0 auto;min-width:150px;text-align:left;background:var(--surface); border:1px solid var(--rule);border-radius:8px;padding:10px 13px;font:inherit;color:inherit; cursor:pointer} .datecard:hover{border-color:#B9C4CB} .datecard.next{border-color:var(--civic);background:var(--civic-soft);box-shadow:inset 0 -3px 0 var(--civic)} .datecard.past{opacity:.5} .datecard.summary{cursor:default;border-left:3px solid var(--ink);margin-left:4px} .datecard.summary:hover{border-color:var(--rule);border-left-color:var(--ink)} .dc-lab{font-size:11.5px;color:var(--ink-2);font-weight:600;white-space:nowrap} .dc-date{font-family:inherit;font-size:22px;font-weight:700;line-height:1.15} .dc-days{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} /* ---------- pinned bill cards: both chambers, gate by gate ---------- */ .billcard-whip .card-h h2{font-size:19px} /* The bill's number inside the heading is the way to its page (2.176.0). `.lname` is sized for a table cell, so it is overridden here rather than a second class being invented: what carries over is the hover and the underline, which is what says it can be pressed. A stylesheet shares one namespace (2.153.2), so this is scoped to the card. */ .billcard-whip .card-h h2 .bc-open{font:inherit;color:inherit;letter-spacing:inherit} .billcard-whip .card-h h2 .bc-open:hover{color:var(--civic);text-decoration:underline} /* What we counted, beside the vote that happened (2.176.0). Smaller than the vote's own figures, as asked, and it wraps rather than pushing them off a narrow screen. */ .votewhip{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:7px 0 0; font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums} .votewhip .vw-lab{font-weight:700;text-transform:uppercase;letter-spacing:.04em; font-size:10px;color:var(--ink-3,var(--ink-2))} .votewhip .vw-pair b{font-size:12.5px} .votewhip .vw-v{opacity:.6;padding:0 1px} /* The vote that happened, on the gate it happened at (2.191.0). `.gv-` prefixes everything this introduces: a stylesheet shares one namespace (2.153.2, 2.183.0), and `.gatevote` is scoped under the card rather than defined loose. */ .chamber .gatevote{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline; margin:6px 0 0;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums} .chamber .gatevote.sm{margin:4px 0 0;font-size:11px} .chamber .gatevote .gv-what{font-weight:700;text-transform:uppercase; letter-spacing:.04em;font-size:10px;color:var(--ink-3,var(--ink-2))} .chamber .gatevote .gv-res{font-size:12.5px} .chamber .gatevote .gv-vs{opacity:.85} .billcard-whip .card-h .note{flex:1 1 220px;min-width:0} .goal{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.06em; padding:2px 10px;border-radius:4px} .goal.pass{background:#E7F7EC;color:var(--sup-ink);border:1px solid #B4E8C6} .goal.block{background:#FEF3F2;color:var(--opp-ink);border:1px solid #F1C4BF} .pill.here{background:var(--civic);color:#fff;border-color:var(--civic);letter-spacing:.04em} /* The forecast switch, in the card header beside the goal. */ .fc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2); white-space:nowrap;cursor:pointer;user-select:none} .fc input{margin:0;cursor:pointer} /* How the bill ended. A win, a loss, or still live somewhere. */ .pill.outcome.won{background:#E7F7EC;color:var(--sup-ink);border-color:#B4E8C6} .pill.outcome.lost{background:#FEF3F2;color:var(--opp-ink);border-color:#F1C4BF} .pill.outcome.open,.pill.outcome.untracked{background:var(--surface-2);color:var(--ink-3); border-color:var(--rule)} /* A bill that is finished is a record rather than a target. It is not dimmed — the counts are exactly as real as they ever were — but the goal badge stops shouting, since there is nothing left to go and get. */ .billcard-whip.settled .goal{opacity:.6} /* What the legislature did, where nobody here has recorded an outcome (2.190.0). Deliberately not one of the .outcome colors: those say whether the firm won, and this says only what happened. Prefixed and scoped under the card — a stylesheet shares one namespace (2.153.2, 2.183.0). */ .billcard-whip .pill.bc-ended{background:var(--surface-2);color:var(--ink-2); border-color:var(--rule)} .chambers{display:grid;grid-template-columns:1fr 1fr} .chamber{padding:2px 18px;min-width:0} .chamber + .chamber{border-left:1px solid var(--rule-2)} /* A chamber the bill has not reached, and a committee it has not been referred to, are dimmed rather than hidden: the count is real and worth seeing early. */ .chamber.away{opacity:.45} .ch-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap} .ch-h h3{font-size:15px} .ch-note{font-size:11px;color:var(--ink-3);margin-left:auto} .lead{display:flex;align-items:flex-end;gap:11px;margin-bottom:7px} .lead .big{font-family:inherit;font-size:38px;line-height:.92;font-weight:700; font-variant-numeric:tabular-nums} .lead .of{font-size:12px;color:var(--ink-2);padding-bottom:4px} .lead .of b{font-variant-numeric:tabular-nums} .segbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--rule-2); gap:1px;position:relative} .segbar > span{display:block;height:100%} .segbar.sm{height:7px;border-radius:4px} .seg-sup{background:var(--sup)} .seg-per{background:var(--pers)} .seg-opp{background:var(--opp)} .seg-unk{background:var(--nomeet)} /* Named apart from .goalmark, which is the vote-goal marker on the chamber floor, and from .dot, which is the who-is-here light in the sidebar. Both were being restyled from here, which turned a round pulsing light square and faded the floor's marker. */ .gatemark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55; border-radius:1px} .segnums{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap} /* A figure under a bill's bar that opens the members it counted. */ .seglink{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;margin:0; font:inherit;font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(23,38,47,.3); text-underline-offset:3px} .seglink:hover{color:var(--civic);text-decoration-color:currentColor} .comm-h .n .seglink{font-size:inherit;color:inherit} .seglink:focus-visible{outline:2px solid var(--civic);outline-offset:2px;border-radius:3px} .segnums span{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:4px} .segdot{width:8px;height:8px;border-radius:2px;display:inline-block;flex:0 0 auto} .comms{margin-top:14px;border-top:1px solid var(--rule-2);padding-top:11px} .comms-lab{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-3);margin-bottom:9px} .comm{margin-bottom:11px} .comm.notyet{opacity:.45} .comm-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px} .comm-h b{font-size:12.5px;font-weight:600;min-width:0} .comm-h .n{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums; white-space:nowrap} /* Where a committee's whole membership was read off its own roll calls (2.187.0). Scoped under .comm-h and prefixed, because a stylesheet shares one namespace (2.153.2) and a bare .from or .src would be the third instance of that fault. */ .comm-h .cmte-from{font-size:10px;color:var(--ink-3);white-space:nowrap; border:1px solid var(--rule-2);border-radius:999px;padding:0 6px;line-height:15px} .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:11px 16px; border-top:1px solid var(--rule-2);background:var(--surface-2)} .legend span{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:5px} .legend .right-note{margin-left:auto} /* ---------- meetings, on a phone ---------- Touch targets are 44 px at least, the one action that matters on a screen sits at the bottom where a thumb reaches, and position colors are the ones the whip cards use. */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mm{max-width:560px;margin:0 auto} .mm-search{position:relative;margin-bottom:10px} .mm-search svg{position:absolute;left:13px;top:13px;color:var(--ink-2);pointer-events:none} .mm-search input,.mm-input{width:100%;height:44px;box-sizing:border-box;border:1px solid var(--rule); border-radius:12px;padding:0 14px;font:inherit;font-size:15px;background:var(--surface-2);color:var(--ink)} textarea.mm-input{height:84px;padding:12px 14px;line-height:1.45;resize:vertical;display:block} select.mm-input{appearance:auto} .mm-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mm-chips::-webkit-scrollbar{display:none} .mm-chip{height:44px;padding:0 15px;border-radius:22px;border:1px solid var(--rule);background:var(--surface); font:inherit;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px; white-space:nowrap;flex:0 0 auto;cursor:pointer;box-sizing:border-box} .mm-chip.on{background:var(--civic);border-color:var(--civic);color:#fff;font-weight:600} .mm-wrap{display:flex;gap:8px;flex-wrap:wrap} .mm-datechip{position:relative} .mm-datechip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} .mm-sum{display:flex;gap:8px;align-items:baseline;margin:14px 4px 4px;font-size:14px;font-weight:600} .mm-sum .due{color:#8A5A08} .mm-dim{color:var(--ink-3)} .mm-grp{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:16px 4px 8px} .mm-card{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;background:var(--surface); border:1px solid var(--rule);border-radius:14px;padding:14px;margin-bottom:10px;font:inherit;color:var(--ink);cursor:pointer} .mm-card .who{display:flex;align-items:baseline;gap:8px} .mm-card .who b{font-size:16.5px} .mm-owner{margin-left:auto;font-size:12.5px;color:var(--ink-2)} .mm-card .meta{font-size:13px;color:var(--ink-2);margin-top:-4px} .mm-pills{display:flex;gap:6px;flex-wrap:wrap} .mm-pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;font-size:12px; font-weight:600;white-space:nowrap;background:var(--civic-soft);color:var(--civic)} .mm-pill.plain{background:var(--surface);color:var(--ink-2);border:1px solid var(--rule)} .mm-bill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:8px; background:var(--surface-2);border:1px solid var(--rule-2);font-size:13px;font-weight:600;white-space:nowrap} .mm-sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto;display:inline-block} .mm-fu{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;font-size:13px} .mm-fu.due{background:#FBF3E3;color:#6B4506} .mm-fu.late{background:#F8E9E7;color:#7A271F} .mm-fab{position:sticky;bottom:var(--mm-rail,0px); padding:14px 0 calc(16px + var(--mm-safe,env(safe-area-inset-bottom,0px))); background:linear-gradient(to bottom,rgba(0,0,0,0),var(--ground) 45%);margin-top:6px} .mm-go{height:56px;border-radius:16px;background:var(--civic);color:#fff;border:0;width:100%;font:inherit; font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer} .mm-go[disabled]{background:var(--rule);color:var(--ink-2);cursor:default} .mm-go.ghost{background:transparent;color:var(--civic);height:44px;font-size:15px;margin-top:4px} .mm-top{display:flex;align-items:center;gap:6px;margin-bottom:8px} .mm-h{flex:1;margin:0;font-size:22px;font-weight:700} .mm-h.small{font-size:15px;font-weight:600} .mm-step{font-size:13px;color:var(--ink-2);padding-right:6px} .mm-icon{width:44px;height:44px;border:0;background:transparent;border-radius:10px;display:flex; align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex:0 0 auto} .mm-link{height:44px;padding:0 12px;border:0;background:transparent;font:inherit;font-size:15px; font-weight:600;color:var(--civic);cursor:pointer} .mm-link.inline{height:auto;padding:0;font-size:inherit} .mm-prog{height:4px;background:var(--rule-2);border-radius:2px;margin-bottom:18px} .mm-prog i{display:block;height:4px;background:var(--civic);border-radius:2px} .mm-sec{margin-bottom:22px} .mm-q{display:block;font-size:17px;font-weight:700;margin:0 0 10px} .mm-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-2);margin-bottom:8px} .mm-cap{display:block;font-size:13px;color:var(--ink-2);margin:2px 0 8px} .mm-seg{display:flex;gap:4px;padding:4px;background:var(--ground);border-radius:12px} .mm-seg button{height:44px;flex:1 1 0;border:0;background:transparent;border-radius:9px;font:inherit; font-size:14px;color:var(--ink);cursor:pointer} .mm-seg button.on{background:var(--surface);font-weight:700;box-shadow:0 1px 3px rgba(23,38,47,.18)} .mm-since{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--ink-2)} .mm-since input{height:44px;border:1px solid var(--rule);border-radius:10px;padding:0 10px;font:inherit; background:var(--surface);color:var(--ink)} .mm-toggle{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--rule); border-radius:12px;margin-bottom:22px;cursor:pointer;position:relative} .mm-toggle.on{border-color:#E7C98B;background:#FBF3E3} .mm-toggle span{flex:1;display:flex;flex-direction:column} .mm-toggle small{font-size:13px;color:var(--ink-2)} .mm-toggle input{position:absolute;opacity:0;width:1px;height:1px} .mm-toggle i{width:50px;height:30px;border-radius:15px;background:var(--rule);position:relative;flex:0 0 auto} .mm-toggle i::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px; background:#fff;transition:left .15s} .mm-toggle.on i{background:var(--civic)} .mm-toggle.on i::after{left:23px} .mm-toggle input:focus-visible + i{outline:2px solid var(--civic);outline-offset:2px} .mm-person{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border:1px solid var(--rule-2); border-radius:12px;background:var(--surface);width:100%;font:inherit;color:inherit;text-align:left; margin-bottom:8px;cursor:pointer;box-sizing:border-box} .mm-person.on{border:2px solid var(--civic);background:var(--civic-soft);padding:5px 11px} .mm-pn{flex:1;display:flex;flex-direction:column} .mm-pn b{font-size:15px} .mm-pn small{font-size:13px;color:var(--ink-2)} .mm-check{color:var(--civic)} .mm-av{width:38px;height:38px;border-radius:19px;background:var(--civic-soft);color:var(--civic);display:flex; align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto} .mm-context{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px; background:var(--civic-soft);margin-bottom:20px} .mm-context span:last-child{display:flex;flex-direction:column} .mm-context small{font-size:13px;color:var(--ink-2)} .mm-billbox{border:1px solid var(--rule);border-radius:14px;padding:4px 4px 12px 12px;margin-bottom:10px} .mm-billhead{display:flex;align-items:center;gap:8px} .mm-billhead span{flex:1;font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mm-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:6px 8px 0 0} .mm-scale button{height:48px;border-radius:9px;border:2px solid transparent;cursor:pointer;display:flex; align-items:center;justify-content:center;padding:0} .mm-scale-key{display:flex;align-items:baseline;margin:8px 8px 0 0;font-size:12px;color:var(--ink-2)} .mm-scale-key b{flex:1;text-align:center;font-size:15px} .mm-addbill{display:block} .mm-addbill select{width:100%;height:48px;border:1.5px dashed var(--rule);border-radius:12px; background:var(--surface);font:inherit;font-size:15px;font-weight:600;color:var(--civic);padding:0 14px;cursor:pointer} .mm-fuhead{display:flex;align-items:center;gap:8px;margin-bottom:10px} .mm-fuhead .mm-q{flex:1;margin:0} .mm-owner-pick select{height:44px;border:1px solid var(--rule);border-radius:22px;padding:0 12px; font:inherit;font-size:14px;background:var(--surface);color:var(--ink);max-width:160px} /* Above the app's bottom bar where there is one. The home indicator's padding only where there is no bar, since the bar already has it. */ .mm-foot{position:sticky;bottom:var(--mm-rail,0px);background:var(--surface); border-top:1px solid var(--rule-2);margin:8px -16px 0; padding:12px 16px calc(12px + var(--mm-safe,env(safe-area-inset-bottom,0px)))} .mm-name{font-family:inherit;font-size:32px;line-height:1.02; font-weight:700;margin:4px 0 6px} .mm-meta{font-size:14px;color:var(--ink-2);margin:0 0 10px} .mm-tags{margin:-4px 0 12px} .mm-panel{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px;margin-bottom:12px} .mm-stand{display:flex;align-items:center;gap:12px;padding:6px 0} .mm-stand > i{width:6px;align-self:stretch;border-radius:3px;flex:0 0 auto} .mm-stand > span:nth-child(2){flex:1;display:flex;flex-direction:column} .mm-stand small{font-size:14px;color:var(--ink-2)} .mm-moved{font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;white-space:nowrap} .mm-moved.away{background:#F8E9E7;color:#7A271F} .mm-moved.closer{background:#E2F1ED;color:#0B5C51} .mm-said{margin:0 0 8px;font-size:15.5px;line-height:1.55;white-space:pre-wrap} .mm-fubox{background:#FBF3E3;border:1px solid #E7C98B;border-radius:14px;padding:14px;margin-bottom:12px} .mm-fubox.late{background:#F8E9E7;border-color:#E3B4AE} .mm-fubox.done{background:var(--surface);border-color:var(--rule)} .mm-fuline{display:flex;align-items:center;gap:8px} .mm-fuline .mm-lab{flex:1;margin:0} .mm-duepick{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px; margin:-10px -8px -10px 0;font-size:13px;font-weight:600;color:#6B4506;cursor:pointer} .mm-duepick input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer} .mm-futext{margin:10px 0 12px;font-size:15.5px;font-weight:600} .mm-fuact{display:flex;gap:8px} .mm-fuact .mm-go{height:48px;font-size:15px;flex:1} .mm-handoff{position:relative;display:flex;align-items:center;height:48px;padding:0 16px;border:1px solid #D9B870; border-radius:12px;background:var(--surface);font-weight:600;font-size:15px;color:#6B4506;cursor:pointer} .mm-handoff select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer} /* ---------- conference, on the card ---------- A band under both chambers, for the bills that went. */ .conf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:11px 14px; border-radius:10px;border:1px solid var(--rule);background:var(--surface-2)} .conf-lab{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)} .conf-state{flex:1 1 260px;font-size:13.5px;color:var(--ink)} .conf-in{border-color:#9DB8D9;background:var(--civic-soft)} .conf-agreed{border-color:#A8D2C7;background:#E2F1ED} .conf-died{border-color:#E3B4AE;background:#F8E9E7} .conf-sug .card-b{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .conf-sug-q{flex:1 1 320px;font-size:14px} .conf-sug-acts{display:flex;gap:8px} /* ---------- tags ---------- Team tags solid, personal tags dashed with a person, so which list a tag lives in can be read at a glance and never has to be remembered. */ .tg{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px; font-size:12.5px;font-weight:600;white-space:nowrap;box-sizing:border-box;vertical-align:middle} .tg.team{background:var(--civic-soft);color:var(--civic);border:1px solid #C9D8EA} .tg.mine{background:var(--surface);color:var(--ink-2);border:1px dashed #8A9AA5} .tg:has(.tg-x){padding-right:3px} .tg-x{width:24px;height:24px;border:0;background:transparent;border-radius:12px;display:flex; align-items:center;justify-content:center;color:inherit;padding:0;cursor:pointer} .tg-x:hover{background:rgba(23,38,47,.08)} .tg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px; border-top:1px solid var(--rule-2)} .tg-lab{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-2);margin-right:4px} .tg-none{font-size:13px;color:var(--ink-2);font-style:italic} .tg-anchor{position:relative;display:inline-flex} .tg-add.on{border-color:var(--civic);color:var(--civic)} .tg-inline{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px} .tg-inline .tg{height:22px;font-size:11.5px;padding:0 8px} .tg-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:340px;max-width:calc(100vw - 32px); background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:8px; box-shadow:0 12px 32px -10px rgba(23,38,47,.35);text-align:left} .tg-search{display:flex;gap:6px;margin-bottom:6px} .tg-search input{flex:1;height:38px;box-sizing:border-box;border:1px solid var(--rule);border-radius:8px; padding:0 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)} .tg-close{width:38px;height:38px;border:0;background:transparent;border-radius:8px;display:flex; align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;flex:0 0 auto} .tg-sec{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2); padding:8px 10px 4px} .tg-opt{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:0 10px;border:0; background:transparent;border-radius:7px;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer} .tg-opt:hover:not([disabled]),.tg-opt:focus-visible{background:var(--civic-soft)} .tg-opt[disabled]{color:var(--ink-3);cursor:default} /* The mark beside a chosen tag in the picker. Named apart from `.tg-check`, which is the checkbox label further down: two components, two names -- and named `chosen` rather than a near-copy of `check`, since two classes a letter apart invite the collision back. */ .tg-chosen{width:16px;flex:0 0 auto;color:var(--civic);display:flex} .tg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tg-n{font-size:12px;color:var(--ink-2);white-space:nowrap} .tg-empty{margin:4px 10px 8px;font-size:13px;color:var(--ink-2)} .tg-create{margin:8px 2px 2px;border:1px solid #C9D8EA;background:var(--civic-soft);border-radius:10px; padding:12px;display:flex;flex-direction:column;gap:10px;font-size:14px} .tg-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .tg-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--civic);flex:0 0 auto} .tg-check span{display:flex;flex-direction:column;gap:2px} .tg-check small{font-size:12.5px;color:var(--ink-2);font-weight:400} .tg-check.inline{align-items:center} .tg-createbtns{display:flex;justify-content:flex-end;gap:8px} .tg-foot{border-top:1px solid var(--rule-2);margin-top:8px;padding:8px 10px 2px} .tg-link{border:0;background:transparent;padding:4px 0;font:inherit;font-size:13px;font-weight:600; color:var(--civic);cursor:pointer} .tg-new{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .tg-new input[type=text],.tg-new #tg-newname{height:38px;min-width:220px;flex:1;box-sizing:border-box; border:1px solid var(--rule);border-radius:8px;padding:0 12px;font:inherit;font-size:14px; background:var(--surface);color:var(--ink)} .tg-table td{vertical-align:top;padding-top:11px;padding-bottom:11px} .tg-table tr.tg-theirs{background:var(--surface-2)} .tg-seg{display:inline-flex;gap:2px;padding:3px;background:var(--ground);border-radius:8px} .tg-seg button{height:28px;padding:0 10px;border:0;background:transparent;border-radius:6px;font:inherit; font-size:12.5px;color:var(--ink);cursor:pointer} .tg-seg button.on{background:var(--surface);font-weight:700;box-shadow:0 1px 2px rgba(23,38,47,.2)} .tg-seg button[disabled]{color:var(--ink-3);cursor:default} .tg-seg button.on[disabled]{color:var(--ink)} .tg-note{font-size:12px;color:var(--ink-2);margin-top:5px;max-width:320px} .tg-acts{text-align:right;white-space:nowrap} .tg-rename{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .tg-rename input{height:32px;width:190px;box-sizing:border-box;border:1px solid var(--civic);border-radius:7px; padding:0 10px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink)} @media (max-width:700px){ .tg-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px)); width:auto;max-width:none;max-height:calc(70vh / var(--zoom));overflow:auto} .tg-opt{min-height:44px} .tg-x{width:32px;height:32px} } /* ---------- progress bar with its figure ---------- */ .pctbar{display:flex;align-items:center;gap:8px} .pctbar .bar{flex:1;min-width:44px} .pctnum{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600; min-width:34px;text-align:right;flex:0 0 34px} /* ---------- idle warning ---------- */ #idlewarn{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center; padding:14px;pointer-events:none} .idle-card{pointer-events:auto;background:var(--ink);color:#fff;border-radius:10px; padding:13px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap; box-shadow:0 10px 30px rgba(0,0,0,.28);max-width:520px;font-size:13px} .idle-card b{font-size:14px} .idle-card > div{flex:1;min-width:200px;color:#D7E0E5} .idle-card #idleleft{font-variant-numeric:tabular-nums;font-weight:700;color:#fff} @media (hover:none){#idlewarn{bottom:64px}} /* ---------- field chips in the bulk picker ---------- */ .chipbox{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rule); border-radius:5px;padding:2px 7px;font-size:11.5px;background:var(--surface);cursor:pointer; font-family:ui-monospace,Menlo,monospace} .chipbox input{margin:0;width:12px;height:12px} .chipbox:hover{border-color:var(--civic)} /* ---------- help ---------- */ .helpbtn{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule); background:var(--surface);color:var(--ink-2);font-weight:700;font-size:15px;cursor:pointer; line-height:1;font-family:inherit;} .helpbtn:hover{border-color:var(--civic);color:var(--civic);background:var(--civic-soft)} .help-topic{border:1px solid var(--rule);border-radius:7px;margin-bottom:6px;overflow:hidden} .help-head{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface-2);border:0; padding:9px 12px;cursor:pointer;font:inherit;color:inherit;text-align:left} .help-head:hover{background:#EEF2F4} .help-title{font-weight:600;font-size:13.5px;flex:1;min-width:0} .help-body{padding:2px 14px 10px;font-size:13px;line-height:1.6} .help-body p{margin:8px 0 0} .help-topic.shut .help-body{display:none} .help-topic.shut .chev{transform:rotate(-45deg);margin-top:1px} /* ---------- who is signed in ---------- */ #whoson:empty{display:none} .whoson-line{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0; padding:0 0 9px;color:#B7C6CE;font:inherit;font-size:11.5px;cursor:pointer;text-align:left} .whoson-line:hover{color:#fff} /* ---------- release notes ---------- */ .rellist{display:flex;flex-direction:column;gap:6px} .rel{border:1px solid var(--rule);border-radius:7px;overflow:hidden} .rel-head{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface-2); border:0;padding:9px 12px;cursor:pointer;font:inherit;color:inherit;text-align:left} .rel-head:hover{background:#EEF2F4} .rel-v{font-family:inherit;font-weight:700;font-size:16px; min-width:52px;font-variant-numeric:tabular-nums} .rel-t{font-weight:600;font-size:13px;flex:1;min-width:0} .rel-d{font-size:11.5px;color:var(--ink-3);white-space:nowrap} .rel-body{margin:0;padding:10px 14px 12px;list-style:none;display:flex;flex-direction:column;gap:7px} .rel-body li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5} .rel-body li .pill{flex:0 0 auto;margin-top:1px} .rel.shut .rel-body{display:none} .rel.shut .chev{transform:rotate(-45deg);margin-top:1px} .dotmark{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff; margin-left:5px;vertical-align:middle} @media(max-width:560px){.rel-d{display:none}} /* ---------- foldable sections ---------- */ .foldbtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin:0; cursor:pointer;font:inherit;color:inherit;text-align:left} .foldbtn h2{margin:0} .foldbtn:hover h2{color:var(--civic)} .chev{width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3); transform:rotate(45deg);transition:transform .15s;flex:0 0 9px;margin-top:-3px} .fold.shut .chev{transform:rotate(-45deg);margin-top:1px} .fold.shut .foldbody{display:none} .fold.shut .card-h{border-bottom:0} .fold.shut .card-h .right{opacity:.45;pointer-events:none} /* ---------- clickable counts ---------- */ .drill{background:none;border:0;padding:0;font:inherit;color:var(--civic);cursor:pointer; font-variant-numeric:tabular-nums;font-weight:600;border-bottom:1px dotted currentColor} .drill:hover{color:#16406F;border-bottom-style:solid} .drill .pill{cursor:pointer} .keybtn{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid transparent; border-radius:5px;padding:2px 6px;margin:-2px -2px;font:inherit;font-size:11.5px;color:var(--ink-2); cursor:pointer} .keybtn:hover:not(:disabled){background:var(--surface-2);border-color:var(--rule);color:var(--ink)} .keybtn:disabled{cursor:default;opacity:.55} .keybtn b{font-variant-numeric:tabular-nums} /* ---------- tracked bills strip ---------- */ .billstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:16px} .billcard{text-align:left;background:var(--surface);border:1px solid var(--rule);border-radius:8px; padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:7px;font:inherit;color:inherit} .billcard:hover{border-color:#B9C4CB;box-shadow:var(--shadow)} .billcard.priority{border-left:4px solid var(--opp);background:#FDF8F7} .billcard.more{align-items:center;justify-content:center;border-style:dashed;color:var(--ink-3);font-weight:600} .bc-top{display:flex;align-items:center;gap:8px} .bc-num{font-family:inherit;font-size:20px;font-weight:700;line-height:1} .bc-title{font-size:12.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .bc-foot{display:flex;gap:5px;flex-wrap:wrap} .bc-action{font-size:11px;color:var(--ink-3);border-top:1px solid var(--rule-2);padding-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .seatwarn{background:#FBF2E0;border:1px solid #EDDCB6;color:#8A5D0B;border-radius:6px; padding:8px 11px;font-size:12px;margin-top:11px;line-height:1.45} .seatwarn.over{background:#FBF2F1;border-color:#EFCCC6;color:#8E3125} tr.prio-row{background:#FDF7F6} tr.prio-row td:first-child{box-shadow:inset 3px 0 0 var(--opp)} /* ============================================================ Touch and small screens Phones get a bottom tab bar and cards instead of wide tables; tablets keep the rail but with larger hit areas. ============================================================ */ /* Anything that responds to a finger gets a 44px target and no tap flash. */ @media (hover:none){ button, .btn, select, input[type=checkbox] + .track, .navitem, .lname, .seat, a{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .btn{min-height:44px;padding:10px 16px} .btn.sm{min-height:38px;padding:8px 12px} input,select,textarea{min-height:44px;font-size:16px} /* 16px stops iOS zooming on focus */ textarea{min-height:88px} th{padding:12px 11px} td{padding:12px 11px} .seat{width:26px;height:26px} .drill{padding:4px 2px} .datecard{min-width:158px;padding:13px 15px} .pctnum{font-size:13px} .keybtn{padding:7px 9px} .helpbtn{width:40px;height:40px;flex:0 0 40px;font-size:18px} .foldbtn{min-height:44px} .seat:hover{transform:none} .navitem{padding:13px 12px} .track{width:46px;height:26px;flex:0 0 46px} .track::after{width:22px;height:22px} .switch input:checked + .track::after{transform:translateX(20px)} .switch.sm .track{width:38px;height:22px;flex:0 0 38px} .switch.sm .track::after{width:18px;height:18px} .switch.sm input:checked + .track::after{transform:translateX(16px)} .tile .kill{opacity:1} .tw{-webkit-overflow-scrolling:touch} } /* ---------- the phone menu ---------- Hidden entirely on a wide screen, where the rail is always visible. */ /* ---------- back to top ---------- Only on a phone, and only once there is something to come back from. It sits outside the nav strip, which scrolls sideways, so it stays put wherever that list has been dragged to. */ .backtop{display:none;flex-direction:column;align-items:center;justify-content:center;gap:2px; flex:0 0 auto;min-width:58px;padding:9px 12px;background:none;border:0;cursor:pointer; color:#B7C6CE;font-size:11.5px;font-weight:500; border-right:1px solid rgba(255,255,255,.12)} .backtop:active{background:rgba(255,255,255,.10);color:#fff} .backtop-arrow{width:9px;height:9px;border-left:2px solid currentColor; border-top:2px solid currentColor;transform:rotate(45deg);margin-bottom:2px} /* ---------- one search ---------- In the bar, so it is on every page. The results are drawn over the page rather than pushing it down: a list that moves the thing somebody is reading is a list that makes them lose their place. */ .find{position:relative;margin-left:auto;flex:0 1 280px;min-width:0} /* Two classes deep on purpose. The app styles every form control with input[type="search"] among the selectors, which outweighs a single class — so a box written as `.findbox` lost its background to that rule and kept its own white text, which put white on white in both themes: an empty white rectangle, and nothing appearing as anybody typed. It takes its ink from the bar rather than naming a color. The bar is dark in the dark theme and light in the light one, and a color named here can only ever be right in one of them. The wash and the edge are a neutral gray at low opacity, which reads as a slight inset on either. */ .find .findbox{width:100%;height:36px;padding:0 12px;border-radius:9px; border:1px solid rgba(128,128,128,.45);background:rgba(128,128,128,.14);color:inherit; font-size:13.5px;font-family:inherit} .find .findbox::placeholder{color:inherit;opacity:.62} .find .findbox:focus{outline:2px solid #FFD66B;outline-offset:1px; background:rgba(128,128,128,.22)} .findbtn{display:none} /* ---------- where the platform jumps to (2.153.0) ---------- The chooser's slot, for an account that belongs to no company. It reuses the search panel's own rows rather than growing a second set: two dropdowns that look different on one bar read as two different kinds of thing, and these are the same thing asked about different records. Positioned so `.findwrap` below hangs off it. **Named `statejump` and not `jump`, which was already taken (2.153.2).** `.jump` is the *Jump to* pill in the section nav on Settings, defined twice further down this file -- so this wrapper was picking up a pill's background, border, radius and padding from rules that come after it, and of two rules that weigh the same the later one wins. Reported as the button looking wrong on a company's own address. **And the `[hidden]` line is load-bearing, not tidiness.** The attribute hides an element through the browser's own `display:none`, which **any** author `display` rule outweighs -- so `wrap.hidden = true` left this on screen, blank, for every company administrator. `.findwrap` three rules below has carried that line since it was written; this was copied from it without it. */ .statejump{position:relative;display:flex;align-items:center} .statejump[hidden]{display:none} .statejump-btn{height:36px;max-width:230px;padding:0 12px;border-radius:9px;cursor:pointer; font:inherit;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;border:1px solid var(--navy-2);background:var(--navy-2);color:#fff} .statejump-btn:hover{background:#1B4268} .statejump-btn:focus-visible{outline:2px solid var(--mint);outline-offset:1px} .statejump-box{width:calc(100% - 20px);margin:10px;height:34px;padding:0 10px;font:inherit; font-size:13.5px;border:1px solid var(--rule);border-radius:8px; background:var(--surface);color:var(--ink)} .statejump-box:focus{outline:2px solid var(--mint);outline-offset:1px} .statejump-none{padding:10px 13px;font-size:13px;color:var(--ink-2)} /* ---------- the Companies tiles are the filter (2.155.0) ---------- They were seven figures beside a table they described and nothing to do with them. As buttons they keep the look a `.tile` already has -- these rules only add what being pressable needs -- so the row reads as it did and behaves as the canvas draws it. */ .co-tiles .tile{font:inherit;text-align:left;cursor:pointer;color:inherit; transition:border-color .12s, background .12s} .co-tiles .tile:hover{border-color:var(--navy-2)} .co-tiles .tile:focus-visible{outline:2px solid var(--mint);outline-offset:1px} .co-tiles .tile.on{border-color:var(--navy);background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--navy)} /* What was bought, quieter than what is in use: the figure somebody reads is the first one, and the bar behind it is the context. */ .num .of{font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap} /* **Amber through `--warn-ink`, never `--pers-ink`** -- attention, not a position (2.131.0). Over is a thing to know rather than a refusal: only going further over is refused (2.148.0). */ td.num.over{color:var(--warn-ink);font-weight:700} td.num.over .of{color:var(--warn-ink)} .co-find{margin-left:auto;height:30px;max-width:230px;padding:0 10px;font:inherit; font-size:13px;border:1px solid var(--rule);border-radius:8px; background:var(--surface);color:var(--ink)} .co-find:focus{outline:2px solid var(--mint);outline-offset:1px} .card-f{padding:10px 15px 13px;border-top:1px solid var(--rule-2);line-height:1.5} /* ---------- a row's own menu, and the action on an attention row (2.156.0) ---------- `
`/`` rather than a button and held state: the browser closes it on Escape and on a click outside, which is three handlers this does not have to own and cannot get wrong. The marker is removed because the summary is the dots. */ .co-menu{position:relative;display:inline-block} .co-menu>summary{list-style:none;cursor:pointer;width:28px;height:28px;border-radius:7px; display:flex;align-items:center;justify-content:center;color:var(--ink-2); font-size:16px;line-height:1;user-select:none} .co-menu>summary::-webkit-details-marker{display:none} .co-menu>summary::marker{content:""} .co-menu>summary:hover{background:var(--rule-2);color:var(--ink)} .co-menu>summary:focus-visible{outline:2px solid var(--mint);outline-offset:1px} .co-menu-b{position:absolute;right:0;top:calc(100% + 4px);z-index:70;min-width:186px; background:var(--surface);border:1px solid var(--rule);border-radius:10px; box-shadow:0 12px 32px rgba(23,38,47,.22);padding:5px;display:flex; flex-direction:column} .co-menu-i{font:inherit;font-size:13px;text-align:left;padding:7px 9px;border:0; border-radius:6px;background:none;color:var(--ink);cursor:pointer;white-space:nowrap} .co-menu-i:hover{background:var(--surface-2)} .co-menu-i:focus-visible{outline:2px solid var(--mint);outline-offset:-2px} .co-menu-i.danger{color:var(--bad)} .co-row-end{width:36px;text-align:right} /* The action sits at the end of its row, so the prose beside it keeps the width it had. */ .co-need-act{text-align:right;white-space:nowrap} /* A line that costs money if it is ignored (2.157.0). Amber through `--warn-ink`, never the persuadable violet they once shared (2.131.0): this is attention, not a position. */ .warn-line{padding:9px 11px;border-radius:8px;font-size:13px;line-height:1.5; background:var(--warn-bg);border:1px solid var(--warn-rule);color:var(--warn-ink)} /* The way back to the top, above the results (2.154.1). It stands where the `