/* ===========================================================================
   The admin workspace — /admin/tasks
   ---------------------------------------------------------------------------
   The board, the month, the team and the chat on one surface. Everything here
   is scoped under .w-page so none of it can reach the rest of the panel, and
   the cards reuse the tokens the overview already defines rather than opening
   a second set of blues.
   =========================================================================== */

.w-page {
    --w-ink:    #14182A;
    --w-ink-2:  #6B7183;
    --w-ink-3:  #9AA0B2;
    --w-line:   #E7E4EE;
    --w-paper:  #FFFFFF;
    --w-sunk:   #F4F5FA;
    --w-blue:   #2575FC;
    --w-green:  #17A98B;
    --w-amber:  #E8A33D;
    --w-red:    #FF6262;
    --w-r:      16px;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
}

/* ── The title band ──────────────────────────────────────────────────── */

/* The heading and the day's five numbers share one row. Stacked, they took
   close to half the screen before a single card appeared. */
.w-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* This screen opens closer to the bar than the reading pages do: the board
   is a working surface, and the empty band above it was dead height. */
.w-page { padding-top: 0 !important; }
main.page-content:has(.w-page) { padding-top: calc(var(--mv-topbar-h, 62px) + 20px) !important; }

.w-page .o-page-title { font-size: 30px; }

/* ── The day in five numbers ─────────────────────────────────────────── */

.w-strip { display: flex; gap: 10px; flex-wrap: wrap; }

/* Small and chunky, each one carrying the supplied wash. */
.w-stat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 104px;
    min-height: 82px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    background: #F2F3FA;
    box-shadow: 0 10px 24px -18px rgba(20, 24, 42, .55);
}

/* The wash is its own layer so it can be saturated without touching the
   type: the supplied file is very pale, and a white veil over it — which is
   how the profile tiles handle legibility — left these almost blank at this
   size. Dark text reads on it as it is. */
.w-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        image-set(url("../images/3d/gradient.avif") type("image/avif"),
                  url("../images/3d/gradient.webp") type("image/webp"));
    background-size: 240% 240%;
    background-position: 18% 26%;
    filter: saturate(1.7) contrast(1.04);
    animation: w-drift 22s ease-in-out infinite alternate;
}

/* Each tile starts the drift elsewhere, so the row moves as five things
   rather than one wall. */
.w-stat:nth-child(2)::after { animation-delay: -4s; }
.w-stat:nth-child(3)::after { animation-delay: -8s; }
.w-stat:nth-child(4)::after { animation-delay: -12s; }
.w-stat:nth-child(5)::after { animation-delay: -16s; }

@keyframes w-drift {
    from { background-position: 14% 22%; }
    to   { background-position: 82% 74%; }
}

/* Motion is decoration here; the numbers are the point. */
@media (prefers-reduced-motion: reduce) {
    .w-stat::after { animation: none; }
}

/* The state colour rides a bar across the top rather than tinting the wash,
   which would turn five different washes into five different tiles. */
.w-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: transparent;
}
.w-stat.is-live::before { background: var(--w-blue); }
.w-stat.is-late::before { background: var(--w-red); }
.w-stat.is-hot::before  { background: #E8744F; }
.w-stat.is-good::before { background: var(--w-green); }

.w-stat-n { font-size: 25px; font-weight: 600; color: var(--w-ink); line-height: 1; }
.w-stat-l { font-size: 11.5px; color: #4E5467; }

.w-stat.is-late .w-stat-n { color: var(--w-red); }

/* ── The filter bar ──────────────────────────────────────────────────── */

.w-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.w-switch {
    display: inline-flex;
    background: var(--w-sunk);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.w-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--w-ink-2);
    text-decoration: none;
}
.w-switch-btn.is-on { background: var(--w-paper); color: var(--w-ink); box-shadow: 0 1px 3px rgba(20,24,42,.12); }
.w-switch-btn i { font-size: 15px; }

.w-field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    background: var(--w-paper);
    border: 1px solid var(--w-line);
    border-radius: 11px;
    font-size: 13px;
    color: var(--w-ink);
}
.w-field i { color: var(--w-ink-3); font-size: 16px; }
.w-search input { border: 0; outline: 0; background: transparent; font: inherit; width: 160px; }
.w-select { padding-right: 9px; cursor: pointer; }
.w-select:focus { outline: 2px solid rgba(37,117,252,.3); }

.w-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--w-ink-2); cursor: pointer; }
.w-toggle input { accent-color: var(--w-blue); width: 15px; height: 15px; }

.w-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--w-ink);
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    margin-left: auto;
}
.w-primary:hover { background: #262B42; color: #FFFFFF; }
.w-primary-sm { height: 32px; padding: 0 14px; font-size: 12.5px; margin-left: 0; }

.w-ghost {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--w-line);
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--w-ink-2);
    cursor: pointer;
}

/* ── The two-column workspace ────────────────────────────────────────── */

.w-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: 16px;
    align-items: start;
}

.w-main { min-width: 0; }

/* ── The board ───────────────────────────────────────────────────────── */

