/* ===== Employee of the Month (Phase 26) =====

   Three surfaces, deliberately different in weight:

     .eotm-strip      lives in the topbar for a whole month. Quiet. It has to
                      survive being looked at every day, so it is a normal
                      panel with one gold accent, not a gold banner.
     .eotm-card       the award itself, on its own screen. Room to breathe.
     .eotm-celebrate  the once-per-publication modal. This is the one that
                      gets the full treatment — it is seen once and should
                      feel like an occasion.

   Everything reads from the existing theme variables, so dark mode works
   without a second stylesheet. The gold is defined once, here, because it is
   the only colour in the app that is not already in the palette — a trophy
   that is --accent violet does not read as a trophy. */
:root{
  --eotm-gold:#C9A227; --eotm-gold-soft:#F6E7B4; --eotm-gold-deep:#8A6A1F;
  --eotm-ink-panel:#14141A;
}
[data-theme="dark"]{
  --eotm-gold:#E3C05A; --eotm-gold-soft:#4A3F22; --eotm-gold-deep:#E8C868;
  --eotm-ink-panel:#0E0E13;
}

/* ---------- topbar strip ---------- */
.eotm-strip{
  display:flex; align-items:center; gap:10px;
  flex:1 1 320px; min-width:0; max-width:560px;
  padding:7px 12px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--panel-edge);
  border-left:3px solid var(--eotm-gold);
  box-shadow:var(--shadow); cursor:pointer;
  text-align:start; font:inherit; color:inherit;
  transition:box-shadow .15s ease, transform .15s ease;
}
.eotm-strip:hover{ box-shadow:var(--shadow-lift); transform:translateY(-1px); }
.eotm-strip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.eotm-strip-trophy{ color:var(--eotm-gold); flex:0 0 auto; }
/* The rotating group inside the strip. Was an inline style attribute on the
   element; kept here so the fade and the layout live in one place. */
.eotm-strip-fade{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.eotm-strip-face{ display:flex; flex:0 0 auto; }
/* The strip sits in a 44px-tall toolbar, so it gets the smallest face in the
   module. This rule is the one that was missing entirely. */
.eotm-strip .eotm-face,
.eotm-strip .eotm-face-fallback{ width:28px; height:28px; font-size:10.5px; }
/* Both children are spans inside a <button>, so they need to be told to
   stack — a button's content box is inline by default. */
.eotm-strip-body{ min-width:0; flex:1 1 auto; display:block; }
.eotm-strip-label, .eotm-strip-name{ display:block; }
.eotm-strip-label{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.3;
}
.eotm-strip-name{
  font-size:13px; font-weight:650; color:var(--ink); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.eotm-strip-name .eotm-strip-dept{ font-weight:400; color:var(--ink-soft); }
.eotm-strip-score{
  flex:0 0 auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border);
}
/* Rotation dots. Hidden at one award — a single dot says nothing and just
   adds furniture to a bar the user sees all day. */
.eotm-strip-dots{ display:flex; gap:4px; flex:0 0 auto; }
.eotm-strip-dots span{
  width:5px; height:5px; border-radius:50%; background:var(--panel-edge);
  transition:background .2s ease;
}
.eotm-strip-dots span.on{ background:var(--eotm-gold); }
/* The crossfade between rotating winners. Opacity only — a slide or a scale
   in a bar this size reads as a glitch. */
.eotm-strip-fade{ transition:opacity .28s ease; }
.eotm-strip-fade.out{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .eotm-strip-fade{ transition:none; }
  .eotm-strip:hover{ transform:none; }
}
@media (max-width:760px){
  .eotm-strip{ flex-basis:100%; max-width:none; order:3; }
  .eotm-strip-score{ display:none; }
}

/* ---------- shared avatar ----------

   The width and height below are a DEFAULT, not decoration, and leaving them
   out was a real bug: an <img> with no dimensions renders at the file's own
   resolution, so a 1200px selfie took over the entire page the first time a
   real photo was attached. The initials fallback hid it for the whole of
   development — a <div> sizes to its text, so every surface looked correct
   while none of them had actually been given a size.

   Every context below overrides these with its own values. This pair exists so
   that a context which forgets to is merely small, never page-sized. */
.eotm-face, .eotm-face-fallback{
  width:34px; height:34px; font-size:13px;
  max-width:100%; border-radius:50%; flex:0 0 auto;
}
.eotm-face{
  object-fit:cover; display:block; background:var(--surface-soft);
}
/* Initials fallback. Used whenever the winner has no photo on their account or
   in HR, and also when the photo 404s — which happens legitimately, since
   deleting an employee removes the image bytes while the award record survives
   on purpose (see schema-tenant.sql). */
.eotm-face-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff; font-weight:700; letter-spacing:.02em;
}

