/* お知らせ（notices.js）の見た目：右上のベルの点・お知らせの窓（#noticeSheet）・上に貼る知らせ・社員のお知らせのタブ（#t-notices）。
   窓そのものの形（スマホは下から上がるシート、パソコンはまん中の窓）・閉じるのボタン（.sheet-x）・ベルのボタンの大きさは app.css。
   色・長さ・太さは tokens.css の名前だけ（style.md）。太さは 400 と 700 だけ。区切りはスマホ 767px まで・パソコン 768px から */

/* ---------- ベルの点（#bellBadge）。未読があるときだけ出す赤い点。数は書かない（読み上げの名前 #bellName に件数を入れる） ---------- */
#bellBtn { position: relative; }
.bell-badge { position: absolute; top: var(--sp-1); right: var(--sp-1); width: var(--dot); height: var(--dot); padding: 0; border: var(--ol-2) solid var(--white); border-radius: var(--r-pill); background: var(--red); pointer-events: none; }
@media (forced-colors: active) { .bell-badge { forced-color-adjust: none; background: Highlight; border-color: Canvas; } }

/* ---------- お知らせの窓の中身（窓の形は app.css の dialog.sheet） ---------- */
#noticeTitle:focus:not(:focus-visible) { outline: none; } /* 開いたときにフォーカスを移す見出し（マウスで開いたときは枠を出さない） */
#noticeSheet .sheet-body { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.notice-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.notice-list[hidden] { display: none; }
.notice-group { margin: var(--sp-2) 0 0; color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }

/* お知らせ 1 件（窓の一覧・社員のタブの見え方で同じ形）：まるい絵・日付・題・本文・ボタン */
.notice { margin: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); }
.notice > article { display: grid; grid-template-columns: var(--ic-xl) minmax(0, 1fr); gap: 0 var(--sp-3); align-items: center; padding: var(--sp-3); }
.notice-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: var(--ic-xl); height: var(--ic-xl); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--sky-l); color: var(--navy); }
.notice-ic .m-ic { width: var(--ic); height: var(--ic); }
.notice-tx { display: contents; } /* 日付・題はまるい絵の右、本文とボタンは下で幅いっぱい（長い条件の文が読みやすいように） */
.notice-meta { grid-column: 2; align-self: end; display: flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.notice-meta .m-ic { width: var(--ic-s); height: var(--ic-s); color: var(--red); }
.notice h3 { grid-column: 2; align-self: start; margin: 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.notice-body { grid-column: 1 / -1; margin: var(--sp-2) 0 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); overflow-wrap: anywhere; white-space: pre-line; } /* 社員が入れた改行はそのまま */
.notice-link { grid-column: 1 / -1; margin: var(--sp-2) 0 0; }

/* ボタン（お知らせの中・貼り紙・読み込めなかったとき）。二つ目のボタンは白に太い紺の枠、貼り紙のボタンは黄色の主役のボタン */
.nt-act, .pin-act, .nt-retry { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-align: left; text-decoration: none; text-wrap: balance; cursor: pointer; }
.nt-act .m-ic, .pin-act .m-ic, .nt-retry .m-ic { width: var(--ic); height: var(--ic); }
.pin-act { min-height: var(--cta-h); width: 100%; background: var(--yellow); box-shadow: var(--shadow-cta); }
.nt-retry { min-height: var(--hit); padding: 0 var(--sp-3); border-width: var(--ol-2); border-radius: var(--r-m); }
@media (hover: hover) {
  .nt-act:hover, .nt-retry:hover { background: var(--sky-l); }
  .pin-act:hover { background: var(--y-hover); }
}
.nt-act:active, .nt-retry:active { background: var(--sky); }
.pin-act:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.pin-act:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.nt-act:disabled, .pin-act:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }

/* 上に貼る知らせ（支払い・カードのこと）。状態は絵・色・文字の 3 つで伝える（style.md D2）：info は水色、注意は黄みの白、困りごとは赤みの白 */
.pin { --pin-pic: calc(var(--ic-xl) + var(--sp-3)); margin: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--sky-l); }
.pin[data-tone="warn"] { border-color: var(--warn); background: var(--warn-l); }
.pin[data-tone="bad"] { border-color: var(--red); background: var(--red-l); }
.pin > article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: start; padding: var(--sp-4); }
.pin-pic { width: var(--pin-pic); height: var(--pin-pic); }
.pin-pic .il { display: block; width: 100%; height: auto; }
.pin-pic > .m-ic { display: block; width: var(--ic-l); height: var(--ic-l); margin: calc((var(--pin-pic) - var(--ic-l)) / 2); color: var(--warn); }
.pin h3 { margin: 0; align-self: center; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); overflow-wrap: anywhere; }
.pin-body { grid-column: 1 / -1; margin: 0; color: var(--navy); font-size: var(--fs-cond); font-weight: var(--w-bold); line-height: var(--lh-cond); }
.pin-link { grid-column: 1 / -1; margin: var(--sp-1) 0 0; }

