/* Announcements app screens (announcements mock) in the POS shell, on the
   pos_shell.css tokens. The popup, sheets and media chips live in
   announcements_popup.css because they also render in Books' layout. */
.pos-shell { --oksoft: #def7ec; }
.dark .pos-shell { --oksoft: #0f2f24; }

.an-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
/* Top strip moves with .pos-bell / .pos-loc-switcher, which float at env(safe-area-inset-top) + a few px. */
.an-top { flex: none; background: var(--hbg); color: var(--htext); padding: calc(env(safe-area-inset-top, 0px) + 44px) 18px 14px; border-bottom: 1px solid var(--line); }
.an-top__row { display: flex; align-items: flex-start; gap: 12px; }
.an-top__heading { flex: 1; min-width: 0; }
.an-top__title { display: block; font: 800 24px/1.15 var(--font); letter-spacing: -.01em; }
.an-top__title--sm { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top__meta { display: block; margin-top: 4px; font: 500 13px/1.35 var(--font); color: var(--sub); }
.an-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 110px; display: flex; flex-direction: column; gap: 12px; }
.an-body::-webkit-scrollbar { width: 0; }

.an-seg { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surfacealt); }
.an-seg a { text-align: center; padding: 8px; border-radius: 10px; font: 700 13.5px/1.2 var(--font); color: var(--sub); text-decoration: none; }
.an-seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.an-sec { font: 700 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); padding-top: 6px; }
.an-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.an-card--pad { padding: 16px; }
.an-pending { border-color: var(--warnline); }
.an-pending__media { padding: 0 16px; }
.an-pending__media .an-media { margin-top: 0; }
.an-pending__ack { padding: 12px 16px 16px; }

.an-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.an-row + .an-row { border-top: 1px solid var(--line); }
.an-row__dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: transparent; }
.an-row__dot--on { background: var(--acc); }
.an-row__ico { width: 36px; height: 36px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surfacealt); color: var(--sub); }
.an-row__ico--acc { background: var(--accsoft); color: var(--acc); }
.an-row__ico--warn { background: var(--warnsoft); color: var(--warn); }
.an-row__main { flex: 1; min-width: 0; }
.an-row__title { display: block; font: 600 15px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row__title--unread { font-weight: 800; }
.an-row__preview { display: block; margin-top: 2px; font: 500 13px/1.3 var(--font); color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row__meta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 12px/1.3 var(--font); color: var(--sub); }
.an-row__meta svg { vertical-align: -2px; }
.an-ok { color: var(--ok); font-weight: 700; }
.an-pill { display: inline-flex; border-radius: 99px; padding: 3px 9px; font: 700 11.5px/1 var(--font); background: var(--surfacealt); color: var(--sub); }
.an-pill--warn { background: var(--warnsoft); color: var(--warn); }
.an-pill--ok { background: var(--oksoft); color: var(--ok); }
.an-pill--acc { background: var(--accsoft); color: var(--acc); }

.an-empty { padding: 24px; text-align: center; }
.an-empty__ico { width: 36px; height: 36px; border-radius: 12px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: var(--surfacealt); color: var(--sub); }
.an-empty__title { margin-top: 12px; font: 700 15px/1.3 var(--font); }
.an-empty .an-note { margin-top: 4px; }
.an-empty .an-btn { margin-top: 16px; }

.an-fab {
  position: absolute; right: 16px; bottom: 22px; z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-radius: 99px; background: var(--accfill); color: var(--acctext);
  font: 700 15px/1 var(--font); text-decoration: none; box-shadow: 0 10px 24px rgba(26, 86, 219, .4);
}

/* Compose */
.an-form { display: contents; }
.an-label { display: block; margin-bottom: 6px; font: 700 12.5px/1.2 var(--font); color: var(--sub); }
.an-label small { font-weight: 500; }
.an-input {
  box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 500 15px/1.4 var(--font); outline: none; resize: vertical;
}
.an-input:focus { border-color: var(--acc); }
.an-attach { display: flex; gap: 8px; }
.an-attach__btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; cursor: pointer;
  border: 1.5px dashed var(--acc); border-radius: 12px; background: var(--accsoft); color: var(--acc); font: 700 13px/1 var(--font);
}
.an-attach__btn[disabled] { opacity: .4; pointer-events: none; }
.an-opts { display: flex; flex-direction: column; gap: 8px; }
.an-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font: 500 14px/1.35 var(--font); }
.an-opt > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.an-opt svg { flex: none; margin-top: 1px; color: var(--sub); }
.an-opt__title { display: block; font-weight: 700; }
.an-opt__hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sub); }
.an-opt:has(> input:checked) { border-color: var(--acc); background: var(--accsoft); }
.an-opt:has(> input:checked) svg { color: var(--acc); }
.an-opt--loud:has(> input:checked) { border-color: var(--warn); background: var(--warnsoft); }
.an-opt--loud:has(> input:checked) svg { color: var(--warn); }
.an-opt__body { flex: 1; min-width: 0; }
.an-appchips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.an-appchip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 700 12px/1 var(--font); color: var(--text); cursor: pointer; }
.an-appchip input { position: absolute; opacity: 0; pointer-events: none; }
.an-appchip:has(input:checked) { background: var(--accfill); border-color: var(--accfill); color: var(--acctext); }
.an-appchip:has(input:checked)::before { content: "✓"; }
.an-link { margin-top: 8px; display: inline-block; border: 0; padding: 0; background: none; color: var(--acc); font: 700 12.5px/1.2 var(--font); cursor: pointer; }
.an-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 14px; background: var(--surface); border-top: 1px solid var(--line); }
.an-errors { border: 1px solid var(--warn); color: var(--warn); border-radius: 12px; padding: 11px 13px; font: 600 12.5px/1.4 var(--font); }
.an-errors ul { margin: 4px 0 0; padding-left: 18px; }

