/* Layout additions on top of the original plob.css (colours/tile styling kept as-is). */

* { box-sizing: border-box; }

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 20px 24px;
}

.page-header {
  position: relative;
  text-align: center;
  margin-bottom: 4px;
}

.logo {
  display: inline-block;
}

.weather-widget {
  position: absolute;
  top: 6px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 0.85em;
}

.weather-widget .weather-icon {
  font-size: 1.3em;
  line-height: 1;
}

.weather-widget .weather-temp {
  font-weight: bold;
  color: #ccc;
}

.local-clock {
  position: absolute;
  top: 6px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 0.85em;
}

.local-clock .clock-time {
  font-weight: bold;
  color: #ccc;
}

.search-box {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}

.page-header .search-box {
  display: block;
}

.search-box input {
  width: 320px;
  max-width: 80vw;
  padding: 6px 10px;
  font-size: 0.95em;
  border: 1px solid #666;
  border-radius: 3px;
  background: #111;
  color: #fff;
}

.most-used-link {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 0.9em;
}

.search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: #222;
  border: 1px solid #555;
  border-radius: 4px;
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
  text-align: left;
}

.search-results .search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #333;
}

.search-results .search-result:last-child {
  border-bottom: none;
}

.search-results a {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: #fff;
}

.search-results img {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.result-name {
  font-weight: bold;
  white-space: nowrap;
}

.result-description {
  color: #aaa;
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toggle-button {
  flex-shrink: 0;
  background: #333;
  color: #fff;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 0.85em;
}

.toggle-button:hover {
  border-color: #fa5e00;
  color: #fa5e00;
}

.no-results {
  padding: 8px;
  color: #999;
}

.section-nav {
  position: relative;
  text-align: center;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  padding: 6px 100px;
  margin: 10px 0 8px;
}

.section-nav a {
  margin: 0 10px;
  font-size: 0.95em;
}

.section-nav a.active {
  color: #fa5e00;
}

.tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* plob.css (the original, kept as-is) hardcodes #sortable to a fixed 840px
   width, which forces horizontal scrolling on anything narrower than that -
   override it to stay fluid at every size. */
#sortable {
  width: 100%;
  max-width: 840px;
}

/* A little more breathing room between tiles on desktop than plob.css's
   original 5px - was looking cramped. */
@media (min-width: 901px) {
  #sortable li {
    margin: 6px;
  }

  /* plob.css's img.tile is a fixed 150x117 (li's own outer size) PLUS its own
     6px left/right margin, while li's content box is only 142px wide (150
     minus its 4px padding each side) - so the image is always wider than
     where it needs to fit, and the overflow gets pushed entirely to one
     side instead of split evenly, visibly shifting every tile's artwork
     right of its own container. li already provides the spacing we want, so
     size the image to fill the padded box exactly instead of overflowing it. */
  #sortable li img {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
  }
}

@media (max-width: 900px) {
  .section-nav {
    padding: 6px 16px;
  }

  .most-used-link {
    position: static;
    display: inline-block;
    transform: none;
    margin: 8px 0 0;
  }
}

/* Tablet: 4 tiles per row, using an actual grid instead of the flex-wrap
   above. That matters here: flex-wrap decides how many tiles fit per row
   purely from each tile's own width, so if a width is ever capped small
   enough that a 5th tile would also fit in the same row, flex-wrap happily
   packs one in - column count stops being reliably "4". A grid's
   repeat(4, ...) instead reserves exactly 4 tracks no matter how those
   tracks are sized, so column count and tile size are independent: track
   size can be capped at desktop's own 150px (avoiding the jump when the row
   first drops from 5 columns to 4) while the column count still can't
   silently become 5. minmax()'s floor (110px) matches the mobile rule's own
   ceiling below, so that boundary is smooth too. */
@media (max-width: 900.98px) and (min-width: 528px) {
  #sortable {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 150px));
    justify-content: center;
    gap: 12px;
  }

  #sortable li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  #sortable li img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
  }
}

/* Mobile: 3 tiles per row - same grid approach as tablet, and its own
   ceiling (110px) matches tablet's floor so there's no jump at the 528px
   boundary either. */
/* 527.98, not a clean 527: browsers can report a fractional CSS viewport
   width (subpixel/DPI rounding), so a plain 527/528 split can leave a sliver
   of width matching neither this query nor tablet's - found by testing at
   exactly 527px in a browser with a 1.25 device pixel ratio. */
@media (max-width: 527.98px) {
  /* No room for these next to the logo at phone widths - the search box and
     nav already fill the space. */
  .weather-widget,
  .local-clock {
    display: none;
  }

  #sortable {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 110px));
    justify-content: center;
    gap: 12px;
  }

  #sortable li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  #sortable li img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
  }
}

.static-page {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.static-page h1 {
  font-size: 1.4em;
}

.static-page h2 {
  font-size: 1.1em;
  color: #fa5e00;
  margin-top: 28px;
}

.static-page ul {
  padding-left: 22px;
}

.static-page img {
  max-width: 100%;
  border: 1px solid #444;
  margin: 8px 0;
}

.empty {
  text-align: center;
  color: #999;
}

.page-footer {
  text-align: center;
  border-top: 1px solid #666;
  margin-top: 20px;
  padding-top: 10px;
  font-size: 0.85em;
  color: #ccc;
}

.page-footer a {
  margin: 0 8px;
}