/* Clubs on Ion. Everything inside .ion-app is styled by Ion's own CSS (ion/ion.css,
   built from Ion's source by build.py). This file only frames, scales and animates it. */

/* ---------- a recreation scaled into a frame ---------- */
.io-view { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.io-view .ion-app { position: relative; min-height: 100%; }
.io-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); transform-origin: 3px 2px; }

/* Ion without its header and sidebar: the content area alone. */
.io-bare.ion-app { padding: 14px 16px 16px; }
.io-bare .main { margin: 0; padding: 0; }
.io-bare .primary-content { margin: 0 !important; }

/* Ion's messenger toast, placed inside the frame instead of the window. */
.io-toasts.messenger-fixed { position: absolute; right: 14px; bottom: 14px; top: auto; left: auto; z-index: 20; margin: 0; }
.io-toasts .messenger-message { transition: opacity 0.25s ease, transform 0.25s ease; }
.io-toasts .messenger-message.io-off { opacity: 0; transform: translateY(8px); }

/* ---------- hero: Ion in a browser window on a blue wall ---------- */
#hero { background: #0048ab; }
#hero > .io-wall { z-index: 0; }
.io-stage { z-index: 1; }
.io-stage { position: absolute; left: 0; top: 0; width: 1200px; height: 720px; transform-origin: 0 0; }
.io-wall { position: absolute; inset: 0; background:
  radial-gradient(85% 80% at 0% 100%, #4f9bff 0%, rgba(79, 155, 255, 0) 58%),
  radial-gradient(75% 70% at 100% 0%, #8cc8ff 0%, rgba(140, 200, 255, 0) 60%),
  linear-gradient(135deg, #002f75 0%, #0048ab 42%, #1f73e6 100%); }
:root[data-theme="dark"] .io-wall { filter: brightness(0.5) saturate(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .io-wall { filter: brightness(0.5) saturate(1.05); } }
.io-win { position: absolute; left: 70px; top: 40px; width: 1060px; height: 700px; border-radius: 12px 12px 0 0; overflow: hidden;
  background: #f0f0f0; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 30px 80px rgba(0, 20, 60, 0.45), 0 8px 24px rgba(0, 20, 60, 0.22); }
.io-chrome { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; padding: 0 14px;
  background: #ececec; box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.16); z-index: 2; }
.io-lights { display: flex; gap: 8px; }
.io-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.io-lights i:nth-child(2) { background: #febc2e; } .io-lights i:nth-child(3) { background: #28c840; }
.io-url { position: absolute; left: 50%; transform: translateX(-50%); height: 24px; min-width: 300px; padding: 0 14px; border-radius: 7px;
  background: rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 12px/1 var(--sans); color: #4b4b4b; }
.io-url svg { width: 10px; height: 10px; }
.io-win .io-view { top: 36px; }
.io-win .ion-app { min-height: 900px; }
:root[data-theme="dark"] .io-chrome { background: #2b2b2d; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .io-url { background: rgba(255, 255, 255, 0.08); color: #c9c9c9; }
:root[data-theme="dark"] .io-win { background: #212121; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .io-chrome { background: #2b2b2d; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.08); }
  :root:not([data-theme="light"]) .io-url { background: rgba(255, 255, 255, 0.08); color: #c9c9c9; }
  :root:not([data-theme="light"]) .io-win { background: #212121; }
}

/* The club announcements box opens the way Ion's slideToggle does. */
.ion-app .club-announcements-content { overflow: hidden; transition: height 0.42s cubic-bezier(0.45, 0, 0.25, 1); }
.ion-app .club-announcements-toggle-icon { transition: transform 0.42s cubic-bezier(0.45, 0, 0.25, 1); }
.ion-app .club-announcements.io-closed .club-announcements-toggle-icon { transform: rotate(180deg); }
.ion-app .num-club-announcements { display: inline-block; transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ion-app .num-club-announcements.io-bump { transform: scale(1.35); }

/* ---------- Find the news in one place ---------- */
#d-place { --h: 430px; background: #f0f0f0; }
.io-place .widgets { width: 340px !important; }
.io-before { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.io-post { position: absolute; left: 0; top: 0; width: 250px; padding: 12px 14px 13px; border-radius: 10px; background: #fff; color: #1c1e21;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.1); font: 400 12px/17px var(--sans); transform-origin: 0 0; }
.io-post .who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.io-post .av { width: 28px; height: 28px; border-radius: 50%; background: #d8dadf; flex: none; }
.io-post .who b { font-weight: 600; font-size: 12px; display: block; }
.io-post .who small { color: #65676b; font-size: 10.5px; }
.io-post strong { display: block; font-weight: 600; margin-bottom: 2px; }
.io-place-cover { position: absolute; inset: 0; z-index: 3; background: var(--frame); transition: opacity 0.45s ease; pointer-events: none; }
.io-place-cover p { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--muted); font: 400 12px/16px var(--sans); }

/* ---------- Subscribe to a club ---------- */
#d-subscribe { --h: 440px; background: #f0f0f0; }
.io-signup #activity-picker { height: 372px !important; }
.io-signup #activity-list { height: 300px !important; overflow: hidden; }
.io-signup #activity-list li { cursor: pointer; }
.io-signup #activity-detail { cursor: default; }
.io-signup #subscribe-button, .io-signup #unsubscribe-button, .io-signup #signup-button { cursor: pointer; }

/* ---------- Get the announcement in your inbox ---------- */
#d-inbox { --h: 470px; background: #f0f0f0; }
.io-post-view { transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
.io-postform .ion-app, .io-postform.ion-app { min-height: 1400px; }
.io-postform .cke_contents { height: 120px !important; }
.io-postform .ion-editor-body { height: 100%; padding: 8px 10px; background: #fff; font: 13px/1.6 Arial, Helvetica, sans-serif; color: #333; overflow: hidden; }
.io-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: io-blink 1s steps(1) infinite; }
@keyframes io-blink { 50% { opacity: 0; } }
.io-mail { position: absolute; inset: 0; z-index: 6; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: flex; flex-direction: column; }
.io-mail.on { opacity: 1; pointer-events: auto; }
.io-mail-head { padding: 18px 22px 14px; box-shadow: inset 0 -1px 0 var(--line, rgba(0, 0, 0, 0.08)); }
.io-mail-head h3 { margin: 0 0 8px; font: 500 16px/22px var(--sans); color: var(--ink); letter-spacing: -0.2px; }
.io-mail-head p { margin: 0; font: 400 12px/18px var(--sans); color: var(--ink-2); }
.io-mail-head p span { color: var(--muted); }
.io-mail-body { flex: 1; overflow: hidden; padding: 16px 22px; background: #fff; color: #222; font: 13.5px/1.5 Arial, Helvetica, sans-serif; }
.io-mail-body p { margin: 0 0 12px; }
.io-mail-body a { color: #1a0dab; }
.io-mail-body table p { font-size: 9pt; margin: 0; line-height: 1.4; }
.io-mail-body .gray { font-size: 9pt; color: gray; line-height: 1.4; margin-top: 14px; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  #d-place { --h: 360px; }
  #d-subscribe { --h: 380px; }
  #d-inbox { --h: 420px; }
  .io-post { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .ion-app .club-announcements-content, .ion-app .club-announcements-toggle-icon, .io-post-view, .io-mail, .io-place-cover { transition: none; }
  .io-caret { animation: none; }
}