* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-card-background: (<color>) Controls the background color of the card container.
 * @prop --tct-card-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the card container.
 * @prop --tct-card-color: (<color>) Controls the text color of the card container (legacy alias).
 * @prop --tct-card-font-color: (<color>) Controls the text color of the card container.
 * @prop --tct-card-font-size: (<length-percentage>) Controls the font size of the card title text.
 * @prop --tct-card-font-weight: (<number>) Controls the font weight of the card title text.
 * @prop --tct-card-title-line-height: (<number> | <length-percentage>) Controls the line height of the card title text.
 * @prop --tct-card-description-line-height: (<number> | <length-percentage>) Controls the line height of the card description text.
 * @prop --tct-card-border-color?: (<color>) Controls the optional border color of the card container.
 * @prop --tct-card-border-radius: (<length-percentage>) Controls the corner radius of the card container.
 * @prop --tct-card-border-style: (<custom-ident>) Controls the border style of the card container.
 * @prop --tct-card-border-width?: (<length>+) Controls the optional border width of the card container.
 * @prop --tct-card-gap: (<length-percentage>) Controls the gap between the card avatar (if present) and its content.
 * @prop --tct-card-content-gap: (<length-percentage>) Controls the gap between elements inside the card content area.
 * @prop --tct-card-height: (<length-percentage>) Controls the height of the card container.
 * @prop --tct-card-min-height: (<length-percentage>) Controls the minimum height of the card container.
 * @prop --tct-card-max-height?: (<length-percentage>) Controls the optional maximum height of the card container.
 * @prop --tct-card-overflow: (<custom-ident>) Controls the overflow behavior of the card container.
 * @prop --tct-card-padding: (<length-percentage>+) Controls the inner padding of the card container.
 * @prop --tct-card-avatar-size: (<length>) Controls the size of the avatar slot rendered inside the card.
 * @prop --tct-card-description-font-size?: (<length-percentage>) Controls the optional font size of the card description text.
 * @prop --tct-card-description-line-count: (<integer>) Controls the maximum number of lines for the card description before clamping.
 * @prop --tct-card-title-line-count: (<integer>) Controls the maximum number of lines for the card title before clamping.
 * @prop --tct-card-focus-visible-box-shadow: (*) Controls the box shadow applied to the clickable card when focused via keyboard.
 * @prop --tct-card-static-background?: (<color>) Controls the optional background of the card container in its static appearance.
 * @prop --tct-card-static-font-color: (<color>) Controls the text color of the card container in its static appearance.
 * @prop --tct-card-bar-width: (<length>) Controls the width of the colored accent bar on the side of the card.
 * @prop --tct-card-bar-color-primary: (<color>) Controls the color of the accent bar when color is primary.
 * @prop --tct-card-bar-color-secondary: (<color>) Controls the color of the accent bar when color is secondary.
 * @prop --tct-card-bar-color-tertiary: (<color>) Controls the color of the accent bar when color is tertiary.
 * @prop --tct-card-bar-color-info: (<color>) Controls the color of the accent bar when color is info.
 * @prop --tct-card-bar-color-success: (<color>) Controls the color of the accent bar when color is success.
 * @prop --tct-card-bar-color-warning: (<color>) Controls the color of the accent bar when color is warning.
 * @prop --tct-card-bar-color-alert: (<color>) Controls the color of the accent bar when color is alert.
 * @prop --tct-card-bar-color-accent-1: (<color>) Controls the color of the accent bar when color is accent-1.
 * @prop --tct-card-bar-color-accent-2: (<color>) Controls the color of the accent bar when color is accent-2.
 * @prop --tct-card-bar-color-accent-3: (<color>) Controls the color of the accent bar when color is accent-3.
 * @prop --tct-card-bar-color-accent-4: (<color>) Controls the color of the accent bar when color is accent-4.
 * @prop --tct-card-bar-color-accent-5: (<color>) Controls the color of the accent bar when color is accent-5.
 * @prop --tct-card-bar-color-accent-6: (<color>) Controls the color of the accent bar when color is accent-6.
 * @prop --tct-card-bar-color-accent-7: (<color>) Controls the color of the accent bar when color is accent-7.
 * @prop --tct-card-bar-color-accent-8: (<color>) Controls the color of the accent bar when color is accent-8.
 * @prop --tct-card-bar-color-accent-9: (<color>) Controls the color of the accent bar when color is accent-9.
 * @prop --tct-card-bar-color-accent-10: (<color>) Controls the color of the accent bar when color is accent-10.
 * @prop --tct-card-bar-color-accent-11: (<color>) Controls the color of the accent bar when color is accent-11.
 * @prop --tct-card-bar-color-accent-12: (<color>) Controls the color of the accent bar when color is accent-12.
 * @prop --tct-card-elevation-1-box-shadow: (*) Controls the box shadow of the card in elevation level 1.
 * @prop --tct-card-elevation-1-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 1.
 * @prop --tct-card-elevation-1-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 1.
 * @prop --tct-card-elevation-2-box-shadow: (*) Controls the box shadow of the card in elevation level 2.
 * @prop --tct-card-elevation-2-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 2.
 * @prop --tct-card-elevation-2-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 2.
 * @prop --tct-card-elevation-3-box-shadow: (*) Controls the box shadow of the card in elevation level 3.
 * @prop --tct-card-elevation-3-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 3.
 * @prop --tct-card-elevation-3-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 3.
 * @prop --tct-card-elevation-4-box-shadow: (*) Controls the box shadow of the card in elevation level 4.
 * @prop --tct-card-elevation-4-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 4.
 * @prop --tct-card-elevation-4-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 4.
 * @prop --tct-card-elevation-5-box-shadow: (*) Controls the box shadow of the card in elevation level 5.
 * @prop --tct-card-elevation-5-hover-box-shadow: (*) Controls the box shadow of the clickable card on hover in elevation level 5.
 * @prop --tct-card-elevation-5-active-box-shadow: (*) Controls the box shadow of the clickable card when active in elevation level 5.
 */
