/*
 * grabado: アイコン（#169 で器、#170 で字形）。
 *
 * ---------------------------------------------------------------------------
 * 字形の出典: Material Symbols — https://github.com/google/material-design-icons
 * ライセンス: Apache License 2.0（全文は ../../third-party/material-symbols/LICENSE）
 * 加えた変更: `symbols/web/<name>/materialsymbolsoutlined/<name>_20px.svg` の
 *             <svg> を、URL エンコードして下の `--icon` の data: URI に写した。
 *             字形そのもの（<path> の d）は 1 文字も変えていない。
 * ---------------------------------------------------------------------------
 * ★ 帰属をここに書く理由: **CSS は dist にバイト単位でそのまま出る**
 *   （docs/ARCHITECTURE.md §5.1.1）。Dockerfile は frontend/dist だけを入れるので、
 *   **配布物が帰属を持ち歩く手段はこのコメントしか無い**。消さないこと。
 *
 * ★ このファイルは title を持たない <link> で読む = テーマを切り替えても効く。
 *   だから **テーマのトークン（--brand など）を参照しない** ——
 *   original を選ぶと material-inspired.css ごと disabled になって未定義になる。
 *   参照してよいのは styles/base.css の :root にあるものだけ
 *   （tests/node/styles.test.ts が見ている）。
 *
 * ★★ なぜラッパー（span）が要るか: <input type="button"> は置換要素なので
 *   疑似要素を持てない。mask を input 自身に当てるとラベル文字ごと切り抜かれる。
 *   <button> へは変えられない —— elm.value = _(id) にラベルが入り、
 *   tests/browser/io-ui.spec.ts が value の実文字列を読む。
 *
 * ★★ なぜ background-image ではなく mask か: SVG を background-image で読むと
 *   画像文書として扱われ、SVG 内の色がホスト要素の色を見ない。黒・白の 2 諧調を
 *   用意してテーマとホバーごとに切り替える羽目になる（定義が 88 本になる）。
 *   mask なら 44 本 1 諧調で、色の正本が currentColor 1 つに閉じる。
 *   **CSP の下で通ることは #169 で配布物を使って実測した**（img-src 'self' data: で足りる）。
 *
 * ★ data: URI をここに置く理由: 個別ファイルにすると SecurityHeadersFilter が
 *   /images/ に no-cache を返すので、ページを開くたび 44 本の条件付き GET が走る
 *   （/assets/ は immutable）。base64 ではなく URL エンコードにしてあるのは、
 *   base64 が生の 4/3 に膨らんで diff が読めなくなるため。
 */

.tb {
    position: relative;
    display: block;
}

.tb::before {
    content: "";
    position: absolute;
    pointer-events: none;
    /*
     * ★ z-index が要る —— input[type=button] は position: relative を持つので
     *   （material-inspired.css）、同じ stacking context で **DOM 順が後ろの input が
     *   上に来る**。疑似要素は最初の子として扱われるため、input の背景に隠れる。
     *   pointer-events: none があるのでクリックは素通りする。
     */
    z-index: 1;
    left: var(--space-3);
    top: 50%;
    translate: 0 -50%;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/*
 * #toggle は <div> なので、ラッパーを挟まずに疑似要素を直接使える。
 * ★ 上下は 1 枚を rotate で畳む —— PNG 4 枚（up_2_black / up_2_white /
 *   down_2_black / down_2_white）が消える。色は currentColor が持つので、
 *   黒白 2 枚を持つ理由も無くなった。
 *
 * ★★ material 系だけに当てる —— original は up.gif / down.gif を使っており、
 *   #toggle の高さが 5px（material は 22px）なので 18px の字形が収まらない。
 *   **#169 で入れた data-theme の初回利用**（あちらは属性を書くだけで、読み手が 0 本だった）。
 */
[data-theme^="material-"] #toggle::before {
    content: "";
    display: block;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / var(--icon-size) no-repeat;
    mask: var(--icon) center / var(--icon-size) no-repeat;
}

[data-theme^="material-"] #toggle.off::before {
    rotate: 180deg;
}

