/* プランナー（planner.teclab.co.jp）だけの見た目。共通は admin.css（teclab_weblib/assets の本体へのリンク。書き換えない） */

/* 数字の表（資産の推移・収支）は中身の幅にする（画面が広い時に列の間が空きすぎないように） */
table.tbl.fit { width: auto; }

/* その場で編集する表（WebItems）。行・入力欄・選択欄の高さは admin.css の teclab 共通の大きさ（行 約21px・入力欄 19px）のまま */
table.tbl.netedit td input[type="checkbox"] { margin: 0; vertical-align: middle; }
/* チェックの列は、見出しの文字（入力欄の中の文字の位置。admin.css の 15px）と左をそろえる */
table.tbl.netedit td.chk { padding-left: 15px; }
table.tbl.netedit td a .icon { width: 14px; height: 14px; vertical-align: middle; }

/* 月ごとの推移: 見込みの行は文字を薄く、1月の行の上に線（年の区切り） */
table.tbl tbody tr.forecast td { color: var(--fg-faint); }
/* 年月の欄は、見込みの行でも普通の字の色（見込みの年の「〇〇年の差額」は薄いまま） */
table.tbl.history tbody tr.forecast:not(.yeardiff) td.calc:first-child { color: var(--fg); }
table.tbl tbody tr.newyear td { border-top: 2px solid var(--line-strong); }
/* 折りたたんだ年の行の頭の ▸（押すとその年の月を開く。planner.js の setupYearFold()） */
.yeartoggle {
	display: inline-block; width: 16px; margin-right: 4px; padding: 0; border: 0; background: none;
	color: var(--accent); font-size: 11px; line-height: 1; cursor: pointer;
}
.yeartoggle:hover { color: var(--accent-hover, var(--accent)); }
table.tbl tbody tr.yearhead td.calc { font-weight: 600; }
/* 2段の見出しの1段目（人の名前）。その人の列の上に左寄せで、下に線 */
table.tbl thead th.group { text-align: left; border-bottom: 1px solid var(--line); }
/* 人の色（WebPeople::_tone()）。見出しの人の名前・その人の列の見出し・月の列の年齢の印に使い、人の列の範囲を分かりやすくする */
:root {
	--who1-bg:	#e3edff;	--who1:	#2556c4;
	--who2-bg:	#ffe6ec;	--who2:	#bf2f52;
	--who3-bg:	#e1f6ea;	--who3:	#16804f;
	--who4-bg:	#fff0d9;	--who4:	#a8610a;
}
table.tbl thead th.who1, .pill.who1 { background: var(--who1-bg); color: var(--who1); }
table.tbl thead th.who2, .pill.who2 { background: var(--who2-bg); color: var(--who2); }
table.tbl thead th.who3, .pill.who3 { background: var(--who3-bg); color: var(--who3); }
table.tbl thead th.who4, .pill.who4 { background: var(--who4-bg); color: var(--who4); }

/* 資産の推移のグラフ（planner.js が枠の幅いっぱいに SVG で描く） */
.assetchart { position: relative; height: 300px; margin: 8px 14px 0; }
.assetchart svg { display: block; width: 100%; height: 100%; }
.assetchart text { fill: var(--fg-mute); font-size: 11px; }
.assetchart .grid { stroke: var(--line); stroke-width: 1; }
.assetchart .actual { fill: none; stroke: var(--accent); stroke-width: 3.5; }
.assetchart .future { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.assetchart .goal { fill: none; stroke: var(--alloc-4); stroke-width: 2; stroke-dasharray: 5 4; }
.assetchart .trend { fill: none; stroke-width: 2; stroke-dasharray: 2 7; }
.assetchart .guide { stroke: var(--fg-faint); stroke-width: 1; }
.assetchart .dot { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 2; }
.assetchart .dot.goal { stroke: var(--alloc-4); stroke-dasharray: none; }
/* カーソルの位置の年月の額 */
.charttip {
	position: absolute; top: 4px; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--bg-elev); box-shadow: var(--shadow); color: var(--fg); font-size: 12px; line-height: 1.6;
	white-space: nowrap; pointer-events: none;
}
.charttip b { font-weight: 700; }
.charttip .k { color: var(--fg-mute); margin-right: 6px; }
.chartnote { margin: 2px 14px 10px; font-size: 11px; }

