/* ============================================================
   YoDoc — สไตล์ที่ใช้ร่วมกันทั้ง 7 หน้า
   (แยกออกมาจากหน้า HTML เพื่อไม่ให้แต่ละหน้ายาวเกินเพดาน 400 บรรทัด)
   ============================================================ */

:root{ --accent:#4263eb; --accent-soft:#eef1fe; --accent-2:#7048e8; }
.btn-primary{ background:var(--accent); box-shadow:0 6px 16px rgba(66,99,235,.3); }

/* ---------- การ์ดบทบาทหน้าแรก ---------- */
.roles{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.role{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:.18s; position:relative; overflow:hidden; }
.role::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:var(--c); }
.role:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.role .ic{ width:50px;height:50px;border-radius:14px; display:grid; place-items:center; font-size:25px;
  background:color-mix(in srgb, var(--c) 14%, #fff); margin-bottom:12px; }
.role h3{ font-size:16px; } .role p{ font-size:13.5px; color:var(--ink-2); margin-top:8px; flex:1; }
.role .who{ font-size:12.5px; color:var(--c); font-weight:600; margin-top:10px; }

/* ---------- แถวหนังสือ ---------- */
.drow{ border:1px solid var(--border); border-radius:15px; background:#fff; padding:15px 16px;
  border-inline-start:5px solid var(--c,var(--accent)); box-shadow:var(--shadow); }
.drow + .drow{ margin-top:11px; }
.drow.late{ background:#fff6f6; border-color:#f3c3c3; }
.drow .no{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
.drow h3{ font-size:15px; margin:5px 0 0; line-height:1.5; }
.drow .meta{ font-size:12.5px; color:var(--ink-3); margin-top:6px; line-height:1.9; }
.drow .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; align-items:center; }
.drow .acts{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.drow .order{ font-size:13px; background:var(--accent-soft); border-radius:10px; padding:9px 12px; margin-top:10px; }
.drow .warn{ font-size:12.5px; background:var(--danger-bg); color:var(--danger); border-radius:10px;
  padding:8px 12px; margin-top:9px; font-weight:600; }

/* ---------- เส้นทางเดินหนังสือ ---------- */
.trail{ position:relative; padding-inline-start:22px; margin:0; list-style:none; }
.trail::before{ content:""; position:absolute; inset-block:6px; inset-inline-start:5px; width:2px; background:var(--border); }
.trail li{ position:relative; padding-block:8px; }
.trail li::before{ content:""; position:absolute; inset-inline-start:-21px; inset-block-start:14px;
  width:11px; height:11px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 2px var(--accent-soft); }
.trail li:last-child::before{ background:var(--ok); box-shadow:0 0 0 2px var(--ok-bg); }
.trail b{ font-size:13.5px; } .trail .w{ font-size:12.5px; color:var(--ink-3); display:block; margin-top:2px; }

/* ---------- ฟอร์ม ---------- */
.fgrid{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.fgrid .full{ grid-column:1/-1; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pills label{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:13px; cursor:pointer; background:#fff; }
.pills input{ accent-color:var(--accent); margin:0; }
.pills label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
.files{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.files span{ font-size:12.5px; background:var(--surface-2); border-radius:8px; padding:5px 10px; }

/* ---------- หนังสือเวียน ---------- */
.acks{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.acks span{ font-size:12.5px; border-radius:9px; padding:6px 11px; background:var(--surface-2); color:var(--ink-3); }
.acks span.on{ background:var(--ok-bg); color:var(--ok); font-weight:600; }
.progbar{ height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden; margin-top:10px; }
.progbar i{ display:block; height:100%; background:var(--ok); }

/* ---------- จอแคบ ---------- */
@media(max-width:520px){
  .drow{ padding:13px 14px; }
  .drow .acts .btn{ flex:1 1 auto; }
}