/* ツールバー（19） */
/* undo */
.i-undo {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M288-192v-72h288q50%200%2085-35t35-85q0-50-35-85t-85-35H330l93%2093-51%2051-180-180%20180-180%2051%2051-93%2093h246q80%200%20136%2056t56%20136q0%2080-56%20136t-136%2056H288Z%22/%3E%3C/svg%3E");
}
/* redo */
.i-redo {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M384-192q-80%200-136-56t-56-136q0-80%2056-136t136-56h246l-93-93%2051-51%20180%20180-180%20180-51-51%2093-93H384q-50%200-85%2035t-35%2085q0%2050%2035%2085t85%2035h288v72H384Z%22/%3E%3C/svg%3E");
}
/* swap_vert */
.i-saveload {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M324-432v-294L219-621l-51-51%20192-192%20192%20192-51%2051-105-105v294h-72ZM600-96%20408-288l51-51%20105%20105v-294h72v294l105-105%2051%2051L600-96Z%22/%3E%3C/svg%3E");
}
/* add_box */
.i-addtable {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M444-288h72v-156h156v-72H516v-156h-72v156H288v72h156v156ZM216-144q-29.7%200-50.85-21.15Q144-186.3%20144-216v-528q0-29.7%2021.15-50.85Q186.3-816%20216-816h528q29.7%200%2050.85%2021.15Q816-773.7%20816-744v528q0%2029.7-21.15%2050.85Q773.7-144%20744-144H216Zm0-72h528v-528H216v528Zm0-528v528-528Z%22/%3E%3C/svg%3E");
}
/* edit_square */
.i-edittable {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M216-144q-29.7%200-50.85-21.15Q144-186.3%20144-216v-528q0-30.11%2021-51.56Q186-817%20216-816h346l-72%2072H216v528h528v-274l72-72v346q0%2029.7-21.15%2050.85Q773.7-144%20744-144H216Zm264-336Zm-96%2096v-153l354-354q11-11%2024-16t26.5-5q14.4%200%2027.45%205%2013.05%205%2023.99%2015.78L891-840q11%2011%2016%2024.18t5%2026.82q0%2013.66-5.02%2026.87-5.02%2013.2-15.98%2024.13L537-384H384Zm456-405-51-51%2051%2051ZM456-456h51l231-231-25-26-26-25-231%20231v51Zm257-257-26-25%2026%2025%2025%2026-25-26Z%22/%3E%3C/svg%3E");
}
/* key */
.i-tablekeys {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M288-384q-40%200-68-28t-28-68q0-40%2028-68t68-28q40%200%2068%2028t28%2068q0%2040-28%2068t-68%2028Zm0%20144q-100%200-170-70T48-480q0-100%2070-170t170-70q65%200%20120%2032.5t88%2087.5h344l120%20120-180%20168-84-60-72%2060-96-72h-20q-24%2068-85.5%20106T288-240Zm0-72q63%200%20111-40.5T454-456h98l70%2052%2071-59%2081%2058%2082-76-46-47H449q-19-53-62.5-86.5T288-648q-70%200-119%2049t-49%20119q0%2070%2049%20119t119%2049Z%22/%3E%3C/svg%3E");
}
/* delete */
.i-removetable, .i-keyremove {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M312-144q-29.7%200-50.85-21.15Q240-186.3%20240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186%20698.85-165T648-144H312Zm336-552H312v480h336v-480ZM384-288h72v-336h-72v336Zm120%200h72v-336h-72v336ZM312-696v480-480Z%22/%3E%3C/svg%3E");
}
/* delete_sweep */
.i-cleartables {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M624-288v-72h144v72H624Zm0-264v-72h240v72H624Zm0%20132v-72h192v72H624ZM144-624H96v-72h168v-72h144v72h168v72h-48v360q0%2029.7-21.15%2050.85Q485.7-192%20456-192H216q-29.7%200-50.85-21.15Q144-234.3%20144-264v-360Zm72%200v360h240v-360H216Zm0%200v360-360Z%22/%3E%3C/svg%3E");
}
/* playlist_add */
.i-addrow {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M144-396v-72h288v72H144Zm0-150v-72h432v72H144Zm0-150v-72h432v72H144Zm492%20456v-156H480v-72h156v-156h72v156h156v72H708v156h-72Z%22/%3E%3C/svg%3E");
}
/* edit */
.i-editrow {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M216-216h51l375-375-51-51-375%20375v51Zm-72%2072v-153l498-498q11-11%2023.84-16%2012.83-5%2027-5%2014.16%200%2027.16%205t24%2016l51%2051q11%2011%2016%2024t5%2026.54q0%2014.45-5.02%2027.54T795-642L297-144H144Zm600-549-51-51%2051%2051Zm-127.95%2076.95L591-642l51%2051-25.95-25.05Z%22/%3E%3C/svg%3E");
}
/* arrow_upward */
.i-uprow {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M444-192v-438L243-429l-51-51%20288-288%20288%20288-51%2051-201-201v438h-72Z%22/%3E%3C/svg%3E");
}
/* arrow_downward */
.i-downrow {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M444-768v438L243-531l-51%2051%20288%20288%20288-288-51-51-201%20201v-438h-72Z%22/%3E%3C/svg%3E");
}
/* add_link */
.i-foreigncreate {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M684-180v-108H576v-72h108v-108h72v108h108v72H756v108h-72ZM432-288H288q-79.68%200-135.84-56.23Q96-400.45%2096-480.23%2096-560%20152.16-616q56.16-56%20135.84-56h144v72H288q-50%200-85%2035t-35%2085q0%2050%2035%2085t85%2035h144v72Zm-96-156v-72h288v72H336Zm528-36h-72q0-50-35-85t-85-35H528v-72h144q79.68%200%20135.84%2056.16T864-480Z%22/%3E%3C/svg%3E");
}
/* link */
.i-foreignconnect {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M432-288H288q-79.68%200-135.84-56.23Q96-400.45%2096-480.23%2096-560%20152.16-616q56.16-56%20135.84-56h144v72H288q-50%200-85%2035t-35%2085q0%2050%2035%2085t85%2035h144v72Zm-96-156v-72h288v72H336Zm192%20156v-72h144q50%200%2085-35t35-85q0-50-35-85t-85-35H528v-72h144q79.68%200%20135.84%2056.23%2056.16%2056.22%2056.16%20136Q864-400%20807.84-344%20751.68-288%20672-288H528Z%22/%3E%3C/svg%3E");
}
/* link_off */
.i-foreigndisconnect {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m754-308-56-55q41.78-11.3%2067.89-43.65Q792-439%20792-480q0-50-35-85t-85-35H528v-72h144q79.68%200%20135.84%2056.22%2056.16%2056.23%2056.16%20136Q864-425%20834.5-379T754-308ZM618-444l-72-72h78v72h-6ZM768-90%2090-768l51-51%20678%20678-51%2051ZM432-288H288q-79.68%200-135.84-56.16T96-480q0-63.93%2038-113.97Q172-644%20242-673l70%2073h-23q-51%200-86%2035t-35%2085q0%2050%2035%2085t85%2035h144v72Zm-96-156v-72h56l71%2072H336Z%22/%3E%3C/svg%3E");
}
/* playlist_remove */
.i-removerow {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m579-240-51-51%2094-93-94-94%2051-51%2093%2094%2094-94%2051%2051-94%2094%2094%2093-51%2051-94-94-93%2094ZM144-445v-72h288v72H144Zm0-150v-72h432v72H144Zm0-150v-72h432v72H144Z%22/%3E%3C/svg%3E");
}
/* settings */
.i-options {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m403-96-22-114q-23-9-44.5-21T296-259l-110%2037-77-133%2087-76q-2-12-3-24t-1-25q0-13%201-25t3-24l-87-76%2077-133%20110%2037q19-16%2040.5-28t44.5-21l22-114h154l22%20114q23%209%2044.5%2021t40.5%2028l110-37%2077%20133-87%2076q2%2012%203%2024t1%2025q0%2013-1%2025t-3%2024l87%2076-77%20133-110-37q-19%2016-40.5%2028T579-210L557-96H403Zm59-72h36l19-99q38-7%2071-26t57-48l96%2032%2018-30-76-67q6-17%209.5-35.5T696-480q0-20-3.5-38.5T683-554l76-67-18-30-96%2032q-24-29-57-48t-71-26l-19-99h-36l-19%2099q-38%207-71%2026t-57%2048l-96-32-18%2030%2076%2067q-6%2017-9.5%2035.5T264-480q0%2020%203.5%2038.5T277-406l-76%2067%2018%2030%2096-32q24%2029%2057%2048t71%2026l19%2099Zm18-168q60%200%20102-42t42-102q0-60-42-102t-102-42q-60%200-102%2042t-42%20102q0%2060%2042%20102t102%2042Zm0-144Z%22/%3E%3C/svg%3E");
}
/* menu_book */
.i-docs {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M564-578v-76q31-10%2064-14.5t68-4.5q23%200%2046.5%202.5T792-663v74q-30-7-53-10t-43-3q-34%200-67%206t-65%2018Zm0%20236v-76q28-9%2060-14.5t72-5.5q27%200%2050.5%203t45.5%208v74q-30-7-53-10t-43-3q-34%200-67%206t-65%2018Zm0-118v-76q32-10%2065.5-15t66.5-5q27%200%2050.5%203t45.5%208v74q-26-7-49.5-10t-46.5-3q-32%200-64.5%206T564-460ZM264-288q47%200%2092%2012t88%2030v-454q-42-22-87-33t-93-11q-37%200-73.5%206.5T120-716v452q35-13%2071-18.5t73-5.5Zm252%2042q43-20%2088-31t92-11q37%200%2073.5%204.5T840-264v-452q-35-13-71-20.5t-73-7.5q-48%200-93%2011t-87%2033v454Zm-36%20102q-49-32-103-52t-113-20q-38%200-76%207.5T115-186q-24%2010-45.5-3.5T48-229v-503q0-14%207.5-26T76-776q45-20%2092-30t96-10q57%200%20111.5%2013.5T480-762q51-26%20105-40t111-14q49%200%2096%2010t92%2030q13%206%2021%2018t8%2026v503q0%2025-15.5%2040t-32.5%207q-40-18-82.5-26t-86.5-8q-59%200-113%2020t-103%2052ZM283-495Z%22/%3E%3C/svg%3E");
}

