/* 2do screens built from the kit (kit.css has the shapes, this file only lays
   them out). Loaded after style.css / dark.css / v2.css, while screens move over. */

/* ---------------------------------------------------------------- rail */
/* the column on the left with the logo (the app adds its icons later) */
.k-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
    padding-top: 22px;
    border-right: 1px solid var(--k-line);
}
.k-rail .k-logo { width: 40px; height: auto; }

/* ---------------------------------------------------------------- composer */
/* a neutral grey panel: the filters, then the input line raised inside it */
.k-composer { border-radius: 18px; background: var(--k-panel); }
.k-composer .k-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px;
                         color: var(--k-n74); font: italic 700 var(--k-t-md)/1 var(--k-font); }
.k-composer .k-grow { flex: 1; }
.k-composer .k-line { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px;
                      border-radius: 16px; background: var(--k-panel-raised); }
.k-composer .k-line .ui-field { flex: 1; min-width: 200px; font-size: 18px; }
@media (max-width: 640px) {
    .k-composer .k-line .ui-field { min-width: 0; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- login */
/* the whole screen: the rail, the hero, and a split simulation behind them
   (conversation left, the app right). Deep green at the top to purple black. */
.twodo-login {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    overflow: hidden;
    background: linear-gradient(180deg, var(--k-bg) 0%, var(--k-bg-end) 78%);
    color: var(--k-text);
    font: 500 var(--k-t-md)/1.5 var(--k-font);
}
.twodo-login::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    width: 70vw;
    height: 70vh;
    background: radial-gradient(closest-side, rgba(110, 170, 80, .10), transparent);
    animation: k-drift 22s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
.twodo-login .k-rail { position: relative; z-index: 3; flex: none; border-right: 0; }
/* the login's controls a notch under the large size: in proportion with the headline */
.twodo-login { --k-h-lg: 38px; --k-t-lg: 15px; }
.twodo-login .login-main {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 40px 24px 80px 8%;
}
/* a veil so the type stays readable over the moving plate */
.twodo-login .login-main::before {
    content: "";
    position: absolute;
    inset: -8% -4%;
    background: radial-gradient(ellipse 70% 62% at 38% 46%, rgb(var(--k-lo) / .78), rgb(var(--k-lo) / .42) 42%, transparent 72%);
    pointer-events: none;
    z-index: -1;
}
.twodo-login .login-hero .ui-display .k-line-in { display: block; animation: k-rise .8s var(--k-spring) both; }
.twodo-login .login-hero .ui-display .k-line-in:nth-child(2) { animation-delay: .09s; }
.twodo-login .login-hero .ui-display .k-line-in:nth-child(3) { animation-delay: .18s; }
.twodo-login .login-hero .ui-outline-text { animation: k-rise .8s var(--k-spring) .09s both, k-shimmer 5s ease-in-out 1s infinite alternate; }
.twodo-login .login-stage { min-height: 150px; margin-top: 44px; }
.twodo-login .login-stage > * { animation: k-rise .45s var(--k-spring) both; }
.twodo-login .login-stage > *:nth-child(2) { animation-delay: .05s; }
.twodo-login .login-stage > *:nth-child(3) { animation-delay: .1s; }
.twodo-login .ui-field.ui-accent { width: min(380px, 100%); }
.twodo-login .ui-field.is-busy { opacity: .6; pointer-events: none; }
.twodo-login .login-note { min-height: 1.5em; margin: 14px 0 0; color: var(--k-muted); font-size: var(--k-t-sm); }
.twodo-login .login-note.is-error { color: var(--k-danger); }
/* the code step: the headline steps aside, the boxes sit in the middle */
.twodo-login.is-code .login-hero { display: none; }
.twodo-login.is-code .login-main { align-items: center; padding-left: 24px; text-align: center; }
.twodo-login.is-code .login-stage { margin-top: 0; }
.twodo-login.is-code .login-sim { opacity: .28; }
.twodo-login .login-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px;
                            color: var(--k-faint); font-size: var(--k-t-sm); }

/* the split plate: conversation | app, slightly blurred, always moving */
.login-sim {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.login-sim-split {
    position: relative;
    display: flex;
    height: 100%;
    filter: blur(2.4px) saturate(.9) brightness(.9);
    transform: scale(1.045);
    transform-origin: center;
}
.login-sim-split::after {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(172, 213, 117, .22), transparent);
}
.login-sim-chat, .login-sim-app {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.login-sim-chat { padding: 88px 28px 28px 92px; }
.login-sim-app {
    padding: 18px 22px 22px;
    background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 85%);
    --k-h-sm: 26px;
    --k-t-sm: 12px;
    --k-seg-surface: var(--k-app-bar);
}
.login-sim-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    color: var(--k-n63);
    font: 700 12px/1 var(--k-font);
}
.login-sim-who { display: inline-flex; align-items: center; gap: 8px; color: var(--k-lime); letter-spacing: .04em; text-transform: uppercase; }
.login-sim-who .ui-icon { width: 14px; height: 14px; }
.login-sim-msgs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding-right: 8px;
}
.login-sim-msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px;
    color: var(--k-n86);
    font: 500 13.5px/1.45 var(--k-font);
    animation: k-rise .4s var(--k-spring) both;
}
.login-sim-msg.is-human { align-self: flex-end; background: var(--k-n29); color: var(--k-solid-ink); }
.login-sim-msg.is-agent { align-self: flex-start; background: color-mix(in srgb, var(--k-n21b) 80%, transparent); }
.login-sim-msg-who {
    display: block;
    margin-bottom: 4px;
    color: var(--k-lime);
    font: 700 10.5px/1.2 var(--k-font);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.login-sim-dots { display: inline-flex; gap: 5px; height: 12px; align-items: center; }
.login-sim-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--k-lime);
    animation: login-sim-dots 1s ease-in-out infinite;
}
.login-sim-dots i:nth-child(2) { animation-delay: .15s; }
.login-sim-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes login-sim-dots { 50% { opacity: .25; transform: translateY(-2px); } }
.login-sim-prompt {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--k-n21b);
    color: var(--k-n91);
    font: italic 600 14px/1.3 var(--k-font);
}
.login-sim-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: var(--k-lime);
    animation: login-sim-caret 1s steps(1) infinite;
    vertical-align: -2px;
}
@keyframes login-sim-caret { 50% { opacity: 0; } }
.login-sim-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    margin: -18px -22px 16px;
    padding: 8px 16px;
    background: var(--k-app-bar);
}
.login-sim-tabs .ui-chip.is-on { --tint: var(--k-lime); background: color-mix(in srgb, var(--k-lime) 72%, #000); }
.login-sim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.login-sim-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; padding: 4px 4px 0; }
.login-sim-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 16px 0 18px;
    border-radius: 14px;
    background: var(--k-row);
    animation: k-row-in .32s var(--k-ease) both;
    transition: background .25s var(--k-ease), opacity .25s ease;
}
.login-sim-row.is-new { outline: 1px solid color-mix(in srgb, var(--k-lime) 45%, transparent); }
.login-sim-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--k-seg-grey);
}
.login-sim-row.state-in-progress .login-sim-dot { background: var(--k-seg-yellow); }
.login-sim-row.state-done .login-sim-dot { background: var(--k-seg-teal); }
.login-sim-row.c-yellow { background: color-mix(in srgb, #f5a546 16%, var(--k-row)); }
.login-sim-row.c-green { background: color-mix(in srgb, #6eaf73 16%, var(--k-row)); }
.login-sim-row.c-blue { background: color-mix(in srgb, #8c98b9 16%, var(--k-row)); }
.login-sim-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-n76);
    font: 600 14px/1.35 var(--k-font);
}
.login-sim-claim, .login-sim-talk {
    flex: none;
    color: var(--k-n63);
    font: 600 12px/1 var(--k-font);
    white-space: nowrap;
}
.login-sim-claim { color: var(--k-lime); }
.login-sim-age {
    flex: none;
    min-width: 2.4em;
    color: var(--k-faint);
    font: 700 13px/1 var(--k-font);
    text-align: right;
}
.login-sim-row .ui-chip { --tint: var(--k-n29); --ink: var(--k-n64); --grip-ink: var(--k-n44); background: var(--k-n25); }
.login-sim-row .ui-chip.c-yellow { --ink: #8f8862; }
.login-sim-row .ui-chip.c-turquoise { --ink: #6f8d91; }
.login-sim-row.state-in-progress { position: relative; overflow: hidden; }
.login-sim-row.state-in-progress::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--k-seg-yellow) 50%, transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    opacity: .5;
    animation: k-sweep 2.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
.login-sim-composer { margin-top: 16px; opacity: .92; }
.login-sim-spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--k-lime);
    box-shadow: 0 0 18px var(--k-lime);
    opacity: 0;
    z-index: 2;
}
.login-sim.is-rewind .login-sim-msgs,
.login-sim.is-rewind .login-sim-row { opacity: 0; transition: opacity .25s ease; }

@media (max-width: 820px) {
    .login-sim-split { flex-direction: column; }
    .login-sim-split::after {
        top: 42%;
        bottom: auto;
        left: 10%;
        right: 10%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(172, 213, 117, .22), transparent);
    }
    .login-sim-chat { flex: none; height: 42%; padding: 72px 20px 12px; }
    .login-sim-app { flex: 1; min-height: 0; }
    .login-sim-actions .ui-toggle { display: none; }
}
@media (max-width: 640px) {
    .twodo-login .k-rail { display: none; }
    .twodo-login .login-main { justify-content: flex-start; padding: 90px 20px 40px; }
    .twodo-login .login-main::before {
        background: radial-gradient(ellipse 95% 48% at 50% 20%, rgb(var(--k-lo) / .8), transparent 72%);
    }
    .login-sim-bar .ui-pill { display: none; }
    .login-sim-composer .k-filters { display: none; }
}

@keyframes k-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes k-shimmer { to { -webkit-text-stroke-color: var(--k-lime); } }
@keyframes k-drift { to { transform: translate(-30vw, 30vh); } }
@media (prefers-reduced-motion: reduce) {
    .twodo-login *, .twodo-login::before { animation: none !important; }
}

/* ---------------------------------------------------------------- app shell */
/* the page's canvas is dark too: on a phone the keyboard shrinks the viewport and
   Safari paints the canvas below the body, which was white; and no version line */
html { background: var(--k-app-bg-end); }
body.page- .footer #commit { display: none; }
/* the home page (/) is the app: body.page- (see v2.css). A band across the top
   (the list tabs, the actions, the state switch), the rail under it on the left,
   the list and the composer to the right of the rail. Colors from the mockup. */
/* --k-gut: the side margin the rows and the composer share (their edges line up) */
body.page- {
    --k-bar-h: 46px;
    --k-gut: 32px;
    --k-maxw: 1200px;       /* the widest the rows and the composer get */
    --k-row: #1d1e1d80;     /* a row's (and card's) grey, see-through; a space's theme retints it */
    --k-row-hover: #1d1e1db3;
    --k-panel-w: 0px;       /* an open side panel's width (Filters, Share, View) */
    /* the side margin of the rows and the composer: --k-gut at least, more when
       the space beside the rail (and the panel) is wider than --k-maxw */
    --k-side: max(var(--k-gut), (100vw - 64px - var(--k-panel-w) - var(--k-maxw)) / 2);
}/* light mode: rows nearly white over the page, whiter under the pointer */
/* (also from html.k-light: the head sets it before body exists, see head.html) */
.k-light body.page-, body.page-.k-light { --k-row: #fdfcfecc; --k-row-hover: #fefdff; }
/* the ink logo on a light page, before twodos.js swaps the file (browsers that can) */
.k-light img[src*="2do-logo.svg"] { content: url(/2do.work/static/imgs/2do-logo-ink.svg); }

body.page-.in-filtering { --k-panel-w: 300px; }
body.dark.page-,
body.page- .content:before,
body.page- .content:after {
    background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 85%) fixed;
}
body.page- .header {
    top: 0;
    left: 0;
    right: 0;
    height: var(--k-bar-h);
    border: 0;
    border-radius: 0;
    background: var(--k-app-bar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 4;
}
body.page- .k-topbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;   /* (not --k-bar-h: that is measured from this row, twodos.js) */
    padding: 0 14px;
    /* the bar's shapes, a notch under the kit's small size */
    --k-h-sm: 26px;
    --k-t-sm: 12px;
}
.k-topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.k-actions .ui-pill.active { background: var(--k-glass-hover); color: var(--k-text); }
.k-actions .ui-pill.ui-teal.active { box-shadow: 0 0 0 2px rgba(43, 157, 179, .35); }
/* the state switch's "see-through" is the band behind it */
.k-states { --k-seg-surface: var(--k-app-bar); }
/* the rail, under the band: the logo on top, then the app-wide settings */
body.page- .k-rail.app-rail {
    position: fixed;
    top: var(--k-bar-h);
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 64px;
    gap: 80px;          /* the logo, then the settings icons well below it */
    padding-top: 22px;
    border-right: 1px solid rgb(var(--k-hi) / .025);
    background: none;
}
body.page- .k-rail .k-logo { width: 34px; }
.k-rail .k-rail-items { display: flex; flex-direction: column; gap: 18px; }
.k-rail .k-rail-item { display: flex; flex-direction: column; align-items: center; gap: 6px;
                       color: var(--k-n38); font: 700 10px/1 var(--k-font); text-transform: uppercase; letter-spacing: .06em; }
.k-rail .k-rail-item .ui-pill { background: none; }
/* the spaces in the rail: a tile each in its color, the open one ringed; under
   them a grid for the Spaces page. The settings icons come after, further down */
body.page- .k-rail.app-rail { gap: 36px; }
.k-rail .k-rail-spaces { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.k-rail .k-rail-spaces:empty { display: none; }
.k-space-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: calc(36px * var(--k-round));
    background: color-mix(in srgb, var(--space-ink) 22%, transparent);
    color: var(--space-ink);
    font: 800 12.5px/1 var(--k-font);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease, box-shadow .2s ease, transform .18s var(--k-spring);
}
.k-space-tile .ui-icon { width: 17px; height: 17px; }
.k-space-tile:hover { background: color-mix(in srgb, var(--space-ink) 34%, transparent); transform: translateY(-1px); }
.k-space-tile.is-on { background: var(--space-ink); color: var(--k-on-lime); box-shadow: 0 0 0 2px var(--k-app-bg), 0 0 0 3.5px var(--space-ink); }
.k-space-tile.k-space-all { --space-ink: var(--k-n63); background: none; box-shadow: inset 0 0 0 1.5px var(--k-n29); color: var(--k-n53); }
.k-space-tile.k-space-all:hover { box-shadow: inset 0 0 0 1.5px var(--k-n38b); color: var(--k-text); }

/* ---------------------------------------------------------------- the Spaces page */
.k-spaces {
    position: fixed;
    inset: var(--k-bar-h) 0 0 64px;
    z-index: 40;
    overflow: auto;
    background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 85%);
    animation: ui-fade .18s ease;
}
.k-spaces-inner { max-width: 1200px; margin: 0 auto; padding: 34px 28px 60px; }
.k-spaces-head { position: relative; margin-bottom: 26px; padding-right: 50px; }
.k-spaces-head h1 { margin: 0 0 8px; color: var(--k-n86); font: italic 800 30px/1.1 var(--k-font); letter-spacing: -.02em; }
.k-spaces-head p { max-width: 640px; margin: 0; color: var(--k-n53); font: 500 13.5px/1.5 var(--k-font); }
.k-spaces-head .ui-pill { position: absolute; top: 0; right: 0; }
.k-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.k-space-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--k-sheet);
    box-shadow: inset 0 0 0 1px rgb(var(--k-hi) / .04);
    transition: transform .2s var(--k-spring), box-shadow .2s ease;
}
.k-space-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(var(--k-hi) / .08), 0 14px 34px rgb(var(--k-shadow-rgb) / calc(.3 * var(--k-shadow-k))); }
.k-space-card.is-open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--space-ink) 60%, transparent); }
.k-space-band { height: 8px; background: var(--space-ink); }
.k-space-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 18px 16px; }
.k-space-top { display: flex; align-items: baseline; gap: 8px; }
.k-space-top h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  color: var(--k-solid-ink); font: italic 800 21px/1.2 var(--k-font); letter-spacing: -.01em; }
.k-space-now { padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--space-ink) 20%, transparent); color: var(--space-ink);
               font: 700 10.5px/1 var(--k-font); text-transform: uppercase; letter-spacing: .06em; }
