/*
 * Profile pages (igpt.fun). Flat and plain on purpose, in the main site's colors: a card with a hairline
 * border on a quiet background, system fonts, one accent. No gradients, shadows or glow. Every look is a class:
 * the page has no inline style (its CSP allows only this file).
 */

/* ── Accent colors (the buttons, link borders and highlights) ── */
.accent-blue   { --accent: #2563eb; }
.accent-teal   { --accent: #0f766e; }
.accent-green  { --accent: #15803d; }
.accent-orange { --accent: #c2410c; }
.accent-red    { --accent: #b91c1c; }
.accent-pink   { --accent: #be185d; }
.accent-purple { --accent: #7e22ce; }
.accent-gray   { --accent: #52525b; }

/* ── Themes: colors and shape ── */
body {
  --bg: #f7f8fb; --card: #ffffff; --line: #e3e6ee; --text: #0d0f14; --sub: #667085; --hover: #f4f6fb;
  --accent-fg: #ffffff; --radius: 14px; --panel-radius: 18px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Classic follows the visitor's light or dark setting, like the main site. */
@media (prefers-color-scheme: dark) {
  .theme-classic { --bg: #1a1a1d; --card: #232327; --line: #303036; --text: #ececef; --sub: #9d9da8; --hover: #2a2a2f; }
}
.theme-paper    { --bg: #f1ebdc; --card: #fffdf7; --line: #e0d8c3; --text: #2b2a26; --sub: #7a7566; --hover: #f7f2e4; }
.theme-midnight { --bg: #0e0f12; --card: #17181c; --line: #2a2c33; --text: #e8e9ed; --sub: #8f93a1; --hover: #1e2025; }
.theme-terminal {
  --bg: #000000; --card: #000000; --line: #1f7a1f; --text: #33ff33; --sub: #1fb31f; --hover: #062006;
  --accent: #33ff33; --accent-fg: #000000; --radius: 0; --panel-radius: 0;
}
.theme-win95 {
  --bg: #008080; --card: #c0c0c0; --line: #808080; --text: #000000; --sub: #404040; --hover: #d4d0c8;
  --accent: #000080; --accent-fg: #ffffff; --radius: 0; --panel-radius: 0;
}

/* A plain background color instead of a picture. */
.bgc-white    { --bg: #ffffff; }
.bgc-cream    { --bg: #f5efe0; }
.bgc-sky      { --bg: #dbeafe; }
.bgc-mint     { --bg: #d1fae5; }
.bgc-rose     { --bg: #fce7f3; }
.bgc-slate    { --bg: #334155; }
.bgc-charcoal { --bg: #18181b; }
.bgc-navy     { --bg: #172554; }
.bgc-forest   { --bg: #14532d; }
.bgc-black    { --bg: #000000; }

/* ── Fonts ── */
.font-sans       { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.font-serif      { font-family: Georgia, 'Times New Roman', serif; }
.font-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.font-typewriter { font-family: 'American Typewriter', 'Courier New', Courier, monospace; }
.font-comic      { font-family: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', 'Comic Sans', cursive; }
.font-impact     { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: 0.01em; }
.theme-terminal  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.theme-win95     { font-family: Tahoma, 'MS Sans Serif', Geneva, sans-serif; }

/* ── The background picture: crushed on purpose. Normal is smoothed by the browser; "High quality" is pixelated. ── */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.bg-hq { image-rendering: pixelated; }

/* ── The strip across the top: whose site this is, and the way to get a page of your own ── */
.bar { background: color-mix(in srgb, var(--card) 94%, transparent); border-bottom: 1px solid var(--line); }
.theme-terminal .bar, .theme-win95 .bar { background: var(--card); }
.bar-in {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 0 auto;
  padding: 9px 0;
}
.bar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
.bar-brand img { flex: none; border-radius: 5px; }
.theme-terminal .bar-brand img, .theme-win95 .bar-brand img { border-radius: 0; }
.bar-cta, .promo-btn {
  display: inline-block;
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
}
.bar-cta:hover, .promo-btn:hover { opacity: 0.92; }
.bar-brand:focus-visible, .bar-cta:focus-visible, .promo-btn:focus-visible, .reach-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The page ── */
.theme-terminal .page, .theme-win95 .page { background: var(--card); }
.page {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 16px auto;
  padding: 28px 18px 18px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.page.message { text-align: center; margin-top: 15vh; }

.head { text-align: center; }
/* Caller pictures are stretched to fill a slightly rounded square, never cropped or made a circle: the same on every screen of the site. */
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: fill;
  border: 1px solid var(--line);
  background: var(--hover);
}
.theme-terminal .avatar, .theme-win95 .avatar { border-radius: 0; }
.name { margin: 12px 0 2px; font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pro { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); }
.bio { margin: 12px auto 0; max-width: 44ch; white-space: pre-line; overflow-wrap: anywhere; }
.presence { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.dot { width: 8px; height: 8px; background: #16a34a; border-radius: 50%; }
.theme-terminal .dot, .theme-win95 .dot { border-radius: 0; }

.reach { display: flex; gap: 10px; margin-top: 18px; }
.reach-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.reach-btn:hover { background: var(--hover); border-color: var(--accent); }

.blocks { display: grid; gap: 10px; margin-top: 22px; }
.blocks:empty { display: none; }

/* Blocks */
.link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.link:hover { background: var(--hover); border-color: var(--accent); }
.link:focus-visible, .share:focus-visible, .qr summary:focus-visible, .foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link-emoji { flex: none; font-size: 20px; line-height: 1; }
.link-text { display: grid; min-width: 0; }
.link-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.link-host { font-size: 12px; color: var(--sub); overflow-wrap: anywhere; }

.text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.heading { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); overflow-wrap: anywhere; }
.divider-line { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.divider-dots, .divider-stars { text-align: center; color: var(--sub); letter-spacing: 0.3em; font-size: 12px; }
.spacer-s { height: 4px; }
.spacer-m { height: 18px; }
.spacer-l { height: 40px; }

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.stat { flex: 1 1 120px; margin: 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.stat dt { font-size: 12px; color: var(--sub); }
.stat dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

.widget {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.w-label { font-size: 13px; color: var(--sub); overflow-wrap: anywhere; }
.w-sub { font-size: 12px; color: var(--sub); }
.w-time { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.yourtime { grid-template-columns: 1fr 1fr; gap: 12px; }
.w-col { display: grid; gap: 2px; }
.w-num { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.w-unit { font-size: 14px; color: var(--sub); }
.countdown .w-label { font-size: 15px; color: var(--text); }

.marquee { overflow: hidden; white-space: nowrap; padding: 10px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 14s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; text-align: center; padding: 10px 12px; }
  .marquee span { animation: none; padding-left: 0; }
}

.banner { padding: 8px 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }
.banner-construction { border-color: var(--accent); }
.banner-new { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-fg); }
.banner-netscape { border-style: dotted; }
.banner-cool { border-style: solid; }
.banner-webring { border-style: double; border-width: 3px; }

.status { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px 14px; font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; overflow-wrap: anywhere; }
.theme-terminal .status, .theme-win95 .status { border-radius: 0; }

/* ── Share, QR and the footer ── */
.actions { margin-top: 22px; }
.share {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.share:hover { opacity: 0.92; }
.share:active { opacity: 0.85; }
.theme-win95 .share, .theme-win95 .link, .theme-win95 .stat, .theme-win95 .widget, .theme-win95 .marquee, .theme-win95 .banner, .theme-win95 .status, .theme-win95 .page,
.theme-win95 .reach-btn, .theme-win95 .promo, .theme-win95 .bar-cta, .theme-win95 .promo-btn {
  border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff;
}
.theme-win95 .share, .theme-win95 .bar-cta, .theme-win95 .promo-btn { background: #c0c0c0; color: #000000; }
.theme-win95 .share:active, .theme-win95 .link:active, .theme-win95 .reach-btn:active, .theme-win95 .bar-cta:active, .theme-win95 .promo-btn:active { border-color: #404040 #ffffff #ffffff #404040; opacity: 1; }
.theme-win95 .avatar { border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; }

.qr { margin-top: 14px; text-align: center; font-size: 13px; color: var(--sub); }
.qr summary { display: inline-block; cursor: pointer; padding: 4px 8px; }
.qr-box { display: block; width: fit-content; margin: 8px auto 0; padding: 8px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.qr-box svg { display: block; width: 176px; height: 176px; }

.promo { margin-top: 22px; padding: 16px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.promo-title { margin: 0; font-size: 15px; font-weight: 600; }
.promo-text { margin: 4px 0 12px; font-size: 13px; color: var(--sub); }
.promo-btn { padding: 9px 16px; font-size: 14px; }

.foot { margin: 20px 0 0; text-align: center; font-size: 12px; color: var(--sub); }
.foot span { margin: 0 4px; }
.foot a { color: var(--sub); }
.foot a:hover { color: var(--text); }