/* 道具の頁の見た目の磨き(2026-09-25)。文言は一字も変えない。
 * - 紹介ページと同じ紙・同じ色・同じ角に揃える(紹介ページで得た信頼を、道具に入った瞬間に途切れさせない)
 * - 小さすぎる字・薄すぎる字を、夜中にスマホで読める側へ(本文 12.5px 以上・断りも 4.5:1 以上)
 * - 動かさない。この頁は静かで速く
 * 読み込みは index.html の <style> の直後の1行だけ。ここを外せば、元の見た目に戻る。
 */

/* ── 色: 紹介ページと同じ錨ブルーと地に揃える ── */
:root{
  --bg:#0d1014; --panel:#11151b; --ink:#e7ebf0; --sub:#8e97a4;
  --anchor:#6f9fd4; --anchor-soft:#16202c;
  --field:#5b6574;            /* 入力欄の枠(地に対して 3:1 以上) */
}
html{background:var(--bg)}
body{background:transparent}

/* ── 素材: 刷られた海図の紙を、紹介ページより更に薄く敷く ── */
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg) url("chart-900.webp") center/cover no-repeat;opacity:.12}
@media (min-width:760px){ html::before{background-image:url("chart-1600.webp")} }

/* ── 1画面目(2026-09-29 2g): 紹介ページと同じ紙・同じ一線・同じ字組み。文言は一字も変えない ──
   ・紙は頁の下の一枚(上)と同じ画像を、見出しのまわりにだけ一段濃く重ねる(新しい素材・新しい通信なし)
   ・「消して、無かったことにする」に、紹介ページと同じ手描きの一線を一度だけ引く(CSS だけ・線の描画だけ)
   ・何も隠さない・遅らせない。ボタンは最初から押せる。「動きを減らす」の端末では最初から引いた状態 */
