/* ============================================================
   トークン。peacock（研究管理）と同じ設計にそろえる。
   配色は「意味」で名前を付け、面は白、地はごくわずかに灰。
   面は影で浮かせず、地との明度差と細い線で区切る（影は浮いているものだけ）。
   アクセントは argus の青（孔雀の目の青）。peacock のティールとは色で見分ける。
   ============================================================ */
:root {
  color-scheme: light dark;

  --bg:        #f5f5f7;   /* 地 */
  --surface:   #ffffff;   /* 面（カード・シート） */
  --surface-2: #f5f5f7;   /* 面の中の沈んだ面（設定の行など） */
  --fill:      #eeeef2;   /* 控えめな塗り（チップ・切り替え） */
  --fill-2:    #e2e2e8;
  --hairline:  #e8e8ed;   /* 面の輪郭（peacock の line-soft） */
  --line:      #d8d8dd;   /* 入力欄・ボタンの輪郭（peacock の line） */

  --label:   #1c1c1e;     /* 本文（ink） */
  --label-2: #48484a;     /* 補足（ink-soft） */
  --label-3: #6e6e73;     /* 付記（muted）。小さな文字でも読める濃さ */

  --argus:     #2a5bb8;   /* ワードマーク・塗り（孔雀の目の青） */
  --tint:      #2a5bb8;
  --tint-ink:  #234c9a;   /* 小さな文字に使う、少し沈めた青 */
  --tint-soft: #e8eefa;
  --mark:      #a35f00;   /* 保存（peacock の warn と同じ琥珀） */
  --ok:        #2e7d32;   /* 既読（peacock の success） */

  --chrome:      rgba(245,245,247,.78);
  --chrome-line: rgba(0,0,0,.06);
  --side:        color-mix(in srgb, var(--bg) 70%, var(--hairline));

  --sh-1: none;
  --sh-2: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --sh-3: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);

  --r-tile: 16px;
  --r-ctl: 12px;
  --gut: clamp(16px, 3.2vw, 32px);
  --ease-settle: cubic-bezier(.32,.72,0,1);
  --ease-press: cubic-bezier(.2,0,0,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f0f10; --surface:#1c1c1e; --surface-2:#232325;
    --fill:#2a2a2d; --fill-2:#36363a; --hairline:#2c2c2e; --line:#3a3a3c;
    --label:#f5f5f7; --label-2:#d1d1d6; --label-3:#98989d;
    --argus:#8aa8f0; --tint:#7b9cf0; --tint-ink:#9db5f5; --tint-soft:rgba(123,156,240,.16);
    --mark:#ffb340; --ok:#30d158;
    --chrome:rgba(15,15,16,.78); --chrome-line:rgba(255,255,255,.08);
    --side: #161618;
    --sh-2:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --sh-3:0 8px 24px rgba(0,0,0,.6), 0 24px 64px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg:#0f0f10; --surface:#1c1c1e; --surface-2:#232325;
  --fill:#2a2a2d; --fill-2:#36363a; --hairline:#2c2c2e; --line:#3a3a3c;
  --label:#f5f5f7; --label-2:#d1d1d6; --label-3:#98989d;
  --argus:#8aa8f0; --tint:#7b9cf0; --tint-ink:#9db5f5; --tint-soft:rgba(123,156,240,.16);
  --mark:#ffb340; --ok:#30d158;
  --chrome:rgba(15,15,16,.78); --chrome-line:rgba(255,255,255,.08);
  --side: #161618;
  --sh-2:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --sh-3:0 8px 24px rgba(0,0,0,.6), 0 24px 64px rgba(0,0,0,.7);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--label);
  /* peacock と同じ。ヒラギノは W3 と W6 しか無いので、太さは 600 までにして合成させない */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont,
               "Noto Sans JP", "Yu Gothic Medium", Meiryo, system-ui, sans-serif;
  font-synthesis-weight: none;
  font-size: 1rem; line-height: 1.75; letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
