/* The Desk's columns of rows: panes as sheets on the page, quiet dividers that warm to the clay
   accent when grabbed, a strip for a collapsed column. Contract: contracts/pack-desk/rules.md (invariant 8) */
.dc-cols { position: relative; flex: 1; min-height: 0; display: flex; padding: 0 .75rem .75rem; overflow-x: auto; overscroll-behavior: contain; }
.dc-col { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; min-height: 0; transition: flex-grow .18s ease; }
.dc-resizing .dc-col, .dc-resizing .dc-pane { transition: none; }
.dc-col.collapsed { flex: 0 0 44px !important; min-width: 44px; }
.dc-col-head { display: flex; align-items: center; gap: .15rem; height: 2.25rem; padding: 0 .25rem 0 .5rem; user-select: none; }
.dc-col-name { flex: 1; min-width: 0; color: var(--mute); font-size: .78rem; font-weight: 500; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-col-head .dc-tools { display: inline-flex; gap: .1rem; opacity: 0; transition: opacity .12s; }
.dc-col:hover .dc-col-head .dc-tools, .dc-col-head:focus-within .dc-tools { opacity: 1; }
.dc-col.collapsed .dc-col-head { flex-direction: column-reverse; justify-content: flex-end; height: auto; padding: .35rem 0; gap: .6rem; cursor: pointer; }
.dc-col.collapsed .dc-col-name { writing-mode: vertical-rl; flex: none; font-size: .82rem; color: var(--ink); }
.dc-col.collapsed .dc-tools, .dc-col.collapsed .dc-col-body { display: none; }
.dc-col.collapsed { background: var(--side); border: 1px solid var(--rule); border-radius: var(--radius); margin-top: 2.25rem; }
.dc-col.dc-flash .dc-col-body > .dc-pane { animation: dc-flash 1s ease; }
@keyframes dc-flash { 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); } }

.dc-col-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.dc-pane { flex: 1 1 0; min-height: 120px; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: flex-grow .18s ease, opacity .15s; }
.dc-pane.collapsed { flex: 0 0 auto !important; min-height: 0; }
.dc-pane.collapsed .dc-pane-body { display: none; }
.dc-pane.slot { background: transparent; border-style: dashed; box-shadow: none; }
.dc-pane.lifted { opacity: .45; }
.dc-pane.listening { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow); }
.dc-pane-head { display: flex; align-items: center; gap: .15rem; min-height: 2.4rem; padding: .3rem .3rem .3rem .9rem; border-bottom: 1px solid var(--rule);
  cursor: grab; user-select: none; touch-action: none; }
.dc-pane.collapsed .dc-pane-head { border-bottom: 0; }
.dc-dragging, .dc-dragging * { cursor: grabbing !important; }
.dc-pane-title { flex: 1; min-width: 0; margin: 0; font: 500 .9rem/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-pane.listening .dc-pane-title::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%;
  background: var(--accent); vertical-align: .08em; }
.dc-pane-head .dc-tools { display: inline-flex; gap: .05rem; }
.dc-pane-body { flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.1rem; }
.dc-pane.bare .dc-pane-body { padding: 0; }
.dc-slot, .dc-slot > div { height: 100%; }
.dc-pane-body .dk-page { height: 100%; min-height: 10rem; }
.dc-btn { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--mute); }
.dc-btn:hover { color: var(--ink); background: var(--hover); opacity: 1; }
.dc-btn .icon { width: 1rem; height: 1rem; }

/* Fill the Desk with one pane for a while; Esc puts it back. */
.dc-cols.has-max .dc-pane.max { position: absolute; inset: 0 .75rem .75rem; z-index: 20; }

/* Dividers: a wide grab area, a hairline that warms when held. */
.dc-div { flex: none; position: relative; touch-action: none; outline: none; }
.dc-div-x { width: 12px; cursor: col-resize; }
.dc-div-y { height: 10px; cursor: row-resize; }
.dc-div::after { content: ""; position: absolute; border-radius: 2px; background: transparent; transition: background .12s; }
.dc-div-x::after { top: 2.6rem; bottom: .5rem; left: 5px; width: 2px; }
.dc-div-y::after { left: 1.5rem; right: 1.5rem; top: 4px; height: 2px; }
.dc-div:hover::after { background: var(--rule); }
.dc-div.active::after, .dc-div:focus-visible::after { background: var(--accent); }
.dc-div[aria-disabled] { cursor: default; pointer-events: none; }
.dc-resizing-x, .dc-resizing-x * { cursor: col-resize !important; user-select: none; }
.dc-resizing-y, .dc-resizing-y * { cursor: row-resize !important; user-select: none; }
.dc-resizing iframe, .dc-dragging iframe { pointer-events: none; } /* the pointer must not vanish into a page */

.dc-drop { position: fixed; z-index: 100; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.dc-ghost { position: fixed; z-index: 101; max-width: 16rem; padding: .35rem .75rem; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: var(--shadow); }

.dc-empty { display: grid; gap: .6rem; justify-items: center; align-content: center; height: 100%; padding: 1.5rem; text-align: center; color: var(--mute); }
.dc-empty h3 { margin: 0; font: 400 1.25rem/1.2 var(--serif); color: var(--ink); }
.dc-empty p { margin: 0; max-width: 22rem; }
.dc-empty.small { font-size: .88rem; }
.dc-col-body > .dc-empty.small { border: 1px dashed var(--rule); border-radius: var(--radius); }
.dc-col-body > .desk-empty { display: grid; align-content: center; height: 100%; }
.dc-slot-tools { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.dc-slot-tools button { padding: .28rem .75rem; font-size: .82rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); color: var(--ink); }
.dc-quiet { color: var(--mute); padding: 1rem; }

/* The phone: a segmented switcher like the Claude app's, one column (or pane) at a time. */
.dc-phone { display: grid; gap: .4rem; padding: 0 .5rem .5rem; }
.dc-phone[hidden] { display: none; }
.dc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 11px; background: var(--hover); }
.dc-tab { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .4rem .5rem; border: 0; border-radius: 8px; background: transparent;
  color: var(--mute); font-size: .88rem; font-weight: 500; }
.dc-tab[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.dc-tab-count { min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; line-height: 1.2rem; }
.dc-chips { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.dc-chips[hidden] { display: none; }
.dc-chip { flex: none; max-width: 12rem; padding: .28rem .75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); color: var(--mute); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chip[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
main.narrow .dc-fold, main.narrow .dc-grow { display: none; }
main.narrow .dc-cols { padding: 0; overflow: hidden; }
main.narrow .dc-div, main.narrow .dc-col-head { display: none; }
main.narrow .dc-col { display: none; flex: 1 1 auto !important; min-width: 0; margin: 0; }
main.narrow .dc-col.ph-on { display: flex; }
main.narrow .dc-col.collapsed .dc-col-body { display: flex; }
main.narrow .dc-col.collapsed { background: none; border: 0; }
main.narrow .dc-pane { border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
main.narrow .dc-pane:not(.ph-on) { display: none; }
main.narrow .dc-pane-head { cursor: default; }
main.narrow .dc-btn { width: 2.25rem; height: 2.25rem; }
main.narrow .dc-pane.collapsed .dc-pane-body { display: block; }
main.narrow .dc-pane.slot { display: none; }
@media (prefers-reduced-motion: reduce) { .dc-col, .dc-pane { transition: none; } .dc-col.dc-flash .dc-col-body > .dc-pane { animation: none; } }