/* The Clearlooks application window, shared by the icon viewer (viewer/static/index.html) and the website's
   homepage (homepage/template.html): the desktop, the frame with its title bar, the menu bar and its menus, the
   status bar with the resize grip, buttons, check and radio marks, the tooltip and the About dialog. This file
   is the layout; clearlooks.css, loaded after it, is the paint. The scripted parts are in window.js. */
:root { --bg: #fff; --fg: #222; --line: #ddd; --muted: #777; --hover: #f2f2f2; --sel: #dce8fa;
        --ctl-bg: #fff; --ctl-border: #888; --ctl-hover: #eef4ff; --accent: #4a90e2; --desktop: #76848f; --fallback: #c01c28; }
body.dark { --bg: #2b2b2b; --fg: #eee; --line: #444; --muted: #aaa; --hover: #363636; --sel: #3a4a63;
            --ctl-bg: #353535; --ctl-border: #6a6a6a; --ctl-hover: #3d4654; --desktop: #23282e; --fallback: #f47067;
            color-scheme: dark; }   /* checkboxes and scrollbars follow */
/* The page is drawn as one application window on a desktop: title bar, menu bar, client area, status bar. The
   Maximize button drops the desktop margin. */
body { margin: 0; height: 100vh; box-sizing: border-box; padding: 16px; font: 13px/1.4 system-ui, sans-serif; background: var(--desktop); color: var(--fg); }
body.maximized { padding: 0; }
.window { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--bg); border: 1px solid var(--ctl-border); }
/* Title bar: window icon, centred title, minimize / maximize / close. The button glyphs are inline SVG: each
   `.o` shape is a dark outline behind the `.i` shape (invisible here, coloured by the Clearlooks sheet). */
.titlebar { display: flex; align-items: center; gap: 4px; height: 23px; padding: 0 4px 0 5px; background: var(--hover);
            border-bottom: 1px solid var(--line); font-weight: bold; user-select: none; }
.wm-icon { flex: none; }
.wm-title { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-buttons { display: flex; gap: 2px; }
button.wm-button { width: 19px; height: 19px; padding: 0; border: 1px solid var(--ctl-border); border-radius: 3px; background: var(--ctl-bg); color: var(--fg); }
.wm-button svg { display: block; width: 9px; height: 9px; margin: auto; overflow: visible; }
.wm-button .o { fill: none; stroke: var(--wm-glyph-outline, transparent); }
.wm-button .i { fill: none; stroke: currentColor; }
.wm-button .filled { fill: currentColor; stroke: none; }
#wm-maximize .restore, body.maximized #wm-maximize .maximize { display: none; }   /* one glyph per state */
body.maximized #wm-maximize .restore { display: inline; }
/* Menu bar; the menus themselves are built by script when they open. */
.menubar { display: flex; position: relative; padding: 0 2px; border-bottom: 1px solid var(--line); user-select: none; }
.menu-title { padding: 2px 7px; margin: 1px 0; line-height: 17px; border-radius: 3px; cursor: default; }
.menu-title.open { background: var(--sel); }
.menu { position: absolute; top: 100%; z-index: 20; min-width: 12rem; padding: 3px; background: var(--ctl-bg); border: 1px solid var(--ctl-border);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); user-select: none; }
.context-menu { position: fixed; }   /* at the pointer (openContextMenu sets left and top) */
.menu-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 3px; white-space: nowrap; cursor: default; }
.menu-item .slot { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }   /* icon or check mark; both, in two columns, when an item has both */
.menu-item .accel { margin-left: auto; padding-left: 24px; }
.menu-item:hover:not(.disabled) { background: var(--sel); }
.menu-item.disabled { color: var(--muted); }
.menu-sep { border-top: 1px solid var(--line); margin: 3px 0; }
/* Status bar: a message and a resize grip (drawn by the Clearlooks sheet). */
.statusbar { display: flex; align-items: center; min-height: 22px; padding: 2px 6px; border-top: 1px solid var(--line); }
.grip { flex: none; width: 18px; height: 18px; margin-left: 8px; align-self: flex-end; }
/* The one tooltip of the page (script shows it for every `title`; a page may add a card of its own). */
.tooltip { position: fixed; inset: auto; margin: 0; overflow: visible; z-index: 1100;   /* a popover (showTip): no browser popover placement, box or scrolling; the z-index for browsers without them */ display: flex; gap: 12px; max-width: 480px; padding: 5px 7px; font-size: 12px; line-height: 1.35;
           white-space: pre-line; background: var(--ctl-bg); color: var(--fg); border: 1px solid var(--ctl-border); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
           pointer-events: none; }
