/* ===========================================================================
   SolutionsChatops -- 画面イメージ product demo (.co-demo > .dc-ui--app).
   Loaded by SolutionsChatops.html only, after home-prototype.css.
   - .co-demo holds the legend, the 6 feature tabs (a page-level control that
     sits OUTSIDE the app window), the app window and the caption.
   - The window reproduces the real ChatOps chrome. Colours are sampled from
     NAL-picture/Solution/Chatops-image.jpg; contrast ratios are noted inline.
   - Affordance: EVERY usable thing in the window carries an amber dot (until
     it has been used). Buttons, cards and the select also have a resting
     border, a 2px bottom edge, a pointer cursor and lift on hover. The nav
     shortcuts of the real chrome (sidebar rows, header view icons, top-bar
     icons) stay flat like the real app, with a pointer and a light hover.
     Anything else is only part of the picture: flat, no pointer, no hover.
     Amber is reserved for the hotspot dots.
   - JS: solutions-chatops.js (kanban), -drawer.js (card detail), -chat.js
     (tab 1 + jumps), -tools.js (tabs 3-6), -nav.js (in-window shortcuts +
     tooltips), -tour.js (dots). They talk through CustomEvents on
     .dc-ui--app. No JS: every panel stays readable, the drawer and the
     thread pane stay hidden, no dots, no tooltips, no legend, no tab bar,
     and the in-window buttons are flattened (nothing to press).
   Hex values next to color-mix() are pre-computed fallbacks for Safari < 16.2
   and Chrome < 111. .co-feat / .co-why (特長 / 選ばれる理由) share the shades.
   =========================================================================== */
