/* RA5 · 할 일 › 이슈(미해결 · 종료 · 추이), 이슈 패널, 승인 대기 (redesign 8.6).
   The parts are RF1's (redesign-rf1.css, lx-); this sheet only places them for these screens and holds what is
   theirs alone (ra5-): the table's columns, the panel beside the list, 거르기 and ⋯, the trend's band and chart.
   Text in a state colour uses the -text tokens; no old variable, no old screen class. */

/* ---- the screen ---- */
.ra5-split{align-items:flex-start;word-break:keep-all}
.ra5-issue-panel,.ra5-embed{word-break:keep-all}
.ra5-page{gap:16px;min-width:0}
.ra5-head{flex-wrap:nowrap;gap:8px}
.ra5-head .lx-lede{margin:0;min-width:0}
.ra5-views,.ra5-tools,.ra5-chips{gap:8px}
.ra5-chip-group{gap:6px}
.ra5-chips .lx-chip .lx-sev{margin-right:-2px}
.ra5-note{margin:0}
.ra5-inline{display:inline}
.ra5-find{width:260px;max-width:100%}
.ra5-empty-act{display:flex;margin:12px auto 0}
.ra5-lines{display:block;white-space:pre-line}

/* Buttons drawn as words (a row's number and target, the panel's links): no box, the part's own colour. */
:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link,:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link:hover,.ra5-split .ra5-chip-x,.ra5-split .ra5-chip-x:hover{
  min-height:0;height:auto;margin:0;padding:0;border:0;border-radius:4px;background:none;box-shadow:none;
  font:inherit;line-height:inherit;text-align:left;cursor:pointer}
:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link{color:inherit;max-width:100%}
:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link.lx-lk{color:var(--ds-accent-text);font-weight:500}
:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link:hover{text-decoration:underline}
:is(.ra5-split,.ra5-issue-panel,.ra5-embed) .ra5-link:focus-visible,.ra5-split .ra5-chip-x:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.ra5-given{gap:6px;padding-right:6px;cursor:default}
.ra5-split .ra5-chip-x{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--ds-accent-text);font-size:15px;text-align:center}
.ra5-split .ra5-chip-x:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}

/* 거르기 and the CSV menu: a summary that looks like its part, a small box under it. */
.ra5-filters,.ra5-menu,.ra5-more{position:relative}
.ra5-filters>summary,.ra5-menu>summary,.ra5-more>summary{list-style:none;cursor:pointer}
.ra5-filters>summary::-webkit-details-marker,.ra5-menu>summary::-webkit-details-marker,.ra5-more>summary::-webkit-details-marker{display:none}
.ra5-filters[open]>summary{border-color:var(--ds-accent);color:var(--ds-accent-text)}
/* Explicitly hide closed content, including its descendants' layout boxes. */
.ra5-filters:not([open])>.ra5-pop,.ra5-menu:not([open])>.ra5-pop{display:none}
.ra5-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;
  width:max-content;max-width:min(480px,calc(100vw - 32px));padding:14px;border:1px solid var(--ds-line);border-radius:12px;
  background:var(--ds-surface);box-shadow:0 8px 24px rgba(15,23,40,.12)}
/* An open filter takes its own row; its fields stay in normal flow inside the page. */
.ra5-tools{position:relative}
.ra5-tools>.ra5-filters{position:relative;min-width:0;max-width:100%}
.ra5-tools>.ra5-filters[open]{flex:0 1 100%}
.ra5-filters>.ra5-pop{position:static;margin-top:6px;width:min(480px,100%);max-width:min(100%,calc(100vw - 32px));box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr))}
.ra5-field .lx-in{min-width:0;max-width:100%}
.ra5-field{min-width:0}
.ra5-mine{align-self:end;height:36px}
.ra5-menu .ra5-pop{left:auto;right:0;grid-template-columns:1fr;gap:2px;padding:6px;min-width:160px}
.ra5-menu-list .lx-btn{justify-content:flex-start;width:100%}

/* ---- the table: eight columns; fewer beside an opened issue and on a narrow screen, where what the columns that go
   held is the grey line under the target's name (명세 6.6, 8.6). The severity and the status stay at every width. ---- */
