/* Sections, table headings, list rows, nested rows, badges and tags. */

/* The small capitalised label the design puts above a list, e.g. КОЙ НЕ Е ПЛАТИЛ.
   It is a label, not a heading, so it is deliberately not an h2. */
.slabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
}

.sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------- surfaces */
.section {
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
}

/* The heading and its controls wrap: "Задачи" plus the two segmented
   controls and the board link are 401px wide, over a phone's 375px. */
.section > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /*margin-bottom: 16px;*/
}

/* ------------------------------------------------------------------- rows */
.thead {
  display: grid;
  gap: var(--table-gap);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
  padding: 0 14px 8px;
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: grid;
  align-items: center;
  gap: var(--table-gap);
  background: var(--row);
  border-radius: 16px;
  padding: 8px 14px;
}

/* A form that is a row cell (e.g. the check circle's form) lays out as a
   flex box, so its button sits on the row's centre line instead of at the
   top of an inline line box. */
.row > form {
  display: flex;
  align-items: center;
}

.row.red {
  background: var(--red-bg);
}

.row.orange {
  background: var(--orange-bg);
}

.row.hatch {
  background: var(--hatch);
}

.child {
  display: grid;
  align-items: center;
  gap: var(--table-gap);
  background: var(--card);
  border-radius: 10px;
  padding: 0 18px;
  min-height: 34px;
  /* Only the indent; the space below comes from the list's own row gap. */
  margin-left: 10px;
}

/* The leading cell of a row that carries more than one thing before its text:
   a fold arrow, a circle, the name. Keeping them in one cell is what lets a
   nested row put its elbow next to its own icon instead of a column away. */
.cli-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.row .name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.row .sub {
  /*font-size: 12px;*/
  line-height: 1.2;
}

/* The name + sub block beside an avatar or badge: a tight flex column that
   is centred on the badge, so the text sits optically centred instead of
   inheriting the row's taller line boxes. */
.name-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* More specific than ".row .name + .sub" below, so the 1px wins inside a
   name block. */
.row .name-block > .name + .sub {
  margin-top: 1px;
}

.row  .name + .sub {
  margin-top: 3px;
}
/* A cell that is nothing but a .sub keeps the row's own size: the 12px is
   for the second line under a name, not for a column of its own. */
.row > .sub,
.child > .sub {
  font-size: 14px;
}

.num {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* The client circle. Measured from the prototype: 42px with a 29px icon on the
   dashboard, smaller variants for denser lists. */
.glyph {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  /* A circle deforms the moment it is allowed to shrink, so it never is:
     the text beside it gives way instead. */
  flex: none;
}

/* Project badges (code or uploaded logo) share one corner shape at every
   size: 30% of the box, so a 21px badge and a 56px one look like one family. */
.code {
  width: 21px;
  height: 21px;
  border-radius: 30%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--c,var(--muted));
}

/* The badge colour is data: it comes from the database as --c and can be any
   of the eighteen swatches or a colour the user picked. White holds up on
   five of them; on yellow it is 1.70:1. So the label is not a fixed colour at
   all - it is computed from --c.
   --code-ink is the badge colour run through the WCAG relative-luminance sum
   (sRGB channels raised to ~2.2, weighted 0.2126/0.7152/0.0722) and compared
   with 0.179, the luminance at which white and black are equally readable.
   The difference is multiplied by a large number, so every channel of the
   result lands far outside 0-255 and is clamped to either 0 or 255: the
   switch is pure black or pure white. Mixing 90% of that with the badge
   colour keeps a hint of the hue and still clears 4.5:1 on every swatch
   (lowest is steel, 4.85:1; yellow goes from 1.70:1 to 10.85:1).
   Browsers without relative colours keep the white above. */
