/* ========================================================================
   GagaMuller Learning — 11-learner-panels.css
   The panels on a learner's own pages - what they are held to, and the
   development they have logged - and the competency picker both the CPD form
   and the course editor draw from.
   ======================================================================== */

/* A ROW, NOT A TILE. The admin dashboard shows deadlines as tiles because it
   compares many of them across a population; a learner has two or three and
   needs to read each one as a sentence - what it is, how far through, by when.
   Three columns, so the dates line up down the right and can be scanned. */
.mydl{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:13px 0; border-top:1px solid var(--line);}
.mydl:first-of-type{border-top:0; padding-top:4px;}

.mydl-mark{flex:none; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; background:var(--raised); color:var(--muted);}
.mydl-mark svg{width:18px; height:18px;}
.mydl.met .mydl-mark{background:var(--ok-soft); color:var(--ok);}
.mydl.late .mydl-mark{background:color-mix(in srgb, var(--bad) 14%, transparent); color:var(--bad);}

.mydl-body{min-width:0;}
.mydl-name{font-size:14px; font-weight:650; color:var(--ink); line-height:1.35;}

/* The same bar the rest of the application draws progress with, at the width
   of its column rather than a fixed measure - the panel sits in a card that is
   full width on a phone and half of one beside a sidebar. */
.mydl-bar{height:5px; border-radius:999px; background:var(--line); overflow:hidden;
  margin:7px 0 5px; max-width:360px;}
.mydl-bar i{display:block; height:100%; border-radius:999px; background:var(--brand);
  transition:width .3s;}
.mydl.met .mydl-bar i{background:var(--ok);}
.mydl.late .mydl-bar i{background:var(--warn);}

.mydl-when{text-align:right; flex:none; white-space:nowrap;}
.mydl-when b{font-size:14px;}
.mydl.met .mydl-when{opacity:.7;}

@media (max-width: 640px){
  /* The date drops under the name rather than squeezing it. A two-word course
     name wrapping to three lines to keep a date on the same row is the wrong
     thing to protect. */
  .mydl{grid-template-columns:auto 1fr; row-gap:8px;}
  .mydl-when{grid-column:2; text-align:left;}
  .mydl-bar{max-width:none;}
}

/* ========================= CPD =========================================
   The development record on My record, and the manager's queue on My team.

   Built from the pieces already here - .card, .tag, .chk, the .lib-fold
   disclosure - rather than a second visual language for one feature. A CPD
   entry is a record that folds open, which is what a course card is, so it
   folds the same way and reads as part of the same application.
   ======================================================================== */

.cpd-card h3{font-size:17px;}

/* ---------------------------------------------------------------- a row --
   The header is the whole hit area: date and hours on the left so a list of
   them scans down the column, what it was in the middle, state on the right. */
.cpd-row{border:1px solid var(--line); border-radius:11px; background:var(--raised);
  overflow:hidden; transition:border-color .14s;}
.cpd-row:hover{border-color:color-mix(in srgb, var(--brand) 38%, var(--line));}
.cpd-row.on{border-color:var(--brand); background:var(--surface);}

.cpd-head{display:flex; align-items:center; gap:13px; width:100%; padding:11px 14px;
  background:none; border:0; text-align:left; cursor:pointer; color:var(--ink);}
.cpd-head:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;}

/* Fixed measure and tabular figures, so the dates line up down the list
   instead of drifting with the width of the month. */
.cpd-when{flex:none; width:96px; display:flex; flex-direction:column; gap:1px;
  font-variant-numeric:tabular-nums;}