.ic { display: block; flex: 0 0 auto; }

/* ---------- 共通のコントロール ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4em; justify-content: center;
  font: inherit; font-size: .845rem; font-weight: 600; letter-spacing: -.004em;
  border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer;
  background: var(--surface); color: var(--label);
  padding: .45em .85em; text-decoration: none; user-select: none;
  transition: transform 140ms var(--ease-press), background-color 140ms var(--ease-press), color 140ms var(--ease-press), border-color 140ms var(--ease-press);
}
.btn:hover { background: var(--hairline); }
/* 反応は押し下げた瞬間に返す */
.btn:active { transform: scale(.972); }
.btn[data-on="true"] { background: var(--tint-soft); color: var(--tint-ink); border-color: transparent; }
.btn.mark[data-on="true"] { background: color-mix(in srgb, var(--mark) 12%, transparent); color: var(--mark); border-color: transparent; }
.btn.done[data-on="true"] { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: transparent; }
.btn.filled { background: var(--tint); color: #fff; border-color: transparent; font-size: .9375rem; padding: .7em 1.5em; }
.btn.filled:hover { background: color-mix(in srgb, var(--tint) 88%, black); }

.iconbtn {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-ctl); border: 1px solid var(--line); cursor: pointer;
  background: var(--surface); color: var(--label-2);
  display: grid; place-items: center;
  transition: transform .1s ease-out, background .18s ease;
}
.iconbtn:hover { background: var(--hairline); }
.iconbtn:active { transform: scale(.94); }

/* ============================================================
   全体レイアウト — サイドバー + 本文
   広い画面ではサイドバーを常設、狭い画面では上から重ねる。
   ============================================================ */
