/**
 * 04-post.css — 投稿の 1 画面（写真 → キーワード → 3 案 → 投稿文 → 投稿 → 最近の投稿）
 * 値はすべて 01-variables.css のトークン。直書きしない（番人 S3）。ボタン・入力欄・箱・知らせは ui-kit の部品。
 */

/* --- お試しの帯（Instagram には出ない） --- */
.trial-bar {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--warning-dim);
  color: var(--warning);
  font-size: var(--font-sm);
  font-weight: 700;
  text-align: center;
}

/* --- 圏外の帯（押せない理由） --- */
.net-bar {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--danger-dim);
  color: var(--danger);
  font-size: var(--font-sm);
  font-weight: 700;
  text-align: center;
}

/* --- 手順のまとまり --- */
.step {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: var(--line-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.step-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--font-md);
  font-weight: 700;
}
.step-no {
  flex: none;
  width: var(--step-badge);
  height: var(--step-badge);
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-hint { margin: var(--sp-1) 0 0; color: var(--text-tertiary); font-size: var(--font-sm); }

/* --- 写真と切り抜き --- */
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}
/* 切り抜きの画用紙＝写真の全体と枠（描くのは photo.js の drawEditor）。縦長の写真でも操作のボタンが同じ画面に見えるよう、高さに上限（02 §1）。
   枠をつまむ間は画面を送らない（touch-action: none） */
.photo-frame canvas {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--crop-max-h);
  touch-action: none;
}
/* マウスの時、つまめる所で指の形を変える（post.js が data-grip に今の所を書く） */
.photo-frame canvas[data-grip="move"] { cursor: move; }
.photo-frame canvas[data-grip="n"], .photo-frame canvas[data-grip="s"] { cursor: ns-resize; }
.photo-frame canvas[data-grip="e"], .photo-frame canvas[data-grip="w"] { cursor: ew-resize; }
.photo-frame canvas[data-grip="nw"], .photo-frame canvas[data-grip="se"] { cursor: nwse-resize; }
.photo-frame canvas[data-grip="ne"], .photo-frame canvas[data-grip="sw"] { cursor: nesw-resize; }
.ratio-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 縦 4:5・正方形・横長・自由 */
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}
.ratio-seg button {
  min-height: var(--tap);
  border: var(--line-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
}
.ratio-seg button.is-on { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
/* 写真を変える・外す＝同じ幅で 2 つ並べる（形のボタンと同じ高さ・枠。主な操作ではないので塗らない） */
.photo-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
}
.btn-sub {
  min-height: var(--tap);
  border: var(--line-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
}
.btn-sub:active { background: var(--accent-dim); }
.btn-sub:disabled { opacity: .4; }   /* 端（1 倍・3 倍・±15°）では押せない＝消さずに薄く */

/* 拡大・傾き：「−｜見出しと今の値（押すと元に戻す）｜＋」を 2 列。上の形のボタンと同じ 3 等分＝縦の線が揃う */
.adjust { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.adjust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); align-items: center; }
.adjust-row .btn-sub { font-size: var(--font-lg); }
.adjust-value {
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.link-btn {
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
}

/* --- 何を伝える（目的・誰に向けて・書く人）＝押して選ぶ札。プルダウンにしない（スキル ui-pickers） --- */
.chip-group + .chip-group { margin-top: var(--sp-3); }
.chip-title { margin: 0 0 var(--sp-2); color: var(--text-secondary); font-size: var(--font-sm); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-sub { margin: var(--sp-2) 0 var(--sp-1); color: var(--text-tertiary); font-size: var(--font-sm); }   /* 書く人の中の「性別」「年代」 */
.chip-title + .chip-sub { margin-top: 0; }
.chip {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: var(--line-w) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
}
.chip.is-on { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }

/* 手順の中の主な操作（下書きを作る・投稿する）＝幅いっぱい（スマホで親指が届く・本文の幅が 640px までなので間延びしない） */
.btn-block { width: 100%; }
.step-hint + .btn-block { margin-top: var(--sp-3); }

/* --- 下書きの 3 案 --- */
.drafts { display: grid; gap: var(--sp-2); }
/* 案は「選ぶ欄」（label＋見えないラジオ）＝複数行の文を持つのでボタンにしない。選んだ物は枠がアクセント色 */
.draft input { position: absolute; opacity: 0; pointer-events: none; }
.draft:has(input:focus-visible) { outline: var(--line-w) solid var(--accent); outline-offset: var(--line-w); }
.draft {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: var(--sp-3);
  border: var(--line-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}
.draft:has(input:checked), .draft.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--line-w) var(--accent); }
.draft-label {
  display: inline-block;
  margin: 0 0 var(--sp-1);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: var(--font-sm);
  font-weight: 700;
}
.draft-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--draft-lines);
  overflow: hidden;
  white-space: pre-line;
  font-size: var(--font-sm);
  line-height: var(--line-body);
  /* 折るのは空白と句読点だけ（「#カク／テル」とハッシュタグが行の途中で割れた・SE で実測）。空白も句読点も無い長い語だけははみ出さずに折る */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.draft-text .tag { white-space: nowrap; }   /* ハッシュタグは 1 つずつ折らない（post.js の fillWithTags が包む） */

/* --- 投稿文 --- */
/* ui-kit の入力欄は 1 行の高さ（height）＝投稿文の欄だけ高さを外して 5〜6 行見せる（.field より強い指定） */
.field.caption-box { height: auto; min-height: var(--caption-min-h); resize: vertical; white-space: pre-wrap; }
.caption-meta {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-1) 0 var(--sp-3);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}
.caption-meta .is-over { color: var(--danger); font-weight: 700; }

/* --- 最近の投稿 --- */
.history { list-style: none; margin: 0; padding: 0; }
.history li {
  display: grid;
  grid-template-columns: var(--thumb) 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-top: var(--line-w) solid var(--border-subtle);
}
.history li:first-child { border-top: 0; }
.history li > div { min-width: 0; }   /* 文の頭を … で切るため（無いと行が横にはみ出す） */
.history img { width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: var(--radius-sm); }
.history-meta { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--font-sm); color: var(--text-tertiary); }
.history-text { margin: 0; font-size: var(--font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { padding: 0 var(--sp-2); border-radius: var(--radius-pill); font-weight: 700; }
.status-trial { background: var(--warning-dim); color: var(--warning); }
.status-posted { background: var(--accent-dim); color: var(--accent); }
.status-failed { background: var(--danger-dim); color: var(--danger); }

/* --- ヘッダーの右（店・ログアウト） --- */
.header-store { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--font-sm); color: var(--text-secondary); }
.header-store strong { color: var(--text-primary); white-space: nowrap; }