.w-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(258px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.w-col {
    background: var(--w-sunk);
    border-radius: var(--w-r);
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.w-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 11px; }
.w-col-dot  { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.w-col-name { font-size: 13.5px; font-weight: 600; color: var(--w-ink); }
.w-col-count {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(20,24,42,.07);
    color: var(--w-ink-2);
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.w-drop { display: flex; flex-direction: column; gap: 9px; min-height: 90px; border-radius: 12px; }
.w-drop.is-over { background: rgba(37,117,252,.07); outline: 2px dashed rgba(37,117,252,.35); outline-offset: 2px; }

/* The slot only exists so an empty column is still a target you can see. */
.w-empty-slot {
    border: 1px dashed #D6D3DE;
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--w-ink-3);
}
.w-drop .w-card ~ .w-empty-slot { display: none; }

/* ── A card ──────────────────────────────────────────────────────────── */

.w-card {
    position: relative;
    background: var(--w-paper);
    border: 1px solid var(--w-line);
    border-radius: 14px;
    padding: 13px 14px 12px 16px;
    cursor: grab;
    overflow: hidden;
}
.w-card:hover { border-color: #D3CFDD; box-shadow: 0 8px 20px -14px rgba(20,24,42,.4); }
.w-card.is-dragging { opacity: .45; cursor: grabbing; }

/* Priority as a stripe down the edge: readable at a glance without spending
   a tag slot on something every card has. */
.w-card-lane { position: absolute; inset: 0 auto 0 0; width: 4px; }

.w-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.w-code { font-size: 11px; letter-spacing: .04em; color: var(--w-ink-3); }
.w-card-more { color: var(--w-ink-3); font-size: 16px; line-height: 1; text-decoration: none; }
.w-card-more:hover { color: var(--w-ink); }

.w-card-title { font-size: 14px; font-weight: 600; color: var(--w-ink); line-height: 1.33; margin: 0 0 4px; }
.w-card-desc  { font-size: 12px; color: var(--w-ink-2); line-height: 1.45; margin: 0 0 9px; }

.w-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.w-tag {
    --tag: #8A91A6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--tag) 35%, #FFFFFF);
    background: color-mix(in srgb, var(--tag) 9%, #FFFFFF);
    color: color-mix(in srgb, var(--tag) 75%, #14182A);
    font-size: 11px;
    white-space: nowrap;
}
.w-tag i { font-size: 12px; }
.w-tag.is-ok   { --tag: #8A91A6; }
.w-tag.is-soon { --tag: #E8A33D; }
.w-tag.is-late { --tag: #FF6262; }

.w-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.w-faces { display: flex; align-items: center; }
.w-face {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--w-paper);
    margin-right: -7px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8A91A6;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}
.w-face.is-more { background: #E7E4EE; color: var(--w-ink-2); }
.w-unassigned { font-size: 11.5px; color: var(--w-ink-3); }

.w-chip-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--w-ink-2);
}

/* ── Adding from a column ────────────────────────────────────────────── */

.w-add {
    margin-top: 10px;
    width: 100%;
    height: 38px;
    border: 1px dashed #D6D3DE;
    border-radius: 11px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--w-ink-2);
    cursor: pointer;
}
.w-add:hover { background: rgba(255,255,255,.7); color: var(--w-ink); }

.w-quick {
    margin-top: 10px;
    background: var(--w-paper);
    border: 1px solid var(--w-line);
    border-radius: 13px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.w-quick[hidden] { display: none; }
.w-quick input, .w-quick select {
    width: 100%;
    border: 1px solid var(--w-line);
    border-radius: 9px;
    padding: 7px 9px;
    font: inherit;
    font-size: 12.5px;
    color: var(--w-ink);
    background: var(--w-paper);
}
.w-quick-row { display: flex; gap: 7px; }
.w-quick-row > * { flex: 1; }

/* ── The month ───────────────────────────────────────────────────────── */

.w-cal-nav { display: flex; align-items: center; gap: 4px; }
.w-cal-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 9px;
    color: var(--w-ink-2);
    font-size: 12.5px;
    text-decoration: none;
}
.w-cal-nav a:hover { background: var(--w-sunk); color: var(--w-ink); }
.w-cal-nav i { font-size: 18px; }
.w-cal-today { border: 1px solid var(--w-line); }

.w-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
.w-cal-dow span {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-ink-3);
    padding-left: 4px;
}

.w-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.w-day {
    min-height: 92px;
    border: 1px solid var(--w-line);
    border-radius: 11px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--w-paper);
}
.w-day.is-weekend { background: #FBFBFD; }
.w-day.is-out     { opacity: .4; }
.w-day.is-today   { border-color: var(--w-blue); box-shadow: inset 0 0 0 1px var(--w-blue); }

.w-day-n { font-size: 12px; font-weight: 600; color: var(--w-ink-2); }
.w-day.is-today .w-day-n { color: var(--w-blue); }

.w-day-task {
    --tag: #2575FC;
    display: block;
    border-left: 3px solid var(--tag);
    background: color-mix(in srgb, var(--tag) 9%, #FFFFFF);
    border-radius: 0 7px 7px 0;
    padding: 3px 6px;
    font-size: 11px;
    color: var(--w-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w-day-task:hover { background: color-mix(in srgb, var(--tag) 18%, #FFFFFF); color: var(--w-ink); }
.w-day-more { font-size: 10.5px; color: var(--w-ink-3); padding-left: 3px; }

/* ── The side rail ───────────────────────────────────────────────────── */

.w-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--mv-topbar-h, 62px) + 16px); }

.w-online-count { font-size: 11.5px; color: var(--w-green); }

.w-role { padding-top: 10px; }
.w-role + .w-role { border-top: 1px solid var(--w-line); margin-top: 10px; }
.w-role-head {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--w-ink-3);
    margin-bottom: 7px;
}
.w-role-meta { text-transform: none; letter-spacing: 0; font-size: 11px; }

.w-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; }

/* The presence ring lives on the wrapper, so a photo and a monogram both
   get the same mark without the dot landing on the face. */
.w-person-face { position: relative; width: 34px; height: 34px; flex: none; }
.w-person-face img, .w-person-face .w-face {
    width: 34px; height: 34px; margin: 0; border: 0; font-size: 12px;
}
.w-person-face::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid var(--w-paper);
    background: #C8CCD8;
}
.w-person-face.is-on::after { background: var(--w-green); }

.w-person-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.w-person-copy b { font-size: 13px; font-weight: 500; color: var(--w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-person-copy small { font-size: 11px; color: var(--w-ink-3); }

.w-person-chat {
    width: 30px; height: 30px;
    border: 0; border-radius: 9px;
    background: transparent;
    color: var(--w-ink-3);
    font-size: 16px;
    cursor: pointer;
    flex: none;
}
.w-person-chat:hover { background: var(--w-sunk); color: var(--w-blue); }

/* ── The chat ────────────────────────────────────────────────────────── */

.w-chat { display: flex; flex-direction: column; }

.w-chat-expand {
    width: 30px; height: 30px;
    border: 0; border-radius: 9px;
    background: transparent;
    color: var(--w-ink-3);
    cursor: pointer;
}
.w-chat-expand:hover { background: var(--w-sunk); color: var(--w-ink); }

/* In the rail the chat is one column; full screen it becomes two. The side
   column uses display:contents here so its children fall into this single
   column as if the wrapper were not there. */
.w-chat-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.w-chat.is-wide .w-chat-body { flex-direction: row; }

.w-chat-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* The side column exists only full screen — in a 316px rail there is nowhere
   to put it, so the rooms stay a strip of pills above the log. */
.w-chat-side { display: contents; }
.w-side-label { display: none; }

.w-rooms {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--w-line);
    scrollbar-width: none;
}
.w-rooms::-webkit-scrollbar { display: none; }

.w-dirs { display: none; }

.w-room {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--w-line);
    border-radius: 999px;
    background: var(--w-paper);
    font: inherit;
    font-size: 12px;
    color: var(--w-ink-2);
    white-space: nowrap;
    cursor: pointer;
    flex: none;
}
.w-room:hover { background: var(--w-sunk); }
.w-room.is-on { background: var(--w-ink); border-color: var(--w-ink); color: #FFFFFF; }
.w-room i { font-size: 14px; }

.w-room-dot { width: 7px; height: 7px; border-radius: 999px; background: #C8CCD8; flex: none; }
.w-room-dot.is-live { background: var(--w-green); }

.w-room-badge {
    font-style: normal;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #FFC83D;
    color: #5C4300;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.w-room.is-on .w-room-badge { background: #FFC83D; }

.w-room-head { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; }
.w-head-copy { display: flex; flex-direction: column; min-width: 0; }
.w-room-head b { display: block; font-size: 13.5px; color: var(--w-ink); }
.w-room-head small { font-size: 11.5px; color: var(--w-ink-3); }
.w-head-face { width: 34px; height: 34px; flex: none; }
.w-head-face .w-dir-img { width: 34px; height: 34px; }

.w-log {
    height: 286px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 4px 2px 10px;
}

/* ── Full screen ─────────────────────────────────────────────────────── */

/* Expanding inside the 316px rail only made a taller column of two-word
   lines, so it takes the window instead. */
.w-chat-veil {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 42, .42);
    backdrop-filter: blur(2px);
    z-index: 190;
}
.w-chat-veil[hidden] { display: none; }

.w-chat.is-wide {
    position: fixed;
    inset: 24px;
    z-index: 200;
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 22px;
    box-shadow: 0 40px 90px -40px rgba(20, 24, 42, .7);
}

/* The log takes whatever the window leaves after the header, the room pills
   and the composer, so the panel never scrolls as a whole. */
.w-chat.is-wide .w-log { height: auto; flex: 1; min-height: 0; }

/* ── The side column, full screen only ───────────────────────────────── */

.w-chat.is-wide .w-chat-side {
    display: flex;
    flex-direction: column;
    width: 258px;
    flex: none;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--w-line);
    overflow-y: auto;
    min-height: 0;
}

.w-chat.is-wide .w-side-label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--w-ink-3);
    padding: 0 4px 8px;
}
.w-chat.is-wide .w-side-label-dm { padding-top: 16px; }

/* The same room list, stacked and full width instead of a pill strip. */
.w-chat.is-wide .w-rooms {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
.w-chat.is-wide .w-room {
    width: 100%;
    height: 38px;
    justify-content: flex-start;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 13px;
    padding: 0 12px;
}
.w-chat.is-wide .w-room:hover { background: var(--w-sunk); }
.w-chat.is-wide .w-room.is-on { background: var(--w-ink); color: #FFFFFF; }
.w-chat.is-wide .w-room-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }

/* Who you are talking to, with their own face and whether they are around. */
.w-chat.is-wide .w-dirs { display: flex; flex-direction: column; gap: 2px; }

.w-dir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.w-dir:hover { background: var(--w-sunk); }
.w-dir.is-on { background: #EEF4FF; }

.w-dir-face { position: relative; width: 32px; height: 32px; flex: none; }
.w-dir-img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8A91A6;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
}
.w-dir-face::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid var(--w-paper);
    background: #C8CCD8;
}
.w-dir-face.is-on::after { background: var(--w-green); }

.w-dir-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.w-dir-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-dir-copy b { font-size: 13px; font-weight: 500; color: var(--w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-dir-copy small { font-size: 11px; color: var(--w-ink-3); }
.w-dir.is-on .w-dir-copy b { color: var(--w-blue); }

/* ── Read receipts ───────────────────────────────────────────────────── */

/* Only ever under my own lines: whether somebody else's message has been
   read is their business, not mine. */
.w-receipt { display: flex; justify-content: flex-end; margin-top: 3px; }

.w-tick {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    line-height: 1;
    color: #A3A9BA;
}
.w-tick i { font-size: 13px; }
.w-tick.is-part { color: #7A8096; }
.w-tick.is-read { color: var(--w-blue); }

/* With room to spare a line stops spanning the full width — a paragraph
   1000px wide is harder to read, not easier. */
.w-chat.is-wide .w-bubble { max-width: 62ch; }
.w-chat.is-wide .w-line.is-mine { margin-left: auto; }
.w-chat.is-wide .w-line.is-mine .w-bubble { margin-left: auto; }
.w-chat.is-wide .w-log { padding-inline: 6px; }
.w-chat.is-wide .w-bubble p { font-size: 13.5px; }

.w-log-note { margin: auto; font-size: 12.5px; color: var(--w-ink-3); text-align: center; }

.w-day-rule { display: flex; align-items: center; gap: 9px; color: var(--w-ink-3); font-size: 10.5px; }
.w-day-rule::before, .w-day-rule::after { content: ''; height: 1px; background: var(--w-line); flex: 1; }

.w-line { display: flex; gap: 9px; align-items: flex-start; }
.w-line-face {
    width: 28px; height: 28px;
    border-radius: 999px;
    object-fit: cover;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8A91A6;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 600;
}

.w-bubble {
    background: var(--w-sunk);
    border-radius: 4px 13px 13px 13px;
    padding: 8px 11px 9px;
    min-width: 0;
    flex: 1;
}
.w-line.is-mine { flex-direction: row-reverse; }
.w-line.is-mine .w-bubble { background: #EEF4FF; border-radius: 13px 4px 13px 13px; }
.w-line.is-mine .w-line-who { flex-direction: row-reverse; }
.w-line.is-mine .w-bubble p { text-align: right; }

.w-line-who { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--w-ink); }
.w-line-role { font-size: 10px; font-weight: 400; color: var(--w-ink-3); }
.w-line-at   { font-size: 10px; font-weight: 400; color: var(--w-ink-3); margin-left: auto; }
.w-line.is-mine .w-line-at { margin-left: 0; margin-right: auto; }

.w-bubble p { margin: 0; font-size: 13px; color: var(--w-ink); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.w-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border-top: 1px solid var(--w-line);
    padding-top: 11px;
}
.w-composer textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--w-line);
    border-radius: 12px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--w-ink);
    max-height: 110px;
    outline: 0;
}
.w-composer textarea:focus { border-color: var(--w-blue); box-shadow: 0 0 0 3px rgba(37,117,252,.14); }

.w-send {
    width: 38px; height: 38px;
    border: 0; border-radius: 12px;
    background: var(--w-blue);
    color: #FFFFFF;
    font-size: 17px;
    cursor: pointer;
    flex: none;
}
.w-send:hover { background: #1A5ED8; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1380px) {
    .w-grid { grid-template-columns: minmax(0, 1fr) 316px; }
}

@media (max-width: 1100px) {
    .w-grid { grid-template-columns: minmax(0, 1fr); }
    .w-side { position: static; }
    .w-chat.is-wide { inset: 12px; }
}

/* On a phone the side column would leave the conversation about 90px wide,
   so full screen keeps the single-column shape and the pill strip. */
@media (max-width: 760px) {
    .w-chat.is-wide .w-chat-body { display: block; }
    .w-chat.is-wide .w-chat-side { display: contents; }
    .w-chat.is-wide .w-side-label { display: none; }
    .w-chat.is-wide .w-dirs { display: none; }
    .w-chat.is-wide .w-chat-main { display: flex; height: 100%; }

    .w-chat.is-wide .w-rooms {
        flex-direction: row;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 9px;
        margin-bottom: 9px;
        border-bottom: 1px solid var(--w-line);
    }
    .w-chat.is-wide .w-room { width: auto; height: 30px; border-radius: 999px; }
    .w-chat.is-wide .w-room-name { flex: none; }
}

@media (max-width: 640px) {
    /* Five tiles across is too narrow to read; they share the width. */
    .w-strip { width: 100%; }
    .w-stat { flex: 1 1 calc(33.333% - 7px); width: auto; min-height: 72px; }
    .w-bar { gap: 8px; }
    .w-primary { margin-left: 0; width: 100%; justify-content: center; }

    /* Board/Calendar and the search each get their own line rather than
       sharing one and leaving the search too narrow to read. */
    .w-switch { flex: 1 1 100%; justify-content: center; }
    .w-switch-btn { flex: 1; justify-content: center; }
    .w-field.w-search { flex: 1 1 100%; }
    .w-search input { width: 100%; }
    .w-select { flex: 1; }
    .w-board { grid-auto-columns: minmax(84vw, 1fr); }

    /* A seven-column month on a phone is unreadable; the days stack. */
    .w-cal-dow { display: none; }
    .w-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w-day.is-out { display: none; }
}

/* ===========================================================================
   The task sheet — /admin/tasks/create and /admin/tasks/edit
   ---------------------------------------------------------------------------
   One surface, not a page of boxes. A task is a short list of decisions, and
   they read as labelled rows: the label column is fixed so every value lines
   up down the sheet, which is what makes it scannable rather than a form.
   =========================================================================== */

.k-page { display: flex; justify-content: center; }

.k-sheet {
    width: 100%;
    max-width: 780px;
    background: var(--w-paper);
    border: 1px solid var(--w-line);
    border-radius: 22px;
    box-shadow: 0 32px 70px -44px rgba(20, 24, 42, .5);
    overflow: hidden;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
}
.k-sheet.is-over { outline: 2px dashed var(--w-blue); outline-offset: -6px; }

/* ── The strip across the top ────────────────────────────────────────── */

.k-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #F0EEF5;
}

.k-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--w-ink-2);
    font-size: 18px;
    text-decoration: none;
    flex: none;
}
.k-icon:hover { background: var(--w-sunk); color: var(--w-ink); }

