/* AgentPhone: a cream desk telephone on a desk pad, the second scene next to the book (shared tokens
   and .stage, .btn, .foot, .toast come from /app/app.css). */

.sr-only { position: absolute; margin: -1px; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phone-scene { display: grid; justify-items: center; gap: 26px; }
.foot .link-btn { font-size: 12.5px; }
.foot .demo { font-style: normal; }

/* ---------- the desk pad: cream paper with cloth corners, like the book's cover ---------- */
.desk { position: relative; z-index: 1; width: min(1100px, calc(100vw - 180px)); display: grid; align-items: center;
  grid-template-columns: minmax(210px, 235px) minmax(0, 1fr) minmax(250px, 275px); gap: 0 14px;
  padding: clamp(26px, 3.6vh, 42px) clamp(30px, 3.2vw, 46px); animation: book-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.pad { position: absolute; inset: 0; border-radius: 6px; background-color: #f4eddc;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #3a5c72, #2f4f64 50%, transparent 50%),
    linear-gradient(225deg, #3a5c72, #2f4f64 50%, transparent 50%),
    linear-gradient(45deg, #2f4f64, #2a485c 50%, transparent 50%),
    linear-gradient(315deg, #2f4f64, #2a485c 50%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .5), transparent 70%);
  background-size: 240px, 92px 92px, 92px 92px, 92px 92px, 92px 92px, 100% 100%;
  background-position: 0 0, top left, top right, bottom left, bottom right, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .35),
              0 2px 0 #ddd2b8, 0 4px 0 #cbbd9d, 0 5px 0 #b9aa88,
              0 46px 70px -24px rgba(9, 27, 40, .6), 0 18px 30px -12px rgba(9, 27, 40, .4), 0 3px 6px rgba(9, 27, 40, .22); }
/* a stitched line just inside the edge */
.pad::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(120, 100, 60, .2); border-radius: 3px; pointer-events: none; }
.desk > :not(.pad) { position: relative; }

/* ---------- left: what this is ---------- */
.intro { z-index: 1; display: grid; gap: 12px; align-content: center; }
.intro .brand { width: 112px; transform: rotate(-2.2deg); margin: 0 0 2px -4px; }
.intro .brand .tape { top: -9px; left: 38%; transform: rotate(4deg); }
.intro .overline { margin-bottom: 6px; }
.intro h1 { font: 400 clamp(25px, 2.3vw, 30px)/1.05 var(--serif); letter-spacing: -.035em; color: #17394e; margin: 0; }
.intro h1 em { font-style: italic; }
.intro .lede { font-size: 12.5px; line-height: 1.6; color: #5b6e75; margin: 0; }

/* ---------- middle: the telephone ---------- */
.set { z-index: 2; display: grid; justify-items: center; }
.set-in { width: min(100%, 600px, max(320px, calc((100dvh - 400px) * 1.335))); }
.telephone { display: block; width: 100%; height: auto; overflow: visible; }
.telephone text { font-family: var(--sans); text-anchor: middle; dominant-baseline: middle; }
.telephone .plate { font-size: 8px; font-weight: 700; letter-spacing: .24em; }
.telephone .engrave { font-size: 6.5px; font-weight: 700; letter-spacing: .26em; }
.telephone .digit { font-size: 13px; font-weight: 700; fill: #2c4252; }
.telephone .card-over { font-size: 5.6px; font-weight: 700; letter-spacing: .24em; fill: #3f6f93; }
.telephone .card-num { font: 500 8.6px var(--mono); fill: #17364b; }
#wheel, #handset { transform-box: view-box; }
#wheel { transform-origin: 260px 284px; }
#handset { transform-origin: 260px 140px; transition: transform .3s; }

/* the lamp: green when a phone is paired, amber while pairing, dark without one */
.lamp { fill: url(#g-lamp-off); transition: fill .3s; }
.lamp-glow { fill: #6fd394; opacity: 0; transition: opacity .4s; }
.telephone[data-line="open"] .lamp { fill: url(#g-lamp-on); }
.telephone[data-line="open"] .lamp-glow { opacity: .55; animation: glow 3s ease-in-out infinite; }
.telephone[data-line="pairing"] .lamp { fill: url(#g-lamp-wait); }
.telephone[data-line="pairing"] .lamp-glow { fill: #f2b850; opacity: .6; animation: blink 1s steps(2, jump-none) infinite; }
@keyframes glow { 50% { opacity: .3; } }
@keyframes blink { 50% { opacity: 0; } }

/* ringing: the handset rattles in its cradle */
.telephone.ringing #handset { animation: rattle .09s linear infinite alternate; }
.telephone.ringing .body-g { animation: buzz .07s linear infinite alternate; }
.telephone.ringing .lamp-glow { opacity: .85; }
@keyframes rattle { from { transform: translateY(0) rotate(-1.3deg); } to { transform: translateY(-4px) rotate(1.3deg); } }
@keyframes buzz { from { transform: translateX(-.6px); } to { transform: translateX(.6px); } }

/* ---------- the tag on the cord ---------- */
.cord-tag { position: relative; width: 220px; margin: -6px 0 0 calc(57.4% - 110px); transform: rotate(-3deg); transform-origin: 50% 0;
  filter: drop-shadow(0 10px 12px rgba(60, 46, 18, .3)) drop-shadow(0 1px 1px rgba(60, 46, 18, .22)); animation: sway 7s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-1.4deg); } }
.cord-tag::before { content: ""; position: absolute; left: calc(50% - 1px); top: -14px; width: 2px; height: 26px; border-radius: 2px; background: #9b8a62; z-index: 1; transform: rotate(6deg); }
.tag-card { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 30px 18px 15px;
  background-color: #efe2c1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  clip-path: polygon(17% 0, 83% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); }
/* the brass eyelet */
.tag-card::before { content: ""; position: absolute; top: 9px; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #f4eddc 0 4px, #a8823d 4.5px, #f0d690 6px, #9a7533 7.5px, transparent 8px); }
.t-over { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: .18em; font-weight: 700; color: #8c7f62; text-transform: uppercase; }
.t-over .dot.wait { background: #d99a35; box-shadow: 0 0 0 3px rgba(217, 154, 53, .2); animation: blink 1s steps(2, jump-none) infinite; }
.t-name { font: italic 400 22px/1.15 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.t-num { font: 500 15px var(--mono); color: var(--ink); }
.t-form { display: grid; gap: 9px; justify-items: center; width: 100%; margin-top: 4px; }
.t-form .seg button { padding: 4px 12px; }
.t-form input { width: 100%; height: 34px; border: 0; border-bottom: 1px solid #b9ab88; background: transparent; padding: 0 2px; text-align: center;
  font: 500 14px var(--mono); color: var(--ink); outline: 0; }
.t-form input::placeholder { color: #ad9f7f; }
.t-form input:focus { border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.t-code { font: 500 27px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink); }
.t-note { font-size: 11.5px; line-height: 1.5; color: #75694d; max-width: 25ch; }
.tag-card .btn { margin-top: 6px; height: 34px; padding: 0 16px; }
.tag-card .link-btn { margin-top: 4px; }
.link-btn.danger { color: var(--red); text-decoration-color: rgba(163, 58, 44, .4); }
.link-btn.danger.armed { font-weight: 700; }

/* ---------- right: the slips ---------- */
.slips { z-index: 1; margin-left: -30px; }
.slips-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px 12px; }
.slips-head .overline { margin: 0; }
.count { font: italic 400 14px var(--serif); color: #8c7f62; }
.stack { position: relative; height: 382px; }
.clip { position: absolute; top: 84px; right: 92px; width: 20px; height: 54px; z-index: 30; transform: rotate(5deg);
  filter: drop-shadow(1px 2px 1px rgba(40, 32, 15, .3)); pointer-events: none; }
.stack.empty .clip { display: none; }

/* one slip torn off a "while you were out" pad, printed in blue, filled in by hand */
.msg { --print: #3f6f93; --hand: #1b3a52; position: absolute; left: 0; right: 0; top: calc(102px - var(--i) * 34px); z-index: calc(10 - var(--i));
  transform: rotate(var(--r)); transition: top .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s;
  filter: drop-shadow(0 8px 10px rgba(60, 46, 18, .22)) drop-shadow(0 1px 1px rgba(60, 46, 18, .18)); }
.msg:not(.front) { cursor: pointer; }
.msg:not(.front) .paper { background-color: #f8f3e6; }
.msg:not(.front):hover { top: calc(96px - var(--i) * 34px); }
.msg.arriving { transform: translate(60px, -90px) rotate(12deg); opacity: 0; }
.paper { position: relative; padding: 4px 16px 14px; background-color: #fffdf6; border-radius: 0 0 3px 3px;
  -webkit-mask: radial-gradient(circle at 4px 0, transparent 2.3px, #000 2.8px) 0 0 / 8px 5px repeat-x, linear-gradient(#000, #000) 0 5px / 100% calc(100% - 5px) no-repeat;
          mask: radial-gradient(circle at 4px 0, transparent 2.3px, #000 2.8px) 0 0 / 8px 5px repeat-x, linear-gradient(#000, #000) 0 5px / 100% calc(100% - 5px) no-repeat; }
.m-top { display: flex; align-items: center; gap: 8px; height: 32px; }
.m-top small { font-size: 8.5px; letter-spacing: .2em; font-weight: 700; color: var(--print); }
.m-top b { font: italic 400 17px var(--serif); color: var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-top time { margin-left: auto; font: 10.5px var(--mono); color: #8b8a80; white-space: nowrap; }
.m-head { text-align: center; padding: 5px 0 4px; font-size: 10px; letter-spacing: .3em; font-weight: 700; color: var(--print);
  border-top: 3px double rgba(63, 111, 147, .45); border-bottom: 1px solid rgba(63, 111, 147, .3); }
.m-checks { display: flex; gap: 12px; padding: 8px 0 6px; font-size: 10.5px; color: var(--print); }
.m-checks span { display: inline-flex; align-items: center; gap: 5px; }
.m-checks span::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--print); border-radius: 1px; }
.m-checks .on::before { content: "✓"; display: grid; place-items: center; font: italic 700 13px/1 var(--serif); color: var(--hand); }
.m-label { font-size: 8.5px; letter-spacing: .2em; font-weight: 700; color: var(--print); }
.m-said { margin: 2px 0 0; font: italic 400 16px/24px var(--serif); color: var(--hand); overflow-wrap: anywhere; min-height: 48px;
  background: repeating-linear-gradient(transparent 0 23px, rgba(63, 111, 147, .22) 23px 24px); }
.m-said mark { background: linear-gradient(transparent 58%, rgba(149, 198, 226, .5) 58%); color: inherit; }
.m-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: #66777c; }
.m-foot .pill.code { height: 26px; font-size: 12.5px; cursor: copy; }
.m-foot .pill.code:hover { box-shadow: 0 0 0 1px #b9d3bf; }
.m-foot .btn { height: 28px; padding: 0 11px; font-size: 12px; }
.m-foot .handed { display: inline-flex; align-items: center; gap: 6px; }
/* the setup guide: a note on the same paper as the slips */
.guide .paper { padding: 16px 18px 14px; transform: rotate(.8deg); filter: drop-shadow(0 8px 10px rgba(60, 46, 18, .22)) drop-shadow(0 1px 1px rgba(60, 46, 18, .18));
  font-size: 12.5px; line-height: 1.55; color: #4d5f66; }
.guide ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.guide li::marker { font: italic 400 15px var(--serif); color: #9b8e70; }
.guide b { color: var(--ink); font-weight: 600; }
.guide a { color: var(--blue); }
.g-lede { margin: 2px 0 12px; font: italic 400 15.5px/1.5 var(--serif); color: #1b3a52; }
.g-fine { margin: 12px 0 0; font-size: 11px; color: #978d76; }
.g-warn { display: inline-block; margin-bottom: 10px; font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a5a17;
  border: 1px solid #d9b77a; background: #fbf0d7; padding: 4px 6px 3px; border-radius: 4px; }
.g-url { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 8px; background: #f6f1e5; border: 1px dashed #d8ceb5; border-radius: 5px; }
.g-url code { flex: 1; min-width: 0; font: 10.5px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.g-url span { flex: 1; font-size: 11px; color: #8b8a80; }
.g-url .pill { flex: none; cursor: copy; }

/* the pairing QR code and the steps by hand */
.g-qr { width: 156px; margin: 4px auto 12px; padding: 10px; background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px #e8e0cd; }
.g-qr svg { display: block; width: 100%; height: auto; }
.g-qr svg rect[fill="white"], .g-qr svg rect[fill="#ffffff"] { fill: #fff; }
.guide .g-lede { text-align: center; }
.g-text { margin: 0 0 10px; text-align: center; }
.g-hand { border-top: 1px solid var(--rule); padding-top: 8px; }
.g-hand summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--blue); }
.g-hand ol { margin-top: 10px; }
.guide .btn { display: flex; margin: 6px auto 0; }

/* the setup page on the phone (opened from the QR code) */
.pair-page { display: grid; gap: 16px; justify-items: start; width: min(440px, 100%); padding: 28px 24px 26px; background: var(--paper);
  border-radius: 4px 9px 7px 4px; box-shadow: 0 26px 50px -20px rgba(9, 27, 40, .55), 0 3px 8px rgba(9, 27, 40, .2); animation: book-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.pair-page .photo { width: 130px; transform: rotate(-2deg); margin-left: -6px; }
.pair-page .overline { margin-bottom: 6px; }
.pair-page h1 { font: 400 34px/1.05 var(--serif); letter-spacing: -.035em; color: #17394e; margin: 0; }
.pair-page h1 em { font-style: italic; }
.pp-status { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; width: 100%; border-radius: 7px; background: #f3eddf; font-size: 13.5px; font-weight: 600; color: #6f6650; }
.pp-status.ok { background: var(--green-bg); color: var(--green); }
.pp-status .dot.wait { background: #d99a35; box-shadow: 0 0 0 3px rgba(217, 154, 53, .2); animation: blink 1s steps(2, jump-none) infinite; }
.pp-done { margin: 0; color: #5b6e75; line-height: 1.6; }
.pair-page .seg button { padding: 7px 16px; font-size: 13px; }
.pp-steps { margin: 0; padding-left: 22px; display: grid; gap: 16px; font-size: 14.5px; line-height: 1.55; color: #4d5f66; }
.pp-steps li::marker { font: italic 400 19px var(--serif); color: #9b8e70; }
.pp-steps b { color: var(--ink); font-weight: 600; }
.pp-steps .btn { display: flex; width: 100%; height: 46px; margin-top: 10px; font-size: 14.5px; text-decoration: none; }

.blank-slip { position: absolute; left: 0; right: 0; top: 102px; padding: 26px 18px; text-align: center; background: #fffdf6; border-radius: 3px; transform: rotate(-1deg);
  box-shadow: 0 8px 18px -10px rgba(60, 46, 18, .35); color: #6e7a7b; font-size: 12.5px; line-height: 1.6; }
.blank-slip b { display: block; font: italic 400 22px var(--serif); color: var(--ink); margin-bottom: 4px; }

/* ---------- smaller windows ---------- */
@media (max-height: 760px) and (min-width: 1001px) {
  .intro .brand { display: none; }
  .intro .lede { display: none; }
}
@media (max-width: 1000px) {
  .desk { grid-template-columns: minmax(0, 1fr); gap: 34px; width: min(560px, calc(100vw - 40px)); }
  .set { order: -1; }
  .set-in { width: min(100%, 460px); }
  .slips { margin: 0; }
  .intro .brand { display: none; }
}