/* WHYの種の挑戦案1つの見た目（紙面 /d/ と課題の種のページ /issues/…）。描き方は /shared/idea.js。
   チップ（.chips・.chip）は紙面のほかの部品（論点のチップなど）も使う土台なので、ここに置く。
   使うページは site.css のあと・面の css の前に読む（面の css が上書きできるように）。 */
  .chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;}
  .chip{border:1px solid var(--line);background:var(--bg);border-radius:20px;
    padding:1px 9px;font-size:12.5px;color:var(--muted);}

  .idea.dim{opacity:.72;}
  .idea{background:var(--paper);border:1px solid #E6DCC6;border-radius:7px;
    padding:11px 12px;margin-bottom:8px;}
  .idea .lab{font-size:12.5px;font-weight:700;color:var(--terra);}
  .idea h5{font-size:14px;font-weight:700;line-height:1.55;margin:2px 0 6px;}
  .idea p{font-size:12.5px;line-height:1.85;}

  /* 「なぜやる価値があるのか」を案の本体として先に出す。how（作り方）は
     その下に畳む。以前は body（how）しか出しておらず、「〇〇する」という
     作業の説明だけが並んでいて、WHYの種という名前と中身が合っていなかった。 */
  .idea .why{font-size:13px;line-height:1.9;margin:0 0 2px;}
  .idea .rows{margin-top:8px;font-size:12.5px;line-height:1.75;}
  .idea .rows summary{cursor:pointer;font-weight:700;color:var(--moss);}
  .idea .rows dl{margin:7px 0 0;display:grid;grid-template-columns:max-content minmax(0,1fr);
    gap:4px 10px;}
  .idea .rows dt{color:var(--moss);font-weight:700;white-space:nowrap;}
  .idea .rows dd{margin:0;color:var(--ink);}

  /* おすすめ対象。案が誰に向いているかを最初に出す */
  .chip.aud{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
  /* 「いちばん近い」。断定の .aud と並んだとき別物だと分かるようにする ―
     塗りではなく破線の枠、色も控えめ。 */
  .chip.near{background:transparent;border-style:dashed;border-color:var(--teal-mid);
    color:var(--teal-mid);font-weight:600;}
  /* 動き方。誰向けか（.aud）とは別の情報なので、色の系統を分ける */
  .chip.move{background:var(--terra-soft);border-color:rgba(199,90,60,.35);color:#8c3f27;
    font-weight:600;}
  /* 案の本文に続けて「詳しく ▸」（改行と空白を挟まない）。開いたら下に表 */
  .idea .ilead{font-size:15px;line-height:1.85;margin:0;}
  /* 元にした広いニーズ（11/03〜）。きっかけの話題と案の橋渡し。本文より一段控えめに、文字は小さくしない */
  .idea .ineed{font-size:13.5px;line-height:1.7;margin:4px 0 6px;color:var(--ink);}
  .idea .ineed .nh{display:inline-block;font-size:12.5px;font-weight:700;color:var(--moss);margin-right:6px;}
  .idea .rows{display:inline;margin:0 0 0 6px;font-size:12.5px;}
  .idea .rows summary{display:inline;list-style:none;white-space:nowrap;}
  .idea .rows summary::-webkit-details-marker{display:none;}
  .idea .rows[open]{display:block;margin:6px 0 0;}