/* RM10 분석 -- this track's one stylesheet of the redesign (GOAL-redesign-wave 4절 CSS). Its parts are
   redesign-rf1.css's (prefix lx-); index.html links it after them. Only this track writes here.

   What it holds: the first line of an analysis (its sentence, the period choice, the "분석" choice and 내보내기 --
   three small pop-overs of one shape), the place an open analysis stands in, and the look of the analyses' own
   pieces (insights*.js) where a shared part does not draw them. The older insights sheets stay linked before
   this one: a rule here on one of their classes is that class's look in the redesign.
   Colours are tokens; a state colour on words is its -text token. */

/* ---------- Where an analysis stands ---------- */
/* The section at a page's end, and a view's whole body: no card of its own -- the pieces inside are the cards. */
.insights-place{display:flex;flex-direction:column;gap:16px;min-width:0;margin-top:20px;padding:0;border:0;border-radius:0;background:transparent}
.insights-place:empty{display:none}
.insights-place:is([data-insights-host="incidents"],[data-insights-host="router-verify"],[data-insights-host="retention"]){margin-top:0}
#insights-root,#my-usage-root{display:flex;flex-direction:column;gap:16px;min-width:0}
/* An analysis open from the choice stands in the body's place: what follows the view's first line is put away
   (the screen's own nodes it handed over are hidden by the script; this is the page that marks its first line). */
[data-page][data-insights-open] [data-insights-first]~*:not(.insights-place),
[data-page][data-insights-open] :has(>[data-insights-first])~*:not(.insights-place){display:none}

