/*
 * Chloe for Biz 管理画面。見た目は ToCoS EM デザインガイドラインに合わせる（docs/design/tocos-em/extract.md・判断ログ #22）。
 * トークンは EM の :root と同じ名前・値。EM はライトだけなので、ダークモードの定義は持たない。
 */
:root {
  --color-brand: #10a9ed; --color-brand-hover: #0296d3; --color-primary: #0073a4; --color-primary-hover: #005981; --color-brand-tint: #e5f2fe;
  --color-danger: #b42318; --color-danger-hover: #912018; --color-warning: #a87400;
  --color-text: #1f1f1f; --color-text-strong: #171d25; --color-muted: #636363; --color-text-disabled: #a2a2a2;
  --color-surface: #ffffff; --color-bg: #f0f2f6; --color-subtle: #f4f4f4; --color-bg-disabled: #f4f4f4; --color-tab-active: #ededed;
  --color-border: #dadde0; --color-border-control: #818181; --color-border-frame: #d7dce3;
  --color-nav: #3e4856; --color-nav-muted: #636b78; --color-nav-active: #dce2e9; --color-chrome-hover: #e6eaf0;
  --color-scrim: #1f1f1f66; --color-tooltip-bg: #1f1f1f;
  --color-theme-alert: #fe0011; --color-theme-request: #ff7001; --color-theme-manage: #10a9ed; --color-theme-input: #21c100;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-s: 4px; --radius-m: 8px; --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.16);
  --header-height: 40px; --sidebar-width: 212px; --content-padding-x: 32px;
  --control-height-m: 32px; --control-height-s: 28px; --button-min-width-m: 80px; --button-min-width-s: 64px;
  --button-padding-x-m: 16px; --button-padding-x-s: 12px; --input-padding-x: 12px; --select-padding-right: 36px;
  --tab-min-width: 160px; --step-dot-size: 28px; --tag-height: 20px; --dialog-width: 400px; --icon-size: 14px; --hit-area-min: 28px;
  --tooltip-max-width: 240px; --theme-band-height: 4px; --theme-underline-width: 4px; --tab-underline-width: 2px;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-data: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 状態のアイコン（StatusIndicator・Notice）: 警告＝赤い八角形に白の「!」／注意＝からし色の三角に白の「!」／確認＝グレーの丸枠に「i」 */
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23b42318' d='M4.1 0h5.8L14 4.1v5.8L9.9 14H4.1L0 9.9V4.1z'/%3E%3Cpath fill='%23fff' d='M6.1 2.8h1.8l-.3 5.4H6.4zM6.1 9.6h1.8v1.7H6.1z'/%3E%3C/svg%3E");
  --icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23a87400' d='M7 .6l6.9 12.6H.1z'/%3E%3Cpath fill='%23fff' d='M6.2 4.6h1.6l-.3 4.4h-1zM6.2 10h1.6v1.6H6.2z'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.4' fill='none' stroke='%23636363' stroke-width='1.2'/%3E%3Cpath fill='%23636363' d='M6.3 3h1.4v1.4H6.3zM6.3 5.6h1.4v5.4H6.3z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 13px/20px var(--font-sans); }
.boot { padding: var(--space-6); color: var(--color-muted); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-surface); }
b, strong { font-weight: 700; }

/* ---------- AppHeader（40px・地は color-bg・テーマ色は置かない） ---------- */
header.app-header { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); padding: 0 var(--space-4);
  background: var(--color-bg); border-bottom: 1px solid var(--color-border-frame); position: sticky; top: 0; z-index: 20; }
