:root{
  /*--kn-na:#ededed; --kn-low:#f3a2b1; --kn-med:#fbe87e; --kn-high:#b3e8c8; --kn-max:#baafe3;*/
  --kn-na:#e0e0e0; --kn-low:#EE4B6A; --kn-med:#FED703; --kn-high:#4FCC88; --kn-max:#7C65CD;
  --kn-card-w: 390px;      /* center column width (track) */
  --kn-card-h: 240px;
  --kn-grade-cols: repeat(3, minmax(90px, auto)); /* shared track for buttons + times */

  --kn-na-ring:   rgba(224,224,224,0.55);
  --kn-low-ring:  rgba(238, 75,106,0.45);
  --kn-med-ring:  rgba(254,215,  3,0.45);
  --kn-high-ring: rgba( 79,204,136,0.45);
  --kn-max-ring:  rgba(124,101,205,0.45);
}

html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Body content wraps like normal text */
.knfsrs-body{
  display:block;
  width:100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-family: 'Inter Tight'
  /*text-align: center;*/
}

.knfsrs-body > p:only-child {
  font-family: 'Inter Tight';
  margin-bottom: 0;
  text-align: center;
}

/* Disable flip/faces transitions when resetting the card instantly */
.knfsrs-card.kn-noanim,
.knfsrs-card.kn-noanim .knfsrs-q,
.knfsrs-card.kn-noanim .knfsrs-a{
  transition: none !important;
}