/* ---------- The first line ---------- */
.insights-head{min-height:36px;gap:8px 10px}
.insights-head .insights-title{margin:0}
.insights-lede{min-width:0;margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.insights-lede b{font-weight:750}
.insights-lede:empty{display:none}
.insights-head>.insights-lede:empty{display:block}
.insights-nav:empty{display:none}
.insights-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.insights-company{display:inline-flex;align-items:center;gap:8px;color:var(--ds-text-2);font-size:13px;font-weight:600}
.insights-company select{width:auto;min-width:160px}
.insights-gw-period{display:inline-flex;align-items:center;gap:8px}

/* A pop-over under a button of the first line: the "분석" choice, the period, 내보내기. */
.insights-pop{position:relative;display:inline-block}
.insights-pop>summary{list-style:none;cursor:pointer;user-select:none}
.insights-pop>summary::-webkit-details-marker{display:none}
.insights-pop>summary::after{content:"";flex:none;width:6px;height:6px;margin:-3px 2px 0 2px;border:solid var(--ds-text-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.insights-pop[open]>summary{border-color:var(--ds-accent)}
.insights-pop-body{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;min-width:220px;max-width:min(360px,calc(100vw - 32px));max-height:min(70vh,560px);overflow-y:auto;padding:8px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.insights-pop-item,.insights-pop-item:is(:hover,:active,:focus){display:flex;align-items:center;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;filter:none;color:var(--ds-text);font:500 14px var(--ds-font);text-align:left;white-space:normal;cursor:pointer}
.insights-pop-item:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.insights-pop-item:focus-visible{outline:2px solid var(--ds-accent);outline-offset:-2px}
.insights-pop-item[aria-current="true"],.insights-pop-item[aria-current="true"]:hover{background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-text);font-weight:600}
.insights-pop-item:disabled,.insights-pop-item:disabled:hover{background:transparent;color:var(--ds-text-3);cursor:default}
.insights-pop-part{margin:8px 10px 2px;color:var(--ds-text-3);font-size:12px;font-weight:600}
.insights-pop-part:first-child{margin-top:2px}
.insights-pop-body>.insights-hint{margin:0;padding:4px 10px;color:var(--ds-text-3);font-size:13px}
/* The period: its ranges, the days of a range of one's own, the zone, and how far back a read goes. */
.insights-period .insights-pop-body{gap:12px;min-width:336px;padding:12px}
.insights-ranges{align-self:flex-start;flex-wrap:wrap}
/* The two days side by side, 적용 under them at the right. */
.insights-days{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:8px;margin:0}
.insights-days label{margin:0}
.insights-days>.lx-btn{grid-column:1/-1;justify-self:end}
.insights-days label,.insights-zone{display:flex;flex-direction:column;gap:6px;color:var(--ds-text-2);font-size:13px;font-weight:600}
.insights-days input{width:100%;min-width:0}
.insights-zone select{width:100%}
.insights-period .insights-pop-body>.insights-hint{padding:0}
.insights-period [data-insights-period-said]{flex-basis:100%;color:var(--ds-danger-text);font-size:13px}
.insights-period [data-insights-period-said]:empty{display:none}
.insights-export-said{margin-left:8px;color:var(--ds-text-3);font-size:13px}
.insights-export-said:empty{display:none}
.insights-back{flex:none}

/* ---------- What an analysis says of its answer (the envelope's lines) ---------- */
.insights-panel{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0}
.insights-panel>:is(p,h3,h4,ul,ol,dl,div,section,table,form,details),#my-usage-root>:is(p,div,section){margin-top:0;margin-bottom:0}
.insights-envelope{display:flex;flex-direction:column;gap:6px;margin:0}
.insights-window,.insights-place .insights-window{margin:0;color:var(--ds-text-3);font-size:13px}
.insights-state,.insights-missing,.insights-hidden,.insights-notice,.insights-labels{margin:0;padding:10px 14px;border-radius:10px;background:var(--ds-surface-2);color:var(--ds-text-2);font-size:13px}
.insights-missing{background:var(--ds-caution-soft);color:var(--ds-caution-text)}
.insights-state:is([data-state="forbidden"],[data-state="failed"]){background:var(--ds-surface-2)}
.insights-hint{margin:0;color:var(--ds-text-3);font-size:13px}
/* A kind of value (추정, 시뮬레이션, 미측정) is a small grey word: no dashed frame, no colour of its own. The mark of
   an example record (예시 자료) keeps its colour. */
.insights-badge:is([data-label="estimated"],[data-label="simulated"],[data-label="unmeasured"]){outline:0;border-radius:6px;background:var(--ds-surface-3);color:var(--ds-text-2);font-weight:500}
.insights-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:0;border-radius:6px;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px;font-weight:500;white-space:nowrap}
:is(.insights-panel,#my-usage-root) :is(.lx-note,.lx-sub,.lx-lede){margin:0}
:is(.insights-panel,#my-usage-root) .lx-note{display:block}
:is(.insights-panel,#my-usage-root) .lx-lede b{font-weight:750}
/* A value nobody has, where its reason is words (테스트를 돌린 실행 없음): grey, the cell's size. */
:is(.insights-panel,#my-usage-root) .lx-na{font-weight:400}

/* ---------- The pieces an analysis is made of ---------- */
/* A section of an analysis: the redesign's card, whichever class the piece was written with. */
:is(.insights-panel,#my-usage-root) :is(section.ds-card,section.ic-part,section.ir-card,article.people-card,article.insights-whatif,.insights-kind),
:is(.insights-panel,#my-usage-root) .lx-card{min-width:0;margin:0;padding:20px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:none}
:is(.insights-panel,#my-usage-root) section.lx-sect{padding:0;border:0;background:transparent;gap:12px}
:is(.insights-panel,#my-usage-root) :is(section.ds-card,section.ic-part,section.ir-card,article.people-card,article.insights-whatif)>:is(h3,h4):first-child{margin:0 0 14px;font-size:var(--ds-fs-lg);font-weight:650;letter-spacing:-.01em}
:is(.insights-panel,#my-usage-root) :is(h4,h5){margin:0;color:var(--ds-text);font-size:14px;font-weight:650}
:is(.insights-panel,#my-usage-root) .lx-card-h{margin-bottom:14px}
:is(.insights-panel,#my-usage-root) .lx-card-h .help-trigger{flex:none}
/* Figures side by side: a name, the figure, what it is of. */
:is(.insights-panel,#my-usage-root) .lx-stat{padding:0;gap:4px}
:is(.insights-panel,#my-usage-root) .lx-stat .lx-fig-s{display:block}
:is(.insights-panel,#my-usage-root) .lx-stat .lx-lbl{display:flex;align-items:center;gap:6px}
.insights-kinds .insights-kind{padding:0;border:0;background:transparent}
/* 비용 요약 as the design draws it: 20px between the kinds, a 22px figure (the old sheet's 12px and 20px). */
.insights-kinds{gap:20px}
.insights-kinds .insights-amount{margin:0;overflow-wrap:anywhere;font-size:22px;letter-spacing:-.02em}
.insights-kinds .insights-amount>.lx-na{font-size:22px;font-weight:600;line-height:1.2}
/* A button that is a piece of its own in an analysis keeps its own width (the column would stretch it). */
:is(.insights-panel,#my-usage-root)>:is(button,a).lx-btn,:is(.insights-panel,#my-usage-root) :is(section,.lx-card,.lx-sect)>:is(button,a).lx-btn{align-self:flex-start;width:auto}
/* A share as a bar under its figure. */
.lx-bar.ir-share{display:block;width:100%;max-width:160px;height:6px;margin:6px 0 2px;border:0}
td .lx-bar.ir-share{margin-left:auto}
/* A sort button in a column's head is the column's name (insights-chart.js). */
.insights-sort,.insights-sort:is(:hover,:active,:focus){padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:none;color:inherit;font:inherit;cursor:pointer}
.insights-sort:hover{text-decoration:underline}
/* A table of an analysis: the redesign's rows, whichever class it was written with. */
:is(.insights-panel,#my-usage-root) table.insights-table{width:100%;border-collapse:collapse;font-size:14px}
:is(.insights-panel,#my-usage-root) table.insights-table :is(th,td){padding:9px 6px;border:0;border-bottom:1px solid var(--ds-line);background:transparent;color:var(--ds-text);font-size:14px;font-weight:400;text-align:left;vertical-align:middle}
:is(.insights-panel,#my-usage-root) table.insights-table th{padding:8px 6px;color:var(--ds-text-3);font-size:13px;font-weight:500;white-space:nowrap}
:is(.insights-panel,#my-usage-root) table.insights-table tbody tr:last-child td{border-bottom:0}
/* A row of data keeps the redesign's 46px; the one cell of an empty state (colspan) does not. */
:is(.insights-panel,#my-usage-root) table.insights-table tbody td:not([colspan]){height:46px}
/* 명세 16절: the whole row answers a pointer with the accent at 8% (the cells carry it, as the shared .lx-t does; an empty-state row and a selected row do not). */
:is(.insights-panel,#my-usage-root) table.insights-table tbody tr:not(.lx-is-sel):not([aria-selected="true"]):not(:has(>td[colspan])):hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
:is(.insights-panel,#my-usage-root) table.insights-table tr:is(.lx-hl,.insights-row-open):hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
:is(.insights-panel,#my-usage-root) table.insights-table tr[aria-selected="true"] td{background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
:is(.insights-panel,#my-usage-root) table.insights-table :is(th,td):is(.insights-num,.ir-num,.lx-r){text-align:right}
:is(.insights-panel,#my-usage-root) table.insights-table td .lx-sub{font-size:13px}
:is(.insights-panel,#my-usage-root) table.insights-table th button{padding:0;border:0;background:none;box-shadow:none;color:inherit;font:inherit;cursor:pointer}
.insights-search{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--ds-text-2);font-size:13px;font-weight:600}
.insights-search input{width:min(280px,100%)}
.insights-pager [data-pager-said]{margin-right:auto}
.insights-detail{margin-top:12px;padding:16px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface)}
.insights-detail:empty{display:none}

/* ---------- 인젝션 시도 ---------- */
.ic-passed{color:var(--ds-caution-text)}
/* The counts under the sentence: name, figure and unit as one piece each, a dot between pieces. */
.ic-figures{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.ic-fig{display:inline-flex;align-items:baseline;gap:0;white-space:nowrap}
.ic-fig>span:first-child{margin-right:6px}
.ic-fig strong{color:var(--ds-text);font-weight:650}
.ic-fig small{margin-left:4px;font-size:inherit}
.ic-side{gap:16px}
/* The steps one under another on a line (the older sheet drew them as boxes side by side). */
.ic-chain{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin:0!important;padding:0;list-style:none;font-size:14px}
.ic-step{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:0 0 14px 20px;border:0;border-radius:0;background:transparent}
.ic-step::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--ds-line-strong)}
.ic-step::after{content:"";position:absolute;left:6.5px;top:18px;bottom:-2px;width:1px;background:var(--ds-line)}
.ic-step:last-child{padding-bottom:0}
.ic-step:last-child::after{display:none}
.ic-step[data-chain="detected"]::before,.ic-step[data-detected]::before{background:var(--ds-danger)}

/* ---------- 실행 결과 · 실행 종료 현황 ---------- */
.ir-tiles{align-items:start}
[data-ir-card="summary"] .ir-tiles:has([data-outcomes-why]){grid-template-columns:repeat(3,minmax(0,1fr))}
[data-ir-card="summary"] .ir-tile,[data-ir-card="summary"] .ir-tile:has([data-outcomes-why]){display:flex;flex-direction:column;grid-column:auto;order:0;gap:4px;padding:0;border:0;background:transparent}
[data-ir-card="summary"] .ir-figure{margin:0}
/* A figure nobody has is the figure's size, in grey (the older sheet shrank the whole tile's figure to a note). */
[data-ir-card="summary"] .lx-stat.ir-tile .lx-fig-s.ir-figure{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ds-text)}
:is(.insights-panel,#my-usage-root) .lx-fig-s>.lx-na{font-weight:600}
[data-ir-card="summary"] .ir-why{flex:none}
.ir-next{display:flex;flex-direction:column;align-items:center;gap:6px}
.ir-next p{margin:0}
.ir-next .lx-btn{margin-top:6px}
[data-outcomes-kept]{font-size:13px}

/* ---------- 내 사용량 ---------- */
.mu-limit{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.mu-limit+.mu-limit{margin-top:4px}
#my-usage-root [data-my-self]{gap:16px}
#my-usage-root .lx-kv+.lx-kv{margin-top:8px}

/* ---------- 운영 알림 처리 상태 · 받는 곳(웹훅) ---------- */
.notify-counts.lx-lede{font-size:16px}
.insights-panel .notify-tabs{gap:6px;margin:0}
.insights-panel .people-alerts{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.insights-panel .people-alerts li{border-bottom:1px solid var(--ds-line);background:transparent}
.insights-panel .people-alerts li:last-child{border-bottom:0}
.insights-panel .people-alerts .pa-cols{color:var(--ds-text-3);font-size:13px;font-weight:500}
.pa-sev:empty{display:none}
.pa-what{gap:6px}
.pa-channels{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.pa-delivery{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}

/* ---------- 증거 팩 · 목적 제한 ---------- */
.ic-mark.ic-quiet .lx-st{color:var(--ds-text-3)}
.ic-limit-edit label{display:inline-flex;align-items:center;gap:6px;margin:0 12px 0 0;color:var(--ds-text);font-size:14px;font-weight:400;white-space:nowrap}
.ic-limit-edit input[type="checkbox"]{width:16px;height:16px;margin:0;padding:0}
/* On a phone the purpose form is a list: a unit is a block (its declaration and name on the first line), and each
   group of boxes stands under its column's name, so nothing is past the card's edge (the table was 402px wider). */
@media(max-width:600px){
  .ic-limit-edit,.ic-limit-edit tbody{display:block;width:100%}
  .ic-limit-edit thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ic-limit-edit tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--ds-line)}
  .ic-limit-edit tbody tr:last-child{border-bottom:0}
  /* (a cell of the shared table is 46px high: here it is as high as what it holds, or a group of boxes that wraps
     reached 31px into the next unit's block.) */
  :is(.insights-panel,#my-usage-root) table.insights-table.ic-limit-edit :is(tr,td){height:auto}
  :is(.insights-panel,#my-usage-root) table.insights-table.ic-limit-edit td{display:block;padding:0;border:0}
  :is(.insights-panel,#my-usage-root) table.insights-table.ic-limit-edit td:nth-child(n+3){flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px 12px}
  .ic-limit-edit td:nth-child(n+3)::before{flex:0 0 100%;color:var(--ds-text-3);font-size:13px;font-weight:500}
  .ic-limit-edit td:nth-child(3)::before{content:"허용할 화면 목적"}
  .ic-limit-edit td:nth-child(4)::before{content:"뺄 위험 신호"}
  .ic-limit-edit label{margin:0}
}
.ic-limit-save{margin-top:12px}
.ic-limit-save label{display:inline-flex;align-items:center;gap:8px;color:var(--ds-text-2);font-size:13px;font-weight:600}
.ic-limit-save select{width:auto;min-width:200px}
/* A choice inside an analysis is the shared select (34px, 500) at its own width, beside its label -- not the row's
   (조직·앱·키별로 나눠 보기 stood 38px high, 400, with the old sheet's padding). */
:is(.insights-panel,#my-usage-root) select.lx-in{width:auto;max-width:100%}
.ic-limit-bar{display:inline-flex;align-items:center;gap:8px}
.ic-limit-bar[hidden]{display:none}
.ic-limit-units{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ic-limit-units li{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px}
.ic-limit-history{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:14px}
[data-limit-history][hidden]{display:none}

@media(max-width:900px){
  .insights-pop-body{right:auto;left:0}
  .insights-head .insights-pop:last-child .insights-pop-body{right:0;left:auto}
  [data-ir-card="summary"] .ir-tiles:has([data-outcomes-why]){grid-template-columns:minmax(0,1fr)}
  .insights-lede{font-size:18px}
}

/* A row of the 인젝션 시도 table has no colour of its own: its state is the dot and word in the row (an older
   sheet tints anything marked data-incident). */
:is(.insights-panel,.insights-place) tr[data-incident]{background:transparent}

/* The incident list and the evidence pack's tables stand in cards, as the design draws a table. */
.ic-list-card,.ic-pack-card{display:flex;flex-direction:column;gap:12px}
.lx-card>table.insights-beside{margin:0}
.ic-list-card>.lx-lbl,.ic-pack-card>.lx-h3{margin:0}
.ic-list-card .insights-search{margin:0}

/* In the frame's page (main.lx-page: 24/28/40 and a 20px gap between its pieces) the place adds no space of its own. */
.lx-page>.insights-place,.lx-page>#insights-root,.lx-page>#my-usage-root{margin-top:0}

/* With the incident's panel open the list keeps the time and the action: the rest is said in the panel. A list
   wider than its card scrolls inside it. */
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .ic-list table :is(th,td):nth-child(n+3){display:none}
.ic-list .table-wrap{overflow-x:auto}

/* A table an analysis writes straight into its panel (no section of its own) stands in a card, as the design draws
   every table; its title is the heading over it. */
.insights-panel>:is(.table-wrap,[data-table]:not(:empty)),.insights-panel>div:not([class])>:is(.table-wrap,[data-table]:not(:empty)){box-sizing:border-box;min-width:0;padding:8px 20px 12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);overflow-x:auto}
.insights-panel>:is(h3,h4){margin:8px 0 -6px;font-size:var(--ds-fs-lg);font-weight:650;letter-spacing:-.01em}

/* A head of an analysis table wraps between words instead of widening the table past its card (1280 in the frame). */
:is(.insights-panel,#my-usage-root) table.insights-table th{white-space:normal;word-break:keep-all}
/* (break-word, not anywhere: a short name keeps its column's width and is not cut letter by letter.) */
:is(.insights-panel,#my-usage-root) table.insights-table td{overflow-wrap:break-word;word-break:keep-all}
/* The old sheet's 760px floor for a table in a wrap does not hold here: the columns that leave make it fit its card. */
:is(.insights-panel,#my-usage-root) .table-wrap table,.ic-list .table-wrap table{min-width:0}
/* 데이터 처리 지역: the old sheet's 9rem floor under its first three columns (three of them alone were 527px in a
   316px card, the eleven 873px in 764px at 1280) does not hold here; an id or a name wraps inside its cell. */
:is(.insights-panel,#my-usage-root) table.insights-table.people-regions td:nth-child(-n+3){min-width:0;overflow-wrap:anywhere}
:is(.insights-panel,#my-usage-root) table.insights-table .lx-dropsum{margin-top:2px;font-size:13px;font-weight:400}
/* The narrow list for a table an analysis wrote by hand (.insights-table without .lx-t): RF1's .lx-drop rule, word for
   word, so the grey line is drawn only when its cells have left. */
.insights-table .lx-dropsum{display:none}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .insights-table .lx-drop{display:none}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .insights-table .lx-dropsum{display:block}
@media(max-width:1100px){
  .insights-table .lx-drop{display:none}
  .insights-table .lx-dropsum{display:block}
}
/* A first line too narrow for its sentence and its period puts the period under it (as .gwc-first does). */
.insights-head{flex-wrap:wrap;row-gap:8px}
.insights-head>.insights-lede{flex:1 1 15em;min-width:min(100%,15em)}
/* On a phone a choice of the first line (분석, 기간, 내보내기) opens across the page, inside its 16px sides. */
/* (fixed with no top keeps its place under the button and takes the page's width: RF1's way for every pop-over.) */
@media(max-width:600px){
  .insights-pop-body,.insights-head .insights-pop:last-child .insights-pop-body{position:fixed;left:16px;right:16px;top:auto;width:auto;min-width:0;max-width:none}
}

/* The shared table (`table.lx-t`, rf1) is display:table on the element itself, which the phone rules above and in
   screens-operations.css (a `.ic-limit-edit` or `.pc-items` as display:block / a row as flex) did not outrank where the
   table is not inside .insights-panel (the 증거 팩 · 준수 screen, 390px: 1081px wide). On a phone the table, its body and
   its cells are blocks, so each row stands as the rules above draw it. */
@media(max-width:760px){
  table.lx-t.pc-items,table.lx-t.pc-items tbody{display:block;width:100%}
  table.lx-t.pc-items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.lx-t.pc-items :is(td,th){height:auto;white-space:normal}
}
@media(max-width:600px){
  table.lx-t.ic-limit-edit,table.lx-t.ic-limit-edit tbody{display:block;width:100%}
  table.lx-t.ic-limit-edit :is(tr,td){height:auto}
  table.lx-t.ic-limit-edit td{display:block;padding:0;border:0}
  table.lx-t.ic-limit-edit td:nth-child(n+3){flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px 12px}
}