/* ============================================================
   PERSONAL MODE — a private, this-device-only task list. It takes over
   the same pane Assigned/Team occupy (mobile: a plain section in the
   stage; desktop: the second pane, in the "side" grid slot), and while
   it's showing, everything work-shaped steps aside: Daily Mission, the
   Assigned/Team pane, and the Clock In dock. Local storage only, keyed
   by uid like the Pomodoro's own state - never touches Firestore.
   ============================================================ */
.app.personal-on #assignedTasksSection,
.app.personal-on #teamPanel,
.app.personal-on #missionCard,
.app.personal-on .shiftbar,
.app.personal-on .dock{display:none!important}

/* mobile/base: #personalTasksSection is an .assign-panel, so it already
   inherits that class's plain-section treatment for free - only the
   pt-* content below is new */
.pt-add-row{display:flex;gap:10px;margin-top:2px}
.pt-add-row input{
  flex:1;min-width:0;padding:13px 16px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--wk-white);font-family:var(--wk);font-size:14px;
}
.pt-add-row input::placeholder{color:var(--wk-white-60)}
.pt-add-row input:focus{outline:2px solid var(--wk-white);outline-offset:1px}
.pt-add-btn{
  flex:none;width:46px;height:46px;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--wk-green);border:0;color:#08210a;
  transition:transform .14s ease,background .2s ease;
}
.pt-add-btn svg{width:20px;height:20px}
.pt-add-btn:hover{background:#00c40e}
.pt-add-btn:active{transform:scale(.93)}

.pt-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pt-empty{padding:22px 14px;text-align:center;font-family:var(--wk);font-size:13px;color:var(--wk-white-60)}
.pt-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background .15s ease,opacity .2s ease;
}
.pt-check{
  flex:none;width:24px;height:24px;border-radius:50%;cursor:pointer;padding:0;
  border:1.5px solid rgba(255,255,255,.4);background:none;
  display:flex;align-items:center;justify-content:center;color:#08210a;
  transition:background .15s ease,border-color .15s ease;
}
.pt-check svg{width:14px;height:14px;opacity:0;transition:opacity .15s ease}
.pt-row.is-done .pt-check{background:var(--wk-green);border-color:var(--wk-green)}
.pt-row.is-done .pt-check svg{opacity:1}
.pt-text{flex:1;min-width:0;font-family:var(--wk);font-size:14px;color:var(--wk-white);overflow-wrap:anywhere}
.pt-row.is-done{opacity:.55}
.pt-row.is-done .pt-text{text-decoration:line-through;color:var(--wk-white-60)}
.pt-del{
  flex:none;width:28px;height:28px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  color:#FF8E8E;font-size:14px;line-height:1;
}
.pt-del:hover{background:rgba(255,92,92,.16)}

/* Focus Anchor, step 3: the hover affordance that promotes a row to the
   center column. Hidden until the row is hovered/focused so the row's
   resting state stays exactly as it was; a done task never gets one -
   there's nothing to focus on. The anchored row itself wears a quiet green
   left edge so it's clear at a glance which task the center column is
   showing, without a heavier treatment competing with .is-done's dimming. */
