/* ============================================================================
   FILTER RIBBON - CSS POSITIONING (part 2 of 3 - see Home.razor :: FILTER RIBBON)
   ----------------------------------------------------------------------------
   .calendar-wrap is the relative-positioned host for the absolutely-positioned
   .ribbon-filter overlay. v0.4.16.2: the bookmark is z-index:-1 (behind the
   calendar card), but .calendar-wrap (z-index:10) composites above .tasks
   (z-index:1) - so the tab that pokes past the calendar still paints above the
   tasks card, including when it slides over .tasks on hover. This z-index pair
   is load-bearing again; don't drop it.

   .ribbon-filter itself (further down) controls:
      • right    - how far the tab pokes past the calendar edge at rest
      • top      - vertical offset from the calendar card's top edge
      • width/height - bounding box (match the <svg> viewBox in Home.razor)
   ============================================================================ */
.calendar-wrap {
    position: relative;
    align-self: start;
    z-index: 10;
}
.tasks { z-index: 1; }

/* ---- Task panel ---- */
.tasks {
    position: relative;
    padding: 0;
}

.aggregate {
    padding: 18px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aggregate-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bar {
    height: 6px;
    background: var(--chronos-violet-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--chronos-violet);
    border-radius: var(--radius-pill);
    transition: width 0.25s ease-out;
}

.bar-big   { height: 10px; }
.bar-small { height: 7px;  }

/* ============================================================================
   RIBBON FILTER - inline-SVG horizontal bookmark on the BACK PLANE of the
   calendar. v0.4.16.2: z-index: -1 tucks it BEHIND the calendar card, so only the
   right tab pokes out past the calendar edge (right: -19px ≈ the old hover extent,
   1px clear of .tasks at rest). On hover it slides further right - now OVER the
   .tasks card (intentional; .calendar-wrap z-index:10 keeps it above .tasks) -
   revealing the white funnel that sits hidden behind the calendar at rest.
   ============================================================================ */
.ribbon-filter {
    position: absolute;
    right: -19px;          /* tab sticks ~19px past the calendar edge; body hidden behind it */
    top: 34px;
    width: 58px;           /* horizontal: wider than tall */
    height: 42px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: -1;           /* BACK PLANE - behind the calendar card */
    filter: drop-shadow(0 2px 3px rgba(17, 24, 39, 0.22));
    /* Smooth slide-out on hover (see :hover). */
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover the bookmark slides FULLY out from behind the calendar - the whole
   bookmark + funnel clear the calendar edge and ride over the tasks card
   (intentional). translateX(40px): rest left edge ≈ -39px → +1px, i.e. fully out. */
.ribbon-filter:hover { transform: translateX(40px); }

/* v0.5.8.4: enter WITH the calendar card instead of pre-rendering under it.
   The card's [data-reveal] fade used to play over an already-visible ribbon,
   which read as "the filter was always there". While the sibling card is still
   hidden (no .cm-in yet) the ribbon hides tucked left; the same class flip
   slides it out on the shared motion curve. No-JS / failsafe paths never
   match :not(.cm-in) for long, so the ribbon can't get stuck hidden. */
html.cm-motion .ribbon-filter {
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                opacity var(--d4, 520ms) var(--e-expo, ease);
}
html.cm-motion .card.calendar[data-reveal]:not(.cm-in) ~ .ribbon-filter {
    opacity: 0;
    transform: translateX(-26px);
}
@media (prefers-reduced-motion: reduce) {
    html.cm-motion .card.calendar[data-reveal]:not(.cm-in) ~ .ribbon-filter {
        opacity: 1;
        transform: none;
    }
}

/* Brute-force kill of every focus / active chrome the browser or any base
   reset might paint on the ribbon button. !important to outrank any
   Material/MudBlazor/normalize rule. */
.ribbon-filter,
.ribbon-filter:hover,
.ribbon-filter:focus,
.ribbon-filter:focus-visible,
.ribbon-filter:focus-within,
.ribbon-filter:active,
.ribbon-filter svg,
.ribbon-filter svg:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ribbon-svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;  /* clicks bubble to the parent <button> */
    user-select: none;
    overflow: visible;
}

/* Red bookmark body. */
.ribbon-bg {
    fill: var(--chronos-red);
    stroke: #B91C1C;       /* darker red edge - subtle depth */
    stroke-width: 0.75;
    stroke-linejoin: round;
}

/* The requested white-CONTOUR funnel: stroked white, no fill. */
.ribbon-funnel {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Active filter pulses the ribbon so the user knows a filter is applied. */
@keyframes ribbon-pulse {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1.0); }
}
.ribbon-filter.active {
    transform-origin: left center;
    animation: ribbon-pulse 1.8s ease-in-out infinite;
}

