/* ==========================================================================
   Saera's Eye（/eye/）専用 — DESIGN-SPEC §5.2（T3）
   site.css のトークン・部品（.page-head .crop .chibi .voice .bubble--plain .fold .chip .empty .more）の上に、
   月ナビ・記事カード・カレンダーだけを足す。色と書体は必ず var(--*) で書く。
   ========================================================================== */

.eye{--months-h:52px;--cal-cell:44px}

/* スクロールの逃げ幅は記事側の scroll-margin-top（ヘッダー＋月ナビ＋16px）だけで取る。
   site.css の html の scroll-padding-top と足し算にならないよう、このページだけ 0 にする
   （:has が使えないブラウザ向けに eye.js の boot でも 0 を入れる） */
html:has(main.eye){scroll-padding-top:0}

/* ---------- page head（窓辺の切り抜き＋時間帯の色＋窓際のちび） ----------
   共通の2段構成を、Eye は窓の幅と短い行間に合わせて詰める。 */
.eye-head{--crop-w:300px;--chibi-in:96px;padding-block:var(--s-6) var(--s-5)}
.eye-head .page-head__grid{grid-template-columns:minmax(0,1fr) min(var(--crop-w),40%);row-gap:var(--s-3)}   /* 右列は窓の幅だけ（リードを2行に収める） */
.eye-head .page-head__grid>.display-word{grid-column:1}
.eye-head__visual{grid-column:2;grid-row:1 / span 2;align-self:end}
/* 窓の切り抜きの右端に隣の棚の欠片が入らない値（site.css の .crop--window と同じ） */
.eye-window{position:relative;--bs:376.5%;--bx:3.97%;--by:17%;--ar:255/250}
.eye-window::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--eye-tint,transparent)}
.eye-window[data-time="morning"]{--eye-tint:color-mix(in srgb,var(--paper) 16%,transparent)}
.eye-window[data-time="evening"]{--eye-tint:color-mix(in srgb,var(--pink) 22%,transparent)}
.eye-window[data-time="night"]{--eye-tint:color-mix(in srgb,var(--ink) 34%,transparent)}
/* 静止（data-play を付けない＝1コマ目のまま）。窓の中の床（左のカーテンの前）に立たせる */
.eye-head__visual .chibi{bottom:3px}
@media (max-width:760px){
  /* モバイル: 見出し語・札・h1 の右に 112px 角の窓。リードとチップはその下に全幅 */
  .eye-head{padding-block:var(--s-5)}
  .eye-head{--crop-w:112px}
  .eye-head .page-head__grid{grid-template-columns:minmax(0,1fr) var(--crop-w);column-gap:var(--s-3);row-gap:0;align-items:end}
  .eye-head .page-head__text{display:contents}
  .eye-head .page-head__grid>.display-word{grid-column:1;grid-row:1}
  .eye-head .place{grid-column:1;grid-row:2;margin-top:var(--s-2)}
  .eye-head h1{grid-column:1;grid-row:3;margin-top:var(--s-1)}
  .eye-head .lead{grid-column:1 / -1;grid-row:4;margin-top:var(--s-3);font-size:var(--t-m)}
  .eye-head .chips{grid-column:1 / -1;grid-row:5;margin-top:var(--s-3)}
  .eye-head__visual{grid-column:2;grid-row:1 / 4;align-self:end}
  .eye-head__visual .crop{width:var(--crop-w);height:auto}
  .eye-head__visual .chibi{--w:40px;left:9px;bottom:2px}
}

/* ---------- 月ナビ（sticky。モバイルは横スクロール＋右端 24px のフェード） ---------- */
.eye-months{position:sticky;top:var(--head-h);z-index:var(--z-float);height:var(--months-h);
  background:var(--paper);border-block:1px solid var(--rule)}
.eye-months__in{height:100%}
.eye-months__list{display:flex;align-items:center;gap:var(--s-2);height:100%;margin:0;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.eye-months__list::-webkit-scrollbar{display:none}
.eye-months__list li{flex:none}
.eye-months__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border:1px solid var(--rule);
  border-radius:var(--r-pill);color:var(--ink-2);font-weight:700;font-size:var(--t-s);line-height:1.2;text-decoration:none;white-space:nowrap}
.eye-months__list a:hover{background:var(--mist);color:var(--ink)}
.eye-months__list a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.eye-months__list a:focus-visible{outline-offset:-2px;border-radius:var(--r-pill)}
.eye-months__list .num{font-size:1.05em}
@media (max-width:760px){
  .eye-months__in{padding-inline:0}
  .eye-months__list{padding-inline:var(--gutter) calc(var(--gutter) + 24px);scroll-padding-inline:var(--gutter)}
}
/* 溢れているときだけ右端をフェード（eye.js が測って付ける。JS なしは 760px 以下で常に） */
.eye-months__list.is-overflow{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent)}
html:not(.js) .eye-months__list{-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){
  html:not(.js) .eye-months__list{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent)}
}