.cpd-when b{font-size:12.8px;}
.cpd-what{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.cpd-what b{font-size:13.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cpd-what .mini{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.cpd-head .cv{width:15px; height:15px; flex:none; color:var(--muted); transition:transform .22s;}
.cpd-row.on .cpd-head .cv{transform:rotate(180deg);}

/* The same one-row-grid fold the library cards use: 0fr to 1fr is the only way
   to animate to a height nobody has measured. Same curve and same fade as the
   course groups, because two folds easing differently on one page reads as one
   of them being broken. */
.cpd-fold{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .26s cubic-bezier(.25,.8,.3,1);}
.cpd-row.on .cpd-fold{grid-template-rows:1fr;}
.cpd-clip{overflow:hidden; min-height:0; opacity:0; transition:opacity .14s ease;}
.cpd-row.on .cpd-clip{opacity:1; transition:opacity .22s ease .05s;}
.cpd-body{padding:0 14px 13px; display:flex; flex-direction:column; gap:9px;
  align-items:flex-start; visibility:hidden; transition:visibility 0s linear .26s;}
.cpd-row.on .cpd-body{visibility:visible; transition:visibility 0s;}

.cpd-skills{display:flex; flex-wrap:wrap; gap:6px;}

/* ------------------------------------------------------------ the trail --
   Who did what, when. Small, aligned, and always present - an approval with no
   name and no date on it is not one anybody can rely on a year later. */
.cpd-trail{display:flex; flex-direction:column; gap:3px; font-size:12.2px;
  color:var(--ink); padding:9px 11px; border-radius:9px; background:var(--fill);
  align-self:stretch;}
.cpd-trail .mini{display:inline-block; min-width:74px;}
.cpd-note{display:flex; align-items:flex-start; gap:7px; margin-top:4px;
  padding-top:6px; border-top:1px solid var(--hair); color:var(--muted); font-style:italic;}
.cpd-note svg{width:13px; height:13px; flex:none; margin-top:2px; opacity:.6;}

/* --------------------------------------------------- the manager's queue --
   A card per request rather than a table row: a decision needs the description
   and the evidence in front of it, and a table that wide is unreadable. */
.cpd-ask{border:1px solid var(--line); border-radius:12px; background:var(--raised);
  padding:13px 14px;}
.cpd-ask:hover{border-color:color-mix(in srgb, var(--brand) 32%, var(--line));}
.cpd-desc{font-size:13.4px; color:var(--ink); margin:9px 0 0; line-height:1.5;}

/* The reason box grows into the row and keeps the two buttons together at the
   end of it, so Decline is never the thing nearest the thumb by accident. */
.cpd-why{flex:1; min-width:150px; padding:6px 10px; font-size:12.6px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink);}
.cpd-why:focus{outline:none; border-color:var(--brand);}

@media (max-width: 680px){
  .cpd-when{width:auto; flex-direction:row; align-items:baseline; gap:7px;}
  .cpd-head{flex-wrap:wrap;}
  .cpd-what{flex-basis:100%; order:3;}
  .cpd-why{flex-basis:100%;}
}

/* ================= choosing several competencies ========================
   A <details> dressed as a form control. Here rather than in 04-components.css
   - where a shared control belongs - only because that file is at the 500-line
   ceiling the build enforces.

   WHY A DISCLOSURE AND NOT A <select multiple>. Twenty-two options laid flat is
   a wall, and a native multi-select hides the one-line definition under each
   label, which is the whole reason somebody can tell Collaborative from
   Collaboration & Integration. Closed it reads as one field; open it is a
   grouped, readable list.
   ======================================================================== */

.msel-fld{display:flex; flex-direction:column; gap:0;}
.msel-hint{margin:-2px 0 7px; color:var(--muted);}

.msel{border:1px solid var(--line); border-radius:10px; background:var(--surface);
  overflow:hidden;}
.msel[open]{border-color:var(--brand);}

/* The closed state is the control. list-style:none kills the native triangle in
   Firefox; ::-webkit-details-marker does the same in Safari. */
.msel-sum{display:flex; align-items:center; gap:10px; padding:10px 13px;
  cursor:pointer; list-style:none; font-size:13.4px; color:var(--ink);
  user-select:none;}
.msel-sum::-webkit-details-marker{display:none;}
.msel-sum:hover{background:var(--raised);}
.msel-sum:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;}
.msel-val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msel-sum .cv{width:15px; height:15px; flex:none; color:var(--muted); transition:transform .2s;}
.msel[open] .msel-sum .cv{transform:rotate(180deg);}

/* The panel scrolls rather than pushing the dialog's own buttons off the
   bottom - a picker that moves Save out of reach is a picker people close. */
.msel-panel{max-height:320px; overflow-y:auto; padding:4px 9px 9px;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:5px;}

/* Sticky group headings, so scrolling through twenty-two options never loses
   which framework the one under the cursor belongs to. */
.msel-grp{position:sticky; top:0; z-index:1; background:var(--surface);
  padding:9px 3px 5px; font:700 10.5px var(--mono); letter-spacing:.5px;
  text-transform:uppercase; color:var(--brand);}
.msel-grp:first-child{padding-top:5px;}

.msel-item{align-items:flex-start; gap:10px; padding:8px 11px;}
.msel-item b{font-size:13px; display:block;}
.msel-item .mini{display:block; margin-top:2px; line-height:1.45;}
.msel-item input{margin-top:2px;}

/* WHAT IS CHOSEN STAYS VISIBLE WITH THE CONTROL SHUT. A dropdown holding
   several things that hides them on close answers the question and then takes
   the answer away. */
.msel-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.msel-chips:empty{display:none;}

/* A competency tag carries its framework in the title, so it needs the cursor
   that says there is something to hover for. */
.comp-tag{cursor:help;}

@media (max-width: 640px){
  .msel-panel{max-height:260px;}
}

/* ================= the CPD form ========================================
   .fld carries NO bottom margin - every form in this application adds its own,
   inline, per field. That is why the first version of this one was ten controls
   touching each other: nothing was wrong with any of them, nothing had been
   said about the space between them.

   Spacing is owned by the form here instead, so a field added later is spaced
   correctly without anybody remembering to say so.
   ======================================================================== */

.cpd-form{display:flex; flex-direction:column; gap:22px;}

/* A SECTION, not a divider line. Ten controls in one column is a scroll with no
   landmarks - you cannot tell how far through you are or what is left. Four
   named steps answer both without a progress bar or a wizard. */
.cpd-sec{display:flex; flex-direction:column; gap:12px;}
.cpd-sec-h{display:flex; align-items:center; gap:9px;}
.cpd-sec-h h4{font-size:13.5px; font-weight:650; color:var(--ink); letter-spacing:-.1px;}

/* The number does the work a heading rule would, and says there is an order. */
.cpd-sec-n{flex:none; width:21px; height:21px; border-radius:50%; display:grid;
  place-items:center; font:700 11px var(--mono); color:var(--brand);
  background:var(--brand-soft);}

/* Indented to the heading's text, so the eye has one left edge per section and
   the numbers stand outside it. */
.cpd-sec-b{display:flex; flex-direction:column; gap:14px; padding-left:30px;}

/* TWO AND THREE UP, with explicit columns rather than the .g2/.g3 helpers.
   Those are auto-fit with a 330px and 270px minimum, sized for page cards - in
   a 680px dialog they collapse to one column, so a date and a number that
   belong side by side ended up stacked. */
.cpd-2up{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
.cpd-3up{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}

/* The sentence under a field, which is where the "optional" and the
   explanations live - small, quiet, and never a tooltip, because a rule nobody
   can see until they hover is a rule most people never read. */
.cpd-help{font-size:11.5px; line-height:1.45; color:var(--muted);}

/* Required is marked; optional is not. The form used to say "optional" on four
   labels and nothing on the rest, which leaves the rule to be inferred from its
   exceptions. */
.cpd-req{color:var(--bad); margin-left:3px; font-weight:700;}

/* The destination sits apart from the fields: it is what happens NEXT rather
   than something to fill in. */
.cpd-dest{margin:0;}

/* The competency picker inside a .fld - its own wrapper sets gap:0 so the
   label, hint, control and chips stack tightly; the field below it still gets
   the form's gap. */
.cpd-sec-b .msel-fld{gap:0;}

@media (max-width: 620px){
  /* A date and a number side by side is fine on a phone; three text inputs are
     not - they become three boxes too narrow to read what is typed in them. */
  .cpd-3up{grid-template-columns:1fr;}
  .cpd-sec-b{padding-left:0;}
}

/* ---------------------------------------- decisions already made ---------
   A reference list rather than a queue, so it is shut by default and sits
   under the things that still need doing. */
.cpd-done{margin-top:16px; border-top:1px solid var(--line); padding-top:12px;}
.cpd-done-sum{display:flex; align-items:center; gap:9px; cursor:pointer;
  list-style:none; font-size:12.8px; font-weight:650; color:var(--ink);}
.cpd-done-sum::-webkit-details-marker{display:none;}
.cpd-done-sum .mini{margin-left:auto;}
.cpd-done-sum .cv{width:14px; height:14px; color:var(--muted); transition:transform .2s;}
.cpd-done[open] .cpd-done-sum .cv{transform:rotate(180deg);}

.cpd-donerow{display:flex; align-items:center; gap:11px; padding:8px 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--raised);}
.cpd-donerow b{font-size:12.8px;}
.cpd-donerow .mini{white-space:nowrap;}
.cpd-donerow > div .mini{white-space:normal; overflow:hidden; text-overflow:ellipsis;}

@media (max-width: 620px){
  .cpd-donerow{flex-wrap:wrap;}
}

/* ================= the framework, as one person's record ================
   One competency per row, every one of them listed - a competency with nothing
   against it is the most useful row on the panel, and a list showing only what
   somebody has already done cannot say "nothing yet".
   ======================================================================== */
/* A FRAMEWORK, AS A DROPDOWN. Shut it is one row; open it is its competencies.
   The summary carries the count, so the whole framework is readable at a glance
   without opening anything. */
.comp-group{border-bottom:1px solid var(--hair);}
.comp-group:last-of-type{border-bottom:0;}
.comp-group-sum{display:flex; align-items:center; gap:11px; padding:11px 2px;
  cursor:pointer; list-style:none; user-select:none;}
.comp-group-sum::-webkit-details-marker{display:none;}
.comp-group-sum:hover .comp-grp{color:var(--ink);}
.comp-group-sum:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;
  border-radius:8px;}
