/* Live edition only: the five README images rebuilt as HTML.
   Loaded after unpaid-intern.css. Token colors only, so they follow light and dark. */

.p-intern .mock { margin: 0; background: var(--ui-card); color: var(--ui-ink); border: 2.5px solid var(--ui-line);
  border-radius: var(--r-card); box-shadow: 6px 6px 0 var(--ui-hard); padding: clamp(1.1rem, 3vw, 1.6rem); }
.p-intern .mock .chip, .p-intern .pile .chip { margin-bottom: .75rem; }
.p-intern .chip.plain { background: var(--ui-card); color: var(--ui-ink); }

/* a list with ink dots, used by the desk card and the brief */
.p-intern ul.dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.p-intern ul.dots li { position: relative; padding-left: 1.35rem; line-height: 1.45; }
.p-intern ul.dots li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ui-ink); }
.p-intern ul.dots b { display: block; font-weight: 800; }
.p-intern ul.dots li > span { color: var(--ui-ink2); font-size: .95rem; }

/* 1. the pile, the intern, the desk */
.p-intern .flow { margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: center; }
.p-intern .slips { list-style: none; margin: 0; padding: .3rem .4rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .9rem; }
.p-intern .slip { --tilt: 0deg; display: grid; gap: .3rem; align-content: start; min-height: 5.4rem; padding: .75rem .9rem .85rem;
  background: var(--ui-card); color: var(--ui-ink); border: 2.5px solid var(--ui-line); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ui-hard); transform: rotate(var(--tilt)); font-weight: 600; line-height: 1.3; }
.p-intern .slip .k { opacity: .8; }
.p-intern .slip.pink { background: var(--ui-pink); color: var(--ui-on-fill); }
.p-intern .slip.yel { background: var(--ui-yel); color: var(--ui-on-fill); }
.p-intern .slip:nth-child(1) { --tilt: -3deg; }
.p-intern .slip:nth-child(2) { --tilt: 2.5deg; }
.p-intern .slip:nth-child(3) { --tilt: 2deg; margin-left: .6rem; }
.p-intern .slip:nth-child(4) { --tilt: -2deg; margin-right: -.6rem; }
.p-intern .slip:nth-child(5) { --tilt: -2.5deg; }
.p-intern .slip:nth-child(6) { --tilt: 3deg; }
.p-intern .slip:nth-child(7) { --tilt: 1.5deg; margin-left: .6rem; }
.p-intern .slip:nth-child(8) { --tilt: -1.5deg; margin-right: -.6rem; }
.p-intern .hand { display: grid; justify-items: center; gap: .5rem; }
.p-intern .hand img { width: 76px; height: auto; }
.p-intern .hand .arr { width: 46px; height: 46px; color: var(--ui-ink); }

/* 2. the morning brief */
.p-intern .mock-h { display: flex; align-items: center; gap: .8rem; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--ui-line); }
.p-intern .mock-h img { width: 46px; height: auto; flex: none; }
.p-intern .mock-h > div { min-width: 0; }
.p-intern .mock-h b { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.p-intern .mock-h .k { display: block; margin-top: .2rem; line-height: 1.5; color: var(--ui-ink2); }
.p-intern .brief .grp + .grp { margin-top: 1.1rem; }
.p-intern .brief .chip { margin-bottom: .55rem; }
.p-intern .brief ul.dots { gap: .5rem; }
.p-intern .mock code { white-space: nowrap; }
@media (max-width: 340px) { .p-intern .mock code, .p-intern .mock-h .k { white-space: normal; overflow-wrap: anywhere; } }

/* 3. /who */
.p-intern .ask { width: fit-content; margin: 0 0 1.1rem auto; padding: .5rem 1rem; border: 2.5px solid var(--ui-line); border-radius: 99px 99px 6px 99px;
  background: var(--ui-pink); color: var(--ui-on-fill); font: 800 .95rem/1.2 var(--mono); }
.p-intern .person { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.p-intern .person b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.p-intern .avatar { width: 2.7rem; height: 2.7rem; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ui-line);
  background: var(--ui-yel); color: var(--ui-on-fill); font-weight: 800; font-size: .85rem; }
.p-intern .facts { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem 1rem; margin: 0; }
.p-intern .facts dt { font-weight: 700; color: var(--ui-ink2); font-size: .9rem; padding-top: .1rem; }
.p-intern .facts dd { margin: 0; line-height: 1.45; }

/* 4. the folder */
.p-intern .fi { width: 2.1rem; height: auto; flex: none; }
.p-intern .fi path { fill: var(--ui-card); stroke: var(--ui-line); stroke-width: 2.5; stroke-linejoin: round; }
.p-intern .fi.pink path { fill: var(--ui-pink); }
.p-intern .fi.yel path { fill: var(--ui-yel); }
.p-intern .tree .root { display: flex; align-items: center; gap: .7rem; font-size: 1.12rem; }
.p-intern .tree .root b { font-weight: 800; letter-spacing: -.01em; }
.p-intern .dirs { list-style: none; margin: .5rem 0 0 1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--ui-line); }
.p-intern .dirs li { display: grid; grid-template-columns: 2.1rem 6.6rem minmax(0, 1fr); gap: .2rem .8rem; align-items: center; padding: .6rem 0; }
.p-intern .dirs li + li { border-top: 1.5px solid color-mix(in srgb, var(--ui-line) 16%, transparent); }
.p-intern .dirs b { font-weight: 800; font-size: .98rem; }
.p-intern .dirs span { color: var(--ui-ink2); font-size: .92rem; line-height: 1.4; }

/* 5. the inbox: files in, filed out */
.p-intern .inbox { display: grid; }
.p-intern .files { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.p-intern .files li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.p-intern .files b { display: block; font-family: var(--mono); font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.p-intern .files span { color: var(--ui-ink2); font-size: .92rem; line-height: 1.4; }
.p-intern .file { width: 1.6rem; height: auto; }
.p-intern .file path { fill: var(--ui-card); stroke: var(--ui-line); stroke-width: 2.5; stroke-linejoin: round; }
.p-intern .file .ear { fill: none; }
.p-intern .inbox .ask { margin: .2rem 0 1.2rem auto; }
.p-intern .inbox ul.dots { gap: .6rem; }

@media (max-width: 760px) {
  .p-intern .flow { grid-template-columns: 1fr; }
  .p-intern .hand { grid-auto-flow: column; justify-content: center; align-items: center; gap: 1.2rem; }
  .p-intern .hand img { width: 60px; }
  .p-intern .hand .arr { transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .p-intern .slip { min-height: 0; font-size: .93rem; }
  .p-intern .facts { grid-template-columns: 1fr; gap: .1rem; }
  .p-intern .facts dd + dt { margin-top: .55rem; }
  .p-intern .dirs li { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .p-intern .dirs span { grid-column: 2; }
}