.tooltip[hidden] { display: none; }
/* About dialog: a small window of its own, with the same title bar. */
/* overflow: the title bar overlaps the frame border, which the browser's default overflow: auto for a modal
   dialog would turn into a scrollbar */
dialog { padding: 0; border: 1px solid var(--ctl-border); background: var(--bg); color: var(--fg); overflow: visible; }
dialog::backdrop { background: transparent; }
.about { padding: 12px 24px 16px; text-align: center; }
.about img { display: block; margin: 0 auto 8px; }
.about h2 { margin: 0 0 6px; font-size: 18px; }
.about p { margin: 0 0 6px; }
/* GTK 2's GtkAboutDialog: Credits and License buttons at the left of the button row, Close at the right, each of
   the two opening a tool window (installAbout). */
.about .buttons { display: flex; gap: 6px; margin-top: 16px; }
.about .buttons .close { margin-left: auto; }
/* A button's icon sits on its text line, never on a line of its own (a flex item may be squeezed to its min-content). */
.buttons button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.buttons button img { margin: 0; }
/* Tool windows (Help > Icon Themes, Credits, License, a file's properties): a title bar, a body that scrolls when the
   window would outgrow the screen, a Close button; laid out like the detail window on a phone. */
.tool-window[open] { display: flex; flex-direction: column; box-sizing: border-box; width: 600px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); }
.tool-window > .titlebar, .tool-window > .buttons { flex: none; }
.tool-window .buttons { text-align: right; padding: 8px 12px; border-top: 1px solid var(--line); }
.tool-window > .scrollbox { flex: 1 1 auto; min-height: 0; }   /* the body in its scroll box (toolWindow) */
.tool-window .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 8px; }
/* Rows with an icon (the Icon Themes, Credits and License windows): a 32 px icon, a name, a line or two under it,
   group titles between; a row marked `derived` hangs under the one before it (a Blue* theme under its base). */