/* 並びの入れ替え（WebItems の sortable と planner.js の setupSortable()）。行の左のつまみを押したまま上下に動かす */
.draghandle {
	display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 19px; padding: 0;
	border: 0; background: none; color: var(--fg-faint); cursor: grab; touch-action: none;
}
.draghandle:hover { color: var(--accent); }
.draghandle svg { width: 14px; height: 14px; fill: currentColor; }
table.tbl tbody tr.is-dragging td { background: var(--accent-weak); }
table.tbl tbody tr.is-dragging .draghandle { cursor: grabbing; }
table.tbl tbody.is-saving { opacity: .6; }

/* 月ごとの推移をその場で直す時、金額の入力欄は右に寄せる（数字の列と同じ） */
table.tbl.netedit td.num input.ce { text-align: right; }
/* 入力欄は中の文字に合わせた幅にする（対応しているブラウザだけ。ほかは size の幅。メモなど幅いっぱいの欄は除く） */
table.tbl.netedit td:not(.grow) input.ce { field-sizing: content; min-width: 3ch; }

/* 月ごとの推移（WebAsset::_out_history()）
   - 入力欄の無いセルの数字を、入力欄の中の数字（枠 1px + 余白 6px）と同じ位置にそろえる
   - 月の列と、合計から右の自動で計算する列（calc）は薄い青の背景にする（見出しの行はほかの列と同じ） */
table.tbl.history td.num .cv { display: inline-block; padding: 0 7px 0 0; }
table.tbl.history tbody td.calc { background: var(--row-alt); }
table.tbl.history tbody tr:hover td.calc { background: var(--row-hover); }

/* 入力例（placeholder）は薄いグレー。その場で編集する表では、編集していない行には出さない */
input::placeholder { color: var(--fg-faint); opacity: 1; }
table.netedit tbody tr[data-edit]:not(.is-editing) input.ce::placeholder { color: transparent; }
/* 年月の欄（.ym）は、まだ入れていない時も入力例を薄く出しておく */
table.netedit tbody tr[data-edit]:not(.is-editing) input.ce.ym::placeholder { color: var(--fg-faint); }

/* 月ごとの推移: 今月の行は薄い黄色の背景にする（月の列・計算する列も） */
table.tbl.history tbody tr.thismonth td, table.tbl.history tbody tr.thismonth td.calc { background: var(--warn-bg); }

/* 今の資産: 表の右に配分のグラフ（WebAsset::_donut_html()）。狭い画面では表の下に回る */
.nowgrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 28px; }
.nowgrid > .tablewrap { flex: 0 1 auto; min-width: 0; }
.allocs { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 10px 14px; }
.donut { margin: 0; display: grid; grid-template-columns: 168px auto; grid-template-rows: auto 1fr; gap: 4px 12px; align-items: center; }
.donut figcaption { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--fg-mute); }
.donut svg { width: 168px; height: 168px; }
.donut circle { fill: none; stroke-width: 7; }
.donut circle.ring { stroke: var(--line); }
.donut ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; }
.donut li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.donut li span { margin-left: auto; padding-left: 10px; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.donut li i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
/* 配分の色（明るめ。planner だけのグラフの色） */
:root {
	--alloc-1:	#5b9cff;
	--alloc-2:	#3dd68c;
	--alloc-3:	#ffb547;
	--alloc-4:	#b57bff;
	--alloc-5:	#ff7a8a;
	--alloc-6:	#35c9e0;
	--alloc-7:	#ffd84d;
	--alloc-8:	#9aa8bf;
}
.donut .s1 { stroke: var(--alloc-1); } .donut li i.s1 { background: var(--alloc-1); }
.donut .s2 { stroke: var(--alloc-2); } .donut li i.s2 { background: var(--alloc-2); }
.donut .s3 { stroke: var(--alloc-3); } .donut li i.s3 { background: var(--alloc-3); }
.donut .s4 { stroke: var(--alloc-4); } .donut li i.s4 { background: var(--alloc-4); }
.donut .s5 { stroke: var(--alloc-5); } .donut li i.s5 { background: var(--alloc-5); }
.donut .s6 { stroke: var(--alloc-6); } .donut li i.s6 { background: var(--alloc-6); }
.donut .s7 { stroke: var(--alloc-7); } .donut li i.s7 { background: var(--alloc-7); }
.donut .s8 { stroke: var(--alloc-8); } .donut li i.s8 { background: var(--alloc-8); }

/* アカウントのページ: 使えるデータのチェック（人ごとのセルに、データの数だけ並べる） */
table.tbl.grants form.grant { display: inline-block; margin-right: 10px; }
table.tbl.grants form.grant label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
table.tbl.grants form.grant input { margin: 0; }

/* 資産のページの右上の、一緒に出す人のチェック（人の色の札の中にチェック） */
form.withpeople { display: inline-flex; }
form.withpeople label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; cursor: pointer; }
form.withpeople input { margin: 0; }

