/* =====================================================================
   🌐 Internet App (Snoogle)

   The one window allowed to feel a little "productized", because it is
   imitating a browser shell. The parchment home view and the quick-link
   cards are where that licence is spent; the toolbar and the loading
   panel stay OS utility chrome.

   Everything below `Fictional page host` dresses the invented web that
   js/apps/internet.js renders. Late-90s comes from layout and colour,
   never from typography: the font stays VT323 throughout, because
   reaching for a period serif would be the one rule this app breaks and
   its exception budget is already spent on `--internet-radius`.
   ===================================================================== */

#internet.window {
  background: #000 !important;
}

/* Owner-approved, and scoped to this window on purpose. The Internet app is the
   one surface imitating a browser rather than an OS panel, so its search row and
   its quick-link cards are allowed slightly rounded corners the way Messages is
   allowed its bubble radii. It stays a soft corner on a hard control: the
   `3px solid #000` borders and the hard shadows are untouched, and the window
   chrome, the title bar and the toolbar's structural borders stay square.
   Nothing outside `#internet` may consume this. */
#internet {
  --internet-radius: 8px;
}

/* The height restates `.window .content`'s own sum because this element
   overrides that rule's other declarations, and the two have to agree on the
   title bar: 36px, which is the height css/main.css now pins the title to, and
   not the 45px both used to guess at. Against a real 34.4px bar that guess left
   a strip of window background along the bottom inside the border — black here,
   since #internet paints its chrome black, which made it the most obvious one
   in the OS. */
#internet .internet-content {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: #f3eedf;
  height: calc(100% - 36px);
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   Toolbar
   --------------------------------------------------------------------- */

.internet-title-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: #d9d9d9;
  border-bottom: 3px solid #000;
  flex-shrink: 0;
}

.internet-title-tools[hidden] {
  display: none !important;
}

.internet-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.internet-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Buttons

   Hard border, hard shadow, and the press is positional rather than a
   scale, so a control never changes size under the pointer.
   --------------------------------------------------------------------- */

.internet-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 15px;
  border: 3px solid #000;
  background: #e0e0e0;
  color: #000;
  font-family: "VT323", monospace;
  font-size: 20px;
  line-height: 1;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9);
  cursor: pointer;
  white-space: nowrap;
}

.internet-toolbar-btn:hover:not(:disabled) {
  background: #000;
  color: #fff;
}

.internet-toolbar-btn:active:not(:disabled) {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.9);
  transform: translate(3px, 3px);
}

/* A disabled control should not look pressable at all, so it sits in the
   position a pressed button would hold and loses its shadow. */
.internet-toolbar-btn:disabled {
  background: #cfcfcf;
  color: #7c7c7c;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.9);
  transform: translate(3px, 3px);
  cursor: default;
}

.internet-nav-btn {
  flex-shrink: 0;
  padding: 6px 10px;
}

/* Rounded because it pairs with the address field beside it, so the search row
   reads as one soft unit while the nav cluster stays hard-edged. */
.internet-go-btn {
  flex-shrink: 0;
  min-width: 62px;
  background: #32cd32;
  color: #000;
  border-radius: var(--internet-radius);
}

.internet-go-btn:hover:not(:disabled) {
  background: #000;
  color: #32cd32;
}

/* ---------------------------------------------------------------------
   Address / search field
   --------------------------------------------------------------------- */

.internet-address-field {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 21px;
  font-family: "VT323", monospace;
  color: #111;
  background: #fff;
  border: 3px solid #000;
  border-radius: var(--internet-radius);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.14);
  caret-color: #000;
  text-overflow: ellipsis;
}

.internet-address-field::placeholder {
  color: #666;
}

/* `outline: none` on its own left no way to tell where you were typing.
   The cream fill is the same one the OS speech bubbles use, so the field
   reads as live without reaching for a modern focus glow. */
.internet-address-field:focus {
  outline: none;
  background: #fffdf2;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.24);
}

