/* Two quick taps on a phone are two taps, never a zoom (the Mendip App's broadcast, 2026-09-24): iOS zooms on a
   double tap unless told this element never wants it. ELEMENT selectors on purpose (0,0,1), so anything that
   deliberately handles touch itself - the drag grips' touch-action: none - still wins. Not on inputs or textareas:
   double-tapping a word to select it is a gesture people use. Pinch-zoom and scrolling are untouched. */
button, summary, label, [role="button"], a { touch-action: manipulation; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mendip Projects — app chrome. style.css is the estate's shared stylesheet
   (tokens, buttons, forms, cards); tasks.css is the module. This file is only
   the frame around it: the brand bar, the shell (sidebar + page), the login
   box, and what changes inside the Mendip App's frame (body.embedded).
   Layout after Codex's design handover, 2026-09-09 (notes/codex/).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand bar ──────────────────────────────────────────────────────────── */
.topbar { height: 48px; flex: 0 0 48px; background: var(--brand); color: #fff; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.topbar__nav { display: none; background: none; border: 0; color: #fff; opacity: .85; width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.topbar__nav .tk-ico { width: 1.15rem; height: 1.15rem; }
.topbar__nav:hover { opacity: 1; background: rgba(255,255,255,.12); }
html.desktop .topbar__nav { display: inline-flex; }
.topbar__brand { color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; text-decoration: none; }
.topbar__brand span { font-weight: 400; opacity: .9; }
.topbar__brand:hover { text-decoration: none; }
.topbar__user { margin-left: auto; display: flex; align-items: center; gap: .9rem; font-size: .85rem; }
.topbar__name { opacity: .9; }
.topbar__link { color: #fff; opacity: .85; text-decoration: none; }
.topbar__link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 480px) { .topbar__name { display: none; } }

/* Inside the Mendip App's frame (desktop shell tab or phone frame) the shell
   shows where you are; our bar would be a second header, and a Log out
   inside the frame would drop the shared sign-in for the host app too. */
body.embedded .topbar { display: none; }

/* ── The shell: navigation beside the page (desktop) or above it (phone) ── */
.tk-shell { flex: 1; display: flex; min-height: 0; }
html:not(.desktop) .tk-shell { flex-direction: column; }
.tk-shell > .app-main { flex: 1; min-width: 0; }
html.desktop .tk-shell { align-items: stretch; }

/* ── Page container ─────────────────────────────────────────────────────── */
.app-main { padding: 1rem; max-width: 600px; margin: 0 auto; width: 100%; }
html.desktop .app-main { max-width: 900px; padding: 1.4rem 2rem 2rem; }
html.desktop .app-main.dk-wide { max-width: none; margin: 0; padding: 1.2rem 1.6rem 2rem; }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-page { align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 380px; }
.login-box h1 { font-size: 1.25rem; color: var(--brand); margin-bottom: .25rem; }
.login-sub { color: var(--text-muted); font-size: .85rem; margin-bottom: 1rem; }
.login-box .form-control { margin-bottom: .9rem; }
.login-box .btn-block { margin-top: .3rem; }

/* Log out lives in the name's menu, bottom left, while a sidebar shows it (2026-09-25); the top bar keeps it otherwise. */
html.desktop:not(.tk-navless) .topbar__link--hasnav { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   The top bar, Create and Search (George 2026-10-01; shell.js).
   The brand bar keeps Mendip's blue; Create sits after the name and Search in
   the middle do. Inside the Mendip App's frame a desktop gets a
   slim, light version with only the menu button, Create and Search.
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar--shell { gap: .5rem; position: relative; z-index: 60; }
.topbar__nav .tk-ico { width: 1.25rem; height: 1.25rem; }
.topbar__create { position: relative; margin-left: .6rem; }
.topbar__createbtn { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .85rem 0 .6rem; border: 0; border-radius: 999px; background: #fff; color: var(--brand); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.topbar__createbtn .tk-ico { width: 1.05rem; height: 1.05rem; stroke-width: 2.5; }
.topbar__createbtn:hover, .topbar__createbtn[aria-expanded="true"] { background: #e8f4fd; }
.topbar__createbtn:focus-visible, .topbar__searchbtn:focus-visible, .topbar__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.topbar__createmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 13rem; }
.topbar__search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; position: relative; }
.topbar__searchbox { position: relative; display: flex; align-items: center; gap: .45rem; width: min(34rem, 100%); height: 2rem; padding: 0 .55rem 0 .7rem; border-radius: 8px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: text; transition: background .12s, border-color .12s; }
.topbar__searchbox:hover { background: rgba(255,255,255,.22); }
.topbar__searchbox .tk-ico { width: 1rem; height: 1rem; opacity: .85; }
.topbar__searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: inherit; font: inherit; font-size: .88rem; padding: 0; }
.topbar__searchbox input::placeholder { color: rgba(255,255,255,.82); }
.topbar__searchbox input::-webkit-search-cancel-button { display: none; }
.topbar__kbd { font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .02em; padding: .1rem .38rem; border-radius: 4px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); white-space: nowrap; }
.tk-sq--open .topbar__searchbox { background: #fff; border-color: #fff; color: var(--text); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.tk-sq--open .topbar__searchbox input::placeholder { color: var(--text-muted); }
.tk-sq--open .topbar__kbd { background: var(--bg); color: var(--text-muted); }
.topbar__searchbtn { display: none; background: none; border: 0; color: #fff; width: 2.2rem; height: 2.2rem; border-radius: 8px; align-items: center; justify-content: center; cursor: pointer; }
.topbar__searchbtn .tk-ico { width: 1.2rem; height: 1.2rem; }
.topbar--shell .topbar__user { margin-left: 0; flex: 0 0 auto; }
html.desktop .topbar--shell .topbar__brand { flex: 0 0 auto; }

/* The results panel, under the box */
.tk-sq { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(40rem, calc(100vw - 2rem)); max-height: min(78vh, 42rem); display: flex; flex-direction: column; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08); overflow: hidden; z-index: 70; }
.tk-sq[hidden] { display: none; }
.tk-sq__chips, .tk-sq__saved { display: flex; flex-wrap: wrap; gap: .35rem; }
.tk-sq__chips { padding: .65rem .75rem .55rem; border-bottom: 1px solid var(--border); }
.tk-sq__chip { display: inline-flex; align-items: center; gap: .35rem; height: 1.85rem; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.tk-sq__chip .tk-ico { width: .9rem; height: .9rem; color: var(--text-muted); }
.tk-sq__chip:hover { background: var(--bg); text-decoration: none; }
.tk-sq__chip[aria-pressed="true"] { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.tk-sq__chip[aria-pressed="true"] .tk-ico { color: var(--brand); }
.tk-sq__body, .tk-sq__idle { overflow-y: auto; padding: .35rem 0 .45rem; }
.tk-sq__body[hidden], .tk-sq__idle[hidden] { display: none; }
.tk-sq__grp { padding: .25rem 0 .2rem; }
.tk-sq__grp + .tk-sq__grp { border-top: 1px solid #eef0f3; }
.tk-sq__grp[hidden] { display: none; }
.tk-sq__h { display: flex; align-items: center; justify-content: space-between; padding: .45rem .9rem .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.tk-sq__clear { background: none; border: 0; color: var(--brand); font: inherit; font-size: .72rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.tk-sq__saved { padding: .2rem .9rem .5rem; }
.tk-sq__more { display: block; padding: .35rem .9rem .3rem 3.05rem; font-size: .8rem; font-weight: 600; color: var(--brand); }
.tk-sq__more.tk-sr--sel { background: var(--brand-light); text-decoration: none; }
.tk-sq__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .9rem; border-top: 1px solid var(--border); background: #fafbfc; font-size: .76rem; color: var(--text-muted); }
.tk-sq__foot a { font-weight: 700; font-size: .8rem; }
.tk-sq__none { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.8rem 1rem 1.6rem; text-align: center; font-size: .9rem; }
.tk-sq__none span { color: var(--text-muted); font-size: .84rem; }
.tk-sq__none .btn { margin-top: .4rem; }
.tk-sq__skel { padding: .6rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
.tk-sq__skel i { display: block; height: .9rem; border-radius: 4px; background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: tk-skel 1.1s linear infinite; }
.tk-sq__skel i:nth-child(2) { width: 78%; }
.tk-sq__skel i:nth-child(3) { width: 58%; }
@keyframes tk-skel { to { background-position: -200% 0; } }
.tk-sq--busy .topbar__searchbox::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; animation: tk-sqbusy .9s linear infinite; }
@keyframes tk-sqbusy { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* One result row, the same in the panel and on search.php */
.tk-sr { display: flex; align-items: center; gap: .65rem; padding: .45rem .9rem; color: var(--text); text-decoration: none; min-height: 2.7rem; }
.tk-sr:hover, .tk-sr--sel { background: var(--brand-light); text-decoration: none; }
.tk-sr__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.tk-sr__t { font-size: .9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sr__t small { color: var(--text-muted); font-weight: 600; font-size: .72rem; margin-left: .25rem; }
.tk-sr__t--body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .86rem; }
.tk-sr__sub { font-size: .76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .3rem; }
.tk-sr mark { background: #fff1b8; color: inherit; border-radius: 2px; padding: 0 .05em; font-weight: 700; }
.tk-sr__tick { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid #b8c0cb; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.tk-sr__tick .tk-ico { width: .7rem; height: .7rem; stroke-width: 3; }
.tk-sr__tick--done { background: var(--success); border-color: var(--success); color: #fff; }
.tk-sr--done .tk-sr__t { color: var(--text-muted); }
.tk-sr--archived .tk-sr__t { color: var(--text-muted); font-style: italic; }
.tk-sr__sq { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 5px; background: var(--pj, #6b7a86); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.tk-sr__sq .tk-ico { width: .85rem; height: .85rem; }
.tk-sr__dot { width: .55rem; height: .55rem; border-radius: 2px; background: var(--pj, #6b7a86); flex: none; }
.tk-sr__qi { flex: 0 0 auto; width: 1.15rem; display: inline-flex; justify-content: center; color: var(--text-muted); }
.tk-sr__qi .tk-ico { width: .95rem; height: .95rem; }
.tk-sr .tk-due { flex: 0 0 auto; }
.tk-sr .tk-avatar { width: 1.5rem; height: 1.5rem; font-size: .58rem; }

/* Menus (Create, and every ⋯ the shell draws), tooltips with keys, keys themselves */
.tk-menu { background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.06); padding: .3rem; z-index: 990; color: var(--text); }
.tk-menu[hidden] { display: none; }
.tk-menu--float { position: fixed; min-width: 13.5rem; max-width: 20rem; max-height: 70vh; overflow-y: auto; }
.tk-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .48rem .6rem; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .86rem; color: inherit; text-align: left; cursor: pointer; }
.tk-menu__item > span:not(.tk-menu__ck) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-menu__item:hover, .tk-menu__item:focus-visible { background: var(--brand-light); outline: none; }
.tk-menu__item .tk-ico { width: 1rem; height: 1rem; color: var(--text-muted); }
.tk-menu__item--danger { color: var(--danger); }
.tk-menu__item--danger:hover, .tk-menu__item--danger:focus-visible { background: var(--danger-bg); }
.tk-menu__ck { width: .9rem; flex: none; color: var(--brand); font-weight: 700; }
.tk-menu__h { padding: .45rem .6rem .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.tk-menu__sep { height: 1px; background: var(--border); margin: .3rem .2rem; }
.tk-menu kbd, .tk-tip kbd, .tk-keys kbd, .tk-sq__foot kbd, .tk-dlg kbd, kbd.tk-kbd { display: inline-block; min-width: 1.35em; padding: .05rem .35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: inherit; font-size: .7rem; font-weight: 700; line-height: 1.35; text-align: center; color: var(--text-muted); }
.tk-tip { position: fixed; z-index: 1000; max-width: 18rem; padding: .32rem .55rem; border-radius: 6px; background: #1f2633; color: #fff; font-size: .76rem; font-weight: 500; line-height: 1.35; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tk-tip[hidden] { display: none; }
.tk-tip kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; margin-left: .15rem; }

/* The dialog Create opens, and the shortcuts list */
.tk-dlg { position: fixed; inset: 0; z-index: 995; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 1rem 1rem; }
.tk-dlg__scrim { position: absolute; inset: 0; background: rgba(16,24,40,.38); animation: tk-fadein .12s ease-out; }
.tk-dlg__box { position: relative; width: min(34rem, 100%); max-height: 84vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(16,24,40,.28); animation: tk-dlgin .16s cubic-bezier(.2,.8,.2,1); }
@keyframes tk-fadein { from { opacity: 0; } }
@keyframes tk-dlgin { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.tk-dlg__head { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.2rem .3rem; }
.tk-dlg__head h2 { font-size: 1.05rem; font-weight: 700; }
.tk-dlg__x { background: none; border: 0; width: 2rem; height: 2rem; border-radius: 6px; font-size: 1.4rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.tk-dlg__x:hover { background: var(--bg); color: var(--text); }
.tk-dlg__body { padding: .4rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.tk-dlg__lead { font-size: .86rem; color: var(--text-muted); margin-bottom: .4rem; }
.tk-dlg__l { font-size: .76rem; font-weight: 700; color: var(--text-muted); margin-top: .45rem; }
.tk-dlg__l small { font-weight: 500; }
.tk-dlg input[type=text], .tk-dlg input[type=date], .tk-dlg select, .tk-dlg textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; font: inherit; font-size: .92rem; background: #fff; }
.tk-dlg input:focus, .tk-dlg select:focus, .tk-dlg textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,94,133,.14); }
.tk-dlg .tk-dlg__title { font-size: 1.12rem; font-weight: 600; padding: .6rem .7rem; }
.tk-dlg__grid { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .45rem .7rem; margin-top: .55rem; }
.tk-dlg__grid .tk-dlg__l { margin: 0; }
.tk-dlg__grid select:disabled { background: var(--bg); color: var(--text-muted); }
.tk-dlg__err { margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: .86rem; }
.tk-dlg__err[hidden] { display: none; }
.tk-dlg__acts { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.tk-dlg__hint { margin-right: auto; font-size: .76rem; color: var(--text-muted); }
.tk-dlg__hint kbd { margin-right: .15rem; }
.tk-dlg .tk-swatches { margin: .1rem 0 .1rem; }
.tk-dlg .tk-check { margin-top: .55rem; font-size: .88rem; }
.btn--busy { opacity: .7; cursor: progress; }
body.tk-dlg-on { overflow: hidden; }
.tk-keys { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; align-items: center; font-size: .9rem; }
.tk-keys dt { white-space: nowrap; color: var(--text-muted); font-size: .8rem; }
.tk-keys dt kbd + kbd { margin-left: .2rem; }
.tk-keys dd { margin: 0; }
.tk-toast--shell { z-index: 999; }
.tk-toast--shell a.tk-toast__undo { color: #9fd3ff; font-weight: 700; text-decoration: none; }

/* A phone: two icon buttons, and Search opens as a full screen of its own */
html:not(.desktop) .topbar__create { margin-left: auto; }
html:not(.desktop) .topbar__createbtn { width: 2.2rem; padding: 0; justify-content: center; background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
html:not(.desktop) .topbar__createbtn span { display: none; }
html:not(.desktop) .topbar__search { flex: 0 0 auto; position: static; }
html:not(.desktop) .topbar__searchbox { display: none; }
html:not(.desktop) .topbar__searchbtn { display: inline-flex; }
html:not(.desktop) .topbar--shell .topbar__user { display: none; }
html:not(.desktop) .tk-sq--open { position: fixed; inset: 0; z-index: 990; background: #fff; display: flex; flex-direction: column; }
html:not(.desktop) .tk-sq--open .topbar__searchbtn { display: none; }
html:not(.desktop) .tk-sq--open .topbar__searchbox { display: flex; width: auto; margin: .6rem .75rem 0; height: 2.75rem; background: var(--bg); border-color: var(--border); color: var(--text); }
html:not(.desktop) .tk-sq--open .topbar__searchbox input { font-size: 1rem; }
.topbar__searchx { display: none; }
html:not(.desktop) .tk-sq--open .topbar__searchbox { margin-right: 5.2rem; }
html:not(.desktop) .tk-sq--open .topbar__searchx { display: block; position: absolute; top: .6rem; right: .75rem; height: 2.75rem; padding: 0 .2rem; background: none; border: 0; color: var(--brand); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
html:not(.desktop) .tk-sq--open .tk-sq { min-height: 0; min-width: 0; }
html:not(.desktop) .tk-sq--open .topbar__kbd { display: none; }
html:not(.desktop) .tk-sq--open .tk-sq { position: static; transform: none; width: auto; max-height: none; flex: 1; border: 0; border-radius: 0; box-shadow: none; }
html:not(.desktop) .tk-sq__foot span { display: none; }
html:not(.desktop) .tk-sr { min-height: 3.1rem; }
html:not(.desktop) .tk-menu__item { padding: .7rem .7rem; font-size: .95rem; }
html:not(.desktop) .tk-dlg { padding: 0; align-items: flex-end; }
html:not(.desktop) .tk-dlg__box { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
html:not(.desktop) .tk-dlg__hint { display: none; }

/* Inside the Mendip App's frame, on a desktop: a slim light bar - no name, no Log out (David's rules, header.php) */
html.desktop body.embedded .topbar--shell { display: flex; height: 44px; flex-basis: 44px; background: #fff; color: var(--text); border-bottom: 1px solid var(--border); }
html.desktop body.embedded .topbar--shell .topbar__brand, html.desktop body.embedded .topbar--shell .topbar__user { display: none; }
html.desktop body.embedded .topbar--shell .topbar__nav { color: var(--text-muted); }
html.desktop body.embedded .topbar--shell .topbar__nav:hover { background: var(--bg); color: var(--text); }
html.desktop body.embedded .topbar--shell .topbar__createbtn { background: var(--brand); color: #fff; box-shadow: none; }
html.desktop body.embedded .topbar--shell .topbar__createbtn:hover { background: var(--brand-dark); }
html.desktop body.embedded .topbar--shell .topbar__searchbox { background: var(--bg); border-color: var(--border); color: var(--text); }
html.desktop body.embedded .topbar--shell .topbar__searchbox input::placeholder { color: var(--text-muted); }
html.desktop body.embedded .topbar--shell .topbar__kbd { background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
html.desktop body.embedded .topbar--shell .topbar__createbtn:focus-visible, html.desktop body.embedded .topbar--shell .topbar__nav:focus-visible { outline-color: var(--brand); }