/* 合格体験記の共有（2026-10-29 T12 担当C1・本人だけ 't-story-share'）。
   どの規則も、JS が札のある時だけ作る .tss（シート）・.tss-open（［共有する］）・.tss-has-open の下にしか当たらない（札が無い時は何も変わらない）。
   色は各ページの今のトークン（書く画面 --survey-*・:root の --g-miss／公開ページ --dst-*）だけ。ボタンは各ページの今のボタンの形をそのまま使う。 */
/* 色の札はシートが自分で持つ（シートは body の下に置くので、ページの中の札に頼らない）。
   書く画面（body.survey-page）は --survey-*（と :root の --g-miss）、公開ページ（body.dst-page）は --dst-* を使う。どちらも今ある札だけ（新しい色は無い） */
.tss{
  --tss-ink:var(--survey-text); --tss-muted:var(--survey-muted); --tss-line:var(--survey-border); --tss-control:var(--survey-control);
  --tss-accent:var(--survey-primary); --tss-on:var(--survey-surface); --tss-paper:var(--survey-surface); --tss-field:var(--survey-surface);
  --tss-focus:var(--survey-primary); --tss-warn:var(--survey-text); --tss-warn-line:var(--survey-primary); --tss-warn-bg:var(--survey-paper);
  --tss-over:var(--g-miss);
}
.dst-page .tss{
  --tss-ink:var(--dst-ink); --tss-muted:var(--dst-muted); --tss-line:var(--dst-line); --tss-control:var(--dst-brown2);
  --tss-accent:var(--dst-brown); --tss-on:var(--dst-on-color); --tss-paper:var(--dst-card); --tss-field:var(--dst-paper);
  --tss-focus:var(--dst-focus); --tss-warn:var(--dst-err-ink); --tss-warn-line:var(--dst-shu); --tss-warn-bg:var(--dst-paper);
  --tss-over:var(--dst-err-ink);
  font-family:var(--dst-font);
}
/* 書く画面の［共有する］（状態の行・自分の体験記の行）: 隣の［公開ページを開く］と同じ字の色（このページでは cloud-ui の色の札が無く、枠なしの字のボタンに見える） */
.survey-page .tss-open{color:var(--survey-primary)}
/* 下書きを保存した後: 知らせの文の終わりに続く字のボタン。押せる所は 44px のまま、上下の負の余白で行の高さを足さない */
.survey-page .tss-open--inline{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;padding:0 6px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;vertical-align:middle;cursor:pointer}
dialog.tss{box-sizing:border-box;width:min(520px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);margin:auto;padding:0;
  border:1px solid var(--tss-line);border-radius:16px;background:var(--tss-paper);color:var(--tss-ink);font:inherit;line-height:1.6;overflow:auto;overscroll-behavior:contain}
dialog.tss::backdrop{background:var(--tss-ink);opacity:.32}
.tss__in{display:grid;gap:10px;padding:14px 16px 16px}
.tss__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px -6px 0 0}
.tss__h{margin:0;font-size:var(--g-fs-title,22px);line-height:1.3;color:var(--tss-ink)}
.tss__x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tss-muted);cursor:pointer}
.tss__x:hover{color:var(--tss-ink)}
.tss__body{display:grid;gap:10px;min-width:0}
.tss__body[hidden],.tss__wait[hidden],.tss__warn[hidden]{display:none}
.tss__wait{margin:8px 0;color:var(--tss-muted)}
.tss__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tss__styles{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin:0;padding:0;border:0}
.tss__style{position:relative;display:inline-flex;flex:1 1 auto}
.tss__radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tss__style span{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:44px;padding:0 14px;border:1px solid var(--tss-control);border-radius:10px;
  background:var(--tss-field);color:var(--tss-ink);font-weight:700;white-space:nowrap}
.tss__radio:checked + span{border-color:var(--tss-accent);background:var(--tss-accent);color:var(--tss-on)}
.tss__radio:focus-visible + span{outline:3px solid var(--tss-focus);outline-offset:2px}
.tss__label{font-size:var(--g-fs-small,14px);font-weight:700;color:var(--tss-ink)}
.tss__text{box-sizing:border-box;display:block;width:100%;min-height:9.5em;margin:-4px 0 0;padding:10px 12px;border:1px solid var(--tss-control);border-radius:10px;
  background:var(--tss-field);color:var(--tss-ink);font:inherit;font-size:16px;line-height:1.6;resize:vertical}
.tss__text:focus-visible{outline:3px solid var(--tss-focus);outline-offset:1px}
.tss__meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:-4px 0 0;font-size:var(--g-fs-small,14px);color:var(--tss-muted)}
.tss__link{min-width:0;overflow-wrap:anywhere}
.tss__count{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tss-ink);white-space:nowrap}
.tss__count.is-over{color:var(--tss-over)}
.tss__check{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tss-ink);cursor:pointer}
.tss__check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--tss-accent)}
.tss__alerts{display:grid;gap:6px}
.tss__alerts:empty{display:none}
.tss__warn{margin:0;padding:6px 10px;border-left:4px solid var(--tss-warn-line);background:var(--tss-warn-bg);color:var(--tss-warn);font-size:var(--g-fs-small,14px);font-weight:700;overflow-wrap:anywhere}
.tss__acts{display:flex;flex-wrap:wrap;gap:8px}
.tss__acts .tss__btn{flex:1 1 120px;min-height:44px;min-width:0}
.tss__acts .tss__btn[data-role="tss-x"]{flex-basis:100%}
.tss__acts a.tss__btn[aria-disabled="true"]{opacity:.48;cursor:not-allowed}
.tss__status{min-height:1.4em;margin:-2px 0 0;font-size:var(--g-fs-small,14px);color:var(--tss-muted)}
.tss__undo{min-height:44px;margin:0;padding:0 8px;border:0;background:none;color:var(--tss-accent);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media (max-width:599px){
  dialog.tss{width:100%;max-width:100%;max-height:92%;margin:auto 0 0;border-bottom:0;border-radius:16px 16px 0 0}
}
@media (max-width:299px){
  .tss__in{padding:12px 10px 14px}
  .tss__style span{padding:0 8px}
  .tss__acts .tss__btn{flex-basis:100%}
}
/* 公開ページ: 「一覧へ戻る」の行の右に置く（高さを足さない）。せまい時は戻るの下に */
.dst-page--story .dst-story.tss-has-open{position:relative}
.dst-page--story .tss-open--story{position:absolute;top:-6px;right:0;z-index:1}
@media (max-width:359px){ .dst-page--story .tss-open--story{position:static;justify-self:start;margin:-6px 0 -4px} }