/*
 * base.css — ページの骨格と、Picoから独立した基礎スタイル。
 * 方眼背景・中央パネル・サイドバー/トップバー（ドロワー）・フッタ・フォーム既定の補正。
 * アプリ固有の部品クラスは components.css へ。
 */

/* Pico卒業後も必要な light 固定の基礎タイポグラフィ。 */
:root { color-scheme: light; }
body { font-family: var(--font-sans); font-size: var(--font-size); line-height: var(--line-height); color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); letter-spacing: 0.01em; line-height: 1.25; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
code { padding: 0.1rem 0.3rem; border-radius: 4px; background: var(--code-bg); }
blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--hairline); color: var(--ink-soft); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Form controls: text/select/textarea/file/radio/checkbox and validation states. */
:where(input:not([type="checkbox" i], [type="radio" i]), select, textarea) {
  box-sizing: border-box; width: 100%; margin: 0 0 var(--space); padding: var(--control-padding-y) var(--control-padding-x);
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit;
}
:where(input, select, textarea)::placeholder { color: var(--muted); }
:where(input, select, textarea):focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }
:where(input, select, textarea):user-invalid { border-color: var(--danger); }
input[type="checkbox" i], input[type="radio" i] { accent-color: var(--accent); }
input[type="file" i] { padding: 0.25rem; }
label { display: block; font-weight: 600; }
fieldset { margin: 0 0 var(--space); padding: var(--space); border: 1px solid var(--hairline); }
table { width: 100%; border-collapse: collapse; margin: var(--space) 0; }
th, td { padding: 0.5rem; border-bottom: 1px solid var(--hairline); text-align: left; }
th { color: var(--ink-soft); }

/* Outer ground: flat surface matching the sidebars/panel so everything reads as one seamless plane
   (no grid, no visible side margins around main). */
body { background: var(--panel); }

/* Content panel: same surface as the ground, centered to --page. No side borders/shadow so it
   blends with the sidebars and the right sidebar boundary doesn't double-up.
   `body > main` outranks Pico's container so --page actually applies. */
body > main {
  max-width: var(--page);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.6rem 2.2rem 5rem;
  background: var(--panel);
  min-height: calc(100vh - var(--topbar-height));
}
@media (min-width: 881px) { body > main { margin: 0 auto 0 0; } }
@media (max-width: 640px) { body > main { padding: 1.6rem 1.1rem 3rem; border: none; box-shadow: none; } }

main a { color: var(--accent); }

/* スクリーンリーダーには残すが視覚的には隠す（文書構造用の見出しなどに使う）。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* `main` itself is the page panel, so a semantic <article> inside it must not
   render as a second Pico card. Strip Pico's card visuals — keep it a plain block
   so `main > article` pages and `main`-only pages share the same layout. */
main > article {
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}

/* ── Top navigation + side navigation ─────────
   Wide: persistent top nav + fixed left sidebar below it, content shifted right via body padding.
   Narrow (<= 880px): sidebar becomes an off-canvas drawer toggled by the topbar hamburger. */
body { padding-top: var(--topbar-height); padding-left: var(--sidebar-width); }

body > header.topbar {
  display: flex; align-items: center; gap: 0.75rem; position: fixed; top: 0; right: 0; left: 0; z-index: 40;
  width: 100%; max-width: none; height: var(--topbar-height); box-sizing: border-box;
  margin: 0; padding: 0;
  border-bottom: 1px solid var(--hairline);
  background: rgba(253, 253, 251, 0.94); backdrop-filter: saturate(1.2) blur(8px);
}
.topbar__toggle { display: none; align-self: stretch; background: none; border: 0; line-height: 1; padding: 0 0.9rem; margin: 0; cursor: pointer; color: var(--ink); width: auto; }
.topbar__toggle:hover, .topbar__toggle:focus { color: var(--accent); background: var(--accent-weak); }
.topbar__notifications { position: relative; align-self: stretch; display: flex; align-items: center; margin: 0; padding: 0; color: var(--ink-soft); }
.topbar__notifications > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; height: 100%; padding: 0 0.35rem; cursor: pointer; }
.topbar__notifications > summary::-webkit-details-marker { display: none; }
.topbar__notifications > summary::marker { content: ""; }
/* Pico は summary の ::after にシェブロンを描くため、marker と別にこちらも消す必要がある */
.topbar__notifications > summary::before, .topbar__notifications > summary::after { content: none; display: none; }
.topbar__notifications > summary:hover, .topbar__notifications > summary:focus-visible { color: var(--accent); }
.topbar__notifications .badge { position: absolute; top: -0.45rem; right: -0.55rem; min-width: 1.15rem; padding: 0 0.25rem; border-radius: 1rem; background: var(--accent); color: white; font-size: 0.65rem; line-height: 1.15rem; text-align: center; }
.topbar__notifications-menu { width: min(24rem, calc(100vw - 1rem)); max-height: min(32rem, calc(100vh - var(--topbar-height) - 1rem)); overflow-y: auto; }
.topbar__notifications-menu .timeline { margin: 0.35rem 0; }
.topbar__notifications-menu .timeline li { font-size: 0.85rem; }
.topbar__notifications-menu .timeline .avatar { width: 24px; height: 24px; }
/* .topbar__menu のメニュー項目用 flex 指定を、通知文中のリンクには継承させない。 */
.topbar__notifications-menu .timeline__body a { display: inline; width: auto; }
.topbar__notifications-heading { padding: 0.45rem 0.6rem; }
/* ベルはアバターメニューの手前にあるため、狭い画面で絶対配置すると左へはみ出す。
   画面幅では viewport 基準にして、左右の余白を常に確保する。 */
