/* ============================================================
   GP Team Hub - wins.css
   The cards at the top of Today, the two Wins cards, the achievement
   modal, the achievements page, and the My Links table.
   ============================================================ */

/* ---- The section filter row ----
   In the page it wants a little air above it. In the sticky slot under
   the top bar it must not: two pixels there is a stripe of page
   showing between the bar and the row, which on the light theme is a
   white line across the top of every page. */
.secfilter{margin-top:2px;}
#crumbs.secfilter{margin-top:0;}

/* ---- The cards at the top of Today ----
   The four lines and the reader's own links, open rather than behind a
   summary: they are two rows of cards, and a rep reaching for a number
   should not have to open anything first.

   They sit on the shell's own colour, carried down from the bar above
   them, so the page's surface starts where the day's numbers do. The
   negative margins take the band out to the edges of the page's
   padding, which is what makes it a band rather than a card. */
.calls-top{
  background:var(--shell-bg);
  border-bottom:1px solid var(--shell-line);
  margin:calc(-1 * var(--page-pad-t)) calc(-1 * var(--page-pad-x)) 0;
  padding:14px var(--page-pad-x) 18px;
}
.calls-top .calls{margin-top:0;}


/* ---- Wins today ----
   The same row the day's numbers use, because a win is a goal with a
   count against it and reading it should not mean learning a second
   control. Three across on a desktop: a win carries less to read than a
   metric does, and a full-width row of three words is mostly empty
   line. What it does not carry is a run of days, because a week without
   a signature is a week and not a broken habit. */
.wins{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:14px;
}
@media (min-width:620px){
  .wins{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:940px){
  .wins{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.win-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:start;
  gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 13px;
  transition:border-color .13s;
}
/* One on the board today is worth seeing from across the page, so the
   whole card takes the edge the medallion used to carry. */
.win-row[data-done="true"]{border-color:var(--good-edge);}
.win-row .act-tick{color:var(--ink-faint);}
.win-row[data-done="true"] .act-tick{color:var(--good);}

.win-body{min-width:0;}
.win-name{
  display:flex;align-items:center;gap:7px;
  font-weight:600;font-size:.92rem;line-height:1.35;
}
.win-ic{color:var(--ink-faint);font-size:.88rem;flex-shrink:0;}
.win-row[data-done="true"] .win-ic{color:var(--good);}
.win-said{color:var(--ink-soft);font-size:.8rem;line-height:1.45;margin-top:2px;}
.win-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
.win-row .act-num{width:58px;}

/* The card wears the hue its row and its cell wear everywhere else, so
   one metric is one colour down the whole page. */
[data-splash="on"] .win-row[data-hue="green"] .act-bar-fill{background:var(--hue-green-btn);}
[data-splash="on"] .win-row[data-hue="blue"] .act-bar-fill{background:var(--hue-blue-btn);}
[data-splash="on"] .win-row[data-hue="purple"] .act-bar-fill{background:var(--hue-purple-btn);}
[data-splash="on"] .win-row[data-hue="green"] .win-ic{color:var(--hue-green);}
[data-splash="on"] .win-row[data-hue="blue"] .win-ic{color:var(--hue-blue);}

/* ---- The two buttons a flow ends on ---- */
.ach-acts{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  margin-top:18px;
}
/* The first step of a flow has not happened yet, so its medallion is
   the page's own raised surface rather than the success hue the second
   step earns. */
.ach-burst-quiet{
  background:var(--surface-high);
  color:var(--ink-soft);
}

/* ---- The celebration modal ----
   A target beaten is the moment the tracker exists to produce, so it
   gets the screen rather than a corner of it, and it carries the
   follow-through the win still needs. */
.ach-scrim{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:var(--scrim);
  opacity:0;
  transition:opacity .2s ease;
}
.ach-scrim.ach-open{opacity:1;}
.ach-scrim[hidden]{display:none;}
.ach-panel{
  position:relative;
  width:100%;max-width:460px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:30px 26px 22px;
  text-align:center;
  transform:translateY(10px) scale(.98);
  transition:transform .22s ease;
}
.ach-open .ach-panel{transform:none;}
.ach-x{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
}
.ach-x:hover{background:var(--surface-high);color:var(--ink);}
.ach-burst{
  width:74px;height:74px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--good);
  color:var(--ink-inverse);
  font-size:2rem;
}
.ach-title{font-size:1.24rem;font-weight:700;letter-spacing:-.3px;line-height:1.25;}
.ach-said{margin-top:6px;font-size:.92rem;color:var(--ink-soft);}
.ach-also{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:14px;
}
.ach-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--good-wash);
  border:1px solid var(--good-edge);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  font-size:.78rem;font-weight:600;
  color:var(--ink);
}
.ach-chip i{font-size:.72rem;color:var(--good-ink);}

.ach-next{
  display:grid;gap:8px;
  margin-top:20px;
  text-align:left;
}
.ach-card{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--ink);
}
.ach-card:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.ach-card-ic{font-size:1rem;line-height:1.4;color:var(--ic);flex-shrink:0;}
.ach-card-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ach-card-name{font-size:.9rem;font-weight:700;}
.ach-card-note{font-size:.79rem;line-height:1.45;color:var(--ink-soft);}
.ach-foot{margin-top:18px;font-size:.82rem;}
/* The trophy leads the words, and neither of them takes an underline on
   the way past. */
.ach-go{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;
  color:var(--accent);
}
.ach-go:hover{text-decoration:none;color:var(--accent-hover);}

/* ---- The achievements page ----
   A badge, not a table row. Each one is a disc with the mark on it and
   the name under it, so a wall of them reads as a collection and the
   gaps in it read as what there is left to get. */
.ach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:10px;
  margin-top:14px;
}
.ach-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:3px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 12px 14px;
}
.ach-disc{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  color:var(--ink-faint);
  font-size:1.35rem;
  margin-bottom:7px;
}
/* Earned: the disc fills and the badge takes its edge. Not earned: the
   same badge with the face left grey, which is what makes an empty
   slot read as one still to get rather than as a broken card. */
.ach-got .ach-disc{
  background:var(--good);
  color:var(--ink-inverse);
}
.ach-got{border-color:var(--good-edge);}
.ach-n{
  position:absolute;top:-2px;right:-2px;
  min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.68rem;font-weight:700;
  border:2px solid var(--surface-raised);
}
.ach-name{font-size:.86rem;font-weight:700;line-height:1.3;}
.ach-note{font-size:.75rem;line-height:1.4;color:var(--ink-soft);}
.ach-fig{font-size:.86rem;font-weight:700;color:var(--good-ink);}
.ach-fig small{font-weight:400;color:var(--ink-faint);}
.ach-when{font-size:.73rem;color:var(--ink-faint);}

@media (max-width:420px){
  .ach-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
  .ach-disc{width:46px;height:46px;font-size:1.15rem;}
}

@media (prefers-reduced-motion:reduce){
  .ach-scrim,.ach-panel,.call-gone{transition:none;}
}