.k-space-kind { margin: 0; color: var(--k-n53); font: italic 600 12.5px/1.3 var(--k-font); }
.k-space-lists { display: flex; flex-wrap: wrap; gap: 6px; }
.k-space-lists span { padding: 5px 9px; border-radius: 8px; background: var(--k-sheet-raised); color: var(--k-n73); font: 700 12px/1 var(--k-font); }
.k-space-lists em { color: var(--k-n47); font: italic 500 12.5px/1 var(--k-font); }
.k-space-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.k-space-stats { color: var(--k-n63); font: 600 12px/1.3 var(--k-font); }
.k-space-faces { display: flex; }
.k-space-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--k-n29);
    box-shadow: 0 0 0 2px var(--k-sheet);
    color: var(--k-n83);
    font: 800 10.5px/1 var(--k-font);
    font-style: normal;
}
.k-space-actions { display: flex; gap: 8px; }
.k-space-new {
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed var(--k-n34);
    background: none;
    box-shadow: none;
    color: var(--k-n63);
    font: 700 var(--k-t-md)/1 var(--k-font);
    cursor: pointer;
}
.k-space-new .ui-icon { width: 28px; height: 28px; stroke-width: 2.6; }
.k-space-new:hover { border-color: var(--k-n47); color: var(--k-solid-ink); }
/* a space's settings: the template choices as small cards */
.k-space-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.k-space-template {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--k-sheet-raised);
    box-shadow: inset 0 0 0 1.5px transparent;
    color: var(--k-n73);
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s ease, color .15s ease;
}
.k-space-template b { color: var(--k-solid-ink); font: 700 13.5px/1.2 var(--k-font); }
.k-space-template span { font: 500 12px/1.35 var(--k-font); }
.k-space-template:hover { box-shadow: inset 0 0 0 1.5px var(--k-n38b); }
.k-space-template.is-on { box-shadow: inset 0 0 0 1.5px var(--k-lime); }
.k-space-panel .ui-panel-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--list-ink, var(--k-lime)); vertical-align: 2px; }
.k-ed-item-share .k-set-new { margin-bottom: 8px; }
@media (max-width: 760px) {
    .k-spaces { inset: var(--k-bar-h) 0 0 0; }
    .k-spaces-inner { padding: 22px 16px 40px; }
}
/* the list and the composer, right of the rail and under the band */
body.page- .content { left: 62px; right: 0; top: var(--k-bar-h); padding-top: 30px; }
/* the list's scrollbar on the left, thin, riding the line between the rail and
   the page: the scroll area runs right-to-left (that moves its bar to the left
   edge, 2px before the rail's line) and everything inside runs left-to-right */
body.page- .content { direction: rtl; }
body.page- .content > * { direction: ltr; }
body.page- .content::-webkit-scrollbar { width: 2px; }
body.page- .content::-webkit-scrollbar-track { background: transparent; }
/* hidden until the pointer is over the list, then barely there */
body.page- .content::-webkit-scrollbar-thumb { background: transparent; border-radius: 1px; }
body.page- .content:hover::-webkit-scrollbar-thumb { background: rgb(var(--k-hi) / .05); }
body.page- .content::-webkit-scrollbar-thumb:hover { background: rgb(var(--k-hi) / .18); }
/* Firefox only (it has no ::-webkit-scrollbar). Edge and Chrome must not get these:
   the standard properties switch their ::-webkit-scrollbar styling off */
@supports (-moz-appearance: none) {
    body.page- .content { scrollbar-width: thin; scrollbar-color: rgb(var(--k-hi) / .05) transparent; }
}
/* the old top fade (rows dimming under the glass bar) would lie over the first
   row now: the solid band already hides what scrolls under it */