.app { display: flex; min-height: 100svh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.side {
  /* ジャーナル名（J. of Consumer Research / Psychology など）が見分けられる幅 */
  width: 17rem; flex: 0 0 17rem;
  background: var(--side);
  border-right: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100svh;
}
.side-head {
  display: flex; align-items: center; gap: .5rem;
  padding: max(env(safe-area-inset-top), 1.25rem) 1.25rem 1rem;
}
.brand { display: inline-flex; align-items: center; color: var(--argus); text-decoration: none; }
.brand .wordmark { height: 1.75rem; width: auto; transform: translateY(12%); }
.gate-mark { margin: 0; color: var(--argus); line-height: 1; }
.gate-mark .wordmark { height: 4rem; width: auto; display: block; }

.side-close { display: none; margin-left: auto; }
.side-scroll { flex: 1; overflow-y: auto; padding: 0 1rem .5rem; scrollbar-width: thin; }
/* サイドバーの下。peacock と同じ並び（設定・姉妹の道具・自分・版） */
.side-foot { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
.sisters { display: flex; flex-direction: column; gap: .125rem; padding: 0 .25rem; }
.sisters a {
  display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: 12px;
  font-size: .845rem; line-height: 1.7; color: var(--label-3); text-decoration: none;
  transition: color 150ms var(--ease-press);
}
.sisters a:hover { color: var(--label); }
.sister-mark { height: .95rem; width: auto; transform: translateY(12%); flex: 0 0 auto; }
.sisters .ext { width: .875rem; height: .875rem; margin-left: auto; flex: 0 0 auto; }
.me { display: flex; align-items: center; gap: .5rem; margin: 0 .25rem; padding-top: .75rem; border-top: 1px solid var(--hairline); }
.me-name { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-role { flex: 0 0 auto; font-size: .845rem; font-weight: 600; line-height: 1.6; padding: .05rem .4rem; border-radius: 6px; background: var(--fill); color: var(--label-2); }
.me-role[data-owner="true"] { background: var(--tint-soft); color: var(--tint-ink); }
.me-out {
  flex: 0 0 auto; display: grid; place-items: center; padding: .5rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--label);
  transition: background 140ms var(--ease-press), transform 140ms var(--ease-press);
}
.me-out:hover { background: var(--hairline); }
.me-out:active { transform: scale(.972); }
.version {
  align-self: flex-start; margin: 0 .5rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .845rem; line-height: 1.7; color: var(--label-3); text-align: left;
  transition: color 150ms var(--ease-press);
}
.version:hover { color: var(--label); }
.btn.wide { width: 100%; justify-content: flex-start; padding: .5em .7em; }

.side-group { margin-top: 1rem; }
.side-group > h3 {
  margin: 0 0 .25rem; padding: 0 .75rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--label-3);
}
/* peacock の導線と同じ。今いる場所は白い面に乗り、アイコンだけアクセント色になる */
.nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  border: 0; background: transparent; color: var(--label-2);
  font: inherit; font-size: .9375rem; font-weight: 400;
  padding: .45rem .75rem; border-radius: 12px; cursor: pointer;
  text-align: left; transition: background 150ms var(--ease-press), color 150ms var(--ease-press), transform 150ms var(--ease-press);
}
.nav-item:hover { color: var(--label); }
.nav-item:active { transform: scale(.98); }
.nav-item[aria-current="true"] { background: var(--surface); color: var(--label); font-weight: 600; }
.nav-item .ic { opacity: .8; }
.nav-item[aria-current="true"] .ic { opacity: 1; color: var(--tint); }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font-size: .78rem; color: var(--label-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.nav-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.nav-item[aria-current="true"] .nav-dot { background: var(--tint); }

.side-scrim {
  position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

/* 狭い画面：サイドバーは重ねて表示する */
@media (max-width: 63.99rem) {
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 45;
    transform: translate3d(-100%, 0, 0);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow: var(--sh-3);
  }
  .app[data-side="open"] .side { transform: translate3d(0,0,0); }
  .app[data-side="open"] .side-scrim { opacity: 1; pointer-events: auto; }
  .side-close { display: grid; }
}
@media (min-width: 64rem) { .only-narrow { display: none !important; } }

/* ============================================================
   ツールバー
   ============================================================ */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .55rem;
  padding: max(env(safe-area-inset-top), .75rem) var(--gut) .75rem;
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: .5px solid var(--chrome-line);
}
.bar-title { min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.bar-title h1 {
  margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-sub { font-size: .845rem; color: var(--label-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ドロップダウンメニュー */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 11rem; padding: .3rem;
  background: var(--surface); border-radius: 14px;
  box-shadow: var(--sh-3); border: .5px solid var(--hairline);
}
.menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 0; background: transparent; color: var(--label);
  font: inherit; font-size: .875rem; padding: .45rem .6rem;
  border-radius: 10px; cursor: pointer; text-align: left;
}
.menu button:hover { background: var(--bg); }
.menu button[aria-checked="true"] { color: var(--tint-ink); font-weight: 600; }
.menu .tick { width: 1rem; display: grid; place-items: center; }

/* ============================================================
   フィード
   ============================================================ */
main {
  flex: 1; padding: 1rem var(--gut) 4.5rem;
  display: grid; gap: .85rem; grid-template-columns: 1fr; align-content: start;
}
@media (min-width: 34rem) { main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 82rem) { main { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 112rem){ main { grid-template-columns: repeat(4, 1fr); } }
main[data-view="list"] { grid-template-columns: 1fr !important; max-width: 50rem; }

/* peacock の card と同じ。影で浮かせず、細い線と地の明度差で区切る。触れると線が濃くなる */
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-tile);
  border: 1px solid var(--hairline); overflow: hidden;
  transition: border-color 180ms var(--ease-press), transform 140ms var(--ease-press), opacity 250ms ease;
  will-change: transform;
}
.tile:hover { border-color: var(--line); }
.tile[data-read="true"] { opacity: .6; }
.tile[data-press="true"] { transform: scale(.99); }
.tile[data-focus="true"] { border-color: var(--tint); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 18%, transparent); }

