/* ════════════════════════════════════════════════════════════════════════════════
   folio-tasks.css — the folio bento's tile and Tasks styles, shared (2026-10-16).

   These rules lived inside FolioWorkspacePage's own <style>, so they existed only while a folio was open. The
   Desk's To do is the same FolioBentoTasks component, so they moved here, loaded by the web app (App.razor) and
   the Mac/iOS shell (shell.html). Each rule applies under .foliopage (the folio page, as before) or under
   .fw-scope (anywhere else that hosts a bento tile — the Desk wraps its To do in one).

   .fw-scope carries the same local tokens .foliopage defines, and nothing else: no layout, no background.
   ════════════════════════════════════════════════════════════════════════════════ */
.fw-scope {
    --page-bg:   var(--bg,        #FFFFFF);
    --s1:        var(--surface-1, #F7F8FA);
    --s2:        var(--surface-2, #EEF0F4);
    --s3:        var(--surface-3, #DFE3EA);
    --line:      var(--border,    #E5E8EE);
    --line-2:    var(--input-border, #D2D7E0);
    --ink:       var(--text-primary,   #0F1319);
    --ink-2:     var(--text-secondary, #3F4A5B);
    --ink-3:     var(--muted,          #6B7686);
    --ink-4:     var(--input-placeholder, #9098A6);
    --jade:      var(--brand-jade,      #0FA47F);
    --jade-ink:  var(--btn-primary-text,#FFFFFF);
    --jade-bg:   color-mix(in srgb, var(--brand-jade, #0fa47f) 10%, transparent);
    --jade-ring: color-mix(in srgb, var(--brand-jade, #0fa47f) 28%, transparent);
    --indigo:    var(--tone-indigo, #818CF8);
    --amber:     var(--tone-amber, #FBBF24);
    --sans:"IBM Plex Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}



/*  Soft-shadowed card, no visible border at rest. Same treatment WorkPage
        uses so the two pages read as one product. Radius from the theme;
        shadow from the theme (--shadow-1). Border only on hover, and only as
        a subtle jade tint — the resting state is calm, not boxed.

        HOVER LIFT — the card picks up 2px and deepens its shadow, so it reads
        as a physical card being raised. Same idea as the wireframe. The tile
        knows it will move so the transform is part of its transition list. */
    :is(.foliopage, .fw-scope) .fw-tile {
        background:var(--s1);
        border:1px solid transparent;
        border-radius:var(--radius-lg, 14px);
        padding:18px 20px; display:flex; flex-direction:column; gap:12px;
        overflow:hidden; position:relative;
        box-shadow:var(--shadow-1, 0 1px 2px rgba(16,22,32,.04), 0 1px 3px rgba(16,22,32,.06));
        transition:border-color .12s, box-shadow .18s ease, transform .18s ease;
    }

:is(.foliopage, .fw-scope) .fw-tile:hover {
        border-color:color-mix(in srgb, var(--jade) 18%, transparent);
        box-shadow:var(--shadow-2, 0 2px 4px rgba(16,22,32,.06), 0 8px 24px rgba(16,22,32,.08));
        transform:translateY(-2px);
    }

/*  Two fixed heights, one per band. Fixed rather than min-height, because a
        min still grows: the point is that a tile's height never depends on what
        is inside it, so nothing moves when content arrives or a tab is switched.
        h-md is a little taller than h-sm — those tiles are read, not glanced. */
    :is(.foliopage, .fw-scope) .fw-tile.h-sm { height:264px; }

:is(.foliopage, .fw-scope) .fw-tile.h-md { height:340px; }

@media (max-width:720px) {
    /* Stacked, there is no row to keep level and screen height is scarce. */
        :is(.foliopage, .fw-scope) .fw-tile.h-sm,
        :is(.foliopage, .fw-scope) .fw-tile.h-md { height:auto; max-height:none; }
}

/* overflow:hidden keeps long tile content in bounds, but it also clips an
       open chip dropdown. Lift it only while a menu is up, and raise the tile
       so the menu sits above its neighbours. */
    :is(.foliopage, .fw-scope) .fw-tile.menu-open { overflow:visible; z-index:16; }

:is(.foliopage, .fw-scope) .fw-tile-head {
        display:flex; align-items:center; justify-content:space-between; gap:10px;
    }

/*  Tile title — sentence case, no letter-spacing. Reads as a section
        heading, not a dashboard label. */
    :is(.foliopage, .fw-scope) .fw-tile-head h3 {
        font-size:14px; font-weight:600; color:var(--ink);
        letter-spacing:-.005em; margin:0;
    }

/*  Tile-head meta ("0 total", "from artifacts") — sans, sentence case,
        quiet. Was mono + letter-spaced, which read as a config-file label. */
    :is(.foliopage, .fw-scope) .fw-more {
        font-size:12px; color:var(--ink-3); font-weight:500;
    }

:is(.foliopage, .fw-scope) .fw-empty { font-size:12.5px; color:var(--ink-3); margin:0; line-height:1.5; }

:is(.foliopage, .fw-scope) .fw-input {
        font-family:inherit; color:var(--ink); background:var(--page-bg);
        border:1px solid var(--jade-ring); border-radius:7px; padding:5px 9px;
        min-width:0; outline:none;
    }

:is(.foliopage, .fw-scope) .fw-input:focus { border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-bg); }

:is(.foliopage, .fw-scope) .fw-input:disabled { opacity:.6; }

/* Tone wash — the VALUE carries its colour, so status and priority read
       at a glance without a pill around them. */
    :is(.foliopage, .fw-scope) .tone-jade   { color:var(--jade);   }

:is(.foliopage, .fw-scope) .tone-indigo { color:var(--indigo); }

:is(.foliopage, .fw-scope) .tone-amber  { color:var(--amber);  }

:is(.foliopage, .fw-scope) .tone-red    { color:var(--danger, #DB4F38);       }

:is(.foliopage, .fw-scope) .tone-mute   { color:var(--ink-3);  }

:is(.foliopage, .fw-scope) .fw-err { margin:0; font-size:11.5px; color:var(--danger, #DB4F38); }

:is(.foliopage, .fw-scope) .fw-msg .fw-av { width:22px; height:22px; font-size:9px; margin-top:1px; }

/* Mira gets the jade avatar the workspace already uses for the advisor. */
    :is(.foliopage, .fw-scope) .fw-msg .fw-av.adv { background:var(--jade); color:var(--jade-ink); }

:is(.foliopage, .fw-scope) .fw-reply .fw-av { width:18px; height:18px; font-size:8px; margin-top:1px; }

:is(.foliopage, .fw-scope) .fw-note-compose {
        flex:none; margin-top:auto; padding-top:8px;
        display:flex; flex-direction:column; gap:6px;
        min-width:0;   /* a flex item defaults to min-content; this lets it shrink */
    }

/*  Auto-grow with no JavaScript. The wrapper is a 1×1 grid; a hidden ::after
        carrying the same text occupies the same cell and sets the row height, so
        the textarea is always exactly as tall as its content. The trailing space
        in the content keeps a fresh newline from collapsing.

        Every font and box property below MUST match the textarea's, or the shadow
        measures a different string and the box grows a line early or late. */
    /*  min-width:0 is load-bearing. A grid item's default min-width is auto, which
        is its CONTENT's width — and the ::after twin carries the full text, so a
        long unbroken line pushed the box wider than the tile instead of wrapping
        inside it. The overflow-wrap pair does the same job for a single very long
        word, which has no wrap opportunity of its own. */
    :is(.foliopage, .fw-scope) .fw-grow {
        display:grid; min-width:0; max-width:100%;
        overflow-wrap:anywhere; word-break:break-word;
    }

:is(.foliopage, .fw-scope) .fw-grow::after {
        content:attr(data-replicated-value) " ";
        white-space:pre-wrap; word-break:break-word;
        visibility:hidden; pointer-events:none;
    }

/* Shared BOX METRICS only — the two must occupy identical space or the shadow
       measures a different wrap point. Colour is not a metric, so the border is
       declared here for width and coloured separately below. */
    :is(.foliopage, .fw-scope) .fw-grow > textarea,
    :is(.foliopage, .fw-scope) .fw-grow::after {
        grid-area:1 / 1 / 2 / 2;
        min-width:0; max-width:100%; box-sizing:border-box;
        overflow-wrap:anywhere;
        font:inherit; font-size:12.5px; line-height:1.5;
        padding:7px 10px; border:1px solid transparent; border-radius:8px;
        max-height:150px;
    }

:is(.foliopage, .fw-scope) .fw-grow::after { overflow:hidden; }

:is(.foliopage, .fw-scope) .fw-grow > textarea {
        resize:none; overflow-y:auto;
        /* The resting border. It was transparent because the metric rule above
           sets one for both boxes, which left the composer invisible until
           focused — a field you cannot see is not a field. */
        border-color:var(--line-2); background:var(--page-bg); color:var(--ink);
    }

:is(.foliopage, .fw-scope) .fw-grow > textarea:hover { border-color:var(--line-2); }

:is(.foliopage, .fw-scope) .fw-grow > textarea:focus {
        outline:none; border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-bg);
    }

:is(.foliopage, .fw-scope) .fw-grow > textarea::placeholder { color:var(--ink-4); }

:is(.foliopage, .fw-scope) .fw-grow > textarea:disabled { opacity:.6; }

:is(.foliopage, .fw-scope) .fw-note-actions {
        display:flex; align-items:center; gap:8px;
    }

:is(.foliopage, .fw-scope) .fw-note-hint {
        flex:1; min-width:0; font-size:10.5px; color:var(--ink-4);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

:is(.foliopage, .fw-scope) .fw-nt-q { width:100%; min-width:0; }

:is(.foliopage, .fw-scope) .fw-np {
        flex:none; padding:6px 11px; border-radius:8px; font-size:11.5px;
        background:var(--s2); border:1px solid var(--line-2); color:var(--ink-2);
        cursor:pointer; font-family:inherit;
    }

:is(.foliopage, .fw-scope) .fw-np:hover:not(:disabled) {
        color:var(--jade); border-color:var(--jade-ring); background:var(--jade-bg);
    }

:is(.foliopage, .fw-scope) .fw-np:disabled { opacity:.5; cursor:default; }

/* ---- tasks tile ----
       A task row is deliberately flatter than an artifact row: a checkbox, a
       name, who has it, and what is holding it up. Everything richer belongs to
       the thing the task is ABOUT, not to the task. */
    /*  Sort-axis pills — right side of the Tasks tile head. Small, quiet
        at rest, jade fill when selected. Same visual family as the folio
        browser's filter pills on WorkPage so the two pages read as one. */
    :is(.foliopage, .fw-scope) .fw-tk-sort {
        display:inline-flex; gap:2px; padding:2px;
        margin-left:auto;
        background:var(--s2); border-radius:8px;
        border:1px solid var(--line);
    }

:is(.foliopage, .fw-scope) .fw-tk-sort-btn {
        padding:4px 10px; border-radius:6px; cursor:pointer;
        font:inherit; font-size:11.5px; font-weight:500;
        background:transparent; border:0; color:var(--ink-3);
        transition:background .12s, color .12s;
    }

:is(.foliopage, .fw-scope) .fw-tk-sort-btn:hover { color:var(--ink); }

:is(.foliopage, .fw-scope) .fw-tk-sort-btn.on {
        background:var(--jade); color:var(--jade-ink);
    }

/*  Status filter — pill with a small dropdown. The wrap is position:relative
        so the menu can anchor to it; the menu is position:absolute over the
        page. A backdrop under the menu catches clicks outside to close. */
    :is(.foliopage, .fw-scope) .fw-tk-status-wrap { position:relative; display:inline-flex; }

:is(.foliopage, .fw-scope) .fw-tk-sort-btn .fw-tk-status-caret {
        font-size:14px; margin-left:2px; vertical-align:-2px;
    }

:is(.foliopage, .fw-scope) .fw-tk-status-menu {
        position:absolute; top:calc(100% + 6px); right:0;
        z-index:22; min-width:160px;
        background:var(--page-bg);
        border:1px solid var(--line-2); border-radius:10px;
        padding:4px;
        box-shadow:0 1px 2px color-mix(in srgb, var(--shadow-color, #101620) 10%, transparent), 0 12px 32px color-mix(in srgb, var(--shadow-color, #101620) 18%, transparent);
        display:flex; flex-direction:column; gap:1px;
    }

:is(.foliopage, .fw-scope) .fw-tk-status-opt {
        display:flex; align-items:center; width:100%; text-align:left;
        background:transparent; border:0; border-radius:6px;
        padding:6px 10px;
        font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer;
    }

:is(.foliopage, .fw-scope) .fw-tk-status-opt:hover { background:var(--s2); }

:is(.foliopage, .fw-scope) .fw-tk-status-opt.is-active {
        background:var(--jade-bg); color:var(--jade); font-weight:500;
    }

/*  Backdrop under the dropdown — full-page fixed, z-index just below the
        menu so a click outside closes it. Same pattern as the fw-menu backdrop
        on the Details tile. */
    :is(.foliopage, .fw-scope) .fw-tk-status-backdrop {
        position:fixed; inset:0; z-index:21;
    }

/*  Task list scrolls INSIDE the tile so the Row 1 pair (Progress +
        Tasks) stays a consistent height regardless of task count. Scroll
        bars are hidden — the list scrolls on wheel + touch, but shows
        no chrome, keeping the tile clean. flex:1 min-height:0 is what
        makes the list actually take the tile's leftover height. */
    :is(.foliopage, .fw-scope) .fw-tasks {
        display:flex; flex-direction:column; gap:1px;
        flex:1 1 auto; min-height:0;
        overflow-y:auto;
        scrollbar-width:none;              /* Firefox */
        -ms-overflow-style:none;           /* Edge / IE */
    }

:is(.foliopage, .fw-scope) .fw-tasks::-webkit-scrollbar { width:0; height:0; }

/* WebKit */
    /*  The Mac/iPad app's WebKit draws a NATIVE scroll indicator over the list and
        ignores both rules above. The list is made wider than the box that shows it,
        by the gutter it adds on the right, and the box clips — so the indicator is
        drawn in the part nobody sees, and the rows sit exactly where they did. */
    :is(.foliopage, .fw-scope) .fw-tasks-clip { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }

:is(.foliopage, .fw-scope) .fw-tasks-clip > .fw-tasks { margin-right:-16px; padding-right:16px; }

:is(.foliopage, .fw-scope) .fw-task {
        display:flex; align-items:center; gap:8px;
        padding:6px 8px; border-radius:6px; min-width:0;
    }

:is(.foliopage, .fw-scope) .fw-task:hover { background:var(--s2); }

:is(.foliopage, .fw-scope) .fw-tk-box {
        flex:none; width:14px; height:14px; border-radius:4px;
        border:1.5px solid var(--line-2); background:transparent;
        cursor:pointer; padding:0; display:grid; place-items:center;
    }

:is(.foliopage, .fw-scope) .fw-tk-box:hover:not(:disabled) { border-color:var(--jade); }

:is(.foliopage, .fw-scope) .fw-tk-box:disabled { cursor:default; opacity:.6; }

:is(.foliopage, .fw-scope) .fw-tk-box.is-done { background:var(--jade); border-color:var(--jade); }

:is(.foliopage, .fw-scope) .fw-tk-box.is-done::after {
        content:""; width:7px; height:4px; margin-top:-2px;
        border-left:1.5px solid var(--jade-ink); border-bottom:1.5px solid var(--jade-ink);
        transform:rotate(-45deg);
    }

:is(.foliopage, .fw-scope) .fw-tk-n {
        flex:1; min-width:0; font-size:12.5px; color:var(--ink-2);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

:is(.foliopage, .fw-scope) .fw-task.is-done .fw-tk-n { color:var(--ink-4); text-decoration:line-through; }

/*  Where the step gets done — a quiet chip after the title, capped so a long name
        never pushes the status off the row. */
    :is(.foliopage, .fw-scope) .fw-tk-art {
        flex:none; max-width:40%; display:inline-flex; align-items:center; gap:3px;
        font:inherit; font-size:11px; color:var(--ink-3);
        background:var(--s2); border:1px solid transparent; border-radius:999px;
        padding:2px 8px 2px 6px; cursor:pointer;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

:is(.foliopage, .fw-scope) .fw-tk-art .material-symbols-outlined { font-size:13px; }

:is(.foliopage, .fw-scope) button.fw-tk-art:hover { color:var(--jade); border-color:var(--jade-ring, rgba(15,164,127,.28)); background:var(--jade-bg); }

:is(.foliopage, .fw-scope) .fw-tk-art.is-gone { cursor:default; opacity:.6; text-decoration:line-through; }

/*  Task status ("Blocked", "In progress", "Done"). Sentence case, sans,
        pill-shaped. Tint carries the state. */
    :is(.foliopage, .fw-scope) .fw-tk-st {
        flex:none; font-size:11px; font-weight:500;
        padding:3px 9px; border-radius:999px;
        background:var(--s2); color:var(--ink-3);
    }

:is(.foliopage, .fw-scope) .fw-tk-st.blocked { color:var(--danger, #DB4F38); background:color-mix(in srgb, var(--danger, #db4f38) 10%, transparent); }

:is(.foliopage, .fw-scope) .fw-tk-st.going  { color:var(--tone-amber, #B87508); background:color-mix(in srgb, var(--tone-amber, #b87508) 12%, transparent); }

:is(.foliopage, .fw-scope) .fw-tk-st.done   { color:var(--jade); background:var(--jade-bg); }

/* Closed with proof: approval chips beside the status (SQL 137). Icon + words, never colour alone. */
    :is(.foliopage, .fw-scope) .fw-tk-appr { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; padding:2px 7px 2px 5px; border-radius:6px; white-space:nowrap; border:0; font-family:inherit; }

:is(.foliopage, .fw-scope) .fw-tk-appr .material-symbols-outlined { font-size:14px; }

:is(.foliopage, .fw-scope) .fw-tk-appr.ok   { color:var(--jade); background:var(--jade-bg); }

:is(.foliopage, .fw-scope) .fw-tk-appr.wait { color:var(--tone-amber, #B87508); background:color-mix(in srgb, var(--tone-amber, #b87508) 12%, transparent); }

:is(.foliopage, .fw-scope) .fw-tk-appr.go   { color:var(--text-on-brand, #fff); background:var(--jade); cursor:pointer; }

:is(.foliopage, .fw-scope) .fw-tk-appr.go:disabled { opacity:.6; cursor:default; }

:is(.foliopage, .fw-scope) .fw-tk-due { flex:none; font-size:11px; color:var(--ink-4); }

:is(.foliopage, .fw-scope) .fw-tk-due.is-late { color:var(--danger, #DB4F38); }

/* task row: title is a button now, so strip the button chrome back to text */
    :is(.foliopage, .fw-scope) button.fw-tk-n {
        background:none; border:none; padding:0; margin:0; font:inherit;
        text-align:left; cursor:pointer;
    }

:is(.foliopage, .fw-scope) button.fw-tk-n:hover { color:var(--ink); text-decoration:underline; }

/* the waiting-on line, under a blocked row */
    :is(.foliopage, .fw-scope) .fw-tk-block {
        margin:-2px 0 4px 30px; font-size:11.5px; color:var(--danger, #DB4F38); line-height:1.4;
    }

:is(.foliopage, .fw-scope) .fw-tk-note {
        margin:-2px 0 6px 30px; font-size:11.5px; color:var(--ink-3); line-height:1.45; white-space:pre-wrap;
    }

/* inline editor */
    :is(.foliopage, .fw-scope) .fw-tk-edit {
        display:flex; flex-direction:column; gap:6px;
        padding:8px; margin:2px 0 6px; border-radius:8px;
        background:var(--s2); border:1px solid var(--line-2);
    }

:is(.foliopage, .fw-scope) .fw-tk-edit-row { display:flex; gap:6px; flex-wrap:wrap; }

:is(.foliopage, .fw-scope) .fw-tk-edit-row > * { flex:1; min-width:104px; }

:is(.foliopage, .fw-scope) .fw-tk-edit textarea.fw-input { resize:vertical; font-family:inherit; }

:is(.foliopage, .fw-scope) .fw-tk-edit-actions { display:flex; align-items:center; gap:8px; }

:is(.foliopage, .fw-scope) .fw-tk-arch:hover { color:var(--danger, #DB4F38); border-color:var(--danger, #DB4F38); }

:is(.foliopage, .fw-scope) .fw-linkish {
        border:none; background:none; padding:0; cursor:pointer;
        font:inherit; font-size:11.5px; color:var(--ink-2);
        border-bottom:1px dashed var(--line-2);
    }

:is(.foliopage, .fw-scope) .fw-linkish:hover { color:var(--jade); border-color:var(--jade); }

:is(.foliopage, .fw-scope) .fw-pp .fw-av {
        grid-column:1; grid-row:1 / span 2;
        align-self:center;
    }

:is(.foliopage, .fw-scope) .fw-av {
        width:24px; height:24px; border-radius:50%; flex:none; display:grid;
        place-items:center; font-family:var(--mono); font-size:9.5px; font-weight:600;
        color:var(--jade-ink); background:var(--jade);
    }

:is(.foliopage, .fw-scope) .fw-av.i { background:color-mix(in srgb, var(--tone-indigo, #818cf8) 22%, transparent); color:var(--indigo); }

:is(.foliopage, .fw-scope) .fw-av.t { background:color-mix(in srgb, var(--tone-cyan, #22d3ee) 22%, transparent);  color:var(--tone-cyan, #22D3EE); }

:is(.foliopage, .fw-scope) .fw-av.a { background:color-mix(in srgb, var(--tone-amber, #fbbf24) 22%, transparent);  color:var(--amber); }

:is(.foliopage, .fw-scope) .fw-av.v { background:color-mix(in srgb, var(--tone-violet, #a78bfa) 22%, transparent); color:var(--tone-violet, #A78BFA); }

/*  Open the strip's clip too when a row's kebab menu is up. The tile's
        .menu-open already lifts its own overflow:hidden (see .fw-tile.menu-open);
        without this, the absolutely-positioned .fw-srow-menu still gets clipped
        by the inner scroll container and reads as "menu hidden inside the tile". */
    :is(.foliopage, .fw-scope) .fw-tile.menu-open .fw-strip { overflow:visible; }

/*  Details is a light slate (2026-10-19): the theme tones are tuned for white and blur on the tinted ground, so here
        each is half tone, half ink — deeper in light themes, lighter in dark ones — and stays AA as text. */
    :is(.foliopage, .fw-scope) .fw-rail-details .tone-mute { color:var(--text-secondary, #495057); }
:is(.foliopage, .fw-scope) .fw-rail-details .tone-jade   { color:color-mix(in srgb, var(--tone-jade, #00B377) 50%, var(--text-primary, #212529)); font-weight:600; }
:is(.foliopage, .fw-scope) .fw-rail-details .tone-amber  { color:color-mix(in srgb, var(--tone-amber, #B87508) 50%, var(--text-primary, #212529)); font-weight:600; }
:is(.foliopage, .fw-scope) .fw-rail-details .tone-red    { color:color-mix(in srgb, var(--tone-red, #DB4F38) 50%, var(--text-primary, #212529)); font-weight:600; }
:is(.foliopage, .fw-scope) .fw-rail-details .tone-indigo { color:color-mix(in srgb, var(--tone-indigo, #5B6CFF) 50%, var(--text-primary, #212529)); font-weight:600; }

/*  Fixed-height caps the OLD bento carried (.h-sm 264px / .h-md 340px)
        do not fit Magazine — the hero tiles are taller by design, and
        content-drives-height is what reads as "editorial". Suppress the
        caps for every Magazine tile EXCEPT progress + tasks, which are
        the row-1 pair and use their OWN 420px height above so the row
        stays even. */
    :is(.foliopage, .fw-scope) .fw-a-rail .fw-tile {
        height:auto !important;
    }

@media (max-width:820px) {
    /* Task-row grid becomes narrower — hide the assignee to keep
           title + status readable at ~360px card width. */
        :is(.foliopage, .fw-scope) .fw-task              { flex-wrap:wrap; }
    :is(.foliopage, .fw-scope) .fw-task .fw-av       { display:none; }
}

@media (max-width:480px) {
    /* Hide the due-date column on very narrow rows — the label + status
           are the essential pair. The full editor still shows the date. */
        :is(.foliopage, .fw-scope) .fw-tk-due-mag   { display:none; }
}

/* --- task due date column (added between .fw-tk-n and .fw-tk-st) --- */
    :is(.foliopage, .fw-scope) .fw-tk-due-mag {
        flex:none; font-size:11.5px; color:var(--ink-3);
        display:inline-flex; align-items:center; gap:4px;
        font-variant-numeric:tabular-nums; white-space:nowrap;
    }

:is(.foliopage, .fw-scope) .fw-tk-due-mag .material-symbols-outlined {
        font-size:14px; color:var(--ink-4);
    }

:is(.foliopage, .fw-scope) .fw-tk-due-mag.soon { color:var(--amber); }

:is(.foliopage, .fw-scope) .fw-tk-due-mag.soon .material-symbols-outlined { color:var(--amber); }

:is(.foliopage, .fw-scope) .fw-tk-due-mag.late { color:var(--danger, #DB4F38); }

:is(.foliopage, .fw-scope) .fw-tk-due-mag.late .material-symbols-outlined { color:var(--danger, #DB4F38); }

/*  Across folios (the Desk): the task's folio on a quiet line under its title — "Yours" for a to-do in none. */
:is(.foliopage, .fw-scope) .fw-tk-where { margin:-2px 0 4px 30px; font-size:11.5px; line-height:1.3; color:var(--ink-3); }
:is(.foliopage, .fw-scope) .fw-tk-where button { display:inline-flex; align-items:center; gap:3px; max-width:100%; border:0; padding:0; background:none;
    font:inherit; color:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(.foliopage, .fw-scope) .fw-tk-where button:hover { color:var(--jade); text-decoration:underline; }
:is(.foliopage, .fw-scope) .fw-tk-where .material-symbols-outlined { font-size:13px; }
:is(.foliopage, .fw-scope) .fw-tk-where .is-own { opacity:.8; }

/* ── The Tasks tile answers to its OWN width (2026-10-16) ─────────────────────────────────────────────────────────
   One tile sits in a wide folio column, a narrow landscape-iPad Desk column and a phone; the screen's width says
   nothing about which. So the tile is a container and a narrow one restacks: the heading's sort buttons get a line of
   their own, and each task is two lines — the title (up to two lines) by its box, then its tags. "Open", the usual
   status, is left off there so the ones that mean something stand out. Wide tiles are as they were. */
:is(.foliopage, .fw-scope) .fw-a-tasks { container-type:inline-size; container-name:fwtasks; }
:is(.foliopage, .fw-scope) .fw-tk-meta { display:contents; }

@container fwtasks (max-width: 560px) {
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tile-head { flex-wrap:wrap; row-gap:8px; justify-content:flex-start; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tile-head h3,
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tile-head .fw-more { white-space:nowrap; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-sort { order:3; flex:1 1 100%; margin-left:0; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-sort-btn { flex:1 1 0; justify-content:center; white-space:nowrap; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-status-wrap { flex:1 1 0; display:flex; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-status-wrap > .fw-tk-sort-btn { flex:1 1 auto; }

    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-task { flex-wrap:wrap; align-items:flex-start; row-gap:3px; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-box { margin-top:2px; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-n {
        flex:1 1 calc(100% - 30px); white-space:normal; text-align:left; line-height:1.35;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-meta {
        display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1 1 100%; min-width:0; padding-left:22px;
    }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-meta:empty { display:none; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-meta .fw-tk-due-mag { display:inline-flex; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-st.st-open { display:none; }
    :is(.foliopage, .fw-scope) .fw-a-tasks .fw-tk-where { margin-left:22px; }
}