/* Applications page — Direction 3 ("Today first, then tables").
   Replaces the old Amber overrides. Loaded after styles.css and app-d3.css.
   One true table: hairline rule under the header row, 1px --hj-edge between
   records, group rows in the display font, tabular figures on dates and day
   counts. No colour bands, no shadows, 2px corners. */

/* ---- Page head: kicker, h1, computed lede, primary button on the right ---- */
.hj-apps__kicker{font-size:15px;font-weight:600;color:var(--hj-muted)}
.hj-apps .hj-h1{margin-top:4px}
.hj-apps .hj-lede{font-size:18px}

/* ---- Filter: square toggles above the table (counts live in the group rows) ---- */
.hj-apps__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.hj-apps__toggle{
  height:36px;padding:0 14px;box-sizing:border-box;
  border:1px solid var(--hj-edge);border-radius:2px;background:var(--hj-card);
  color:var(--hj-fg);font-family:var(--hj-font-body);font-size:15px;font-weight:600;
  white-space:nowrap;cursor:pointer;
}
.hj-apps__toggle:hover:not([aria-pressed="true"]){background:var(--hj-hover)}
.hj-apps__toggle[aria-pressed="true"]{background:var(--hj-fg);border-color:var(--hj-fg);color:var(--hj-card)}

/* ---- The table ---- */
.hj-apps__tbl{width:100%;border-collapse:collapse;font-family:var(--hj-font-body);font-size:16px}
.hj-apps__tbl th{
  padding:0 14px 10px;text-align:left;white-space:nowrap;
  font-size:13px;font-weight:700;color:var(--hj-muted);
  border-bottom:1px solid var(--hj-fg);
}
.hj-apps__tbl td{padding:16px 14px;border-bottom:1px solid var(--hj-edge);vertical-align:top}
.hj-apps__tbl th:first-child,.hj-apps__tbl td:first-child{padding-left:0}
.hj-apps__tbl th:last-child,.hj-apps__tbl td:last-child{padding-right:0}
.hj-apps__tbl tbody tr:last-child td{border-bottom:0}
/* .hj-apps__tbl th sets text-align:left, so the right-aligned column needs the table in its selector */
.hj-apps__tbl .hj-apps__r{text-align:right}
.hj-apps__tbl tbody tr.hj-apps__row:hover td{background:var(--hj-hover)}

/* column widths: the two text columns take the space, the rest stay put */
.hj-apps__c-stage{width:158px}
.hj-apps__c-applied{width:96px}
.hj-apps__c-quiet{width:96px}
.hj-apps__c-menu{width:52px}

/* Role: bold title (opens the job), company muted under it */
.hj-apps__role{
  display:block;max-width:100%;padding:0;border:0;background:none;
  font:inherit;font-weight:700;color:var(--hj-hi);text-align:left;cursor:pointer;
  overflow-wrap:anywhere;
}
.hj-apps__role:hover{text-decoration:underline;text-underline-offset:3px}
.hj-apps__company{margin-top:3px;font-size:14px;color:var(--hj-muted);overflow-wrap:anywhere}

/* Dates and day counts: tabular figures, so the columns line up */
.hj-apps__num{font-size:15px;color:var(--hj-body);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* Next step */
.hj-apps__next{font-size:15px;color:var(--hj-body)}
.hj-apps__next--nudge{color:var(--hj-accent);font-weight:700}
.hj-apps__next--muted{color:var(--hj-muted)}

/* Group rows: "Applied 2" in the display font, count muted */
.hj-apps__group td{
  padding:22px 0 8px;border-bottom:1px solid var(--hj-fg);
  font-family:var(--hj-font-display);font-size:18px;font-weight:700;color:var(--hj-hi);
}
.hj-apps__count{margin-left:8px;font-family:var(--hj-font-body);font-size:14px;font-weight:600;color:var(--hj-muted);font-variant-numeric:tabular-nums lining-nums}

/* Empty group: one muted line in the same table */
.hj-apps__none td{padding:14px 0;font-size:15px;color:var(--hj-muted)}

/* ---- Stage dropdown: the existing control, squared ---- */
.hj-apps .hj-stage-select{width:158px;max-width:100%}
.hj-apps .hj-stage-select select{
  height:36px;padding:0 30px 0 12px;border:0;border-radius:2px;
  font-family:var(--hj-font-body);font-size:14px;font-weight:600;
}
.hj-apps .hj-stage-select svg{right:10px}

/* ---- Row menu: a 36px square with a hairline, like the mock-up's .sq ---- */
.hj-apps .hj-btn--icon.hj-apps__dots{width:36px;height:36px;padding:0}
.hj-apps .hj-btn--quiet.hj-apps__dots{border-color:var(--hj-edge);background:var(--hj-card)}
.hj-apps .hj-btn--quiet.hj-apps__dots:hover{border-color:var(--hj-fg);background:var(--hj-hover)}
.hj-apps__cell-menu{text-align:right}

/* ---- Phones: the table becomes stacked records (label: value) ---- */
@media (max-width:760px){
  .hj-apps .hj-lede{font-size:16px}
  .hj-apps__bar{gap:8px;margin-bottom:16px}
  .hj-apps__toggle{height:34px;padding:0 12px;font-size:14px}
  .hj-apps__tbl thead{display:none}
  .hj-apps__tbl,.hj-apps__tbl tbody,.hj-apps__tbl tr,.hj-apps__tbl td{display:block;width:100%}
  .hj-apps__tbl tr{padding:14px 0;border-bottom:1px solid var(--hj-edge)}
  .hj-apps__tbl td{padding:3px 0;border:0}
  .hj-apps__tbl td[data-l]::before{content:attr(data-l) ": ";color:var(--hj-muted);font-size:14px}
  .hj-apps__tbl .hj-apps__r{text-align:left}
  .hj-apps__tbl tbody tr.hj-apps__row:hover td{background:none}
  .hj-apps__cell-stage{padding-top:8px}
  .hj-apps .hj-stage-select{width:100%;max-width:280px}
  .hj-apps__cell-menu{padding-top:10px;text-align:left}
  .hj-apps__group td{padding:20px 0 6px}
  .hj-apps__none td{padding:12px 0}
  /* the menu opens left-aligned over the record instead of off-screen right */
  .hj-apps__cell-menu .hj-menu{right:auto;left:0}
}