/* People picker rows */
.an-pick { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--an-line); cursor: pointer; }
.an-pick input { width: 20px; height: 20px; accent-color: var(--an-accfill); flex: none; }
.an-pick__name { display: block; font-weight: 700; font-size: 14px; }
.an-pick__apps { display: block; font-size: 11.5px; color: var(--an-sub); }

/* Detail */
.an-back { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--htotalbg); color: var(--htext); }
.an-progress { height: 8px; margin-top: 12px; border-radius: 4px; background: var(--surfacealt); overflow: hidden; }
.an-progress i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.an-big { font: 800 30px/1 var(--font); margin-top: 4px; }
.an-big small { font-size: 18px; color: var(--sub); }
.an-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.an-avatar { width: 32px; height: 32px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surfacealt); color: var(--sub); font: 700 12px/1 var(--font); }
.an-avatar--ok { background: var(--oksoft); color: var(--ok); }
.an-avatar--me { background: var(--accsoft); color: var(--acc); }
.an-person { cursor: default; }
.an-person__name { display: block; font: 700 14.5px/1.25 var(--font); }
.an-person__sub { display: block; font: 500 12px/1.3 var(--font); color: var(--sub); }
.an-thread { padding: 4px 16px; }
.an-reply { display: flex; gap: 10px; padding: 10px 0; }
.an-reply + .an-reply { border-top: 1px solid var(--line); }
.an-reply__main { flex: 1; min-width: 0; }
.an-bubble { border-radius: 14px; padding: 9px 12px; background: var(--surfacealt); font: 500 14px/1.4 var(--font); }
.an-bubble--me { background: var(--accsoft); }
.an-bubble__who { font-weight: 700; }
.an-bubble .an-media { margin-top: 8px; }
.an-replybar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; background: var(--surface); border-top: 1px solid var(--line); }
.an-replybar .an-field { background: var(--surfacealt); }
.an-replydraft { position: absolute; left: 12px; right: 12px; bottom: 72px; z-index: 7; display: flex; flex-direction: column; gap: 6px; }
.an-replydraft .an-media { margin: 0; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.pos-toast--warn { background: var(--warnfill); color: var(--warntext); }
.an-flash { border-radius: 12px; padding: 10px 12px; font: 600 13px/1.35 var(--font); background: var(--oksoft); color: var(--ok); }
.an-flash--alert { background: var(--warnsoft); color: var(--warn); }