.ra5-t{min-width:0;container:ra5-t/inline-size}
.ra5-tr{grid-template-columns:92px minmax(150px,1.5fr) minmax(120px,1.2fr) 56px minmax(112px,1fr) minmax(72px,.7fr) 96px 92px}
.ra5-tr>[role="cell"],.ra5-tr>[role="columnheader"]{min-width:0}
/* 종료: the last column holds the day and time an issue closed, not a verdict's mark. It is 92px while the row is no
   wider than in a 1440px window (1126px of its own, read as 1128 and under) and takes what a wider row adds, up to
   the 148px its one line needs (명세 5절; PC3 10-13: 138px of words on two lines in 92px, 938px of the table unused).
   수용 기한 holds a day and time too and takes the next 52px the same way (an1 10-13: its date on two lines in 96px
   at 1920 and 2560, the row 80px high), and the Control's name is kept what the wider row gave it (up to 220px:
   its longest stood 213px) so the two dates take their width from 대상, 종료 사유 and 담당, which use a third of
   theirs. The row's own width (100%), not the window's: beside a panel and under 1181px the columns are the ones
   below. */
@media (min-width:1181px){.ra5-split[data-issues-view="closed-issues"] .ra5-tr{grid-template-columns:92px minmax(150px,1.2fr) minmax(clamp(120px,calc(100% - 1008px),300px),1.6fr) 56px minmax(112px,1fr) minmax(72px,.7fr) clamp(96px,calc(100% - 1088px),148px) clamp(92px,calc(100% - 1036px),148px)}}
.ra5-tr .lx-sub{word-break:keep-all}
/* The target's person and device (searchUi.contextHtml) is a block of its own under the line it is drawn in, so that
   line's … never reached it: at 1440 a device's name stopped mid-word with no … (u20 FB-025, ISS-1662). Its own line
   cuts with one. */
.ra5-c1>.lx-sub.lx-ell>.su-context{overflow:hidden;text-overflow:ellipsis}
.ra5-c0 .ra5-link{font-weight:600}
.ra5-c4{gap:2px}
.ra5-stale{font-size:13px;font-weight:500}
.ra5-due{font-size:13px}
.ra5-brief{display:none}
.ra5-state{padding:8px 0}
.ra5-state>[role="cell"]{display:block}
/* Beside the opened issue the list is the short one while it is too narrow for its eight columns (their least is
   902px of a row; under 920px of the table). Where the list beside the panel is wider -- a 2560px window -- it keeps
   every column (명세 5절; uiw1 10-13: three columns gone and 수용 기한 on three lines in a list of 1168px). The
   table's own width, not the window's: at 1440px and under the list beside the panel is 638px and as it was. */