/* Typing is off: the field only displays the current address, or sits as
   disabled chrome on the home view. No cream focus fill for a field you
   cannot edit. */
.internet-address-field[readonly],
.internet-address-field:disabled {
  color: #444;
  background: #ececec;
  caret-color: transparent;
  cursor: default;
}

.internet-address-field[readonly]:focus,
.internet-address-field:disabled:focus {
  background: #ececec;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.14);
}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */

.internet-browser-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #f3eedf;
}

/* Two siblings, and only two. The failure panel that used to sit here was
   OS chrome speaking over the top of the page; in-world failure is now a
   page in the browser's own voice, so every state the app can be in is
   either the home view or the pane. */
.internet-browser-home,
.internet-browser-pane {
  width: 100%;
  height: 100%;
}

.internet-browser-home[hidden],
.internet-browser-pane[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Snoogle home
   --------------------------------------------------------------------- */

.internet-browser-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: clamp(14px, 4vh, 26px) 22px 0;
  text-align: center;
  overflow: auto;
}

.snoogle-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 620px);
  padding: 0;
}

.snoogle-header img {
  max-width: 340px;
  width: min(100%, 340px);
  height: auto;
}

/* Deliberately no wider than the Snoogle logo above it, so the two line up
   instead of the field running the whole content width. */
.internet-home-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 340px);
  margin: 0;
}

.favourites-section {
  width: min(100%, 620px);
  padding: 0;
}

/* VT323 ships one weight, so hierarchy here comes from size, spacing and
   the rule underneath rather than a synthetic bold. */
.favourites-title {
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 3px solid #000;
  font-family: "VT323", monospace;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #2f2b24;
}

/* One horizontal row with prev/next steppers. The track clips; the arrows
   (and a drag/flick on the track) are how the rest of the set is reached.
   Same .wp-arrow / .journal-nav-btn hard-shadow idiom. */
.favourites-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.favourites-carousel-btn {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: 3px solid #000;
  border-radius: var(--internet-radius);
  background: #e0e0e0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9);
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1;
  color: #000;
  cursor: pointer;
}

.favourites-carousel-btn:not(:disabled):active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.favourites-carousel-btn:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: translate(3px, 3px);
  cursor: not-allowed;
}

.favourites-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  /* The arrows own the paging; a visible bar would fight the retro chrome. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.favourites-container::-webkit-scrollbar {
  display: none;
}

/* These were transparent boxes with transparent borders, so the "cards"
   the design notes call for were really three loose icons on parchment. */
.favourite-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: #000;
  width: 98px;
  padding: 12px 8px 10px;
  gap: 10px;
  border: 3px solid #000;
  border-radius: var(--internet-radius);
  background: #f0f0f0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
  font-family: "VT323", monospace;
  cursor: pointer;
}

.favourite-item img {
  width: var(--file-icon-size);
  height: var(--file-icon-size);
  object-fit: cover;
  border: 2px solid #000;
  background-color: #fff;
}

/* The icon keeps its own white plate and black border, so it stays legible
   when the card inverts. */
.favourite-item:hover,
.favourite-item:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

.favourite-item:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
  transform: translate(3px, 3px);
}

.favourite-label {
  font-size: 18px;
  line-height: 1;
}

/* The bookmarks are text-only because there is nothing left to picture: no
   fictional site owns a logo, and the three real links this row used to
   carry have moved out to the desktop where they belong. The card keeps its
   own border and shadow, so the label carries the contrast that the image's
   white plate used to. */
.favourite-item.favourite-text {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
  max-width: none;
  min-height: 52px;
  justify-content: center;
  padding: 12px 14px;
  gap: 0;
  scroll-snap-align: start;
}

