/* ============================================================================
   SECTION 6 · THE PLANNER, jeff-planner.css
   A plan that adapts to you. Scrollable week board + FULL packet folder cards,
   ported from the full-width calendar design onto the landing page's frozen
   course-colour field. Everything scoped under .planner.
   ============================================================================ */

/* ---------------- the field ---------------- */
.planner{ position:relative; z-index:1; overflow:hidden;
  background-color:var(--course-c,#ff6a2b); transition:background-color .8s ease;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 44px);
  background-size:44px 44px;
  padding:clamp(80px,11vh,150px) 24px clamp(110px,15vh,190px); }
.planner::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  box-shadow:inset 0 0 250px 44px rgba(20,12,4,.20);
  -webkit-mask:linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 300px), transparent 100%);
          mask:linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 300px), transparent 100%); }
.planner .ai-icon{ font-family:'Material Symbols Outlined'; }

.pl-head{ position:relative; z-index:2; text-align:center; color:#fff;
  max-width:min(860px,100%); margin:0 auto; }
.pl-head .c-eyebrow{ margin-bottom:0; }
.pl-title{ margin:12px 0 0; font-family:var(--f-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(34px,5vw,60px); line-height:1.02; text-shadow:0 3px 20px rgba(20,12,4,.3); }
.pl-title em{ font-family:var(--f-script); font-style:italic; font-weight:600; }
.pl-sub{ margin:16px auto 0; max-width:56ch; font-size:clamp(14px,1.5vw,17.5px); line-height:1.6;
  color:rgba(255,255,255,.92); text-wrap:pretty; }
.pl-sub b{ color:#fff; font-weight:700; }

/* handwritten scribbles on the field */
.pl-scrib{ position:absolute; z-index:4; font-family:var(--f-hand); color:rgba(255,255,255,.92);
  font-size:23px; line-height:1.12; pointer-events:none; text-shadow:0 2px 10px rgba(20,12,4,.34); }
.pl-scrib .sm{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72); display:block; margin-top:3px; }
.pl-scrib.a{ right:3.5%; top:14%; transform:rotate(4deg); text-align:right; }
.pl-scrib.b{ left:3%; top:46%; transform:rotate(-6deg); }
.pl-scrib.c{ right:2.5%; bottom:9%; transform:rotate(-3deg); text-align:right; font-size:20px; }
@media (max-width:1420px){ .pl-scrib{ display:none; } }

.pl-fine{ position:relative; z-index:2; margin:26px auto 0; text-align:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; gap:8px; }
.pl-fine .ai-icon{ font-size:15px; }

/* ---------------- the board ---------------- */
.plx-wrap{ position:relative; z-index:2; width:min(1560px,100%);
  margin:clamp(34px,5.5vh,64px) auto 0; }
.plx{ position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  border:1.5px solid color-mix(in oklab, var(--course-c) 30%, var(--line));
  border-radius:20px;
  box-shadow:0 4px 10px rgba(20,12,4,.10), 0 44px 82px -34px rgba(20,12,4,.62); }
.plx::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--course-c) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--course-c) 6%, transparent) 1px, transparent 1px);
  background-size:32px 32px; }
.plx > *{ position:relative; z-index:1; }

