/*
 * InnClocky — components.
 *
 * Content sits on white panels: a hairline border, a 10px radius, no shadow.
 * Tables rather than cards for anything with more than three rows, hairlines
 * rather than stripes, and every figure set in the mono so a column of hours
 * reads down the page.
 *
 * The burn meter is the piece to look at twice. Its track runs to 125% of the
 * estimate with a tick where the estimate falls, so a project that is over does
 * not just turn red — you can see by how much.
 */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--blue);
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--text-dense);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:hover {
  border-color: var(--blue-lift);
  background: var(--blue-lift);
  color: var(--paper);
  text-decoration: none;
}

.btn--secondary {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--ink-soft);
  background: var(--raise);
  color: var(--ink);
}

.btn--danger {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--alert);
}

.btn--danger:hover {
  border-color: var(--alert);
  background: var(--alert);
  color: var(--paper);
}

.btn--small {
  padding: 3px var(--s2);
  font-size: var(--text-fine);
}

/* Waits to be needed. A row carries one of these on every line, so it reads as
   text until the pointer or the focus arrives — the same manners as the
   edit-in-place fields. */
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}

tr:hover .btn--ghost,
.desktop-entry:hover .btn--ghost,
.btn--ghost:focus-visible {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--blue);
}

.btn--ghost:hover {
  border-color: var(--blue);
  background: var(--paper);
  color: var(--blue);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sign out, on the navy. */
.btn--rail {
  flex: none;
  padding: var(--s1) var(--s3);
  border-color: var(--on-navy-line);
  background: transparent;
  color: var(--on-navy-soft);
  font-size: var(--text-fine);
}

.btn--rail:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--on-navy-hover);
  color: var(--on-navy);
}

/* A link that behaves like a link but sits in a row of buttons. */
.link-action {
  font-size: var(--text-dense);
  font-weight: 700;
}

/* --- Forms ---------------------------------------------------------------- */

/* A form is a panel like any other block of content on the canvas. */
.form {
  max-width: 620px;
  padding: var(--s6);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.form--wide {
  max-width: 100%;
}

.form > .field:last-of-type {
  margin-bottom: 0;
}

.field {
  margin-bottom: var(--s4);
}

.field > label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--text-fine);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.field__hint {
  margin: var(--s2) 0 0;
  font-size: var(--text-fine);
  color: var(--ink-soft);
}

.field__error {
  margin: var(--s1) 0 0;
  font-size: var(--text-fine);
  font-weight: 600;
  color: var(--alert);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: 1.4;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ink-soft);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-lift);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-wash);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--alert);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--text-dense);
}

.checkbox input {
  margin: 3px 0 0;
  accent-color: var(--blue);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--border);
}

/* --- Filter bars ---------------------------------------------------------- */