header.app-header .svc { font-size: 13px; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; }
header.app-header .sp { flex: 1; }
header.app-header .who { color: var(--color-nav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#latest-slot:empty { display: none; }
#latest-slot { margin-right: var(--space-2); }

/* ---------- SidebarNav（212px・会社名＋32px の等間隔の 1 列）とコンテンツ領域 ---------- */
.frame { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-height)); }
nav.sidenav { flex: none; width: var(--sidebar-width); background: var(--color-bg); padding: var(--space-2) 0 var(--space-8);
  position: sticky; top: var(--header-height); align-self: flex-start; max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
nav.sidenav .org { padding: 0 var(--space-4) var(--space-2); }
nav.sidenav .org select { width: 100%; padding-left: var(--space-2); padding-right: 28px; background-position: right 8px center; border-color: var(--color-border-control); color: var(--color-text-strong); }
nav.sidenav #tabs-items { display: flex; flex-direction: column; }
nav.sidenav button[data-tab] { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4); border: 0; border-radius: 0;
  background: transparent; color: var(--color-nav); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
nav.sidenav button[data-tab]:hover { background: var(--color-chrome-hover); }
nav.sidenav button[data-tab]:active { background: var(--color-nav-active); }
/* 選択中: 白地・濃い太字・テーマ色 4px の下線を項目の幅いっぱい（角丸なし）。テーマの無い項目は下線なし */
nav.sidenav button[data-tab].on { background: var(--color-surface); color: var(--color-text-strong); font-weight: 700;
  box-shadow: inset 0 calc(-1 * var(--theme-underline-width)) 0 var(--theme, transparent); }
/* 未決の申請の件数（ベルの件数と同じ: 濃い丸に白の数字・赤やテーマ色は使わない） */
nav.sidenav .badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-text-strong);
  color: var(--color-surface); font: 11px/18px var(--font-data); font-variant-numeric: tabular-nums; text-align: center; font-weight: 400; }
[data-theme="alert"] { --theme: var(--color-theme-alert); }
[data-theme="request"] { --theme: var(--color-theme-request); }
[data-theme="manage"] { --theme: var(--color-theme-manage); }
[data-theme="input"] { --theme: var(--color-theme-input); }

/* コンテンツ領域: 白・左上 8px の角丸・左辺 1px・上辺はテーマ色 4px の帯（テーマなしは 1px） */
main { flex: 1; min-width: 0; background: var(--color-surface); border-left: 1px solid var(--color-border-frame); border-top-left-radius: var(--radius-m);
  border-top: 1px solid var(--color-border-frame); padding: var(--space-6) var(--content-padding-x) var(--space-12); }
main[data-theme] { border-top: var(--theme-band-height) solid var(--theme); padding-top: calc(var(--space-6) - 3px); }
main > * { max-width: 1004px; }

/*
 * 狭い幅（1200px 未満）: サイドバーを置くと表が収まらないので、ヘッダーの下の 1 列に畳む（判断ログ #22）。選択中の見え方は同じ。
 * 画面の幅ではなく #root の幅で決める（コンテナクエリ）。
 */
#root { container: app / inline-size; }
@container app (max-width: 1199px) {
  .frame { flex-direction: column; }
  nav.sidenav { width: auto; position: static; max-height: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border-frame); overflow-x: auto; }
  nav.sidenav .org { padding: 0; flex: none; }
  nav.sidenav .org select { width: auto; }
  nav.sidenav #tabs-items { flex-direction: row; }
  nav.sidenav button[data-tab] { height: 40px; }
  main { border-left: 0; border-top-left-radius: 0; padding-left: var(--space-4); padding-right: var(--space-4); }
  /* 900px で表を収める（EM の本文 13px では記録の表が 45px ほどはみ出す）。表の中だけ前の 12px に戻し、右の余白を詰める */
  table.fit th, table.fit td { font-size: 12px; padding-right: 10px; }
  table.fit .small, table.fit .mono { font-size: 12px; }
  /* 集計の表（認証用の画面・信頼するアプリ）は見出しが長いので、狭い幅では見出しを折り返す */
  .tbl > table:not(.fit):not(.devices) th { white-space: normal; }
}
@container app (max-width: 640px) { header.app-header .who { display: none; } }