.tile-body { flex: 1; padding: 1rem 1.1rem .7rem; cursor: pointer; }
.tile-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .45rem; }
/* peacock の pill。ジャーナルの札 */
.src { font-size: .78rem; font-weight: 600; line-height: 1.6; background: var(--tint-soft); color: var(--tint-ink); border-radius: 6px; padding: .05rem .45rem; }
.basis { font-size: .78rem; color: var(--label-3); display: inline-flex; align-items: center; gap: .25rem; }
.when { font-size: .78rem; color: var(--label-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.tile-title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; line-height: 1.55; letter-spacing: -.006em; word-break: auto-phrase; }
.tile-lede {
  margin: 0; font-size: .875rem; color: var(--label-2); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
main[data-view="list"] .tile-lede { -webkit-line-clamp: 2; }
.tile-credit { margin-top: .45rem; font-size: .78rem; color: var(--label-3); line-height: 1.6; }
.tile-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.tag-chip {
  font-size: .75rem; font-weight: 600; padding: .04rem .45rem; border-radius: 6px;
  background: color-mix(in srgb, var(--mark) 12%, transparent); color: var(--mark);
}

.tile-foot { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem .7rem; border-top: 1px solid var(--hairline); }
.tile-foot .grow { flex: 1; }

.rank { display: inline-flex; align-items: center; gap: .28rem; font-size: .6875rem; font-weight: 600; color: var(--label-3); }
.rank-bars { display: inline-flex; gap: 1.5px; align-items: flex-end; height: .7rem; }
.rank-bars i { width: 3px; border-radius: 1px; background: var(--fill-2); display: block; }
.rank-bars i:nth-child(1){height:30%} .rank-bars i:nth-child(2){height:48%}
.rank-bars i:nth-child(3){height:66%} .rank-bars i:nth-child(4){height:84%}
.rank-bars i:nth-child(5){height:100%}
.rank-bars i[data-on="true"] { background: var(--tint); }
.rank[data-level="5"] .rank-bars i[data-on="true"] { background: var(--mark); }

/* ============================================================
   詳細シート
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.32);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 61; background: var(--surface);
  box-shadow: var(--sh-3); display: flex; flex-direction: column; will-change: transform;
  inset: auto 0 0 0; max-height: 92svh; border-radius: 20px 20px 0 0;
  transform: translate3d(0, 100%, 0);
}
@media (min-width: 44rem) {
  .sheet {
    inset: 50% auto auto 50%; width: min(46rem, 92vw); max-height: 86svh;
    border-radius: 20px; transform: translate3d(-50%, -50%, 0) scale(.97);
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
  }
  .sheet[data-open="true"] { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}
.sheet-grip { display: grid; place-items: center; padding: .5rem 0 .1rem; cursor: grab; touch-action: none; }
.sheet-grip span { width: 2.25rem; height: 4px; border-radius: 2px; background: var(--fill-2); }
@media (min-width: 44rem) { .sheet-grip { display: none; } }

.sheet-bar {
  display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem;
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.sheet-title { font-size: .875rem; font-weight: 600; color: var(--label-2); }
.sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--gut) 1.4rem; }

.doc-head { padding: 1rem 0 .3rem; }
.doc-title { margin: .5rem 0 .55rem; font-size: 1.35rem; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; word-break: auto-phrase; }
.doc-lede { margin: 0; font-size: 1rem; color: var(--label-2); line-height: 1.8; }
.doc-credit { margin-top: .55rem; font-size: .845rem; color: var(--label-3); line-height: 1.65; }

.sec { margin-top: 1.4rem; }
/* 見出しは peacock の text-section に近い大きさ。色で区切りを示す */
.sec > h3 { margin: 0 0 .3rem; font-size: .9375rem; font-weight: 600; letter-spacing: -.004em; color: var(--tint-ink); }
.sec p, .sec li { margin: 0; font-size: .9375rem; line-height: 1.85; }
.sec ul { margin: 0; padding-left: 1.1em; }
.sec li { margin-bottom: .2rem; }
.sec li::marker { color: var(--label-3); }
.kv { margin-top: .35rem; font-size: .9375rem; line-height: 1.8; }
.kv b { font-weight: 600; } .kv span { color: var(--label-2); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; }
.tags span { font-size: .78rem; background: var(--bg); border: 1px solid var(--hairline); color: var(--label-2); border-radius: 6px; padding: .05rem .5rem; }

/* タグ編集 */
.tagbox { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.tagbox h4 { margin: 0 0 .45rem; font-size: .845rem; font-weight: 600; color: var(--label-2); }
.tagrow { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tagrow .tag-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .18rem .5rem; }
.tagrow .tag-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: grid; place-items: center; opacity: .65; }
.tagrow .tag-chip button:hover { opacity: 1; }
.tag-input {
  font: inherit; font-size: .875rem; outline: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .25rem .7rem;
  color: var(--label); min-width: 8rem;
}
.tag-suggest { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.tag-suggest button {
  font: inherit; font-size: .6875rem; border: 0; cursor: pointer;
  background: var(--fill); color: var(--label-2); border-radius: 999px; padding: .12rem .5rem;
}

.doc-tools { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }

/* ============================================================
   設定
   ============================================================ */
.group { margin-top: 1.25rem; }
.group > h4 { margin: 0 0 .45rem; font-size: .9375rem; font-weight: 600; color: var(--label); }
.card-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--hairline); }
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: .9375rem; font-weight: 600; }
.row-sub { font-size: .845rem; color: var(--label-3); margin-top: .05rem; line-height: 1.65; }

