/* RM9 Gateway 기록 -- 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.
   Screens: 요청 기록 (gw-console-requests.js), 비용 (gw-console-cost.js with usage-report.js),
   운영 상태 (gw-console-ops.js). Every class is rm9-. */

/* ---------- The page: its first row over a body an analysis can take the place of ---------- */
.rm9-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.rm9-body:empty,.rm9-body[hidden]{display:none}
.rm9-empty-act{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rm9-piece{display:inline-block}
.rm9-line{margin:0;color:var(--ds-text-2);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.rm9-line b{color:var(--ds-text)}
.rm9-slot:not([hidden]){display:flex;flex-direction:column;gap:8px;min-width:0}
.rm9-records{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;color:var(--ds-text-2);font-size:13px;line-height:1.55}
.rm9-records li{overflow-wrap:anywhere}
.rm9-page code,.rm9-records code{font-family:var(--ds-font-mono);font-size:var(--ds-fs-xs);overflow-wrap:anywhere}

/* A part folded under its own name (a run's attribution, the company's whole usage) and a record as sent (원문). */
.rm9-fold{border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface)}
.rm9-fold>summary{padding:12px 16px;color:var(--ds-text);font-size:14px;font-weight:600;cursor:pointer}
.rm9-fold>summary:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px;border-radius:10px}
.rm9-fold>[data-gwc-company-usage-host]{display:flex;flex-direction:column;gap:12px;min-width:0;padding:4px 16px 16px}
.rm9-raw>summary{color:var(--ds-text-3);font-size:13px;cursor:pointer}
.rm9-raw>code{display:block;margin-top:6px;white-space:pre-wrap}

/* ---------- Figures in one row (비용's four kinds, 운영 상태's five) ---------- */
.rm9-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.rm9-stats .lx-stat{background:var(--ds-surface-2)}

/* ---------- The row over a table: chips, 거르기, find and order ---------- */
.rm9-conditions,.rm9-tools{row-gap:8px}
.rm9-find{flex:0 1 260px;min-width:160px}
/* The request list's find gives way first, so the decisions, 거르기, the find and the order stand on one line at 1280. */
.rm9-conditions>.rm9-find.lx-push{flex:1 1 150px;max-width:260px;min-width:0}
.rm9-conditions>.lx-push{flex-wrap:nowrap}
.rm9-conditions>.lx-push>.lx-in{width:240px}
.rm9-pick{display:inline-flex;align-items:center;gap:8px;margin:0}
.rm9-pick .lx-flabel{font-weight:500;white-space:nowrap}
.rm9-chip-x{display:grid;place-items:center;width:18px;height:18px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:500 14px/1 var(--ds-font);cursor:pointer}
.rm9-chip-x:hover{background:var(--ds-surface);color:inherit}
span.lx-chip{cursor:default}
.rm9-filter-box:not([hidden]){display:flex;flex-direction:column;gap:12px}
.rm9-filter-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rm9-reasons .lx-chip .reason-label,.rm9-conditions .lx-chip .reason-label{color:inherit}
.rm9-handed{padding:8px 12px;border-radius:10px;background:var(--ds-surface-2)}
.rm9-from{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.rm9-kept{margin:12px 0 0;padding:12px;border:1px dashed var(--ds-line-strong);border-radius:12px;opacity:.75}

/* A value of a row that asks for the rows of that value, and a column's head that orders the page. */
.rm9-pick-value,.rm9-sort{display:inline;max-width:100%;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rm9-pick-value:hover{background:transparent;color:var(--ds-accent-text);text-decoration:underline}
.rm9-sort{color:var(--ds-text-3);font-weight:500;white-space:nowrap}
.rm9-sort:hover{background:transparent;color:var(--ds-text)}
[aria-sort]>.rm9-sort{color:var(--ds-text)}
button.rm9-pick-value.lx-ell{display:block}
/* In a cell's line that cuts (.lx-ell, 명세 6.6) the value is the box that cuts: a button is one piece of its line, so
   a name wider than the cell (a key's in 83 px at 1024) ran past the cell's edge with no … at its end. A line that
   says a word before the value (앱) keeps that word's room, or the whole value would give way to the …. */
.lx-ell>.rm9-pick-value{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.lx-sub.lx-ell>.rm9-pick-value{max-width:calc(100% - 1.6em)}

/* ---------- The tables' columns ---------- */
/* 5: the name that cuts is the first to widen -- 키 · 앱 takes the room 정책 (v6) left empty (T19-4 B 53). Each row is its
   own grid, so the share moves by fr, not by its content. */
.rm9-req-cols{grid-template-columns:minmax(0,1.5fr) 104px minmax(0,1.8fr) minmax(0,1.1fr) minmax(0,.6fr)}
.rm9-protection-cols{grid-template-columns:168px minmax(0,1.2fr) minmax(0,1.4fr) auto}
/* A request's panel open beside the list: the list keeps the verdict, the time and who asked; the model and the policy
   are the panel's (redesign 6.4: the list stays readable beside a wide panel). Where the page has room beside the
   panel (data-lx-roomy, portal-ui.js; 2560) it keeps every column. */
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .rm9-req-cols{grid-template-columns:minmax(0,1.4fr) 104px minmax(0,1.2fr)}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .rm9-req-cols>:nth-child(n+4){display:none}
/* The session list beside its panel likewise: 키, 요청 and 비용 (the models and the last request are in the panel; five
   columns in that width stood the counts one letter a line). A session's first column is whose it is (6.6, T19-4 B 148). */
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .rm9-session-cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr)}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .rm9-session-cols>:is(:nth-child(3),:nth-child(4)){display:none}
.rm9-session-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.2fr) 104px minmax(0,.9fr)}
.rm9-cost-cols{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)) minmax(0,.8fr) auto}
:is(.rm9-req-cols,.rm9-session-cols,.rm9-protection-cols).lx-tr:not(.lx-th){align-items:start}
.lx-tr:focus-visible{outline:2px solid var(--ds-focus);outline-offset:-2px;border-radius:8px}