/* ---------- まとまり（箱を使わず余白で区切る・原則 B） ---------- */
.card { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-8); }
.card > .row:first-child { margin-bottom: var(--space-4); }
.card > .row:first-child > b:first-child { font-size: 16px; line-height: 24px; color: var(--color-text); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-bottom: var(--space-3); }
.row .sp { flex: 1; }
.muted { color: var(--color-muted); }
.small { font-size: 13px; }
.pager { justify-content: center; margin: var(--space-3) 0 0; gap: var(--space-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
details summary { cursor: pointer; color: var(--color-muted); }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }
a.dev-link { color: var(--color-primary); text-decoration: underline; }

/* ---------- ページタイトル → タブ（EM の一覧の並び: タイトルと次の行 16px・タブの下 24px） ---------- */
.page-head { margin-bottom: var(--space-6); }
.page-head > .row { margin-bottom: var(--space-4); }
.page-title { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-text); }
/* Tabs: 高さ 28px・最小幅 160px・同じ幅。選択中は下地 color-tab-active＋太字＋テーマ色 2px（地の内側）。下に 1px color-muted のレールを幅いっぱい */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--tab-min-width), max-content); justify-content: start;
  border-bottom: 1px solid var(--color-muted); }
.tabs .tab { height: var(--control-height-s); padding: 0 var(--space-4); border: 0; border-radius: 0; background: transparent; color: var(--color-muted);
  font: inherit; white-space: nowrap; cursor: pointer; }
.tabs .tab:hover { background: var(--color-subtle); color: var(--color-text); }
.tabs .tab.on { background: var(--color-tab-active); color: var(--color-text); font-weight: 700;
  box-shadow: inset 0 calc(-1 * var(--tab-underline-width)) 0 var(--theme, transparent); }
/* FilterRow: 表の上の絞り込みの行。部品は小（28px）・1 行 */
.filter-row select, .filter-row input[type=text] { height: var(--control-height-s); }
.filter-row { margin-bottom: var(--space-3); }

/* 偽ドメインのホストの要約（表の上の 1 行・本文の大きさ・枠や色の面なし・判断ログ #25） */
.lk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.lk-summary .lk-item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.lk-summary .mono { font-size: 12.5px; word-break: normal; }
.lk-summary .btn { min-width: 0; height: var(--control-height-s); padding: 0 var(--space-2); }   /* 幅だけ詰める（押せる範囲は 28px のまま） */

/* ---------- Table（外枠・見出しの地なし・線は行の区切りだけ・上下 9px 右 16px） ---------- */
.tbl { width: 100%; overflow-x: auto; container-type: inline-size; }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { text-align: left; padding: 9px 16px 9px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { font-weight: 400; color: var(--color-muted); white-space: nowrap; }
tbody tr:hover > td { background: var(--color-subtle); }
td.mono, .mono { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
td.nw, .nw { font-variant-numeric: tabular-nums; }

/* ---------- StatusIndicator（色の付いた背景は使わない・形と文字） ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; background: none; border-radius: 0; font-weight: 400; white-space: nowrap; vertical-align: baseline; }
.pill::before { content: none; flex: none; width: var(--icon-size); height: var(--icon-size); background: center / contain no-repeat; }
.pill.bad { color: var(--color-danger); }
.pill.bad::before { content: ""; background-image: var(--icon-alert); }
.pill.warn { color: var(--color-text); }
.pill.warn::before { content: ""; background-image: var(--icon-caution); }
.pill.info { color: var(--color-muted); }
.pill.info::before { content: ""; background-image: var(--icon-info); }
.pill.ok, .pill.idle { color: var(--color-muted); }   /* 正常・その他: アイコンなし・グレーの文字 */
/* 偽ドメイン・止める行: 行の地は塗らず、警告のアイコン（八角形）で示す */
tr.lk td { background: none; }
.lk-icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); margin-right: 6px; vertical-align: -2px; font-size: 0; color: transparent;
  background: var(--icon-alert) center / contain no-repeat; }
/* Notice: 箱に入れず 1 行の文（エラー＝警告の八角形＋赤の文字・操作の結果＝本文の色） */
.err { color: var(--color-danger); }
.err::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); margin-right: var(--space-1); vertical-align: -2px;
  background: var(--icon-alert) center / contain no-repeat; }
.err:empty::before { content: none; }
.okmsg { color: var(--color-text); }

/* ---------- Button（塗り・枠・危険／標準 32px・小 28px） ---------- */
button.btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: var(--control-height-m);
  min-width: var(--button-min-width-m); padding: 0 var(--button-padding-x-m); border: 1px solid var(--color-primary); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-primary); font: inherit; white-space: nowrap; cursor: pointer; }