/* ---------- 2カラム（記事＋カレンダー。1199px 以下は1列でカレンダーを出さず、X のお知らせは記事の後ろ） ---------- */
.eye-body{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--cal-cell) * 7 + var(--s-4) * 2 + 2px);gap:var(--s-7);
  align-items:start;padding-block:var(--s-5) 0}
/* 記事の列は 1fr を使い切る（最大 --read＋48px。1440 幅で約 800px。カレンダーとの間は gap の 48px だけ） */
.eye-feed{min-width:0;max-inline-size:calc(var(--read) + var(--s-7));scroll-margin-top:calc(var(--head-h) + var(--months-h) + 16px)}
.eye-side{position:sticky;top:calc(var(--head-h) + var(--months-h) + 16px);display:grid;gap:var(--s-4)}
@media (max-width:1199px){
  .eye-body{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .eye-side{position:static;max-inline-size:calc(var(--read) + var(--s-7))}
  .eye-cal{display:none}
}

.eye-view{margin-bottom:var(--s-4);font-size:var(--t-s);font-weight:700;color:var(--ink-2)}
.eye-view .num{margin-left:.5em;color:var(--lav-ink)}
.eye-loading{padding:var(--s-7) 0;color:var(--ink-2)}
html:not(.js) .eye-loading{display:none}   /* JS なしは noscript の案内だけにする */
.eye-notice{margin-bottom:var(--s-4)}
.eye-list .empty .chibi{--w:56px}
.eye-list .empty .btn{margin-top:var(--s-3)}

/* ---------- 記事カード ---------- */
.eye-card{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--sh-1);
  padding:var(--s-4) var(--s-6) var(--s-1);scroll-margin-top:calc(var(--head-h) + var(--months-h) + 16px)}
.eye-card+.eye-card{margin-top:var(--s-5)}
.eye-card:target,.eye-card.is-target{outline:2px solid var(--lav-ink);outline-offset:6px}
.eye-card__head{display:flex;align-items:center;gap:var(--s-3);min-height:44px}
.eye-card__date{display:inline-flex;align-items:baseline;gap:.4em;min-height:44px;padding-top:.55em;
  color:var(--lav-ink);text-decoration:none;font:400 var(--t-l)/1.2 var(--f-pixel);letter-spacing:.02em}
.eye-card__date small{font:700 var(--t-xs)/1 var(--f-jp);color:var(--ink-3);letter-spacing:.04em}
.eye-card__date:hover{color:var(--pink-ink)}
.eye-card__perma{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;margin-right:calc(var(--s-3) * -1);
  border-radius:50%;color:var(--ink-3);text-decoration:none;font:400 var(--t-l)/1 var(--f-pixel)}
