/* =========================================================
   Nuleen Help — Modern Minimal Apple-Style (Option D),
   from the InterestThing help
   ========================================================= */

/* Font sizes are in rem: multiples of the html font size. 13px on a
   desktop (1rem = 13px, so every size is as before); larger on an iPhone,
   see "Small screens" at the end. Safari's own text enlarging on phones
   is switched off, because it enlarges some blocks and not others (body
   text much larger than the tables in landscape). */
html {
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #333;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 1rem; /* 13px */
}

/* -----------------------------------------
   Page container
------------------------------------------*/

#help-pd {
  margin: 24px auto;
  padding: 0 24px 40px 24px;
  max-width: 780px;
}

/* -----------------------------------------
   Headings
------------------------------------------*/

h1 {
  font-size: 2rem; /* 26px */
  font-weight: 600;
  margin: 0 0 4px;
  color: #111;
}

h2 {
  font-size: 1.385rem; /* 18px */
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: #222;
}

h3 {
  font-size: 1.154rem; /* 15px */
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 8px;
  color: #333;
}

/* A subtitle within a section (the solving techniques): body size, with
   room above it to separate it from the example before. */
h4 {
  font-size: 1rem; /* 13px */
  font-weight: 600;
  margin-top: 22px;
  margin-bottom: 2px;
  color: #222;
}

/* -----------------------------------------
   Text
------------------------------------------*/

p {
  margin: 6px 0 12px;
  color: #444;
}

p.topic-title {
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 6px;
  color: #222;
}

ul,
ol,
li {
  color: #444;
  margin-left: 18px;
  padding: 0;
}

ul {
  margin-top: 4px;
}

li {
  margin-bottom: 6px;
}

/* -----------------------------------------
   Links
------------------------------------------*/

a {
  color: #0a84ff; /* macOS blue */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -----------------------------------------
   Navigation bar
------------------------------------------*/

#navbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 32px;
  width: 100%;
  background: #f5f5f7;
  border-bottom: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  box-sizing: border-box;
  z-index: 100;
}

#navbox_left,
#navbox_right {
  font-size: 0.923rem; /* 12px */
}

.navlink_left,
.navlink_right {
  color: #4a4a4a;
}

.navlink_left:hover,
.navlink_right:hover {
  color: #000;
}

/* Fix top spacing so content does not hide behind navbar */
#headerbox {
  margin-top: 52px;
  margin-bottom: 32px;

  /* NEW — align icon and title cleanly */
  display: flex;
  align-items: center;
  gap: 16px; /* nice spacing between icon and title */
}

/* -----------------------------------------
   Header/icon/title
------------------------------------------*/

#iconbox {
  margin: 0;
}

#pagetitle {
  margin: 0;
}

/* --------------------------------------------------------
   Screenshot layout — minimal, responsive, Apple-style
   -------------------------------------------------------- */

#screenshotbox {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
}

/* All screenshots */
#screenshotbox img,
#screenshotimg {
  display: block;
  margin-left: auto; /* added to center narrow windows */
  margin-right: auto; /* added to center narrow windows */
  height: auto;
  width: auto;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

/* Portrait screenshots (auto-detected via aspect ratio) */
#screenshotbox img {
  max-height: 520px; /* keeps portrait iPhone shots reasonable */
}

/* Landscape screenshots */
#screenshotbox img.landscape {
  max-height: none; /* let Mac screenshots scale up */
}

/* On wide screens, arrange portrait screenshots in columns */
@media (min-width: 700px) {
  #screenshotbox {
    justify-content: flex-start;
  }

  #screenshotbox img {
    flex: 0 0 auto;
    max-height: 520px;
  }
}

/* -----------------------------------------
   Boxes, callouts, notes
------------------------------------------*/

#notebox {
  border: 1px solid #d2d2d7;
  background: #fafafb;
  padding: 12px 18px 6px 18px; /* slightly more bottom padding */
  border-radius: 8px;
  margin: 18px 0;
}

/* Toolbar box — like notebox but optimized for icons */
.toolbar-box {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0 18px;
  background-color: #fafafa;
}

/* Toolbar item: icon + label aligned properly */
.toolbar-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.toolbar-item img {
  width: 16px;
  height: auto;
  margin-right: 10px;
  display: block;
}

.note {
  font-size: 0.846rem; /* 11px */
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

/* -----------------------------------------
   Tables
------------------------------------------*/

table {
  border-collapse: collapse;
  width: 100%;
}

td,
tr {
  font-size: 1rem; /* 13px */
  padding: 4px 2px;
}

tr {
  border-bottom: 1px solid #e5e5e7;
}

tr:last-child {
  border-bottom: none;
}

/* Header cells, in the style of the rows */
th {
  font-size: 1rem; /* 13px */
  font-weight: 600;
  text-align: left;
  color: #222;
  padding: 4px 2px;
}

/* Number columns: right-aligned, never wrapped, with room between them */
th.num,
td.num {
  text-align: right;
  white-space: nowrap;
  padding-left: 14px;
  font-variant-numeric: tabular-nums;
}

/* Data tables: some space around them */
table.datatable {
  margin: 6px 0 14px;
}

/* A wide table scrolls sideways on its own, not the whole page */
.tablewrap {
  overflow-x: auto;
}

/* -----------------------------------------
   Images
------------------------------------------*/

.center img,
.icon_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------
   Highlighting
------------------------------------------*/

.highlight {
  font-weight: 600;
  color: #c88700;
}

/* -----------------------------------------
   Code blocks
------------------------------------------*/

code {
  background: #f2f2f7;
  border-radius: 4px;
  padding: 2px 5px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.923rem; /* 12px */
  color: #000;
}

/* Line diagrams (the solving technique examples): monospaced, so the
   digits line up, in the colours of the note boxes (#notebox) */
pre.lines {
  background: #fafafb;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0 12px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.923rem; /* 12px */
  line-height: 1.5;
  color: #000;
  overflow-x: auto;
}

/* -----------------------------------------
   Spacing helpers
------------------------------------------*/

#mainbox {
  margin-top: 12px;
}

.separator,
.rules,
.dots {
  border-bottom: 1px solid #e5e5e7;
  margin: 16px 0;
}

/* -----------------------------------------
   Small screens: an iPhone, upright (narrow) or on its side (low)
------------------------------------------*/

/* A larger base size, so every rem size above grows with it (body text
   16px, tables and examples alike). The page title gets smaller instead
   (26px on a desktop, 20px here), so it fits beside the icon; the side
   margins are a little narrower. */
@media (max-width: 600px), (max-height: 500px) {
  html {
    font-size: 16px;
  }

  h1 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.25;
  }

  #help-pd {
    padding: 0 16px 32px 16px;
  }

  #headerbox {
    gap: 12px;
  }
}