@container ra5-t (max-width:919px){
.ra5-split[data-detail-open] .ra5-tr{grid-template-columns:84px minmax(0,1.5fr) 44px minmax(0,1fr) 92px}
.ra5-split[data-detail-open] .ra5-tr>:is(.ra5-c2,.ra5-c5,.ra5-c7){display:none}
.ra5-split[data-detail-open] .ra5-brief-aside{display:block}
/* (명세 6.6: what left the row is one grey line under the name, the whole of it in the panel. The line folded onto
   two and three -- uiw1 10-13 at 1440 beside the panel: every row, in 205px -- and is one line now, cut with …
   after what fits: the Control's name first, then 담당, then the verdict or the closing day.) */
.ra5-split[data-detail-open] .ra5-brief-aside{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* (In a 1920px window the list beside the panel is 868px and the line whole needs up to 412px: from 800px of the
   list the 대상 takes three parts of four and 상태 or 종료 사유, which use 60px, the fourth, so the line is not cut
   in a wide window -- 명세 5절. Under 800px, a 1440px window's 638px, the columns are as they were.) */
@container ra5-t (min-width:800px) and (max-width:919px){
.ra5-split[data-detail-open] .ra5-tr{grid-template-columns:84px minmax(0,3fr) 44px minmax(96px,1fr) 92px}
}
/* Wider than that the eight columns stand beside the panel, and what the row has goes first to the cells that were
   cut or folded there (명세 5절; uiw1 10-13, a 2560px window, 1156px of a row: a Control's name cut at 185 and 193 of
   its 216 and 220px, 종료일 on two lines in 120px, 수용 기한's day on three in 96px): the Control's name, then in
   the closed list the two dates and the 대상 its lines' width (232px: a name and its owner · device line), from
   상태 or 종료 사유 and 담당, which use under half of theirs. The row's own width (100%): under about 1150px of
   a row the columns go back toward their least. */
@container ra5-t (min-width:920px){
.ra5-split[data-detail-open] .ra5-tr{grid-template-columns:92px minmax(150px,1.5fr) minmax(clamp(120px,calc(100% - 936px),220px),1.2fr) 56px minmax(112px,.8fr) minmax(72px,.6fr) 96px 92px}
.ra5-split[data-issues-view="closed-issues"][data-detail-open] .ra5-tr{grid-template-columns:92px minmax(clamp(150px,calc(100% - 924px),232px),1.5fr) minmax(clamp(120px,calc(100% - 940px),216px),1.2fr) 56px minmax(66px,1fr) minmax(72px,.7fr) clamp(96px,calc(100% - 1008px),148px) clamp(92px,calc(100% - 1008px),148px)}
}

/* ---- the panel beside the list ---- */
.ra5-aside{position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow:auto}
:is(.ra5-aside,.ra5-issue-panel) .lx-aside-t{margin:2px 0 0;outline:none}
.ra5-issue{display:flex;flex-direction:column;gap:16px}
.ra5-marks{gap:8px 14px;font-size:13px}
.ra5-mark{display:inline-flex;align-items:center;gap:6px}
.ra5-why{margin:0;color:var(--ds-text-2)}
.ra5-apart{flex-wrap:wrap;align-items:center;margin:0}
.ra5-kv-row{display:contents}
.ra5-kv-row dd{display:flex;flex-direction:column;gap:2px}
.ra5-kv-row dd .ra5-link{align-self:flex-start}
.ra5-what dd .lx-sub,.ra5-issue .lx-kv dd .lx-sub{display:block}
.ra5-acts{display:flex;flex-direction:column;gap:12px}
.ra5-act{display:flex;flex-direction:column;gap:6px;margin:0}
.ra5-act-fields{flex-wrap:nowrap;gap:8px}
.ra5-act-fields .lx-in{flex:1 1 0;min-width:0}
.ra5-act-fields .lx-btn{flex:none}
.ra5-act input[type="datetime-local"][data-empty]{color:var(--ds-text-3)}
.ra5-more-body{display:flex;flex-direction:column;gap:12px;margin-top:8px;padding:14px 16px;border-radius:10px;background:var(--ds-surface-2)}
.ra5-more-body .ra5-act-fields{flex-wrap:wrap}
.ra5-more-body .ra5-act-fields .lx-in{flex:1 1 160px}
.ra5-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.ra5-frameworks{gap:6px}
.ra5-close{flex:none}

/* ---- 추이 ---- */
.ra5-stats{gap:12px;align-items:stretch}
.ra5-stat{flex:1 1 180px;border:1px solid var(--ds-line)}
.ra5-closed{display:flex;flex-direction:column;gap:8px}
.ra5-band{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--ds-surface-3)}
.ra5-band i{display:block;min-width:3px}
.ra5-band-ok{background:var(--ds-ok)}
.ra5-band-off{background:var(--ds-neutral)}
.ra5-legend{gap:6px 16px}
.ra5-plot{overflow:hidden}
/* The chart is drawn as wide as its place and drawn again when the place changes by 24px or more (issues-console.js
   watchTrend); a smaller change it follows here. */
.ra5-chart{display:block;width:100%;max-width:100%;height:auto}
.ra5-chart text{fill:var(--ds-text-3);font-size:13px;font-family:var(--ds-font)}
.ra5-grid{stroke:var(--ds-line);stroke-width:1}
.ra5-line{fill:none;stroke:var(--ds-accent);stroke-width:2}
.ra5-dot{fill:var(--ds-surface);stroke:var(--ds-accent);stroke-width:2}
.ra5-day-hit{fill:transparent}
/* 날짜별 변화 keeps its columns at every width and scrolls inside its own box, never the page: its rows are as wide as
   their columns' least (date 140, each count 64, gaps 16, the row's 6+6) or the box, whichever is wider, so they stay
   one table when it scrolls (PC1 10-13: at 1024 the nine columns of a split day stood 27px past the window). */
.ra5-days{display:block;overflow-x:auto}
.ra5-days .ra5-day{grid-template-columns:minmax(140px,1.4fr) repeat(var(--ra5-day-cols,6),minmax(64px,1fr));
  min-width:calc(152px + var(--ra5-day-cols,6) * 80px)}
.ra5-trend-wait{display:flex;flex-direction:column;gap:12px}

/* ---- 승인 대기 ---- */
.ra5-incs{display:flex;flex-direction:column;gap:12px}
.ra5-inc-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;min-width:0}
.ra5-inc .lx-inc-h{gap:6px 10px}
.ra5-inc .lx-inc-b{display:flex;flex-direction:column;gap:10px}
.ra5-verdicts{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--ds-surface-2)}
.ra5-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ra5-verdicts .lx-lk{align-self:flex-start}
.ra5-batches{gap:10px}
.ra5-approvals [data-issue-approvals-batch-done]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ra5-batch .lx-inc-b{display:flex;flex-direction:column;gap:8px}
.ra5-fold>summary{cursor:pointer;color:var(--ds-accent-text);font-size:13px;font-weight:500}
.ra5-fold .ra5-list{margin-top:8px}
.ra5-confirm{display:flex;flex-direction:column;gap:10px}
.ra5-confirm p{margin:0}
.ra5-memo{height:72px;padding:8px 10px;resize:vertical}