body.page- .content:before { display: none; }
body.page- .twodo-new { left: 80px; }
/* the "You" panel */
.k-you-line { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.k-you-line span { color: var(--k-muted); }
@media (max-width: 760px) {
    body.page- .k-rail.app-rail { display: none; }
    body.page- .header { height: auto; }
    body.page- .k-topbar-row { padding: 10px 12px; }
    body.page- .content { left: 0; }
    body.page- .twodo-new { left: 10px; }
}

/* ---------------------------------------------------------------- rows */
/* a rounded dark-green card per 2do: the dot (the row's color), the title, then
   on the right its field chips, the state chip, the age, the attachment. */
/* (v2.css styles list rows with :not(.card-mode) and !important: same weight here) */
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c {
    margin: 0 max(var(--k-gut), (100% - var(--k-maxw)) / 2) 8px !important;
    padding: 0 22px 0 24px !important;
    border-radius: 14px !important;
    background: var(--k-row) !important;
    transition: background .15s ease;
}
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c:hover { background: var(--k-row-hover) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .line-inner { min-height: 60px !important; gap: 14px !important; }
body.page- :is(#twodos-holder, #k-row-preview) { overflow-x: hidden; }
/* under the rows: how many are hidden because they are marked for deletion, on the rows' edges */
body.page- #twodos-holder .twodo-line.k-del-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px max(var(--k-gut), (100% - var(--k-maxw)) / 2) 8px !important;
    padding: 0 24px !important;
    opacity: 1;
    color: var(--k-faint);
    font-size: 13px;
}
body.page- #twodos-holder.card-mode .twodo-line.k-del-note { grid-column: 1 / -1; margin: 6px 0 8px !important; padding: 0 4px !important; }
body.page- .k-del-note .ui-icon { width: 15px; height: 15px; flex: none; }
body.page- .k-del-note .show-del {
    padding: 0;
    border: 0;
    background: none;
    color: var(--k-muted);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
body.page- .k-del-note .show-del:hover { color: var(--k-text); }
/* the New list "+" beside the tabs: a pale outline, brighter under the pointer */
.k-tabs .ui-pill.k-new-list { border-color: var(--k-n47); color: var(--k-n73); }
.k-tabs .ui-pill.k-new-list:hover { border-color: var(--k-n68); background: var(--k-glass); color: var(--k-solid-ink); }
/* a row (or card) opens on a click anywhere: the hand says so; text fields keep their caret */
body.page- #twodos-holder .twodo-line.l-c { cursor: pointer; }
body.page- #twodos-holder .twodo-line.l-c input, body.page- #twodos-holder .twodo-line.l-c textarea { cursor: text; }
/* cards wear the same flat tints as rows (not v2.css's gradient) */
body.page- #twodos-holder.card-mode .twodo-line.l-c { background: var(--k-row) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c:hover { background: var(--k-row-hover) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-blue { background: color-mix(in srgb, #8c98b9 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-blue:hover { background: color-mix(in srgb, #8c98b9 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-red { background: color-mix(in srgb, #e86e55 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-red:hover { background: color-mix(in srgb, #e86e55 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-green { background: color-mix(in srgb, #6eaf73 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-green:hover { background: color-mix(in srgb, #6eaf73 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-yellow { background: color-mix(in srgb, #f5a546 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-yellow:hover { background: color-mix(in srgb, #f5a546 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-purple { background: color-mix(in srgb, #a07dc3 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-purple:hover { background: color-mix(in srgb, #a07dc3 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-black { background: color-mix(in srgb, var(--k-n72) 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-black:hover { background: color-mix(in srgb, var(--k-n72) 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-turquoise { background: color-mix(in srgb, #50b9c0 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-turquoise:hover { background: color-mix(in srgb, #50b9c0 22%, var(--k-row-hover)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-pink { background: color-mix(in srgb, #d787a0 16%, var(--k-row)) !important; }
body.page- #twodos-holder.card-mode .twodo-line.l-c.color-pink:hover { background: color-mix(in srgb, #d787a0 22%, var(--k-row-hover)) !important; }
/* cards: the rows' side margins (they line up with the composer), a bit wider,
   and a card's bottom line wraps instead of running out of it */
body.page- #twodos-holder.card-mode {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 4px max(var(--k-gut), (100% - var(--k-maxw)) / 2) 12px !important;
}
body.page- #twodos-holder.card-mode .twodo-line { min-width: 0; overflow: hidden; }
/* the bottom line: the chips side by side from the left, small, the age at the end */
body.page- #twodos-holder.card-mode .twodo-line .line-inner .row-interactions {
    flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 6px; min-width: 0;
}
body.page- #twodos-holder.card-mode .twodo-line .line-inner .row-interactions > * { min-width: 0; max-width: 100%; margin: 0 !important; }
body.page- #twodos-holder.card-mode .twodo-line .line-inner .row-interactions > .row-date { margin-left: auto !important; }
body.page- #twodos-holder.card-mode .twodo-line .ui-chip,
body.page- #twodos-holder.card-mode .twodo-line .ui-field { --h: var(--k-h-sm) !important; font-size: var(--k-t-sm) !important; }
body.page- #twodos-holder.card-mode .twodo-line .k-row-fields { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c .row-label .title {
    color: var(--k-n76);
    font: 600 14px/1.35 var(--k-font);
}
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-color .row-icon {
    width: 12px;
    height: 12px;
    margin-right: 16px;
}
/* a row with no color of its own: its dot in its state's color (the palette) */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:not([class*="color-"]) .row-icon { background: var(--k-n63b) !important; opacity: 1 !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-not-done:not([class*="color-"]) .row-icon { background: var(--k-seg-grey) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-in-progress:not([class*="color-"]) .row-icon { background: var(--k-seg-yellow) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-done:not([class*="color-"]) .row-icon { background: var(--k-seg-teal) !important; }
/* the row's chips are quiet: muted tints, soft text, the arrow zone a shade deeper */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .ui-chip {
    --tint: var(--k-n35);
    --ink: var(--k-n58);
    --grip-ink: var(--k-n42b);
    background: var(--k-n27);
    font-weight: 600;
}
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .ui-chip.c-green     { --tint: #323d26; --ink: #788a6d; --grip-ink: var(--k-n44b); background: #252f1d; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .ui-chip.c-yellow    { --tint: #3d3922; --ink: #8f8862; --grip-ink: #57533b; background: var(--k-n28); }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .ui-chip.c-turquoise { --tint: var(--k-n33); --ink: #6f8d91; --grip-ink: var(--k-n45b); background: var(--k-n27b); }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .ui-chip .ui-select-label.is-empty { opacity: 1; }
.k-row-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k-row-input { width: 9em; }
.k-row-input input::placeholder { color: var(--k-faint); }
.ui-chip.ui-select .ui-select-label.is-empty { opacity: .5; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-date {
    min-width: 3.6em;
    color: #71816a;
    font: 700 13px/1 var(--k-font);
    text-align: right;
}
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    border: 1.5px solid var(--k-n37);
    border-radius: 8px;
    color: var(--k-n48);
}
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-image:hover { color: #8f9677; border-color: var(--k-n48); }
/* delete: only on the row under the pointer */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions { opacity: 0; transition: opacity .15s ease; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line:hover .row-actions { opacity: 1; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions .del { display: inline-flex; color: var(--k-muted); cursor: pointer; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions .del:hover { color: var(--k-danger); }

/* the empty list: a quiet card like the rows (style.css paints it pink with a 3px corner) */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.no-twodos {
    width: auto;
    margin: 0 max(var(--k-gut), (100% - var(--k-maxw)) / 2) 8px;
    padding: 18px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--k-row);
    color: var(--k-n63);
    font: 500 13.5px/1.5 var(--k-font);
    text-align: center;
}

/* the theme's switches on rows: no travelling light, done rows not dimmed */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-in-progress.no-sweep::before { display: none; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-done.keep-done .row-label .title { opacity: 1 !important; }

/* ---------------------------------------------------------------- the list settings panel (kit) */
.k-settings.ui-panel.ui-sheet { width: min(900px, 100%); height: min(660px, 100%); }
/* the rows at the top show the settings; they are pictures, not buttons */
#k-row-preview { display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#k-row-preview .twodo-line { margin: 0 !important; }
.k-settings .ui-panel-head h2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 3px;
    background: var(--list-ink, var(--k-lime));
    vertical-align: 1px;
}
.k-set-section { padding: 4px 0 22px; }
.k-set-section + .k-set-section { border-top: 1px solid rgb(var(--k-hi) / .06); padding-top: 20px; }
.k-set-head { margin-bottom: 12px; }
.k-set-head h3 { margin: 0 0 4px; color: var(--k-n86); font: 700 15px/1.3 var(--k-font); letter-spacing: -.01em; }
.k-set-head p { margin: 0; color: var(--k-n63); font: 500 12.5px/1.5 var(--k-font); }
.k-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgb(var(--k-hi) / .05); }
.k-set-row:first-of-type { border-top: 0; }
.k-set-label { flex: 1 1 auto; min-width: 0; color: var(--k-n86); font: 600 13px/1.4 var(--k-font); }
.k-set-label small { display: block; color: var(--k-n53); font: 500 11.5px/1.4 var(--k-font); }
.k-set-control { flex: none; display: flex; align-items: center; gap: 8px; }
/* swatches: round, a ring on the one picked */
.k-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.k-swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c);
    cursor: pointer;
    transition: transform .18s var(--k-spring), box-shadow .15s ease;
}
.k-swatch:hover { transform: scale(1.1); }
.k-swatch.is-on { box-shadow: 0 0 0 2px var(--k-panel), 0 0 0 4px var(--c); }
.k-swatch-none { background: none; box-shadow: inset 0 0 0 1.5px var(--k-outline); position: relative; }
.k-swatch-none::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--k-outline); transform: translate(-50%, -50%) rotate(-45deg); }
.k-swatch-none.is-on { box-shadow: inset 0 0 0 1.5px var(--k-outline), 0 0 0 2px var(--k-panel), 0 0 0 4px var(--k-outline); }
/* fields: a card each */
.k-set-new { display: flex; flex-wrap: wrap; gap: 8px; }
.k-set-new .ui-field { flex: 1 1 200px; }
.k-set-field { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: var(--k-row); }
.k-set-field-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k-set-field-head b { color: var(--k-n91); font: 700 14px/1.2 var(--k-font); }
.k-set-type { padding: 2px 7px; border-radius: 6px; background: rgb(var(--k-hi) / .05); color: var(--k-n53); font: 700 10.5px/1 var(--k-font); text-transform: uppercase; letter-spacing: .06em; }
.k-set-field-head .k-grow { flex: 1; }
.k-set-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.k-set-options .ui-field { width: 11em; }
.k-set-opt-label { margin-right: 4px; color: var(--k-n53); font: italic 700 var(--k-t-sm)/1 var(--k-font); }
.k-settings .k-share-row .ui-pill { flex: none; }
.k-settings .k-share-del { opacity: 1; }
@media (max-width: 760px) {
    .k-set-row { flex-wrap: wrap; }
    .k-set-control { flex: 1 1 100%; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- colored rows */
/* a row with a color of its own wears it, a tint over the card; the dot is the state's
   color on every row (v2.css painted the dot with the item's color) */
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-blue { background: color-mix(in srgb, #8c98b9 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-blue:hover { background: color-mix(in srgb, #8c98b9 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-red { background: color-mix(in srgb, #e86e55 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-red:hover { background: color-mix(in srgb, #e86e55 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-green { background: color-mix(in srgb, #6eaf73 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-green:hover { background: color-mix(in srgb, #6eaf73 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-yellow { background: color-mix(in srgb, #f5a546 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-yellow:hover { background: color-mix(in srgb, #f5a546 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-purple { background: color-mix(in srgb, #a07dc3 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-purple:hover { background: color-mix(in srgb, #a07dc3 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-black { background: color-mix(in srgb, var(--k-n72) 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-black:hover { background: color-mix(in srgb, var(--k-n72) 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-turquoise { background: color-mix(in srgb, #50b9c0 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-turquoise:hover { background: color-mix(in srgb, #50b9c0 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-pink { background: color-mix(in srgb, #d787a0 16%, var(--k-row)) !important; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c.color-pink:hover { background: color-mix(in srgb, #d787a0 22%, var(--k-row-hover)) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c .row-label .row-color .row-icon { background: var(--k-n63b) !important; opacity: 1 !important; box-shadow: none !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-not-done .row-label .row-color .row-icon { background: var(--k-seg-grey) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-in-progress .row-label .row-color .row-icon { background: var(--k-seg-yellow) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-done .row-label .row-color .row-icon { background: var(--k-seg-teal) !important; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-color .row-select { display: none !important; }

/* ---------------------------------------------------------------- swipes (touch) */
/* the row slides over its actions (twodos.js): to the right it uncovers Done, to the
   left Delete; past the arming point the action runs when the finger lifts */
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c { touch-action: pan-y; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .line-inner { position: relative !important; z-index: 1 !important; transition: transform .22s var(--k-ease); }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.is-swiping .line-inner { transition: none; }
/* the bands under the row content, uncovered as it slides: only there while a row is
   sliding or open (a padding kept a sliver of them showing on every row once touched) */
.k-swipe-under { display: none; position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.twodo-line.l-c.is-swiping .k-swipe-under, .twodo-line.l-c.is-open .k-swipe-under, .twodo-line.l-c.is-easing .k-swipe-under { display: block; }
.k-swipe {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: var(--swipe, 0px);
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    font: 700 11.5px/1 var(--k-font);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    opacity: .9;
}
.k-swipe > * { flex: none; }
.k-swipe .ui-icon { width: 15px; height: 15px; }
/* the kit's colors, deepened: a dark mint with mint ink, a dark red with its ink */
.k-swipe-l { left: 0; justify-content: flex-start; padding-left: 14px; background: color-mix(in srgb, var(--k-seg-teal) 38%, var(--k-n20)); color: #bfe6cf; }
.k-swipe-l > *:first-child { margin-left: 0; }
.k-swipe-r { right: 0; justify-content: flex-end; padding-right: 14px; background: color-mix(in srgb, var(--k-danger) 42%, var(--k-n18)); color: #f6c3b8; cursor: pointer; }
.twodo-line.l-c.swipe-armed .k-swipe-l { background: color-mix(in srgb, var(--k-seg-teal) 60%, var(--k-n20)); color: var(--k-n15); }
.twodo-line.l-c.swipe-armed .k-swipe-r, .twodo-line.l-c.is-open .k-swipe-r { background: color-mix(in srgb, var(--k-danger) 70%, var(--k-n18)); color: #fff1ec; }
/* an open row: its Delete button waits for a tap */
.twodo-line.l-c.is-open .k-swipe-r { font-size: 12.5px; }

/* in progress: a thin light travels left to right along the row's bottom edge, slowly */
/* (cards too: the light runs along the card's bottom, inside its rounded corners) */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c { overflow: hidden; }
body.page- #twodos-holder.card-mode .twodo-line.l-c { position: relative; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-in-progress::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--k-seg-yellow) 50%, transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    opacity: .5;
    pointer-events: none;
    animation: k-sweep 2.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes k-sweep { from { background-position: -45% 0; } to { background-position: 145% 0; } }
@media (prefers-reduced-motion: reduce) {
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c.state-in-progress::before { animation: none; }
}

/* ---------------------------------------------------------------- the app's composer */
.k-composer .k-new-form { display: contents; }   /* the form around the text: no box of its own */
/* the neutral grey panel at the bottom, right of the rail (the shapes are .k-composer above) */
body.page- .k-app-composer {
    position: fixed;
    left: calc(64px + var(--k-side));   /* the list's left edge: 62px + its 2px scrollbar */
    right: calc(var(--k-panel-w) + var(--k-side));
    bottom: 34px;           /* clear of the footer line (Logout, IN/OUT, …) */
    z-index: 4;
}
body.page- .k-app-composer .k-composer { box-shadow: 0 18px 50px rgb(var(--k-shadow-rgb) / calc(.45 * var(--k-shadow-k))); transition: box-shadow .3s var(--k-ease); }
/* rows passing behind it: a deeper shadow above, so the panel reads over them */
body.page- .k-app-composer.is-over .k-composer { box-shadow: 0 -22px 44px rgb(var(--k-shadow-rgb) / calc(.75 * var(--k-shadow-k))),
                                                              0 18px 50px rgb(var(--k-shadow-rgb) / calc(.6 * var(--k-shadow-k))); }
/* compact: the kit's sizes, a notch down, for this panel only */
body.page- .k-app-composer {
    --k-h-sm: 24px;
    --k-h-lg: 34px;
    --k-t-sm: 12px;
    --k-t-lg: 14px;
}
body.page- .k-app-composer .k-composer { border-radius: 14px; }
body.page- .k-app-composer .k-filters { padding: 8px 16px; gap: 6px; font-size: 13px; }
body.page- .k-app-composer .k-line { padding: 8px; gap: 10px; border-radius: 11px; }
body.page- .k-app-composer .k-line-start, body.page- .k-app-composer .k-line-end { gap: 8px; }
body.page- .k-app-composer .k-new-text { font-size: 15px; }
body.page- .k-app-composer .ui-select.ui-wide { min-width: 9em; }
.k-composer .k-user-fields, .k-composer .k-meta, .k-composer .k-line-start, .k-composer .k-line-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.k-composer .k-line-start, .k-composer .k-line-end { gap: 14px; }
.k-composer .k-new-text { flex: 1; min-width: 180px; font-size: 18px; }
/* the color picker shows the color as a dot (its label stays for screen readers) */
.k-pick-color .ui-select { gap: 6px; padding: 0 12px; }
.k-pick-color .ui-select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.k-pick-color .ui-select::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--k-n79);
}
.k-pick-color.c-blue .ui-select::before      { background: var(--k-blue-text); }
.k-pick-color.c-red .ui-select::before       { background: var(--k-red-text); }
.k-pick-color.c-green .ui-select::before     { background: var(--k-green-text); }
.k-pick-color.c-yellow .ui-select::before    { background: var(--k-yellow-text); }
.k-pick-color.c-purple .ui-select::before    { background: var(--k-purple-text); }
.k-pick-color.c-black .ui-select::before     { background: var(--k-black-text); }
.k-pick-color.c-turquoise .ui-select::before { background: var(--k-turquoise-text); }
.k-pick-color.c-pink .ui-select::before      { background: var(--k-pink-text); }
/* files waiting to go with the next 2do: kit chips on the first line (a picture shows
   itself in its chip); files dragged over the composer light it like the kit's drop zone */
.k-composer .k-attached { display: contents; }
.k-composer .k-attach-input { display: none !important; }   /* (older styles show every input, hidden or not) */
.k-composer .k-attached .ui-chip-label { gap: 6px; }
.k-composer .k-attached .ui-chip-label span { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.k-composer .k-attached .k-att-thumb { flex: none; width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
body.page- .k-app-composer.is-drop .k-composer {
    outline: 2px dashed var(--k-teal);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--k-teal) 8%, var(--k-panel));
}
/* the 2dos picked with their dot: a small bar just above the composer, same edges */
body.page- .k-selbar {
    position: fixed;
    left: calc(64px + var(--k-side));
    right: calc(var(--k-panel-w) + var(--k-side));
    bottom: calc(34px + var(--k-composer-h, 110px) + 8px);
    z-index: 4;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 16px;
    border-radius: 12px;
    background: var(--k-panel);
    color: var(--k-muted);
    font-size: 13px;
    --k-h-sm: 24px;
    --k-t-sm: 12px;
}
body.page- .k-selbar.is-on { display: flex; }
body.page- .k-selbar b { color: var(--k-text); font-weight: 600; }
body.page- .k-selbar-text { flex: 1; min-width: 0; }
@media (max-width: 760px) {
    body.page- .k-selbar { left: var(--k-gut); right: var(--k-gut); bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--k-composer-h, 130px) + 6px); }
}
/* the list must keep room above the composer (its height is measured: --k-composer-h, twodos.js) */
body.page- .content { padding-bottom: calc(var(--k-composer-h, 110px) + 60px); }
@media (max-width: 760px) {
    body.page- { --k-gut: 12px; }
    body.page- .k-app-composer { left: var(--k-gut); right: var(--k-gut); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- side panels (Filters, Share, View) */
/* the list makes room for them (v2.css: .in-filtering .content), so what a
   filter does shows live beside the panel; the composer makes room too */
body.page-.in-filtering .content { right: 300px; }
/* like the rail on the left: attached to the edge, from the top bar down, a faint
   line on its side, a darker see-through background (the page gradient shows) */
body.page- .filtering {
    top: var(--k-bar-h);
    bottom: 0;
    left: auto;         /* (v2.css pins it to the left edge under 1150px: every panel showed at once) */
    right: -320px;
    width: 300px;
    padding: 18px 0;
    border: 0;
    border-left: 1px solid rgb(var(--k-hi) / .025);
    border-radius: 0;
    background: rgb(var(--k-lo) / .28);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 6;
    color: var(--k-text);
    font-family: var(--k-font);
}
body.page- .filtering.active { right: 0; }
/* the panel's name */
body.page- #view-filters .filtering-inner:before,
body.page- #edit-view .filtering-inner:before {
    margin: 2px 0 18px;
    color: var(--k-n86);
    font: 700 18px/1.2 var(--k-font);
    letter-spacing: -.01em;
}
/* section names: small and quiet */
body.page- .filtering .filtering-inner .f-box .f-label,
body.page- .filtering .fnew-inner .f-label {
    margin-bottom: 8px;
    color: var(--k-n53);
    font: 700 11px/1 var(--k-font);
    text-transform: uppercase;
    letter-spacing: .08em;
}
/* a section with something picked: its count, in lime */
body.page- .filtering .filtering-inner .f-box.active .f-label { color: #9aa78a; }
body.page- .filtering .filtering-inner .f-box.active .f-label:after {
    background: var(--k-lime-soft);
    color: var(--k-lime);
}
/* the filter buttons: kit chips, outlined when off, lime when on
   (the colors section keeps its own colored buttons) */
body.page- .filtering .filtering-inner .f-box:not(.b-colors) .twodo-btn {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 0 6px 6px 0;
    padding: 0 11px;
    border: 0;
    border-radius: calc(26px * var(--k-round));
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--k-n29);
    color: var(--k-n63);
    font: 600 12.5px/1 var(--k-font);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .18s var(--k-spring);
}
body.page- .filtering .filtering-inner .f-box:not(.b-colors) .twodo-btn:hover {
    box-shadow: inset 0 0 0 1.5px var(--k-n36);
    color: var(--k-text);
    transform: translateY(-1px);
}
body.page- .filtering .filtering-inner .f-box:not(.b-colors) .twodo-btn.active {
    background: var(--k-lime);
    box-shadow: none;
    color: var(--k-on-lime);
}
/* the "+" that adds a value to a field */
body.page- .filtering .filtering-inner .f-box .twodo-btn.bb-add { border: 1.5px dashed var(--k-n34); box-shadow: none; color: var(--k-n52); }
/* creating a field: the kit's solid boxes */
body.page- .filtering .fnew-inner { padding: 18px 18px 0; border-top: 1px solid rgb(var(--k-hi) / .05); }
body.page- .filtering .fnew-inner .dialog-with-input { display: flex; gap: 6px; margin-top: 8px; }
body.page- .filtering .fnew-inner .twodo-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--k-solid);
    color: var(--k-solid-ink);
    font: 500 13px/1 var(--k-font);
    outline: none;
}
body.page- .filtering .fnew-inner .twodo-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--k-solid);
    color: var(--k-solid-ink);
    font: 700 12.5px/30px var(--k-font);
}
body.page- .filtering .fnew-inner .twodo-btn:hover { background: var(--k-solid-hover); }
/* the close button: a quiet round outline */
body.page- #close-filtering { border-color: rgb(var(--k-hi) / .08); }
/* the side panels scroll, their close stays: pinned where it sits, at the panel's
   top-right corner (phones: a bigger round one under the band, further down) */
body.page- #close-filtering { position: fixed; top: calc(var(--k-bar-h) + 18px); right: 16px; z-index: 7; }
body.page- .filtering:not(.active) #close-filtering { display: none; }

/* the Filters button with values picked: lime, and a bubble with how many */
.ui-pill.is-filtering { position: relative; border-color: var(--k-lime-line); color: var(--k-lime); }
/* the Working button has its bubble while it isn't filtering too: without this, the
   bubble sat on the next positioned box instead (the band's top-left corner) */
.ui-pill.k-agents-menu { position: relative; }
.ui-pill.is-filtering:hover { border-color: var(--k-lime); color: var(--k-lime); }
.ui-pill .k-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--k-lime);
    box-shadow: 0 0 0 2px var(--k-app-bar);
    color: var(--k-on-lime);
    font: 800 10px/16px var(--k-font);
    font-style: normal;
    text-align: center;
    animation: ui-digit .22s var(--k-spring);
}

/* the Filters panel (render_filters_panel): an intro, then one group per field,
   its values as outlined chips with their row count, lime when picked */
.k-filters { padding: 0 18px 24px; color: var(--k-text); font-family: var(--k-font); }
.k-f-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 40px 6px 0; }
.k-f-top h2 { margin: 0; color: var(--k-n86); font: 700 18px/1.2 var(--k-font); letter-spacing: -.01em; }
.k-f-intro { margin: 0 0 20px; color: var(--k-n53); font: 500 12.5px/1.45 var(--k-font); }
.k-f-group { margin-bottom: 20px; }
.k-f-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.k-f-head span { color: var(--k-n63); font: italic 700 var(--k-t-sm)/1 var(--k-font); }
.k-f-group.is-active .k-f-head span { color: var(--k-lime); }
.k-f-clear { padding: 0; border: 0; background: none; color: var(--k-n53); font: 600 11.5px/1 var(--k-font); cursor: pointer; }
.k-f-clear:hover { color: var(--k-text); }
.k-f-values { display: flex; flex-wrap: wrap; gap: 6px; }
.k-f-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: calc(28px * var(--k-round));
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--k-n29);
    color: var(--k-n68);
    font: 700 12.5px/1 var(--k-font);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .18s var(--k-spring);
}
.k-f-value i { color: var(--k-n47); font: 600 11px/1 var(--k-font); font-style: normal; }
.k-f-value:hover { box-shadow: inset 0 0 0 1.5px var(--k-n38b); color: var(--k-text); transform: translateY(-1px); }
.k-f-value:active { transform: scale(.96); }
.k-f-value.is-empty { color: var(--k-n47); }
.k-f-value.is-on { background: var(--k-lime); box-shadow: none; color: var(--k-on-lime); animation: ui-seg-on .32s var(--k-spring); }
.k-f-value.is-on i { color: rgba(22, 35, 14, .6); }
.k-f-value.k-f-add { padding: 0 8px; box-shadow: none; border: 1.5px dashed var(--k-n34); color: var(--k-n52); }
.k-f-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.k-f-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c);
    cursor: pointer;
    transition: opacity .15s ease, transform .18s var(--k-spring), box-shadow .15s ease;
}
.k-f-swatch:hover { transform: scale(1.1); }
.k-f-group.is-active .k-f-swatch:not(.is-on) { opacity: .3; }
.k-f-swatch.is-on { box-shadow: 0 0 0 2px var(--k-n15), 0 0 0 3.5px var(--c); }
.k-f-foot { margin: 6px 0 22px; }
.k-f-more { padding-top: 16px; border-top: 1px solid rgb(var(--k-hi) / .05); }
.k-f-more summary { margin-bottom: 16px; color: var(--k-n63); font: italic 700 var(--k-t-sm)/1 var(--k-font); cursor: pointer; list-style: none; }
.k-f-more summary::-webkit-details-marker { display: none; }
.k-f-more summary::before { content: "▸ "; font-style: normal; }
.k-f-more[open] summary::before { content: "▾ "; }
.k-f-more summary span { color: var(--k-n47); font-weight: 500; }