header{position:relative;padding:52px 0 10px}
/* 紙の層は横へ出さない(100vw はスクロールバーの分だけ頁を横にはみ出させた)。端は楕円でぼかして、切れ目を見せない */
header::before{content:"";position:absolute;z-index:-1;top:0;bottom:-24px;left:-18px;right:-18px;pointer-events:none;
  background:url("chart-900.webp") center top/cover no-repeat;opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 34%,#000 45%,transparent);
  mask-image:radial-gradient(ellipse 60% 62% at 50% 34%,#000 45%,transparent)}
@media (min-width:760px){ header::before{background-image:url("chart-1600.webp")} }
@media (min-width:1100px){ header::before{left:-40%;right:-40%} }
.kick{font-weight:600}
h1{font-size:clamp(20px,6.4vw,34px);font-weight:800;letter-spacing:.06em;line-height:1.35;margin:16px 0 10px;white-space:nowrap}
header .hr{width:120px;height:1px;margin:20px auto;opacity:1;background:linear-gradient(90deg,transparent,var(--anchor),transparent)}
header .lead.intro{font-size:14.5px;line-height:2.15;color:#c3cad3;max-width:34em;margin:0 auto}
.cross{position:relative;display:inline-block;white-space:nowrap;color:#9aa3af}
.strike{position:absolute;left:-2%;top:56%;width:104%;height:16px;transform:translateY(-50%);overflow:visible;pointer-events:none}
.strike path{fill:none;stroke:var(--anchor);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:tp-strike 1.15s cubic-bezier(.65,.05,.36,1) .45s forwards}
@keyframes tp-strike{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .strike path{animation:none;stroke-dashoffset:0} }
@media print{ .strike path{animation:none;stroke-dashoffset:0;stroke:#000} header::before{display:none} }
@media (forced-colors:active){ .strike path{animation:none;stroke-dashoffset:0;stroke:CanvasText} header::before{display:none} }

/* ── 角: 丸い積み木でなく、紹介ページと同じ鋭い角へ ── */
.card{border-radius:4px;background:rgba(17,21,27,.94)}
.hero,.btn{border-radius:3px}
input,textarea,.secret,.acode{border-radius:4px}

/* ── 見出しの折り返し: 語の途中で折らない ── */
header .lead br{display:none}
/* 固定の改行(br)で無理な位置に切らない。Chromium は文節で折る。それ以外は日本語の標準の折り返し
   (句読点・括弧だけで折る keep-all は、行末に「 が残り、長い句を途中で割ったので採らない) */
header .lead{text-wrap:balance}
@supports (word-break:auto-phrase){ header .lead{word-break:auto-phrase} }

/* ── 字の大きさ(12px 未満を無くす) ── */
.kick{font-size:12px;letter-spacing:.12em}
.herosub{font-size:12.5px}
.ct{font-size:12px}
label{font-size:13px}
.hint{font-size:12.5px;line-height:1.9}
.iseq{font-size:12px}
.imeta{font-size:12px}
.badge{font-size:12px;white-space:nowrap}
.ihash{font-size:12px;color:var(--sub)}
/* 証拠1件ごとの行: 狭い画面では折り返すが、札・リンク・日付の中では折らない(判子のような丸にならない) */
.imeta{flex-wrap:wrap;row-gap:2px}
.imeta a,.imeta span{white-space:nowrap}
.nw{white-space:nowrap}
.print-only{display:none}
/* 失敗の一行: 札の上でも読める赤(4.3:1 → 6.5:1) */
.msg{color:#d98277}
.stbody,.chk,.nolist{font-size:13px}
.fee span{font-size:12px}
.law{font-size:12.5px}

/* ── 足元の断り: 「当社にも開けない」「仲介しない」を、読める大きさ・濃さ・左寄せで ── */
.foot{text-align:left;font-size:12.5px;color:var(--sub);line-height:2.05;margin-top:28px}
.foot b{color:var(--ink)}

/* ── 入力欄: 枠が見えること、キーボードで今どこにいるか分かること ── */
input,textarea{border-color:var(--field)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--anchor);outline-offset:2px}
.btn:focus-visible,.hero:focus-visible,a:focus-visible{outline:2px solid #d3ab63;outline-offset:3px}

/* ── ファイル選択: 端末任せの小さな口を、押しやすい大きさに(ラベルの文言はそのまま) ── */
.file input,input[type=file]{font-size:13px;color:var(--sub);padding:10px}
input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:700;padding:11px 16px;margin-right:12px;
  border-radius:3px;border:1px solid var(--anchor);background:transparent;color:var(--anchor);cursor:pointer}

/* ── 紹介ページへの入口(2026-09-29): 紹介ページと同じ錨の色・細い枠・角。主ボタンより軽く、動かさない ── */
.about-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;padding:9px 16px;
  border:1px solid var(--anchor);border-radius:3px;background:transparent;color:var(--anchor);
  font-size:13px;font-weight:600;text-decoration:none}
.about-link .ar{font-family:ui-monospace,Menlo,Consolas,monospace}
@media print{ .about-link{display:none!important} }

/* ── 押せる範囲: 行の中の小さなリンクを、指で押せる高さに ── */
.hint a,.imeta a,.inote a{display:inline-block;padding:11px 0;margin:-11px 0}
.publink{padding:11px 16px}
.c-del a,.c-fil a{display:inline-block;padding:12px 0}

/* ── 取り返しのつく操作ほど軽く: 「全部消す」は文字のリンクの重さに ── */
#forgetAllBtn{background:none!important;border:none!important;color:var(--sub)!important;font-weight:400;
  text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* ── 処理中の一行: 失敗の赤で出さない(中立の色と小さな回転)。失敗した時だけ赤に戻る ── */
.msg.busy{color:var(--sub)}
.msg.busy:empty::before{display:none}
.msg.busy::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.12em;
  border:2px solid var(--sub);border-right-color:transparent;border-radius:50%;animation:tp-spin .8s linear infinite}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .msg.busy::before{animation:none} }

/* ── 取り返しのつかない操作は、主ボタンと同じ青にしない ── */
.btn.danger{background:transparent;border-color:var(--bad);color:#e6b9b3}

/* ── 印刷 = 相談先に渡す紙(証拠パック)。載せるのは事案と証拠の一覧と足元の断りだけ、黒い字で ──
   入力欄・ボタン・三つの段・削除・償いの札は紙に出さない。検証の URL は文字で紙に出す(以前はリンクの字だけで URL が紙に無かった)。
   足元の断り(仲介・あっせんをしない 等)は紙にも必ず残す。 */
@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff!important;color:#000!important}
  html::before,.toast,header .hero,header .herosub,header .lead,header .hr,#stat,.backlink,#forgetAllBtn,
  .c-add,.c-exp,.c-del,.c-guide,.c-fil:not(.c-filed),.atone,.btn,.file,input,textarea,label,.msg,.said{display:none!important}
  header{padding:0 0 4px;text-align:left}
  h1{font-size:18px;margin:4px 0 2px}
  .kick,h1,.ct,.hint,.off,.iseq,.iurl,.inote,.ihash,.imeta,.imeta a,.imeta span,.foot,.foot b{color:#000!important}
  .card{background:#fff!important;border:1px solid #888!important;border-radius:0;padding:10px 12px;margin:8px 0}
  .item{break-inside:avoid;border-top:1px solid #bbb}
  .iurl{font-size:12px}
  .ihash{font-size:10px}
  .badge{background:none!important;color:#000!important;border:1px solid #000}
  .imeta{flex-wrap:wrap;gap:6px 12px}
  .imeta a[href]::after{content:" " attr(href);font-size:9.5px;word-break:break-all}
  .imeta a{white-space:normal!important}   /* 紙では検証 URL を折り返す(64桁の証跡が紙の右端で切れていた・critic B r2 #1) */
  header .lead.print-only{display:block!important;color:#000!important;text-align:left;font-size:10.5px!important;margin-top:2px!important}
  header .lead.print-only br{display:inline}   /* 断りと運営を紙では2行に(画面用の br 非表示を、ここだけ戻す) */
  .c-opens{display:none!important}
  .c-id{display:none!important}
  .backlink.op-line{display:block!important;text-align:left;color:#000!important;font-size:10.5px;margin-top:6px}
  .c-filed a{color:#000!important}
  .c-filed a[href]::after{content:" " attr(href);font-size:9.5px;word-break:break-all}
  .foot{font-size:10.5px;margin-top:10px;line-height:1.8;break-inside:avoid}
  /* 紙の表題の下に「賞金で誰かを狩るサービスではありません」を残す(表題だけが紙に載らないように) */
  header .lead.bounty-note{display:block!important;color:#000!important;text-align:left;font-size:10.5px!important;margin-top:2px!important}
}