/* 網誌內頁對 2012 原始樣式的「刻意偏離」層
 * ---------------------------------------------------------------------------
 * 載入順序：wretch2012-blog.css（原站原檔：top → 版型 skin117 → sharing → font
 *           → trackback → kukubar）→ wretch2012-chrome-site.css → 本檔
 *           → 使用者自訂 CSS（<style>，永遠最後）。
 * 這支手寫，不是 tools/build-css2012.mjs 產的，改了不會被蓋掉。
 *
 * 每一條都是**明知與原站不同、而且是故意的**，並附上理由。
 * 數值能沿用原檔的就照抄原檔，不自己發明。
 */

/* --- 1. 原站用 JS 送出的東西，本站用 <form> --------------------------------
 * 推薦(推)、收藏(收)、發文(引用)、刪除、板主回覆、加好友——原站這些都是
 * href="javascript:void(0)" 加 AJAX。本站沒有那些端點，一律走 POST 表單，
 * 所以節點從 <a> 變成 <button>。外觀數值逐條沿用原檔，讓它看起來一模一樣。
 */

/* 1a. #push 的「推」「收」——數值抄自 font.css 的 html #push a 那一組
 *
 * ⚠ box-sizing 一定要寫。原檔那組數值是給 <a>（預設 content-box）算的：
 * width:24 + padding-left:12 + border:2 = 實際 38×21，兩顆並排剛好塞進 81px 的 #push。
 * <button> 在瀏覽器的 UA 樣式表是 border-box，同一組數值只會得到 24×19，
 * 內容區只剩 10px，「推」「收」兩個字會滿出邊框，右邊那顆還會蓋住左邊那顆
 * （未登入時「收」是 <a>＝38px，「推」是 <button>＝24px，兩顆一寬一窄更明顯）。
 */
#content #push form { display: inline; float: left; margin: 0; padding: 0; }
html #content #push button {
  display: block; box-sizing: content-box; width: 24px; height: 19px; float: left;
  border: 1px solid #aaa; text-decoration: none; color: #777;
  font-size: 13px; font-family: georgia; line-height: 19px;
  margin: 0 0 0 1px; padding: 0 0 0 12px;
  background-color: transparent; cursor: pointer;
}
html #content #push button.push { background: url(/img/wretch2012/blog/push.gif) no-repeat center; }
html #content #push button.pull { background: url(/img/wretch2012/blog/pull.gif) no-repeat center; }
html #content #push button.push:hover { color: #09c; border-color: #1A84B7; }
html #content #push button.pull:hover { color: #f09; border-color: #e2669e; }
html > body #content #push button.push { margin: 0 0 0 2px; }

/* 1b. 分享列的「發文」——數值抄自 sharing.css 的 .wretch-reblog .bd a.wretch
 * 同 1a：原檔的 height:28 是 <a> 的內容高，加 border 之後量到 30px。
 * <button> 預設 border-box，不補這一行就只有 28px，登入後那顆「發文」
 * 會比旁邊的 Facebook／Plurk 矮 2px，整條分享列底線對不齊。 */
.wretch-reblog .bd form { display: inline; float: left; margin: 0; padding: 0; }
.wretch-reblog .bd button.wretch {
  box-sizing: content-box;
  height: 28px; line-height: 28px; display: inline-block;
  font-family: arial; font-size: 12px;
  /* 原檔只給 padding-left:24px，右邊那 5px 是 .bubble-none .wretch 在
     「沒有泡泡」時才補的。這裡本來寫死 padding:0 5px 0 24px，有泡泡時
     就比隔壁 <a> 版本寬 5px，登入前後分享列長度會跳動。
     四邊都要寫出來：<button> 的 UA 樣式帶 padding:1px 6px，
     只寫 padding-left 的話上下各多 1px、右邊多 6px（實測變成 86×32）。 */
  padding: 0 0 0 24px; text-decoration: none; margin: 0; float: left;
  color: #666; border: 1px solid #e3e3e3; border-radius: 0 3px 3px 0;
  background: url(/img/wretch2012/chrome/ico_wretch.png) no-repeat 7px 8px;
  background-color: #fff; vertical-align: top; cursor: pointer;
}
.wretch-reblog .bd button.wretch:hover { border: 1px solid #bfbfbf; background-color: #f8f8f8; }
/* 沒有泡泡時右邊補 5px——原檔的 .wretch-reblog .bubble-none .wretch 就是幹這個，
   但上面那條的權重比它高，所以要在同樣的權重上再寫一次給 <button> 版本。 */
.wretch-reblog .bd.bubble-none button.wretch { padding-right: 5px; }

/* 1c. .posted 與迴響列裡的表單鈕：長得像文字連結（#content a 的顏色） */
.posted form, .comments-post form, .w2b-owner form { display: inline; margin: 0; padding: 0; }
.posted button, .comments-post button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: #547F8F; text-decoration: none;
}
.posted button:hover, .comments-post button:hover { color: #2B5D70; }

/* 1d. 側欄的表單鈕（加好友）：數值抄自版型的 #links a 那一組
 * （#links a 是 width:173 + padding 5/10 = 188，button 用 box-sizing 湊同一個外框） */
#links form { margin: 0; padding: 0; }
#links button.mySpaceLink {
  display: block; width: 188px; box-sizing: border-box; text-align: left;
  color: #728A3E; background: #e5e5e5; border: 0; border-bottom: 1px solid #eee;
  font-size: 12px; font-family: inherit; padding: 2px 5px 2px 10px; cursor: pointer;
}
#links button.mySpaceLink:hover { color: #4381A1; background: #fff; }