/* ---------------------------------------------------------------- the big dialog (settings, item editor) */
/* new_ui_notification's large dialogs (.noti-full): one kit look for them.
   Only the look: the markup and what every part does stay as they are. The item
   editor (.noti-edits) keeps its own layout from v2.css; it only shares the
   backdrop over the whole page. */
/* every dialog (the item editor too) above its backdrop, both above the app */
body.page- .notification-content { z-index: 950 !important; }
/* the old custom selects (module, by months, fields...) drop their list on the body at
   z-index 2 (style.css): under this dialog, so nothing could be picked. Above it now. */
body.page- #current-options.options { z-index: 960; cursor: pointer; }
body.page- .notification-blocker {
    z-index: 940 !important;            /* over the top bar, the rail and the composer */
    background: var(--k-scrim) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.page- .notification-content.noti-full:not(.noti-edits) {
    z-index: 950 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(880px, calc(100% - 48px)) !important;
    max-height: min(78vh, 760px);
    background: none !important;
    box-shadow: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification {
    display: flex;
    flex-direction: column;
    max-height: min(78vh, 760px);
    overflow: hidden;
    border: 1px solid rgb(var(--k-hi) / .06) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--k-panel) 97%, transparent) !important;
    box-shadow: 0 30px 80px rgb(var(--k-shadow-rgb) / calc(.6 * var(--k-shadow-k))) !important;
    color: var(--k-text);
    font-family: var(--k-font);
}
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .inner-padding {
    flex: 1;
    overflow: auto;
    padding: 18px 20px !important;
    background: none !important;
}
/* the title, inside the box */
body.page- .notification-content.noti-full:not(.noti-edits) .notification-title {
    position: static !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    color: var(--k-n86) !important;
    font: 700 18px/1.2 var(--k-font) !important;
    letter-spacing: -.01em;
    text-transform: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .notification-title:before { display: none !important; }
/* tabs: kit outline chips, the open one lime */
body.page- .notification-content.noti-full:not(.noti-edits) .edit-tabs-holder,
body.page- .notification-content.noti-full:not(.noti-edits) .main-tab:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .edit-tabs {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: 28px;
    margin: 0 6px 0 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: calc(28px * var(--k-round)) !important;
    background: none !important;
    box-shadow: inset 0 0 0 1.5px var(--k-n29);
    color: var(--k-n63) !important;
    font: 600 12.5px/1 var(--k-font) !important;
    text-transform: capitalize;
    opacity: 1 !important;
    cursor: pointer;
}
body.page- .notification-content.noti-full:not(.noti-edits) .edit-tabs:hover { box-shadow: inset 0 0 0 1.5px var(--k-n36); color: var(--k-text) !important; }
body.page- .notification-content.noti-full:not(.noti-edits) .edit-tabs.active {
    background: var(--k-lime) !important;
    box-shadow: none;
    color: var(--k-on-lime) !important;
}
/* section titles, side notes, table headers */
body.page- .notification-content.noti-full:not(.noti-edits) .box-field-title {
    margin: 0 0 10px !important;
    color: var(--k-n86) !important;
    font: 700 16px/1.3 var(--k-font) !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .col5:has(> img) { display: none; }   /* the old decorative pictures */
body.page- .notification-content.noti-full:not(.noti-edits) .left-column,
body.page- .notification-content.noti-full:not(.noti-edits) .left-column p {
    color: var(--k-n63) !important;
    font: 500 13px/1.55 var(--k-font) !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .header-labels .option-label,
body.page- .notification-content.noti-full:not(.noti-edits) label {
    color: var(--k-n53) !important;
    font: 700 11px/1.4 var(--k-font) !important;
    text-transform: uppercase;
    letter-spacing: .07em;
}
body.page- .notification-content.noti-full:not(.noti-edits) .header-labels { border-bottom: 1px solid rgb(var(--k-hi) / .06) !important; }
/* the white boxes and tables: dark like the rows of the list */
body.page- .notification-content.noti-full:not(.noti-edits) .right-column,
body.page- .notification-content.noti-full:not(.noti-edits) .f-box,
body.page- .notification-content.noti-full:not(.noti-edits) .fnew-inner,
body.page- .notification-content.noti-full:not(.noti-edits) .dialog-with-input,
body.page- .notification-content.noti-full:not(.noti-edits) .settings-list {
    border-color: rgb(var(--k-hi) / .06) !important;
    background: none !important;
    box-shadow: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .edit-rows {
    margin: 0 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--k-row) !important;
}
/* fields: the kit's solid boxes */
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification input:not([type="checkbox"]):not([type="radio"]),
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification textarea,
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .cus-select {
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--k-solid) !important;
    box-shadow: none !important;
    color: var(--k-solid-ink) !important;
    font: 500 13px/1.3 var(--k-font) !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .cus-select input { background: none !important; }
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification input::placeholder,
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification textarea::placeholder { color: var(--k-solid-faint) !important; }
/* buttons inside: solid boxes; the one that creates something is lime */
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .twodo-btn {
    border: 0 !important;
    border-radius: calc(30px * var(--k-round)) !important;
    background: var(--k-solid) !important;
    box-shadow: none !important;
    color: var(--k-solid-ink) !important;
    font: 700 12.5px/1 var(--k-font) !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .twodo-btn:hover { background: var(--k-solid-hover) !important; }
body.page- .notification-content.noti-full:not(.noti-edits) .dialog-with-input .twodo-btn { background: var(--k-lime) !important; color: var(--k-on-lime) !important; }
/* the bottom bar: Close (outline) and OK (lime), inside the box */
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .actions {
    position: static !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 18px !important;
    border-top: 1px solid rgb(var(--k-hi) / .06);
    background: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .notification-center .ui-notification .actions .notifications-btn {
    position: static !important;
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: calc(32px * var(--k-round)) !important;
    background: none !important;
    box-shadow: inset 0 0 0 1.5px var(--k-outline) !important;
    color: var(--k-n63) !important;
    font: 700 13px/1 var(--k-font) !important;
    cursor: pointer;
}
body.page- .notification-content.noti-full:not(.noti-edits) .notification-center .ui-notification .actions .notifications-btn:hover { color: var(--k-text) !important; }
body.page- .notification-content.noti-full:not(.noti-edits) .notification-center .ui-notification .actions .btn-ok {
    background: var(--k-lime) !important;
    box-shadow: none !important;
    color: var(--k-on-lime) !important;
}
/* leftovers of the old dialog look: the green panel behind the tabs' content,
   the white box around a form, the light line before each row's control */
body.page- .notification-content.noti-full:not(.noti-edits) .tab-holder,
body.page- .notification-content.noti-full:not(.noti-edits) .new-fields-holder {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
body.page- .notification-content.noti-full:not(.noti-edits) .edit-rows > .col { border: 0 !important; }

/* ---------------------------------------------------------------- calmer state on rows */
/* the state chip is neutral like the other chips; the state shows as a small dot
   in its color (no colored block repeating down the list) */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip,
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-green,
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-yellow,
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-turquoise,
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-black {
    --tint: var(--k-n29);
    --ink: var(--k-n64);
    --grip-ink: var(--k-n44);
    background: var(--k-n25);
}
.k-row-state .ui-chip .ui-chip-label::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot, var(--k-n63b));
}
/* under the pointer, a row's state chip turns into the states side by side (the 2do
   panel's stacked switch, small), laid over the chip from its right edge; one click
   sets the state. No hover on a phone: the chip and its list stay. */
body.page- .k-row-state { position: relative; }
body.page- .k-row-state .k-row-quick {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    display: none;
    transform: translateY(-50%);
    --k-seg-surface: var(--k-row-hover);
}
@media (hover: hover) {
    body.page- #twodos-holder .k-row-state:hover .k-row-quick { display: block; }
    body.page- #twodos-holder .k-row-state:hover > .ui-chip { visibility: hidden; }
}
.k-row-state .ui-chip.c-black { --dot: var(--k-seg-grey); }
.k-row-state .ui-chip.c-yellow { --dot: var(--k-seg-yellow); }
.k-row-state .ui-chip.c-green { --dot: var(--k-seg-green); }
.k-row-state .ui-chip.c-turquoise { --dot: var(--k-seg-turquoise); }

/* ---------------------------------------------------------------- motion */
/* rows ease in (a short stagger for the first ones), hovers fade, panels glide,
   dialogs pop, the composer's line glows softly while you type */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c { animation: k-row-in .3s var(--k-ease) both; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(2) { animation-delay: .02s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(3) { animation-delay: .04s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(4) { animation-delay: .06s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(5) { animation-delay: .08s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(6) { animation-delay: .1s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(7) { animation-delay: .12s; }
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c:nth-child(n+8) { animation-delay: .14s; }
/* a row that was already on screen when the list is drawn again stays still (twodos.js build_ui) */
body.page- #twodos-holder .twodo-line.l-c.k-seen { animation: none; }
body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c { transition: background .25s var(--k-ease) !important; }
body.page- .filtering { transition: right .42s var(--k-ease) !important; }
body.page- .content, body.page- .k-app-composer { transition: right .42s var(--k-ease); }
body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification { animation: ui-pop .26s var(--k-spring); }
@keyframes k-row-in { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c, body.page- .notification-content .ui-notification { animation: none !important; }
    body.page- .filtering, body.page- .content, body.page- .k-app-composer { transition: none !important; }
}

/* the live preview of the 2do being typed: faded, a dashed edge, not clickable */
body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.k-preview {
    opacity: .55;
    outline: 1px dashed rgb(var(--k-hi) / .14);
    outline-offset: -1px;
    pointer-events: none;
    animation: none;
}

/* the item editor (.noti-edits): its own look (v2.css), centered and never taller
   than the window: the content scrolls inside, Close stays in view */
body.page- .notification-content.noti-edits {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(900px, calc(100% - 48px)) !important;
    max-height: 86vh;
}
body.page- .notification-content.noti-edits .ui-notification {
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    overflow: hidden;
}
body.page- .notification-content.noti-edits .ui-notification .inner-padding { flex: 1; min-height: 0; overflow: auto; }
body.page- .notification-content.noti-edits .ui-notification .actions { flex: none; }

/* ---------------------------------------------------------------- the item editor's look (kit) */
/* the same family as the other dialogs: dark neutral panel, kit buttons and chips,
   lime where it was orange. Its layout stays (see above). */
body.page- .blocker-noti-edits { background: var(--k-scrim) !important; }
body.page- .notification-content.noti-edits .ui-notification {
    border: 1px solid rgb(var(--k-hi) / .06) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--k-panel) 97%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--k-text);
    font-family: var(--k-font);
}
/* the list's name over the title, its dot in lime */
body.page- .notification-content.noti-edits .notification-title { color: var(--k-n53) !important; font-family: var(--k-font) !important; }
body.page- .notification-content.noti-edits .notification-title:before { border-radius: 3px !important; background: var(--k-lime) !important; }
/* the title box */
body.page- .notification-content.noti-edits .notification-center .main-input textarea {
    border-radius: calc(44px * var(--k-round)) !important;
    background: var(--k-solid-soft) !important;
    color: var(--k-n86) !important;
    font-family: var(--k-font) !important;
}
body.page- .notification-content.noti-edits .notification-center .main-input textarea:hover { background: var(--k-solid) !important; }
body.page- .notification-content.noti-edits .notification-center .main-input textarea:focus {
    background: var(--k-solid) !important;
    border-color: rgb(var(--k-hi) / .08) !important;
}
/* previous / next: kit outline buttons */
body.page- .notification-content.noti-edits .abs-menu .items {
    border: 0 !important;
    border-radius: calc(28px * var(--k-round)) !important;
    box-shadow: inset 0 0 0 1.5px var(--k-outline);
    color: var(--k-n63) !important;
}
body.page- .notification-content.noti-edits .abs-menu .items:hover { background: var(--k-glass) !important; color: var(--k-text) !important; }
/* tabs: outline chips, the open one lime */
body.page- .notification-content.noti-edits .edit-tabs-holder { border-bottom: 1px solid rgb(var(--k-hi) / .06) !important; }
body.page- .notification-content.noti-edits .edit-tabs {
    border-radius: calc(28px * var(--k-round)) !important;
    background: none !important;
    box-shadow: inset 0 0 0 1.5px var(--k-n29);
    color: var(--k-n63) !important;
    font-family: var(--k-font) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
body.page- .notification-content.noti-edits .edit-tabs:hover { box-shadow: inset 0 0 0 1.5px var(--k-n36); color: var(--k-text) !important; }
body.page- .notification-content.noti-edits .edit-tabs.active { background: var(--k-lime) !important; box-shadow: none; color: var(--k-on-lime) !important; }
/* section labels: small and quiet */
body.page- .notification-content.noti-edits .notification-center .box-field-title {
    color: var(--k-n53) !important;
    font: 700 11px/1.4 var(--k-font) !important;
    letter-spacing: .08em !important;
}
/* the fields' panel and its rows */
body.page- .notification-content.noti-edits .ui-notification .edits {
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--k-row) !important;
}
body.page- .notification-content.noti-edits .ui-notification .edit-rows { border-bottom-color: rgb(var(--k-hi) / .05) !important; }
body.page- .notification-content.noti-edits .ui-notification .edit-rows .title { color: var(--k-n63) !important; }
body.page- .notification-content.noti-edits .ui-notification .edit-rows textarea {
    border-radius: calc(34px * var(--k-round)) !important;
    background: var(--k-solid) !important;
    color: var(--k-solid-ink) !important;
}
/* chips: outlined; picked ones lime, states in the switch's colors */
body.page- .notification-content.noti-edits .edit-rows .chips .chip {
    border: 0 !important;
    border-radius: calc(28px * var(--k-round)) !important;
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--k-n29);
    color: var(--k-n63);
    font-family: var(--k-font);
}
body.page- .notification-content.noti-edits .edit-rows .chips .chip:hover { box-shadow: inset 0 0 0 1.5px var(--k-n36); color: var(--k-text); }
body.page- .notification-content.noti-edits .edit-rows .chips .chip.active { background: var(--k-lime); box-shadow: none; color: var(--k-on-lime); }
body.page- .notification-content.noti-edits .edit-rows .chips .chip-not-done.active { background: var(--k-seg-yellow); color: var(--k-seg-ink); }
body.page- .notification-content.noti-edits .edit-rows .chips .chip-in-progress.active { background: var(--k-seg-green); color: var(--k-seg-ink); }
body.page- .notification-content.noti-edits .edit-rows .chips .chip-done.active { background: var(--k-seg-teal); color: var(--k-seg-ink); }
/* the colors keep their color swatches */
body.page- .notification-content.noti-edits .edit-rows .chips.chips-colors .chip { box-shadow: none; }
/* add a file: a dashed kit button */
body.page- .notification-content.noti-edits #ufile-label {
    border: 1.5px dashed rgb(var(--k-hi) / .14) !important;
    border-radius: calc(28px * var(--k-round)) !important;
    color: var(--k-n63) !important;
}
/* the conversation: the comment box and its buttons */
body.page- .notification-content.noti-edits .item-thread .act-input {
    border: 0 !important;
    border-radius: calc(44px * var(--k-round)) !important;
    background: var(--k-solid) !important;
    color: var(--k-solid-ink) !important;
    font-family: var(--k-font) !important;
}
body.page- .notification-content.noti-edits .item-thread .act-reply .twodo-btn {
    border: 0 !important;
    border-radius: calc(34px * var(--k-round)) !important;
    background: var(--k-lime) !important;
    color: var(--k-on-lime) !important;
    font-family: var(--k-font) !important;
}
body.page- .notification-content.noti-edits .item-thread .act-reply .twodo-btn.act-ask {
    background: none !important;
    box-shadow: inset 0 0 0 1.5px var(--k-outline);
    color: var(--k-n63) !important;
}
body.page- .notification-content.noti-edits .item-thread .act-reply .twodo-btn.act-ask:hover { color: var(--k-text) !important; }
/* Close: a kit outline button */
body.page- .notification-content.noti-edits .notification-center .ui-notification .actions .notifications-btn {
    border: 0 !important;
    border-radius: calc(32px * var(--k-round)) !important;
    box-shadow: inset 0 0 0 1.5px var(--k-outline) !important;
    color: var(--k-n63) !important;
    font-family: var(--k-font) !important;
}
body.page- .notification-content.noti-edits .notification-center .ui-notification .actions .notifications-btn:hover { color: var(--k-text) !important; }

/* ---------------------------------------------------------------- the item editor (kit layout) */
/* the frame's own title and Close bar give way to the editor's header (✕, Esc
   or a click outside close it) */
body.page- .notification-content.noti-edits .notification-title,
body.page- .notification-content.noti-edits .ui-notification .actions { display: none !important; }
body.page- .notification-content.noti-edits .ui-notification .inner-padding { padding: 18px 22px 22px !important; }
/* ---------------------------------------------------------------- the item editor (a kit panel) */
.k-ed.ui-panel { text-align: left; color: var(--k-text); font: 500 var(--k-t-md)/1.5 var(--k-font); }
.k-ed-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-n73); }
.k-ed-dot.c-blue { background: var(--k-blue-text); }
.k-ed-dot.c-red { background: var(--k-red-text); }
.k-ed-dot.c-green { background: var(--k-green-text); }
.k-ed-dot.c-yellow { background: var(--k-yellow-text); }
.k-ed-dot.c-purple { background: var(--k-purple-text); }
.k-ed-dot.c-black { background: var(--k-black-text); }
.k-ed-dot.c-turquoise { background: var(--k-turquoise-text); }
.k-ed-dot.c-pink { background: var(--k-pink-text); }
.k-ed .k-ed-prev .ui-icon { transform: rotate(180deg); }
/* the 2do's panel reads upright: no italics anywhere in it (the kit's labels, stat tiles,
   title, comment box and "edit" link are italic elsewhere) */
.k-ed, .k-ed * { font-style: normal !important; }
/* the title: the panel's heading, edited in place (a list's name in its settings too) */
.k-ed .ui-panel-head h2, .k-settings .ui-panel-head h2 { overflow: visible; }
.k-ed-title {
    display: block;
    width: 100%;
    min-height: 32px;
    margin: 0 0 0 -8px;
    padding: 2px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--k-solid-ink);
    font: italic 700 21px/1.3 var(--k-font);
    letter-spacing: -.01em;
    resize: none;
    overflow: hidden;
    outline: none;
    transition: background .15s ease;
}
.k-ed-title:hover { background: rgb(var(--k-hi) / .03); }
.k-ed-title:focus { background: var(--k-sheet-raised); }
/* the state switch, then every field as a chip */
.k-ed-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.k-ed-fields .ui-chip { --tint: var(--k-n28b); --ink: var(--k-n64); --grip-ink: var(--k-n45c); background: var(--k-n25); }
.k-ed-state { display: inline-flex; margin-right: 4px; }
.k-ed .k-ed-input { display: inline-flex; width: 11em; }
.k-ed-color .ui-chip .ui-chip-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--k-n63b); }
.k-ed-color.c-blue .ui-chip-label::before { background: var(--k-blue-text); }
.k-ed-color.c-red .ui-chip-label::before { background: var(--k-red-text); }
.k-ed-color.c-green .ui-chip-label::before { background: var(--k-green-text); }
.k-ed-color.c-yellow .ui-chip-label::before { background: var(--k-yellow-text); }
.k-ed-color.c-purple .ui-chip-label::before { background: var(--k-purple-text); }
.k-ed-color.c-black .ui-chip-label::before { background: var(--k-black-text); }
.k-ed-color.c-turquoise .ui-chip-label::before { background: var(--k-turquoise-text); }
.k-ed-color.c-pink .ui-chip-label::before { background: var(--k-pink-text); }
.k-ed .ui-stat.is-wait b { color: var(--k-lime); }
.k-ed-note { margin: 0 0 12px; color: var(--k-n63); font-size: 13px; }
/* files: big thumbnails down the side, a grid in Media */
.k-ed-files { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.k-ed-files-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* a file: the thumbnail (or its name), Download in its corner under the pointer */
.k-ed-tile { position: relative; min-width: 0; }
.k-ed-dl {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: calc(28px * var(--k-round));
    background: color-mix(in srgb, var(--k-panel) 78%, transparent);
    color: var(--k-solid-ink);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .18s var(--k-spring), background .15s ease;
}
.k-ed-tile:hover .k-ed-dl, .k-ed-dl:focus-visible { opacity: 1; transform: none; }
.k-ed-dl:hover { background: var(--k-lime); color: var(--k-on-lime); }
.k-ed-tile .k-ed-file + .k-ed-dl { top: 50%; margin-top: -14px; background: var(--k-sheet-raised); }
@media (hover: none) { .k-ed-dl { opacity: 1; transform: none; } }
.k-ed-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--k-sheet-raised); }
.k-ed-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--k-ease); }
.k-ed-thumb:hover img { transform: scale(1.04); }
.k-ed-file { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px;
             background: var(--k-sheet-raised); color: var(--k-n72b); font: 600 12.5px/1.2 var(--k-font); text-decoration: none; }
