/* Kognifi programme planner (inc/planner.php). CI palette only: Navy #1B3A5C, Green #1A6B3C / #E8F0EB, Amber #FFC000 / #FFF7E0,
   neutrals #111111 #2C2C2C #666666 #E0E0D8 #E9EDF2 #F5F5F5 #FAFAF5 #FFFFFF. Full width, no sidebar. */
.kg-planner { --kgp-navy: #1B3A5C; --kgp-ink: #2C2C2C; --kgp-muted: #666666; --kgp-line: #E0E0D8; --kgp-bg: #FAFAF5; --kgp-chip: #E9EDF2; --kgp-green: #1A6B3C; --kgp-green-soft: #E8F0EB; --kgp-amber: #FFC000; --kgp-amber-soft: #FFF7E0;
	background: #FFFFFF; border: 1px solid var(--kgp-line); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); color: var(--kgp-ink); font-family: var(--k-font-body); margin: var(--k-space-6) 0; }
.kg-planner button { font-family: var(--k-font-head); cursor: pointer; }
.kg-planner button:focus-visible, .kg-planner input:focus-visible, .kg-planner textarea:focus-visible, .kg-planner summary:focus-visible, .kgp-mod:focus-visible, .kgp-nm:focus-visible { outline: 3px solid var(--kgp-green); outline-offset: 2px; }
.kgp-top { padding: var(--k-space-5); display: grid; gap: var(--k-space-4); border-bottom: 1px solid var(--kgp-line); }
.kgp-eyebrow { margin: 0; font: 600 .75rem/1 var(--k-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--kgp-green); }
.kgp-h { margin: 0; font: 600 1.05rem/1.3 var(--k-font-head); color: var(--kgp-navy); }
.kgp-small { font-size: .85rem; color: var(--kgp-muted); margin: 0; }
.kgp-note { margin: 0; font-size: .9rem; color: var(--kgp-muted); }
.kgp-lvl { display: flex; flex-wrap: wrap; gap: var(--k-space-2); align-items: center; }
.kgp-lab { font: 600 .85rem var(--k-font-head); color: var(--kgp-muted); }
.kgp-seg { display: inline-flex; border: 1px solid var(--kgp-line); border-radius: var(--k-radius-control); overflow: hidden; }
.kgp-seg button { border: 0; border-right: 1px solid var(--kgp-line); background: var(--kgp-bg); color: var(--kgp-ink); padding: 8px 16px; font-size: .85rem; }
.kgp-seg button:last-child { border-right: 0; }
.kgp-yrs { display: block; font-weight: 500; font-size: .72rem; opacity: .85; }
.kgp-seg button[aria-pressed="true"] { background: var(--kgp-navy); color: #FFFFFF; }
.kgp-outc { display: grid; gap: var(--k-space-3); }
.kgp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.kgp-tab { padding: 8px 14px; border-radius: var(--k-radius-pill); border: 1px solid var(--kgp-line); background: var(--kgp-bg); color: var(--kgp-ink); font-size: .85rem; }
.kgp-tab[aria-selected="true"] { background: var(--kgp-navy); border-color: var(--kgp-navy); color: #FFFFFF; }
.kgp-tab--has { border-color: var(--kgp-green); }
.kgp-tc { font-weight: 500; font-size: .78rem; }
.kgp-tabs { padding-top: var(--k-space-2); border-top: 1px solid var(--kgp-line); }
.kgp-jump { font: 600 .85rem var(--k-font-head); color: var(--kgp-navy); text-decoration: underline; text-underline-offset: 3px; }
.kgp-lib { scroll-margin-top: 140px; }
.kgp-lib:focus { outline: none; }
.kgp-chosen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kgp-chosen:empty { display: none; }
.kgp-chosen .kgp-lab { width: 100%; }
.kgp-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 4px 4px 10px; border-radius: var(--k-radius-pill); background: var(--kgp-green-soft); border: 1px solid var(--kgp-green); font-size: .82rem; line-height: 1.3; max-width: 100%; }
.kgp-chip b { font: 700 .72rem var(--k-font-head); color: var(--kgp-green); }
.kgp-chip button { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 0; background: #FFFFFF; color: var(--kgp-ink); padding: 0; font-size: .75rem; }
.kgp-ocs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kgp-oc { display: inline-flex; gap: 8px; align-items: flex-start; padding: 7px 12px; border-radius: var(--k-radius-pill); border: 1px solid var(--kgp-line); background: var(--kgp-bg); font-size: .85rem; line-height: 1.3; cursor: pointer; max-width: 100%; }
.kgp-oc b { font: 700 .72rem var(--k-font-head); color: var(--kgp-muted); }
.kgp-oc input { margin: 2px 0 0; accent-color: var(--kgp-green); }
.kgp-oc:has(input:checked) { background: var(--kgp-green-soft); border-color: var(--kgp-green); font-weight: 600; }
.kgp-ocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--k-space-3); }
.kgp-og { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.kgp-ogh { font: 700 .76rem var(--k-font-head); color: var(--kgp-navy); }
.kgp-og .kgp-oc { border-radius: var(--k-radius-control); }
.kgp-sug { display: flex; flex-wrap: wrap; gap: var(--k-space-3); align-items: center; }
.kgp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.kgp-lib { padding: var(--k-space-5); display: grid; gap: var(--k-space-3); align-content: start; border-right: 1px solid var(--kgp-line); min-width: 0; }
.kgp-prog { padding: var(--k-space-5); display: grid; gap: var(--k-space-3); align-content: start; min-width: 0; }
@media (max-width: 960px) { .kgp-body { grid-template-columns: 1fr; } .kgp-lib { border-right: 0; border-bottom: 1px solid var(--kgp-line); } }
.kgp-steps { display: grid; gap: var(--k-space-3); }
.kgp-step { display: grid; gap: 6px; }
.kgp-sh { font: 700 .76rem var(--k-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--kgp-muted); }
.kgp-step--on .kgp-sh { color: var(--kgp-green); }
.kgp-course { border: 1px solid var(--kgp-line); border-radius: var(--k-radius-control); background: var(--kgp-bg); }
.kgp-course summary { list-style: none; cursor: pointer; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.kgp-course summary::-webkit-details-marker { display: none; }
.kgp-cn { display: block; font-weight: 700; line-height: 1.3; color: var(--kgp-navy); }
.kgp-cm { display: block; font-size: .78rem; color: var(--kgp-muted); }
.kgp-inner { padding: 0 10px 10px; display: grid; gap: 6px; }
.kgp-mod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--kgp-line); cursor: grab; touch-action: none; user-select: none; }
.kgp-mod--in { opacity: .55; cursor: pointer; touch-action: auto; }
.kgp-mod--sug { border-color: var(--kgp-green); box-shadow: inset 3px 0 0 var(--kgp-green); }
.kgp-mt { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.kgp-mt:hover, .kgp-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
.kgp-mm { display: block; font-size: .75rem; color: var(--kgp-muted); }
.kgp-more { color: var(--kgp-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kgp-add { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--kgp-navy); background: transparent; color: var(--kgp-navy); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.kgp-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-space-2); }
@media (max-width: 520px) { .kgp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kgp-sum div { background: var(--kgp-chip); border-radius: var(--k-radius-control); padding: 10px; display: grid; gap: 2px; }
.kgp-sum b { font: 700 1.35rem/1.1 var(--k-font-head); color: var(--kgp-navy); font-variant-numeric: tabular-nums; }
.kgp-sum span { font-size: .76rem; color: var(--kgp-muted); }
.kgp-drop { border: 2px dashed var(--kgp-line); border-radius: var(--k-radius-control); min-height: 160px; padding: 8px; display: grid; gap: 8px; align-content: start; }
.kgp-drop--hot { border-color: var(--kgp-green); background: var(--kgp-green-soft); }
.kgp-empty { color: var(--kgp-muted); font-size: .92rem; padding: 18px; text-align: center; }
.kgp-row { display: grid; gap: 6px; padding: 10px; border-radius: var(--k-radius-control); background: var(--kgp-bg); border: 1px solid var(--kgp-line); }
.kgp-row--warn { border-color: var(--kgp-amber); }
.kgp-rtop { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.kgp-n { font: 700 .85rem/28px var(--k-font-head); text-align: center; border-radius: 50%; background: var(--kgp-navy); color: #FFFFFF; width: 28px; height: 28px; }
.kgp-nm { display: block; font-weight: 700; line-height: 1.3; font-size: .92rem; cursor: pointer; }
.kgp-meta { display: block; font-size: .76rem; color: var(--kgp-muted); }
.kgp-meta a { color: var(--kgp-navy); }
.kgp-ctl { display: flex; gap: 4px; }
.kgp-ctl button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--kgp-line); background: #FFFFFF; color: var(--kgp-ink); padding: 0; font-size: .85rem; }
.kgp-base { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; font-size: .8rem; }
.kgp-base div { background: #FFFFFF; border-radius: 8px; padding: 6px 8px; border: 1px solid var(--kgp-line); }
.kgp-base b { display: block; font: 700 .68rem var(--k-font-head); color: var(--kgp-muted); text-transform: uppercase; letter-spacing: .04em; }
.kgp-warn { font-size: .8rem; padding: 6px 8px; border-radius: 8px; background: var(--kgp-amber-soft); border-left: 3px solid var(--kgp-amber); }
.kgp-inf { font-size: .8rem; padding: 6px 8px; border-radius: 8px; background: var(--kgp-chip); border-left: 3px solid var(--kgp-navy); }
.kg-planner textarea { font: 400 .85rem/1.4 var(--k-font-body); width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--kgp-line); background: #FFFFFF; color: var(--kgp-ink); resize: vertical; min-height: 34px; }
.kgp-cta { justify-self: start; }
.kgp-acts-row { display: flex; flex-wrap: wrap; gap: var(--k-space-3); }
.kgp-linkbox { width: 100%; box-sizing: border-box; font: 400 .8rem var(--k-font-body); padding: 7px 9px; border: 1px solid var(--kgp-line); border-radius: 8px; background: var(--kgp-bg); color: var(--kgp-ink); }
.kgp-cta[disabled], .kg-planner .kg-btn[disabled] { opacity: .5; cursor: not-allowed; }
.kgp-fb { font-size: .9rem; min-height: 1.4em; }
.kgp-ghost { position: fixed; pointer-events: none; z-index: 1000; opacity: .92; box-shadow: var(--k-shadow-hover); max-width: 320px; }
/* full width: no side column on the planner page (Logga, 14 Nov 2026: no sidebars) */
body.kgp-page .kg-course__side { display: none; }
body.kgp-page .kg-course__layout { display: block; }
body.kgp-page .kg-course__main { max-width: none; width: 100%; }
/* module details pop-up */
.kgp-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(27, 58, 92, .55); display: grid; place-items: center; padding: 16px; }
.kgp-ov[hidden] { display: none; }
body.kgp-lock { overflow: hidden; }
.kgp-dlg { background: #FFFFFF; color: #2C2C2C; border-radius: 16px; max-width: 640px; width: 100%; max-height: min(86vh, 760px); overflow: auto; display: grid; gap: 14px; padding: 22px; box-shadow: var(--k-shadow-hover); font-family: var(--k-font-body); }
.kgp-dlg:focus { outline: none; }
@media (max-width: 600px) { .kgp-ov { place-items: end stretch; padding: 0; } .kgp-dlg { border-radius: 16px 16px 0 0; max-height: 88vh; padding: 18px 16px; } }
.kgp-dh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.kgp-dlg h3 { margin: 4px 0 0; font: 600 1.2rem/1.3 var(--k-font-head); color: #1B3A5C; }
.kgp-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #E0E0D8; background: #FAFAF5; color: #2C2C2C; }
.kgp-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.kgp-facts span { font: 600 .76rem var(--k-font-head); background: #E9EDF2; border-radius: 20px; padding: 5px 10px; }
.kgp-dlg p { margin: 0; }
.kgp-dlg h4 { margin: 0; font: 600 .78rem var(--k-font-head); text-transform: uppercase; letter-spacing: .05em; color: #666666; }
.kgp-blk { display: grid; gap: 6px; }
.kgp-blk[hidden] { display: none; }
.kgp-blk ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .92rem; }
.kgp-blk li span { color: #666666; font-size: .82rem; }
.kgp-dlg .kgp-base { font-size: .85rem; }
.kgp-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid #E0E0D8; padding-top: 14px; }
.kgp-foot a { color: #1B3A5C; font-weight: 600; }
.kgp-send { margin-top: var(--k-space-7); scroll-margin-top: 140px; }
@media (prefers-reduced-motion: reduce) { .kg-planner *, .kgp-dlg * { transition: none !important; scroll-behavior: auto !important; } }