.plx-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 22px; border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--paper) 70%, transparent); }
.plx-head .h-left{ display:flex; align-items:baseline; gap:14px; min-width:0; }
.plx-head .h-title{ font-family:var(--f-display); font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1; }
.plx-head .h-range{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.plx-head .h-range b{ color:var(--ink); font-weight:500; }
.plx-head .h-right{ display:inline-flex; align-items:center; gap:14px; }
.plx-cue{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.plx-cue .ai-icon{ font-size:15px; color:var(--course-c); transition:color .8s ease; }
.plx-replay{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); cursor:pointer;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  line-height:1; transition:opacity .15s; }
.plx-replay:hover{ opacity:.85; }
.plx-replay .ai-icon{ font-size:14px; }

/* ---------------- day columns, ALWAYS a horizontal scroll board ---------------- */
.plx-grid{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  /* constant, compact board height: room for TWO full cards; moved cards land at
     the TOP of a day and push existing cards down into the clipped zone */
  height:calc(2 * 196px + 17px + 33px + 50px);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.plx-grid::-webkit-scrollbar{ height:10px; }
.plx-grid::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6px; border:2px solid var(--paper); }
.plx-grid::-webkit-scrollbar-track{ background:transparent; }
.plx-col{ flex:0 0 var(--col-w,296px); width:var(--col-w,296px); overflow:hidden;
  border-right:1px solid var(--line); min-width:0; display:flex; flex-direction:column; }
.plx-col:last-child{ border-right:none; }
.plx-col.is-today{ background:color-mix(in oklab, var(--course-c) 5%, transparent); }
.plx-col.is-weekend{ background:color-mix(in oklab, var(--muted-2) 6%, transparent); }
.plx-col.is-weekend .d-name{ color:var(--muted-2); }
.plx-dh{ padding:13px 16px 11px; border-bottom:1px solid var(--line); position:relative;
  display:flex; align-items:baseline; gap:9px; }
.plx-dh .d-name{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.plx-dh .d-num{ font-family:var(--f-display); font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.plx-dh .d-load{ margin-left:auto; align-self:center; font-family:var(--f-mono); font-size:8.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }
.plx-col.is-today .d-num{ color:var(--course-c); transition:color .8s ease; }
.plx-col.is-today .plx-dh{ border-bottom-color:color-mix(in oklab, var(--course-c) 45%, var(--line)); }
.plx-col.is-today .plx-dh::after{ content:"Today"; position:absolute; left:16px; bottom:-1px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--course-c); }
.plx-stack{ display:flex; flex-direction:column; gap:17px; padding:15px 14px 18px; flex:1; min-height:0; }
.plx-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  color:var(--muted-2); text-align:center; padding:18px 8px; }
.plx-empty .ai-icon{ font-size:22px; opacity:.55; }
.plx-empty .e-t{ font-family:var(--f-mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }

/* drop target */
.plx-col.is-drop-target{ background:color-mix(in oklab, var(--course-c) 9%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--course-c) 55%, transparent); }
.plx-drophint{ padding:11px; border-radius:12px;
  border:1.5px dashed color-mix(in oklab, var(--course-c) 55%, var(--line));
  color:var(--course-c); background:color-mix(in oklab, var(--course-c) 6%, transparent);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:500; }
.plx-drophint .ai-icon{ font-size:14px; }

/* ---------------- the packet card (FULL folder card) ---------------- */
.plx .folder{ --ic:var(--course-c); --fh:196px; --notch-w:128px; --notch-h:36px;
  position:relative; display:block; width:100%; margin:0;
  filter:drop-shadow(0 2px 4px rgba(15,15,12,.05)) drop-shadow(0 16px 30px rgba(15,15,12,.16));
  transition:filter .25s, transform .2s, opacity .2s; }
.plx .folder-back{ position:absolute; top:5px; left:5px; right:15px; bottom:15px;
  border-radius:18px; z-index:0;
  background:linear-gradient(150deg, color-mix(in oklab, var(--ic) 82%, #ffffff), var(--ic) 50%, color-mix(in oklab, var(--ic) 82%, #000000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.10); }
.plx .folder-back::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.15) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:28px 28px; }
.plx .folder-label{ position:absolute; top:0; left:0; width:var(--notch-w); height:var(--notch-h);
  display:inline-flex; align-items:center; gap:5px; padding-left:16px; box-sizing:border-box;
  color:#fff; font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; line-height:1; white-space:nowrap; z-index:1; }
.plx .folder-label .lab-mod::before{ content:"·"; opacity:.5; margin:0 3px; }

.plx .folder-front{ position:relative; z-index:2; width:100%; height:var(--fh);
  background:var(--paper); border-radius:18px; padding:48px 15px 16px;
  display:flex; flex-direction:column; }
.plx .folder-front::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, color-mix(in oklab, var(--ic) 9%, transparent) 1px, transparent 1px),
                   linear-gradient(to bottom, color-mix(in oklab, var(--ic) 9%, transparent) 1px, transparent 1px);
  background-size:28px 28px; }
.plx .folder-front > *{ position:relative; z-index:1; }
.plx .folder-front::after{ content:"menu_book"; position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-8px; bottom:-12px; font-size:104px; line-height:1;
  font-family:'Material Symbols Outlined' !important;
  font-variation-settings:'wght' 400,'opsz' 48;
  font-feature-settings:'liga'; -webkit-font-feature-settings:'liga';
  color:var(--ic); opacity:.16; transform:rotate(-13deg); }
.plx .folder.kind-prac .folder-front::after{ content:"quiz"; }
.plx .folder.is-done   .folder-front::after{ content:"task_alt"; }

.plx .folder-edge{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; }
.plx .folder-edge path{ fill:none; stroke:color-mix(in oklab, var(--ic) 58%, var(--line)); stroke-width:1.5;
  vector-effect:non-scaling-stroke; transition:stroke .18s; }
.plx .folder:hover .folder-edge path{ stroke:color-mix(in oklab, var(--ic) 74%, var(--line)); }

.plx .folder-pct{ position:absolute; top:10px; right:15px; z-index:2;
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size:30px; line-height:.85; color:var(--ic); font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:baseline; }
.plx .folder-pct em{ font-style:normal; font-size:.45em; margin-left:1px;
  color:color-mix(in oklab, var(--ic) 70%, var(--muted));
  font-family:var(--f-mono); font-weight:500; letter-spacing:.02em; }
.plx .folder.is-done .folder-pct{ align-items:center; }
.plx .folder.is-done .folder-pct::after{ content:"check_circle";
  font-family:'Material Symbols Outlined' !important;
  font-variation-settings:'wght' 500,'opsz' 24,'FILL' 1;
  font-size:.5em; line-height:1; margin-left:6px; color:var(--ic); opacity:.9; }

.plx .folder-nm{ margin:0; font-family:var(--f-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.012em; line-height:1.15; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; min-width:0; }
.plx .folder-nm .id-tf{ flex:none; color:var(--ic); font-weight:600; font-variant-numeric:tabular-nums; }
.plx .folder-nm .id-tf::after{ content:""; display:inline-block; width:1px; height:.72em; margin-left:8px;
  background:var(--line-2); vertical-align:-1px; }
.plx .folder-nm .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.plx .folder-desc{ margin:6px 0 0; font-size:12.5px; line-height:1.42; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.plx .folder-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 0; overflow:hidden; max-height:21px; }
.plx .folder-tag{ flex:none; font-family:var(--f-mono); font-size:8.5px; font-weight:500; letter-spacing:.02em;
  color:var(--muted); background:color-mix(in oklab, var(--ic) 6%, var(--paper-2));
  border:1px solid var(--line); border-radius:5px; padding:3px 7px; line-height:1; white-space:nowrap; }
.plx .folder-tag::before{ content:"#"; opacity:.45; margin-right:1px; }
.plx .folder-meta{ margin-top:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:9px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); }
.plx .folder-meta .m{ display:inline-flex; align-items:center; gap:5px; }
.plx .folder-meta .m .ai-icon{ font-size:12.5px; color:var(--ink-2); }
.plx .folder-meta .m b{ color:var(--ink); font-weight:500; }
.plx .folder-meta .div{ width:1px; height:10px; background:var(--line-2); }
.plx .folder-pb{ position:absolute; left:0; right:0; bottom:0; z-index:1; height:7px;
  background:color-mix(in oklab, var(--ic) 14%, transparent); overflow:visible; }
.plx .folder-pb i{ display:block; height:100%; background:var(--ic); transition:width .3s ease; }
/* expected-pace tick, only on the "running late" packet */
.plx .folder.is-late .folder-pb::after{ content:""; position:absolute; left:var(--exp,60%); top:-3px; bottom:-1px;
  width:2px; background:repeating-linear-gradient(0deg, var(--ic) 0 2px, transparent 2px 4px); opacity:.6; }
.plx .folder.is-late .folder-pb b{ position:absolute; left:var(--exp,60%); top:-12px; transform:translateX(-50%);
  font-family:var(--f-mono); font-weight:400; font-size:7.5px; letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in oklab, var(--ic) 75%, var(--muted)); white-space:nowrap; }