/* 空のとき・読み込めなかったとき */
.notice-empty { display: grid; justify-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; }
.notice-empty[hidden] { display: none; }
.notice-empty .il { display: block; width: var(--il-s); height: var(--il-s); }
.notice-empty p { margin: 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#noticeMsg { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--warn); border-radius: var(--r-m); background: var(--warn-l); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#noticeMsg:empty { display: none; }
#noticeMsg > .m-ic { width: var(--ic); height: var(--ic); color: var(--warn); }
#noticeMsg > span:not(.m-ic) { flex: 1 1 auto; min-width: 0; }

/* ---------- 社員のお知らせのタブ（#t-notices）：書く欄・見え方・一覧（中身は変えない。見た目だけ） ---------- */
#t-notices h1 { margin: var(--sp-2) 0 var(--sp-3); color: var(--navy); font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-head); }
#noticeForm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-4); max-width: var(--w-read); margin: 0 0 var(--sp-6); }
#noticeForm > * { grid-column: 1 / -1; }
#noticeForm > label:has(> select) { grid-column: auto; } /* 種類・出す相手・リンク は横に 3 つ */
#noticeForm textarea { resize: vertical; min-height: calc(var(--hit) * 3); }
#noticeForm .n-count-line, #noticeForm p:has(> #nBodyCount) { margin: calc(var(--sp-3) * -1) 0 var(--sp-3); text-align: right; font-variant-numeric: tabular-nums; }
#nLint { margin: 0 0 var(--sp-3); color: var(--warn); font-size: var(--fs-label); font-weight: var(--w-bold); }
#nPreview { max-width: var(--w-phone); margin: var(--sp-1) 0 var(--sp-4); }
#noticeForm .n-msg { margin: 0 0 var(--sp-2); }
#noticeForm .n-msg:empty { min-height: 0; margin: 0; }
#noticeForm > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; }
#noticeForm > p:last-child .link { min-height: var(--hit); }
#nList td { padding: var(--sp-2); }
#nList td.title { min-width: var(--col-l); }
#nList td.acts { white-space: nowrap; }
#nList td.empty, #nList td.err { padding: var(--sp-3); }
#nList tr.editing td { background: var(--y4); } /* 直している行 */
.n-st { display: inline-block; padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); white-space: nowrap; }
.n-st[data-st="published"] { background: var(--sky-l); }
.n-st[data-st="scheduled"] { background: var(--y3); }
.n-st[data-st="draft"], .n-st[data-st="expired"], .n-st[data-st="deleted"] { border-color: var(--muted); color: var(--muted); }

/* ---------- スマホ（幅 767px まで） ---------- */
@media (max-width: 767px) {
  #noticeSheet .sheet-body { padding-bottom: var(--sp-5); }
  /* 書く欄は 1 列 */
  #noticeForm { grid-template-columns: minmax(0, 1fr); }
  #noticeForm > label:has(> select) { grid-column: 1 / -1; }
  #noticeForm > p:last-child .primary { flex: 1 1 100%; min-height: var(--btn-h); }
  /* 一覧：1 行を 1 枚のカードに（タイトル・日付と相手と状態・直す と 消す） */
  #t-notices .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  #nList, #nList tbody, #nList tr, #nList td { display: block; }
  #nList thead { display: none; }
  #nList tr { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); padding: var(--sp-3); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
  #nList td { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; }
  #nList td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--ol-2); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); }
  #nList td.title { order: -1; flex-basis: 100%; min-width: 0; font-weight: var(--w-bold); }
  #nList td.acts { flex-basis: 100%; display: flex; gap: var(--sp-3); }
  #nList td.acts::before, #nList td.empty::before, #nList td.err::before { content: none; }
  #nList td.acts:empty { display: none; }
  #nList tr.editing { background: var(--y4); }
  #nList tr.editing td { background: none; }
}