/* セルフアドボカシー（チェックリスト）ページ：ホーム画面（home.css）と同じ見た目にする
   画面の見た目だけを変える。印刷（PDFにする）の見た目は、ページの中の @media print のまま。 */

@media screen {
  body.sa { background-color: var(--paper); }

  /* ---------- アルビーの説明 ---------- */
  .sa-hero { grid-template-columns: 220px 1fr; align-items: center; margin-top: 18px; }
  .sa-hero .alby::before { bottom: 2px; }
  .sa-hero .bubble { margin-bottom: 0; }
  .sa-hero .bubble h1 { font-size: 36px; }
  .howto { margin: 12px 0 0; padding-left: 1.6em; font-size: 16px; line-height: 1.7; }
  .howto li { margin-top: 4px; padding-left: 4px; }
  .howto li::marker { font-family: var(--display); font-weight: 900; color: var(--mint-deep); }
  .howto-note { margin-top: 12px !important; padding: 8px 14px; border-radius: 12px; background: #FFEBD9; font-size: 15px; }

  /* ---------- 中身の幅 ---------- */
  body.sa .container { max-width: 1040px; padding: 28px 24px 56px; }

  /* ---------- カード（ワッペン風） ---------- */
  body.sa .card {
    position: relative; background: #fff; border: 3px solid var(--navy); border-radius: 22px;
    box-shadow: 7px 7px 0 var(--c, var(--mint)); padding: 22px 24px; margin-bottom: 30px;
  }
  body.sa .card::after {
    content: ""; position: absolute; inset: 7px; border: 2px dashed var(--cd, var(--mint-deep));
    border-radius: 15px; opacity: .4; pointer-events: none;
  }
  body.sa .card-title { font-family: var(--display); font-weight: 900; font-size: 24px; color: var(--navy); margin-bottom: 6px; font-feature-settings: "palt"; }

  /* ---------- 点数の枠 ---------- */
  .scoreboard { --c: var(--sun); --cd: #9A7108; }
  .tab-bar { border-bottom: none; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; position: relative; z-index: 1; }
  .tab-btn {
    padding: 8px 20px; border: 2px solid var(--navy); border-radius: 999px; margin: 0; background: #fff;
    font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy);
  }
  .tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .tab-btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }
  .score-pts { font-family: var(--display); font-weight: 900; font-size: 56px; color: var(--navy); }
  .score-denom { font-size: 18px; color: var(--ink-soft); }
  .score-pct { font-size: 16px; color: var(--ink-soft); }
  .score-bar-bg { height: 18px; background: #EEF2F0; border: 2px solid var(--navy); border-radius: 999px; max-width: 560px; margin: 10px auto 8px; }
  .score-bar-fill, .score-bar-fill.warn, .score-bar-fill.danger { border-radius: 999px; }
  .score-bar-fill { background: var(--mint-deep); }
  .score-bar-fill.warn { background: var(--sun); }
  .score-bar-fill.danger { background: var(--orange); }
  .badge { font-family: var(--display); font-weight: 700; font-size: 16px; padding: 4px 16px; border-width: 2px; }
  .save-area { position: relative; z-index: 1; gap: 10px; margin-top: 14px; }
  body.sa .btn { border-radius: 999px; font-weight: 700; font-size: 15px; padding: 8px 18px; }
  body.sa .btn-primary { background: var(--navy); color: #fff; }
  body.sa .btn-primary:hover:not(:disabled) { background: #2C3B72; }
  body.sa .btn-outline { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
  body.sa .btn-outline:hover:not(:disabled) { background: #E7F7EF; color: var(--navy); }
  body.sa .btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }

  /* ---------- 実施日 ---------- */
  .impl-date-card {
    background: #fff; border: 3px solid var(--navy); border-radius: 999px; padding: 10px 22px; margin: -6px 0 30px;
    width: fit-content; gap: 12px;
  }
  .impl-date-label { font-family: var(--display); font-weight: 900; font-size: 17px; color: var(--navy); }
  .impl-date-input { font-size: 16px; padding: 6px 10px; border: 2px solid var(--navy); border-radius: 10px; color: var(--navy); }

  /* ---------- A〜E のまとまり ---------- */
  #checklist-content > .cat-section:nth-child(5n+1) { --c: var(--mint);   --cd: var(--mint-deep); --tint: #E7F7EF; }
  #checklist-content > .cat-section:nth-child(5n+2) { --c: var(--sun);    --cd: #9A7108;          --tint: #FFF5D9; }
  #checklist-content > .cat-section:nth-child(5n+3) { --c: var(--orange); --cd: #B0560F;          --tint: #FFEBD9; }
  #checklist-content > .cat-section:nth-child(5n+4) { --c: var(--sky);    --cd: #2F5FA8;          --tint: #E8F0FD; }
  #checklist-content > .cat-section:nth-child(5n+5) { --c: #C9B6F2;       --cd: #6A4FB0;          --tint: #F1ECFC; }
  .cat-header {
    position: relative; z-index: 1; background: none; padding: 0; margin: 0 0 8px; color: var(--navy);
    font-family: var(--display); font-weight: 900; font-size: 26px; font-feature-settings: "palt";
  }
  .topic-header {
    position: relative; z-index: 1; background: none; border-left: 6px solid var(--c); border-radius: 0;
    padding: 2px 0 2px 12px; margin: 18px 0 8px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--navy);
  }
  .item-row {
    position: relative; z-index: 1; background: var(--tint); border: 2px solid transparent; border-radius: 14px;
    padding: 14px 16px; margin-bottom: 10px;
  }
  .item-text { font-size: 16px; line-height: 1.7; color: var(--navy); margin-bottom: 10px; }
  .item-controls { gap: 8px; }
  .score-btn {
    padding: 7px 14px; border-radius: 999px; border: 2px solid var(--navy); background: #fff; color: var(--navy);
    font-size: 15px; font-weight: 700;
  }
  .score-btn:hover { background: #fff; border-color: var(--navy); box-shadow: 0 3px 0 var(--navy); }
  .score-btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 2px; }
  .score-btn.act2 { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff; }
  .score-btn.act1 { background: var(--sun); border-color: #9A7108; color: var(--navy); }
  .score-btn.act0 { background: #FFD9BF; border-color: #B0560F; color: #7A3A07; }
  .score-btn.actna { background: #EEF0F4; border-color: #8A91A8; border-style: dashed; color: var(--ink-soft); font-style: normal; }

  /* ---------- 学習ワークシートの枠 ---------- */
  .item-row.has-ws { gap: 14px; }
  .ws-box { flex: 0 0 220px; background: #fff; border: 2px solid var(--navy); border-radius: 14px; padding: 10px 12px; gap: 7px; }
  .ws-box.ws-recommend { border-color: #B0560F; background: #FFF6EE; box-shadow: 4px 4px 0 var(--orange); }
  .ws-head { font-size: 14px; color: var(--navy); }
  .ws-recommend .ws-head { color: #8A3F06; }
  .ws-badge {
    font-size: 12px; font-family: var(--display); font-weight: 900; color: var(--shu); background: #fff;
    border: 2px solid var(--shu); border-radius: 999px; padding: 0 8px; transform: rotate(-6deg);
  }
  .ws-title { font-size: 13px; color: var(--ink-soft); }
  .ws-btn { border-radius: 999px; padding: 7px 10px; font-size: 14px; background: var(--mint-deep); color: #fff; }
  .ws-btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 2px; }
  .ws-guide { background: #fff; color: var(--mint-deep); border: 2px solid var(--mint-deep); }
  .ws-guide.locked { background: #FFF5D9; color: #6E5106; border-color: #9A7108; }
  .ws-teacher { background: #fff; color: var(--ink-soft); border: 1.5px solid #B8BECF; font-size: 12px; padding: 4px 8px; }

  /* ---------- 成長のきろく・アドバイス ---------- */
  .history-card { --c: var(--sky); --cd: #2F5FA8; }
  .guidance-box { --c: var(--orange); --cd: #B0560F; }
  #history-body, #guidance-list, .history-card > p, .guidance-box > p { position: relative; z-index: 1; }
  #history-body [style*="linear-gradient"] { background: var(--mint-deep) !important; }
  .guidance-card { background: #FFF5D9; border: 2px solid #E8C770; border-radius: 12px; padding: 12px 14px; }
  .guidance-title { font-size: 15px; color: var(--navy); }
  .guidance-text { font-size: 14px; color: var(--ink-soft); }

  body.sa .toast { border-radius: 999px; background: var(--navy); font-weight: 700; }

  /* ---------- タブレット・スマホ ---------- */
  @media (max-width: 820px) {
    .sa-hero { grid-template-columns: 1fr; margin-top: 8px; }
    .sa-hero .alby img { width: 140px; }
    .sa-hero .alby::before { width: 140px; }
    .sa-hero .bubble h1 { font-size: 26px; }
    body.sa .container { padding: 24px 16px 48px; }
    body.sa .card { padding: 18px 16px; }
    .cat-header { font-size: 22px; }
    .topic-header { font-size: 17px; }
    .score-pts { font-size: 44px; }
    .tab-btn { font-size: 15px; padding: 7px 14px; }
    .impl-date-card { width: auto; border-radius: 18px; }
  }
}

/* 印刷のときは、方眼の背景や新しい飾りを出さない（文字の設定も前と同じにもどす） */
@media print {
  body.sa { background: #fff !important; color: #2C2C2C; line-height: 1.6;
            font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; }
  .top, .sa-hero { display: none !important; }
}