/* Interface fragments (scripts/fragments.mjs): pictures of the firm's systems, drawn on surface, square corners, always captioned "Illustrative". */
.fragment{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--surface);padding:24px;font:400 16px/1.5 var(--body);color:var(--ink)}
.fragment .ui{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.fragment .illustration-note{align-self:flex-start}
.fragment ul,.fragment ol,.fragment dl,.fragment p{margin:0}
.ui-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.ui-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ui-title{font:500 18px/1.3 var(--display);letter-spacing:-.02em}
.ui-meta{font-size:13px;line-height:1.4;color:var(--muted)}
.ui-label{display:block;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ui-strong{font-weight:500}
.ui-muted{color:var(--muted)}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--paper)}
.ui-cell{min-width:0}
.ui-cell.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-th{background:transparent;padding-top:0;padding-bottom:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ui-pair{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.ui-pair:last-child{border-bottom:0}
.ui-pair .ui-label{flex-shrink:0}
.ui-pair .ui-value{text-align:right}
.ui-block{display:flex;flex-direction:column;gap:8px}
.ui-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.ui-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);padding:3px 10px;font-size:13px;line-height:1.4;white-space:nowrap}
.ui-chip-ok:before{content:'';width:6px;height:6px;background:var(--ink)}
.ui-chip-warn{border-color:var(--ink)}
.ui-chip-flag{border-color:var(--accent);color:var(--accent)}
.ui-chip-flag:before{content:'';width:6px;height:6px;background:var(--accent)}
.ui-chip-page{background:var(--surface)}
.ui-button{display:inline-flex;align-self:flex-start;border:1px solid var(--ink);border-radius:100px;padding:4px 14px;font-size:13px;line-height:1.4;white-space:nowrap}
.ui-flag{display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--accent);background:var(--paper);padding:10px 12px}
.ui-note{font-size:13px;line-height:1.4;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.ui-foot .ui-chip,.ui-flag .ui-chip{white-space:normal}

/* Drawn text: unreadable lines stand in for Arabic documents (spec §9). A --w of 0 leaves a paragraph gap. */
.redacted{display:block;width:var(--w,80%);height:.6em;margin:.35em 0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 26%,transparent) 0 14px,transparent 14px 18px,color-mix(in srgb,var(--ink) 26%,transparent) 18px 40px,transparent 40px 44px);direction:rtl}
.redacted-block{display:flex;flex-direction:column;align-items:flex-end;min-width:0;flex:1}
.redacted-block .redacted[style*="--w:0%"]{height:.3em;background:none}

/* official-inbox */
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;background:var(--paper);padding:12px}
.task-sender{grid-column:1/-1;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.task-asked{font-weight:500;grid-column:1}
.task .ui-button{grid-column:2;grid-row:2/span 2;align-self:center}
.task-facts{grid-column:1;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:13px}
.task-facts div{display:flex;gap:6px}
.task-facts dt{color:var(--muted)}
.task-facts dd{margin:0}
.mailbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;flex:1}
.mail{display:flex;align-items:center;gap:10px;background:var(--paper);padding:10px 12px;flex-wrap:wrap}
.mail .redacted-block{flex:1 1 60px}
.mail-dot{width:8px;height:8px;border-radius:50%;background:transparent;flex-shrink:0}
.mail.is-unread .mail-dot{background:var(--accent)}
.mail-date,.mail-flag{font-size:13px;color:var(--muted);white-space:nowrap}
.mail.is-unread .mail-date{color:var(--ink);font-weight:500}
.mail-flag{width:100%;padding-left:18px;font-size:13px}
.letter{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--paper);padding:16px;border:1px solid var(--line)}
.letter-seal{position:absolute;top:14px;left:16px;width:26px;height:26px;border:1px solid var(--line);border-radius:50%}
.letter .ui-label{align-self:flex-end}

