/* 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; }
}