/* ---- narrow: under 1180px six columns; under 900px the panel covers the list and the table keeps 이슈, 대상, 심각도
   and 상태 (5절, tried to 390px). There the grey line under the target's name is the narrow one alone -- the line
   of under 1180px stood over it and said the 담당 and the verdict twice -- and one line too, cut with … (명세 6.6:
   its whole is the line's title and the panel), and a table of 640px and under gives the 대상 the row's whole width
   on a line of its own under 이슈, 심각도 and 상태: beside them it had 110px of a 390px window, where the two lines
   stood on four to six and a row 137 to 177px high (uiw2 10-14), and one line would have said a Control's first
   word. The table's own width, not the window's: the frame's menu may stand beside it. ---- */
@media (max-width:1180px){
  .ra5-tr{grid-template-columns:84px minmax(140px,1.5fr) minmax(110px,1fr) 52px minmax(104px,1fr) 92px}
  .ra5-tr>:is(.ra5-c5,.ra5-c7){display:none}
  .ra5-brief-mid{display:block}
  .ra5-split[data-detail-open] .ra5-brief-mid{display:none}
}
@media (max-width:900px){
  .ra5-head{flex-wrap:wrap}
  .ra5-find{width:100%}
  .ra5-aside{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(100%,560px);max-width:none;max-height:none;
    border-left:1px solid var(--ds-line);box-shadow:-8px 0 24px rgba(15,23,40,.16)}
  .ra5-tr,.ra5-split[data-detail-open] .ra5-tr{grid-template-columns:minmax(64px,auto) minmax(0,1fr) 40px minmax(84px,auto)}
  .ra5-tr>:is(.ra5-c2,.ra5-c5,.ra5-c6,.ra5-c7){display:none}
  .ra5-brief-narrow,.ra5-split[data-detail-open] .ra5-brief-narrow{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ra5-brief-mid,.ra5-split[data-detail-open] .ra5-brief-aside{display:none}
  .ra5-pop,.ra5-filters>.ra5-pop{grid-template-columns:1fr}
  .ra5-act-fields{flex-wrap:wrap}
  .ra5-act-fields .lx-in{flex:1 1 100%}
  .ra5-stat{flex-basis:140px}
  @container ra5-t (max-width:640px){
    .ra5-tr,.ra5-split[data-detail-open] .ra5-tr{grid-template-columns:minmax(0,1fr) 40px minmax(84px,auto);row-gap:2px}
    .ra5-tr>.ra5-c0{grid-area:1/1}
    .ra5-tr>.ra5-c3{grid-area:1/2}
    .ra5-tr>.ra5-c4{grid-area:1/3}
    .ra5-tr>.ra5-c1{grid-area:2/1/3/-1}
  }
}