.comp-group-sum .mini{margin-left:auto; font-variant-numeric:tabular-nums;}
.comp-group-sum .cv{width:14px; height:14px; flex:none; color:var(--muted);
  transition:transform .2s;}
.comp-group[open] .comp-group-sum .cv{transform:rotate(180deg);}

/* OPENING A FRAMEWORK SLIDES ITS COMPETENCIES IN. A <details> takes its content
   out of the document the instant it shuts, so there is nothing left to
   transition on the way back - the open is the half that can be animated, and
   the half anybody watches. */
.comp-group[open] > .col{animation:compIn .26s cubic-bezier(.25,.8,.3,1);}
@keyframes compIn{from{opacity:0; transform:translateY(-7px);}}

.comp-grp{font:700 10.5px var(--mono); letter-spacing:.5px; text-transform:uppercase;
  color:var(--brand); transition:color .14s;}

.comp-row{border:1px solid var(--line); border-radius:10px; background:var(--raised);
  overflow:hidden; transition:border-color .18s ease, background .18s ease;}
.comp-row:hover{border-color:color-mix(in srgb, var(--brand) 38%, var(--line));}
.comp-row.on{border-color:var(--brand); background:var(--surface);}

/* An empty one is quieter but not hidden: present, legible, and plainly not
   done. Padding matches the head below so the rows line up either way. */