.eye-card__perma:hover{background:var(--mist);color:var(--lav-ink)}
.eye-card__perma:focus-visible{outline-offset:-3px;border-radius:50%}
.eye-card__title{margin:var(--s-1) 0 var(--s-4);font-size:var(--t-l)}
.eye-card__title:focus{outline:none}
.eye-card .voice{margin-bottom:var(--s-4)}
.eye-card .bubble--plain p+p{margin-top:.7em}
/* 見解は途中で切らない（line-clamp を付けない） */
.eye-card .bubble--plain{overflow:visible;-webkit-line-clamp:none;line-clamp:none}
/* しっぽを出さない・句で折らない規則は site.css の .bubble--plain / .voice .bubble--plain（共通部品）にある */
.eye-card .eye-card__summary{border-bottom:0}
.eye-card__summary>summary{justify-content:flex-start;font-size:var(--t-s);color:var(--ink-2)}
.eye-card__summary>summary::after{order:-1;width:10px;height:10px}
.eye-card__summary>summary:hover{color:var(--lav-ink)}
.eye-card__summary .fold__body{padding-bottom:var(--s-4)}
.eye-card__summary .fold__body p{font-size:var(--t-s);line-height:1.95;color:var(--ink-2)}
.eye-card__summary .src{font-size:var(--t-xs);line-height:1.4;color:var(--ink-3)}
.eye-card__summary .fold__body .src{margin-top:var(--s-1)}
/* 出典リンクの当たり判定を縦 44px に（行の高さはリンクに合わせて 44px になる） */
.eye-card__summary .src a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
@media (max-width:760px){
  /* モバイルは1枚を詰める（目安 330px 前後）:
     ・「要約」のトグルを日付の行の右端に上げる（details は下に残し、summary だけ絶対配置。タップ領域は 44px）
     ・固定リンクの # は日付のリンクと同じ行き先なので隠す
     ・アバターと「サエラの見解」の札は、見解の1行目の頭に回り込ませる
     ・タイトルは1段、見解の行間は 1.85 → 1.7 */
  .eye-card{padding:var(--s-3) var(--s-4)}
  .eye-card+.eye-card{margin-top:var(--s-3)}
  .eye-card__head{padding-right:84px;gap:var(--s-2)}
  .eye-card__perma{display:none}
  .eye-card__title{margin:0 0 var(--s-2);font-size:var(--t-m);line-height:1.5}
  .eye-card .voice{display:block;position:relative;margin-bottom:0}
  .eye-card .voice>img{position:absolute;left:var(--s-3);top:var(--s-3);z-index:1;width:26px;height:26px}
  .eye-card .voice .bubble--plain{border-radius:var(--r-m);padding:var(--s-3);line-height:1.7}
  .eye-card .voice__label{float:left;margin:0 .6em 0 0;padding:.5em 0 0 34px;line-height:1.4}
  .eye-card .voice__label+p{margin-top:0}
  .eye-card .eye-card__summary{border-top:0}
  .eye-card__summary>summary{position:absolute;top:var(--s-3);right:var(--s-2);min-height:44px;padding:0 var(--s-3);gap:.45em;
    border-radius:var(--r-pill);font-size:var(--t-xs)}
  .eye-card__summary>summary:hover{background:var(--mist)}
  .eye-card__summary>summary:focus-visible{outline-offset:-3px}
  .eye-card__summary .fold__body{margin-top:var(--s-3);padding:var(--s-3) 0 0;border-top:1px dashed var(--rule)}
  .eye-card__summary .fold__body::before{content:"ニュースの要約";display:block;margin-bottom:var(--s-2);
    font:700 var(--t-xs)/1.4 var(--f-jp);color:var(--pink-ink);letter-spacing:.06em}
  .eye-card__summary .fold__body .src{margin-bottom:calc(var(--s-3) * -1)}
  .eye-sum__long{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- カレンダー（デスクトップだけ。記事のある日は --mist の面、今日は墨色。
   記事のない今日は塗らずに墨色の枠だけ。読み込み前も枠と 6 行ぶんの高さを取っておき、下の X のお知らせがずれないようにする） ---------- */
.eye-cal{padding:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper);box-shadow:var(--sh-1)}
.eye-cal.is-pending .eye-cal__grid tbody,.eye-cal.is-pending .eye-cal__h{visibility:hidden}
html:not(.js) .eye-cal{display:none}   /* JS なしでは日付が入らないので枠ごと出さない */
.eye-cal__h{min-height:1.5em;margin-bottom:var(--s-2);font-size:var(--t-m)}
.eye-cal__h .num{font-size:1.1em}
.eye-cal__grid{border-collapse:collapse;table-layout:fixed;width:calc(var(--cal-cell) * 7)}
.eye-cal__grid th{height:28px;padding:0;font:700 var(--t-xs)/1 var(--f-jp);color:var(--ink-3)}
.eye-cal__grid th.sat,.eye-cal__grid th.sun{color:var(--pink-ink)}
.eye-cal__grid td{width:var(--cal-cell);height:var(--cal-cell);padding:0;text-align:center}
.eye-cal__grid td>*{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--cal-cell);height:var(--cal-cell);
  font:400 var(--t-s)/1 var(--f-pixel);color:var(--ink-3);text-decoration:none}
.eye-cal__grid td>a{color:var(--lav-ink)}
.eye-cal__grid td>a::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:6px;background:var(--mist)}
.eye-cal__grid td>a:hover{color:var(--ink)}
.eye-cal__grid td>a:hover::before{background:var(--lav-200)}
.eye-cal__grid td>a:focus-visible{outline-offset:-2px;border-radius:8px}
.eye-cal__grid td>a.is-today{color:var(--paper)}
.eye-cal__grid td>a.is-today::before{background:var(--ink)}
.eye-cal__grid td>a.is-today:hover{color:var(--paper)}
.eye-cal__grid td>a.is-today:hover::before{background:var(--ink)}
.eye-cal__grid td>span.is-today{color:var(--ink);font-weight:700}
.eye-cal__grid td>span.is-today::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:6px;border:1.5px solid var(--ink)}
.eye-cal__grid td>.is-current::after{content:"";position:absolute;inset:1px;border-radius:8px;border:2px solid var(--lav-ink)}
.eye-cal .note{margin-top:var(--s-3)}

/* ---------- X のお知らせ ---------- */
.eye-follow{padding:var(--s-4) var(--s-5)}
.eye-follow>*+*{margin-top:0}
.eye-follow__h{font-weight:700;font-size:var(--t-s)}