/* RM8 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.

   What is here is what the parts do not say of this track's two screens: LLM Gateway › 키 · 앱 (.gwk, the key part's
   places [data-cp-slot]) and 모델 연결 (.mcx, its panel's .mcx-detail and .mcx-form-panel). A state colour on words is
   its -text token. */

/* The two screens' own wrappers keep the page's rhythm between its rows; its margins are the frame's (main.lx-page),
   given once. */
.gwk,.mcx{display:flex;flex-direction:column;gap:20px;min-width:0}
/* Beside an open panel a list is as wide as the room left (320px beside a wide panel at 1280): its columns share
   that room -- the name near half -- and a line too long for its cell ends in … (the panel says it whole), so the
   state and the count stay in view. The first row's sentence keeps a line's width and what stands beside it goes
   under. */
.lx-split:has(>.lx-aside) :is(.gwk-table,.mcx-table){table-layout:fixed;width:100%}
.lx-split:has(>.lx-aside) :is(.gwk-table,.mcx-table) :is(th,td){overflow:hidden;text-overflow:ellipsis}
.lx-split:has(>.lx-aside) :is(.gwk-table,.mcx-table) :is(th,td):first-child{width:46%;max-width:none}
/* A part of a line kept whole elsewhere breaks there, where its cell is narrower than it. */
.lx-split:has(>.lx-aside) .mcx-table .mcx-whole{white-space:normal}
/* What a key's grey line says of its state and its requests only in a window of 720px or less (below; said before
   that rule, which is as strong as this one). */
.gwk-narrow{display:none}
/* A window under 1100px gives a list the same room (beside the frame's menus at 1024 a key's four cells were wider
   than the page and the table ran past its right edge): the same sharing of it, from where the shared sheet takes
   the .lx-drop cells out. */
@media(max-width:1100px){
  :is(.gwk-table,.mcx-table){table-layout:fixed;width:100%}
  :is(.gwk-table,.mcx-table) :is(th,td){overflow:hidden;text-overflow:ellipsis}
  :is(.gwk-table,.mcx-table) :is(th,td):first-child{width:46%;max-width:none}
  .mcx-table .mcx-whole{white-space:normal}
}
@media(max-width:720px){
  /* A key's row there is its name and who answers for it: its state and its requests are not cells as well -- the
     grey line under the name says them first (.gwk-narrow, gw-console-keys.js briefOf), so a value stands in a row
     once (명세 6.6; QA gw-keys key-row-says-…, 700px). The name has the room the two cells gave back. */
  .gwk-table[data-gwc-keys] :is(th[data-gwk-col="state"],td[data-gwc-key-state],th[data-gwk-col="attempts"],td[data-gwc-attempts]){display:none}
  .gwk-table[data-gwc-keys] :is(th,td):first-child{width:60%}
  .gwk-narrow{display:inline}
}
/* 직원 키 in that room: the month's amount and the row's buttons keep the width of what they say -- an amount is
   never cut (beside the panel at 1280 the shared thirds left US$1,234.56 78px) -- and the name takes the rest, on
   as many lines as it needs; a column's name longer than its cell goes on a second line. */
.lx-split:has(>.lx-aside) [data-mc-keys-list] .mcx-table{table-layout:auto}
.lx-split:has(>.lx-aside) [data-mc-keys-list] .mcx-table :is(th,td):first-child{width:auto}
.lx-split:has(>.lx-aside) [data-mc-keys-list] .mcx-table th,.lx-split:has(>.lx-aside) [data-mc-keys-list] .mcx-table th>.mcx-sort{white-space:normal}
@media(max-width:1100px){
  [data-mc-keys-list] .mcx-table{table-layout:auto}
  [data-mc-keys-list] .mcx-table :is(th,td):first-child{width:auto}
  [data-mc-keys-list] .mcx-table th,[data-mc-keys-list] .mcx-table th>.mcx-sort{white-space:normal}
}
.mcx [data-mc-first-row]>.lx-lede{flex:1 1 15em;min-width:min(100%,15em)}

/* What is hidden is hidden, whatever its part's display (a field, a note and a row are flex). */
:is(.gwk,.mcx,.mcx-detail,.mcx-form-panel,[data-cp-slot]) [hidden],:is(.mcx-form-panel,[data-cp-slot])>[hidden]{display:none!important}

/* A second line under a value (the screens' <small>): the parts' .lx-sub. */
:is(.gwk,.mcx,.mcx-detail,.mcx-form-panel,[data-cp-slot]) small{display:block;color:var(--ds-text-3);font-size:13px;font-weight:400}
:is(.gwk,.mcx,.mcx-detail,.mcx-form-panel,[data-cp-slot]) :is(code,pre){font-family:var(--ds-font-mono);font-size:13px;letter-spacing:0}
:is(.gwk,.mcx,.mcx-detail,.mcx-form-panel,[data-cp-slot]) pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ds-text-2)}

/* A fold: its summary is one quiet line, what it holds under it. */
:is(.gwk-fold,.mcx-fold)>summary{width:fit-content;color:var(--ds-text-2);font-size:13px;font-weight:500;cursor:pointer}
:is(.gwk-fold,.mcx-fold)>summary:hover{color:var(--ds-text)}
:is(.gwk-fold,.mcx-fold)[open]>summary{margin-bottom:8px}
:is(.gwk-lines,.mcx-lines){display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:13px}