.plx .folder:hover{ transform:translateY(-3px);
  filter:drop-shadow(0 4px 10px rgba(15,15,12,.07)) drop-shadow(0 24px 44px rgba(15,15,12,.22)); }

/* grip */
.plx .pk-grip{ position:absolute; z-index:6; top:7px; right:7px; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; cursor:grab; color:var(--muted); touch-action:none;
  background:color-mix(in oklab, var(--paper) 86%, transparent); border:1px solid var(--line);
  opacity:0; transform:translateY(-2px) scale(.9);
  transition:opacity .14s, transform .14s, color .14s, border-color .14s; }
.plx .pk-grip .ai-icon{ font-size:17px; line-height:1; }
.plx .folder:hover .pk-grip{ opacity:1; transform:none; }
.plx .pk-grip:hover{ color:var(--ink); border-color:var(--line-2); background:var(--paper); }
.plx .pk-grip:active{ cursor:grabbing; }
@media (pointer:coarse){ .plx .pk-grip{ opacity:.6; transform:none; } }
.plx .folder.is-grabbed{ opacity:.28; filter:saturate(.4) drop-shadow(0 2px 4px rgba(15,15,12,.05)); }
.plx.is-dragging .pk-grip{ opacity:1; }

/* landing pulse after a Jeff move */
.plx .folder.jeff-moved{ animation:pl-land .7s cubic-bezier(.22,1,.36,1); }
@keyframes pl-land{ 0%{ transform:scale(1.045); } 100%{ transform:none; } }
/* grip invite pulse */
.plx .pk-grip.grip-pulse{ opacity:1; transform:none; animation:pl-grip 1.1s ease-in-out 2; }
@keyframes pl-grip{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }

