/* timeline_render.css — 縦2カラム today timeline の共有スタイル。
   構造は共通、配色は .tl-dark（デスクトップウィジェット）/
   .tl-light（エディタ内）のテーマクラスで切替。
   ウィジェット側の位置決め（右上 absolute）は style_today.css が担当。 */

.tl-panel {
  border-radius: 15px;
  padding: 10px 10px 8px;
  font-weight: normal;
  font-family: "Hiragino kaku Gothic", "Arial", sans-serif;
}
.tl-head { font-size: 13px; font-weight: 800; padding: 0 4px 6px; }
.tl-colhead {
  display: grid; grid-template-columns: 26px 1fr 1fr;
  font-size: 9px; padding-bottom: 3px; text-align: center;
}
.tl-grid { position: relative; border-radius: 8px; overflow: hidden; }
.tl-hourline { position: absolute; left: 0; right: 0; border-top: 1px solid; }
.tl-hourlabel { position: absolute; left: 5px; font-size: 9px; }
.tl-cols { position: absolute; top: 0; bottom: 0; left: 26px; right: 4px; }
.tl-block { position: absolute; border-radius: 4px; padding: 2px 5px; overflow: hidden; box-sizing: border-box; }
.tl-label {
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-sub { font-size: 8.5px; white-space: nowrap; overflow: hidden; }
.tl-block.past { opacity: 0.4; }
.tl-nowline { position: absolute; left: 0; right: 0; border-top: 2px solid #3c71f6; z-index: 3; }
.tl-nowchip {
  position: absolute; left: 2px; top: -8px;
  background: #3c71f6; color: #fff;
  font-size: 8.5px; font-weight: 800; border-radius: 3px; padding: 0 3px;
}
.tl-later { font-size: 9.5px; padding: 5px 4px 0; }
.tl-link {
  display: inline-block; margin-left: 2px;
  background: #2f6fde; color: #fff;
  border-radius: 3px; padding: 0 4px;
  font-size: 8.5px; font-weight: 800;
}
.tl-link.clickable { cursor: pointer; }
.tl-link.clickable:hover { background: #3c71f6; }

/* ---- dark（デスクトップウィジェット） ---- */
.tl-dark { background: #000000a0; }
.tl-dark .tl-head { color: #e8ecf3cc; }
.tl-dark .tl-colhead { color: #aab3c2aa; }
.tl-dark .tl-grid { background: #ffffff10; }
.tl-dark .tl-hourline { border-top-color: #ffffff1c; }
.tl-dark .tl-hourlabel { color: #aab3c2aa; }
.tl-dark .tl-label { color: #f2f5fa; }
.tl-dark .tl-sub { color: #d7deeaa6; }
.tl-dark .tl-later { color: #aab3c2aa; }
.tl-dark .tl-ev.mtg  { background: #2f6fde55; border-left: 3px solid #2f6fde; }
.tl-dark .tl-ev.sem  { background: #21a79655; border-left: 3px solid #21a796; }
.tl-dark .tl-ev.lec  { background: #4aa8e855; border-left: 3px solid #4aa8e8; }
.tl-dark .tl-ev.conf { background: #1d3a8f66; border-left: 3px solid #5d7ad6; }
.tl-dark .tl-ev.priv { background: #2faf6b50; border-left: 3px solid #2faf6b; }
.tl-dark .tl-ev.hand { background: #8aa1bc40; border-left: 3px solid #8aa1bc; }
.tl-dark .tl-work.active { background: #2faf6b45; border: 1px solid #2faf6b; border-left-width: 3px; }
.tl-dark .tl-work.active.live { background: #2faf6b66; }
.tl-dark .tl-work.proposal { background: #2faf6b18; border: 1.5px dashed #2faf6baa; }
.tl-dark .tl-work.proposal .tl-label { color: #cfe9da; }

/* ---- light（エディタ内・リンククリック可） ---- */
.tl-light { background: #f7f8fa; border: 1px solid #d8dde6; }
.tl-light .tl-head { color: #2b3a55; }
.tl-light .tl-colhead { color: #8a93a3; }
.tl-light .tl-grid { background: #fff; border: 1px solid #e2e7ef; }
.tl-light .tl-hourline { border-top-color: #eef1f6; }
.tl-light .tl-hourlabel { color: #9aa3b2; }
.tl-light .tl-label { color: #1d2433; }
.tl-light .tl-sub { color: #7e8aa0; }
.tl-light .tl-later { color: #8a93a3; }
.tl-light .tl-ev.mtg  { background: #e9f1fe; border-left: 3px solid #2f6fde; }
.tl-light .tl-ev.mtg .tl-label { color: #1d4fb0; }
.tl-light .tl-ev.sem  { background: #e8f8f5; border-left: 3px solid #21a796; }
.tl-light .tl-ev.sem .tl-label { color: #157d70; }
.tl-light .tl-ev.lec  { background: #eef7fd; border-left: 3px solid #4aa8e8; }
.tl-light .tl-ev.lec .tl-label { color: #2280bd; }
.tl-light .tl-ev.conf { background: #e9eefb; border-left: 3px solid #1d3a8f; }
.tl-light .tl-ev.conf .tl-label { color: #1d3a8f; }
.tl-light .tl-ev.priv { background: #e9f8ef; border-left: 3px solid #2faf6b; }
.tl-light .tl-ev.priv .tl-label { color: #19733f; }
.tl-light .tl-ev.hand { background: #eef1f6; border-left: 3px solid #8aa1bc; }
.tl-light .tl-ev.hand .tl-label { color: #50617a; }
.tl-light .tl-work.active { background: #e3f3e9; border: 1px solid #2faf6b; border-left-width: 3px; }
.tl-light .tl-work.active .tl-label { color: #19733f; }
.tl-light .tl-work.active.live { background: #d4eede; }
.tl-light .tl-work.proposal { background: #f2f9f5; border: 1.5px dashed #7cc6a0; }
.tl-light .tl-work.proposal .tl-label { color: #2a8a55; }