/* 見出しの右（ページの .pagetools・カードの .cardtools）に置いた選択欄のフォーム（.toolbar）は、下の余白を消してボタンと縦をそろえる */
.pagetools > form.toolbar, .cardtools > form.toolbar { margin-bottom: 0; }
/* 資産へ反映の年月とボタン（銀行・株式・投資信託のページのいちばん下。上の表との間を詰める） */
.toolbar.reflectbar { margin: 0; padding: 8px 14px 10px; }

/* 一覧の区切り（WebItems の divide。収入と支出の境目など）。太い線を引く */
table.tbl tbody tr.divide td { border-top: 2px solid var(--line-strong); }
/* 折りたたんだ年の行の年月のセルは、どこを押しても開け閉めする（planner.js）。押せることが分かるように背景を濃くし、乗せるとさらに濃くする */
table.tbl tbody tr.yearhead td.calc { cursor: pointer; }
table.tbl.history tbody tr.yearhead td.calc:first-child { background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev)); }
table.tbl.history tbody tr.yearhead:hover td.calc:first-child { background: color-mix(in srgb, var(--accent) 28%, var(--bg-elev)); }
/* 月ごとの推移の年の差額の行（WebAsset::_year_diff_html()）。薄い背景と下の太い線で、月の行と分ける。「〇〇年の差額」は右に寄せる */
table.tbl.history tbody tr.yeardiff td { background: var(--row-alt); border-bottom: 2px solid var(--line-strong); }
table.tbl.history tbody tr.yeardiff td.calc { background: var(--row-hover); }
table.tbl.history tbody tr.yeardiff td:first-child { text-align: right; }

/* カードの見出しの文字と右のボタンは縮めない（補足が長い時に見出しが1文字ずつ折り返して崩れないように） */
.cardhead h2, .cardhead .cardtools { flex-shrink: 0; white-space: nowrap; }
/* 一覧のカードの見出しの下の説明（WebItems の note） */
.cardsub { margin: 0; padding: 6px 14px; border-bottom: 1px solid var(--line); color: var(--fg-mute); font-size: 12px; }

/* 内訳のチップ（planner.js の setupTips()。収支の計画出費など）。数字に点線の下線を引いて、押せる・のせられると分かるようにする */
[data-tip] { border-bottom: 1px dotted var(--fg-mute); cursor: help; }
.tipbox {
	position: absolute; z-index: 60; max-width: 280px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--bg-elev); box-shadow: var(--shadow); color: var(--fg); font-size: 12px; line-height: 1.6; white-space: pre-line;
	pointer-events: none;
}

/* 収支の年ごとの表（WebRetire::_out_table()）。年・年齢と計算した列（.calc）は、月ごとの推移と同じ薄い青の背景にする */
table.tbl.calcs tbody td.calc { background: var(--row-alt); }
table.tbl.calcs tbody tr:hover td.calc { background: var(--row-hover); }