/* ---------- form controls inside the modals ----------

   .modal-body is already `display:flex; flex-direction:column; gap:16px`, so
   every direct child is spaced by the container. Margins on those children
   STACK on top of that gap — which is where the oversized gutters in the
   Choose & Publish modal came from. Nothing in this section sets a vertical
   margin on a direct child of .modal-body; spacing is the container's job and
   only tightened where a heading needs to sit closer to what it introduces. */
.eotm-period-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.eotm-inline-label{
  font-size:12.5px; font-weight:700; color:var(--ink); flex:0 0 auto;
}
/* app.css styles inputs through `.field input[type=...]`, and these controls
   are deliberately not in a .field — they are a toolbar, not a labelled form
   row. So the same treatment is restated here rather than wrapping them in a
   .field just to inherit it, which would have forced a stacked label. */
.eotm-month-input,
.eotm-period-select{
  border:1px solid var(--panel-edge); border-radius:11px;
  padding:9px 12px; font-family:'Inter',sans-serif; font-size:13.5px;
  color:var(--ink); background:var(--panel); box-sizing:border-box;
}
.eotm-month-input{ min-width:170px; }
.eotm-month-input:focus,
.eotm-period-select:focus{ outline:2px solid var(--steel); border-color:var(--steel); }
/* Chrome draws the picker glyph in its own colour, which vanishes on the dark
   panel. Inverting it is the only hook the control exposes — same fix app.css
   already applies to its date and time inputs. */
.eotm-month-input::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; }
.eotm-month-input:hover::-webkit-calendar-picker-indicator{ opacity:1; }
[data-theme="dark"] .eotm-month-input::-webkit-calendar-picker-indicator{ filter:invert(1); }

/* One checkbox row style for the whole module. align-items:center rather than
   baseline: the labels wrap to two lines at narrow widths and a baseline
   alignment leaves the box pinned to the first line. */
.eotm-check{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:400; color:var(--ink);
  cursor:pointer; line-height:1.45;
}
.eotm-check input[type=checkbox]{
  width:15px; height:15px; margin:0; flex:0 0 auto;
  accent-color:var(--accent); cursor:pointer;
}

.eotm-section-head{
  font-size:12.5px; font-weight:700; color:var(--ink);
  letter-spacing:.02em; margin:6px 0 -6px;
  padding-top:16px; border-top:1px solid var(--panel-edge);
}
/* The heading and the block it introduces should read as one unit, so the
   negative margin above pulls that block back against it. This is the one
   place a margin on a .modal-body child is correct. */

.eotm-settings{ display:flex; flex-direction:column; gap:14px; }
.eotm-settings-row{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.eotm-check-list{ display:flex; flex-direction:column; gap:10px; }

.eotm-manage-body .perm-note{ margin:0; }

/* ---------- the screen ---------- */
.eotm-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.eotm-card{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px;
  padding:20px 18px; text-align:center; box-shadow:var(--shadow);
  cursor:pointer; position:relative; overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease;
}
.eotm-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.eotm-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--eotm-gold-deep), var(--eotm-gold), var(--eotm-gold-deep));
}
.eotm-card-scope{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px;
}
.eotm-card .eotm-face, .eotm-card .eotm-face-fallback{
  width:96px; height:96px; margin:0 auto 12px; font-size:30px;
  box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--eotm-gold);
}
.eotm-card-name{ font-size:16px; font-weight:700; color:var(--ink); }
.eotm-card-role{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.eotm-card-meta{
  display:flex; justify-content:center; gap:14px; margin-top:12px;
  font-size:12px; color:var(--ink-soft);
}
.eotm-card-meta b{ color:var(--ink); }
.eotm-draft-tag{
  position:absolute; top:10px; inset-inline-end:10px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:999px;
  background:var(--pill-gray-bg); color:var(--pill-gray-text); border:1px solid var(--pill-gray-border);
}
.eotm-empty{
  text-align:center; color:var(--ink-soft); padding:48px 20px; font-size:13px;
}
/* Inside a modal the same message sits in a 340px-tall panel, so the
   full-screen padding above made it float in the middle of a mostly empty
   box — visible in the Choose & Publish screenshot. */
.eotm-standings .eotm-empty,
#eotmManageAwards .eotm-empty{ padding:26px 20px; font-size:12.5px; }
#eotmManageAwards .eotm-empty{
  border:1px dashed var(--panel-edge); border-radius:10px;
}