/* clone layer, a fixed, transparent element that CARRIES the .plx scope class so
   lifted cards keep their full folder styling outside the board */
.plx.plx-clonelayer{ position:fixed; inset:0; z-index:999; pointer-events:none;
  background:none; border:none; box-shadow:none; overflow:visible; border-radius:0; }
.plx.plx-clonelayer::before{ content:none; }
.plx.plx-clonelayer > *{ position:absolute; }
.plx-clone{ position:absolute; margin:0; will-change:transform; transition:none !important; }
.plx-clone.is-drag{ filter:drop-shadow(0 6px 12px rgba(20,12,4,.18)) drop-shadow(0 34px 54px rgba(20,12,4,.42)) !important; }

/* ---------------- fx overlay: handwritten notes (scroll-synced inner layer) ---------------- */
.plx-fx{ position:absolute; inset:-56px; pointer-events:none; z-index:9; overflow:visible; }
.plx-fx-inner{ position:absolute; inset:0; will-change:transform; }
.fxnote{ position:absolute; font-family:var(--f-hand); color:var(--scrib); font-size:20px; line-height:1.35;
  width:max-content; max-width:230px; transform:rotate(var(--r,-3deg)); opacity:0;
  /* horizontal swipe reveal, like a highlighter stroke being drawn */
  clip-path:inset(-25% 103% -25% -3%);
  transition:opacity .18s ease, clip-path .65s cubic-bezier(.3,.6,.3,1); }
.fxnote.on{ opacity:1; clip-path:inset(-25% -3% -25% -3%); }
/* highlighter stroke behind the handwriting so it reads over cards and field */
.fxnote .hl{ background:linear-gradient(100deg, rgba(255,226,122,0) 0.5%, var(--sticky) 3.5%, var(--sticky) 96.5%, rgba(255,226,122,0) 99.5%);
  padding:1px 9px 2px; border-radius:4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  box-shadow:0 1px 6px -2px rgba(70,34,6,.35); }
.fxnote .sm{ display:inline-block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; color:color-mix(in oklab, var(--scrib) 68%, var(--muted));
  background:rgba(253,252,249,.92); padding:3px 7px; border-radius:4px; margin-top:4px;
  box-shadow:0 1px 4px -1px rgba(20,12,4,.25); }

/* ---------------- responsive ---------------- */
@media (max-width:680px){
  .planner{ padding-left:14px; padding-right:14px; }
  .pl-head{ padding:0 14px; }
  .pl-fine{ padding:0 14px; flex-wrap:wrap; }
  .plx-head{ padding:14px 16px; }
  .plx-cue{ display:none; }
  .plx-col{ --col-w:min(272px, calc(100vw - 92px)); }
}

@media (prefers-reduced-motion: reduce){
  .plx .folder, .plx .folder:hover{ transition:none; transform:none; }
  .plx .folder.jeff-moved, .plx .pk-grip.grip-pulse{ animation:none; }
  .fxnote{ clip-path:none; transition:opacity .3s ease; }
}