/* 折れ線のグラフ（planner.js の setupLineChart()。資産の種類ごとの推移・収支の残高）。線の色は --alloc-1〜8 */
.linechart { position: relative; height: 240px; margin: 8px 14px 0; }
.chartpane .linechart { height: 300px; }
.linechart svg { display: block; width: 100%; height: 100%; }
.linechart text { fill: var(--fg-mute); font-size: 11px; }
.linechart .grid { stroke: var(--line); stroke-width: 1; }
.linechart .zero { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 3 3; }
.linechart text.zerolabel { fill: var(--danger); }
.linechart .line { fill: none; stroke-width: 2; }
.linechart .area { fill: var(--fg-faint); fill-opacity: 0.25; stroke: none; }
.linechart .line.future { stroke-width: 1.5; stroke-dasharray: 2 3; }
.linechart .guide { stroke: var(--fg-faint); stroke-width: 1; }
.linechart .dot { fill: var(--bg-elev); stroke-width: 2; }
.charttip i, .chartlegend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.chartlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 14px 0; font-size: 11px; color: var(--fg-mute); }
/* 線の見本（資産の月ごとの推移のグラフの下とチップ。線と同じ太さ・形） */
.chartlegend i.ln, .charttip i.ln { width: 18px; height: 2px; border-radius: 0; background: var(--c, var(--accent)); vertical-align: 2px; }
.chartlegend i.ln.actual, .charttip i.ln.actual { height: 4px; }
/* 点線・破線の間隔はグラフの線（.assetchart の stroke-dasharray）と同じ。色は --c（予測の線は planner.js が付ける） */
.chartlegend i.ln.future, .charttip i.ln.future { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); }
.chartlegend i.ln.goal, .charttip i.ln.goal { background: repeating-linear-gradient(90deg, var(--alloc-4) 0 5px, transparent 5px 9px); }
.chartlegend i.ln.trend, .charttip i.ln.trend { background: repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 9px); }

/* ログイン画面の申し込み（root/index.php）。コメントの欄は、admin.css のログインの入力欄と同じ見た目 */
.loginfield textarea {
	padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); color: var(--fg);
	font: inherit; font-size: 14px; resize: vertical; transition: border-color .12s, box-shadow .12s;
}
.loginfield textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
form.loginfield { gap: 12px; }

/* 計算のページ（root/asset/calc/）。タブは見出しの下に並べ、選んでいるタブは btn-primary（planner.js の setupCalc()） */
.pagetabs.calctabs { margin: 8px 14px 0; }
.calcpanel .calcchart .linechart { margin: 4px 14px 0; }
.calcpanel .calcform { padding: 8px 14px 0; }
/* 計算の入力欄は数なので右にそろえる。年数・利回り・毎月の額は右に上下のボタン（planner.js の addStepper()。入力欄と同じ 29px） */
.calcform input[type="text"] { text-align: right; }
/* 入力欄にくっつける（.field の間 6px と枠 1px を重ねる）。入力欄の右の角は丸めない */
.calcform .stepper { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: -7px; }
.calcform input.has-stepper { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calcform .stepper button {
	width: 18px; height: 15px; padding: 0; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg-mute);
	font-size: 7px; line-height: 1; cursor: pointer;
}
.calcform .stepper button:first-child { border-radius: 0 var(--radius-sm) 0 0; border-bottom: 0; }
.calcform .stepper button:last-child { height: 14px; border-radius: 0 0 var(--radius-sm) 0; }
.calcform .stepper button:hover { color: var(--accent); background: var(--row-hover); }
.calcpanel .calcresult { padding: 4px 14px 8px; }
.calcpanel .calcresult b { font-size: 15px; }

/* 長い表（月ごとの推移・収支の収入と支出）は、表の中だけを縦に動かし、見出しの行は上に残す（.tablewrap.scrolly） */
.tablewrap.scrolly { max-height: calc(100vh - 140px); overflow: auto; }
/* 背景は見出しの行全体に付ける（人ごとの色の見出し th.who1〜 はその色のまま） */
.tablewrap.scrolly table.tbl thead { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); box-shadow: 0 1px 0 var(--line); }

/* 資産の内訳のページ（銀行・投資信託・株式・取引。lib/WebInvest）の上のタブ。選んでいるタブは下の線をつなげて前に出す。
   いつも1列。幅が足りない時は planner.js の setupTabFit() が字を小さくする（余白・印は字の大きさに合わせて縮む em）。
   いちばん小さくしても入らない時は横にずらして見る */
.pagetabs { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; overflow-y: hidden; }
.pagetabs a, .pagetabs button {
	display: inline-flex; flex: none; align-items: center; gap: .45em; margin-bottom: -1px; padding: .5em 1.15em; white-space: nowrap;
	border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	color: var(--fg-mute); font-weight: 600; text-decoration: none;
}
.pagetabs button { background: none; font: inherit; font-weight: 600; cursor: pointer; }
.pagetabs a:hover, .pagetabs button:hover { color: var(--fg); background: var(--row-hover); text-decoration: none; }
.pagetabs a.is-active, .pagetabs button.is-active { color: var(--accent); background: var(--bg-elev); border-color: var(--line-strong); box-shadow: 0 1px 0 var(--bg-elev); }
.pagetabs a .tabicon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 月ごとの推移で、記録が無く前の月から見込んだ額（WebAsset::_fill()）は薄い斜めの字 */
table.tbl.history td.est .cv, table.tbl.history td.est input.ce { color: var(--fg-faint); font-style: italic; }