.k-top-name { flex: 1; text-align: center; font-size: 13.5px; color: var(--w-ink-3); }

.k-top-code {
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--w-ink-3);
    background: var(--w-sunk);
    border-radius: 999px;
    padding: 4px 10px;
}

.k-body { padding: 24px 30px 26px; }

/* ── The name ────────────────────────────────────────────────────────── */

.k-title {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0 0 4px;
    font: inherit;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.6px;
    color: var(--w-ink);
    background: transparent;
}
.k-title::placeholder { color: #C8CCD8; }
.k-title.is-bad { color: var(--w-red); }

.k-err { display: block; font-size: 11.5px; color: var(--w-red); margin-top: 4px; }
.k-err-row { margin: -6px 0 6px 132px; }

/* ── The rows ────────────────────────────────────────────────────────── */

.k-rows { margin: 18px 0 4px; }

.k-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 7px 0;
}

/* Fixed label column: every value starts at the same x, which is what lets
   you read down the sheet instead of across each line. */
.k-k {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 118px;
    flex: none;
    padding-top: 7px;
    font-size: 13px;
    color: var(--w-ink-2);
}
.k-k i { font-size: 15px; color: var(--w-ink-3); }

.k-v { flex: 1; min-width: 0; }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.k-chips.is-bad { outline: 1px solid var(--w-red); border-radius: 10px; padding: 4px; margin: -4px; }

