/* Reset, typography and small utilities shared by every screen. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The hidden attribute always wins, even over a component's display:flex or
   display:grid, so toggling a block with `el.hidden` works everywhere. */
[hidden] {
  display: none !important;
}

/* Focus is shown in one place and one way: on the fields you can actually
   see and type into - text inputs, selects and text areas - as a thin outline
   in the text colour. Nothing else takes a ring: a blue band around every
   button, row, card and chip is noise, and the design has none.

   The outline is in the text colour rather than a blue, so it belongs to the
   page instead of announcing itself, and it sits on the field's own edge so
   the field does not appear to grow when it is focused. */
:focus {
  outline: none;
}

input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit])):focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: -1px;
}

/* Visually gone, still there for the keyboard and the screen reader: the
   opposite of display:none, which takes a control out of both. */
.vis-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

/* Reserve the scrollbar's space even when there is nothing to scroll, so a
   page that grows never nudges the layout sideways. */
html {
  color-scheme: light;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg-solid);
  color: var(--text);
  font: 400 14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .15s,background-color .15s,box-shadow .15s;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  border: 0;
  background: none;
  transition: background-color .15s,color .15s,box-shadow .15s;
}

button:hover,
.btn:hover {
  box-shadow: 0 0 0 2px var(--button-hover-ring, var(--line));
}

svg {
  display: block;
  flex: none;
}

h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 2px;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  /* Display sizes take a tight line box: at the body's 1.5 a 28px title
     carries about 7px of invisible leading above and below the letters, which
     reads as spacing nobody asked for under every section title. */
  line-height: 1.15;
  margin: 0;
}

.eyebrow {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

.big {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Amounts are text, so they take the ink tokens: the bright hues are
   2.6-3.5:1 on white and miss AA even at the 30px .big size. */
.money-red {
  color: var(--red-ink);
}

.money-green {
  color: var(--green-ink);
}

.money-orange {
  color: var(--orange-ink);
}

.muted {
  color: var(--muted);
}

.flash {
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 12px;
}

.flash.ok {
  background: var(--green-bg);
  color: var(--green-ink);
}

.flash.bad {
  background: var(--red-bg);
  color: var(--red-ink);
}

@media (max-width:900px) {
  h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Work OS. Screen-level layout classes. Tokens, the frame and shared
   components live in app.css. Nothing in the templates carries inline CSS.

   Two values are data, not style, and arrive as custom properties on the
   element: a project's own colour from the database (--c) and a progress
   bar's width (--w). The rules that consume them are here. */

/* ------------------------------------------------------------- utilities */
.hstack {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gap-6 {
  gap: 6px;
}

.gap-10 {
  gap: 10px;
}

.hstack-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.grow {
  flex: 1 1 0;
}

.trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.min0 {
  min-width: 0;
}

.end {
  justify-self: end;
}

/* Rows of buttons wrap instead of pushing the page sideways: the four
   buttons in a project header alone are wider than a 375px screen. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-14 {
  margin-bottom: 14px;
}

.pull-up {
  margin: -6px 0 14px;
}

.narrow {
  max-width: 660px;
}

.w-180 {
  max-width: 180px;
}

.text-12 {
  font-size: 12px;
}

.w-500 {
  font-weight: 500;
}

.w-400 {
  font-weight: 400;
}

.big-sm {
  font-size: 24px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .12em;
  word-break: break-all;
  margin-top: 6px;
}

.wrap-any {
  word-break: break-all;
}

.spaced-tag {
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  gap: 8px;
}

.full {
  width: 100%;
  height: 44px;
}

/* The tick circle keeps its 22px look, but an invisible ::before stretches
   the target to 30px so it clears the 24px WCAG 2.5.8 minimum; the ring is
   drawn in --line-strong, which is 3.7:1 against the row behind it. */
.check {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--card);
  padding: 0;
}

.check::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}

@media (max-width:900px) {
  .actions {
    justify-content: flex-start;
  }
  .end {
    justify-self: start;
  }
}

/* Last line of defence on a phone: whatever still sticks out is cut instead of
   turning the whole page into a sideways scroller. `clip` rather than `hidden`
   so it never becomes a scroll container itself. Guarded by :has(), because
   the lists only get their own sideways scroll when :has() works (see
   tables.css) - without it, clipping here would put the right-hand columns
   out of reach instead of merely off the fold. */
@supports selector(:has(*)) {
  @media (max-width:900px) {
    main {
      overflow-x: clip;
    }
  }
}

details[open] > summary .caret {
  transform: rotate(90deg);
}

/* --------------------------------------------------------- project page */
.h1-sm {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* Every name starts with a capital letter, whatever was typed. Only the first
   letter is touched, so "easywall.bg" reads "Easywall.bg" and multi-word
   names keep their own casing after the first letter. */
.name::first-letter {
  text-transform: uppercase;
}


/* A section the page can be sent to by name stops below the fixed top bar,
   not under it. */
.section[id] {
  scroll-margin-top: 84px;
}