.switch { position: relative; width: 3.1rem; height: 1.85rem; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--fill-2); transition: background .25s ease; }
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.85rem - 4px); height: calc(1.85rem - 4px);
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.switch input:checked + span { background: var(--tint); }
.switch input:checked + span::after { transform: translateX(calc(3.1rem - 1.85rem)); }

.seg { display: flex; gap: 2px; background: var(--fill); border-radius: 12px; padding: 3px; }
.seg button {
  flex: 1; border: 0; background: transparent; color: var(--label-2);
  font: inherit; font-size: .845rem; font-weight: 400; padding: .3rem .6rem;
  border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: .3rem; transition: background .18s ease, color .18s ease;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--label); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.rel { border-left: 2px solid var(--hairline); padding-left: .8rem; margin-top: .8rem; }
.rel h5 { margin: 0; font-size: .9375rem; font-weight: 600; }
.rel .ver { font-size: .78rem; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rel ul { margin: .3rem 0 0; padding-left: 1.05em; }
.rel li { font-size: .875rem; color: var(--label-2); line-height: 1.75; margin-bottom: .1rem; }

/* ============================================================
   ゲート / 空 / フッタ / プル
   ============================================================ */
.gate { min-height: 100svh; display: grid; place-items: center; padding: var(--gut); text-align: center; }
.gate-inner { width: min(24rem, 100%); display: grid; gap: 1rem; justify-items: center; }
.gate h2 { margin: 0; }
.gate-lede { color: var(--label-3) !important; font-size: .845rem !important; }
.gate-card { width: 100%; display: grid; gap: .75rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; }
.gate .credit a { color: var(--label); text-underline-offset: 4px; }
.gate p { margin: 0; font-size: .9375rem; color: var(--label-2); line-height: 1.8; }
.gate .btn.filled { width: 100%; height: 3rem; }
.gate .fine { font-size: .845rem; color: var(--label-3); }
.gate .deny { color: var(--mark); font-size: .9375rem; }

.blank { grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; color: var(--label-3); }
.blank .ic { margin: 0 auto .6rem; opacity: .5; }
.blank p { margin: 0; font-size: .875rem; }

.foot {
  position: sticky; bottom: 0; z-index: 20;
  padding: .35rem var(--gut) calc(.35rem + env(safe-area-inset-bottom));
  background: var(--chrome); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-top: .5px solid var(--chrome-line);
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .78rem; color: var(--label-3);
}
.keyhint { display: none; }
@media (min-width: 60rem) { .keyhint { display: inline; } }

.pull { position: fixed; top: 0; left: 0; right: 0; z-index: 25; display: grid; place-items: center; height: 3.4rem; pointer-events: none; color: var(--label-3); opacity: 0; }
.pull[data-spin="true"] .ic { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .1s !important; }
  .tile, .sheet, .side { will-change: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .foot, .sheet-bar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --label-2: var(--label); --hairline: currentColor; }
  .tile { box-shadow: 0 0 0 1px var(--label-3); }
  .btn { box-shadow: inset 0 0 0 1px var(--label-3); }
}