/* tender-pack and rules */
.check{display:flex;align-items:center;gap:12px;background:var(--paper);padding:10px 12px}
.check-box{width:18px;height:18px;border:1.5px solid var(--ink);flex-shrink:0;position:relative}
.check-box:after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check-text{display:flex;flex-direction:column;flex:1;min-width:0}
.check .ui-chip{margin-left:auto}
.rules-list{counter-reset:rule}
.rules-list .check{align-items:flex-start;counter-increment:rule}
.rules-list .check-text:before{content:counter(rule,decimal-leading-zero);font:500 13px/1.4 var(--display);color:var(--ink);margin-bottom:2px}
.pdf-desk{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:start;flex:1}
.pdf-stack{gap:0;padding-top:4px}
.pdf{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);padding:8px 10px;margin-top:calc(var(--i) * -2px);margin-left:calc(var(--i) * 6px);margin-right:calc((4 - var(--i)) * 6px)}
.pdf-page{width:34px;height:44px;border:1px solid var(--line);padding:4px;display:flex;flex-shrink:0}
.pdf-name{font-size:13px;min-width:0;overflow-wrap:anywhere}
.phone{display:flex;flex-direction:column;gap:2px;background:var(--paper);border:6px solid var(--ink);border-radius:18px;padding:22px 10px 12px;position:relative;font-size:13px;overflow:hidden;max-height:240px}
.phone-notch{position:absolute;top:6px;left:50%;width:40px;height:6px;margin-left:-20px;border-radius:6px;background:var(--ink)}
.phone-page{font-size:13px;color:var(--muted);margin-top:8px;align-self:center}

/* arabic-invoice */
.invoice{display:flex;flex-direction:column;gap:2px;background:var(--paper);border:1px solid var(--line);padding:6px}
.bi{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;padding:8px 10px;gap:16px}
.bi>.ui-cell.ar{display:flex;justify-content:flex-end;border-left:1px solid var(--line);padding-left:16px}
.bi>.ui-cell.ar .redacted{margin:0}
.bi>.ui-cell.en{display:flex;flex-direction:column}
.bi-items{gap:2px;counter-reset:item}
.bi-item{background:var(--surface)}
.bi-item .bi{background:transparent}
.bi-total{border-top:2px solid var(--ink)}
.invoice-desk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:0;align-items:start;flex:1}
.invoice-plain{padding:12px;gap:0}
.invoice-plain .ui-row{padding:8px 0;border-bottom:1px solid var(--line)}
.taped{position:relative;background:var(--paper);border:1px solid var(--line);padding:14px 12px 10px;margin:28px 0 0 -4px;transform:rotate(2deg);box-shadow:0 1px 0 var(--line)}
.taped .ui-row{padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.taped .ui-title{font-size:15px}
.tape{position:absolute;top:-9px;left:50%;width:64px;height:18px;margin-left:-32px;background:color-mix(in srgb,var(--ink) 12%,transparent);transform:rotate(-4deg)}

/* whatsapp-orders */
.chat{gap:10px;flex:1}
.bubble{max-width:85%;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bubble-in{align-self:flex-start;background:var(--paper)}
.bubble-out{align-self:flex-end;background:color-mix(in srgb,var(--ink) 7%,var(--paper));align-items:flex-end}
.voice{display:flex;align-items:center;gap:10px;font-size:13px}
.voice:before{content:'';width:0;height:0;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.voice-bars{display:flex;align-items:center;gap:2px;height:22px;width:120px}
.voice-bars i{flex:1;height:var(--h);background:var(--ink);opacity:.55}
.transcript{display:flex;flex-direction:column;align-items:flex-end;border-top:1px solid var(--line);padding-top:6px}
.transcript .ui-label{align-self:flex-start}
.transcript{min-width:200px}
.order-card{background:var(--paper);padding:4px 12px;min-width:220px;align-self:stretch}
.invoice-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);padding:10px 12px;min-width:220px}
.notes-list{gap:0;background:var(--paper);flex:1}
.notes-list li .ui-row{border-bottom:1px solid var(--line);padding:12px}
.notes-list li:nth-child(2) .ui-cell:last-child,.notes-list li:nth-child(4) .ui-cell:last-child{color:var(--accent)}

/* licence-register */
.calendar{display:flex;flex-direction:column;gap:6px;flex:1}
.cal-months{display:grid;grid-template-columns:repeat(var(--months),1fr);margin-left:calc(40% + 12px);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lic{display:grid;grid-template-columns:40% minmax(0,1fr);gap:6px 12px;background:var(--paper);padding:12px;align-items:center}
.lic-name{display:flex;flex-direction:column;grid-row:span 2}
.lic-name .ui-muted{font-size:13px}
.cal-track{position:relative;height:10px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 6))}
.cal-track i{position:absolute;top:0;left:calc(var(--m) * 100% / 6);width:calc(100% / 6);height:10px;background:var(--ink)}
.lic-when{font-size:13px}
.lic .ui-chip{grid-column:2;justify-self:start}
.lic.is-flagged{border-left:3px solid var(--accent)}
.folder{position:relative;flex:1;display:flex;flex-direction:column;padding-top:28px}
.folder-tab{position:absolute;top:0;left:0;background:color-mix(in srgb,var(--ink) 12%,var(--surface));padding:4px 16px;font:500 15px/1.4 var(--display)}
.folder-body{flex:1;position:relative;background:color-mix(in srgb,var(--ink) 12%,var(--surface));padding:18px;min-height:240px;display:flex;flex-direction:column;gap:12px}
.folder-body>.redacted-block{background:var(--paper);padding:14px 16px;align-items:flex-end;max-width:70%}
.stickies{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;margin-top:-34px;padding-left:24%}
.sticky{background:var(--paper);border-top:4px solid var(--ink);padding:10px;font-size:13px;line-height:1.35;transform:rotate(var(--r));box-shadow:0 1px 0 var(--line)}