.pt-focus{
  flex:none;width:26px;height:26px;padding:0;cursor:pointer;
  background:none;border:0;border-radius:8px;color:var(--wk-white-60);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.pt-focus svg{width:16px;height:16px}
.pt-row:hover .pt-focus,.pt-row:focus-within .pt-focus{opacity:1}
.pt-focus:hover{background:rgba(0,174,11,.16);color:var(--wk-green)}
.pt-row.is-anchored{
  box-shadow:inset 3px 0 0 var(--wk-green);
  background:rgba(0,174,11,.07);
}
.pt-row.is-anchored .pt-focus{opacity:1;color:var(--wk-green)}
/* names the anchored row outright rather than leaving the green edge to
   speak for itself - easy to miss at a glance, especially once the row
   scrolls away from the add-form and has nothing nearby for contrast */
.pt-anchor-tag{
  flex:none;padding:2px 8px;border-radius:999px;
  background:rgba(0,174,11,.18);color:var(--wk-green);
  font-family:var(--wk);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

/* The panel's own icon badge - was a bare white glyph shared verbatim with
   Team/Assigned, which read as generic. Green-tinted here to match the
   rest of this card's own palette (the add button, checkmarks, the
   anchored-row accent), scoped to this panel only. */
#personalTasksSection .team-panel-mark{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:rgba(0,174,11,.14);border:1px solid rgba(0,174,11,.3);color:var(--wk-green);
}
#personalTasksSection .team-panel-mark svg{width:20px;height:20px}

/* ---------- Focus Anchor: Personal mode's center column ----------
   Bare on mobile/tablet, same as the task list is there (.assign-panel's
   plain-section treatment) - the blurry-glass card only shows up from
   1024px, matching #personalTasksSection exactly (see that @media block
   below). Visible at every width; only its POSITION changes:
     < 1024px  - a plain block above the timer (.stage is a flex column;
                 order:-1 puts it first)
     1024-1099 - its own row above the timer, inside the rail's column
                 (not wide enough yet for a real third column)
     >= 1100px - a genuine third grid column between the rail and the
                 task list (see the two breakpoints below) */
.anchor{display:none}
.app.personal-on .anchor{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;text-align:center;overflow:hidden;
  padding:18px 20px 2px;order:-1;
}
.anchor-inner{position:relative;z-index:1;max-width:420px}
.anchor.is-new .anchor-inner{animation:anchorIn .3s cubic-bezier(.22,1,.36,1) both}
@keyframes anchorIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.anchor-empty{
  margin:0;font-family:var(--wk);font-size:14px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25);
}
/* The rail's own ring already owns the live countdown - this is a
   different number: how far through the whole round set, not this round's
   remaining seconds. Single series, no legend needed; the hero number
   lives inside the ring itself rather than beside it, and there's no
   hover/tooltip - this is an ambient stat, not something to interrogate.
   -90deg rotation moves the dasharray/dashoffset circle's start (3 o'clock
   by SVG default) to 12, matching the rail ring's own convention; the
   gradient + soft glow give it the same "lit from within" quality as the
   backdrop glow behind the whole column, instead of a flat, printed line. */