/* 損益の色（投資信託・株式の評価損益と損益率。lib/WebInvest::_tone()）。プラスは青、マイナスは赤 */
table.tbl td.num.pos, table.tbl td.num.pos .cv { color: var(--accent); }
table.tbl td.num.neg, table.tbl td.num.neg .cv { color: var(--danger); }

/* 行きたいところの地図（lib/WebPlaces・planner.js の setupPlaceMap()） */
/* Leaflet は地図の中で z-index 400〜1000 を使うので、地図の枠で重なりを閉じて、左のメニューなどの下に出す */
.placemap { position: relative; z-index: 0; height: 380px; margin: 8px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* 地図は見出しの「地図」ボタンで開け閉めする（スマホは最初は閉じる。planner.js の setupPlaceMap()） */
.mapcard.is-closed .placemap { display: none; }
/* 地図の印の「一覧で見る」で移った行は、少しの間だけ色を付ける */
table.tbl tbody tr.is-flash td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { from { background: var(--accent-weak); } }

/* 折れ線のグラフのチップ（setupLineChart()）。名前と額を表にして、額は右にそろえる */
.charttip table.tiprows { border-collapse: collapse; }
.charttip table.tiprows th { text-align: left; font-weight: 700; padding: 0; }
.charttip table.tiprows td { padding: 0; }
.charttip table.tiprows td.v { text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; }

/* カードの見出し（名前）は狭い画面だけ。広い画面の表には出さない */
table.tbl.cards td.cardtitle { display: none; }
/* 狭い画面（スマホ）では、カードにする一覧（WebItems の cards。行きたいところ）を1行ずつのカードにする。
   1段目に head の項目（名前・行きたさ・URL）、2段目に小さくほかの項目。hide の項目と削除は、押して編集している間だけ見出しを付けて出す */
@media (max-width: 720px) {
	.placemap { height: 240px; margin: 6px 10px 10px; }
	table.tbl.cards, table.tbl.cards tbody { display: block; }
	table.tbl.cards thead { display: none; }
	table.tbl.cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
	table.tbl.cards tbody td { display: block; padding: 0; border: 0; height: auto; background: none; }
	table.tbl.cards tbody tr.is-editing { background: var(--accent-weak); }
	/* 1段目と2段目の間で折り返す（行の ::after を段の区切りにする） */
	table.tbl.cards tbody tr::after { content: ''; order: 3; flex-basis: 100%; }
	table.tbl.cards td[data-card='head'] { order: 1; }
	/* 見出し（名前）は残りの幅を取り、URL の印・行きたさを右端にそろえる（行きたさはいちばん右）。押すと開く・閉じる */
	table.tbl.cards td.cardtitle { display: block; order: 1; flex: 1 1 0; min-width: 0; padding: 2px 7px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
	table.tbl.cards td[data-k='priority'] { order: 2; }
	table.tbl.cards tr:not(.is-editing) td[data-k='url'] input.ce { display: none; }
	table.tbl.cards td[data-card='sub'], table.tbl.cards td[data-card='hide'] { order: 4; font-size: 12px; color: var(--fg-mute); }
	table.tbl.cards td.act { order: 5; margin-left: auto; }
	table.tbl.cards td.act:empty, table.tbl.cards td.spacer { display: none; }
	table.tbl.cards tr:not(.is-editing) td[data-card='hide'], table.tbl.cards tr:not(.is-editing) td.act:not(:first-child) { display: none; }
	/* 編集している間は、2段目からを見出し付きで1つずつ並べる */
	table.tbl.cards tr.is-editing td[data-card='sub'], table.tbl.cards tr.is-editing td[data-card='hide'] { flex-basis: 100%; display: flex; align-items: center; }
	table.tbl.cards tr.is-editing td[data-card='sub']::before, table.tbl.cards tr.is-editing td[data-card='hide']::before {
		content: attr(data-label); flex: 0 0 5em; color: var(--fg-faint);
	}
	table.tbl.cards tr.is-editing td.grow input.ce { flex: 1 1 auto; }
	/* 開いている間は、URL も1段目から下へ移して、見出し付きの1行にする（入力欄は残りの幅いっぱい） */
	table.tbl.cards tr.is-editing td[data-k='url'] { order: 4; flex-basis: 100%; display: flex; align-items: center; font-size: 12px; color: var(--fg-mute); }
	table.tbl.cards tr.is-editing td[data-k='url']::before { content: attr(data-label); flex: 0 0 5em; color: var(--fg-faint); }
	table.tbl.cards tr.is-editing td[data-k='url'] input.ce { flex: 1 1 auto; min-width: 0; }
	table.tbl.cards tr.total, table.tbl.cards td.empty { display: block; }
}

/* 試し（2026-11-05）: 表のセルの上下の余白を、データの行は 3px（1行 25px）、見出しの行は 4px にする（admin.css は 2px）。
   よければ admin.css に入れてもらい、ここは消す。入力欄・選ぶ欄・ボタンを行の真ん中にそろえるのは admin.css に入った。並びのつまみだけここで */
table.tbl th, table.tbl td,
table.tbl td.act,
.card.is-tight table.tbl th, .card.is-tight table.tbl td,
.accountlist table.tbl th, .accountlist table.tbl td { padding-top: 3px; padding-bottom: 3px; }
table.tbl thead th, .card.is-tight table.tbl thead th, .accountlist table.tbl thead th { padding-top: 4px; padding-bottom: 4px; }
table.tbl td .draghandle { vertical-align: middle; }

/* 登録情報（table.grants）の開けるページ・使えるデータのチェック（form.grant）と「本人」の札を、行の真ん中にそろえる
   （承認待ち・利用者の操作は admin.css） */
table.tbl.grants td .pill, table.tbl.grants form.grant { vertical-align: middle; }

/* その場で編集する表の数の列（銀行の普通・定期・合計など）。入力欄の中の数は枠と余白の 7px だけ内側に出るので、
   入力欄の無いセル（計算した合計・合計の行。.cv）と見出しの右端も 7px 内側にそろえ、.cv は入力欄と同じく行の真ん中に置く */
table.netedit td.num .cv { display: inline-block; padding: 0 7px 0 0; vertical-align: middle; }
/* 入力欄の無いセルの文字（.cv）と、日付の後ろの曜日（.mute）も、入力欄・選ぶ欄と同じく行の真ん中に置く（文字の下の線にそろうと上下がずれる） */
table.netedit td .cv, table.netedit td > .mute { display: inline-block; vertical-align: middle; }
table.netedit thead th.num { padding-right: 15px; }
table.netedit td.num input.ce { text-align: right; }

/* 満期を過ぎた定期預金（lib/WebBanks）: 行をオレンジ、銀行のページの上のお知らせ */
table.tbl tbody tr.is-due td, table.tbl tbody tr.is-due td .cv, table.tbl tbody tr.is-due input.ce { color: var(--warn); }
table.tbl tbody tr.is-due td { background: var(--warn-bg); }
.duenotice { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--warn);
	border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.duenotice .tabicon { width: 16px; height: 16px; flex: none; }
/* 数を入れる欄（銀行の詳細の普通預金の金額・金利） */
input.numin { text-align: right; }
/* 入力欄の前の値の一覧（下キーで出す。planner.js の setupHistory()）。変更した日時と値の2列（行をまたいで列の幅をそろえる）。
   値の位置は planner.js が入力欄の中の値にそろえる（右寄せの欄 is-right は値を右の端に）。選んでいる行は色を付ける */
.histlist { position: absolute; z-index: 50; display: grid; grid-template-columns: auto auto; column-gap: 14px; max-height: 240px; overflow-y: auto;
	padding: 2px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev); box-shadow: var(--shadow);
	color: var(--fg); font-size: 12px; line-height: 1.6; }
.histlist .item { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding: 1px 0; cursor: pointer; white-space: nowrap; }
.histlist .item .d { padding-left: 9px; color: var(--fg-mute); font-size: 11px; }
.histlist .item .v { padding-right: 9px; font-variant-numeric: tabular-nums; }
.histlist.is-right .item .v { text-align: right; }
.histlist .item:hover, .histlist .item.is-active { background: var(--accent); color: #fff; }
.histlist .item:hover .d, .histlist .item.is-active .d { color: inherit; }
.histlist .empty { grid-column: 1 / -1; padding: 1px 9px; color: var(--fg-mute); white-space: nowrap; }