/* ── A choice ────────────────────────────────────────────────────────── */

.k-opt { cursor: pointer; }
.k-opt input { position: absolute; opacity: 0; pointer-events: none; }

.k-opt-face {
    --opt: #8A91A6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--w-line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--w-ink-2);
    background: var(--w-paper);
    white-space: nowrap;
}
.k-opt:hover .k-opt-face { border-color: #CFCBDA; }

.k-opt-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--opt); flex: none; }

/* The ring is drawn inside the border box, so a chosen chip is not a pixel
   wider than the others and the row does not twitch as you click along it. */
.k-opt input:checked + .k-opt-face {
    border-color: var(--opt);
    box-shadow: inset 0 0 0 1px var(--opt);
    background: color-mix(in srgb, var(--opt) 10%, #FFFFFF);
    color: color-mix(in srgb, var(--opt) 70%, #14182A);
}
.k-opt input:focus-visible + .k-opt-face { box-shadow: 0 0 0 3px rgba(37, 117, 252, .25); }

/* ── People ──────────────────────────────────────────────────────────── */

/* Unchosen people are a face and a name in outline; chosen ones fill in.
   Both states are the same size, so the row never reflows as you pick. */
.k-who {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 4px;
    border: 1px solid var(--w-line);
    border-radius: 999px;
    background: var(--w-paper);
    cursor: pointer;
}
.k-who input { position: absolute; opacity: 0; pointer-events: none; }

.k-who-face { display: inline-flex; width: 24px; height: 24px; flex: none; }
.k-who-face img, .k-mono {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8A91A6;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 600;
}

.k-who-name { font-size: 12.5px; color: var(--w-ink-2); white-space: nowrap; }
.k-who:hover { border-color: #CFCBDA; }

.k-who:has(input:checked) {
    border-color: var(--w-blue);
    box-shadow: inset 0 0 0 1px var(--w-blue);
    background: #F3F7FF;
}
.k-who:has(input:checked) .k-who-name { color: var(--w-blue); font-weight: 500; }
.k-who:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37, 117, 252, .25); }

.k-by { display: inline-flex; align-items: center; gap: 8px; height: 32px; font-size: 13px; color: var(--w-ink); }
.k-by img, .k-by .k-mono { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; }

/* ── The date row ────────────────────────────────────────────────────── */

.k-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The picker's own button, sized to sit level with the chips beside it. */
.k-when .mp-btn { height: 32px; min-width: 158px; border-radius: 999px; font-size: 12.5px; }

.k-quick-b {
    height: 32px;
    padding: 0 12px;
    border: 1px dashed #D6D3DE;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--w-ink-3);
    cursor: pointer;
}
.k-quick-b:hover { border-style: solid; border-color: var(--w-blue); color: var(--w-blue); background: #F3F7FF; }

.k-quick { display: flex; gap: 5px; flex-wrap: wrap; }

/* ── Description ─────────────────────────────────────────────────────── */

.k-tabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 1px solid #F0EEF5; }

.k-tab {
    position: relative;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--w-ink-3);
    padding: 9px 12px;
    cursor: pointer;
}
.k-tab:hover { color: var(--w-ink); }
.k-tab.is-on { color: var(--w-ink); font-weight: 500; }
.k-tab.is-on::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--w-ink);
    border-radius: 2px;
}