.anchor-ring-wrap{position:relative;width:84px;height:84px;margin:0 auto 18px}
.anchor-ring{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.anchor-ring-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
.anchor-ring-fill{
  fill:none;stroke:url(#anchorRingGrad);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(0,174,11,.55));
  transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1);
}
.anchor-ring-pct{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.anchor-ring-pct b{
  font-family:var(--mono);font-size:17px;font-weight:700;color:var(--wk-white);
  font-variant-numeric:tabular-nums;line-height:1;
}
.anchor-ring-pct small{
  font-family:var(--wk);font-size:7.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}
.anchor-eyebrow{
  margin:0 0 10px;font-family:var(--wk);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.anchor-title{
  margin:0;font-family:var(--body);font-weight:300;font-size:clamp(24px,3.2vw,40px);
  line-height:1.2;color:rgba(255,255,255,.85);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.anchor-rule{width:64px;height:1px;background:rgba(255,255,255,.1);margin:20px auto;border:0}
.anchor-meta{margin:0;font-family:var(--wk);font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.02em}
/* echoes "Round X of Y" visually, not just in words - same .pomo-dot the
   ring itself uses, so the two stay in lockstep by construction rather
   than two separate things that could drift out of sync */
.anchor-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.anchor-acts{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:12px}
.anchor-act{
  background:none;border:0;padding:4px;cursor:pointer;
  font-family:var(--wk);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wk-white);transition:opacity .15s ease;
}
.anchor-act:hover{opacity:.65}
.anchor-act-sep{color:rgba(255,255,255,.3)}
.anchor-break-count{margin:0 0 8px;font-family:var(--wk);font-size:16px;font-weight:500;color:rgba(255,255,255,.75)}
.anchor-break-time{margin:0;font-family:var(--wk);font-size:13px;color:rgba(255,255,255,.5)}

/* desktop: promote the task list to the second pane, same glass treatment
   Assigned/Team get there - gated on personal-on rather than has-tasks/
   has-team so it works the same for a worker or an admin. The rail
   (.clock - mode switch + Pomodoro ring/controls) stays bare, same as
   Clocks/Focus - matching the task card's surface here didn't read right
   next to the timer, so only the task card keeps it. The Anchor DOES get
   it - "no card" was the original call, but the feedback was the opposite:
   it read as too plain/flat next to the task card's own glass, not that
   bare-canvas was the goal. Exact same recipe, copied rather than
   re-derived, so all three surfaces genuinely match. */
@media (min-width:1024px){
  .app.panes.personal-on #personalTasksSection,
  .app.panes.personal-on .anchor{
    border-radius:43px;border:0;
    background:rgba(255,244,229,.18);
    backdrop-filter:blur(9px) saturate(110%);-webkit-backdrop-filter:blur(9px) saturate(110%);
  }
  .app.panes.personal-on #personalTasksSection{
    display:flex;flex-direction:column;min-height:0;
    margin:.45vh 0 0;padding:4.88vh 38px 3vh;
    height:100%;max-height:none;
    font-family:var(--body);align-self:stretch;
    animation:paneContentIn .52s cubic-bezier(.22,1,.36,1) backwards;
  }
  .app.panes.personal-on #personalTasksSection .pt-list{flex:1;min-height:0;overflow-y:auto}

  /* not wide enough yet for a third column - the anchor gets its own row
     above the timer, and the task list reuses the ordinary "card" area
     every other mode's second pane already occupies at this width */
  .app.panes.personal-on{
    grid-template-areas:
      "band     band"
      "anchor   card"
      "clock    card"
      "shiftbar card"
      "dock     card"
      ".        .";
  }
  .app.panes.personal-on #personalTasksSection{grid-area:card}
  .app.panes.personal-on .anchor{display:flex;grid-area:anchor;order:0;padding:24px 20px}
}

/* Focus Anchor, step 3: wide enough for a genuine third column. 380px rail /
   flexible anchor / 420px task list, replacing the base two-column
   grid-template entirely (still scoped to personal-on, so Clocks/Focus and
   their has-team/has-tasks three-column layout are untouched). */
@media (min-width:1100px){
  .app.panes.personal-on{
    grid-template-columns:380px minmax(0,1fr) 420px;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
      "band   band   band"
      "clock  anchor side";
    column-gap:28px;
  }
  .app.panes.personal-on .anchor{padding:28px;height:100%;align-self:stretch}
  .app.panes.personal-on #personalTasksSection{grid-area:side;align-self:stretch}
}

/* Focus Anchor, step 2: an active focus round (running, not paused, not a
   break - .pomo-focus-run on #appScreen, set in pomoRender()) recedes the
   task list so the ring reads as the primary thing on screen. Never
   actually inert - pointer-events stay on, and resting the pointer (or
   keyboard focus) over it brings it right back to full strength. */
#personalTasksSection{transition:opacity .28s ease,filter .28s ease}
.app.personal-on.pomo-focus-run #personalTasksSection{opacity:.4;filter:saturate(.45)}
.app.personal-on.pomo-focus-run #personalTasksSection:hover,
.app.personal-on.pomo-focus-run #personalTasksSection:focus-within{opacity:1;filter:none}

/* ---------- squircle corners (superellipse, progressive enhancement) ----------
   .pt-check (50% radius) is left circular on purpose - see the token
   comment in base.css for why. */
@supports (corner-shape:superellipse(1)){
  .pt-add-row input,.pt-add-btn,.pt-del{corner-shape:var(--squircle-sm)}
  .pt-row{corner-shape:var(--squircle-md)}
  .app.panes.personal-on #personalTasksSection,
  .app.panes.personal-on .anchor{corner-shape:var(--squircle-lg)}
}