/* S7 表・S8 行・列と見せ方・表の版の履歴（担当E）。値は tokens.css の変数だけを使う（直書きしない）。
   ・格子は角の丸い面（iOS の inset grouped と同じ面）の中で、縦にも横にも送れる。見出しの行は上に、行の番号の列は左に留まる。
   ・マスはどれも一つの的（高さ 44px 以上）。押した瞬間は --press（面に 1.23／1.26）。フォーカスは --focus の枠を内側に。
   ・色は使わない（並べ替え・絞り込み・選んだ行は、言葉と形で示す。ui-design 16-6.9）。 */

/* ---------- S7 の骨組み ---------- */
.screen-table .tbl-search { padding: 0 var(--gutter) var(--sp-2); }
.tbl-status { flex: none; padding: 0 var(--gutter); }
.tbl-status .statusline { padding-left: 0; }
.tbl-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tbl-host > .state { flex: 1; }
.tbl-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0 var(--gutter) var(--sp-2);
  border-radius: var(--r-m);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.tbl-scroll:focus { outline: none; }
/* 打ち込みで動いたとき、留まる見出しの行と番号の列の下に隠れないように送る */
.tbl-scroll { scroll-padding: var(--hit) 0 0 var(--hit-min); }
.tbl-seg-tight .seg-item { padding: 0 var(--sp-1); }

/* ---------- 格子 ---------- */
.tbl-grid {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-small);
}
.tbl-grid th, .tbl-grid td {
  padding: 0;
  vertical-align: top;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tbl-grid tr > :last-child { border-right: 0; }
.tbl-grid tbody tr:last-child > * { border-bottom: 0; }
.tbl-grid .tbl-head, .tbl-grid .tbl-cell { width: calc(var(--w, 12) * 1em); min-width: calc(var(--w, 12) * 1em); max-width: calc(var(--w, 12) * 1em); }

/* 見出しの行（上に留まる） */
.tbl-grid thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line-strong); }
.tbl-corner {
  position: sticky;
  left: 0;
  z-index: 3 !important;
  min-width: var(--hit-min);
  padding: 0 var(--sp-2) !important;
  color: var(--text-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  vertical-align: middle !important;
  text-align: center;
}
.tbl-head-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: var(--hit);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}
.tbl-head-btn:active:not(:disabled) { background: var(--press); }
.tbl-head-btn:disabled { cursor: default; }
.tbl-head-btn:focus-visible { outline-offset: -3px; }
.tbl-head-name { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.tbl-head-btn.is-placeholder .tbl-head-name { color: var(--text-3); font-weight: var(--fw-normal); }
.tbl-head-state { color: var(--text-2); font-size: var(--fs-small); }
.tbl-head[data-align="center"] .tbl-head-btn { align-items: center; text-align: center; }
.tbl-head[data-align="right"] .tbl-head-btn { align-items: flex-end; text-align: right; }
.tbl-head.is-clip .tbl-head-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tbl-head.is-active .tbl-head-name { text-decoration: underline; text-underline-offset: 0.2em; }

/* 行の番号の列（左に留まる。押すと行ごと開く） */
.tbl-num { position: sticky; left: 0; z-index: 1; min-width: var(--hit-min); }
.tbl-num-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--cell-h);
  min-width: var(--hit-min);
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
}
.tbl-num-btn:active:not(:disabled) { background: var(--press); }
.tbl-num-btn:focus-visible { outline-offset: -3px; }
.tbl-num-copy { color: var(--text-2); font-weight: var(--fw-bold); }

/* マス */
.tbl-cell-btn {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--cell-h);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tbl-cell-btn:active:not(:disabled) { background: var(--press); }
.tbl-cell-btn:disabled { cursor: default; opacity: 1; }
.tbl-cell-btn:focus-visible { outline-offset: -3px; }
.tbl-cell[data-align="center"] .tbl-cell-btn { text-align: center; }
.tbl-cell[data-align="right"] .tbl-cell-btn { text-align: right; }
.tbl-cell.is-clip .tbl-cell-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-cell.is-clip .tbl-tags { flex-wrap: nowrap; overflow: hidden; }
.tbl-text.is-url { text-decoration: underline; text-underline-offset: 0.2em; }
.tbl-grid tbody tr:has(.tbl-cell-btn:active) .tbl-num { background: var(--surface); }

/* チェックの箱（枠は 3:1 以上の --line-strong。済みは強調の色で塗り、印の形でも示す） */
.tbl-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  vertical-align: middle;
}
.tbl-box.is-on { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.type-check .tbl-cell-btn { display: flex; align-items: center; }
.tbl-cell.type-check[data-align="center"] .tbl-cell-btn { justify-content: center; }
.tbl-cell.type-check[data-align="right"] .tbl-cell-btn { justify-content: flex-end; }

/* 選択肢の札（押せない。淡い面に主の字） */
.tbl-tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.tbl-tag {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--press-bg);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}
.tbl-filenames { display: inline; }
.tbl-clip { display: inline-flex; vertical-align: -2px; margin-right: var(--sp-1); color: var(--text-3); }