.co-demo, .dc-ui--app, .co-feat, .co-why { --tint: #EBF3EF; --edge: #B9D4C8; --rail: #1E6946; --warn: #B55922; --mark: #FAE4A0; --c4: #795C03; }
@supports (color: color-mix(in srgb, red, red)) {
  .co-demo, .dc-ui--app, .co-feat, .co-why {
    --tint: color-mix(in srgb, var(--acc) 9%, #FFFFFF);
    --edge: color-mix(in srgb, var(--acc) 32%, #FFFFFF);
    --rail: color-mix(in srgb, var(--acc) 86%, #000000);
    --warn: color-mix(in srgb, var(--orange) 78%, #000000);
    --mark: color-mix(in srgb, var(--amber) 38%, #FFFFFF);
    --c4: color-mix(in srgb, var(--amber) 50%, #000000);
  }
}
.co-demo {
  --co-chrome: #006B43;      /* top bar + sidebar (sampled #016C43). #FFF 6.60:1 */
  --co-chrome-deep: #065634; /* team column. #FFF 8.79:1 */
  --co-chrome-hi: #14784D;   /* active sidebar row. #FFF 5.49:1 */
  --co-chrome-txt: rgba(255,255,255,0.8); /* = #CCE1D9 on chrome 4.82:1 */
  --co-brand: #42B34F;       /* logo tile, star, presence dot: graphics only (#FFF 2.69:1) */
  --co-ok: #279140;          /* done check icon, 3.74:1 on the card strip */
  --co-canvas: #EEEDF0;      /* channel canvas behind the kanban (sampled) */
  --co-col: #E6E8EC;         /* kanban column. navy text 11.94:1 */
  --co-card-bd: #6F8296;     /* card frame + its 2px bottom edge: 3.22:1 on the column, 3.96:1 on white (WCAG 1.4.11) */
  --co-rule-bd: #B7C2CE;     /* drawer edge + header rule: decoration only */
  --co-line: #E3E6EA;        /* hairlines inside the window */
  --co-strip: #F2F8F4;       /* card header strip (sampled) */
  --co-chip: #231A1E;        /* label chip (sampled #24060D). #FFF 16.96:1 */
  --st-todo: #1B6FB3;        /* #FFF 5.29:1 */
  --st-doing: #9A5700;       /* #FFF 5.62:1 */
  --st-done: #237A52;        /* #FFF 5.28:1 */
  --due-soon-bg: #E8EBEF; --due-soon-tx: #46566A;   /* 6.27:1 */
  --due-late: #C23B34;       /* #FFF 5.29:1 */
  --due-done: #1E7B3A;       /* #FFF 5.32:1 */
  --hot: #F2B705;            /* hotspot core: reserved for "you can use this" */
  --hot-rim: #9A7000;        /* dot rim: 4.48:1 on white, so the dot reads on white panels */
  --flat-bg: #F1F3F5;        /* flat decoration chips. --muted on it 4.93:1 */
  --bubble: #F1F3F5;         /* other people's messages */
  --bubble-self: #E4F3E7;    /* own messages: light tint + navy text, never a filled button look */
  --quiet-bd: #76899D;       /* frame of neutral live controls (×): 3.60:1 on white */
  --quiet-edge: #C9D3DD;
}
.co-demo [hidden] { display: none !important; }

/* ---- legend + feature tabs (page-level controls, OUTSIDE the window) ----- */
.co-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.8; color: var(--ink); }
html:not(.js) .co-legend { display: none; }
.co-legend__item { display: inline; }
/* The sample is an empty framed swatch, never a word inside a button shape,
   so the legend itself cannot be mistaken for a control. */
.co-legend__key { display: inline-block; width: 22px; height: 14px; margin: 0 5px 0 1px; vertical-align: -1px; border: 1px solid var(--acc); border-radius: 4px; background: var(--white); box-shadow: 0 2px 0 var(--edge); }
html:not(.js) .co-tabs { display: none; }   /* no JS: all 6 panels show, so the tab bar would be dead */
.co-tabs.dc-ui-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 16px; }
.co-tabs .dc-ui-tab { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 1px solid var(--acc); border-radius: 10px; background: var(--white); box-shadow: 0 2px 0 var(--edge); font-size: 14px; color: var(--navy); word-break: keep-all; transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.co-tabs .dc-ui-tab svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.co-tabs .dc-ui-tab.is-on { background: var(--acc); color: var(--white); box-shadow: inset 0 2px 0 rgba(0,0,0,0.18); }
@media (hover: hover) and (pointer: fine) {
  .co-tabs .dc-ui-tab:not(.is-on):hover { transform: translateY(-1px); background: var(--tint); box-shadow: 0 3px 0 var(--edge), 0 6px 14px rgba(16,42,67,0.12); }
}
.co-tabs .dc-ui-tab:not(.is-on):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }

/* co-mock-say: "what this screen is" line ABOVE the window, changes with the
   tab (explain-screens-for-non-tech-end-users, same pattern as SolutionsCoding
   .cd-mock-say). 6 lines stacked in one grid cell so the window never moves
   when the tab changes; :has() follows the active panel (no :has = the
   support query below hides the block rather than show every line at once). */
.co-mock-say { display: grid; margin: 0 0 18px; }
html:not(.js) .co-mock-say { display: none; }
@supports not selector(:has(*)) { .co-mock-say { display: none; } }
.co-mock-say__i { grid-area: 1 / 1; align-self: start; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--acc); font-family: 'Noto Sans JP', sans-serif; visibility: hidden; opacity: 0; }
.co-mock-say__h { font-size: 16px; font-weight: 700; line-height: 1.75; color: var(--navy); }
.co-mock-say__h em { font-style: normal; color: var(--acc); }
.co-mock-say__d { font-size: 14px; line-height: 1.9; color: var(--ink); }
.co-demo:has(#panel-chatops-1.is-active) [data-say="1"], .co-demo:has(#panel-chatops-2.is-active) [data-say="2"],
.co-demo:has(#panel-chatops-6.is-active) [data-say="6"], .co-demo:has(#panel-chatops-3.is-active) [data-say="3"],
.co-demo:has(#panel-chatops-4.is-active) [data-say="4"], .co-demo:has(#panel-chatops-5.is-active) [data-say="5"] { visibility: visible; opacity: 1; }
html.co-feat-motion .co-mock-say__i { transition: opacity 0.25s ease, visibility 0.25s; }

/* ---- app window chrome --------------------------------------------------- */
.dc-ui--app { border-color: #C9D3DD; border-radius: 10px; }
.dc-ui--app .dc-ui-appbar { height: 44px; padding: 0 12px; gap: 14px; background: var(--co-chrome); color: var(--white); }
.co-bar-ic { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.co-bar-ic--fill { fill: currentColor; stroke: none; }
.co-logo { display: inline-flex; align-items: center; gap: 7px; }
.co-logo svg { width: 24px; height: 24px; flex: 0 0 24px; display: block; }
.dc-ui--app .dc-ui-appbar .co-logo b { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.01em; color: var(--white); }
.dc-ui--app .dc-ui-search { display: flex; align-items: center; gap: 6px; flex: 0 1 260px; height: 28px; margin: 0 16px 0 auto; padding: 0 10px; border-radius: 4px; background: rgba(0,0,0,0.16); font-size: 13px; line-height: 1; color: var(--co-chrome-txt); }
.dc-ui-search .co-bar-ic { width: 14px; height: 14px; flex-basis: 14px; }
.co-bar-grp, .co-bar-end { display: flex; align-items: center; gap: 14px; }
.co-bar-end { margin-left: auto; }
.co-team { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border-radius: 4px; background: rgba(255,255,255,0.16); font-size: 13px; font-weight: 700; color: var(--white); }
.dc-ui--app .dc-ui-appbar .co-team i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: rgba(0,0,0,0.2); font-style: normal; font-size: 13px; color: var(--white); }
.dc-ui--app .dc-ui-appbar .co-me { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; }
.co-me, .co-online { position: relative; }
.co-me::after, .co-online::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--co-brand); box-shadow: 0 0 0 2px var(--co-chrome); }

.dc-ui--app .dc-ui-body { grid-template-columns: 56px 208px minmax(0, 1fr); }
.co-teams { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: var(--co-chrome-deep); }
.co-teams span { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.08); font-size: 13px; font-weight: 700; color: var(--co-chrome-txt); }
.co-teams span.is-on { background: rgba(255,255,255,0.2); color: var(--white); }
.co-teams span.is-on::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--white); }   /* active team marker */

.dc-ui--app .dc-ui-rail { display: flex; flex-direction: column; padding: 14px 0 0; background: var(--co-chrome); border-right: 0; }
.dc-ui--app .dc-ui-rail > p { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--co-chrome-txt); }
.dc-ui--app .dc-ui-rail > p:first-child { padding-top: 0; }
.dc-ui--app .dc-ui-rail > p i { font-style: normal; font-size: 15px; font-weight: 400; line-height: 1; }
.dc-ui--app .dc-ui-rail > span { display: flex; align-items: center; gap: 8px; padding: 5px 16px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.94); cursor: default; }
.dc-ui--app .dc-ui-rail > span .co-bar-ic { width: 15px; height: 15px; flex-basis: 15px; opacity: 0.8; }
.dc-ui--app .dc-ui-rail .dc-ui-av { display: grid; padding: 0; line-height: 1; color: var(--white); box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.dc-ui--app .dc-ui-rail .dc-ui-av[data-c="ai"] { color: transparent; }   /* the face, not the "AI" letters (the white ink above outranks the face rule) */
.dc-ui--app .dc-ui-rail .co-av-bot { box-shadow: none; }
.dc-ui--app .dc-ui-rail > p.co-switch { justify-content: center; margin-top: auto; padding: 10px 16px; background: #237654; font-size: 13px; letter-spacing: 0.02em; color: var(--white); }  /* #FFF 5.54:1 */
/* The row being viewed follows the open tab (:has). The default rule is kept
   separate so browsers without :has still mark "# 案件A". ファイル is the
   file list: tab 5 with the ファイル filter pressed (nav.js), not the search. */
.dc-ui--app .dc-ui-rail [data-rail="ch"] { background: var(--co-chrome-hi); box-shadow: none; font-weight: 700; color: var(--white); }
.dc-ui--app:has(#panel-chatops-4.is-active) .dc-ui-rail [data-rail="cal"],
.dc-ui--app:has(#panel-chatops-5.is-active [data-filter="file"][aria-pressed="true"]) .dc-ui-rail [data-rail="file"],
.dc-ui--app:has(#panel-chatops-6.is-active) .dc-ui-rail [data-rail="ai"] { background: var(--co-chrome-hi); box-shadow: none; font-weight: 700; color: var(--white); }
.dc-ui--app:has(#panel-chatops-4.is-active) .dc-ui-rail [data-rail="ch"],
.dc-ui--app:has(#panel-chatops-5.is-active) .dc-ui-rail [data-rail="ch"],
.dc-ui--app:has(#panel-chatops-6.is-active) .dc-ui-rail [data-rail="ch"] { background: none; box-shadow: none; font-weight: 400; }

/* ---- main area + channel header ----------------------------------------- */
.dc-ui--app .dc-ui-main { position: relative; padding: 0; background: var(--white); }
.dc-ui--app .dc-ui-panel { position: relative; padding: 0 20px 20px; }
.dc-ui--app .dc-ui-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
/* focus moved there by a pointer press on an in-window shortcut (nav.js): no
   ring; the marker goes on the next key press or blur */
.dc-ui--app .dc-ui-panel.is-ptr-focus:focus-visible { outline: none; }
.co-chhead { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 -20px 16px; padding: 8px 20px; border-bottom: 1px solid var(--co-line); }
.co-chhead__name, .co-chhead__title { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.co-chhead__name svg { width: 16px; height: 16px; fill: var(--co-brand); }
.co-chhead__desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.co-chhead__meta { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.co-chhead__meta span { display: inline-flex; align-items: center; gap: 4px; }
.co-chhead__meta svg { width: 14px; height: 14px; fill: currentColor; }
.co-views { display: inline-flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--co-line); }
.co-views i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--muted); }
.co-views i.is-on { background: #E4F3E7; color: var(--co-ok); }
.co-views i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- in-window shortcuts ([data-go], nav.js) ------------------------------
   Sidebar rows, header view icons and top-bar icons with a real target. They
   keep the flat look of the real app (no frame): the dot says "usable", the
   pointer and a light hover like the real app confirm it. Only under html.js,
   so without JS they stay part of the picture. .is-current = its target is
   already on screen: no pointer, no hover. Everything else is inert. */
.co-tc { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: rgba(0,0,0,0.16); }   /* the real app's round 「チームの会話」 button */
.co-tc.is-current { background: rgba(255,255,255,0.22); }
.dc-ui--app .dc-ui-rail > [data-go] { position: relative; isolation: isolate; }
html.js .dc-ui--app [data-go]:not(.is-current) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  /* an overlay, so the hover also shows on a row the :has() rules highlight */
  html.js .dc-ui--app .dc-ui-rail > [data-go]:not(.is-current):hover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.12); }
  html.js .dc-ui--app .co-views [data-go]:not(.is-current):hover { background: #EEF1F4; color: var(--navy); }
  html.js .dc-ui--app .dc-ui-search[data-go]:not(.is-current):hover, html.js .dc-ui--app .co-tc:not(.is-current):hover { background: rgba(0,0,0,0.28); }
}
/* black tooltip of the real app, one per window, placed by nav.js inside the
   window: below the icon (arrow at --ax), or beside it (arrow at --ay) when
   below would cover another control. #FFF on #1B1F24: 16.3:1. Hoverable
   (WCAG 1.4.13): the pointer can rest on it, Esc hides it */
.dc-ui--app { position: relative; }
.co-tip { position: absolute; z-index: 12; display: block; padding: 5px 10px; border-radius: 4px; background: #1B1F24; box-shadow: 0 4px 12px rgba(0,0,0,0.18); font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; color: #FFFFFF; white-space: nowrap; pointer-events: auto; cursor: default; }
.co-tip::before { content: ""; position: absolute; bottom: 100%; left: var(--ax, 50%); margin-left: -5px; border: 5px solid transparent; border-bottom-color: #1B1F24; }
.co-tip[data-pos="above"]::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #1B1F24; }
.co-tip[data-pos="left"]::before, .co-tip[data-pos="right"]::before { bottom: auto; top: var(--ay, 50%); margin: -5px 0 0; border-bottom-color: transparent; }
.co-tip[data-pos="left"]::before { left: 100%; border-left-color: #1B1F24; }
.co-tip[data-pos="right"]::before { left: auto; right: 100%; border-right-color: #1B1F24; }

/* ---- the one visual language: LIVE (framed, raised) vs FLAT (picture) --- */
.co-btn { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 4px 12px; border: 1px solid var(--acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--edge); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--acc); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3), color var(--dur-3); }
.co-btn svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co-btn[aria-pressed="true"] { background: var(--acc); color: var(--white); box-shadow: inset 0 2px 0 rgba(0,0,0,0.18); }   /* white on acc 5.28:1 */
.co-x, .dc-ui--app .dc-ui-drawer__x { appearance: none; display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px; margin: 0; padding: 0; border: 1px solid var(--quiet-bd); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--quiet-edge); font: inherit; font-size: 18px; line-height: 1; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), background-color var(--dur-3); }
@media (hover: hover) and (pointer: fine) {
  .co-btn:hover { transform: translateY(-1px); background: var(--tint); box-shadow: 0 3px 0 var(--edge), 0 6px 14px rgba(16,42,67,0.12); }
  .co-btn[aria-pressed="true"]:hover { background: var(--co-chrome-hi); box-shadow: inset 0 2px 0 rgba(0,0,0,0.18), 0 6px 14px rgba(16,42,67,0.12); }
  .co-x:hover, .dc-ui--app .dc-ui-drawer__x:hover { transform: translateY(-1px); background: var(--flat-bg); box-shadow: 0 3px 0 var(--quiet-edge), 0 6px 14px rgba(16,42,67,0.12); }
}
.co-btn:active, .co-x:active, .dc-ui--app .dc-ui-drawer__x:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
.co-btn:focus-visible, .co-x:focus-visible, .dc-ui--app .dc-ui-drawer__x:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.co-flat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 0; border-radius: 6px; background: var(--flat-bg); box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--muted); cursor: default; }
.co-flat svg { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.co-flat.is-on { color: var(--acc); }
/* No JS: nothing in the window works, so no button may look pressable. */
html:not(.js) .dc-ui--app button { pointer-events: none; cursor: default; border-color: transparent; box-shadow: none; background: var(--flat-bg); color: var(--navy); }
/* Caption + scroll hint use --muted, not the shared #7E93A8 (3.00:1).
   #5A6B7C: 5.20:1 on the section tint, 4.67:1 on the kanban canvas. */
.co-demo .dc-ui-cap, .co-demo .dc-ui-hint { color: var(--muted, #5A6B7C); }

/* ---- hotspot dots + coach mark (JS builds them; none without JS) ---------
   Every control in the window carries the same small dot on its top-right
   corner: amber core, darker amber rim (visible on white), white ring
   (visible on the green chrome). Only the one primary dot per tab (.is-main)
   pulses. The .co-demo prefix beats the shared ".dc-ui-rail span" rule. */
.co-hot { position: relative; }
.co-demo .co-beacon { position: absolute; top: -4px; right: -4px; z-index: 3; display: block; width: 10px; height: 10px; margin: 0; padding: 0; box-sizing: border-box; border: 1px solid var(--hot-rim); border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 2px var(--white); pointer-events: none; transition: opacity 0.2s; }
/* Waves: every dot pulses -- a ripple ring plus a soft glow, 3 runs of 1.4s
   (4.2s, under the 5s of WCAG 2.2.2) -- each time a tab is shown, the window
   comes into view or the pointer enters it (tour.js restarts .co-wave on
   .co-demo). Dots ripple one after another (--wd, reading order); the
   primary's ring is a little stronger. */
.co-demo .co-beacon::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--hot); border-radius: 50%; opacity: 0; pointer-events: none; }
.co-demo .co-beacon.is-main::after { inset: -4px; border-width: 2.5px; }
.co-demo.co-wave .co-beacon { animation: co-glow 1.4s ease-in-out var(--wd, 0ms) 3; }
.co-demo.co-wave .co-beacon::after { animation: co-pulse 1.4s var(--ease-out) var(--wd, 0ms) 3 both; }
@keyframes co-glow { 50% { box-shadow: 0 0 0 2px var(--white), 0 0 10px 3px rgba(242,183,5,0.6); } }
.co-demo .co-beacon--inline { position: relative; top: auto; right: auto; display: inline-block; margin: 0 7px 0 3px; vertical-align: 0; }
.co-demo .co-beacon.co-wait { opacity: 0; }
.co-demo .co-beacon.co-wait::after { animation: none; }
/* A press on a dot is a press on its control: the dot is the control's own
   child, so the click (and the pointer cursor) go to it, also where the dot
   pokes out past a rounded corner. The status <select> keeps a see-through
   dot: its dot hangs on the .co-sel wrapper, which is not the control. */
.co-demo .co-hot:not(.co-sel) > .co-beacon { pointer-events: auto; }
.co-demo .co-hot > .co-beacon.co-wait { pointer-events: none; }
/* a control that would do nothing right now keeps no dot */
.co-demo .is-current > .co-beacon, .co-demo [data-filter][aria-pressed="true"] > .co-beacon { display: none; }
/* rows of the sidebar: the dot sits at the row's right end, centred, so it
   never straddles two rows; round top-bar button: on its rim */
.co-demo .dc-ui-rail > .co-hot > .co-beacon { top: 50%; right: 12px; margin-top: -5px; }
.co-demo .co-tc > .co-beacon { top: -1px; right: -1px; }
.co-demo .co-views i > .co-beacon { top: -3px; right: -3px; }
@keyframes co-pulse { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.co-coach { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: var(--navy); box-shadow: 0 6px 16px rgba(16,42,67,0.22); font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--white); white-space: nowrap; pointer-events: none; animation: co-coach-in 0.4s var(--ease-out) both, co-bob 1.5s ease-in-out 0.4s 3; }
.co-coach::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); }
.co-coach::after { content: ""; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: var(--navy); }
.co-coach[data-align="end"] { left: auto; right: 0; }
.co-coach[data-align="end"]::after { left: auto; right: 16px; }
.co-coach[data-pos="below"] { bottom: auto; top: calc(100% + 10px); }
.co-coach[data-pos="below"]::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--navy); }
.co-coach[data-pos="right"] { left: calc(100% + 12px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.co-coach[data-pos="right"]::after { top: 50%; left: auto; right: 100%; margin-top: -6px; border-top-color: transparent; border-right-color: var(--navy); }
.co-coach.is-out { animation: co-coach-out 0.2s var(--ease-out) both; }
@keyframes co-coach-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes co-coach-out { to { opacity: 0; } }
@keyframes co-bob { 50% { translate: 0 -3px; } }
.dc-ui--app:not(.is-in) .co-beacon::after, .dc-ui--app:not(.is-in) .co-coach { animation-play-state: paused; }
/* Space reserved next to a hotspot so its coach pill never covers text. It is
   released only while its panel is hidden (tour JS), so nothing jumps under
   the pointer right after the click. */
.co-demo .is-hotroom[data-hot-room="below"] { margin-bottom: 44px; }
.co-demo .is-hotroom[data-hot-room="above"] { padding-top: 46px; }
.is-flash { animation: co-flash 1.6s var(--ease-out) both; }
@keyframes co-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--hot); } 100% { box-shadow: 0 0 0 3px rgba(242,183,5,0); } }

/* ---- avatars, messages (shared with 特長 vignettes: keep these unscoped) - */
.dc-ui-av { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; }
.dc-ui-av[data-c="2"] { background: var(--blue); }
.dc-ui-av[data-c="3"] { background: var(--warn); }
.dc-ui-av[data-c="4"] { background: var(--c4); }
.dc-ui-av[data-c="ai"] { background: #FFF url("assets/chatops-ai-face.webp") center / cover no-repeat; color: transparent; box-shadow: 0 0 0 1px rgba(16, 42, 67, 0.14); }   /* NAL's AI character "Avatar" wherever the assistant speaks; the "AI" text stays in the markup */
.dc-ui-av[data-c="bot"] { background: var(--muted); font-size: 12px; }
.dc-ui-av--xs { flex-basis: 22px; width: 22px; height: 22px; font-size: 13px; }
.co-av-bot { border-radius: 6px; background: var(--blue); }
.co-av-bot svg { width: 16px; height: 16px; fill: var(--white); }
.dc-ui-av--xs.co-av-bot svg { width: 12px; height: 12px; }

.dc-ui-day { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dc-ui-day::before, .dc-ui-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.dc-ui-msg { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.dc-ui-msg:focus { outline: none; }
.dc-ui-msg:focus-visible .dc-ui-msg__text { outline: 2px solid var(--navy); outline-offset: 2px; }
.dc-ui-msg__body { min-width: 0; max-width: min(560px, 100%); display: flex; flex-direction: column; align-items: flex-start; }
.dc-ui-msg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.dc-ui-msg__meta b { font-size: 13px; font-weight: 700; color: var(--navy); }
.dc-ui-msg__meta time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-ui-badge { flex: none; padding: 0 5px; border-radius: 3px; background: var(--surface); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.7; color: var(--muted); white-space: nowrap; }
.dc-ui-badge[data-tone="ai"] { background: var(--tint); color: var(--acc); }
.dc-ui-msg__text { margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--bubble, #F1F3F5); font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.8; color: var(--ink); }
.dc-ui-msg[data-role="self"] { flex-direction: row-reverse; }
.dc-ui-msg[data-role="self"] .dc-ui-msg__body { align-items: flex-end; }
.dc-ui-msg[data-role="self"] .dc-ui-msg__text { background: var(--bubble-self, #E4F3E7); color: var(--navy); border-radius: 14px 14px 4px 14px; }   /* navy 13.0:1 */
.dc-ui-at { padding: 0 3px; border-radius: 3px; background: var(--tint); font-weight: 700; color: var(--acc); white-space: nowrap; }
.dc-ui-msg[data-role="self"] .dc-ui-at { background: rgba(255,255,255,0.7); }
.dc-ui-num { flex: none; display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.7; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tab 1: reactions, thread button, bot card, compose, thread pane */
.dc-ui-react { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.dc-ui-react .co-flat { border-radius: 999px; }
.dc-ui-react__b { appearance: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 0; padding: 0 10px; border: 1px solid var(--acc); border-radius: 999px; background: var(--white); box-shadow: 0 2px 0 var(--edge); font: inherit; font-size: 12px; font-weight: 700; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), background-color var(--dur-3); }
.dc-ui-react__b [data-react-n] { font-variant-numeric: tabular-nums; }
.dc-ui-react__b[aria-pressed="true"] { background: var(--tint); box-shadow: inset 0 0 0 1px var(--acc); color: var(--acc); }
.dc-ui--app .dc-ui-thread { appearance: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; white-space: nowrap; margin: 8px 0 0; padding: 4px 12px 4px 8px; border: 1px solid var(--acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--edge); font: inherit; font-size: 13px; font-weight: 700; color: var(--acc); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), background-color var(--dur-3); }
.dc-ui--app .dc-ui-thread .dc-ui-av { margin-right: -10px; box-shadow: 0 0 0 2px var(--white); }
.dc-ui--app .dc-ui-thread b { margin-left: 12px; color: var(--navy); }
.dc-ui--app .dc-ui-thread[aria-expanded="true"] { background: var(--tint); box-shadow: inset 0 0 0 1px var(--acc); }
@media (hover: hover) and (pointer: fine) {
  .dc-ui-react__b:hover, .dc-ui--app .dc-ui-thread:hover { transform: translateY(-1px); background: var(--tint); box-shadow: 0 3px 0 var(--edge), 0 6px 14px rgba(16,42,67,0.12); }
}
.dc-ui-react__b:active, .dc-ui--app .dc-ui-thread:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
.dc-ui-react__b:focus-visible, .dc-ui--app .dc-ui-thread:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dc-ui-embed { width: min(440px, 100%); margin: 0; padding: 12px 14px; border-left: 4px solid var(--blue); border-radius: 4px 10px 10px 4px; background: #F7F9FA; }
.dc-ui-embed__lead { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dc-ui-embed__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.dc-ui-embed__meta { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.dc-ui-quote { margin: 0; padding: 1px 0 1px 10px; border-left: 3px solid var(--edge); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.7; color: var(--ink); }
.dc-ui-embed__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.dc-ui-compose { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px 10px 16px; border-radius: 8px; background: var(--flat-bg); font-size: 13px; color: #5F6E7D; }   /* 4.83:1 */
.co-send { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: #8A97A5; stroke-width: 1.6; stroke-linejoin: round; }
.co-chat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.co-chat__main { min-width: 0; }
.co-rhs { display: flex; flex-direction: column; min-width: 0; background: var(--white); }
@media (min-width: 1181px) {
  #panel-chatops-1.is-thread .co-chat { grid-template-columns: minmax(0, 1fr) 300px; }
  #panel-chatops-1.is-thread .co-chat__main { padding-right: 16px; }
  .co-rhs { margin: -16px -20px 0 0; border-left: 1px solid var(--co-line); animation: co-rhs-in var(--dur-3) var(--ease-out) both; }
}
@media (max-width: 1180px) {
  .co-rhs { position: absolute; inset: 0; z-index: 4; border-left: 1px solid var(--co-line); box-shadow: -12px 0 28px rgba(16,42,67,0.12); animation: co-rhs-in var(--dur-3) var(--ease-out) both; }
}
@keyframes co-rhs-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.co-rhs__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--co-line); }
.co-rhs__head h3 { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.co-rhs__head h3:focus { outline: none; }
.co-rhs__head small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.co-rhs__body { padding: 12px 16px; }
.co-rhs__n { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.co-rhs__n::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.co-rhs .dc-ui-msg__text { padding: 8px 12px; font-size: 13px; }
.co-rhs .dc-ui-compose { margin: auto 16px 16px; }

/* Every tab fills the window: a margin-top:auto element (.co-switch,
   .co-rooms__bar...) pins itself to the bottom, so a short tab never ends in
   an empty band. The ::after spacer reserves at least 18px above it.
   explain-screens-for-non-tech-end-users: the "この画面でできること" note
   used to live here, at the bottom -- moved above the window as .co-mock-say
   (it went unseen here, same lesson as the Coding page). */
.dc-ui--app .dc-ui-main { display: flex; flex-direction: column; }
.dc-ui--app .dc-ui-panel { flex: 1 0 auto; }
html.js .dc-ui--app .dc-ui-panel.is-active { display: flex; flex-direction: column; }
html.js .dc-ui--app .dc-ui-panel.is-active::after { content: ""; order: 1; flex: 1 0 18px; }
/* Chrome keeps Japanese phrases whole everywhere in the window (inherited);
   the nowrap spans and "#&nbsp;" in the HTML hold the units that must never
   split (dates, times, sizes, # channel) in browsers without auto-phrase. */
.dc-ui--app { word-break: auto-phrase; overflow-wrap: break-word; }

/* ---- tab 2: kanban ------------------------------------------------------- */
.dc-ui-kb { position: relative; }
.dc-ui--app .dc-ui-kb { margin: 0 -20px; padding: 12px 20px 14px; background: var(--co-canvas); }
.dc-ui-kb-hint { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.7; color: #334E68; }
.dc-ui-board { display: grid; grid-template-columns: repeat(3, minmax(168px, 1fr)); gap: 14px; min-width: 560px; }
/* column = grey box + 4px status bar painted as a background (no border, no shadow) */
.dc-ui--app .dc-ui-col { --st: var(--st-todo); padding: 12px 10px 8px; border-radius: 10px; background: linear-gradient(var(--st), var(--st)) top / 100% 5px no-repeat, var(--co-col); transition: background-color 0.2s; }
.dc-ui--app .dc-ui-col[data-status="doing"] { --st: var(--st-doing); }
.dc-ui--app .dc-ui-col[data-status="done"] { --st: var(--st-done); }
.dc-ui--app .dc-ui-col.is-over { background: linear-gradient(var(--st), var(--st)) top / 100% 5px no-repeat, #D9E3DD; outline: 2px dashed var(--st); outline-offset: -2px; }
.dc-ui-col__h { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy); }
.dc-ui-col__h [data-kb-count] { display: inline-block; min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--st, var(--navy)); text-align: center; font-size: 12px; line-height: 22px; color: var(--white); font-variant-numeric: tabular-nums; }
.dc-ui-kcards { display: flex; flex-direction: column; gap: 8px; min-height: 48px; }
.dc-ui-task { display: block; padding: 0; border: 1px solid var(--co-card-bd, #6F8296); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--co-card-bd, #6F8296), 0 3px 8px rgba(16,42,67,0.06); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.6; color: var(--ink); }
.dc-ui-task__h { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #E3ECE6; border-radius: 8px 8px 0 0; background: var(--co-strip); }
.dc-ui-task__t { display: block; flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--navy); }   /* block, not flex: a long title wraps in its own column, never under the ✎ */
.dc-ui-task__t > .dc-ui-num { display: inline-block; margin-right: 6px; vertical-align: baseline; }
.dc-ui-task__ck, .dc-ui-task__ed { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.dc-ui-task__ck { border-radius: 50%; background: #AEB8C3; -webkit-mask: var(--m-check) center / 16px no-repeat; mask: var(--m-check) center / 16px no-repeat; transition: background-color var(--dur-3); }
.dc-ui-col[data-status="done"] .dc-ui-task__ck { background: var(--co-ok); }
.dc-ui-task__ed { background: #9AA6B2; -webkit-mask: var(--m-edit) center / 14px no-repeat; mask: var(--m-edit) center / 14px no-repeat; }
.dc-ui-task__b { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px 9px; }
.dc-ui-chip { padding: 0 7px; border-radius: 3px; background: var(--co-chip); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--white); }
.dc-ui-task__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.7; color: #3A4652; }
.dc-ui-task__f { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 8px; }
.dc-ui-due { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 4px; background: var(--due-soon-bg); font-size: 13px; font-weight: 700; line-height: 22px; color: var(--due-soon-tx); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--dur-3), color var(--dur-3); }
.dc-ui-due i { flex: 0 0 12px; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m-clock) center / 12px no-repeat; mask: var(--m-clock) center / 12px no-repeat; }
.dc-ui-due .co-late-tx { display: none; }
/* Due state follows the column in CSS (drag #13 into 完了 and it turns green,
   no JS). The drawer copy carries data-state instead. Overdue also shows
   「期限切れ」 and an "!" icon, so it never relies on colour alone. */
.dc-ui-col:not([data-status="done"]) .dc-ui-due[data-tone="late"], .dc-ui-due[data-state="late"] { background: var(--due-late); color: var(--white); }
.dc-ui-col:not([data-status="done"]) .dc-ui-due[data-tone="late"] i, .dc-ui-due[data-state="late"] i { -webkit-mask-image: var(--m-alert); mask-image: var(--m-alert); }
.dc-ui-col:not([data-status="done"]) .dc-ui-due[data-tone="late"] .co-late-tx, .dc-ui-due[data-state="late"] .co-late-tx { display: inline; }
.dc-ui-col[data-status="done"] .dc-ui-due, .dc-ui-due[data-state="done"] { background: var(--due-done); color: var(--white); }
.dc-ui-col[data-status="done"] .dc-ui-due i, .dc-ui-due[data-state="done"] i { -webkit-mask-image: var(--m-check-s); mask-image: var(--m-check-s); }
.dc-ui-addcard { margin: 6px 0 0; padding: 4px; font-size: 13px; font-weight: 700; color: #5F6E7D; cursor: default; }   /* flat picture of the real 「＋ Add Card」 */
.dc-ui-board.is-live .dc-ui-task { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dc-ui-board.is-live .dc-ui-task:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .dc-ui-board.is-live .dc-ui-task { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3); }
  .dc-ui-board.is-live .dc-ui-task:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 2px 0 var(--acc), 0 8px 18px rgba(16,42,67,0.16); }
}
.dc-ui-task.is-ph { opacity: 0.35; border-style: dashed; box-shadow: none; }
.dc-ui--app .dc-ui-task[aria-expanded="true"] { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.dc-ui-ghost { position: absolute; z-index: 5; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 14px 28px rgba(16,42,67,0.20); transform: rotate(1.5deg) scale(1.03); }
.dc-ui-cursor { position: absolute; top: 0; left: 0; z-index: 6; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.dc-ui-cursor.is-on { opacity: 1; }
.dc-ui-cursor svg { display: block; width: 22px; height: 22px; transition: transform 0.15s; }
.dc-ui-cursor.is-press svg { transform: scale(0.86); }

/* mask icons (data URIs drawn in black; the colour comes from background) */
.dc-ui--app {
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.6 5.2-4.5 4.6-2.2-2.2-1.1 1.1 3.3 3.3 5.6-5.7z'/%3E%3C/svg%3E");
  --m-check-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 3.4V6l1.8 1.2' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 3.3v3.2' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.6' r='.9'/%3E%3C/svg%3E");
  --m-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 12h10M3 9.2 9.6 2.6l1.8 1.8L4.8 11H3z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4.2' y='1' width='3.6' height='6' rx='1.8'/%3E%3Cpath d='M2.6 5.6a3.4 3.4 0 0 0 6.8 0M6 9v2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-mic-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4.2' y='1' width='3.6' height='6' rx='1.8'/%3E%3Cpath d='M2.6 5.6a3.4 3.4 0 0 0 6.8 0M6 9v2M1.5 1.5l9 9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- tab 2: detail drawer, split into bordered blocks -------------------- */
.dc-ui-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); overflow-y: auto; padding: 0 0 14px; border-left: 1px solid var(--co-rule-bd, #B7C2CE); background: #F4F6F8; box-shadow: -12px 0 28px rgba(16,42,67,0.12); visibility: hidden; opacity: 0; transform: translateX(16px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s; }
.dc-ui-drawer.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dc-ui-dw-head { position: sticky; top: 0; z-index: 1; padding: 10px 12px 12px 16px; border-bottom: 1px solid var(--co-rule-bd, #B7C2CE); background: var(--white); }
.dc-ui-dw-crumb { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.dc-ui-dw-row { display: flex; align-items: flex-start; gap: 8px; }
.dc-ui-dw-row .dc-ui-num { margin-top: 4px; }
.dc-ui-dw-row h3 { flex: 1 1 auto; margin: 0; padding-top: 2px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.dc-ui-dw-row h3:focus { outline: none; }
.dc-ui-dw-block { margin: 0 12px; border: 1px solid #D5DCE3; border-radius: 8px; background: var(--white); }
.dc-ui-dw-h { margin: 0; padding: 7px 12px; border-bottom: 1px solid #E6EAEE; border-radius: 8px 8px 0 0; background: #F8FAFB; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.dc-ui-dw-body { padding: 10px 12px; }
.dc-ui-props { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 0; font-size: 13px; }
.dc-ui-props > div { display: contents; }
.dc-ui-props dt, .dc-ui-props dd { display: flex; align-items: center; gap: 6px; min-height: 42px; margin: 0; padding: 4px 12px; border-bottom: 1px solid #E6EAEE; }
.dc-ui-props dt { border-right: 1px solid #E6EAEE; background: #F8FAFB; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dc-ui-props dd { min-width: 0; color: var(--ink); }
.dc-ui-props > div:last-child > * { border-bottom: 0; }
.dc-ui-select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--white); font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; }
.co-sel { position: relative; display: block; width: 100%; }   /* holds the select's hotspot dot (a select cannot hold children) */
.dc-ui-props .dc-ui-select { width: 100%; min-height: 32px; border-color: var(--acc); border-radius: 8px; box-shadow: 0 2px 0 var(--edge); color: var(--acc); }
.dc-ui-select:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dc-ui-drawer__txt { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.8; color: var(--ink); }
.dc-ui-dw-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.dc-ui-dw-msg .dc-ui-msg__meta { margin: 0 0 2px; }
.dc-ui-dw-msg .dc-ui-msg__meta span { font-size: 13px; color: var(--muted); }
.dc-ui-dw-msg__t { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.75; color: var(--ink); }
.dc-ui-dw-foot { margin: 0; padding: 0 12px 12px 54px; }

/* ---- tab 3: meeting (shared screen + "チームの会話" room panel) ----------- */
.dc-ui--app .dc-ui-meet { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
.dc-ui--app .dc-ui-stage { display: flex; flex-direction: column; padding: 10px 12px 14px; border-radius: 10px; background: var(--navy); }
.dc-ui--app .dc-ui-stage .dc-ui-slide { display: flex; flex-direction: column; flex: 1 1 auto; }
/* The call fills the tab: the stage stretches (the free space goes to it, not
   to the spacer above the note) and the shared slide stays a 16:10 page,
   centred like a real screen share. Phones keep the compact stack. */
html.js .dc-ui--app .dc-ui-panel.is-active > .dc-ui-meet { flex: 1 0 auto; }
html.js .dc-ui--app #panel-chatops-3.is-active::after { flex-grow: 0; }
@media (min-width: 761px) { .dc-ui--app .dc-ui-stage .dc-ui-slide { flex: 0 0 auto; margin: auto 0; aspect-ratio: 16 / 10; } }
.dc-ui-slide__f { margin: auto 0 0; padding-top: 12px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-ui-live { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,0.88); }
.dc-ui-live b { padding: 0 6px; border-radius: 3px; background: var(--due-late, #C23B34); font-size: 13px; line-height: 1.8; color: var(--white); }   /* #FFF 5.29:1 */
.dc-ui-slide { min-height: 196px; padding: 18px 22px; border-radius: 4px; background: var(--white); }
.dc-ui-slide__t { margin: 0 0 12px; padding: 0 0 8px; border-bottom: 2px solid var(--acc); font-size: 16px; font-weight: 700; color: var(--navy); }
.dc-ui-slide ol { margin: 0; padding-left: 1.4em; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 2; color: var(--ink); }
.co-rooms { display: flex; flex-direction: column; border: 1px solid #D5DCE3; border-radius: 10px; background: var(--white); }
.co-rooms__h { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--co-line); border-radius: 10px 10px 0 0; background: #F6F6F6; font-size: 14px; font-weight: 700; color: var(--navy); }
.co-rooms__sec { display: flex; align-items: center; gap: 8px; margin: 10px 14px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.co-rooms__sec::after { content: ""; flex: 1 1 0; border-top: 1px dashed #C6D3E0; }
.co-room, .co-room__name { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--navy); }
.co-room svg, .co-room__name svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: var(--co-ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.co-room small { font-size: 13px; font-weight: 400; color: var(--muted); }
.co-room.is-joined { display: block; padding: 0; background: var(--tint); }
.co-room__who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin: 0; padding: 4px 14px 12px; list-style: none; }
.co-room__who li { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: center; }
.co-room__who li > span:not(.dc-ui-av) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-room__who .dc-ui-av { width: 40px; height: 40px; flex-basis: 40px; font-size: 14px; }
.co-room__who li.is-talk .dc-ui-av { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--co-ok); animation: co-talk 1.6s ease-in-out 3; }
@keyframes co-talk { 50% { box-shadow: 0 0 0 2px var(--white), 0 0 0 7px rgba(39,145,64,0.30); } }
.co-mic { position: absolute; top: 26px; left: calc(50% + 10px); width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px #D5DCE3; }
.co-mic::before { content: ""; position: absolute; inset: 2px; background: var(--co-ok); -webkit-mask: var(--m-mic) center / 12px no-repeat; mask: var(--m-mic) center / 12px no-repeat; }
.co-mic.is-off::before { background: #B8322C; -webkit-mask-image: var(--m-mic-off); mask-image: var(--m-mic-off); }
.co-rooms__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--co-line); }
.co-rooms__bar .co-btn--ico { flex: 1 1 0; }   /* the 2 controls fill the bar: the mic's right edge = the bar's, so its pill (align end) always fits */
.co-btn--ico { flex-direction: column; justify-content: center; gap: 2px; min-width: 56px; min-height: 48px; padding: 4px 6px; font-size: 13px; }
.co-btn--ico svg { width: 18px; height: 18px; flex-basis: 18px; }
.co-btn--ico .co-i-off { display: none; }
.co-btn--ico[aria-pressed="false"] .co-i-on { display: none; }
.co-btn--ico[aria-pressed="false"] .co-i-off { display: block; }
.co-btn--ico[aria-pressed="false"] { border-color: #B8322C; background: #FBE9E8; box-shadow: 0 2px 0 #F1C4C1; color: #B8322C; }   /* 5.08:1 */
.co-btn--ico[aria-pressed="true"] { background: var(--acc); color: var(--white); }

/* ---- tab 4: calendar (reuses .dc-ui-grid), rooms, reminder --------------- */
.dc-ui-cal { table-layout: fixed; }
.dc-ui-cal th { color: var(--muted); }
.dc-ui-cal thead th:first-child, .dc-ui-cal tbody th { width: 64px; font-variant-numeric: tabular-nums; }
.dc-ui-cal td { height: 52px; vertical-align: top; white-space: normal; }
.dc-ui-cal td small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.dc-ui--app .dc-ui-grid td.busy { background: var(--tint); box-shadow: inset 3px 0 0 var(--acc); color: var(--navy); }
.dc-ui--app .dc-ui-grid td.is-new { font-weight: 700; }
.dc-ui--app .dc-ui-grid td.is-new.is-flash { animation: co-flash-cell 1.6s var(--ease-out) both; }
@keyframes co-flash-cell { 0%, 60% { box-shadow: inset 3px 0 0 var(--acc), inset 0 0 0 3px var(--hot); } 100% { box-shadow: inset 3px 0 0 var(--acc); } }
.dc-ui-rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.dc-ui-rooms p { margin: 0 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.co-demo .dc-ui-scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dc-ui-remind { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--ink); }

/* ---- tab 5: files and search --------------------------------------------- */
.dc-ui-find { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--flat-bg); font-size: 14px; font-weight: 700; color: var(--navy); }
.dc-ui-find svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.co-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.co-seg .co-btn { white-space: nowrap; }
.co-seg .co-n { font-variant-numeric: tabular-nums; font-weight: 400; }   /* full colour: 5.28:1 */
.dc-ui-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dc-ui-sub { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.dc-ui-files { margin: 0 0 14px; padding: 0; list-style: none; }
.dc-ui-files li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EDF1F5; }
.dc-ui-ext { flex: 0 0 38px; padding: 5px 0; border-radius: 4px; background: var(--flat-bg); text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.dc-ui-ext[data-t="pdf"] { color: #B8322C; }   /* 4.97:1 on flat-bg */
.dc-ui-ext[data-t="xls"] { color: #1E7B3A; }   /* 4.85:1 on flat-bg */
.dc-ui-files__n { min-width: 0; flex: 1 1 auto; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--navy); overflow-wrap: anywhere; }
.dc-ui-files__n small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.dc-ui-files em { font-style: normal; font-size: 13px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-ui-hit { margin: 0; padding: 10px 12px; border-radius: 8px; background: #F7F9FA; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.8; color: var(--ink); }
.dc-ui-hit p { margin: 0; }
.dc-ui-hit b { display: block; font-size: 13px; color: var(--muted); }
.dc-ui-hit mark { padding: 0 2px; background: var(--mark); color: var(--ink); }
.co-hit-go { margin-top: 8px; }

/* ---- tab 6: AI assistant ------------------------------------------------- */
.dc-ui-draft { position: relative; margin: 8px 0 0; padding: 12px 64px 12px 14px; border-left: 3px solid var(--acc); border-radius: 0 10px 10px 0; background: #F7F9FA; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.9; color: var(--ink); }
.dc-ui-draft p { margin: 0; }
.co-draft-k { position: absolute; top: 8px; right: 8px; padding: 0 6px; font-size: 13px; }
.dc-ui-draft.is-regen [data-draft-body] { opacity: 0.35; transition: opacity var(--dur-3); }
.dc-ui-draft.is-regen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.8) 50%, transparent 80%); background-size: 200% 100%; animation: co-shimmer 0.6s linear 1; }
@keyframes co-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.dc-ui-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
/* where the answer comes from: a flat chip, part of the picture */
.co-src { margin: 6px 0 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--muted); }   /* plain text, no chip, no icon: nothing here to press */

/* ---- motion: entrance of the page-level controls; columns fade only (the
   demo measures card rects, so no transform on them) ------------------------ */
/* The legend and the tab bar stay put (no rise-in): home-motion.js toggles
   .is-in both ways, so a reveal here replayed on every scroll-back and left
   the focused tab invisible for ~600ms when tabbing in. */
.co-demo > .co-tabs { transition-delay: 80ms; }
/* The window's first reveal plays once per page view: it keys on the page
   latch (.co-feat-seen, solutions-chatops-sections.js, set on the first .is-in
   and never removed), not on .is-in, so scrolling back up does not replay it.
   The start state needs html.co-feat-motion, so no JS and reduced motion show
   the final state. A tab switch still staggers the new panel in (r4 spec). */
@keyframes dc-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.co-feat-motion .dc-ui--chat[data-co-feat-latch]:not(.co-feat-seen) .dc-ui-panel.is-active .dc-ui-in { opacity: 0; }
html.co-feat-motion .dc-ui--chat.co-feat-seen .dc-ui-panel.is-active .dc-ui-in { animation: dc-msg-in var(--dur-1, 0.55s) var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both; animation-delay: calc(var(--d, 0) * 140ms); }
html.co-feat-motion .dc-ui--chat.co-feat-seen .dc-ui-panel.is-active .dc-ui-col.dc-ui-in { animation-name: dc-fade-in; }
/* ---- motion: tab switch (round 4). window.coSwap (nav.js) sets html.co-vt
   for one View Transition at >= 1024px. Only the app window crossfades
   (200ms): the group sets the timing and the built-in old/new animations
   inherit it, keeping their plus-lighter blend, so the chrome that does not
   change (top bar, sidebar, rail) stays solid instead of dipping lighter
   mid-way (custom old/new keyframes would drop that blend). The page (root)
   and the sticky header swap at once, and naming the header keeps it
   painted above the window snapshot. The overlay lets clicks through to the
   live page, so a quick second press is never lost. Narrower: a 180ms WAAPI
   fade of the new panel (nav.js). Reduced motion: no transition at all. -- */
html.co-vt .dc-ui--app { view-transition-name: co-app; }
html.co-vt header.hdr { view-transition-name: co-hdr; }
html.co-vt::view-transition { pointer-events: none; }
html.co-vt::view-transition-old(root), html.co-vt::view-transition-new(root),
html.co-vt::view-transition-old(co-hdr), html.co-vt::view-transition-new(co-hdr) { animation: none; mix-blend-mode: normal; }
html.co-vt::view-transition-group(root), html.co-vt::view-transition-group(co-hdr) { animation: none; }
html.co-vt::view-transition-group(co-app) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---- responsive ------------------------------------------------------------ */
/* Stable height across tabs, so the section does not jump on a tab change.
   The kanban is the tallest panel: 782px at 1181-1440, 868px at 1024
   (measured; check-app3 asserts equal window heights at 1440). */
@media (min-width: 1181px) { .dc-ui--app .dc-ui-main { min-height: 784px; } }
/* Floor for the kanban canvas, so the detail drawer (absolute inside it, 360px
   wide, tallest card 588px) never scrolls, whatever the columns hold after the
   demo or a drag. The drawer JS also raises it if content ever gets taller. */
@media (min-width: 761px) { .dc-ui--app .dc-ui-kb { min-height: 600px; } }
@media (min-width: 901px) and (max-width: 1180px) { .dc-ui--app .dc-ui-main { min-height: 870px; } }
@media (max-width: 1180px) {
  .co-tabs.dc-ui-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
@media (max-width: 900px) {
  .dc-ui--app .dc-ui-body { grid-template-columns: minmax(0, 1fr); }
  .co-teams, .dc-ui--app .dc-ui-rail, .co-bar-grp, .co-bar-end > :not(.co-me):not(.co-tc), .co-search-l { display: none; }
  /* no sidebar: the top bar keeps only チームの会話. The search shortcut is
     dropped here (the header file icon and the tab bar still reach tab 5), so
     the チームの会話 tooltip has room on its left instead of dropping onto the
     channel-header icons right below it */
  .dc-ui--app .dc-ui-search { display: none; }
  .co-bar-end { margin-left: auto; }
}
@media (max-width: 760px) {
  .co-legend { font-size: 13px; }
  .co-tabs.dc-ui-tabs { gap: 6px; }
  .co-tabs .dc-ui-tab { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 4px; font-size: 13px; line-height: 1.4; text-align: center; }
  .dc-ui--app .dc-ui-panel { padding: 0 14px 16px; }
  .co-chhead { margin: 0 -14px 12px; padding: 8px 14px; }
  .co-chhead__desc, .co-chhead__meta { display: none; }
  .co-views { margin-left: auto; padding-left: 0; border-left: 0; }
  .dc-ui--app .dc-ui-kb { margin: 0 -14px; padding: 12px 14px 14px; }
  .dc-ui--app .dc-ui-board { grid-template-columns: repeat(3, min(72vw, 280px)); min-width: 0; }   /* the next column peeks in */
  .dc-ui--app .dc-ui-kb .dc-ui-scroll { scroll-snap-type: x mandatory; }
  .dc-ui--app .dc-ui-col { scroll-snap-align: start; }
  .dc-ui-drawer { width: 100%; border-left: 0; }
  .dc-ui--app .dc-ui-meet { grid-template-columns: minmax(0, 1fr); }
  .co-rooms > .co-room:not(.is-joined) { display: none; }
  /* rooms: 会議室B and C always share one row, C on the right, so its pill
     (align end) never leaves the window */
  .dc-ui-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-ui-rooms > p, .dc-ui-rooms > .co-flat { grid-column: 1 / -1; justify-self: start; }
  .dc-ui-rooms > .co-btn { justify-content: center; }
  .dc-ui-slide { min-height: 0; padding: 14px 16px; }
  .co-rhs { border-left: 0; }
  .co-coach[data-pos="right"] { left: 0; top: calc(100% + 10px); transform: none; }
  .co-coach[data-pos="right"]::after { top: auto; bottom: 100%; left: 16px; right: auto; margin-top: 0; border-right-color: transparent; border-bottom-color: var(--navy); }
  /* 作り直す is the 2nd button of its row: its pill hangs to the left, so it stays in the window at 320 */
  .dc-ui-acts .co-coach[data-pos="right"] { left: auto; right: 0; }
  .dc-ui-acts .co-coach[data-pos="right"]::after { left: auto; right: 16px; }
  .co-demo .is-hotroom[data-hot-room="below-narrow"] { margin-bottom: 44px; }
}
@media (max-width: 360px) {
  .co-seg { flex-wrap: nowrap; }   /* 3 filters stay on one row, so the pill below ファイル covers nothing */
  .co-seg .co-btn { padding: 4px 8px; }
  .dc-ui--app .dc-ui-thread .dc-ui-av { display: none; }
  .dc-ui--app .dc-ui-thread b { margin-left: 2px; }
}
@media (max-width: 330px) {
  .co-seg { gap: 4px; }
  .co-seg .co-btn { padding: 4px 6px; }   /* the 3 nowrap filters still fit one row at 300px */
}
@media (prefers-reduced-motion: reduce) {
  .dc-ui--chat .dc-ui-in { animation: none !important; opacity: 1 !important; }
  .dc-ui-drawer, .dc-ui-cursor, .dc-ui-col, .co-btn, .co-x, .co-tabs .dc-ui-tab, .dc-ui-task, .dc-ui-due, .dc-ui-task__ck, .dc-ui-react__b, .dc-ui--app .dc-ui-thread, .co-beacon { transition: none !important; }
  .co-demo .co-beacon, .co-demo .co-beacon::after { animation: none !important; }
  .co-demo .co-beacon.is-main::after { transform: scale(1.6); opacity: 0.35; }
  .co-coach, .co-coach.is-out, .is-flash, .dc-ui--app .dc-ui-grid td.is-new.is-flash { animation: none; }
  .is-flash { box-shadow: 0 0 0 3px var(--hot); }
  .dc-ui--app .dc-ui-grid td.is-new.is-flash { box-shadow: inset 3px 0 0 var(--acc), inset 0 0 0 3px var(--hot); }
  .co-room__who li.is-talk .dc-ui-av { animation: none; }
  .dc-ui-draft.is-regen::after { animation: none; }
  .co-rhs { animation: none; }
  html.js .co-demo[data-io] > .co-legend, html.js .co-demo[data-io] > .co-tabs { opacity: 1; transform: none; transition: none; }
}

/* Text floor: the calendar's weekday heads (月 火 …) are 12px in
   home-prototype.css; Japanese text on this page is 13px or more. */
.dc-ui--app .dc-ui-cal th { font-size: 13px; }