/* workforce-ratio */
.gauge{background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:10px}
.gauge-labels,.gauge-legend{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gauge-legend{position:relative;height:20px;font-size:13px;color:var(--muted)}
.gauge-bar{position:relative;height:16px;background:var(--surface)}
.gauge-fill{position:absolute;inset:0 auto 0 0;width:38%;background:var(--ink)}
.gauge-mark{position:absolute;top:-6px;bottom:-6px;left:56%;width:3px;background:var(--accent)}
.gauge-threshold{position:absolute;left:56%;transform:translateX(-50%);color:var(--accent);white-space:nowrap}
.whatif .ui-cell:last-child{display:flex;align-items:center;gap:8px;text-align:right}
.whatif-arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;flex-shrink:0}
.whatif-up{border-bottom:9px solid var(--ink)}
.whatif-down{border-top:9px solid var(--accent)}
.sheet{overflow-x:auto;background:var(--paper)}
.sheet table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{border:1px solid var(--line);padding:6px 8px;text-align:left;white-space:nowrap}
.sheet th{background:var(--surface);font-weight:500}
.sheet-ratio td{font-weight:500}
.sheet-ratio td:nth-child(2){color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}

/* console, tracer */
.qa{background:var(--paper);padding:10px 12px;color:var(--muted)}
.qa.is-active{color:var(--ink);border-left:3px solid var(--accent)}
.answer{background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:8px}
.tracer{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:12px;flex:1}
.tracer-docs{display:flex;flex-direction:column;gap:8px}
.tracer-docs li{background:var(--paper);padding:8px 10px;font-size:13px;color:var(--muted)}
.tracer-docs li.is-active{color:var(--ink);border-left:3px solid var(--accent)}
.tracer-qa{background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:6px}
.tracer-source{margin-top:auto;padding-top:6px}
.tracer-source .ui-chip{white-space:normal}

/* pipeline */
.stations{gap:0;position:relative}
.station{display:flex;align-items:center;gap:12px;padding:10px 0;position:relative}
.station:not(:last-child):after{content:'';position:absolute;left:13px;top:38px;bottom:-10px;width:2px;background:var(--line)}
.station-dot{width:28px;height:28px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;font-size:13px;background:var(--paper);flex-shrink:0;position:relative;z-index:1}
.station .ui-chip{margin-left:auto}
.stamp{align-self:flex-start;border:2px solid var(--accent);color:var(--accent);padding:8px 14px;font:500 15px/1.3 var(--display);transform:rotate(-2deg);margin-top:auto}

/* probe */
.probe-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) auto;gap:12px}
.probe-row .ui-cell:last-child{justify-self:end}