.k-ed-file:hover { color: var(--k-text); }
.k-ed-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ed-none { margin: 0; color: var(--k-n47); font-size: 12.5px; text-align: center; }
/* every field (Advanced) */
.k-ed-more .edits { margin-top: 4px; }

/* the conversation: the history in a raised box, the comment line joined under it */
.k-ed .item-thread .act-claim { margin-bottom: 10px; }
.k-ed .item-thread .act-box { position: relative; border-radius: 16px 16px 0 0; background: var(--k-sheet-raised); }
/* the Twodo section is a column: the conversation takes the room left, and its
   comment line stays at the bottom of the panel */
.k-ed .ui-panel-tab[data-tab="twodo"] .ui-panel-main { display: flex; flex-direction: column; }
.k-ed .k-ed-thread { display: flex; flex-direction: column; flex: 1; min-height: 220px; }
.k-ed .item-thread .act-box { flex: 1; min-height: 120px; }
.k-ed .item-thread .act-reply { position: sticky; bottom: 0; z-index: 2; }
/* it sticks above the panel's bottom padding (kit.css .ui-panel-body): that strip is
   covered in the panel's color, so lines scrolling under the box don't show below it */
.k-ed .item-thread .act-reply::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 26px;
    background: var(--k-sheet);
    pointer-events: none;
}
@media (max-width: 760px) { .k-ed .item-thread .act-reply::after { height: 18px; } }
.k-ed .item-thread .act-lines { padding: 18px 20px 14px; }
.k-ed .item-thread .act-line { padding: 3px 0 3px 14px; }
.k-ed .item-thread .act-line:before { background: var(--k-n35b); }
.k-ed .item-thread .act-line:after { background: #5d8a45; box-shadow: 0 0 0 2px var(--k-sheet-raised); }
.k-ed .item-thread .act-line .act-meta { color: var(--k-n53); font: 600 11.5px/1.4 var(--k-font); }
.k-ed .item-thread .act-line .act-text { color: var(--k-n71); font: 500 13px/1.4 var(--k-font); }
.k-ed .item-thread .act-line.act-comment { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--k-n29); }
.k-ed .item-thread .act-line.act-comment .act-text { color: var(--k-solid-ink); font: 700 14px/1.45 var(--k-font); }
.k-ed .item-thread .act-line.act-comment.act-from-person { background: var(--k-n29); }
.k-ed .item-thread .act-line.act-comment.act-from-person .act-meta { color: var(--k-n63); opacity: 1; }
.k-ed .item-thread .act-line.act-question { background: color-mix(in srgb, var(--k-lime) 10%, transparent) !important; box-shadow: inset 3px 0 0 var(--k-lime); }
.k-ed .item-thread .act-line.act-question .act-meta { color: var(--k-lime); }
.k-ed .item-thread .act-line.act-question .act-text { color: var(--k-solid-ink); }
.k-ed .item-thread .act-text .act-p { margin: 0 0 6px; }
.k-ed .item-thread .act-text .act-p:last-child { margin-bottom: 0; }
.k-ed .item-thread .act-text .act-h { margin: 6px 0 4px; color: var(--k-solid-ink); font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.k-ed .item-thread .act-text .act-list { margin: 4px 0 6px; padding-left: 18px; }
.k-ed .item-thread .act-text .act-list li { margin: 2px 0; }
.k-ed .item-thread .act-text .act-code { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; background: var(--k-sheet); border: 1px solid var(--k-n35b); color: var(--k-n83); font: 600 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
.k-ed .item-thread .act-text .act-code .ui-icon { width: 12px; height: 12px; opacity: .75; }
.k-ed .item-thread .act-text .act-pre { position: relative; margin: 6px 0; padding: 10px 12px; border-radius: 8px; background: var(--k-sheet); border: 1px solid var(--k-n35b); overflow-x: auto; font: 500 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--k-n83); }
.k-ed .item-thread .act-text .act-pre-lang { float: right; margin-left: 8px; color: var(--k-n53); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.k-ed .item-thread .act-text .act-chip { display: inline-flex; align-items: center; gap: 5px; margin: 1px 2px; padding: 2px 8px; border-radius: 99px; background: var(--k-sheet); border: 1px solid var(--k-n42); color: var(--k-solid-ink); font: 700 12px/1.3 var(--k-font); text-decoration: none; vertical-align: baseline; transition: border-color .15s, background .15s; }
.k-ed .item-thread .act-text .act-chip:hover { border-color: var(--k-lime); background: color-mix(in srgb, var(--k-lime) 10%, var(--k-sheet)); }
.k-ed .item-thread .act-text .act-chip .ui-icon { width: 13px; height: 13px; color: var(--k-lime); }
.k-ed .item-thread .act-text .act-at { color: var(--k-lime); font-weight: 800; }
.k-ed .item-thread .act-text .act-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-weight: 700; }
.k-ed .item-thread .act-text .act-fold > summary::-webkit-details-marker { display: none; }
.k-ed .item-thread .act-text .act-fold-more { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--k-sheet); border: 1px solid var(--k-n35b); color: var(--k-n63); font: 600 11px/1.3 var(--k-font); }
.k-ed .item-thread .act-text .act-fold[open] .act-fold-more { display: none; }
.k-ed .item-thread .act-text .act-fold-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--k-n35b); font-weight: 500; }
.k-ed .item-thread .act-empty { margin: 0; color: var(--k-n53); font-size: 13px; }
.k-ed .item-thread .act-top { position: absolute; top: 14px; right: 14px; }
.k-ed .item-thread .act-top .ui-icon { transform: rotate(-90deg); }
.k-ed .item-thread .act-reply { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 10px 20px; border-radius: 0 0 16px 16px; background: var(--k-n28b); }
.k-ed .item-thread .act-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 6px 0;
    border: 0 !important;
    background: none !important;
    color: var(--k-solid-ink);
    font: italic 600 15px/1.2 var(--k-font);
    resize: none;
    outline: none;
}
.k-ed .item-thread .act-input::placeholder { color: var(--k-n63); }
.k-ed .item-thread .act-reply .ui-pill { flex: none; align-self: flex-end; }
/* the Twodo tab: the last lines in full (the panel scrolls, not the box), the box to write;
   Open the conversation on the label's line */
.k-ed-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k-ed .item-thread.is-brief { flex: none; min-height: 0; }
.k-ed .item-thread.is-brief .act-box { flex: none; min-height: 0; }
.k-ed .item-thread.is-brief .act-lines { max-height: none !important; overflow: visible !important; }
.k-ed .item-thread .act-more { margin: 0; padding: 0 20px 12px; color: var(--k-n53); font: 600 11.5px/1.4 var(--k-font); }
/* the Conversation tab: the whole thread fills the panel, the box to write at the bottom */
.k-ed .item-thread.is-full { display: flex; flex-direction: column; min-height: min(62vh, 640px); }
.k-ed .item-thread.is-full .act-box { flex: 1; }

@media (max-width: 760px) {
    .k-ed-title { font-size: 18px; }
    .k-ed .k-ed-input { width: 100%; }
    .k-ed-files { flex-direction: row; flex-wrap: wrap; }
    .k-ed-files .k-ed-thumb { width: 120px; }
    .k-ed .item-thread .act-lines { max-height: none; }
}

/* ---------------------------------------------------------------- the Share panel (kit) */
body.page- #share-view .filtering-inner:before {
    content: "Share";
    display: block;
    margin: 2px 0 18px;
    color: var(--k-n86);
    font: 700 18px/1.2 var(--k-font);
    letter-spacing: -.01em;
}
body.page- #share-view .filtering-inner { padding: 0 18px; }
body.page- #share-view .f-box { margin: 0 0 24px !important; border: 0 !important; background: none !important; }
.k-share-note, body.page- #share-view .agents-empty, body.page- #share-view .agents-setup p {
    margin: 6px 0 10px;
    color: var(--k-n63);
    font: 500 12.5px/1.5 var(--k-font);
}
/* the invite: the list, the email, Invite (lime) */
body.page- #share-view .k-share-add .twodos-select { margin-bottom: 8px; }
body.page- #share-view .k-share-add .cus-select {
    width: 100% !important;
    border: 0 !important;
    border-radius: calc(30px * var(--k-round)) !important;
    background: var(--k-solid) !important;
}
body.page- #share-view .k-share-add .cus-select input { background: none !important; color: var(--k-solid-ink) !important; font: 600 13px/30px var(--k-font) !important; }
body.page- #share-view .dialog-with-input { display: flex; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; }
body.page- #share-view .dialog-with-input .twodo-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: calc(30px * var(--k-round));
    background: var(--k-solid);
    color: var(--k-solid-ink);
    font: 500 13px/1 var(--k-font);
    outline: none;
}
body.page- #share-view .dialog-with-input .twodo-btn {
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: calc(30px * var(--k-round));
    background: var(--k-lime);
    color: var(--k-on-lime);
    font: 700 12.5px/30px var(--k-font);
    cursor: pointer;
}
/* people and computers: rows like the list's */
.k-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--k-row);
}
.k-share-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-n86); font: 600 13px/1.3 var(--k-font); }
.k-share-meta { color: var(--k-n53); font: 600 11.5px/1 var(--k-font); white-space: nowrap; }
/* an agent: its client, on which computer, then what it can do */
.k-share-who i { color: var(--k-n63); font-style: normal; font-weight: 500; }
.k-agent-caps { display: block; margin-top: 2px; color: var(--k-n53); font: 600 11.5px/1.3 var(--k-font); }
.k-agent-caps b { color: var(--k-lime); font-weight: 700; }
.k-share-del { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--k-n53); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.k-share-row:hover .k-share-del { opacity: 1; }
.k-share-del:hover { color: var(--k-danger); }
/* connecting a computer: folded, the commands copy on a click */
body.page- #share-view .agents-setup { margin-top: 10px; padding: 0 !important; border: 0 !important; background: none !important; }
body.page- #share-view .agents-setup summary {
    cursor: pointer;
    list-style: none;
    color: var(--k-n63);
    font: 700 12.5px/1 var(--k-font);
}
body.page- #share-view .agents-setup summary::-webkit-details-marker { display: none; }
body.page- #share-view .agents-setup summary::before { content: "+ "; color: var(--k-lime); }
body.page- #share-view .agents-setup[open] summary::before { content: "– "; }
body.page- #share-view .agents-setup code {
    display: block;
    margin: 6px 0 2px;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--k-solid);
    color: var(--k-n86);
    font: 500 11.5px/1.4 ui-monospace, Consolas, monospace;
    word-break: break-all;
    cursor: copy;
    transition: background .15s ease;
}
body.page- #share-view .agents-setup code:hover { background: var(--k-solid-hover); }
body.page- #share-view .agents-os { display: block; margin-bottom: 4px; color: var(--k-n47); font-size: 11px; }
body.page- #share-view .agents-setup a { color: var(--k-lime); }