/* ---------- detail overlay ---------- */
.eotm-detail-hero{
  display:flex; align-items:center; gap:16px; padding-bottom:16px;
  border-bottom:1px solid var(--panel-edge);
}
.eotm-detail-hero .eotm-face, .eotm-detail-hero .eotm-face-fallback{
  width:84px; height:84px; font-size:26px;
  box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--eotm-gold);
}
.eotm-detail-name{ font-size:19px; font-weight:700; }
.eotm-detail-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.eotm-detail-note{
  background:var(--amber-note); border:1px solid var(--amber-note-edge);
  color:var(--amber-note-text); border-radius:10px; padding:10px 12px;
  font-size:13px; line-height:1.5;
}
.eotm-actions{ display:flex; align-items:center; gap:10px; }
.eotm-like-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--surface-soft); color:var(--ink-soft);
  border:1px solid var(--panel-edge); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.eotm-like-btn:hover{ background:var(--surface-hover); }
.eotm-like-btn.on{
  background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border);
}
.eotm-like-btn.on svg{ fill:currentColor; }
.eotm-like-btn[disabled]{ opacity:.55; cursor:default; }

.eotm-comment-list{ display:flex; flex-direction:column; gap:12px; }
.eotm-comment{ display:flex; gap:10px; }
.eotm-comment-avatar{ width:30px; height:30px; font-size:12px; }
/* An empty state sitting between a hero and a composer, not filling a screen. */
.eotm-empty-inline{ padding:18px 12px; }
.eotm-comment-body{ flex:1 1 auto; min-width:0; }
.eotm-comment-head{ display:flex; align-items:baseline; gap:8px; }
.eotm-comment-author{ font-size:13px; font-weight:650; }
.eotm-comment-time{ font-size:11px; color:var(--ink-soft); }
.eotm-comment-text{ font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.eotm-comment-del{
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  font-size:11px; padding:0; opacity:0; transition:opacity .15s ease;
}
.eotm-comment:hover .eotm-comment-del, .eotm-comment-del:focus-visible{ opacity:1; }
.eotm-comment-del:hover{ color:var(--danger); }
.eotm-composer{ display:flex; gap:8px; align-items:flex-start; }
.eotm-composer textarea{ flex:1 1 auto; min-width:0; }
/* Not inside a .field, so app.css never reached it and it rendered with the
   browser's default border and monospace-ish metrics next to styled buttons. */
.eotm-comment-input{
  resize:vertical; min-height:42px;
  border:1px solid var(--panel-edge); border-radius:11px;
  padding:10px 12px; font-family:'Inter',sans-serif; font-size:13px;
  color:var(--ink); background:var(--panel); box-sizing:border-box;
}
.eotm-comment-input:focus{ outline:2px solid var(--steel); border-color:var(--steel); }

/* ---------- manage: standings ---------- */
.eotm-standings{ max-height:340px; overflow:auto; border:1px solid var(--panel-edge); border-radius:10px; }
.eotm-dept-head{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:10px 12px 6px; background:var(--surface-soft);
  position:sticky; top:0; z-index:1;
}
.eotm-stand-row{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-top:1px solid var(--panel-edge); font-size:13px;
}
.eotm-stand-row:first-child{ border-top:none; }
.eotm-stand-rank{
  flex:0 0 22px; font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center;
}
.eotm-stand-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eotm-stand-name small{ color:var(--ink-soft); }
.eotm-stand-score{ flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; }
.eotm-stand-score.neg{ color:var(--danger); }
.eotm-stand-split{ flex:0 0 auto; font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* A tie at the top is a decision HR has to make by hand, so it is marked
   rather than silently resolved by sort order. */
.eotm-tie-flag{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:1px 6px; border-radius:999px;
  background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border);
}
#eotmManageAwards{ display:flex; flex-direction:column; gap:8px; }
.eotm-manage-award{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--panel-edge); border-radius:10px;
  background:var(--panel); flex-wrap:wrap;
}
/* The controls stay together on one line and wrap as a group, instead of one
   button dropping to its own row and leaving a ragged edge. */