.favourite-item.favourite-text .favourite-label {
  font-size: 19px;
  line-height: 1.1;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Snoogle home — the RECENT strip

   The most interesting thing on the home view, and the app's real front
   door: it is the hook that leads a visitor into the history page and from
   there into the plot. Newest first, unlike the history page itself, because
   a strip labelled RECENT that opened on the oldest thing would just be
   wrong.
   --------------------------------------------------------------------- */

.internet-recent {
  width: min(100%, 620px);
  padding: 0;
  text-align: left;
}

.internet-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
}

.internet-recent-item {
  display: block;
  width: 100%;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: #2f2b24;
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.internet-recent-item:hover,
.internet-recent-item:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

/* Joke searches with nowhere to land. Still in the strip so the voice is
   there; not a button so they cannot open No pages matched. */
.internet-recent-item.is-inert {
  color: #6a6252;
  cursor: default;
}

.internet-recent-item.is-inert:hover,
.internet-recent-item.is-inert:focus-visible {
  background: transparent;
  color: #6a6252;
}

.internet-recent-more {
  display: inline-block;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: #5b5344;
  font-family: "VT323", monospace;
  font-size: 17px;
  text-decoration: underline;
  cursor: pointer;
}

.internet-recent-more:hover,
.internet-recent-more:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

/* Takes up the slack under the quick links, so the home view ends on a
   deliberate line instead of a band of empty parchment. */
.snoogle-footnote {
  width: min(100%, 620px);
  margin-top: auto;
  padding: 10px 0 12px;
  border-top: 3px solid #cdc4ab;
  font-family: "VT323", monospace;
  font-size: 16px;
  line-height: 1.3;
  color: #6a6252;
}

/* ---------------------------------------------------------------------
   Browser pane
   --------------------------------------------------------------------- */

.internet-browser-pane {
  position: relative;
  background: #fff;
}

/* ---------------------------------------------------------------------
   Loading state

   Bare centred text read as a hung app. This borrows the loader idiom the
   Guestbook and Message from the Creator already use: bordered panel, hard track, a
   stepped green sweep. The sweep moves, it does not grow.
   --------------------------------------------------------------------- */

.internet-browser-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(243, 238, 223, 0.96);
  z-index: 1;
}

.internet-browser-loading[hidden] {
  display: none;
}

.internet-loading-panel {
  width: min(100%, 380px);
  border: 3px solid #000;
  background: #f0f0f0;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9);
}

.internet-loading-title {
  padding: 4px 12px;
  background: #333;
  border-bottom: 3px solid #000;
  color: #fff;
  font-family: "VT323", monospace;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.internet-loading-body {
  padding: 16px 16px 14px;
}

.internet-loading-track {
  position: relative;
  height: 24px;
  border: 2px solid #000;
  background: #dcdcdc;
  overflow: hidden;
}

.internet-loading-track::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: repeating-linear-gradient(
    90deg,
    #f5f5f5 0 12px,
    #bdbdbd 12px 24px
  );
  animation: internetLoaderGrid 0.9s linear infinite;
}

.internet-loading-track::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -24%;
  width: 24%;
  background: #32cd32;
  animation: internetLoaderSweep 1.1s steps(6, end) infinite;
}

.internet-loading-line {
  margin: 12px 0 0;
  font-family: "VT323", monospace;
  font-size: 18px;
  text-align: center;
  color: #444;
  overflow-wrap: anywhere;
}

@keyframes internetLoaderGrid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 24px 0;
  }
}

@keyframes internetLoaderSweep {
  from {
    left: -24%;
  }
  to {
    left: 100%;
  }
}

/* ---------------------------------------------------------------------
   Fictional page host

   Every invented page renders into this one box. It scrolls in both
   directions on purpose: period pages have fixed-width tables and ASCII
   columns that exceed 530px, and a 90s page that scrolls sideways is the
   correct rendering rather than a bug. Forcing reflow would flatten the
   alignment that carries half the jokes.
   --------------------------------------------------------------------- */

.internet-page-view {
  height: 100%;
  padding: 22px;
  overflow: auto;
  background: #fff;
  font-family: "VT323", monospace;
  font-size: 20px;
  line-height: 1.35;
  color: #111;
}