/* ---------------------------------------------------------------- phones */
/* under 760px: the same screen, laid out for one hand. The band's rows stack (the
   list tabs in one line that scrolls sideways), a row wraps like the kit's composed
   screen (the title, then its chips, then the age), the composer is two lines, and
   a panel (Filters, Share, View) is a sheet over the whole page under the band.
   The band's and the composer's heights are measured (--k-bar-h, --k-composer-h). */
.k-phone-tools, .k-band-logo { display: none; }
body.page-.k-fold .k-phone-tools { display: flex; }
/* the list runs from under the band to the bottom of the screen at every width
   (style.css makes .content absolute under 1150px, in a body with no height:
   it collapsed to nothing) */
@media (max-width: 1150px) {
    body.page- .content { position: fixed !important; top: var(--k-bar-h); bottom: 0; height: auto; }
    /* the color swatches stay circles (v2.css gives every filter button a 36px minimum here) */
    body.page- .filtering .filtering-inner .f-box.b-colors .twodo-btn { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; }
}
/* every list has a kit color (its theme, --list-ink, twodos.js): its tab, when on, is that
   color; with several lists on, its rows carry it on their left edge (the tabs are the legend) */
body.page- .k-tabs .ui-chip.is-on { --tint: var(--list-ink); background: color-mix(in srgb, var(--list-ink) 72%, #000); }
body.page-.k-many-lists :is(#twodos-holder, #k-row-preview) .twodo-line.l-c { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--list-ink) 38%, transparent) !important; }
body.page-.k-many-lists :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c { padding-left: 30px !important; }
/* the band, folded (body.k-fold, set by twodos.js when the full band would not fit on
   one line: phones, tablets, a narrow window): the list tabs scrolling sideways, then two
   buttons. The states, as a dot in the color of the state that is on (blue for All),
   and More (…): each opens a bubble with what the desktop's band shows in full. */
body.page-.k-fold .k-topbar-row { flex-wrap: nowrap; gap: 8px; }
body.page-.k-fold .k-topbar-right { position: relative; }
body.page-.k-fold .k-tabs { flex: 1 1 auto; min-width: 0; }
body.page-.k-fold .k-tabs .ui-track { display: flex; flex-wrap: nowrap; padding-right: 22px;
                               overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
                               /* the last tab fades out at the edge: there is more to scroll */
                               -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
body.page-.k-fold .k-tabs .ui-track::-webkit-scrollbar { display: none; }
body.page-.k-fold .k-tabs .ui-track > * { flex: none; }
/* only the tabs that are on keep their grip (the list's settings, also in the More bubble) */
body.page-.k-fold .k-tabs .ui-chip:not(.is-on) .ui-grip { display: none; }
body.page-.k-fold .k-topbar-right { flex: none; gap: 6px; }
/* hidden but measurable: twodos.js adds their widths up to decide whether to fold */
body.page-.k-fold .k-actions, body.page-.k-fold .k-states { position: absolute; width: max-content; flex-wrap: nowrap; visibility: hidden; pointer-events: none; }
body.page-.k-fold .k-phone-tools { display: flex; gap: 6px; }
body.page-.k-fold .k-phone-tools .ui-pill { width: var(--k-h-sm); padding: 0; justify-content: center; }
body.page-.k-fold .k-phone-tools .ui-pill .ui-icon { width: 16px; height: 16px; }
body.page-.k-fold .k-phone-states { color: var(--state-ink, var(--k-muted)); border-color: var(--state-ink, var(--k-outline)); }
body.page-.k-fold .k-phone-states:hover { color: var(--state-ink, var(--k-text)); }

@media (max-width: 760px) {
    /* a notch smaller everywhere: the kit's three heights and type sizes, for phones */
    body.page- {
        overflow-x: hidden;
        --k-gut: 10px;
        --k-h-sm: 24px;
        --k-h-md: 28px;
        --k-h-lg: 32px;
        --k-t-sm: 11.5px;
        --k-t-md: 13px;
        --k-t-lg: 13.5px;
    }
    /* under the notch when saved to the home screen (viewport-fit=cover): the band starts below it */
    body.page- .k-topbar-row { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; --k-h-sm: 28px; --k-t-sm: 12px; }
    /* the logo at the left of the band (the rail is gone): the rail's upright wordmark, laid flat */
    body.page- .k-band-logo { position: relative; display: block; flex: none; width: 48px; height: var(--k-h-sm); margin-right: -2px; }
    body.page- .k-band-logo img { position: absolute; left: 50%; top: 50%; width: 21px; height: auto; transform: translate(-50%, -50%) rotate(-90deg); }
    body.page- .content { left: 0; right: 0; }
    /* rows: one line each. The dot, the title (two lines at most), then the state as
       a small word in its color and the age. The field chips wait in the editor. */
    body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c { margin-bottom: 7px !important; padding: 0 10px 0 12px !important; border-radius: 12px !important; }
    body.page-.k-many-lists :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c { padding-left: 18px !important; }
    body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .line-inner { flex-wrap: nowrap; align-items: center; gap: 8px !important; min-height: 40px !important; }
    body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .line-inner .row-label {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        padding: 6px 0;
        text-indent: 0;
    }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-color { flex: none; display: inline-flex; }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-color .row-icon { width: 9px; height: 9px; margin-right: 10px; }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line.l-c .row-label .title {
        flex: 1 1 auto;
        min-width: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.3;
    }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-activity, body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-claim,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .priority.active { flex: none; display: inline-flex; align-items: center; margin-left: 6px; font-size: 11px; white-space: nowrap; }
    /* hover affordances have no hover on a phone: the empty conversation badge, the
       "+ priority" and "@ share" placeholders, the ops dots; the share badge (room for the
       title; the editor has it); and the list's name span */
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .row-activity.empty, body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .line-ops,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .priority.p-none, body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-label .share,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-twodos-host, body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-id { display: none !important; }
    /* (v2.css sets these with !important) */
    body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .line-inner .row-interactions {
        flex: none !important;
        width: auto !important;
        margin-left: auto !important;     /* pinned to the right edge whatever the title does */
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-interactions .k-row-fields { display: none; }
    /* the state: no box, just the dot and the word in the state's color */
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-green,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-yellow,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-turquoise,
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip.c-black { height: auto; padding: 0; background: none; --ink: var(--dot, var(--k-n63b)); }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip .ui-chip-label { padding: 0; gap: 5px; font: 600 11px/1 var(--k-font); }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip .ui-grip { display: none; }
    /* the age sizes to its text (the desktop gives it a 58px slot: a gap before a short "3d") */
    body.page- :is(#twodos-holder, #k-row-preview):not(.card-mode) .twodo-line.l-c .row-date { flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; font-size: 11px; text-align: right; }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .k-row-state .ui-chip { min-width: 0; }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-image { width: 20px; height: 22px; border-radius: 6px; }
    /* no pointer to hover with: delete and a sharer's remove stay in view, quietly */
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions, .k-share-del { opacity: 1; }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions .del { color: var(--k-n41); }
    body.page- :is(#twodos-holder, #k-row-preview) .twodo-line .row-actions .ui-icon { width: 13px; height: 13px; }
    /* the composer: the filters in one line that scrolls; the text with the color and
       enter; settings, the list and the sub-category in a scrolling line under it */
    body.page- .k-app-composer { --k-h-sm: 22px; --k-h-lg: 30px; --k-t-sm: 11.5px; --k-t-lg: 13px; }
    body.page- .k-app-composer .k-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 10px; gap: 5px; font-size: 12px; }
    body.page- .k-app-composer .k-line { padding: 6px; border-radius: 10px; }
    body.page- .k-app-composer .k-line-start, body.page- .k-app-composer .k-line-end { gap: 6px; }
    body.page- .k-app-composer .k-filters::-webkit-scrollbar { display: none; }
    body.page- .k-app-composer .k-filters > * { flex: none; }
    body.page- .k-app-composer .k-filters .k-grow { flex: 1 0 8px; }
    body.page- .k-app-composer .k-user-fields, body.page- .k-app-composer .k-meta { flex-wrap: nowrap; }
    body.page- .k-app-composer .k-line { gap: 6px; }
    body.page- .k-app-composer .k-new-text { order: 1; flex: 1 1 0; min-width: 0; }
    body.page- .k-app-composer .k-new-text input { font-size: 16px; }   /* 16px or iOS zooms in on focus */
    body.page- .k-app-composer .k-line-end { order: 2; flex: none; flex-wrap: nowrap; }
    body.page- .k-app-composer .k-line-start { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body.page- .k-app-composer .k-line-start::-webkit-scrollbar { display: none; }
    body.page- .k-app-composer .k-line-start > * { flex: none; }
    body.page- .content { padding-bottom: calc(var(--k-composer-h, 130px) + 28px); }
    /* a panel is a sheet over the whole page, under the band; the list is not squeezed */
    body.page-.in-filtering { --k-panel-w: 0px; }
    body.page-.in-filtering .content { right: 0; }
    body.page- .filtering {
        left: auto;
        right: -100vw;
        width: 100vw;
        padding: 18px 0 calc(24px + env(safe-area-inset-bottom, 0px));
        border-left: 0;
        background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 85%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.page- .filtering.active { right: 0; }
    /* its close: a round glass button, fixed under the band (only while the sheet is open) */
    body.page- .filtering:not(.active) #close-filtering { display: none; }
    body.page- #close-filtering {
        position: fixed;
        top: calc(var(--k-bar-h) + 12px);
        right: 14px;
        z-index: 7;
        width: 36px;
        height: 36px;
        border: 1px solid var(--k-line);
        background: var(--k-glass);
    }
    body.page- #close-filtering:before, body.page- #close-filtering:after { width: 14px; border-bottom-color: var(--k-text); box-shadow: none; }
    body.page- .filtering .filtering-inner .f-box:not(.b-colors) .twodo-btn { height: 32px; padding: 0 13px; font-size: 13.5px; }
    /* the dialogs: edge to edge, taller */
    body.page- .notification-content.noti-full:not(.noti-edits),
    body.page- .notification-content.noti-edits { width: calc(100% - 16px) !important; max-height: 90vh; }
    body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification,
    body.page- .notification-content.noti-edits .ui-notification { max-height: 90vh; }
    body.page- .notification-content.noti-full:not(.noti-edits) .ui-notification .inner-padding { padding: 14px !important; }
    body.page- .notification-content.noti-edits .ui-notification .inner-padding { padding: 14px 16px 18px !important; }
    .ui-scrim { padding: 8px; }
}

/* ---------------------------------------------------------------- admin (ADMIN_EMAILS only) */
.k-admin {
    position: fixed;
    inset: 0;
    z-index: 960;
    overflow: auto;
    background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 85%) fixed;
    color: var(--k-text);
    font: 500 var(--k-t-md)/1.5 var(--k-font);
    animation: k-rise .3s var(--k-ease);
}
.k-adm-inner { max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 60px; }
.k-adm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.k-adm-head h1 { flex: 1; margin: 0; font: 700 24px/1.2 var(--k-font); letter-spacing: -.01em; }
.k-adm-when { color: var(--k-n53); font-size: 12.5px; }
.k-adm-ok { margin: 0 0 18px; color: var(--k-n63); font-size: 13px; }
.k-adm-flags { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--k-danger-soft); }
.k-adm-flags p { margin: 0; color: #f0b2a6; font-weight: 600; font-size: 13.5px; }
.k-adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.k-adm-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--k-row); }
.k-adm-tile b { color: var(--k-n91); font: 700 26px/1.1 var(--k-font); }
.k-adm-tile span { color: var(--k-n72b); font-weight: 600; font-size: 13px; }
.k-adm-tile i { color: var(--k-n53); font-style: normal; font-size: 12px; }
/* two single-series charts: thin bars, rounded tops, a 2px gap, a tooltip per bar */
.k-adm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 24px; }
.k-adm-chart { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--k-row); }
.k-adm-chart figcaption { margin-bottom: 10px; color: var(--k-n72b); font-weight: 600; font-size: 13px; }
.k-adm-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; border-bottom: 1px solid rgb(var(--k-hi) / .08); }
.k-adm-bar { flex: 1; display: flex; align-items: flex-end; height: 100%; cursor: default; }
.k-adm-bar i { display: block; width: 100%; max-width: 18px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--k-lime-strong); transition: background .15s ease; }
.k-adm-bar:hover i { background: var(--k-lime); }
.k-adm-axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--k-n47); font-size: 11px; }
.k-adm-section h2 { margin: 0 0 10px; color: var(--k-n53); font: 700 11px/1 var(--k-font); text-transform: uppercase; letter-spacing: .08em; }
.k-adm-section { margin-bottom: 26px; }
.k-adm-search { width: min(320px, 100%); margin-bottom: 10px; }
.k-adm-table { overflow-x: auto; border-radius: 12px; background: var(--k-row); }
.k-adm-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.k-adm-table th { position: sticky; top: 0; padding: 10px 12px; color: var(--k-n63); font-weight: 700; font-size: 11.5px; text-align: left; white-space: nowrap; cursor: pointer; user-select: none; }
.k-adm-table th.is-sorted { color: var(--k-lime); }
.k-adm-table td { padding: 9px 12px; border-top: 1px solid rgb(var(--k-hi) / .04); color: var(--k-n84); white-space: nowrap; }
.k-adm-table td i { color: var(--k-lime); font-style: normal; font-size: 11.5px; }
.k-adm-table tr.is-warn td { color: #f0b2a6; }
.k-adm-count { margin: 0; padding: 8px 12px; color: var(--k-n47); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .k-admin { animation: none; } }

/* an agent's live state, after its name: listening (lime dot, its repos), working, offline */
.k-agent-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; color: var(--k-n53); font: 600 11.5px/1 var(--k-font); }
.k-agent-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-n38b); }
.k-agent-live i { color: var(--k-n47); font-style: normal; font-weight: 500; }
.k-agent-live.is-listening { color: var(--k-lime); }
.k-agent-live.is-listening::before { background: var(--k-lime); box-shadow: 0 0 0 3px var(--k-lime-soft); animation: k-listen 2s ease-in-out infinite; }
.k-agent-live.is-working { color: var(--k-seg-yellow); }
.k-agent-live.is-working::before { background: var(--k-seg-yellow); }
@keyframes k-listen { 50% { box-shadow: 0 0 0 6px transparent; } }