:host {
  display: block;
}

.container {
  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
  --comp-bar-width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
  --comp-card-padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
  position: relative;
  width: 100%;
  text-align: start;
  height: var(--tct-card-height, 100%);
  min-height: var(--tct-card-min-height, auto);
  display: grid;
  gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
  margin: 0;
  color: var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, inherit)));
  backdrop-filter: var(--tct-card-backdrop-filter);
  background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
  border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
  border-color: var(--tct-card-border-color, var(--t-card-border-color, transparent));
  border-style: var(--tct-card-border-style, solid);
  border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));
  backdrop-filter: var(--tct-card-backdrop-filter, none);
  padding: var(--comp-card-padding);
  text-decoration: none;
  transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
  overflow: var(--tct-card-overflow, auto);
  max-height: var(--tct-card-max-height, none);
  box-shadow: var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0);
}
.container.is-small {
  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
}
.container.has-avatar {
  grid-template-columns: var(--comp-avatar-size) 1fr;
  --tct-avatar-width: var(--comp-avatar-size);
  --tct-avatar-height: var(--comp-avatar-size);
  --tct-icon-size: var(--comp-avatar-size);
}
.container.elevation-1 {
  --comp-card-shadow: var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
}
.container.elevation-2 {
  --comp-card-shadow: var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
}
.container.elevation-3 {
  --comp-card-shadow: var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
}
.container.elevation-4 {
  --comp-card-shadow: var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
}
.container.elevation-5 {
  --comp-card-shadow: var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}
.container.clickable {
  cursor: pointer;
}
.container.clickable:hover.elevation-1 {
  --comp-card-shadow: var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
}
.container.clickable:hover.elevation-2 {
  --comp-card-shadow: var(--tct-card-elevation-2-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
}
.container.clickable:hover.elevation-3 {
  --comp-card-shadow: var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
}
.container.clickable:hover.elevation-4 {
  --comp-card-shadow: var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}
.container.clickable:hover.elevation-5 {
  --comp-card-shadow: var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}
.container.clickable:active.elevation-1 {
  --comp-card-shadow: var(--tct-card-elevation-1-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
}
.container.clickable:active.elevation-2 {
  --comp-card-shadow: var(--tct-card-elevation-2-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
}
.container.clickable:active.elevation-3 {
  --comp-card-shadow: var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
}
.container.clickable:active.elevation-4 {
  --comp-card-shadow: var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
}
.container.clickable:active.elevation-5 {
  --comp-card-shadow: var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
}
.container.clickable:focus-visible {
  --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);
  box-shadow: var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow));
}
.container.is-static {
  cursor: auto;
  background: var(--tct-card-static-background, var(--tct-card-background, none));
  color: var(--tct-card-static-font-color, var(--tct-card-color, inherit));
  backdrop-filter: none;
  border-radius: 0;
  border: 0;
  text-decoration: initial;
  padding: 0;
}
:host([bar]) .container.is-static {
  padding-left: var(--comp-card-padding);
}
.container.is-static, .container.is-static:hover, .container.is-static:active {
  box-shadow: none;
}

.content {
  overflow: hidden;
  display: grid;
  gap: var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));
  align-content: start;
}

h3,
p {
  margin: 0;
  padding: 0;
}

h3 {
  font-weight: var(--tct-card-font-weight, var(--t-card-font-weight, 600));
  font-size: var(--tct-card-font-size, var(--t-card-font-size, var(--const-px-17, 17px)));
  line-height: var(--tct-card-title-line-height, var(--app-line-height, 1.428571429em));
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--tct-card-title-line-count, 1);
  -webkit-box-orient: vertical;
}

p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--tct-card-description-line-count, 2);
  -webkit-box-orient: vertical;
  font-size: var(--tct-card-description-font-size, inherit);
  line-height: var(--tct-card-description-line-height, var(--app-line-height, 1.428571429em));
}

.bar {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--comp-bar-width);
  background: var(--comp-bar-color);
  height: 100%;
}
.bar.color-primary {
  --comp-bar-color: var(--tct-card-bar-color-primary, var(--t-primary, #5446a4));
}
.bar.color-secondary {
  --comp-bar-color: var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc));
}
.bar.color-tertiary {
  --comp-bar-color: var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc));
}
.bar.color-info {
  --comp-bar-color: var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1));
}
.bar.color-success {
  --comp-bar-color: var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00));
}
.bar.color-warning {
  --comp-bar-color: var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500));
}
.bar.color-alert {
  --comp-bar-color: var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500));
}
.bar.color-accent-1 {
  --comp-bar-color: var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252));
}
.bar.color-accent-2 {
  --comp-bar-color: var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952));
}
.bar.color-accent-3 {
  --comp-bar-color: var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052));
}
.bar.color-accent-4 {
  --comp-bar-color: var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052));
}
.bar.color-accent-5 {
  --comp-bar-color: var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052));
}
.bar.color-accent-6 {
  --comp-bar-color: var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099));
}
.bar.color-accent-7 {
  --comp-bar-color: var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0));
}
.bar.color-accent-8 {
  --comp-bar-color: var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0));
}
.bar.color-accent-9 {
  --comp-bar-color: var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0));
}
.bar.color-accent-10 {
  --comp-bar-color: var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0));
}
.bar.color-accent-11 {
  --comp-bar-color: var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0));
}
.bar.color-accent-12 {
  --comp-bar-color: var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299));
}