.eotm-manage-award-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-inline-start:auto;
}
.eotm-manage-award .eotm-face, .eotm-manage-award .eotm-face-fallback{ width:34px; height:34px; font-size:13px; }
/* One size for every small button in this module, so the standings rows and
   the chosen-award rows line up instead of each carrying its own inline
   padding and font-size. */
.eotm-mini-btn{ padding:5px 11px; font-size:11.5px; }
.eotm-mini-btn.danger{ color:var(--danger); }
.eotm-manage-award-body{ flex:1 1 180px; min-width:0; }
.eotm-manage-award-name{ font-weight:650; font-size:13px; }
.eotm-manage-award-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
/* Said before publishing, not after: an announcement that went out with a grey
   initials badge cannot be un-seen by the company. */
.eotm-photo-warn{
  font-size:11px; color:var(--amber-note-text); margin-top:4px;
  display:inline-block; padding:2px 7px; border-radius:6px;
  background:var(--amber-note); border:1px solid var(--amber-note-edge);
}
.eotm-pub-pill{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px;
  background:var(--pill-green-bg); color:var(--pill-green-text); border:1px solid var(--pill-green-border);
}
.eotm-pub-pill.draft{
  background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border);
}

/* ---------- the celebration card ---------- */
/* Its own dark surface regardless of theme. The whole point is that it does
   not look like the rest of the app for the five seconds it is open. */
.eotm-celebrate{
  max-width:400px; width:100%; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(201,162,39,0.22), transparent 62%),
    linear-gradient(160deg, #1C1C24 0%, var(--eotm-ink-panel) 58%, #05050A 100%);
  border:1px solid rgba(201,162,39,0.34);
  box-shadow:0 26px 70px rgba(0,0,0,0.55);
  color:#F4F4F6; text-align:center; padding:34px 28px 26px; position:relative;
}
.eotm-celebrate::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, transparent, var(--eotm-gold), transparent);
}
.eotm-celebrate-ribbon{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#0E0E13; background:linear-gradient(135deg, var(--eotm-gold-soft), var(--eotm-gold));
  padding:5px 16px; border-radius:999px; margin-bottom:20px;
}
.eotm-celebrate-face{
  width:132px; height:132px; margin:0 auto 18px; border-radius:50%;
  box-shadow:0 0 0 4px #0E0E13, 0 0 0 7px var(--eotm-gold), 0 10px 30px rgba(0,0,0,0.5);
}
.eotm-celebrate-face.eotm-face-fallback{ font-size:44px; }
.eotm-celebrate-name{
  font-size:24px; font-weight:800; letter-spacing:.01em; line-height:1.2;
  color:#fff; margin-bottom:6px;
}
.eotm-celebrate-role{ font-size:13px; color:#B9BAC4; margin-bottom:16px; }
.eotm-celebrate-title{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--eotm-gold); margin-bottom:4px;
}
.eotm-celebrate-period{ font-size:12px; color:#8C8D99; margin-bottom:18px; }
.eotm-celebrate-note{
  font-size:13px; line-height:1.6; color:#C9CAD2;
  border-top:1px solid rgba(255,255,255,0.09); padding-top:16px; margin-bottom:20px;
}
.eotm-celebrate-score{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:4px 12px; border-radius:999px; margin-bottom:18px;
  background:rgba(201,162,39,0.14); color:var(--eotm-gold); border:1px solid rgba(201,162,39,0.34);
}
.eotm-celebrate-btn{
  width:100%; padding:11px; border-radius:10px; border:none; cursor:pointer;
  font-size:13.5px; font-weight:650; color:#0E0E13;
  background:linear-gradient(135deg, var(--eotm-gold-soft), var(--eotm-gold));
}
.eotm-celebrate-btn:hover{ filter:brightness(1.06); }
/* Several winners published at once: the modal pages through them rather than
   opening several modals. */
.eotm-celebrate-nav{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
}
.eotm-celebrate-nav span{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.22);
}
.eotm-celebrate-nav span.on{ background:var(--eotm-gold); }