/* ---------- 키 · 앱 ---------- */
/* The finder's row goes under itself beside an open panel (the first row does by the common sheet, RM5's). */
.gwk [data-gwc-keys-find]{flex-wrap:wrap}
.gwk [data-gwc-keys-find]>.lx-find{flex:1 1 220px}
/* A key's panel: ⋯ stands at the end of the line that says its state. */
[data-gwk-panel="key"]{position:relative}
[data-gwk-panel="key"]>[data-gwk-panel-top]{padding-right:40px}
[data-gwk-panel="key"] [data-cp-slot="key"] [data-lx-more="cp-key"]{position:absolute;top:-6px;right:0}
.gwk-notes:empty,.mcx-notes:empty{display:none}
.gwk-chips{gap:8px}
.gwk-figure{color:inherit;text-decoration:none}
.gwk-figure:hover{color:var(--ds-accent-text)}
/* A name in a table is one line, cut with its whole on hover; a row's cells keep to the top line of a tall row. */
:is(.gwk-name,.mcx-name){display:block;max-width:100%}
.gwk-table td:first-child,.mcx-table td:first-child{max-width:340px}
/* Keep every key column reachable inside the list when its minimum width exceeds the page.
   Expiry and Gateway receipt are full sentences, so they wrap instead of setting the state column's minimum width. */
.gwk-table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto}
.gwk-table-scroll .gwk-table[data-gwc-keys] th{white-space:normal}
.gwk-table-scroll [data-gwc-key-state] .gwk-key-status{white-space:normal;overflow-wrap:anywhere}

.gwk-limit{white-space:nowrap}
.gwk-differs{color:var(--ds-caution-text)}
.gwk-gaps{white-space:normal}
.gwk-hold{padding:10px 0;border-bottom:1px solid var(--ds-line)}
.gwk-hold:last-child{border-bottom:0}

/* ---------- 모델 연결 ---------- */
/* The page's header of before (index.html: a title and 새로고침) is not drawn: the button stands in the page's first
   row (model-connections.js adopt), and the room the old sheet kept beside the root for it is given back. */
[data-page="connections"]>.content-header{display:none}
#connections-root>:first-child{min-height:0;margin-right:0}
.mcx-figure{color:inherit;text-decoration:underline;text-decoration-color:var(--ds-line-strong);text-underline-offset:4px}
.mcx-figure:hover{color:var(--ds-accent-text)}
/* A table's head that orders its column: the head's own look, pressed. */
button.mcx-sort{min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer;filter:none;transform:none}
button.mcx-sort:hover{background:transparent;color:var(--ds-text)}
.mcx-table td{vertical-align:top}
.mcx-hint{color:var(--ds-caution-text)!important}
.mcx-whole{white-space:nowrap}
/* An amount is one word: a cell too narrow for it does not break it inside the number (390px, 직원 키). */
.mcx-table :is([data-mc-key-month],[data-mc-key-charged]){white-space:nowrap}
.mcx-budget-note{margin:0}
/* A name and its value, in the panel and in a fold. */
.mcx-kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:2px 16px;align-items:start;font-size:14px}
.mcx-kv>span:first-child{color:var(--ds-text-3);font-size:13px}
.mcx-kv>span:last-child{min-width:0}
.mcx-relay-notice{margin:0}
/* A form: a name over its box, a tick beside its words, a group under its heading. */
.mcx-form{gap:14px}
.mcx-form label{display:flex;flex-direction:column;gap:6px;margin:0;color:var(--ds-text-2);font-size:13px;font-weight:600}
.mcx-form label:has(>input:is([type="checkbox"],[type="radio"])){flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--ds-text);font-size:14px;font-weight:400}
.mcx-form label:has(>input:is([type="checkbox"],[type="radio"]))>small{flex:1 0 100%;padding-left:24px}
.mcx-form input:is([type="checkbox"],[type="radio"]){width:16px;height:16px;flex:none;margin:0;accent-color:var(--ds-accent)}
.mcx-set{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.mcx-set>legend{margin-bottom:4px;padding:0;color:var(--ds-text);font-size:14px;font-weight:650}
.mcx-settings{max-width:720px}
/* 허용 is a switch (.lx-sw of redesign-rf1.css) on a checkbox: the browser's own box is dropped, the form still sends it. */
.mcx-settings .mcx-sw{gap:8px;margin:0;cursor:pointer;justify-content:flex-start}
.mcx-settings input.lx-sw{appearance:none;-webkit-appearance:none;width:34px;height:20px;margin:0}
.mcx-settings input.lx-sw:disabled{opacity:.55;cursor:not-allowed}
.mcx-settings input.lx-sw:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
/* (A heading of the form stands by the page's own gap, as the parts lay it.) */
.mcx-settings>.lx-h2:not(:first-child){margin-top:12px}
button.mcx-link{font-size:inherit}
/* The steps of 기기 설정 방법 are counted. */
.mcx-guide{max-width:760px}
.mcx-guide h4{margin:8px 0 0;color:var(--ds-text);font-size:14px;font-weight:650}
ol.mcx-steps,ul.mcx-steps{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:20px;color:var(--ds-text-2);font-size:14px}
ol.mcx-steps{list-style:decimal}
ul.mcx-steps{list-style:disc}
.mcx-failed>span{display:block}