/* Save / Load（18）—— 動詞ではなく行き先を描く */
/* output */
.i-clientsave {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M216-144q-29.7%200-50.85-21.15Q144-186.3%20144-216v-528q0-29.7%2021.15-50.85Q186.3-816%20216-816h528q29.7%200%2050.85%2021.15Q816-773.7%20816-744v72h-72v-72H216v528h528v-72h72v72.21Q816-186%20794.85-165T744-144H216Zm456-144-51-51%20105-105H384v-72h342L621-621l51-51%20192%20192-192%20192Z%22/%3E%3C/svg%3E");
}
/* input */
.i-clientload {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M168-192q-29.7%200-50.85-21.15Q96-234.3%2096-264v-120h72v120h624v-432H168v120H96v-120q0-30%2021.15-51T168-768h624q29.7%200%2050.85%2021.16Q864-725.68%20864-695.96v432.24Q864-234%20842.85-213T792-192H168Zm240-120-51-51%2081-81H96v-72h342l-81-81%2051-51%20168%20168-168%20168Z%22/%3E%3C/svg%3E");
}
/* content_copy */
.i-clientcopy {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M360-240q-29.7%200-50.85-21.15Q288-282.3%20288-312v-480q0-29.7%2021.15-50.85Q330.3-864%20360-864h384q29.7%200%2050.85%2021.15Q816-821.7%20816-792v480q0%2029.7-21.15%2050.85Q773.7-240%20744-240H360Zm0-72h384v-480H360v480ZM216-96q-29.7%200-50.85-21.15Q144-138.3%20144-168v-552h72v552h456v72H216Zm144-216v-480%20480Z%22/%3E%3C/svg%3E");
}
/* content_paste */
.i-clientpaste {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M216-144q-29.7%200-50.85-21.15Q144-186.3%20144-216v-528q0-29.7%2021.15-50.85Q186.3-816%20216-816h171q8-31%2033.5-51.5T480-888q34%200%2059.5%2020.5T573-816h171q29.7%200%2050.85%2021.15Q816-773.7%20816-744v528q0%2029.7-21.15%2050.85Q773.7-144%20744-144H216Zm0-72h528v-528h-72v120H288v-120h-72v528Zm263.79-528q15.21%200%2025.71-10.29t10.5-25.5q0-15.21-10.29-25.71t-25.5-10.5q-15.21%200-25.71%2010.29t-10.5%2025.5q0%2015.21%2010.29%2025.71t25.5%2010.5Z%22/%3E%3C/svg%3E");
}
/* download */
.i-clientdownload {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M480-336%20288-528l51-51%20105%20105v-342h72v342l105-105%2051%2051-192%20192ZM263.72-192Q234-192%20213-213.15T192-264v-72h72v72h432v-72h72v72q0%2029.7-21.16%2050.85Q725.68-192%20695.96-192H263.72Z%22/%3E%3C/svg%3E");
}
/* file_open */
.i-clientloadfromfile {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M264-109q-29.7%200-50.85-21.15Q192-151.3%20192-181v-624q0-29.7%2021.15-50.85Q234.3-877%20264-877h312l192%20192v288h-72v-240H528v-168H264v624h336v72H264Zm586%2013L744-202v81h-72v-204h204v72h-82l106%20106-50%2051Zm-586-85v-624%20624Z%22/%3E%3C/svg%3E");
}
/* save */
.i-clientlocalsave {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M816-672v456q0%2029.7-21.15%2050.85Q773.7-144%20744-144H216q-29.7%200-50.85-21.15Q144-186.3%20144-216v-528q0-29.7%2021.15-50.85Q186.3-816%20216-816h456l144%20144Zm-72%2030L642-744H216v528h528v-426ZM480-252q45%200%2076.5-31.5T588-360q0-45-31.5-76.5T480-468q-45%200-76.5%2031.5T372-360q0%2045%2031.5%2076.5T480-252ZM264-552h336v-144H264v144Zm-48-77v413-528%20115Z%22/%3E%3C/svg%3E");
}
/* restore_page */
.i-clientlocalload {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M480-288q70%200%20119-49t49-119q0-70-49-119t-119-49q-38.37%200-71.68%2016.5Q375-591%20352-564v-60h-48v144h144v-48h-64q17-22%2042-35t54-13q49.85%200%2084.92%2035.11%2035.08%2035.11%2035.08%2085T564.92-371q-35.07%2035-84.92%2035-29%200-54-13t-42-35h-55q20%2043%2060%2069.5t91%2026.5ZM263.72-96Q234-96%20213-117.15T192-168v-624q0-29.7%2021.15-50.85Q234.3-864%20264-864h312l192%20192v504q0%2029.7-21.16%2050.85Q725.68-96%20695.96-96H263.72Zm.28-72h432v-474L546-792H264v624Zm0%200v-624%20624Z%22/%3E%3C/svg%3E");
}
/* list */
.i-clientlocallist {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M288-600v-72h528v72H288Zm0%20156v-72h528v72H288Zm0%20156v-72h528v72H288ZM180-600q-14%200-25-11t-11-25.5q0-14.5%2011-25t25.5-10.5q14.5%200%2025%2010.35T216-636q0%2014-10.35%2025T180-600Zm0%20156q-14%200-25-11t-11-25.5q0-14.5%2011-25t25.5-10.5q14.5%200%2025%2010.35T216-480q0%2014-10.35%2025T180-444Zm0%20156q-14%200-25-11t-11-25.5q0-14.5%2011-25t25.5-10.5q14.5%200%2025%2010.35T216-324q0%2014-10.35%2025T180-288Z%22/%3E%3C/svg%3E");
}
/* code */
.i-clientsql {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M336-240%2096-480l240-240%2051%2051-189%20189%20189%20189-51%2051Zm288%200-51-51%20189-189-189-189%2051-51%20240%20240-240%20240Z%22/%3E%3C/svg%3E");
}
/* data_object */
.i-clientorm {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M576-192v-72h84q15.3%200%2025.65-10.35Q696-284.7%20696-300v-72q0-41%2027.5-70.5T792-477v-4q-41-8-68.5-37T696-588v-72q0-15.3-10.35-25.65Q675.3-696%20660-696h-84v-72h84q45%200%2076.5%2031.5T768-660v72q0%2015.3%2010.35%2025.65Q788.7-552%20804-552h60v144h-60q-15.3%200-25.65%2010.35Q768-387.3%20768-372v72q0%2045-31.5%2076.5T660-192h-84Zm-276%200q-45%200-76.5-31.5T192-300v-72q0-15.3-10.35-25.65Q171.3-408%20156-408H96v-144h60q15.3%200%2025.65-10.35Q192-572.7%20192-588v-72q0-45%2031.5-76.5T300-768h84v72h-84q-15.3%200-25.65%2010.35Q264-675.3%20264-660v72q0%2042-27.5%2071.5T168-482v4.15Q209-474%20236.5-444t27.5%2072v72q0%2015.3%2010.35%2025.65Q284.7-264%20300-264h84v72h-84Z%22/%3E%3C/svg%3E");
}
/* cloud_upload */
.i-serversave {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M240-192q-80%200-136-56.5T48-385q0-76%2051.5-131.5T227-576q23.43-85.75%2093.7-138.87Q390.98-768%20480-768q107%200%20185.5%2068.5T744-528q70%200%20119%2049t49%20118q0%2070.42-49%20119.71Q814-192%20744-192H516q-29.7%200-50.85-21.15Q444-234.3%20444-264v-174l-57%2057-51-51%20144-144%20144%20144-51%2051-57-57v174h228q40.32%200%2068.16-27.77%2027.84-27.78%2027.84-68Q840-400%20812.16-428q-27.84-28-68.16-28h-72v-72q0-73-57.5-120.5t-135-47.5Q402-696%20348-639.5T283-504h-43q-49.71%200-84.86%2035.2-35.14%2035.2-35.14%2085t35.14%2084.8q35.15%2035%2084.86%2035h132v72H240Zm240-246Z%22/%3E%3C/svg%3E");
}
/* cloud_download */
.i-serverload {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M240-192q-80%200-136-56.5T48-385q0-79%2052-135t127-56q20-77%2085.5-132T444-763q29.7%200%2050.85%2019.5Q516-724%20516-693v246l57-57%2051%2051-144%20144-144-144%2051-51%2057%2057v-246q-71%2017-113.5%2070T283-504h-43q-49.71%200-84.86%2035.2-35.14%2035.2-35.14%2085t35.14%2084.8q35.15%2035%2084.86%2035h504q40.32%200%2068.16-27.77%2027.84-27.78%2027.84-68Q840-400%20812.16-428q-27.84-28-68.16-28h-72v-72q0-35-17-68t-49-60v-83q63%2030%20100.5%2086.87Q744-595.25%20744-528q70%200%20119%2049t49%20118q0%2071-49.5%20120T744-192H240Zm240-327Z%22/%3E%3C/svg%3E");
}
/* bolt */
.i-quicksave {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m437-249%20183-231H471l26-221-173%20269h146l-33%20183ZM336-96l48-264H192l324-504h72l-36%20312h216L408-96h-72Zm136-379Z%22/%3E%3C/svg%3E");
}
/* folder_open */
.i-serverlist {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M168-192q-32%200-52-21.16t-20-50.88v-432.24Q96-726%20116-747t52-21h216l96%2096h313q31%200%2050.5%2021t21.5%2051H451l-96-96H168v432l78-264h690l-85%20285q-8%2023-21%2037t-38%2014H168Zm75-72h538l59-192H300l-57%20192Zm0%200%2057-192-57%20192Zm-75-336v-96%2096Z%22/%3E%3C/svg%3E");
}
/* database */
.i-serverimport {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M479.5-144q-140.5%200-238-41.85T144-288v-384q0-60%2098-102t237.5-42q139.5%200%20238%2042T816-672v384q0%2060.3-98%20102.15Q620-144%20479.5-144Zm.47-456Q566-600%20646-621.5t98-50.5q-18-28-98.5-50t-165.53-22Q394-744%20313.5-722T216-672q17%2029%2096.5%2050.5T479.97-600Zm.03%20192q42%200%2080-4.5t71.5-12.5q33.5-8%2062-20.5T744-474v-109q-24.25%2013.22-53.62%2023.61Q661-549%20627.17-542.15q-33.83%206.85-71%2010.5Q519-528%20479.5-528t-77.11-3.65q-37.62-3.65-71-10.5Q298-549%20268.5-559.5%20239-570%20216-583v109q22.41%2015.94%2050.21%2028.47Q294-433%20327.5-425q33.5%208%2072%2012.5T480-408Zm.32%20192q43.32%200%2088.05-6.4%2044.73-6.39%2082.4-16.9%2037.67-10.5%2063.09-23.75Q739.29-276.3%20744-290v-101q-24.25%2013.22-53.62%2023.61Q661-357%20627.17-350.15q-33.83%206.85-71%2010.5Q519-336%20479.5-336t-77.11-3.65q-37.62-3.65-71-10.5Q298-357%20268.5-367.5%20239-378%20216-391v103q5%2013%2030.5%2026t63%2023q37.5%2010%2082.5%2016.5t88.32%206.5Z%22/%3E%3C/svg%3E");
}
/* auto_awesome */
.i-aireview {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20width=%2220%22%3E%3Cpath%20d=%22m15.792%207.667-1.084-2.355-2.312-1.062%202.312-1.062L15.792.833l1.083%202.355%202.313%201.062-2.313%201.062Zm0%2011.5-1.084-2.334-2.312-1.062%202.312-1.063%201.084-2.354%201.083%202.354%202.313%201.063-2.313%201.062Zm-8.167-2.334-2.104-4.687L.833%2010l4.688-2.125%202.104-4.687L9.75%207.875%2014.417%2010%209.75%2012.146Zm0-4.271.813-1.729L10.146%2010l-1.708-.812-.813-1.73-.792%201.73L5.104%2010l1.729.833Zm0-2.562Z%22/%3E%3C/svg%3E");
}
/* auto_fix_high */
.i-aiapply {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20width=%2220%22%3E%3Cpath%20d=%22m16.5%206-.771-1.729L14%203.5l1.729-.792L16.5%201l.771%201.708L19%203.5l-1.729.771ZM7%206l-.771-1.729L4.5%203.5l1.729-.792L7%201l.771%201.708L9.5%203.5l-1.729.771Zm9.5%209.417-.771-1.729L14%2012.917l1.729-.792.771-1.708.771%201.708%201.729.792-1.729.771ZM4.417%2017.688l-2.125-2.105Q2%2015.292%202%2014.875t.292-.708l8.75-8.75q.291-.292.708-.292t.708.292l2.104%202.125q.292.291.292.708t-.292.708l-8.729%208.73q-.291.291-.708.291t-.708-.291Zm.708-1.396%206.063-6.063-1.417-1.417-6.063%206.063Z%22/%3E%3C/svg%3E");
}

