/* Idle notices (client/notices.js): the strip of one-line notices under the top HUD row, and its two switches in the
   footer of the Queue panel. The strip lives inside #view above the HUD and the building ring (z 6 / 7) and below the
   Queue panel (z 9) and the sheets (z 20); notices.js keeps it clear of the HUD buttons, the minimap and the Queue tab. */
#nt { position: absolute; top: 84px; left: 36px; width: 250px; z-index: 6; /* with the HUD: map cards, rings and the search drawer open above it */ display: grid; gap: 4px; pointer-events: none; }
#view:not(.has-hud) #nt { display: none; }
.nt-item { pointer-events: auto; display: grid; grid-template-columns: 22px 1fr 28px; align-items: center; gap: 6px; height: 32px; padding: 0 2px 0 7px; border-radius: 10px; cursor: pointer; overflow: hidden;
  color: #f3e6cf; background: linear-gradient(#5a3f25, #38260f); border: 1px solid var(--pn-gold2, var(--c-amber-lo)); border-left: 4px solid var(--c-good);
  box-shadow: 0 2px 0 #1c1206, 0 5px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,160,.22); animation: ntIn .22s ease-out; -webkit-tap-highlight-color: transparent; }
.nt-item:active { filter: brightness(1.15); }
.nt-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nt-item.out { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.nt-item.warn { background: linear-gradient(#6a2a1e, #3e150d); border-color: #ff8a6a; border-left-color: #ff5a44; }
.nt-ico { font-size: 15px; line-height: 1; text-align: center; }
.nt-text { min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; font: 12.5px/1.2 system-ui; }
.nt-text b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: #ffe9b0; text-shadow: 0 1px 0 #000; } /* the title keeps its room, the detail gives way first */
.nt-text small { flex: 1 9999 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: #d9c7a3; }
.nt-item.warn .nt-text b { color: #ffd9cf; }
.nt-x { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(0,0,0,.32); color: var(--accent); font-size: 11px; line-height: 1; }
@keyframes ntIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- switches in the Queue panel ---------- */
.nt-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 8px calc(6px + var(--safe-bottom)); background: var(--pn-wood, linear-gradient(#3a2a17, #241808)); border-top: 2px solid var(--pn-gold2, var(--c-amber-lo)); }
#qp .qp-body { padding-bottom: 10px; }
.nt-sw { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 34px; padding: 3px 6px; border-radius: 9px; background: rgba(0,0,0,.35); border: 1px solid #5a3f20; color: #f3e6cf; text-align: left; }
.nt-sw span { min-width: 0; font: 700 11px/1.15 system-ui; }
.nt-sw i { flex: none; position: relative; width: 28px; height: 16px; border-radius: 8px; background: #2a1a0c; box-shadow: inset 0 0 0 1px #6b4a2e; transition: background .15s ease; }
.nt-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #a08a68; transition: transform .15s ease, background .15s ease; }
.nt-sw.on i { background: #2f7d4f; box-shadow: inset 0 0 0 1px var(--c-good); }
.nt-sw.on i::after { transform: translateX(12px); background: #fff; }

html.land .nt-item { height: 28px; }
html.land .nt-foot { padding-top: 4px; padding-bottom: calc(4px + var(--safe-bottom)); } html.land .nt-sw { min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .nt-item { animation: none; } .nt-item.out, .nt-sw i, .nt-sw i::after { transition: none; } }