/* The Desk page: beside the sidebar, a bar with the dock along the top and the columns below
   (desk-columns.css); one column at a time below 768px. Contract: contracts/pack-desk/rules.md (invariant 8) */
.desk-mode main { max-width: none; padding: 0; }
.desk { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.desk-dock { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 3.25rem; padding: .55rem 1rem; }
.rail-hidden .desk-dock { padding-left: 3.25rem; }
.desk-title { font: 400 1.15rem/1 var(--serif); margin-right: .5rem; }
.desk-caps { display: flex; gap: .4rem; flex-wrap: wrap; }
.desk-dock button { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .8rem; font-size: .85rem; border-radius: 999px; background: var(--sheet); }
.desk-dock button:hover { background: var(--hover); }
.desk-note { color: var(--mute); font-size: .85rem; margin-left: auto; }
.desk-dock .dc-reset { background: transparent; border-color: transparent; color: var(--mute); }
.desk-dock .dc-reset:hover { color: var(--ink); }
.desk-dock .dc-reset .icon { width: 1rem; height: 1rem; }

/* The greeting, as the Claude app's home has, while nothing is open. */
.desk-empty { margin: auto; padding: 2rem 1rem; text-align: center; }
.desk-empty h2 { display: inline-flex; align-items: center; gap: .8rem; font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 .6rem; }
.desk-empty .mark { width: 2.1rem; height: 2.1rem; border-radius: 10px; font-size: 1.35rem; }
.desk-empty .sub { max-width: 26rem; margin: 0 auto; }

main.narrow .desk-dock { padding: .55rem .5rem .55rem 3.25rem; }
main.narrow .desk-note { flex-basis: 100%; margin: 0; }
main.narrow .desk-note:empty { display: none; }
main.narrow .dc-reset { display: none; }
@media (max-width: 720px) { .desk-mode main { padding-top: 0; } }