/* Session Watch — an archival ledger. * * Two themes off one set of tokens, flipped by a data-theme attribute on * . Light is the default and the attribute is written by a tiny script in * the document head, before first paint, so a reader who chose dark does not * see a light flash first. * * House rules from the design: no border radius anywhere, no rotation, no * icons, no emoji. Serif for prose, mono for anything a clerk would have * typed -- numbers, dates, labels, bill numbers. Major divisions are a 3px * double rule; rows are separated by a hairline. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-400.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexMono-600.woff2) format('woff2'); } @font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/PTSerif-400i.woff2) format('woff2'); } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/PTSerif-400.woff2) format('woff2'); } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/PTSerif-700.woff2) format('woff2'); } :root { --bg0:#131517; --bg1:#1a1d20; --ru:#3f444a; --ru2:#25292d; --ink:#e9eaea; --ink2:#a8aeb3; --ink3:#797f85; --acc:#e2b055; --acc2:#b98f3e; --aInk:#171208; --maj:#d98d70; --serif:'PT Serif', Georgia, 'Times New Roman', serif; --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --pad: 48px; } :root[data-theme="light"] { --bg0:#f2f2ef; --bg1:#fbfbf9; --ru:#b6b6b0; --ru2:#dededa; --ink:#1c1d1e; --ink2:#54565a; --ink3:#84878a; --acc:#946f15; --acc2:#8a6d20; --aInk:#ffffff; --maj:#b0512f; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg0); color: var(--ink); font: 400 15.5px/1.6 var(--serif); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* ---------------------------------------------------------------- masthead */ .masthead { border-bottom: 3px double var(--ru); padding: 26px var(--pad) 20px; text-align: center; } .overline { font: 400 10px var(--mono); letter-spacing: .34em; color: var(--ink3); } .wordmark { font-size: 44px; font-weight: 700; letter-spacing: .045em; margin: 10px 0 0; line-height: 1.1; } .wordmark a:hover { text-decoration: none; } .masthead nav { display: flex; justify-content: center; gap: 34px; margin: 18px 0 0; font: 500 11.5px var(--mono); letter-spacing: .14em; color: var(--ink2); flex-wrap: wrap; align-items: center; } .masthead nav a.on { color: var(--acc); border-bottom: 1px solid var(--acc); padding-bottom: 2px; } .theme-toggle { cursor: pointer; border: 1px solid var(--ru); color: var(--ink3); padding: 4px 9px; margin-left: 4px; background: none; font: inherit; letter-spacing: inherit; } .theme-toggle:hover { border-color: var(--acc); color: var(--acc); } /* compact header, on the interior pages */ .masthead.compact { display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 18px var(--pad); gap: 20px; flex-wrap: wrap; } .masthead.compact .wordmark { font-size: 19px; margin: 0; letter-spacing: .12em; } .masthead.compact nav { margin: 0; gap: 22px; } /* ------------------------------------------------------------------ layout */ .wrap { padding: 0 var(--pad); } .rule-top { border-top: 3px double var(--ru); } .hair { border-bottom: 1px solid var(--ru2); } /* section head: mono label with a rule under it */ .slabel { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--ink3); border-bottom: 1px solid var(--ru); padding-bottom: 8px; margin: 0 0 14px; } h1, h2, h3 { font-weight: 700; margin: 0; } /* ------------------------------------------------------------------ stamps */ .stamp { display: inline-block; border: 2px solid var(--ink3); color: var(--ink2); font: 600 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 4px 9px; } .stamp.became_law, .stamp.adopted { border-color: var(--acc); color: var(--acc); } .stamp.vetoed, .stamp.died { border-color: var(--maj); color: var(--maj); } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-block; border: none; cursor: pointer; text-align: center; background: var(--acc); color: var(--aInk); padding: 13px 24px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .btn:hover { text-decoration: none; background: var(--acc2); } .btn.ghost { background: none; border: 2px solid var(--ink3); color: var(--ink2); padding: 11px 18px; } .btn.ghost:hover { border-color: var(--acc2); color: var(--acc2); background: none; } /* ------------------------------------------------------------------ inputs */ input[type="text"], input[type="email"], input[type="search"], select { background: var(--bg1); border: 1px solid var(--ru); color: var(--ink); padding: 11px 14px; font: 400 13px var(--mono); outline: none; } input:focus, select:focus { border-color: var(--acc); } .joined { display: flex; border: 1px solid var(--ru); max-width: 540px; margin: 30px auto 0; } .joined input { flex: 1; border: none; padding: 14px 16px; font-size: 14px; } .joined .btn { padding: 14px 24px; } /* --------------------------------------------------------------- the chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } .chip { padding: 7px 13px; border: 1px solid var(--ru); color: var(--ink2); font: 400 12px var(--mono); } .chip:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; } .chip.on { border-color: var(--acc); color: var(--acc); } /* ------------------------------------------------------------------ hero */ .hero { padding: 46px var(--pad) 38px; text-align: center; border-bottom: 1px solid var(--ru2); } .hero h1 { margin: 0 auto; font-size: 36px; line-height: 1.2; max-width: 760px; } .hero .tagline { margin: 16px auto 0; font-size: 16.5px; line-height: 1.6; color: var(--ink2); max-width: 620px; font-style: italic; } .hero .micro { margin: 12px 0 0; font: 400 11.5px var(--mono); color: var(--ink3); } .picker { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; border: 1px solid var(--ru); padding: 7px 14px; font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink2); background: none; cursor: pointer; } .picker:hover { border-color: var(--acc); color: var(--acc); } /* ------------------------------------------------------------ stats band */ .stats { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 3px double var(--ru); } .stats a, .stats div.cell { padding: 18px 4px; text-align: center; border-right: 1px solid var(--ru2); } .stats > :last-child { border-right: none; } .stats a:hover { text-decoration: none; background: var(--bg1); } .stats .n { font: 600 22px var(--mono); } .stats .k { font: 400 10px var(--mono); letter-spacing: .1em; color: var(--ink3); margin-top: 4px; } .stats .on .n, .stats .law .n { color: var(--acc); } .stats .on .k, .stats .law .k { color: var(--acc2); } /* ------------------------------------------------------------ bill ledger */ .ledger-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ru); padding-bottom: 10px; gap: 16px; } .ledger-head h2 { font-size: 21px; } .ledger-head .count { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--ink3); white-space: nowrap; } .controls { display: flex; gap: 22px; margin: 16px 0 0; align-items: center; flex-wrap: wrap; } .controls input { flex: 1; max-width: 460px; } .filters { display: flex; gap: 14px; font: 500 11px var(--mono); letter-spacing: .08em; flex-wrap: wrap; } .filters a { color: var(--ink3); } .filters a.on { color: var(--acc); border-bottom: 1px solid var(--acc); padding-bottom: 2px; } table.ledger { width: 100%; border-collapse: collapse; margin: 18px 0 0; } table.ledger thead th { text-align: left; padding: 9px 4px; border-bottom: 2px solid var(--ru); font: 500 10px var(--mono); letter-spacing: .14em; color: var(--ink3); font-weight: 500; } table.ledger thead th:last-child, table.ledger td.disp { text-align: right; } /* Every column sorts, so every heading says so before it is clicked rather than only marking the one already in use. */ table.ledger thead th[data-sort] { cursor: pointer; -webkit-user-select: none; user-select: none; } table.ledger thead th[data-sort]:hover { color: var(--ink2); } table.ledger thead th[data-sort]::after { content: '\2195'; padding-left: 6px; opacity: .3; } table.ledger thead th.asc::after { content: '\2191'; opacity: 1; color: var(--acc); } table.ledger thead th.desc::after { content: '\2193'; opacity: 1; color: var(--acc); } table.ledger td { padding: 12px 4px; border-bottom: 1px solid var(--ru2); vertical-align: baseline; } table.ledger tbody tr:hover { background: var(--bg1); } table.ledger td.no { width: 110px; font: 500 13px var(--mono); } table.ledger td.no a { color: var(--acc); } table.ledger td.title { font-size: 15.5px; } table.ledger td.filed { width: 230px; font: 400 12.5px var(--mono); color: var(--ink2); } /* The number is the row's primary link and carries the accent colour. A filer is marked more quietly than that, but still has to read as clickable sitting still and not only under the pointer. */ table.ledger td.filed a { color: inherit; text-underline-offset: 3px; text-decoration: underline dotted var(--ru); } table.ledger td.filed a:hover { color: var(--acc); text-decoration: underline solid var(--acc); } table.ledger td.disp { width: 180px; font: 400 11.5px var(--mono); color: var(--ink2); } .more { padding: 14px 4px; text-align: center; font: 500 11.5px var(--mono); letter-spacing: .1em; } .more a { color: var(--acc); } /* --------------------------------------------------------- email products */ .products { display: grid; grid-template-columns: 1fr 1fr; margin: 36px 0 0; border: 1px solid var(--ru); } .products > div { padding: 24px 28px; } .products > div + div { border-left: 1px solid var(--ru); } .products .no { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--acc2); } .products p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2); } /* ------------------------------------------------------------------ footer */ footer.site { margin: 34px 0 0; border-top: 3px double var(--ru); padding: 16px var(--pad) 20px; text-align: center; font: 400 11px var(--mono); line-height: 1.8; color: var(--ink3); } footer.site a { color: var(--acc2); } @media (max-width: 900px) { :root { --pad: 20px; } .stats { grid-template-columns: repeat(3, 1fr); } .stats > * { border-bottom: 1px solid var(--ru2); } .products { grid-template-columns: 1fr; } .products > div + div { border-left: none; border-top: 1px solid var(--ru); } .wordmark { font-size: 30px; } .hero h1 { font-size: 27px; } table.ledger td.no { width: 96px; } table.ledger td.filed { width: 150px; } table.ledger td.disp { width: auto; } } /* --------------------------------------------------------- member page */ .pagehead .seat { margin: 10px 0 0; font: 500 11px var(--mono); letter-spacing: .16em; color: var(--ink3); } .areastrip .offsite { display: flex; gap: 18px; flex-wrap: wrap; font: 500 11.5px var(--mono); letter-spacing: .06em; } .areastrip .offsite a { color: var(--acc); white-space: nowrap; } /* Four columns is one too many for a phone, and the title is the column a reader came for. The sponsor is still on the bill's own page. */ @media (max-width: 700px) { table.ledger th[data-sort="f"], table.ledger td.filed { display: none; } /* the count keeps its own line rather than squeezing the heading to one word per line */ .ledger-head { flex-wrap: wrap; } /* Forty-five tracked-out characters want 423px and a phone gives 335, so the masthead overline wrapped to two centred lines above the wordmark and read as a sentence that had stalled. Tightened to hold one line. */ .masthead .overline { font-size: 8px; letter-spacing: .22em; } } /* ================================================================ bill page */ .billhead { padding: 42px var(--pad) 0; } .billhead .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .billhead .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 11px var(--mono); letter-spacing: .18em; color: var(--ink3); } .billhead .meta .stamp { padding: 3px 9px; border-width: 1px; font-size: 11px; letter-spacing: .16em; } .billhead h1 { margin: 12px 0 0; font: 600 40px var(--mono); letter-spacing: -.01em; } .billhead .billtitle { font-size: 26px; font-weight: 700; font-style: italic; margin: 8px 0 0; } .billhead .actions { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .billhead .actions .btn.ghost { font-size: 13px; letter-spacing: .2em; padding: 10px 18px; } /* the ledger of facts */ .factledger { margin: 26px 0 0; border-top: 2px solid var(--ru); border-bottom: 2px solid var(--ru); } .factledger .row { display: grid; grid-template-columns: 180px 1fr; padding: 11px 4px; border-bottom: 1px solid var(--ru2); } .factledger .row:last-child { border-bottom: none; } .factledger dt, .factledger .k { font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink3); padding-top: 3px; } .factledger .v { font-size: 15px; word-break: break-word; } .factledger .v a { color: var(--acc); } .factledger a.donations { font: 500 11px var(--mono); letter-spacing: .04em; white-space: nowrap; } .factledger .filer + .filer { margin-top: 3px; } /* subscribe-to-this-area strip */ .areastrip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 18px 0 0; border: 1px solid var(--ru); background: var(--bg1); padding: 14px 20px; flex-wrap: wrap; } .areastrip p { margin: 0; font-size: 14.5px; color: var(--ink2); } .areastrip a.area { color: var(--acc); font-weight: 700; } .areastrip .btn { flex: none; padding: 10px 18px; font-size: 11px; } /* two columns */ .billbody { display: grid; grid-template-columns: 1fr 350px; gap: 44px; padding: 34px var(--pad) 46px; align-items: start; } .billbody .slabel { letter-spacing: .16em; font-size: 10.5px; } .billbody > div > .slabel:not(:first-child) { margin-top: 34px; } .provided { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink2); } /* the analysis box */ .aibox { margin: 30px 0 0; border: 1px solid var(--ru); } .aibox > header { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 3px double var(--ru); flex-wrap: wrap; } .aibox > header h2 { font-size: 17px; } .aibox .tag { border: 1px solid var(--acc); color: var(--acc); padding: 3px 9px; font: 600 9.5px var(--mono); letter-spacing: .16em; } .aibox > header .btn { margin-left: auto; padding: 8px 14px; font-size: 10px; letter-spacing: .14em; } .aibox .inner { padding: 24px 22px 28px; } .aibox .lede { font-size: 17px; font-weight: 700; line-height: 1.4; } .aibox .inner p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); } .aibox .inner p:first-of-type { margin-top: 16px; } .aibox .empty { font-size: 15px; color: var(--ink2); margin: 0; } /* provisions */ .prov { margin: 20px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--ru2); } .prov:last-of-type { border-bottom: none; } .prov .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .prov .no { font: 600 13px var(--mono); color: var(--ink3); } .prov .h { font-size: 17px; font-weight: 700; } .prov .sig { border: 1px solid var(--ink3); color: var(--ink3); padding: 2px 8px; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; } .prov .sig.major { border-color: var(--maj); color: var(--maj); } .prov .cite { font: 400 11.5px var(--mono); color: var(--acc2); } .prov .desc { margin: 9px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2); } .aitag { border: 1px solid var(--ru); color: var(--ink3); padding: 1px 5px; margin-right: 8px; font: 600 8.5px var(--mono); letter-spacing: .14em; vertical-align: 2px; } .quote { margin: 12px 0 0; border-left: 2px solid var(--acc); padding: 10px 16px; background: var(--bg1); font: 400 12.5px/1.7 var(--mono); color: var(--ink2); } .quote a { color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* right column */ .side .trow { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ru2); } .side .trow:last-of-type { border-bottom: none; } .side .trow .d { font: 400 11.5px var(--mono); color: var(--ink3); } .side .trow .e { font-size: 14px; color: var(--ink2); } .side .trow.now .d { font-weight: 500; color: var(--acc); } .side .trow.now .e { font-weight: 700; color: var(--ink); } .side .srow { display: grid; grid-template-columns: 1fr 100px; padding: 9px 0; border-bottom: 1px solid var(--ru2); } .side .srow a { font: 500 12.5px var(--mono); color: var(--acc); } .side .srow .w { text-align: right; font: 400 11.5px var(--mono); color: var(--ink2); } .side .note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2); font-style: italic; } .side .outline { display: inline-block; margin: 12px 0 0; border: 1px solid var(--acc); color: var(--acc); padding: 10px 16px; font: 600 10.5px var(--mono); letter-spacing: .14em; } .side .outline:hover { text-decoration: none; background: var(--acc); color: var(--aInk); } .side .links { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .side .links a { color: var(--acc); } .side .links .when { font: 400 11px var(--mono); color: var(--ink3); } .side .more a, a.moreline { font: 500 10.5px var(--mono); letter-spacing: .1em; color: var(--acc); display: inline-block; margin: 14px 0 0; } @media (max-width: 1000px) { .billbody { grid-template-columns: 1fr; gap: 30px; } .billhead h1 { font-size: 27px; } .billhead .billtitle { font-size: 20px; } .factledger .row { grid-template-columns: 1fr; gap: 2px; } } /* ============================================================ form pages */ .pagehead { padding: 42px var(--pad) 0; } .pagehead .overline { text-align: left; } .pagehead h1 { font-size: 34px; margin: 10px 0 0; } .pagehead .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .twocol { display: grid; grid-template-columns: 1fr 400px; gap: 44px; padding: 30px var(--pad) 46px; align-items: start; } /* product selector */ .products.choose { border: none; margin: 0; gap: 16px; } .products.choose label { display: block; border: 1px solid var(--ru); background: var(--bg1); padding: 18px 20px; cursor: pointer; } .products.choose label.sel { border-color: var(--acc); } .products.choose .t { font-size: 16px; font-weight: 700; } .products.choose .d { margin: 6px 0 0; font-size: 14px; color: var(--ink2); } .box { width: 14px; height: 14px; border: 1px solid var(--ink3); display: inline-block; vertical-align: -2px; margin-right: 9px; text-align: center; line-height: 12px; font: 600 11px var(--mono); color: transparent; } input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } input[type="checkbox"]:checked + .box, label.sel .box { border-color: var(--acc); color: var(--acc); } input[type="checkbox"]:focus-visible + .box { outline: 2px solid var(--acc); } /* Single-select "subscribing as": a round control, not the square tick box. */ input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .radio { width: 14px; height: 14px; border: 1px solid var(--ink3); border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 9px; position: relative; } input[type="radio"]:checked + .radio { border-color: var(--acc); } input[type="radio"]:checked + .radio::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--acc); } input[type="radio"]:focus-visible + .radio { outline: 2px solid var(--acc); } /* the numbered form */ .formledger { margin: 26px 0 0; border-top: 2px solid var(--ru); } .formledger .frow { display: grid; grid-template-columns: 44px 200px 1fr; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--ru2); align-items: start; } .formledger .n { font: 500 11px var(--mono); color: var(--ink3); padding-top: 12px; } .formledger .k { font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink3); padding-top: 14px; } .formledger .f input[type=text], .formledger .f input[type=email], .formledger .f select { width: 100%; max-width: 380px; } .formledger .opts { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 10px; font-size: 14.5px; } .formledger .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; padding-top: 8px; font-size: 14.5px; } .submitrow { margin: 24px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .submitrow p { margin: 0; font-size: 14px; color: var(--ink2); font-style: italic; } .submitrow a { color: var(--acc2); text-decoration: underline; } /* specimen email */ .specimen { border: 1px solid var(--ru); background: var(--bg1); } .specimen .sh { padding: 12px 16px; border-bottom: 1px solid var(--ru); font: 500 10px var(--mono); letter-spacing: .14em; color: var(--ink3); } .specimen .subj { padding: 14px 16px 6px; font-size: 16px; font-weight: 700; } .specimen .item { padding: 10px 16px; border-top: 1px solid var(--ru2); } .specimen .l1 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font: 500 11px var(--mono); } .specimen .l1 .no { color: var(--acc); } .specimen .l1 .ar { color: var(--ink3); letter-spacing: .12em; } .specimen .ti { font-size: 15px; margin-top: 3px; } .specimen .su { font-size: 13.5px; color: var(--ink2); font-style: italic; margin-top: 3px; } .specimen .sf { padding: 12px 16px; border-top: 1px solid var(--ru); font: 400 10px var(--mono); letter-spacing: .12em; color: var(--ink3); } /* ============================================================== calendar */ .calrow { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ru2); align-items: baseline; } .calrow .d { font: 500 11.5px var(--mono); color: var(--ink3); } .calrow .e { font-size: 15px; color: var(--ink2); } .calrow.hi { background: var(--bg1); padding-left: 10px; padding-right: 10px; } .calrow.hi .d { color: var(--acc); } .calrow.hi .e { color: var(--ink); font-weight: 700; } .seasons .s { padding: 14px 0; border-bottom: 1px solid var(--ru2); } .seasons .when { font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--acc2); } .seasons p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink2); line-height: 1.6; } .ctabox { margin: 22px 0 0; border: 1px solid var(--ru); padding: 20px; } .ctabox p { margin: 0 0 14px; font-size: 15px; } .unverified { border-left: 2px solid var(--maj); padding: 10px 14px; margin: 0 0 18px; font-size: 13.5px; color: var(--ink2); background: var(--bg1); } @media (max-width: 1000px) { .twocol { grid-template-columns: 1fr; gap: 30px; } .formledger .frow { grid-template-columns: 30px 1fr; } .formledger .k { grid-column: 2; padding-top: 0; } .formledger .f { grid-column: 2; } .formledger .grid3 { grid-template-columns: repeat(2, 1fr); } } /* Folded rows are in the document -- print and find-in-page see them. */ .fold { display: none; } @media print { :root { --bg0:#fff; --bg1:#fff; --ink:#000; --ink2:#222; --ink3:#555; --ru:#000; --ru2:#bbb; --acc:#6b4c00; --acc2:#6b4c00; } .masthead nav, .theme-toggle, .billhead .actions, .areastrip, form.repull, .moreline { display: none !important; } .fold { display: revert; } .billbody { grid-template-columns: 1fr; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; } .quote, .aibox, .factledger { break-inside: avoid; } } /* ========================================================= the bill itself * Rewriting the stylesheet for the redesign dropped these, so the marked-up * text rendered unstyled -- flush against the left edge with no line-number * column. It is a document, so it keeps the page's padding and reads in mono * with the Legislature's own line numbers down the side. */ .doc { margin: 22px 0 0; border-top: 1px solid var(--ru2); font: 400 13px/1.85 var(--mono); } .doc .ln { display: flex; gap: 18px; padding: 1px 8px; } .doc .ln.chg { background: var(--bg1); } .doc .ln:target { background: var(--bg1); outline: 2px solid var(--acc); } .doc .no { flex: 0 0 3.4rem; text-align: right; color: var(--ink3); user-select: none; font-size: 11.5px; } .doc .no a { color: inherit; } .doc .no a:hover { color: var(--acc); } .doc .tx { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; } /* Added and struck language. The document marks them with /; the legend shows the same two states as .k swatches. Browser defaults already underline and strike, but leave them the body colour. */ .doc ins, .k.a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; } .doc del, .k.d { color: var(--maj); text-decoration: line-through; } .doc ins, .doc del { background: none; } .k { padding: 0 .18em; } .legend { margin: 16px 0 0; font-size: 13.5px; color: var(--ink2); } @media print { .noprint { display: none !important; } } /* Sits with the Legislature's summary, not as a section of its own. */ p.billtext { margin: 10px 0 0; font: 500 13px var(--mono); letter-spacing: .06em; } p.billtext a { color: var(--acc); } /* ============================================================ prose pages */ .prose { padding: 26px var(--pad) 52px; max-width: 56rem; } .prose .slabel { margin: 34px 0 14px; } .prose .slabel:first-child { margin-top: 0; } .prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--ink2); } .prose p strong, .prose li strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--acc); } .prose ul { margin: 0 0 14px; padding-left: 20px; } .prose li { margin: 0 0 9px; font-size: 15.5px; line-height: 1.7; color: var(--ink2); } .prose li::marker { color: var(--ink3); } /* the request form in the analysis header */ form.inline { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } form.inline input { font-size: 12px; padding: 8px 10px; min-width: 15rem; } form.inline .btn { padding: 8px 14px; font-size: 10px; letter-spacing: .14em; }