/* Pulse animation for due tiles */
@keyframes knTilePulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(0,0,0,.25); }
  70%{ transform:scale(1.05); box-shadow:0 0 0 12px rgba(0,0,0,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
.kn-due__tile.kn-pulse{ animation:knTilePulse 600ms ease-out 1; }

/* Due strip */
.knfsrs-duebar{
  display:flex; gap:1rem .5rem; align-items:flex-end;
  margin-bottom:.5rem; flex-wrap:wrap; padding:20px 0;
  overflow-y: hidden;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */

  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  contain: inline-size paint;
  isolation: isolate;
  margin-inline: auto;
  overscroll-behavior-x: contain;
  flex-wrap: nowrap !important; overflow-x: auto !important;
}
.knfsrs-duebar::-webkit-scrollbar {
  display: none;
}
.kn-due{ display:flex; flex-direction:column; align-items:center; gap:.25rem; font-size:.8rem; color:#666; }
.kn-due__num{ line-height:1; font-weight:600; font-family: 'Inter Tight'; }
.kn-due__tile{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  /* box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.06); */
  color:black; transition:background-color 100ms ease, opacity 300ms ease;
}
.kn-due__tile svg{ width:16px; height:16px; opacity:.6; }
.kn-due__tile.is-current{ outline:2px solid black; outline-offset:1px; }
.knfsrs-duebar > .kn-due:first-child { margin-left: 3px; }
.knfsrs-duebar > .kn-due:last-child { margin-right: 3px; }
.kn-due__tile.is-done{ opacity:.5; }

/* Color bindings */
.kn-due__tile.is-na{   background:var(--kn-na);   color:#191919; filter:opacity(.75); }
.kn-due__tile.is-low{  background:var(--kn-low);  color:#550D1B; }
.kn-due__tile.is-med{  background:var(--kn-med);  color:#655500; }
.kn-due__tile.is-high{ background:var(--kn-high); color:#00462D; }
.kn-due__tile.is-max{  background:var(--kn-max);  color:#261858; }

/* Repeat ring colour follows the tile proficiency */
.kn-due__tile.is-na   { --kn-repeat-ring: var(--kn-na-ring); }
.kn-due__tile.is-low  { --kn-repeat-ring: var(--kn-low-ring); }
.kn-due__tile.is-med  { --kn-repeat-ring: var(--kn-med-ring); }
.kn-due__tile.is-high { --kn-repeat-ring: var(--kn-high-ring); }
.kn-due__tile.is-max  { --kn-repeat-ring: var(--kn-max-ring); }

/* Fallback (if somehow no proficiency class is present) */
.kn-due__tile{ --kn-repeat-ring: rgba(0,0,0,0.18); }

.kn-due__tile.is-repeat{
  position: relative;
}

.kn-due__tile.is-repeat::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: knRepeatShadow 2.8s ease-in-out infinite;
  animation-delay: var(--kn-repeat-delay, 0ms);
}

@keyframes knRepeatShadow{
  0%, 100% { box-shadow: 0 0 0 0 var(--kn-repeat-ring); }
  50%      { box-shadow: 0 0 0 2px var(--kn-repeat-ring); }
}

@media (prefers-reduced-motion: reduce){
  .kn-due__tile.is-repeat::after{
    animation: none;
    box-shadow: 0 0 0 2px var(--kn-repeat-ring);
  }
}

/* Legend */
.knfsrs-legend{
  display:flex; /*gap:.875rem;*/ gap:1rem; align-items:center;
  margin-bottom:.75rem; font-size:.9375rem; line-height:1.2;

  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  contain: inline-size paint;
  isolation: isolate;
  margin-inline: auto;
  overscroll-behavior-x: contain;
  flex-wrap: nowrap !important; overflow-x: auto !important;
}
.knfsrs-legend__item{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; font-weight:500; font-family:'Inter Tight',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; }
.knfsrs-legend__swatch{
  width:1.05rem; height:1.05rem; border-radius:.35rem; /*box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);*/
}
.knfsrs-legend__swatch.is-na{background:var(--kn-na);}
.knfsrs-legend__swatch.is-low{background:var(--kn-low);}
.knfsrs-legend__swatch.is-med{background:var(--kn-med);}
.knfsrs-legend__swatch.is-high{background:var(--kn-high);}
.knfsrs-legend__swatch.is-max{background:var(--kn-max);}

/* Panel */
.knfsrs-panel{
  background:#ededed; /*border:1px solid #eaeaea;*/ border-radius:20px;
  /* box-shadow:0 1px 2px rgba(0,0,0,.04); */
  padding:10px; width:75%; margin-left:auto; margin-right:auto;
}

/* Card */
.knfsrs-card{ display:grid; gap:12px; height:var(--kn-card-h); min-height:var(--kn-card-h); }
.knfsrs-q{ font-weight:600; font-size:1.3rem; line-height:1.4; text-align:center; letter-spacing: -0.2px !important; transition: opacity .3s ease; }
.knfsrs-a--hidden{ display:none; }

/* Textarea (autosize-friendly) */
.knfsrs-answerbox{ /*margin-top:8px;*/ }
.knfsrs-input{
  box-sizing:border-box; width:100%; line-height:1.45; font-size: 16px; letter-spacing: -0.2px; /*min-height:96px;*/ min-height:140px; padding:15px;
  /*border:1px solid #ddd;*/ border-radius:12px; outline:none; background:#fff;
  overflow-y:hidden; resize:none;
  border: none;
}
/* .knfsrs-input:focus{ border-color:#7bc4aa; box-shadow:0 0 0 3px rgba(123,196,170,.2); } */
.knfsrs-input:disabled{ background-color:#fff !important; color:inherit; -webkit-text-fill-color:inherit; opacity:1; border: none !important }
/* .knfsrs-input.kn-ok{  border-color:#2e8b57 !important; box-shadow:0 0 0 3px rgba(46,139,87,.18); }
.knfsrs-input.kn-bad{ border-color:#c62828 !important; box-shadow:0 0 0 3px rgba(198,40,40,.14); } */
.knfsrs-input:focus { box-shadow:none !important }

/* Footer */
.knfsrs-footer{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.knfsrs-footer-right{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.knfsrs-result{ min-height:1.25rem; font-weight:600; }
.knfsrs-counter{ color:#6b7280; font-size:.9rem; font-family: 'Inter Tight'; }

/* Buttons */
#knfsrs-app button{
  font-size:16px; font-weight:600; line-height:1; padding:10px 14px;
  border-radius:12px; display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; border:none; transition:200ms; user-select:none; position:relative;
}
#knfsrs-app button:disabled{ opacity:.75; cursor:not-allowed; }
#knfsrs-app button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.25); }

/* Submit / Next */
.knfsrs-submit{ background:#C4EFDA; color:#005F38; font-weight:600; font-family: 'Inter Tight'; }
.knfsrs-submit:hover:not(:disabled){ background:#8FE5BA; color:#005F38; }
.knfsrs-next{ background:white; color:#000; font-weight:600; }
.knfsrs-next:hover:not(:disabled){ background:#e4e4e4; color:#000; }

/* Grade buttons */
.knfsrs-actions{ margin-top:10px; text-align:center; }
/* Grade buttons + time labels live in ONE grid */
.knfsrs-grade{
  display: grid;

  /* 2 rows: buttons on row 1, labels on row 2 */
  grid-template-rows: auto auto;

  /* 3 columns on wide */
  grid-template-columns: repeat(3, minmax(90px, auto));

  /* CRITICAL: fill down each column first (top-left then bottom-left etc.) */
  grid-auto-flow: column;

  gap: 8px 10px;
  justify-content: center;
  justify-items: stretch;
  align-items: center;
}

/* Buttons fill their cell */
.knfsrs-grade .knfsrs-g{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Time label styling (forced size) */
.knfsrs-grade .knfsrs-grade-time{
  display: block;                 /* jQuery show/hide plays nicely */
  text-align: center;
  font-size: 12px !important;     /* FORCE size */
  line-height: 1.15 !important;
  font-weight: 700;
  color: #6b7280;
  margin-top: -2px;
}
.knfsrs-g{ padding:10px 14px; border-radius:999px; /*border:1px solid transparent;*/ font-weight:600; }
.knfsrs-g:hover{ filter:brightness(80%); }
.knfsrs-g.hard{ background:#f6cdd5; color:#550D1B; font-family: 'Inter Tight'; }
.knfsrs-g.good{ background:#faf1bb; color:#655500; font-family: 'Inter Tight'; }
.knfsrs-g.easy{ background:#dff5e8; color:#00462d; font-family: 'Inter Tight'; }

/* Result text colors */
.knr-great{ color:#00AF66; font-family: 'Inter Tight'; margin-left: 5px; }
.knr-wrong{ color:#7D172A; font-family: 'Inter Tight'; margin-left: 5px; }

/* --- 3-up flashcard strip --- */
.knfsrs-carousel{
  display:grid;
  grid-template-columns: 1fr var(--kn-card-w) 1fr 1fr;
  gap:18px; align-items:stretch; margin: 20px 0;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
  border-radius: 20px;

  /* Make sure the carousel stays within bounds */
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  contain: inline-size paint;
  isolation: isolate;
  margin-inline: auto;
  overscroll-behavior-x: contain;
}
.knfsrs-carousel * {
  box-sizing: border-box;
}
.knfsrs-carousel::-webkit-scrollbar {
  display: none;
}

/*.knfsrs-carousel*/ .knfsrs-card{
  position:relative; border-radius:20px; background:#fff;
  /* box-shadow:0 2px 10px rgba(0,0,0,.06); padding:16px; */
  min-height:160px; transform-style:preserve-3d;
  width: var(--kn-card-w);
  transition: transform .45s ease, box-shadow .3s ease, filter .3s ease, opacity .3s ease, background-color .3s ease, border .3s ease;
  background-color: #f1f1f1;
  padding: 30px;
}
.knfsrs-card--current{
  /* box-shadow:0 6px 20px rgba(0,0,0,.10); */
  width:100%; justify-self:center;
  background: #fff !important;
  border: 2px solid #e0e0e0;
}

.knfsrs-card--current.is-done {
  background-color: #f1f1f1 !important;
  border: 2px solid #f1f1f1 !important;
}

.knfsrs-card--current.is-done .knfsrs-q, .knfsrs-card--current.is-done .knfsrs-a {
  opacity: 0;
}

.knfsrs-card--next {
  transition: none !important;
}

.knfsrs-card--next.is-done {
  background-color: #fff !important;
  border: 2px solid #e0e0e0 !important;
}

.knfsrs-card--next.is-done .knfsrs-q, .knfsrs-card--next.is-done .knfsrs-a {
  opacity: 1;
}

.knfsrs-card--next:not(.is-done) .knfsrs-q, .knfsrs-card--next:not(.is-done) .knfsrs-a {
  opacity: 0;
  transition: none !important;
}

/* Flip setup */
/*.knfsrs-carousel*/ .knfsrs-q,
/*.knfsrs-carousel*/ .knfsrs-a{
  opacity: 0;
  backface-visibility:hidden; transform:rotateY(0deg);
  transition:transform .45s ease, opacity .3s ease;
  place-content: center; font-family: 'Inter Tight';
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

.knfsrs-card--current .knfsrs-q, .knfsrs-card--current .knfsrs-a {
  opacity: 1;
}

/* Center card faces stacked */
.knfsrs-q, .knfsrs-a{
  position:absolute; /*inset:16px;*/ inset:30px; overflow:auto;
}

/* Center the question in the current card */
.knfsrs-q{
  display:grid; place-items:center;
  /*height:calc(100% - 32px);*/
  height: calc(100% - 60px);
}

/* Hide answer by default */
.knfsrs-card--current .knfsrs-a.knfsrs-a--hidden{ opacity:0; pointer-events:none; }
/* Make answer the back */
.knfsrs-card--current .knfsrs-a{ transform:rotateY(180deg); }
/* Flip */
.knfsrs-card--current.is-flipped{ transform:rotateY(180deg); }

/* keep current/ghost questions scrollable if long */
.knfsrs-q{ overflow:auto; }

.knfsrs-card--current.kn-flippable { cursor: pointer; }

.knfsrs-card--current.kn-flippable:hover { background-color: rgba(0,0,0,0.1) !important;}

.kn-hidden { display: none !important; }
.kn-invisible { visibility: hidden !important; }

/* one-line header above face content */
.knfsrs-head{
  font-family: 'Inter Tight' !important;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .02em;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;   /* centered */
  width: 100%;
  text-align: center;
  color: #191919;
  filter: opacity(0.5);
}
.knfsrs-head .kn-head-ic svg{ width:16px; height:16px; display:block; }

/* Responsive */
@media (max-width:799px){
  /* Uncomment the below code to hide additional carousel cards on mobile */
  /* .knfsrs-card--prev, .knfsrs-card--next, .knfsrs-card--future { visibility: hidden !important; }
  .knfsrs-card--current.is-done { visibility: hidden !important; }
  .knfsrs-card--next.is-done { visibility: visible !important; } */
  .knfsrs-panel { width: 100% !important; }
  :root{ --kn-grade-cols: 1fr; } 
  .knfsrs-grade{
    grid-template-columns: 1fr;   /* 1 column */
    grid-template-rows: none;     /* let it auto-place */
    grid-auto-flow: row;          /* stack in DOM order: button, label, button, label... */
    gap: 6px;
    justify-items: stretch;
  }

  .knfsrs-grade .knfsrs-grade-time{
    text-align: center;
    margin-top: 2px;
  }
}