.filters {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.filters .field {
  margin-bottom: 0;
}

.filters input[type="search"] {
  min-width: 268px;
}

.filters .field > label {
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

/* A note that spans the whole filter bar rather than sitting in a column. */
.filters__note {
  flex: 1 1 100%;
  margin: 0;
}

/* --- Tables --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-dense);
}

table.data th,
table.data td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

table.data thead th {
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  background: var(--raise);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  color: var(--ink-soft);
}

table.data tbody tr:hover {
  background: var(--raise);
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

/* Each report line is its own tbody; the rule keeps the groups apart. */
table.data tbody + tbody {
  border-top: 1px solid var(--line);
}

table.data td.num,
table.data th.num {
  text-align: right;
  white-space: nowrap;
}

table.data td.num {
  font-family: var(--mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

table.data td.actions {
  text-align: right;
  white-space: nowrap;
}

table.data td.actions > * {
  vertical-align: middle;
}

/* Cualquier par de acciones seguidas se separa, sean enlaces o formularios:
   "Ver actividad Editar" pegados se leen como una sola cosa. */
table.data td.actions > * + * {
  margin-left: var(--s2);
}

table.data td.actions form {
  display: inline-block;
}

table.data tfoot td {
  padding: var(--s3) var(--s4);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  background: var(--raise);
  font-weight: 800;
}

table.data tfoot td.num {
  font-family: var(--mono);
  font-weight: 600;
}

/* A breakdown line sits under its total, indented and quieter. */
table.data tbody tr.report-child td {
  padding-top: var(--s1);
  padding-bottom: var(--s1);
  border-bottom-color: transparent;
  color: var(--ink-soft);
}

table.data tbody tr.report-child:last-child td {
  padding-bottom: var(--s3);
}

table.data tbody tr.report-child td:first-child {
  padding-left: var(--s8);
}

.report-note {
  margin-top: var(--s3);
}

/* Past the estimate, in a table or in a summary. */
.over {
  color: var(--alert);
}

/* --- Status chips --------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--ink-2);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
  white-space: nowrap;
}

.pill--ok {
  background: var(--green-wash);
  color: var(--green-ink);
}

.pill--alert {
  background: var(--alert-wash);
  color: var(--alert);
}

.pill--info {
  background: var(--blue-wash);
  color: var(--blue);
}

/* --- The burn meter ------------------------------------------------------- */

/* The track runs to 125% of the estimate. The tick at four fifths is where the
   estimate falls, so overrun is a distance and not just a colour. */
.progress {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 104px;
  height: 6px;
  margin-right: var(--s3);
  border-radius: var(--r-full);
  background: var(--line);
}

.progress::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 80%;
  width: 1px;
  height: 12px;
  background: var(--ink-soft);
  opacity: 0.55;
}

.progress__bar {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: var(--r-full);
  background: var(--green);
}

.progress--over .progress__bar {
  background: var(--alert);
}

/* --- Flash and inline messages -------------------------------------------- */

.flash {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  border: var(--border);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--text-dense);
  font-weight: 600;
}

.flash--notice {
  border-color: transparent;
  border-left-color: var(--green);
  background: var(--green-wash);
  color: var(--green-ink);
}

.flash--alert {
  border-color: transparent;
  border-left-color: var(--alert);
  background: var(--alert-wash);
  color: var(--alert);
}

.errors {
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid transparent;
  border-left: 3px solid var(--alert);
  border-radius: var(--r-sm);
  background: var(--alert-wash);
  font-size: var(--text-dense);
  color: var(--alert);
}

.errors strong {
  font-weight: 800;
}

.errors ul {
  margin: var(--s2) 0 0;
  padding-left: var(--s5);
}

/* --- Empty states --------------------------------------------------------- */

.empty {
  padding: var(--s10) var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--paper);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-dense);
}

.empty strong {
  display: block;
  margin-bottom: var(--s2);
  color: var(--ink);
  font-size: var(--text-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- Summary figures ------------------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s6);
  padding: 0;
  border: 0;
}

.facts > div {
  min-width: 0;
  padding: var(--s4) var(--s5);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.facts dt {
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.facts dd {
  margin: var(--s2) 0 0;
  font-family: var(--mono);
  font-size: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.facts dd.dense {
  font-size: var(--text-dense);
  letter-spacing: -0.01em;
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  font-size: var(--text-dense);
}

.pagination__spacer {
  flex: 1 1 auto;
}

/* --- Audited values ------------------------------------------------------- */

.diff {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-fine);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff del {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--alert-wash);
  color: var(--alert);
  text-decoration: line-through;
}

.diff ins {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--green-wash);
  color: var(--green-ink);
  text-decoration: none;
}

/* --- Timer panel ---------------------------------------------------------- */

.timer-panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  margin-bottom: var(--s8);
  padding: var(--s6);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--paper);
}

/* While the clock runs, the panel carries a green edge. */
.timer-panel--running::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--green);
}

.timer-panel__form {
  display: contents;
}

.timer-panel__fields {
  display: flex;
  gap: var(--s4);
  flex: 1 1 420px;
  min-width: 0;
}

.timer-panel__fields .field {
  margin-bottom: 0;
}

.timer-panel__project {
  flex: 0 0 220px;
  min-width: 0;
}

.timer-panel__description {
  flex: 1 1 auto;
  min-width: 0;
}

.timer-panel__action {
  display: flex;
  align-items: flex-end;
  gap: var(--s6);
}

/* The one piece of state people check a hundred times a day. */
.timer-counter {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-counter);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.timer-counter--running {
  color: var(--green);
}

.timer-counter__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.btn--timer {
  min-width: 132px;
  padding: var(--s3) var(--s6);
  font-size: var(--text-body);
}

.btn--running {
  border-color: var(--green);
  background: var(--green);
}

.btn--running:hover {
  border-color: var(--green-lift);
  background: var(--green-lift);
}

