/* שער הכניסה ושורת הסטטוס של האזורים הסגורים.
 * התפקידים בפלטה נשמרים: איריס לפעולה, אקווה לידע, לילך להקשר.
 * אין כאן אדום ואין צהוב, גם לא בשגיאה. */

.access-gate {
  max-width: 460px;
  margin: 40px auto;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 18px rgba(38, 32, 54, .06);
  text-align: center;
}

.access-gate h2 {
  margin: 0 0 10px;
  font-size: 1.28rem;
  color: var(--text-heading);
}

.access-lead {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: .93rem;
  line-height: 1.65;
}

.access-form {
  display: grid;
  gap: 9px;
}

.access-form label {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: right;
}

.access-form input {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 1.12rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  direction: ltr;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn, 10px);
  background: #fff;
  color: var(--text);
}

.access-form input:focus {
  outline: none;
  border-color: var(--iris);
  box-shadow: 0 0 0 3px var(--iris-soft);
}

.access-form input::placeholder {
  letter-spacing: .1em;
  /* ‏#BDB6A8 על שדה לבן היה 1.98. כיתוב מרמז הוא טקסט. */
  color: var(--text-muted);
  text-transform: none;
}

.access-form button {
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-btn, 10px);
  background: var(--iris);
  color: #fff;
}

.access-form button:hover { background: var(--iris-deep); }
.access-form button:disabled { background: var(--iris-pale); cursor: default; }

.access-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: .88rem;
  background: var(--no-soft);
  color: var(--no);
  border-radius: 9px;
}

.access-foot {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.access-wait {
  margin: 40px auto;
  text-align: center;
  color: var(--text-muted);
}
/* בזמן "רגע…" (תשובת /api/me) מה שמתחת לשער מחכה סמוי, ומופיע במקומו
   הסופי כשהטופס או שורת הסטטוס נכתבים - אחרת הוא קופץ (CLS 0.2 במנוי, 2026-09-30) */
main:has(.access-wait) > #soon,
body:has(.access-wait) > .site-footer { visibility: hidden; }

/* ── שורת הסטטוס באזור פתוח ─────────────────────────────────────────── */

.access-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 26px;
  padding: 11px 16px;
  background: var(--aqua-soft);
  border: 1px solid #B9E2E0;
  border-radius: 12px;
  font-size: .88rem;
}

/* התוקף מתקרב. לילך, לא אדום - הבעלים ביקש בלי אדום וצהוב. */
.access-status-warn {
  background: var(--lilac);
  border-color: #C7BCEB;
}

.access-who {
  font-weight: 600;
  color: var(--text-heading);
}

.access-until {
  color: var(--lilac-deep);
}

.access-status-warn .access-until {
  font-weight: 600;
}

.access-out {
  margin-inline-start: auto;
  padding: 5px 13px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--lilac-deep);
}

.access-out:hover { background: rgba(255, 255, 255, .6); }

/* ── רשימת יחידות הכיתה ─────────────────────────────────────────────── */

.unit-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unit-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
}

.unit-seq {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--iris-soft);
  color: var(--iris-deep);
  font-weight: 700;
  font-size: .92rem;
}

.unit-main h3 {
  margin: 0 0 3px;
  font-size: 1.02rem;
  color: var(--text-heading);
}

.unit-meta {
  margin: 0;
  font-size: .83rem;
  color: var(--text-muted);
}

.unit-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.unit-links a {
  padding: 7px 14px;
  font-size: .85rem;
  text-decoration: none;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid var(--border-strong);
  color: var(--iris-deep);
  background: #fff;
  white-space: nowrap;
}

.unit-links a:hover {
  border-color: var(--iris);
  background: var(--iris-soft);
}

