/* AOL, about 1998.

   The recognizable parts are the heavy grey client window, the toolbar of large
   colored buttons above everything, the blue title bar, and the yellow running
   man. All drawn in CSS: the running man is a mail flap and a body, which is
   enough silhouette to read as the thing without reproducing anybody's artwork.

   The inbox is the point of the page. Its rows are ordinary <details>, styled
   to look like a mail list: a summary that reads like a row, and the answer
   folded underneath until somebody opens it. */

:root {
  --aol-blue:   #1a3a8f;
  --aol-blue-2: #2f5fc4;
  --aol-face:   #d4d0c8;   /* the grey every window was made of */
  --aol-yellow: #ffcc00;
  --aol-real:   #1b7a2f;
  --aol-fake:   #b00020;
  --aol-orange: #E87722;
}

body {
  background: #5a7fbe;
  color: #000;
  font: 13px/1.6 Arial, Helvetica, "Helvetica Neue", sans-serif;
  padding: 16px 12px 40px;
}

.aol { max-width: 1000px; margin: 0 auto; }

a { color: var(--aol-blue); }

/* ── The client window ─────────────────────────────────────────────────── */

.aol-win {
  background: var(--aol-face);
  border: 2px outset #eee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.aol-title {
  background: linear-gradient(90deg, var(--aol-blue), var(--aol-blue-2));
  color: #fff;
  padding: 5px 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.aol-title-text { font-weight: 700; font-size: 13px; }
.aol-title-clock { font-size: 12px; opacity: .9; }

.aol-toolbar { background: var(--aol-face); border-bottom: 2px groove #fff; padding: 8px 6px; }
.aol-toolbar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.aol-toolbar li {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 74px; padding: 4px 6px; font-size: 11px; color: #000;
}
.aol-tool-ico {
  width: 26px; height: 26px; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Each button a different color, which is exactly what that toolbar was. */
.aol-tool-0 { background: linear-gradient(#8fc4f0, #2f6fbf); }
.aol-tool-1 { background: linear-gradient(#ffe08a, #e0a41a); }
.aol-tool-2 { background: linear-gradient(#f0a0a0, #c03030); }
.aol-tool-3 { background: linear-gradient(#c8c8c8, #808080); }
.aol-tool-4 { background: linear-gradient(#a8e0a8, #3f9f3f); }
.aol-tool-5 { background: linear-gradient(#e0b0e8, #9040a8); }
.aol-tool-6 { background: linear-gradient(#a0d8e8, #2088a8); }

.aol-body { display: flex; align-items: flex-start; gap: 0; }
.aol-main { flex: 1 1 auto; min-width: 0; background: #fff; padding: 18px 24px 26px; }

/* The buddy list is written after the main column and put back beside it. */
.aol-buddy  { order: 2; width: 224px; flex: 0 0 224px; background: var(--aol-face); padding: 14px 12px; }
.aol-main   { order: 1; }

@media (max-width: 780px) {
  .aol-body { display: block; }
  .aol-buddy { width: auto; }
  .aol-main { padding: 14px 16px 20px; }
}

/* ── The welcome bar and the running man ───────────────────────────────── */

.aol-welcome {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(var(--aol-blue), var(--aol-blue-2));
  color: #fff; padding: 12px 16px; margin-bottom: 18px;
}
.aol-runner {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 3px;
  background: var(--aol-yellow);
  border: 2px solid #b98b00;
}
/* The flap of the envelope he is carrying, which is the whole silhouette. */
.aol-runner-flap {
  position: absolute; inset: 6px 5px auto 5px; height: 12px;
  border: 2px solid #b98b00; border-bottom: 0;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.aol-welcome-words { display: flex; flex-direction: column; gap: 2px; }
.aol-welcome-words strong { font-size: 15px; }
.aol-gotmail { font-size: 13px; color: var(--aol-yellow); font-weight: 700; }

.aol-main h1 { font-size: clamp(21px, 3.4vw, 28px); line-height: 1.25; color: var(--aol-blue); margin: 0 0 10px; }
.aol-main h2 { font-size: 17px; color: var(--aol-blue); margin: 26px 0 6px; }
.aol-main h3 { font-size: 14px; margin: 16px 0 2px; }
.aol-lead { font-size: 14px; color: #333; margin: 0 0 8px; }
.aol-note { font-size: 12px; color: #555; margin: 4px 0 10px; }
.aol-list { margin: 8px 0 0; padding: 0 0 0 22px; }
.aol-list li { margin-bottom: 8px; }

/* ── The inbox ─────────────────────────────────────────────────────────── */

.aol-inbox { list-style: none; margin: 10px 0 0; padding: 0; border: 2px inset #c0c0c0; background: #fff; }
.aol-inbox > li + li { border-top: 1px solid #d8d8d8; }

.aol-msg summary {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  list-style: none;                       /* the default marker, replaced below */
}
.aol-msg summary::-webkit-details-marker { display: none; }
.aol-msg summary:hover { background: #eaf0fb; }
.aol-msg summary:focus-visible { outline: 2px solid var(--aol-orange); outline-offset: -2px; }
.aol-flag {
  flex: 0 0 auto; width: 14px; height: 11px;
  background: var(--aol-yellow); border: 1px solid #b98b00;
  /* The envelope opens when the message does, which is the one bit of feedback
     a mail list has always given. */
}
.aol-msg[open] .aol-flag { background: #fff; }
.aol-from { font-weight: 700; flex: 0 0 auto; min-width: 190px; }
.aol-subject { flex: 1 1 auto; min-width: 0; color: #222; }
.aol-when { flex: 0 0 auto; color: #777; font-size: 12px; }

.aol-verdict { padding: 4px 14px 16px 36px; background: #f7f9fd; }
.aol-verdict p { margin: 0 0 8px; }
.aol-verdict p:last-child { margin-bottom: 0; }
.aol-badge {
  display: inline-block; padding: 2px 10px;
  font-weight: 700; font-size: 12px; color: #fff;
}
.aol-badge-real { background: var(--aol-real); }
.aol-badge-fake { background: var(--aol-fake); }

@media (max-width: 620px) {
  .aol-msg summary { flex-wrap: wrap; }
  .aol-from { min-width: 0; }
  .aol-when { width: 100%; }
  .aol-verdict { padding-left: 14px; }
}

/* ── The compose window, which is the form ─────────────────────────────── */

.aol-compose { border: 2px outset #eee; background: var(--aol-face); margin: 26px 0 0; max-width: 560px; }
/* A heading wearing a title bar. The font size is the title bar's, not the
   heading's, because what it has to look like is the top of a window. */
.aol-compose-title {
  background: linear-gradient(90deg, var(--aol-blue), var(--aol-blue-2));
  color: #fff !important; font-weight: 700; font-size: 12px; padding: 5px 10px;
  margin: 0 !important;
}
.aol-compose-body { padding: 16px 18px 18px; }

.aol-field { margin: 0 0 12px; }
.aol-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.aol-field input, .aol-field textarea {
  width: 100%; padding: 5px 6px;
  font: 13px/1.5 Arial, Helvetica, sans-serif;
  border: 2px inset #c0c0c0; background: #fff;
}
.aol-field input:focus, .aol-field textarea:focus { outline: 2px solid var(--aol-orange); outline-offset: 1px; }
.aol-field.is-bad input, .aol-field.is-bad textarea { border-color: var(--aol-fake); background: #fff6f6; }

.rt-field-err { color: var(--aol-fake); font-size: 12px; font-weight: 700; margin: 4px 0 0; }
.rt-err { border: 2px solid var(--aol-fake); background: #fff6f6; color: #700; padding: 9px 11px; font-size: 12px; margin: 0 0 12px; }

.aol-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 0; }
.aol-actions button {
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  padding: 8px 26px; cursor: pointer;
  border: 2px outset #eee; background: var(--aol-face);
}
.aol-actions button:hover, .aol-actions button:focus { background: var(--aol-orange); color: #fff; }
.aol-actions button:active { border-style: inset; }

/* ── The buddy list ────────────────────────────────────────────────────── */

.aol-buddy h2 { font-size: 13px; color: var(--aol-blue); margin: 0 0 8px; }
.aol-buddy ul { list-style: none; margin: 0; padding: 0; background: #fff; border: 2px inset #c0c0c0; }
.aol-buddy li { display: flex; align-items: center; gap: 7px; padding: 6px 9px; font-size: 12px; }
.aol-buddy li + li { border-top: 1px solid #eee; }
.aol-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.aol-dot-on  { background: var(--aol-real); }
.aol-dot-off { background: #aaa; }
.aol-buddy-name { flex: 1 1 auto; }
.aol-buddy-state { color: #777; font-size: 11px; }
.aol-signon { font-size: 11px; color: #555; margin: 8px 0 0; }