/* 探した言葉に当たる所（色の役を増やさず、太字と下線で示す） */
.tbl-hit { background: transparent; color: inherit; font-weight: var(--fw-heavy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* 空のマス（まだ無い行） */
.tbl-grid tr.is-placeholder .tbl-num-btn { color: var(--text-3); }

/* 行を選んでいる間（選んだ行は押した面の色と、番号の列の ✓ の形で示す） */
.tbl-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.tbl-pick.is-on { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.tbl-grid tr.is-selected > * { background: var(--press); }
.tbl-grid.is-selecting .tbl-num-btn { color: var(--text-2); }

/* PC でマスに直接打ち込む（その場の欄） */
.tbl-cell.is-editing { position: relative; }
.tbl-cell.is-editing .tbl-cell-btn { visibility: hidden; }
.tbl-inline {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: var(--cell-h);
  margin: 0;
  padding: calc(var(--sp-2) - 2px) calc(var(--sp-3) - 2px);
  border: 2px solid var(--focus);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  resize: none;
  outline: none;
}

.tbl-sentinel td { height: 1px; padding: 0; border: 0; }

/* 選んでいる間の下の帯（印の下に言葉） */
.tbl-select-bar {
  flex: none;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--gutter) calc(var(--sp-1) + var(--safe-b));
  background: var(--bar);
  box-shadow: 0 -0.5px 0 var(--line);
}
.tbl-select-bar .tool-btn.is-danger { color: var(--danger); }

/* ---------- S8 行 ---------- */
.tbl-row-body { padding-top: var(--sp-3); padding-bottom: var(--sp-7); }
.tbl-form { display: flex; flex-direction: column; gap: var(--sp-5); max-width: var(--measure); margin: 0 auto; }
.tbl-form-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.tbl-form-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); padding: 0 var(--sp-1); font-size: var(--fs-small); line-height: var(--lh-ui); }
.tbl-form-name { color: var(--text); font-weight: var(--fw-bold); }
.tbl-form-type { color: var(--text-3); }
.tbl-form-dates { margin: 0; padding: 0 var(--sp-1); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.tbl-copy-note { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-group); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-small); line-height: var(--lh-small); }

/* 欄の部品（S8・欄だけの窓・まとめて書き換える窓で同じ） */
.tbl-field-text { resize: none; line-height: var(--lh-small); overflow-y: auto; }
.tbl-field-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tbl-date-input { flex: 1 1 180px; width: auto; }
.tbl-field-quick { display: flex; gap: var(--sp-1); }
.tbl-field-url { display: flex; align-items: center; gap: var(--sp-2); }
.tbl-field-url .field-input { flex: 1; min-width: 0; }
.tbl-field-check { background: var(--surface); }
.tbl-field-select { display: flex; flex-direction: column; gap: var(--sp-3); }
.tbl-field-add { display: flex; align-items: center; gap: var(--sp-2); }
.tbl-field-add .field-input { flex: 1; min-width: 0; }
.tbl-field-files { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.tbl-files { align-self: stretch; display: flex; flex-direction: column; border-radius: var(--r-group); background: var(--surface); overflow: hidden; }
.tbl-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--cell-h);
  padding: var(--sp-3) var(--cell-x);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}
.tbl-file + .tbl-file::before { content: ""; position: absolute; top: 0; left: calc(var(--cell-x) + 20px + var(--sp-3)); right: 0; height: 1px; transform: scaleY(0.5); background: var(--line); }
.tbl-file:active { background: var(--press); }
.tbl-file-icon { color: var(--accent); display: inline-flex; }
.tbl-file-name { overflow-wrap: anywhere; }
.tbl-files-empty { padding: var(--sp-3) var(--cell-x); }

/* ---------- 窓 ---------- */
.tbl-sheet-type { margin: 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-ui); }
.tbl-cell-sheet > .btn-normal { align-self: flex-start; }
.tbl-multi .tbl-multi-count { flex: none; color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.tbl-multi[aria-checked="true"] .choice-label { font-weight: var(--fw-bold); }
.tbl-move { display: flex; gap: var(--sp-2); }
.tbl-move .btn { flex: 1; }
.tbl-danger-zone { margin-top: var(--sp-5); }
.tbl-danger-zone .btn { width: 100%; background: var(--surface); justify-content: flex-start; }

/* ---------- 列と見せ方 ---------- */
.tbl-columns-of { margin: 0 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.tbl-pad { padding: 0 var(--cell-x); margin: 0 0 var(--sp-5); }
.tbl-view-group { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--cell-x); }
.tbl-view-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.tbl-view-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-2); line-height: var(--lh-ui); }

/* ---------- 版の履歴 ---------- */
.tbl-hist-status:empty { display: none; }
.tbl-hist-status { margin-bottom: var(--sp-3); }
.tbl-version-head { flex: none; padding: var(--sp-2) var(--gutter) var(--sp-3); }
.tbl-version-title { margin: 0 0 var(--sp-1); font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-ui); }
.screen-table-version > .state { flex: 1; }