/* Local Law 144 audit demo. A results table and a compliance calendar drawn on the page. */
.ll {--ll-cond:'Hanken Grotesk','Hanken Fallback',Arial,sans-serif}
.ll-switch,.ll-cats {display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.ll-switch button,.ll-cats button {padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.ll-switch button:hover,.ll-cats button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.ll-switch button[aria-pressed="true"],.ll-cats button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.ll button:focus-visible,.ll-table tbody tr:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

/* Without script both views show, one after the other. With script they share one cell. */
.ll-views {display:grid;margin-top:clamp(1.6rem,3vw,2.4rem)}
.ll-view + .ll-view {margin-top:clamp(4rem,8vw,7rem)}
.ll-js .ll-view {grid-area:1/1;margin-top:0;transition:opacity .45s var(--ease)}
.ll-js .ll-view:not(.is-active) {visibility:hidden;opacity:0;pointer-events:none}

/* Headline words enter one by one. */
.ll-fw {display:inline-block;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.ll[data-state] .ll-fw:not(.is-on) {opacity:0;transform:translateY(.3em)}

.ll-formula,.ll-cal-h {max-width:22ch;margin:0;font:400 clamp(2.1rem,4.3vw,4.4rem)/1.04 var(--ll-cond);letter-spacing:-.025em;color:var(--ink)}
.ll-formula {max-width:none}
.ll-br {display:block}
.ll-op {color:var(--ink-2)}
.ll-term {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:transparent;transition:text-decoration-color .5s,color .5s}
.ll-term .ll-fw {text-decoration:inherit}
.ll-term.is-on {text-decoration-color:color-mix(in srgb,var(--oxide) 75%,transparent)}
.ll:not([data-state]) .ll-term {text-decoration-color:color-mix(in srgb,var(--oxide) 75%,transparent)}

/* The worked example under the formula. */
.ll-ex {display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.1rem;margin:clamp(1.2rem,2vw,1.6rem) 0 0;min-height:2.4em;font:400 clamp(1.2rem,1.9vw,1.6rem)/1.3 var(--ll-cond);letter-spacing:-.02em;color:var(--ink-2);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.ll-ex-m {font-variant-numeric:tabular-nums;color:var(--ink)}
.ll-ex-r {font-weight:500;color:var(--oxide)}
.ll[data-state] .ll-ex:not(.is-on) {opacity:0;transform:translateY(6px)}

.ll-cats {margin-top:clamp(1.4rem,2.6vw,2rem)}

/* Results table: hairlines between records, nothing else. */
.ll-table {width:100%;margin-top:.9rem;border-collapse:collapse;table-layout:fixed;font-size:.9375rem;line-height:1.35;font-variant-numeric:tabular-nums}
.ll-table th,.ll-table td {padding:.72rem 0;text-align:left;vertical-align:middle;font-weight:400}
.ll-table thead th {padding-block:.6rem;font-size:.8125rem;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.ll-table tbody tr {border-bottom:1px solid var(--rule);transition:opacity .45s var(--ease)}
.ll-table tbody th {padding-right:1.2rem;color:var(--ink);transition:color .3s}
.ll-table tbody tr {cursor:default}
.ll-table col,.ll-table th:first-child {width:30%}
.ll-table .ll-a,.ll-table .ll-s,.ll-table .ll-r {width:11%;padding-right:1.2rem;text-align:right}
.ll-table .ll-ir {width:37%;padding:0 0 0 clamp(1.5rem,3vw,3rem)}
.ll-table thead .ll-ir {padding-block:.6rem}
.ll-table td.ll-a,.ll-table td.ll-s {color:var(--ink-2)}
.ll-r {color:var(--ink)}
.ll-of {display:none}
.ll-rv,.ll-irn {display:inline-block;transition:opacity .45s var(--ease),transform .55s var(--ease)}

.ll-group th {padding-top:1.4rem;font:500 .8125rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink-2)}
.ll-table tbody tr.ll-group {border-bottom:0}

/* Impact ratio: number, then a bar scaled 0 to 1.00 with hairlines at 0.80 and 1.00. */
.ll-irw {display:grid;grid-template-columns:3.2rem minmax(0,1fr);align-items:stretch;min-height:100%}
.ll-irn {align-self:center;color:var(--ink)}
.ll-track {position:relative;display:block;min-height:2.8rem}
.ll-track::before,.ll-track::after {content:'';position:absolute;top:0;bottom:0;width:0;transition:opacity .6s var(--ease)}
.ll-track::before {left:100%;border-left:1px solid var(--rule)}
.ll-track::after {left:80%;border-left:1px dashed color-mix(in srgb,var(--ink-2) 70%,transparent)}
.ll-bar {position:absolute;left:0;top:50%;width:100%;height:5px;margin-top:-2.5px;background:var(--ink);transform:scaleX(var(--r));transform-origin:left center;transition:transform 1s var(--ease),background-color .3s}
.ll-xnote {grid-row:1;grid-column:1/-1;align-self:center;position:relative;z-index:1;font-size:.8125rem;line-height:1.3;color:var(--ink-2);transition:opacity .45s}
.ll-irw .ll-track {grid-row:1;grid-column:2}

.ll-table tr.is-top th,.ll-table tr.is-top .ll-r,.ll-table tr.is-top .ll-irn {color:var(--oxide)}
.ll-table tr.is-top .ll-bar {background:var(--oxide)}
.ll-table tr.is-focus th,.ll-table tr.is-focus .ll-irn {color:var(--oxide)}
.ll-table tr.is-focus .ll-bar {background:color-mix(in srgb,var(--oxide) 70%,var(--ink))}

.ll-table tfoot td {padding:.5rem 0 0;border:0}
.ll-table tfoot .ll-ir {padding-left:clamp(1.5rem,3vw,3rem)}
.ll-scale {position:relative;display:block;height:1.2rem;font-size:.75rem;color:var(--ink-2)}
.ll-scale i {position:absolute;top:0;font-style:normal;transform:translateX(-50%);transition:opacity .5s}
.ll-scale i:first-child {transform:none}
.ll-scale i:last-child {transform:translateX(-100%)}

/* Hidden steps while the story plays (data-state is set by the kit at start). */
.ll[data-state] .ll-table tbody tr:not(.is-on) {opacity:0}
.ll[data-state] .ll-rv:not(.is-on),.ll[data-state] .ll-irn:not(.is-on) {opacity:0;transform:translateY(.25em)}
.ll[data-state] .ll-bar:not(.is-on) {transform:scaleX(0)}
.ll[data-state] .ll-xnote:not(.is-on) {opacity:0}
.ll[data-state] .ll-table:not(.is-ticks) .ll-track::after,.ll[data-state] .ll-table:not(.is-ticks) .ll-scale i:nth-child(2) {opacity:0}

.ll-note,.ll-meta {max-width:46rem;margin:1.6rem 0 0;font-size:.875rem;line-height:1.6;color:var(--ink-2);transition:opacity .6s var(--ease)}
.ll-meta {margin-top:.9rem;font-size:.8125rem}
.ll-meta span {color:var(--ink)}
.ll[data-state] .ll-note:not(.is-on),.ll[data-state] .ll-meta:not(.is-on) {opacity:0}

/* Calendar. Positions are percentages of Feb 2026 to May 2027. */
.ll-year {position:relative;height:11.2rem;margin-top:clamp(2.5rem,5vw,4rem)}
.ll-base {position:absolute;left:0;right:0;top:6rem;height:1px;background:var(--rule);transform-origin:left;transition:transform 1s var(--ease)}
.ll-march {position:absolute;top:calc(6rem - 1px);height:3px;background:var(--ink);transition:opacity .5s}
.ll-window {position:absolute;top:calc(6rem - 1.1rem);height:0;border-top:2px solid var(--oxide);transform-origin:left;transition:transform 1.6s var(--ease)}
.ll-wl {position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);font-size:.8125rem;color:var(--oxide);white-space:nowrap;transition:opacity .6s}
.ll-pin {position:absolute;top:0;height:6rem;width:0;border-left:1px solid var(--ink-2);transition:opacity .5s var(--ease)}
.ll-pin::after {content:'';position:absolute;left:-4px;bottom:-4px;width:7px;height:7px;border-radius:50%;background:var(--oxide)}
.ll-pin span {position:absolute;top:0;left:.6rem;font-size:.8125rem;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.ll-pin b {display:block;font-weight:500;color:var(--ink)}
.ll-pin-next {top:6rem;height:5rem;border-left-style:dashed}
.ll-pin-next::after {top:-4px;bottom:auto;background:var(--sheet,transparent);border:1px solid var(--oxide);width:5px;height:5px}
.ll-pin-next span {top:auto;bottom:0}
.ll-pin-year span {left:auto;right:.6rem;text-align:right}
.ll-pin-year {height:4.9rem;top:0;border-left-color:var(--oxide)}
.ll-pin-year::after {display:none}
.ll-months {position:absolute;left:0;right:0;top:6.6rem;margin:0;padding:0;list-style:none;font-size:.75rem;color:var(--ink-2)}
.ll-months li {position:absolute;top:0;transition:opacity .5s}
.ll-months b {display:block;margin-top:.15rem;font-weight:500;color:var(--ink)}

.ll-lens {display:block;width:100%;height:clamp(2.5rem,5vw,4rem);overflow:visible}
.ll-lens path {fill:none;stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.ll-lens.is-px path {vector-effect:none;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}

.ll-mo {position:relative;padding-top:.4rem}
.ll-days {display:grid;grid-template-columns:repeat(31,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}
.ll-days li {position:relative;display:flex;flex-direction:column;align-items:center;padding-top:1.9rem;min-height:5.6rem;font-size:.8125rem;color:var(--ink);transition:opacity .4s var(--ease)}
.ll-days li.is-we {color:color-mix(in srgb,var(--ink-2) 55%,transparent)}
.ll-dn {display:block;transition:color .3s}
.ll-cd {position:absolute;top:.35rem;font-size:.75rem;color:var(--oxide);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ll-days li.is-mark .ll-dn {font-weight:500;color:var(--oxide)}
.ll-dl {position:absolute;top:3.4rem;left:50%;transform:translateX(-50%);font-size:.75rem;color:var(--ink);white-space:nowrap;transition:opacity .4s}
.ll-days li[data-day="3"] .ll-dl,.ll-days li[data-day="10"] .ll-dl {left:0;transform:none}
.ll-days li[data-day="30"] .ll-dl {left:auto;right:0;transform:none}
.ll-brk {position:absolute;left:calc(var(--a) / 31 * 100%);width:calc((var(--b) - var(--a)) / 31 * 100%);top:5rem;height:.5rem;border:1px solid var(--oxide);border-top:0;transform-origin:left;transition:transform .9s var(--ease),opacity .4s}
.ll-brk span {position:absolute;left:50%;top:.8rem;transform:translateX(-50%);font-size:.8125rem;color:var(--oxide);white-space:nowrap}

.ll-events {margin:clamp(3rem,5vw,4rem) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ll-events li {display:grid;grid-template-columns:9rem minmax(0,.9fr) minmax(0,1.5fr);gap:.3rem 2rem;padding:1rem 0;border-bottom:1px solid var(--rule);font-size:.9375rem;line-height:1.45;transition:opacity .5s var(--ease)}
.ll-events time {font:500 1.05rem/1.35 var(--ll-cond);font-stretch:62%;letter-spacing:.005em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .4s}
.ll-events strong {font-weight:500;color:var(--ink)}
.ll-events span {color:var(--ink-2)}
.ll-events li.is-now time {color:var(--oxide)}

.ll[data-state] .ll-cal:not(.is-drawn) .ll-base {transform:scaleX(0)}
.ll[data-state] .ll-window:not(.is-on) {transform:scaleX(0)}
.ll[data-state] .ll-wl:not(.is-on),.ll[data-state] .ll-pin:not(.is-on),.ll[data-state] .ll-months li:not(.is-on),.ll[data-state] .ll-march:not(.is-on) {opacity:0}
.ll[data-state] .ll-lens path:not(.is-on) {stroke-dashoffset:1;opacity:0}
.ll[data-state] .ll-days:not(.is-on) {border-top-color:transparent}
.ll[data-state] .ll-days li:not(.is-on) {opacity:0}
.ll[data-state] .ll-cd:not(.is-on) {opacity:0;transform:translateY(.3em)}
.ll[data-state] .ll-dl:not(.is-on) {opacity:0}
.ll[data-state] .ll-days li.is-mark:not(.is-lit) .ll-dn {color:inherit;font-weight:400}
.ll[data-state] .ll-brk:not(.is-on) {transform:scaleX(0);opacity:0}
.ll[data-state] .ll-events li:not(.is-on) {opacity:.22}

@media(max-width:900px){
  .ll-table .ll-a,.ll-table .ll-s {display:none}
  .ll-table th:first-child {width:42%}
  .ll-table .ll-r {width:22%}
  .ll-table .ll-ir {width:36%;padding-left:1rem}
  .ll-of {display:block;font-size:.75rem;color:var(--ink-2)}
  .ll-irw {grid-template-columns:2.6rem minmax(0,1fr)}
  .ll-xnote {font-size:.75rem;line-height:1.2}
  .ll-events li {grid-template-columns:1fr;gap:.25rem}
  .ll-months li:not(.is-q) {visibility:hidden}
  .ll-wl {font-size:.75rem}
  .ll-days li {font-size:.625rem;min-height:5.2rem}
  .ll-days li:not(.is-mark):not(.is-count) .ll-dn {visibility:hidden}
  .ll-days li::before {content:'';position:absolute;top:0;height:.45rem;border-left:1px solid var(--rule)}
  .ll-dl {font-size:.6875rem}
  .ll-days li[data-day="10"] .ll-dl {display:none}
  .ll-cd {font-size:.625rem}
}
@media(max-width:600px){
  .ll-table {font-size:.875rem}
  .ll-table th:first-child {width:44%}
  .ll-table .ll-r {width:24%}
  .ll-table .ll-ir {width:32%;padding-left:.8rem}
  .ll-irw {grid-template-columns:2.4rem minmax(0,1fr)}
  .ll-bar {height:4px;margin-top:-2px}
  .ll-scale i:first-child,.ll-scale i:last-child {display:none}
  .ll-br {display:none}
  .ll-pin span {font-size:.75rem}
  .ll-wl {display:none}
  .ll-days li[data-day="13"] .ll-dl {left:auto;right:0;transform:none}
}