/* the composer's Send to: quiet until an agent listens (a lime dot), lime when on */
/* the comment box: "To <routine>" (a reply runs it again), dimmed when off */
.k-ed .item-thread .act-to { flex: none; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px;
    border: 0; border-radius: 12px; cursor: pointer; font: 700 12px/1 var(--k-font); color: var(--k-n63);
    background: var(--k-solid); box-shadow: inset 0 0 0 1px var(--k-line); transition: color .15s, background .15s, box-shadow .15s; }
.k-ed .item-thread .act-to .ui-agent-mark { width: 18px; height: 18px; opacity: .45; filter: saturate(.4); }
.k-ed .item-thread .act-to.is-on { color: var(--k-lime); background: color-mix(in oklab, var(--k-lime) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-lime) 40%, transparent); }
.k-ed .item-thread .act-to.is-on .ui-agent-mark { opacity: 1; filter: none; }
.k-ed .item-thread .act-claim { display: flex; align-items: center; gap: 6px; }
.k-ed .item-thread .act-claim .ui-agent-mark { width: 18px; height: 18px; }
/* an agent on a 2do (the row): our orb, the agent's name, three dots typing along */
body :is(#twodos-holder, #k-row-preview) .row-label .row-claim {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px 0 4px; margin-left: 6px; vertical-align: 1px;
    border-radius: 999px; font: 700 11px/1 var(--k-font); color: var(--k-lime); opacity: 1;
    background: color-mix(in oklab, var(--k-lime) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-lime) 28%, transparent);
}
.row-claim .ui-agent-mark { width: 16px; height: 16px; flex: none; }
/* how long the agent has been on it, quiet next to its name */
.row-claim-since { font-style: normal; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
                   background: rgb(var(--k-hi) / .08); color: var(--k-n63); font-size: 11px;
                   font-variant-numeric: tabular-nums; }
.row-claim-dots { display: inline-flex; gap: 2px; margin-left: 1px; font-style: normal; }
.row-claim-dots b { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .3; animation: row-claim-dot 1.4s ease-in-out infinite; }
.row-claim-dots b:nth-child(2) { animation-delay: .2s; }
.row-claim-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes row-claim-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .row-claim-dots b { animation: none; } }
/* the old filter bar stays in the page, hidden (its scripts still fill it), but older
   styles gave it display: flex: empty and see-through, it lay over the top half of the
   list tabs and took their clicks (a tab's settings grip answered only low down) */
body.page- #filter-bar[hidden] { display: none !important; }
/* the row's old menu dots (a white bubble): not shown. The row opens on a click anywhere,
   and the conversation badge beside them did the same and looked the same */
body :is(#twodos-holder, #k-row-preview) .twodo-line .line-inner .row-label .line-ops { display: none !important; }
/* the old footer line (Logout, IN/OUT, email, handle, browsers, the version):
   all of it lives in the You panel now */
#extra-footer, .footer #commit { display: none !important; }
/* the editor's Advanced tab: kit rows; a text field is a solid box as wide as its column */
.k-ed-adv .k-set-control { min-width: 0; }
.k-ed-adv .k-set-control:has(.k-ed-area) { flex: 1 1 60%; }
.k-ed-adv .k-ed-area { display: block; width: 100%; height: auto; padding: 10px 14px; }
.k-ed-adv .k-ed-area textarea { display: block; width: 100%; min-height: 1.5em; border: 0; outline: 0; resize: vertical;
    background: transparent; color: var(--k-n86); font: 500 14px/1.5 var(--k-font); }
.k-ed-adv .k-ed-area textarea::placeholder { color: var(--k-n53); }
.k-ed-adv .k-ed-area:focus-within { box-shadow: inset 0 0 0 1.5px var(--k-lime-line, var(--k-lime)); }
/* routines (Share → Agents): cloud cards, the prompt to copy, the add form */
.k-routine .k-set-row { margin: 10px 0 2px; }
.k-routine.has-error { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-red, #e5484d) 45%, transparent); }
.k-routine-err { color: var(--k-red, #ff8a80); }
/* Add a routine: numbered steps, readable text, the prompt in its own card */
.k-rt-step { display: flex; gap: 14px; margin-top: 18px; }
.k-rt-step > b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--k-lime-soft); color: var(--k-lime); font: 800 12px/1 var(--k-font); }
.k-rt-step > div { flex: 1; min-width: 0; }
.k-rt-step p { margin: 3px 0 10px; color: var(--k-n79); font: 500 14px/1.55 var(--k-font); }
.k-rt-step strong { color: var(--k-n91); font-weight: 700; }
.k-rt-link { color: var(--k-lime); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--k-lime) 40%, transparent); }
.k-rt-link:hover { border-bottom-color: var(--k-lime); }
.k-rt-prompt { margin: 0 0 12px; padding: 14px 16px; max-height: 15em; overflow: auto; border-radius: 14px; white-space: pre-wrap;
    background: var(--k-sheet-raised); box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-n86);
    font: 500 12.5px/1.6 ui-monospace, Consolas, monospace; }
.k-rt-code { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--k-sheet-raised); box-shadow: inset 0 0 0 1px var(--k-line);
    color: var(--k-n86); font: 600 13px/1.3 ui-monospace, Consolas, monospace; cursor: pointer; }
.k-rt-code:hover { box-shadow: inset 0 0 0 1px var(--k-lime); }
.k-routine-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.k-routine-form .js-routine-url, .k-routine-form .js-routine-token { grid-column: 1 / -1; }
.k-routine-form .ui-pill { justify-self: start; }
@media (max-width: 640px) { .k-routine-form { grid-template-columns: 1fr; } }
/* the composer's agent button: the orb, dimmed until a 2do is to be sent; a bubble with the agents listening */
.k-send-to { display: inline-flex; }
.k-agent-btn { position: relative; overflow: visible; }
/* the glow fills the button and spills a little light past it; it moves at 1.8x (twodos.js) */
.k-agent-btn .ui-glow { width: 2.4em; height: 2.4em; margin: -.35em; opacity: .92; filter: saturate(1.15) brightness(1.1) drop-shadow(0 0 5px rgba(80, 90, 255, .45)); transition: opacity .2s, filter .2s, transform .3s var(--k-spring); }
.k-agent-btn:hover .ui-glow { opacity: 1; transform: scale(1.08); filter: saturate(1.3) brightness(1.2) drop-shadow(0 0 8px rgba(80, 90, 255, .6)); }
.k-agent-btn.is-on { box-shadow: inset 0 0 0 1.5px var(--k-lime); }
.k-agent-btn.is-on .ui-glow { opacity: 1; filter: saturate(1.3) brightness(1.2) drop-shadow(0 0 8px rgba(255, 90, 40, .45)); }
.k-agent-count { position: absolute; top: -9px; right: -7px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
    background: var(--k-lime); color: var(--k-on-lime); font: 800 9px/14px var(--k-font); text-align: center;
    box-shadow: 0 0 0 2px var(--k-sheet, #111); pointer-events: none; }
.k-send-chip.has-live .ui-select-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--k-lime); vertical-align: 1px; }
.k-send-chip.is-on { background: var(--k-lime) !important; color: var(--k-on-lime) !important; }
.k-send-chip.is-on .ui-select-label { color: var(--k-on-lime) !important; }
.k-ed-sends { margin-top: 10px; }

/* ---------------------------------------------------------------- the Share panel (build_share_panel)
   a centered top (the art on the panel itself, the title, one line), then sections
   like the list settings: a bold title, a short note, the controls */
.k-sharepanel { padding: 0 20px 28px; color: var(--k-text); font-family: var(--k-font); }
.k-sp-top { margin: 6px 0 22px; text-align: center; }
.k-sp-top .ui-art { max-width: 250px; margin: 6px auto 12px; }
.k-sp-top h2 { margin: 0 0 6px; color: var(--k-n86); font: italic 800 22px/1.15 var(--k-font); letter-spacing: -.02em; }
.k-sp-top p { max-width: 230px; margin: 0 auto; color: var(--k-n63); font: 500 13px/1.45 var(--k-font); }
.k-sharepanel .k-sp-target { display: flex; width: 100%; }
.k-sp-invite { display: flex; gap: 6px; margin-top: 8px; }
.k-sp-invite .ui-field { flex: 1; min-width: 0; }
.k-sp-note { margin: 0; color: var(--k-n53); font: 500 12.5px/1.45 var(--k-font); }
.k-sp-person { display: flex; align-items: center; gap: 10px; margin: 0 -6px; padding: 7px 6px; border-radius: 10px; }
.k-sp-person:hover { background: var(--k-glass); }
.k-sp-person .k-space-face { margin: 0; box-shadow: none; }
.k-sp-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-n86); font: 600 13px/1.25 var(--k-font); }
.k-sp-who small { display: block; color: var(--k-n53); font: 600 11.5px/1.3 var(--k-font); }
.k-sp-person .k-share-del { opacity: 0; }
.k-sp-person:hover .k-share-del { opacity: 1; }
.k-sp-connect { margin-top: 14px; }
.k-sp-connect summary { color: var(--k-lime); font: 700 12.5px/1 var(--k-font); cursor: pointer; list-style: none; }
.k-sp-connect summary::-webkit-details-marker { display: none; }
.k-sp-connect summary::before { content: "+ "; }
.k-sp-connect[open] summary::before { content: "– "; }
.k-sp-step { display: flex; gap: 10px; margin-top: 12px; color: var(--k-n63); font: 500 12.5px/1.45 var(--k-font); }
.k-sp-step b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
               background: var(--k-lime-soft); color: var(--k-lime); font: 800 11px/1 var(--k-font); }
.k-sp-step span { flex: 1; min-width: 0; }
.k-sp-step strong { color: var(--k-n86); }
.k-sp-step em { display: block; margin-top: 6px; color: var(--k-n53); font-style: normal; font-size: 11.5px; }
.k-sharepanel code { display: block; margin-top: 5px; padding: 6px 8px; border-radius: 8px; background: var(--k-sheet-raised); color: var(--k-n83);
                     font: 500 11px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; cursor: pointer; }
.k-sharepanel code:hover { background: var(--k-solid-hover); }
.k-sp-step em code, .k-sp-more code { display: inline; padding: 2px 5px; }
.k-sp-more { margin: 14px 0 0; color: var(--k-n53); font: 500 12px/1.6 var(--k-font); }
.k-sp-more a { color: var(--k-teal-ink); }

/* the Share panel as a large kit panel: the art across its header, then the sections */
.k-share-panel.ui-panel.ui-sheet { width: min(880px, 100%); height: min(700px, 100%); }
/* the art heads the panel: a dot grid behind it, fading out at the edges, a faint touch of the accent */
/* the head on the Overview: the art, then the title centered under it; the other
   sections keep the plain head (no art) */
.k-share-panel:not([data-tab="overview"]) .ui-panel-art { display: none; }
.k-share-panel[data-tab="overview"] .ui-panel-head { padding-bottom: 22px; }
.k-share-panel[data-tab="overview"] .ui-panel-head h2 { font-size: 26px; }
.k-share-panel .ui-panel-art { position: relative; display: flex; justify-content: center; margin: 0 40px 18px 0; padding: 18px 0 14px; }
/* (on a layer of its own: the mask fades the grid, not the drawing) */
.k-share-panel .ui-panel-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--k-n34) 1.1px, transparent 1.6px) 0 0 / 16px 16px,
        radial-gradient(ellipse 45% 55% at 50% 50%, color-mix(in srgb, var(--k-lime) 7%, transparent), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
    pointer-events: none;
}
.k-share-panel .ui-panel-art .ui-art { position: relative; }
.k-share-panel .ui-panel-art .ui-art { width: 100%; max-width: 440px; }
.k-sp-lead { margin: 14px 0 4px; color: var(--k-n63); font: 500 14px/1.55 var(--k-font); }
.k-sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-stat.is-live b { color: var(--k-lime); }
.k-share-panel .k-sp-invite { flex-wrap: wrap; }
.k-share-panel .k-sp-invite .k-sp-target { flex: 1 1 100%; }
@media (max-width: 760px) {
    .k-share-panel .ui-panel-art { margin-right: 36px; }
    .k-share-panel .ui-panel-art .ui-art { max-width: 300px; }
}

/* the agents as kit cards (agents_rows_html) */
.k-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.k-agent { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; border-radius: 16px; background: var(--k-sheet-raised);
           box-shadow: inset 0 0 0 1px var(--k-line); transition: box-shadow .2s ease, transform .2s var(--k-spring); }
.k-agent:hover { box-shadow: inset 0 0 0 1px rgb(var(--k-hi) / .14); transform: translateY(-1px); }
.k-agent.is-listening { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-lime) 35%, transparent); }
.k-agent-top { display: flex; align-items: center; gap: 11px; }
.k-agent-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
                border-radius: calc(36px * var(--k-round)); background: var(--k-solid); color: var(--k-n83); font: 800 15px/1 var(--k-font); }
.k-agent-mark svg { width: 18px; height: 18px; fill: var(--k-lime); }
.k-agent:not(.is-listening):not(.is-working) .k-agent-mark { opacity: .7; }
.k-agent-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-agent-name b { color: var(--k-n86); font: 700 14px/1.2 var(--k-font); }
.k-agent-name i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-n53); font: 600 11.5px/1.2 var(--k-font); font-style: normal; }
.k-agent-state { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 10px;
                 border-radius: calc(24px * var(--k-round)); box-shadow: inset 0 0 0 1.5px var(--k-n36); color: var(--k-n53); font: 700 11.5px/1 var(--k-font); }
.k-agent-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.k-agent.is-listening .k-agent-state { box-shadow: none; background: var(--k-lime); color: var(--k-on-lime); }
.k-agent.is-listening .k-agent-state::before { animation: k-listen-dot 2s ease-in-out infinite; }
.k-agent.is-working .k-agent-state { box-shadow: none; background: color-mix(in srgb, var(--k-seg-yellow) 85%, transparent); color: var(--k-seg-ink); }
@keyframes k-listen-dot { 50% { opacity: .35; } }
.k-agent-sessions { display: flex; flex-wrap: wrap; gap: 6px; }
.k-agent-session { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: calc(24px * var(--k-round));
                   background: var(--k-solid-soft); color: var(--k-n83); font: 700 11.5px/1 var(--k-font); }
.k-agent-session i { color: var(--k-n53); font-style: normal; font-weight: 600; }
.k-agent-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--k-n53); font: 600 11.5px/1.3 var(--k-font); }
.k-agent-off { padding: 0; border: 0; background: none; color: var(--k-n47); font: 700 11.5px/1 var(--k-font); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.k-agent:hover .k-agent-off, .k-agent-off:focus-visible { opacity: 1; }
.k-agent-off:hover { color: var(--k-danger); }
@media (hover: none) { .k-agent-off { opacity: 1; } }

/* the Share button's bubbles: agents on the left (blue, pulsing while one listens), people on the right */
.k-actions .share-view-menu { position: relative; }
.ui-pill .k-badge.is-people { background: var(--k-lime); color: var(--k-on-lime); }
.ui-pill .k-badge.is-agents { left: -6px; right: auto; background: var(--k-teal); color: var(--k-on-teal); }
.ui-pill .k-badge.is-agents.is-live { animation: ui-digit .22s var(--k-spring), k-badge-live 2s ease-in-out .3s infinite; }
@keyframes k-badge-live { 50% { box-shadow: 0 0 0 2px var(--k-app-bar), 0 0 0 5px color-mix(in srgb, var(--k-teal) 35%, transparent); } }

/* the Share panel's invite: visible raised boxes (their edges line up with the titles),
   the email large, with a subtle glow of the accent that brightens while typing */
.k-share-panel .k-sp-invite { gap: 8px; margin-top: 4px; }
.k-share-panel .k-sp-invite .ui-select,
.k-share-panel .k-sp-invite .ui-field { background: var(--k-sheet-raised) !important; box-shadow: inset 0 0 0 1px var(--k-line); }
.k-share-panel .k-sp-invite .ui-select:hover { box-shadow: inset 0 0 0 1px rgb(var(--k-hi) / .16); }
.k-share-panel .k-sp-email { flex: 1 1 260px; font-size: 15px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-lime) 22%, transparent), 0 0 22px color-mix(in srgb, var(--k-lime) 7%, transparent) !important;
    transition: box-shadow .25s ease; }