.internet-page-view > * {
  margin: 0 0 14px;
}

.internet-page-view > *:last-child {
  margin-bottom: 0;
}

/* Every page element inside here is square. A fictional 1998 page with
   rounded corners would be the one thing in the app that gives it away, so
   `--internet-radius` deliberately stops at the toolbar.

   No `text-transform` on any authored copy, here or on the headings and the
   construction bar below: the registry says exactly what renders, so a page
   whose voice is lowercase — kestrel's 404 is "not here" — stays lowercase. */
.internet-page-banner {
  padding-bottom: 8px;
  border-bottom: 3px solid #000;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
}

.internet-page-heading {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.internet-page-text {
  overflow-wrap: anywhere;
}

/* The ASCII lists are the whole joke on half these pages, so they keep their
   own horizontal scroll rather than widening the page around them. */
.internet-page-pre {
  padding: 10px 12px;
  overflow-x: auto;
  border: 3px solid #000;
  background: rgba(255, 255, 255, 0.55);
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1.25;
  white-space: pre;
}

.internet-page-rule {
  height: 0;
  border: 0;
  border-top: 3px solid #000;
}

.internet-page-note {
  font-size: 17px;
  line-height: 1.3;
  color: #5b5344;
}

.internet-page-list {
  padding-left: 26px;
}

.internet-page-list li {
  margin-bottom: 4px;
}

.internet-page-table {
  border-collapse: collapse;
  border: 3px solid #000;
  font-family: "VT323", monospace;
  font-size: 18px;
}

.internet-page-table th,
.internet-page-table td {
  padding: 5px 10px;
  border: 2px solid #000;
  text-align: left;
  white-space: nowrap;
}

.internet-page-table th {
  background: #000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* A visitor counter, drawn as bordered digit cells. Numbers stay in VT323 —
   `Pixelify Sans` is banned for numerals. */
.internet-page-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.internet-page-counter span {
  min-width: 22px;
  padding: 3px 0;
  border: 2px solid #000;
  background: #000;
  color: #32cd32;
  font-size: 21px;
  line-height: 1;
  text-align: center;
}

/* The label and the suffix sit in the same centred row as the digits, but they
   are words rather than cells. */
.internet-page-counter span.internet-page-counter-text {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Static, because AGENTS.md prefers discrete state changes and the loader's
   stepped sweep is the only motion this app is allowed. */
.internet-page-construction {
  padding: 6px 10px;
  border: 3px solid #000;
  background: repeating-linear-gradient(
    45deg,
    #ffd400 0 12px,
    #1b1b1b 12px 24px
  );
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
    -2px 2px 0 #000;
}

/* Costs no art and is funnier than a photograph would be. */
.internet-page-broken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 12px;
  border: 2px solid #7c7c7c;
  background: #f0f0f0;
  font-size: 17px;
  color: #555;
}

.internet-page-broken::before {
  content: "[x]";
  flex-shrink: 0;
  padding: 2px 5px;
  border: 2px solid #7c7c7c;
  background: #fff;
  color: #b00;
}

.internet-page-link {
  display: inline-block;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: #0000cc;
  font-family: "VT323", monospace;
  font-size: 20px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.internet-page-link:hover,
.internet-page-link:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

/* The real download, and on The Back Shelf it is deliberately the smallest
   text on the page — it sits in a wall of DOWNLOAD banners that do nothing,
   and finding it is the joke the Journal already tells. It stays a real
   focusable button, so a keyboard reaches it on the first Tab that gets
   there even though the eye does not. */
.internet-page-download {
  display: inline-block;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #0000cc;
  font-family: "VT323", monospace;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: underline;
  cursor: pointer;
}

.internet-page-download:hover,
.internet-page-download:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

/* The banners that are not the download. Non-interactive by construction —
   no click target at all — so there is nothing to wire, nothing to disable
   and no dead end to explain. Same trick as BYTEMART's ADD TO BASKET. */
.internet-page-banners {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.internet-page-banners span {
  padding: 5px 10px;
  border: 3px outset #9a9a9a;
  background: linear-gradient(180deg, #ffe14d 0%, #f0a500 100%);
  color: #7a2b00;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}

/* Giant red arrow + congratulations box. Paint-only scam chrome for The
   Back Shelf. The blink is stepped on purpose — discrete on/off, not a
   soft pulse — so it reads as a 1998 GIF rather than modern motion. */
.internet-page-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  text-align: center;
  user-select: none;
}

.internet-page-arrow-label {
  color: #ff1a1a;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  animation: internetScamBlink 0.9s steps(1, end) infinite;
}

.internet-page-arrow-shape {
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 48px solid #ff1a1a;
  filter: drop-shadow(3px 3px 0 #000);
  animation: internetScamBlink 0.9s steps(1, end) infinite;
}

.internet-page-arrow.is-up .internet-page-arrow-shape {
  border-top: 0;
  border-bottom: 48px solid #ff1a1a;
}

.internet-page-popup {
  padding: 12px 14px;
  border: 4px solid #ff1a1a;
  background: #fff700;
  box-shadow: 5px 5px 0 #000;
  text-align: center;
}

.internet-page-popup-title {
  margin: 0 0 8px;
  color: #ff1a1a;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  animation: internetScamBlink 1.1s steps(1, end) infinite;
}

.internet-page-popup-text {
  margin: 0;
  color: #111;
  font-size: 18px;
  line-height: 1.3;
}

@keyframes internetScamBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

.internet-page-webring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 3px solid #000;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.internet-page-webring-label {
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.internet-page-webring-count {
  flex-basis: 100%;
  font-size: 17px;
  color: #5b5344;
}

/* The transfer block. Reuses the loader's own stepped sweep rather than
   inventing a second progress idiom. */
.internet-page-transfer {
  padding: 14px;
  border: 3px solid #000;
  background: rgba(255, 255, 255, 0.6);
}

/* The block owns its own heading so the swap to DONE replaces the whole thing,
   and its children are not direct children of the page host, so they need the
   page's rhythm restated once. */
.internet-page-transfer > * {
  margin: 0 0 12px;
}

.internet-page-transfer > *:last-child {
  margin-bottom: 0;
}

.internet-page-transfer-file {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 19px;
}

/* ---------------------------------------------------------------------
   Per-site palettes

   Distinct sites that look identical read as one site, so each host gets
   its own background. The class is set from the site's `theme` field; the
   renderer only ever writes a className, never a style.
   --------------------------------------------------------------------- */

.internet-page-view.is-snoogle {
  background: #fff;
}

/* One man's page: black, lime, and a yellow heading. The palette says what
   no line of copy is allowed to. */
.internet-page-view.is-backshelf {
  background: #101010;
  color: #b6ffb6;
}

.internet-page-view.is-backshelf .internet-page-banner {
  border-bottom-color: #32cd32;
  color: #ffe14d;
}

.internet-page-view.is-backshelf .internet-page-rule {
  border-top-color: #32cd32;
}

.internet-page-view.is-backshelf .internet-page-pre {
  border-color: #32cd32;
  background: rgba(0, 0, 0, 0.5);
  color: #b6ffb6;
}

.internet-page-view.is-backshelf .internet-page-note {
  color: #7fbf7f;
}

.internet-page-view.is-backshelf .internet-page-link,
.internet-page-view.is-backshelf .internet-page-download {
  color: #7fffd4;
}

.internet-page-view.is-backshelf .internet-page-link:hover,
.internet-page-view.is-backshelf .internet-page-link:focus-visible,
.internet-page-view.is-backshelf .internet-page-download:hover,
.internet-page-view.is-backshelf .internet-page-download:focus-visible {
  background: #32cd32;
  color: #000;
}

.internet-page-view.is-backshelf .internet-page-transfer,
.internet-page-view.is-backshelf .internet-page-webring {
  border-color: #32cd32;
  background: rgba(0, 0, 0, 0.5);
}

/* Louder fake download buttons on the warez shelf only. */
.internet-page-view.is-backshelf .internet-page-banners span {
  padding: 8px 12px;
  border: 3px outset #ffea00;
  background: linear-gradient(180deg, #ff3b3b 0%, #c40000 100%);
  color: #fff700;
  font-size: 18px;
  text-shadow: 1px 1px 0 #000;
}

.internet-page-view.is-backshelf .internet-page-popup {
  border-color: #ff1a1a;
  background: #1a0000;
  color: #fff700;
}

.internet-page-view.is-backshelf .internet-page-popup-text {
  color: #fff700;
}

/* Mail order, by post, in a beige century. */
.internet-page-view.is-bytemart {
  background: #dfe7f0;
  color: #10233d;
}

.internet-page-view.is-bytemart .internet-page-banner {
  color: #10233d;
}

.internet-page-view.is-neotech {
  background: #f7f7f7;
  color: #1b3a6b;
}

/* A free host in 1998: grey, and proud of it. */
.internet-page-view.is-orbitpages {
  background: #d0d0c8;
  color: #1b1b1b;
}

/* The building manager's own page, and it looks exactly as plain as he is. */
.internet-page-view.is-notices {
  background: #fffbe8;
  color: #1b1b1b;
}

/* The fan shrine, and the only cheerful page on the fictional web. */
.internet-page-view.is-tidepool {
  background: #cdeffd;
  color: #08344a;
}

.internet-page-view.is-tidepool .internet-page-banner {
  border-bottom-color: #08344a;
  color: #08344a;
}

.internet-page-view.is-aquarium {
  background: #e8f6ee;
  color: #14402a;
}

/* Soft clock-site pink for the hug answer page. */
.internet-page-view.is-hugclock {
  background: #ffe4ef;
  color: #5a1634;
}

.internet-page-view.is-hugclock .internet-page-banner {
  border-bottom-color: #c2185b;
  color: #c2185b;
}

.internet-page-view.is-hugclock .internet-page-pre {
  border-color: #c2185b;
  background: rgba(255, 255, 255, 0.65);
}

/* Dusty legal parchment for balcony jurisprudence. */
.internet-page-view.is-pigeonlaw {
  background: #ebe2c9;
  color: #2a2416;
}

.internet-page-view.is-pigeonlaw .internet-page-banner {
  border-bottom-color: #5a4a22;
  color: #5a4a22;
}

.internet-page-view.is-pigeonlaw .internet-page-construction {
  background: repeating-linear-gradient(
    45deg,
    #8b7355 0 12px,
    #2a2416 12px 24px
  );
}

/* Lab-bench yellow for the egg institute. */
.internet-page-view.is-egglab {
  background: #f7f3b0;
  color: #2d3200;
}

.internet-page-view.is-egglab .internet-page-banner {
  border-bottom-color: #6b7000;
  color: #6b7000;
}

.internet-page-view.is-egglab .internet-page-pre {
  border-color: #6b7000;
  background: #fffde0;
}

/* Government-form beige for the wasp authority. */
.internet-page-view.is-waspgov {
  background: #f4f0e4;
  color: #1f2430;
}

.internet-page-view.is-waspgov .internet-page-banner {
  border-bottom-color: #1f2430;
  color: #1f2430;
  letter-spacing: 0.16em;
}

.internet-page-view.is-waspgov .internet-page-pre {
  border-color: #1f2430;
  background: #fff;
}

/* Warm toast paper for the nutritional position. */
.internet-page-view.is-toastpaper {
  background: #f3e0c4;
  color: #4a2a10;
}

.internet-page-view.is-toastpaper .internet-page-banner {
  border-bottom-color: #8a4b16;
  color: #8a4b16;
}

.internet-page-view.is-toastpaper .internet-page-pre {
  border-color: #8a4b16;
  background: #fff8ee;
}

/* ---------------------------------------------------------------------
   Cannot Find Server

   A browser in which every page is invented cannot have a real 404, so
   failure is a DNS failure — and it is a page rather than OS chrome,
   because it has to be reachable from a dead webring link where the OS has
   nothing to say.
   --------------------------------------------------------------------- */

.internet-page-view.is-notfound {
  background: #f3eedf;
  color: #111;
}

.internet-page-host {
  padding: 8px 12px;
  border: 3px solid #000;
  background: #fff;
  font-size: 19px;
  overflow-wrap: anywhere;
}

.internet-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------
   The history page

   Forty-six authored entries and the longest scroll in the OS, so the day
   labels are the only landmarks in it and they stick.
   --------------------------------------------------------------------- */

/* `background: inherit` takes the page host's own fill, which is what stops the
   entries scrolling through the label — and it keeps working when a desktop
   theme repaints the page palette. */
.internet-history-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 0 4px;
  border-bottom: 3px solid #000;
  background: inherit;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.internet-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.internet-history-item {
  display: block;
  width: 100%;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: "VT323", monospace;
  font-size: 19px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.internet-history-item:hover,
.internet-history-item:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

.internet-history-item.is-inert {
  opacity: 0.55;
  cursor: default;
}

.internet-history-item.is-inert:hover,
.internet-history-item.is-inert:focus-visible {
  background: transparent;
  color: inherit;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------
   Snoogle results
   --------------------------------------------------------------------- */

.internet-result {
  padding: 0;
}

.internet-result > * + * {
  margin-top: 2px;
}

.internet-result-title {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: #0000cc;
  font-family: "VT323", monospace;
  font-size: 22px;
  line-height: 1.15;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.internet-result-title:hover,
.internet-result-title:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

.internet-result-url {
  padding: 0 6px;
  font-size: 17px;
  color: #1a7f37;
  overflow-wrap: anywhere;
}

.internet-result-blurb {
  padding: 0 6px;
  font-size: 18px;
  color: #3d3d3d;
}

/* ---------------------------------------------------------------------
   Narrow windows
   --------------------------------------------------------------------- */

@media (max-width: 560px) {
  .internet-title-tools {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .internet-nav-group {
    width: 100%;
  }

  .internet-nav-btn {
    flex: 1;
  }

  .internet-search-form {
    width: 100%;
    flex-basis: 100%;
  }

  .internet-address-field {
    font-size: 19px;
  }

  .internet-home-search-form {
    width: 100%;
    flex-wrap: nowrap;
  }

  .internet-browser-home {
    gap: 18px;
    padding: 18px 16px 0;
  }

  .snoogle-header img {
    max-width: 260px;
    width: min(100%, 260px);
  }

  .favourites-carousel {
    gap: 6px;
  }

  .favourites-carousel-btn {
    width: 30px;
    font-size: 16px;
  }

  .favourites-container {
    gap: 10px;
  }

  .favourite-item {
    width: 88px;
    padding: 10px 6px 8px;
  }

  /* Stay on one row on a phone too — long labels keep their natural card
     width and the carousel steps to the next one. */
  .favourite-item.favourite-text {
    flex: 0 0 auto;
    width: auto;
    min-height: 46px;
    padding: 10px 12px;
  }

  .internet-page-view {
    padding: 14px;
    font-size: 19px;
  }

  .internet-page-banner {
    font-size: 22px;
    letter-spacing: 0.06em;
  }

  .internet-page-pre {
    font-size: 17px;
  }

  .internet-page-actions .internet-toolbar-btn {
    flex: 1 1 100%;
  }

  /* The strip is a hook, not a list. Three entries is enough of one on a phone,
     and hiding the rest here means no resize listener in the app. */
  .internet-recent-item:nth-child(n + 4) {
    display: none;
  }
}