@supports (color: rgb(from white calc(pow(r / 255, 2.2) * 255) g b)) {
  .code {
    --code-ink: rgb(from var(--c,var(--muted))
      calc((pow(r / 255,2.2) * .2126 + pow(g / 255,2.2) * .7152 + pow(b / 255,2.2) * .0722 - .179) * -100000)
      calc((pow(r / 255,2.2) * .2126 + pow(g / 255,2.2) * .7152 + pow(b / 255,2.2) * .0722 - .179) * -100000)
      calc((pow(r / 255,2.2) * .2126 + pow(g / 255,2.2) * .7152 + pow(b / 255,2.2) * .0722 - .179) * -100000));
    color: color-mix(in srgb,var(--code-ink) 90%,var(--c,var(--muted)));
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* A filled tag is white on red in the light theme and dark ink on red in the
   dark one; the plain --red carried white at 3.48:1 / 2.98:1. */
.tag.red {
  background: var(--red-fill);
  color: var(--on-fill);
}

/* The small grey chip that marks the employer and its work, wherever a name
   or a project sits: client list, board cards, dashboard rows. */
.kind-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
  text-transform: none;
}

.tag.orange {
  background: var(--orange-bg);
  color: var(--orange-ink);
}

/* "в срок" is read against grey rows as often as white ones, so the green is
   mixed from the green token rather than the softer card tint. */
.tag.green {
  background: color-mix(in srgb,var(--green) 16%,var(--card));
  color: var(--green-ink);
}

.tag.grey {
  background: var(--card2);
  color: var(--muted);
}

.tag.blue {
  background: var(--blue-bg);
  color: var(--blue-ink);
}

/* Every tinted tag carries a hairline ring in its own colour, so it stays a
   chip whether the row under it is white, grey or tinted. */
.tag.orange,
.tag.green,
.tag.blue,
.tag.grey,
.tag.soft-red,
.tag.pink {
  box-shadow: inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);
}

/* On a phone a row that has no column headings to lose stacks into a single
   column. The list screens do NOT: a stack of eight unlabelled values means
   nothing, so they keep their columns and their heading and scroll sideways
   inside their own section - see the max-width:900px block in tables.css,
   which loads after this file and overrides these two rules for .t-* rows.
   That is also why neither declaration is !important any more. */
@media (max-width:900px) {
  .row,
  .child {
    grid-template-columns: 1fr;
  }
  .child {
    margin-left: 0;
  }
  .thead {
    display: none;
  }
}

/* ----------------------------------------------------- data-driven bits */
/* An uploaded logo takes the badge's place: same size and corners, no colour. */
.code.logo {
  object-fit: cover;
  background: var(--card2);
  padding: 0;
  display: block;
  /* Inner hairline so a light logo still has an edge against a light row.
     An inset shadow would hide behind the picture, so it is an outline
     pulled 1px inwards, which is painted on top and follows the radius. */
  outline: 1px solid color-mix(in srgb,var(--text) 12%,transparent);
  outline-offset: -1px;
}

.code.lg {
  width: 36px;
  height: 36px;
  border-radius: 30%;
  font-size: 12px;
}

/* Page identity badge in a single project's header. */
.code.xl {
  width: 56px;
  height: 56px;
  border-radius: 30%;
  font-size: 18px;
}

/* ------------------------------------------------------------ elements */
.glyph.sm {
  width: 24px;
  height: 24px;
}

/* The mark of a subscription, wherever one is listed: filled rather than
   outlined, so a recurring line is told apart from a one-off at a glance. */
.glyph.sub {
  background: var(--ink);
  color: var(--ink-text);
  border: 0;
}

.rows-tight {
  gap: 8px;
}

/* ------------------------------------------- list screens, from the design */
.tag.soft-red {
  background: var(--red-bg);
  color: var(--red-ink);
}

.tag.pink {
  background: var(--pink-bg);
  color: var(--purple-ink);
}

/* Every list section is titled the same way: a 20px title above the card,
   with its actions on the right. */
.list-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 4px 0 -8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list-title .btn,
.list-title .filter-set {
  font-size: 12px;
}

/* Rows that act as links or open something: the cursor says so. */
a.row,
a.child,
summary.row,
[data-href],
[data-modal],
[data-client-modal],
.hoverable {
  cursor: pointer;
}

/* A row reached through a #hash link blinks once so the eye lands on it. */
/* One ring pulse on a blue wash, then the wash fades back to the
   row's own colour. The wash is an overlay behind the content, so the fade
   works whatever the row's background is (grey, red, orange, hatched). */
/* The wash and the ring rise together; the moment the ring starts to fade,
   the wash starts fading too, and both are gone at the end. */
@keyframes flash-once {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(26,140,255,0); }
  20%  { opacity: 1; box-shadow: 0 0 0 3px var(--blue); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(26,140,255,0); }
}

.flash-once {
  position: relative;
  z-index: 0;
}

.flash-once::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--blue-bg);
  pointer-events: none;
  animation: flash-once 2s ease-in-out 1 forwards;
}