button.btn:hover { border-color: var(--color-primary-hover); color: var(--color-primary-hover); background: var(--color-subtle); }
button.btn.primary { background: var(--color-brand); border-color: var(--color-primary); color: #fff; }
button.btn.primary:hover { background: var(--color-brand-hover); color: #fff; }
/* 危険: 確認（行の中の確認・Dialog）の中の取り消せない操作だけ塗る。確認の前の入口は枠のボタン（確認で止める） */
button.btn.danger { color: var(--color-primary); }
.confirm button.btn.danger, dialog button.btn.danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.confirm button.btn.danger:hover, dialog button.btn.danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
button.btn:disabled, button.btn:disabled:hover { border-color: var(--color-border); background: var(--color-bg-disabled); color: var(--color-text-disabled); cursor: default; }
.btn-s, header.app-header .btn, .pager .btn, .confirm .btn, dialog .btn, td .btn { height: var(--control-height-s); min-width: var(--button-min-width-s); padding: 0 var(--button-padding-x-s); }

/* ---------- Input / Select / Choice ---------- */
input[type=text], input[type=datetime-local], select { height: var(--control-height-m); border: 1px solid var(--color-border-control); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text); padding: 0 var(--input-padding-x); font: inherit; min-width: 0; }
select { appearance: none; padding-right: var(--select-padding-right);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%231f1f1f' stroke-width='1.4' d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; }
input[type=checkbox], input[type=radio] { width: var(--icon-size); height: var(--icon-size); accent-color: var(--color-primary); margin: 0; }
label.chk { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--hit-area-min); cursor: pointer; }

/* ---------- 行の中の確認（Dialog の影響の箱と同じ見た目・右下にキャンセル → 確定） ---------- */
.confirm { border: 0; background: var(--color-subtle); border-radius: var(--radius-s); padding: var(--space-4); margin: var(--space-2) 0; }
.confirm > .row:last-child { flex-direction: row-reverse; justify-content: flex-start; margin: var(--space-3) 0 0 !important; }
tr.row-confirm:hover > td { background: none; }
.confirm-diff > .row { flex-direction: row-reverse; justify-content: flex-start; }

/* ---------- Dialog（取り消せない 1 件の操作の確認） ---------- */
dialog.dialog { width: var(--dialog-width); max-width: calc(100vw - 32px); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); }
dialog.dialog::backdrop { background: var(--color-scrim); }
dialog.dialog h2 { font-size: 16px; line-height: 24px; margin: 0 0 var(--space-3); }
dialog.dialog p { margin: 0 0 var(--space-3); }
dialog.dialog .acts { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

/* ---------- Tooltip（ⓘ: 地 #1f1f1f・白文字・最大 240px・矢印と影なし・対象の上） ---------- */
.tip { position: relative; display: inline-block; cursor: help; color: var(--color-muted); font-size: var(--icon-size); line-height: 1; outline: none; }
/* 説明の文は .tipbox に持ち、表示は body の直下の .tip-pop（画面の座標）で出す（app.js。表の枠で切れないように） */
.tip .tipbox { display: none; }
.tip-pop { display: none; position: fixed; z-index: 50; width: max-content; max-width: var(--tooltip-max-width); white-space: normal; text-align: left;
  background: var(--color-tooltip-bg); color: #fff; border: 0; border-radius: var(--radius-s); padding: var(--space-1) var(--space-2);
  font: 13px/20px var(--font-sans); box-shadow: none; pointer-events: none; }

/* ---------- Menu（行の右端の「…」） ---------- */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-area-min); height: var(--hit-area-min); border-radius: var(--radius-s); color: var(--color-text); font-weight: 700; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { background: var(--color-subtle); }
/* 開いている間は body の直下へ移して画面の座標で出す（.pop・位置は app.js。下に入り切らなければ上向き・右に入り切らなければ左へ） */
details.menu .menu-box { display: none; }
.menu-box.pop { display: block; position: fixed; z-index: 40; min-width: 160px; padding: var(--space-1);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-s); box-shadow: var(--shadow-overlay); white-space: nowrap; }
.menu-box .btn, .menu-box button { display: flex; width: 100%; justify-content: flex-start; height: 28px; min-width: 0; padding: 0 var(--space-3);
  border: 0; border-radius: 0; background: none; color: var(--color-text); }