/* ============================================================
   保存先（フォルダ）選択
   ============================================================ */
@media (min-width: 44rem) {
  .sheet.picker { width: min(24rem, 92vw); max-height: 70svh; }
}
.pick-list { margin-top: .8rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.pick {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  border: 0; background: transparent; color: var(--label);
  font: inherit; font-size: .875rem; padding: .62rem .8rem; cursor: pointer;
  border-bottom: 1px solid var(--hairline); text-align: left;
}
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--bg); }
.pick .nav-label { flex: 1; }
.pick .nav-count { font-size: .6875rem; color: var(--label-3); }
.pick .box {
  width: 1.15rem; height: 1.15rem; border-radius: 6px; flex: 0 0 auto;
  border: 1.5px solid var(--fill-2); display: grid; place-items: center; color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pick[aria-checked="true"] .box { background: var(--tint); border-color: var(--tint); color: #fff; }
.pick-new { display: flex; gap: .4rem; margin-top: .7rem; }
.pick-new input {
  flex: 1; font: inherit; font-size: .9375rem; outline: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem; color: var(--label);
}
.pick-new input:focus { border-color: var(--tint); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 18%, transparent); }
.pick-foot { display: flex; gap: .4rem; margin-top: 1rem; padding-top: .8rem; border-top: .5px solid var(--hairline); }
.pick-note { font-size: .75rem; color: var(--label-3); margin: .7rem 0 0; line-height: 1.6; }

/* ============================================================
   検索・巻号・フォルダ操作バー
   ============================================================ */
.search {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .35rem .7rem;
  min-width: 0; flex: 0 1 17rem;
  transition: border-color 150ms var(--ease-press), box-shadow 150ms var(--ease-press);
}
.search:focus-within { border-color: var(--tint); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 18%, transparent); }
.search .ic { color: var(--label-3); }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: .9375rem; color: var(--label); padding: .1rem 0;
}
.search input::-webkit-search-cancel-button { display: none; }
.search-x { border: 0; background: none; cursor: pointer; color: var(--label-3); display: grid; place-items: center; padding: 0; }
@media (max-width: 33.99rem) { .search { flex: 1 1 auto; } .bar-title { display: none; } }

.subbar {
  position: sticky; top: 0; z-index: 29;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .45rem var(--gut);
  background: var(--bg); border-bottom: 1px solid var(--hairline);
}
.subbar .label { font-size: .845rem; color: var(--label-3); margin-right: .1rem; }
.menu.scrollable { max-height: 60svh; overflow-y: auto; }
.menu .sep { height: .5px; background: var(--hairline); margin: .25rem .3rem; }
.affil { display: flex; align-items: flex-start; gap: .25rem; }
.affil .ic { margin-top: .18em; opacity: .6; }


/* ============================================================
   共同研究者（読むだけ）。既読・★・フォルダはオーナーだけのもの
   ============================================================ */
body.view-only [data-act],
body.view-only .tile-foot,
body.view-only .nav-item[data-scope="unread"],
body.view-only .nav-item[data-scope="read"],
body.view-only .nav-item[data-scope="saved"],
body.view-only .nav-item[data-scope^="t:"],
body.view-only .tagbox,
body.view-only .keyhint { display: none !important; }
body.view-only .tile[data-read="true"] { opacity: 1; }