/*
  Pigeonhole の唯一のスタイルシート(U4。設計文書 12 章)。
  iPhone の Safari とホーム画面に追加した状態(standalone)を第一の対象にした、狭い画面から組み立てるレイアウト。
  CSP で style-src 'self' だけを許すので、インラインのスタイル(style 属性)は使わず、ここにクラスを足す。

  画面の部品(U5、U7 が使う):
    .page             本体の枠(<main id="main" class="page">)
    .page-header      見出しと操作を横に並べる行
    .button           ボタン(<a> と <button> の両方)。.button-primary、.button-danger、.button-quiet
    .card             囲み
    .list、.list-item  一覧(メールの行など)。.list-item.unread で未読を太字に
    .badge            小さな印。.badge-warn(漏洩の疑いなど)、.badge-muted(フォルダ)
    .alert            お知らせ。.alert-error、.alert-info
    .field            入力欄と見出しの組。.field-row で横並び
    .muted            控えめな文字
    .text-body        メールのプレーンテキスト(<pre>。折り返す)
    .mail-frame       HTML メールの iframe
    .visually-hidden  画面には出さず、読み上げには出す
*/

:root {
  color-scheme: light dark;

  --color-bg-light: #ffffff;
  --color-bg-dark: #1c1c1e;
  --color-surface-light: #f2f2f7;
  --color-surface-dark: #2c2c2e;
  --color-text-light: #1c1c1e;
  --color-text-dark: #f2f2f7;
  --color-muted-light: #5c5c63;
  --color-muted-dark: #aeaeb2;
  --color-border-light: #d1d1d6;
  --color-border-dark: #48484a;
  --color-accent-light: #0a58ca;
  --color-accent-dark: #64a8ff;
  --color-accent-text-light: #ffffff;
  --color-accent-text-dark: #0b1a2e;
  --color-danger-light: #b42318;
  --color-danger-dark: #ff8a80;
  --color-warn-bg-light: #fff4d6;
  --color-warn-bg-dark: #4a3b10;
  --color-warn-text-light: #6b4a00;
  --color-warn-text-dark: #ffe08a;
  --color-error-bg-light: #fde8e7;
  --color-error-bg-dark: #4a1d1a;
  --color-info-bg-light: #e7f0fd;
  --color-info-bg-dark: #1a2c4a;

  --color-bg: var(--color-bg-light);
  --color-surface: var(--color-surface-light);
  --color-text: var(--color-text-light);
  --color-muted: var(--color-muted-light);
  --color-border: var(--color-border-light);
  --color-accent: var(--color-accent-light);
  --color-accent-text: var(--color-accent-text-light);
  --color-danger: var(--color-danger-light);
  --color-warn-bg: var(--color-warn-bg-light);
  --color-warn-text: var(--color-warn-text-light);
  --color-error-bg: var(--color-error-bg-light);
  --color-info-bg: var(--color-info-bg-light);

  --target-size: 24px;
  --gutter: 1rem;
  --radius: 10px;
  --max-width: 48rem;

  accent-color: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-muted-dark);
    --color-border: var(--color-border-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-text: var(--color-accent-text-dark);
    --color-danger: var(--color-danger-dark);
    --color-warn-bg: var(--color-warn-bg-dark);
    --color-warn-text: var(--color-warn-text-dark);
    --color-error-bg: var(--color-error-bg-dark);
    --color-info-bg: var(--color-info-bg-dark);
  }
}

@media (pointer: coarse) {
  :root {
    --target-size: 44px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  /* ホーム画面に追加した状態(viewport-fit=cover)で、ノッチやホームインジケーターに重ならないようにする */
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

h1,
h2,
h3 {
  line-height: 1.3;
  text-wrap: balance;
}

h1 {
  font-size: 1.375rem;
  margin-block: 0.5rem 1rem;
}

h2 {
  font-size: 1.125rem;
  margin-block: 1.5rem 0.5rem;
}

p,
li {
  text-wrap: pretty;
}

img,
video {
  max-inline-size: 100%;
  block-size: auto;
}

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

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- 共通の枠 */

.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -10rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  z-index: 10;
}

.skip-link:focus {
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 0.5rem);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
  padding-block-start: env(safe-area-inset-top, 0px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--target-size);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.brand-icon {
  border-radius: 6px;
}

.logout {
  margin: 0;
}

.site-nav {
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding: 0 var(--gutter) 0.25rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: var(--target-size);
  min-inline-size: var(--target-size);
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

/* 今の画面は色だけでなく下線と太字でも示す */
.site-nav a[aria-current="page"] {
  background: var(--color-surface);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.new-indicator {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

.new-indicator[hidden] {
  display: none;
}

.page {
  display: block;
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding: 0.5rem var(--gutter) 2rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.error-page {
  text-align: center;
  padding-block-start: 3rem;
}

/* ---- 部品 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: var(--target-size);
  min-inline-size: var(--target-size);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.button-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.button-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.button-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding-inline: 0.5rem;
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}

.list-item {
  border-block-end: 1px solid var(--color-border);
}

.list-item > a {
  display: block;
  min-block-size: var(--target-size);
  padding: 0.75rem 0.25rem;
  color: inherit;
  text-decoration: none;
}

.list-item.unread {
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-warn {
  background: var(--color-warn-bg);
  border-color: var(--color-warn-text);
  color: var(--color-warn-text);
}

.badge-muted {
  color: var(--color-muted);
}

.alert {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.alert-error {
  background: var(--color-error-bg);
  border-color: var(--color-danger);
}

.alert-info {
  background: var(--color-info-bg);
}

.field {
  display: grid;
  gap: 0.25rem;
  margin-block: 0.75rem;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
}

.field label {
  font-weight: 600;
}

input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  min-block-size: var(--target-size);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  /* 16px 未満だと iPhone の Safari が入力時に拡大する */
  font: inherit;
  font-size: max(1rem, 16px);
}

.muted {
  color: var(--color-muted);
}

.text-body {
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mail-frame {
  display: block;
  inline-size: 100%;
  min-block-size: 60dvh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #ffffff;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (forced-colors: active) {
  .site-nav a[aria-current="page"],
  .button,
  .badge {
    border: 1px solid CanvasText;
  }
}