/* scorecard */
.score-legend{display:flex;gap:16px;font-size:13px;color:var(--muted)}
.score-key{display:inline-flex;align-items:center;gap:6px}
.score-key-result:before{content:'';width:14px;height:8px;background:var(--ink)}
.score-key-threshold:before{content:'';width:3px;height:14px;background:var(--accent)}
.scores{gap:6px}
.score-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;font-size:13px;line-height:1.3}
.score-bar{position:relative;height:10px;background:var(--paper)}
.score-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--r) * 1%);background:var(--ink)}
.score-bar.is-below .score-fill{background:color-mix(in srgb,var(--ink) 45%,var(--paper))}
.score-mark{position:absolute;top:-4px;bottom:-4px;left:calc(var(--t) * 1%);width:2px;background:var(--accent)}

/* findings */
.ui-table{overflow-x:auto;background:var(--paper)}
.fragment table{margin:0}
.fragment th,.fragment td{border-left:0;border-right:0;border-top:0}
.ui-table table{border-collapse:collapse;width:100%;font-size:13px}
.ui-table th{text-align:left;font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.ui-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ui-table tr:last-child td{border-bottom:0}

/* licence-card */
.card-facts{background:var(--paper);padding:4px 16px;border-top:1px solid var(--ink)}
.card-facts .ui-value{font-weight:500;max-width:60%}

/* Live product fragments (fragment(id, { live: true })): the console, pipeline and tracer as tab sets.
   Every panel shows until tabs.js hides the inactive ones; tabs are buttons with hover, focus and press feedback. */
.console-live,.pipeline-live,.tracer-live{display:grid;gap:12px;min-width:0}
.console-live{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}
.console-live .answers,.station-panels,.tracer-panels{display:grid;gap:12px;min-width:0}
.console-live [role=tab],.pipeline-live [role=tab],.tracer-live [role=tab]{font:inherit;text-align:left;border:0;cursor:pointer;transition:background .4s var(--ease),transform .4s var(--ease),color .4s var(--ease)}
.console-live [role=tab]:hover,.pipeline-live [role=tab]:hover,.tracer-live [role=tab]:hover{background:color-mix(in srgb,var(--ink) 5%,var(--paper));transform:translateY(-3px)}
.console-live [role=tab]:active,.pipeline-live [role=tab]:active,.tracer-live [role=tab]:active{transform:scale(.98);transition-duration:120ms}
.console-live [role=tab]:focus-visible,.pipeline-live [role=tab]:focus-visible,.tracer-live [role=tab]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.console-live .qa{width:100%;border-left:3px solid transparent;line-height:1.5}
.console-live .qa[aria-selected=true]{color:var(--ink);border-left-color:var(--accent);font-weight:500}
.ui-replay{font:inherit;font-size:13px;line-height:1.4;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:100px;padding:4px 14px;cursor:pointer}
.ui-replay:hover{background:var(--paper)}
.ui-replay:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* pipeline: the statement line runs along the track above the four stations (the page's one loop) */
.pipeline-track{position:relative;height:14px;overflow:hidden}
.pipeline-track:before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.pipeline-run{position:absolute;inset:0;animation:pipeline-run 6s cubic-bezier(.45,0,.55,1) infinite}
.pipeline-doc{position:absolute;left:-44px;top:3px;width:44px;height:8px;background:var(--accent)}
@keyframes pipeline-run{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pipeline-run{animation:none;transform:translateX(100%)}}
.pipeline-live .stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pipeline-live .station{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;background:var(--paper);color:var(--muted);border-top:3px solid transparent;height:100%}
.pipeline-live .station:after{display:none}
.pipeline-live .station .ui-chip{margin-left:0;margin-top:auto}
.pipeline-live .station[aria-selected=true]{color:var(--ink);border-top-color:var(--accent)}
.pipeline-live .station[aria-selected=true] .station-dot{border-color:var(--accent);color:var(--accent)}
.station-panel{background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:6px}
.station-panel p:last-child{color:var(--muted)}
/* tracer: questions, a drawn path to each one's document, the documents; the answer below */
.tracer-map{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,.8fr);grid-template-rows:auto 1fr;gap:8px 0}
.tracer-map-q{grid-column:1}.tracer-map-d{grid-column:3}
.tracer-questions{grid-column:1;display:flex;flex-direction:column;gap:6px}
.tracer-q{flex:1;background:var(--paper);color:var(--muted);padding:10px 12px;border-left:3px solid transparent;line-height:1.45}
.tracer-q[aria-selected=true]{color:var(--ink);border-left-color:var(--accent);font-weight:500}
.tracer-paths{grid-column:2;width:100%;height:100%;display:block}
.tracer-paths path{stroke:var(--line);stroke-width:1.5;transition:stroke .4s var(--ease),stroke-width .4s var(--ease)}
.tracer-paths path.is-active{stroke:var(--accent);stroke-width:2.5}
.tracer-live .tracer-docs{grid-column:3;display:flex;flex-direction:column;gap:6px}
.tracer-live .tracer-docs li{flex:1;display:flex;align-items:center;background:var(--paper);padding:8px 10px;font-size:13px;color:var(--muted);border-left:3px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)}
.tracer-live .tracer-docs li.is-active{color:var(--ink);border-left-color:var(--accent)}
.station-panels [role=tabpanel].is-entering,.tracer-panels [role=tabpanel].is-entering{animation:live-panel-enter 300ms cubic-bezier(.2,1,.2,1) both}
@keyframes live-panel-enter{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
body.motion-paused .station-panels [role=tabpanel].is-entering,body.motion-paused .tracer-panels [role=tabpanel].is-entering{animation:none}
body.motion-paused :is(.console-live,.pipeline-live,.tracer-live) [role=tab]:hover{transform:none}
body.motion-paused :is(.console-live,.pipeline-live,.tracer-live) [role=tab],body.motion-paused .tracer-paths path,body.motion-paused .tracer-live .tracer-docs li{transition:none}
@media (prefers-reduced-motion:reduce){
  .station-panels [role=tabpanel].is-entering,.tracer-panels [role=tabpanel].is-entering{animation:none}
  :is(.console-live,.pipeline-live,.tracer-live) [role=tab],.tracer-paths path,.tracer-live .tracer-docs li{transition:none}
  :is(.console-live,.pipeline-live,.tracer-live) [role=tab]:hover{transform:none}
}
@media (max-width:760px){
  .console-live{grid-template-columns:minmax(0,1fr)}
  .pipeline-live .stations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tracer-map{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tracer-map-q,.tracer-map-d,.tracer-questions,.tracer-live .tracer-docs{grid-column:1}
  .tracer-map-d{order:3;margin-top:8px}.tracer-live .tracer-docs{order:4}
  .tracer-paths{display:none}
}

/* Phones: one column everywhere. */
@media (max-width:560px){
  .fragment{padding:16px}
  .mailbox,.pdf-desk,.invoice-desk,.tracer{grid-template-columns:minmax(0,1fr)}
  .phone{max-width:170px}
  .taped{margin:-6px 0 0 18px}
  .lic{grid-template-columns:minmax(0,1fr)}
  .lic-name{grid-row:auto}
  .lic .ui-chip{grid-column:1}
  .cal-months{display:none}
  .stickies{padding-left:0;margin-top:0}
  .probe-row{grid-template-columns:minmax(0,1fr) auto}
  .probe-row .ui-cell:nth-child(2){grid-column:1/-1;grid-row:2}
  .ui-th.probe-row .ui-cell:nth-child(2){display:none}
  .score-row{grid-template-columns:minmax(0,1fr)}
  .bi{gap:10px}
  .bi>.ui-cell.ar{padding-left:10px}
  .ui-pair{flex-direction:column;gap:2px}
  .ui-pair .ui-value{text-align:left}
  .card-facts .ui-value{max-width:none}
  .task{grid-template-columns:minmax(0,1fr)}
  .ui-table thead{display:none}
  .ui-table table,.ui-table tbody,.ui-table tr,.ui-table td{display:block}
  .ui-table tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px;border-bottom:1px solid var(--line)}
  .ui-table tr:last-child{border-bottom:0}
  .ui-table td{padding:0;border:0}
  .ui-table td:nth-child(2){justify-self:end}
  .ui-table td:nth-child(n+3){grid-column:1/-1}
  .ui-table td:nth-child(4){color:var(--muted)}
  .task .ui-button{grid-column:1;grid-row:auto;margin-top:6px;justify-self:start}
}
.pdf-page .redacted{height:3px;margin:2px 0}
.phone .redacted{height:5px;margin:3px 0}