/* GNOME 2.x "Clearlooks" look (GTK2 engine, ca. 2008-2010) for the icon viewer.
   Loaded after the page's own <style>, which keeps the layout; this file only repaints it.
   To go back to the plain look, remove the <link> to this file in index.html.
   Colours follow the Clearlooks gtkrc scheme: bg #EDECEB, base #FFFFFF, text #1A1A1A, selected #86ABD9. */

:root {
  --bg: #edeceb; --fg: #1a1a1a; --line: #c9c6c1; --muted: #6b6965; --hover: #e3e1de; --sel: #86abd9;
  --ctl-bg: #ffffff; --ctl-border: #8b8986; --ctl-hover: #f7f6f5; --accent: #86abd9;
  --cl-base: #ffffff; --cl-row-alt: #f4f3f2; --cl-frame: #aaa69f; --cl-frame-in: #a09d9a;   /* --cl-frame-in: a scrolled window's sunken frame, bg x0.665 (shade[5]), a plain 1 px rectangle */ --cl-shine: #ffffff;
  /* The Gummy gradient from clearlooks_draw_gummy.c: fill x1.08 at the top, x1.02 just above the middle,
     the plain fill right below it (a barely visible cut), x0.94 at the bottom. Fills: bg, bg x1.02, bg x0.90. */
  --cl-btn: linear-gradient(#ffffff 0%, #f1f1f0 50%, #edeceb 50%, #dfdedc 100%);
  --cl-btn-hover: linear-gradient(#ffffff 0%, #f6f6f5 50%, #f1f1f0 50%, #e3e3e1 100%);
  --cl-btn-active: linear-gradient(#e6e5e4 0%, #dad8d6 50%, #d6d4d2 50%, #cac7c5 100%);
  /* Top-left inner highlight, plus the engine's one-pixel halo: bg x0.97 all round, bg x0.93 on the right and
     bottom edge only (the first shadow is a 1 px offset copy without spread, so it shows on those two sides). */
  --cl-btn-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), 1px 1px 0 0 #dddbda, 0 0 0 1px #e6e5e4;
  --cl-sel-grad: linear-gradient(#99bae2 0%, #8bafdb 50%, #86abd9 50%, #79a0d1 100%); --cl-sel-fg: #ffffff;   /* selected rows: Gummy gradient on the selection colour, no border */
  --cl-menu-grad: linear-gradient(#a6c3e8 0%, #97b8e1 50%, #92b4df 50%, #84a9d7 100%); --cl-sel-border: #4b6e99;   /* menu items: on spot[1] = sel x1.05, border spot[2] = sel x0.65 */
  --cl-trough: #d6d4d0;
  /* Menu bar, menus, status bar: the engine's bg shades (HSV) shade[3] = x0.82, shade[5] = x0.665, shade[2] = x0.896,
     menubar bottom x0.96, separator highlight x1.065, status bar highlight = shade[3] x1.4. The grip: 10 dots, each a
     dark shade[4] pixel with a 2x2 highlight, 3 px apart, flush with the bottom-right corner (clearlooks_draw_resize_grip). */
  --cl-shade3: #c2c2c1; --cl-menubar-low: #e4e3e2; --cl-menu-border: #9e9d9d; --cl-sep: #d4d4d3; --cl-sep-hi: #fcfbfa; --cl-status-hi: #fffffd;
  --cl-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Cpath fill='%23f9f7f7' d='M7 16h2v2h-2zM10 16h2v2h-2zM10 13h2v2h-2zM13 16h2v2h-2zM13 13h2v2h-2zM13 10h2v2h-2zM16 16h2v2h-2zM16 13h2v2h-2zM16 10h2v2h-2zM16 7h2v2h-2z'/%3E%3Cpath fill='%23a6a5a5' d='M7 16h1v1h-1zM10 16h1v1h-1zM10 13h1v1h-1zM13 16h1v1h-1zM13 13h1v1h-1zM13 10h1v1h-1zM16 16h1v1h-1zM16 13h1v1h-1zM16 10h1v1h-1zM16 7h1v1h-1z'/%3E%3C/svg%3E");
  /* Window frame: the Clearlooks Metacity theme of 2005 (Daniel Borgmann; GNOME 2.14 to 2.18, gnome-themes
     metacity-themes/Clearlooks/metacity-theme-1.xml), whose colours are Metacity's shade/ (HLS) of bg and of the
     selection colour. Frame outline bg x0.25, bevel bg x1.3 / x0.88. The unfocused title bar (while the About dialog is
     up): gradient bg x1.01-0.96 over 6 px, x0.96-0.94, x0.94-0.89 over the last 6 px; line below x0.6; bevel x1.3 / x1.3 /
     x0.88 / x0.88; plain fg text; buttons x1.0-0.9 with x1.25 / x1.1 highlights, x0.85 shadow, x0.55 border. */
  --mc-frame-outline: #3c3b3a; --mc-frame-light: #ffffff; --mc-frame-dark: #d2d0cd;
  --mc-unf-grad: linear-gradient(#efeeed 1px, #e4e3e1 7px, #e0dedc 14px, #d4d2d0 20px); --mc-unf-line: #918e8a;
  --mc-unf-inset: inset 0 1px 0 #ffffff, inset 1px 0 0 #ffffff, inset -1px 0 0 #d2d0cd, inset 0 -1px 0 #d2d0cd;
  --mc-unf-btn: linear-gradient(#edeceb, #d7d5d2); --mc-unf-btn-border: #85827e;
  --mc-unf-btn-inset: inset 0 1px 0 #ffffff, inset 1px 0 0 #ffffff, inset 0 -1px 0 #cbc9c6;
  /* The focused title bar and its buttons: Metacity's shades of the selection colour, as the frame section below
     spells out. The dark background (body.dark) starts from a deeper selection colour and shades it the same way. */
  --mc-foc-grad: linear-gradient(#8bafdb 1px, #759dce 7px, #6c95c9 14px, #5d87bc 20px); --mc-foc-outline: #262b32; --mc-foc-line: #41556f;
  --mc-foc-inset: inset 0 1px 0 #b7d0ee, inset 1px 0 0 #b7d0ee, inset -1px 0 0 #537eb4, inset 0 -1px 0 #537eb4;
  --mc-foc-text-shadow: 1px 1px 0 #384555, 2px 2px 0 #4e76a8, 1px 2px 0 #537eb4;
  --mc-btn-grad: linear-gradient(#92b4df, #6690c4); --mc-btn-border: #455e7c;
  --mc-btn-inset: inset 0 1px 0 #b7d0ee, inset 1px 0 0 #92b4df, inset 0 -1px 0 #5d87bc, 1px 0 0 #9dbde5, 0 1px 0 #86abd9;
  --mc-btn-active-grad: linear-gradient(#6690c4, #5d87bc);
  --mc-btn-active-inset: inset 0 1px 0 #5d87bc, inset 1px 0 0 #537eb4, 1px 0 0 #9dbde5, 0 1px 0 #86abd9;
  /* Scrollbar sliders: the menu item's Gummy gradient across the slider, lighter under the pointer. */
  --cl-thumb-stops: #a6c3e8 0%, #97b8e1 50%, #92b4df 50%, #84a9d7 100%; --cl-thumb-hover-stops: #b8d0ef 0%, #a7c4e8 50%, #a1c0e6 50%, #91b4df 100%;
}
body.dark {   /* a "Darklooks"-style counterpart for the Dark background toggle */
  --bg: #3f3e3a; --fg: #e8e6e2; --line: #2a2926; --muted: #aeaba5; --hover: #4a4945;
  --ctl-bg: #2f2e2b; --ctl-border: #1f1e1c; --ctl-hover: #3a3936;
  /* A deeper selection blue (#456fa8: the light one is pale on a dark background, and white text on it hard to read);
     the selection and menu gradients, the title bar and its buttons and the scrollbar sliders are its shades, by the
     same factors as the light ones are shades of #86abd9. */
  --sel: #456fa8; --accent: #456fa8;
  --cl-sel-grad: linear-gradient(#4777b9 0%, #4571ac 50%, #456fa8 50%, #44699b 100%);
  --cl-menu-grad: linear-gradient(#4d7ebf 0%, #4676b7 50%, #4674b3 50%, #456da5 100%); --cl-sel-border: #384a62;
  --mc-foc-grad: linear-gradient(#4571ac 1px, #436797 7px, #42628f 14px, #3f5a7e 20px); --mc-foc-outline: #1b1d21; --mc-foc-line: #2f3948;
  --mc-foc-inset: inset 0 1px 0 #5686c7, inset 1px 0 0 #5686c7, inset -1px 0 0 #3d5474, inset 0 -1px 0 #3d5474;
  --mc-foc-text-shadow: 1px 1px 0 #272e37, 2px 2px 0 #3b4f6b, 1px 2px 0 #3d5474;
  --mc-btn-grad: linear-gradient(#4674b3, #415f88); --mc-btn-border: #323f50;
  --mc-btn-inset: inset 0 1px 0 #5686c7, inset 1px 0 0 #4674b3, inset 0 -1px 0 #3f5a7e, 1px 0 0 #497abc, 0 1px 0 #456fa8;
  --mc-btn-active-grad: linear-gradient(#415f88, #3f5a7e);
  --mc-btn-active-inset: inset 0 1px 0 #3f5a7e, inset 1px 0 0 #3d5474, 1px 0 0 #497abc, 0 1px 0 #456fa8;
  --cl-thumb-stops: #4d7ebf 0%, #4676b7 50%, #4674b3 50%, #456da5 100%; --cl-thumb-hover-stops: #5686c7 0%, #4e7ec0 50%, #4b7bbd 50%, #4674b2 100%;
  --cl-base: #2f2e2b; --cl-row-alt: #353431; --cl-frame: #1f1e1c; --cl-frame-in: #292927; --cl-shine: #55534e;
  --cl-btn: linear-gradient(#5c5a54 0%, #57554f 50%, #55534e 50%, #504e4a 100%);
  --cl-btn-hover: linear-gradient(#64615a 0%, #5e5c56 50%, #5c5a54 50%, #56544f 100%);
  --cl-btn-active: linear-gradient(#4e4c48 0%, #494744 50%, #484643 50%, #44423f 100%);
  --cl-btn-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.10), 1px 1px 0 0 #32312f, 0 0 0 1px #3a3936;
  --cl-trough: #2a2926;
  --cl-shade3: #343330; --cl-menubar-low: #3c3c38; --cl-menu-border: #2a2928; --cl-sep: #383834; --cl-sep-hi: #43423d; --cl-status-hi: #494741;
  --cl-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Cpath fill='%2342423d' d='M7 16h2v2h-2zM10 16h2v2h-2zM10 13h2v2h-2zM13 16h2v2h-2zM13 13h2v2h-2zM13 10h2v2h-2zM16 16h2v2h-2zM16 13h2v2h-2zM16 10h2v2h-2zM16 7h2v2h-2z'/%3E%3Cpath fill='%232c2c2a' d='M7 16h1v1h-1zM10 16h1v1h-1zM10 13h1v1h-1zM13 16h1v1h-1zM13 13h1v1h-1zM13 10h1v1h-1zM16 16h1v1h-1zM16 13h1v1h-1zM16 10h1v1h-1zM16 7h1v1h-1z'/%3E%3C/svg%3E");
  --mc-frame-outline: #0f0f0f; --mc-frame-light: #53514a; --mc-frame-dark: #373633;
  --mc-unf-grad: linear-gradient(#403f3b 1px, #3c3b38 7px, #3b3a37 14px, #383734 20px); --mc-unf-line: #252523;
  --mc-unf-inset: inset 0 1px 0 #53514a, inset 1px 0 0 #53514a, inset -1px 0 0 #373633, inset 0 -1px 0 #373633;
  --mc-unf-btn: linear-gradient(#3f3e3a, #393835); --mc-unf-btn-border: #222221;
  --mc-unf-btn-inset: inset 0 1px 0 #4f4d47, inset 1px 0 0 #464440, inset 0 -1px 0 #353532;
}

body { font-family: "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, sans-serif; font-size: 13px; }

/* --- window frame ---------------------------------------------------------------------------------------------
   The 2005 Clearlooks Metacity theme (GNOME 2.14 to 2.18; 2.20 to 2.24 shipped the flatter "Gummy" rewrite). Frame
   5 px wide (outline, bevel line, 3 px bg), rounded top corners, title bar 23 px, 19 px buttons, all on the selection
   colour. The shine: a sel x1.2 line along the top and the blue falling from x1.02 to x0.92 over the next 6 px, then
   x0.92 to x0.88, x0.88 to x0.8 over the last 6 px, a x0.75 line and a x0.5 line below; outline x0.25. Title text is
   white with three shadow copies towards the bottom right (x0.4, x0.7, x0.75). The About dialog is a window too. */
.window, dialog { border: 1px solid var(--mc-frame-outline); border-radius: 5px 5px 0 0; padding: 0 4px 4px;
                  box-shadow: inset 1px 0 0 var(--mc-frame-light), inset -1px 0 0 var(--mc-frame-dark), inset 0 -1px 0 var(--mc-frame-dark),
                              0 4px 14px rgba(0, 0, 0, 0.4); }
.titlebar { box-sizing: border-box; height: 23px; margin: -1px -5px 0; padding: 0 4px; border: 1px solid var(--mc-foc-outline); border-bottom-color: var(--mc-foc-line);
            border-radius: 5px 5px 0 0; color: #ffffff;
            background: var(--mc-foc-grad); text-shadow: var(--mc-foc-text-shadow); box-shadow: var(--mc-foc-inset); }
/* Buttons: fill sel x1.05-0.85, outline x0.55, inside highlight x1.2 (top) and x1.05 (left), inside shadow x0.8, a light
   line outside on the right and below (x1.1, x1.0). White glyphs. Prelight adds a 20 % white tint; pressed: fill
   x0.85-0.8 with x0.8 / x0.75 inside shadows. */
button.wm-button, button.wm-button:hover:not(:disabled), button.wm-button:active:not(:disabled), button.wm-button:focus-visible {
  border: 1px solid var(--mc-btn-border); border-radius: 3px; color: #ffffff; --wm-glyph-outline: transparent; text-shadow: none; outline: none;
  background: var(--mc-btn-grad); box-shadow: var(--mc-btn-inset);
}
button.wm-button:hover:not(:disabled) {
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--mc-btn-grad);
}
button.wm-button:active:not(:disabled) {
  background: var(--mc-btn-active-grad); box-shadow: var(--mc-btn-active-inset);
}
/* Maximized: no side frame, no rounded corners (Metacity's normal_maximized geometry). */
body.maximized .window { border-radius: 0; border-left: 0; border-right: 0; padding: 0; box-shadow: none; }
body.maximized .window > .titlebar { margin: -1px 0 0; border-radius: 0; border-left: 0; border-right: 0; }
/* While a dialog is up the main window is the unfocused one: grey title bar, plain text, grey buttons; so is a dialog
   under another one (the detail window under a file's, on a phone). */
body:has(dialog[open]) .window > .titlebar, dialog[open]:has(~ dialog[open]) > .titlebar { background: var(--mc-unf-grad); border-color: var(--mc-frame-outline); border-bottom-color: var(--mc-unf-line);
                                             box-shadow: var(--mc-unf-inset); color: var(--fg); text-shadow: none; }
body:has(dialog[open]) .window > .titlebar button.wm-button, dialog[open]:has(~ dialog[open]) > .titlebar button.wm-button { background: var(--mc-unf-btn); border-color: var(--mc-unf-btn-border); color: var(--fg);
                                                              box-shadow: var(--mc-unf-btn-inset); }

/* --- menu bar and menus -----------------------------------------------------------------------------------------
   menubarstyle 2: flat gradient bg -> bg x0.96 with a shade[3] line below. An open title is a Gummy menubar item; the
   menus are GTK menus like the combo box popup further down; insensitive items are embossed as GTK 2 draws them. */
.menubar { background: linear-gradient(var(--bg), var(--cl-menubar-low)); border-bottom: 1px solid var(--cl-shade3); }
.menu-title.open { background: var(--cl-menu-grad); color: var(--cl-sel-fg); box-shadow: inset 0 0 0 1px var(--cl-sel-border); }
.menu { background: var(--cl-base); border: 1px solid var(--cl-menu-border); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }
.menu-item:hover:not(.disabled) { background: var(--cl-menu-grad); color: var(--cl-sel-fg); box-shadow: inset 0 0 0 1px var(--cl-sel-border); }
.menu-item.disabled { color: var(--muted); text-shadow: 1px 1px 0 var(--cl-shine); }
.menu-sep { border-top: 1px solid var(--cl-sep); border-bottom: 1px solid var(--cl-sep-hi); }

/* --- status bar: an etched line along the top, the resize grip in the corner --------------------------------- */
.statusbar { border-top: 1px solid var(--cl-shade3); box-shadow: inset 0 1px 0 var(--cl-status-hi); }
.grip { background: var(--cl-grip) no-repeat; }

/* --- toolbar / sidebar ------------------------------------------------ */
header { background: linear-gradient(var(--cl-shine), var(--bg) 8%, var(--hover)); border-bottom: 1px solid var(--cl-frame); }
@media (min-width: 1600px) {
  header { background: var(--bg); border-right: 1px solid var(--cl-frame); box-shadow: inset -1px 0 0 var(--cl-shine); }
  header .scrollbox > .filter { background: var(--cl-base); border: 1px solid var(--cl-frame-in); }   /* a sunken frame, the bar beside it */
  .exp-title { background: var(--cl-base); }
}

/* --- buttons and combo boxes ------------------------------------------- */
button, .llselect-trigger {
  background: var(--cl-btn); color: var(--fg); border: 1px solid var(--ctl-border); border-radius: 3px;
  box-shadow: var(--cl-btn-shadow);
}
button:hover:not(:disabled), .llselect-trigger:hover { background: var(--cl-btn-hover); }
button:active:not(:disabled), .llselect-trigger[data-state='open'] {
  background: var(--cl-btn-active); box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.17);   /* 3 px shadow along the top and left edges */
}
button:disabled { opacity: 0.55; }
/* GtkComboBox: an etched separator before the arrow, and the arrow does not flip when the list is open */
.llselect-trigger-arrow { align-self: stretch; margin: -0.4rem 0 -0.4rem 2px; padding-left: 9px;
                          border-left: 1px solid var(--ctl-border); box-shadow: inset 1px 0 0 var(--cl-shine); opacity: 0.85; }
.llselect-trigger[data-state='open'] .llselect-trigger-arrow { transform: none; }

/* Gummy focus: no dotted rectangle any more, but a border in the selection colour x0.65 and a 12 % tint of it */
button:focus-visible, .llselect-trigger:focus-visible {
  outline: none; border-color: var(--cl-sel-border);
  background-image: linear-gradient(rgba(134, 171, 217, 0.12), rgba(134, 171, 217, 0.12)), var(--cl-btn);
  box-shadow: inset 0 0 0 1px rgba(134, 171, 217, 0.6), var(--cl-btn-shadow);
}

/* --- entries ------------------------------------------------------------- */
input[type=search] {
  background: var(--cl-base); border: 1px solid var(--ctl-border); border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
input[type=search]:focus-visible { outline: none; border-color: var(--cl-sel-border); box-shadow: inset 0 0 0 1px var(--sel), inset 0 1px 2px rgba(0, 0, 0, 0.18); }

/* --- check buttons: native checkboxes and the filter rows' .check share one drawing --- */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0 2px 0 0; vertical-align: -2px; }
input[type=checkbox], .check {
  border: 1px solid var(--ctl-border); border-radius: 2px; background: linear-gradient(var(--cl-base), var(--ctl-hover));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12);
}
input[type=checkbox]:checked, .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='%232e3436' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
                    linear-gradient(var(--cl-base), var(--ctl-hover));
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px, auto;
}
body.dark input[type=checkbox]:checked, body.dark .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='%23e8e6e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
                    linear-gradient(var(--cl-base), var(--ctl-hover));
}
.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='%232e3436' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
                    linear-gradient(var(--cl-base), var(--ctl-hover));
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px, auto;
}
body.dark .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='%23e8e6e2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
                    linear-gradient(var(--cl-base), var(--ctl-hover));
}
input[type=checkbox]:disabled { opacity: 0.5; }
input[type=checkbox]:focus-visible { outline: 1px dotted var(--fg); outline-offset: 1px; }

/* --- radio marks (View menu): a circle with a dot, drawn like the check boxes --- */
.radio { border: 1px solid var(--ctl-border); background: linear-gradient(var(--cl-base), var(--ctl-hover)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12); }
.radio[data-state=checked] { background: radial-gradient(circle, var(--fg) 3px, transparent 3.5px), linear-gradient(var(--cl-base), var(--ctl-hover)); }
/* --- the List / Grid switch: the current view is a pressed toggle button --- */
button.pressed, button.pressed:hover:not(:disabled) { background: var(--cl-btn-active); box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.17); }

/* --- the icon list: a GTK tree view ----------------------------------------- */
#list { background: var(--cl-base); border-color: var(--cl-frame-in); }
details.expander pre { border-color: var(--cl-frame-in); }   /* a license text: a text view's sunken frame */
.cell.selected, .cell.selected:hover { background: var(--cl-sel-grad); color: var(--cl-sel-fg); }
.cell.selected .cell-info { color: rgba(255, 255, 255, 0.88); }
.row { border-bottom: none; }
.row:nth-child(even) { background: var(--cl-row-alt); }
.row:hover { background: var(--hover); }
.row.selected, .row.selected:hover { background: var(--cl-sel-grad); color: var(--cl-sel-fg); }
.row.selected .where, .row.selected .aliases, .row.selected .license, .row.selected figcaption { color: rgba(255, 255, 255, 0.88); }
.sizes .empty { border-color: var(--line); }

/* --- detail pane: frames on the window background ---------------------------- */
#detail { background: var(--bg); border-left: 1px solid var(--cl-frame); box-shadow: inset 1px 0 0 var(--cl-shine); }
.included { background: var(--bg); border: 1px solid var(--cl-frame); border-radius: 4px; box-shadow: inset 0 1px 0 var(--cl-shine), 0 1px 0 var(--cl-shine); }
.included code { background: var(--cl-base); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }
/* The per-size rows are one list, so they get one sunken white frame with alternating rows (a tree view),
   instead of a white patch behind every thumbnail; the frame is the list's, its bar beside it as a scrolled window's. */
.files-box { margin-top: 10px; }
.files-box > .files { background: var(--cl-base); border: 1px solid var(--cl-frame-in); }
.files .file { border-top: none; padding: 8px; }
.files .file:nth-child(even) { background: var(--cl-row-alt); }
.files .file:hover { background: var(--hover); }
.files .file.selected, .files .file.selected:hover { background: var(--cl-sel-grad); color: var(--cl-sel-fg); }
.files .file.selected code, .files .file.selected .spdx { color: rgba(255, 255, 255, 0.88); }
code { font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", monospace; }

/* --- tooltips: the gtkrc's tooltip_bg_color #F5F5B5 with black text, border bg x0.6 (clearlooks_draw_tooltip); no shadow (no compositor) --- */
.tooltip { background: #f5f5b5; color: #000000; border-color: #93937c; box-shadow: none; }
.tip-img { border-color: var(--cl-frame); }
.tip-path, .tip-none { color: #55553a; }

/* --- combo box popup: a GTK menu ------------------------------------------------ */
.llselect-popup { background: var(--cl-base); border: 1px solid var(--cl-frame); border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }
.llselect-item[aria-selected='true'] { background: transparent; color: var(--fg); }   /* the check mark says it; blue is for the pointer */
.llselect-item:hover, .llselect-item-focused,
.llselect-item[aria-selected='true']:hover, .llselect-item-focused[aria-selected='true'] {
  background: var(--cl-menu-grad); color: var(--cl-sel-fg); border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--cl-sel-border);   /* Gummy menu item: rounded, bordered, same gradient on spot[1] */
}
.llselect-item:hover small, .llselect-item-focused small { color: rgba(255, 255, 255, 0.88); }
.llselect-choose-all-row, .llselect-group-label, .exp-group { background: var(--hover); color: var(--fg); font-weight: 600;
                                                               border-top: 1px solid var(--cl-shine); border-bottom: 1px solid var(--line); }
.exp-group { padding: 2px 4px; }
.exp-row:hover { background: var(--cl-menu-grad); color: var(--cl-sel-fg); box-shadow: inset 0 0 0 1px var(--cl-sel-border); }
.exp-row:hover small { color: rgba(255, 255, 255, 0.88); }

/* --- the page's own scrollbars (scrollbars.js): drawn as gtk2-engines 2.20's Clearlooks (style GUMMY, colorize_scrollbar)
   draws a vertical one; its shades, like the gtkrc's shade() and darker(), scale HLS lightness and saturation.
   The trough: bg x0.896, a 2 px edge x0.95 of that, its long sides bordered bg x0.665. A stepper: the
   Gummy gradient of bg across the bar (x1.08, x1.02 | x1, x0.94), bordered bg x0.45 mixed 20 % into bg, rounded at the
   bar's end, a x1.3 highlight at 40 % along its top and left; under the pointer bg[PRELIGHT] (x1.02), pressed
   bg[ACTIVE] (x0.9); its arrow (clearlooks_draw_normal_arrow at 7 x 7) in fg_color, insensitive in darker(bg) over a
   bg x1.15 copy a pixel down and right. The slider: spot[1] (sel x1.05) with the same gradient across, the bar's full
   width over the trough's border, bordered its x0.575 mixed 30 % into itself, a x1.3 highlight ring inside at 20 %,
   three 1 px grip lines in the x0.575 colour from 5.5 to 9.5 across, x1.04 under the pointer.
   slider-width 15, stepper-size 15, min-slider-length 30, scrollbar-spacing 3. --- */
:root {
  --cl-sb-trough: #d6d3d1; --cl-sb-trough-edge: #ccc8c6; --cl-sb-border: #a09d9a; --cl-sb-step-border: #878482;
  --cl-sb-step-stops: #ffffff 0%, #f1f1f0 50%, #edeceb 50%, #dfdedc 100%;
  --cl-sb-step-hover-stops: #ffffff 0%, #f6f6f5 50%, #f1f1f0 50%, #e3e3e1 100%;
  --cl-sb-step-active-stops: #e6e5e4 0%, #dad8d6 50%, #d6d4d2 50%, #cac7c5 100%;
  --cl-sb-step-hilight: rgba(255, 255, 255, 0.4); --cl-sb-arrow: #000000; --cl-sb-arrow-off: #a9a5a2;
  --cl-sb-arrow-emboss: #ffffff; --cl-sb-slider-stops: #a6c3e8 0%, #97b8e1 50%, #92b4df 50%, #84a9d7 100%;
  --cl-sb-slider-hover-stops: #b2cced 0%, #a1c0e6 50%, #9cbce4 50%, #8cb0dd 100%; --cl-sb-slider-border: #5f7da4;
  --cl-sb-slider-hilight: rgba(229, 239, 251, 0.2);
  --cl-sb-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 7'%3E%3Cpath d='M5.5 .5h4M5.5 3.5h4M5.5 6.5h4' stroke='%2349668b'/%3E%3C/svg%3E");
}
body.dark {
  --cl-sb-trough: #383734; --cl-sb-trough-edge: #353431; --cl-sb-border: #292927; --cl-sb-step-border: #232321;
  --cl-sb-step-stops: #44433e 0%, #403f3b 50%, #3f3e3a 50%, #3b3a37 100%;
  --cl-sb-step-hover-stops: #454440 0%, #41403c 50%, #403f3b 50%, #3c3b38 100%;
  --cl-sb-step-active-stops: #3d3d38 0%, #393935 50%, #383834 50%, #353531 100%;
  --cl-sb-step-hilight: rgba(83, 81, 74, 0.4); --cl-sb-arrow: var(--fg); --cl-sb-arrow-off: var(--muted);
  --cl-sb-arrow-emboss: #494842; --cl-sb-slider-stops: #4d7ebf 0%, #4676b8 50%, #4674b3 50%, #456ea5 100%;
  --cl-sb-slider-hover-stops: #5383c5 0%, #4b7cbe 50%, #4879bb 50%, #4572ae 100%; --cl-sb-slider-border: #3b5375;
  --cl-sb-slider-hilight: rgba(109, 154, 215, 0.2);
  --cl-sb-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 7'%3E%3Cpath d='M5.5 .5h4M5.5 3.5h4M5.5 6.5h4' stroke='%2336455a'/%3E%3C/svg%3E");
}
.sbar .trough { border-color: var(--cl-sb-border); background: linear-gradient(90deg, var(--cl-sb-trough-edge), var(--cl-sb-trough) 2px); }
.sbar .step { border-color: var(--cl-sb-step-border); background: linear-gradient(90deg, var(--cl-sb-step-stops)); background-origin: border-box;
              box-shadow: inset 1px 1px 0 var(--cl-sb-step-hilight); }
.sbar .step:hover:not(:disabled) { background: linear-gradient(90deg, var(--cl-sb-step-hover-stops)); background-origin: border-box; }
.sbar .step:active:not(:disabled) { background: linear-gradient(90deg, var(--cl-sb-step-active-stops)); background-origin: border-box; }
.sbar .step::after { background: var(--cl-sb-arrow); }
.sbar .step:disabled::after { background: var(--cl-sb-arrow-off); }
.sbar .step:disabled::before { content: ""; position: absolute; inset: 0; transform: translate(1px, 1px); background: var(--cl-sb-arrow-emboss); mask: var(--arrow) center / 7px 4.25px no-repeat; -webkit-mask: var(--arrow) center / 7px 4.25px no-repeat; }
.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='M3.5 3.5L2.75 4.25L1.0607 2.5606A1.5 1.5 0 0 0 -1.0607 2.5606L-2.75 4.25L-3.5 3.5L0 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 .75L-2.75 0L-1.0607 1.6894A1.5 1.5 0 0 0 1.0607 1.6894L2.75 0L3.5 .75L0 4.25Z'/%3E%3C/svg%3E"); }
.sbar .slider { border-color: var(--cl-sb-slider-border); box-shadow: inset 0 0 0 1px var(--cl-sb-slider-hilight);
                background: var(--cl-sb-grip) 0 var(--grip-y, center) / 15px 7px no-repeat, linear-gradient(90deg, var(--cl-sb-slider-stops));
                background-origin: border-box, padding-box; }   /* --grip-y: scrollbars.js's whole-pixel row for the grip */
.sbar .slider:hover, .sbar .slider.active { background-image: var(--cl-sb-grip), linear-gradient(90deg, var(--cl-sb-slider-hover-stops)); }

/* --- the browser's scrollbars where the page draws none (code blocks, the combo box lists): a stepper button with an arrow at each end --
   Drawn with the ::-webkit-scrollbar parts where a browser has them (Chrome, Safari); the page's cursor shows over
   them, since they are drawn in the page. Chrome ignores those parts on an element that sets scrollbar-color, so
   the standard property is set for Firefox only (which parses ::-webkit-* pseudo-elements as valid, so a selector()
   test cannot tell it apart; -moz-appearance can): it then colours its own slider and trough and keeps its own
   cursor over them. The arrows: a triangle in the text colour, light on the dark background. */
@supports (-moz-appearance: none) { * { scrollbar-color: var(--sel) var(--cl-trough); } }
:root { --cl-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0.5 5.5h6L3.5 1.5z' fill='%23555753'/%3E%3C/svg%3E"); --cl-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0.5 1.5h6L3.5 5.5z' fill='%23555753'/%3E%3C/svg%3E");
  --cl-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M5.5 0.5v6L1.5 3.5z' fill='%23555753'/%3E%3C/svg%3E"); --cl-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M1.5 0.5v6L5.5 3.5z' fill='%23555753'/%3E%3C/svg%3E"); }
body.dark { --cl-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0.5 5.5h6L3.5 1.5z' fill='%23e8e6e2'/%3E%3C/svg%3E"); --cl-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0.5 1.5h6L3.5 5.5z' fill='%23e8e6e2'/%3E%3C/svg%3E");
  --cl-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M5.5 0.5v6L1.5 3.5z' fill='%23e8e6e2'/%3E%3C/svg%3E"); --cl-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M1.5 0.5v6L5.5 3.5z' fill='%23e8e6e2'/%3E%3C/svg%3E"); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--cl-trough); box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-button:single-button { width: 14px; height: 14px; border: 1px solid var(--ctl-border); border-radius: 3px;
                                           background: var(--arrow), var(--cl-btn); background-repeat: no-repeat; background-position: center; background-size: 7px 7px, auto; }
::-webkit-scrollbar-button:single-button:hover { background-image: var(--arrow), var(--cl-btn-hover); }
::-webkit-scrollbar-button:single-button:vertical:decrement { --arrow: var(--cl-arrow-up); }     /* each end its arrow; the fill is the rule above's */
::-webkit-scrollbar-button:single-button:vertical:increment { --arrow: var(--cl-arrow-down); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { --arrow: var(--cl-arrow-left); }
::-webkit-scrollbar-button:single-button:horizontal:increment { --arrow: var(--cl-arrow-right); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--cl-thumb-stops)); border: 1px solid var(--cl-sel-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(var(--cl-thumb-stops)); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, var(--cl-thumb-hover-stops)); }
::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(var(--cl-thumb-hover-stops)); }