/*
 * shape.css
 * =========
 * Jimmy Design Standard v1.0, section 3: the shape.
 *
 * LOADED LAST, ON PURPOSE. RejuvStem's sheets were written square, and its
 * lint refused any border-radius at all. jimmybluff.com is round: pill
 * buttons, 12 to 16px cards, circular portraits, soft navy shadows. Rather
 * than touch three thousand lines to change a corner, this sheet comes after
 * every other one in base.html, so on an equal selector the round wins.
 *
 * WHAT IT DOES NOT DO. No colors, no layout, no type sizes: those live in
 * app.css and the page sheets. This is corners, shadows and the two type
 * rules the display face needs (condensed caps, hosted weights only).
 *
 * The lint that replaced RejuvStem's `test_square_corners` allows 0, 50%,
 * the pill (999px) and anything up to 16px; over that is refused.
 */

/* ------------------------------------------------------------ controls --- */
button, .button, .btn, .subtab, .chip, .detail-open, .stale-go,
.samplebar-out, .profile-item-button, .filters-actions button,
button.mini, .button-quiet, .button-sso {
  border-radius: 999px;
}

/* `.tab` IS NOT IN THAT LIST, and that is the point of this rule sitting
   under it. The board's view tabs are a tab strip, not a row of buttons: the
   top corners round, the bottom two stay square, and the box lays a pixel
   over the masthead's bottom edge so the open one runs into the board below
   it. Made a pill, the row reads as three buttons that happen to be centered
   in a green band. The 8px and the -1px live in board-layout.css beside the
   rest of the strip; this only keeps the pill sweep off them. */
.tab { border-radius: 8px 8px 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="password"], input[type="search"], select, textarea, input.code,
.stage-pick, .search-box input, .ts-search input {
  border-radius: 8px;
}

/* Tags and badges are pills too; the one square badge left would read as a
   different kind of thing from the round ones beside it. */
.badge, .tag, .rolepill, .fly-code, .form-flag, .mail-stage, .card-who,
.samplebar-tag, .devbar-tag, .chan, .mgr-tok {
  border-radius: 999px;
}

/* --------------------------------------------------------------- panels --- */
.card, .card-item, .col, .review, .stat, .ghl-card, .home-card, .people-row {
  border-radius: 12px;
}

.flyout { border-radius: 14px 0 0 14px; }
.profile-menu, .search-suggest, .search-list, .sb-fly, .sb-tip,
.mgr-editor .panel, .stale, .filters {
  border-radius: 12px;
}

.card-brand { border-radius: 14px 14px 0 0; }
.card:not(.kind-action):not(.kind-waiting):not(.kind-done):not(.kind-attention) {
  border-radius: 14px;
}

.sb-item, .sb-kid, .mgr-item { border-radius: 8px; }
.sb-item.on, .mgr-item.on { border-radius: 8px; }
.sb-mark, .avatar, .navmark, .ts-mark img { border-radius: 50%; }

/* Shadows are navy at low alpha, never black; a black shadow on the off-white
   ground goes muddy. */
.card { box-shadow: 0 4px 14px rgba(40, 58, 108, .07); }
.flyout, .profile-menu, .sb-fly { box-shadow: 0 12px 40px rgba(40, 58, 108, .10); }

/* ----------------------------------------------------------------- type --- */
/* THE DISPLAY FACE IS CONDENSED CAPS. Myriad Pro Cond is hosted at 600, 700
   and 800 only, so a heading that asked for 300 or 400 under RejuvStem's
   serif now asks for a weight that exists. */
h1, h2, .mgr-h1, .brand, .navwordmark, .sb-word, .fly-name, .col-name,
.masthead .wordmark, .card-brand-word {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
h1, .mgr-h1 { font-size: 30px; line-height: 1.05; }
h2, .mgr-h2 { font-size: 22px; font-weight: 600; }
.fly-name { font-size: 20px; text-transform: none; letter-spacing: 0; }
.sb-word { font-size: 17px; letter-spacing: .02em; }

/* The eyebrow signature: condensed, 13px, .08em, blue on light. */
.eyebrow, .detail-head, .send-head, .mgr-list-head, .send-lbl, .links b,
.samplebar-tag, .devbar-tag {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .08em;
}

/* Card names are the heading face at sentence case, not the text face. */
.card-name { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.1; }

/* ------------------------------------------------------------ the chip --- */
/* THE DEADLINE CHIP. When the policy window shuts: tint at rest, amber inside
   the warning lead time, red once it has closed. Mono, because it is a date. */
.deadline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tint-light);
  color: var(--navy);
  white-space: nowrap;
}
.deadline::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.deadline.is-inside { background: var(--watch-tint); color: var(--watch); }
.deadline.is-closed { background: var(--attention-tint); color: var(--attention); }