.menu-box .btn:hover { background: var(--color-subtle); color: var(--color-text); }
.menu-box .btn.danger { color: var(--color-danger); }
.menu-box > * + * { margin-top: 0; }
.menu-box .btn.danger:not(:first-child) { border-top: 1px solid var(--color-border); }

/* ---------- 導入の段階（Stepper: 丸 28px・番号 Inter・丸を 1px の線でつなぐ） ---------- */
.stepper { display: flex; list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); counter-reset: st; }
.stepper li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-muted); text-align: center; }
.stepper li::before { counter-increment: st; content: counter(st); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: var(--step-dot-size); height: var(--step-dot-size); border-radius: 50%; border: 1px solid var(--color-border-control); background: var(--color-surface);
  color: var(--color-muted); font: 13px/1 var(--font-data); }
.stepper li + li::after { content: ""; position: absolute; top: calc(var(--step-dot-size) / 2); right: 50%; width: 100%; border-top: 1px solid var(--color-border-control); }
.stepper li.done, .stepper li.on { color: var(--color-text); }
.stepper li.done::before { content: "✓"; border-color: var(--color-text); color: var(--color-text); }
.stepper li.on::before { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.stepper li.on { font-weight: 700; }

/* ---------- ログイン ---------- */
.login { max-width: 420px; margin: 12vh auto; text-align: center; }
.login h1 { font-size: 16px; line-height: 24px; color: var(--color-text-strong); }
body > #root > .login { background: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-m); }

/* ---------- 端末タブ: 列は中身の幅・折り返さない。余った幅は VPN の列へ ---------- */
table.devices td.nw { white-space: nowrap; width: 1%; }
table.devices td.grow { width: auto; }
/* 折り返さない列の中の補足（gaps など）は折り返し、列を広げすぎない。長い説明は ⓘ に入れる */
table.devices td.nw .note { white-space: normal; width: max-content; max-width: 14em; }
/* 機種（判断ログ #36）: 「メーカー 型番」を語の切れ目で折り返し 2 行まで（あふれは省略・ホバーで全体）。列は 6em まで */
table.devices td.nw .model { display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  white-space: normal; width: max-content; max-width: 6em; vertical-align: top; }
/* 見出しの長い列（配信リストの版）は「配信リスト／の版」の 2 行に折り返す */
table.devices th.wrap { white-space: normal; min-width: 5em; max-width: 5em; }
/* 列が 10 になったので、この表だけ列の間を 12px に（1004px の枠で横に送らずに並べる・#36） */
table.devices th, table.devices td { padding-right: 12px; }

/* ---------- 表の共通: 折り返さない列（.nw）・余りの幅を取る列（.grow）・ホスト名は途中で割らず省略（ホバーで全体） ---------- */
.nw { white-space: nowrap; }
table.fit td.nw { width: 1%; }
table.fit td.grow { width: auto; }
.mono.host { display: inline-block; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; vertical-align: bottom; }
.ellip { max-width: 20em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.fit th, table.fit td { padding: 9px 14px 9px 0; }
/* 表の枠が広いときだけホスト名を長めに（画面の幅ではなく表の枠の幅で決める。EM の 1280px の枠 1004px は中くらいの段＝960px 以上） */
@container (min-width: 1100px) { .mono.host { max-width: 30em; } .ellip { max-width: 32em; } }
.app-name { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.nw .wrap { white-space: normal; max-width: 6em; }
table.fit .ellip { max-width: 14em; } table.fit .mono.host { max-width: 16em; }
@container (min-width: 1100px) { table.fit .ellip { max-width: 32em; } table.fit .mono.host { max-width: 30em; } .app-name { max-width: 16em; } }
@container (min-width: 1100px) { .nw .wrap { white-space: nowrap; max-width: none; } }
@container (min-width: 960px) and (max-width: 1099px) {
  .mono.host, table.fit .mono.host { max-width: 24em; } .ellip, table.fit .ellip { max-width: 24em; } .nw .wrap { white-space: nowrap; max-width: none; }
  /* 記録の表は列が多いので短め（1280px で収める） */
  table.events .mono.host { max-width: 18em; } table.events .ellip { max-width: 18em; }
}