.k-pane { padding-top: 14px; }
.k-pane[hidden] { display: none; }

.k-area {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--w-sunk);
    padding: 13px 15px;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--w-ink);
    outline: 0;
}
.k-area::placeholder { color: #AEB3C2; }
.k-area:focus { border-color: var(--w-blue); background: var(--w-paper); box-shadow: 0 0 0 3px rgba(37, 117, 252, .14); }

.k-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.k-hist li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--w-ink-2); }
.k-hist i { font-size: 15px; color: var(--w-ink-3); }

/* ── Attachments ─────────────────────────────────────────────────────── */

.k-attach { margin-top: 22px; padding-top: 18px; border-top: 1px solid #F0EEF5; }

.k-attach-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--w-ink-3);
}
.k-attach-h em {
    font-style: normal;
    letter-spacing: .06em;
    color: #B6BBC8;
}

.k-link {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--w-blue);
    cursor: pointer;
    padding: 0;
}
.k-link:hover { text-decoration: underline; }

.k-files { display: flex; flex-wrap: wrap; gap: 9px; }

.k-file {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 186px;
    padding: 10px 12px;
    border: 1px solid var(--w-line);
    border-radius: 13px;
    background: var(--w-paper);
}
.k-file > i { font-size: 20px; color: #E8744F; flex: none; }
.k-file-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.k-file-copy b { font-size: 12.5px; font-weight: 500; color: var(--w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-file-copy small, .k-file-copy a { font-size: 11px; color: var(--w-ink-3); text-decoration: none; }
.k-file-copy a:hover { color: var(--w-blue); text-decoration: underline; }

.k-file-x {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--w-ink-3);
    cursor: pointer;
    flex: none;
}
.k-file-x:hover { background: #FFF0F0; color: var(--w-red); }

.k-file-add {
    width: 54px;
    height: 54px;
    border: 1.5px dashed #D6D3DE;
    border-radius: 13px;
    background: transparent;
    color: var(--w-ink-3);
    font-size: 20px;
    cursor: pointer;
}
.k-file-add:hover { border-color: var(--w-blue); color: var(--w-blue); background: #F5F8FF; }

/* ── The bar ─────────────────────────────────────────────────────────── */

.k-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-top: 1px solid #F0EEF5;
    background: #FCFCFE;
}
.k-foot-note { flex: 1; font-size: 11.5px; color: var(--w-ink-3); }

.k-cancel {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    font-size: 13px;
    color: var(--w-ink-2);
    text-decoration: none;
}
.k-cancel:hover { background: var(--w-sunk); color: var(--w-ink); }

.k-save {
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--w-ink);
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.k-save:hover { background: #262B42; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
    .k-body { padding: 18px 16px 20px; }
    .k-title { font-size: 22px; }

    /* The label column costs more than it is worth at this width. */
    .k-row { flex-direction: column; gap: 6px; padding: 9px 0; }
    .k-k { width: auto; padding-top: 0; }
    .k-err-row { margin-left: 0; }

    .k-foot { padding: 14px 16px; flex-wrap: wrap; }
    .k-foot-note { flex: 1 1 100%; }
    .k-cancel, .k-save { flex: 1; justify-content: center; }
    .k-file { min-width: 0; flex: 1 1 100%; }
}

/* ===========================================================================
   The task panel — slides in over the board
   ---------------------------------------------------------------------------
   Built to the reference: a label column of icon + grey word, values to the
   right as pills, a grey description block, then tabs and a dated activity
   feed. The type scale is the reference's — 24px title, 14px labels and
   values, 13px feed, 11px timestamps — set in Lufga, which is the panel's
   face everywhere else.
   =========================================================================== */

.d-veil {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 24, 42, .32);
    backdrop-filter: blur(1.5px);
}
.d-veil[hidden] { display: none; }

.d-draw {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 310;
    width: min(520px, calc(100vw - 24px));
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 40px 90px -36px rgba(20, 24, 42, .55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);

    /* Parked off-screen so it arrives from the edge it lives on. */
    transform: translateX(16px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.d-draw.is-in { transform: none; opacity: 1; }
.d-draw[hidden] { display: none; }
.d-draw form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .d-draw { transition: none; }
}

/* ── The strip across the top ────────────────────────────────────────── */

.d-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}
.d-top-right { display: flex; align-items: center; gap: 4px; }

.d-ico {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6B7183;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.d-ico:hover { background: #F4F5FA; color: #14182A; }

.d-code {
    font-size: 11px;
    letter-spacing: .04em;
    color: #9AA0B2;
    background: #F4F5FA;
    border-radius: 999px;
    padding: 4px 10px;
    margin-right: 4px;
}
.d-code[hidden] { display: none; }

/* ── Scrolling body ──────────────────────────────────────────────────── */

.d-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 26px 20px; }

.d-title {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.4px;
    line-height: 1.25;
    color: #14182A;
}
.d-title::placeholder { color: #C8CCD8; }

.d-bad { display: block; font-size: 12px; color: #FF6262; margin-top: 6px; }
.d-bad[hidden] { display: none; }

/* ── The label / value rows ──────────────────────────────────────────── */

.d-rows { margin: 20px 0 4px; }

.d-row { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.d-row[hidden] { display: none; }

/* Fixed label column, so every value starts at the same x and the panel
   reads down rather than across. */
.d-k {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 132px;
    flex: none;
    padding-top: 6px;
    font-size: 14px;
    color: #6B7183;
}
.d-k i { font-size: 16px; color: #9AA0B2; }

.d-v { flex: 1; min-width: 0; }
.d-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.d-plain { display: flex; align-items: baseline; gap: 9px; padding-top: 6px; font-size: 14px; }
.d-plain b { font-weight: 500; color: #14182A; }
.d-plain em { font-style: normal; font-size: 12.5px; color: #9AA0B2; }

/* ── A pill ──────────────────────────────────────────────────────────── */

.d-pill { cursor: pointer; }
.d-pill input { position: absolute; opacity: 0; pointer-events: none; }

.d-pill-face {
    --pill: #8A91A6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #F4F5FA;
    font-size: 12.5px;
    color: #8A91A6;
    white-space: nowrap;
}
.d-pill:hover .d-pill-face { background: #ECEEF6; }

.d-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }

/* Chosen pills fill with their own colour, the way the reference shows
   status and priority; the rest stay neutral so only one reads as set. */
.d-pill input:checked + .d-pill-face {
    background: color-mix(in srgb, var(--pill) 16%, #FFFFFF);
    color: color-mix(in srgb, var(--pill) 72%, #14182A);
    border-color: color-mix(in srgb, var(--pill) 28%, #FFFFFF);
}
.d-pill input:focus-visible + .d-pill-face { box-shadow: 0 0 0 3px rgba(37, 117, 252, .25); }

.d-pill input:checked + .d-pill-grey {
    background: #ECEEF6;
    color: #4E5467;
    border-color: #DDE0EA;
}

/* ── Dates ───────────────────────────────────────────────────────────── */

.d-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.d-when .mp-btn { height: 28px; min-width: 150px; border-radius: 999px; font-size: 12.5px; padding: 0 11px; }
.d-when .mp-btn > i:first-child { font-size: 14px; }

.d-quick {
    height: 28px;
    padding: 0 11px;
    border: 1px dashed #D6D3DE;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: #9AA0B2;
    cursor: pointer;
}
.d-quick:hover { border-style: solid; border-color: #2575FC; color: #2575FC; background: #F3F7FF; }

/* ── Assignees ───────────────────────────────────────────────────────── */

.d-crew { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }

/* Each person is a face and their name. Avatars alone were six grey discs
   of initials — unreadable unless you already knew the team. */
.d-face {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 3px;
    border: 1px solid #E7E4EE;
    border-radius: 999px;
    background: #FFFFFF;
    cursor: pointer;
}
.d-face:hover { border-color: #CFCBDA; background: #FAFAFD; }
.d-face input { position: absolute; opacity: 0; pointer-events: none; }

.d-face-pic { position: relative; width: 26px; height: 26px; flex: none; }

.d-face img, .d-mono {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8A91A6;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 600;
}

/* Unpicked people are muted rather than hidden, so the whole team is one
   row you tick instead of a list you have to open. */
.d-face img, .d-face .d-mono { filter: grayscale(1); opacity: .55; transition: filter .12s, opacity .12s; }
.d-face-name { font-size: 12.5px; color: #8A91A6; white-space: nowrap; }

.d-face-tick {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2575FC;
    color: #FFFFFF;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}

.d-face:has(input:checked) {
    border-color: #2575FC;
    box-shadow: inset 0 0 0 1px #2575FC;
    background: #F3F7FF;
}
.d-face:has(input:checked) img, .d-face:has(input:checked) .d-mono { filter: none; opacity: 1; }
.d-face:has(input:checked) .d-face-name { color: #2575FC; font-weight: 500; }
.d-face:has(input:checked) .d-face-tick { display: inline-flex; }
.d-face:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37, 117, 252, .3); }

/* ── Description ─────────────────────────────────────────────────────── */

.d-desc {
    margin-top: 18px;
    background: #F7F8FB;
    border-radius: 14px;
    padding: 15px 17px;
}
.d-desc-h { font-size: 14px; font-weight: 600; color: #14182A; margin-bottom: 7px; }

.d-desc textarea {
    width: 100%;
    border: 0;
    outline: 0;
    resize: vertical;
    min-height: 74px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.6;
    color: #4E5467;
}
.d-desc textarea::placeholder { color: #A9AEBE; }

/* ── Tabs ────────────────────────────────────────────────────────────── */

.d-tabs { display: flex; gap: 2px; margin-top: 20px; border-bottom: 1px solid #EFEDF4; }

.d-tab {
    position: relative;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    color: #9AA0B2;
    padding: 10px 12px;
    cursor: pointer;
}
.d-tab:hover { color: #14182A; }
.d-tab.is-on { color: #2575FC; font-weight: 500; }
.d-tab.is-on::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: #2575FC;
    border-radius: 2px;
}

.d-pane { padding-top: 16px; }
.d-pane[hidden] { display: none; }

.d-empty { font-size: 12.5px; color: #9AA0B2; margin: 4px 0; }

/* ── The feed ────────────────────────────────────────────────────────── */

.d-day {
    font-size: 13.5px;
    font-weight: 600;
    color: #14182A;
    margin: 14px 0 10px;
}
.d-day:first-child { margin-top: 0; }

.d-act { display: flex; gap: 10px; margin-bottom: 14px; }

.d-act-face { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; flex: none; }

.d-act-copy { min-width: 0; }
.d-act-copy p { margin: 0; font-size: 13px; line-height: 1.45; color: #6B7183; }
.d-act-copy p b { font-weight: 600; color: #14182A; }
.d-act-copy small { font-size: 11px; color: #A9AEBE; }

/* ── Files ───────────────────────────────────────────────────────────── */

.d-filelist { display: flex; flex-direction: column; gap: 8px; }

.d-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #E7E4EE;
    border-radius: 12px;
}
.d-file-ico { font-size: 22px; color: #E04B4B; flex: none; display: inline-flex; }
.d-file-ico.is-new { color: #9AA0B2; }

.d-file-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.d-file-copy b { font-size: 12.5px; font-weight: 500; color: #14182A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-file-copy small { font-size: 11px; color: #9AA0B2; }

.d-file-get {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #6B7183;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: none;
}
.d-file-get:hover { background: #F4F5FA; color: #2575FC; }

.d-upload {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    border: 1px dashed #D6D3DE;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: #6B7183;
    cursor: pointer;
}
.d-upload:hover { border-color: #2575FC; color: #2575FC; background: #F5F8FF; }

/* ── The bar ─────────────────────────────────────────────────────────── */

.d-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px solid #EFEDF4;
    background: #FCFCFE;
}
.d-note { flex: 1; font-size: 11.5px; color: #9AA0B2; }

.d-cancel {
    height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #6B7183;
    cursor: pointer;
}
.d-cancel:hover { background: #F4F5FA; color: #14182A; }

.d-save {
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background: #14182A;
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.d-save:hover { background: #262B42; }
.d-save:disabled { opacity: .6; cursor: default; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
    .d-draw { top: 0; right: 0; bottom: 0; left: 0; width: auto; border-radius: 0; }
    .d-scroll { padding: 4px 16px 18px; }
    .d-foot { padding: 12px 16px; }

    /* The label column costs more than it is worth at this width. */
    .d-row { flex-direction: column; gap: 6px; }
    .d-k { width: auto; padding-top: 0; }
}

/* ── Comments on a task ──────────────────────────────────────────────── */

.d-tab-n {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: #ECEEF6;
    color: #6B7183;
    font-size: 10px;
    font-weight: 600;
}
.d-tab-n[hidden] { display: none; }
.d-tab.is-on .d-tab-n { background: #E3EDFF; color: #2575FC; }

.d-c { display: flex; gap: 10px; margin-bottom: 14px; }

.d-c-face { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: none; }

.d-c-body { min-width: 0; flex: 1; }

.d-c-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
.d-c-head b { font-size: 13px; font-weight: 600; color: #14182A; }
.d-c-role { font-size: 10.5px; color: #A9AEBE; }
.d-c-when { font-size: 11px; color: #A9AEBE; margin-left: auto; }

.d-c-x {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #C4C8D4;
    font-size: 13px;
    cursor: pointer;
    flex: none;
    opacity: 0;
    transition: opacity .12s;
}
/* The delete only appears on the comment you are pointing at, so a thread
   is not a row of little crosses. */
.d-c:hover .d-c-x { opacity: 1; }
.d-c-x:hover { background: #FFF0F0; color: #FF6262; }
.d-c-x:focus-visible { opacity: 1; }

.d-c-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4E5467;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Saying something ────────────────────────────────────────────────── */

.d-say {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #EFEDF4;
}
.d-say[hidden] { display: none; }

.d-say textarea {
    flex: 1;
    resize: none;
    min-height: 38px;
    max-height: 120px;
    border: 1px solid #E7E4EE;
    border-radius: 12px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    color: #14182A;
    outline: 0;
}
.d-say textarea:focus { border-color: #2575FC; box-shadow: 0 0 0 3px rgba(37, 117, 252, .14); }

.d-say-go {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #2575FC;
    color: #FFFFFF;
    font-size: 17px;
    cursor: pointer;
    flex: none;
}
.d-say-go:hover { background: #1A5ED8; }

/* ===========================================================================
   In tune with the profile
   ---------------------------------------------------------------------------
   The two screens were built weeks apart and it showed: 16px corners against
   20px, a #E7E4EE border against a #F0EEF5 one, tighter padding, smaller
   type, a dark square button against a blue pill. Same product, two hands.

   These override the earlier values rather than editing them in place, so
   the one place to look for "why does this match the profile" is here.
   =========================================================================== */

.w-page {
    --w-r:    20px;          /* the profile's --f-r */
    --w-line: #F0EEF5;       /* the profile's --o-line-s */
    --w-edge: #E7E4EE;       /* kept for real separators, not card edges */
}

/* The greeting block comes from the profile's stylesheet; it needs the page
   scope that stylesheet expects. */
.w-page .f-greet { padding: 2px 2px 20px; }
.w-page .f-hello { margin-left: auto; text-align: right; min-width: 0; }
.w-page .f-hello h1 {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.6px;
    color: #14182A;
    margin: 0;
}
.w-page .f-hello p { font-size: 13px; color: #6B7183; margin: 3px 0 0; }

@media (max-width: 900px) {
    .w-page .f-hello { margin-left: 0; text-align: left; flex: 1 1 100%; order: -1; }
    .w-page .f-mic { display: none; }
}

/* ── Tiles ───────────────────────────────────────────────────────────── */

.w-top { margin-bottom: 16px; }
.w-strip { gap: 12px; }

/* Same corner and the same breathing room as a profile tile. */
.w-stat { border-radius: var(--w-r); width: 116px; min-height: 90px; padding: 15px 17px; }
.w-stat-n { font-size: 26px; }
.w-stat-l { font-size: 12px; }

/* ── Cards and columns ───────────────────────────────────────────────── */

.w-page .o-card { border-radius: var(--w-r); border-color: var(--w-line); }

.w-col { background: #F7F8FC; border-radius: var(--w-r); padding: 14px; }
.w-col-name { font-size: 14px; }

.w-card { border-radius: 16px; border-color: var(--w-line); padding: 14px 15px 13px 17px; }
.w-card:hover { border-color: #E3DFEC; }
.w-card-title { font-size: 14.5px; }

.w-empty-slot { border-color: #E4E1EC; border-radius: 16px; }
.w-add { border-color: #E4E1EC; border-radius: 13px; height: 40px; }
.w-quick { border-radius: 16px; border-color: var(--w-line); }

/* ── Controls ────────────────────────────────────────────────────────── */

/* Taller and rounder, to sit with the 44px discs in the greeting rather
   than looking like a toolbar borrowed from another app. */
.w-field { height: 42px; border-radius: 999px; border-color: var(--w-line); padding: 0 16px; }
.w-select { padding-right: 12px; }
.w-switch { padding: 4px; }
.w-switch-btn { padding: 8px 17px; font-size: 13px; }
.w-bar { gap: 9px; margin-bottom: 18px; }

/* ── The side rail ───────────────────────────────────────────────────── */

.w-role-head { font-size: 11px; }
.w-person-copy b { font-size: 13.5px; }

.w-rooms { border-bottom-color: var(--w-line); }
.w-room { border-color: var(--w-line); }
.w-composer { border-top-color: var(--w-line); }

/* ── The month ───────────────────────────────────────────────────────── */

.w-day { border-radius: 14px; border-color: var(--w-line); }
.w-day.is-weekend { background: #FBFBFD; }
.w-cal-today { border-color: var(--w-line); }

/* ── The panel ───────────────────────────────────────────────────────── */

.d-draw { border-radius: 22px; }
.d-file, .d-say textarea { border-color: var(--w-line); }
.d-face { border-color: var(--w-line); }