/* Theme: ماك كلاسيك — Mac OS 8/9 "Platinum": a lavender desktop, light grey
   windows with a thin black outline, a pinstriped title bar with the title in
   the middle, softly rounded buttons, yellow help balloons. */

:root {
  --bg: #6e6ea8;
  --surface: #dddddd;
  --face: #eeeeee;
  --field: #ffffff;
  --text: #000000;
  --muted: #444444;
  --line: #888888;
  --link: #0000cc;
  --link-visited: #551a8b;
  --accent: #33339a;
  --accent-text: #ffffff;
  --wa: #0b6e35;
  --wa-text: #ffffff;
  --danger: #a00000;
  --ok: #0b6e35;
  --note-bg: #ffffc7;       /* Mac help-balloon yellow */
  --note-text: #000000;
  --note-border: #000000;

  --font: "Geeza Pro", Tahoma, system-ui, "Noto Sans Arabic", sans-serif;
  --mono: Monaco, ui-monospace, Menlo, monospace;

  --radius: 5px;
  --box-border: 1px solid #000;
  --field-border: 1px solid #777;
  --raised: inset 1px 1px #fff, inset -1px -1px #aaa;
  --pressed: inset 1px 1px #888, inset -1px -1px #ccc;
  --sunken: inset 1px 1px #bbb;

  --desktop-pad: 0.5rem;
  --desktop-pad-wide: 2rem 1rem;
  --window-pad: 0;
  --window-border: 1px solid #000;
  --window-radius: 0;
  --window-shadow: 2px 2px 0 rgb(0 0 0 / 0.45);
  --title-display: flex;
  /* the pinstripes */
  --title-bg: repeating-linear-gradient(#dddddd 0 1px, #999999 1px 2px) 0 3px / 100% 12px no-repeat, #dddddd;
  --title-text: #000000;

  --hr: 1px solid #999;
  --hr-under: 1px solid #fff;
  --group-border: 1px solid #999;
  --group-shadow: inset 1px 1px 0 #fff;
  --menu-bg: #eeeeee;
  --menu-border: 1px solid #000;
  --menu-shadow: none;
  --footer-border: 1px solid #999;
  --footer-shadow: none;
  --row-line: 1px solid #dddddd;
  --card-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);

  --focus: 2px solid #6666cc;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Title in the middle on a plain patch, interrupting the stripes */
.title-bar { justify-content: center; position: relative; border-bottom: 1px solid #000; min-height: 1.35rem; }
.title-bar .title { padding: 0 0.6rem; background: #dddddd; font-weight: bold; }
/* One empty close box on the side, like Mac windows */
.title-buttons { position: absolute; inset-inline-end: 0.4rem; top: 50%; transform: translateY(-50%); }
.title-buttons summary { width: 0.8rem; height: 0.8rem; color: transparent; border-radius: 0; background: #dddddd; }
.title-buttons details:not(:last-child) { display: none; }

.help { border-radius: 50%; }
.topbar a:hover { background: #33339a; color: #fff; text-decoration: none; }