/* ---------- One request, session or run beside or in place of its list ---------- */
.rm9-panel-state{align-items:baseline}
.rm9-stage-said{font-size:13px}

/* ---------- 운영 상태's cards and 비용's company usage ---------- */
.rm9-ops-cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rm9-usage-views{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rm9-count{gap:12px}
.rm9-bar{flex:0 0 96px;height:6px;border-radius:999px;background:var(--ds-surface-3);overflow:hidden}
.rm9-bar>i{display:block;height:100%;border-radius:inherit;background:var(--ds-accent)}
.rm9-num{flex:none;min-width:56px;font-weight:650;text-align:right}
/* A card's line: the name keeps its words on one line, and the value takes the rest and may wrap under it (a narrow
   card at 1280 squeezed the name to a letter a line). */
.rm9-ops-cards .lx-li:not(.rm9-count){flex-wrap:wrap}
.rm9-ops-cards .lx-li:not(.rm9-count)>.lx-grow{flex:1 0 auto;white-space:nowrap}
.rm9-line-value{flex:0 1 auto;min-width:0;color:var(--ds-text-2);text-align:right}
.rm9-card-foot{margin:10px 0 0;color:var(--ds-text-3);font-size:13px}
.rm9-source-line{margin:0;color:var(--ds-text-3);font-size:13px}
.rm9-source-split{display:inline-block}
.rm9-narrow{display:none}

/* ---------- Narrow: a row is a stack of its cells, each under its own name ---------- */
@media(max-width:900px){
  :is(.rm9-req-cols,.rm9-session-cols,.rm9-protection-cols,.rm9-cost-cols).lx-tr{grid-template-columns:minmax(0,1fr);row-gap:6px}
  /* The heads stay for a reader that names columns by them: out of sight, not out of the tree. */
  :is(.rm9-req-cols,.rm9-session-cols,.rm9-protection-cols,.rm9-cost-cols).lx-th{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  :is(.rm9-req-cols,.rm9-session-cols,.rm9-cost-cols)>[data-label]::before{content:attr(data-label);color:var(--ds-text-3);font-size:12px}
  :is(.rm9-req-cols,.rm9-session-cols,.rm9-cost-cols)>[data-label]:not([data-label=""])::before{margin-right:8px}
  .rm9-cost-cols>.lx-r,.rm9-session-cols>.lx-r{justify-self:start;text-align:left}
  .rm9-find{flex:1 1 100%}
  .rm9-conditions>.lx-push{flex:1 1 100%;margin-left:0}
  .rm9-conditions>.lx-push>.lx-in{flex:1 1 auto;width:auto;min-width:0}
  .rm9-narrow{display:inline-flex}
}
/* The first row beside an open panel (the frame's split narrows the page): its sentence keeps a line's width and the
   period goes under it. The row is the common one (.gwc-first, RM5's); RM8 asked its writer for the same as a common
   rule, and this goes once that lands. */
.rm9-page .gwc-first{flex-wrap:wrap;row-gap:8px}
.rm9-page .gwc-first>.lx-lede{flex:1 1 15em;min-width:min(100%,15em)}
/* A chosen 직접 정하기 puts the range buttons on a line and the two instants with 기간 적용 on the next, so the three
   no longer split across lines one by one at 1280 (PC3 N02); the common markup is unchanged. */
.rm9-page .gw-period:has(.gw-period-at)>.lx-seg{flex:1 1 100%}
/* The collection mark of two words stays one line beside an open panel (it broke into 수집 / 중 at 1280). */
.rm9-page [data-gwc-collection="collected"]{white-space:nowrap}
/* 자세히 (a request's and a session's raw values, in the panel): name and value in two columns, the value whole in
   mono. It was the old sheet's .gw-tech; the panel stands outside .rm9-page, so its code is named here too. */
.rm9-tech{display:grid;gap:4px;margin:0}
.rm9-tech>div{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);column-gap:12px;align-items:baseline}
.rm9-tech dt{color:var(--ds-text-3);font-size:var(--ds-fs-xs)}
.rm9-tech dd{min-width:0;margin:0}
.rm9-tech code{padding:0;background:none;font-family:var(--ds-font-mono);font-size:var(--ds-fs-xs);overflow-wrap:anywhere;white-space:normal}
/* 회사 전체 사용량's cost kinds: a kind's name keeps its width and its two record sums go under it where the card is
   narrow (the name stood one letter a line beside the sums). */
[data-usage-kinds] .lx-li{flex-wrap:wrap;row-gap:2px}
[data-usage-kinds] .lx-li>.lx-cell{flex:1 1 9em;min-width:9em}
[data-usage-kinds] .lx-li>.lx-sub{flex:1 1 18em;min-width:0;white-space:normal;overflow-wrap:anywhere}