/* Kyom — course single hierarchy.
 *
 * Loaded after kyom-design.css so it wins the cascade on equal specificity. Its own file
 * rather than a v22 block on the end of kyom-design.css, which is past 4000 lines and
 * long past the 800-line ceiling in the house style.
 *
 * The brief (Louay, 2026-08-09): "I don't like how the description card is cut into three."
 * Spec: docs/superpowers/specs/2026-08-09-motion-and-course-sidebar-design.md
 *
 * The fix throughout is HIERARCHY, not containment. Every block on this page arrives at the
 * same volume — tutor-fs-5 + tutor-fw-bold headings, unbordered bodies, uniform 28px gaps —
 * so a reader has no way to tell which of them is the argument and which are footnotes.
 * Wrapping them in one card would not fix that; giving them different weights does.
 * ========================================================================= */

/* ---- A · the lower sidebar stack -----------------------------------------
   Diagnosis corrected 2026-08-09 after reading computed styles off production. Tutor
   already draws these three widgets — مواد الدورة, the tags widget, الجمهور — as ONE
   continuous card: left and right borders on every div, a top border on :first-child, a
   bottom border on :last-child, and no internal rules.

   What cut it into three was ours. kyom-design.css:947 puts margin-block:28px on every
   .tutor-course-details-widget, which inserted 56px of page between each segment and
   sliced a single frame into three floating pieces. The hidden tags title (removed from
   kyom-design.css:823) then left the middle piece with no label at all.

   So: close the gap, restyle Tutor's off-brand #FCFCFD fill and grey border onto the
   palette, and add the internal hairlines a continuous stack needs. Adding a panel around
   it would only put a second frame around the frame Tutor already draws. ------------ */
.tutor-single-course-sidebar-more{margin-block-start:20px}

.tutor-single-course-sidebar-more > div{
  margin:0!important;
  padding:20px 22px;
  border-color:var(--k-hair);
  border-radius:0;
  background:var(--k-paper2);
}
/* Tutor's own :first-child / :last-child rules are (0,2,1) and beat a plain
   `> div` shorthand, so the end caps are matched at equal specificity and win on order. */
.tutor-single-course-sidebar-more > div:first-child{
  padding-block-start:22px;
  /* Repeated here, not inherited from the `> div` rule above: Tutor's own first-child rule
     is also (0,2,1) and was painting the top cap in Silver Chalice #B7A8A1 while the two
     internal dividers came through as --k-hair, so the card's top edge read a shade darker
     than its own rules. Measured on stage before fixing. */
  border-color:var(--k-hair);
  border-start-start-radius:var(--k-r);
  border-start-end-radius:var(--k-r);
}
.tutor-single-course-sidebar-more > div:last-child{
  padding-block-end:22px;
  border-color:var(--k-hair);
  border-end-start-radius:var(--k-r);
  border-end-end-radius:var(--k-r);
}
/* Tutor zeroes border-top on everything after the first; (0,1,2) restores it as a divider. */
.tutor-single-course-sidebar-more > div + div{
  border-block-start:1px solid var(--k-hair);
}

/* !important on the box metrics only: tutor-mb-16 / tutor-mt-16 are Tutor spacing
   utilities and ship with !important of their own. The type properties win on
   specificity alone and are left clean. */
.tutor-single-course-sidebar-more .tutor-course-details-widget-title{
  margin:0 0 10px!important;
  font-size:13px;
  font-weight:var(--k-fw-head);
  color:var(--k-muted);
}
.tutor-single-course-sidebar-more .tutor-course-details-widget-list{
  margin:0!important;
  padding:0;
}
.tutor-single-course-sidebar-more .tutor-course-details-widget-list li{
  margin:0 0 8px!important;
  font-size:14.5px;
  line-height:1.7;
}
.tutor-single-course-sidebar-more .tutor-course-details-widget-list li:last-child{
  margin-bottom:0!important;
}
/* The tag chip is now labelled, so it no longer needs to carry the section on its own. */
.tutor-single-course-sidebar-more .tutor-tag-list{margin:0}

