/* The Home notification center (alerts.js, migration 222): a card under the
   time clock that lists every staff alert the person has not yet marked
   seen. Each row is a check mark and the alert; a schedule alert carries its
   week's shifts. Every class is lfa- prefixed, and every colour and face is
   one of the console's tokens (system.css), so the card follows the theme and
   light/dark. The look is the My schedule card's (.mysch in staff.html): a
   surface panel, a hairline, a mono kicker. */

.lfa{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:10px 14px 4px;margin:10px 0 6px;color:var(--ink)}
.lfa *{box-sizing:border-box;min-width:0}

.lfa-head{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;min-height:26px;margin:0 0 6px}
.lfa-kicker{margin:0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.lfa-kicker:focus{outline:none}
.lfa-kicker:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.lfa-count{font:600 11px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-radius:4px;padding:2px 6px}
/* .linkbtn is the console's own (declared after this file is linked), so
   these two carry the card's class to win the tie. Each is a full 34px
   target on desktop; the phone rule below makes them 44px. */
.lfa .lfa-all{margin-left:auto;min-height:34px;padding:4px 2px}
.lfa .lfa-more{display:block;min-height:34px;margin:0 0 6px;padding:6px 2px}

.lfa-list{list-style:none;margin:0;padding:0}
.lfa-row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;
  padding:8px 0;border-top:1px solid var(--line)}

/* The check: a button that marks the row seen. Its check mark always shows
   (Josh asked for "a little check mark" to tick alerts off): quiet at rest,
   green under the pointer. A ticked row leaves the list at once, so no
   finished row ever sits beside these. */
.lfa-check{width:34px;height:34px;display:grid;place-items:center;padding:0;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink3);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.lfa-check:hover{border-color:var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.lfa-check:active{background:color-mix(in srgb,var(--good) 24%,var(--surface))}
.lfa-check svg{display:block;pointer-events:none}

/* The alert itself: a button that opens its page. */
.lfa-open{display:block;width:100%;margin:0;padding:1px 0 2px;border:0;border-radius:var(--r);background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.lfa-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start}
.lfa-main{display:flex;flex-direction:column;gap:2px}
.lfa-kind{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);line-height:1.3}
.lfa-urgent .lfa-kind{color:var(--crit)}
.lfa-title{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.lfa-open:hover .lfa-title{color:var(--accent)}
.lfa-body{font-size:12.5px;line-height:1.45;color:var(--ink2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lfa-when{font:500 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink3);white-space:nowrap;line-height:1.3}

/* A schedule alert's week: one mono line per shift, then the total. */
.lfa-brief{display:flex;flex-direction:column;gap:1px;margin-top:5px;padding-left:9px;border-left:2px solid var(--accent)}
.lfa-brief > span{font:500 12px var(--mono);font-variant-numeric:tabular-nums;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.lfa-brief > .lfa-sum{color:var(--ink2)}

.lfa-empty{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--ink3)}

.lfa-check:focus-visible,.lfa-open:focus-visible,.lfa-all:focus-visible,.lfa-more:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* Phone: the row stacks. The kind word and the time share the first line,
   then the title, the words and the shifts each take the full width; the
   check is a full thumb target. */
@media (max-width:560px){
  .lfa{padding:10px 12px 4px}
  .lfa-row{grid-template-columns:44px minmax(0,1fr)}
  .lfa-check{width:44px;height:44px}
  .lfa-open{min-height:44px}
  .lfa-main{display:contents}
  .lfa-when{grid-column:2;grid-row:1}
  .lfa-title,.lfa-body,.lfa-brief{grid-column:1 / -1}
  .lfa .lfa-all,.lfa .lfa-more{min-height:44px;padding:0 4px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .lfa-check{transition:none}
}