.unit-links a.is-deck {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

.unit-links a.is-deck:hover { background: var(--iris-deep); }

.class-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.class-tabs button {
  padding: 8px 16px;
  font: inherit;
  font-size: .89rem;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
}

.class-tabs button[aria-pressed="true"] {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

@media (max-width: 620px) {
  .unit-row { grid-template-columns: auto 1fr; }
  .unit-links { grid-column: 1 / -1; }
}

/* ── אזור הכיתה: לשוניות הפריסה ותתי הנושאים ────────────────────────
   הלשוניות כאן הן נושאי הפריסה של הכיתה, ולכן יש הרבה מהן - כיתה ט׳
   נושאת עשרים וחמש. `.tabs` הרגיל הוא inline-flex בשורה אחת, ולכן כאן
   הוא עוטף וגולל, ולא נמתח אל מחוץ למסך. */
.kx-tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.kx-tabs button { padding: 7px 14px; font-size: .9rem; }

/* ── מיקוד הקבוצה (class.js, ‏D1, ‏2026-10-01) ─────────────────────────
   הבעלים (‏z4h5): "נקודה לפני הנושא לא מספיקה." שלושה סימנים, כולם
   באקווה - ידע, "על זה אנחנו עכשיו" - ולא באיריס, כדי שלא יתערבבו
   בלשונית הנבחרת ובכפתורים: אזור "נלמד עכשיו" בראש העמוד, תווית
   "נלמד" על הלשונית, ואותה תווית בראש הלוח. רק טוקנים, ולכן מצב
   הלילה עובר לבד. נאכף ב-verify_class_focus. */
.kx-focus {
  margin: 0 0 1.2rem;
  padding: 14px 18px 16px;
  background: var(--aqua-soft);
  border: 1px solid var(--aqua-line);
  border-inline-start: 4px solid var(--aqua);
  border-radius: 14px;
}
.kx-focus-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 10px;
  font-size: .9rem;
}
.kx-focus-head b { font-size: 1.05rem; color: var(--aqua-deep); }
.kx-focus-head span { color: var(--text-muted); }
.kx-focus-head span::before { content: "· "; }
.kx-focus-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--aqua); stroke-width: 2; }
.kx-focus-ico .dot { fill: var(--aqua); }
.kx-focus-list { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-focus-go {
  min-height: 44px;
  padding: 8px 18px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--aqua-deep);
  background: var(--surface);
  border: 2px solid var(--aqua);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.kx-focus-go:hover { background: var(--aqua); color: var(--on-accent); }
.kx-focus-go:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

/* התווית היא גלולה, כי הגלולה שמורה לתגיות */
.kx-flag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--on-accent);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  vertical-align: .1em;
}
.kx-tabs [role="tab"] .kx-flag { margin-inline-start: 8px; }
.kx-tabs [role="tab"].is-focus {
  background: var(--aqua-soft);
  color: var(--aqua-deep);
  font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--aqua);
}
/* במיקוד וגם נבחרת: המילוי של הנבחרת נשאר, והתווית מתהפכת כדי להיקרא
   עליו (‏2026-09-06: אקווה כהה על מילוי מלא לא נקרא). */
.kx-tabs [role="tab"].is-focus[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.kx-tabs [role="tab"].is-focus[aria-selected="true"] .kx-flag { background: var(--surface); color: var(--aqua-deep); }
.kx-panel.is-focus > .kx-detail .kx-flag { margin-inline-end: 4px; }

/* ── מסלולי הלמידה בכיתה: המראה של עמוד הנושא ──────────────────────
   class.html אינו טוען את practice.css, ולכן הכרטיס והגובה של
   ‏`.is-topic .route-line` חוזרים כאן - בלי sticky, כי בלשונית כרטיסים
   רבים ושורה דבוקה הייתה מכסה אותם. כמה נושאים בלשונית: כרטיס אחד,
   ניוטי פעם אחת בראשו, ושורה לכל נושא עם שמו בעמודה משלו. */
.kx-panel .route-line,
.kx-panel .route-group {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--iris);
  border-radius: 14px;
}
.kx-panel .route-chip { min-height: 44px; padding: 8px 20px; }
.kx-panel .route-chip:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
.kx-panel .route-group .route-line {
  margin: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.kx-panel .route-group .route-line:last-child { padding-bottom: 0; }
.route-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .95rem; }
.route-name { flex: 0 0 14rem; font-weight: 700; color: var(--text-heading); }
.route-group .route-say { font-size: .9rem; color: var(--text-muted); }

