/* ============================================================
   codudo 後台 admin.css
   安靜的工具頁：黑底、細線、○• 開關。不放背景的墨 —— 這裡是做事的地方。
   守 DESIGN.md 第 2 章：顏色、字級只用 codudo.css 的變數；圓角只有 0 或 var(--r)；切版用 1px 細線
   ============================================================ */
.ink-ad{min-height:100vh;min-height:100svh;background:var(--ink-0);color:var(--paper);font-family:var(--f-sans)}
.ink-ad [hidden]{display:none!important}

.ink-ad-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:18px 32px;border-bottom:1px solid var(--line)}
.ink-ad-top .l{display:flex;align-items:center;gap:var(--s2);min-width:0}
.ink-ad-top .ink-tag{margin:0}

.ink-ad-main{width:min(760px,100%);margin:0 auto;padding:var(--s5) 32px var(--s6)}
.ink-ad-screen > .ink-h2{max-width:none;margin-bottom:var(--s3)}
.ink-ad-screen > .ink-h2:focus{outline:none}
.ink-ad-lead{font-size:var(--t-lead);line-height:1.6;color:var(--paper-60);margin-bottom:var(--s3)}
.ink-ad-lead b{color:var(--paper);font-weight:600;overflow-wrap:anywhere}

/* 讀取中：標誌的點嘟嘟跳（logo.css 的 is-working） */
.ink-ad-busy{display:flex;align-items:center;gap:16px;min-height:40vh;color:var(--paper-60);font-size:var(--t-body)}

/* 一個主題一段，段與段之間一條細線 */
.ink-ad-sec{border-top:1px solid var(--line);padding:var(--s4) 0}
.ink-ad-sec h2{font-family:var(--f-serif);font-size:var(--t-h3);font-weight:700;line-height:1.5;color:var(--paper-60)}
.ink-ad-sec h2 b{font-weight:900;color:var(--paper)}

.ink-ad-field{display:block;margin-top:var(--s3)}
.ink-ad-field > span{display:block;margin-bottom:6px;font-size:var(--t-body);color:var(--paper-60)}
.ink-ad-input{display:block;width:100%;min-height:56px;padding:12px 0;background:none;border:0;
  border-bottom:1px solid var(--line-30);border-radius:0;outline:0;color:var(--paper);
  font-family:var(--f-sans);font-size:var(--t-lead)}
.ink-ad-input.is-mono{font-family:var(--f-mono);font-size:var(--t-body)}
.ink-ad-input:focus{border-bottom-color:var(--paper)}
.ink-ad-input::placeholder{color:var(--paper-35)}
.ink-ad-hint{margin-top:8px;font-size:var(--t-body);color:var(--paper-60)}

.ink-ad-state{display:flex;flex-wrap:wrap;align-items:center;gap:12px var(--s2);margin-top:var(--s3);font-size:var(--t-lead)}
.ink-ad-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--s3)}
.ink-ad-row .ink-btn{min-height:56px}
.ink-ad-msg{min-height:1.5em;margin-top:12px;font-size:var(--t-body);color:var(--paper-60)}
.ink-ad-msg.is-bad{color:var(--paper)}            /* 出錯用白字強調，不換顏色 */
.ink-ad-link{background:none;border:0;padding:8px 0;min-height:44px;color:var(--paper-60);font-family:var(--f-sans);
  font-size:var(--t-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ink-ad-link:hover{color:var(--paper)}

/* 開關：○ 是關、○• 是開（標誌的點落下來） */
.ink-ad-toggle{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 24px 0 18px;
  border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--paper);
  font-family:var(--f-sans);font-size:var(--t-body);cursor:pointer}
.ink-ad-toggle:hover{background:var(--hover)}
.ink-ad-toggle .m{position:relative;display:block;width:30px;height:24px;flex:none}
.ink-ad-toggle .m::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  border:2px solid var(--paper-35);border-radius:var(--r);box-sizing:border-box}
.ink-ad-toggle .m::after{content:"";position:absolute;right:0;bottom:1px;width:6px;height:6px;border-radius:var(--r);
  background:var(--paper);transform:scale(0);transform-origin:50% 100%;transition:transform .2s var(--ease)}
.ink-ad-toggle[aria-pressed="true"] .m::before{border-color:var(--paper)}
.ink-ad-toggle[aria-pressed="true"] .m::after{transform:none}

.ink-ad-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px var(--s3);margin-top:var(--s3);font-size:var(--t-body)}
.ink-ad-dl dt{color:var(--paper-60)}
.ink-ad-dl dd{margin:0;color:var(--paper);overflow-wrap:anywhere}

button[aria-busy="true"]{opacity:.5;cursor:progress}

@media (max-width:560px){
  .ink-ad-top{padding:14px 16px}
  .ink-ad-main{padding:var(--s4) 16px var(--s5)}
  .ink-ad-row .ink-btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ink-ad-toggle .m::after{transition:none}
}