/* YOUR DASHBOARD (nav/desk.js): Home's one place for what you're in the middle of and what you keep close. Its boxes are the
   shared named lists (nav/ui.css: .ui-list, .ui-list-h); what's its own: the things in a section, as pills to tap; the
   arranging (dashed edges, a × on each thing, the grips, the place a dragged thing will land); and the menu from an
   app's top bar */
.dk { display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; min-width: 0; }
.dk[hidden] { display: none; }
.dk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 2px; }
.dk-title { font: 700 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.dk-arrange { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 999px; background: none; color: var(--muted); font: 700 13px var(--sans); cursor: pointer; }
.dk-arrange svg { width: 14px; height: 14px; }
@media (hover: hover) { .dk-arrange:hover { color: var(--ink); border-color: var(--gold); } }
.dk-done { min-height: 36px; padding: 0 18px; font-size: 14px; }
.dk-tip { margin: -4px 2px 0; font: 13px/1.5 var(--sans); color: var(--muted); }
.dk-secs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* (two side by side where there's room: a computer, a tablet, a phone on its side) */
/* (each in its column right under the one above it, as a page's columns fill, not in rows as tall as the taller of two:
   rows of 4px, and each section as many of them as its height and the gap under it (nav/desk.js, pack). From the owner:
   "Can you fix the gap between the sections issue in landscape view") */
@media (min-width: 760px) { .dk-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: 12px; row-gap: 0; align-items: start; } .dk-secs > .dk-sslot { grid-column: auto; } }
.dk-sec { min-width: 0; }
/* (a section's name: its fold, a tap; while arranging, a grip, the name to rename, ↑ ↓ and ×) */
.dk-h { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px 4px; border: none; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dk-fold { display: flex; align-items: center; gap: 8px; color: inherit; }
.dk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.dk-n { font: 700 12px var(--sans); color: var(--muted); }
.dk-fold > i { flex: none; margin-left: auto; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(2px) rotate(-135deg); transition: transform 0.15s ease; }
.dk-sec.is-shut .dk-fold { padding-bottom: 12px; }
.dk-sec.is-shut .dk-fold > i { transform: translateY(-2px) rotate(45deg); }
.dk-line { display: block; padding: 0 14px 2px; margin-top: -2px; font: 500 12.5px/1.35 var(--sans); color: var(--muted); }
.dk-body { min-width: 0; padding-bottom: 4px; }
/* (your own section's things: pills, wrapping; each its icon (or its word, lit, when what's Up next is waiting) and name) */
.dk-items { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 12px; min-width: 0; }
.dk-item { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 40px; padding: 7px 14px 7px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.dk-item > span:not(.dk-x) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-ic { flex: none; display: grid; place-items: center; color: var(--gold); }
.dk-ic svg { width: 16px; height: 16px; }
.dk-kick { flex: none; font: 800 10px var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.dk-item.is-lit { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); }
.dk-item.is-quiet { color: var(--muted); border-style: dashed; }
@media (hover: hover) { .dk:not(.is-arr) .dk-item:hover { border-color: var(--gold); } }
.dk-item:active { transform: scale(0.97); }
.dk-add { border-style: dashed; color: var(--muted); }
.dk-add svg { width: 14px; height: 14px; }
.dk-empty { margin: -4px 14px 12px; font: 13px/1.5 var(--sans); color: var(--muted); }
.dk-more { display: block; margin: -2px 14px 10px auto; padding: 4px 0; border: none; background: none; color: var(--gold); font: 700 13px var(--sans); cursor: pointer; }
/* (a section that fills itself: its rows, as Home's always were; Your goals without its own name, as the section says it) */
.dk .dk-sec .hy-list.hy-list { margin-top: 6px; border: none; border-top: 1px solid var(--rule); border-radius: 0; background: none; } /* (its rows in its box: not a box of their own (nav/ui.css)) */
.dk-sec .gl-home { border: none; border-radius: 0; background: none; padding: 4px 14px 10px; }
.dk-sec .gl-home-h { display: none; }
/* (a part of the page among the sections (Desk.hold): Home's Bible on a wide screen, as it is, no box of its own, under its
   name as Home's groups are named; while arranging, framed as the others are, and still: held anywhere, it's moved) */
.dk-sec.is-held { border: 1px solid transparent; border-radius: 16px; }
.dk-hold-h { padding: 0 2px 8px; cursor: default; }
.dk-hold-h .dk-name { font: 700 11px var(--sans); letter-spacing: 0.16em; color: var(--gold); }
.dk.is-arr .dk-held { padding: 4px 12px 14px; pointer-events: none; }

/* ---- arranging */
.dk.is-arr .dk-sec { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.dk.is-arr .dk-sec { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* (held anywhere to be moved: not to pick words) */
.dk.is-arr .dk-sec :is(input, select) { cursor: auto; -webkit-user-select: text; user-select: text; }
.dk.is-arr .dk-sec :is(.dk-mv, .dk-secx, .dk-add, .dk-addp, .dk-ed, .dk-keep, .dk-x) { cursor: pointer; }
.dk.is-arr .dk-h { display: flex; align-items: center; gap: 6px; padding: 8px 8px 2px 10px; cursor: default; }
.dk-grip { margin: 0; width: 28px; height: 36px; cursor: grab; touch-action: none; }
.dk.is-arr .dk-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 4px; border: none; background: none; cursor: pointer; }
.dk.is-arr .dk-name svg { flex: none; width: 13px; height: 13px; color: var(--muted); }
.dk-hacts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.dk-mv { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.dk-mv svg { width: 17px; height: 17px; }
.dk-mv:disabled { opacity: 0.3; cursor: default; }
.dk.is-arr .dk-secx { display: grid; margin-right: 0; }
.dk-ren { flex: 1; min-width: 0; min-height: 38px; }
.dk-ren-ok { min-height: 38px; padding: 0 14px; font-size: 14px; }
.dk.is-arr .dk-item { padding-right: 34px; cursor: grab; }
.dk-x { position: absolute; right: 5px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, var(--bg-raised)); color: var(--muted); font: 400 17px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .dk-x:hover { background: color-mix(in srgb, var(--ink) 16%, var(--bg-raised)); color: var(--ink); } }
.dk [data-dk-keep] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* (held to be picked up, not to show the phone's own menu) */
.dk-keeprow { display: flex; align-items: center; }
.dk-keeprow > .hy-item { flex: 1; min-width: 0; }
.dk-keep { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 50%; background: none; color: var(--gold); cursor: pointer; }
.dk-keep svg { width: 16px; height: 16px; }
/* (a thing tapped while arranging: its name, its section, taking it off) */
.dk-ed, .dk-addp { display: flex; flex-direction: column; gap: 10px; margin: 0 10px 12px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.dk-f { display: flex; flex-direction: column; gap: 4px; font: 700 12px var(--sans); color: var(--muted); }
.dk-edb { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-edb .ui-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.dk-addp .ui-label { margin: 2px 0 -4px; }
.dk-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-pick svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.dk-pick > span { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-refrow { display: flex; gap: 8px; }
.dk-refrow .ui-field { flex: 1; min-width: 0; }
.dk-refrow .ui-btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.dk-err { margin: 0; font: 600 13px/1.45 var(--sans); color: #B0413E; }
.dk-apps .ui-row small { white-space: normal; }
.dk-apps .ui-row em { font: 700 13px var(--sans); color: var(--gold); }
.dk-addx { align-self: flex-start; }
.dk-new { align-self: center; gap: 6px; }
.dk-new svg { width: 15px; height: 15px; }
.dk-newp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.dk-newp > :not(.ui-list-h) { margin-left: 14px; margin-right: 14px; }
.dk-newp .dk-tip { margin-top: 0; margin-bottom: -4px; }
/* (dragging: what's picked up rides the finger; where it'll land, dotted; the section it's over, lit) */
.dk-ghost { position: fixed; left: 0; top: 0; z-index: 2147483600; margin: 0; pointer-events: none; opacity: 0.92; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); transition: none; }
.dk-ghost.is-sec { display: block; max-width: none; max-height: 300px; overflow: hidden; border: 0; background: none; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); } /* (a section picked up: itself, in the dashboard's look, its foot fading if it's tall) */
.dk-ghost.is-sec > .dk-sec { margin: 0; border: 1px solid var(--gold) !important; background: var(--bg-raised); box-shadow: none; }
.dk-ghost.dk-item { border-color: var(--gold); }
.dk-lifted { display: none !important; }
.dk-islot { flex: none; height: 40px; border: 2px dashed var(--gold); border-radius: 999px; background: color-mix(in srgb, var(--gold) 8%, transparent); box-sizing: border-box; }
.dk-sslot { border: 2px dashed var(--gold); border-radius: 18px; background: color-mix(in srgb, var(--gold) 6%, transparent); box-sizing: border-box; }
.dk-sec.is-over { border-color: var(--gold); border-style: solid; }
.dk.is-dragging { -webkit-user-select: none; user-select: none; }

/* ---- the menu from an app's top bar: what, and where */
.dk-menu { display: flex; flex-direction: column; gap: 6px; }
.dk-mwhich { margin: 0 6px; }
.dk-mthing { display: flex; align-items: center; gap: 10px; margin: 2px 6px 4px; padding: 10px 8px 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, var(--bg)); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dk-mthing > span:not(.ui-grip) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-mthing b { font: 700 14.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-mthing small { font: 500 12px/1.35 var(--sans); color: var(--muted); }
.dk-mthing .ui-grip { margin: 0; }
.dk-mlist { display: flex; flex-direction: column; }
.dk-mrow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-mrow.is-over { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 2px var(--gold); }
.dk-mrow.is-on { color: var(--ink); }
.dk-mnew { margin: 4px 6px 6px; }
.dk-menu .dk-ghost, .dk-ghost.dk-mthing { width: auto; }

/* ---- the app's button, for your dashboard: lit when what you're on, or the app, is there */
.fav-btn.is-desk.is-on { color: var(--gold); }