/* ダイアログ（7） */
/* check */
.i-windowok {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M389-267%20195-460l51-52%20143%20143%20325-324%2051%2051-376%20375Z%22/%3E%3C/svg%3E");
}
/* close */
.i-windowcancel {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m291-240-51-51%20189-189-189-189%2051-51%20189%20189%20189-189%2051%2051-189%20189%20189%20189-51%2051-189-189-189%20189Z%22/%3E%3C/svg%3E");
}
/*
 * #311: **確定の無いパネル（#io）では、OK が「閉じる」になる。**
 *
 * ★ **class は差し替えず、`--icon` だけ上書きする** —— `.tb.i-windowok` は
 *   tests/dist/smoke.spec.ts が見ているセレクタで、差し替えると外れる。
 *   絵柄は上の .i-windowcancel と同じ close（**同じ意味のボタンは同じ絵**）。
 */
.i-windowok.is-close {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22m291-240-51-51%20189-189-189-189%2051-51%20189%20189%20189-189%2051%2051-189%20189%20189%20189-51%2051-189-189-189%20189Z%22/%3E%3C/svg%3E");
}
/* add */
.i-keyadd {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z%22/%3E%3C/svg%3E");
}
/* keyboard_double_arrow_left */
.i-keyleft {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M432-240%20192-480l240-240%2051%2051-189%20189%20189%20189-51%2051Zm285%200L477-480l240-240%2051%2051-189%20189%20189%20189-51%2051Z%22/%3E%3C/svg%3E");
}
/* keyboard_double_arrow_right */
.i-keyright {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M381-480%20192-669l51-51%20240%20240-240%20240-51-51%20189-189Zm285%200L477-669l51-51%20240%20240-240%20240-51-51%20189-189Z%22/%3E%3C/svg%3E");
}
/* comment */
.i-commentbtn {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M240-384h480v-72H240v72Zm0-132h480v-72H240v72Zm0-132h480v-72H240v72ZM864-96%20720-240H168q-29.7%200-50.85-21.15Q96-282.3%2096-312v-480q0-29.7%2021.15-50.85Q138.3-864%20168-864h624q29.7%200%2050.85%2021.15Q864-821.7%20864-792v696ZM168-312h582l42%2042v-522H168v480Zm0%200v-480%20480Z%22/%3E%3C/svg%3E");
}