/* ---- B · purchase-card meta rows ------------------------------------------
   Was a 2-column grid of individually bordered boxes (kyom-design.css:942-943), which put
   four more borders inside a card that already has one. This list lives inside
   .tutor-sidebar-card .tutor-card-footer, and that footer's own border-top
   (kyom-design.css:420) is the panel edge — so flatten the boxes and divide with hairlines
   instead of adding a second frame.

   Rows are icon + text, not label + value: the ::before at kyom-design.css:807 is a masked
   Lucide glyph, and Tutor's text is the whole content. So these stay start-aligned; there is
   nothing to push to the far edge. --------------------------------------- */
.tutor-course-details-page ul.tutor-ul{
  display:block;
  margin:0;
  padding:0;
}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex{
  min-height:44px;
  margin:0;
  padding:9px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex + li{
  border-block-start:1px solid var(--k-hair);
}

/* ---- C · the info column --------------------------------------------------
   Three blocks, one document. Read order is lead → promise → index, and each gets a
   different volume so that order is legible without reading a word. ------- */

/* عن الدورة is a lead-in, not a section. Its heading becomes an eyebrow and gets out of
   the way of the prose it introduces. */
.tutor-course-details-page .tutor-course-details-content > h2{
  margin:0 0 10px!important;
  font-size:13px;
  font-weight:var(--k-fw-head);
  color:var(--k-muted);
}
.tutor-course-details-page .tutor-course-details-content{font-size:17px}

/* ماذا سوف تتعلم؟ is the value promise, and the column's one tinted field.
   --k-rose is Alabaster→Mocha 6%, so Spanish Purple on it stays near 10:1 — this is not a
   Mocha field and the guideline's "Mocha cannot carry body text" rule does not bite. */
.tutor-course-details-page .tutor-course-details-widget-col-2{
  margin-block:56px 0;
  padding:28px;
  border-radius:var(--k-r);
  background:var(--k-rose);
}
.tutor-course-details-page .tutor-course-details-widget-col-2 .tutor-course-details-widget-title{
  margin-block-end:14px!important;
  font-weight:var(--k-fw-head);
}

/* محتوى الدورة is the anchor — the block people actually scroll for. It gets the page's
   one divider rule, the largest heading in the column, and a single panel.

   Matched via :has() on the title rather than on .tutor-mt-40, which is a generic Tutor
   spacing utility that appears elsewhere in the same subtree. */
.tutor-course-details-page .tutor-tab-item > div:has(> .tutor-course-content-title){
  margin-block-start:56px!important;
  padding-block-start:40px;
  border-block-start:1px solid var(--k-hair);
}
.tutor-course-details-page .tutor-course-content-title{
  font-size:26px!important;
  font-weight:var(--k-fw-display)!important;
}

/* One panel, not one card per row. Previously every accordion item carried its own border,
   radius and 12px gap (kyom-design.css:428-429), which made the curriculum the only carded
   thing on the page and left it looking bolted on. It is carded now because it is the
   anchor, and the items inside it are rows. */
.tutor-course-details-page .tutor-accordion{
  border:1px solid var(--k-hair);
  border-radius:var(--k-r);
  overflow:hidden;
}
.tutor-course-details-page .tutor-accordion-item{
  margin:0;
  border:0;
  border-radius:0;
}
.tutor-course-details-page .tutor-accordion-item + .tutor-accordion-item{
  margin-top:0;
  border-block-start:1px solid var(--k-hair);
}

@media (max-width:767px){
  /* The tinted field would otherwise eat a third of a phone screen in padding alone. */
  .tutor-course-details-page .tutor-course-details-widget-col-2{padding:20px;margin-block-start:40px}
  .tutor-course-details-page .tutor-tab-item > div:has(> .tutor-course-content-title){
    margin-block-start:40px!important;
    padding-block-start:28px;
  }
  .tutor-course-details-page .tutor-course-content-title{font-size:22px!important}
  .tutor-single-course-sidebar-more .tutor-course-details-widget{padding:18px}
}