/* The one line of context under a name: who with, when, which cohort. */
.card-ctx { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); margin-top: 3px; }

/* --------------------------------------------------------- the journey --- */
/* The board's own tab strip names which board this is. */
.journey-switch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.journey-switch a {
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  color: var(--ink-mute); text-decoration: none; border: 1px solid transparent;
}
.journey-switch a:hover { color: var(--blue); background: var(--tint-light); }
.journey-switch a.on { background: var(--tint-light); color: var(--blue); border-color: var(--tint); }

/* ------------------------------------------------------- the board card --- */
/* BRANDED, NOT RECOLORED. The card arrived from RejuvStem wearing their
   vocabulary: a `01a` badge whose letter encoded the kind, a phrase taken
   from the GoHighLevel stage name, and three rings holding one letter each.
   All of it read as somebody else's system in this one's colors.
   See the note in `board.py` beside `substate` for what went and why. */

.card { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 9px; }

/* A PAGE CARD IS NOT A BOARD CARD, and `.card` unfortunately names both. The
   rule above is for the small cards in a column; it was also landing on the
   sign-in panel, the error pages and the accept screens, which want room to
   read in rather than a dense tile.

   THE VISIBLE SYMPTOM WAS A MUSHROOM. `.card-brand` bleeds to the card's edges
   with `margin: -2rem`, which cancels the 2rem padding `app.css` gives a page
   card. Once this rule cut that padding to 12px the negative margin no longer
   matched it, so the navy band hung about 19px past the white on each side.

   `.centered` is what every page-level card sits in and no board card ever
   does, so this puts the padding back for exactly those. The band and the
   padding are two numbers that have to agree; the alternative is deriving one
   from the other, which is more machinery than a collision this narrow
   deserves. */
.centered > .card {
  display: block;
  padding: 2rem;
}

.card-top { display: flex; align-items: center; gap: 8px; }

/* THE DISC. The site is full of round portraits - every practitioner, every
   reviewer - and a column of these reads as people rather than as rows. Two
   letters, because a photograph is not something this board has. */
.card-disc {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-light);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
}

/* The kind is already the left stripe and the ground; the disc must not
   restate it in a third place. It shifts only where the card's own ground has
   moved out from under it, so the disc keeps its edge. */
.card.kind-attention .card-disc { background: var(--white); color: var(--attention); }
.card.kind-done .card-disc { background: var(--white); color: var(--done); }

.card-name {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.15;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-chev { flex: none; color: var(--ink-mute); font-size: 15px; line-height: 1; }

.card-ctx {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
  /* Two lines, then an ellipsis. A context is one sentence about a workshop
     or an appointment; a card that grows to fit a long one is a card that
     pushes the next three off the screen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE FORMS, BY NAME. A ring with `R` in it means nothing to somebody who has
   not been told; "Waiver" means what it says. Outstanding is an outline,
   received is filled with a tick - two signals, not just a color. */
.card-forms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }

.form-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--tint);
  background: transparent;
  color: var(--ink-mute);
  white-space: nowrap;
}

.form-pill.is-in {
  border-color: var(--done);
  background: var(--done-tint);
  color: var(--done);
}

.form-tick { font-size: 9.5px; line-height: 1; }

/* THE FOOT. How long it has been sitting, in words, and whose it is. `7d` is
   a machine value and the eye skips it; "7 days here" is read. Overdue
   replaces the number rather than joining it, because a card past its
   threshold has one thing to say. */
.card-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--ink-mute);
}

.card-clock { white-space: nowrap; }

.card-clock.is-late {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--attention);
}

.card-who {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}

/* Nobody owns it, which is the one version of this worth noticing. Not red:
   an unclaimed card is work waiting, not work that has gone wrong, and the
   red on this board is reserved for the second thing. */
.card-who-none { color: var(--watch); font-style: normal; }

/* A form whose page is not ours yet. The label on the card and in the drawer
   is the journey's ("Waiver"); the link behind it still opens the RejuvStem
   page that column belongs to. Said out loud rather than discovered by a
   client, and it disappears the moment the real form exists. */
.form-standin {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--watch);
  margin-top: 1px;
}