/*
 * 状態表示。
 *
 * ★ 入っているのは #toggle だけ。<select> の三角・.primary / .key・コメント有無マークは
 *   **この PR では入れない** —— <select> と <input> は置換要素なので疑似要素を持てず、
 *   background-image では色が currentColor に追従しない（#172 のダークで破れる）。
 *   行の中に字形を足すと列幅が動き、#area のレイアウトが変わる。どちらも #171 で扱う。
 *
 * ★ #toggle だけ id で当てる —— frontend/js/toggle.ts:38 が
 *   `this._elm.className = this._state ? "on" : "off"` と **className ごと上書きする**ので、
 *   クラスで --icon を渡すと開閉のたびに消える（2026-09-05 に踏んだ）。
 */
/* keyboard_arrow_up */
#toggle {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20height=%2220%22%20viewBox=%220%20-960%20960%20960%22%20width=%2220%22%3E%3Cpath%20d=%22M480-525%20291-336l-51-51%20240-240%20240%20240-51%2051-189-189Z%22/%3E%3C/svg%3E");
}

/*
 * ---------------------------------------------------------------------------
 * 当て先のレイアウト。**アイコンを入れたから必要になった規則だけ**をここに置く
 * （テーマの色は各テーマの CSS が持つ。ここは常に効くのでテーマのトークンを参照しない）。
 * ---------------------------------------------------------------------------
 */