/* --- 2. 迴響內文保留換行 ---------------------------------------------------
 * 原站把迴響內容存成含 <br /> 的 HTML。本站的迴響一律走 <%= %> 轉義輸出
 * （硬性規則：使用者輸入不進 <%- %>），換行只能靠 CSS 還原。
 */
.comments-body ul li.comments-word p { white-space: pre-wrap; }
.comments-author li p { white-space: pre-wrap; }

/* --- 2b. 文章內的圖片不准撐破 490px 的內文欄 -------------------------------
 * 「插入自己的照片」與 [img]網址[/img] 產生的是 <img class="inpost">，
 * 原尺寸直接輸出。站上的照片是 640px 寬，內文欄只有 490px（#content 530 − padding），
 * 實測會一路長到 x=925，蓋掉 x=815 開始的 #links 側欄——那是肉眼可見的跑版。
 *
 * 原站沒有這條（2012 年貼大圖一樣會爆版），這是**刻意偏離**：
 * 復刻的是版面，不是那個年代的 bug。等比縮放只動寬高，版型其他數值不受影響。
 * （public/style.css 早就有同一條，但 2012 版的網誌頁沒載那支。）
 */
#content .innertext img.inpost { max-width: 100%; height: auto; }

/* --- 3. 分頁列的間距 -------------------------------------------------------
 * 原站的 .list-linkcontrol / .comments-linkcontrol 完全沒有 CSS，
 * 每個 <span> 之間只靠原始碼裡的換行產生一個空白。本站的樣板也照那樣換行，
 * 這裡只多給一點呼吸空間，避免中文的「上一頁 1 2 下一頁」擠在一起。
 */
.list-linkcontrol { padding: 6px 0; }
.list-linkcontrol span { margin-right: 6px; }
.list-linkcontrol span.current { font-weight: bold; }

/* --- 4. 原站查無存檔、只能自己補的頁面元素 --------------------------------
 * spec/blog.md 第 11 節列了幾樣「查無」：站長登入後的編輯／刪除鈕、
 * 發文頁、零迴響空狀態。下面這幾條就是補那些，做法是沿用文章卡片既有的
 * 底色（#ddd / #eee）與字級，不引進新的視覺語言。
 */
