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

/* The page: the old card around the panel is gone, the sections stand on the page (redesign 9.1). */
#cp-policy-panel{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.rm6-page{min-width:0;color:var(--ds-text);font:400 14px/1.5 var(--ds-font)}
.rm6-main{display:flex;flex-direction:column;gap:16px;min-width:0;container:rm6-main / inline-size}
/* Beside the 버전 기록 panel the page lays out by its own width (the container rules at the end). */
.rm6-main>:empty{display:none}
.rm6-main>p{margin:0}
.rm6-main :where(h4,h5,p,ul,ol,dl,dd,pre){margin:0}
.rm6-main :where(small){color:var(--ds-text-3);font-size:13px;font-weight:400}

/* First row: who it applies to, what is in force, 새로 고침. */
.rm6-top{gap:8px 14px}
.rm6-top>label.rm6-scope{margin:0;color:var(--ds-text-3);font-size:13px;font-weight:400}
.rm6-top>#cp-scope{flex:0 1 auto;min-width:160px;max-width:420px;text-overflow:ellipsis}
.rm6-top>#cp-scope-find{flex:0 1 260px;min-width:160px}
.rm6-top>#cp-scope-find:empty{display:none}
.rm6-top>label.lx-fc{font-size:13px;color:var(--ds-text-2)}
.rm6-top>label.lx-fc[hidden]{display:none}
.rm6-inforce{gap:6px 12px;min-width:0;color:var(--ds-text-3);font-size:13px}
.rm6-inforce:empty{display:none}
.rm6-inforce b{color:var(--ds-text);font-weight:600}
/* A read that failed is the shared note in its danger colour (.lx-note-bad), not the older sheet's bordered box with its mark. */
#cp-policy-status:is([data-cp-status="failed"],[data-cp-status="offline"]){display:block;margin:0;padding:10px 14px;border:0;border-radius:10px;background:var(--ds-danger-soft);box-shadow:none;color:var(--ds-danger-text);font-size:13px;line-height:1.5}
#cp-policy-status:is([data-cp-status="failed"],[data-cp-status="offline"])::before{content:none}
#cp-policy-status>.lx-btn{margin-left:8px;border-color:var(--ds-line-strong,var(--ds-line))}

/* Sections: a list on the left, one section's lines on the right. */
.rm6-set{display:flex;align-items:flex-start;gap:16px 28px;min-width:0}
.rm6-secnav{position:sticky;top:12px;flex:0 0 212px;display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:16px;border-right:1px solid var(--ds-line)}
button.rm6-sec-tab,button.rm6-sec-tab:is(:hover,:active,:focus){display:flex;align-items:center;gap:8px;width:100%;min-height:32px;margin:0;padding:5px 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;filter:none;transform:none;color:var(--ds-text-2);font:500 14px/1.4 var(--ds-font);text-align:left;cursor:pointer}
button.rm6-sec-tab:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);color:var(--ds-text)}
button.rm6-sec-tab:is(.lx-on,[aria-selected="true"]),button.rm6-sec-tab:is(.lx-on,[aria-selected="true"]):is(:hover,:active,:focus){background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-text);font-weight:650}
button.rm6-sec-tab:focus-visible{outline:2px solid var(--ds-focus);outline-offset:1px}
.rm6-sec-tab>.lx-n{margin-left:auto;min-width:20px;padding:0 6px;border-radius:999px;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-size:12px;font-weight:650;line-height:20px;text-align:center}
.rm6-secs{flex:1 1 0;min-width:0}
.rm6-sec{display:flex;flex-direction:column;min-width:0}
.rm6-sec[hidden]{display:none}
.rm6-sec>.lx-h2,.rm6-sec>h4{margin:0 0 4px}
.rm6-sec h5{margin:24px 0 8px;color:var(--ds-text-2);font-size:13px;font-weight:650;line-height:1.4}
.rm6-sec .lx-setrow:first-child{padding-top:16px}
.rm6-sec .lx-setrow .lx-sub{max-width:62ch}
.rm6-sec .lx-note{margin-top:12px}
.rm6-sec>.rm6-state,.rm6-sec>.lx-sub.rm6-state{text-align:left}
.rm6-sec [data-cp-layers-note]{margin-top:16px}
.rm6-sec .lx-note:has(>details){display:block}
.rm6-sec .lx-note>details.rm6-fold{margin-top:6px;border-top:0}
.rm6-sec .lx-note>details.rm6-fold>summary{min-height:24px;padding:0}
.rm6-sec .lx-note>details.rm6-fold[open]{padding-bottom:0}