/* ---- Task board grid ----
   v0.5.6: task cards are DIRECT grid children (the left/right column wrappers are
   gone) laid out row-major, so the priority sort order reads left-to-right,
   top-to-bottom on desktop and top-to-bottom on single-column phones alike.
   align-items:start keeps a tall card from stretching its row-mates. */
.task-cols {
    padding: 38px 20px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    align-items: start;
}

/* Large monitors (27"+): WrapPanel-style - let task cards flow into as many columns
   as the wider board can hold (3-5) instead of a fixed two. Mobile keeps 1 column. */
@media (min-width: 1700px) {
    .task-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.task-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
}

.task-text { line-height: 1.3; }
.task-title { font-weight: 600; }
.task-supporting { font-size: 12px; }
.shortcut { font-family: var(--chronos-font-mono); font-size: 11px; }
.chevron  { font-size: 18px; }

/* Custom Material-ish checkbox so we don't depend on a UI kit. */
.task-check { display: inline-flex; cursor: pointer; }
.task-check input { display: none; }
.task-check .checkbox-ui {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--chronos-fg-muted);
    background: white;
    position: relative;
}
.task-check input:checked + .checkbox-ui {
    background: var(--chronos-violet);
    border-color: var(--chronos-violet);
}
.task-check input:checked + .checkbox-ui::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* ============================================================================
   v0.8.3.0 - PHONES: the bookmark moves to the top edge and stands up.

   The side tab does not work on a stacked layout. There the calendar spans the
   whole column, so a tab parked past its right edge hangs off the viewport: only
   ~10px of a 58px bookmark was on screen, which reads as a rendering artefact
   rather than a control, and widening the gap just traded it for dead margin.

   There IS room above the card, because the month switcher left-packs on phones
   (02-main-layout.css) and leaves the top-right corner empty. So the bookmark
   turns a quarter turn - the vertical path in Home.razor - and is slung over the
   top edge like a bookmark in a book, laid OVER the card rather than behind it.
   ============================================================================ */

.ribbon-svg-v { display: none; }

@media (max-width: 720px) {
    .ribbon-svg-h { display: none; }
    .ribbon-svg-v { display: block; }

    .ribbon-filter {
        /* Inside the card horizontally - nothing pokes past the right edge any more. */
        right: 14px;
        left: auto;
        /* Dropped by about half a bookmark from the old -20px, so it sits ON the card
           with just its head clearing the top edge instead of hovering above it. */
        top: 3px;
        width: 34px;
        height: 47px;
        /* ABOVE the card, not behind it. The desktop z-index:-1 hides the funnel until
           the pointer slides the tab out, and a phone has no pointer: the whole control
           has to be visible and tappable exactly as it sits. */
        z-index: 2;

        /* STILL. Three separate things used to move this thing on a phone: the desktop
           hover slide, the reveal animation parking it 26px to the left before sliding
           in, and the transform transition carrying both. With no pointer there is
           nothing to reveal on hover, and a bookmark that jumps on every page load and
           after every tap just reads as broken. The transform is fixed and the
           transition is dropped, so nothing here animates position at all. */
        transform: none;
        transition: none;
    }

    .ribbon-filter:hover,
    .ribbon-filter:focus-visible,
    html.cm-motion .ribbon-filter,
    html.cm-motion .card.calendar[data-reveal]:not(.cm-in) ~ .ribbon-filter {
        transform: none;
        transition: none;
    }
}