@media (max-width: 720px) {
  .timer-panel__fields {
    flex-direction: column;
    flex-basis: 100%;
    gap: var(--s3);
  }

  .timer-panel__project {
    flex: 1 1 auto;
  }

  .timer-panel__action {
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
  }

  .timer-counter {
    font-size: 40px;
  }
}

/* --- Day groups ----------------------------------------------------------- */

.day {
  margin-bottom: var(--s8);
}

.day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-strong);
}

.day__title {
  font-size: var(--text-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.day__total {
  font-family: var(--mono);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Editing in place ----------------------------------------------------- */

/* Reads as text until you go near it, so a dense table stays a table. */
.inline-form {
  margin: 0;
}

.cell-edit {
  min-width: 170px;
  padding: var(--s2) var(--s2) !important;
}

.inline-form select,
.inline-form input[type="text"] {
  padding: var(--s1) var(--s2);
  border-color: transparent;
  background: transparent;
  font-size: var(--text-dense);
}

.inline-form select:hover,
.inline-form input[type="text"]:hover,
.inline-form select:focus,
.inline-form input[type="text"]:focus {
  border-color: var(--line-strong);
  background: var(--paper);
}

.inline-form--panel select,
.inline-form--panel input[type="text"] {
  padding: var(--s2) var(--s3);
  border-color: var(--line-strong);
  background: var(--paper);
  font-size: var(--text-body);
}

table.data tbody tr.entry--running td,
table.data tbody tr.entry--running:hover td {
  background: var(--green-wash);
}

.entry--running .num {
  color: var(--green-ink);
  font-weight: 600;
}

.entry-state {
  text-align: right;
}

.entry-state form {
  display: inline-block;
}

.entry-state > * + * {
  margin-left: var(--s2);
}

/* --- Requests ------------------------------------------------------------- */

.request-list {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.request-card {
  padding: var(--s5);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.request-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.request-card__labels {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-dense);
}

.request-card__notes {
  margin: var(--s4) 0 0;
  font-size: var(--text-dense);
}

.request-card__notes dt {
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.request-card__notes dd {
  margin: var(--s1) 0 var(--s3);
}

.request-card__resolution {
  margin: var(--s3) 0 0;
}

/* The comment belongs to whichever button you press, so both live in one form. */
.request-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--border);
}

.request-actions .field {
  flex: 1 1 280px;
  margin-bottom: 0;
}

.request-actions__buttons {
  display: flex;
  gap: var(--s2);
}

/* The proposal fields sit on one line on a desktop and stack on a phone. */
.request-proposal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--s4);
}

fieldset {
  min-width: 0;
  margin: 0 0 var(--s4);
  padding: 0;
  border: 0;
}

fieldset legend {
  margin-bottom: var(--s2);
  padding: 0;
  font-size: var(--text-fine);
  font-weight: 700;
  color: var(--ink-2);
}

fieldset .checkbox {
  margin-bottom: var(--s2);
}

/* The size of the pending queue, next to the section it belongs to. */
.nav-badge {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--green-lift);
  color: #101803;
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* --- Searchable select ---------------------------------------------------- */

/* Wraps a real <select>, which stays in the form and keeps carrying the value.
   See combobox_controller.js. */
.combobox {
  position: relative;
}

/* Matched to .inline-form--panel input[type="text"], which is what the running
   entry's field is, so the chevron keeps its room instead of losing the
   padding to a shorthand of the same weight. */
.combobox input[type="text"] {
  padding-right: var(--s8);
  text-overflow: ellipsis;
}

.combobox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s3);
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.combobox__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--s1));
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s1);
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.combobox__option {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--text-dense);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.combobox__option[aria-selected="true"] {
  font-weight: 800;
}

.combobox__option.is-active {
  background: var(--blue-wash);
  color: var(--blue);
}

.combobox__empty {
  padding: var(--s3);
  font-size: var(--text-dense);
  color: var(--ink-soft);
}

/* --- Reports -------------------------------------------------------------- */

/* Two ways of reading the same hours, and the current one is underlined. */
.tabs {
  display: flex;
  gap: var(--s6);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line-strong);
}