.rows .group { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rows .item { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.rows .item.derived { margin-left: 42px; border-top-style: dashed; }
.rows .item > img { grid-row: 1 / 4; display: block; box-sizing: border-box; }
.rows .item > img.on-dark { padding: 3px; border-radius: 3px; background: #3c3b37; }   /* panel glyphs are light */
.rows .name { font-weight: 600; }
.rows .name small { font-weight: normal; color: var(--muted); }
.rows .blurb, .rows .source { font-size: 12px; color: var(--muted); }
.rows .blurb ul { margin: 2px 0 0; padding-left: 16px; }   /* a few short points under a name */
.rows .blurb li { margin: 1px 0; }
.rows .source a { margin-right: 10px; }
.rows .source code { overflow-wrap: anywhere; }
.rows .more { margin-top: 12px; font-size: 12px; color: var(--muted); }
.rows button { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 0.1rem 0.5rem; font-size: 11px; }   /* a small button in a row's text, with its icon */
.rows button img { margin: 0; }
/* A GtkExpander: a triangle before its label, turned when open; here the License window's texts. */
details.expander > summary { list-style: none; cursor: pointer; margin-top: 4px; color: var(--fg); }
details.expander > summary::-webkit-details-marker { display: none; }
details.expander > summary::before { content: "\25B8"; display: inline-block; width: 12px; }
details.expander[open] > summary::before { content: "\25BE"; }
details.expander .expander-box { margin-top: 6px; }   /* the text in a scroll box (installScrollbars, the pre being a .scroller), its bar beside the frame */
details.expander pre { max-height: 240px; overflow-y: auto; margin: 0; padding: 8px; border: 1px solid var(--line); background: var(--ctl-bg); color: var(--fg); font-size: 11px; white-space: pre-wrap; }
/* An entry with a clear button at its right end (a GtkEntry's secondary icon), shown once there is text. The button
   is a square inside the entry's border, as tall as the entry is inside it, with the icon centred in it: so the icon
   is as far from the top and bottom edges as from the right one, whatever the font. Its width is written out (the
   line height plus the vertical padding) rather than left to aspect-ratio, which an absolutely placed box may not
   honour. The input keeps its text 4 px clear of the square. */
.entry { position: relative; display: flex; }
.entry input { flex: 1; min-width: 0; padding-right: calc(1.4em + 0.8rem + 4px); }
.entry .clear { position: absolute; inset: 1px 1px 1px auto; width: calc(1.4em + 0.8rem); display: none; align-items: center; justify-content: center;
                padding: 0; border: 0; border-radius: 3px; background: none; box-shadow: none; cursor: pointer; }
.entry:has(input:not(:placeholder-shown)) .clear { display: flex; }
.entry .clear:hover, .entry .clear:active { background: var(--hover); box-shadow: none; }
.entry .clear img { display: block; margin: 0; }
/* The browser's own clear button of a search box (Chrome draws one) would double the entry's: hidden. */
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* A scrolling box with the page's own scrollbar (scrollbars.js): the scroller in the first column, the bar in a
   15 px second column that is there only while the content overflows, 3 px off the content as GTK's scrolled windows
   keep theirs; the native bar is hidden. The bar's parts draw their own frames (GTK's trough-border is 0): the
   steppers rounded at the bar's ends, the trough's long sides, the slider the bar's full width over them. */
.scrollbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.scrollbox > .scroller { min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.scrollbox > .scroller::-webkit-scrollbar { display: none; }
.sbar { display: flex; flex-direction: column; width: 15px; margin-left: 3px; user-select: none; }   /* GTK's slider-width 15, scrollbar-spacing 3 */
.sbar[hidden] { display: none; }
.sbar .trough { flex: 1; position: relative; box-sizing: border-box; min-height: 20px; border: solid var(--ctl-border); border-width: 0 1px; background: var(--hover); }
.sbar .slider { position: absolute; z-index: 1; left: -1px; right: -1px; box-sizing: border-box; border: 1px solid var(--ctl-border); background: var(--sel); }
.sbar .step { flex: none; position: relative; box-sizing: border-box; height: 15px; padding: 0; border: 1px solid var(--ctl-border); border-radius: 0;
              background: var(--ctl-bg); line-height: 0; }   /* stepper-size 15 */
.sbar .step.up { border-radius: 3px 3px 0 0; }
.sbar .step.down { border-radius: 0 0 3px 3px; }
/* The arrow: 7 x 4.25 (GTK's stepper arrow at arrow-scaling 0.5), the text colour through a mask, grey on a disabled
   stepper (nothing further that way). */
.sbar .step::after { content: ""; position: absolute; inset: 0; background: var(--fg); mask: var(--arrow) center / 7px 4.25px no-repeat; -webkit-mask: var(--arrow) center / 7px 4.25px no-repeat; }
.sbar .step:disabled { opacity: 1; }   /* not dimmed like a button: its arrow goes grey instead, as GTK's */
.sbar .step:disabled::after { background: var(--muted); }
.sbar .step.up { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.5 0 7 4.25'%3E%3Cpath d='M-3.5 4.25h7L0 0z'/%3E%3C/svg%3E"); }
.sbar .step.down { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.5 0 7 4.25'%3E%3Cpath d='M-3.5 0h7L0 4.25z'/%3E%3C/svg%3E"); }
/* Check mark drawn by CSS (menu check items, the viewer's filter rows). data-state: unchecked | checked |
   indeterminate. Shares its look with the native checkboxes. */
.check { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--ctl-border); border-radius: 2px;
         background: var(--ctl-bg) no-repeat center / 12px 12px; }
.check[data-state=checked] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.6 2.7 5-6' fill='none' stroke='%234a90e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check[data-state=indeterminate] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='%234a90e2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Radio mark of menu radio items: a circle, a dot when chosen. */
.radio { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--ctl-border); border-radius: 50%; background: var(--ctl-bg); }
.radio[data-state=checked] { background: radial-gradient(circle, var(--fg) 3px, transparent 3.5px), var(--ctl-bg); }
/* Dropdown arrow of a combo box (the viewer's llselect triggers, the homepage's Contents combo): a solid triangle
   in the text colour. */
.arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
/* One control look for buttons, the search box and llselect: same border, radius, padding, focus ring. */
button, input[type=search] { font: inherit; line-height: 1.4; padding: 0.4rem 0.7rem; color: var(--fg); background: var(--ctl-bg);
                             border: 1px solid var(--ctl-border); border-radius: 4px; }
button { cursor: pointer; user-select: none; }
button:hover:not(:disabled) { background: var(--ctl-hover); }
button:active:not(:disabled) { background: var(--sel); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, input[type=search]:focus-visible, .llselect-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }