/* 外枠の見た目。上に全幅のヘッダー（社名と操作）、その下に左のサイドバーと成果物の面。
   色は無彩色だけ（成果物の色と競わせない）。サイドバーは文字だけ（印やアイコンは置かない）。
   動きは 1 つの曲線（--ease）にそろえ、prefers-reduced-motion では止める */
:root{
  --bar-h:28px; --side-w:256px;
  --side:#1B1B1D; --bg:#1F1F21; --stage:#151517; --line:#2E2E31; --hover:#2A2A2D; --on:#36363A; --chip:#2C2C2F; --va:#242426;
  --tx:#F5F5F7; --tx-2:#A1A1A6; --tx-3:#6E6E73;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
:focus{outline:none}
:focus-visible{outline:1px solid rgba(245,245,247,.5);outline-offset:1px}
[hidden]{display:none!important}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ヘッダー（全幅）。左に社名とサイドバーの開閉、右に操作 */
.bar{height:var(--bar-h);flex:none;display:flex;align-items:center;gap:6px;padding:0 8px 0 22px;background:var(--side);border-bottom:1px solid var(--line);position:relative;z-index:8;transition:margin-top .45s var(--ease),opacity .3s}
.focus .bar{margin-top:calc(-1 * var(--bar-h));opacity:0;pointer-events:none}
.brand{margin-right:6px;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap;transition:opacity .2s}
.brand:hover{opacity:.7}
.ic{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--tx-3);flex:none;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.ic svg{width:14px;height:14px;stroke-width:1.6}
.ic:hover{background:var(--hover);color:var(--tx)}
.ic:active{transform:scale(.9)}
.grow{flex:1}
.seg{position:relative;display:flex;padding:2px;margin:0 6px;border-radius:999px;flex:none}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:0;border-radius:999px;background:var(--on);transition:transform .4s var(--ease),width .4s var(--ease)}
.seg button{position:relative;height:16px;min-width:42px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--tx-2);transition:color .25s}
.seg button:hover,.seg button.on{color:var(--tx)}

/* ヘッダーの下 */
.wrap{flex:1;min-height:0;display:flex;position:relative}

/* サイドバー */
.side{position:relative;width:var(--side-w);flex:none;display:flex;flex-direction:column;background:var(--side);transition:margin-left .45s var(--ease)}
.side.off,.focus .side{margin-left:calc(-1 * var(--side-w))}
/* 幅の変更（Slack と同じ）。右の境に乗ると少しして細い線が出て、左右に引くと幅が変わる */
.grip{position:absolute;top:0;bottom:0;right:-4px;width:8px;z-index:3;cursor:col-resize;touch-action:none}
.grip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:rgba(245,245,247,.4);opacity:0;transition:opacity .25s var(--ease)}
.grip:hover::after,.grip:focus-visible::after{opacity:1;transition-delay:.15s}
.grip:focus-visible{outline:none}
.resizing .grip::after{opacity:1;transition-delay:0s}
.side.off .grip,.focus .grip{display:none}
.resizing,.resizing *{cursor:col-resize!important;-webkit-user-select:none;user-select:none}
.resizing iframe{pointer-events:none}
/* 社名の下は広くあけ、項目のまとまりと分ける。左端は社名・項目・Library で 22px にそろえる */
.list{flex:1;overflow-y:auto;padding:36px 10px 20px}

/* 項目（アコーディオン）。開くと履歴が高さごと滑らかに出る */
.acc{border-radius:8px;transition:background-color .2s,box-shadow .25s}
.acc+.acc{margin-top:4px}
/* 押したときは縮めず、地の色と文字だけがゆっくり移る */
.hd,.hv{display:flex;align-items:center;gap:8px;width:100%;border-radius:7px;text-align:left;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease)}
.hr{position:relative}
.hd{height:36px;padding:0 36px 0 12px;font-size:13px;font-weight:500;color:var(--tx-2);-webkit-user-select:none;user-select:none;transition:background-color .35s var(--ease),color .35s var(--ease),font-weight .35s var(--ease)}
/* 見出しは乗っても地を付けず、文字だけ灰から白へ。履歴の行は地も付ける */
.hr:hover .hd{color:var(--tx)}
.hv:hover{background:var(--hover);color:var(--tx)}
/* 並べ替えのつまみ（見出しの右端）。Notion と同じく、見出しに乗ると出て、外れると消える（押したあとも残さない）。
   キーボードで見出しかつまみに来たときも出す。指の端末では選んでいる項目に出す */
.grab{position:absolute;top:6px;right:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--tx-3);cursor:grab;touch-action:none;opacity:0;pointer-events:none;transition:opacity .2s,background-color .2s,color .2s}
.grab svg{width:14px;height:14px}
.hr:hover .grab,.hd:focus-visible+.grab,.grab:focus-visible,.acc.dragging .grab{opacity:1;pointer-events:auto}
.grab:hover,.acc.dragging .grab{background:var(--on);color:var(--tx)}
@media (hover:none){.acc.cur .grab{opacity:1;pointer-events:auto}}
/* 並べ替え中。引いている項目は浮いて指についてきて、ほかの項目はよける */
.sorting,.sorting *{cursor:grabbing!important}
.sorting .acc:not(.dragging){transition:transform .32s var(--ease)}
.sorting .acc:not(.dragging) .hr:hover .hd:not(.on){color:var(--tx-2)}
.sorting .acc:not(.dragging) .grab{opacity:0}
.acc.dragging{position:relative;z-index:2;background:var(--hover);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.5)}
.acc.dragging .hd{color:var(--tx);transform:none}
.hd.on{color:var(--tx);font-weight:600}
.hd .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.acc.open .body{grid-template-rows:1fr}
.in{overflow:hidden;min-height:0}
.hv{gap:12px;height:30px;padding:0 12px 0 22px;margin-top:1px;font-size:12px;color:var(--tx-2);opacity:0;transform:translateY(-4px);transition:background-color .35s var(--ease),color .35s var(--ease),opacity .3s,transform .4s var(--ease)}
.acc.open .hv{opacity:1;transform:none;transition-delay:0s,0s,calc(.06s + var(--i,0) * .04s),calc(.06s + var(--i,0) * .04s)}
.acc .in>.hv:last-child{margin-bottom:10px}
.hv .d{flex:none;font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums;transition:color .35s var(--ease)}
.hv .t{overflow:hidden;text-overflow:ellipsis}
.hv.on{background:var(--on);color:var(--tx)}
.hv.on .d{color:var(--tx-2)}

/* Library（左下の保管庫）。押すと上に資料の題が並ぶ */
.foot{flex:none;display:block;margin:0 10px 12px;padding:12px 12px 2px;font-size:12px;font-weight:500;color:var(--tx-2);text-align:left;transition:color .2s}
.foot:hover,.foot[aria-expanded="true"]{color:var(--tx)}
.lib-scrim{display:none;position:fixed;inset:0;z-index:9}
.lib-scrim.open{display:block}
.lib{position:fixed;left:10px;bottom:46px;z-index:10;width:236px;padding:6px;border-radius:10px;background:#252528;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(6px) scale(.98);transform-origin:0 100%;pointer-events:none;transition:opacity .2s,transform .32s var(--ease)}
.lib.open{opacity:1;transform:none;pointer-events:auto}
.lib .li{display:flex;align-items:center;min-height:36px;padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--tx);line-height:1.35;transition:background-color .2s}
.lib .li+.li{box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.lib a.li:hover{background:var(--hover);box-shadow:none}
.lib a.li:hover+.li{box-shadow:none}
.lib .li.off{color:var(--tx-2);cursor:default}

/* VISUAL ASSETS（中身がまだ無い成果物の面）。炭の面にごく薄い粒、ラベルは小さく広い字送りで中央に */
.va{position:absolute;inset:0;display:grid;place-items:center;background-color:var(--va);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.va span{font-family:"Inter",var(--font);font-size:11px;font-weight:400;line-height:1;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:rgba(245,245,247,.38);white-space:nowrap;user-select:none;transition:opacity .3s}

/* 成果物を出す面 */
.stage{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--stage)}
.frame{position:absolute;overflow:hidden;background:#fff;transition:background-color .45s var(--ease)}
.frame.morph{transition:width .55s var(--ease),height .55s var(--ease),left .55s var(--ease),top .55s var(--ease),background-color .45s var(--ease)}
.frame iframe{position:absolute;left:0;top:0;border:0;background:#fff;transform-origin:0 0;transition:opacity .45s var(--ease)}
.frame.loading iframe,.frame.hush iframe,.frame.hush .va span{opacity:0}
.frame>.va,.frame.blank iframe{display:none}
.frame.blank>.va{display:grid}
.frame.blank{background:var(--va)}

/* 表示だけにする */
.unfocus{position:fixed;top:12px;right:12px;z-index:8;width:34px;height:34px;display:none;place-items:center;border-radius:8px;background:var(--chip);color:var(--tx-2);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.4);opacity:0;transition:opacity .35s,color .2s}
.unfocus:hover{color:var(--tx)}
.focus .unfocus{display:grid}
.focus.awake .unfocus,.unfocus:hover,.unfocus:focus-visible{opacity:1}

.tip{position:fixed;z-index:20;padding:5px 8px;border-radius:6px;background:#F5F5F7;color:#111;font-size:11px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s var(--ease)}
.tip.show{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:9;padding:8px 14px;border-radius:999px;background:#F5F5F7;color:#111;font-size:12px;font-weight:600;opacity:0;transform:translate(-50%,10px) scale(.96);pointer-events:none;transition:opacity .25s,transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.scrim{display:none}

@media (max-width:719px){
  .bar{padding-left:18px}
  .side{position:absolute;left:0;top:0;bottom:0;z-index:7;max-width:86vw}
  .grip{display:none}
  .side:not(.off){box-shadow:12px 0 32px rgba(0,0,0,.4)}
  .side:not(.off)~.scrim{display:block;position:absolute;inset:0;z-index:6;background:rgba(0,0,0,.4);animation:fade .3s}
  #copyBtn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}