/*
 * ツールバー: 溝 30px を左に空け、ラベルを左寄せにする。
 * ★ 中央寄せのまま片側だけ空けると中央がずれ、両側空けるとラベル領域が
 *   190px → 130px まで落ちて長い訳（de / ru）が切れる。
 */
#bar .tb input {
    padding-left: var(--icon-gutter);
    padding-right: var(--space-1);
    text-align: left;
    /*
     * ★ 切れていることを見えるようにする。#bar input は white-space: nowrap ／
     *   overflow: hidden なので、**溢れると無言で切れる**（#170 の受け入れ基準が
     *   目視を求めていた点）。de / ru は溝を空ける前から 1 個ずつ切れており、
     *   溝で 3 個 / 5 個に増えた（2026-09-05 実測）。幅の見直しは #171。
     */
    text-overflow: ellipsis;
}

/*
 * 横並びを保つ。**.tb は既定で block** なので、包んだだけだと縦に割れる。
 * ★ input 側の 45%（base.css の #bar input.small）はラッパーへ移す ——
 *   ラッパー 45% × input 45% = 20% になってしまうため。
 */
#bar .tb.i-uprow,
#bar .tb.i-downrow {
    display: inline-block;
    width: 45%;
}

#bar .tb input.small {
    width: 100%;
}

/*
 * ダイアログ（Save / Load ／ Keys ／ Edit table）
 *
 * ★ 訂正（2026-09-16。#312）—— **`display: inline-block` は要らなくなった。**
 *   `.io-row` が grid になり（base.css）、**グリッドのアイテムはブロック化される**ので、
 *   `.tb` の既定（`display: block`）のままで横に並び、**端も揃う**。
 *   **元の規則は #220 が「アイコンの横並び」のために足したもの**で、
 *   そのとき `.io-row` を持たない server 列との非対称が見た目の差になった（#312 の発端）。
 */

#window .tb input {
    padding-left: var(--icon-gutter);
    text-align: left;
    /* float はラッパーへ移す（下）。input に残すとラッパーの高さが 0 になり
       ::before の縦位置が狂う */
    float: none;
}

/*
 * #windowok / #windowcancel は material-inspired.css が float: right を当てている。
 * ラッパーを挟んだので、float もラッパーへ移す。
 */
#window .tb.i-windowok,
#window .tb.i-windowcancel {
    display: inline-block;
    float: right;
}