/* the window: a yellow tab, a toolbar, and below it the page in a list column and a sheet of
   paper. the window stays put while what's in it scrolls, but it's still the page that
   scrolls: the head and foot stick to the viewport and the content passes under them. */

.desk { max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.win { min-width: 0; }

/* the head and foot reach past the window's sides so the shadow scrolling under them is
   covered too */
.win-head, .win-foot { position: sticky; z-index: 10; margin: 0 -18px; padding: 0 18px; background: var(--desk-bg); }
.win-head { top: 0; padding-top: 22px; }
.win-foot { bottom: 0; padding-bottom: 24px; }

.frame-top, .frame, .lip {
  background: var(--chrome);
  border: 1px solid var(--edge);
  box-shadow: inset 1px 0 0 var(--hi), inset -1px 0 0 var(--lo), 6px 0 10px -6px var(--shadow);
}
.frame-top {
  border-bottom: 0; border-radius: var(--r-box) var(--r-box) 0 0;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px 0 0 var(--lo), 6px 0 10px -6px var(--shadow);
}
.frame { border-top: 0; border-bottom: 0; }

/* lips: the window's padding above and below the content, with the paper's own top and
   bottom edges drawn in them, so the content seems to scroll inside the paper */
.lip {
  display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr); gap: 10px;
  height: 10px; padding: 0 10px; border-top: 0; border-bottom: 0;
}
.lip.solo { grid-template-columns: minmax(0, 1fr); }
.lip.solo .l, .lip.none .l, .lip.none .p { display: none; }
.lip .p { height: 2px; background: var(--paper); border: 1px solid var(--edge); }
.lip.top .p {
  align-self: end; border-bottom: 0; border-radius: var(--r-box) var(--r-box) 0 0;
  box-shadow: inset 1px 1px 0 var(--lo-deep), inset -1px 0 0 var(--hi);
}
.lip.bot {
  height: 11px; border-bottom: 1px solid var(--edge); border-radius: 0 0 var(--r-box) var(--r-box);
  box-shadow: inset 1px 0 0 var(--hi), inset -1px -1px 0 var(--lo), 6px 6px 12px -6px var(--shadow);
}
.lip.bot .p {
  align-self: start; border-top: 0; border-radius: 0 0 var(--r-box) var(--r-box);
  box-shadow: inset 1px 0 0 var(--lo-deep), inset -1px -1px 0 var(--hi);
}

/* the tab sits on the frame's top edge, it isn't a separate box above it */
.tab {
  position: relative; z-index: 1; margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%;
  padding: 3px 12px 3px 6px;
  font-weight: 700; font-size: 13px; color: var(--tab-text); text-decoration: none;
  background: var(--grad-tab);
  border: 1px solid var(--edge); border-bottom: none; border-radius: 3px 3px 0 0;
  box-shadow: inset 1px 1px 0 var(--tab-hi), inset -1px 0 0 var(--tab-lo);
}
.tab .icon { margin: -4px 0; }

.tb {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--grad-bar);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--hi), inset 0 -1px 0 var(--lo);
}
.tb > .btn { padding: 3px 10px; }
.tb > .btn:active { padding: 4px 9px 2px 11px; }
.tb .sep { width: 2px; align-self: stretch; margin: 2px 4px; border-left: 1px solid var(--etch); border-right: 1px solid var(--hi); }

/* a page: the list column beside the paper */
.pane {
  display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr); gap: 10px;
  padding: 0 10px; align-items: start;
}
.pane.solo { grid-template-columns: minmax(0, 1fr); }
.paper {
  min-width: 0; min-height: calc(100vh - var(--head-h) - var(--foot-h));
  background: var(--paper);
  border: 1px solid var(--edge); border-top: 0; border-bottom: 0;
  box-shadow: inset 1px 0 0 var(--lo-deep), inset -1px 0 0 var(--hi);
}

@media (max-width: 760px) {
  /* a phone is all window: it just scrolls, with the window's edges in the flow */
  .desk { padding: 0 8px; }
  .win-head, .win-foot { position: static; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
  .win-head { padding-top: 10px; }
  .lip { height: 6px; }
  .lip.bot { height: 7px; }
  .lip .l, .lip .p { display: none; }
  .tb { gap: 4px; }
  .tb .sep { display: none; }
  .pane { grid-template-columns: minmax(0, 1fr); padding: 0 6px; }
  .pane > .side { display: none; }
  .paper { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-radius: var(--r-box); box-shadow: var(--well-edge); min-height: 0; }
}