@media (max-width: 600px) {
  .kx-focus { padding: 12px 14px 14px; }
  .kx-focus-go { flex: 1 1 auto; }
  .kx-panel .route-line,
  .kx-panel .route-group { gap: 8px; padding: 10px 12px; margin-bottom: 18px; }
  .kx-panel .route-avatar { display: none; }
  .kx-panel .route-say { flex-basis: 100%; font-size: .88rem; }
  .kx-panel .route-say:empty { display: none; }
  .route-name { flex-basis: 100%; }
  .kx-panel .route-chips { display: flex; width: 100%; }
  .kx-panel .route-chip { flex: 1 1 auto; padding-inline: 8px; }
}

/* "בהמשך השנה": כל מה שבפריסה ועוד לא נבנה, ברשימה אחת לפי חודשים.
   הפריסה היא הבטחה לתלמיד, ולכן היא נשארת גלויה - אבל לשונית לכל
   נושא הייתה הופכת את ראש העמוד לקיר של תגיות. */
.kx-soon-group { margin-bottom: 22px; }

.kx-soon-group h3 {
  font-size: .95rem;
  color: var(--accent);
  margin: 0 0 8px;
}

.kx-soon-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.kx-soon-group li {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.kx-soon-group li b { display: block; font-size: .92rem; color: var(--text-heading); }
.kx-soon-group li span {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  color: var(--text-muted);
}

.kx-detail {
  color: var(--text-muted);
  font-size: .93rem;
  margin: 0 0 22px;
  max-width: 62ch;
}

.kx-detail b { color: var(--text-heading); font-weight: 600; }

.kx-lesson {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.kx-lesson-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.kx-seq {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  display: grid;
  place-items: center;
}

.kx-lesson-head > div { flex: 1 1 220px; }
.kx-lesson-head h3 { margin: 2px 0 0; font-size: 1.06rem; }
.kx-note { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }

.kx-links { display: flex; gap: 8px; flex-wrap: wrap; }

.kx-links a {
  font-size: .88rem;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  color: var(--text-heading);
  text-decoration: none;
}

.kx-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ההקלטה והמצגת הן שתי דרכים לאותו שיעור, ולכן אותו כפתור */
.kx-links a.is-deck,
.kx-links a.is-video {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.kx-links a.is-deck:hover,
.kx-links a.is-video:hover { opacity: .9; color: #fff; }

.kx-practice-wrap { margin-top: 16px; }

.kx-practice + .kx-practice {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.kx-practice h4 { margin: 0; font-size: .98rem; }
.kx-blurb {
  margin: 4px 0 12px;
  color: var(--text-muted);
  font-size: .88rem;
  max-width: 60ch;
}

.kx-ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

/* כל תרגיל מוביל אל exercise.html, ושם יושב המלווה. זה מה שהופך
   מטלה לדף שאפשר לעבוד בו לבד. */
.kx-ex {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  text-decoration: none;
}

.kx-ex:hover { border-color: var(--accent); }
.kx-ex-name { display: block; color: var(--text-heading); font-size: .92rem; }
.kx-ex-meta { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 3px; }

.kx-all {
  display: inline-block;
  margin-top: 12px;
  font-size: .86rem;
  color: var(--accent);
}

.kx-soon { color: var(--text-muted); font-size: .9rem; margin: 14px 0 0; }

/* מצגת הנושא: היא מכסה את כל מה שנלמד בלשונית, ולכן היא יושבת מעל
   תתי הנושאים ולא בתוך אחד מהם. */
.kx-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--lilac);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.kx-overview > div:first-child { flex: 1 1 240px; }
.kx-overview h3 { margin: 0; font-size: 1.06rem; }

.kx-unit-links { margin-top: 12px; }
.kx-topic-links { margin: 18px 0 6px; }


/* ── כל הכיתות: מעקב מול הפריסה ──────────────────────────────────────
   כרטיס לכיתה, ובו השנה על ציר של עשר עמודות (ספטמבר עד יוני). כל נושא
   יושב בעמודת החודש שלו, והצבע אומר מצב: נלמד, עכשיו, פתוח לתלמידים,
   בהמשך. נושא בלי תוכן שכבר נפתח מסומן בלילך כהה ובקו מקווקו - זה מה
   שהמורה צריך לראות לפני שהתלמידים רואים לשונית ריקה. אין אדום. */
.kt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.kt-bar .kx-now { margin: 0; }

.kt-month-pick {
  font-size: .86rem;
  color: var(--text-muted);
}

.kt-month-pick select {
  font: inherit;
  font-size: .88rem;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  margin-inline-start: 6px;
}

.kt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.kt-class {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px 14px;
  margin-bottom: 18px;
}

.kt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.kt-head h2 { margin: 0; font-size: 1.22rem; }
.kt-sub { margin: 3px 0 0; color: var(--text-muted); font-size: .86rem; }
.kt-head .btn { font-size: .86rem; padding: 8px 14px; }

.kt-now {
  margin: 12px 0 0;
  font-size: .93rem;
  line-height: 1.6;
}

.kt-gap, .kt-ok {
  margin: 6px 0 0;
  font-size: .9rem;
  line-height: 1.55;
}

.kt-gap {
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--lilac);
  color: var(--lilac-deep);
}

.kt-ok { color: var(--ok); }

/* שורה לכל חודש, והנושאים שלו עוטפים לצדה. עשר עמודות נראו יפה על
   נייר ונחתכו על המסך - שם נושא בעברית לא נכנס בעשירית מהרוחב. */
.kt-strip {
  display: grid;
  gap: 3px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

.kt-col {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 8px;
}


.kt-month {
  flex: none;
  width: 62px;
  font-size: .76rem;
  color: var(--text-muted);
}


.kt-chip {
  display: inline-block;
  font-size: .78rem;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kt-legend .kt-chip { display: inline-block; padding: 4px 10px; }

/* ‏**הפריסה יוצאת אחידה, וצבע אחד מסמן.** קודם היו כאן ארבעה גוונים
   לפי לוח השנה, והם צבעו את השנה בלי שאף אחד החליט על כך. הגוון היחיד
   שנשאר הוא הסימון של המורה. */
.kt-chip { background: var(--surface); border-color: var(--border); }
.kt-chip.is-focus { background: var(--iris); color: #fff; font-weight: 600; border-color: var(--iris); }

/* נושא שאין לו עדיין תוכן: עובדה, ולכן קו מקווקו ולא גוון. */
.kt-chip.is-gap { border: 1px dashed var(--border-strong); color: var(--text-muted); }

a.kt-chip:hover { border-color: var(--iris); color: var(--iris-deep); background: var(--iris-soft); }
a.kt-chip.is-focus:hover { background: var(--iris-deep); color: #fff; }

.kt-table { margin: 12px 0 0; font-size: .86rem; }
.kt-table summary { cursor: pointer; color: var(--iris-deep); }
.kt-table table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.kt-table th, .kt-table td {
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.kt-table th { font-weight: 600; color: var(--text-muted); font-size: .8rem; }
.kt-table tr.is-focus td { background: var(--iris-soft); }
.kt-table tr.is-gap td { color: var(--text-muted); }
.kt-code { color: var(--text-muted); font-size: .8rem; }

.kt-note { color: var(--text-muted); font-size: .86rem; margin: 6px 0 0; }

@media (max-width: 720px) {
  .kt-table { overflow-x: auto; }
}