.k-share-panel .k-sp-email:focus-within {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-lime) 55%, transparent), 0 0 28px color-mix(in srgb, var(--k-lime) 16%, transparent) !important; }
.k-share-panel .k-sp-email input::placeholder { color: var(--k-n53); }
.k-share-panel .k-sp-email .ui-go { background: var(--k-lime); color: var(--k-on-lime); }
.k-share-panel .k-sp-role { flex: none; }

/* faces: a person's gradient with their initial (face_html) */
.k-face { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
          color: #1b1a1e; font: 800 11px/1 var(--k-font); font-style: normal; text-shadow: 0 1px 0 rgb(255 255 255 / .25); }
.k-face.is-xs { width: 16px; height: 16px; margin-right: 6px; font-size: 8.5px; vertical-align: -3px; }
.k-face.is-xl { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 8px 26px rgb(0 0 0 / .25); }
.k-space-faces .k-face { margin-left: -6px; box-shadow: 0 0 0 2px var(--k-sheet); }

/* the You panel: you at the top, your marks to pick from, the handle, the email */
.k-you-panel.ui-panel.ui-sheet { width: min(760px, 100%); height: min(600px, 100%); }
.k-mail-panel.ui-panel.ui-sheet { height: min(720px, 100%); }
.k-mail-panel .ui-panel-head { padding-bottom: 22px; }
.k-mail-panel .ui-panel-head h2 { font-size: 26px; }
.k-mail-panel .ui-panel-art { position: relative; display: flex; justify-content: center; margin: 0 40px 18px 0; padding: 18px 0 14px; }
.k-mail-panel .ui-panel-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--k-n34) 1.1px, transparent 1.6px) 0 0 / 16px 16px,
        radial-gradient(ellipse 45% 55% at 50% 50%, color-mix(in srgb, var(--k-lime) 7%, transparent), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
    pointer-events: none;
}
.k-mail-panel .ui-panel-art .ui-art { position: relative; width: 100%; max-width: 440px; }
@media (max-width: 760px) {
    .k-mail-panel .ui-panel-art { margin-right: 36px; }
    .k-mail-panel .ui-panel-art .ui-art { max-width: 300px; }
}
.k-you-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 24px; }
.k-you-hero b { display: block; color: var(--k-n86); font: italic 800 22px/1.2 var(--k-font); letter-spacing: -.01em; }
.k-you-hero span { color: var(--k-n53); font: 600 13px/1.4 var(--k-font); }
.k-you-marks { display: flex; flex-wrap: wrap; gap: 10px; }
.k-you-mark { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #1b1a1e; font: 800 15px/1 var(--k-font); cursor: pointer;
              transition: transform .18s var(--k-spring), box-shadow .15s ease; }
.k-you-mark:hover { transform: scale(1.08); }
.k-you-mark.is-on { box-shadow: 0 0 0 3px var(--k-sheet), 0 0 0 5px var(--k-lime); }
.k-you-handle { width: min(320px, 100%); }
.k-you-email { margin: 0; color: var(--k-n83); font: 600 14px/1.4 var(--k-font); }

/* the You panel's sessions: a row per browser, this one marked */
.k-you-sessions { display: flex; flex-direction: column; gap: 8px; }
.k-you-session { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--k-sheet-raised);
                 box-shadow: inset 0 0 0 1px var(--k-line); }
.k-you-session.is-here { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-lime) 35%, transparent); }
.k-you-device { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
                border-radius: calc(32px * var(--k-round)); background: var(--k-solid); color: var(--k-n63); }
.k-you-session em { margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--k-lime-soft); color: var(--k-lime);
                    font: 700 10.5px/1 var(--k-font); font-style: normal; text-transform: uppercase; letter-spacing: .05em; vertical-align: 1px; }

/* the You panel's Plan (Free for now, Pro coming) and Data (export, delete) */
.k-plan { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px; padding: 16px; border-radius: 16px; background: var(--k-sheet-raised);
          box-shadow: inset 0 0 0 1px var(--k-line); }
.k-plan b { display: block; color: var(--k-n86); font: 700 15px/1.3 var(--k-font); }
.k-plan span:not(.k-plan-badge) { color: var(--k-n53); font: 500 12.5px/1.4 var(--k-font); }
.k-plan-badge { flex: none; padding: 6px 12px; border-radius: 10px; background: var(--k-lime); color: var(--k-on-lime); font: 800 13px/1 var(--k-font); }
.k-meter { height: 8px; border-radius: 4px; background: var(--k-solid); overflow: hidden; }
.k-meter i { display: block; height: 100%; border-radius: 4px; background: var(--k-lime); }
.k-meter-text { margin: 8px 0 0; color: var(--k-n53); font: 500 12.5px/1.4 var(--k-font); }
.k-meter-text b { color: var(--k-n86); }
.k-plan-pro { margin: 0; padding-left: 18px; color: var(--k-n63); font: 500 13px/1.7 var(--k-font); }
.k-plan-pro b { color: var(--k-n86); }
.k-you-delete { display: flex; flex-wrap: wrap; gap: 8px; }
.k-you-delete .ui-field { flex: 1 1 260px; }

/* which actions mail you: a space, a list, a 2do (its own, or as around it) */
.k-mail-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.k-mail-rule .ui-toggle { max-width: 100%; }
.k-mail-rule-from { color: var(--k-n53); font: 500 12px/1.4 var(--k-font); }
.k-mail-coming { display: flex; flex-direction: column; gap: 8px; }
.k-mail-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--k-sheet-raised);
              box-shadow: inset 0 0 0 1px var(--k-line); }
.k-mail-row > span:first-child { display: inline-flex; color: var(--k-lime); }
.k-mail-row b { display: block; color: var(--k-n86); font: 700 14px/1.3 var(--k-font); }
.k-mail-row small { color: var(--k-n53); font: 500 12px/1.4 var(--k-font); }
.k-ed-remind { margin: 8px 0 18px; }
.k-ed-remind .ui-toggle { flex-wrap: wrap; }
.k-remind-clock { display: inline-flex; margin-left: 6px; color: var(--k-lime); vertical-align: -2px; }
.k-remind-clock .ui-icon { width: 14px; height: 14px; }

/* About: the book of a space (open_space_book) */
.k-book.ui-panel.ui-sheet { width: min(900px, 100%); height: min(700px, 100%); }
.k-book .ui-panel-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px;
                                    background: var(--list-ink, var(--k-lime)); vertical-align: 3px; }
.k-book-ctx { margin: 8px 0 26px; }
.k-book-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.k-book-head h3 { margin: 0; color: var(--k-n86); font: 700 15px/1.3 var(--k-font); }
.k-book-text { padding: 16px 18px; border-radius: 14px; background: var(--k-sheet-raised); box-shadow: inset 0 0 0 1px var(--k-line);
               color: var(--k-n83); font: 500 14px/1.6 var(--k-font); }
.k-book-text p { margin: 0 0 8px; }
.k-book-text h4 { margin: 12px 0 6px; color: var(--k-n91); font: 700 14px/1.3 var(--k-font); }
.k-book-text ul { margin: 0 0 8px; padding-left: 20px; }
.k-book-text code { padding: 1px 5px; border-radius: 5px; background: var(--k-solid); font: 500 12.5px/1 ui-monospace, Consolas, monospace; }
.k-book-meta { margin: 8px 0 0; color: var(--k-n53); font: 600 11.5px/1.3 var(--k-font); }
.k-book-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; border: 1.5px dashed var(--k-n36); color: var(--k-n63); font: 500 13px/1.5 var(--k-font); }
.k-book-empty b { color: var(--k-n86); }
.k-book-editor { width: 100%; min-height: 220px; padding: 14px 16px; border: 0; border-radius: 14px; outline: none; resize: vertical;
                 background: var(--k-sheet-raised); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-lime) 40%, transparent);
                 color: var(--k-n91); font: 500 14px/1.6 var(--k-font); }
.k-book-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.k-book-add { margin-bottom: 10px; }
.k-book-add .ui-field { width: 100%; }
.k-book-decision { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--k-line); }
.k-book-decision span { color: var(--k-n86); font: 600 13.5px/1.45 var(--k-font); }
.k-book-decision small, .k-book-entry small { color: var(--k-n53); font: 600 11.5px/1.3 var(--k-font); }
.k-book-history { margin-top: 18px; }
.k-book-history summary { color: var(--k-n63); font: italic 700 var(--k-t-sm)/1 var(--k-font); cursor: pointer; list-style: none; }
.k-book-history summary::-webkit-details-marker { display: none; }
.k-book-history summary::before { content: "▸ "; font-style: normal; }
.k-book-history[open] summary::before { content: "▾ "; }
.k-book-entry { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; color: var(--k-n63); font: 500 12.5px/1.45 var(--k-font); }

.k-book-tools { display: inline-flex; gap: 8px; }
.k-book-ask { margin-top: 10px; }

/* the book's fields: the goal, links, the instructions for agents; their editor */
.k-book-goal { margin: 0 0 12px; color: var(--k-n91); font: italic 700 19px/1.35 var(--k-font); letter-spacing: -.01em; }
.k-book-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.k-book-link { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: calc(26px * var(--k-round));
               background: var(--k-solid-soft); color: var(--k-teal-ink); font: 700 12px/1 var(--k-font); text-decoration: none; }
.k-book-link::after { content: "↗"; margin-left: 5px; opacity: .6; }
.k-book-link:hover { background: var(--k-solid-hover); }
.k-book-rules { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--k-lime) 7%, var(--k-sheet-raised));
                box-shadow: inset 3px 0 0 var(--k-lime); color: var(--k-n83); font: 500 13.5px/1.55 var(--k-font); }
.k-book-rules b { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--k-lime); font: 700 12.5px/1 var(--k-font); }
.k-book-rules p { margin: 0 0 6px; }
.k-book-label { display: block; margin: 16px 0 6px; color: var(--k-n83); font: 700 13px/1.3 var(--k-font); }
.k-book-label i { margin-left: 6px; color: var(--k-n53); font-style: normal; font-weight: 500; }
.k-book-input { width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; outline: none; background: var(--k-sheet-raised);
                box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-n91); font: 600 14px/1 var(--k-font); }
.k-book-input:focus, .k-book-editor:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-lime) 50%, transparent); }
.k-book-input.js-goal { font: italic 700 16px/1 var(--k-font); }
.k-book-editor.is-small { min-height: 110px; }
.k-book-linkrows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.k-book-linkrow { display: grid; grid-template-columns: 160px 1fr 28px; gap: 6px; align-items: center; }
.k-book-linkrow .k-share-del { opacity: 1; }
.k-space-goal { margin: -4px 0 0; color: var(--k-n73); font: italic 600 13px/1.35 var(--k-font); }
@media (max-width: 760px) { .k-book-linkrow { grid-template-columns: 1fr 28px; } .k-book-linkrow .js-link-label { grid-column: 1 / -1; } }

/* setup: the ring at the bottom of the rail, and its checklist */
.k-setup { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 5px;
           color: var(--k-n53); font: 700 10px/1 var(--k-font); text-transform: uppercase; letter-spacing: .06em; }
.k-setup:empty { display: none; }
.k-setup-btn { position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
               transition: transform .18s var(--k-spring); }
.k-setup-btn:hover { transform: scale(1.07); }
.k-setup-btn svg { position: absolute; inset: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
.k-setup-track { fill: none; stroke: var(--k-n29); stroke-width: 3; }
.k-setup-ring { fill: none; stroke: var(--k-lime); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .6s var(--k-ease); }
.k-setup-btn b { position: relative; color: var(--k-lime); font: 800 14px/40px var(--k-font); }
/* the checklist: a kit bubble with an eyebrow, an italic title, the meter, the steps as raised cards */
.ui-menu.ui-pop.k-setup-menu { padding: 16px 16px 10px; border-radius: 18px; background: var(--k-sheet); max-height: 80vh; }
.k-setup-pop { width: 320px; }
.k-setup-pop h3 { margin: 4px 0 12px; color: var(--k-n91); font: italic 800 20px/1.15 var(--k-font); letter-spacing: -.01em; }
.k-setup-pop .k-meter-text { margin: 8px 0 14px; }
.k-setup-steps { display: flex; flex-direction: column; gap: 6px; }
.k-setup-step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
                background: var(--k-sheet-raised); box-shadow: inset 0 0 0 1px var(--k-line);
                transition: box-shadow .15s ease, transform .18s var(--k-spring), opacity .15s ease; }
.k-setup-step:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-lime) 40%, transparent); transform: translateY(-1px); }
.k-setup-step > span { flex: 1; min-width: 0; }
.k-setup-step i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
                  box-shadow: inset 0 0 0 1.5px var(--k-n38b); color: var(--k-on-lime); font-style: normal; }
.k-setup-step.is-done { opacity: .55; background: none; box-shadow: none; }
.k-setup-step.is-done i { background: var(--k-lime); box-shadow: none; }
.k-setup-step i .ui-icon { width: 12px; height: 12px; stroke-width: 3; }
.k-setup-step > .ui-icon { color: var(--k-n53); opacity: 0; transition: opacity .15s ease, transform .18s var(--k-spring); }
.k-setup-step:hover > .ui-icon { opacity: 1; color: var(--k-lime); transform: translateX(2px); }
.k-setup-step b { display: block; color: var(--k-n86); font: 700 13.5px/1.25 var(--k-font); }
.k-setup-step small { display: block; margin-top: 2px; color: var(--k-n53); font: 500 12px/1.3 var(--k-font); }
.k-setup-step.is-done b { text-decoration: line-through; }
.k-setup-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 760px) { .k-setup { display: none; } }

/* the checklist's drawing, on a fading dot grid like Share's */
.k-setup-art { position: relative; margin: -4px -6px 10px; padding: 8px 0 4px; }
.k-setup-art::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 1px 1px, var(--k-n34) 1.1px, transparent 1.6px) 0 0 / 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 35%, transparent 100%); pointer-events: none; }
.k-setup-art .ui-art { position: relative; max-width: 290px; }

/* the checklist's close, top right */
.k-setup-pop { position: relative; }
.k-setup-x { position: absolute; top: -4px; right: -4px; z-index: 2; }
.k-setup-x.ui-pill { --h: 28px; background: var(--k-solid-ink) !important; color: var(--k-sheet) !important; }
.k-setup-x.ui-pill:hover { background: var(--k-danger-soft) !important; color: var(--k-danger) !important; }

/* Reminders & mail: a large panel like Share; its drawing only on Coming up */
.k-mail-panel.ui-panel.ui-sheet { width: min(860px, 100%); height: min(660px, 100%); }
.k-mail-panel:not([data-tab="coming"]) .ui-panel-art { display: none; }
.k-mail-panel .ui-panel-art { position: relative; display: flex; justify-content: center; margin: 0 40px 14px 0; padding: 12px 0 8px; }
.k-mail-panel .ui-panel-art::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 1px 1px, var(--k-n34) 1.1px, transparent 1.6px) 0 0 / 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%); pointer-events: none; }
.k-mail-panel .ui-panel-art .ui-art { position: relative; max-width: 420px; }