/* Task 위쪽 (명세 8.6 1-2, 16절 Task 메뉴; UR18-2, UR18-2b): v24 Todo.dc.html's top -- the chip row, then the list --
   with what the spec adds kept to one row above it. Only ra4- classes the top adds (todo-screen.js lede, filters); the
   rest of the screen is redesign-ra4.css.
   - The head: the figures and the urgent buckets as presses (what one opening Task must see first, 16절), Task 생성 at
     its right end (the one main action). A chip's height, so the head reads as one line over the chip row.
   - The chip row: 전체 and the kinds, the assignee chips, 필터 해제, and the list's tools (Task 찾기, the list's file,
     목록 / 담당별) at its right end, kept together when the row wraps beside the panel. */
.ra4-head{align-items:center}
.ra4-lede{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:34px;font-size:14px;font-weight:500;letter-spacing:0}
/* (the tab above already says the lines in its count: the figure is the head's, not a second title -- 15px; the
   urgent presses beside it carry the colour) */
.ra4-lede .ra4-fig-main{font-size:15px;font-weight:600;letter-spacing:-.005em}
.ra4-lede .ra4-fig-main b{font-weight:700;font-variant-numeric:tabular-nums}
.ra4-lede .ra4-fig-sub{color:var(--ds-text-2);font-variant-numeric:tabular-nums}
.ra4-urgents{display:inline-flex;flex-wrap:wrap;gap:8px}
/* An urgent figure is a press to its bucket (data-figure): the chip's shape, its tone the state's (6.1 tokens). */
.ra4-urgent{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--ds-line);border-radius:999px;background:var(--ds-surface);color:var(--ds-text);font:600 13px/1.5 var(--ds-font);white-space:nowrap;cursor:pointer}
.ra4-urgent b{font-weight:750;font-variant-numeric:tabular-nums}
.ra4-urgent[data-tone="bad"]{border-color:color-mix(in srgb,var(--ds-danger) 35%,transparent);background:var(--ds-danger-soft);color:var(--ds-danger-text)}
.ra4-urgent[data-tone="warn"]{border-color:color-mix(in srgb,var(--ds-caution) 40%,transparent);background:var(--ds-caution-soft);color:var(--ds-caution-text)}
.ra4-urgent[data-zero]{color:var(--ds-text-3);font-weight:500}
.ra4-urgent[data-zero] b{font-weight:500}
.ra4-urgent:hover{border-color:var(--ds-line-strong)}
.ra4-urgent[aria-pressed="true"]{border-color:var(--ds-accent);box-shadow:inset 0 0 0 1px var(--ds-accent)}
.ra4-urgent:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.ra4-info{margin-left:4px;vertical-align:middle}
/* Task 생성 keeps the head's right end when the first line is empty (nothing open, a role that reads none), and its
   top when the figures wrap beside the panel. */
.ra4-head>[data-todo-create-head]{margin-left:auto;align-self:flex-start}
.ra4-head>.ra4-unavailable{margin:0;align-self:center}

/* The list's tools (Task 찾기, the list's file, 목록 / 담당별) are one group in the head before Task 생성, so the chip row
   holds the chips alone. The chips are one line (v24, PC3 UR18-2b): where they do not fit (beside the panel) the last
   fold under 더 보기 N at the row's end (todo-screen.js fitChips), never cut out of sight -- a sideways scroll beside the
   panel showed 638 of 1038px with no sign of the rest (R3 u23 1440). 더 보기 opens the row onto more lines; 접기 folds it. */
.ra4-filters{align-items:center;flex-wrap:nowrap}
.ra4-chips{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;overflow:hidden;margin:-3px;padding:3px}
.ra4-chips>.lx-chip,.ra4-chips>.lx-btn,.ra4-chips-more{flex:none;white-space:nowrap}
.ra4-filters:not([data-chips-open]) .ra4-chips>[data-chip-folded]{display:none}
.ra4-filters[data-chips-open]{align-items:flex-end}
.ra4-filters[data-chips-open] .ra4-chips{flex-wrap:wrap;row-gap:8px}
.ra4-chips-more[hidden]{display:none}
.ra4-head>.ra4-tools{flex:none}
/* Beside the panel Task 찾기 starts narrow and opens to its width while typed in. */
.ra4-has-panel .ra4-tools .ra4-find{flex-basis:132px;width:132px;min-width:120px;transition:width .15s}
.ra4-has-panel .ra4-tools .ra4-find:focus-within{width:220px}
@media (prefers-reduced-motion:reduce){.ra4-has-panel .ra4-tools .ra4-find{transition:none}}
.ra4-tools{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.ra4-tools .ra4-find{flex:0 1 220px;width:220px;min-width:140px;height:30px}
.ra4-tools .ra4-find input{font-size:13px}
.ra4-tools .ra4-find input::placeholder{color:var(--ds-text-3)}
.ra4-tools>.lx-btn{height:30px;padding:0 10px;font-size:13px}
.ra4-tools>.lx-seg>button{height:26px}
/* Narrow (a phone, or a window under 600px): the tools take a row of their own, Task 찾기 the room left. */
@media (max-width:600px){
  .ra4-filters{flex-wrap:wrap}
  .ra4-chips{flex:1 1 100%}
  .ra4-head>.ra4-tools{flex:1 1 100%;flex-wrap:wrap;min-width:0}
  .ra4-tools .ra4-find{flex:1 1 160px;width:auto}
}