.w2b-owner { padding: 6px 0; text-align: right; }
.w2b-err   { color: #C00; }

/* flash 訊息：原站沒有這種東西（它用整頁跳轉的提示頁），
 * 本站沿用既有的 flash 機制，做成貼近 2012 的淡黃提示條，擺在 banner 下方。 */
.w2b-flash {
  margin: -10px 0 10px; padding: 6px 10px;
  background: #FFFBE6; border: 1px solid #F0DFA0; color: #6B5A18;
}

/* 發表／編輯文章的表單（原站的 post.php 查無） */
.w2b-form { border-collapse: collapse; width: 100%; }
.w2b-form th {
  width: 76px; text-align: right; vertical-align: top;
  padding: 5px 8px 5px 0; font-weight: normal; color: #555; line-height: 20px;
}
.w2b-form td { padding: 5px 0; }
.w2b-form input[type=text], .w2b-form input:not([type]), .w2b-form select, .w2b-form textarea {
  font-family: inherit; font-size: 12px; border: 1px solid #bbb; background: #fff; padding: 2px 4px;
}
.w2b-form textarea { width: 96%; }
.w2b-hint { display: block; color: #666; font-size: 10px; margin-top: 3px; }
.edtools { margin-bottom: 4px; }
.edtools button {
  font: 12px inherit; padding: 1px 6px; margin: 0 3px 3px 0;
  border: 1px solid #bbb; background: #f4f4f4; cursor: pointer;
}
.edtools button:hover { background: #fff; border-color: #547F8F; }
.edtools button.emo { font-size: 14px; padding: 0 4px; }
.photopick { max-height: 150px; overflow: auto; background: #fff; border: 1px solid #ddd; padding: 3px; }
.photopick a { display: inline-block; margin: 2px; }
.photopick img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #ccc; }

/* 引用網址那一列：原站的 input 沒設寬度，在 300px 的迴響區裡會撐破 */
.trackback-url input[type=text] { width: 96%; font-size: 10px; }

/* --- 5. 窄視窗補丁（只在 1000px 以下生效） --------------------------------
 * public/wretch2012-rwd.css 把 #container1 / #banner / #links 這些寫死 px 寬的
 * 容器都收成 max-width:100% 了，唯獨漏掉版型自己的
 *   #description2 .description{display:block;width:730px;...}
 * 那條（skin117 原檔第 37 行，wretch2012-blog.css 是產生檔不能手改）。
 * 730px 比 375px 的視窗寬一倍，實測整個網誌家族每一頁在 375px 都被它撐出
 * 橫向捲軸（scrollWidth 750 > 視窗 375），banner 以外的內容全部被推歪。
 *
 * 斷點與 rwd.css 同樣取 999px：1000px 以上一條都不生效，
 * 桌機量到的 730px 與原站逐像素相同，fidelity 與幾何量測不受影響。
 * height:60px 不動——那是版型刻意留的高度，overflow:auto 本來就會自己捲。
 */
@media (max-width: 999px) {
  #description2 .description { width: auto; max-width: 100%; }
}

/* --- 誰來收藏 -------------------------------------------------------------
 * 樣式**不在這裡**：原站有專屬的 friend_picker.css，已經加進
 * tools/build-css2012.mjs 的 wretch2012-blog.css bundle 裡了。
 * 這裡只補兩條原站靠 JS 補的：關閉鈕的外觀，以及格子裡的名字要能換行。
 */
#friend-picker-closebtn { float: right; margin-right: 6px; color: #666;
                          text-decoration: none; font-size: 14px; line-height: 18px; }
.friend-picker-cell #label { display: block; font-size: 11px; word-break: break-all; }

/* --- 看地圖 ---------------------------------------------------------------
 * 零存檔（只有 WRETCH_SPEC.md 兩行文字轉寫），整頁自製。
 * 配色沿用 skin117 既有色盤，不新增視覺語言。
 */
.w2b-map-note    { color: #666; font-size: 11px; }
.w2b-map-group   { margin: 0 0 18px; }
.w2b-map-place   { margin: 0 0 6px; padding: 3px 0; font-size: 13px; font-weight: bold;
                   border-bottom: 1px solid #ddd; }
.w2b-map-albums  { margin: 0 0 8px; padding: 0; list-style: none; }
.w2b-map-albums li { display: inline-block; width: 76px; margin: 0 6px 6px 0;
                     text-align: center; font-size: 11px; vertical-align: top; }
.w2b-map-albums img { border: 1px solid #ddd; }

/* 「誰來收藏」彈窗在窄螢幕：原版 friend_picker.css 給它寫死 405px 寬。
 * 它平常是 visibility:hidden，但 **hidden 仍然佔位、仍然撐出捲動寬度**，
 * 於是手機版的文章頁莫名其妙多出 17px 的橫向捲軸。
 * 只在窄螢幕放開寬度；桌機維持原版尺寸不動。
 * ⚠ 不要去改 public/wretch2012-blog.css——那支是 build 產生的原檔逐字複製。
 */
@media (max-width: 999px) {
  #friend-picker { width: auto !important; max-width: 100%; }
}

/* 站長在文章頁工具列上切換「精選」的那顆鈕。
   POST /admin/feature/:kind/:id 這支路由一直都在，但唯一的入口是管理後台
   那個要自己輸入編號的表單——站長逛到一篇想精選的文章，得先記住網址結尾的
   數字、回後台、再貼進去。這裡把它做成工具列上的一個連結。
   必須是 <form>（有副作用的動作不能用 GET 連結），但外觀要跟旁邊的
   「收藏」「檢舉」一致，所以把 form 與 button 都去殼。
   相簿頁那一顆同樣的東西在 wretch2012-album-in.css 的 .w2a-linkbtn。 */
.w2-inline-form { display: inline; margin: 0; padding: 0; border: 0; }
.w2-linkbtn {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.w2-linkbtn:hover { text-decoration: underline; }