@media (max-width: 480px) {
  .topbar__menu.topbar__notifications-menu {
    position: fixed;
    top: calc(var(--topbar-height) + 0.45rem);
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
}
.topbar__user-menu { position: relative; align-self: stretch; display: flex; align-items: center; height: 100%; margin: 0; padding: 0; }
.topbar__user-menu[open] { margin: 0; padding: 0; }
.topbar__user-menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; height: 100%; box-sizing: border-box;
  padding: 0 0.9rem; margin: 0; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: inherit;
}
.topbar__user-menu[open] > summary { margin: 0; }
.topbar__user-menu > summary::-webkit-details-marker { display: none; }
.topbar__user-menu > summary::marker { content: ""; }
.topbar__user-menu > summary::before, .topbar__user-menu > summary::after { content: none; display: none; }
.topbar__user-menu > summary:hover { background: transparent; }
.topbar__user-menu > summary .avatar { display: block; width: 32px; height: 32px; transition: box-shadow 0.12s ease; }
.topbar__user-menu > summary:hover .avatar,
.topbar__user-menu > summary:focus-visible .avatar,
.topbar__user-menu[open] > summary .avatar {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.topbar__menu {
  position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 50;
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem;
  padding: 0.35rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 17, 15, 0.14);
}
.topbar__menu::before { content: ""; position: absolute; top: -0.45rem; right: 0.8rem; width: 0.8rem; height: 0.8rem; background: var(--surface); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); transform: rotate(45deg); }
.topbar__menu a, .topbar__logout {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.45rem 0.6rem; margin: 0; border: 0; border-radius: 7px;
  color: var(--ink-soft); background: transparent; text-align: left; text-decoration: none;
  font: inherit; font-size: 0.9rem; line-height: 1.4;
}
.topbar__menu a:hover, .topbar__logout:hover { background: var(--accent-weak); color: var(--accent); }
.topbar__menu form.button_to { display: block; margin: 0; }
/* 検索: 円形アイコンのトグル＋右寄せの固定幅オーバーレイ（全画面共通の挙動）。
   開いている間はトグルを隠して虫めがねが二重に出ないようにする。 */
.topbar__search { position: relative; align-self: stretch; display: flex; align-items: center; margin-left: auto; }
.topbar__search > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; margin: 0; list-style: none;
  background: none; border: 1px solid var(--hairline); border-radius: 50%;
  cursor: pointer; color: var(--ink-soft);
}
.topbar__search > summary::-webkit-details-marker { display: none; }
.topbar__search > summary::marker { content: ""; }
.topbar__search > summary:hover, .topbar__search > summary:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); }
.topbar__search-menu { min-width: min(20rem, calc(100vw - 1rem)); }
.topbar__search-menu form { margin: 0; }
.topbar__search-menu input { width: 100%; margin: 0; }

.sidebar {
  position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: var(--sidebar-width); z-index: 30;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 0.9rem 1.3rem; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--hairline);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 0.1rem; }
.sidebar__nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 0.4rem 0.55rem; border-radius: 7px;
}
.sidebar__nav a:hover { background: var(--accent-weak); color: var(--accent); }
.nav-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.9rem; }
.nav-group__label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted);
  padding: 0 0.55rem 0.2rem;
}
/* 降格した「記事(見直し中)」を区切る薄い線 */
.nav-sep { border: 0; border-top: 1px solid var(--hairline); margin: 0.5rem 0.2rem; }
.sidebar__about { margin-top: 0.9rem; }

/* 右サイドバー: 用途未定の足場。本文(--page)＋左右サイドバーが重ならない十分広い画面でのみ表示。
   閾値 98rem ≒ 左15rem + 本文62rem + 右20rem + 余白（未満では本文が縮むので出さない）。 */
.sidebar-right { display: none; }
@media (min-width: 98rem) {
  body { padding-right: var(--sidebar-right-width); }
  .sidebar-right {
    display: block; position: fixed; top: var(--topbar-height); right: 0; bottom: 0;
    width: var(--sidebar-right-width); z-index: 30;
    padding: 1rem 0.9rem 1.3rem; overflow-y: auto;
    background: var(--panel); border-left: 1px solid var(--hairline);
  }
  /* 右サイドバー表示時は本文を左右サイドバーの間で中央寄せに戻す。罫線も背景余白も無いので
     （body と同色・border なし）、中央寄せの左右余白は見えず継ぎ目なく繋がる。 */
  body > main { margin: 0 auto; }
}

.site-footer {
  margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline);
  font-size: 0.82rem; color: var(--muted);
}
.site-footer p { margin: 0.2rem 0; }

.backdrop { display: none; }

@media (max-width: 880px) {
  body { padding-left: 0; }
  .topbar__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(43, 43, 43, 0.18); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(20, 17, 15, 0.35); }
}

.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.topbar .brand { margin-left: 0.9rem; }
.brand-logo { max-height: 28px; width: auto; vertical-align: middle; }
.brand a { color: var(--ink); }

@media (max-width: 880px) { .topbar .brand { margin-left: 0; } }

/* Pico full-widths only submit controls (button[type=submit], input[type=submit], select)
   with NO !important. Match that selector — later in the cascade wins — to keep them
   content-width. Other buttons / [role=button] are already auto-width by default. */
button[type="submit"], input[type="submit"], select { width: auto; }

/* button_to renders a <form>; keep it inline so action buttons sit beside links/text.
   副次操作の .secondary / .outline は components.css で自前定義する。 */
form.button_to { display: inline; }