.comp-row.empty{display:flex; align-items:center; gap:11px; padding:10px 13px;
  background:transparent; border-style:dashed; opacity:.72;}
.comp-row.empty b{font-weight:600;}

.comp-head{display:flex; align-items:center; gap:11px; width:100%; padding:10px 13px;
  background:none; border:0; text-align:left; cursor:pointer; color:var(--ink);}
.comp-head:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;}
.comp-head b{font-size:13.2px;}
.comp-n{flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:999px;
  display:grid; place-items:center; font:700 11px var(--mono);
  background:var(--brand-soft); color:var(--brand);}
.comp-head .cv{width:14px; height:14px; flex:none; color:var(--muted);
  transition:transform .26s cubic-bezier(.25,.8,.3,1);}
.comp-row.on .comp-head .cv{transform:rotate(180deg);}

/* The house fold: the row grows on the curve, and the evidence inside fades in
   just behind it rather than arriving at full strength against a box that has
   not finished opening. Visibility is held for the length of the collapse so
   the list does not vanish before the row has closed around it. */
.comp-fold{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .26s cubic-bezier(.25,.8,.3,1);}
.comp-row.on .comp-fold{grid-template-rows:1fr;}
.comp-clip{overflow:hidden; min-height:0; opacity:0; transition:opacity .14s ease;}
.comp-row.on .comp-clip{opacity:1; transition:opacity .22s ease .05s;}
.comp-body{padding:0 13px 11px; display:flex; flex-direction:column; gap:5px;
  visibility:hidden; transition:visibility 0s linear .26s;}
.comp-row.on .comp-body{visibility:visible; transition:visibility 0s;}

/* One piece of evidence. The tag says which kind, so a course and a CPD entry
   are never mistaken for one another in a mixed list. */
.comp-ev{display:flex; align-items:baseline; gap:9px; padding:6px 10px;
  border-radius:8px; background:var(--fill); font-size:12.6px;}
.comp-ev b{flex:1; min-width:0; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.comp-ev .mini{flex:none; white-space:nowrap;}

@media (max-width: 620px){
  .comp-ev{flex-wrap:wrap;}
  .comp-ev b{flex-basis:100%;}
}