/* A line's control: the box, and under it what the Gateway does with the value. */
.rm6-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;max-width:440px;text-align:right}
.rm6-ctl>.lx-in,.rm6-ctl>[data-cp-daily-budget]>.lx-in{width:240px;max-width:100%}
.rm6-ctl>.lx-in:is([inputmode="numeric"],[inputmode="decimal"]),.rm6-ctl>[data-cp-daily-budget]>.lx-in{width:132px;text-align:right;font-variant-numeric:tabular-nums}
.rm6-ctl>select.lx-sel{min-width:124px}
.rm6-ctl>textarea.lx-in{width:360px;height:auto;min-height:72px;padding:8px 10px;line-height:1.5;resize:vertical}
.rm6-ctl>.lx-row{justify-content:flex-end}
.rm6-ctl>.lx-fc{justify-content:flex-end}
.rm6-state{color:var(--ds-text-3);font-size:13px;text-align:right}
.rm6-state:empty{display:none}
.rm6-state-warn{color:var(--ds-caution-text);font-weight:500}
.help-trigger.rm6-info{width:18px;height:18px;min-width:18px;margin-left:4px;font-family:var(--ds-font);font-style:normal}
.rm6-page :is(.lx-in,input,select,textarea):disabled{background:var(--ds-surface-2);color:var(--ds-text-2);cursor:not-allowed;opacity:1}
button.rm6-figure,button.rm6-figure:is(:hover,:active,:focus){display:inline;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none;transform:none;color:var(--ds-accent-text);font:inherit;cursor:pointer}
button.rm6-figure:hover{text-decoration:underline}