.tabs__link {
  padding: var(--s2) 0 var(--s3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: var(--text-dense);
  font-weight: 700;
  text-decoration: none;
}

.tabs__link:hover {
  color: var(--ink);
  text-decoration: none;
}

.tabs__link[aria-current="page"] {
  border-bottom-color: var(--blue);
  color: var(--ink);
}

/* --- Charts --------------------------------------------------------------- */

/* Dibujados en el servidor, en SVG, sin ninguna librería: se imprimen, salen en
   el escritorio y cuestan lo mismo que el resto de la página. Los dos van
   juntos, y cuando no caben en fila se apilan. */

.charts {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(360px, 3fr);
  gap: var(--s4);
  margin-bottom: var(--s8);
}

@media (max-width: 900px) {
  .charts {
    grid-template-columns: 1fr;
  }
}

.chart {
  min-width: 0;
  padding: var(--s5);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.chart__title {
  font-size: var(--text-dense);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.chart__note,
.chart__blank {
  margin: 0;
  font-size: var(--text-fine);
  color: var(--ink-soft);
}

.chart__body {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}

.chart__donut {
  flex: 0 0 auto;
  width: 160px;
}

/* --- El anillo ------------------------------------------------------------ */

.donut {
  display: block;
  width: 100%;
  height: auto;
}

/* El hueco entre porciones lo abre el propio trazo: nunca hace falta un borde
   de otro color para separar dos colores. */
.donut__arc {
  transition: opacity 120ms ease-out;
}

.donut:hover .donut__arc {
  opacity: 0.45;
}

.donut .donut__arc:hover {
  opacity: 1;
}

.donut__total {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.donut__caption {
  fill: var(--ink-soft);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* --- La leyenda ----------------------------------------------------------- */

/* No es decoración: cuatro de los siete colores no llegan a 3:1 contra el
   blanco, y lo que los hace legibles es llevar el nombre y las horas al lado.
   Un anillo sin leyenda aquí es un anillo mal hecho. */

.legend {
  flex: 1 1 190px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-dense);
}

.legend__item {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 3px 0;
}

.legend__swatch {
  position: relative;
  top: 1px;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend__value {
  font-weight: 600;
}

.legend__share {
  width: 42px;
  text-align: right;
  color: var(--ink-soft);
}

/* --- Las barras ----------------------------------------------------------- */

.columns {
  display: block;
  width: 100%;
  height: auto;
}

.chart__bar {
  fill: var(--blue-lift);
}

.chart__bar:hover {
  fill: var(--blue);
}

/* El fin de semana se marca por detrás, no con un color propio: la forma de un
   parte de horas es, sobre todo, la forma de sus fines de semana. */
.chart__band {
  fill: var(--canvas);
}

.chart__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* Estas medidas están en unidades del viewBox, no en píxeles: el SVG se escala
   al ancho de la tarjeta, así que el texto tiene que salir de aquí bastante más
   grande de lo que acabará viéndose. */
.chart__tick,
.chart__label {
  fill: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.chart__value {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Ahora mismo ---------------------------------------------------------- */

/* Quién está trabajando y en qué, arriba del todo de la actividad del equipo.
   Cuando hay alguien en marcha se enciende con el verde de la casa, el mismo
   que lleva el panel del timer. */

.now {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: var(--border);
  border-radius: var(--r);
  background: var(--paper);
}

.now--busy {
  border-color: var(--green-lift);
  background: var(--green-wash);
}

.now--busy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--green);
}

.now__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.now__title {
  font-size: var(--text-dense);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.now--busy .now__title {
  color: var(--green-ink);
}

.now__count {
  font-size: var(--text-dense);
  font-weight: 700;
  color: var(--ink-2);
}

.now__idle,
.now__note {
  margin: 0;
  font-size: var(--text-dense);
  color: var(--ink-soft);
}

.now__note {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.now__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nombre, en qué, desde cuándo y el contador. El contador se queda pegado a la
   derecha porque es lo que se lee en diagonal. */
.now__row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}

.now__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.now__who {
  font-weight: 700;
}

.now__what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-dense);
}

.now__project {
  font-weight: 600;
}

.now__description {
  color: var(--ink-soft);
}

.now__description::before {
  content: " · ";
}

.now__elapsed {
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  .now__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .now__what {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* --- Contadores de pestaña ------------------------------------------------ */

.tabs__count {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.tabs__link[aria-current="page"] .tabs__count {
  background: var(--blue-wash);
  color: var(--blue);
}

/* Un apunte debajo del valor de una celda: el rol y, colgando de él, lo que
   ese rol tiene de más. */
.cell-note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-micro);
  color: var(--ink-soft);
}