/* PC Practice Sim — fake browser chrome, guide bubble, picker. */
.pc-sim { border: 1px solid var(--color-border, #d1d5db); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; background: #fff; font-size: 1rem; }
/* Buttons inherit neither family nor size from their container. Family only —
   every button rule below carries its own explicit font-size, and a size here
   (specificity 0,1,1) would beat the deliberate ones on .pc-simpg__button and
   .pc-sim__ext (0,1,0). */
.pc-sim button { font-family: inherit; }
.pc-sim__banner { text-align: center; font-size: 0.9rem; color: #4b5563; background: #f0f6ff; border: 1px solid #d5e5fb; border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.9rem; }

.pc-sim__desktop { background: linear-gradient(160deg, #dbe7f2, #c8d8e8); border-radius: 10px; padding: 1.25rem; position: relative; }
.pc-sim__browser { background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 30, 60, 0.18); overflow: hidden; }
.pc-sim__titlebar { display: flex; gap: 6px; padding: 0.5rem 0.75rem; background: #eef1f5; }
.pc-sim__dot { width: 11px; height: 11px; border-radius: 50%; background: #cfd6df; }
.pc-sim__addressrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; background: #f7f8fa; border-bottom: 1px solid #e5e7eb; }
.pc-sim__address { flex: 1; min-width: 0; background: #fff; border: 1px solid #dfe3e8; border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 1rem; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sim__ext { min-width: 44px; min-height: 44px; border: 1px dashed transparent; background: none; border-radius: 8px; font-size: 1.15rem; cursor: pointer; }
.pc-sim__ext.is-pinned { border-color: transparent; background: #eef6ee; }
.pc-sim__page { padding: 1.25rem; min-height: 260px; }

/* generic page-template pieces */
.pc-simpg__button { display: block; width: 100%; min-height: 48px; margin: 0.5rem 0; padding: 0.7rem 1rem; font-size: 1.05rem; border-radius: 8px; border: 1px solid #1a73e8; background: #1a73e8; color: #fff; cursor: pointer; }
.pc-simpg__button--plain { background: #fff; color: #374151; border-color: #d1d5db; }
.pc-simpg__result { display: block; width: 100%; text-align: left; padding: 0.8rem 1rem; margin: 0.5rem 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; min-height: 44px; font-size: 1rem; }
.pc-simpg__result strong { display: block; color: #1a5fd0; font-size: 1.05rem; }
/* The address and the "Sponsored" flag are the exercise's decision cues —
   they read at full body size, not as fine print. */
.pc-simpg__url { display: block; color: #137333; font-size: 1rem; }
.pc-simpg__adtag { display: inline-block; font-size: 1rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0.05rem 0.4rem; margin-bottom: 0.2rem; }
.pc-simpg__field { display: block; width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.45rem 0; font-size: 1rem; font-family: inherit; text-align: left; background: #fff; color: #111; min-height: 44px; cursor: default; }
.pc-simpg__field.is-filled { background: #f2f7ff; letter-spacing: 2px; }
.pc-simpg__row { display: flex; width: 100%; text-align: left; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; margin: 0.5rem 0; min-height: 48px; cursor: pointer; background: #fff; font-size: 1rem; }
.pc-simpg__ok { color: #137333; font-weight: 600; }
.pc-simpg__dropdown { display: block; width: 100%; text-align: left; border: 1px solid #b6d0f5; background: #eef4fe; border-radius: 8px; padding: 0.6rem 0.9rem; margin: -0.2rem 0 0.45rem; font-size: 1rem; cursor: pointer; min-height: 44px; }
/* Sits exactly where .pc-simpg__dropdown would, so the missing fill offer is
   something you can see rather than something you have to notice isn't there.
   Explanatory, not decision-bearing — hence 0.95rem rather than the 1rem floor
   the clickable page pieces keep. Not a button: nothing here is clickable. */
.pc-simpg__nooffer { display: block; width: 100%; border: 1px dashed #c4cad2; background: #fafbfc; border-radius: 8px; padding: 0.6rem 0.9rem; margin: -0.2rem 0 0.45rem; font-size: 0.95rem; color: #6b7280; }
.pc-simpg__savebubble { border: 1px solid #b6d0f5; background: #f5f9ff; border-radius: 10px; padding: 0.8rem 0.9rem; margin-top: 0.8rem; display: grid; gap: 0.4rem; }
.pc-simpg__accounthead { display: flex; align-items: center; justify-content: space-between; }
.pc-simpg__avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #1a73e8; background: #eef4fe; color: #1a5fd0; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.pc-simpg__menu { border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); background: #fff; margin: 0.4rem 0 0.6rem auto; max-width: 220px; display: grid; }
.pc-simpg__menuitem { text-align: left; padding: 0.7rem 1rem; border: none; background: none; font-size: 1rem; cursor: pointer; min-height: 44px; }
.pc-simpg__menuitem:hover { background: #f5f7fa; }
.pc-simpg__rownote { color: #6b7280; font-size: 1rem; }

/* glow — the one thing to click. Scoped to .pc-sim and prefixed: a bare
   .is-glow would style anything on the three lesson pages that shares it. */
@keyframes pcSimGlow { 0%,100% { box-shadow: 0 0 0 3px rgba(26,115,232,0.35); } 50% { box-shadow: 0 0 0 7px rgba(26,115,232,0.15); } }
.pc-sim .pc-sim__glow { animation: pcSimGlow 1.6s ease-in-out infinite; outline: 2px solid #1a73e8; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pc-sim .pc-sim__glow { animation: none; } }

/* dialogs */
.pc-sim__overlay { position: absolute; inset: 0; background: rgba(20, 30, 45, 0.35); display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.pc-sim__dialog { background: #fff; border-radius: 12px; padding: 1.1rem 1.25rem; max-width: 340px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.pc-sim__dialog--os { border-radius: 16px; text-align: center; }
.pc-sim__dialog-title { display: block; font-size: 1.05rem; margin-bottom: 0.4rem; }
.pc-sim__dialog-body { font-size: 1rem; color: #4b5563; margin: 0 0 0.9rem; }
.pc-sim__dialog-buttons { display: flex; gap: 0.6rem; justify-content: flex-end; }
.pc-sim__dialog--os .pc-sim__dialog-buttons { justify-content: center; }
.pc-sim__dialog-accept { min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 8px; border: none; background: #1a73e8; color: #fff; font-size: 1rem; cursor: pointer; }
.pc-sim__dialog-cancel { min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 1rem; cursor: pointer; }

/* guide bubble */
.pc-sim__guide { margin-top: 0.9rem; background: #10315c; color: #fff; border-radius: 12px; padding: 0.85rem 1.1rem; font-size: 1.05rem; line-height: 1.5; }
.pc-sim__guide.is-hint { background: #7c4a03; }

/* footer */
.pc-sim__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.pc-sim__footer-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.pc-sim__dots { display: flex; gap: 6px; }
.pc-sim__stepdot { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; }
.pc-sim__stepdot.is-done { background: #1a73e8; }
.pc-sim__stepdot.is-now { background: #1a73e8; outline: 2px solid rgba(26,115,232,0.3); outline-offset: 1px; }
.pc-sim__restart { min-height: 44px; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.95rem; cursor: pointer; color: #374151; }

/* picker + done cards */
.pc-sim--picker { display: grid; gap: 0.8rem; }
.pc-sim__card { text-align: left; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; padding: 1rem 1.1rem; cursor: pointer; display: grid; gap: 0.25rem; font-size: 1rem; }
.pc-sim__card:hover { border-color: #1a73e8; }
.pc-sim__card-check { color: #137333; font-weight: 600; font-size: 0.9rem; }
.pc-sim__card-title { font-size: 1.15rem; }
.pc-sim__card-blurb { color: #4b5563; }
.pc-sim__card-time { color: #6b7280; font-size: 0.9rem; }
.pc-sim--done { text-align: center; padding: 2rem 1.25rem; }
.pc-sim__done-title { font-size: 1.3rem; display: block; margin-bottom: 0.5rem; }
.pc-sim__done-body { color: #4b5563; max-width: 34rem; margin: 0 auto 1rem; }
.pc-sim__done-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.pc-sim__done-link { font-size: 0.95rem; }

@media (max-width: 640px) {
  .pc-sim__desktop { padding: 0.5rem; }
  .pc-sim__page { padding: 0.8rem; min-height: 200px; }
  /* Narrow screens can't fit a long address on one line, and a truncated
     address is the one thing this sim asks people to read. Wrap instead. */
  .pc-sim__address { white-space: normal; overflow-wrap: anywhere; border-radius: 12px; }
}