/* Allowed models: chips with a remove mark, the find box under them. */
.rm6-models{display:flex;flex-wrap:wrap;gap:6px;min-width:0;padding:4px 0}
.rm6-model{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-height:30px;padding:0 4px 0 12px;border:1px solid var(--ds-line);border-radius:999px;background:var(--ds-surface);color:var(--ds-text)}
.rm6-model>.lx-mono{min-width:0;overflow-wrap:anywhere}
.rm6-model:not(:has(.rm6-x)){padding-right:12px}
button.rm6-x,button.rm6-x:is(:hover,:active,:focus){display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;filter:none;transform:none;color:var(--ds-text-3);font:400 16px/1 var(--ds-font);cursor:pointer}
button.rm6-x:hover{background:var(--ds-surface-3);color:var(--ds-text)}
button.rm6-x:focus-visible{outline:2px solid var(--ds-focus);outline-offset:1px}
.rm6-find{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.rm6-find>label{margin:0;color:var(--ds-text-3);font-size:13px;font-weight:400}
.rm6-find>input{flex:0 1 280px;width:auto;height:34px;margin:0;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:400 14px var(--ds-font)}
.rm6-chips,.rm6-picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.rm6-picks{justify-content:flex-end}
.rm6-picks:empty{display:none}

/* Folds: the long or rarely read parts of a section. */
details.rm6-fold{min-width:0;margin:0;padding:0;border:0;border-top:1px solid var(--ds-line);border-radius:0;background:transparent}
details.rm6-fold>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:40px;padding:8px 0;color:var(--ds-text-2);font-size:13px;font-weight:500;cursor:pointer}
details.rm6-fold>summary:hover{color:var(--ds-text)}
details.rm6-fold>summary:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
details.rm6-fold[open]{padding-bottom:12px}
details.rm6-fold>summary>h5{display:inline;margin:0;color:var(--ds-text);font-size:14px}
details.rm6-fold>summary>small{color:var(--ds-text-3)}
details.rm6-fold>summary>b{color:var(--ds-text);font-weight:600}
details.rm6-fold pre{max-height:320px;margin:0;padding:10px 12px;overflow:auto;border-radius:8px;background:var(--ds-surface-2);color:var(--ds-text-2);font:400 var(--ds-fs-xs)/1.5 var(--ds-font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
details.rm6-fold>ul{margin:0;padding:0 0 0 18px;color:var(--ds-text-2);font-size:13px}
.rm6-fold-sec{margin-top:20px}
.rm6-app>summary{justify-content:flex-start}
.rm6-app>summary .lx-sub{display:inline}

/* A row of boxes with their names over them (tool actions, an app's settings, the relay switch). */
.rm6-fields,#cp-f-actions>.rm6-fields[data-cp-mcp-row]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;min-width:0;margin:0;padding:12px 0;border-top:1px solid var(--ds-line)}
#cp-f-actions>.rm6-fields[data-cp-mcp-row]:first-child{border-top:0}
.rm6-fields>label:not(.lx-fc),#cp-f-actions>.rm6-fields[data-cp-mcp-row]>label:not(.lx-fc){display:flex;flex:1 1 150px;flex-direction:column;gap:4px;min-width:0;max-width:320px;margin:0;color:var(--ds-text-3);font-size:13px;font-weight:400}
.rm6-fields>label.lx-fc{flex:none;min-height:36px;font-size:13px}
.rm6-fields>:is(small,b),#cp-f-actions>.rm6-fields[data-cp-mcp-row]>:is(small,b){position:static;flex:1 1 100%;width:auto;height:auto;margin:0;overflow:visible;clip:auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
.rm6-fields>b{color:var(--ds-text);font-size:13px;font-weight:650}
.rm6-fields>label>:is(textarea).lx-in{height:auto;min-height:72px;padding:8px 10px;line-height:1.5}
.rm6-ctl>.rm6-fields{justify-content:flex-end;padding:0;border-top:0;text-align:left}

/* Lines that only say (scope budgets, Router readiness, replicas). */
.rm6-lines{margin:0;padding:0;list-style:none;border-top:1px solid var(--ds-line)}
.rm6-lines>li{padding:9px 0;border-bottom:1px solid var(--ds-line);color:var(--ds-text);overflow-wrap:anywhere}
.rm6-line{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 16px;min-width:0;padding:10px 0;border-bottom:1px solid var(--ds-line)}
.rm6-line>div{min-width:0}
.rm6-line b{font-weight:600}

/* The changes bar's list of what was changed. */
.rm6-changes{flex:1 1 100%;margin:0;padding:0 0 0 18px;color:var(--ds-text-2);font-size:13px;font-weight:400}

/* 버전 기록 panel: version rows, the stages of the picked version, the company rollout. */
#cp-versions-seg{margin-bottom:4px}
#cp-versions-body,#cp-rollout-host{display:flex;flex-direction:column;gap:16px;min-width:0}
#cp-versions-body[hidden],#cp-rollout-host[hidden]{display:none}
#cp-versions-body>:empty,#cp-rollout-host:empty{display:none}
#cp-policy-versions{display:flex;flex-direction:column;min-width:0}
.rm6-ver{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px;min-width:0;padding:12px 0;border-bottom:1px solid var(--ds-line)}
.rm6-ver[aria-current="true"]{margin:0 -10px;padding:12px 10px;border-radius:8px;border-bottom-color:transparent;background:var(--ds-surface-2)}
.rm6-ver>div:first-child{display:flex;flex:1 1 220px;flex-direction:column;gap:2px;min-width:0}
.rm6-ver>div:first-child>b{color:var(--ds-text);font-weight:600}
.rm6-ver>div:first-child>small{display:block;color:var(--ds-text-3);font-size:13px;overflow-wrap:anywhere}
.rm6-ver>div:first-child>details.rm6-fold{margin-top:6px}
.rm6-ver-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.rm6-ver-acts:empty{display:none}
.rm6-stages{min-width:0}
.rm6-stages>article{display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.rm6-stages [data-cp-stage]{margin:0;padding:8px 0;border-bottom:1px solid var(--ds-line);color:var(--ds-text-2);font-size:13px;overflow-wrap:anywhere}
.rm6-stages [data-cp-stage]>b{color:var(--ds-text);font-weight:600}
.rm6-stages [data-cp-stage="refused"]>b{color:var(--ds-danger-text)}
#cp-policy-plan>article{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.rm6-rollout{display:flex;flex-direction:column;gap:12px;min-width:0}
.rm6-rollout #rollout-status{margin:0;min-width:0}
#rollout-body{display:flex;flex-direction:column;gap:12px;min-width:0}
#rollout-body:empty{display:none}
#rollout-bundle-panel[hidden],section:has(>#rollout-bundle-panel[hidden]){display:none}

/* Narrow: by the page's own width (the window, or the panel beside it). The section list lies across the top and
   the line of the version in force takes its own row under 적용 대상. */
@container rm6-main (max-width:860px){
  .rm6-top>.rm6-inforce{order:3;flex:1 1 100%}
  .rm6-top>#cp-scope{flex:1 1 180px;min-width:160px}
  .rm6-set{flex-direction:column;align-items:stretch}
  .rm6-secnav{position:static;flex:none;flex-flow:row wrap;padding:0 0 8px;border-right:0;border-bottom:1px solid var(--ds-line)}
  button.rm6-sec-tab,button.rm6-sec-tab:is(:hover,:active,:focus){width:auto}
  .rm6-sec-tab>.lx-n{margin-left:0}
  .rm6-secs{flex:none}
}
@container rm6-main (max-width:520px){
  .rm6-sec .lx-setrow{grid-template-columns:minmax(0,1fr)}
  .rm6-ctl{align-items:flex-start;max-width:none;text-align:left}
  .rm6-ctl>.lx-in,.rm6-ctl>textarea.lx-in{width:100%}
  .rm6-state{text-align:left}
  .rm6-picks,.rm6-ctl>.lx-row,.rm6-ctl>.lx-fc,.rm6-ctl>.rm6-fields{justify-content:flex-start}
}